1 files changed, 64 insertions, 30 deletions

diff --git a/static/input.css b/static/input.css
index 9114514..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;
 }
 
-.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 {
+    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;
+}
+
+.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);
+}
+
+.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);
 }
 
-.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.themed-button-like {
+    --border-size: 0.2rem;
 }
 
 .custom-svg-marker {