120 lines
2.4 KiB
CSS
120 lines
2.4 KiB
CSS
/**
|
|
* Foundational compact tokens and primitives for the LedgerDock frontend.
|
|
*/
|
|
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
|
|
|
|
:root {
|
|
--font-display: 'Archivo', sans-serif;
|
|
--font-body: 'IBM Plex Sans', sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
|
|
--color-bg-0: #0b111b;
|
|
--color-bg-1: #101827;
|
|
--color-panel: #141e2f;
|
|
--color-panel-strong: #1b273a;
|
|
--color-panel-elevated: #1f2d44;
|
|
--color-border: #2f3f5a;
|
|
--color-border-strong: #46597a;
|
|
--color-text: #e4ebf7;
|
|
--color-text-muted: #9aa8c1;
|
|
--color-accent: #3f8dff;
|
|
--color-accent-strong: #2e70cf;
|
|
--color-success: #3bb07f;
|
|
--color-warning: #d89a42;
|
|
--color-danger: #d56a6a;
|
|
--color-focus: #79adff;
|
|
|
|
--radius-xs: 2px;
|
|
--radius-sm: 3px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 6px;
|
|
|
|
--shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.24);
|
|
--shadow-strong: 0 16px 34px rgba(0, 0, 0, 0.34);
|
|
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.5rem;
|
|
|
|
--transition-fast: 140ms ease;
|
|
--transition-base: 200ms ease;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
font-family: var(--font-body);
|
|
line-height: 1.45;
|
|
background:
|
|
radial-gradient(circle at 15% -5%, rgba(63, 141, 255, 0.24), transparent 38%),
|
|
radial-gradient(circle at 90% -15%, rgba(130, 166, 229, 0.15), transparent 35%),
|
|
linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 100%);
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
opacity: 0.35;
|
|
background-image:
|
|
linear-gradient(rgba(139, 162, 196, 0.08) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(139, 162, 196, 0.08) 1px, transparent 1px);
|
|
background-size: 34px 34px;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
input[type='checkbox'] {
|
|
accent-color: var(--color-accent);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-focus);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
@keyframes rise-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-border {
|
|
from {
|
|
box-shadow: 0 0 0 0 rgba(121, 173, 255, 0.36);
|
|
}
|
|
to {
|
|
box-shadow: 0 0 0 8px rgba(121, 173, 255, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes terminal-blink {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|