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

Add 2_interference_visualization/css/components.css

Browse source
This commit is contained in:
Mika 2026-03-28 16:47:33 +00:00
parent d742a926ca
commit 0ad76bfcd1
1 changed files with 127 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
2_interference_visualization/css/components.css Normal file
View file

@ -0,0 +1,127 @@
:root {
--color-bg-header: #1e1e2f;
--color-bg-main: #f6f7fb;
--color-bg-filter: #ffffff;
--color-border: #d1d1d1;
--color-text: #222222;
--color-accent: #4a90e2;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--font-base: 'Segoe UI', sans-serif;
--font-size-sm: 0.875rem;
--font-size-md: 1rem;
--font-size-lg: 1.25rem;
--footer-height: 3rem;
}
/* ------------------------------------------------------------- */
/* Header Styles */
/* ------------------------------------------------------------- */
.app-header {
background-color: var(--color-bg-header);
color: #ffffff;
padding: var(--spacing-md);
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-base);
}
.header-bar {
display: flex;
align-items: center;
gap: var(--spacing-md);
font-size: var(--font-size-lg);
font-weight: 500;
}
/* ------------------------------------------------------------- */
/* Chart Container */
/* ------------------------------------------------------------- */
.visualization-container {
background-color: var(--color-bg-main);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: calc(100vh - var(--footer-height) - 120px);
padding: var(--spacing-md);
box-sizing: border-box;
}
.chart-canvas {
width: 100%;
max-width: 960px;
height: 60vh;
background-color: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
/* ------------------------------------------------------------- */
/* Filter Styles */
/* ------------------------------------------------------------- */
.filter-panel {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
background-color: var(--color-bg-filter);
padding: var(--spacing-md);
border: 1px solid var(--color-border);
border-radius: 6px;
}
.filter-panel label, .filter-panel select, .filter-panel input[type="checkbox"] {
font-size: var(--font-size-md);
color: var(--color-text);
}
.filter-panel select {
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 4px;
border: 1px solid var(--color-border);
background-color: #fff;
}
.filter-panel input[type="checkbox"]:checked + label {
color: var(--color-accent);
font-weight: 500;
}
/* ------------------------------------------------------------- */
/* Footer Styles */
/* ------------------------------------------------------------- */
.app-footer {
background-color: var(--color-bg-header);
color: #ffffff;
text-align: center;
padding: var(--spacing-sm);
font-size: var(--font-size-sm);
font-family: var(--font-base);
}
.app-footer::after {
content: "© 2026 Donau2Space.de";
display: block;
margin-top: var(--spacing-xs);
}
/* ------------------------------------------------------------- */
/* Responsive Adjustments */
/* ------------------------------------------------------------- */
@media (min-width: 640px) {
.filter-panel {
justify-content: space-between;
}
}
@media (min-width: 1024px) {
.chart-canvas {
height: 70vh;
}
}