Add common button styling

2024-07-08 01:25:07 +02:00
parent 1888b91afe
commit 3fcb100199
7 changed files with 174 additions and 176 deletions
--- a/src/main/resources/static/buttons.css
+++ b/src/main/resources/static/buttons.css
@@ -0,0 +1,106 @@
+.btn {
+    padding: .5lh 1lh;
+    border: none;
+    border-radius: .5lh;
+
+    --btn-color: var(--fg-color);
+    /* color: var(--text-color); */
+    background-color: var(--btn-color);
+
+    font-weight: bold;
+    font-size: 1rem;
+
+    --transition-duration-short: 50ms;
+    --transition-duration-medium: 100ms;
+    --transition-duration-long: 200ms;
+    --transition-duration-bg-color: var(--transition-duration-medium);
+    --transition-duration-filter: var(--transition-duration-long);
+    --transition-duration-outline: var(--transition-duration-medium);
+    transition:
+        background-color ease-out var(--transition-duration-bg-color),
+        filter ease-out var(--transition-duration-filter),
+        outline ease-in var(--transition-duration-outline);
+
+    --drop-shadow-opacity: .5;
+    --drop-shadow-offset-y: 0;
+    --drop-shadow-blur: .25rem;
+    filter: var(--filter);
+    --filter:
+        brightness(var(--brightness, 1))
+        grayscale(var(--grayscale, 0));
+    cursor: pointer;
+
+    &:not(.flat) {
+        --drop-shadow: drop-shadow(
+            rgba(0, 0, 0, var(--drop-shadow-opacity))
+            0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
+        );
+
+        @supports (color: rgb(from black r g b / 0.5)) {
+            --drop-shadow: drop-shadow(
+                rgba(from var(--bg-color) r g b / var(--drop-shadow-opacity))
+                0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
+            );
+        }
+
+        filter: var(--filter) var(--drop-shadow);
+    }
+
+    &:not(:disabled):not(.flat):hover {
+        background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
+        --drop-shadow-opacity: .8;
+        --drop-shadow-offset-y: .25rem;
+        --drop-shadow-blur: .4rem;
+    }
+
+    &:where(:disabled) {
+        --brightness: .5;
+        --grayscale: .5;
+    }
+
+    &.suggested:not(.destructive) {
+        --btn-color: var(--accent-color);
+    }
+
+    &.destructive:not(.suggested) {
+        --btn-color: #861c1c;
+    }
+
+    &:focus-visible {
+        outline-offset: 2px;
+    }
+
+    &.icon {
+        --text-color: transparent;
+        background: var(--icon-url) no-repeat;
+        background-size: contain;
+        overflow: hidden;
+        width: var(--icon-size, 1rem);
+        height: var(--icon-size, 1rem);
+    }
+
+    &.flat {
+        border-radius: 0;
+        padding: 0;
+        --transition-duration-filter: var(--transition-duration-short);
+
+        &:not(:disabled) {
+            &:hover, &:focus-visible {
+                --brightness: 1.5;
+            }
+
+            &:active {
+                --brightness: 1.75;
+            }
+        }
+    }
+
+    /*
+        This class is just a hint, so this is on a best-effort basis.
+        If it works, it works, if not, then not.
+    */
+    &.full-width {
+        width: -moz-available;
+        width: -webkit-fill-available;
+    }
+}