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

Add results_visualization/css/components.css

Browse source
This commit is contained in:
Mika 2026-01-22 11:58:35 +00:00
parent a31363ba7a
commit 037bb38f46
1 changed files with 130 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

130
results_visualization/css/components.css Normal file
View file

@ -0,0 +1,130 @@
:root {
--primary-color: #2a6db0;
--secondary-color: #f5f7fa;
--accent-color: #e1e8ed;
--text-color: #222;
--text-muted: #666;
--font-base: 'system-ui', sans-serif;
--radius-md: 6px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 2px 6px rgba(0,0,0,0.15);
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--breakpoint-tablet: 768px;
}
/* ================================ */
/* Section: Filter Controls */
/* ================================ */
.filter-controls,
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-sm);
background-color: var(--secondary-color);
padding: var(--spacing-md);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
font-family: var(--font-base);
}
.filter-controls select,
.filter-controls button,
.toolbar select,
.toolbar button {
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--accent-color);
border-radius: var(--radius-md);
background-color: #fff;
color: var(--text-color);
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.filter-controls button:hover,
.toolbar button:hover {
background-color: var(--primary-color);
color: #fff;
}
/* ================================ */
/* Section: Summary Cards */
/* ================================ */
.summary-cards,
.grid {
display: grid;
gap: var(--spacing-md);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-top: var(--spacing-md);
}
.summary-cards__card,
.grid__card {
background-color: #fff;
padding: var(--spacing-lg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
text-align: center;
font-family: var(--font-base);
}
.summary-cards__card h3,
.grid__card h3 {
font-size: 1.1rem;
color: var(--text-color);
margin-bottom: var(--spacing-sm);
}
.summary-cards__card p,
.grid__card p {
font-size: 0.9rem;
color: var(--text-muted);
margin: 0;
}
/* ================================ */
/* Section: Chart Style */
/* ================================ */
.chart-container,
.chart-style {
position: relative;
width: 100%;
min-height: 300px;
background-color: #fff;
border-radius: var(--radius-md);
padding: var(--spacing-md);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.chart-container canvas,
.chart-style canvas {
width: 100%;
height: 100%;
display: block;
}
/* Responsive adjustments */
@media (min-width: var(--breakpoint-tablet)) {
.filter-controls,
.toolbar {
justify-content: space-between;
}
}
/* Footer for copyright reference */
footer {
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
padding: var(--spacing-md);
}
footer::after {
content: '© 2026 Donau2Space.de';
display: block;
margin-top: var(--spacing-xs);
}