58 lines
4.0 KiB
CSS
58 lines
4.0 KiB
CSS
* { box-sizing: border-box; }
|
|
html, body, #root { width: 100%; min-width: 0; min-height: 100%; margin: 0; }
|
|
body { min-height: 100vh; overflow: hidden; color: var(--text); background: var(--bg); font: var(--fw-regular) var(--type-body-size)/1.5 var(--font-ui); }
|
|
button, input, select, textarea { color: inherit; font: inherit; }
|
|
button, select { cursor: pointer; }
|
|
button:disabled, select:disabled { cursor: not-allowed; opacity: .42; }
|
|
h1, h2, h3, h4, p { margin-top: 0; }
|
|
h1 { font-size: var(--type-h1-size); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: -.04em; }
|
|
h2 { font-size: var(--type-h2-size); font-weight: var(--fw-semibold); line-height: 1.15; letter-spacing: -.03em; }
|
|
h3 { font-size: var(--type-h3-size); font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: 0; }
|
|
h4 { font-size: var(--type-h4-size); font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: 0; }
|
|
svg { display: block; width: 17px; height: 17px; }
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
|
|
td { font-size: var(--type-table-body-size); font-weight: var(--fw-regular); }
|
|
th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: var(--panel-soft); font-size: var(--type-table-head-size); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
|
|
tbody tr:hover td { background: var(--panel-hover); }
|
|
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
mark { padding: 1px 2px; color: var(--state-active-text); background: var(--state-active); }
|
|
.hidden-input { display: none; }
|
|
/* Unified Ableton-style Button System */
|
|
button, .btn, .icon-btn, .tab-btn, .bookmark-btn, .results-btn {
|
|
border-radius: var(--btn-radius);
|
|
border: 1px solid var(--button-border);
|
|
color: var(--button-text);
|
|
background: var(--button-bg);
|
|
font-size: var(--type-button-size);
|
|
font-weight: var(--fw-semibold);
|
|
line-height: 1.15;
|
|
}
|
|
.select, .input {
|
|
min-height: var(--control-height); border: var(--border-hair) solid var(--line); border-radius: var(--radius-sm);
|
|
color: var(--text); background-color: var(--panel-raised); font-size: var(--type-button-size); font-weight: var(--fw-regular);
|
|
}
|
|
/* Verbindliche Buttonform: eine Hoehe, ein Radius, ein waagerechtes Polster.
|
|
Senkrecht traegt der Knopf kein eigenes Polster - die Hoehe kommt aus
|
|
--btn-h, damit ueberall gleich wenig Luft ueber und unter der Schrift steht. */
|
|
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); }
|
|
.select, .input { padding: var(--legacy-space-1) var(--legacy-space-3); border-radius: var(--radius-sm); }
|
|
.icon-btn, .bookmark-btn, .results-btn { display: inline-grid; place-items: center; min-width: var(--btn-h); min-height: var(--btn-h); padding: 0 6px; }
|
|
.btn:hover, .icon-btn:hover, .tab-btn:hover, .bookmark-btn:hover, .results-btn:hover { border-color: var(--button-border); background: var(--button-bg-hover); color: var(--button-text); }
|
|
.select:hover, .input:hover { border-color: var(--line-strong); background-color: var(--panel-hover); }
|
|
.input { background: var(--surface-inset); }
|
|
|
|
/* Marked / Active button state (Ableton Warp style: bright gold fill, dark text, exact same 1px neutral border) */
|
|
.btn.primary, .btn--primary, .btn.active, .tab-btn.active, .bookmark-btn[aria-pressed="true"], .icon-btn[aria-pressed="true"], .results-btn.is-open {
|
|
border: 1px solid var(--button-border);
|
|
color: var(--button-marked-text);
|
|
background: var(--button-marked-bg);
|
|
font-weight: var(--fw-semibold);
|
|
}
|
|
.btn.primary:hover, .btn--primary:hover, .btn.active:hover, .tab-btn.active:hover, .bookmark-btn[aria-pressed="true"]:hover, .icon-btn[aria-pressed="true"]:hover, .results-btn.is-open:hover {
|
|
border-color: var(--button-border);
|
|
background: var(--button-marked-bg-hover);
|
|
color: var(--button-marked-text);
|
|
}
|
|
:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 1px; }
|