fix: align controls with albedo style rules

This commit is contained in:
2026-10-25 03:59:05 +01:00
parent 66fe3e4fea
commit 998b3d3072
+45 -24
View File
@@ -33,7 +33,7 @@
--ed-warn: #ffb400; --ed-warn: #ffb400;
--ed-danger: #ff5436; --ed-danger: #ff5436;
--ed-info: #00b3ff; --ed-info: #00b3ff;
--ed-love: #ff5ca8; --ed-exo: #a3ff5e;
--font-display: 'Rajdhani', 'Inter', sans-serif; --font-display: 'Rajdhani', 'Inter', sans-serif;
--font-data: 'JetBrains Mono', monospace; --font-data: 'JetBrains Mono', monospace;
--font-body: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
@@ -62,10 +62,30 @@ input {
font: inherit; font: inherit;
color: 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 { button {
border: 0;
cursor: pointer; 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 { .app-shell {
min-height: 100vh; min-height: 100vh;
@@ -81,7 +101,7 @@ button {
align-items: center; align-items: center;
gap: 24px; gap: 24px;
padding: 0 18px; padding: 0 18px;
border-bottom: 1px solid var(--ed-edge); border-bottom: 1px solid var(--ui-divider);
background: var(--ed-panel); background: var(--ed-panel);
} }
.brand { .brand {
@@ -109,7 +129,10 @@ button {
.nav-item { .nav-item {
position: relative; position: relative;
padding: 0 14px; padding: 0 14px;
border: 0;
border-radius: 0;
color: var(--ed-dim); color: var(--ed-dim);
background: transparent;
font: 600 13px var(--font-display); font: 600 13px var(--font-display);
} }
.nav-item:hover, .nav-item:hover,
@@ -146,6 +169,8 @@ button {
} }
.icon-button, .icon-button,
.secondary { .secondary {
border-color: transparent;
background: transparent;
color: var(--ed-dim); color: var(--ed-dim);
font-size: 18px; font-size: 18px;
} }
@@ -155,7 +180,7 @@ button {
min-height: calc(100vh - 54px); min-height: calc(100vh - 54px);
} }
.side-panel { .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)); background: color-mix(in srgb, var(--ed-panel) 80%, var(--ed-bg));
} }
.panel-header { .panel-header {
@@ -164,7 +189,7 @@ button {
justify-content: space-between; justify-content: space-between;
min-height: 34px; min-height: 34px;
padding: 0 10px; padding: 0 10px;
border-bottom: 1px solid var(--ed-edge); border-bottom: 1px solid var(--ui-divider);
color: var(--ed-fg); color: var(--ed-fg);
font: 600 13px var(--font-display); font: 600 13px var(--font-display);
letter-spacing: 0.04em; letter-spacing: 0.04em;
@@ -178,7 +203,7 @@ button {
.server-card, .server-card,
.side-section { .side-section {
padding: 16px 12px; padding: 16px 12px;
border-bottom: 1px solid var(--ed-edge); border-bottom: 1px solid var(--ui-divider);
} }
.server-status { .server-status {
display: flex; display: flex;
@@ -203,15 +228,7 @@ label {
.control { .control {
width: 100%; width: 100%;
padding: 7px 8px; padding: 7px 8px;
border: 1px solid var(--ui-line); font-size: 11px;
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);
} }
.control-button { .control-button {
width: 100%; width: 100%;
@@ -219,13 +236,14 @@ label {
} }
.primary { .primary {
padding: 7px 10px; padding: 7px 10px;
border: 1px solid var(--ed-accent); border-color: var(--ui-line-focus);
background: color-mix(in srgb, var(--ed-accent) 20%, var(--ed-bg)); background: var(--ui-surface);
color: var(--ed-fg); color: var(--ed-fg);
font: 600 11px var(--font-data); font-size: 11px;
font-weight: 600;
} }
.primary:hover { .primary:hover {
background: color-mix(in srgb, var(--ed-accent) 34%, var(--ed-bg)); background: var(--ui-surface-hi);
} }
.empty-row, .empty-row,
.mono { .mono {
@@ -263,7 +281,7 @@ label {
} }
.panel { .panel {
min-width: 0; min-width: 0;
border: 1px solid var(--ed-edge); border: 1px solid var(--ui-line-soft);
border-radius: var(--panel-radius); border-radius: var(--panel-radius);
background: var(--ed-panel); background: var(--ed-panel);
} }
@@ -277,7 +295,7 @@ label {
display: grid; display: grid;
place-content: center; place-content: center;
min-height: 220px; min-height: 220px;
border-bottom: 1px solid var(--ed-edge); border-bottom: 1px solid var(--ui-divider);
background: radial-gradient( background: radial-gradient(
circle, circle,
color-mix(in srgb, var(--ed-accent) 10%, var(--ed-panel)), color-mix(in srgb, var(--ed-accent) 10%, var(--ed-panel)),
@@ -305,9 +323,12 @@ label {
display: flex; display: flex;
gap: 14px; gap: 14px;
padding: 9px 10px; padding: 9px 10px;
border-bottom: 1px solid var(--ed-edge); border-bottom: 1px solid var(--ui-divider);
} }
.tab { .tab {
border: 0;
border-radius: 0;
background: transparent;
padding: 0 0 5px; padding: 0 0 5px;
color: var(--ed-dim); color: var(--ed-dim);
font: 10px var(--font-data); font: 10px var(--font-data);
@@ -344,7 +365,7 @@ label {
display: flex; display: flex;
gap: 5px; gap: 5px;
padding: 8px; padding: 8px;
border-top: 1px solid var(--ed-edge); border-top: 1px solid var(--ui-divider);
} }
.chat-composer .control { .chat-composer .control {
min-width: 0; min-width: 0;