From 33b54ded4f9cba3eb0af9cfa4230808563633f32 Mon Sep 17 00:00:00 2001 From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com> Date: Sun, 13 Apr 2025 16:01:34 +0100 Subject: [PATCH] Delete main.css --- internal/glance/static/main.css | 2115 ------------------------------- 1 file changed, 2115 deletions(-) delete mode 100644 internal/glance/static/main.css diff --git a/internal/glance/static/main.css b/internal/glance/static/main.css deleted file mode 100644 index a715565..0000000 --- a/internal/glance/static/main.css +++ /dev/null @@ -1,2115 +0,0 @@ -@font-face { - font-family: 'JetBrains Mono'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); -} - -:root { - font-size: 10px; - - --scheme: ; - --bgh: 240; - --bgs: 8%; - --bgl: 9%; - --bghs: var(--bgh), var(--bgs); - --cm: 1; - --tsm: 1; - - --widget-gap: 23px; - --widget-content-vertical-padding: 15px; - --widget-content-horizontal-padding: 17px; - --widget-content-padding: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding); - --content-bounds-padding: 15px; - --border-radius: 5px; - --mobile-navigation-height: 50px; - - --color-primary: hsl(43, 50%, 70%); - --color-positive: var(--color-primary); - --color-negative: hsl(0, 70%, 70%); - --color-background: hsl(var(--bghs), var(--bgl)); - --color-widget-background-hsl-values: var(--bghs), calc(var(--bgl) + 1%); - --color-widget-background: hsl(var(--color-widget-background-hsl-values)); - --color-separator: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 4% * var(--cm)))); - --color-widget-content-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%))); - --color-widget-background-highlight: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%))); - --color-popover-background: hsl(var(--bgh), calc(var(--bgs) + 3%), calc(var(--bgl) + 3%)); - --color-popover-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 12%))); - --color-progress-border: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 10% * var(--cm)))); - --color-progress-value: hsl(var(--bgh), calc(var(--bgs) * var(--tsm)), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 30% * var(--cm)))); - --color-graph-gridlines: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 6% * var(--cm)))); - - --ths: var(--bgh), calc(var(--bgs) * var(--tsm)); - --color-text-highlight: hsl(var(--ths), calc(var(--scheme) var(--cm) * 85%)); - --color-text-paragraph: hsl(var(--ths), calc(var(--scheme) var(--cm) * 73%)); - --color-text-base: hsl(var(--ths), calc(var(--scheme) var(--cm) * 58%)); - --color-text-base-muted: hsl(var(--ths), calc(var(--scheme) var(--cm) * 52%)); - --color-text-subdue: hsl(var(--ths), calc(var(--scheme) var(--cm) * 35%)); - - --font-size-h1: 1.7rem; - --font-size-h2: 1.6rem; - --font-size-h3: 1.5rem; - --font-size-h4: 1.4rem; - --font-size-base: 1.3rem; - --font-size-h5: 1.2rem; - --font-size-h6: 1.1rem; -} - -.light-scheme { - --scheme: 100% -; -} - -.page { - height: 100%; - padding-block: var(--widget-gap); -} - -.page-content, .page.content-ready .page-loading-container { - display: none; -} - -.page.content-ready > .page-content { - display: block; -} - -.page-column-small .size-title-dynamic { - font-size: var(--font-size-h4); -} - -.page-column-full .size-title-dynamic { - font-size: var(--font-size-h3); -} - -.color-primary-if-not-visited:not(:visited) { - color: var(--color-primary); -} - -.text-truncate, -.single-line-titles .title -{ - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.single-line-titles .title { - display: block; -} - -.text-truncate-2-lines, .text-truncate-3-lines { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-box-orient: vertical; -} - -.text-truncate-3-lines { line-clamp: 3; -webkit-line-clamp: 3; } -.text-truncate-2-lines { line-clamp: 2; -webkit-line-clamp: 2; } - -.visited-indicator:not(.text-truncate)::after, -.visited-indicator.text-truncate::before, -.bookmarks-link:not(.bookmarks-link-no-arrow)::after { - content: '↗' / ""; - margin-left: 0.5em; - display: inline-block; - position: relative; - top: 0.15em; - color: var(--color-text-base); -} - -.visited-indicator.text-truncate { - direction: rtl; - text-align: left; -} - -.visited-indicator:not(:visited)::before, .visited-indicator:not(:visited)::after { - color: var(--color-primary); -} - -.page-columns-transitioned .list-with-transition > * { animation: collapsibleItemReveal .25s backwards; } -.list-with-transition > *:nth-child(2) { animation-delay: 30ms; } -.list-with-transition > *:nth-child(3) { animation-delay: 60ms; } -.list-with-transition > *:nth-child(4) { animation-delay: 90ms; } -.list-with-transition > *:nth-child(5) { animation-delay: 120ms; } -.list-with-transition > *:nth-child(6) { animation-delay: 150ms; } -.list-with-transition > *:nth-child(7) { animation-delay: 180ms; } -.list-with-transition > *:nth-child(8) { animation-delay: 210ms; } - -.list > *:not(:first-child) { - margin-top: calc(var(--list-half-gap) * 2); -} - -.list.list-with-separator > *:not(:first-child) { - margin-top: var(--list-half-gap); - border-top: 1px solid var(--color-separator); - padding-top: var(--list-half-gap); -} - -.collapsible-container:not(.container-expanded) > .collapsible-item { - display: none; -} - -.collapsible-item { - animation: collapsibleItemReveal .25s backwards; -} - -@keyframes collapsibleItemReveal { - from { - opacity: 0; - transform: translateY(10px); - } -} - -.expand-toggle-button { - font: inherit; - border: 0; - cursor: pointer; - display: block; - width: 100%; - text-align: left; - color: var(--color-text-base); - text-transform: uppercase; - font-size: var(--font-size-h4); - padding: var(--widget-content-vertical-padding) 0; - background: var(--color-widget-background); -} - -.expand-toggle-button.container-expanded { - position: sticky; - /* -1px to hide 1px gap on chrome */ - bottom: -1px; -} - -.expand-toggle-button-icon { - display: inline-block; - margin-left: 1rem; - position: relative; - top: -.2rem; -} - -.expand-toggle-button-icon::before { - content: '' / ""; - font-size: 0.8rem; - transform: rotate(90deg); - line-height: 1; - display: inline-block; - transition: transform 0.3s; -} - -.expand-toggle-button.container-expanded .expand-toggle-button-icon::before { - transform: rotate(-90deg); -} - -.widget-group-header { - overflow-x: auto; - scrollbar-width: thin; -} - -.widget-group-title { - background: none; - font: inherit; - border: none; - text-transform: uppercase; - border-bottom: 1px dotted transparent; - cursor: pointer; - flex-shrink: 0; - transition: color .3s, border-color .3s; - color: var(--color-text-subdue); - line-height: calc(1.6em - 1px); -} - -.widget-group-title:hover:not(.widget-group-title-current) { - color: var(--color-text-base); -} - -.widget-group-title-current { - border-bottom-color: var(--color-text-base-muted); - color: var(--color-text-base); -} - -.widget-group-content { - animation: widgetGroupContentEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; -} - -.widget-group-content[data-direction="right"] { - --direction: 5px; -} - -.widget-group-content[data-direction="left"] { - --direction: -5px; -} - -@keyframes widgetGroupContentEntrance { - from { - opacity: 0; - transform: translateX(var(--direction)); - } -} - -.widget-group-content:not(.widget-group-content-current) { - display: none; -} - -.widget-content:has(.expand-toggle-button:last-child) { - padding-bottom: 0; -} - -.cards-grid.collapsible-container + .expand-toggle-button { - text-align: center; - margin-top: 0.5rem; - background-color: var(--color-background); -} - -.attachments { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.attachments > * { - border-radius: var(--border-radius); - padding: 0.1rem 0.5rem; - font-size: var(--font-size-h6); - background-color: var(--color-separator); -} - -pre { - font: inherit; -} - -::selection { - background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%))); - color: var(--color-text-highlight); -} - -::-webkit-scrollbar-thumb { - background: var(--color-text-subdue); - border-radius: var(--border-radius); -} - -::-webkit-scrollbar { - background: var(--color-background); - height: 5px; - width: 10px; -} - -*:focus-visible { - outline: 2px solid var(--color-primary); - outline-offset: 0.1rem; - border-radius: var(--border-radius); -} - -*, *::before, *::after { - box-sizing: border-box; -} - -* { - padding: 0; - margin: 0; -} - -hr { - border: 0; - height: 1px; - background-color: var(--color-separator); -} - -img, svg { - display: block; - max-width: 100%; -} - -img[loading=lazy].loaded:not(.finished-transition) { - transition: opacity .4s; -} - -img[loading=lazy].cached:not(.finished-transition) { - transition: none; -} - -img[loading=lazy]:not(.loaded, .cached) { - opacity: 0; -} - -html { - scrollbar-color: var(--color-text-subdue) transparent; - scroll-behavior: smooth; -} - -html, body, .body-content { - height: 100%; -} - -h1, h2, h3, h4, h5 { - font: inherit; -} - -.visually-hidden { - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -} - -a { - text-decoration: none; - color: inherit; - overflow-wrap: break-word; -} - -ul { - list-style: none; -} - -body { - font-size: 1.3rem; - font-family: 'JetBrains Mono', monospace; - font-variant-ligatures: none; - line-height: 1.6; - color: var(--color-text-base); - background-color: var(--color-background); - overflow-y: scroll; -} - -.page-column-small { - width: 300px; - flex-shrink: 0; -} - -.page-column-full { - width: 100%; - min-width: 0; -} - -.page-columns { - display: flex; - gap: var(--widget-gap); - animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; -} - -@keyframes pageColumnsEntrance { - from { - opacity: 0; - transform: translateY(10px); - } -} - -.page-loading-container { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - animation: loadingContainerEntrance 200ms backwards; - animation-delay: 150ms; - font-size: 2rem; -} - -.page-loading-container > .loading-icon { - translate: 0 -250%; -} - -@keyframes loadingContainerEntrance { - from { - opacity: 0; - } -} - -.loading-icon { - min-width: 1.5em; - width: 1.5em; - height: 1.5em; - border: 0.25em solid hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 12%))); - border-top-color: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 40%))); - border-radius: 50%; - animation: loadingIconSpin 800ms infinite linear; -} - -@keyframes loadingIconSpin { - to { - transform: rotate(360deg); - } -} - -.notice-icon { - width: 0.7rem; - height: 0.7rem; - border-radius: 50%; -} - -.notice-icon-major { - background: var(--color-negative); -} - -.notice-icon-minor { - border: 1px solid var(--color-negative); -} - -kbd { - font: inherit; - padding: 0.1rem 0.8rem; - border-radius: var(--border-radius); - border: 2px solid var(--color-widget-background-highlight); - box-shadow: 0 2px 0 var(--color-widget-background-highlight); - user-select: none; - transition: transform .1s, box-shadow .1s; - font-size: var(--font-size-h5); - cursor: pointer; -} - -kbd:active { - transform: translateY(2px); - box-shadow: 0 0 0 0 var(--color-widget-background-highlight); -} - -.masonry { - display: flex; - gap: var(--widget-gap); -} - -.masonry-column { - flex: 1; - display: flex; - flex-direction: column; -} - -.popover-container, [data-popover-html] { - display: none; -} - -.popover-container { - --triangle-size: 10px; - --triangle-offset: 50%; - --triangle-margin: calc(var(--triangle-size) + 3px); - --entrance-y-offset: 8px; - --entrance-direction: calc(var(--entrance-y-offset) * -1); - - z-index: 20; - position: absolute; - padding-top: var(--triangle-margin); - padding-inline: var(--content-bounds-padding); -} - -.popover-container.position-above { - --entrance-direction: var(--entrance-y-offset); - padding-top: 0; - padding-bottom: var(--triangle-margin); -} - -.popover-frame { - --shadow-properties: 0 15px 20px -10px; - --shadow-color: hsla(var(--bghs), calc(var(--bgl) * 0.2), 0.5); - position: relative; - padding: 10px; - background: var(--color-popover-background); - border: 1px solid var(--color-popover-border); - border-radius: 5px; - animation: popoverFrameEntrance 0.3s backwards cubic-bezier(0.16, 1, 0.3, 1); - box-shadow: var(--shadow-properties) var(--shadow-color); -} - -.popover-frame::before { - content: ''; - position: absolute; - width: var(--triangle-size); - height: var(--triangle-size); - transform: rotate(45deg); - background-color: var(--color-popover-background); - border-top-left-radius: 2px; - border-left: 1px solid var(--color-popover-border); - border-top: 1px solid var(--color-popover-border); - left: calc(var(--triangle-offset) - (var(--triangle-size) / 2)); - top: calc(var(--triangle-size) / 2 * -1 - 1px); -} - -.popover-container.position-above .popover-frame::before { - transform: rotate(-135deg); - top: auto; - bottom: calc(var(--triangle-size) / 2 * -1 - 1px); -} - -.popover-container.position-above .popover-frame { - --shadow-properties: 0 10px 20px -10px; -} - -@keyframes popoverFrameEntrance { - from { - opacity: 0; - transform: translateY(var(--entrance-direction)); - } -} - -.summary { - width: 100%; - cursor: pointer; - word-spacing: -0.18em; - user-select: none; - list-style: none; - position: relative; - display: flex; - z-index: 1; -} - -.summary::-webkit-details-marker { - display: none; -} - -.details[open] .summary { - margin-bottom: .8rem; -} - -.summary::before { - content: ""; - position: absolute; - inset: -.3rem -.8rem; - border-radius: var(--border-radius); - background-color: var(--color-widget-background-highlight); - opacity: 0; - transition: opacity 0.2s; - z-index: -1; -} - -.details[open] .summary::before, .summary:hover::before { - opacity: 1; -} - -.details:not([open]) .list-with-transition { - display: none; -} - -.summary::after { - content: "◀" / ""; - font-size: 1.2em; - position: absolute; - top: 0; - bottom: 0; - line-height: 1.3em; - right: 0; - transition: rotate .5s cubic-bezier(0.22, 1, 0.36, 1); -} - -details[open] .summary::after { - rotate: -90deg; -} - -.content-bounds { - max-width: 1600px; - width: 100%; - margin-inline: auto; - padding: 0 var(--content-bounds-padding); -} - -.page-width-wide .content-bounds { - max-width: 1920px; -} - -.page-width-slim .content-bounds { - max-width: 1100px; -} - -.page-center-vertically .page { - display: flex; - justify-content: center; - flex-direction: column; -} - -/* TODO: refactor, otherwise I hope I never have to change dynamic columns again */ -.dynamic-columns { - --list-half-gap: 0.5rem; - gap: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding); - display: grid; - grid-template-columns: repeat(var(--columns-per-row), 1fr); -} - -.dynamic-columns > * { - padding-left: var(--widget-content-horizontal-padding); - border-left: 1px solid var(--color-separator); - min-width: 0; -} - -.dynamic-columns > *:first-child { - padding-top: 0; - border-top: none; - border-left: none; -} - -.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } -.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } -.dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } -.dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } -.dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; } - -@container widget (max-width: 599px) { - .dynamic-columns { gap: 0; } - .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } - .dynamic-columns > * { - border-left: none; - padding-left: 0; - } - .dynamic-columns > *:not(:first-child) { - margin-top: calc(var(--list-half-gap) * 2); - } - .dynamic-columns.list-with-separator > *:not(:first-child) { - margin-top: var(--list-half-gap); - border-top: 1px solid var(--color-separator); - padding-top: var(--list-half-gap); - } -} -@container widget (min-width: 600px) and (max-width: 849px) { - .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } - .dynamic-columns > :nth-child(2n-1) { - border-left: none; - padding-left: 0; - } -} -@container widget (min-width: 850px) and (max-width: 1249px) { - .dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } - .dynamic-columns > :nth-child(3n+1) { - border-left: none; - padding-left: 0; - } -} -@container widget (min-width: 1250px) and (max-width: 1499px) { - .dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } - .dynamic-columns > :nth-child(4n+1) { - border-left: none; - padding-left: 0; - } -} -@container widget (min-width: 1500px) { - .dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; } - .dynamic-columns > :nth-child(5n+1) { - border-left: none; - padding-left: 0; - } -} - -.cards-vertical { - flex-direction: column; -} - -.cards-horizontal { - --cards-per-row: 6.5; -} - -.cards-horizontal, .cards-vertical { - --cards-gap: calc(var(--widget-content-vertical-padding) * 0.7); - display: flex; - gap: var(--cards-gap); -} - -.card { - display: flex; - flex-direction: column; -} - -.cards-horizontal .card { - flex-shrink: 0; - width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row)); -} - -.cards-grid .card { - min-width: 0; -} - -.cards-horizontal { - overflow-x: auto; - scrollbar-width: thin; - padding-bottom: 1rem; -} - -.cards-grid { - --cards-per-row: 6; - display: grid; - grid-template-columns: repeat(var(--cards-per-row), 1fr); - gap: calc(var(--widget-content-vertical-padding) * 0.7); -} - -@container widget (max-width: 1300px) { .cards-horizontal { --cards-per-row: 5.5; } } -@container widget (max-width: 1100px) { .cards-horizontal { --cards-per-row: 4.5; } } -@container widget (max-width: 850px) { .cards-horizontal { --cards-per-row: 3.5; } } -@container widget (max-width: 750px) { .cards-horizontal { --cards-per-row: 3.5; } } -@container widget (max-width: 650px) { .cards-horizontal { --cards-per-row: 2.5; } } -@container widget (max-width: 450px) { .cards-horizontal { --cards-per-row: 2.3; } } - -@container widget (max-width: 1300px) { .cards-grid { --cards-per-row: 5; } } -@container widget (max-width: 1100px) { .cards-grid { --cards-per-row: 4; } } -@container widget (max-width: 850px) { .cards-grid { --cards-per-row: 3; } } -@container widget (max-width: 750px) { .cards-grid { --cards-per-row: 3; } } -@container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } } - -.widget-small-content-bounds { - max-width: 350px; - margin: 0 auto; -} - -.widget-error-header { - display: flex; - align-items: center; - justify-content: space-between; - position: relative; - margin-bottom: 1.8rem; - z-index: 1; -} - -.widget-error-header::before { - content: ''; - position: absolute; - inset: calc(0rem - (var(--widget-content-vertical-padding) / 2)) calc(0rem - (var(--widget-content-horizontal-padding) / 2)); - background: var(--color-negative); - opacity: 0.05; - border-radius: var(--border-radius); - z-index: -1; -} - -.widget-error-icon { - width: 2.4rem; - height: 2.4rem; - flex-shrink: 0; - stroke: var(--color-negative); - opacity: 0.6; -} - -.widget-content { - container-type: inline-size; - container-name: widget; -} - -.widget-content:not(.widget-content-frameless) { - padding: var(--widget-content-padding); -} - -.widget-content:not(.widget-content-frameless), .widget-content-frame { - background: var(--color-widget-background); - border-radius: var(--border-radius); - border: 1px solid var(--color-widget-content-border); - box-shadow: 0px 3px 0px 0px hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl)) - 0.5%)); -} - -.padding-widget { - padding: var(--widget-content-padding); -} - -.margin-bottom-widget { - margin-bottom: var(--widget-content-vertical-padding); -} - -.padding-block-widget { - padding-block: var(--widget-content-vertical-padding); -} - -.padding-inline-widget { - padding-inline: var(--widget-content-horizontal-padding); -} - -.widget-header { - padding: 0 calc(var(--widget-content-horizontal-padding) + 1px); - font-size: var(--font-size-h4); - margin-bottom: 0.9rem; - display: flex; - align-items: center; - gap: 1rem; -} - -.widget-beta-icon { - width: 1.6rem; - height: 1.6rem; - flex-shrink: 0; - transition: transform .45s, opacity .45s, stroke .45s; - opacity: 0.7; -} - -.widget-beta-icon:hover, .widget-header .popover-active > .widget-beta-icon { - fill: var(--color-text-highlight); - transform: translateY(-10%) scale(1.3); - opacity: 1; -} - -.widget + .widget { - margin-top: var(--widget-gap); -} - -.list-horizontal-text { - display: flex; - list-style: none; - flex-wrap: wrap; - align-items: center; -} - -.list-horizontal-text > *:not(:last-child)::after { - content: '•' / ""; - color: var(--color-text-subdue); - margin: 0 0.4rem; - position: relative; - top: 0.1rem; -} - -.header-container { - margin-top: calc(var(--widget-gap) / 2); - --header-height: 45px; - --header-items-gap: 2.5rem; -} - -.header { - display: flex; - height: var(--header-height); - gap: var(--header-items-gap); -} - -.logo { - height: 100%; - line-height: var(--header-height); - font-size: 2rem; - color: var(--color-text-highlight); - border-right: 1px solid var(--color-widget-content-border); - padding-right: var(--widget-content-horizontal-padding); -} - -.logo:has(img) { - display: flex; - align-items: center; -} - -.logo img { - max-height: 2.7rem; -} - -.nav { - height: 100%; - gap: var(--header-items-gap); -} - -.nav .nav-item { - line-height: var(--header-height); -} - -.footer { - padding-bottom: calc(var(--widget-gap) * 1.5); - padding-top: calc(var(--widget-gap) / 2); - animation: loadingContainerEntrance 200ms backwards; - animation-delay: 150ms; -} - -.mobile-navigation, .mobile-reachability-header { - display: none; -} - -.nav-item { - display: block; - height: 100%; - border-bottom: 2px solid transparent; - transition: color .3s, border-color .3s; - font-size: var(--font-size-h3); - flex-shrink: 0; -} - -.nav-item:not(.nav-item-current):hover { - border-bottom-color: var(--color-text-subdue); - color: var(--color-text-highlight); -} - -.nav-item.nav-item-current { - border-bottom-color: var(--color-primary); - color: var(--color-text-highlight); -} - -.release-source-icon { - width: 16px; - height: 16px; - flex-shrink: 0; - opacity: 0.4; -} - -.market-chart { - margin-left: auto; - width: 6.5rem; - flex-shrink: 0; -} - -.market-chart svg { - width: 100%; -} - -.market-values { - min-width: 8rem; -} - -.carousel-container { - position: relative; -} - -.carousel-container::before, .carousel-container::after { - content: ''; - position: absolute; - width: 2rem; - top: 0; - bottom: 1rem; - z-index: 10; - opacity: 0; - pointer-events: none; - transition-duration: 0.2s; -} - -.carousel-container::before { - left: 0; - background: linear-gradient(to right, var(--color-background), transparent); -} - -.carousel-container::after { - right: 0; - background: linear-gradient(to left, var(--color-background), transparent); -} - -.carousel-container.show-left-cutoff::before, .carousel-container.show-right-cutoff::after { - opacity: 1; -} - -.video-thumbnail { - width: 100%; - aspect-ratio: 16 / 8.9; - object-fit: cover; - border-radius: var(--border-radius) var(--border-radius) 0 0; -} - -.video-horizontal-list-thumbnail { - height: 4rem; - aspect-ratio: 16 / 8.9; - object-fit: cover; - border-radius: var(--border-radius); -} - -.search-icon { - width: 2.3rem; -} - -.search-icon-container { - position: relative; - flex-shrink: 0; -} - -/* gives a wider hit area for the 3 people that will notice the animation : ) */ -.search-icon-container::before { - content: ''; - position: absolute; - inset: -1rem; -} - -.search-icon-container:hover > .search-icon { - animation: searchIconHover 2.9s forwards; -} - -@keyframes searchIconHover { - 0%, 39% { translate: 0 0; } - 20% { scale: 1.3; } - 40% { scale: 1; } - 50% { translate: -30% 30%; } - 70% { translate: 30% -30%; } - 90% { translate: -30% -30%; } - 100% { translate: 0 0; } -} - -.search { - transition: border-color .2s; - position: relative; -} - -.search:hover { - border-color: var(--color-text-subdue); -} - -.search:focus-within { - border-color: var(--color-primary); -} - -.search-input { - border: 0; - background: none; - width: 100%; - height: 6rem; - font: inherit; - outline: none; - color: var(--color-text-highlight); -} - -.search-input::placeholder { - color: var(--color-text-base-muted); - opacity: 1; -} - -.search-bangs { display: none; } - -.search-bang { - border-radius: calc(var(--border-radius) * 2); - background: var(--color-widget-background-highlight); - padding: 0.3rem 1rem; - flex-shrink: 0; - font-size: var(--font-size-h5); - animation: searchBangsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; -} - -@keyframes searchBangsEntrance { - 0% { - opacity: 0; - transform: translateX(-10px); - } -} - -.search-bang:empty { - display: none; -} - -.forum-post-list-thumbnail { - flex-shrink: 0; - width: 6rem; - height: 4.1rem; - border-radius: var(--border-radius); - object-fit: cover; - border: 1px solid var(--color-separator); - margin-top: 0.1rem; -} - -.forum-post-tags-container { - transform: translateY(-0.15rem); -} - -@container widget (max-width: 550px) { - .forum-post-autohide { - display: none; - } -} - -.bookmarks-group { - --bookmarks-group-color: var(--color-primary); -} - -.bookmarks-group-title { - color: var(--bookmarks-group-color); -} - -.bookmarks-group .bookmarks-link::after { - color: var(--bookmarks-group-color); -} - -.bookmarks-icon-container { - margin-block: 0.1rem; - background-color: var(--color-widget-background-highlight); - border-radius: var(--border-radius); - padding: 0.5rem; - opacity: 0.7; - flex-shrink: 0; -} - -.bookmarks-icon { - width: 20px; - height: 20px; - opacity: 0.8; -} - -:root:not(.light-scheme) .flat-icon { - filter: invert(1); -} - -.old-calendar-day { - width: calc(100% / 7); - text-align: center; - padding: 0.6rem 0; -} - -.old-calendar-day-today { - border-radius: var(--border-radius); - background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) (var(--bgl)) + 6%))); - color: var(--color-text-highlight); -} - -.calendar-dates { - text-align: center; - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 2px; -} - -.calendar-date { - padding: 0.4rem 0; - color: var(--color-text-base); - position: relative; - border-radius: var(--border-radius); - background: none; - border: none; - font: inherit; -} - -.calendar-current-date { - border-radius: var(--border-radius); - background-color: var(--color-popover-border); - color: var(--color-text-highlight); -} - -.calendar-spillover-date { - color: var(--color-text-subdue); -} - -.calendar-header-button { - position: relative; - cursor: pointer; - width: 2rem; - height: 2rem; - z-index: 1; - background: none; - border: none; -} - -.calendar-header-button::before { - content: ''; - position: absolute; - inset: -0.2rem; - border-radius: var(--border-radius); - background-color: var(--color-text-subdue); - opacity: 0; - transition: opacity 0.2s; - z-index: -1; -} - -.calendar-header-button:hover::before { - opacity: 0.4; -} - -.calendar-undo-button { - display: inline-block; - vertical-align: text-top; - width: 2rem; - height: 2rem; - margin-left: 0.7rem; -} - -.dns-stats-totals { - transition: opacity .3s; - transition-delay: 50ms; -} - -.dns-stats:has(.dns-stats-graph .popover-active) .dns-stats-totals { - opacity: 0.1; - transition-delay: 0s; -} - -.dns-stats-graph { - --graph-height: 70px; - height: var(--graph-height); - position: relative; - margin-bottom: 2.5rem; -} - -.dns-stats-graph-gridlines-container { - position: absolute; - inset: 0; -} - -.dns-stats-graph-gridlines { - height: 100%; - width: 100%; -} - -.dns-stats-graph-columns { - display: flex; - height: 100%; -} - -.dns-stats-graph-column { - display: flex; - justify-content: flex-end; - align-items: center; - flex-direction: column; - width: calc(100% / 8); - position: relative; -} - -.dns-stats-graph-column::before { - content: ''; - position: absolute; - inset: 1px 0; - opacity: 0; - background: var(--color-text-base); - transition: opacity .2s; -} - -.dns-stats-graph-column:hover::before { - opacity: 0.05; -} - -.dns-stats-graph-bar { - width: 14px; - height: calc((var(--bar-height) / 100) * var(--graph-height)); - border: 1px solid var(--color-progress-border); - border-radius: var(--border-radius) var(--border-radius) 0 0; - display: flex; - background: var(--color-widget-background); - padding: 2px 2px 0 2px; - flex-direction: column; - gap: 2px; - transition: border-color .2s; - min-height: 10px; -} - -.dns-stats-graph-column.popover-active .dns-stats-graph-bar { - border-color: var(--color-text-subdue); - border-bottom-color: var(--color-progress-border); -} - -.dns-stats-graph-bar > * { - border-radius: 2px; - background: var(--color-progress-value); - min-height: 1px; -} - -.dns-stats-graph-bar > .queries { - flex-grow: 1; -} - -.dns-stats-graph-bar > *:last-child { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - -.dns-stats-graph-bar > .blocked { - background-color: var(--color-negative); - flex-basis: calc(var(--percent) - 1px); -} - -.dns-stats-graph-column:nth-child(even) .dns-stats-graph-time { - opacity: 1; - transform: translateY(0); -} - -.dns-stats-graph-time, .dns-stats-graph-columns:hover .dns-stats-graph-time { - position: absolute; - font-size: var(--font-size-h6); - inset-inline: 0; - text-align: center; - height: 2.5rem; - line-height: 2.5rem; - top: 100%; - user-select: none; - opacity: 0; - transform: translateY(-0.5rem); - transition: opacity .2s, transform .2s; -} - -.dns-stats-graph-column:hover .dns-stats-graph-time { - opacity: 1; - transform: translateY(0); -} - -.dns-stats-graph-columns:hover .dns-stats-graph-column:not(:hover) .dns-stats-graph-time { - opacity: 0; -} - -.weather-column { - position: relative; - display: flex; - align-items: center; - justify-content: end; - flex-direction: column; - width: calc(100% / 12); - padding-top: 3px; -} - -.weather-column-value, .weather-columns:hover .weather-column-value { - font-size: 13px; - color: var(--color-text-highlight); - letter-spacing: -0.1rem; - margin-right: 0.1rem; - position: relative; - margin-bottom: 0.3rem; - opacity: 0; - transform: translateY(0.5rem); - transition: opacity .2s, transform .2s; - user-select: none; -} - -.weather-column-current .weather-column-value, .weather-column:hover .weather-column-value { - opacity: 1; - transform: translateY(0); -} - -.weather-column-value::after { - position: absolute; - content: '°'; - left: 100%; - color: var(--color-text-subdue); -} - -.weather-column-value.weather-column-value-negative::before { - position: absolute; - content: '-'; - right: 100%; -} - -.weather-bar, .weather-columns:hover .weather-bar { - height: calc(20px + var(--weather-bar-height) * 40px); - width: 6px; - background-color: hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 18%))); - border: 1px solid hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 24%))); - border-bottom: 0; - border-radius: 6px 6px 0 0; - mask-image: linear-gradient(0deg, transparent 0, #000 10px); - -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 10px); - transition: background-color .2s, border-color .2s, width .2s; -} - -.weather-column-current .weather-bar, .weather-column:hover .weather-bar { - width: 10px; - background-color: hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 40%))); - border: 1px solid hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 50%))); -} - -.weather-column-rain { - position: absolute; - inset: 0; - bottom: 20%; - overflow: hidden; - mask-image: linear-gradient(0deg, transparent 40%, #000); - -webkit-mask-image: linear-gradient(0deg, transparent 40%, #000); -} - -.weather-column-rain::before { - content: ''; - position: absolute; - /* TODO: figure out a way to make it look continuous between columns, right now - depending on the width of the page the rain inside two columns next to each other - can overlap and look bad */ - background: radial-gradient(circle at 4px 4px, hsl(200, 90%, 70%, 0.4) 1px, transparent 0); - background-size: 8px 8px; - transform: rotate(45deg) translate(-50%, 25%); - height: 130%; - aspect-ratio: 1; - left: 55%; -} - -.weather-column:nth-child(3) .weather-column-time, -.weather-column:nth-child(7) .weather-column-time, -.weather-column:nth-child(11) .weather-column-time { - opacity: 1; - transform: translateY(0); -} - -.weather-column-time, .weather-columns:hover .weather-column-time { - margin-top: 0.3rem; - font-size: var(--font-size-h6); - opacity: 0; - transform: translateY(-0.5rem); - transition: opacity .2s, transform .2s; - user-select: none; -} - -.weather-column:hover .weather-column-time { - opacity: 1; - transform: translateY(0); -} - -.weather-column-daylight { - position: absolute; - inset: 0; - background: linear-gradient(0deg, transparent 30px, hsl(50, 50%, 30%, 0.2)); -} - -.weather-column-daylight-sunrise { - border-radius: 20px 0 0 0; -} - -.weather-column-daylight-sunset { - border-radius: 0 20px 0 0; -} - -.location-icon { - width: 0.8em; - height: 0.8em; - border-radius: 0 50% 50% 50%; - background-color: currentColor; - transform: rotate(225deg) translate(.1em, .1em); - position: relative; - flex-shrink: 0; -} - -.location-icon::after { - content: ''; - position: absolute; - z-index: 2; - width: .4em; - height: .4em; - border-radius: 50%; - background-color: var(--color-widget-background); - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.clock-time { - min-width: 8ch; -} - -.clock-time span { - color: var(--color-text-highlight); -} - -.monitor-site-icon { - display: block; - opacity: 0.8; - filter: grayscale(0.4); - object-fit: contain; - aspect-ratio: 1 / 1; - width: 3.2rem; - position: relative; - top: -0.1rem; - transition: filter 0.3s, opacity 0.3s; -} - -.monitor-site-icon.flat-icon { - opacity: 0.7; -} - -.monitor-site:hover .monitor-site-icon { - opacity: 1; -} - -.monitor-site:hover .monitor-site-icon:not(.flat-icon) { - filter: grayscale(0); -} - -.monitor-site-status-icon { - flex-shrink: 0; - margin-left: auto; - width: 2rem; - height: 2rem; -} - -.monitor-site-status-icon-compact { - width: 1.8rem; - height: 1.8rem; - flex-shrink: 0; -} - -.docker-container-icon { - display: block; - filter: grayscale(0.4); - object-fit: contain; - aspect-ratio: 1 / 1; - width: 2.7rem; - opacity: 0.8; - transition: filter 0.3s, opacity 0.3s; -} - -.docker-container-icon.flat-icon { - opacity: 0.7; -} - -.docker-container:hover .docker-container-icon { - opacity: 1; -} - -.docker-container:hover .docker-container-icon:not(.flat-icon) { - filter: grayscale(0); -} - -.docker-container-status-icon { - width: 2rem; - height: 2rem; -} - -.widget-type-server-info { - position: relative; -} - -.server + .server { - margin-top: 3rem; -} - -.server { - gap: 1rem; - display: flex; - flex-direction: column; -} - -.server-info { - align-items: center; - display: flex; - justify-content: space-between; - gap: 1.5rem; - flex-shrink: 1; - min-width: 0; -} - -.server-details { - min-width: 0; -} - -.server-icon { - height: 3rem; - width: 3rem; -} - -.server-spicy-cpu-icon { - height: 1em; - align-self: center; - margin-left: 0.4em; - margin-bottom: 0.2rem; -} - -.server-stats { - display: flex; - gap: 1.5rem; - margin-top: 0.5rem; -} - -.server-stat-unavailable { - opacity: 0.5; -} - -.progress-bar { - border: 1px solid var(--color-progress-border); - border-radius: var(--border-radius); - display: flex; - flex-direction: column; - gap: 2px; - padding: 2px; - height: 1.5rem; - margin-inline: -3px; /* naughty, but oh so beautiful */ -} - -.progress-bar-combined { - height: 3rem; -} - -.popover-active > .progress-bar { - transition: border-color .3s; - border-color: var(--color-text-subdue); -} - -.progress-value { - --half-border-radius: calc(var(--border-radius) / 2); - border-radius: 0 var(--half-border-radius) var(--half-border-radius) 0; - background: var(--color-progress-value); - width: calc(var(--percent) * 1%); - min-width: 1px; - flex: 1; -} - -.progress-value:first-child { - border-top-left-radius: var(--half-border-radius); -} - -.progress-value:last-child { - border-bottom-left-radius: var(--half-border-radius); -} - -.progress-value-notice { - background: linear-gradient(to right, var(--color-progress-value) 65%, var(--color-negative)); -} - -.value-separator { - min-width: 2rem; - margin-inline: 0.8rem; - flex: 1; - height: calc(1em * 1.1); - border-bottom: 1px dotted var(--color-text-subdue); -} - -@container widget (min-width: 650px) { - .server { - gap: 2rem; - flex-direction: row; - align-items: center; - } - - .server + .server { - margin-top: 1rem; - } - - .server-info { - flex-direction: row-reverse; - justify-content: unset; - margin-right: auto; - z-index: 1; - } - - .server-stats { - flex-direction: row; - justify-content: right; - min-width: 450px; - margin-top: 0; - gap: 2rem; - padding-bottom: 0.8rem; - z-index: 1; - } - - .server-stats > * { - max-width: 200px; - } -} - -.thumbnail { - filter: grayscale(0.2) contrast(0.9); - opacity: 0.8; - transition: filter 0.2s, opacity .2s; -} - -.thumbnail-container { - flex-shrink: 0; - border: 1px solid var(--color-separator); - border-radius: var(--border-radius); -} - -.thumbnail-container > * { - border-radius: var(--border-radius); - object-fit: cover; -} - -.thumbnail-parent:hover .thumbnail { - opacity: 1; - filter: none; -} - -.rss-card-image { - height: var(--rss-thumbnail-height, 10rem); - object-fit: cover; - border-radius: var(--border-radius) var(--border-radius) 0 0; -} - -.rss-card-2 { - position: relative; - height: var(--rss-card-height, 27rem); - overflow: hidden; -} - -.rss-card-2::before { - content: ''; - position: absolute; - inset: 0; - pointer-events: none; - background-image: linear-gradient( - 0deg, - var(--color-widget-background), - hsla(var(--color-widget-background-hsl-values), 0.8) 6rem, transparent 14rem - ); - z-index: 2; -} - -.rss-card-2-image { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; - /* +1px is required to fix some weird graphical bug where the image overflows on the bottom in firefox */ - border-radius: calc(var(--border-radius) + 1px); - opacity: 0.9; - z-index: 1; -} - -.rss-card-2-content { - position: absolute; - inset-inline: 0; - bottom: var(--widget-content-vertical-padding); - z-index: 3; -} - -.rss-detailed-description { - max-width: 55rem; - color: var(--color-text-base-muted); -} - -.rss-detailed-thumbnail { - margin-top: 0.3rem; -} - -.rss-detailed-thumbnail > * { - aspect-ratio: 3 / 2; - height: 8.7rem; -} - -.twitch-category-thumbnail { - width: 5rem; - aspect-ratio: 3 / 4; - border-radius: var(--border-radius); -} - -.twitch-channel-avatar { - aspect-ratio: 1; - border-radius: 50%; -} - -.twitch-channel-avatar-container { - width: 4.4rem; - height: 4.4rem; - border: 2px solid var(--color-text-subdue); - padding: 2px; - border-radius: 50%; - position: relative; - flex-shrink: 0; -} - -.twitch-channel-live .twitch-channel-avatar-container { - border: 2px solid var(--color-positive); - margin-bottom: 1rem; -} - -.twitch-channel-live .twitch-channel-avatar-container::after { - content: 'LIVE'; - position: absolute; - background: var(--color-positive); - color: var(--color-widget-background); - font-size: var(--font-size-h6); - left: 50%; - bottom: -35%; - border-radius: var(--border-radius); - padding-inline: 0.3rem; - transform: translate(-50%); - border: 2px solid var(--color-widget-background); -} - -.twitch-stream-preview { - max-width: 100%; - width: 400px; - aspect-ratio: 16 / 9; - border-radius: var(--border-radius); - object-fit: cover; -} - -.reddit-card-thumbnail { - width: 100%; - height: 100%; - object-fit: cover; - object-position: 0% 20%; - opacity: 0.15; - filter: blur(1px); -} - -.reddit-card-thumbnail-container { - position: absolute; - inset: 0; - overflow: hidden; - border-radius: var(--border-radius); -} - -.reddit-card-thumbnail-container::after { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(0deg, var(--color-widget-background) 10%, transparent); -} - -@media (max-width: 1190px) { - .header-container { - display: none; - } - - .page-column-small .size-title-dynamic { - font-size: var(--font-size-h3); - } - - .page-column-small { - width: 100%; - flex-shrink: 1; - } - - .page-column { - display: none; - animation: columnEntrance .0s cubic-bezier(0.25, 1, 0.5, 1) backwards; - } - - .page-columns-transitioned .page-column { - animation-duration: .3s; - } - - @keyframes columnEntrance { - from { - opacity: 0; - transform: scaleX(0.95); - } - } - - .mobile-navigation-offset { - height: var(--mobile-navigation-height); - flex-shrink: 0; - } - - .mobile-navigation { - display: block; - position: fixed; - bottom: 0; - transform: translateY(calc(100% - var(--mobile-navigation-height))); - left: var(--content-bounds-padding); - right: var(--content-bounds-padding); - z-index: 11; - background-color: var(--color-widget-background); - border: 1px solid var(--color-widget-content-border); - border-bottom: 0; - border-radius: var(--border-radius) var(--border-radius) 0 0; - transition: transform .3s; - } - - .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .hamburger-icon { - --spacing: 7px; - color: var(--color-primary); - height: 2px; - } - - .mobile-navigation:has(.mobile-navigation-page-links-input:checked) { - transform: translateY(0); - } - - .mobile-navigation-page-links { - border-top: 1px solid var(--color-widget-content-border); - padding: 15px var(--content-bounds-padding); - display: flex; - align-items: center; - overflow-x: auto; - scrollbar-width: thin; - gap: 2.5rem; - } - - .mobile-navigation-icons { - display: flex; - justify-content: space-around; - align-items: center; - } - - body:has(.mobile-navigation-input[value="0"]:checked) .page-columns > :nth-child(1), - body:has(.mobile-navigation-input[value="1"]:checked) .page-columns > :nth-child(2), - body:has(.mobile-navigation-input[value="2"]:checked) .page-columns > :nth-child(3) { - display: block; - } - - .mobile-navigation-label { - display: flex; - flex: 1; - max-width: 50px; - height: var(--mobile-navigation-height); - justify-content: center; - align-items: center; - cursor: pointer; - font-size: 15px; - line-height: var(--mobile-navigation-height); - } - - .mobile-navigation-pill { - display: block; - background: var(--color-text-base); - height: 10px; - width: 10px; - border-radius: 10px; - transition: width .3s, background-color .3s; - } - - .mobile-navigation-label:hover > .mobile-navigation-pill { - background-color: var(--color-text-highlight); - } - - .mobile-navigation-label:hover { - color: var(--color-text-highlight); - } - - .mobile-navigation-input:checked + .mobile-navigation-pill { - background: var(--color-primary); - width: 30px; - } - - .mobile-navigation-input, .mobile-navigation-page-links-input { - display: none; - } - - .hamburger-icon { - --spacing: 4px; - width: 1em; - height: 1px; - background-color: currentColor; - transition: color .3s, box-shadow .3s; - box-shadow: 0 calc(var(--spacing) * -1) 0 0 currentColor, 0 var(--spacing) 0 0 currentColor; - } - - .expand-toggle-button.container-expanded { - bottom: var(--mobile-navigation-height); - } - - .cards-grid + .expand-toggle-button.container-expanded { - /* hides content that peeks through the rounded borders of the mobile navigation */ - box-shadow: 0 var(--border-radius) 0 0 var(--color-background); - } - - .weather-column-rain::before { - background-size: 7px 7px; - } - - .ios .search-input { - /* so that iOS Safari does not zoom the page when the input is focused */ - font-size: 16px; - } -} - -@media (max-width: 1190px) and (display-mode: standalone) { - :root { - --safe-area-inset-bottom: env(safe-area-inset-bottom, 0); - } - - .ios .body-content { - height: 100dvh; - } - - .expand-toggle-button.container-expanded { - bottom: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom)); - } - - .mobile-navigation { - transform: translateY(calc(100% - var(--mobile-navigation-height) - var(--safe-area-inset-bottom))); - padding-bottom: var(--safe-area-inset-bottom); - } - - .mobile-navigation-icons { - padding-bottom: var(--safe-area-inset-bottom); - transition: padding-bottom .3s; - } - - .mobile-navigation-offset { - height: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom)); - } - - .mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) { - padding-bottom: 0; - } -} - -@media (display-mode: standalone) { - body { - padding-top: env(safe-area-inset-top, 0); - } -} - -@media (max-width: 550px) { - :root { - font-size: 9.4px; - --widget-gap: 15px; - --widget-content-vertical-padding: 10px; - --widget-content-horizontal-padding: 10px; - --content-bounds-padding: 10px; - } - - .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } - - .row-reverse-on-mobile { - flex-direction: row-reverse; - } - - .hide-on-mobile, .thumbnail-container:has(> .hide-on-mobile) { - display: none - } - - .mobile-reachability-header { - display: block; - font-size: 3rem; - padding: 10vh 1rem; - text-align: center; - color: var(--color-text-highlight); - animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; - } - - .rss-detailed-thumbnail > * { - height: 6rem; - } - - .rss-detailed-description { - line-clamp: 3; - -webkit-line-clamp: 3; - } -} - -.size-h1 { font-size: var(--font-size-h1); } -.size-h2 { font-size: var(--font-size-h2); } -.size-h3 { font-size: var(--font-size-h3); } -.size-h4 { font-size: var(--font-size-h4); } -.size-base { font-size: var(--font-size-base); } -.size-h5 { font-size: var(--font-size-h5); } -.size-h6 { font-size: var(--font-size-h6); } - -.color-highlight { color: var(--color-text-highlight); } -.color-paragraph { color: var(--color-text-paragraph); } -.color-base { color: var(--color-text-base); } -.color-subdue { color: var(--color-text-subdue); } -.color-negative { color: var(--color-negative); } -.color-positive { color: var(--color-positive); } -.color-primary { color: var(--color-primary); } - -.cursor-help { cursor: help; } -.break-all { word-break: break-all; } -.text-left { text-align: left; } -.text-right { text-align: right; } -.text-center { text-align: center; } -.text-elevate { margin-top: -0.2em; } -.text-compact { word-spacing: -0.18em; } -.text-very-compact { word-spacing: -0.35em; } -.rtl { direction: rtl; } -.shrink { flex-shrink: 1; } -.shrink-0 { flex-shrink: 0; } -.min-width-0 { min-width: 0; } -.max-width-100 { max-width: 100%; } -.block { display: block; } -.inline-block { display: inline-block; } -.overflow-hidden { overflow: hidden; } -.relative { position: relative; } -.flex { display: flex; } -.flex-1 { flex: 1; } -.flex-wrap { flex-wrap: wrap; } -.flex-nowrap { flex-wrap: nowrap; } -.justify-between { justify-content: space-between; } -.justify-stretch { justify-content: stretch; } -.justify-evenly { justify-content: space-evenly; } -.justify-center { justify-content: center; } -.justify-end { justify-content: end; } -.uppercase { text-transform: uppercase; } -.grow { flex-grow: 1; } -.flex-column { flex-direction: column; } -.items-center { align-items: center; } -.items-start { align-items: start; } -.items-end { align-items: end; } -.gap-5 { gap: 0.5rem; } -.gap-7 { gap: 0.7rem; } -.gap-10 { gap: 1rem; } -.gap-12 { gap: 1.2rem; } -.gap-15 { gap: 1.5rem; } -.gap-20 { gap: 2rem; } -.gap-25 { gap: 2.5rem; } -.gap-35 { gap: 3.5rem; } -.gap-45 { gap: 4.5rem; } -.gap-55 { gap: 5.5rem; } -.margin-left-auto { margin-left: auto; } -.margin-top-3 { margin-top: 0.3rem; } -.margin-top-5 { margin-top: 0.5rem; } -.margin-top-7 { margin-top: 0.7rem; } -.margin-top-10 { margin-top: 1rem; } -.margin-top-15 { margin-top: 1.5rem; } -.margin-top-20 { margin-top: 2rem; } -.margin-top-25 { margin-top: 2.5rem; } -.margin-top-35 { margin-top: 3.5rem; } -.margin-top-40 { margin-top: 4rem; } -.margin-top-auto { margin-top: auto; } -.margin-block-3 { margin-block: 0.3rem; } -.margin-block-5 { margin-block: 0.5rem; } -.margin-block-7 { margin-block: 0.7rem; } -.margin-block-8 { margin-block: 0.8rem; } -.margin-block-10 { margin-block: 1rem; } -.margin-block-15 { margin-block: 1.5rem; } -.margin-bottom-3 { margin-bottom: 0.3rem; } -.margin-bottom-5 { margin-bottom: 0.5rem; } -.margin-bottom-7 { margin-bottom: 0.7rem; } -.margin-bottom-10 { margin-bottom: 1rem; } -.margin-bottom-15 { margin-bottom: 1.5rem; } -.margin-bottom-auto { margin-bottom: auto; } -.padding-block-5 { padding-block: 0.5rem; } -.scale-half { transform: scale(0.5); } -.list { --list-half-gap: 0rem; } -.list-gap-2 { --list-half-gap: 0.1rem; } -.list-gap-4 { --list-half-gap: 0.2rem; } -.list-gap-8 { --list-half-gap: 0.4rem; } -.list-gap-10 { --list-half-gap: 0.5rem; } -.list-gap-14 { --list-half-gap: 0.7rem; } -.list-gap-20 { --list-half-gap: 1rem; } -.list-gap-24 { --list-half-gap: 1.2rem; } -.list-gap-34 { --list-half-gap: 1.7rem; }