From 4cda080d1d58198671706d94fe2bdfbff9e36b7c Mon Sep 17 00:00:00 2001 From: JoshBaneyCS Date: Wed, 30 Apr 2025 07:35:07 +0000 Subject: [PATCH] Update public/styles.css --- public/styles.css | 216 +++++++++++++++++++++++++++------------------- 1 file changed, 126 insertions(+), 90 deletions(-) diff --git a/public/styles.css b/public/styles.css index 7b9278b..43b5493 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,15 +1,17 @@ /* ─── RESET & BASE ─────────────────────────────────────────────────────────── */ * { box-sizing: border-box; -} -body { margin: 0; padding: 0; +} +html, body { + height: 100%; +} +body { font-family: Arial, sans-serif; background-color: #eeeeee; color: #333; - height: 100vh; - overflow: hidden; + overflow: hidden; /* main containers will scroll internally */ } /* ─── HEADER & NAVIGATION ─────────────────────────────────────────────────── */ @@ -18,23 +20,35 @@ body { display: flex; align-items: center; padding: 0.5rem 1rem; - position: fixed; top: 0; left: 0; right: 0; + position: fixed; + top: 0; left: 0; right: 0; z-index: 1000; } -.logo { height: 40px; margin-right: 1rem; } +.logo { + height: 40px; + margin-right: 1rem; +} .header-title { - color: #fff; font-size: 1.2rem; font-weight: bold; + color: #fff; + font-size: 1.2rem; + font-weight: bold; margin-right: auto; } .nav-btn { - background-color: #FF9900; color: #111; - border: none; border-radius: 5px; - padding: 0.5rem 1rem; margin-left: 0.5rem; - cursor: pointer; font-weight: bold; + background-color: #FF9900; + color: #111; + border: none; + border-radius: 5px; + padding: 0.5rem 1rem; + margin-left: 0.5rem; + cursor: pointer; + font-weight: bold; +} +.nav-btn:hover { + background-color: #e48f00; } -.nav-btn:hover { background-color: #e48f00; } -/* ─── PAGE CONTAINERS ──────────────────────────────────────────────────────── */ +/* ─── PAGE CONTAINER ───────────────────────────────────────────────────────── */ .page-container { position: absolute; top: 70px; /* header height */ @@ -44,59 +58,7 @@ body { background: #fff; } -/* ─── HEATMAP PAGE ─────────────────────────────────────────────────────────── */ -.page-container.heatmap { - padding: 0; /* flush to edges */ -} -#heatmap-container { - width: 100%; height: 100%; - position: relative; - overflow: auto; - background-color: #f9f9f9; -} -/* this inner container is very wide/tall to allow scrolling + zoom */ -.map-svg-container { - min-width: 2000px; - min-height: 400px; - transform-origin: 0 0; - cursor: grab; -} -.map-svg-container:active { cursor: grabbing; } - -/* Dock-door squares */ -.dock-door { - fill: #ccc; - stroke: #999; - stroke-width: 1; - cursor: pointer; -} -.dock-door:hover { - stroke: #FF9900; - stroke-width: 2; -} - -/* Area rectangles (A-Mod, B-Mod, AFE-1, AFE-2, etc.) */ -.area-rect { - fill: rgba(200,200,200,0.3); - stroke: #999; - stroke-width: 1; -} -.area-rect label { - font-size: 0.85rem; - font-weight: bold; -} - -/* Floor selector overlay */ -.floor-selector { - position: absolute; - top: 1rem; right: 1rem; - background: rgba(255,255,255,0.9); - padding: 0.5rem; - border-radius: 6px; - box-shadow: 0 1px 4px rgba(0,0,0,0.2); -} - -/* ─── INPUT/FORM (input.html) ─────────────────────────────────────────────── */ +/* ─── INPUT/FORM STYLES (input.html) ───────────────────────────────────────── */ .form-input, .form-textarea, select { @@ -109,45 +71,121 @@ select { font-size: 1rem; } fieldset { - border: 1px solid #ccc; border-radius: 6px; - margin: 1rem 0; padding: 1rem; + border: 1px solid #ccc; + border-radius: 6px; + margin: 1rem 0; + padding: 1rem; +} +legend { + padding: 0 0.5rem; + font-weight: bold; } -legend { padding: 0 0.5rem; font-weight: bold; } .big-button { - background-color: #28a745; color: white; - padding: 0.75rem 1.5rem; border: none; border-radius: 6px; - cursor: pointer; font-size: 1rem; - margin: 1rem auto; display: block; + background-color: #28a745; + color: white; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 1rem; + margin: 1rem auto; + display: block; +} +.big-button:hover { + background-color: #218838; } -.big-button:hover { background-color: #218838; } -/* ─── TRENDS PAGE (for reference) ────────────────────────────────────────── */ -/* ... your existing trends styles go here ... */ -/* make this container a flex column filling available space */ +/* ─── HEATMAP PAGE ─────────────────────────────────────────────────────────── */ +.page-container.heatmap { + padding: 0; +} +#heatmap-container { + width: 100%; + height: 100%; + position: relative; + overflow: auto; + background-color: #f9f9f9; +} +.map-svg-container { + /* sufficiently large to house all SVG elements */ + min-width: 2000px; + min-height: 400px; + transform-origin: 0 0; + cursor: grab; +} +.map-svg-container:active { + cursor: grabbing; +} +/* Dock-door squares */ +.dock-door { + fill: #ccc; + stroke: #999; + stroke-width: 1; + cursor: pointer; +} +.dock-door:hover { + stroke: #FF9900; + stroke-width: 2; +} +/* Area rectangles */ +.area-rect { + fill: rgba(200,200,200,0.3); + stroke: #999; + stroke-width: 1; +} +.area-rect label { + font-size: 0.85rem; + font-weight: bold; +} +/* Floor selector */ +.floor-selector { + position: absolute; + top: 1rem; + right: 1rem; + background: rgba(255,255,255,0.9); + padding: 0.5rem; + border-radius: 6px; + box-shadow: 0 1px 4px rgba(0,0,0,0.2); +} +.floor-selector label { + margin-right: 0.75rem; + font-size: 0.9rem; + cursor: pointer; +} + +/* ─── TRENDS PAGE ──────────────────────────────────────────────────────────── */ .page-container.trends { display: flex; flex-direction: column; - height: calc(100% - 0); /* full height under header */ + height: calc(100% - 0); +} +.page-container.trends > h1 { + margin-bottom: 1rem; +} +.trends-controls { + display: flex; + align-items: center; + margin-bottom: 1rem; +} +#timeframe-slider { + flex: 1; +} +#timeframe-label { + margin-left: 1rem; + white-space: nowrap; } -/* Heading & controls take auto height */ -.page-container.trends > h1, -.trends-controls, .trends-metrics { - flex: 0 0 auto; - margin: 0 0 1rem 0; + margin-bottom: 1rem; } - -/* Chart: fixed 50% of container */ .chart-container { flex: 0 0 50%; position: relative; + margin-bottom: 1rem; } .chart-container canvas { width: 100% !important; height: 100% !important; } - -/* Table: fixed 45% of container */ .table-wrapper { flex: 0 0 45%; overflow: auto; @@ -173,11 +211,9 @@ legend { padding: 0 0.5rem; font-weight: bold; } cursor: pointer; user-select: none; } -/* Zebra striping */ .table-wrapper tbody tr:nth-child(even) { background: #fafafa; } -/* Sort arrow indicators */ .sortable::after { content: '▲▼'; font-size: 0.6em; @@ -202,4 +238,4 @@ legend { padding: 0 0.5rem; font-weight: bold; } select { width: 100%; } -} \ No newline at end of file +}