1452 lines
26 KiB
CSS
1452 lines
26 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
--hue: 16;
|
|
--sat: 6%;
|
|
--lit: 0%;
|
|
--color-surface: hsl(var(--hue), var(--sat), calc(95% - var(--lit)));
|
|
--color-lowered: hsl(var(--hue), var(--sat), calc(93% - var(--lit)));
|
|
--color-raised: hsl(var(--hue), var(--sat), calc(98% - var(--lit)));
|
|
--color-super-lowered: hsl(var(--hue), var(--sat), calc(85% - var(--lit)));
|
|
--color-super-raised: hsl(var(--hue), var(--sat), calc(100% - var(--lit)));
|
|
--color-text: hsl(0, 0%, 0%);
|
|
--color-text-raised: var(--color-text);
|
|
--color-text-lowered: var(--color-text);
|
|
|
|
--color-primary: hsl(330, 18%, 26%);
|
|
--color-primary-lowered: hsl(330, 18%, 21%);
|
|
--color-text-primary: hsl(0, 0%, 100%);
|
|
|
|
--color-secondary: hsl(6, 18%, 66%);
|
|
--color-secondary-lowered: hsl(6, 18%, 61%);
|
|
--color-text-secondary: hsl(0, 0%, 0%);
|
|
|
|
--color-link: #2949b2;
|
|
--color-shadow: rgba(0, 0, 0, 0.08);
|
|
--color-red: hsl(0, 84%, 40%);
|
|
--color-green: hsl(100, 84%, 20%);
|
|
--color-yellow: hsl(41, 63%, 75%);
|
|
--radius: 6px;
|
|
--circle: 360px;
|
|
--shadow-x-offset: 0;
|
|
--shadow-y-offset: 0.125rem;
|
|
--shadow-size: 0.25rem;
|
|
}
|
|
|
|
.dark,
|
|
.dark * {
|
|
--hue: 266;
|
|
--sat: 8%;
|
|
--lit: 10%;
|
|
--color-surface: hsl(var(--hue), var(--sat), calc(0% + var(--lit)));
|
|
--color-lowered: hsl(var(--hue), var(--sat), calc(6% + var(--lit)));
|
|
--color-raised: hsl(var(--hue), var(--sat), calc(2% + var(--lit)));
|
|
--color-super-lowered: hsl(var(--hue), var(--sat), calc(12% + var(--lit)));
|
|
--color-super-raised: hsl(var(--hue), var(--sat), calc(4% + var(--lit)));
|
|
--color-text: hsl(0, 0%, 95%);
|
|
|
|
--color-primary: hsl(331, 18%, 74%);
|
|
--color-primary-lowered: hsl(331, 18%, 69%);
|
|
--color-text-primary: hsl(0, 0%, 0%);
|
|
|
|
--color-secondary: hsl(6, 18%, 34%);
|
|
--color-secondary-lowered: hsl(6, 18%, 29%);
|
|
--color-text-secondary: hsl(0, 0%, 100%);
|
|
|
|
--color-link: #93c5fd;
|
|
--color-red: hsl(0, 94%, 82%);
|
|
--color-green: hsl(100, 94%, 82%);
|
|
--color-yellow: hsl(41, 63%, 65%);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
line-height: 1.5;
|
|
letter-spacing: 0.15px;
|
|
font-family:
|
|
"Inter", "Poppins", "Roboto", ui-sans-serif, system-ui, sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
"Noto Color Emoji";
|
|
color: var(--color-text);
|
|
background: var(--color-surface);
|
|
overflow: auto auto;
|
|
height: 100dvh;
|
|
scroll-behavior: smooth;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
main {
|
|
width: 80ch;
|
|
margin: 0 auto;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
article {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
main,
|
|
article,
|
|
nav,
|
|
header,
|
|
footer {
|
|
width: 100%;
|
|
}
|
|
|
|
article {
|
|
margin-top: 0;
|
|
}
|
|
|
|
main {
|
|
padding: 0;
|
|
}
|
|
|
|
body .card:not(.card *):not(#stream *):not(.user_plate),
|
|
body .pillmenu:not(.card *) > a,
|
|
body .card-nest:not(.card *) > .card,
|
|
body .banner {
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|
|
|
|
.content_container {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 500px) {
|
|
.content_container {
|
|
max-width: 540px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.content_container {
|
|
max-width: 720px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 900px) {
|
|
.content_container {
|
|
max-width: 960px;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
article {
|
|
padding: 0;
|
|
}
|
|
|
|
.content_container {
|
|
max-width: 1100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
video {
|
|
max-width: 100%;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
/* typo */
|
|
p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.no_p_margin p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.name {
|
|
max-width: 250px;
|
|
overflow: hidden;
|
|
/* overflow-wrap: break-word; */
|
|
overflow-wrap: anywhere;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@media screen and (min-width: 901px) {
|
|
.name.shorter {
|
|
max-width: 200px;
|
|
}
|
|
|
|
.name.lg\:long {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
font-family: "Jetbrains Mono", "Fire Code", monospace;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
background: var(--color-lowered);
|
|
border-radius: var(--radius);
|
|
padding: 0.25rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
pre {
|
|
padding: 1rem;
|
|
}
|
|
|
|
svg.icon {
|
|
stroke: currentColor;
|
|
width: 18px;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
svg.icon.filled {
|
|
fill: currentColor;
|
|
}
|
|
|
|
button svg {
|
|
pointer-events: none;
|
|
}
|
|
|
|
hr {
|
|
border-top: solid 1px var(--color-super-lowered) !important;
|
|
border-left: 0;
|
|
border-bottom: 0;
|
|
border-right: 0;
|
|
}
|
|
|
|
hr.margin {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
p,
|
|
li,
|
|
span,
|
|
code {
|
|
max-width: 100%;
|
|
overflow-wrap: normal;
|
|
text-wrap: pretty;
|
|
word-wrap: break-word;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
font-weight: 700;
|
|
width: -moz-max-content;
|
|
width: max-content;
|
|
position: relative;
|
|
max-width: 100%;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--color-link);
|
|
}
|
|
|
|
a.flush {
|
|
color: inherit;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.text-small {
|
|
font-size: 14px;
|
|
}
|
|
|
|
img {
|
|
display: inline;
|
|
max-width: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img.cover {
|
|
object-fit: cover;
|
|
}
|
|
|
|
img.fill {
|
|
object-fit: fill;
|
|
}
|
|
|
|
img.contain {
|
|
object-fit: contain;
|
|
}
|
|
|
|
img.emoji {
|
|
width: 1em;
|
|
height: 1em;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.media_gallery {
|
|
display: grid;
|
|
grid-auto-columns: 1fr 1fr;
|
|
grid-auto-flow: column dense;
|
|
border-radius: var(--radius);
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.media_gallery {
|
|
grid-auto-flow: row dense;
|
|
}
|
|
}
|
|
|
|
.media_gallery img {
|
|
border-radius: var(--radius);
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
transition: filter 0.15s;
|
|
}
|
|
|
|
.media_gallery img:hover {
|
|
filter: brightness(80%);
|
|
}
|
|
|
|
.lightbox {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
background: hsla(0, 0%, 0%, 50%);
|
|
backdrop-filter: blur(5px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100dvw;
|
|
height: 100dvh;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.lightbox_exit {
|
|
top: 1rem;
|
|
right: 1rem;
|
|
position: absolute;
|
|
}
|
|
|
|
.lightbox img {
|
|
box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
|
|
var(--color-shadow);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
/* avatar/banner */
|
|
.avatar {
|
|
--size: 50px;
|
|
--size-formula: var(--size);
|
|
border-radius: calc(var(--radius) / 2);
|
|
width: var(--size-formula);
|
|
min-width: var(--size-formula);
|
|
max-width: var(--size-formula);
|
|
height: var(--size-formula);
|
|
min-height: var(--size-formula);
|
|
max-height: var(--size-formula);
|
|
object-fit: cover;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.avatar {
|
|
--size-formula: clamp(24px, calc(var(--size) * 0.75), 64px);
|
|
}
|
|
|
|
textarea {
|
|
min-height: 12rem !important;
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
border-radius: var(--radius);
|
|
max-height: 350px;
|
|
}
|
|
|
|
.user_status span {
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.user_status .icon {
|
|
min-width: 1em;
|
|
min-height: 1em;
|
|
}
|
|
|
|
/* table */
|
|
table {
|
|
border-collapse: collapse;
|
|
max-width: 100%;
|
|
min-width: auto;
|
|
overflow: auto;
|
|
}
|
|
|
|
table th {
|
|
min-width: max-content;
|
|
padding: 6px 8px;
|
|
text-align: left;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
table td {
|
|
border-left: var(--color-super-lowered);
|
|
padding: 10px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
overflow-wrap: normal;
|
|
word-break: normal;
|
|
width: max-content;
|
|
}
|
|
|
|
table td:first-child {
|
|
border-left: 0;
|
|
}
|
|
|
|
table tr {
|
|
background: var(--color-lowered);
|
|
border-bottom: solid 1px var(--color-super-lowered);
|
|
}
|
|
|
|
table tr:nth-child(even) {
|
|
background: var(--color-raised);
|
|
}
|
|
|
|
table tr:hover {
|
|
background: var(--color-super-raised);
|
|
}
|
|
|
|
table thead tr {
|
|
background: transparent;
|
|
border-bottom: solid 5px var(--color-super-lowered);
|
|
}
|
|
|
|
table tbody tr td {
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
table td:focus-within {
|
|
box-shadow: none;
|
|
}
|
|
|
|
table p,
|
|
table ul,
|
|
table ol {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* card */
|
|
.card {
|
|
padding: 1rem;
|
|
background: var(--color-raised);
|
|
color: var(--color-text-raised);
|
|
box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
|
|
var(--color-shadow);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.card.small {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.card.tiny {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.card.secondary {
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.card.tertiary {
|
|
background: var(--color-lowered);
|
|
}
|
|
|
|
.card-nest {
|
|
box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
|
|
var(--color-shadow);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.card-nest .card {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.card-nest > .card:first-child {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
background: var(--color-super-raised);
|
|
}
|
|
|
|
.card-nest > .card:last-child {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
/* supporter card */
|
|
@property --border-angle {
|
|
syntax: "<angle>";
|
|
initial-value: 0deg;
|
|
inherits: false;
|
|
}
|
|
|
|
.supporter_ad {
|
|
--border-angle: 0deg;
|
|
padding: 2px;
|
|
background-image:
|
|
linear-gradient(var(--color-raised), var(--color-raised)),
|
|
repeating-conic-gradient(
|
|
from var(--border-angle),
|
|
var(--color-primary) 0%,
|
|
var(--color-primary-lowered) 50%
|
|
);
|
|
background-origin: border-box;
|
|
background-clip: content-box, border-box;
|
|
animation: 10s rotate_angle linear infinite;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@keyframes rotate_angle {
|
|
from {
|
|
--border-angle: 0deg;
|
|
}
|
|
|
|
to {
|
|
--border-angle: 360deg;
|
|
}
|
|
}
|
|
|
|
/* buttons */
|
|
button,
|
|
.button {
|
|
outline: none;
|
|
border: none;
|
|
transition: background 0.15s;
|
|
width: max-content;
|
|
height: 32px;
|
|
padding: 0.25rem 1rem;
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.9rem;
|
|
text-decoration: none !important;
|
|
user-select: none;
|
|
/* personality */
|
|
background: var(--color-primary);
|
|
color: var(--color-text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
button.small,
|
|
.button.small {
|
|
/* min-height: max-content; */
|
|
padding: 0.25rem 0.5rem;
|
|
height: 24px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
button.small.square,
|
|
.button.small.square {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
button.big_icon svg,
|
|
.button.big_icon svg {
|
|
height: 16px;
|
|
min-width: 16px;
|
|
}
|
|
|
|
button:hover,
|
|
.button:hover {
|
|
background: var(--color-primary-lowered);
|
|
}
|
|
|
|
button.secondary,
|
|
.button.secondary {
|
|
background: var(--color-secondary);
|
|
color: var(--color-text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
button.secondary:hover,
|
|
.button.secondary:hover {
|
|
background: var(--color-secondary-lowered);
|
|
}
|
|
|
|
button.tertiary,
|
|
.button.tertiary {
|
|
background: var(--color-raised);
|
|
color: var(--color-text-raised);
|
|
}
|
|
|
|
button.tertiary:hover,
|
|
.button.tertiary:hover {
|
|
background: var(--color-super-raised);
|
|
}
|
|
|
|
button.quaternary,
|
|
.button.quaternary {
|
|
background: var(--color-lowered);
|
|
color: var(--color-text-lowered);
|
|
}
|
|
|
|
button.quaternary:hover,
|
|
.button.quaternary:hover {
|
|
background: var(--color-super-lowered);
|
|
}
|
|
|
|
button.camo,
|
|
.button.camo {
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
button.camo:hover,
|
|
.button.camo:hover {
|
|
background: var(--color-lowered);
|
|
color: var(--color-text-lowered);
|
|
}
|
|
|
|
/* input */
|
|
input,
|
|
textarea,
|
|
select {
|
|
padding: 0.35rem 0.75rem;
|
|
border-radius: var(--radius);
|
|
border: solid 1px var(--color-super-lowered);
|
|
outline: none;
|
|
transition: background 0.15s;
|
|
resize: vertical;
|
|
width: 100%;
|
|
font-family: inherit;
|
|
font-size: 16px;
|
|
/* personality */
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 5rem;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
background: var(--color-super-raised);
|
|
color: var(--color-text-raised);
|
|
}
|
|
|
|
/* pillmenu */
|
|
.pillmenu {
|
|
display: flex;
|
|
border-radius: var(--radius);
|
|
user-select: none;
|
|
box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
|
|
var(--color-shadow);
|
|
}
|
|
|
|
.pillmenu a {
|
|
text-decoration: none;
|
|
padding: 0.5rem 1rem;
|
|
width: 100%;
|
|
color: var(--color-text-raised);
|
|
background: var(--color-super-raised);
|
|
border-radius: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
}
|
|
|
|
.pillmenu a span {
|
|
z-index: 1;
|
|
display: inherit;
|
|
gap: inherit;
|
|
justify-content: inherit;
|
|
align-items: inherit;
|
|
flex-wrap: inherit;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.pillmenu a:hover {
|
|
background: var(--color-raised);
|
|
}
|
|
|
|
.pillmenu a.active {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.pillmenu a:first-child {
|
|
border-top-left-radius: var(--radius);
|
|
border-bottom-left-radius: var(--radius);
|
|
}
|
|
|
|
.pillmenu a:last-child {
|
|
border-top-right-radius: var(--radius);
|
|
border-bottom-right-radius: var(--radius);
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.pillmenu {
|
|
/* convert into a sidemenu */
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pillmenu a:first-child {
|
|
border-top-left-radius: var(--radius);
|
|
border-top-right-radius: var(--radius);
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.pillmenu a:last-child {
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: var(--radius);
|
|
border-bottom-right-radius: var(--radius);
|
|
}
|
|
}
|
|
|
|
/* notification */
|
|
.notification {
|
|
text-decoration: none;
|
|
color: black;
|
|
background: white;
|
|
padding: 0.05rem 0.3rem;
|
|
font-size: 12px;
|
|
border-radius: 6px;
|
|
height: max-content;
|
|
}
|
|
|
|
.notification.tr {
|
|
padding: 0.05rem 0.3rem !important;
|
|
}
|
|
|
|
.notification.camo {
|
|
background: transparent;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
padding: 0;
|
|
}
|
|
|
|
/* chip */
|
|
.chip {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-primary);
|
|
font-weight: 600;
|
|
border-radius: var(--circle);
|
|
padding: 0.05rem 0.75rem;
|
|
}
|
|
|
|
/* nav */
|
|
nav {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-primary) !important;
|
|
color: inherit;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--color-text);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 6374;
|
|
padding: 0.25rem 0.5rem;
|
|
transition: opacity 0.15s;
|
|
font-size: 16px;
|
|
}
|
|
|
|
nav .notification {
|
|
font-size: 10px;
|
|
}
|
|
|
|
nav .content_container,
|
|
footer .content_container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
nav button:not(.inner *),
|
|
nav .button:not(.inner *) {
|
|
border-radius: var(--radius);
|
|
color: inherit;
|
|
padding: 0.75rem 0.75rem;
|
|
background: transparent;
|
|
text-decoration: none;
|
|
position: relative;
|
|
height: 48px;
|
|
font-weight: 500;
|
|
transition:
|
|
opacity 0.15s,
|
|
transform 0.15s;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
nav button:not(.inner *):hover,
|
|
nav .button:not(.inner *):hover {
|
|
background: transparent !important;
|
|
outline: none;
|
|
opacity: 100%;
|
|
}
|
|
|
|
nav button:not(.title):not(.active),
|
|
nav .button:not(.title):not(.active) {
|
|
opacity: 75%;
|
|
}
|
|
|
|
nav button:not(.title):not(.active):hover,
|
|
nav .button:not(.title):not(.active):hover {
|
|
opacity: 100%;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
nav {
|
|
padding: 0.5rem 0.25rem;
|
|
margin-bottom: 0;
|
|
backdrop-filter: none;
|
|
bottom: 0;
|
|
position: absolute;
|
|
height: max-content;
|
|
top: unset;
|
|
}
|
|
|
|
#page {
|
|
padding-bottom: 72px;
|
|
}
|
|
|
|
nav button:not(.dropdown *),
|
|
nav .button:not(.dropdown *) {
|
|
font-size: 12px;
|
|
flex-direction: column;
|
|
width: 60px;
|
|
height: 48px !important;
|
|
gap: 0 !important;
|
|
transform: scale(0.9);
|
|
padding: 0 !important;
|
|
}
|
|
|
|
nav button.active,
|
|
nav .button.active {
|
|
animation: grow 1 0.25s 0.1s forwards running;
|
|
}
|
|
|
|
nav button .notification.tr,
|
|
nav .button .notification.tr {
|
|
font-size: 12px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
nav .button:not(.dropdown *) svg {
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
}
|
|
|
|
nav button::before,
|
|
nav a::before {
|
|
content: unset;
|
|
}
|
|
|
|
nav .nav_side {
|
|
display: contents;
|
|
}
|
|
}
|
|
|
|
/* dialog */
|
|
dialog {
|
|
padding: 0;
|
|
position: fixed;
|
|
bottom: 0;
|
|
top: 0;
|
|
display: flex;
|
|
background: var(--color-surface);
|
|
border: solid 1px var(--color-super-lowered) !important;
|
|
border-radius: var(--radius);
|
|
max-width: 100%;
|
|
border-style: none;
|
|
display: none;
|
|
margin: auto;
|
|
color: var(--color-text);
|
|
animation: popin ease-in-out 1 0.1s forwards running;
|
|
}
|
|
|
|
dialog .inner {
|
|
padding: 1rem;
|
|
width: 25rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
dialog .inner hr:not(.flipped):last-of-type {
|
|
/* options separator */
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
dialog .inner hr.flipped:last-of-type {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
dialog[open] {
|
|
display: block;
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background: hsla(0, 0%, 0%, 50%);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
/* dropdown */
|
|
.dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown .inner {
|
|
--horizontal-padding: 1.25rem;
|
|
display: none;
|
|
position: absolute;
|
|
background: var(--color-raised);
|
|
border: solid 1px var(--color-super-lowered);
|
|
z-index: 2;
|
|
border-radius: var(--radius);
|
|
top: calc(100% + 5px);
|
|
right: 0;
|
|
width: max-content;
|
|
min-width: 10rem;
|
|
max-width: 100dvw;
|
|
max-height: 80dvh;
|
|
overflow: auto;
|
|
padding: 0.5rem 0;
|
|
box-shadow: 0 0 8px 2px var(--color-shadow);
|
|
}
|
|
|
|
.dropdown .inner.top {
|
|
top: unset;
|
|
bottom: calc(100% + 5px);
|
|
}
|
|
|
|
.dropdown .inner.left {
|
|
left: 0;
|
|
right: unset;
|
|
}
|
|
|
|
.dropdown .inner.open {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dropdown .inner .title {
|
|
padding: 0.25rem var(--horizontal-padding);
|
|
font-size: 13px;
|
|
opacity: 50%;
|
|
color: var(--color-text-raised);
|
|
text-align: left;
|
|
}
|
|
|
|
.dropdown .inner b.title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dropdown .inner .title:not(:first-of-type) {
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
.dropdown .inner a,
|
|
.dropdown .inner button {
|
|
width: 100%;
|
|
padding: 0.25rem var(--horizontal-padding);
|
|
transition: none !important;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 0.5rem;
|
|
color: var(--color-text-raised);
|
|
box-shadow: none !important;
|
|
background: transparent;
|
|
border-radius: 0 !important;
|
|
font-size: 13px;
|
|
min-height: 30px !important;
|
|
height: 30px !important;
|
|
font-weight: 500 !important;
|
|
position: relative;
|
|
opacity: 100% !important;
|
|
|
|
& svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
}
|
|
|
|
.dropdown .inner a:hover,
|
|
.dropdown .inner button:hover {
|
|
background-color: var(--color-lowered);
|
|
}
|
|
|
|
.dropdown .inner a:focus,
|
|
.dropdown .inner button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.dropdown:not(nav *):has(.inner.open) button:not(.inner button) {
|
|
color: var(--color-text) !important;
|
|
background: var(--color-lowered) !important;
|
|
}
|
|
|
|
.dropdown:not(nav *):has(.inner.open) button.primary:not(.inner button) {
|
|
color: var(--color-text-primary) !important;
|
|
background: var(--color-primary-lowered) !important;
|
|
}
|
|
|
|
.dropdown button .icon {
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
.dropdown:has(.inner.open) .dropdown-arrow {
|
|
transform: rotateZ(180deg);
|
|
}
|
|
|
|
/* toasts */
|
|
#toast_zone {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 0.25rem;
|
|
position: fixed;
|
|
bottom: 0.5rem;
|
|
right: 0.5rem;
|
|
z-index: 6880;
|
|
width: calc(100% - 1rem);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast {
|
|
box-shadow: 0 0 8px var(--color-shadow);
|
|
width: max-content;
|
|
max-width: calc(100dvw - 1rem);
|
|
border-radius: var(--radius);
|
|
padding: 0.75rem 1rem;
|
|
animation: popin ease-in-out 1 0.15s running;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.toast.success {
|
|
background: rgb(41, 81, 56);
|
|
color: rgb(134, 239, 172);
|
|
}
|
|
|
|
.toast.error {
|
|
background: rgb(81, 41, 41);
|
|
color: rgb(239, 134, 134);
|
|
}
|
|
|
|
.toast .timer {
|
|
font-family: monospace;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: max-content;
|
|
}
|
|
|
|
@keyframes popin {
|
|
from {
|
|
opacity: 0%;
|
|
transform: scale(0);
|
|
}
|
|
|
|
to {
|
|
opacity: 100%;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeout {
|
|
from {
|
|
opacity: 100%;
|
|
transform: scale(1);
|
|
}
|
|
|
|
to {
|
|
opacity: 0%;
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
|
|
/* tag */
|
|
.tag {
|
|
font-size: 0.825rem;
|
|
font-family: monospace;
|
|
opacity: 75%;
|
|
color: inherit;
|
|
}
|
|
|
|
/* hook:long */
|
|
.hook\:long\.hidden_text {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hook\:long\.hidden_text::before {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: linear-gradient(transparent 20%, var(--color-surface));
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.hook\:long\.hidden_text::after {
|
|
position: absolute;
|
|
content: "Show full content";
|
|
border-radius: var(--radius);
|
|
padding: 0.25rem 0.75rem;
|
|
background: var(--color-primary);
|
|
font-weight: 600;
|
|
bottom: 20px;
|
|
opacity: 0%;
|
|
left: calc(50% - (180px / 2));
|
|
width: 156px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: scale(0);
|
|
transition:
|
|
transform 0.15s,
|
|
opacity 0.25s;
|
|
box-shadow: 0 8px 16px var(--color-shadow);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.hook\:long\.hidden_text:hover::after {
|
|
transform: scale(1);
|
|
opacity: 100%;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.hook\:long\.hidden_text::after {
|
|
transform: scale(1);
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
|
|
/* turbo */
|
|
.turbo-progress-bar {
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
/* details */
|
|
details summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
transition: background 0.15s;
|
|
cursor: pointer;
|
|
width: max-content;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--radius);
|
|
background: var(--color-lowered);
|
|
}
|
|
|
|
details summary:hover {
|
|
background: var(--color-super-lowered);
|
|
}
|
|
|
|
details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
details[open] summary {
|
|
background: hsla(var(--color-primary-hsl), 25%);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
details .card {
|
|
background: var(--color-super-raised);
|
|
}
|
|
|
|
details.accordion {
|
|
--background: var(--color-surface);
|
|
width: 100%;
|
|
}
|
|
|
|
details.accordion summary {
|
|
background: var(--background);
|
|
border: solid 1px var(--color-super-lowered);
|
|
border-radius: var(--radius);
|
|
padding: 0.75rem 1rem;
|
|
margin: 0;
|
|
width: 100%;
|
|
user-select: none;
|
|
}
|
|
|
|
details.accordion summary .icon {
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
details.accordion[open] summary .icon {
|
|
transform: rotateZ(180deg);
|
|
}
|
|
|
|
details.accordion[open] summary {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
details.accordion .inner {
|
|
background: var(--background);
|
|
padding: 0.75rem 1rem;
|
|
border-radius: var(--radius);
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border: solid 1px var(--color-super-lowered);
|
|
border-top: none;
|
|
}
|
|
|
|
/* utility */
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-rev-col {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.flex-row {
|
|
flex-direction: row !important;
|
|
}
|
|
|
|
.flex-rev-row {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.justify-right {
|
|
justify-content: right;
|
|
}
|
|
|
|
.justify-start {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.gap-1 {
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.gap-2 {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.gap-4 {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.gap-8 {
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.mobile {
|
|
display: none !important;
|
|
}
|
|
|
|
@media screen and (max-width: 650px) {
|
|
.desktop {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.flex-collapse {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.sm\:static {
|
|
position: static !important;
|
|
}
|
|
|
|
.mobile.flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.sm\:w-full {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
}
|
|
|
|
.sm\:mt-2 {
|
|
margin-top: 2rem !important;
|
|
}
|
|
|
|
.sm\:items-start {
|
|
align-items: flex-start !important;
|
|
}
|
|
|
|
.sm\:contents {
|
|
display: contents !important;
|
|
}
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: 0 0 8px var(--color-shadow);
|
|
}
|
|
|
|
.shadow-md {
|
|
box-shadow: 0 8px 16px var(--color-shadow);
|
|
}
|
|
|
|
.round-sm {
|
|
border-radius: calc(var(--radius) / 2) !important;
|
|
}
|
|
|
|
.round {
|
|
border-radius: var(--radius) !important;
|
|
}
|
|
|
|
.round-md {
|
|
border-radius: calc(var(--radius) * 2) !important;
|
|
}
|
|
|
|
.round-lg {
|
|
border-radius: calc(var(--radius) * 4) !important;
|
|
}
|
|
|
|
.w-full {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.w-content {
|
|
width: max-content !important;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: 600;
|
|
}
|
|
|
|
[disabled="fully"] {
|
|
opacity: 75%;
|
|
pointer-events: visible;
|
|
cursor: not-allowed;
|
|
user-select: none;
|
|
}
|
|
|
|
.fade,
|
|
.CodeMirror-placeholder {
|
|
opacity: 75%;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.ff-inherit {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.fs-md {
|
|
font-size: 12px;
|
|
}
|
|
|
|
[align="center"],
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
[align="right"],
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.red {
|
|
color: var(--color-red) !important;
|
|
}
|
|
|
|
.green {
|
|
color: var(--color-green) !important;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
align {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
align.center {
|
|
text-align: center;
|
|
}
|
|
|
|
align.right {
|
|
text-align: right;
|
|
}
|