/* * Stint week-calendar styles. App-shell layout is inlined in index.html's * ; this file holds the grid, entry cards, day totals, and popover. * * House rules (CLAUDE.md §perf): animate only transform / opacity (plus * background-color / border-color on hover); transitions ≤ ~150ms. */ /* --- sync indicator --- */ .sync-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--over); /* offline by default */ transition: background-color 150ms; } .sync-dot.online { background: var(--ok); } .sync-dot:not(.online) { animation: dot-pulse 1.4s ease-in-out infinite; } @keyframes dot-pulse { 50% { opacity: 0.35; } } .week-total { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* --- week grid --- */ .week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); min-height: 100%; position: relative; /* anchor the empty-state overlay */ } .week-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 24px; text-align: center; color: var(--ink-soft); font-size: 14px; pointer-events: none; } .week-empty[hidden] { display: none; } .col { background: var(--surface); display: flex; flex-direction: column; min-width: 0; } .col-head { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 8px 10px 6px; border-bottom: 1px solid var(--line); } .col-head.is-today { box-shadow: inset 0 2px 0 var(--accent); } .col-date { font-size: 13px; color: var(--ink-soft); } .col-date strong { color: var(--ink); font-weight: 600; } .col-sum { font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; } .col-sum .sum-logged { color: var(--ink); font-weight: 600; } .col-sum .sum-scheduled { color: var(--ink-soft); } .sum-bar { height: 3px; margin-top: 4px; border-radius: 2px; background: var(--line); overflow: hidden; } .sum-bar-fill { height: 100%; background: var(--ok); transform: scaleX(0); transform-origin: left; transition: transform 120ms; } .sum-bar-fill.over { background: var(--over); } /* --- day body + entry cards --- */ .col-body { position: relative; flex: 1; /* faint hour gridlines every 60min (60 * PX_PER_MIN = 54px) */ background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% 54px; } .entry { position: absolute; left: 5px; right: 5px; display: flex; flex-direction: column; gap: 2px; padding: 5px 7px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 7px; background: var(--surface); box-shadow: 0 1px 2px rgba(20, 30, 50, 0.06); overflow: hidden; cursor: pointer; transition: background-color 120ms, border-color 120ms; } /* Short cards drop detail so the title stays legible (classes set in JS from the card's known height; the colored left stripe still conveys the project). */ .entry.short .entry-meta { display: none; } .entry.xshort .entry-meta, .entry.xshort .entry-foot { display: none; } .entry.xshort { justify-content: center; gap: 0; } .entry:hover { background: #f9fafc; } .entry.running { border-color: var(--accent); background: #eef4ff; } .entry.done { opacity: 0.7; } .entry-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entry-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); } .entry-meta .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .entry-meta .planned { font-variant-numeric: tabular-nums; } .entry-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; } .entry-foot .logged { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); } .tbtn { font: inherit; font-size: 12px; line-height: 1; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; padding: 3px 6px; transition: background-color 120ms, border-color 120ms; } .tbtn:hover { background: #eef1f6; } .entry.running .tbtn { border-color: var(--accent); color: var(--accent); } /* --- popover --- */ .entry-popover { position: fixed; margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 14px; width: 280px; background: var(--surface); box-shadow: 0 12px 32px rgba(20, 30, 50, 0.18); } .entry-popover:popover-open { /* appear instantly, scale subtly from the anchor */ animation: pop-in 120ms ease-out; } @keyframes pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .pop-form { display: flex; flex-direction: column; gap: 10px; } .pop-title { margin: 0 0 2px; font-size: 15px; } .pop-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); } .pop-form label.row { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); } .pop-form input, .pop-form select { font: inherit; font-size: 14px; color: var(--ink); padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .pop-form input:focus, .pop-form select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .pop-actions { display: flex; justify-content: flex-end; margin-top: 4px; } .pop-timer { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .pop-form button { font: inherit; font-size: 13px; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; background: var(--surface); color: var(--ink); transition: background-color 120ms, border-color 120ms; } .pop-form button:hover { background: #eef1f6; } .pop-form button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .pop-form button.primary:hover { background: #2f6fe0; } .pop-form button.danger { color: var(--over); border-color: #f3c4c4; } .pop-form button.danger:hover { background: #fdecec; }