YaroslavKartashov
/
MAI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): strengthen theme color markers

Browse Source
main
AlexsandrSnytkin 14 hours ago
parent 6895fb81ff
commit 65ab5eefda
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File

10
ui_server.py
Unescape Escape View File

@ -1412,14 +1412,14 @@ HTML = """<!doctype 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; }

Write Preview
Loading…
Cancel
Save