paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-15 11:22:04 +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%); 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 { #bots_lists_navbar .active a {
color: hsl(0deg 0% 87%); color: hsl(0deg 0% 87%);
background-color: var(--color-background); background-color: var(--color-background);

30
web/styles/zulip.css
View File

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