/* Pathine Draw – styles for the Excalidraw editor */ /* --- Theme ---------------------------------------------------------------- Draw is the only Pathine surface with a dark mode. The rest of the site is the Index system, which is a paper design and stays light; a canvas you sit in front of for an hour is a different argument, so this page follows the OS and offers a toggle, and nothing else does. The switch is one attribute — `data-draw-theme` on , written by static/js/draw-theme.js before the header paints — and everything below is tokens. There is no `@media (prefers-color-scheme: dark)` here on purpose: the media query and the attribute would be two sources of truth that disagree the moment someone picks a theme, and the script already reads the media query. This page cannot render without JavaScript anyway — it is Excalidraw — so there is no no-JS path to keep working. The dark ramp is the light one turned over, not a grey wash: the same ink-3-is-the-lightest-text rule holds (5.8:1 on the dark paper), --ink-4 stays a marks-only tone, and the accent lightens because #0B6E75 on a dark paper is 1.6:1. That is also why --accent-deep *lightens* in dark: it is the more-prominent step, and in dark more prominent means lighter. Excalidraw's own dark theme does the same thing with its purple, which is why mapping --color-primary-darker onto it below still means "hover". ------------------------------------------------------------------------- */ :root { /* Ink that stays legible on the accent, whichever way the accent goes. */ --draw-on-accent: #FFFFFF; --draw-accent-press: #063F44; --draw-focus-ring: color-mix(in srgb, var(--accent, #0B6E75) 25%, transparent); --draw-shadow: 0 4px 24px rgba(23, 24, 26, 0.15); --draw-scrim: rgba(23, 24, 26, 0.3); /* The guest banner is a toast: its own surface, inverted against the page in light mode and raised above it in dark. It cannot simply be --ink, because in dark mode --ink is the paper tone and the banner would vanish. */ --draw-toast: #17181A; --draw-toast-ink: #FAFAF8; --draw-toast-link: #7FD3D8; } [data-draw-theme='dark'] { --paper: #16171A; --paper-alt: #1D1F23; --paper-raise: #24262B; --ink: #F2F1EC; --ink-2: #C3C5C9; --ink-3: #94979C; --ink-4: #6E7176; --rule: #2C2F34; --rule-strong: #3A3D43; --rule-ink: #4A4E54; --accent: #4FB3B8; --accent-deep: #6FC7CC; --accent-tint: #16302F; --draw-on-accent: #08262A; --draw-accent-press: #8AD5D9; --draw-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); --draw-scrim: rgba(0, 0, 0, 0.55); --draw-toast: #24262B; --draw-toast-ink: #F2F1EC; } .draw-page { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--paper, #FAFAF8); } /* Header bar */ .draw-header { display: flex; align-items: center; gap: 1rem; padding: 0 1rem; height: 52px; border-bottom: 1px solid var(--rule, #E5E5E0); background: var(--paper, #FAFAF8); flex-shrink: 0; } .draw-wordmark { display: flex; align-items: center; gap: 0.5rem; color: var(--ink, #17181A); text-decoration: none; font-weight: 600; font-size: 1rem; } .draw-wordmark:hover { color: var(--accent, #0066FF); } .draw-wordmark-glyph { color: var(--accent, #0066FF); } .draw-wordmark-text { display: none; } @media (min-width: 640px) { .draw-wordmark-text { display: inline; } } .draw-title { font-weight: 500; font-size: 0.9375rem; color: var(--ink-2, #4A4A45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } @media (min-width: 640px) { .draw-title { max-width: 300px; } } .draw-title-btn { all: unset; font: inherit; color: inherit; cursor: pointer; padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; border-radius: 4px; transition: background 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; } .draw-title-btn:hover { background: var(--rule, #E5E5E0); } .draw-title-btn:focus-visible { outline: 2px solid var(--accent, #0066FF); outline-offset: 2px; } .draw-title-input { font: inherit; font-weight: 500; font-size: 0.9375rem; color: var(--ink, #17181A); background: var(--paper-raise, #FFFFFF); border: 1px solid var(--accent, #0066FF); border-radius: 4px; padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; width: calc(100% + 1rem); max-width: calc(100% + 1rem); box-sizing: border-box; } .draw-title-input:focus { outline: none; box-shadow: 0 0 0 2px var(--draw-focus-ring); } .draw-header-end { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; } .draw-header-actions { display: flex; align-items: center; gap: 0.5rem; } .draw-privacy-note { display: none; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--ink-3, #7A7A70); } .draw-privacy-note svg { color: var(--ink-4, #A0A098); } @media (min-width: 768px) { .draw-privacy-note { display: flex; } } /* Buttons */ .draw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; } /* `.draw-btn` sets a display, and an author display beats the UA's `[hidden] { display: none }` at the same specificity. Both buttons in this header ship hidden until their script knows which way they point, so without this they flash the wrong state first. */ .draw-btn[hidden] { display: none; } .draw-btn-text { background: transparent; color: var(--ink-2, #4A4A45); } .draw-btn-text:hover { background: var(--rule, #E5E5E0); color: var(--ink, #17181A); } .draw-btn-icon { padding: 0.5rem; background: transparent; color: var(--ink-2, #4A4A45); } .draw-btn-icon:hover { background: var(--rule, #E5E5E0); color: var(--ink, #17181A); } .draw-btn-primary { background: var(--accent, #0066FF); color: var(--draw-on-accent); } .draw-btn-primary:hover { background: var(--accent-deep, #08565C); } /* Light/dark toggle. The icon is the destination, not the current state: a moon means "go dark". Which one is a matter of the theme alone, so CSS decides it and the script only has to write one attribute — no icon swapping in JavaScript, nothing to go stale if the two ever disagree. `aria-pressed` carries the state for anyone not looking at the icon. */ .draw-theme-toggle .draw-theme-sun { display: none; } [data-draw-theme='dark'] .draw-theme-toggle .draw-theme-sun { display: block; } [data-draw-theme='dark'] .draw-theme-toggle .draw-theme-moon { display: none; } /* The favourite star. Filled only when it is true — an outline that is always half-lit tells you nothing. The note is absolutely positioned so the "that did not save" line drops below the header instead of shoving Workspace and Share sideways, and it takes no space at all while it is empty, which is nearly always. */ .draw-favorite-wrap { position: relative; display: inline-flex; align-items: center; } .draw-favorite[aria-pressed='true'] { color: var(--accent, #0066FF); } .draw-favorite[aria-pressed='true'] svg { fill: currentColor; } .draw-favorite:disabled { opacity: 0.55; cursor: default; } .draw-favorite-note:not(:empty) { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 5; white-space: nowrap; font-size: 0.75rem; color: var(--ink-2, #4A4A45); background: var(--paper, #FAFAF8); border: 1px solid var(--rule, #E5E5E0); border-radius: 6px; padding: 0.35rem 0.55rem; } /* Main container for Excalidraw */ .draw-container { flex: 1; position: relative; overflow: hidden; } /* Excalidraw overrides to match Pathine styling. `.draw-page` is in the selector for specificity, not for scoping. Excalidraw injects its own stylesheet at runtime, so it lands after both our s, and its dark rules are `.excalidraw.theme--dark` — the same weight as `.draw-container .excalidraw` and later in the document, so they won. The accent applied in light mode and not in dark, and flipping the switch turned the toolbar Excalidraw's lavender beside a teal wordmark. Three classes beat two in both themes. */ .draw-page .draw-container .excalidraw { --color-primary: var(--accent, #0066FF); --color-primary-light: var(--accent-tint, #E8F0F0); --color-primary-darker: var(--accent-deep, #08565C); --color-primary-darkest: var(--draw-accent-press); } /* Workspace panel (for logged-in users) */ .draw-workspace { position: fixed; top: 52px; left: 0; width: 320px; height: calc(100vh - 52px); background: var(--paper, #FAFAF8); border-right: 1px solid var(--rule, #E5E5E0); display: flex; flex-direction: column; z-index: 100; transform: translateX(-100%); transition: transform 0.2s ease; } .draw-workspace.open { transform: translateX(0); } @media (max-width: 640px) { .draw-workspace { width: 100%; } } .draw-workspace-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--rule, #E5E5E0); } .draw-workspace-title { font-weight: 600; font-size: 1rem; } .draw-workspace-close { background: none; border: none; padding: 0.375rem; cursor: pointer; color: var(--ink-3, #7A7A70); border-radius: 4px; } .draw-workspace-close:hover { background: var(--rule, #E5E5E0); color: var(--ink, #17181A); } .draw-workspace-actions { padding: 1rem; border-bottom: 1px solid var(--rule, #E5E5E0); } .draw-workspace-list { flex: 1; overflow-y: auto; padding: 0.5rem; } .draw-workspace-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-3, #7A7A70); font-size: 0.875rem; } /* Drawing card in workspace */ .draw-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: 8px; cursor: pointer; transition: background 0.15s; } .draw-card:hover { background: var(--paper-alt, #F0F0EC); } .draw-card-preview { width: 64px; height: 48px; border-radius: 4px; background: var(--paper-raise, #FFFFFF); border: 1px solid var(--rule, #E5E5E0); object-fit: contain; flex-shrink: 0; } .draw-card-preview.placeholder { display: flex; align-items: center; justify-content: center; color: var(--ink-4, #A0A098); } .draw-card-info { flex: 1; min-width: 0; } .draw-card-title { font-weight: 500; font-size: 0.875rem; color: var(--ink, #17181A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .draw-card-date { font-size: 0.75rem; color: var(--ink-3, #7A7A70); margin-top: 0.25rem; } .draw-card-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.15s; } .draw-card:hover .draw-card-actions { opacity: 1; } .draw-card-action { background: none; border: none; padding: 0.375rem; cursor: pointer; color: var(--ink-3, #7A7A70); border-radius: 4px; } .draw-card-action:hover { background: var(--rule, #E5E5E0); color: var(--ink, #17181A); } /* Share dialog */ .draw-share-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--paper, #FAFAF8); border-radius: 12px; box-shadow: var(--draw-shadow); padding: 1.5rem; width: 90%; max-width: 400px; z-index: 200; } .draw-share-overlay { position: fixed; inset: 0; background: var(--draw-scrim); z-index: 199; } .draw-share-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .draw-share-title { font-weight: 600; font-size: 1.125rem; } .draw-share-close { background: none; border: none; padding: 0.375rem; cursor: pointer; color: var(--ink-3, #7A7A70); border-radius: 4px; } .draw-share-close:hover { background: var(--rule, #E5E5E0); } .draw-share-section { margin-bottom: 1.25rem; } .draw-share-label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2, #4A4A45); margin-bottom: 0.5rem; } .draw-share-options { display: flex; gap: 0.5rem; } .draw-share-option { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--rule, #E5E5E0); border-radius: 6px; background: var(--paper-raise, #FFFFFF); color: var(--ink, #17181A); cursor: pointer; font-size: 0.875rem; text-align: center; transition: border-color 0.15s, background 0.15s; } .draw-share-option:hover { border-color: var(--ink-3, #7A7A70); } .draw-share-option.active { border-color: var(--accent, #0066FF); background: var(--accent-tint, #E8F0F0); color: var(--accent, #0066FF); } .draw-share-link { display: flex; gap: 0.5rem; } .draw-share-input { flex: 1; padding: 0.625rem 0.75rem; border: 1px solid var(--rule, #E5E5E0); border-radius: 6px; font-size: 0.875rem; background: var(--paper-raise, #FFFFFF); color: var(--ink, #17181A); } .draw-share-input:focus { outline: none; border-color: var(--accent, #0066FF); } .draw-share-copy { padding: 0.625rem 1rem; background: var(--accent, #0066FF); color: var(--draw-on-accent); border: none; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; white-space: nowrap; } .draw-share-copy:hover { background: var(--accent-deep, #08565C); } /* Guest banner */ .draw-guest-banner { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--draw-toast); color: var(--draw-toast-ink); padding: 0.75rem 1.25rem; border-radius: 8px; font-size: 0.875rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--draw-shadow); z-index: 100; } .draw-guest-banner a { color: var(--draw-toast-link); text-decoration: underline; } .draw-guest-banner-close { background: none; border: none; color: var(--draw-toast-ink); opacity: 0.7; cursor: pointer; padding: 0.25rem; } .draw-guest-banner-close:hover { opacity: 1; } /* Mobile adjustments */ @media (max-width: 640px) { .draw-header { padding: 0 0.75rem; } .draw-guest-banner { bottom: 0.5rem; left: 0.5rem; right: 0.5rem; transform: none; flex-direction: column; text-align: center; gap: 0.5rem; } }