gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Beta 6

Browse Source 
Now with concrete, vehicle and home temps and profiles
This commit is contained in:
fraxle
2026-05-14 22:57:42 +01:00
parent 34f773ae79
commit e0712300e5
4 changed files with 489 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/table.css
+78 -4
View File
@@ -248,6 +248,69 @@
The body scroller (.utci-tbody-scroll) owns the horizontal scrollbar. */
border: 1.5px solid #c9b08a;
background: #fffcf2;
position: relative; /* needed for ::before / ::after pseudo-element indicators */
}
/* ── SCROLL INDICATORS ──────────────────────────────────────────────────
Fade + chevron overlays on the left/right edges of the table wrap.
They appear only when there is content to scroll in that direction,
driven by the scroll-fade-left / scroll-fade-right classes toggled by JS. */
.utci-table-wrap::before,
.utci-table-wrap::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 48px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 6; /* above sticky header (z-index 5) */
}
/* Left fade — warm cream fading to transparent rightward */
.utci-table-wrap::before {
left: 0;
background: linear-gradient(to right, rgba(240,228,196,0.92) 0%, transparent 100%);
}
/* Right fade — warm cream fading to transparent leftward */
.utci-table-wrap::after {
right: 0;
background: linear-gradient(to left, rgba(240,228,196,0.92) 0%, transparent 100%);
}
.utci-table-wrap.scroll-fade-left::before { opacity: 1; }
.utci-table-wrap.scroll-fade-right::after { opacity: 1; }
/* Chevron arrows — sit on top of the fade, centred vertically */
.utci-table-wrap .utci-scroll-chevron {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 7;
pointer-events: none;
color: #8a6a3a;
font-size: 18px;
line-height: 1;
opacity: 0;
transition: opacity 0.2s ease;
user-select: none;
}
.utci-table-wrap .utci-scroll-chevron.left { left: 6px; }
.utci-table-wrap .utci-scroll-chevron.right { right: 6px; }
.utci-table-wrap.scroll-fade-left .utci-scroll-chevron.left { opacity: 1; }
.utci-table-wrap.scroll-fade-right .utci-scroll-chevron.right { opacity: 1; }
/* Grab cursor on the body scroller to hint drag-to-scroll */
.utci-tbody-scroll {
cursor: grab;
user-select: none; /* prevent text highlighting during drag */
-webkit-user-select: none;
}
.utci-tbody-scroll:active {
cursor: grabbing;
}
/* ── STICKY HEADER STRIP ────────────────────────────────────────────────
@@ -387,7 +450,7 @@
/* Night-time hours get a slightly muted text colour */
.utci-table tbody tr.is-night td {
color: #c0a880;
color: #7a5c30;
}
/* The time cell — uses the display serif instead of monospace */
@@ -398,6 +461,17 @@
color: #1e1208 !important;
}
@media (max-width: 800px) {
.utci-time {
font-size: 15px;
}
.utci-cell-hero {
font-size: 15px !important;
padding: 5px 12px;
min-width: 60px;
}
}
/* The coloured pill inside UTCI / UTCI+P cells.
The pill's BACKGROUND comes from inline styles in app.js
(the utciCategory() function decides which thermal-stress colour
@@ -415,10 +489,10 @@
/* Hero variant used for the UTCI+P column — the headline number.
Bigger, bolder, more breathing room so the eye lands here first. */
.utci-cell-hero {
padding: 7px 16px;
font-size: 19px;
padding: 6px 4px;
font-size: 17px;
font-weight: 700;
min-width: 76px;
min-width: 63px;
letter-spacing: 0.01em;
box-shadow: 0 1px 0 rgba(0,0,0,0.15) inset, 0 0 0 1px rgba(255,255,255,0.08) inset;
}