mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-23 08:56:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

css: add chat animation on opening

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

37
src/static/css/pad/chat.css
View file

@ -1,20 +1,38 @@
#chaticon, #chatbox {
visibility: hidden;
z-index: 400;
position: absolute;
bottom: 0px;
right: 25px;
}
#chaticon.visible, #chatbox.visible {
visibility: visible;
}
#chaticon {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: none;
border: 1px solid #ccc;
border-bottom: none;
}
#chatbox {
.chat-content {
width: 400px;
height: 300px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: flex;
border: 1px solid #ccc;
border-bottom: none;
z-index: 401;
background-color: #f7f7f7;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75);
opacity: .3;
transform: scale(.5);
transform-origin: 100% 100%
}
#chatbox.visible .chat-content{
opacity: 1;
transform: scale(1);
}
#chatbox.stickyChat {
@ -23,15 +41,20 @@
flex: 1 auto; /* take reminaning vertical space */
height: auto;
right: 0;
display: flex;
}
#chatbox.stickyChat .chat-content {
background-color: #f1f1f1;
border-radius: 0;
border: none;
border-left: 1px solid #ccc;
height: 100%;
width: 100%;
}
#chatbox.stickyChat .stick-to-screen-btn {
#chatbox.stickyChat .chat-content .stick-to-screen-btn {
display: none;
}
#chatbox.stickyChat.chatAndUsersChat .hide-reduce-btn {
#chatbox.stickyChat.chatAndUsersChat .chat-content .hide-reduce-btn {
display:none;
}
@ -130,6 +153,10 @@
@media only screen and (max-width: 720px) {
#chatbox {
right: 0;
width: 80%;
bottom: 0;
left: 0;
}
#chatbox .chat-content {
width: 100%;
}
}