/* ───────────────────────────────────────── Timeblox — style.css Two-theme system via [data-theme] on . All colours live in CSS custom properties so light / dark swaps are a single attribute change. ───────────────────────────────────────── */ /* ── Tokens ── */ :root { --font-mono: 'JetBrains Mono', 'Fira Mono', 'Menlo', 'Consolas', monospace; --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --container-width: 800px; /* * Type scale — all relative to the 16px base on . * To resize the entire UI, change font-size on html/body only. * * --text-xs: 0.75rem = 12px (labels, control buttons) * --text-sm: 0.875rem = 14px (timestamps, stats, notes, modal chrome) * --text-base: 1rem = 16px (task descriptions, editor) * --text-lg: 1.75rem = 28px (countdown timer) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.75rem; /* * Spacing scale — rem so it moves with the type. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ /* Timing */ --transition-theme: background-color 0.2s, color 0.2s, border-color 0.2s; } /* ── Light mode (default) ── */ [data-theme="light"] { --bg: #ffffff; --bg-subtle: #f5f5f5; --border: #e0e0e0; --text-primary: #111111; --text-secondary: #555555; --text-muted: #999999; --text-past: #bbbbbb; --accent-current: #111111; --bg-current: #f0f0f0; --client-color: #555555; --project-color: #888888; --progress-bg: #e8e8e8; --progress-fill: #111111; --countdown-color: #111111; --modal-bg: #ffffff; --modal-shadow: 0 8px 40px rgba(0,0,0,0.12); --btn-bg: #111111; --btn-color: #ffffff; --btn-cancel-bg: #e8e8e8; --btn-cancel-color:#444444; --editor-bg: #fafafa; --editor-border: #d0d0d0; --overlay-bg: rgba(255,255,255,0.85); } /* ── Dark mode ── */ [data-theme="dark"] { --bg: #0e0e0e; --bg-subtle: #1a1a1a; --border: #2a2a2a; --text-primary: #eeeeee; --text-secondary: #aaaaaa; --text-muted: #555555; --text-past: #444444; --accent-current: #eeeeee; --bg-current: #1e1e1e; --client-color: #aaaaaa; --project-color: #666666; --progress-bg: #222222; --progress-fill: #eeeeee; --countdown-color: #eeeeee; --modal-bg: #111111; --modal-shadow: 0 8px 40px rgba(0,0,0,0.6); --btn-bg: #eeeeee; --btn-color: #111111; --btn-cancel-bg: #2a2a2a; --btn-cancel-color:#aaaaaa; --editor-bg: #0a0a0a; --editor-border: #333333; --overlay-bg: rgba(0,0,0,0.85); } /* ── Reset / base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--bg); color: var(--text-primary); font-family: var(--font-sans); font-size: 16px; /* single source of truth — all rem values derive from here */ transition: var(--transition-theme); } /* ── App wrapper ── */ #app { display: flex; flex-direction: column; height: 100vh; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-6); } /* ── Timeline container ── */ #timeline-container { flex: 1; overflow-y: auto; scrollbar-width: none; } #timeline-container::-webkit-scrollbar { display: none; } /* ── Timeline ── */ #timeline { padding: var(--space-10) 0; } /* ── Individual timeblock row ── */ .timeblock { display: flex; align-items: baseline; gap: var(--space-5); padding: var(--space-2) 0; transition: color 0.3s; } .timeblock .start-time { flex-shrink: 0; width: 4.5rem; /* wide enough for "12:00 pm" at any base size */ font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); text-align: right; } .timeblock .description { flex: 1; font-size: var(--text-base); line-height: 1.4; color: var(--text-secondary); } /* Past tasks */ .timeblock.past .start-time, .timeblock.past .description { color: var(--text-past); } /* Current task */ .timeblock.current { background: var(--bg-current); border-radius: var(--space-1); margin: var(--space-1) calc(var(--space-3) * -1); padding: var(--space-2) var(--space-3); } .timeblock.current .start-time { color: var(--text-secondary); } .timeblock.current .description { color: var(--accent-current); font-weight: 500; } /* Future tasks */ .timeblock.future .description { color: var(--text-secondary); } /* ── Notes ── */ .note { display: flex; gap: var(--space-5); padding: var(--space-1) 0; } .note .note-indent { flex-shrink: 0; width: 4.5rem; } .note .note-text { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; line-height: 1.4; } /* ── Checkbox notes ── */ .checkbox-note { align-items: flex-start; } .checkbox-label { display: flex; align-items: baseline; gap: var(--space-2); cursor: pointer; user-select: none; } .checkbox-label input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 0.8em; height: 0.8em; border: 1.5px solid var(--text-muted); border-radius: 2px; background: transparent; cursor: pointer; position: relative; top: 0.1em; /* optical alignment with text baseline */ transition: background 0.15s, border-color 0.15s; } .checkbox-label input[type="checkbox"]:checked { background: var(--text-muted); border-color: var(--text-muted); } .checkbox-label input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 0.12em; top: -0.01em; width: 0.35em; height: 0.6em; border: 1.5px solid var(--bg); border-top: none; border-left: none; transform: rotate(45deg); } .checkbox-text { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; transition: opacity 0.15s; } .checkbox-label.checked .checkbox-text { opacity: 0.4; text-decoration: line-through; text-decoration-color: var(--text-muted); } /* ── @client and #project inline spans ── */ span.client { color: var(--client-color); font-weight: 500; } span.project { color: var(--project-color); } /* ── Unified top status panel ── */ #status-panel { flex-shrink: 0; border-bottom: 1px solid var(--border); padding: var(--space-4) 0; transition: var(--transition-theme); } /* ── Countdown ── */ #countdown-bar { padding-bottom: var(--space-3); } #countdown-label { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-1); } #countdown-timer { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 400; color: var(--countdown-color); letter-spacing: -0.02em; line-height: 1.1; } #countdown-task { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Progress bar ── */ #progress-bar { height: 2px; background: var(--progress-bg); border-radius: 1px; overflow: hidden; margin-bottom: var(--space-3); transition: var(--transition-theme); } #progress-fill { height: 100%; width: 0%; background: var(--progress-fill); transition: width 1s linear; } /* ── Stats bar ── */ #stats-bar { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-muted); transition: var(--transition-theme); } /* ── Fixed control cluster — top-right ── */ #controls { position: fixed; top: var(--space-4); right: var(--space-4); display: flex; align-items: center; gap: var(--space-3); z-index: 10; } /* Shared style for the text buttons */ #btn-share, #btn-edit, #btn-snap { border: none; background: none; cursor: pointer; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); opacity: 0.5; padding: 0; transition: opacity 0.2s, color 0.2s; line-height: 1; } #btn-share:hover, #btn-edit:hover, #btn-snap:hover { opacity: 1; } /* Snap button active state */ #btn-snap.snap-on { opacity: 0.9; color: var(--text-primary); } /* Theme toggle circle */ #theme-toggle { width: 1.125rem; height: 1.125rem; border-radius: 50%; border: none; background: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.45; transition: opacity 0.2s; } #theme-toggle:hover { opacity: 1; } [data-theme="light"] #theme-icon { display: block; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: #111; } [data-theme="dark"] #theme-icon { display: block; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: transparent; border: 1.5px solid #ccc; } /* ── Modal overlay ── */ #modal-overlay { position: fixed; inset: 0; background: var(--overlay-bg); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); transition: var(--transition-theme); } #modal-overlay.hidden { display: none; } /* ── Modal box ── */ #modal { width: min(var(--container-width), calc(100vw - var(--space-6) * 2)); background: var(--modal-bg); border: 1px solid var(--border); border-radius: var(--space-3); box-shadow: var(--modal-shadow); display: flex; flex-direction: column; overflow: hidden; transition: var(--transition-theme); } #modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); } #modal-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } #modal-hint { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); } #plan-editor { width: 100%; min-height: 24rem; max-height: 60vh; background: var(--editor-bg); border: none; border-bottom: 1px solid var(--editor-border); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-base); line-height: 1.7; padding: var(--space-4) var(--space-5); resize: vertical; outline: none; tab-size: 2; transition: var(--transition-theme); } #modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); } #btn-cancel, #btn-save { border: none; border-radius: var(--space-1); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; padding: var(--space-2) var(--space-4); cursor: pointer; transition: opacity 0.15s; } #btn-cancel:hover, #btn-save:hover { opacity: 0.75; } #btn-cancel { background: var(--btn-cancel-bg); color: var(--btn-cancel-color); } #btn-save { background: var(--btn-bg); color: var(--btn-color); } /* ── Utility ── */ .hidden { display: none !important; } /* ── Share toast ── */ #share-toast { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%); background: var(--text-primary); color: var(--bg); font-size: var(--text-xs); font-family: var(--font-mono); padding: var(--space-2) var(--space-4); border-radius: var(--space-1); white-space: nowrap; opacity: 1; transition: opacity 0.5s ease; z-index: 200; } #share-toast.toast-fade { opacity: 0; }