Styling of emoji picker in the overlay view

This commit is contained in:
JC Brand 2018-03-25 13:56:36 +02:00
parent deff6e071c
commit 245ea22df3
7 changed files with 86 additions and 124 deletions

View File

@ -7040,8 +7040,6 @@ body.reset {
-ms-transform: rotate(359deg); -ms-transform: rotate(359deg);
-o-transform: rotate(359deg); -o-transform: rotate(359deg);
transform: rotate(359deg); } } transform: rotate(359deg); } }
#conversejs .emojione {
height: 20px; }
#conversejs .spinner { #conversejs .spinner {
-webkit-animation: spin 2s infinite, linear; -webkit-animation: spin 2s infinite, linear;
-moz-animation: spin 2s infinite, linear; -moz-animation: spin 2s infinite, linear;
@ -7570,25 +7568,6 @@ body.reset {
height: 100px; height: 100px;
overflow: scroll; overflow: scroll;
padding: 0.5em; } padding: 0.5em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
overflow: hidden;
left: 0; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
height: 30px;
padding: 4px;
z-index: 98; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
font-size: 20px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
margin-left: 0; margin-left: 0;
@ -7597,18 +7576,35 @@ body.reset {
position: relative; } position: relative; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
padding: 0.3em; } padding: 0.2em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a {
font-size: 20px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover {
color: #8f2831; } color: #8f2831; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar {
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker {
padding-top: 0.5em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; } justify-content: space-between; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li {
padding: 0.2em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
@ -7714,12 +7710,6 @@ body.reset {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category,
#conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category { #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
float: left; } float: left; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
#conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
padding: 2px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li,
#conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li {
padding: 2px; }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
#conversejs:not(.fullscreen) > .row { #conversejs:not(.fullscreen) > .row {

View File

@ -7040,8 +7040,6 @@ body.reset {
-ms-transform: rotate(359deg); -ms-transform: rotate(359deg);
-o-transform: rotate(359deg); -o-transform: rotate(359deg);
transform: rotate(359deg); } } transform: rotate(359deg); } }
#conversejs .emojione {
height: 22px; }
#conversejs .spinner { #conversejs .spinner {
-webkit-animation: spin 2s infinite, linear; -webkit-animation: spin 2s infinite, linear;
-moz-animation: spin 2s infinite, linear; -moz-animation: spin 2s infinite, linear;
@ -7622,25 +7620,6 @@ body {
height: 150px; height: 150px;
overflow: scroll; overflow: scroll;
padding: 0.5em; } padding: 0.5em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
overflow: hidden;
left: 0; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
height: 32px;
padding: 4px;
z-index: 98; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
font-size: 26px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
margin-left: 0; margin-left: 0;
@ -7649,18 +7628,35 @@ body {
position: relative; } position: relative; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
padding: 0.3em; } padding: 0.2em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a {
font-size: 26px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover {
color: #8f2831; } color: #8f2831; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar {
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker {
padding-top: 0.5em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; } justify-content: space-between; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li {
padding: 0.2em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,

View File

@ -401,47 +401,37 @@
overflow: scroll; overflow: scroll;
padding: 0.5em; padding: 0.5em;
} }
&.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
}
&.emoji-toolbar {
overflow: hidden;
left: 0;
.picked {
background-color: $highlight-color;
}
li { li {
height: $emoji_height + 2*5px;
padding: 4px;
z-index: 98;
&.emoji {
a {
font-size: $font-size-huge;
}
}
}
}
li {
&.insert-emoji {
padding: 0.3em;
&:hover {
background-color: $highlight-color;
}
}
margin-left: 0; margin-left: 0;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
position: relative; position: relative;
a:hover { &.emoji-skintone {
}
&.insert-emoji {
padding: 0.2em;
&.picked {
background-color: $highlight-color;
}
&:hover {
background-color: $highlight-color;
}
a {
font-size: $font-size-huge;
&:hover {
color: #8f2831; color: #8f2831;
} }
} }
} }
} }
}
}
&.toggle-smiley { &.toggle-smiley {
.emoji-toolbar { .emoji-toolbar {
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
.emoji-category-picker { .emoji-category-picker {
padding-top: 0.5em;
ul { ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -451,12 +441,15 @@
.emoji-category-picker, .emoji-category-picker,
.emoji-skintone-picker { .emoji-skintone-picker {
li:hover { li {
padding: 0.2em;
&:hover {
background-color: $highlight-color; background-color: $highlight-color;
} }
} }
} }
} }
}
&.toggle-otr { &.toggle-otr {
ul { ul {
z-index: 99; z-index: 99;

View File

@ -319,10 +319,6 @@ body.reset {
} }
} }
.emojione {
height: $emoji_height;
}
.spinner { .spinner {
@include animation(spin 2s infinite, linear); @include animation(spin 2s infinite, linear);
display: block; display: block;

View File

@ -50,16 +50,6 @@
.emoji-category { .emoji-category {
float: left; float: left;
} }
li {
padding: 2px;
}
}
}
}
&.toggle-smiley {
ul {
li {
padding: 2px;
} }
} }
} }

View File

@ -54,8 +54,6 @@ $send-button-margin: 3px !default;
$message-them-color: $green !default; $message-them-color: $green !default;
$emoji_height : 20px !default;
$roster-height: 194px !default; $roster-height: 194px !default;
$roster-item-height: 60px !default; $roster-item-height: 60px !default;

View File

@ -52,7 +52,6 @@ $send-button-margin: 3px !default;
$message-them-color: $green !default; $message-them-color: $green !default;
$emoji_height: 22px !default;
$emoji-picker-height: 150px !default; $emoji-picker-height: 150px !default;
$roster-height: 194px !default; $roster-height: 194px !default;