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

Add experiment_results_visualization/css/components.css

Browse source
This commit is contained in:
Mika 2026-01-23 12:53:25 +00:00
parent b6d9f19c9c
commit 5e78f0876f
1 changed files with 153 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

153
experiment_results_visualization/css/components.css Normal file
View file

@ -0,0 +1,153 @@
/* =============================
Summary Panels
============================= */
.summary-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.stats-panel {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--spacing-md);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: background-color 0.3s ease;
}
.stats-panel:hover {
background-color: var(--surface-hover);
}
.stats-panel__title {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: var(--spacing-sm);
}
.stats-panel__value {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
}
.stats-panel__delta {
font-size: 0.875rem;
margin-top: var(--spacing-xs);
color: var(--accent);
}
/* =============================
Charts
============================= */
.chart-section {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.comparison-view {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
@media (min-width: 1024px) {
.comparison-view {
grid-template-columns: 1fr 1fr;
}
}
.chart-container {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--spacing-md);
overflow-x: auto;
}
.chart-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--spacing-sm);
}
.chart-placeholder {
text-align: center;
padding: var(--spacing-lg);
color: var(--text-secondary);
}
/* =============================
Tables
============================= */
.table-section {
width: 100%;
overflow-x: auto;
border-collapse: collapse;
border-spacing: 0;
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.table-section th,
.table-section td {
text-align: left;
padding: var(--spacing-sm) var(--spacing-md);
white-space: nowrap;
}
.table-section thead {
background-color: var(--surface-alt);
}
.table-section tbody tr:nth-child(odd) {
background-color: var(--surface-hover);
}
.table-section tbody tr:hover {
background-color: var(--surface-focus);
}
.table-section th {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
}
.table-section td {
font-size: 0.875rem;
color: var(--text-primary);
}
/* =============================
Accessibility adjustments
============================= */
.table-section:focus-within,
.stats-panel:focus-within {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
/* =============================
Footer placeholder for copyright
============================= */
footer {
text-align: center;
font-size: 0.75rem;
color: var(--text-secondary);
padding: var(--spacing-md) 0;
}
footer::after {
content: "© 2026 Donau2Space.de";
}