paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-14 19:06:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

icons: Implement monochrome colors and scaled active state.

Browse Source
This commit is contained in:
Karl Stolley
2023-07-17 15:35:29 -05:00
committed by Tim Abbott
parent 2a8f14e40a
commit b05f76c29e
2 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/styles/dark_theme.css
View File

@@ -1376,11 +1376,6 @@
border-bottom: 1px solid hsl(0deg 0% 100%);
}
.star:not(.empty-star),
.empty-star:hover {
color: hsl(126deg 66% 72% / 75%);
}
#bots_lists_navbar .active a {
color: hsl(0deg 0% 87%);
background-color: var(--color-background);

30
web/styles/zulip.css
View File

@@ -174,6 +174,8 @@ body {
/* Icon colors */
--color-icon-bot: hsl(180deg 8% 65% / 100%);
--color-message-action-visible: hsl(216deg 43% 20% / 50%);
--color-message-action-interactive: hsl(216deg 43% 20% / 100%);
/* Message feed loading indicator colors */
--color-zulip-logo: hsl(0deg 0% 0% / 34%);
@@ -231,6 +233,8 @@ body {
/* Icon colors */
--color-icon-bot: hsl(180deg 5% 50% / 100%);
--color-message-action-visible: hsl(217deg 41% 90% / 50%);
--color-message-action-interactive: hsl(217deg 41% 90% / 100%);
/* Message feed loading indicator colors */
--color-zulip-logo: hsl(0deg 0% 100% / 50%);
@@ -1170,6 +1174,7 @@ td.pointer {
}
.message_controls {
font-size: 16px;
/* This is a bit tricky; we need to reserve space for the message
controls even when the message isn't hovered, so that hover
doesn't disturb the layout. Usually that would be just
@@ -1183,11 +1188,19 @@ td.pointer {
text-align: center;
display: inline-block;
position: relative;
color: hsl(0deg 0% 73%);
color: var(--color-message-action-visible);
> i {
vertical-align: middle;
}
&:active {
scale: 0.92;
}
&:hover {
color: var(--color-message-action-interactive);
}
}
.actions_hover {
@@ -1204,12 +1217,6 @@ td.pointer {
word-wrap: unset;
}
> .reaction_button {
&:hover {
color: hsl(200deg 100% 40%);
}
}
> .view_read_receipts {
font-size: 14px;
height: 16px;
@@ -1224,7 +1231,6 @@ td.pointer {
&:hover {
cursor: pointer;
color: hsl(200deg 100% 40%);
}
}
@@ -1265,10 +1271,9 @@ td.pointer {
.star_container {
&:not(.empty-star) {
color: hsl(106deg 77% 29%);
/* Opacity/visibility as though the message is hovered. */
opacity: 1 !important;
/* Color, opacity, and visibility, as though the message is hovered. */
color: var(--color-message-action-interactive);
opacity: 1;
visibility: visible !important;
}
}
@@ -1277,7 +1282,6 @@ td.pointer {
.star {
&:hover {
cursor: pointer;
color: hsl(153deg 80% 25%);
}
}