paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: Convert Sass-style variables to CSS custom properties.

Browse Source 
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2025-01-29 13:08:33 -08:00
committed by Tim Abbott
parent ed0f5bd6ed
commit 997d77f0dd
4 changed files with 63 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/styles/alerts.css
View File

@@ -1,5 +1,7 @@
$alert-red: hsl(16deg 60% 45%);
$alert-error-red: hsl(0deg 80% 40%);
:root {
--color-alert-red: hsl(16deg 60% 45%);
--color-alert-error-red: hsl(0deg 80% 40%);
}
.alert-display {
display: none;
@@ -159,9 +161,9 @@ $alert-error-red: hsl(0deg 80% 40%);
text-shadow: none;
color: $alert-red;
border: 1px solid $alert-red;
box-shadow: 0 0 2px $alert-red;
color: var(--color-alert-red);
border: 1px solid var(--color-alert-red);
box-shadow: 0 0 2px var(--color-alert-red);
&::before {
float: left;
@@ -183,12 +185,12 @@ $alert-error-red: hsl(0deg 80% 40%);
}
&.alert-error {
color: $alert-error-red;
border: 1px solid $alert-error-red;
box-shadow: 0 0 2px $alert-error-red;
color: var(--color-alert-error-red);
border: 1px solid var(--color-alert-error-red);
box-shadow: 0 0 2px var(--color-alert-error-red);
&::before {
color: $alert-error-red;
color: var(--color-alert-error-red);
}
}

59
web/styles/portico/integrations.css
View File

@@ -1,8 +1,10 @@
$light-blue-border: hsl(208deg 46% 93%);
$border-green: hsl(170deg 47% 53%);
$hover-green: hsl(170deg 65% 85%);
$text-green: hsl(170deg 72% 32%);
$category-text: hsl(219deg 23% 33%);
:root {
--color-integrations-light-blue-border: hsl(208deg 46% 93%);
--color-integrations-border-green: hsl(170deg 47% 53%);
--color-integrations-hover-green: hsl(170deg 65% 85%);
--color-integrations-text-green: hsl(170deg 72% 32%);
--color-integrations-category-text: hsl(219deg 23% 33%);
}
.portico-landing.integrations {
color: hsl(0deg 0% 27%);
@@ -118,14 +120,15 @@ $category-text: hsl(219deg 23% 33%);
height: 45px;
padding: 0 20px 0 50px;
border-radius: 40px;
border: 1px solid $light-blue-border;
border: 1px solid
var(--color-integrations-light-blue-border);
display: block;
color: hsl(0deg 0% 33%);
margin-bottom: 10px;
transition: border-color linear 0.2s;
&:focus {
border-color: $border-green;
border-color: var(--color-integrations-border-green);
outline: 0;
}
@@ -144,7 +147,7 @@ $category-text: hsl(219deg 23% 33%);
left: 20px;
top: 13px;
font-size: 19px;
color: $border-green;
color: var(--color-integrations-border-green);
}
@media (width <= 768px) {
@@ -191,12 +194,12 @@ $category-text: hsl(219deg 23% 33%);
border-radius: 5px;
transition: none 0.3s ease;
transition-property: background-color, color;
color: $category-text;
color: var(--color-integrations-category-text);
&.selected,
&:hover {
background-color: $hover-green;
color: $text-green;
background-color: var(--color-integrations-hover-green);
color: var(--color-integrations-text-green);
cursor: pointer;
}
}
@@ -235,7 +238,7 @@ $category-text: hsl(219deg 23% 33%);
justify-content: space-between;
margin-left: 25px;
margin-right: 25px;
border: 1px solid $light-blue-border;
border: 1px solid var(--color-integrations-light-blue-border);
}
& i {
@@ -257,17 +260,20 @@ $category-text: hsl(219deg 23% 33%);
}
& h4 {
border-left: 1px solid $light-blue-border;
border-right: 1px solid $light-blue-border;
border-bottom: 1px solid $light-blue-border;
border-left: 1px solid
var(--color-integrations-light-blue-border);
border-right: 1px solid
var(--color-integrations-light-blue-border);
border-bottom: 1px solid
var(--color-integrations-light-blue-border);
transition: none 0.3s ease;
transition-property: background-color, color;
font-size: 0.9em;
&.selected,
&:hover {
background-color: $hover-green;
color: $text-green;
background-color: var(--color-integrations-hover-green);
color: var(--color-integrations-text-green);
}
}
}
@@ -314,14 +320,14 @@ $category-text: hsl(219deg 23% 33%);
padding: 0 4px;
margin: 7px 5px;
border-radius: 5px;
border: 1px solid $light-blue-border;
color: $category-text;
border: 1px solid var(--color-integrations-light-blue-border);
color: var(--color-integrations-category-text);
text-align: center;
transition: none 0.3s ease;
transition-property: border-color;
&:hover {
border-color: $border-green;
border-color: var(--color-integrations-border-green);
}
&.legacy {
@@ -510,12 +516,14 @@ $category-text: hsl(219deg 23% 33%);
border-radius: 5px;
transition: none 0.3s ease;
transition-property: background-color, color;
background-color: $light-blue-border;
color: $category-text;
background-color: var(
--color-integrations-light-blue-border
);
color: var(--color-integrations-category-text);
&:hover {
background-color: $hover-green;
color: $text-green;
background-color: var(--color-integrations-hover-green);
color: var(--color-integrations-text-green);
}
}
}
@@ -548,7 +556,8 @@ $category-text: hsl(219deg 23% 33%);
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid $light-blue-border;
border-bottom: 1px solid
var(--color-integrations-light-blue-border);
}
@media (width <= 768px) {

8
web/styles/right_sidebar.css
View File

@@ -1,5 +1,7 @@
/* Width of emoji used by user to display status. */
$user_status_emoji_width: 24px;
:root {
/* Width of emoji used by user to display status. */
--user-status-emoji-width: 24px;
}
.right-sidebar {
& a:hover {
@@ -362,7 +364,7 @@ $user_status_emoji_width: 24px;
.user-name {
display: inline-block;
max-width: calc(100% - $user_status_emoji_width);
max-width: calc(100% - var(--user-status-emoji-width));
overflow-x: hidden;
text-overflow: ellipsis;
}

24
web/styles/settings.css
View File

@@ -1,7 +1,9 @@
/* The height of the settings header (including tab switcher). */
$settings_header_height: 45px;
/* The width of the settings sidebar. */
$settings_sidebar_width: 255px;
:root {
/* The height of the settings header (including tab switcher). */
--settings-header-height: 45px;
/* The width of the settings sidebar. */
--settings-sidebar-width: 255px;
}
label {
margin: 0;
@@ -1314,12 +1316,12 @@ label.preferences-radio-choice-label {
.sidebar-wrapper {
float: left;
position: relative;
width: $settings_sidebar_width;
width: var(--settings-sidebar-width);
height: 100%;
.tab-container {
box-sizing: border-box;
height: $settings_header_height;
height: var(--settings-header-height);
padding: 6px;
background-color: var(--color-background-modal-bar);
border-bottom: 1px solid var(--color-border-modal-bar);
@@ -1352,7 +1354,7 @@ label.preferences-radio-choice-label {
}
.sidebar {
height: calc(100% - $settings_header_height);
height: calc(100% - var(--settings-header-height));
overflow-y: auto;
border-right: 1px solid var(--color-border-modal);
@@ -1486,14 +1488,14 @@ label.preferences-radio-choice-label {
.content-wrapper {
position: absolute;
left: $settings_sidebar_width;
width: calc(100% - $settings_sidebar_width);
left: var(--settings-sidebar-width);
width: calc(100% - var(--settings-sidebar-width));
height: 100%;
overflow: hidden;
.settings-header {
width: 100%;
height: $settings_header_height;
height: var(--settings-header-height);
box-sizing: border-box;
border-bottom: 1px solid var(--color-border-modal-bar);
background-color: var(--color-background-modal-bar);
@@ -1508,7 +1510,7 @@ label.preferences-radio-choice-label {
#settings_content {
position: relative;
width: 100%;
height: calc(100% - $settings_header_height);
height: calc(100% - var(--settings-header-height));
float: left;
overflow: auto;