/* Light mode (default) */ :root { --bg: #e6e6e6; --bg-dark: #cccccc; --text: #222; --text-light: rgb(218, 218, 218); --text-muted: #555; --text-time: #28b90a; --text-time-degraded: orange; --text-time-offline: red; --text-time-disabled: rgb(182, 182, 182); --border: #999; --link: #0066cc; --header-bg: #ffffff; --bevel-dark: rgba(0,0,0,0.30); --sites-list-bg: #ffffff; --sites-list-text: #4b4b4b; } /* Dark mode — activated by adding class "dark-mode" to . NOT driven by system preference. Will be wired to a user toggle later. Includes all variable overrides needed for a complete dark theme. */ html.dark-mode { --bg: #050505; --bg-dark: #1a1a1a; --text: #e0e0e0; --text-time: #5cf814; --text-muted: #aaa; --border: #555; --link: #6eb3f7; --header-bg: #1e1e1e; --bevel-dark: rgba(0, 0, 0, 0.7); --sites-list-bg: #1e1e1e; --sites-list-text: rgb(204, 204, 204); } *, *::before, *::after { box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; margin: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } #sites-wrapper { background: var(--sites-list-bg); flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: none; } #sites-wrapper::-webkit-scrollbar { display: none; } /* Top header: title on the left, control buttons on the right. On mobile, stacks vertically with title centered and buttons below. */ #top-header-wrapper { display: flex; align-items: center; justify-content: space-between; padding-inline: 15px; } #header-title { display: flex; flex-direction: column; } #header-brand { font-size: 1.8em; font-weight: bold; color: var(--text); } #header-subtitle { font-size: 0.9em; color: var(--text-muted); } /* Container for admin button and future controls */ #header-controls { display: flex; gap: 8px; align-items: center; margin-right: 5px; } #admin-button { cursor: pointer; padding: 6px 12px; font-size: 0.85em; border: 1px solid var(--border); border-radius: 4px; background: rgb(117, 206, 0); color: var(--text-dark); } #admin-button.not-admin { background: var(--bg-dark); } #app { padding-left: 15px; padding-right: 15px; flex: 1; min-height: 0; display: flex; flex-direction: column; } /* "Sites" bar with control buttons on the right */ #app-header { position: relative; height: 50px; background: var(--header-bg); padding-left: 10px; padding-right: 10px; border-top-left-radius: 15px; border-top-right-radius: 15px; display: flex; align-items: center; justify-content: space-between; } /* the beveled "cut" */ #app-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; /* creates the angled “cut in” look */ background: linear-gradient(to bottom, var(--bevel-dark), rgba(0, 0, 0, 0)); /* pushes it inward */ box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3); } #app-header-title { font-size: 1.5em; font-weight: bold; line-height: 1; } a { color: var(--link); } h2 { font-size: 1.25em; } .site { position: relative; padding-left: 30px; padding-right: 15px; padding-bottom: 3px; cursor: pointer; display: flex; align-items: center; /* vertical center */ gap: 12px; min-height: 40px; color: var(--sites-list-text); } .site::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0px; height: 3px; /* creates the angled “cut in” look */ background: linear-gradient(to bottom, var(--bevel-dark), rgba(0, 0, 0, 0)); /* pushes it inward */ box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3); } .site:hover { background: var(--bg); } .led { width: 12px; height: 12px; border-radius: 50%; /* prevent flex from squishing the circle into an oval on narrow screens */ flex-shrink: 0; display: inline-block; vertical-align: middle; } /* online = green */ .led.online { background: #2bff00; box-shadow: inset 0 0 4px rgb(130, 255, 80), /* inner “hot core” */ 0 0 6px rgba(80, 255, 0, 0.9), /* tight glow */ 0 0 16px rgba(80, 255, 0, 0.6), /* mid glow */ 0 0 30px rgba(80, 255, 0, 0.3); /* wide soft glow */ } /* degraded = orange */ .led.degraded { background: #ff6600; box-shadow: inset 0 0 4px rgb(255, 159, 80), /* inner “hot core” */ 0 0 6px rgba(255, 123, 0, 0.9), /* tight glow */ 0 0 16px rgba(255, 136, 0, 0.6), /* mid glow */ 0 0 30px rgba(255, 115, 0, 0.3); /* wide soft glow */ } /* offline = red */ .led.offline { background: #ff0000; box-shadow: inset 0 0 4px rgb(255, 80, 80), /* inner “hot core” */ 0 0 6px rgba(255, 0, 0, 0.9), /* tight glow */ 0 0 16px rgba(255, 0, 0, 0.6), /* mid glow */ 0 0 30px rgba(255, 0, 0, 0.3); /* wide soft glow */ } /* disabled = gray */ .led.disabled { background: #525252; } .site-data-box { } [data-ref="site-name"] { width: 600px; font-size: 1.3em; font-weight: bold; } [data-ref="site-view-count"] { width: 80px; } [data-ref="site-last-updated"] { } .text-time { color: var(--text-time); } .text-time.degraded { color: var(--text-time-degraded); } .text-time.offline { color: var(--text-time-offline); } .text-time.disabled { color: var(--text-time-disabled); } .viewer-wrapper { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.7); padding: 15px; box-sizing: border-box; cursor: default; } .viewer-wrapper.hidden { display: none; } .viewer { width: 100%; height: 100%; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; } .view-header { flex: 0 0 50px; position: relative; border-bottom: 1px solid var(--border); background: var(--bg-dark); padding-left: 15px; display: flex; align-items: center; } .close-button { cursor: pointer; padding: 8px 16px; font-size: 1em; border: 1px solid var(--border); border-radius: 4px; background: rgb(168, 17, 17); color: var(--text-light); } .close-button:hover { background: red; } .view-title { font-size: 1.8em; font-weight: bold; margin-left: 25px; margin-right: 25px; padding-inline: 10px; } .enable-button { cursor: pointer; padding: 8px 16px; font-size: 1em; border: 1px solid var(--border); border-radius: 4px; background: rgb(117, 206, 0); color: var(--text-light); } .enable-button.disabled { background: var(--bg-dark); color: var(--text-dark); } .view-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; } .view-sidebar-container { min-height: 0; overflow: auto; background: var(--bg-dark); } .view-list-header { text-align: center; height: 30px; line-height: 30px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-weight: bold; } [data-ref="view-list-item"] { position: relative; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 1.5em; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); } [data-ref="view-list-item"].selected { background: var(--bg); border-right: none; } .view-item-display { flex: 1; min-width: 0; cursor: pointer; } .view-item-display.offline { color: rgb(255, 60, 0); } [data-ref="view-list-item"] .enable-button { flex-shrink: 0; padding: 2px 6px; font-size: 0.5em; } /* Vertical scroll container for all view cards */ .view-container { min-height: 0; overflow: hidden; } .view-scroll { width: 100%; height: 100%; overflow-y: auto; scrollbar-width: none; } .view-scroll::-webkit-scrollbar { display: none; } /* Each view card: header bar with name + timestamp, then the image */ .view-card { border-bottom: 2px solid var(--border); padding: 8px 12px; } .view-card-header { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 6px 12px; background: var(--bg-dark); border-bottom: 1px solid var(--border); width: 95%; margin: 0 auto; box-sizing: border-box; } .view-card-name { font-weight: bold; font-size: 1em; } .view-card-time { font-size: 1em; font-weight: bold; } .view-card-image { width: 95%; display: block; object-fit: contain; margin: 0 auto; } .hide-from-user { display: none; } .display-none { display: none; } /* Mobile: stack site name and timestamp into two tight lines. LED is absolutely positioned and vertically centered against the full row. */ @media (max-width: 768px) { /* Header stacks vertically and centers on mobile */ #top-header-wrapper { flex-direction: column; align-items: center; text-align: center; padding-top: 10px; padding-bottom: 10px; } #header-title { align-items: center; } .site { flex-wrap: wrap; align-items: flex-start; align-content: center; gap: 0; padding-top: 6px; padding-bottom: 6px; padding-left: 36px; } /* Vertically center the LED against the full row */ .site .led { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); } /* Site name fills the row */ [data-ref="site-name"] { width: auto; flex: 1 1 100%; font-size: 1.1em; line-height: 1.3; } /* Timestamp directly under the name */ [data-ref="site-last-updated"] { flex: 1 1 100%; font-size: 0.8em; line-height: 1.3; } /* Viewer: stack sidebar above the image scroll on mobile */ .view-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } /* Sidebar collapsed by default on mobile — only header visible */ .view-sidebar-container { max-height: none; overflow: hidden; } .view-sidebar-container .view-list { display: none; } /* When expanded, the sidebar overlays most of the screen */ .view-sidebar-container.expanded .view-list { display: block; max-height: 80vh; overflow-y: auto; } /* Make the header look tappable on mobile */ .view-list-header { cursor: pointer; } .view-title { font-size: 1.2em; margin-left: 10px; margin-right: 10px; } }