| -rw-r--r-- | static/input.css | 64 | ||||
| -rw-r--r-- | views/layouts/general-page.html | 4 |
2 files changed, 66 insertions, 2 deletions
diff --git a/static/input.css b/static/input.css index 9114514..64d0588 100644 --- a/static/input.css +++ b/static/input.css @@ -397,6 +397,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 +500,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; diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index fb018e3..3920bdb 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -612,6 +612,7 @@ const themeWheel = document.getElementById("theme-wheel"); const themeButton = document.getElementById("sidebar-theme-button"); const themeIcons = document.querySelectorAll(".theme-icon"); + const themeWheelRadius = convertRemToPixels(6); themeIcons.forEach((icon) => { if (icon.getAttribute("data-theme") == savedTheme) { @@ -640,7 +641,7 @@ const clipPath = createSliceClipPath( startAngle, endAngle, - convertRemToPixels(6), + themeWheelRadius, ); icon.style.clipPath = clipPath; }); @@ -675,7 +676,6 @@ const buttonRect = themeButton.getBoundingClientRect(); const buttonCenterX = buttonRect.left + buttonRect.width / 2; const buttonCenterY = buttonRect.top + buttonRect.height / 2; - const themeWheelRadius = convertRemToPixels(6); const margin = 0; |