550 lines
11 KiB
CSS
550 lines
11 KiB
CSS
::selection {
|
|
color: var(--lumi-button-text);
|
|
background: var(--lumi-primary);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 3px solid color-mix(in srgb, var(--lumi-focus) 78%, transparent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 0;
|
|
color: var(--lumi-text);
|
|
font-family: var(--lumi-font-display);
|
|
line-height: 1.18;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(1.75rem, 4vw, 2.55rem);
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: clamp(1.25rem, 2.5vw, 1.6rem);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
p {
|
|
max-width: 75ch;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-block;
|
|
margin-bottom: var(--lumi-space-1);
|
|
color: var(--lumi-primary);
|
|
font: 700 0.75rem/1 var(--lumi-font-display);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
a {
|
|
color: var(--lumi-link);
|
|
text-underline-offset: 0.18em;
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family: var(--lumi-font-mono);
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: clamp(1.5rem, 5vw, 3.5rem);
|
|
border: 1px solid color-mix(in srgb, var(--lumi-primary) 25%, var(--lumi-border));
|
|
border-radius: var(--lumi-radius-lg);
|
|
background:
|
|
linear-gradient(125deg, color-mix(in srgb, var(--lumi-primary) 18%, transparent), transparent 56%),
|
|
linear-gradient(310deg, color-mix(in srgb, var(--lumi-accent) 17%, transparent), transparent 50%),
|
|
var(--lumi-surface);
|
|
box-shadow: var(--lumi-shadow-md);
|
|
animation: none;
|
|
}
|
|
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 14rem;
|
|
height: 14rem;
|
|
right: -6rem;
|
|
top: -7rem;
|
|
border: 2.5rem solid color-mix(in srgb, var(--lumi-primary) 10%, transparent);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero h1 {
|
|
max-width: 18ch;
|
|
margin-bottom: var(--lumi-space-3);
|
|
}
|
|
|
|
.hero > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.card,
|
|
.panel,
|
|
.lumi-panel {
|
|
padding: clamp(1rem, 2vw, 1.5rem);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: color-mix(in srgb, var(--lumi-surface) 97%, transparent);
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
animation: none;
|
|
}
|
|
|
|
.grid .card {
|
|
height: 100%;
|
|
}
|
|
|
|
.card .card {
|
|
background: var(--lumi-surface-subtle);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.card > :last-child,
|
|
.panel > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
section.card:has(> table.table) {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.button,
|
|
button.button,
|
|
input[type="submit"].button {
|
|
min-height: var(--lumi-control-height);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--lumi-space-2);
|
|
padding: 0.65rem 1rem;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-button-bg);
|
|
color: var(--lumi-button-text);
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
font: 700 0.925rem/1 var(--lumi-font-body);
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transition:
|
|
transform var(--lumi-transition),
|
|
background var(--lumi-transition),
|
|
border-color var(--lumi-transition),
|
|
box-shadow var(--lumi-transition);
|
|
}
|
|
|
|
.button:hover:not(:disabled):not(.disabled) {
|
|
background: var(--lumi-button-hover);
|
|
box-shadow: var(--lumi-shadow-md);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.button:active:not(:disabled):not(.disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.button.subtle,
|
|
.button.secondary {
|
|
border-color: var(--lumi-border);
|
|
background: var(--lumi-surface-subtle);
|
|
color: var(--lumi-text);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.button.subtle:hover:not(:disabled):not(.disabled),
|
|
.button.secondary:hover:not(:disabled):not(.disabled) {
|
|
border-color: color-mix(in srgb, var(--lumi-primary) 38%, var(--lumi-border));
|
|
background: var(--lumi-surface-raised);
|
|
}
|
|
|
|
.button.danger {
|
|
background: var(--lumi-danger);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.button.danger:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--lumi-danger) 84%, black);
|
|
}
|
|
|
|
.button:disabled,
|
|
.button.disabled,
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
.icon-button {
|
|
width: var(--lumi-control-height);
|
|
height: var(--lumi-control-height);
|
|
min-width: var(--lumi-control-height);
|
|
border-color: var(--lumi-border);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-subtle);
|
|
color: var(--lumi-text);
|
|
transition: background var(--lumi-transition), transform var(--lumi-transition);
|
|
}
|
|
|
|
.icon-button:hover {
|
|
background: var(--lumi-surface-raised);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.link {
|
|
color: var(--lumi-link);
|
|
text-decoration: underline;
|
|
text-decoration-color: color-mix(in srgb, var(--lumi-link) 35%, transparent);
|
|
text-underline-offset: 0.22em;
|
|
}
|
|
|
|
.link:hover {
|
|
text-decoration-color: currentColor;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--lumi-space-4);
|
|
}
|
|
|
|
.form-grid .field {
|
|
min-width: 0;
|
|
gap: var(--lumi-space-2);
|
|
}
|
|
|
|
.field > label:first-child,
|
|
fieldset > legend {
|
|
color: var(--lumi-text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
|
|
select,
|
|
textarea,
|
|
.table-search {
|
|
width: 100%;
|
|
min-height: var(--lumi-control-height);
|
|
padding: 0.65rem 0.8rem;
|
|
border: 1px solid var(--lumi-input-border);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-input-bg);
|
|
color: var(--lumi-input-text);
|
|
font: inherit;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.035);
|
|
transition: border-color var(--lumi-transition), box-shadow var(--lumi-transition);
|
|
}
|
|
|
|
textarea {
|
|
min-height: 7rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
input:hover,
|
|
select:hover,
|
|
textarea:hover {
|
|
border-color: color-mix(in srgb, var(--lumi-primary) 35%, var(--lumi-input-border));
|
|
}
|
|
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
border-color: var(--lumi-focus);
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--lumi-focus) 22%, transparent);
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
width: 1.1rem;
|
|
height: 1.1rem;
|
|
accent-color: var(--lumi-primary);
|
|
}
|
|
|
|
input[type="color"] {
|
|
min-width: 3.5rem;
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
}
|
|
|
|
.hint,
|
|
.command-subtitle,
|
|
.table-note,
|
|
.table-page-label {
|
|
color: var(--lumi-text-muted);
|
|
}
|
|
|
|
.table-wrap {
|
|
width: 100%;
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface);
|
|
overflow: auto;
|
|
}
|
|
|
|
.table {
|
|
min-width: 42rem;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
padding: 0.8rem 0.9rem;
|
|
}
|
|
|
|
.table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: var(--lumi-surface-subtle);
|
|
color: var(--lumi-text-muted);
|
|
font: 700 0.75rem/1.3 var(--lumi-font-display);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.table tbody tr {
|
|
transition: background var(--lumi-transition);
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: color-mix(in srgb, var(--lumi-primary) 5%, var(--lumi-surface));
|
|
}
|
|
|
|
.table tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.badge,
|
|
.pill,
|
|
.status-indicator,
|
|
.level-pill,
|
|
.origin-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 1.65rem;
|
|
border-radius: var(--lumi-radius-pill);
|
|
}
|
|
|
|
.status-indicator::before {
|
|
content: "";
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
margin-right: var(--lumi-space-2);
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
.status-success {
|
|
color: var(--lumi-success);
|
|
}
|
|
|
|
.status-warning {
|
|
color: var(--lumi-warning);
|
|
}
|
|
|
|
.status-danger {
|
|
color: var(--lumi-danger);
|
|
}
|
|
|
|
.flash,
|
|
.alert,
|
|
.callout {
|
|
padding: var(--lumi-space-3) var(--lumi-space-4);
|
|
border: 1px solid var(--lumi-border);
|
|
border-left-width: 4px;
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-subtle);
|
|
color: var(--lumi-text);
|
|
}
|
|
|
|
.flash.success,
|
|
.alert.success,
|
|
.callout.success {
|
|
border-color: color-mix(in srgb, var(--lumi-success) 45%, var(--lumi-border));
|
|
border-left-color: var(--lumi-success);
|
|
background: color-mix(in srgb, var(--lumi-success) 10%, var(--lumi-surface));
|
|
color: var(--lumi-text);
|
|
}
|
|
|
|
.flash.error,
|
|
.alert.danger,
|
|
.callout.danger {
|
|
border-color: color-mix(in srgb, var(--lumi-danger) 45%, var(--lumi-border));
|
|
border-left-color: var(--lumi-danger);
|
|
background: color-mix(in srgb, var(--lumi-danger) 10%, var(--lumi-surface));
|
|
color: var(--lumi-text);
|
|
}
|
|
|
|
.flash.info,
|
|
.alert.info {
|
|
border-left-color: var(--lumi-info);
|
|
background: color-mix(in srgb, var(--lumi-info) 9%, var(--lumi-surface));
|
|
}
|
|
|
|
.list li {
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-surface-subtle);
|
|
}
|
|
|
|
.modal-backdrop {
|
|
padding: var(--lumi-space-4);
|
|
background: rgba(5, 10, 12, 0.62);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.modal {
|
|
width: min(42rem, 100%);
|
|
max-height: min(48rem, calc(100vh - 2rem));
|
|
overflow-y: auto;
|
|
padding: var(--lumi-space-5);
|
|
border-radius: var(--lumi-radius-lg);
|
|
background: var(--lumi-surface);
|
|
box-shadow: var(--lumi-shadow-lg);
|
|
}
|
|
|
|
.modal-header h2,
|
|
.modal-header h3 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tabs,
|
|
.ai-tabs {
|
|
display: flex;
|
|
gap: var(--lumi-space-1);
|
|
padding: var(--lumi-space-1);
|
|
border: 1px solid var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tabs a,
|
|
.ai-tabs a {
|
|
min-height: 2.4rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.45rem 0.8rem;
|
|
border-radius: var(--lumi-radius-sm);
|
|
color: var(--lumi-text-muted);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tabs a:hover,
|
|
.tabs a[aria-current="page"],
|
|
.ai-tabs a:hover {
|
|
background: var(--lumi-surface);
|
|
color: var(--lumi-text);
|
|
box-shadow: var(--lumi-shadow-sm);
|
|
}
|
|
|
|
details {
|
|
scroll-margin-top: 5rem;
|
|
}
|
|
|
|
details > summary {
|
|
border-radius: var(--lumi-radius-sm);
|
|
}
|
|
|
|
.empty-state,
|
|
.loading-state,
|
|
.error-state {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: 10rem;
|
|
padding: var(--lumi-space-6);
|
|
border: 1px dashed var(--lumi-border);
|
|
border-radius: var(--lumi-radius-md);
|
|
background: var(--lumi-surface-subtle);
|
|
color: var(--lumi-text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.loading-state::before {
|
|
content: "";
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
border: 3px solid var(--lumi-border);
|
|
border-top-color: var(--lumi-primary);
|
|
border-radius: 50%;
|
|
animation: lumi-spin 0.75s linear infinite;
|
|
}
|
|
|
|
[data-tooltip] {
|
|
position: relative;
|
|
}
|
|
|
|
[data-tooltip]:hover::after,
|
|
[data-tooltip]:focus-visible::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 0.5rem);
|
|
z-index: 100;
|
|
width: max-content;
|
|
max-width: 18rem;
|
|
padding: 0.4rem 0.55rem;
|
|
border-radius: var(--lumi-radius-sm);
|
|
background: var(--lumi-text);
|
|
color: var(--lumi-surface);
|
|
box-shadow: var(--lumi-shadow-md);
|
|
font-size: 0.8rem;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
@keyframes lumi-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-grid .field.full,
|
|
.form-grid h2 {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.card,
|
|
.panel,
|
|
.lumi-panel,
|
|
.modal {
|
|
padding: var(--lumi-space-4);
|
|
}
|
|
|
|
.hero {
|
|
padding: var(--lumi-space-5);
|
|
}
|
|
|
|
.table-tools,
|
|
.table-controls,
|
|
.log-controls {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.table-tools > *,
|
|
.table-controls > *,
|
|
.log-controls > * {
|
|
width: 100%;
|
|
}
|
|
|
|
.list li {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
}
|