diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 55caa160f0..6fb83186ca 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -611,6 +611,8 @@ --color-background-alert-word: hsl(18deg 100% 84%); --color-buddy-list-highlighted-user: hsl(120deg 12.3% 71.4% / 38%); --color-border-sidebar: hsl(0deg 0% 87%); + --color-text-sidebar-base: hsl(0deg 0% 0%); + --color-border-sidebar-subheader: hsl(0deg 0% 0% / 15%); /* Recent view */ --color-border-recent-view-row: hsl(0deg 0% 87%); @@ -1067,6 +1069,8 @@ --color-background-alert-word: hsl(22deg 70% 35%); --color-buddy-list-highlighted-user: hsl(136deg 25% 73% / 20%); --color-border-sidebar: hsl(0deg 0% 0% / 20%); + --color-text-sidebar-base: hsl(0deg 0% 100%); + --color-border-sidebar-subheader: hsl(0deg 0% 100% / 15%); /* Recent view */ --color-border-recent-view-row: hsl(0deg 0% 0% / 20%); diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index c6503f8b5b..d4ba41d191 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -831,15 +831,6 @@ background-color: hsl(51deg 100% 23%); } - .streams_subheader { - color: hsl(240deg 11% 85%); - - & .streams_subheader_name::before, - .streams_subheader_name::after { - border-color: hsl(240deg 11% 85%); - } - } - .sub-unsub-message span::before, .sub-unsub-message span::after, .date_row span::before, diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css index 2a92cd7325..4f5c2a04d6 100644 --- a/web/styles/left_sidebar.css +++ b/web/styles/left_sidebar.css @@ -1510,41 +1510,45 @@ li.topic-list-item { } .streams_subheader { - font-size: 0.8em; + /* 14px at 16px/1em */ + font-size: 0.875em; font-weight: normal; /* 16px line-height at 0.8em (11.2px at 14px legacy em) */ line-height: 1.4286em; + letter-spacing: 0.04em; padding-left: var(--left-sidebar-toggle-width-offset); cursor: pointer; text-align: center; margin-right: var(--left-sidebar-right-margin); - color: hsl(240deg 10% 50%); - & .streams_subheader_name { + & .streams-subheader-wrapper { display: flex; flex-direction: row; width: 100%; left: 0.5em; right: 0.5em; - opacity: 0.5; + color: var(--color-text-sidebar-base); } - & .streams_subheader_name::before, - .streams_subheader_name::after { + & .streams-subheader-wrapper::before, + .streams-subheader-wrapper::after { content: " "; flex: 1 1; vertical-align: middle; margin: auto; - border: 0.5px solid hsl(240deg 10% 50%); - opacity: 0.2; + border-top: 1px solid var(--color-border-sidebar-subheader); } - & .streams_subheader_name::before { - margin-right: 0.5em; + & .streams-subheader-wrapper::before { + margin-right: 0.2em; } - & .streams_subheader_name::after { - margin-left: 0.5em; + & .streams-subheader-wrapper::after { + margin-left: 0.2em; + } + + .streams-subheader-name { + opacity: 0.4; } } diff --git a/web/templates/streams_subheader.hbs b/web/templates/streams_subheader.hbs index de13b0167e..100f0e2845 100644 --- a/web/templates/streams_subheader.hbs +++ b/web/templates/streams_subheader.hbs @@ -1,3 +1,7 @@
- {{ subheader_name }} + + + {{ subheader_name }} + +