/* ========================================================= Lifework Clock — style.css Dark/light theme via [data-theme] on ========================================================= */ /* ---- Custom properties ---- */ :root { --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Menlo', 'Consolas', monospace; --radius: 10px; --transition: 0.2s ease; } [data-theme="dark"] { --bg: #0f0f1a; --bg-card: #1a1a2e; --bg-input: #252540; --bg-hover: #2a2a48; --border: #3a3a5c; --text: #e2e2f0; --text-dim: #8888aa; --accent: #7c7cff; --accent-hover:#9898ff; --danger: #ff5555; --valid-color: #4ade80; --invalid-color:#ff7070; --shadow: 0 4px 24px rgba(0,0,0,0.5); --svg-bg: #16162a; --svg-hole: #0f0f1a; } [data-theme="light"] { --bg: #f0f0f8; --bg-card: #ffffff; --bg-input: #f4f4fb; --bg-hover: #eaeaf8; --border: #d0d0e8; --text: #1a1a2e; --text-dim: #6666aa; --accent: #5050dd; --accent-hover:#3535bb; --danger: #cc2222; --valid-color: #16a34a; --invalid-color:#cc2222; --shadow: 0 4px 16px rgba(0,0,0,0.12); --svg-bg: #e8e8f8; --svg-hole: #f0f0f8; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: 14px; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; transition: background var(--transition), color var(--transition); } /* ---- Header ---- */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border); flex-shrink: 0; } .header-left { display: flex; flex-direction: column; gap: 2px; } .app-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: var(--text); } .app-subtitle { font-size: 12px; color: var(--text-dim); } .header-right { display: flex; align-items: center; gap: 8px; } /* ---- Buttons ---- */ .btn-primary, .btn-secondary, .btn-text, .btn-icon, .btn-icon-lg { cursor: pointer; border: none; border-radius: var(--radius); font-family: inherit; font-size: 13px; transition: background var(--transition), color var(--transition), opacity var(--transition); } .btn-primary { display: inline-flex; align-items: center; gap: 5px; background: var(--accent); color: #fff; padding: 8px 14px; font-weight: 600; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--bg-input); color: var(--text); padding: 7px 12px; border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-hover); } .btn-text { background: transparent; color: var(--text-dim); padding: 5px 8px; } .btn-text:hover { color: var(--text); background: var(--bg-hover); } .btn-icon { background: transparent; color: var(--text-dim); padding: 4px 7px; font-size: 15px; } .btn-icon:hover { color: var(--accent); } .btn-icon.btn-danger:hover { color: var(--danger); } .btn-icon-lg { background: transparent; color: var(--text); font-size: 20px; padding: 4px 8px; } .btn-icon-lg:hover { opacity: 0.7; } /* ---- Toolbar ---- */ .toolbar { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border); flex-shrink: 0; } .mode-tabs { display: flex; gap: 4px; background: var(--bg-input); border-radius: var(--radius); padding: 3px; } .tab { cursor: pointer; background: transparent; border: none; border-radius: 8px; padding: 5px 16px; font-size: 13px; font-family: inherit; color: var(--text-dim); transition: background var(--transition), color var(--transition); } .tab.active, .tab[aria-selected="true"].active { background: var(--accent); color: #fff; } .tab:hover:not(.active) { background: var(--bg-hover); color: var(--text); } .preset-wrap { display: flex; align-items: center; gap: 8px; margin-left: auto; } .preset-label { color: var(--text-dim); font-size: 13px; } .preset-select { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; font-size: 13px; font-family: inherit; cursor: pointer; } .preset-select:hover { border-color: var(--accent); } /* ---- Main layout ---- */ .app-main { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 0; overflow: hidden; } /* ---- Clock section ---- */ .clock-section { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 24px 20px 16px; gap: 12px; flex-shrink: 0; } /* SVG elements */ .svg-bg { fill: var(--svg-bg); } .svg-hole { fill: var(--svg-hole); } .slice { cursor: pointer; transition: opacity 0.15s; outline: none; } .slice:hover, .slice:focus { opacity: 1 !important; filter: brightness(1.15); } .tick-major { stroke: var(--text-dim); stroke-width: 2; } .tick-minor { stroke: var(--border); stroke-width: 1; } .hour-label { font-size: 12px; fill: var(--text-dim); font-family: var(--font-mono); } .center-total { font-size: 22px; font-weight: 700; fill: var(--text); font-family: var(--font-sans); } .center-ok { font-size: 16px; fill: var(--valid-color); } .center-warn { font-size: 16px; fill: var(--invalid-color); } /* Validation banner */ .validation { padding: 7px 16px; border-radius: var(--radius); font-size: 13px; text-align: center; min-width: 300px; } .validation.valid { background: rgba(74,222,128,0.1); color: var(--valid-color); border: 1px solid var(--valid-color); } .validation.invalid { background: rgba(255,112,112,0.1); color: var(--invalid-color); border: 1px solid var(--invalid-color); } /* ---- Sidebar ---- */ .sidebar { border-left: 1px solid var(--border); padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: var(--bg); } .sidebar-header { display: flex; align-items: center; justify-content: space-between; } .section-title { font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } /* ---- Block list ---- */ .block-list { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 0; } .block-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); transition: background var(--transition); } .block-item:hover { background: var(--bg-hover); } .swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .block-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .block-info strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .block-info span { font-size: 11px; color: var(--text-dim); } /* ---- Stats ---- */ .stats-title { margin-top: 4px; } .stats-list { display: flex; flex-direction: column; gap: 6px; } .stat-row { display: grid; grid-template-columns: 14px 80px 1fr 60px; align-items: center; gap: 8px; } .stat-name { font-size: 12px; color: var(--text-dim); white-space: nowrap; } .stat-bar-wrap { height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; } .stat-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .stat-val { font-size: 11px; color: var(--text-dim); text-align: right; font-family: var(--font-mono); } /* ---- Export row ---- */ .export-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .export-row .btn-secondary { font-size: 12px; padding: 6px 10px; } /* ---- Modal ---- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(3px); } .modal-backdrop[hidden] { display: none; } .modal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px 28px 24px; width: min(400px, 92vw); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; } .modal-title { font-size: 17px; font-weight: 700; } .block-form { display: flex; flex-direction: column; gap: 12px; } .form-row { display: flex; flex-direction: column; gap: 5px; } .form-row label { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .form-row input, .form-row select { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: inherit; transition: border-color var(--transition); } .form-row input:focus, .form-row select:focus { outline: none; border-color: var(--accent); } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } /* ---- Scrollbar styling ---- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ---- Responsive ---- */ @media (max-width: 768px) { .app-main { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: visible; } .sidebar { border-left: none; border-top: 1px solid var(--border); } .clock-section svg { width: 100%; height: auto; max-width: 360px; } .stat-row { grid-template-columns: 14px 70px 1fr 55px; } } @media (max-width: 480px) { .toolbar { flex-wrap: wrap; } .preset-wrap { margin-left: 0; } .app-header { padding: 10px 14px; } .sidebar { padding: 12px 14px; } }