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

fix(ui): soften light appearance palette

Browse Source
main
AlexsandrSnytkin 15 hours ago
parent 6a26c5f752
commit b9eef1148b
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File

8
ui_server.py
Unescape Escape View File

@ -1380,7 +1380,7 @@ HTML = """<!doctype html>
.appearance-trigger-copy small { min-width: 0; overflow: hidden; color: var(--ui-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .appearance-trigger-copy small { min-width: 0; overflow: hidden; color: var(--ui-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.appearance-trigger-chevron { margin-left: auto; color: var(--ui-muted); font-size: 17px; line-height: 1; transform: translateY(-1px); transition: transform .2s ease, color .2s ease; } .appearance-trigger-chevron { margin-left: auto; color: var(--ui-muted); font-size: 17px; line-height: 1; transform: translateY(-1px); transition: transform .2s ease, color .2s ease; }
.appearance-trigger[aria-expanded="true"] .appearance-trigger-chevron { color: var(--ui-accent); transform: rotate(180deg) translateY(1px); } .appearance-trigger[aria-expanded="true"] .appearance-trigger-chevron { color: var(--ui-accent); transform: rotate(180deg) translateY(1px); }
.appearance-panel { position: absolute; top: calc(100% + 9px); right: 0; width: min(390px, calc(100vw - 20px)); max-height: min(78vh, 680px); overflow: auto; padding: 13px; border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, var(--ui-border)); border-radius: 16px; background: color-mix(in srgb, var(--ui-surface) 97%, var(--ui-input)); box-shadow: 0 18px 46px rgba(0, 0, 0, .24), 0 0 0 1px color-mix(in srgb, var(--ui-accent) 7%, transparent); color: var(--ui-text); animation: appearance-in .2s ease both; } .appearance-panel { position: absolute; top: calc(100% + 9px); right: 0; width: min(390px, calc(100vw - 20px)); max-height: min(78vh, 680px); overflow: auto; padding: 13px; border: 1px solid color-mix(in srgb, var(--ui-accent) 18%, var(--ui-border)); border-radius: 16px; background: color-mix(in srgb, var(--ui-surface) 84%, var(--ui-bg)); box-shadow: 0 14px 32px rgba(0, 0, 0, .17); color: var(--ui-text); animation: appearance-in .2s ease both; }
.appearance-panel[hidden] { display: none !important; } .appearance-panel[hidden] { display: none !important; }
.appearance-head, .appearance-group-head, .appearance-intensity > span, .appearance-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .appearance-head, .appearance-group-head, .appearance-intensity > span, .appearance-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.appearance-head { padding-bottom: 11px; border-bottom: 1px solid var(--ui-border); } .appearance-head { padding-bottom: 11px; border-bottom: 1px solid var(--ui-border); }
@ -1408,9 +1408,9 @@ HTML = """<!doctype html>
.appearance-group { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ui-border); } .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-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 { 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 var(--ui-border); border-radius: 8px; background: var(--ui-input); color: 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: 18px minmax(0, 1fr); align-items: center; gap: 6px; height: 34px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--ui-border) 88%, var(--ui-text)); 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: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) 12%, var(--ui-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 20%, transparent), 0 4px 12px color-mix(in srgb, var(--ui-accent) 10%, transparent); } .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), inset 0 0 0 4px var(--appearance-swatch-2, transparent); }
.appearance-options button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .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(--ui-text) 18%, transparent); border-radius: 6px; background: var(--appearance-swatch); box-shadow: inset 0 0 0 4px var(--appearance-swatch-2, transparent); } .appearance-swatch { width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--ui-text) 18%, transparent); border-radius: 6px; background: var(--appearance-swatch); box-shadow: inset 0 0 0 4px var(--appearance-swatch-2, transparent); }
@ -2963,7 +2963,7 @@ HTML = """<!doctype html>
} }
const THEMES = { const THEMES = {
dark: {bg: '#111315', surface: '#171a1e', panel: '#14171b', input: '#101317', stage: '#050607', text: '#edf1f5', muted: '#8e99a6', border: '#2b3037'}, dark: {bg: '#111315', surface: '#171a1e', panel: '#14171b', input: '#101317', stage: '#050607', text: '#edf1f5', muted: '#8e99a6', border: '#2b3037'},
light: {bg: '#e7edf3', surface: '#f3f6f9', panel: '#fbfcfe', input: '#edf2f7', stage: '#d7e1ea', text: '#172331', muted: '#526171', border: '#b8c5d2'}, light: {bg: '#dfe7ee', surface: '#e9eff4', panel: '#e5ecf2', input: '#d8e2eb', stage: '#c7d4df', text: '#172331', muted: '#4f6070', border: '#adbdcb'},
amber: {bg: '#17130d', surface: '#211a10', panel: '#211a10', input: '#120e08', stage: '#090705', text: '#fff0cf', muted: '#c7a873', border: '#584326'}, amber: {bg: '#17130d', surface: '#211a10', panel: '#211a10', input: '#120e08', stage: '#090705', text: '#fff0cf', muted: '#c7a873', border: '#584326'},
midnight: {bg: '#08111f', surface: '#0d1b2e', panel: '#10233a', input: '#07101d', stage: '#030711', text: '#e8f3ff', muted: '#8ba5c2', border: '#1c3c5f'}, midnight: {bg: '#08111f', surface: '#0d1b2e', panel: '#10233a', input: '#07101d', stage: '#030711', text: '#e8f3ff', muted: '#8ba5c2', border: '#1c3c5f'},
forest: {bg: '#0d1713', surface: '#12231b', panel: '#10201a', input: '#09140f', stage: '#040806', text: '#e9fff1', muted: '#91b7a0', border: '#28523c'}, forest: {bg: '#0d1713', surface: '#12231b', panel: '#10201a', input: '#09140f', stage: '#040806', text: '#e9fff1', muted: '#91b7a0', border: '#28523c'},

Write Preview
Loading…
Cancel
Save