Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

global css: Convert SASS variables to CSS custom properties.

This commit is contained in:
evykassirer 2023-03-06 16:18:07 -08:00 committed by Tim Abbott
parent e61a092f1e
commit caba06e93d
1 changed files with 55 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
web/styles/zulip.css
View File

@ -1,28 +1,3 @@
/*
This is the header, aka the navbar.
*/
$header_height: 40px;
$header_height_sm: 30px;
/*
We have a 10px gutter below the header,
which often needs to be respected by both
the elements above it and below it on
the y-axis, due to absolute positioning.
*/
$header_padding_bottom: 10px;
/*
Our sidebars (and anything that top-align
with them) go beneath the header.
*/
$sidebar_top: calc($header_height + $header_padding_bottom);
$sidebar_top_sm: calc($header_height_sm + $header_padding_bottom);
$left_sidebar_collapse_widget_gutter: 10px;
$left_sidebar_width: 270px;
$right_sidebar_width: 250px;
body, body,
html { html {
width: 100%; width: 100%;
@ -55,6 +30,31 @@ body,
--color-default-text: hsl(0, 0%, 15%); --color-default-text: hsl(0, 0%, 15%);
--color-date: hsl(0, 0%, 15%, 0.75); --color-date: hsl(0, 0%, 15%, 0.75);
/*
This is the header, aka the navbar.
*/
--header-height: 40px;
@media (width < $sm_min) {
--header-height: 30px;
}
/*
We have a 10px gutter below the header,
which often needs to be respected by both
the elements above it and below it on
the y-axis, due to absolute positioning.
*/
--header-padding-bottom: 10px;
/*
Our sidebars (and anything that top-align
with them) go beneath the header.
*/
--sidebar-top: calc(var(--header-height) + var(--header-padding-bottom));
--left-sidebar-collapse-widget-gutter: 10px;
--left-sidebar-width: 270px;
--right-sidebar-width: 250px;
} }
:root.dark-theme { :root.dark-theme {
@ -173,7 +173,7 @@ p.n-margin {
.top-messages-logo { .top-messages-logo {
/* Since padding under message header is not transparent /* Since padding under message header is not transparent
we need to position it below the padding. */ we need to position it below the padding. */
padding-top: $header_padding_bottom; padding-top: var(--header-padding-bottom);
} }
.alert-zulip-logo, .alert-zulip-logo,
@ -267,8 +267,8 @@ p.n-margin {
position: fixed; position: fixed;
z-index: 102; /* Needs to be higher than .alert-bar-container */ z-index: 102; /* Needs to be higher than .alert-bar-container */
width: 100%; width: 100%;
height: $header_height; height: var(--header-height);
padding-bottom: $header_padding_bottom; padding-bottom: var(--header-padding-bottom);
/* Since the headers are sticky, we need non-transparent background. */ /* Since the headers are sticky, we need non-transparent background. */
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
} }
@ -403,8 +403,8 @@ p.n-margin {
} }
.column-right { .column-right {
width: $right_sidebar_width; width: var(--right-sidebar-width);
max-width: $right_sidebar_width; max-width: var(--right-sidebar-width);
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@ -470,8 +470,8 @@ p.n-margin {
} }
.column-left { .column-left {
width: $left_sidebar_width; width: var(--left-sidebar-width);
max-width: $left_sidebar_width; max-width: var(--left-sidebar-width);
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -484,13 +484,13 @@ p.n-margin {
.column-left .left-sidebar, .column-left .left-sidebar,
.column-right .right-sidebar { .column-right .right-sidebar {
position: fixed; position: fixed;
margin-top: $sidebar_top; margin-top: var(--sidebar-top);
z-index: 100; z-index: 100;
} }
.column-left .left-sidebar { .column-left .left-sidebar {
width: $left_sidebar_width; width: var(--left-sidebar-width);
padding-left: $left_sidebar_collapse_widget_gutter; padding-left: var(--left-sidebar-collapse-widget-gutter);
} }
.column-right .right-sidebar { .column-right .right-sidebar {
@ -506,9 +506,9 @@ p.n-margin {
.column-middle, .column-middle,
#compose-content { #compose-content {
margin-right: $right_sidebar_width; margin-right: var(--right-sidebar-width);
margin-left: calc( margin-left: calc(
$left_sidebar_width + $left_sidebar_collapse_widget_gutter var(--left-sidebar-width) + var(--left-sidebar-collapse-widget-gutter)
); );
position: relative; position: relative;
} }
@ -1105,14 +1105,10 @@ td.pointer {
.message_header { .message_header {
position: sticky; position: sticky;
top: $sidebar_top; top: var(--sidebar-top);
z-index: 3; z-index: 3;
box-shadow: 0 -1px 0 0 hsl(0, 0%, 100%); box-shadow: 0 -1px 0 0 hsl(0, 0%, 100%);
@media (width < $sm_min) {
top: $sidebar_top_sm;
}
&.sticky_header { &.sticky_header {
.recipient_row_date { .recipient_row_date {
display: block; display: block;
@ -1733,9 +1729,9 @@ div.focused_table {
#message_view_header { #message_view_header {
z-index: 2; z-index: 2;
float: left; float: left;
height: $header_height; height: var(--header-height);
width: 100%; width: 100%;
line-height: $header_height; line-height: var(--header-height);
font-size: 16px; font-size: 16px;
display: flex; display: flex;
align-content: flex-start; align-content: flex-start;
@ -1913,7 +1909,7 @@ div.focused_table {
#searchbox, #searchbox,
#searchbox_legacy { #searchbox_legacy {
width: 100%; width: 100%;
height: $header_height; height: var(--header-height);
.navbar-search:not(.expanded) { .navbar-search:not(.expanded) {
display: none; display: none;
@ -1956,7 +1952,7 @@ div.focused_table {
#search_query { #search_query {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
height: $header_height; height: var(--header-height);
padding: 0; padding: 0;
padding-left: 5px; padding-left: 5px;
padding-right: 40px; padding-right: 40px;
@ -1964,7 +1960,7 @@ div.focused_table {
border-radius: 0; border-radius: 0;
font-family: "Source Sans 3", sans-serif; font-family: "Source Sans 3", sans-serif;
font-weight: 300; font-weight: 300;
line-height: $header_height; line-height: var(--header-height);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -2644,7 +2640,7 @@ select.invite-as {
} }
#message_feed_container { #message_feed_container {
padding-top: $sidebar_top; padding-top: var(--sidebar-top);
} }
.screen { .screen {
@ -2783,8 +2779,8 @@ select.invite-as {
/* We use both margin and padding to /* We use both margin and padding to
hide little artifacts from showing up in hide little artifacts from showing up in
the gutter below the navbar. */ the gutter below the navbar. */
margin-top: $header_height; margin-top: var(--header-height);
padding: $header_padding_bottom 15px 0 15px; padding: var(--header-padding-bottom) 15px 0 15px;
height: 100%; height: 100%;
right: 0; right: 0;
} }
@ -2847,12 +2843,12 @@ select.invite-as {
/* We use both margin and padding to /* We use both margin and padding to
hide little artifacts from showing up in hide little artifacts from showing up in
the gutter below the navbar. */ the gutter below the navbar. */
margin-top: $header_height; margin-top: var(--header-height);
padding-top: $header_padding_bottom; padding-top: var(--header-padding-bottom);
height: 100%; height: 100%;
padding-left: 10px; padding-left: 10px;
width: $left_sidebar_width; width: var(--left-sidebar-width);
} }
} }
} }
@ -2934,21 +2930,21 @@ select.invite-as {
#searchbox, #searchbox,
#searchbox_legacy, #searchbox_legacy,
.header { .header {
line-height: $header_height_sm; line-height: var(--header-height);
height: $header_height_sm; height: var(--header-height);
} }
.spectator_narrow_login_button { .spectator_narrow_login_button {
height: $header_height_sm !important; height: var(--header-height) !important;
} }
#search_query { #search_query {
height: $header_height_sm !important; height: var(--header-height) !important;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
#streamlist-toggle-button { #streamlist-toggle-button {
height: $header_height_sm; height: var(--header-height);
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
@ -2981,7 +2977,7 @@ select.invite-as {
} }
#floating_recipient_bar { #floating_recipient_bar {
top: $sidebar_top_sm; top: var(--sidebar-top);
} }
.message_content { .message_content {