jessikitty/ScratchingPost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Light mode default, auth, Posts rename, display scaling, TinyMCE improvements

Browse Source
This commit is contained in:
Jess Rogerson
2026-05-21 14:22:46 +10:00
parent 51d086dab9
commit 39fcd9ec6e
154 changed files with 12897 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wwwroot/css/display.css
+52 -5
View File
@@ -1,13 +1,30 @@
/* === Sunbeam Display Engine === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a14; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; color: #ffffff; cursor: none; }
#display-container { position: relative; width: 100vw; height: 100vh; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; color: #ffffff; cursor: none; }
/* === Scaling Wrapper — keeps aspect ratio, scales to fit screen === */
#scale-wrapper {
width: var(--display-width);
height: var(--display-height);
position: absolute;
top: 50%;
left: 50%;
transform-origin: center center;
/* transform is set dynamically by JS */
}
/* === Slide Container === */
#display-container { position: relative; width: 100%; height: 100%; }
/* === Slide Layers === */
.slide-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; overflow: hidden; }
.slide-layer.active { opacity: 1; z-index: 2; }
body[data-transition="slide"] .slide-layer { transition: transform 0.8s ease-in-out, opacity 0.6s ease-in-out; transform: translateX(100%); }
body[data-transition="slide"] .slide-layer.active { transform: translateX(0); }
body[data-transition="slide"] .slide-layer.slide-out { transform: translateX(-100%); }
body[data-transition="none"] .slide-layer { transition: none; }
/* === Slide Content === */
.slide-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; }
.slide-inner .content-wrap { width: 100%; height: 100%; overflow: hidden; }
.slide-inner h1 { font-size: 3em; font-weight: 700; }
@@ -19,6 +36,8 @@ body[data-transition="none"] .slide-layer { transition: none; }
.slide-inner table td, .slide-inner table th { padding: 0.6em 1em; border: 1px solid rgba(255, 255, 255, 0.2); }
.slide-inner table th { background: rgba(255, 255, 255, 0.1); font-weight: 600; }
.slide-inner iframe.embed-frame { width: 100%; height: 100%; border: none; }
/* === ICS Calendar === */
.ics-display { width: 100%; height: 100%; padding: 3em; display: flex; flex-direction: column; overflow: hidden; }
.ics-display h2 { font-size: 2.4em; font-weight: 700; margin-bottom: 0.8em; display: flex; align-items: center; gap: 0.4em; }
.ics-display h2::before { content: '\01F4C5'; }
@@ -27,14 +46,42 @@ body[data-transition="none"] .slide-layer { transition: none; }
.event-card .event-title { font-size: 1.3em; font-weight: 600; margin-bottom: 0.3em; }
.event-card .event-time { font-size: 0.95em; opacity: 0.75; margin-bottom: 0.3em; }
.event-card .event-location { font-size: 0.9em; opacity: 0.6; }
/* === Progress Bar === */
#progress-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(255, 255, 255, 0.1); z-index: 100; }
#progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #f0a030, #ff6b6b); transition: width 0.3s linear; }
#clock-overlay { position: fixed; bottom: 16px; right: 20px; z-index: 100; text-align: right; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); pointer-events: none; }
#clock-time { display: block; font-size: 1.6em; font-weight: 600; opacity: 0.7; font-variant-numeric: tabular-nums; }
#clock-date { display: block; font-size: 0.85em; opacity: 0.5; }
/* === Clock Overlay — centered, larger, dark grey === */
#clock-overlay {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 50;
text-align: center;
pointer-events: none;
}
#clock-time {
display: block;
font-size: 2.4em;
font-weight: 600;
color: rgba(80, 80, 80, 0.6);
font-variant-numeric: tabular-nums;
}
#clock-date {
display: block;
font-size: 1.1em;
color: rgba(80, 80, 80, 0.45);
}
/* === Status Indicator === */
#status-dot { position: fixed; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #4caf50; z-index: 100; opacity: 0.6; }
#status-dot.error { background: #f44336; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
/* === Loading / Empty === */
.loading-state { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.5em; opacity: 0.5; }
.loading-state::after { content: ''; width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #f0a030; border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 0.8em; }
@keyframes spin { to { transform: rotate(360deg); } }