Diffstat (limited to 'static/input.css')
| -rw-r--r-- | static/input.css | 211 |
1 files changed, 181 insertions, 30 deletions
diff --git a/static/input.css b/static/input.css index e1ba37d..04d68b7 100644 --- a/static/input.css +++ b/static/input.css @@ -72,6 +72,14 @@ html { background-size: --value([bg-size]), 128px; } +@utility faw-full { + --fa-width: 100%; +} + +@utility faw-* { + --fa-width: calc(--value(integer) * var(--spacing)); +} + body { scrollbar-width: thin; scrollbar-color: var(--color-background-light) var(--color-main-soft); @@ -397,6 +405,10 @@ form.crossable.htmx-request input { border-style: inset; } +.border-outset { + border-style: outset; +} + .bg-sidebar { background-image: var(--squares-and-triangles-background); background-repeat: var(--squares-and-triangles-background-repeat); @@ -496,42 +508,64 @@ form.crossable.htmx-request input { border-radius: 50%; } -.accent-button, -.accent-button.active:active { - --tw-duration: 1500ms; - --tw-ease: var(--ease-in-out); - --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 10%, transparent); - --tw-gradient-position: from 225deg in oklab; - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 10%, transparent); - --tw-gradient-via: transparent; - --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); - background-image: conic-gradient(var(--tw-gradient-stops)); - transition-duration: 1500ms; - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; - transition-timing-function: var(--ease-in-out); +.themed-button::before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient( + 135deg, + var(--color-main-light-hard), + var(--color-main-dark-hard) + ); + opacity: 0.2; + z-index: 10; + content: ""; +} + +.themed-button:active::before { + opacity: 0.4; } -.accent-button:hover, -.accent-button.active:active:hover { - cursor: pointer; - --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 50%, transparent); - --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 50%, transparent); +.themed-button:hover:not(:active)::before { + opacity: 0; +} + +.themed-button { + border-top: var(--border-size) solid var(--color-main-light-hard); + border-left: var(--border-size) solid var(--color-main-light-hard); + border-bottom: var(--border-size) solid var(--color-main-dark-hard); + border-right: var(--border-size) solid var(--color-main-dark-hard); + position: relative; + --border-size: 0.5rem; } -.accent-button.active, -.accent-button:active { - --tw-gradient-from: color-mix(in oklab, var(--color-accent-dark) 30%, transparent); - --tw-gradient-position: from 45deg in oklab; - --tw-gradient-to: color-mix(in oklab, var(--color-accent-dark) 30%, transparent); - --tw-gradient-via: color-mix(in oklab, var(--color-accent-light) 50%, transparent); +.themed-button:active, +.themed-button.active { + border-top: var(--border-size) solid var(--color-main-dark-hard); + border-left: var(--border-size) solid var(--color-main-dark-hard); + border-bottom: var(--border-size) solid var(--color-main-light-hard); + border-right: var(--border-size) solid var(--color-main-light-hard); } -.accent-button.active:hover, -.accent-button:active:hover { - --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 70%, transparent); - --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 70%, transparent); - --tw-gradient-via: color-mix(in oklab, var(--color-accent-dark) 50%, transparent); +.themed-button:active > *, +.themed-button.active > * { + transform: translateY(calc(var(--border-size) / 2)); +} + +.themed-button.themed-button-sidebar { + --border-size: 0.25rem; + background-image: var(--squares-and-triangles-background); + background-repeat: var(--squares-and-triangles-background-repeat); + background-size: calc( + var(--squares-and-triangles-background-width-coef) * 0.9rem + ) + calc(var(--squares-and-triangles-background-height-coef) * 0.9rem); +} + +.themed-button.themed-button-like { + --border-size: 0.2rem; } .custom-svg-marker { @@ -723,6 +757,123 @@ body[data-theme~="ram"] .leaflet-tile { filter: invert(1) hue-rotate(190deg) contrast(1.1) brightness(1.2) !important; } +@media (min-aspect-ratio: 0.8/1) { + .ar-gt-0\.8\:mr-6 { + margin-right: 1.5rem; + } + + .ar-gt-0\.8\:w-fit { + width: fit-content; + } + + .ar-gt-0\.8\:w-\[100dvh\] { + width: 100dvh; + flex-basis: 100dvh; + } + + .ar-gt-0\.8\:min-w-fit { + min-width: fit-content; + } + + .ar-gt-0\.8\:min-w-1\/10 { + min-width: 10%; + } + + .ar-gt-0\.8\:max-w-1\/4 { + max-width: 25%; + } + + .ar-gt-0\.8\:items-center { + align-items: center; + } +} + +@media (max-aspect-ratio: 0.8/1) { + .bg-pattern-body { + background-size: 10dvh; + } + + .ar-lt-0\.8\:grid { + display: grid; + } + + .ar-lt-0\.8\:flex-col { + flex-direction: column; + } + + .ar-lt-0\.8\:flex-row { + flex-direction: row; + } + + .ar-lt-0\.8\:h-\[8dvh\] { + height: 8dvh; + } + + .ar-lt-0\.8\:h-\[10dvh\] { + height: 10dvh; + } + + .ar-lt-0\.8\:h-\[30dvh\] { + height: 30dvh; + } + + .ar-lt-0\.8\:h-\[90dvh\] { + height: 90dvh; + } + + .ar-lt-0\.8\:w-\[8dvh\] { + width: 8dvh; + } + + .ar-lt-0\.8\:w-\[80\%\] { + width: 80%; + } + + .ar-lt-0\.8\:w-\[90dvw\] { + width: 90dvw; + } + + .ar-lt-0\.8\:w-\[100dvw\] { + width: 100dvw; + } + + .ar-lt-0\.8\:max-h-\[30\%\] { + max-height: 30%; + } + + .ar-lt-0\.8\:max-h-\[80\%\] { + max-height: 80%; + } + + .ar-lt-0\.8\:max-h-\[92dvh\] { + max-height: 92dvh; + } + + .ar-lt-0\.8\:text-\[5dvh\] { + font-size: 5dvh; + } + + .ar-lt-0\.8\:hidden { + display: none; + } +} + +@media (min-aspect-ratio: 0.6/1) { + .ar-gt-0\.6\:flex-3\/5 { + flex: 60%; + } + + .ar-gt-0\.6\:flex-2\/5 { + flex: 40%; + } +} + +@media (max-aspect-ratio: 0.6/1) { + .ar-lt-0\.6\:flex-col { + flex-direction: column; + } +} + .home-page-heart { position: absolute; color: var(--color-pink-700); |