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

Add results_visualization/css/layout.css

Browse source
This commit is contained in:
Mika 2026-01-19 12:48:34 +00:00
parent b6d7f4ae78
commit c1ae20e8c5
1 changed files with 166 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

166
results_visualization/css/layout.css Normal file
View file

@ -0,0 +1,166 @@
:root {
--color-bg: #f8f9fa;
--color-primary: #3a6ea5;
--color-accent: #4caf50;
--color-text: #212529;
--color-card-bg: #ffffff;
--color-border: #dee2e6;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--font-base: 16px;
--font-family: system-ui, sans-serif;
--radius-base: 6px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.1);
--breakpoint-md: 640px;
--breakpoint-lg: 1024px;
}
html, body {
margin: 0;
padding: 0;
font-size: var(--font-base);
font-family: var(--font-family);
background-color: var(--color-bg);
color: var(--color-text);
height: 100%;
}
/* ==============================
App Layout
============================== */
.app-header {
background-color: var(--color-primary);
color: #fff;
padding: var(--spacing-md);
text-align: center;
font-weight: 600;
}
.filter-panel {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
padding: var(--spacing-md);
background-color: var(--color-card-bg);
border-bottom: 1px solid var(--color-border);
justify-content: center;
}
.results-chart {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-lg) var(--spacing-md);
}
.stats-summary {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
justify-content: center;
padding: var(--spacing-md);
}
.app-footer {
text-align: center;
padding: var(--spacing-sm);
font-size: 0.875rem;
color: var(--color-text);
border-top: 1px solid var(--color-border);
margin-top: var(--spacing-lg);
}
/* ==============================
Chart Container
============================== */
.chart-container {
width: 100%;
max-width: 900px;
background-color: var(--color-card-bg);
border-radius: var(--radius-base);
box-shadow: var(--shadow-md);
padding: var(--spacing-md);
margin: auto;
box-sizing: border-box;
}
.chart-container canvas {
width: 100%;
height: auto;
}
/* ==============================
Summary Cards
============================== */
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--spacing-md);
width: 100%;
max-width: 900px;
margin: auto;
}
.summary-cards .card {
background-color: var(--color-card-bg);
border: 1px solid var(--color-border);
border-left: 6px solid var(--color-accent);
border-radius: var(--radius-base);
padding: var(--spacing-md);
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.summary-cards .card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.summary-cards .card__title {
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--color-primary);
}
.summary-cards .card__value {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text);
}
/* ==============================
Responsive Design
============================== */
@media (min-width: var(--breakpoint-md)) {
.filter-panel {
justify-content: flex-start;
}
.results-chart {
padding: var(--spacing-lg) var(--spacing-lg);
}
}
@media (min-width: var(--breakpoint-lg)) {
.summary-cards {
grid-template-columns: repeat(4, 1fr);
}
}
/* ==============================
Footer Copyright
============================== */
.app-footer::after {
display: block;
content: "© 2026 Donau2Space.de";
margin-top: var(--spacing-xs);
font-size: 0.75rem;
color: var(--color-text);
}