Commit c69bb0d0 authored by JC Brand's avatar JC Brand

css: fix highlighting in emoji picker

parent 6fea88fc
...@@ -1786,18 +1786,23 @@ ...@@ -1786,18 +1786,23 @@
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
padding: 0.3em; } padding: 0.3em; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; } color: #8f2831; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
color: #777; } color: #777; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu ul li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
padding-left: 5px; } padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
z-index: 99; } z-index: 99; }
...@@ -1805,6 +1810,9 @@ ...@@ -1805,6 +1810,9 @@
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
display: block; display: block;
padding: 7px; } padding: 7px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
display: block; } display: block; }
......
...@@ -1832,18 +1832,23 @@ body { ...@@ -1832,18 +1832,23 @@ body {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
padding: 0.3em; } padding: 0.3em; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; } color: #8f2831; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
color: #777; } color: #777; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu ul li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
padding-left: 5px; } padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
z-index: 99; } z-index: 99; }
...@@ -1851,6 +1856,9 @@ body { ...@@ -1851,6 +1856,9 @@ body {
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
display: block; display: block;
padding: 7px; } padding: 7px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
display: block; } display: block; }
......
...@@ -351,6 +351,9 @@ ...@@ -351,6 +351,9 @@
li { li {
&.insert-emoji { &.insert-emoji {
padding: 0.3em; padding: 0.3em;
&:hover {
background-color: $highlight-color;
}
} }
margin-left: 0; margin-left: 0;
cursor: pointer; cursor: pointer;
...@@ -364,21 +367,25 @@ ...@@ -364,21 +367,25 @@
} }
&.toggle-toolbar-menu { &.toggle-toolbar-menu {
color: $text-color; color: $text-color;
ul {
li {
&:hover {
background-color: $highlight-color;
} }
&.toggle-smiley {
padding-left: 5px;
.emoji-toolbar {
.emoji-category-picker,
.emoji-skintone-picker {
li:hover {
background-color: $highlight-color;
} }
} }
} }
&.toggle-smiley {
padding-left: 5px;
} }
&.toggle-otr { &.toggle-otr {
ul { ul {
z-index: 99; z-index: 99;
li { li {
&:hover {
background-color: $highlight-color;
}
display: block; display: block;
padding: 7px; padding: 7px;
a { a {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment