feat: nextstep-like buttons for toolbar

1 files changed, 42 insertions, 0 deletions

diff --git a/static/input.css b/static/input.css
index 8b69162..110e5fd 100644
--- a/static/input.css
+++ b/static/input.css
@@ -410,6 +410,48 @@ form.crossable.htmx-request input {
     border-radius: 50%;
 }
 
+.toolbar-button::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #fff, #000);
+    opacity: 0.2;
+    z-index: 1;
+    content: "";
+}
+
+.toolbar-button:active::before {
+    opacity: 0.4;
+}
+
+.toolbar-button:hover:not(:active)::before {
+    opacity: 0;
+}
+
+.toolbar-button {
+    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);
+    border-top: 0.3rem solid #fff;
+    border-left: 0.3rem solid #fff;
+    border-bottom: 0.3rem solid #000;
+    border-right: 0.3rem solid #000;
+    position: relative;
+}
+
+.toolbar-button:active {
+    border-top: 0.3rem solid #000;
+    border-left: 0.3rem solid #000;
+    border-bottom: 0.3rem solid #fff;
+    border-right: 0.3rem solid #fff;
+}
+
+.toolbar-button:active > * {
+    transform: translateY(0.15rem);
+}
+
 .custom-svg-marker {
     background: transparent;
     border: none;