paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark-mode: Change emoji reaction overlay to be dark mode compatible.

Browse Source 
This changes it to be compatible with the dark-mode which involves one
change to light mode of changing a grey to a translucent white in
reactions.css.
This commit is contained in:
Brock Whittaker
2017-11-29 14:18:34 -08:00
committed by Tim Abbott
parent 1716d69c35
commit ad9c71b4b1
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
static/styles/dark.css
View File

@@ -43,7 +43,10 @@ body.dark-mode .popover a {
body.dark-mode .dark_background a, body.dark-mode .dark_background a,
body.dark-mode .dark_background a:hover, body.dark-mode .dark_background a:hover,
body.dark-mode a.dark_background:hover, body.dark-mode a.dark_background:hover,
body.dark-mode .dark_background { body.dark-mode .dark_background,
body.dark-mode .message_reactions .message_reaction_count,
body.dark-mode .message_reactions .reaction_button i,
body.dark-mode .message_reactions:hover .message_reaction + .reaction_button {
color: inherit !important; color: inherit !important;
} }
@@ -69,7 +72,8 @@ body.dark-mode select {
body.dark-mode .new-style .tab-switcher .ind-tab.selected, body.dark-mode .new-style .tab-switcher .ind-tab.selected,
body.dark-mode .table-striped thead th, body.dark-mode .table-striped thead th,
body.dark-mode .message_reactions .message_reaction.reacted { body.dark-mode .message_reactions .message_reaction.reacted,
body.dark-mode .message_reactions:hover .message_reaction + .reaction_button {
background-color: hsla(0, 0%, 0%, 0.5); background-color: hsla(0, 0%, 0%, 0.5);
border-color: hsla(0, 0%, 0%, 0.9); border-color: hsla(0, 0%, 0%, 0.9);
} }
@@ -77,6 +81,7 @@ body.dark-mode .message_reactions .message_reaction.reacted {
body.dark-mode .message_reactions .message_reaction { body.dark-mode .message_reactions .message_reaction {
background-color: hsla(0, 0%, 0%, 0.2); background-color: hsla(0, 0%, 0%, 0.2);
border-color: hsla(0, 0%, 0%, 0.5); border-color: hsla(0, 0%, 0%, 0.5);
color: inherit;
} }
body.dark-mode .new-style button.button:focus, body.dark-mode .new-style button.button:focus,
@@ -141,8 +146,7 @@ body.dark-mode hr {
} }
body.dark-mode .nav .dropdown-menu::after, body.dark-mode .nav .dropdown-menu::after,
body.dark-mode .emoji-info-popover.top .arrow, body.dark-mode .popover.bottom .arrow {
body.dark-mode .emoji-info-popover.bottom .arrow {
border-bottom-color: hsl(235, 18%, 7%); border-bottom-color: hsl(235, 18%, 7%);
} }
@@ -166,7 +170,10 @@ body.dark-mode .floating_recipient .recipient_row {
border-top: none; border-top: none;
} }
body.dark-mode .stream-row.active { body.dark-mode .stream-row.active,
body.dark-mode .emoji-showcase-container,
body.dark-mode .emoji-popover-category-tabs,
body.dark-mode .emoji-popover-top {
background-color: hsla(0, 0%, 0%, 0.2); background-color: hsla(0, 0%, 0%, 0.2);
} }

3
static/styles/reactions.css
View File

@@ -77,7 +77,6 @@
visibility: visible; visibility: visible;
pointer-events: all; pointer-events: all;
background-color: hsl(0, 0%, 98%); background-color: hsl(0, 0%, 98%);
color: hsl(0, 0%, 73%);
} }
.reaction_button_visible { .reaction_button_visible {
@@ -265,7 +264,7 @@
} }
.emoji-popover-category-tabs .emoji-popover-tab-item.active { .emoji-popover-category-tabs .emoji-popover-tab-item.active {
background: hsl(0, 0%, 80%); background: hsla(0, 0%, 100%, 0.2);
} }
.typeahead .emoji { .typeahead .emoji {