790 lines
No EOL
17 KiB
CSS
790 lines
No EOL
17 KiB
CSS
/* ╭────────────────────────╮
|
|
/ │ _ │
|
|
/ │ | |__ __ _ ___ ___ │
|
|
/ │ | '_ \ / _` / __|/ _ \ │
|
|
/ │ | |_) | (_| \__ \ __/ │
|
|
/ │ |_.__/ \__,_|___/\___| │
|
|
/ ╰────────────────────────╯
|
|
/ base - styling for regular/global html elements as well as the color schemes, and anything else that doesn't fit anywhere else */
|
|
|
|
/* ----------------------------------
|
|
- background wallpaper, global font -
|
|
---------------------------------- */
|
|
|
|
html {
|
|
background: var(--background);
|
|
background-repeat: repeat;
|
|
background-size: auto;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family);
|
|
font-size: 1.05rem;
|
|
line-height: 1.45rem;
|
|
text-transform: lowercase;
|
|
margin: unset !important;
|
|
}
|
|
|
|
bg-gradient {
|
|
background: linear-gradient(color-mix(in srgb, var(--accent) 10%, var(--background)), color-mix(in srgb, var(--accent) 50%, var(--background)));
|
|
background-repeat: repeat;
|
|
inset: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
position: fixed;
|
|
z-index: -10001;
|
|
}
|
|
|
|
bg-image {
|
|
display: block;
|
|
position: fixed;
|
|
animation: 80s linear infinite bg-move;
|
|
opacity: .6;
|
|
background-repeat: repeat;
|
|
background-size: auto;
|
|
background-image: url(/assets/bg.svg);
|
|
inset: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
z-index: -10000;
|
|
}
|
|
|
|
content-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3rem;
|
|
margin-bottom: 4rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 5rem;
|
|
max-width: 60rem;
|
|
|
|
transition: opacity .5s, translate .5s;
|
|
opacity: 1;
|
|
translate: 0 0;
|
|
@starting-style {
|
|
opacity: 0;
|
|
translate: 0 1rem;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
@media screen and (max-width: 60rem) {
|
|
& {
|
|
gap: 2rem !important;
|
|
margin-bottom: 1rem;
|
|
margin-top: 3.4rem;
|
|
}
|
|
|
|
main {
|
|
gap: 1.5rem !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* text formatting and config stuff */
|
|
|
|
/* headings */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
border-bottom: .15rem solid var(--border);
|
|
color: var(--foreground);
|
|
margin-bottom: .8rem;
|
|
margin-top: 1.5rem;
|
|
padding-bottom: .2rem;
|
|
transition: .2s;
|
|
|
|
& a {
|
|
text-decoration-color: transparent;
|
|
|
|
&:hover {
|
|
text-decoration-color: var(--accent);
|
|
}
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h1 a {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2,
|
|
h2 a {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
h3, h4,
|
|
h3 a, h4 a {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
[accent] {
|
|
color: var(--accent);
|
|
}
|
|
|
|
[link-color] {
|
|
color: var(--link);
|
|
}
|
|
|
|
/* information colors */
|
|
[info] {
|
|
color: var(--blue);
|
|
}
|
|
|
|
[warning] {
|
|
color: var(--warning);
|
|
}
|
|
|
|
/* utility classes or whatever they call them */
|
|
[t-center] {
|
|
text-align: center;
|
|
}
|
|
|
|
/* links should look good i think */
|
|
a {
|
|
color: var(--foreground);
|
|
text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
|
text-decoration-thickness: 0.1em;
|
|
transition: 0.2s;
|
|
|
|
&:hover {
|
|
color: var(--link);
|
|
text-decoration-color: var(--accent);
|
|
text-decoration-skip-ink: none;
|
|
text-decoration-thickness: .3em;
|
|
transition: 0.2s;
|
|
}
|
|
}
|
|
|
|
/* smol text */
|
|
small,
|
|
small a {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* lists need some styling */
|
|
ul {
|
|
margin-left: -1.3rem;
|
|
ul { margin-bottom: .5rem; }
|
|
|
|
li {
|
|
margin-bottom: .5rem;
|
|
&:last-child { margin-bottom: 0; }
|
|
|
|
&::marker {
|
|
color: var(--accent);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* text with "title", little hover-over info tibblets */
|
|
span[title] {
|
|
cursor: help;
|
|
text-decoration-color: color-mix(in srgb, var(--foreground) 40%, transparent);
|
|
text-decoration-line: underline;
|
|
text-decoration-style: dashed;
|
|
text-decoration-thickness: 0.1em;
|
|
transition: 0.2s;
|
|
|
|
&:hover {
|
|
text-decoration-color: color-mix(in srgb, var(--foreground) 80%, transparent);
|
|
text-decoration-skip-ink: none;
|
|
transition: 0.2s;
|
|
}
|
|
}
|
|
|
|
/* code (enforced monospace) */
|
|
.code {
|
|
font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important;
|
|
}
|
|
|
|
/* caption styled text */
|
|
.caption {
|
|
font-size: small;
|
|
opacity: .8;
|
|
|
|
.section {
|
|
font-size: smaller;
|
|
opacity: .9;
|
|
}
|
|
}
|
|
|
|
/* styled details elements */
|
|
details {
|
|
&[styled] {
|
|
background-color: light-dark(color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 3%, transparent));
|
|
border-radius: .8rem .4rem .8rem .4rem;
|
|
border: .13rem solid var(--accent);
|
|
margin-bottom: 1rem;
|
|
|
|
summary {
|
|
background: linear-gradient(color-mix(in srgb, var(--accent) 2%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
|
|
border-bottom: unset;
|
|
cursor: pointer;
|
|
padding: .45rem;
|
|
|
|
icon-tabler[arrow-autofit-height] {
|
|
float: right;
|
|
}
|
|
|
|
&::marker {
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
details-content {
|
|
display: block;
|
|
padding: .8rem;
|
|
|
|
p:first-of-type { margin-top: 0; }
|
|
p:last-of-type { margin-bottom: 0; }
|
|
}
|
|
|
|
&[open] {
|
|
summary {
|
|
border-bottom: .1rem solid var(--accent);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* more minimal "content warning" styled details elements */
|
|
details.cw {
|
|
summary {
|
|
span {
|
|
color: var(--yellow);
|
|
padding-right: .6rem;
|
|
transform: translateY(.1rem);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tabler--chevron-down:last-of-type {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
background: color-mix(in srgb, var(--yellow) 5%, var(--background));
|
|
border-radius: .4rem;
|
|
border: .1rem solid var(--yellow);
|
|
cursor: pointer;
|
|
padding: .3rem;
|
|
transform: 0.2s;
|
|
width: fit-content;
|
|
}
|
|
|
|
section {
|
|
background-color: color-mix(in srgb, var(--background) 95%, white);
|
|
border-radius: .4rem;
|
|
border: .1rem solid var(--border);
|
|
margin-top: .7rem;
|
|
padding: .4rem;
|
|
text-align: start !important;
|
|
|
|
ul {
|
|
margin: 0 0 0 -.5rem;
|
|
}
|
|
|
|
p:first-of-type {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
p:last-of-type {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
overflow: clip;
|
|
}
|
|
|
|
details.cw[open] {
|
|
.tabler--chevron-down:last-of-type {
|
|
transform: 0.2s;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
/* badge text styling */
|
|
.badge {
|
|
border-radius: .2rem;
|
|
border: .1rem solid var(--accent);
|
|
color: var(--link);
|
|
font-size: .8rem;
|
|
font-weight: normal;
|
|
padding: .15rem;
|
|
}
|
|
|
|
/* card styling */
|
|
card-container {
|
|
display: grid;
|
|
gap: 1.2rem;
|
|
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
|
|
|
|
card-entry {
|
|
background-color: var(--background-secondary);
|
|
border-radius: 1rem;
|
|
border: .15rem solid var(--border);
|
|
display: flex;
|
|
flex-flow: column;
|
|
height: auto;
|
|
padding: .6rem;
|
|
width: auto;
|
|
|
|
h3 {
|
|
border-bottom: unset;
|
|
margin-bottom: 1rem;
|
|
margin-top: 0;
|
|
|
|
[icon] {
|
|
height: 1.4rem;
|
|
transition: .3s;
|
|
vertical-align: top;
|
|
}
|
|
|
|
span[status] {
|
|
display: flex;
|
|
flex-direction: row;
|
|
float: right;
|
|
|
|
icon-tabler {
|
|
margin-left: .3rem;
|
|
&[lock] {
|
|
color: var(--link);
|
|
}
|
|
&[device-desktop-cog] {
|
|
color: var(--blue);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
h3 {
|
|
[icon] {
|
|
margin-right: .4rem;
|
|
transform: rotate(15deg) scale(2.5) translateX(-.1rem) translateY(-.2rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
&[advise-against] {
|
|
opacity: .7;
|
|
transition: 1s;
|
|
border-color: color-mix(in srgb, var(--warning) 30%, transparent);
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
buttons-container {
|
|
margin-top: auto;
|
|
|
|
img {
|
|
align-self: center;
|
|
border-radius: 10rem;
|
|
height: 1.3rem;
|
|
vertical-align: middle;
|
|
width: auto;
|
|
}
|
|
|
|
a {
|
|
icon-tabler {
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:has(img[src^="https://compliance"]) {
|
|
align-self: center;
|
|
font-size: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* notice/section cards */
|
|
[notice-card] {
|
|
--n-bg: var(--accent);
|
|
border-radius: 1rem;
|
|
border: .15rem solid color-mix(in srgb, var(--yellow) 20%, transparent);
|
|
color: var(--foreground);
|
|
margin-bottom: .8rem;
|
|
padding: .5rem;
|
|
|
|
h3 {
|
|
color: var(--link);
|
|
margin-top: 0;
|
|
}
|
|
p, ul { &:last-of-type { margin-bottom: 0; } }
|
|
|
|
&[important], &[warning] {
|
|
--n-bg: var(--yellow);
|
|
background-color: color-mix(in srgb, var(--n-bg) 15%, transparent);
|
|
h3 { color: var(--yellow); }
|
|
}
|
|
}
|
|
|
|
/* Dashed border */
|
|
hr[dashed] {
|
|
border: .1rem dashed var(--border);
|
|
}
|
|
|
|
/* Dotted border */
|
|
hr[dotted] {
|
|
border: .1rem dotted var(--border);
|
|
}
|
|
|
|
/* Solid border */
|
|
hr[solid] {
|
|
border: .1rem solid var(--border);
|
|
}
|
|
|
|
/* Rounded border */
|
|
hr[rounded] {
|
|
border: .2rem solid var(--border);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* text formatting, like github kinda */
|
|
.info-box {
|
|
padding: .5rem;
|
|
border: .1rem solid;
|
|
border-radius: .4rem;
|
|
|
|
&.info {
|
|
background-color: color-mix(in srgb, var(--blue) 8%, transparent);
|
|
border-color: var(--blue);
|
|
.icon { color: var(--blue); }
|
|
}
|
|
|
|
&.warn {
|
|
background-color: color-mix(in srgb, var(--orange) 8%, transparent);
|
|
border-color: var(--orange);
|
|
.icon { color: var(--orange); }
|
|
}
|
|
}
|
|
|
|
/* audio */
|
|
audio {
|
|
border-radius: 3rem;
|
|
}
|
|
|
|
/* button link styling */
|
|
.button {
|
|
background-color: color-mix(in srgb, var(--accent) 25%, transparent);
|
|
border-radius: 1rem;
|
|
color: var(--foreground);
|
|
padding: .4rem;
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
transition: all .2s;
|
|
white-space: nowrap;
|
|
line-height: 3rem;
|
|
|
|
.icon {
|
|
transform: scale(1.13) translateY(.7rem);
|
|
}
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: var(--accent);
|
|
color: var(--foreground);
|
|
transition: all .2s;
|
|
}
|
|
|
|
.button-container {
|
|
margin-bottom: unset !important;
|
|
}
|
|
|
|
/* focus styling */
|
|
*:focus-visible {
|
|
outline: .4rem solid var(--ui-purple) !important;
|
|
border-radius: .2rem;
|
|
z-index: 999999 !important;
|
|
}
|
|
|
|
/* image-button grid */
|
|
imgbtn-grid {
|
|
align-items: normal;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
font-size: 0 !important;
|
|
gap: 5px;
|
|
justify-content: center;
|
|
line-height: 0;
|
|
margin-inline: auto;
|
|
|
|
&:last-child {
|
|
margin-bottom: .8rem;
|
|
}
|
|
|
|
img {
|
|
height: 31px;
|
|
image-rendering: crisp-edges !important;
|
|
margin: unset !important;
|
|
transition: transform 0.2s;
|
|
width: 88px;
|
|
}
|
|
|
|
.generic {
|
|
align-content: center;
|
|
background-color: color-mix(in srgb, var(--background) 90%, white);
|
|
border: solid .15rem;
|
|
box-sizing: border-box;
|
|
color: var(--foreground);
|
|
font-size: .95rem !important;
|
|
height: 31px;
|
|
text-align: center;
|
|
transition: transform 0.2s;
|
|
width: 88px;
|
|
}
|
|
|
|
.generic:hover, img:hover {
|
|
transform: scale(2);
|
|
}
|
|
}
|
|
|
|
/* no forced uncapitalization */
|
|
[no-uncap] {
|
|
text-transform: none !important;
|
|
}
|
|
|
|
/* spoiler text */
|
|
spoiler {
|
|
filter: blur(.4rem) contrast(200%);
|
|
transition: 0.2s;
|
|
|
|
&:hover {
|
|
filter: unset !important;
|
|
transition: 0.2s;
|
|
}
|
|
}
|
|
|
|
/* ------------------
|
|
- nsfw toggle group -
|
|
------------------ */
|
|
|
|
.nsfw-toggle-holder {
|
|
background-color: color-mix(in srgb, var(--background) 95%, white);
|
|
border-radius: 1rem;
|
|
border: .2rem solid var(--border);
|
|
color: var(--foreground);
|
|
padding: .5rem;
|
|
position: fixed;
|
|
max-width: 30rem;
|
|
margin-left: .4rem;
|
|
z-index: 30;
|
|
right: .4rem;
|
|
top: 3rem;
|
|
transition: 0.2s;
|
|
|
|
/* inital "shrunken" state */
|
|
opacity: .5;
|
|
scale: .75;
|
|
transform-origin: top right;
|
|
|
|
|
|
/* hide captions when unhovered */
|
|
.caption {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
transition: 0.2s;
|
|
|
|
/* hovered "full" state */
|
|
opacity: 1;
|
|
scale: 1;
|
|
|
|
.caption {
|
|
opacity: .9;
|
|
display: unset;
|
|
}
|
|
}
|
|
|
|
.nsfw-toggle, .spoil-nsfw-toggle {
|
|
display: block;
|
|
}
|
|
|
|
/* hide the spoil option if nsfw itself is disabled */
|
|
.spoil-nsfw-toggle {
|
|
display: none;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
&:has(input[type="checkbox"]#view-nsfw-content:checked) .spoil-nsfw-toggle {
|
|
display: inherit !important;
|
|
}
|
|
|
|
/* shrink it even more if on a small display */
|
|
@media screen and (max-width: 580px) {
|
|
scale: .5;
|
|
}
|
|
}
|
|
|
|
/* _is-nsfw class for elements that are "nsfw" - will be hidden and spoiled by default */
|
|
._is-nsfw {
|
|
display: none;
|
|
}
|
|
|
|
/* inverse to remove elements if they aren't nsfw while the option is toggled */
|
|
._is-nsfw-inverse {
|
|
display: inherit;
|
|
}
|
|
|
|
/* show if enabled */
|
|
html:has(input[type="checkbox"]#view-nsfw-content:checked) {
|
|
._is-nsfw {
|
|
display: inherit;
|
|
}
|
|
|
|
._is-nsfw-inverse {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* blue/spoiler if enabled */
|
|
html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
|
|
._is-nsfw {
|
|
filter: blur(.4rem) contrast(200%);
|
|
transition: 0.2s;
|
|
|
|
&:hover {
|
|
filter: unset !important;
|
|
transition: 0.2s;
|
|
}
|
|
}
|
|
|
|
/* _always-show to ignore the "spoiler" option */
|
|
._always-show {
|
|
filter: unset !important;
|
|
}
|
|
}
|
|
|
|
/* alt text popup */
|
|
|
|
.alt-popup {
|
|
position: fixed;
|
|
background-color: color-mix(in srgb, var(--background) 85%, transparent);
|
|
backdrop-filter: blur(.5rem);
|
|
color: var(--foreground);
|
|
padding: .5rem;
|
|
border: solid .01rem var(--accent);
|
|
border-radius: .5rem;
|
|
font-size: 1rem;
|
|
max-width: 30rem;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.4s;
|
|
}
|
|
|
|
/* widgets */
|
|
|
|
buttons-container {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
gap: .4rem;
|
|
}
|
|
|
|
[button] {
|
|
background: light-dark(color-mix(in srgb,var(--accent)40%,transparent), color-mix(in srgb,var(--accent)25%,transparent));
|
|
border-radius: 10rem;
|
|
padding: .2rem .5rem;
|
|
text-decoration: none !important;
|
|
transition: .2s;
|
|
|
|
&:hover {
|
|
background: var(--accent);
|
|
color: light-dark(var(--foreground), var(--background));
|
|
}
|
|
}
|
|
|
|
radio-button-group {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
gap: .4rem;
|
|
|
|
label {
|
|
border-radius: .4rem;
|
|
border: .13rem solid var(--border);
|
|
cursor: pointer;
|
|
padding: .2rem;
|
|
width: fit-content;
|
|
word-break: break-word;
|
|
|
|
&:has(input:checked) {
|
|
border-color: var(--accent);
|
|
background-color: color-mix(in srgb, var(--accent) 15%, var(--background));
|
|
}
|
|
|
|
&:hover, &:focus-visible {
|
|
background: var(--hover);
|
|
}
|
|
}
|
|
|
|
input {
|
|
/* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */
|
|
opacity: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
checkbox-button-group {
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: .5rem;
|
|
|
|
label {
|
|
border-radius: .4rem;
|
|
border: .13rem solid var(--border);
|
|
cursor: pointer;
|
|
margin-right: .3rem;
|
|
padding: .2rem;
|
|
width: fit-content;
|
|
word-break: break-word;
|
|
|
|
&::before {
|
|
background: var(--border);
|
|
border-radius: 10rem;
|
|
content: '';
|
|
display: inline-flex;
|
|
height: 1rem;
|
|
margin-bottom: -.15rem;
|
|
margin-left: .2rem;
|
|
margin-right: .3rem;
|
|
position: relative;
|
|
transition: .2s;
|
|
width: 1rem;
|
|
}
|
|
|
|
&:has(input:checked) {
|
|
border-color: var(--accent);
|
|
background-color: color-mix(in srgb, var(--accent) 15%, var(--background));
|
|
|
|
&::before {
|
|
background: var(--accent);
|
|
}
|
|
}
|
|
|
|
&:hover, &:focus-visible {
|
|
background: var(--hover);
|
|
}
|
|
}
|
|
|
|
input {
|
|
/* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */
|
|
opacity: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
} |