diff options
Diffstat (limited to 'styles')
| -rw-r--r-- | styles/ccc.css | 155 | ||||
| -rw-r--r-- | styles/main.css | 102 |
2 files changed, 257 insertions, 0 deletions
diff --git a/styles/ccc.css b/styles/ccc.css new file mode 100644 index 0000000..cbf4853 --- /dev/null +++ b/styles/ccc.css @@ -0,0 +1,155 @@ +/* ccc app-specific styles — base typography/layout from /styles/main.css */ + +/* Extra reset the app needs beyond main.css */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +/* App CSS variables (light mode; dark mode via filter:invert in main.css) */ +:root { + --muted: #888; + --border: #ccc; + --bg: #fff; + --fg: #111; + --cell-0: #eee; + --cell-1: #bbb; + --cell-2: #888; + --cell-3: #555; + --cell-4: #222; + --today-outline: #111; + --tooltip-bg: #000; + --tooltip-fg: #fff; + --hover-bg: #111; + --hover-fg: #fff; + --popover-bg: #fff; + --popover-border: #ccc; +} + +h1 { font-size: 1.2rem; margin-bottom: 0.25rem; } + +h2 { + font-size: 0.95rem; + margin: 1.5rem 0 0.5rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--muted); +} + +hr { + border: none; + border-top: 1px solid var(--border); + margin: 1.25rem 0; +} + +ul { list-style: none; padding: 0; } +ul li { padding: 0.1rem 0; } + +.subtitle { color: var(--muted); font-size: 0.85rem; margin-bottom: 1rem; } + +.static-notice { + font-size: 0.8rem; + color: var(--muted); + border: 1px solid var(--border); + padding: 0.4rem 0.7rem; + margin-bottom: 1rem; + display: inline-block; +} + +/* ── Heatmap ─────────────────────────────────────────────── */ +.heatmap-wrap { overflow-x: auto; margin: 0.5rem 0 0.25rem; } +#heatmap-svg { display: block; font-family: inherit; } +.cell { cursor: pointer; } +.cell:hover rect { opacity: 0.75; } + +/* ── Legend ──────────────────────────────────────────────── */ +.legend { + display: flex; + align-items: center; + gap: 0.35rem; + font-size: 0.75rem; + color: var(--muted); + margin-top: 0.35rem; + flex-wrap: wrap; +} +.legend-swatch { + width: 10px; + height: 10px; + border-radius: 2px; + display: inline-block; + flex-shrink: 0; +} + +/* ── Controls ────────────────────────────────────────────── */ +.controls { margin-top: 0.25rem; } +.row { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + margin-bottom: 0.5rem; +} + +button { + font-family: inherit; + font-size: 0.85rem; + background: var(--bg); + color: var(--fg); + border: 1px solid var(--border); + padding: 0.2rem 0.65rem; + cursor: pointer; + line-height: 1.5; + transition: background 0.1s, color 0.1s; +} +button:hover:not(:disabled) { background: var(--hover-bg); color: var(--hover-fg); } +button:disabled { opacity: 0.35; cursor: not-allowed; } + +.count-display { min-width: 1.8rem; text-align: center; font-size: 0.85rem; } +.hint { font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; } + +/* ── Stats ───────────────────────────────────────────────── */ +.stats-list li { display: flex; gap: 0.75rem; } +.stats-list .label { color: var(--muted); min-width: 130px; } +.stats-list .value { font-weight: bold; } + +/* ── Tooltip ─────────────────────────────────────────────── */ +#tooltip { + position: fixed; + background: var(--tooltip-bg); + color: var(--tooltip-fg); + font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; + font-size: 0.75rem; + padding: 0.3rem 0.6rem; + pointer-events: none; + z-index: 1000; + white-space: nowrap; + display: none; + border-radius: 2px; +} + +/* ── Popover ─────────────────────────────────────────────── */ +#popover { + position: absolute; + background: var(--popover-bg); + border: 1px solid var(--popover-border); + padding: 0.75rem 1rem; + z-index: 500; + display: none; + min-width: 200px; + font-size: 0.85rem; +} +#popover .pop-title { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.5rem; } +#popover .pop-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; } +#popover input[type="number"] { + font-family: inherit; + font-size: 0.85rem; + width: 3.5rem; + background: var(--bg); + color: var(--fg); + border: 1px solid var(--border); + padding: 0.2rem 0.4rem; + text-align: center; + -moz-appearance: textfield; +} +#popover input[type="number"]::-webkit-inner-spin-button, +#popover input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; } +#popover .pop-actions { display: flex; gap: 0.4rem; } + +#import-input { display: none; } diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..c4bd01c --- /dev/null +++ b/styles/main.css @@ -0,0 +1,102 @@ +@font-face { + font-family: "Kawkab Mono"; + src: url(/fonts/KawkabMono-Regular.woff2); + font-weight: normal; +} + +@font-face { + font-family: "Kawkab Mono"; + src: url(/fonts/KawkabMono-Bold.woff2); + font-weight: bold; +} + +* { + unicode-bidi: plaintext; +} + +html { + color: black; + background-color: white; +} + +body { + font-family: "Kawkab Mono"; + font-size: 16px; + line-height: 1.4; + margin: 0; + padding: 4rem 0; + min-height: 100%; + overflow-wrap: break-word; +} + +h1, +header, +footer { + text-align: center; +} + +main { + text-align: left; +} + +main, +header, +footer { + max-width: 800px; + margin-inline: auto; + padding: 0 2rem; +} + +@media (max-width: 600px) { + body { + font-size: 0.9em; + } + + h1 { + font-size: 1.8em; + } +} + +@media (max-width: 400px) { + body { + font-size: 0.8em; + } + + h1 { + font-size: 1.6em; + } +} + +p, +h2, +h3, +h4 { + margin: 1em 0 0 0; +} + +ul, +ol { + margin: 0; +} + +img { + max-width: 100%; +} + +header { + margin-bottom: 1em; +} + +footer { + margin-top: 3em; +} + +@media (prefers-color-scheme: dark) { + html { + filter: invert(1); + } + + img { + filter: invert(1); + } +} |