JoshBaneyCS/Heat-Tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update public/styles.css

Browse Source
This commit is contained in:
JoshBaneyCS 2025-04-30 06:13:41 +00:00
parent c8d3240678
commit 4c744f23b0
1 changed files with 65 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
public/styles.css
View File

@ -2,6 +2,15 @@
/* ─── Global & Layout ───────────────────────────────────────────────────────── */ /* ─── Global & Layout ───────────────────────────────────────────────────────── */
/* Reset & body */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #eeeeee;
color: #333;
}
/* Fixed header */ /* Fixed header */
.main-header { .main-header {
background-color: #232F3E; background-color: #232F3E;
@ -36,7 +45,7 @@
background-color: #e48f00; background-color: #e48f00;
} }
/* Main page container (offset for fixed header) */ /* Main page container (offset under header) */
.page-container { .page-container {
margin-top: 70px; /* height of header */ margin-top: 70px; /* height of header */
width: 95%; width: 95%;
@ -56,9 +65,10 @@
/* ─── Forms & Buttons ───────────────────────────────────────────────────────── */ /* ─── Forms & Buttons ───────────────────────────────────────────────────────── */
/* Text inputs and textareas */ /* Text inputs & dropdowns */
.form-input, .form-input,
.form-textarea { .form-textarea,
select {
width: 90%; width: 90%;
margin: 0.5rem auto; margin: 0.5rem auto;
display: block; display: block;
@ -66,7 +76,18 @@
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 6px; border-radius: 6px;
font-size: 1rem; font-size: 1rem;
box-sizing: border-box; }
/* 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 */ /* Large submit button */
@ -87,9 +108,9 @@
/* ─── Heat Map Page ────────────────────────────────────────────────────────── */ /* ─── Heat Map Page ────────────────────────────────────────────────────────── */
/* Container for the heat map (scrollable & zoomable) */ /* Scrollable/zoomable container */
#heatmap-container { #heatmap-container {
margin-top: 70px; /* offset under header */ margin-top: 70px;
width: 95%; width: 95%;
height: calc(100vh - 70px); height: calc(100vh - 70px);
margin-left: auto; margin-left: auto;
@ -101,39 +122,45 @@
box-shadow: 0 2px 6px rgba(0,0,0,0.1); 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 squares */
.dock-door { .dock-door {
width: 30px; fill: #ccc;
height: 30px; stroke: #999;
background-color: #ccc; stroke-width: 1;
border: 1px solid #999;
box-sizing: border-box;
position: absolute;
cursor: pointer; cursor: pointer;
} }
.dock-door:hover { .dock-door:hover {
outline: 2px solid #FF9900; stroke: #FF9900;
z-index: 10; stroke-width: 2;
} }
/* Additional area rectangles */ /* Area rectangles (A-Mod, AFE-1, etc) */
.area-rect { .area-rect {
position: absolute; fill: rgba(200,200,200,0.3);
background-color: rgba(200,200,200,0.3); stroke: #999;
border: 1px solid #999; stroke-width: 1;
box-sizing: border-box;
} }
.area-rect label { .area-rect label {
position: absolute;
top: 4px; left: 4px;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: bold; font-weight: bold;
} }
/* Floor selector radios */ /* Floor selector */
.floor-selector { .floor-selector {
position: absolute; position: absolute;
top: 10px; right: 10px; top: 1rem;
right: 1rem;
background: rgba(255,255,255,0.9); background: rgba(255,255,255,0.9);
padding: 0.5rem; padding: 0.5rem;
border-radius: 6px; border-radius: 6px;
@ -151,7 +178,7 @@
/* Spreadsheet-style table wrapper */ /* Spreadsheet-style table wrapper */
#trends-table-container { #trends-table-container {
max-height: 50vh; max-height: 40vh;
overflow: auto; overflow: auto;
border: 1px solid #ddd; border: 1px solid #ddd;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -182,7 +209,6 @@
#trends-table tbody tr:nth-child(even) { #trends-table tbody tr:nth-child(even) {
background: #fafafa; background: #fafafa;
} }
/* Sort arrow indicators */ /* Sort arrow indicators */
.sortable::after { .sortable::after {
content: '▲▼'; content: '▲▼';
@ -196,3 +222,16 @@
.sortable.desc::after { .sortable.desc::after {
content: '▼'; content: '▼';
} }
/* ─── Responsive Tweaks ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.form-input, .form-textarea, select {
width: 100%;
}
.nav-btn {
padding: 0.5rem;
margin-left: 0.25rem;
font-size: 0.9rem;
}
}