From eddc359a6486e7536d55f6ea49f8f3faf82f0a6f Mon Sep 17 00:00:00 2001 From: JC Brand Date: Tue, 10 Apr 2018 20:55:47 +0200 Subject: [PATCH] Fix height and padding for minimized chats toggle --- css/converse.css | 4 +-- css/inverse.css | 50 ++++++++++++++--------------- sass/converse/_minimized_chats.scss | 4 +-- 3 files changed, 29 insertions(+), 29 deletions(-) diff --git a/css/converse.css b/css/converse.css index 4f613ac49..4c0938f9b 100644 --- a/css/converse.css +++ b/css/converse.css @@ -8542,7 +8542,7 @@ body.reset { border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: #578EA9; - padding: 0.5em 0; + padding: 1em 0 0 0; text-align: center; color: white; white-space: nowrap; @@ -8564,7 +8564,7 @@ body.reset { color: white; } #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout { flex-direction: column-reverse; - bottom: 30px; + bottom: 42px; width: 130px; } #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head { padding: 0.3em; diff --git a/css/inverse.css b/css/inverse.css index 90c791ba5..e5a618484 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -7647,31 +7647,31 @@ body { #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, - #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley { - padding: 0 0 0 0.5em; } - #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; - font-size: 26px; } - #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-smiley a.toggle-smiley, + #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley a.toggle-smiley { + padding: 0; } + #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; + font-size: 26px; } + #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/converse/_minimized_chats.scss b/sass/converse/_minimized_chats.scss index 5ada496b9..82c6c652c 100644 --- a/sass/converse/_minimized_chats.scss +++ b/sass/converse/_minimized_chats.scss @@ -19,7 +19,7 @@ border-top-left-radius: $chatbox-border-radius; border-top-right-radius: $chatbox-border-radius; background-color: $link-color; - padding: 0.5em 0; + padding: 1em 0 0 0; text-align: center; color: white; white-space: nowrap; @@ -48,7 +48,7 @@ .minimized-chats-flyout { flex-direction: column-reverse; - bottom: 30px; + bottom: 42px; width: $minimized-chats-width; .chat-head {