@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --bg: #f7f7f8; --surface: #ffffff; --surface-2: #f1f2f4; --text: #1c1e21; --text-dim: #6b7280; --border: #e4e6ea; --grid-line: #eef0f2; --accent: #6366f1; --danger: #e5484d; --hour: 48px; /* keep in sync with HOUR_PX in app.js */ --radius: 12px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); --anim-speed: 1; /* set by Settings → Animations; divide durations by it */ color-scheme: light; } /* ---------- themes ---------- Each block overrides the design tokens above. Keep the id list in sync with THEMES in app.js (which also owns the light/dark flag on ). */ :root[data-theme="paper"] { --bg: #f4ecdf; --surface: #fbf5ea; --surface-2: #efe4d1; --text: #43382a; --text-dim: #8a7963; --border: #e0d2ba; --grid-line: #ebe0cd; --accent: #b5651d; --danger: #bc4b3c; --shadow: 0 1px 2px rgba(90,60,20,.06), 0 8px 24px rgba(90,60,20,.10); color-scheme: light; } :root[data-theme="mint"] { --bg: #eef4f1; --surface: #fbfefc; --surface-2: #e3ede8; --text: #1c2b26; --text-dim: #5d726b; --border: #d3e2db; --grid-line: #e2ece7; --accent: #0f9d78; --danger: #e5484d; --shadow: 0 1px 2px rgba(0,40,30,.05), 0 8px 24px rgba(0,40,30,.08); color-scheme: light; } :root[data-theme="rose"] { --bg: #f9eef1; --surface: #fffafb; --surface-2: #f2e0e5; --text: #3a2930; --text-dim: #8a6b74; --border: #ecd3da; --grid-line: #f2e2e6; --accent: #d6336c; --danger: #e5484d; --shadow: 0 1px 2px rgba(80,20,40,.05), 0 8px 24px rgba(80,20,40,.09); color-scheme: light; } :root[data-theme="dark"] { --bg: #0c0d0f; --surface: #161719; --surface-2: #1e2023; --text: #e8e9ea; --text-dim: #9aa0a6; --border: #2a2c30; --grid-line: #212327; --accent: #7c7ff2; --danger: #ff6369; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.45); color-scheme: dark; } :root[data-theme="midnight"] { --bg: #0b1120; --surface: #131c31; --surface-2: #1b273f; --text: #e2e8f5; --text-dim: #8b9bbd; --border: #26324c; --grid-line: #1d2840; --accent: #5b9dff; --danger: #ff6369; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.5); color-scheme: dark; } :root[data-theme="forest"] { --bg: #0b130f; --surface: #131f18; --surface-2: #1b2a21; --text: #e0ece4; --text-dim: #8aa596; --border: #25382c; --grid-line: #1c2c22; --accent: #3fbf7f; --danger: #ff6369; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.5); color-scheme: dark; } :root[data-theme="dracula"] { --bg: #1e1f29; --surface: #282a36; --surface-2: #343746; --text: #f8f8f2; --text-dim: #9ea0b0; --border: #3d4051; --grid-line: #313342; --accent: #bd93f9; --danger: #ff5555; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.5); color-scheme: dark; } :root[data-theme="nord"] { --bg: #242933; --surface: #2e3440; --surface-2: #3b4252; --text: #eceff4; --text-dim: #a0a8b7; --border: #434c5e; --grid-line: #39404f; --accent: #88c0d0; --danger: #bf616a; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.45); color-scheme: dark; } :root[data-theme="coffee"] { --bg: #17110d; --surface: #211913; --surface-2: #2d221a; --text: #efe4d8; --text-dim: #b39d88; --border: #3a2c22; --grid-line: #2b2019; --accent: #d99a4e; --danger: #ff6369; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.55); color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } /* beats .field { display: flex } */ html, body { height: 100%; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* ---------- title bar ---------- */ .titlebar { background: var(--surface); padding: 22px 24px 10px; } .app-title { margin: 0; font-size: clamp(1.5rem, 3vw + 0.7rem, 2.55rem); font-weight: 800; letter-spacing: -0.028em; line-height: 1.1; color: var(--text); /* fallback if background-clip:text is unsupported */ min-height: 1.15em; /* hold the row height while it types */ } /* Themed heading: an accent → text gradient across the letters. Uses the live --accent / --text tokens, so it follows every theme, Automatic included. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { #app-title-text { background-image: linear-gradient( 100deg, var(--accent), color-mix(in srgb, var(--accent) 34%, var(--text)) 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } #app-title-text::after { /* underline / "bottom" caret, like a terminal */ content: ""; display: inline-block; width: 0.62em; height: 0.11em; margin-left: 0.06em; vertical-align: -0.1em; background: var(--accent); -webkit-text-fill-color: currentColor; /* keep the bar solid, not clipped */ animation: title-caret 1.05s steps(1, end) infinite; /* fixed blink — not scaled by --anim-speed */ } .app-title.typing #app-title-text::after { /* solid while characters land */ animation: none; opacity: 1; } @keyframes title-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #app-title-text::after { animation: none; } } /* Settings → Animations = off: nuke every animation & transition, hide the caret */ body.no-anim *, body.no-anim *::before, body.no-anim *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } body.no-anim #app-title-text::after { display: none; } @media (max-width: 620px) { .titlebar { padding: 14px 12px 6px; } } /* ---------- toolbar ---------- */ .toolbar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; } .tb-group { display: flex; align-items: center; gap: 8px; } .tb-group:nth-child(2) { flex: 1; } .brand { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .period-title { font-size: 18px; font-weight: 600; margin: 0 0 0 6px; letter-spacing: -0.02em; } .btn { font: inherit; font-weight: 500; font-size: 13px; padding: 7px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s, filter .12s; } .btn:hover { background: var(--surface-2); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { filter: brightness(1.07); } .btn.danger { color: var(--danger); border-color: transparent; background: transparent; } .btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } .icon-btn { font: inherit; font-size: 16px; line-height: 1; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; cursor: pointer; transition: background .12s; } .icon-btn:hover { background: var(--surface-2); } .theme-select { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 30px 7px 12px; border: 1px solid var(--border); background-color: var(--surface); color: var(--text); border-radius: 8px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: background-color .12s, border-color .12s; } .theme-select:hover { background-color: var(--surface-2); } .theme-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .theme-select optgroup { color: var(--text); } .theme-select option { color: var(--text); background: var(--surface); } .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .view-btn { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border: 0; background: var(--surface); color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s; } .view-btn + .view-btn { border-left: 1px solid var(--border); } .view-btn[aria-pressed="true"] { background: var(--accent); color: #fff; } /* ---------- app shell ---------- */ #app { flex: 1; overflow: auto; padding: 14px 18px 22px; min-height: 0; } /* ---------- month view ---------- */ .month-grid { display: flex; flex-direction: column; height: 100%; min-height: 560px; } .weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); } .weekday { padding: 6px 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); } .cells { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(104px, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .day-cell { position: relative; background: var(--surface); padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: background .1s; } .day-cell:hover { background: var(--surface-2); } .day-cell.outside { background: color-mix(in srgb, var(--surface) 55%, var(--bg)); } .day-cell.outside .day-num { opacity: .5; } .day-num { font-size: 12px; font-weight: 600; color: var(--text-dim); width: 24px; height: 24px; display: grid; place-items: center; align-self: flex-start; } .day-cell.today .day-num { background: var(--accent); color: #fff; border-radius: 999px; } .day-events { display: flex; flex-direction: column; gap: 3px; overflow: hidden; } /* ---------- weather tags ---------- */ .day-wx { position: absolute; top: 5px; right: 6px; display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; pointer-events: none; } .wk-wx { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 1px; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .wx-sym { font-size: 15px; line-height: 1; } .wk-wx .wx-sym { font-size: 17px; } .wx-hi { font-weight: 600; color: var(--text); } .wx-lo { opacity: .7; } @media (max-width: 740px) { .day-wx .wx-lo { display: none; } } @media (max-width: 560px) { .day-wx .wx-hi { display: none; } } .chip { --c: var(--accent); font: inherit; font-size: 11.5px; font-weight: 500; text-align: left; border: 0; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); color: color-mix(in srgb, var(--c) 82%, var(--text)); padding: 2px 6px; border-radius: 5px; cursor: pointer; display: flex; gap: 5px; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip:hover { background: color-mix(in srgb, var(--c) 24%, transparent); } .chip-time { font-variant-numeric: tabular-nums; opacity: .8; font-size: 10.5px; } .chip-title { overflow: hidden; text-overflow: ellipsis; } .chip-ic { flex: none; font-size: 10.5px; line-height: 1; align-self: center; } .chip.more { border-left-color: transparent; background: transparent; color: var(--text-dim); font-weight: 600; } :root[data-dark] .chip { color: color-mix(in srgb, var(--c) 55%, white); background: color-mix(in srgb, var(--c) 22%, transparent); } /* ---------- week view ---------- */ .week-grid { display: flex; flex-direction: column; height: 100%; min-height: 560px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .wk-top { display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid var(--border); } .wk-corner { border-right: 1px solid var(--border); } .wk-heads { display: grid; grid-template-columns: repeat(7, 1fr); } .wk-head { padding: 8px 6px; text-align: center; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } .wk-dow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); } .wk-dnum { font-size: 17px; font-weight: 600; } .wk-head.today .wk-dnum { background: var(--accent); color: #fff; border-radius: 999px; width: 28px; height: 28px; display: grid; place-items: center; margin: 0 auto; } .wk-allday-label { grid-column: 1; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: 5px 6px; text-align: right; border-right: 1px solid var(--border); border-top: 1px solid var(--border); } .wk-allday { grid-column: 2; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--border); min-height: 26px; } .wk-allday-cell { border-left: 1px solid var(--border); padding: 3px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; } .wk-allday-cell:hover { background: var(--surface-2); } .wk-scroll { flex: 1; overflow-y: auto; background: var(--surface); } .wk-scroll-inner { display: grid; grid-template-columns: 60px 1fr; } .wk-gutter { display: flex; flex-direction: column; } .wk-hour { height: var(--hour); position: relative; border-right: 1px solid var(--border); } .wk-hour span { position: absolute; top: -7px; right: 8px; font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; background: var(--surface); padding: 0 2px; } .wk-hour:first-child span { top: 2px; } .wk-cols { display: grid; grid-template-columns: repeat(7, 1fr); } .wk-col { position: relative; border-left: 1px solid var(--border); background-image: repeating-linear-gradient( to bottom, var(--grid-line) 0 1px, transparent 1px var(--hour)); cursor: pointer; } .wk-event { position: absolute; left: 3px; right: 3px; --c: var(--accent); border: 0; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 20%, var(--surface)); color: var(--text); border-radius: 5px; padding: 3px 6px; font: inherit; font-size: 11.5px; text-align: left; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; gap: 1px; min-height: 16px; } .wk-event:hover { background: color-mix(in srgb, var(--c) 30%, var(--surface)); } .wk-event-time { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .wk-event-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-ic { position: absolute; top: 2px; right: 3px; font-size: 10px; line-height: 1; pointer-events: none; } .wk-event:has(.wk-ic) { padding-right: 15px; } .now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 5; pointer-events: none; } .now-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 999px; background: var(--danger); } /* ---------- dialog ---------- */ dialog#event-dialog, dialog#settings-dialog { border: 1px solid var(--border); border-radius: 16px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: var(--shadow); } dialog#settings-dialog { width: min(480px, calc(100vw - 32px)); } dialog#event-dialog::backdrop, dialog#settings-dialog::backdrop { background: rgba(0,0,0,.4); backdrop-filter: blur(2px); } #event-form { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; } .dlg-head { display: flex; align-items: center; justify-content: space-between; } .dlg-head h2 { margin: 0; font-size: 16px; font-weight: 650; } dialog#settings-dialog .dlg-head { padding: 16px 18px 10px 20px; } /* ---------- settings dialog ---------- */ .settings-body { padding: 6px 20px 22px; display: flex; flex-direction: column; gap: 26px; } .settings-sec { display: flex; flex-direction: column; gap: 14px; } .settings-sec h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); } .set-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .set-label { display: block; } .set-label > span { font-size: 14px; font-weight: 500; } .set-label em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; line-height: 1.45; color: var(--text-dim); } .set-row .btn { flex: none; } .set-block { display: flex; flex-direction: column; gap: 6px; } .set-status { font-size: 12px; color: var(--text-dim); min-height: 1.2em; } .set-status.ok { color: var(--accent); } .set-status.err { color: var(--danger); } .set-toggle { cursor: pointer; } .set-toggle input { flex: none; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .wx-sub { display: flex; flex-direction: column; gap: 14px; transition: opacity .12s; } .wx-sub.disabled { opacity: .4; pointer-events: none; } .wx-loc-row { display: flex; gap: 8px; } .wx-loc-row input { flex: 1; min-width: 0; } .wx-loc-row .btn { flex: none; } .wx-loc-status { font-size: 12px; color: var(--text-dim); min-height: 1.2em; } .wx-loc-status.ok { color: var(--accent); } .wx-loc-status.err { color: var(--danger); } .linkish { align-self: flex-start; border: 0; background: none; padding: 2px 0 0; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; } .linkish:hover { text-decoration: underline; } .settings-note { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-dim); } .settings-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; } .set-range { width: 100%; margin-top: 6px; accent-color: var(--accent); cursor: pointer; } .set-block.disabled { opacity: .4; pointer-events: none; } .bg-btns { display: flex; gap: 8px; flex: none; } .bg-preview { height: 96px; border-radius: 8px; border: 1px solid var(--border); background-size: cover; background-position: center; } .field { display: flex; flex-direction: column; gap: 5px; } .field > span, .field legend { font-size: 12px; font-weight: 600; color: var(--text-dim); } .field input[type="text"], .field input[type="date"], .field input[type="time"], .field textarea { font: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); width: 100%; } .field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } .field textarea { resize: vertical; } .field input:disabled { opacity: .45; } .field.checkbox { flex-direction: row; align-items: center; gap: 8px; } .field.checkbox span { color: var(--text); font-weight: 500; font-size: 14px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field.colors { border: 0; padding: 0; margin: 0; } .swatches { display: flex; gap: 10px; } .swatch { position: relative; cursor: pointer; } /* --c comes from the .color-* class */ .swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; } .swatch span { display: block; width: 24px; height: 24px; border-radius: 999px; background: var(--c); box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px var(--border); } .swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); } .dlg-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .dlg-actions .spacer { flex: 1; } /* ---------- recurrence controls ---------- */ .field select { font: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); width: 100%; } .field select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } .field em { font-style: normal; color: var(--text-dim); font-weight: 400; } .weekday-picker { display: flex; gap: 6px; flex-wrap: wrap; } .wd { font: inherit; font-size: 12px; font-weight: 600; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .wd:hover { background: var(--surface-2); } .wd[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } #scope-field { display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; } #scope-field > span { font-size: 12px; font-weight: 600; color: var(--text-dim); } .radio { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .radio input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); } .chip-rep { opacity: .65; font-size: 10px; margin-left: auto; } /* ---------- categories popover ---------- */ .cats-wrap { position: relative; } #cats-btn { position: relative; } #cats-btn.has-hidden::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); } .cat-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 264px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 10px; } .cat-panel-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); padding: 2px 6px 8px; } .cat-row { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 8px; font-size: 13px; } .cat-row:hover { background: var(--surface-2); } .cat-row input[type="checkbox"] { width: 15px; height: 15px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; } .cat-all { border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 4px; padding-bottom: 9px; cursor: pointer; } .cat-all .cat-name { font-weight: 600; cursor: pointer; } .cat-list { display: flex; flex-direction: column; gap: 2px; max-height: 42vh; overflow-y: auto; } .cat-dot { --c: var(--accent); width: 12px; height: 12px; flex: none; border: 0; padding: 0; border-radius: 999px; background: var(--c); cursor: pointer; } .cat-dot:disabled { cursor: default; opacity: .8; } .cat-icon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 13px; line-height: 1; cursor: pointer; padding: 0; } .cat-icon:hover { background: var(--surface-2); } .cat-icon.empty { color: var(--text-dim); font-size: 12px; } .cat-name { flex: 1; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-del { flex: none; border: 0; background: transparent; color: var(--text-dim); font-size: 12px; line-height: 1; cursor: pointer; padding: 3px 5px; border-radius: 6px; opacity: 0; transition: opacity .12s, background .12s, color .12s; } .cat-row:hover .cat-del, .cat-del:focus-visible { opacity: 1; } .cat-del:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } .cat-add { display: flex; gap: 6px; margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--border); } .cat-add input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .cat-add input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } .cat-add button { flex: none; } /* ---------- right-click category menu ---------- */ .ctx-menu { position: fixed; z-index: 100; min-width: 184px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 5px; } .ctx-head { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); padding: 5px 8px 5px; } .ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; padding: 7px 8px; border-radius: 6px; cursor: pointer; } .ctx-item:hover, .ctx-item:focus-visible { background: var(--surface-2); outline: none; } .ctx-dot { --c: var(--text-dim); width: 10px; height: 10px; border-radius: 999px; background: var(--c); flex: none; } .ctx-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-check { color: var(--accent); font-size: 12px; opacity: 0; } .ctx-item[aria-checked="true"] .ctx-check { opacity: 1; } /* ---------- list view ---------- */ .list-view { max-width: 880px; margin: 0 auto; } .list-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 2px 2px 14px; font-size: 13px; color: var(--text-dim); } .list-head strong { color: var(--text); font-weight: 700; } .list-dupwarn { color: var(--danger); font-weight: 600; } .list-filter { display: flex; align-items: center; gap: 7px; margin-left: auto; cursor: pointer; } .list-filter input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; } .list-filter input:disabled { cursor: default; } .list-rows { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .lrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; background: var(--surface); border-top: 1px solid var(--border); transition: background .1s; } .lrow:first-child { border-top: 0; } .lrow:hover { background: var(--surface-2); } .lrow.is-hidden { opacity: .48; } .ldot { width: 10px; height: 10px; border-radius: 999px; background: var(--c, var(--accent)); flex: none; } .lmain { flex: 1; min-width: 0; } .ltitle { font-size: 13.5px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lmeta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ldup { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 999px; white-space: nowrap; } .ldup-x { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); } .ldup-n { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #a86a12; } :root[data-dark] .ldup-n { color: #f0b24d; } .lrow-del { flex: none; border: 0; background: transparent; color: var(--text-dim); font-size: 13px; line-height: 1; cursor: pointer; padding: 5px 7px; border-radius: 6px; opacity: 0; transition: opacity .12s, background .12s, color .12s; } .lrow:hover .lrow-del, .lrow-del:focus-visible { opacity: 1; } .lrow-del:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } .list-empty { padding: 44px 12px; text-align: center; color: var(--text-dim); font-size: 13px; } .btn:disabled, .icon-btn:disabled { opacity: .4; cursor: default; } .btn:disabled:hover, .icon-btn:disabled:hover { background: var(--surface); } /* ---------- event colors ---------- Defined LAST so a .color-* class always beats the `--c: var(--accent)` fallback that .chip / .wk-event set for the no-class case. */ .color-indigo { --c: #6366f1; } .color-emerald { --c: #10b981; } .color-sky { --c: #0ea5e9; } .color-violet { --c: #8b5cf6; } .color-amber { --c: #f59e0b; } .color-rose { --c: #f43f5e; } .color-none { --c: var(--text-dim); } @media (max-width: 620px) { .period-title { width: 100%; order: 5; margin: 4px 0 0; } #app { padding: 10px; } } /* ---------- background image + translucent "glass" surfaces ---------- Only active when body.has-bg is set; default rendering is untouched. Panels turn semi-transparent so the picture shows through, still tinted by the current theme's (or Automatic's) --surface colour. */ body.has-bg { background-image: linear-gradient(color-mix(in srgb, var(--bg) 32%, transparent), color-mix(in srgb, var(--bg) 32%, transparent)), var(--bg-image, none); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } body.has-bg .titlebar, body.has-bg .toolbar { background-color: color-mix(in srgb, var(--surface) 60%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } body.has-bg .btn, body.has-bg .icon-btn, body.has-bg .view-btn, body.has-bg .theme-select, body.has-bg .segmented { background-color: color-mix(in srgb, var(--surface) 55%, transparent); } body.has-bg .btn.primary, body.has-bg .view-btn[aria-pressed="true"] { background-color: var(--accent); } body.has-bg .btn:hover, body.has-bg .icon-btn:hover { background-color: color-mix(in srgb, var(--surface-2) 72%, transparent); } body.has-bg .cells { background-color: color-mix(in srgb, var(--border) 45%, transparent); } body.has-bg .day-cell { background-color: color-mix(in srgb, var(--surface) 52%, transparent); } body.has-bg .day-cell.outside { background-color: color-mix(in srgb, var(--surface) 28%, transparent); } body.has-bg .day-cell:hover, body.has-bg .wk-allday-cell:hover { background-color: color-mix(in srgb, var(--surface-2) 66%, transparent); } body.has-bg .week-grid, body.has-bg .wk-scroll { background-color: color-mix(in srgb, var(--surface) 50%, transparent); } body.has-bg .wk-hour span { background-color: color-mix(in srgb, var(--surface) 55%, transparent); } body.has-bg .list-rows { background: transparent; } body.has-bg .lrow { background-color: color-mix(in srgb, var(--surface) 52%, transparent); } body.has-bg .lrow:hover { background-color: color-mix(in srgb, var(--surface-2) 66%, transparent); } body.has-bg dialog#event-dialog, body.has-bg dialog#settings-dialog, body.has-bg .cat-panel, body.has-bg .ctx-menu { background-color: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } body.has-bg .field input, body.has-bg .field select, body.has-bg .field textarea, body.has-bg .cat-add input { background-color: color-mix(in srgb, var(--bg) 55%, transparent); }