60 lines
1.2 KiB
CSS
60 lines
1.2 KiB
CSS
/* Objects – Layout patterns and shared abstractions */
|
||
|
||
/* Surface base – background, border, and radius shared across raised UI */
|
||
.tool-card,
|
||
.tool-panel,
|
||
.tool-preview,
|
||
.empty-state {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
/* Hover accent border – interactive surfaces that highlight on focus/drag */
|
||
.tool-card:hover,
|
||
.btn:hover:not(:disabled),
|
||
.load-area:hover,
|
||
.load-area.drag-over,
|
||
.tool-preview.drag-over {
|
||
border-color: var(--accent-dim);
|
||
}
|
||
|
||
/* Section label – small uppercase heading shared across page and panel contexts */
|
||
.section-label {
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Page container */
|
||
.page {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: var(--gap);
|
||
}
|
||
|
||
/* Top-level sections share uniform vertical spacing */
|
||
.section,
|
||
.tool-workspace {
|
||
margin-top: var(--gap);
|
||
}
|
||
|
||
.section > .section-label {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* Tool grid */
|
||
.tool-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
/* Tool workspace */
|
||
.tool-workspace {
|
||
display: flex;
|
||
gap: 1rem;
|
||
}
|