/* styles1.css */ *, body { font-family: Arial, sans-serif; font-size: 11pt; margin: 0; padding: 0; } .img { display: block; max-width: 77%; /* never exceed its parent’s width */ height: auto; /* preserve aspect ratio */ max-height: 77vh; /* never be taller than the viewport */ margin: 20px auto; object-fit: contain; /* you can actually drop this once you’re using auto dimensions */ } .container { text-align: center; padding: 8px 20px 20px; /* was 20px 20px 20px */ } .header { font-size: 18px; padding: 20px; } #logout-btn { padding: 10px 20px; font-size: 16px; cursor: pointer; } .variable-buttons { display: flex; flex-wrap: wrap; justify-content: center; margin: 8px 0 10px; /* was 15px 0 */ gap: 10px; } .variable-button { flex: 1 1 100px; max-width: 120px; padding: 10px; font-size: 14px; cursor: pointer; background-color: #f0f0f0; border: 2px solid transparent; border-radius: 4px; text-align: center; } .variable-button.active { border-color: black; /* your black frame */ background-color: #007BFF; color: white; } .variable-button:hover { background-color: #ddd; } /* kill the native focus ring entirely */ .variable-button:focus { outline: none; } .instructions { font-size: 14px; text-align: center; font-weight: bold; margin-bottom: 6px; } .frame-info { text-align: center; margin: 4px 0; font-weight: bold; } #frameSlider { width: 50%; margin: 8px auto; display: block; } @media (max-width: 768px) { .variable-button { flex: 1 1 100%; max-width: none; } .variable-buttons { flex-direction: column; } } /* ───────── Dark / Light Theme Variables ───────── */ :root { /* background & text */ --bg-color: #ffffff; --text-color: #000000; /* buttons */ --btn-bg: #f0f0f0; --btn-hover-bg: #ddd; --btn-active-bg: #007BFF; --btn-active-color: #fff; /* slider */ --slider-track: #ccc; --slider-thumb: #007BFF; } /* when is set… */ .dark-mode { --bg-color: #121212; --text-color: #e0e0e0; --btn-bg: #333; --btn-hover-bg: #444; --btn-active-bg: #0056b3; --btn-active-color: #fff; --slider-track: #444; --slider-thumb: #66aaff; } /* ───────── Apply the Variables ───────── */ body { background: var(--bg-color); color: var(--text-color); } .variable-button { background-color: var(--btn-bg); color: var(--text-color); } .variable-button:hover { background-color: var(--btn-hover-bg); } .variable-button.active { background-color: var(--btn-active-bg); color: var(--btn-active-color); } /* ─── Vars + Grid sit side-by-side ─── */ .controls-row { display: flex; align-items: center; justify-content: center; /* center in page */ gap: 20px; /* space between buttons and grid */ margin-bottom: 12px; /* give a little breathing room */ } /* slider track and thumb */ #frameSlider { background: var(--slider-track); } #frameSlider::-webkit-slider-thumb { background: var(--slider-thumb); } /* (you can add the other vendor-prefix rules if you need them) */ /* ───────── Dark Mode Toggle Button ───────── */ #dark-mode-toggle { margin-left: 10px; padding: 6px 10px; font-size: 1.2em; background: var(--btn-bg); color: var(--text-color); border: none; border-radius: 4px; cursor: pointer; } #dark-mode-toggle:hover { background: var(--btn-hover-bg); } /* ───────── Loading Spinner ───────── */ .image { position: relative; } /* spinner: centered overlay */ .spinner { display: none; /* hide until JS calls .show() */ position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; /* half of width/height */ border: 4px solid var(--slider-track); border-top-color: var(--btn-active-bg); border-radius: 50%; animation: spin 0.8s linear infinite; z-index: 10; } /* hide spinner once the img has the “loaded” class */ .img.loaded + .spinner { display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* ───────── Hour-button Grid Styles ───────── */ .hour-grid { display: grid; grid-auto-flow: row; /* fill left→right, then wrap down */ gap: 8px; /* we’ll set the template-rows / -columns dynamically from JS */ } .hour-grid button { padding: 6px; border: none; border-radius: 4px; background: var(--btn-bg); color: var(--text-color); cursor: pointer; font-size: 0.9em; } .hour-grid button.waiting { opacity: 0.6; } .hour-grid button.loaded { background: var(--btn-active-bg); color: var(--btn-active-color); } .hour-grid button.unavailable { background: #666; color: #ccc; cursor: not-allowed; }