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

left_sidebar: Change CSS for fading muted stream. 

Previously, muted streams in the left sidebar were faded using
opacity: 0.5, and on hover, the opacity was increased to 0.75.
This opacity was applied to all elements within the muted stream,
including the stream-privacy icon, names of the stream and topics
within, and the unread_count.

In this PR, we changed this behavior to handle opacity for each
element separately. We changed the opacity of the stream-privacy icon
and unread_count, while for the text (names of stream and topics),
we changed the alpha factor for the hsla color property.

The reason for this change is that we can have different opacity levels
for the unread_count and other elements. This will allow us to add
feature in next commits in this PR to set the opacity of unread_count
to 1 while keeping it at 0.5/0.75 for other elements in the case of
muted streams with unread messages in unmuted topics.

Fixes part of #24243
This commit is contained in:
Hardik Dharmani 2023-04-22 21:40:00 +05:30 committed by Tim Abbott
parent 2d118f098a
commit 8701d546f3
2 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/styles/dark_theme.css
View File

@ -25,8 +25,23 @@
}
}
& ul.filters a:hover {
color: inherit;
& ul.filters {
color: hsl(236deg 33% 90%);
& a:hover {
color: inherit;
}
& li.muted_topic,
li.out_of_home_view {
color: hsl(236deg 33% 90%/50%);
}
& li.out_of_home_view {
&:hover {
color: hsl(236deg 33% 90%/ 75%);
}
}
}
/************************* MODAL DARK THEME *******************/

22
web/styles/left_sidebar.css
View File

@ -323,6 +323,7 @@ li.show-more-topics {
ul.filters {
list-style-type: none;
margin-left: 0;
color: hsl(0deg 0% 20% / 100%);
& a {
color: inherit;
@ -335,12 +336,29 @@ ul.filters {
& li.muted_topic,
li.out_of_home_view {
opacity: 0.5;
color: hsl(0deg 0% 20% / 50%);
.stream-privacy {
opacity: 0.5;
}
& .unread_count {
opacity: 0.5;
}
}
& li.out_of_home_view {
&:hover {
opacity: 0.75;
color: hsla(0deg 0% 20% / 75%);
.stream-privacy {
opacity: 0.75;
}
.unread_count {
opacity: 0.75;
}
}
& li.muted_topic {