Mika/run_17_gates_default
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add artifact.visualization/css/layout.css

Browse source
This commit is contained in:
Mika 2026-03-09 13:44:27 +00:00
parent 122ad5f9ae
commit b5f8e4de24
1 changed files with 187 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

187
artifact.visualization/css/layout.css Normal file
View file

@ -0,0 +1,187 @@
:root {
--primary-color: #2d6cdf;
--background-color: #f5f7fa;
--surface-color: #ffffff;
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--border-color: #d5dae0;
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--radius-sm: 4px;
--radius-md: 8px;
--font-base: system-ui, sans-serif;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 8px rgba(0,0,0,0.08);
--breakpoint-md: 640px;
--breakpoint-lg: 1024px;
}
body {
margin: 0;
font-family: var(--font-base);
background-color: var(--background-color);
color: var(--text-primary);
line-height: 1.5;
}
/* === App Shell === */
.app-header,
.app-footer {
background-color: var(--surface-color);
border-bottom: 1px solid var(--border-color);
padding: var(--spacing-sm) var(--spacing-lg);
}
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.app-main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.dashboard-section {
flex: 1;
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
padding: var(--spacing-md);
}
.sidebar {
background-color: var(--surface-color);
border-right: 1px solid var(--border-color);
padding: var(--spacing-md);
}
@media (min-width: var(--breakpoint-lg)) {
.dashboard-section {
grid-template-columns: 280px 1fr;
}
}
.app-footer {
border-top: 1px solid var(--border-color);
text-align: center;
font-size: 0.85rem;
color: var(--text-secondary);
padding: var(--spacing-sm);
}
/* === Summary Cards === */
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.summary-cards .card {
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: var(--spacing-md);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.summary-cards .card-title {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: var(--spacing-xs);
}
.summary-cards .card-value {
font-size: 1.4rem;
font-weight: 600;
color: var(--primary-color);
}
/* === Chart Panel === */
.chart-panel {
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--spacing-md);
box-shadow: var(--shadow-md);
min-height: 280px;
display: flex;
flex-direction: column;
}
.chart-panel__header {
font-weight: 500;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
}
.chart-panel__body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* === Filter Panel === */
.filter-panel {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: var(--spacing-sm);
box-shadow: var(--shadow-sm);
}
.filter-panel label {
font-size: 0.9rem;
color: var(--text-secondary);
}
.filter-panel select,
.filter-panel input {
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.4rem 0.6rem;
font-family: var(--font-base);
}
.filter-panel button {
background-color: var(--primary-color);
color: #fff;
border: none;
border-radius: var(--radius-sm);
padding: 0.5rem 1rem;
cursor: pointer;
}
.filter-panel button:hover {
opacity: 0.9;
}
@media (min-width: var(--breakpoint-md)) {
.filter-panel {
justify-content: flex-start;
}
}
/* === Footer Copyright === */
.app-footer small {
display: block;
margin-top: var(--spacing-xs);
font-size: 0.8rem;
color: var(--text-secondary);
}
.app-footer small::after {
content: " © 2026 Donau2Space.de";
}