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

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

View File

@@ -43,7 +43,10 @@ body.dark-mode .popover a {
body.dark-mode .dark_background a,
body.dark-mode .dark_background a: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;
}
@@ -69,7 +72,8 @@ body.dark-mode select {
body.dark-mode .new-style .tab-switcher .ind-tab.selected,
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);
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 {
background-color: hsla(0, 0%, 0%, 0.2);
border-color: hsla(0, 0%, 0%, 0.5);
color: inherit;
}
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 .emoji-info-popover.top .arrow,
body.dark-mode .emoji-info-popover.bottom .arrow {
body.dark-mode .popover.bottom .arrow {
border-bottom-color: hsl(235, 18%, 7%);
}
@@ -166,7 +170,10 @@ body.dark-mode .floating_recipient .recipient_row {
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);
}

View File

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