diff --git a/wwwroot/css/display.css b/wwwroot/css/display.css index 0346edb..4fbc43a 100644 --- a/wwwroot/css/display.css +++ b/wwwroot/css/display.css @@ -1,6 +1,6 @@ /* === Sunbeam Display Engine === */ * { margin: 0; padding: 0; box-sizing: border-box; } -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; } +html, body { width: 100%; height: 100%; overflow: hidden; background: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; color: #000000; cursor: none; } /* === Scaling Wrapper — keeps aspect ratio, scales to fit screen === */ #scale-wrapper { @@ -10,7 +10,6 @@ html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font top: 50%; left: 50%; transform-origin: center center; - /* transform is set dynamically by JS */ } /* === Slide Container === */ @@ -33,8 +32,8 @@ body[data-transition="none"] .slide-layer { transition: none; } .slide-inner p { font-size: 1.2em; line-height: 1.6; } .slide-inner img { max-width: 100%; max-height: 100%; object-fit: contain; } .slide-inner table { width: auto; margin: 1em auto; border-collapse: collapse; } -.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 table td, .slide-inner table th { padding: 0.6em 1em; border: 1px solid rgba(0, 0, 0, 0.2); } +.slide-inner table th { background: rgba(0, 0, 0, 0.05); font-weight: 600; } .slide-inner iframe.embed-frame { width: 100%; height: 100%; border: none; } /* === ICS Calendar === */ @@ -42,13 +41,13 @@ body[data-transition="none"] .slide-layer { transition: none; } .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'; } .events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1em; flex: 1; overflow: hidden; } -.event-card { background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 1.2em 1.5em; border-left: 4px solid #f0a030; } +.event-card { background: rgba(0, 0, 0, 0.05); border-radius: 12px; padding: 1.2em 1.5em; border-left: 4px solid #f0a030; } .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; } +.event-card .event-time { font-size: 0.95em; opacity: 0.6; margin-bottom: 0.3em; } +.event-card .event-location { font-size: 0.9em; opacity: 0.5; } /* === 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-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(0, 0, 0, 0.08); z-index: 100; } #progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #f0a030, #ff6b6b); transition: width 0.3s linear; } /* === Clock Overlay — centered, larger, dark grey === */ @@ -83,7 +82,7 @@ body[data-transition="none"] .slide-layer { transition: none; } /* === 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; } +.loading-state::after { content: ''; width: 24px; height: 24px; border: 3px solid rgba(0,0,0,0.15); border-top-color: #f0a030; border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 0.8em; } @keyframes spin { to { transform: rotate(360deg); } } .no-slides { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; } .no-slides h1 { font-size: 3em; margin-bottom: 0.3em; }