3073 lines
No EOL
98 KiB
CSS
3073 lines
No EOL
98 KiB
CSS
/* ╭──────────────────────────────────────╮
|
|
/ │ _ _ │
|
|
/ │ ___| |_ _ _| | ___ ___ ___ ___ │
|
|
/ │ / __| __| | | | |/ _ \ / __/ __/ __| │
|
|
/ │ \__ \ |_| |_| | | __/| (__\__ \__ \ │
|
|
/ │ |___/\__|\__, |_|\___(_)___|___/___/ │
|
|
/ │ |___/ │
|
|
/ ╰──────────────────────────────────────╯
|
|
/ style.css - synth.download styling featuring these fancy ass thingies because why the hell not */
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭───────────────────────────────────────────────────────╮
|
|
/ │ _ _ _ _ _ _ │
|
|
/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │
|
|
/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │
|
|
/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │
|
|
/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │
|
|
/ │ |___/ │
|
|
/ ╰───────────────────────────────────────────────────────╯
|
|
/ accessibility - choosable accessibility settings */
|
|
|
|
/* - font settings - */
|
|
|
|
/* jetbrains mono */
|
|
:root:has(#font-jbm:checked) {
|
|
--font-family: 'JetBrains Mono', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
|
|
|
.navbar .nav-base.nav-right.nav-systray span {
|
|
margin: 0px -.1rem;
|
|
}
|
|
}
|
|
|
|
/* atkinson hyperlegible next */
|
|
:root:has(#font-ahn:checked) {
|
|
--font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
|
}
|
|
|
|
/* inter */
|
|
:root:has(#font-inter:checked) {
|
|
--font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
|
}
|
|
|
|
/* (browser) sans serif */
|
|
:root:has(#font-sans-serif:checked) {
|
|
--font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui;
|
|
}
|
|
|
|
/* (browser) serif */
|
|
:root:has(#font-serif:checked) {
|
|
--font-family: serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
|
}
|
|
|
|
/* (browser) monospace */
|
|
:root:has(#font-monospace:checked) {
|
|
--font-family: monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
|
}
|
|
|
|
/* - misc - */
|
|
|
|
/* disable forced uncapitalization */
|
|
:root:has(#uncapitalization:checked) {
|
|
body {
|
|
text-transform: none !important;
|
|
}
|
|
}
|
|
|
|
/* disable background gradient */
|
|
:root:has(#disable-bg:checked) {
|
|
body {
|
|
background: var(--background) !important;
|
|
}
|
|
}
|
|
|
|
/* disable window animations */
|
|
:root:has(#disable-animations:checked) {
|
|
.window {
|
|
animation: unset !important;
|
|
transition: unset !important;
|
|
}
|
|
|
|
.window:hover {
|
|
transition: unset !important;
|
|
animation: unset !important;
|
|
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
|
|
}
|
|
|
|
.navbar {
|
|
transition: unset !important;
|
|
}
|
|
|
|
.navbar:hover {
|
|
transition: unset !important;
|
|
animation: unset !important;
|
|
background-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
|
|
}
|
|
}
|
|
|
|
/* disable custom alt text popup */
|
|
:root:has(#disable-alttext:checked) {
|
|
.alt-popup {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭───────────────────────╮
|
|
/ │ __ _ │
|
|
/ │ / _| ___ _ __ | |_ │
|
|
/ │ | |_ / _ \| '_ \| __| │
|
|
/ │ | _| (_) | | | | |_ │
|
|
/ │ |_| \___/|_| |_|\__| │
|
|
/ ╰───────────────────────╯
|
|
/ font - font configuration, stuff, whatever */
|
|
|
|
/* - JetBrains Mono - */
|
|
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
src: local("JetBrains Mono"),
|
|
url("/assets/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2")
|
|
format("woff"),
|
|
local("JetBrainsMono Nerd Font");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
src: local("JetBrains Mono"),
|
|
url("/assets/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2")
|
|
format("woff"),
|
|
local("JetBrainsMono Nerd Font");
|
|
font-weight: bold;
|
|
font-style: bold;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
src: local("JetBrains Mono"),
|
|
url("/assets/fonts/JetBrainsMono/JetBrainsMono-Italic.woff2")
|
|
format("woff"),
|
|
local("JetBrainsMono Nerd Font");
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
src: local("JetBrains Mono"),
|
|
url("/assets/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2")
|
|
format("woff"),
|
|
local("JetBrainsMono Nerd Font");
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* font config, Atkinson Hyperlegible Next */
|
|
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible Next";
|
|
src: local("Atkinson Hyperlegible Next"),
|
|
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Regular.woff2")
|
|
format("woff"),
|
|
local("JetBrainsMono Nerd Font");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible Next";
|
|
src: local("Atkinson Hyperlegible Next"),
|
|
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Bold.woff2")
|
|
format("woff"),
|
|
local("Atkinson Hyperlegible");
|
|
font-weight: bold;
|
|
font-style: bold;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible Next";
|
|
src: local("Atkinson Hyperlegible Next"),
|
|
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Italic.woff2")
|
|
format("woff"),
|
|
local("Atkinson Hyperlegible");
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible Next";
|
|
src: local("Atkinson Hyperlegible Next"),
|
|
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-BoldItalic.woff2")
|
|
format("woff"),
|
|
local("Atkinson Hyperlegible");
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* font config, Inter
|
|
original css by Inter, modified by Sneexy */
|
|
|
|
/* Variable fonts usage:
|
|
:root { font-family: "Inter", sans-serif; }
|
|
@supports (font-variation-settings: normal) {
|
|
:root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
|
|
} */
|
|
@font-face {
|
|
font-family: InterVariable;
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("InterVariable.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: InterVariable;
|
|
font-style: italic;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("InterVariable-Italic.woff2") format("woff2");
|
|
}
|
|
|
|
/* static fonts */
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 100;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-Thin.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: italic;
|
|
font-weight: 100;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-ThinItalic.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 200;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-ExtraLight.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: italic;
|
|
font-weight: 200;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-ExtraLightItalic.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-Light.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-LightItalic.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-Regular.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-Italic.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-Medium.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-MediumItalic.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-SemiBold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-Bold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-BoldItalic.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-ExtraBold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: italic;
|
|
font-weight: 800;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-ExtraBoldItalic.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-Black.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: italic;
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/Inter-BlackItalic.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: normal;
|
|
font-weight: 100;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-Thin.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: italic;
|
|
font-weight: 100;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-ThinItalic.woff2")
|
|
format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: normal;
|
|
font-weight: 200;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-ExtraLight.woff2")
|
|
format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: italic;
|
|
font-weight: 200;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-ExtraLightItalic.woff2")
|
|
format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-Light.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-LightItalic.woff2")
|
|
format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-Regular.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-Italic.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-Medium.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-MediumItalic.woff2")
|
|
format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-SemiBold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-SemiBoldItalic.woff2")
|
|
format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-Bold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-BoldItalic.woff2")
|
|
format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-ExtraBold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: italic;
|
|
font-weight: 800;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-ExtraBoldItalic.woff2")
|
|
format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-Black.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "InterDisplay";
|
|
font-style: italic;
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
src: url("/assets/fonts/Inter/InterDisplay-BlackItalic.woff2")
|
|
format("woff2");
|
|
}
|
|
|
|
@font-feature-values InterVariable {
|
|
@character-variant {
|
|
cv01: 1;
|
|
cv02: 2;
|
|
cv03: 3;
|
|
cv04: 4;
|
|
cv05: 5;
|
|
cv06: 6;
|
|
cv07: 7;
|
|
cv08: 8;
|
|
cv09: 9;
|
|
cv10: 10;
|
|
cv11: 11;
|
|
cv12: 12;
|
|
cv13: 13;
|
|
alt-1: 1; /* Alternate one */
|
|
alt-3: 9; /* Flat-top three */
|
|
open-4: 2; /* Open four */
|
|
open-6: 3; /* Open six */
|
|
open-9: 4; /* Open nine */
|
|
lc-l-with-tail: 5; /* Lower-case L with tail */
|
|
simplified-u: 6; /* Simplified u */
|
|
alt-double-s: 7; /* Alternate German double s */
|
|
uc-i-with-serif: 8; /* Upper-case i with serif */
|
|
uc-g-with-spur: 10; /* Capital G with spur */
|
|
single-story-a: 11; /* Single-story a */
|
|
compact-lc-f: 12; /* Compact f */
|
|
compact-lc-t: 13; /* Compact t */
|
|
}
|
|
@styleset {
|
|
ss01: 1;
|
|
ss02: 2;
|
|
ss03: 3;
|
|
ss04: 4;
|
|
ss05: 5;
|
|
ss06: 6;
|
|
ss07: 7;
|
|
ss08: 8;
|
|
open-digits: 1; /* Open digits */
|
|
disambiguation: 2; /* Disambiguation (with zero) */
|
|
disambiguation-except-zero: 4; /* Disambiguation (no zero) */
|
|
round-quotes-and-commas: 3; /* Round quotes & commas */
|
|
square-punctuation: 7; /* Square punctuation */
|
|
square-quotes: 8; /* Square quotes */
|
|
circled-characters: 5; /* Circled characters */
|
|
squared-characters: 6; /* Squared characters */
|
|
}
|
|
}
|
|
@font-feature-values Inter {
|
|
@character-variant {
|
|
cv01: 1;
|
|
cv02: 2;
|
|
cv03: 3;
|
|
cv04: 4;
|
|
cv05: 5;
|
|
cv06: 6;
|
|
cv07: 7;
|
|
cv08: 8;
|
|
cv09: 9;
|
|
cv10: 10;
|
|
cv11: 11;
|
|
cv12: 12;
|
|
cv13: 13;
|
|
alt-1: 1; /* Alternate one */
|
|
alt-3: 9; /* Flat-top three */
|
|
open-4: 2; /* Open four */
|
|
open-6: 3; /* Open six */
|
|
open-9: 4; /* Open nine */
|
|
lc-l-with-tail: 5; /* Lower-case L with tail */
|
|
simplified-u: 6; /* Simplified u */
|
|
alt-double-s: 7; /* Alternate German double s */
|
|
uc-i-with-serif: 8; /* Upper-case i with serif */
|
|
uc-g-with-spur: 10; /* Capital G with spur */
|
|
single-story-a: 11; /* Single-story a */
|
|
compact-lc-f: 12; /* Compact f */
|
|
compact-lc-t: 13; /* Compact t */
|
|
}
|
|
@styleset {
|
|
ss01: 1;
|
|
ss02: 2;
|
|
ss03: 3;
|
|
ss04: 4;
|
|
ss05: 5;
|
|
ss06: 6;
|
|
ss07: 7;
|
|
ss08: 8;
|
|
open-digits: 1; /* Open digits */
|
|
disambiguation: 2; /* Disambiguation (with zero) */
|
|
disambiguation-except-zero: 4; /* Disambiguation (no zero) */
|
|
round-quotes-and-commas: 3; /* Round quotes & commas */
|
|
square-punctuation: 7; /* Square punctuation */
|
|
square-quotes: 8; /* Square quotes */
|
|
circled-characters: 5; /* Circled characters */
|
|
squared-characters: 6; /* Squared characters */
|
|
}
|
|
}
|
|
@font-feature-values InterDisplay {
|
|
@character-variant {
|
|
cv01: 1;
|
|
cv02: 2;
|
|
cv03: 3;
|
|
cv04: 4;
|
|
cv05: 5;
|
|
cv06: 6;
|
|
cv07: 7;
|
|
cv08: 8;
|
|
cv09: 9;
|
|
cv10: 10;
|
|
cv11: 11;
|
|
cv12: 12;
|
|
cv13: 13;
|
|
alt-1: 1; /* Alternate one */
|
|
alt-3: 9; /* Flat-top three */
|
|
open-4: 2; /* Open four */
|
|
open-6: 3; /* Open six */
|
|
open-9: 4; /* Open nine */
|
|
lc-l-with-tail: 5; /* Lower-case L with tail */
|
|
simplified-u: 6; /* Simplified u */
|
|
alt-double-s: 7; /* Alternate German double s */
|
|
uc-i-with-serif: 8; /* Upper-case i with serif */
|
|
uc-g-with-spur: 10; /* Capital G with spur */
|
|
single-story-a: 11; /* Single-story a */
|
|
compact-lc-f: 12; /* Compact f */
|
|
compact-lc-t: 13; /* Compact t */
|
|
}
|
|
@styleset {
|
|
ss01: 1;
|
|
ss02: 2;
|
|
ss03: 3;
|
|
ss04: 4;
|
|
ss05: 5;
|
|
ss06: 6;
|
|
ss07: 7;
|
|
ss08: 8;
|
|
open-digits: 1; /* Open digits */
|
|
disambiguation: 2; /* Disambiguation (with zero) */
|
|
disambiguation-except-zero: 4; /* Disambiguation (no zero) */
|
|
round-quotes-and-commas: 3; /* Round quotes & commas */
|
|
square-punctuation: 7; /* Square punctuation */
|
|
square-quotes: 8; /* Square quotes */
|
|
circled-characters: 5; /* Circled characters */
|
|
squared-characters: 6; /* Squared characters */
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭─────────────────────────────────╮
|
|
/ │ _ _ _ │
|
|
/ │ ___| |_ _ _| (_)_ __ __ _ │
|
|
/ │ / __| __| | | | | | '_ \ / _` | │
|
|
/ │ \__ \ |_| |_| | | | | | | (_| | │
|
|
/ │ |___/\__|\__, |_|_|_| |_|\__, | │
|
|
/ │ |___/ |___/ │
|
|
/ ╰─────────────────────────────────╯
|
|
/ styling - regular styling for regular/global html elements as well as the color schemes */
|
|
|
|
:root {
|
|
--pagefind-ui-font: var(--font-family);
|
|
--pagefind-ui-primary: var(--foreground);
|
|
--pagefind-ui-text: var(--foreground);
|
|
--pagefind-ui-background: var(--background);
|
|
--pagefind-ui-border: var(--accent);
|
|
--pagefind-ui-tag: var(--background);
|
|
--site-border: .1rem solid var(--border);
|
|
}
|
|
|
|
/*
|
|
custom color scheme, based off of both Ayu Light & Dark and Catppuccin Latte & Mocha.
|
|
it's basically a mix and mash of the both of them together, and slightly modified.
|
|
it doesn't have a name, call it "synth.download color scheme official real"
|
|
*/
|
|
|
|
:root {
|
|
/* base colors */
|
|
--background: #fafafa;
|
|
--foreground: #3d454d;
|
|
--selection: #f0eee4;
|
|
--comment: #abb0b6;
|
|
--accent: #fd9e1a;
|
|
|
|
/* original ayu colors */
|
|
--orange: #ff9940;
|
|
--green: #86b300;
|
|
--blue: #4cbf99;
|
|
--purple: #a37acc;
|
|
--red: #ec3838;
|
|
|
|
/* extended catppuccin based colors */
|
|
--flamingo: #ff7d7d;
|
|
--rosewater: #eca69a;
|
|
--pink: #ff8adb;
|
|
--mauve: #ba8aff;
|
|
--maroon: #e06c75;
|
|
--peach: #ffac6b;
|
|
--yellow: #e5c07b;
|
|
--teal: #2bbac5;
|
|
--sky: #3eacce;
|
|
--sapphire: #4db5d0;
|
|
--lavender: #7881ce;
|
|
|
|
/* ui accent colors */
|
|
--ui-orange: #fa8d3e;
|
|
--ui-green: #91b362;
|
|
--ui-blue: #6994bf;
|
|
--ui-purple: #7e57c2;
|
|
--ui-teal: #56c2c0;
|
|
--ui-lavender: #9d8cdb;
|
|
|
|
/* misc. */
|
|
--border: #e4e4e4;
|
|
--shadow: rgba(0, 0, 0, 0.1);
|
|
--hover: rgba(0, 0, 0, 0.05);
|
|
--active: rgba(0, 0, 0, 0.1);
|
|
--focus: #86b300;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* base colors */
|
|
--background: #0a0e14;
|
|
--foreground: #d8d6d2;
|
|
--selection: #253340;
|
|
--comment: #5c6773;
|
|
--accent: #e6b450;
|
|
|
|
/* original ayu colors */
|
|
--orange: #ffb454;
|
|
--green: #aad94c;
|
|
--blue: #59c2ff;
|
|
--purple: #d2a6ff;
|
|
--red: #f0646b;
|
|
|
|
/* extended catppuccin based colors */
|
|
--flamingo: #f2cdcd;
|
|
--rosewater: #f5e0dc;
|
|
--pink: #ffc9e3;
|
|
--mauve: #cba6f7;
|
|
--maroon: #eba0ac;
|
|
--peach: #ffcca8;
|
|
--yellow: #f9e2af;
|
|
--teal: #8ddedc;
|
|
--sky: #89dceb;
|
|
--sapphire: #74c7ec;
|
|
--lavender: #b4befe;
|
|
|
|
/* ui accent colors */
|
|
--ui-orange: #e6b450;
|
|
--ui-green: #aad94c;
|
|
--ui-blue: #39bae6;
|
|
--ui-purple: #a37acc;
|
|
--ui-teal: #7adbd3;
|
|
--ui-lavender: #ada0f3;
|
|
|
|
/* misc. */
|
|
--border: #1a1f29;
|
|
--shadow: rgba(0, 0, 0, 0.4);
|
|
--hover: rgba(255, 255, 255, 0.05);
|
|
--active: rgba(255, 255, 255, 0.1);
|
|
--focus: #ffb454;
|
|
}
|
|
}
|
|
|
|
/* theme classes for manual theme selection */
|
|
html[data-theme="light"] {
|
|
/* base colors */
|
|
--background: #fafafa;
|
|
--foreground: #3d454d;
|
|
--selection: #f0eee4;
|
|
--comment: #abb0b6;
|
|
--accent: #ffaa33;
|
|
|
|
/* original ayu colors */
|
|
--orange: #ff9940;
|
|
--green: #86b300;
|
|
--blue: #4cbf99;
|
|
--purple: #a37acc;
|
|
--red: #ec3838;
|
|
|
|
/* extended catppuccin based colors */
|
|
--flamingo: #ff7d7d;
|
|
--rosewater: #eca69a;
|
|
--pink: #ff8adb;
|
|
--mauve: #ba8aff;
|
|
--maroon: #e06c75;
|
|
--peach: #ffac6b;
|
|
--yellow: #e5c07b;
|
|
--teal: #2bbac5;
|
|
--sky: #3eacce;
|
|
--sapphire: #4db5d0;
|
|
--lavender: #7881ce;
|
|
|
|
/* ui accent colors */
|
|
--ui-orange: #fa8d3e;
|
|
--ui-green: #91b362;
|
|
--ui-blue: #6994bf;
|
|
--ui-purple: #7e57c2;
|
|
--ui-teal: #56c2c0;
|
|
--ui-lavender: #9d8cdb;
|
|
|
|
/* misc. */
|
|
--border: #e4e4e4;
|
|
--shadow: rgba(0, 0, 0, 0.1);
|
|
--hover: rgba(0, 0, 0, 0.05);
|
|
--active: rgba(0, 0, 0, 0.1);
|
|
--focus: #86b300;
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
/* base colors */
|
|
--background: #0a0e14;
|
|
--foreground: #d8d6d2;
|
|
--selection: #253340;
|
|
--comment: #5c6773;
|
|
--accent: #e6b450;
|
|
|
|
/* original ayu colors */
|
|
--orange: #ffb454;
|
|
--green: #aad94c;
|
|
--blue: #59c2ff;
|
|
--purple: #d2a6ff;
|
|
--red: #f0646b;
|
|
|
|
/* extended catppuccin based colors */
|
|
--flamingo: #f2cdcd;
|
|
--rosewater: #f5e0dc;
|
|
--pink: #ffc9e3;
|
|
--mauve: #cba6f7;
|
|
--maroon: #eba0ac;
|
|
--peach: #ffcca8;
|
|
--yellow: #f9e2af;
|
|
--teal: #8ddedc;
|
|
--sky: #89dceb;
|
|
--sapphire: #74c7ec;
|
|
--lavender: #b4befe;
|
|
|
|
/* ui accent colors */
|
|
--ui-orange: #e6b450;
|
|
--ui-green: #aad94c;
|
|
--ui-blue: #39bae6;
|
|
--ui-purple: #a37acc;
|
|
--ui-teal: #7adbd3;
|
|
--ui-lavender: #ada0f3;
|
|
|
|
/* misc. */
|
|
--border: #1a1f29;
|
|
--shadow: rgba(0, 0, 0, 0.4);
|
|
--hover: rgba(255, 255, 255, 0.05);
|
|
--active: rgba(255, 255, 255, 0.1);
|
|
--focus: #ffb454;
|
|
}
|
|
|
|
/* ----------------------------------
|
|
- background wallpaper, global font -
|
|
---------------------------------- */
|
|
|
|
html {
|
|
background: var(--background) linear-gradient(var(--background) 50%, color-mix(in srgb, var(--accent) 25%, var(--background)) 50%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background)));
|
|
min-height: calc(100vh - 4rem);
|
|
font-family: var(--font-family);
|
|
font-size: 1.125rem;
|
|
text-transform: lowercase;
|
|
margin: unset !important;
|
|
/* idk why it does that */
|
|
}
|
|
|
|
/* text formatting and config stuff */
|
|
|
|
/* headings */
|
|
h1,
|
|
h1 a {
|
|
color: var(--foreground);
|
|
font-size: 2rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* apparently having more than one h1 is against web standards
|
|
but i prefer how it looks so i just use the same styling again */
|
|
h2,
|
|
h2 a {
|
|
color: var(--foreground);
|
|
font-size: 2rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
h3,
|
|
h3 a {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
/* text */
|
|
p,
|
|
li,
|
|
button {
|
|
font-size: 1.125rem;
|
|
|
|
[class^="tabler--"] {
|
|
transform: scale(1.13);
|
|
}
|
|
}
|
|
|
|
/* links should look good i think */
|
|
a {
|
|
font-size: 1.125rem;
|
|
color: var(--accent);
|
|
transition: 0.2s;
|
|
}
|
|
|
|
a:hover {
|
|
transition: 0.2s;
|
|
text-shadow: 0em 0em 0.25em var(--accent);
|
|
}
|
|
|
|
/* smol text */
|
|
small,
|
|
small a {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* lists need some styling */
|
|
li {
|
|
margin-left: -1em;
|
|
padding-bottom: 18px;
|
|
}
|
|
|
|
/* gay ass text */
|
|
.rainbow {
|
|
animation: 2s linear infinite rainbow;
|
|
-webkit-animation: 2s linear infinite rainbow;
|
|
-moz-animation: 2s linear infinite rainbow;
|
|
}
|
|
|
|
/* heading 1 is also clickable */
|
|
h1 a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* the tabler icons svgs styling */
|
|
.tabler-icon,
|
|
.icon .icon-tabler {
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
padding-bottom: .2rem;
|
|
vertical-align: middle !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* Dashed border */
|
|
hr.dashed {
|
|
border-top: .1rem dashed var(--border);
|
|
}
|
|
|
|
/* Dotted border */
|
|
hr.dotted {
|
|
border-top: .1rem dotted var(--border);
|
|
}
|
|
|
|
/* Solid border */
|
|
hr.solid {
|
|
border-top: .1rem solid var(--border);
|
|
}
|
|
|
|
/* Rounded border */
|
|
hr.rounded {
|
|
border-top: .2rem solid var(--border);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* audio */
|
|
audio {
|
|
border-radius: 3rem;
|
|
}
|
|
|
|
/* summary styling */
|
|
summary {
|
|
display: flex;
|
|
}
|
|
|
|
/* ---------------
|
|
- alt text popup -
|
|
--------------- */
|
|
|
|
.alt-popup {
|
|
position: fixed;
|
|
text-transform: none !important;
|
|
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;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭──────────────────────────────────────╮
|
|
/ │ _ │
|
|
/ │ _ __ __ ___ _| |__ __ _ _ __ │
|
|
/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
|
|
/ │ | | | | (_| |\ V /| |_) | (_| | | │
|
|
/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │
|
|
/ ╰──────────────────────────────────────╯
|
|
/ navbar - styling the navigation bar / panel that sits on the top of the page at all times */
|
|
|
|
.navbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
max-height: 1.8em !important;
|
|
max-width: 100%;
|
|
min-height: 1.8em !important;
|
|
min-width: 100%;
|
|
position: fixed;
|
|
top: 0 !important;
|
|
padding: .4rem 0 .4rem 0;
|
|
z-index: 100;
|
|
|
|
align-content: center;
|
|
color: var(--foreground);
|
|
vertical-align: middle;
|
|
|
|
transition: .2s background-color;
|
|
|
|
.nav-base {
|
|
padding: 0px .2em !important;
|
|
max-width: fit-content;
|
|
align-content: center;
|
|
outline: .13rem solid var(--border);
|
|
border-radius: 1rem;
|
|
height: 1.9rem;
|
|
}
|
|
|
|
.nav-left {
|
|
margin-left: .6rem !important;
|
|
padding: 0px .5rem .1rem !important;
|
|
text-decoration: unset !important;
|
|
}
|
|
|
|
.nav-baselink {
|
|
background-color: var(--accent);
|
|
color: var(--background);
|
|
margin-left: .4rem !important;
|
|
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
|
padding: .13rem;
|
|
|
|
.synth-icon {
|
|
height: 2rem;
|
|
margin-right: 1rem;
|
|
pointer-events: none;
|
|
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.1rem);
|
|
transition: all .2s ease-out;
|
|
width: 2rem;
|
|
}
|
|
}
|
|
|
|
.nav-baselink:hover {
|
|
.synth-icon {
|
|
transition: all .2s ease-out;
|
|
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
|
|
}
|
|
}
|
|
|
|
.nav-desktop {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-mobile-menu {
|
|
display: none;
|
|
}
|
|
|
|
.nav-links {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
overflow: clip;
|
|
position: relative;
|
|
text-shadow: none;
|
|
transition: all .3s;
|
|
|
|
.text {
|
|
opacity: 0;
|
|
position: absolute;
|
|
transition: all .3s;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[class^="tabler--"] {
|
|
transform: scale(1.1);
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
|
|
.nav-links:hover {
|
|
padding-right: 9rem !important;
|
|
padding-bottom: 7rem !important;
|
|
transition: all .3s;
|
|
|
|
.text {
|
|
opacity: 1;
|
|
transform: scale(1.5) translateX(-.4rem);
|
|
transition: all .3s;
|
|
}
|
|
|
|
[class^="tabler--"] {
|
|
transform: scale(5) translateY(.9rem) translateX(.4rem) rotate(10deg);
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
|
|
.nav-home:hover {
|
|
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
|
|
color: var(--foreground);
|
|
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
|
}
|
|
|
|
.nav-notebook:hover {
|
|
background-color: color-mix(in srgb, var(--purple) 20%, var(--background));
|
|
color: var(--foreground);
|
|
outline-color: color-mix(in srgb, var(--purple) 60%, transparent);
|
|
|
|
.text {
|
|
transform: scale(1.5) translateX(0rem);
|
|
}
|
|
}
|
|
|
|
.nav-webmaster:hover {
|
|
background-color: color-mix(in srgb, var(--green) 20%, var(--background));
|
|
color: var(--foreground);
|
|
outline-color: color-mix(in srgb, var(--green) 60%, transparent);
|
|
|
|
.text {
|
|
transform: scale(1.1) translateX(-.8rem);
|
|
}
|
|
}
|
|
|
|
.nav-donate:hover {
|
|
background-color: color-mix(in srgb, var(--pink) 20%, var(--background));
|
|
color: var(--foreground);
|
|
outline-color: color-mix(in srgb, var(--pink) 60%, transparent);
|
|
|
|
.text {
|
|
transform: scale(1.5) translateX(-.2rem);
|
|
}
|
|
}
|
|
|
|
.nav-right {
|
|
padding: 0px .5rem .1rem !important;
|
|
margin-right: .6rem !important;
|
|
}
|
|
|
|
.nav-settings {
|
|
background-color: var(--accent);
|
|
color: var(--background);
|
|
cursor: pointer;
|
|
margin-left: auto !important;
|
|
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
|
padding: unset !important; /* unset the padding for the button itself so the button can take the padding to make the entire button clickable */
|
|
|
|
input[type="checkbox"] {
|
|
left: -100vw;
|
|
position: absolute;
|
|
}
|
|
|
|
label {
|
|
cursor: pointer;
|
|
overflow: hidden !important;
|
|
padding: .3rem .5rem !important;
|
|
position: relative;
|
|
|
|
[class^="tabler--"] {
|
|
padding: 0 .5rem !important;
|
|
pointer-events: none;
|
|
transform: translateY(.1rem) scale(1.5);
|
|
transition: all 1.3s;
|
|
}
|
|
}
|
|
|
|
label:hover {
|
|
[class^="tabler--"] {
|
|
transform: translateY(.1rem) scale(1.5) rotate(360deg);
|
|
transition: all 1.3s;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
background-color: var(--background);
|
|
border-radius: 1rem;
|
|
border: var(--accent) solid .15rem;
|
|
cursor: initial !important; /* reset the cursor otherwise it uses the pointer cursor */
|
|
margin-top: 1.2rem !important;
|
|
max-height: 27rem;
|
|
max-width: 17rem;
|
|
min-height: 27rem;
|
|
min-width: 17rem;
|
|
overflow: scroll;
|
|
position: absolute;
|
|
right: .4rem;
|
|
visibility: hidden;
|
|
|
|
/* inital "hidden" state, used for providing animation when activated */
|
|
opacity: 0;
|
|
scale: .5;
|
|
transform-origin: top right;
|
|
transition: opacity .3s, scale .3s, visibility .3s;
|
|
|
|
li {
|
|
border-radius: 1rem;
|
|
color: var(--foreground);
|
|
list-style-type: none;
|
|
margin-left: -2rem;
|
|
padding: .4rem;
|
|
|
|
span {
|
|
padding: .1rem 0px .1rem 0px !important;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"]:checked ~ ul {
|
|
/* makes the menu visibile when activated and makes it appear from the top right */
|
|
opacity: 1;
|
|
scale: 1;
|
|
transition: opacity .3s, scale .3s, visibility .3s;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.nav-systray {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
padding: 0px .1rem;
|
|
min-width: 6.45rem;
|
|
margin-right: .4rem !important;
|
|
}
|
|
|
|
a,
|
|
p {
|
|
margin: unset !important;
|
|
}
|
|
|
|
small {
|
|
opacity: .7;
|
|
}
|
|
|
|
svg {
|
|
color: var(--foreground) !important;
|
|
}
|
|
}
|
|
|
|
.navbar:hover {
|
|
transition: .2s all;
|
|
background-color: color-mix(in srgb, var(--accent) 40%, transparent);
|
|
border-bottom: solid .2rem var(--accent);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭────────────────────────────────────────────╮
|
|
/ │ _ _ │
|
|
/ │ __ _(_)_ __ __| | _____ _____ │
|
|
/ │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │
|
|
/ │ \ V V /| | | | | (_| | (_) \ V V /\__ \ │
|
|
/ │ \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │
|
|
/ ╰────────────────────────────────────────────╯
|
|
/ windows - related styling for the windows on pages */
|
|
|
|
.window {
|
|
summary {
|
|
display: inline-flex;
|
|
min-width: 100%;
|
|
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
|
|
opacity: .8;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
overflow: clip;
|
|
transition: .2s opacity;
|
|
|
|
div:first-child {
|
|
background: color-mix(in srgb, var(--accent) 40%, transparent);
|
|
padding: .4rem .4rem .2rem 1rem;
|
|
border-right: .2rem solid var(--accent);
|
|
border-bottom: .2rem solid var(--accent);
|
|
border-bottom-right-radius: 1rem;
|
|
margin-bottom: -.2rem;
|
|
|
|
span {
|
|
background-color: var(--foreground);
|
|
}
|
|
}
|
|
|
|
a {
|
|
padding: .3rem 0rem .3rem .5rem;
|
|
text-decoration: none;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
[class^="tabler--"] {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
div:nth-child(3) {
|
|
margin-left: auto !important;
|
|
padding: .2rem .5rem .2rem 0rem;
|
|
|
|
span {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
background-color: var(--foreground);
|
|
}
|
|
|
|
/* maximize button (which does nothing) */
|
|
span:nth-child(2) {
|
|
opacity: .6;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
/* close button */
|
|
div:nth-child(4) {
|
|
background: color-mix(in srgb, var(--accent) 40%, transparent);
|
|
padding: .4rem .5rem .2rem .6rem;
|
|
border-left: .2rem solid var(--accent);
|
|
border-bottom: .2rem solid var(--accent);
|
|
border-bottom-left-radius: 1rem;
|
|
margin-bottom: -.2rem;
|
|
color: var(--foreground);
|
|
|
|
transition: background .2s;
|
|
transition: background-color .2s;
|
|
}
|
|
|
|
/* close button (animated on hover) */
|
|
div:nth-child(4):hover {
|
|
background: var(--red);
|
|
|
|
transition: background .2s;
|
|
|
|
span {
|
|
background-color: var(--background);
|
|
transition: background-color .2s;
|
|
}
|
|
}
|
|
}
|
|
|
|
main,
|
|
section,
|
|
article {
|
|
padding: .8rem;
|
|
}
|
|
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
|
|
border: var(--accent) solid .15rem;
|
|
border-radius: .6rem;
|
|
|
|
max-width: 60em;
|
|
overflow: clip;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 2em;
|
|
|
|
transition: .2s box-shadow;
|
|
animation-fill-mode: backwards;
|
|
|
|
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
|
}
|
|
|
|
/* window styling when hovered */
|
|
.window:hover {
|
|
summary {
|
|
opacity: 1;
|
|
transition: .2s opacity;
|
|
}
|
|
}
|
|
|
|
/* window styling when open (default state) */
|
|
.window[open] {
|
|
summary {
|
|
opacity: 1;
|
|
border-bottom: .1rem solid var(--accent);
|
|
|
|
transition: .2s opacity;
|
|
}
|
|
|
|
border-radius: 2rem .6rem 2rem .6rem;
|
|
}
|
|
|
|
.window:hover {
|
|
box-shadow: var(--accent) 0px 0px 0px .3rem;
|
|
|
|
transition: .2s box-shadow;
|
|
}
|
|
|
|
/* window when its the first one on the page */
|
|
.window:nth-child(2) {
|
|
margin-top: 5rem;
|
|
|
|
animation: .3s ease-out .2s 1 window-appear;
|
|
animation-fill-mode: backwards;
|
|
}
|
|
|
|
/* rest of the windows if they exist, to finish the rest of the animations */
|
|
.window:nth-child(3) {
|
|
animation: .3s ease-out .4s 1 window-appear;
|
|
animation-fill-mode: backwards;
|
|
}
|
|
|
|
.window:nth-child(4) {
|
|
animation: .3s ease-out .6s 1 window-appear;
|
|
animation-fill-mode: backwards;
|
|
}
|
|
|
|
.window:nth-child(5) {
|
|
animation: .3s ease-out .8s 1 window-appear;
|
|
animation-fill-mode: backwards;
|
|
}
|
|
|
|
.window:nth-child(6) {
|
|
animation: .3s ease-out 1s 1 window-appear;
|
|
animation-fill-mode: backwards;
|
|
}
|
|
|
|
.window:nth-child(7) {
|
|
animation: .3s ease-out 1.2s 1 window-appear;
|
|
animation-fill-mode: backwards;
|
|
}
|
|
|
|
.window:nth-child(8) {
|
|
animation: .3s ease-out 1.4s 1 window-appear;
|
|
animation-fill-mode: backwards;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭────────────────────────────────╮
|
|
/ │ __ _ │
|
|
/ │ / _| ___ ___ | |_ ___ _ __ │
|
|
/ │ | |_ / _ \ / _ \| __/ _ \ '__| │
|
|
/ │ | _| (_) | (_) | || __/ | │
|
|
/ │ |_| \___/ \___/ \__\___|_| │
|
|
/ ╰────────────────────────────────╯
|
|
/ footer - related styling for the footer window on all pages */
|
|
|
|
footer {
|
|
max-width: 30em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
details>summary>a {
|
|
padding: .3rem 0rem .3rem 1rem !important;
|
|
}
|
|
|
|
main,
|
|
section,
|
|
article {
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
.fediring {
|
|
a {
|
|
display: inline-grid;
|
|
font-size: 1.5rem;
|
|
color: var(--green);
|
|
margin-bottom: .5em;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
[href="https://fediring.net"] {
|
|
color: var(--foreground);
|
|
background: color-mix(in srgb, var(--purple) 25%, transparent);
|
|
padding: 0px 10px 0px 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
[href="https://keithhacks.cyou/furryring.php"] {
|
|
color: var(--foreground);
|
|
background: color-mix(in srgb, var(--sapphire) 25%, transparent);
|
|
padding: 0px 10px 0px 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
[href="https://stellophiliac.github.io/roboring"] {
|
|
color: var(--foreground);
|
|
background: color-mix(in srgb, var(--comment) 25%, transparent);
|
|
padding: 0px 10px 0px 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
[href*="prev"] {
|
|
background: color-mix(in srgb, var(--orange) 25%, transparent);
|
|
padding: 5px 6px;
|
|
border-radius: 5px;
|
|
|
|
span {
|
|
background-color: var(--orange) !important;
|
|
}
|
|
}
|
|
|
|
[href*="next"] {
|
|
background: color-mix(in srgb, var(--green) 25%, transparent);
|
|
padding: 5px 6px;
|
|
border-radius: 5px;
|
|
|
|
span {
|
|
background-color: var(--green) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
p,
|
|
a {
|
|
text-align: center;
|
|
font-size: 0.938rem;
|
|
margin: .2em 0px .2em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
img {
|
|
padding-top: 18px;
|
|
max-width: 30%;
|
|
display: flex;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
transition: 1s animation;
|
|
}
|
|
|
|
img:hover {
|
|
animation: spin 5s infinite linear;
|
|
}
|
|
|
|
.inner-footer {
|
|
text-align: center;
|
|
padding-top: 14px;
|
|
padding-bottom: 14px;
|
|
|
|
a {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
align-content: center;
|
|
border-radius: .5rem;
|
|
|
|
span {
|
|
transform: scale(1.58);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭───────────────────────────────────────────────────────╮
|
|
/ │ _ _ _ │
|
|
/ │ __ _ _ __ (_)_ __ ___ __ _| |_(_) ___ _ __ ___ │
|
|
/ │ / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __| │
|
|
/ │ | (_| | | | | | | | | | | (_| | |_| | (_) | | | \__ \ │
|
|
/ │ \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/ │
|
|
/ ╰───────────────────────────────────────────────────────╯
|
|
/ animations - reusable css animations */
|
|
|
|
@keyframes window-appear {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.5, 0.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes rainbow {
|
|
0% {
|
|
filter: hue-rotate(0deg) contrast(150%) saturate(150%);
|
|
}
|
|
|
|
100% {
|
|
filter: hue-rotate(360deg) contrast(150%) saturate(150%);
|
|
}
|
|
}
|
|
|
|
@keyframes bg-gradient {
|
|
0% {
|
|
background-position: 0% 27%
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 74%
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 27%
|
|
}
|
|
}
|
|
|
|
@keyframes opacity-blink {
|
|
0% { opacity: 0% }
|
|
5% { opacity: 100% }
|
|
45% { opacity: 100% }
|
|
50% { opacity: 0% }
|
|
100% { opacity: 0% }
|
|
}
|
|
|
|
@keyframes opacity-blink-reverse {
|
|
0% { opacity: 100% }
|
|
5% { opacity: 0% }
|
|
45% { opacity: 0% }
|
|
50% { opacity: 100% }
|
|
100% { opacity: 100% }
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭────────────────────────────────────────╮
|
|
/ │ ____ _ _ │
|
|
/ │ / __ \ _ __ ___ ___ __| (_) __ _ │
|
|
/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
|
|
/ │ | | (_| | | | | | | __/ (_| | | (_| | │
|
|
/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
|
|
/ │ \____/ │
|
|
/ ╰────────────────────────────────────────╯
|
|
/ @media / at-media - styling depending on browser configuration / settings
|
|
/ other sorts of "Theming Jank" also goes in here for the sake of uniforming everything */
|
|
|
|
/* disable certain animations if user has animations disabled on their system */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
body {
|
|
background: var(--background) !important;
|
|
animation: unset !important;
|
|
-moz-animation: unset !important;
|
|
-webkit-animation: unset !important;
|
|
}
|
|
|
|
/* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
|
|
* {
|
|
transition: none !important;
|
|
animation: unset !important;
|
|
-moz-animation: unset !important;
|
|
-webkit-animation: unset !important;
|
|
}
|
|
|
|
/* fedi icon on /me should keep its animation (temp, find a better solution later) */
|
|
.fedi-icon {
|
|
animation: opacity-blink 4s infinite !important;
|
|
}
|
|
.fedi-icon-2 {
|
|
animation: opacity-blink-reverse 4s infinite !important;
|
|
}
|
|
}
|
|
|
|
/* different styling for elements in dark mode
|
|
must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */
|
|
|
|
html:not([data-theme="light"]) {
|
|
@media (prefers-color-scheme: dark) {
|
|
.navbar {
|
|
.nav-home:hover {
|
|
background-color: var(--accent);
|
|
color: var(--background);
|
|
}
|
|
.nav-notebook:hover {
|
|
background-color: var(--purple);
|
|
color: var(--background);
|
|
}
|
|
.nav-webmaster:hover {
|
|
background-color: var(--green);
|
|
color: var(--background);
|
|
}
|
|
.nav-donate:hover {
|
|
background-color: var(--pink);
|
|
color: var(--background);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
.navbar {
|
|
.nav-home:hover {
|
|
background-color: var(--accent);
|
|
color: var(--background);
|
|
}
|
|
.nav-notebook:hover {
|
|
background-color: var(--purple);
|
|
color: var(--background);
|
|
}
|
|
.nav-webmaster:hover {
|
|
background-color: var(--green);
|
|
color: var(--background);
|
|
}
|
|
.nav-donate:hover {
|
|
background-color: var(--pink);
|
|
color: var(--background);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* modify widths and spacing depending on the size of the display */
|
|
|
|
@media screen and (max-width: 1083px) {
|
|
.navbar {
|
|
.nav-desktop {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-mobile-menu {
|
|
display: inline-block;
|
|
max-width: 3rem;
|
|
min-width: 3rem;
|
|
position: relative;
|
|
|
|
input[type="checkbox"] {
|
|
left: -100vw;
|
|
position: absolute;
|
|
}
|
|
|
|
label {
|
|
border-radius: 1rem;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
left: -.5rem;
|
|
margin-right: .1rem;
|
|
max-height: 2rem;
|
|
max-width: 3rem;
|
|
min-height: 2rem;
|
|
min-width: 3rem;
|
|
overflow: hidden !important;
|
|
padding-right: 1rem;
|
|
position: relative;
|
|
|
|
.synth-icon {
|
|
transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.1rem);
|
|
}
|
|
}
|
|
|
|
label:hover {
|
|
.synth-icon {
|
|
transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.2rem) rotate(10deg);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
background-color: var(--background);
|
|
border-radius: 1rem;
|
|
border: var(--accent) solid .15rem;
|
|
height: max-content;
|
|
left: 0;
|
|
margin-top: .4rem !important;
|
|
position: absolute;
|
|
visibility: hidden;
|
|
width: max-content;
|
|
|
|
/* inital "hidden" state, used for providing animation when activated */
|
|
opacity: 0;
|
|
scale: .5;
|
|
transform-origin: top left;
|
|
transition: opacity .3s, scale .3s, visibility .3s;
|
|
|
|
li {
|
|
border-radius: 1rem;
|
|
list-style-type: none;
|
|
margin: .5rem .5rem .5rem -1.9rem;
|
|
overflow: clip;
|
|
padding: .7rem;
|
|
transition: .2s all;
|
|
|
|
a {
|
|
color: var(--foreground);
|
|
text-decoration: none;
|
|
text-shadow: unset;
|
|
}
|
|
|
|
[class^="tabler--"] {
|
|
padding-right: .3em;
|
|
transition: .2s all;
|
|
}
|
|
}
|
|
|
|
li:hover {
|
|
transition: .2s all;
|
|
|
|
[class^="tabler--"] {
|
|
transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
|
|
transition: .2s all;
|
|
}
|
|
}
|
|
|
|
.nav-home:hover {
|
|
background-color: color-mix(in srgb, var(--accent) 20%, transparent);
|
|
a {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
.nav-notebook:hover {
|
|
background-color: color-mix(in srgb, var(--purple) 20%, transparent);
|
|
a {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
.nav-webmaster:hover {
|
|
background-color: color-mix(in srgb, var(--green) 20%, transparent);
|
|
a {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
.nav-donate:hover {
|
|
background-color: color-mix(in srgb, var(--pink) 20%, transparent);
|
|
a {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"]:checked ~ ul {
|
|
/* makes the menu visibile when activated and makes it appear from the top right */
|
|
opacity: 1;
|
|
scale: 1;
|
|
transition: opacity .3s, scale .3s, visibility .3s;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.nav-links {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-settings {
|
|
span {
|
|
padding: 0 .4rem !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.window:not(#footer) {
|
|
summary {
|
|
div:first-child {
|
|
padding: .3rem .4rem .3rem .4rem;
|
|
}
|
|
|
|
div:nth-child(3) {
|
|
display: none !important;
|
|
}
|
|
|
|
div:nth-child(4) {
|
|
margin-left: auto !important;
|
|
}
|
|
}
|
|
|
|
animation: unset !important;
|
|
|
|
main,
|
|
section,
|
|
article {
|
|
padding: .5rem;
|
|
}
|
|
|
|
border-top: var(--accent) solid .15rem;
|
|
border-bottom: var(--accent) solid .15rem;
|
|
border-left: unset !important;
|
|
border-right: unset !important;
|
|
border-radius: unset !important;
|
|
|
|
margin-bottom: .8em;
|
|
}
|
|
|
|
/* window when its the first one on the page */
|
|
.window:nth-child(2) {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html:not([data-theme="light"]) {
|
|
.navbar .nav-mobile-menu ul {
|
|
.nav-home:hover a {
|
|
color: var(--accent);
|
|
}
|
|
.nav-notebook:hover a {
|
|
color: var(--purple);
|
|
}
|
|
.nav-webmaster:hover a {
|
|
color: var(--green);
|
|
}
|
|
.nav-donate:hover a {
|
|
color: var(--pink);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
.navbar .nav-mobile-menu ul {
|
|
.nav-home:hover a {
|
|
color: var(--accent);
|
|
}
|
|
.nav-notebook:hover a {
|
|
color: var(--purple);
|
|
}
|
|
.nav-webmaster:hover a {
|
|
color: var(--green);
|
|
}
|
|
.nav-donate:hover a {
|
|
color: var(--pink);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 540px) {
|
|
details#footer.window {
|
|
border-top: var(--accent) solid .15rem;
|
|
border-bottom: var(--accent) solid .15rem;
|
|
border-left: unset !important;
|
|
border-right: unset !important;
|
|
border-radius: unset !important;
|
|
|
|
margin-bottom: .8em;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭────────────────────────────────────────────╮
|
|
/ │ __ _ _ │
|
|
/ │ _ __ __ _ __ _ ___ / _(_)_ __ __| | │
|
|
/ │ | '_ \ / _` |/ _` |/ _ \ |_| | '_ \ / _` | │
|
|
/ │ | |_) | (_| | (_| | __/ _| | | | | (_| | │
|
|
/ │ | .__/ \__,_|\__, |\___|_| |_|_| |_|\__,_| │
|
|
/ │ |_| |___/ │
|
|
/ ╰────────────────────────────────────────────╯
|
|
/ pagefind - pagefind search widget styling */
|
|
|
|
/* #search {
|
|
padding: .2rem;
|
|
} */
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭──────────────────────────────╮
|
|
/ │ _ │
|
|
/ │ | |__ ___ _ __ ___ ___ │
|
|
/ │ | '_ \ / _ \| '_ ` _ \ / _ \ │
|
|
/ │ | | | | (_) | | | | | | __/ │
|
|
/ │ |_| |_|\___/|_| |_| |_|\___| │
|
|
/ ╰──────────────────────────────╯
|
|
/ home - specific styling for the main synth.download home page (index.md) */
|
|
|
|
#site.window.home {
|
|
|
|
main,
|
|
section {
|
|
a:nth-child(2) {
|
|
cursor: default;
|
|
}
|
|
|
|
#logo {
|
|
width: 40rem;
|
|
height: auto;
|
|
line-break: strict;
|
|
margin-bottom: 0.5rem;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: -1rem;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
p {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
ul {
|
|
text-align: left;
|
|
|
|
li a {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
li a:hover {
|
|
text-decoration: underline !important;
|
|
}
|
|
}
|
|
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/* - buttons section - */
|
|
|
|
#buttons.window.home section {
|
|
text-align: center;
|
|
font-size: 0px;
|
|
|
|
img {
|
|
margin-right: 5px;
|
|
image-rendering: auto;
|
|
image-rendering: crisp-edges;
|
|
image-rendering: pixelated;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
img:hover {
|
|
transform: scale(2);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 59em) {
|
|
|
|
#site.window.home>main,
|
|
#site.window.home>section {
|
|
#logo {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭─────────────────────────────────────╮
|
|
/ │ /\/| │
|
|
/ │ |/\/___ _ __ ___ _____ ___ _ │
|
|
/ │ / __| '_ \ / _ \/ _ \ \/ / | | | │
|
|
/ │ \__ \ | | | __/ __/> <| |_| | │
|
|
/ │ |___/_| |_|\___|\___/_/\_\\__, | │
|
|
/ │ |___/ │
|
|
/ ╰─────────────────────────────────────╯
|
|
/ ~sneexy - breeeep! my page! slooosh~ */
|
|
|
|
/* my page has goop in html to set goopy colors */
|
|
html[page-is="goopy"] {
|
|
--accent: #00d131 !important;
|
|
|
|
#sneexy > section {
|
|
#logo {
|
|
width: 40rem;
|
|
height: auto;
|
|
}
|
|
|
|
h1 #pfp {
|
|
width: auto;
|
|
height: 6rem;
|
|
|
|
vertical-align: middle;
|
|
transition: transform .2s;
|
|
}
|
|
|
|
h1 #pfp:hover {
|
|
transform: scale(2);
|
|
}
|
|
|
|
.selfinfo {
|
|
display: grid;
|
|
padding-top: 5px;
|
|
grid-template-areas:
|
|
"pronouns names";
|
|
div {
|
|
text-align: left;
|
|
border-radius: 1em;
|
|
padding: .7em 1em;
|
|
ul {
|
|
padding-left: 1em;
|
|
}
|
|
li {
|
|
padding-bottom: 6px !important;
|
|
list-style: none;
|
|
}
|
|
}
|
|
div:first-child {
|
|
background-color: color-mix(in srgb, var(--yellow) 15%, transparent);
|
|
border: var(--site-border);
|
|
}
|
|
div:last-child {
|
|
background-color: color-mix(in srgb, var(--sapphire) 15%, transparent);
|
|
border: var(--site-border);
|
|
margin-left: 1.5em;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
p {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
/* socials and links sections */
|
|
.socials-contacts-list {
|
|
a {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
align-content: center;
|
|
text-align: center;
|
|
border-radius: .5rem;
|
|
|
|
span {
|
|
transform: scale(1.58) translateY(.07rem);
|
|
}
|
|
}
|
|
|
|
.fedi-icon {
|
|
anchor-name: --fedi-icon;
|
|
animation: opacity-blink 4s infinite;
|
|
}
|
|
|
|
.fedi-icon-2 {
|
|
position-anchor: --fedi-icon;
|
|
position: absolute;
|
|
margin-left: -3.681rem;
|
|
z-index: 2;
|
|
animation: opacity-blink-reverse 4s infinite;
|
|
}
|
|
}
|
|
|
|
/* sharkey iframe embed */
|
|
#links > section > iframe {
|
|
display: flex;
|
|
margin-top: 1rem;
|
|
margin-bottom: .3crem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
border: var(--accent) solid .15rem !important;
|
|
border-radius: .6rem;
|
|
transition: .2s box-shadow;
|
|
}
|
|
|
|
#links > section > iframe:hover {
|
|
box-shadow: var(--accent) 0px 0px 0px .3rem;
|
|
transition: .2s box-shadow;
|
|
}
|
|
|
|
/* goop coloring for theme issues stuff */
|
|
@media (prefers-color-scheme: light) {
|
|
.nav-baselink, .nav-accessibility {
|
|
background-color: var(--accent) !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--accent: #65ff88 !important;
|
|
}
|
|
|
|
@media screen and (max-width: 59em) {
|
|
#sneexy > section {
|
|
#logo {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.selfinfo {
|
|
grid-template-areas:
|
|
"pronouns"
|
|
"names";
|
|
div {
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
ul {
|
|
text-align: left !important;
|
|
}
|
|
}
|
|
div:first-child {
|
|
margin-bottom: 1em;
|
|
}
|
|
div:last-child {
|
|
margin-left: auto !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.socials-contacts-list {
|
|
text-align: center;
|
|
a {
|
|
margin-top: .5rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html[data-theme="light"][page-is="goopy"] {
|
|
--accent: #00d131 !important;
|
|
|
|
.nav-baselink, .nav-accessibility {
|
|
background-color: var(--accent) !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
}
|
|
|
|
html[data-theme="dark"][page-is="goopy"] {
|
|
--accent: #65ff88 !important;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭──────────────────────────────────────────────╮
|
|
/ │ _ _ _ │
|
|
/ │ _ __ ___ | |_ ___| |__ ___ ___ | | __ │
|
|
/ │ | '_ \ / _ \| __/ _ \ '_ \ / _ \ / _ \| |/ / │
|
|
/ │ | | | | (_) | || __/ |_) | (_) | (_) | < │
|
|
/ │ |_| |_|\___/ \__\___|_.__/ \___/ \___/|_|\_\ │
|
|
/ ╰──────────────────────────────────────────────╯
|
|
/ notebook - specific styling for the notebook page where blogish things live */
|
|
|
|
details.notebook.article-category {
|
|
overflow: clip;
|
|
border-radius: .8rem .4rem .8rem .4rem;
|
|
background-color: color-mix(in srgb, var(--accent) 15%, transparent);
|
|
padding-bottom: .01rem;
|
|
/* weird bug ??? without this there is no space underneath so */
|
|
|
|
summary {
|
|
span {
|
|
padding-right: .6rem;
|
|
}
|
|
|
|
padding: .5rem;
|
|
background: linear-gradient(color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
|
|
border-bottom: unset !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.article-card {
|
|
padding: 1rem;
|
|
margin: 1.4rem;
|
|
border-radius: 1rem;
|
|
border: .1rem solid var(--border);
|
|
background-color: var(--background);
|
|
|
|
h2 {
|
|
margin-top: 0rem !important;
|
|
}
|
|
|
|
.tags-holder {
|
|
margin-top: -.7rem !important;
|
|
|
|
a {
|
|
margin-top: -1rem !important;
|
|
transition: all .2s;
|
|
opacity: .9;
|
|
padding: .3rem;
|
|
border: solid .1rem var(--accent);
|
|
border-radius: .4rem;
|
|
font-size: .8rem;
|
|
}
|
|
|
|
a:hover {
|
|
opacity: 1;
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
.read {
|
|
transition: all .2s;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.read:hover {
|
|
transition: all .2s;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 59em) {
|
|
details.notebook {
|
|
.article-card {
|
|
padding: .5rem;
|
|
margin: .6rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------
|
|
- addition to above (the post pages ) -
|
|
------------------------------------ */
|
|
|
|
#information.window {
|
|
.post-info {
|
|
p {
|
|
margin: 0rem !important;
|
|
}
|
|
|
|
span {
|
|
color: var(--ui-green);
|
|
opacity: .8;
|
|
}
|
|
|
|
p:first-child,
|
|
p:last-child {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* --------------------------------------------------------------------
|
|
=======================================================================
|
|
-------------------------------------------------------------------- */
|
|
|
|
/* ╭─────────────────────────╮
|
|
/ │ _ │
|
|
/ │ (_) ___ ___ _ __ ___ │
|
|
/ │ | |/ __/ _ \| '_ \/ __| │
|
|
/ │ | | (_| (_) | | | \__ \ │
|
|
/ │ |_|\___\___/|_| |_|___/ │
|
|
/ ╰─────────────────────────╯
|
|
/ icons - tabler icons done through css, generate via https://icon-sets.iconify.design/tabler */
|
|
|
|
/* ti-accessible */
|
|
.tabler--accessible {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='m10 16.5l2-3l2 3m-2-3v-2l3-1m-6 0l3 1'/%3E%3Ccircle cx='12' cy='7.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-settings */
|
|
.tabler--settings {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-grid-dots */
|
|
.tabler--grid-dots {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-home */
|
|
.tabler--home {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-user */
|
|
.tabler--user {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-article */
|
|
.tabler--article {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-notebook */
|
|
.tabler--notebook {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m3 0v18m4-14h2m-2 4h2'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-link */
|
|
.tabler--link {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-bell */
|
|
.tabler--bell {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-volume */
|
|
.tabler--volume {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-wifi */
|
|
.tabler--wifi {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 18h.01m-2.838-2.828a4 4 0 0 1 5.656 0m-8.485-2.829a8 8 0 0 1 11.314 0'/%3E%3Cpath d='M3.515 9.515c4.686-4.687 12.284-4.687 17 0'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-battery-filled */
|
|
.tabler--battery-filled {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 6a3 3 0 0 1 2.995 2.824L20 9v.086l.052.019a1.5 1.5 0 0 1 .941 1.25L21 10.5v3a1.5 1.5 0 0 1-.948 1.395l-.052.018V15a3 3 0 0 1-2.824 2.995L17 18H6a3 3 0 0 1-2.995-2.824L3 15V9a3 3 0 0 1 2.824-2.995L6 6z'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-arrow-right */
|
|
.tabler--arrow-right {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-6 6l6-6m-6-6l6 6'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-arrow-left */
|
|
.tabler--arrow-left {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14M5 12l6 6m-6-6l6-6'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-palette */
|
|
.tabler--palette {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 21a9 9 0 0 1 0-18c4.97 0 9 3.582 9 8c0 1.06-.474 2.078-1.318 2.828S17.693 15 16.5 15H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21'/%3E%3Cpath d='M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4-3a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4 3a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-brand-tabler */
|
|
.tabler--brand-tabler {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m8 9l3 3l-3 3m5 0h3'/%3E%3Cpath d='M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-text-size */
|
|
.tabler--text-size {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7V5h13v2m-6-2v14m2 0H8m7-6v-1h6v1m-3-1v7m-1 0h2'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-letter-case */
|
|
.tabler--letter-case {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-minimize */
|
|
.tabler--minimize {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19v-2a2 2 0 0 1 2-2h2M15 5v2a2 2 0 0 0 2 2h2M5 15h2a2 2 0 0 1 2 2v2M5 9h2a2 2 0 0 0 2-2V5'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-maximize */
|
|
.tabler--maximize {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-x */
|
|
.tabler--x {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
|
|
/* ============== */
|
|
|
|
/* ti-corner-down-right */
|
|
.tabler--corner-down-right {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 6v6a3 3 0 0 0 3 3h10l-4-4m0 8l4-4'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-message-chatbot */
|
|
.tabler--message-chatbot {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM9.5 9h.01m4.99 0h.01'/%3E%3Cpath d='M9.5 13a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-link */
|
|
.tabler--link {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-info-circle */
|
|
.tabler--info-circle {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-mood-empty */
|
|
.tabler--mood-empty {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01M9 15h6'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-user-heart */
|
|
.tabler--user-heart {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h.5m7.5 7l3.35-3.284a2.143 2.143 0 0 0 .005-3.071a2.24 2.24 0 0 0-3.129-.006l-.224.22l-.223-.22a2.24 2.24 0 0 0-3.128-.006a2.143 2.143 0 0 0-.006 3.071z'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-heart */
|
|
.tabler--heart {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-thumb-up */
|
|
.tabler--thumb-up {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1za4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-thumb-down */
|
|
.tabler--thumb-down {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 13V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1za4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2-2l-1-5a2 3 0 0 0-2-2h-7a3 3 0 0 0-3 3'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-universe */
|
|
.tabler--universe {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7.027 11.477a5 5 0 1 0 5.496-4.45a4.95 4.95 0 0 0-3.088.681'/%3E%3Cpath d='M5.636 5.636a9 9 0 1 0 3.555-2.188'/%3E%3Cpath d='M17 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-6 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-3 4a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-brand-mastodon */
|
|
.tabler--brand-mastodon {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18.648 15.254C16.832 17.017 12 16.88 12 16.88a18.3 18.3 0 0 1-3.288-.256q1.69 2.977 8.982 2.475c-1.945 2.013-13.598 5.257-13.668-7.636L4 10.309c0-3.036.023-4.115 1.352-5.633C7.023 2.766 12 3.01 12 3.01s4.977-.243 6.648 1.667C19.977 6.195 20 7.274 20 10.31s-.456 4.074-1.352 4.944'/%3E%3Cpath d='M12 11.204V8.278C12 7.02 11.105 6 10 6S8 7.02 8 8.278V13m4-4.722C12 7.02 12.895 6 14 6s2 1.02 2 2.278V13'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-mail */
|
|
.tabler--mail {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-brand-metabrainz */
|
|
.tabler--brand-metabrainz {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7v10l7 4V3zm18 0v10l-7 4V3z'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-brand-lastfm */
|
|
.tabler--brand-lastfm {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 8c-.83-1-1.388-1-2-1s-2 .271-2 2s1.384 2.233 3 3s2.125 1.812 2 3s-1 2-3 2s-3-1-3.5-2s-1.585-4.78-2.497-6a5 5 0 1 0-1 7'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-brand-git */
|
|
.tabler--brand-git {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-4-4a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 8a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1-1V9m3 2l-2-2m-2-2L9.1 5.1'/%3E%3Cpath d='m13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1-2.892 0l-7.955-7.955a2.045 2.045 0 0 1 0-2.892l7.955-7.955a2.045 2.045 0 0 1 2.892 0z'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-brand-github */
|
|
.tabler--brand-github {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-building-bank */
|
|
.tabler--building-bank {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 21h18M3 10h18M5 6l7-3l7 3M4 10v11m16-11v11M8 14v3m4-3v3m4-3v3'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-article */
|
|
.tabler--article {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-rss */
|
|
.tabler--rss {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 4a16 16 0 0 1 16 16M4 11a9 9 0 0 1 9 9'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-robot-face */
|
|
.tabler--robot-face {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2'/%3E%3Cpath d='M9 16q1.5 1 3 1c1.5 0 2-.333 3-1M9 7L8 3m7 4l1-4m-7 9v-1m6 1v-1'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-note */
|
|
.tabler--notes {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm4 2h6m-6 4h6m-6 4h4'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-mood-look-up */
|
|
.tabler--mood-look-up {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m6-4h.01M15 8h.01M11 12h2'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-mood-sad-dizzy */
|
|
.tabler--mood-sad-dizzy {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='M14.5 16.05a3.5 3.5 0 0 0-5 0M8 9l2 2m0-2l-2 2m6-2l2 2m0-2l-2 2'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-arrow-autofit-height */
|
|
.tabler--arrow-autofit-height {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6m6 10v7m0-18v7m-3 8l3 3l3-3M15 6l3-3l3 3'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* ti-currency-dollar */
|
|
.tabler--currency-dollar {
|
|
display: inline-block;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: top;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.7 8A3 3 0 0 0 14 6h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2M12 3v3m0 12v3'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
} |