1 files changed, 72 insertions, 0 deletions
diff --git a/static/input.css b/static/input.css
index 9114514..b9fb166 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,6 +508,66 @@ 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;
+}
+
+.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);
+}
+
+.themed-button.themed-button-like {
+    --border-size: 0.2rem;
+}
+
 .accent-button,
 .accent-button.active:active {
     --tw-duration: 1500ms;