diff --git a/public/styles.css b/public/styles.css index 07f1b36..1936570 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,17 +1,16 @@ -/* styles.css */ - -/* ─── Global & Layout ───────────────────────────────────────────────────────── */ - -/* Reset & body */ -* { box-sizing: border-box; } +/* ─── Reset & Base ──────────────────────────────────────────────────────────── */ +* { + box-sizing: border-box; +} body { margin: 0; + padding-top: 70px; /* push everything below fixed header */ font-family: Arial, sans-serif; background-color: #eeeeee; color: #333; } -/* Fixed header */ +/* ─── Header & Nav ─────────────────────────────────────────────────────────── */ .main-header { background-color: #232F3E; display: flex; @@ -45,138 +44,27 @@ body { background-color: #e48f00; } -/* Main page container (offset under header) */ +/* ─── Page Container ───────────────────────────────────────────────────────── */ .page-container { - margin-top: 70px; /* height of header */ width: 95%; max-width: 1200px; - margin-left: auto; - margin-right: auto; + margin: 0 auto; padding: 1rem; background-color: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } -/* Utility */ -.hidden { - display: none !important; -} +/* ─── Trends Chart & Table ─────────────────────────────────────────────────── */ -/* ─── Forms & Buttons ───────────────────────────────────────────────────────── */ - -/* Text inputs & dropdowns */ -.form-input, -.form-textarea, -select { - width: 90%; - margin: 0.5rem auto; - display: block; - padding: 0.75rem; - border: 1px solid #ccc; - border-radius: 6px; - font-size: 1rem; -} - -/* Fieldset & legend spacing */ -fieldset { - border: 1px solid #ccc; - border-radius: 6px; - margin: 1rem 0; - padding: 1rem; -} -legend { - padding: 0 0.5rem; - font-weight: bold; -} - -/* Large submit button */ -.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; -} -.big-button:hover { - background-color: #218838; -} - -/* ─── Heat Map Page ────────────────────────────────────────────────────────── */ - -/* Scrollable/zoomable container */ -#heatmap-container { - margin-top: 70px; - width: 95%; - height: calc(100vh - 70px); - margin-left: auto; - margin-right: auto; - position: relative; - overflow: auto; - background-color: #f9f9f9; - border-radius: 6px; - box-shadow: 0 2px 6px rgba(0,0,0,0.1); -} - -/* SVG wrapper */ -.map-svg-container { - width: 2000px; /* adjust to your full map width */ - height: 400px; /* adjust to your map height */ - 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, AFE-1, 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 */ -.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); -} - -/* ─── Trends Page ──────────────────────────────────────────────────────────── */ - -/* Chart container */ +/* Chart area */ #chart-container { height: 50vh; width: 100%; margin-bottom: 2rem; } -/* Spreadsheet-style table wrapper */ +/* Table wrapper: scrollable pane */ #trends-table-container { max-height: 40vh; overflow: auto; @@ -184,7 +72,7 @@ legend { margin-bottom: 1rem; } -/* Table styling */ +/* Spreadsheet-style table */ #trends-table { width: 100%; border-collapse: collapse; @@ -224,14 +112,10 @@ legend { } /* ─── Responsive Tweaks ─────────────────────────────────────────────────────── */ - @media (max-width: 768px) { - .form-input, .form-textarea, select { - width: 100%; - } .nav-btn { - padding: 0.5rem; - margin-left: 0.25rem; + padding: 0.4rem 0.8rem; font-size: 0.9rem; + margin-left: 0.25rem; } }