From c311fba500526cd36cbc56b61dc0b3d528bef125 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lera=20Elvo=C3=A9?= Date: Wed, 3 Jun 2026 11:21:06 +0300 Subject: [PATCH] button v5 --- data/static/css/style.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/data/static/css/style.css b/data/static/css/style.css index b634137..d451628 100644 --- a/data/static/css/style.css +++ b/data/static/css/style.css @@ -92,17 +92,18 @@ button, .linkbutton, input[type="submit"], input[type="file"]::file-selector-but --hover-color: hsl(from var(--main-color) h s calc(l * 1.05)); --active-color: hsl(from var(--main-color) h s calc(l * 0.8)); --disabled-color: hsl(from var(--main-color) h calc(s * 0.5) l); - --bottom-color: hsl(from var(--main-color) h s calc(l * 0.7)); - --top-color: hsl(from var(--main-color) h s 95); + --bottom-color: hsl(from var(--main-color) h s calc(l * 0.8)); + --top-color: hsl(from var(--main-color) h s 90); --top-color2: hsl(from var(--main-color) h s calc(l * 1.1)); --inset-color: #fff7; + --current-color: var(--main-color); /* position: relative; */ /* display: inline-block; */ padding: var(--small-padding) var(--medium-padding); margin: var(--base-padding) 0px; border-radius: var(--border-radius); border: solid var(--border-thickness) var(--border-color); - background: linear-gradient(var(--top-color) 0%, var(--top-color2) 10%, var(--main-color) 12%, var(--main-color) 66%, var(--bottom-color) 100%); + background: linear-gradient(to bottom, var(--top-color), var(--main-color) 50%, var(--bottom-color) 75%); /* box-shadow: inset 0px 2px 5px 3px var(--inset-color); */ /* color: var(--font-color); */ /* HACK: better than contrast-color on critical */ @@ -141,7 +142,8 @@ button, .linkbutton, input[type="submit"], input[type="file"]::file-selector-but } &:hover { - background: linear-gradient(var(--top-color) 0%, var(--top-color2) 10%, var(--hover-color) 12%, var(--hover-color) 80%, var(--bottom-color) 100%); + /*background: linear-gradient(var(--top-color) 0%, var(--top-color2) 10%, var(--hover-color) 12%, var(--hover-color) 80%, var(--bottom-color) 100%);*/ + background: linear-gradient(to bottom, var(--top-color), var(--hover-color) 50%, var(--hover-color) 80%, var(--bottom-color) 100%); } &:is(:active, .active, [aria-selected='true']) {