diff --git a/src/styles.css b/src/styles.css index bb77222..c73ff47 100644 --- a/src/styles.css +++ b/src/styles.css @@ -33,7 +33,7 @@ --ed-warn: #ffb400; --ed-danger: #ff5436; --ed-info: #00b3ff; - --ed-love: #ff5ca8; + --ed-exo: #a3ff5e; --font-display: 'Rajdhani', 'Inter', sans-serif; --font-data: 'JetBrains Mono', monospace; --font-body: 'Inter', sans-serif; @@ -62,10 +62,30 @@ input { font: inherit; color: inherit; } +button, +input, +select, +textarea { + border: 1px solid var(--ui-line); + border-radius: var(--panel-radius); + outline: none; + background: var(--ed-bg); + color: var(--ed-fg); + font-family: var(--font-data); + color-scheme: dark; +} button { - border: 0; cursor: pointer; - background: none; +} +button:focus-visible, +input:focus-visible, +select:focus-visible, +textarea:focus-visible { + border-color: var(--ui-line-focus); +} +button:hover:not(:disabled) { + border-color: var(--ui-line-focus); + background: var(--ui-surface-hi); } .app-shell { min-height: 100vh; @@ -81,7 +101,7 @@ button { align-items: center; gap: 24px; padding: 0 18px; - border-bottom: 1px solid var(--ed-edge); + border-bottom: 1px solid var(--ui-divider); background: var(--ed-panel); } .brand { @@ -109,7 +129,10 @@ button { .nav-item { position: relative; padding: 0 14px; + border: 0; + border-radius: 0; color: var(--ed-dim); + background: transparent; font: 600 13px var(--font-display); } .nav-item:hover, @@ -146,6 +169,8 @@ button { } .icon-button, .secondary { + border-color: transparent; + background: transparent; color: var(--ed-dim); font-size: 18px; } @@ -155,7 +180,7 @@ button { min-height: calc(100vh - 54px); } .side-panel { - border-right: 1px solid var(--ed-edge); + border-right: 1px solid var(--ui-divider); background: color-mix(in srgb, var(--ed-panel) 80%, var(--ed-bg)); } .panel-header { @@ -164,7 +189,7 @@ button { justify-content: space-between; min-height: 34px; padding: 0 10px; - border-bottom: 1px solid var(--ed-edge); + border-bottom: 1px solid var(--ui-divider); color: var(--ed-fg); font: 600 13px var(--font-display); letter-spacing: 0.04em; @@ -178,7 +203,7 @@ button { .server-card, .side-section { padding: 16px 12px; - border-bottom: 1px solid var(--ed-edge); + border-bottom: 1px solid var(--ui-divider); } .server-status { display: flex; @@ -203,15 +228,7 @@ label { .control { width: 100%; padding: 7px 8px; - border: 1px solid var(--ui-line); - border-radius: 2px; - outline: none; - background: var(--ed-bg); - color: var(--ed-fg); - font: 11px var(--font-data); -} -.control:focus { - border-color: var(--ui-line-focus); + font-size: 11px; } .control-button { width: 100%; @@ -219,13 +236,14 @@ label { } .primary { padding: 7px 10px; - border: 1px solid var(--ed-accent); - background: color-mix(in srgb, var(--ed-accent) 20%, var(--ed-bg)); + border-color: var(--ui-line-focus); + background: var(--ui-surface); color: var(--ed-fg); - font: 600 11px var(--font-data); + font-size: 11px; + font-weight: 600; } .primary:hover { - background: color-mix(in srgb, var(--ed-accent) 34%, var(--ed-bg)); + background: var(--ui-surface-hi); } .empty-row, .mono { @@ -263,7 +281,7 @@ label { } .panel { min-width: 0; - border: 1px solid var(--ed-edge); + border: 1px solid var(--ui-line-soft); border-radius: var(--panel-radius); background: var(--ed-panel); } @@ -277,7 +295,7 @@ label { display: grid; place-content: center; min-height: 220px; - border-bottom: 1px solid var(--ed-edge); + border-bottom: 1px solid var(--ui-divider); background: radial-gradient( circle, color-mix(in srgb, var(--ed-accent) 10%, var(--ed-panel)), @@ -305,9 +323,12 @@ label { display: flex; gap: 14px; padding: 9px 10px; - border-bottom: 1px solid var(--ed-edge); + border-bottom: 1px solid var(--ui-divider); } .tab { + border: 0; + border-radius: 0; + background: transparent; padding: 0 0 5px; color: var(--ed-dim); font: 10px var(--font-data); @@ -344,7 +365,7 @@ label { display: flex; gap: 5px; padding: 8px; - border-top: 1px solid var(--ed-edge); + border-top: 1px solid var(--ui-divider); } .chat-composer .control { min-width: 0;