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 07:12:50 +00:00
parent 619cb8ef26
commit 6e3a095714
1 changed files with 75 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
public/styles.css
View File

@ -1,5 +1,3 @@
/* styles.css */
/* ─── RESET & BASE ─────────────────────────────────────────────────────────── */ /* ─── RESET & BASE ─────────────────────────────────────────────────────────── */
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -14,51 +12,91 @@ body {
overflow: hidden; overflow: hidden;
} }
/* ─── HEADER & NAV ─────────────────────────────────────────────────────────── */ /* ─── HEADER & NAVIGATION ─────────────────────────────────────────────────── */
.main-header { .main-header {
background-color: #232F3E; background-color: #232F3E;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
position: fixed; position: fixed; top: 0; left: 0; right: 0;
top: 0; left: 0; right: 0;
z-index: 1000; z-index: 1000;
} }
.logo { .logo { height: 40px; margin-right: 1rem; }
height: 40px;
margin-right: 1rem;
}
.header-title { .header-title {
color: #fff; color: #fff; font-size: 1.2rem; font-weight: bold;
font-size: 1.2rem;
font-weight: bold;
margin-right: auto; margin-right: auto;
} }
.nav-btn { .nav-btn {
background-color: #FF9900; background-color: #FF9900; color: #111;
color: #111; border: none; border-radius: 5px;
border: none; padding: 0.5rem 1rem; margin-left: 0.5rem;
border-radius: 5px; cursor: pointer; font-weight: bold;
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 WRAPPER ─────────────────────────────────────────────────────────── */ /* ─── PAGE CONTAINERS ──────────────────────────────────────────────────────── */
.page-container { .page-container {
position: absolute; position: absolute;
top: 70px; /* height of header */ top: 70px; /* header height */
left: 0; right: 0; bottom: 0; left: 0; right: 0; bottom: 0;
overflow: auto; overflow: auto;
padding: 1rem; padding: 1rem;
background: #fff; background: #fff;
} }
/* ─── INPUT/FORM STYLES ────────────────────────────────────────────────────── */ /* ─── 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) ─────────────────────────────────────────────── */
.form-input, .form-input,
.form-textarea, .form-textarea,
select { select {
@ -71,77 +109,20 @@ select {
font-size: 1rem; font-size: 1rem;
} }
fieldset { fieldset {
border: 1px solid #ccc; border: 1px solid #ccc; border-radius: 6px;
border-radius: 6px; margin: 1rem 0; padding: 1rem;
margin: 1rem 0;
padding: 1rem;
}
legend {
padding: 0 0.5rem;
font-weight: bold;
} }
legend { padding: 0 0.5rem; font-weight: bold; }
.big-button { .big-button {
background-color: #28a745; background-color: #28a745; color: white;
color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 6px;
padding: 0.75rem 1.5rem; cursor: pointer; font-size: 1rem;
border: none; margin: 1rem auto; display: block;
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; }
/* ─── HEATMAP PAGE ─────────────────────────────────────────────────────────── */ /* ─── TRENDS PAGE (for reference) ────────────────────────────────────────── */
#heatmap-container { /* ... your existing trends styles go here ... */
width: 100%;
height: 100%;
position: relative;
overflow: auto;
background-color: #f9f9f9;
}
.map-svg-container {
min-width: 2000px;
min-height: 400px;
transform-origin: 0 0;
cursor: grab;
}
.map-svg-container:active {
cursor: grabbing;
}
.dock-door {
fill: #ccc;
stroke: #999;
stroke-width: 1;
cursor: pointer;
}
.dock-door:hover {
stroke: #FF9900;
stroke-width: 2;
}
.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 {
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 ───────────────────────────────────────────────────────────── */
/* make this container a flex column filling available space */ /* make this container a flex column filling available space */
.page-container.trends { .page-container.trends {
display: flex; display: flex;
@ -221,5 +202,4 @@ legend {
select { select {
width: 100%; width: 100%;
} }
} }