1 files changed, 30 insertions, 64 deletions

diff --git a/static/input.css b/static/input.css
index 04d68b7..9114514 100644
--- a/static/input.css
+++ b/static/input.css
@@ -72,14 +72,6 @@ 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);
@@ -405,10 +397,6 @@ 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);
@@ -508,64 +496,42 @@ form.crossable.htmx-request input {
     border-radius: 50%;
 }
 
-.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;
-}
-
-.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,
+.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: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));
+.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.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,
+.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.themed-button-like {
-    --border-size: 0.2rem;
+.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);
 }
 
 .custom-svg-marker {