73 lines
2.6 KiB
CSS
73 lines
2.6 KiB
CSS
/* Colors */
|
|
|
|
/* ---------------- Variables ---------------- */
|
|
html {
|
|
--chat-history-background: white;
|
|
--chat-border-radius: var(--border-radius);
|
|
--login-error-color: rgb(231, 90, 90);
|
|
--hint-background: ;
|
|
--chat-user: var(--input-highlight);
|
|
--chat-message: rgb(147, 153, 158);}
|
|
|
|
/* ----------------- Others -------------------- */
|
|
.auto-scroll { transform: translateZ(0); } /* Force to use gpu */
|
|
|
|
.services img:hover {
|
|
scale: 1.1;
|
|
transition: scale 0.2s;}
|
|
|
|
/* --------------- Color filtering ------------- */
|
|
.blinkies > * img, .webrings .auto-scroll > * > div, .services img {
|
|
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(180deg);}
|
|
|
|
.blinkies > * img:hover, .webrings .auto-scroll > * > div:hover, .services img:hover { filter: none; }
|
|
|
|
|
|
/* ----------------- Color -------------------- */
|
|
|
|
.chat-history {
|
|
border-radius: var(--chat-border-radius);
|
|
background-color: var(--chat-history-background);}
|
|
|
|
.chat-account-errors { color: var(--login-error-color); }
|
|
|
|
.scroll_below-clip-box { mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0)); }
|
|
|
|
.message .user { color: var(--chat-user); }
|
|
.message .date_sent { color: var(--chat-message); }
|
|
|
|
|
|
/* ------------- Decorations & dividers (D&D) -------------------- */
|
|
|
|
/* ----- Helpers ----- */
|
|
#try_hovering--blinkie {
|
|
scale: 3;
|
|
position: absolute;
|
|
bottom: -27px;
|
|
left: -63px;
|
|
z-index: 999;}
|
|
|
|
#try_sliding_down { width: 150px; }
|
|
|
|
#try_tapping--blinkie {
|
|
scale: 3;
|
|
position: absolute;
|
|
right: -60px;
|
|
bottom: -28px;
|
|
z-index: 999;}
|
|
|
|
/* ------ Opacity tricks for marquee -------- */
|
|
|
|
.blinkies .clip-box{
|
|
mask-image: linear-gradient(to right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,1) 5%,
|
|
rgba(0,0,0,1) 95%,
|
|
rgba(0,0,0,0) 100%);}
|
|
|
|
.webrings .clip-box{
|
|
mask-image: linear-gradient(to bottom,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,1) 5%,
|
|
rgba(0,0,0,1) 95%,
|
|
rgba(0,0,0,0) 100%);} |