css: add chat animation on opening

This commit is contained in:
Sebastian Castro 2020-04-08 18:14:20 +02:00 committed by muxator
parent f5685f45c7
commit cbc6304243
5 changed files with 60 additions and 34 deletions

View file

@ -1,4 +1,4 @@
#chatbox {
.chat-content {
background: none;
padding: 0;
background-color: white;
@ -9,12 +9,12 @@
background-color: var(--bg-soft-color);
}
#chatbox.stickyChat {
#chatbox.stickyChat .chat-content {
border: none;
background-color: var(--bg-soft-color);
}
#chatbox.stickyChat.chatAndUsersChat{
#chatbox.stickyChat.chatAndUsersChat .chat-content {
box-shadow: none;
}
@ -50,7 +50,7 @@
background-color: transparent !important;
}
#chatbox.stickyChat #chattext {
#chatbox.stickyChat .chat-content #chattext {
padding: 0px;
}
@ -58,7 +58,7 @@
padding: 8px;
}
.plugin-ep_author_neat #chatbox.stickyChat #chattext {
.plugin-ep_author_neat #chatbox.stickyChat .chat-content #chattext {
padding: 5px 3px;
}
@ -75,10 +75,5 @@
right: 0;
}
#chatbox {
width: 100%;
right: 0;
}
.stick-to-screen-btn { display: none; }
}

View file

@ -73,11 +73,11 @@
.super-light-background.super-light-toolbar .toolbar {
--border-color: var(--super-light-color);
}
.super-light-background #chatbox, .super-light-background #chatbox.stickyChat {
.super-light-background .chat-content, .super-light-background #chatbox.stickyChat .chat-content {
--bg-color: var(--super-light-color);
--bg-soft-color: var(--super-light-color);
}
.super-light-background #chatbox.stickyChat {
.super-light-background #chatbox.stickyChat .chat-content {
box-shadow: none;
}
/* ====================== */
@ -102,14 +102,14 @@
.light-background input[type="text"] {
background-color: var(--super-light-color);
}
.light-background #chatbox, .light-background #chatbox.stickyChat {
.light-background .chat-content, .light-background #chatbox.stickyChat .chat-content {
--bg-color: var(--super-light-color);
--bg-soft-color: var(--light-color);
--scrollbar-bg: var(--super-light-color);
--scrollbar-track: var(--light-color);
--scrollbar-thumb: var(--middle-color);
}
.light-background #chatbox.stickyChat {
.light-background #chatbox.stickyChat .chat-content {
box-shadow: none;
}
/* Special combinaison with toolbar */
@ -148,7 +148,7 @@
border: none;
border-radius: 8px;
}
.super-dark-background #chatbox, .super-dark-background #chatbox.stickyChat {
.super-dark-background .chat-content, .super-dark-background #chatbox.stickyChat .chat-content {
background-color: var(--super-dark-color);
color: var(--light-color);
}
@ -160,7 +160,7 @@
.super-dark-background input[type="text"]::placeholder {
color: var(--middle-color);
}
.super-dark-background #chatbox:not(.stickyChat) {
.super-dark-background #chatbox:not(.stickyChat) .chat-content {
border: 1px solid var(--dark-color);
}
/* Special combinaison with toolbar */
@ -196,7 +196,7 @@
border: none;
border-radius: 8px;
}
.dark-background #chatbox, .dark-background #chatbox.stickyChat {
.dark-background .chat-content, .dark-background #chatbox.stickyChat .chat-content {
background-color: var(--dark-color);
color: var(--super-light-color);
--border-color: var(--dark-soft-color);
@ -209,7 +209,7 @@
.dark-background input[type="text"]::placeholder {
color: var(--middle-color);
}
.dark-background .popup-content, .dark-background #chatbox:not(.stickyChat) {
.dark-background .popup-content, .dark-background #chatbox:not(.stickyChat) .chat-content {
box-shadow: 0 0 14px 0px var(--super-dark-color);
}
/* Special combinaison with toolbar */