From 9b38e4bf15725a96789e52ecae0bc9860dafd3be Mon Sep 17 00:00:00 2001 From: Ruben Date: Sat, 18 Oct 2025 03:45:31 -0500 Subject: [PATCH] clean up styling, redo navbar, redo settings --- _includes/layouts/base.njk | 16 +- _includes/layouts/footer.njk | 5 +- _includes/layouts/header.njk | 2 + _includes/layouts/home/intro.njk | 20 +- _includes/layouts/navbar.njk | 147 +++------- _includes/layouts/settings.njk | 34 +++ _includes/scripts/close.js | 6 +- _includes/scripts/settings.js | 18 -- _includes/styles/accessibility.css | 46 ++- _includes/styles/base.css | 302 +++++++------------ _includes/styles/colors.css | 98 ++----- _includes/styles/icons.css | 144 ++++----- _includes/styles/navbar.css | 457 ++++++++++++----------------- _includes/styles/settings.css | 67 +++++ _includes/styles/windows.css | 131 +++------ 15 files changed, 624 insertions(+), 869 deletions(-) create mode 100644 _includes/layouts/settings.njk create mode 100644 _includes/styles/settings.css diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index e351f4e..241d70e 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -15,12 +15,20 @@ title: base {% include "layouts/navbar.njk" %} -
- {{ content | safe }} -
+ + {% include "layouts/settings.njk" %} - {% include "layouts/footer.njk" %} + + +
+ {{ content | safe }} +
+ {% include "layouts/footer.njk" %} + + + + \ No newline at end of file diff --git a/_includes/layouts/footer.njk b/_includes/layouts/footer.njk index 6cfdf7b..7318dca 100644 --- a/_includes/layouts/footer.njk +++ b/_includes/layouts/footer.njk @@ -22,7 +22,4 @@ GIF of a synth with a massive butt, shaking it towards the viewer - - - - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/layouts/header.njk b/_includes/layouts/header.njk index faabc7f..ae6d459 100644 --- a/_includes/layouts/header.njk +++ b/_includes/layouts/header.njk @@ -2,6 +2,7 @@ {% include "styles/accessibility.css" %} {% include "styles/animations.css" %} {% include "styles/base.css" %} + {% include "styles/colors.css" %} {% include "styles/font.css" %} {% include "styles/footer.css" %} {% include "styles/icons.css" %} @@ -12,6 +13,7 @@ {% include "styles/pages/services.css" %} {% include "styles/pages/sneexy.css" %} {% include "styles/prism-a11y-dark.css" %} + {% include "styles/settings.css" %} {% include "styles/windows.css" %} {% endset %} {% set js %} diff --git a/_includes/layouts/home/intro.njk b/_includes/layouts/home/intro.njk index 161ccc8..fdb7c1a 100644 --- a/_includes/layouts/home/intro.njk +++ b/_includes/layouts/home/intro.njk @@ -1,17 +1,17 @@
- + Welcome! - - +

Hey! Welcome to...

diff --git a/_includes/layouts/navbar.njk b/_includes/layouts/navbar.njk index b5940e8..5a15521 100644 --- a/_includes/layouts/navbar.njk +++ b/_includes/layouts/navbar.njk @@ -1,109 +1,44 @@
- -
- - - -
- Home - Services - Admins - Donate -
- - -
    -
  • -

    Settings

    -
    • -
  • -
    -

    Theme

    -

    Only works with JavaScript.

    - - - - - -
    • -
  • -
    -

    Font

    - - -
    -     - - -
    -     - - -
    -     -

    Support not guaranteed, but provided as options anyways:

    - - -
    -     - - -
    -     - - -
    -     -
    • -
  • -
    - - -
    -     - - -
    -     - - -
    -     - - - - -
    • -
  • -
    -

    Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the title attribute, and forced uncapitalization is done using CSS's text-transform.

    -

    These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, your settings will not be saved.

    -
    • -
-
- - + + +
+ + + +
+ Home + Services + Admins + Donate + + +
+ + +
+ +
\ No newline at end of file diff --git a/_includes/layouts/settings.njk b/_includes/layouts/settings.njk new file mode 100644 index 0000000..2500471 --- /dev/null +++ b/_includes/layouts/settings.njk @@ -0,0 +1,34 @@ + + +

Settings

+

Settings are saved with JavaScript enabled.

+
+
+ +

Theme

+ + + + + + + +

Font

+ + + + + + + +

Appearance

+ + + + + + + +
+ + \ No newline at end of file diff --git a/_includes/scripts/close.js b/_includes/scripts/close.js index 1fe10b4..19c091e 100644 --- a/_includes/scripts/close.js +++ b/_includes/scripts/close.js @@ -1,7 +1,7 @@ // unnick asked for this, i provide. -// this provides no usefulness and there is no implementation to respawn windows. but i think it's funny and you can just reload anyways since it doesn't take long to load anyways +// this provides no usefulness and there is no implementation to respawn windows. but i think it's funny and you can just reload document.addEventListener("DOMContentLoaded", function() { - document.querySelectorAll(".close-button").forEach(e => { - e.onclick = () => e.parentElement.parentElement.remove(); + document.querySelectorAll("close-button").forEach(e => { + e.onclick = () => e.parentElement.parentElement.parentElement.remove(); }); }); \ No newline at end of file diff --git a/_includes/scripts/settings.js b/_includes/scripts/settings.js index 2915475..cd23176 100644 --- a/_includes/scripts/settings.js +++ b/_includes/scripts/settings.js @@ -9,7 +9,6 @@ document.addEventListener("DOMContentLoaded", function() { // load saved settings loadSettings(); - applyTheme(); // event listeners on all inputs fontInputs.forEach(input => { @@ -19,7 +18,6 @@ document.addEventListener("DOMContentLoaded", function() { themeInputs.forEach(input => { input.addEventListener('change', function() { saveSettings(); - applyTheme(); }); }); @@ -78,20 +76,4 @@ document.addEventListener("DOMContentLoaded", function() { disableAlttextCheckbox.checked = true; } } - - // apply the theme based on user preference - function applyTheme() { - const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value; - - // remove any existing theme - document.documentElement.removeAttribute('data-theme'); - - // apply the selected theme - if (selectedTheme === 'light') { - document.documentElement.setAttribute('data-theme', 'light'); - } else if (selectedTheme === 'dark') { - document.documentElement.setAttribute('data-theme', 'dark'); - } - // if auto, don't set a data-theme attribute, let the media query handle it - } }); \ No newline at end of file diff --git a/_includes/styles/accessibility.css b/_includes/styles/accessibility.css index a553e96..0907d9d 100644 --- a/_includes/styles/accessibility.css +++ b/_includes/styles/accessibility.css @@ -8,40 +8,30 @@ / ╰───────────────────────────────────────────────────────╯ / accessibility - choosable accessibility settings */ -/* - font settings - */ +:root { + color-scheme: light dark; /* by default, automatically use light mode */ -/* 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; + /* theme selector */ + &:has(#theme-light:checked) { + color-scheme: light !important; } -} -/* atkinson hyperlegible next */ -:root:has(#font-ahn:checked) { - --font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; -} + &:has(#theme-dark:checked) { + color-scheme: dark !important; + } -/* inter */ -:root:has(#font-inter:checked) { - --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; -} + /* font selector */ + &:has(#font-monospace:checked) { /* monospace */ + --font-family: monospace, system-ui, -apple-system, sans-serif; + } -/* (browser) sans serif */ -:root:has(#font-sans-serif:checked) { - --font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui; -} + &:has(#font-sserif:checked) { /* sans seris */ + --font-family: sans-serif, 'Segoe UI', system-ui, -apple-system; + } -/* (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; + &:has(#font-serif:checked) { /* serif */ + --font-family: serif, sans-serif, system-ui, -apple-system; + } } /* - misc - */ diff --git a/_includes/styles/base.css b/_includes/styles/base.css index 501f820..a53861a 100644 --- a/_includes/styles/base.css +++ b/_includes/styles/base.css @@ -7,205 +7,6 @@ / ╰────────────────────────╯ / base - styling for regular/global html elements as well as the color schemes, and anything else that doesn't fit anywhere else */ -: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: #ffaa33; - --link: #9f5e03; - - /* 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: #d29f12; - --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; - --link: var(--accent); - - /* 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; - --link: #9f5e03; - - /* 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: #d29f12; - --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; - --link: var(--accent); - - /* 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 - ---------------------------------- */ @@ -219,6 +20,7 @@ html { body { font-family: var(--font-family); font-size: 1.05rem; + line-height: 1.45rem; text-transform: lowercase; margin: unset !important; } @@ -247,6 +49,31 @@ bg-image { z-index: -10000; } +content-wrapper { + display: flex; + flex-direction: column; + gap: 2rem; + margin-bottom: 4rem; + margin-left: auto; + margin-right: auto; + margin-top: 5rem; + max-width: 60rem; + + transition: opacity .5s, translate .5s; + opacity: 1; + translate: 0 0; + @starting-style { + opacity: 0; + translate: 0 1rem; + } + + @media screen and (max-width: 60rem) { + gap: 1.5rem; + margin-bottom: 1rem; + margin-top: 3.4rem; + } +} + /* text formatting and config stuff */ /* headings */ @@ -741,9 +568,7 @@ html:has(input[type="checkbox"]#spoil-nsfw-content:checked) { } } -/* --------------- -- alt text popup - ---------------- */ +/* alt text popup */ .alt-popup { position: fixed; @@ -762,6 +587,79 @@ html:has(input[type="checkbox"]#spoil-nsfw-content:checked) { transition: opacity 0.4s; } +/* widgets */ + +radio-button-group { + display: flex; + gap: .4rem; + + label { + border: .13rem solid var(--border); + border-radius: .4rem; + padding: .2rem; + cursor: pointer; + + &:has(input:checked) { + border-color: var(--accent); + background-color: color-mix(in srgb, var(--accent) 30%, var(--background)); + } + + &:hover, &:focus-visible { + background: var(--hover); + } + } + + input { + /* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */ + opacity: 0; + position: absolute; + pointer-events: none; + } +} + +checkbox-button-group { + display: flex; + flex-flow: column; + gap: .5rem; + + label { + border-radius: .4rem; + border: .13rem solid var(--border); + cursor: pointer; + margin-right: .3rem; + padding: .2rem; + width: max-content; + + &:has(input:checked) { + border-color: var(--accent); + background-color: color-mix(in srgb, var(--accent) 30%, var(--background)); + + &::after { + background: var(--green); + border-radius: 10rem; + content: ''; + display: inline-flex; + height: 1.5rem; + margin-left: -.2rem; + margin-top: -.9rem; + position: absolute; + width: 1.5rem; + } + } + + &:hover, &:focus-visible { + background: var(--hover); + } + } + + input { + /* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */ + opacity: 0; + position: absolute; + pointer-events: none; + } +} + /* ╭────────────────────────────────────────╮ / │ ____ _ _ │ / │ / __ \ _ __ ___ ___ __| (_) __ _ │ diff --git a/_includes/styles/colors.css b/_includes/styles/colors.css index 5ce63ce..b5274b4 100644 --- a/_includes/styles/colors.css +++ b/_includes/styles/colors.css @@ -7,6 +7,36 @@ */ :root { + --background: light-dark(#fafafa, #121418); + --foreground: light-dark(#575f66, #caccd3); + --accent: light-dark(#f2ae49, #efbd58); + --link: light-dark(hsl(from var(--accent) h s calc(l - 30)), var(--accent)) + + /* light theme is Ayu Light, dark theme is modified Astrodark */ + + --black: light-dark(#8A9199, #576176); + --red: light-dark(#F51818, #FAA5AB); + --green: light-dark(#86B300, #A5CD84); + --yellow: light-dark(#F2AE49, #EFBD58); + --blue: light-dark(#399EE6, #8DC3F1); + --purple: light-dark(#A37ACC, #DEAEED); + --cyan: light-dark(#4CBF99, #27FFDF); + --white: light-dark(#FAFAFA, #CACCD3); + + --dark-black: light-dark(#575F66, #111317); + --dark-red: light-dark(#F51818, #F8747E); + --dark-green: light-dark(#86B300, #75AD47); + --dark-yellow: light-dark(#F2AE49, #D09214); + --dark-blue: light-dark(#399EE6, #50A4E9); + --dark-purple: light-dark(#A37ACC, #CC83E3); + --dark-cyan: light-dark(#4CBF99, #00B298); + --dark-white: light-dark(#FAFAFA, #ADB0BB); + + --border: light-dark(hsl(from var(--foreground) h s calc(l + 45)), hsl(from var(--background) h s calc(l + 15))); + --hover: light-dark(hsl(from var(--background) h s calc(l - 20)), hsl(from var(--background) h s calc(l + 10))); + --shadow: light-dark(rgba(from var(--foreground) r g b / .8), rgba(from var(--background) r g b / .8)); + --focused: light-dark(var(--dark-purple), var(--dark-purple)) + --pagefind-ui-font: var(--font-family); --pagefind-ui-primary: var(--foreground); --pagefind-ui-text: var(--foreground); @@ -14,72 +44,4 @@ --pagefind-ui-border: var(--accent); --pagefind-ui-tag: var(--background); --site-border: .1rem solid var(--border); - - color-scheme: light dark; /* by default, automatically use light mode */ -} - -/* Ayu Light */ -@media (prefers-color-scheme: light) { - :root { - --background: #fafafa; - --foreground: #575f66; - --accent: #f2ae49; - --link: hsl(from var(--accent) h s calc(l - 30)); /* darken for light */ - - --black: #8A9199; - --red: #F51818; - --green: #86B300; - --yellow: #F2AE49; - --blue: #399EE6; - --purple: #A37ACC; - --cyan: #4CBF99; - --white: #FAFAFA; - - --dark-black: #575F66; - --dark-red: #F51818; - --dark-green: #86B300; - --dark-yellow: #F2AE49; - --dark-blue: #399EE6; - --dark-purple: #A37ACC; - --dark-cyan: #4CBF99; - --dark-white: #FAFAFA; - - --border: hsl(from var(--foreground) h s calc(l + 10)); - --hover: hsl(from var(--background) h s calc(l - 20));; - --shadow: rgba(from var(--foreground) r g b / .8); - --focused: var(--dark-purple) - } -} - -/* Astrodark */ -@media (prefers-color-scheme: dark) { - :root { - --background: #1a1d23; - --foreground: #caccd3; - --accent: #efbd58; - --link: var(--accent); - - --black: #576176; - --red: #FAA5AB; - --green: #A5CD84; - --yellow: #EFBD58; - --blue: #8DC3F1; - --purple: #DEAEED; - --cyan: #27FFDF; - --white: #CACCD3; - - --dark-black: #111317; - --dark-red: #F8747E; - --dark-green: #75AD47; - --dark-yellow: #D09214; - --dark-blue: #50A4E9; - --dark-purple: #CC83E3; - --dark-cyan: #00B298; - --dark-white: #ADB0BB; - - --border: hsl(from var(--background) h s calc(l + 40)); - --hover: hsl(from var(--background) h s calc(l + 20));; - --shadow: rgba(from var(--background) r g b / .8); - --focused: var(--dark-purple) - } } \ No newline at end of file diff --git a/_includes/styles/icons.css b/_includes/styles/icons.css index ca94500..ccaf9c4 100644 --- a/_includes/styles/icons.css +++ b/_includes/styles/icons.css @@ -7,80 +7,80 @@ / ╰─────────────────────────╯ / icons - tabler icons done through css, generate via https://icon-sets.iconify.design/tabler */ -.icon { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - background-color: currentColor; +icon-tabler { -webkit-mask-image: var(--svg); - mask-image: var(--svg); -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; + background-color: currentColor; + display: inline-flex; + height: 1.5rem; + mask-image: var(--svg); + mask-repeat: no-repeat; mask-size: 100% 100%; -} + vertical-align: bottom; + width: 1.5rem; -.tabler--accessible { --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"); } -.tabler--alert-triangle { --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 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E"); } -.tabler--arrow-autofit-height { --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"); } -.tabler--arrow-forward { --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 11l4 4l-4 4m4-4H8a4 4 0 0 1 0-8h1'/%3E%3C/svg%3E"); } -.tabler--arrow-left { --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"); } -.tabler--arrow-right { --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"); } -.tabler--article { --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"); } -.tabler--battery-filled { --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"); } -.tabler--bell { --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"); } -.tabler--brand-git { --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"); } -.tabler--brand-github { --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"); } -.tabler--brand-lastfm { --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"); } -.tabler--brand-mastodon { --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"); } -.tabler--brand-metabrainz { --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"); } -.tabler--brand-tabler { --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"); } -.tabler--building-bank { --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"); } -.tabler--bulb { --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 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6'/%3E%3C/svg%3E"); } -.tabler--chevron-down { --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 9l6 6l6-6'/%3E%3C/svg%3E"); } -.tabler--cloud-network { --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 20h7m4 0h7m-11 0a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2-4v2m-4-1.996H6.657C4.085 16 2 13.993 2 11.517s2.085-4.482 4.657-4.482c.393-1.762 1.794-3.2 3.675-3.773c1.88-.572 3.956-.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486s-1.551 3.487-3.465 3.487H16'/%3E%3C/svg%3E"); } -.tabler--corner-down-right { --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"); } -.tabler--currency-dollar { --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"); } -.tabler--database-share { --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='M4 6c0 1.657 3.582 3 8 3s8-1.343 8-3s-3.582-3-8-3s-8 1.343-8 3'/%3E%3Cpath d='M4 6v6c0 1.657 3.582 3 8 3q.541 0 1.065-.026M20 13V6'/%3E%3Cpath d='M4 12v6c0 1.657 3.582 3 8 3m4 1l5-5m0 4.5V17h-4.5'/%3E%3C/g%3E%3C/svg%3E"); } -.tabler--device-gamepad-2 { --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 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5z'/%3E%3Cpath d='m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2'/%3E%3C/g%3E%3C/svg%3E"); } -.tabler--device-mobile { --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 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01'/%3E%3C/svg%3E"); } -.tabler--external-link { --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 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E"); } -.tabler--grid-dots { --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"); } -.tabler--heart { --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"); } -.tabler--help { --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 0m9 5v.01'/%3E%3Cpath d='M12 13.5a1.5 1.5 0 0 1 1-1.5a2.6 2.6 0 1 0-3-4'/%3E%3C/g%3E%3C/svg%3E"); } -.tabler--home { --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"); } -.tabler--info-circle { --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"); } -.tabler--letter-case { --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"); } -.tabler--link { --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"); } -.tabler--list-tree { --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 6h11m-8 6h8m-5 6h5M5 6v.01M8 12v.01M11 18v.01'/%3E%3C/svg%3E"); } -.tabler--lock { --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 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4'/%3E%3C/g%3E%3C/svg%3E"); } -.tabler--login { --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 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M21 12H8l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E");} -.tabler--mail { --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"); } -.tabler--maximize { --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"); } -.tabler--message-chatbot { --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"); } -.tabler--minimize { --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"); } -.tabler--mood-empty { --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"); } -.tabler--mood-look-up { --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"); } -.tabler--mood-sad-dizzy { --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"); } -.tabler--mood-smile { --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 0m6-2h.01M15 10h.01'/%3E%3Cpath d='M9.5 15a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E"); } -.tabler--notebook { --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"); } -.tabler--notes { --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"); } -.tabler--palette { --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"); } -.tabler--planet { --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.816 13.58c2.292 2.138 3.546 4 3.092 4.9c-.745 1.46-5.783-.259-11.255-3.838c-5.47-3.579-9.304-7.664-8.56-9.123c.464-.91 2.926-.444 5.803.805'/%3E%3Cpath d='M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0'/%3E%3C/g%3E%3C/svg%3E"); } -.tabler--robot-face { --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"); } -.tabler--rosette-discount-check { --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 7.2A2.2 2.2 0 0 1 7.2 5h1a2.2 2.2 0 0 0 1.55-.64l.7-.7a2.2 2.2 0 0 1 3.12 0l.7.7c.412.41.97.64 1.55.64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58.23 1.138.64 1.55l.7.7a2.2 2.2 0 0 1 0 3.12l-.7.7a2.2 2.2 0 0 0-.64 1.55v1a2.2 2.2 0 0 1-2.2 2.2h-1a2.2 2.2 0 0 0-1.55.64l-.7.7a2.2 2.2 0 0 1-3.12 0l-.7-.7a2.2 2.2 0 0 0-1.55-.64h-1a2.2 2.2 0 0 1-2.2-2.2v-1a2.2 2.2 0 0 0-.64-1.55l-.7-.7a2.2 2.2 0 0 1 0-3.12l.7-.7A2.2 2.2 0 0 0 5 8.2z'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); } -.tabler--rss { --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"); } -.tabler--server-cog { --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 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01'/%3E%3C/svg%3E"); } -.tabler--settings { --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"); } -.tabler--text-size { --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"); } -.tabler--thumb-down { --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"); } -.tabler--thumb-up { --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"); } -.tabler--universe { --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"); } -.tabler--user { --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"); } -.tabler--user-cog { --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-4h2.5m4.501 4a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75'/%3E%3C/svg%3E"); } -.tabler--user-heart { --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"); } -.tabler--user-plus { --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 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4'/%3E%3C/svg%3E"); } -.tabler--volume { --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"); } -.tabler--wifi { --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"); } -.tabler--x { --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"); } \ No newline at end of file + &[accessible] { --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"); } + &[alert-triangle] { --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 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E"); } + &[arrow-autofit-height] { --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"); } + &[arrow-forward] { --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 11l4 4l-4 4m4-4H8a4 4 0 0 1 0-8h1'/%3E%3C/svg%3E"); } + &[arrow-left] { --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"); } + &[arrow-right] { --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"); } + &[article] { --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"); } + &[battery-filled] { --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"); } + &[bell] { --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"); } + &[brand-git] { --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"); } + &[brand-github] { --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"); } + &[brand-lastfm] { --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"); } + &[brand-mastodon] { --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"); } + &[brand-metabrainz] { --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"); } + &[brand-tabler] { --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"); } + &[building-bank] { --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"); } + &[bulb] { --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 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6'/%3E%3C/svg%3E"); } + &[chevron-down] { --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 9l6 6l6-6'/%3E%3C/svg%3E"); } + &[cloud-network] { --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 20h7m4 0h7m-11 0a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2-4v2m-4-1.996H6.657C4.085 16 2 13.993 2 11.517s2.085-4.482 4.657-4.482c.393-1.762 1.794-3.2 3.675-3.773c1.88-.572 3.956-.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486s-1.551 3.487-3.465 3.487H16'/%3E%3C/svg%3E"); } + &[corner-down-right] { --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"); } + &[currency-dollar] { --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"); } + &[database-share] { --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='M4 6c0 1.657 3.582 3 8 3s8-1.343 8-3s-3.582-3-8-3s-8 1.343-8 3'/%3E%3Cpath d='M4 6v6c0 1.657 3.582 3 8 3q.541 0 1.065-.026M20 13V6'/%3E%3Cpath d='M4 12v6c0 1.657 3.582 3 8 3m4 1l5-5m0 4.5V17h-4.5'/%3E%3C/g%3E%3C/svg%3E"); } + &[device-gamepad-2] { --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 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5z'/%3E%3Cpath d='m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2'/%3E%3C/g%3E%3C/svg%3E"); } + &[device-mobile] { --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 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01'/%3E%3C/svg%3E"); } + &[external-link] { --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 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E"); } + &[grid-dots] { --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"); } + &[heart] { --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"); } + &[help] { --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 0m9 5v.01'/%3E%3Cpath d='M12 13.5a1.5 1.5 0 0 1 1-1.5a2.6 2.6 0 1 0-3-4'/%3E%3C/g%3E%3C/svg%3E"); } + &[home] { --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"); } + &[info-circle] { --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"); } + &[letter-case] { --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"); } + &[link] { --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"); } + &[list-tree] { --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 6h11m-8 6h8m-5 6h5M5 6v.01M8 12v.01M11 18v.01'/%3E%3C/svg%3E"); } + &[lock] { --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 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4'/%3E%3C/g%3E%3C/svg%3E"); } + &[login] { --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 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M21 12H8l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E");} + &[mail] { --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"); } + &[maximize] { --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"); } + &[message-chatbot] { --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"); } + &[minimize] { --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"); } + &[mood-empty] { --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"); } + &[mood-look-up] { --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"); } + &[mood-sad-dizzy] { --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"); } + &[mood-smile] { --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 0m6-2h.01M15 10h.01'/%3E%3Cpath d='M9.5 15a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E"); } + &[notebook] { --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"); } + &[notes] { --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"); } + &[palette] { --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"); } + &[planet] { --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.816 13.58c2.292 2.138 3.546 4 3.092 4.9c-.745 1.46-5.783-.259-11.255-3.838c-5.47-3.579-9.304-7.664-8.56-9.123c.464-.91 2.926-.444 5.803.805'/%3E%3Cpath d='M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0'/%3E%3C/g%3E%3C/svg%3E"); } + &[robot-face] { --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"); } + &[rosette-discount-check] { --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 7.2A2.2 2.2 0 0 1 7.2 5h1a2.2 2.2 0 0 0 1.55-.64l.7-.7a2.2 2.2 0 0 1 3.12 0l.7.7c.412.41.97.64 1.55.64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58.23 1.138.64 1.55l.7.7a2.2 2.2 0 0 1 0 3.12l-.7.7a2.2 2.2 0 0 0-.64 1.55v1a2.2 2.2 0 0 1-2.2 2.2h-1a2.2 2.2 0 0 0-1.55.64l-.7.7a2.2 2.2 0 0 1-3.12 0l-.7-.7a2.2 2.2 0 0 0-1.55-.64h-1a2.2 2.2 0 0 1-2.2-2.2v-1a2.2 2.2 0 0 0-.64-1.55l-.7-.7a2.2 2.2 0 0 1 0-3.12l.7-.7A2.2 2.2 0 0 0 5 8.2z'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); } + &[rss] { --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"); } + &[server-cog] { --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 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01'/%3E%3C/svg%3E"); } + &[settings] { --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"); } + &[text-size] { --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"); } + &[thumb-down] { --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"); } + &[thumb-up] { --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"); } + &[universe] { --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"); } + &[user] { --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"); } + &[user-cog] { --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-4h2.5m4.501 4a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75'/%3E%3C/svg%3E"); } + &[user-heart] { --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"); } + &[user-plus] { --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 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4'/%3E%3C/svg%3E"); } + &[volume] { --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"); } + &[wifi] { --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"); } + &[x] { --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"); } +} \ No newline at end of file diff --git a/_includes/styles/navbar.css b/_includes/styles/navbar.css index c2effc5..fa81b9e 100644 --- a/_includes/styles/navbar.css +++ b/_includes/styles/navbar.css @@ -8,78 +8,192 @@ / 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; - + display: flex; + flex-direction: row; + inset: 0 !important; + width: 100% !important; + height: 1.8rem; + max-height: 1.8rem !important; + padding: .4rem .6rem .4rem .6rem; + position: fixed; transition: .2s background-color; + vertical-align: middle; + z-index: 100; - .nav-base { - padding: 0px .2em !important; - align-content: center; - outline: .13rem solid var(--border); - border-radius: 1rem; - height: 1.9rem; + navbar-left { + display: inline-flex; + flex-direction: row; + gap: .5rem; } - .nav-left { - margin-left: .6rem !important; - padding: 0px .5rem .1rem !important; + navbar-right { + display: inline-flex; + flex-direction: row; + gap: .5rem; + margin-left: auto; + margin-right: .7rem; + } + + .nav-base { + align-content: center; + border-radius: 1rem; + display: inline-flex; + flex-direction: row; + height: 1.9rem; + outline: .13rem solid var(--border); + overflow: hidden; + padding: 0px .2em !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; + transition: .2s ease-out; width: 2rem; } - } - .nav-baselink:hover, .nav-baselink:focus-visible { - .synth-icon { - transition: all .2s ease-out; - transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg); + &:hover, &:focus-visible { + .synth-icon { + transition: .2s ease-out; + transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg); + } } } - .nav-desktop { - overflow: hidden; - } - .nav-mobile-menu { display: none; + position: relative; + + input[type="checkbox"] { + left: -100vw; + position: absolute; + } + + label { + cursor: pointer; + } + + ul { + background-color: var(--background); + border-radius: 1rem; + border: var(--accent) solid .15rem; + height: max-content; + left: 0; + margin-top: 2.2rem !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; + } + + .icon { + padding-right: .3em; + transition: .2s all; + } + } + + li:hover { + transition: .2s all; + + .icon { + transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg); + transition: .2s all; + } + } + + .nav-home:hover, + .nav-home:focus-visible { + background-color: color-mix(in srgb, var(--accent) 20%, transparent); + + a { + color: var(--foreground); + } + } + + .nav-notebook:hover, + .nav-home:focus-visible { + background-color: color-mix(in srgb, var(--purple) 20%, transparent); + + a { + color: var(--foreground); + } + } + + .nav-services:hover, + .nav-services:focus-visible { + background-color: color-mix(in srgb, var(--blue) 20%, transparent); + + a { + color: var(--foreground); + } + } + + .nav-webmaster:hover, + .nav-home:focus-visible { + background-color: color-mix(in srgb, var(--green) 20%, transparent); + + a { + color: var(--foreground); + } + } + + .nav-donate:hover, + .nav-home:focus-visible { + 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 { + align-items: center; background-color: var(--background); color: var(--foreground); overflow: clip; - position: relative; + padding: 0 .4rem !important; text-shadow: none; transition: all .3s; - .text { + span { opacity: 0; position: absolute; transition: all .3s; @@ -87,26 +201,27 @@ white-space: nowrap; } - .icon { - transform: scale(1.1); + icon-tabler { transition: all .3s; } } - .nav-links:hover, .nav-links:focus-visible { - padding-right: 9rem !important; - padding-bottom: 7rem !important; - transition: all .3s; + .nav-links { + &:hover, &:focus-visible { + padding-right: 9rem !important; + padding-bottom: 7rem !important; + transition: .3s; - .text { - opacity: 1; - transform: scale(1.5) translateX(-.4rem); - transition: all .3s; - } + span { + opacity: 1; + transform: scale(1.5) translateX(.7rem) translateY(.1rem); + transition: .3s; + } - .icon { - transform: scale(5) translateY(.9rem) translateX(.4rem) rotate(10deg); - transition: all .3s; + icon-tabler { + transform: scale(5) translateY(.85rem) translateX(.5rem) rotate(10deg); + transition: .3s; + } } } @@ -156,47 +271,11 @@ } } - .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"]#nav-settings-menu { left: -100vw; position: absolute; } - - settings-group { - display: flex; - - label { - &:has(input:checked) { - border-color: var(--accent); - background: color-mix(in srgb, var(--accent) 20%, var(--background)); - } - - border: .1rem solid var(--comment); - border-radius: .4rem; - padding: .2rem; - margin-right: .3rem; - cursor: pointer; - } - - input { - /* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */ - opacity: 0; - position: absolute; - pointer-events: none; - } - } input[type="checkbox"]#nav-settings-menu:focus-visible { left: unset !important; @@ -204,83 +283,42 @@ label[data-toggle="nav-settings"] { cursor: pointer; - overflow: hidden !important; - padding: .3rem .5rem !important; - position: relative; + align-items: center; - .icon { - padding: 0 .5rem !important; + icon-tabler { + padding: 0 .4rem !important; pointer-events: none; - transform: translateY(.1rem) scale(1.5); - transition: all 1.3s; + transform: scale(1.3); + transition: 1.3s; } - } - label[data-toggle="nav-settings"]:hover ,label[data-toggle="nav-settings"]:focus-visible { - .icon { - 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; + &:hover, &:focus-visible { + icon-tabler { + transform: scale(1.3) rotate(360deg); } } } - input[type="checkbox"]#nav-settings-menu: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; + &:has(input[type="checkbox"]#nav-settings-menu:checked) { + label[data-toggle="nav-settings"] { + background-color: var(--red); + outline-color: color-mix(in srgb, var(--red) 70%, transparent); + icon-tabler[settings] { + --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"); + } + } } } .nav-systray { + align-items: center; background-color: var(--background); color: var(--foreground); - padding: 0px .1rem; - min-width: 6.45rem; + display: inline-flex; + flex-direction: row; + gap: .2rem; margin-right: .4rem !important; - } - - a, - p { - margin: unset !important; + padding: 0 .4rem !important; } small { @@ -353,133 +391,14 @@ html[data-theme="dark"] { } /* modify widths and spacing depending on the size of the display */ -@media screen and (max-width: 1083px) { +@media screen and (max-width: 35rem) { .navbar { .nav-desktop { display: none !important; } .nav-mobile-menu { - display: inline-block !important; - 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; - } - - .icon { - padding-right: .3em; - transition: .2s all; - } - } - - li:hover { - transition: .2s all; - - .icon { - transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg); - transition: .2s all; - } - } - - .nav-home:hover, .nav-home:focus-visible { - background-color: color-mix(in srgb, var(--accent) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-notebook:hover, .nav-home:focus-visible { - background-color: color-mix(in srgb, var(--purple) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-services:hover, .nav-services:focus-visible { - background-color: color-mix(in srgb, var(--blue) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-webmaster:hover, .nav-home:focus-visible { - background-color: color-mix(in srgb, var(--green) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-donate:hover, .nav-home:focus-visible { - 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; - } + display: inline-flex !important; } .nav-links { diff --git a/_includes/styles/settings.css b/_includes/styles/settings.css new file mode 100644 index 0000000..4431937 --- /dev/null +++ b/_includes/styles/settings.css @@ -0,0 +1,67 @@ +:root:has(input[type="checkbox"]#nav-settings-menu:checked) { + settings-area { + opacity: 1; + transition: opacity .3s, scale .3s, visibility .3s; + visibility: visible; + + settings-model { + scale: 1; + } + } +} + +settings-area { + /* inital state for animations */ + opacity: 0; + transform-origin: center; + transition: opacity .3s, scale .3s, visibility .3s; + visibility: hidden; + + align-items: center; + background: linear-gradient(#00000000, #121418); + display: flex; + inset: 0; + justify-content: center; + overflow-x: hidden; + overflow-y: scroll; + position: fixed; + top: 3rem; + z-index: 999; + + settings-model { + background: var(--background); + border-radius: .4rem; + outline: .13rem solid var(--border); + padding: .6rem; + position: static; + scale: .5; + transition: .2s; + width: 40rem; + + &:hover { + outline-color: var(--accent); + } + + .container { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + + settings-section { + margin-right: auto; + } + } + } + + @media screen and (max-width: 40rem) { + settings-model { + border-radius: 0; + } + } + + @media screen and (max-width: 28.8rem) { + settings-model { + margin-top: 5rem; + } + } +} \ No newline at end of file diff --git a/_includes/styles/windows.css b/_includes/styles/windows.css index 99eeccf..25b3792 100644 --- a/_includes/styles/windows.css +++ b/_includes/styles/windows.css @@ -12,13 +12,14 @@ border-radius: 2rem .6rem 2rem .6rem; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; color: var(--foreground); - margin-bottom: 2em; - margin-left: auto; - margin-right: auto; - max-width: 60em; outline: var(--accent) solid .15rem; overflow: clip; - transition: .2s outline; + transition: .2s; + + &:hover { + outline: var(--accent) solid .5rem; + transition: .2s; + } .header { background-color: color-mix(in srgb, var(--accent) 20%, var(--background)); @@ -29,21 +30,18 @@ text-align: center; vertical-align: middle; - .titlebar-icon { - 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); + titlebar-icon { + background: color-mix(in srgb, var(--accent) 30%, transparent); border-bottom-right-radius: 1rem; + border-bottom: .2rem solid var(--accent); + border-right: .2rem solid var(--accent); margin-bottom: -.2rem; - - span { - background-color: var(--foreground); - } + padding: .4rem .3rem .4rem 1rem; } a { - padding: .3rem 0rem .3rem .5rem; + align-self: center; + padding-left: .5rem; text-decoration: none; color: var(--foreground); } @@ -52,46 +50,28 @@ text-decoration: underline; } - .icon { - transform: scale(1.1); - } + window-controls { + margin: auto 0 auto auto; - .window-buttons { - 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; + icon-tabler[minimize], icon-tabler[maximize] { cursor: not-allowed; + margin-right: -.2rem; } } - .close-button { - background: color-mix(in srgb, var(--accent) 40%, transparent); + close-button { + background: color-mix(in srgb, var(--accent) 30%, transparent); border-bottom-left-radius: 1rem; border-bottom: .2rem solid var(--accent); border-left: .2rem solid var(--accent); - color: var(--foreground); + cursor: pointer; margin-bottom: -.2rem; - padding: .4rem .5rem .2rem .6rem; - transition: background .2s, background-color .2s; - } + padding: .5rem .3rem .4rem .4rem; + transition: .2s; - /* close button (animated on hover) */ - .close-button:hover { - background: var(--red); - transition: background .2s; - - span { - background-color: var(--background); - transition: background-color .2s; + &:hover { + background: var(--red); + icon-tabler { background-color: var(--background); } } } } @@ -99,53 +79,34 @@ section, article { padding: .8rem; } -} -/* window styling when hovered */ -.window:hover { - outline: var(--accent) solid .5rem; - transition: .2s outline; -} + @media screen and (max-width: 60rem) { + &:not(#footer) { + .header { + titlebar-icon { + padding: .3rem .4rem .3rem .4rem; + } -/* window when its the first one on the page */ -.window:first-of-type { - margin-top: 5rem; + window-controls { + icon-tabler[minimize], icon-tabler[maximize] { + display: none !important; + } - animation: .3s ease-out .2s 1 window-appear; - animation-fill-mode: backwards; -} - -/* modify widths and spacing depending on the size of the display */ -@media screen and (max-width: 1083px) { - .window:not(#footer) { - .header { - .titlebar-icon { - padding: .3rem .4rem .3rem .4rem; + close-button { + padding: .4rem .3rem .3rem .4rem; + } + } } - .window-buttons { - display: none !important; + main, section, article { + padding: .5rem; } - .close-button { - margin-left: auto !important; - } + border-bottom: var(--accent) solid .15rem; + border-left: unset !important; + border-radius: unset !important; + border-right: unset !important; + border-top: var(--accent) solid .15rem; } - - main, section, article { - padding: .5rem; - } - - border-bottom: var(--accent) solid .15rem; - border-left: unset !important; - border-radius: unset !important; - border-right: unset !important; - border-top: var(--accent) solid .15rem; - margin-bottom: .8em; - } - - /* window when its the first one on the page */ - .window:first-child { - margin-top: 3.4rem !important; } } \ No newline at end of file