174 lines
2.5 KiB
CSS
174 lines
2.5 KiB
CSS
body {
|
|
background-color: transparent;
|
|
font-family: 'FRAMDCN';
|
|
}
|
|
|
|
:root {
|
|
--variable: 2s;
|
|
--buttonBackground: #bf2c2c;
|
|
}
|
|
|
|
.thomas {
|
|
position: relative;
|
|
float: center;
|
|
/* display: inline-block; */
|
|
}
|
|
|
|
.speechbubble {
|
|
display: block;
|
|
bottom: 0;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
.fade-outx {
|
|
animation: fade-outx var(--variable) linear;
|
|
}
|
|
|
|
@keyframes fade-outx {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.fade-outxx {
|
|
animation: fade-outxx var(--variable) linear;
|
|
}
|
|
|
|
@keyframes fade-outxx {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.bounce-in {
|
|
animation: bounce-in 1s ease;
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.bounce-inx {
|
|
animation: bounce-inx 1s ease;
|
|
}
|
|
|
|
@keyframes bounce-inx {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.msg-container {
|
|
direction: ltr;
|
|
position: static;
|
|
width: 100%;
|
|
padding: 10px 0px 0px 0px;
|
|
display: grid;
|
|
grid-template: 1fr / 1fr;
|
|
align-self: center;
|
|
width: fit-content;
|
|
}
|
|
|
|
.msg-container > * {
|
|
grid-column: 1 / 1;
|
|
grid-row: 1 / 1;
|
|
}
|
|
|
|
.message-window {
|
|
height: calc(100% - 50px);
|
|
overflow: hidden;
|
|
overflow-y: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 80%;
|
|
margin: auto;
|
|
background: transparent;
|
|
}
|
|
|
|
.message-window::before {
|
|
content: '';
|
|
flex: 1 0 0px;
|
|
}
|
|
|
|
.OptionPanel {
|
|
flex: 3;
|
|
display: none;
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(100% - 25px);
|
|
background: transparent;
|
|
}
|
|
|
|
.OptionPanel.show {
|
|
display: block;
|
|
}
|
|
|
|
.message {
|
|
text-align: left;
|
|
max-width: 100%;
|
|
height: auto;
|
|
min-width: fit-content;
|
|
hyphens: auto;
|
|
/* bottom: 0; */
|
|
/* right: 0; */
|
|
/* float: right; */
|
|
overflow-wrap: break-word;
|
|
position: relative;
|
|
border: 2px solid #ff80e1;
|
|
/* box-shadow: 0 2px 10px rgba(255, 128, 225, 0.5); */
|
|
background: linear-gradient(45deg, rgb(15, 12, 41, 0.7), rgb(48, 43, 99, 0.7));
|
|
/* background: linear-gradient(45deg, rgba(72, 0, 154, 0.7), rgba(138, 43, 226, 0.7)); */
|
|
color: white;
|
|
padding: 15px;
|
|
border-radius: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.arrow {
|
|
content: '';
|
|
border: 2px solid #ff80e1;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(180deg);
|
|
border-width: 10px;
|
|
border-style: solid;
|
|
border-color: transparent transparent rgb(255, 128, 225, 0.7) transparent;
|
|
color: #ff80e1;
|
|
bottom: -10px;
|
|
}
|
|
|
|
.sender {
|
|
color: #ff80e1;
|
|
font-size: 14pt;
|
|
}
|