diff --git a/css/converse.css b/css/converse.css index 47dc24e33..0f36d7a2f 100644 --- a/css/converse.css +++ b/css/converse.css @@ -7040,8 +7040,6 @@ body.reset { -ms-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } - #conversejs .emojione { - height: 20px; } #conversejs .spinner { -webkit-animation: spin 2s infinite, linear; -moz-animation: spin 2s infinite, linear; @@ -7570,25 +7568,6 @@ body.reset { height: 100px; overflow: scroll; 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, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li { margin-left: 0; @@ -7597,23 +7576,40 @@ body.reset { position: relative; } #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 { - 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, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover { background-color: #DCF9F6; } - #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover, - #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover { - color: #8f2831; } - #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 { - display: flex; - flex-direction: row; - justify-content: space-between; } - #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, - #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-skintone-picker li:hover { - background-color: #DCF9F6; } + #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.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; } + #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, + #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul { + display: flex; + flex-direction: row; + 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-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-skintone-picker li:hover { + background-color: #DCF9F6; } #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul { z-index: 99; } @@ -7714,12 +7710,6 @@ body.reset { #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 { 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) { #conversejs:not(.fullscreen) > .row { diff --git a/css/inverse.css b/css/inverse.css index 0954e95a9..104548def 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -7040,8 +7040,6 @@ body.reset { -ms-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } - #conversejs .emojione { - height: 22px; } #conversejs .spinner { -webkit-animation: spin 2s infinite, linear; -moz-animation: spin 2s infinite, linear; @@ -7622,25 +7620,6 @@ body { height: 150px; overflow: scroll; 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, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li { margin-left: 0; @@ -7649,23 +7628,40 @@ body { position: relative; } #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 { - 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, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover { background-color: #DCF9F6; } - #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover, - #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover { - color: #8f2831; } - #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 { - display: flex; - flex-direction: row; - justify-content: space-between; } - #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, - #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-skintone-picker li:hover { - background-color: #DCF9F6; } + #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.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; } + #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, + #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul { + display: flex; + flex-direction: row; + 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-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-skintone-picker li:hover { + background-color: #DCF9F6; } #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul { z-index: 99; } diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 1a5113e65..5f0e683d1 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -401,47 +401,37 @@ overflow: scroll; 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 { - 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; cursor: pointer; list-style: none; position: relative; - a:hover { - color: #8f2831; + &.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; + } + } } } } } &.toggle-smiley { .emoji-toolbar { + box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); + .emoji-category-picker { + padding-top: 0.5em; ul { display: flex; flex-direction: row; @@ -451,8 +441,11 @@ .emoji-category-picker, .emoji-skintone-picker { - li:hover { - background-color: $highlight-color; + li { + padding: 0.2em; + &:hover { + background-color: $highlight-color; + } } } } diff --git a/sass/_core.scss b/sass/_core.scss index fef65858d..b077fffcc 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -319,10 +319,6 @@ body.reset { } } - .emojione { - height: $emoji_height; - } - .spinner { @include animation(spin 2s infinite, linear); display: block; diff --git a/sass/converse/_chatbox.scss b/sass/converse/_chatbox.scss index 650efe93b..ac1d8e30b 100644 --- a/sass/converse/_chatbox.scss +++ b/sass/converse/_chatbox.scss @@ -50,16 +50,6 @@ .emoji-category { float: left; } - li { - padding: 2px; - } - } - } - } - &.toggle-smiley { - ul { - li { - padding: 2px; } } } diff --git a/sass/converse/_variables.scss b/sass/converse/_variables.scss index 549522daa..d6b3e9657 100644 --- a/sass/converse/_variables.scss +++ b/sass/converse/_variables.scss @@ -54,8 +54,6 @@ $send-button-margin: 3px !default; $message-them-color: $green !default; -$emoji_height : 20px !default; - $roster-height: 194px !default; $roster-item-height: 60px !default; diff --git a/sass/inverse/_variables.scss b/sass/inverse/_variables.scss index ace13963d..b6534ec9a 100644 --- a/sass/inverse/_variables.scss +++ b/sass/inverse/_variables.scss @@ -52,7 +52,6 @@ $send-button-margin: 3px !default; $message-them-color: $green !default; -$emoji_height: 22px !default; $emoji-picker-height: 150px !default; $roster-height: 194px !default;