From 65ab5eefda54bee18fec4de51f2fc2aa613f5952 Mon Sep 17 00:00:00 2001 From: AlexsandrSnytkin Date: Fri, 18 Sep 2026 19:02:56 +0700 Subject: [PATCH] fix(ui): strengthen theme color markers --- ui_server.py | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui_server.py b/ui_server.py index 8570158..c8e3eab 100644 --- a/ui_server.py +++ b/ui_server.py @@ -1412,14 +1412,14 @@ HTML = """ .appearance-group { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ui-border); } .appearance-group-head span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .appearance-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 6px; } - .appearance-options button { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 6px; height: 34px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--appearance-option-accent, var(--ui-border)) 26%, var(--ui-border)); border-radius: 8px; background: color-mix(in srgb, var(--ui-input) 88%, var(--ui-surface)); color: color-mix(in srgb, var(--ui-text) 76%, var(--ui-muted)); font: 10px/1.05 ui-sans-serif, system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; } + .appearance-options button { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 7px; height: 34px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--appearance-option-accent, var(--ui-border)) 26%, var(--ui-border)); border-radius: 8px; background: color-mix(in srgb, var(--ui-input) 88%, var(--ui-surface)); color: color-mix(in srgb, var(--ui-text) 76%, var(--ui-muted)); font: 10px/1.05 ui-sans-serif, system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; } .appearance-options button:hover { color: var(--ui-text); border-color: color-mix(in srgb, var(--ui-accent) 62%, var(--ui-border)); transform: translateY(-1px); } .appearance-options button.is-active { color: var(--ui-text); border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 22%, transparent); } - .appearance-options button.is-active .appearance-swatch { box-shadow: 0 0 0 2px var(--ui-accent), inset 0 0 0 4px var(--appearance-swatch-2, transparent); } + .appearance-options button.is-active .appearance-swatch { box-shadow: 0 0 0 2px var(--ui-accent), 0 0 0 4px color-mix(in srgb, var(--ui-accent) 18%, transparent); } .appearance-options button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .appearance-swatch { width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--appearance-option-accent, var(--ui-text)) 32%, var(--ui-text)); border-radius: 6px; background: linear-gradient(135deg, var(--appearance-option-accent, var(--appearance-swatch)) 0 28%, var(--appearance-swatch) 28% 100%); box-shadow: inset 0 0 0 4px var(--appearance-swatch-2, transparent); } - .accent-options button { grid-template-columns: 14px minmax(0, 1fr); } - .accent-options .appearance-swatch { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--appearance-swatch); box-shadow: 0 0 0 3px color-mix(in srgb, var(--appearance-swatch) 17%, transparent); } + .appearance-swatch { width: 22px; height: 22px; border: 1px solid color-mix(in srgb, var(--appearance-option-accent, var(--ui-text)) 48%, var(--ui-text)); border-radius: 7px; background: linear-gradient(135deg, var(--appearance-option-accent, var(--appearance-swatch)) 0 52%, var(--appearance-swatch) 52% 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--appearance-option-accent, var(--ui-text)) 24%, transparent); } + .accent-options button { grid-template-columns: 18px minmax(0, 1fr); } + .accent-options .appearance-swatch { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--appearance-option-accent, var(--appearance-swatch)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--appearance-option-accent, var(--appearance-swatch)) 24%, transparent); } .appearance-custom { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; color: var(--ui-muted) !important; font-size: 10px !important; } .appearance-custom .accent-custom { width: 42px; height: 25px; padding: 2px; border: 1px solid var(--ui-border) !important; border-radius: 7px; background: var(--ui-input) !important; cursor: pointer; } .appearance-intensity { display: grid !important; gap: 7px !important; padding: 12px 0 10px; color: var(--ui-muted) !important; font-size: 10px !important; }