ignace/fasthue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more colorful

Browse Source
This commit is contained in:
ignace
2026-08-09 22:04:49 +02:00
parent d8631bc63a
commit 901474f461
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/app.css
+9 -1
View File
@@ -5,8 +5,16 @@ body { margin: 0; background: #080a0f; color: #f7f8fc; }
.button-grid { height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 12px; } .button-grid { height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 12px; }
.group-button, .group-button * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .group-button, .group-button * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.group-button { appearance: none; border: 1px solid #252a36; border-radius: 20px; background: linear-gradient(145deg, #1a1e28, #10131b); color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: clamp(1.05rem, 5vw, 1.5rem); font-weight: 650; letter-spacing: -.02em; touch-action: manipulation; transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; } .group-button { appearance: none; border: 1px solid #252a36; border-radius: 20px; background: linear-gradient(145deg, #1a1e28, #10131b); color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: clamp(1.05rem, 5vw, 1.5rem); font-weight: 650; letter-spacing: -.02em; touch-action: manipulation; transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.group-button:nth-child(1) { --on-glow: #ff8b68; }
.group-button:nth-child(2) { --on-glow: #78d69a; }
.group-button:nth-child(3) { --on-glow: #8eb7ff; }
.group-button:nth-child(4) { --on-glow: #d69cf6; }
.group-button:nth-child(5) { --on-glow: #f0c56c; }
.group-button:nth-child(6) { --on-glow: #68d9d2; }
.group-button:nth-child(7) { --on-glow: #fa91b5; }
.group-button:nth-child(8) { --on-glow: #a8d36d; }
.group-button small { color: #8c94a6; font-size: .76rem; font-weight: 600; line-height: 1.2; text-align: center; } .group-button small { color: #8c94a6; font-size: .76rem; font-weight: 600; line-height: 1.2; text-align: center; }
.group-button.is-on { border-color: #3196ff; box-shadow: 0 0 0 2px #1677d8, 0 0 20px #1264ba55; } .group-button.is-on { border-color: var(--on-glow); box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-glow) 75%, transparent), 0 0 22px color-mix(in srgb, var(--on-glow) 30%, transparent); }
.group-button:active { transform: scale(.975); background: #222938; } .group-button:active { transform: scale(.975); background: #222938; }
.group-button:focus-visible { outline: 3px solid #f3f7ff; outline-offset: 3px; } .group-button:focus-visible { outline: 3px solid #f3f7ff; outline-offset: 3px; }
.group-button[disabled] { opacity: .5; } .group-button[disabled] { opacity: .5; }