Перенос чатов из другого репозитория
This commit is contained in:
276
StreamLabsChats/sonya/generation 1/style.css
Normal file
276
StreamLabsChats/sonya/generation 1/style.css
Normal file
@ -0,0 +1,276 @@
|
||||
/* Imports */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
/* Fonts */
|
||||
--font-size: 35px;
|
||||
--font-family-1: "Nunito", serif;
|
||||
|
||||
/* Emotes */
|
||||
--emote-size: calc(var(--font-size) * 2);
|
||||
--emote-size-xl: calc(var(--font-size) * 4);
|
||||
--emote-size-xxl: calc(var(--font-size) * 8);
|
||||
|
||||
/* Badges */
|
||||
--badge-size: 25px;
|
||||
}
|
||||
|
||||
/* Main styling */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(to top,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(0, 0, 0, 1) 75%,
|
||||
rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
|
||||
content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.font-1 {
|
||||
opacity: 0;
|
||||
font-family: var(--font-family-1);
|
||||
}
|
||||
|
||||
.emote {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.emote.emote-left {
|
||||
margin-left: -5.5px;
|
||||
}
|
||||
|
||||
.emote.emote-right {
|
||||
margin-right: -5.5px;
|
||||
}
|
||||
|
||||
.emote img {
|
||||
height: var(--emote-size);
|
||||
}
|
||||
|
||||
.emote img.zero-width {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
[large-emotes="true"] .emote img {
|
||||
height: var(--emote-size-xl);
|
||||
}
|
||||
|
||||
[gigaemote="true"] .emote img {
|
||||
height: var(--emote-size-xxl);
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(200%)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes disappear {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-200%)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes deleted {
|
||||
to {
|
||||
transform: translateX(-200%);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#chatbox {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 5px 5px 0 5px;
|
||||
font-size: var(--font-size);
|
||||
font-family: var(--font-family-1);
|
||||
/* background: gray; */
|
||||
}
|
||||
|
||||
#chatbox message,
|
||||
#chatbox event {
|
||||
max-height: var(--max-height);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
word-break: break-word;
|
||||
transform-origin: bottom;
|
||||
margin-top: 30px;
|
||||
animation: appear 600ms ease-in-out forwards;
|
||||
}
|
||||
|
||||
#chatbox[disappear="true"] message,
|
||||
#chatbox[disappear="true"] event {
|
||||
animation:
|
||||
appear 600ms ease-in-out forwards,
|
||||
disappear 600ms linear 30s forwards;
|
||||
}
|
||||
|
||||
#chatbox message[deleted="true"],
|
||||
#chatbox event[deleted="true"] {
|
||||
animation: deleted 600ms ease-in-out forwards;
|
||||
}
|
||||
|
||||
message {
|
||||
padding: 10px 30px 15px 10px;
|
||||
font-family: var(--font-family-1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
message author {
|
||||
position: relative;
|
||||
margin-left: 40px;
|
||||
font-weight: 600;
|
||||
text-transform: lowercase;
|
||||
letter-spacing: .2rem;
|
||||
font-weight: 600;
|
||||
filter: drop-shadow(0 0 2px white);
|
||||
}
|
||||
|
||||
message author::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -35px;
|
||||
top: 5px;
|
||||
width: 35px;
|
||||
transform: translateX(-25%);
|
||||
aspect-ratio: 16 / 15;
|
||||
filter: drop-shadow(0 0 1px white);
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' fill='none'%3E%3Cpath fill='url(%23a)' d='M10.752 4.884c0 1.743-1.223 3.156-2.732 3.156-1.51 0-2.732-1.413-2.733-3.157 0-.973.852-2.26 1.604-3.207a1.426 1.426 0 0 1 2.257 0c.752.947 1.604 2.234 1.604 3.208Z'/%3E%3Cpath fill='url(%23b)' d='M5.408 4.76c1.744 0 3.158 1.223 3.158 2.731 0 1.51-1.413 2.732-3.157 2.732-.974 0-2.26-.852-3.207-1.604a1.426 1.426 0 0 1 0-2.256c.946-.753 2.233-1.604 3.206-1.604Z'/%3E%3Cpath fill='url(%23c)' d='M5.287 9.554c0-1.744 1.223-3.157 2.732-3.157 1.51 0 2.732 1.414 2.733 3.157 0 .974-.852 2.26-1.604 3.207a1.426 1.426 0 0 1-2.257 0c-.752-.947-1.604-2.234-1.604-3.207Z'/%3E%3Cpath fill='url(%23d)' d='M11.177 4.758c-1.744 0-3.157 1.223-3.157 2.732 0 1.509 1.413 2.732 3.157 2.732.973 0 2.26-.85 3.207-1.603a1.426 1.426 0 0 0 0-2.257c-.947-.752-2.234-1.603-3.207-1.604Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='8.019' x2='8.019' y1='.391' y2='8.04' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='4.741' x2='4.74' y1='4.759' y2='10.223' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='8.019' x2='8.019' y1='6.397' y2='14.047' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='11.845' x2='11.845' y1='10.222' y2='4.759' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message.vip author::before {
|
||||
aspect-ratio: 14 / 12;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1641 0.785156C11.262 0.785158 11.3586 0.807536 11.4467 0.850622C11.5348 0.893708 11.6122 0.956388 11.6731 1.03399L11.7212 1.10508L13.6712 4.39653C13.7351 4.50446 13.7671 4.62866 13.7634 4.75443C13.7597 4.8802 13.7205 5.00226 13.6504 5.10616L13.5984 5.17397L8.0538 11.4494C7.95084 11.5558 7.82795 11.6403 7.69234 11.6979C7.55672 11.7556 7.41111 11.7852 7.26403 11.7852C7.00402 11.7852 6.75377 11.693 6.54251 11.5106L6.45476 11.4277L0.929626 5.17397C0.846504 5.08004 0.791777 4.9639 0.771957 4.83938C0.752136 4.71486 0.768056 4.58719 0.817823 4.47157L0.856824 4.39587L2.81532 1.08994L2.85692 1.0307C2.88675 0.99328 2.92053 0.959285 2.95767 0.929321L3.01553 0.887191L3.07273 0.854277L3.10523 0.839136L3.14423 0.822679L3.21508 0.801614L3.28788 0.788448L3.36393 0.785156H11.1641Z' fill='url(%23paint0_linear_1587_171)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1587_171' x1='7.26367' y1='0.785156' x2='7.26367' y2='11.7852' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFEEF9'/%3E%3Cstop offset='1' stop-color='white'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
message.moderator author::before {
|
||||
aspect-ratio: 14 / 14;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath fill='url(%23a)' d='M7.143 10.511a.735.735 0 0 1-.798 1.201.733.733 0 0 1-.238-.164L5.07 10.51l-2.074 2.074a.734.734 0 0 1-1.037 1.037L.922 12.585a.733.733 0 0 1 1.037-1.037l2.074-2.074-1.037-1.037a.733.733 0 0 1 1.037-1.036l3.11 3.11Zm.52-.518L4.55 6.882 10.773.66l2.593.519.518 2.592-6.221 6.222Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='7.295' x2='7.295' y1='.66' y2='13.837' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23FFF2F6'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message content {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
background-color: rgba(168, 172, 181, .45);
|
||||
border: 2.5px solid #FFF1FA;
|
||||
border-radius: 10px;
|
||||
padding: 12px 20px;
|
||||
margin-left: 40px;
|
||||
margin-top: 5px;
|
||||
letter-spacing: .2rem;
|
||||
}
|
||||
|
||||
message content::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -31.5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 5px;
|
||||
aspect-ratio: 2 / 15;
|
||||
filter: drop-shadow(0 0 3px white);
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='15' fill='none'%3E%3Ccircle cx='1.002' cy='1.633' r='1' fill='%23fff'/%3E%3Ccircle cx='1.002' cy='13.633' r='1' fill='%23fff'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message content::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: -20px;
|
||||
right: -45px;
|
||||
width: 45px;
|
||||
aspect-ratio: 22 / 34;
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' fill='none'%3E%3Cmask id='a' width='14' height='28' x='1' y='5' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23ABAFBC' d='M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z'/%3E%3Cpath fill='%23A8ACB9' d='M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z'/%3E%3Cg opacity='.62' style='mix-blend-mode:plus-lighter'%3E%3Cpath fill='%23ABAFBC' d='M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z'/%3E%3Cpath fill='%23A8ACB9' d='M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z'/%3E%3C/g%3E%3Cg opacity='.83'%3E%3Cpath fill='%23A8ACB9' d='M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z'/%3E%3Cpath fill='%23A8ACB9' d='M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z' opacity='.65' style='mix-blend-mode:plus-lighter'/%3E%3C/g%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23AAAEBC' d='M-1.395 2.367 15.238-.714l6.001 32.393-16.632 3.082z'/%3E%3C/g%3E%3Cpath fill='url(%23b)' d='M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z'/%3E%3Cpath fill='url(%23c)' d='M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z'/%3E%3Cg opacity='.62' style='mix-blend-mode:plus-lighter'%3E%3Cpath fill='url(%23d)' d='M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z'/%3E%3Cpath fill='url(%23e)' d='M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z'/%3E%3C/g%3E%3Cg opacity='.83'%3E%3Cpath fill='url(%23f)' d='M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z'/%3E%3Cpath fill='url(%23g)' d='M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z' opacity='.65' style='mix-blend-mode:plus-lighter'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='4.306' x2='8.305' y1='10.845' y2='32.426' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1F5'/%3E%3Cstop offset='1' stop-color='%23FBDFE2'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='6.924' x2='9.012' y1='9.263' y2='20.529' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF2F6'/%3E%3Cstop offset='1' stop-color='%23FADBDE'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='4.306' x2='8.305' y1='10.845' y2='32.426' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1F5'/%3E%3Cstop offset='1' stop-color='%23FBDFE2'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='6.924' x2='9.012' y1='9.263' y2='20.529' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF2F6'/%3E%3Cstop offset='1' stop-color='%23FADBDE'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='4.873' x2='14.082' y1='6.695' y2='13.513' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF2F6'/%3E%3Cstop offset='1' stop-color='%23FADBDE'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='4.873' x2='14.082' y1='6.695' y2='13.513' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF2F6'/%3E%3Cstop offset='1' stop-color='%23FADBDE'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
event {
|
||||
color: white;
|
||||
flex-direction: row!important;
|
||||
padding: 25px 40px 25px 0;
|
||||
width: -webkit-fill-available!important;
|
||||
}
|
||||
|
||||
event author {
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
filter: drop-shadow(0 0 3px white);
|
||||
font-weight: 500;
|
||||
margin-inline: 100px 70px;
|
||||
letter-spacing: .3rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
event author::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: -100px;
|
||||
width: 80px;
|
||||
aspect-ratio: 31 / 32;
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='32' fill='none'%3E%3Cpath fill='%23fff' d='M14.923 11.178a2 2 0 0 1 3.154 0l.514.66c.232.296.541.52.895.649l.786.286a2 2 0 0 1 .975 3l-.469.692a2 2 0 0 0-.341 1.052l-.029.836a2 2 0 0 1-2.551 1.853l-.804-.23a1.999 1.999 0 0 0-1.106 0l-.804.23a2 2 0 0 1-2.551-1.853l-.029-.837a2 2 0 0 0-.341-1.05l-.469-.694a2 2 0 0 1 .975-3l.786-.285c.354-.128.663-.353.895-.65l.514-.66Z'/%3E%3Cpath stroke='%23fff' stroke-dasharray='0.1 6' stroke-linecap='round' d='M14.15 1.27a15 15 0 1 0 13.684 24.103'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
event content {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
event content::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
inset: -10px -25px;
|
||||
border: 2px solid white;
|
||||
border-radius: 15px;
|
||||
filter: drop-shadow(0 0 2px white) drop-shadow(0 0 3px white);
|
||||
}
|
||||
|
||||
event content::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 120px;
|
||||
top: 0;
|
||||
right: 50px;
|
||||
transform: translateY(-90%);
|
||||
aspect-ratio: 51 / 9;
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='9' fill='none'%3E%3Cpath fill='url(%23a)' d='M4.54 8.013C2.032 8.013 0 6.255 0 4.085S2.032.156 4.54.156c1.424 0 3.314 1.267 4.681 2.362a1.986 1.986 0 0 1 0 3.133C7.854 6.746 5.964 8.013 4.54 8.013Z'/%3E%3Cpath fill='url(%23b)' d='M24.54 8.013c-2.508 0-4.54-1.758-4.54-3.928S22.032.156 24.54.156c1.424 0 3.314 1.267 4.681 2.362a1.986 1.986 0 0 1 0 3.133c-1.367 1.095-3.258 2.362-4.681 2.362Z'/%3E%3Cpath fill='url(%23c)' d='M44.54 8.013c-2.508 0-4.54-1.758-4.54-3.928S42.032.156 44.54.156c1.424 0 3.314 1.267 4.681 2.362a1.986 1.986 0 0 1 0 3.133c-1.367 1.095-3.257 2.362-4.681 2.362Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='11' y1='4.085' y2='4.085' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='20' x2='31' y1='4.085' y2='4.085' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='40' x2='51' y1='4.085' y2='4.085' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
Reference in New Issue
Block a user