/* bootstrap-overlay.css * * DESIGN.md reference: ElevenLabs * - Near-white canvas (#ffffff, #f5f5f5) with warm undertones (#f5f2ef) * - Inter for body/UI with positive letter-spacing (+0.14–0.18 px) * - Display uses Inter weight 200–300 (stands in for proprietary * Waldenburg 300); the defining move is LIGHT weight at large sizes * - Multi-layer shadows at sub-0.1 opacity; warm-tinted shadows * (rgba(78,50,23,0.04)) on featured CTAs * - Pill buttons (9999px), card radius 16–20 px * - Bootstrap 5 CSS loads first; this file overrides where we diverge. * - Loaded AFTER main.css so its palette and widgets win. */ /* --------------------------------------------------------------------------- * Tokens * ---------------------------------------------------------------------------*/ :root, html :root { /* Canvas */ --ej-bg: #ffffff; --ej-bg-alt: #f5f5f5; --ej-bg-warm: #f5f2ef; /* warm stone */ /* Text */ --ej-text: #000000; --ej-text-secondary: #4e4e4e; --ej-text-muted: #777169; /* Borders */ --ej-border: #e5e5e5; --ej-border-subtle: rgba(0, 0, 0, 0.05); /* Accents (kept minimal — ElevenLabs is near-achromatic) */ --ej-focus-ring: rgba(147, 197, 253, 0.5); /* Shared page shell math — ensures the nav-inner logo and the * page-header h1 land on the same vertical rule. */ --ej-page-max: 1100px; --ej-page-pad-x: 1rem; /* Shadow layers */ --ej-shadow-inset: rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset; --ej-shadow-outline: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; --ej-shadow-elev: rgba(0, 0, 0, 0.04) 0px 4px 4px; --ej-shadow-card: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px, rgba(0, 0, 0, 0.04) 0px 2px 4px; --ej-shadow-button: rgba(0, 0, 0, 0.4) 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 4px; --ej-shadow-warm: rgba(78, 50, 23, 0.04) 0px 6px 16px; /* Remap legacy custom properties so ancestor rules in main.css pick up * the ElevenLabs palette without being rewritten. */ --color-primary: #000000; --color-primary-dark: #000000; --color-primary-light: #4e4e4e; --color-secondary: #777169; --color-success: #198754; --color-warning: #ffc107; --color-danger: #dc3545; --color-danger-dark: #b02a37; --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --bg-tertiary: #f5f2ef; --bg-hover: #eeeeee; --text-primary: #000000; --text-secondary: #4e4e4e; --text-tertiary: #777169; --text-inverse: #ffffff; --border-color: #e5e5e5; } /* --------------------------------------------------------------------------- * Dark mode * --------------------------------------------------------------------------- * * Activated by adding `class="dark"` to . The JS toggle * (app.js / setupEventListeners) persists the choice in localStorage * under "ojournal_theme". When no preference is stored the toggle * defaults to `prefers-color-scheme: dark`. * ---------------------------------------------------------------------------*/ body.dark { /* Canvas */ --ej-bg: #1a1a1a; --ej-bg-alt: #242424; --ej-bg-warm: #2a2724; /* Text */ --ej-text: #e5e5e5; --ej-text-secondary: #a8a8a8; --ej-text-muted: #8a8580; /* Borders — warm yellow tint instead of grey */ --ej-border: #4a4530; --ej-border-subtle: rgba(255, 230, 140, 0.12); /* Focus ring — slightly brighter for dark bg */ --ej-focus-ring: rgba(147, 197, 253, 0.4); /* Shadows — lighter opacity on dark surfaces */ --ej-shadow-inset: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px inset; --ej-shadow-outline: rgba(0, 0, 0, 0.25) 0px 0px 0px 1px; --ej-shadow-elev: rgba(0, 0, 0, 0.2) 0px 4px 4px; --ej-shadow-card: rgba(0, 0, 0, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 1px 2px, rgba(0, 0, 0, 0.15) 0px 2px 4px; --ej-shadow-button: rgba(0, 0, 0, 0.6) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 4px 4px; --ej-shadow-warm: rgba(0, 0, 0, 0.25) 0px 6px 16px; /* Legacy custom properties */ --color-primary: #e5e5e5; --color-primary-dark: #e5e5e5; --color-primary-light: #a8a8a8; --color-secondary: #8a8580; --bg-primary: #1a1a1a; --bg-secondary: #242424; --bg-tertiary: #2a2724; --bg-hover: #333333; --text-primary: #e5e5e5; --text-secondary: #a8a8a8; --text-tertiary: #8a8580; --text-inverse: #1a1a1a; --border-color: #333333; } /* Dark-mode overrides for elements with hard-coded colours */ /* Scroll-scrubber year bubble: in light mode it's var(--color-primary) (indigo) with white text — readable. In dark mode `--color-primary` collapses to light-grey (#e5e5e5), so white-on-grey became nearly unreadable. Flip to a dark-on-light pairing so the year stays visible against the dark canvas. */ body.dark .scroll-scrubber-bubble { background: #e5e5e5; color: #1a1a1a; } body.dark .btn-primary { background-color: #e5e5e5 !important; border-color: #e5e5e5 !important; color: #1a1a1a !important; } body.dark .btn-primary:hover:not(:disabled), body.dark .btn-primary:focus:not(:disabled) { background-color: #d0d0d0 !important; border-color: #d0d0d0 !important; color: #1a1a1a !important; } body.dark .btn-danger { background-color: #e5e5e5 !important; border-color: #e5e5e5 !important; color: #1a1a1a !important; } body.dark .btn-danger:hover:not(:disabled) { background-color: #d0d0d0 !important; border-color: #d0d0d0 !important; } body.dark .btn-warm { background-color: rgba(42, 39, 36, 0.8) !important; color: #e5e5e5 !important; } body.dark .dropdown-menu { background: var(--ej-bg); } body.dark .dropdown-item { color: var(--ej-text); } body.dark mark.search-highlight { background: #665d00; color: #e5e5e5; } /* Dark mode inputs: yellow-tinted border + glow so they're visible */ body.dark input, body.dark textarea, body.dark select, body.dark .form-control { border-color: #4a4530 !important; box-shadow: 0 0 0 1px rgba(255, 230, 140, 0.15); } body.dark input:focus, body.dark textarea:focus, body.dark select:focus, body.dark .form-control:focus { border-color: #8a7a30 !important; box-shadow: 0 0 0 3px rgba(255, 230, 140, 0.25) !important; } /* Auth pages with dark mode: darken the background overlay */ body.dark.auth-bg::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 0; pointer-events: none; } body.dark.auth-bg .auth-container { position: relative; z-index: 1; } body.dark.auth-bg .auth-card { background: var(--ej-bg) !important; } body.dark.auth-bg #app-footer { position: relative; z-index: 1; } /* #311 follow-up: on the auth pages (login, register, about) the auth-container already takes up 100vh; letting the footer flow below it forced users to scroll just to see the version/copyright. Fix the footer to the viewport bottom on auth-bg so it overlays the same 100vh area — no scroll, same information visible. */ body.auth-bg #app-footer { position: fixed; left: 0; right: 0; bottom: 0; margin-top: 0; z-index: 2; pointer-events: auto; } .picker-item:hover { background: var(--ej-bg-warm, #f5f2ef); } body.dark .file-icon, body.dark .attachment-icon { color: var(--ej-text-secondary); } /* --------------------------------------------------------------------------- * Global typography + body * ---------------------------------------------------------------------------*/ body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; letter-spacing: 0.16px; /* ElevenLabs airy reading rhythm */ color: var(--ej-text); background: var(--ej-bg); } /* Display-level headings — Inter weight 200 at big sizes is the defining * move (standing in for Waldenburg 300). Light, tight, a little airy. */ h1, h2, h3 { font-weight: 300; letter-spacing: -0.01em; color: var(--ej-text); line-height: 1.15; } h1 { font-size: 2.25rem; font-weight: 200; } h2 { font-size: 1.75rem; } h3 { font-size: 1.25rem; font-weight: 400; } /* Body paragraphs use Inter 400 with positive tracking for that * "airy reading rhythm". */ p { font-size: 1rem; letter-spacing: 0.16px; line-height: 1.55; color: var(--ej-text); } /* Monospace: Geist Mono with relaxed leading — for dates, sizes, IDs. */ code, kbd, pre, samp, .mono, .entry-date-text { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-feature-settings: "tnum" 1; letter-spacing: 0; } /* Links — quietly black with a warm-gray underline on hover. */ a { color: var(--ej-text); text-decoration: none; } a:hover { color: var(--ej-text); text-decoration: underline; text-decoration-color: var(--ej-text-muted); text-underline-offset: 3px; } /* --------------------------------------------------------------------------- * Auth pages — big light title on white card, gentle warm shadow. * ---------------------------------------------------------------------------*/ body.auth-bg { background: url("/images/ojournal_background.jpg") no-repeat center center fixed; background-size: cover; color: var(--ej-text); } body.auth-bg .auth-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; } /* While the hero image is loading: hide the form, show a spinner. */ body.auth-bg.bg-loading .auth-card { visibility: hidden; } body.auth-bg.bg-loading::after { content: ""; position: fixed; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; z-index: 10; pointer-events: none; } body.auth-bg.bg-loading { background-color: #2b2a27; } body.auth-bg .auth-card { background: var(--ej-bg) !important; color: var(--ej-text); border-radius: 20px; padding: 3rem 2.5rem; box-shadow: var(--ej-shadow-card); width: 400px; max-width: 100%; } body.auth-bg .auth-title { font-family: Inter, sans-serif; font-weight: 200; font-size: 3rem; letter-spacing: -0.03em; line-height: 1.08; text-align: center; margin: 0 0 0.25rem 0; color: var(--ej-text); } body.auth-bg .auth-subtitle { color: var(--ej-text-secondary); text-align: center; font-size: 0.95rem; letter-spacing: 0.14px; margin-bottom: 2.25rem; } body.auth-bg .form-group input, body.auth-bg .form-group textarea, body.auth-bg .form-group select, body.auth-bg .auth-form input { background: var(--ej-bg) !important; color: var(--ej-text) !important; border: 1px solid var(--ej-border) !important; border-radius: 12px !important; padding: 0.65rem 0.85rem !important; letter-spacing: 0.14px; font-size: 0.95rem; } body.auth-bg .form-group input:focus, body.auth-bg .auth-form input:focus { border-color: #9cc2fe !important; box-shadow: 0 0 0 3px var(--ej-focus-ring) !important; outline: none !important; } body.auth-bg .auth-footer { text-align: center; margin-top: 1.5rem; color: var(--ej-text-secondary); } body.auth-bg .auth-footer a { color: var(--ej-text); text-decoration: underline; text-decoration-color: var(--ej-text-muted); } body.auth-bg #app-footer { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); background: rgba(0, 0, 0, 0.25); border-top: none; } /* --------------------------------------------------------------------------- * Buttons — pill-shaped, multi-layer shadows. * ---------------------------------------------------------------------------*/ .btn { border-radius: 9999px !important; padding: 0.5rem 1.15rem !important; font-weight: 500 !important; font-size: 0.9375rem !important; letter-spacing: 0 !important; line-height: 1.47 !important; transition: opacity 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .btn-primary { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; box-shadow: var(--ej-shadow-button); } .btn-primary:hover:not(:disabled), .btn-primary:focus:not(:disabled) { background-color: #1a1a1a !important; border-color: #1a1a1a !important; color: #ffffff !important; } .btn-secondary { background-color: var(--ej-bg) !important; border: 1px solid var(--ej-border) !important; color: var(--ej-text) !important; box-shadow: var(--ej-shadow-button); } .btn-secondary:hover:not(:disabled) { background-color: var(--ej-bg-warm) !important; border-color: var(--ej-border) !important; color: var(--ej-text) !important; } .btn-danger { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; } .btn-danger:hover:not(:disabled) { background-color: var(--ej-text-secondary) !important; border-color: var(--ej-text-secondary) !important; } /* Warm stone CTA — signature ElevenLabs featured button. */ .btn-warm { background-color: rgba(245, 242, 239, 0.8) !important; color: #000000 !important; border: 1px solid transparent !important; border-radius: 30px !important; padding: 0.65rem 1.25rem 0.65rem 0.95rem !important; box-shadow: var(--ej-shadow-warm); } /* --------------------------------------------------------------------------- * Nav — white sticky header, Inter 15px weight 500, pill CTA on the right. * ---------------------------------------------------------------------------*/ nav.nav { background: var(--ej-bg); color: var(--ej-text); padding: 0; border-bottom: none; box-shadow: none; position: sticky; top: 0; z-index: 100; } nav.nav .nav-inner { box-sizing: border-box; max-width: var(--ej-page-max); width: 100%; margin: 0 auto; padding-left: var(--ej-page-pad-x); padding-right: var(--ej-page-pad-x); padding-top: 0.75rem; padding-bottom: 0.75rem; display: flex; align-items: center; gap: 1.5rem; } .nav-brand, a.nav-logo { color: var(--ej-text) !important; font-weight: 300; font-size: 1.25rem; letter-spacing: -0.01em; text-decoration: none !important; } a.nav-logo:hover { color: var(--ej-text) !important; text-decoration: none !important; opacity: 0.75; } .nav-links { display: flex; gap: 0.25rem; flex: 0 0 auto; } .nav-search { flex: 1 1 auto; min-width: 0; max-width: 420px; margin: 0 0.75rem; } .nav-search .form-control-sm { width: 100%; border-radius: 9999px !important; border: 1px solid var(--ej-border) !important; padding: 0.4rem 0.9rem !important; background: var(--ej-bg-alt) !important; color: var(--ej-text) !important; font-size: 0.9rem !important; } .nav-search .form-control-sm:focus { border-color: #9cc2fe !important; background: var(--ej-bg) !important; box-shadow: 0 0 0 3px var(--ej-focus-ring) !important; outline: none; } .nav-cta { flex: 0 0 auto; margin-right: 0.75rem; } /* Auth pages hide the nav entirely via .hidden; the search/CTA inherit. */ .nav-link { color: var(--ej-text) !important; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.15px; text-decoration: none !important; padding: 0.4rem 0.75rem; border-radius: 9999px; } .nav-link:hover, .nav-link.active { background: var(--ej-bg-warm); color: var(--ej-text) !important; } .nav-user { display: flex; gap: 0.25rem; margin-left: auto; /* pin user controls to the right edge of the nav-inner */ } /* Today's date, sits between the search box and the theme toggle. */ .nav-today { flex: 0 0 auto; margin: 0 0.75rem 0 0; color: var(--ej-text-muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 768px) { /* Space is tight on mobile — hide the date rather than wrap it. */ .nav-today { display: none; } } .btn-icon { background: transparent; border: none; color: var(--ej-text-secondary); cursor: pointer; padding: 0.4rem; border-radius: 9999px; } .btn-icon:hover { background: var(--ej-bg-warm); color: var(--ej-text); } /* --------------------------------------------------------------------------- * Stats summary line — thin bar between nav and main content * ---------------------------------------------------------------------------*/ #stats-line { background: var(--ej-bg); } .stats-line-inner { box-sizing: border-box; max-width: var(--ej-page-max); width: 100%; margin: 0 auto; padding: 0.35rem var(--ej-page-pad-x); display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--ej-text-muted); letter-spacing: 0.14px; font-variant-numeric: tabular-nums; } .stats-line-cell { white-space: nowrap; } /* Hide the stats bar on auth pages */ body.auth-bg #stats-line { display: none !important; } /* --------------------------------------------------------------------------- * Page shell * ---------------------------------------------------------------------------*/ .page-container { box-sizing: border-box; max-width: var(--ej-page-max); width: 100%; /* Flush under the sticky nav. padding-top/bottom pinned to 0 so main.css's `padding: spacing-xl` doesn't re-add a 32px gap — the breathing room lives on `.entries-layout` / `.files-layout` so pages without a sidebar grid don't inherit it. */ margin: 0 auto 2rem auto; padding: 0 var(--ej-page-pad-x); } /* Top gap under the nav for the two-column list pages. Uniform across sidebar + main column because the padding is on the flex container. Absorbs the 0.5em margin-bottom that used to live on #entries-filter-note / #files-filter-note — the gap now comes from the shell, not an empty child element. */ .entries-layout, .files-layout { padding-top: 1rem; } .page-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.75rem; padding-bottom: 0.75rem; } .page-header h1 { font-size: 1.75rem; font-weight: 300; letter-spacing: -0.01em; margin: 0; } .page-header .form-control-sm { border-radius: 9999px !important; border: 1px solid var(--ej-border) !important; background: var(--ej-bg) !important; padding: 0.35rem 0.9rem !important; font-size: 0.9rem !important; } .page-header .form-control-sm:focus { border-color: #9cc2fe !important; box-shadow: 0 0 0 3px var(--ej-focus-ring) !important; outline: none !important; } /* Nav + dropdown menu */ .nav-create-item:hover { background: var(--ej-bg-warm, #f5f2ef) !important; } .nav-submenu-parent:hover > .nav-submenu { display: block !important; } /* Search-term highlights inside /entry/:id when arrived from a search result on the entries list. See lib/entry-format.js. */ mark.search-highlight { background: #fff3a8; color: inherit; padding: 0 0.05em; border-radius: 2px; } /* Hover feedback on ALL sidebar rows — list items, table rows, tree rows, and group headings. Standardised to the warm-stone background the Years filter uses (per user request). */ .filter-group-list a[data-group]:hover, .filter-group-list a[data-key]:hover, .filter-group-list .tag-tree-row:hover { background: var(--ej-bg-warm, #f5f2ef); border-radius: 3px; } /* Historic table: highlight the whole row, not individual cells */ .filter-group-list tr:hover { background: var(--ej-bg-warm, #f5f2ef); } .filter-group-heading:hover { color: var(--ej-text, #1a1a1a); } /* --------------------------------------------------------------------------- * Entries list — flush rows, generous spacing, light separators. * ---------------------------------------------------------------------------*/ .entries-list { /* Flush list — no outer container outline per design feedback. Row separators and hover do the visual work. */ background: transparent; } .entry-card { padding: 1.15rem 0.5rem; border-bottom: 1px solid var(--ej-border-subtle); background-color: var(--ej-bg, #fff); display: block; border-radius: 8px; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .entry-card:last-child { border-bottom: none; } .entry-card:hover { background-color: var(--ej-bg-warm); } .entry-date { color: var(--ej-text-muted); font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.8125rem; letter-spacing: 0; } .entry-title { margin: 0.25rem 0; font-size: 1.25rem; font-weight: 400; letter-spacing: -0.005em; color: var(--ej-text); } .entry-preview { color: var(--ej-text-secondary); margin: 0.25rem 0 0.6rem 0; letter-spacing: 0.16px; line-height: 1.55; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .entry-meta { color: var(--ej-text-muted); font-size: 0.8125rem; display: flex; justify-content: space-between; align-items: center; } .entry-tag { display: inline-block; background: var(--ej-bg-warm); color: var(--ej-text-secondary); padding: 0.15rem 0.55rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; margin-right: 0.25rem; text-transform: uppercase; } /* --------------------------------------------------------------------------- * Year filter sidebar * ---------------------------------------------------------------------------*/ .year-filter-list a { color: var(--ej-text) !important; font-size: 0.9rem; letter-spacing: 0.14px; text-decoration: none !important; } .year-filter-list a:hover { background: var(--ej-bg-warm); } /* --------------------------------------------------------------------------- * Dashboard strip (home) * ---------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------- * Single-entry view * ---------------------------------------------------------------------------*/ .entry-title-display { font-family: Inter, sans-serif; font-size: 2.5rem; font-weight: 200; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 0.5rem 0; color: var(--ej-text); } .entry-view-meta { color: var(--ej-text-muted); font-size: 0.875rem; margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .entry-date-text { background: transparent; border: none; padding: 0; color: var(--ej-text-muted); font-weight: 400; } .entry-content { font-size: 1.0625rem; line-height: 1.65; letter-spacing: 0.18px; color: var(--ej-text); } .entry-content p { margin: 0 0 1.15rem 0; } /* #303: classic blue + underlined in light mode so links read as links, not as bolded-black body text. Dark mode keeps the washed-blue #93c5fd it already had. */ .entry-content a, .entry-preview a, .scroll-entry-body a { color: #0a58ca; text-decoration: underline; text-decoration-color: #0a58ca; text-underline-offset: 2px; } .entry-content a:visited, .entry-preview a:visited, .scroll-entry-body a:visited { color: #6f42c1; } .entry-content a:hover, .entry-preview a:hover, .scroll-entry-body a:hover { color: #084298; text-decoration-color: #084298; } body.dark .entry-content a, body.dark .entry-preview a, body.dark .scroll-entry-body a { color: #93c5fd; text-decoration-color: #93c5fd; } body.dark .entry-content a:visited, body.dark .entry-preview a:visited, body.dark .scroll-entry-body a:visited { color: #c4b5fd; } body.dark .entry-content a:hover, body.dark .entry-preview a:hover, body.dark .scroll-entry-body a:hover { color: #bfdbfe; text-decoration-color: #bfdbfe; } .entry-content blockquote, .scroll-entry-body blockquote { margin: 0.75rem 0; padding: 0.75rem 1.25rem; border-left: 4px solid var(--ej-border); background: var(--ej-bg-warm, #f5f2ef); border-radius: 0 8px 8px 0; color: var(--ej-text-secondary); font-style: italic; } body.dark .entry-content blockquote, body.dark .scroll-entry-body blockquote { background: var(--ej-bg-alt, #242424); border-left-color: var(--ej-border); } .entry-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ej-border-subtle); gap: 0.75rem; flex-wrap: wrap; } .entry-nav { display: flex; gap: 0.5rem; } .entry-export { display: flex; gap: 0.75rem; font-size: 1.2rem; } .entry-export-icon { color: var(--ej-text-muted) !important; text-decoration: none !important; padding: 0.4rem 0.55rem; border-radius: 9999px; } .entry-export-icon:hover { color: var(--ej-text) !important; background: var(--ej-bg-warm); } /* --------------------------------------------------------------------------- * Attachments * ---------------------------------------------------------------------------*/ .attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.9rem; } .attachment-card { position: relative; display: block; background: var(--ej-bg); border: 1px solid var(--ej-border); border-radius: 16px; padding: 0.5rem; text-decoration: none !important; color: inherit !important; cursor: pointer; box-shadow: var(--ej-shadow-card); transition: box-shadow 0.15s, transform 0.15s; } .attachment-card:hover { transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 12px; } .attachment-thumbnail { width: 100%; height: 140px; object-fit: cover; border-radius: 12px; background: var(--ej-bg-alt); display: block; } .attachment-icon { width: 100%; height: 140px; display: flex; align-items: center; justify-content: center; background: var(--ej-bg-alt); color: var(--ej-text-muted); border-radius: 12px; font-size: 2.5rem; } .attachment-info { margin-top: 0.5rem; font-size: 0.8125rem; padding: 0 0.25rem; } .attachment-name { display: block; font-weight: 500; letter-spacing: 0.14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attachment-size { color: var(--ej-text-muted); } .attachment-detach { position: absolute; top: 0.35rem; right: 0.35rem; background: rgba(0, 0, 0, 0.55); color: #ffffff; border: none; border-radius: 50%; width: 1.5rem; height: 1.5rem; line-height: 1; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; z-index: 1; } .attachment-detach:hover { background: rgba(220, 53, 69, 0.9); } /* --------------------------------------------------------------------------- * Files grid * ---------------------------------------------------------------------------*/ .files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .file-card { background: var(--ej-bg); border: 1px solid var(--ej-border); border-radius: 16px; padding: 0.75rem; cursor: pointer; box-shadow: var(--ej-shadow-card); transition: box-shadow 0.15s, transform 0.15s; } .file-card:hover { transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 12px; } .file-thumbnail { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; background: var(--ej-bg-alt); } .file-icon { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; background: var(--ej-bg-alt); color: var(--ej-text-muted); border-radius: 12px; } .file-name { font-weight: 500; letter-spacing: 0.14px; margin-top: 0.55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-meta { color: var(--ej-text-muted); font-size: 0.8125rem; font-family: "Geist Mono", ui-monospace, monospace; } /* Media-attach picker rows: CSS :hover replaces inline onmouseover/onmouseout * so dark mode colors are respected. */ .media-attach-result:hover { background: var(--ej-bg-warm); } /* --------------------------------------------------------------------------- * Global footer * ---------------------------------------------------------------------------*/ .app-footer { font-family: Inter, sans-serif; font-size: 0.8125rem; letter-spacing: 0.14px; color: var(--ej-text-muted); border-top: 1px solid var(--ej-border-subtle) !important; } /* --------------------------------------------------------------------------- * Dropdowns — keep delete item red-on-white until hover. * ---------------------------------------------------------------------------*/ .dropdown-menu { border: 1px solid var(--ej-border); border-radius: 12px; box-shadow: var(--ej-shadow-card); padding: 0.35rem; } .dropdown-item { border-radius: 8px; font-size: 0.9rem; padding: 0.4rem 0.65rem; } .dropdown-item:hover, .dropdown-item:focus { background: var(--ej-bg-warm); color: var(--ej-text); } .dropdown-menu .dropdown-item.text-danger:hover, .dropdown-menu .dropdown-item.text-danger:focus { background: #dc3545; color: #ffffff !important; } /* --------------------------------------------------------------------------- * Markdown toolbar + cheat sheet + live preview * ---------------------------------------------------------------------------*/ .md-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.35rem 0.35rem; margin-bottom: 0.35rem; background: var(--ej-bg-alt); border: 1px solid var(--ej-border); border-radius: 10px; align-items: center; } .md-toolbar-btn { background: var(--ej-bg); border: 1px solid var(--ej-border); border-radius: 8px; padding: 0.25rem 0.6rem; font-size: 0.85rem; font-family: inherit; cursor: pointer; color: var(--ej-text); line-height: 1.4; transition: background 0.12s, box-shadow 0.12s; } .md-toolbar-btn:hover:not(:disabled) { background: var(--ej-bg-warm); box-shadow: var(--ej-shadow-outline); } .md-toolbar-btn:disabled { opacity: 0.4; cursor: default; } .md-toolbar-preview { margin-left: auto; font-weight: 500; } /* Preview pane — mirrors .entry-content for consistent rendering. */ .md-preview { min-height: 10rem; padding: 1rem; background: var(--ej-bg); border: 1px solid var(--ej-border); border-radius: 12px; } /* Collapsible markdown cheat sheet */ .md-cheatsheet { margin-top: 0.5rem; font-size: 0.85rem; color: var(--ej-text-secondary); } .md-cheatsheet summary { cursor: pointer; font-weight: 500; letter-spacing: 0.14px; padding: 0.25rem 0; color: var(--ej-text-muted); user-select: none; } .md-cheatsheet summary:hover { color: var(--ej-text); } .md-cheatsheet-body { padding: 0.5rem 0; } .md-cheatsheet table { width: 100%; border-collapse: collapse; } .md-cheatsheet td { padding: 0.2rem 0.5rem; border-bottom: 1px solid var(--ej-border-subtle); vertical-align: middle; } .md-cheatsheet td:first-child { white-space: nowrap; font-family: "Geist Mono", ui-monospace, monospace; color: var(--ej-text); } .md-cheatsheet code { background: var(--ej-bg-alt); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.82rem; } /* --------------------------------------------------------------------------- * Upload modal — drop zone + file list + progress bars * ---------------------------------------------------------------------------*/ .upload-drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; padding: 1.5rem 1rem; border: 2px dashed var(--ej-border, #e5e5e5); border-radius: 12px; background: var(--ej-bg-warm, #f5f2ef); color: var(--ej-text-muted, #777169); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; text-align: center; user-select: none; } .upload-drop-zone:hover { border-color: var(--ej-text-muted, #777169); } .upload-drop-zone--active { border-color: var(--ej-text, #000); background: var(--ej-bg-alt, #f5f5f5); } .upload-file-list { margin-top: 0.75rem; max-height: 320px; overflow-y: auto; } .upload-file-row { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto auto; gap: 0.25rem 0.5rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--ej-border-subtle, rgba(0,0,0,0.05)); } .upload-file-row:last-child { border-bottom: none; } .upload-file-info { display: flex; align-items: baseline; gap: 0.5rem; grid-column: 1 / 2; min-width: 0; } .upload-file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upload-file-size { flex-shrink: 0; color: var(--ej-text-muted, #777169); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .upload-file-desc { grid-column: 1 / 2; width: 100%; padding: 0.25rem 0.5rem; font-size: 0.88rem; border: 1px solid var(--ej-border, #e5e5e5); border-radius: 6px; background: var(--ej-bg, #fff); color: var(--ej-text, #000); } .upload-file-desc:focus { outline: none; border-color: var(--ej-text-muted, #777169); box-shadow: 0 0 0 2px var(--ej-focus-ring, rgba(147,197,253,0.5)); } .upload-file-remove { grid-column: 3 / 4; grid-row: 1 / 2; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: 6px; background: transparent; color: var(--ej-text-muted, #777169); font-size: 1.2rem; cursor: pointer; transition: background 80ms ease, color 80ms ease; } .upload-file-remove:hover { background: var(--ej-bg-alt, #f5f5f5); color: var(--color-danger, #dc3545); } .upload-file-progress { grid-column: 1 / -1; height: 5px; background: var(--ej-bg-warm, #f5f2ef); border-radius: 999px; overflow: hidden; } .upload-file-progress-bar { height: 100%; width: 0%; background: var(--ej-text, #000); transition: width 120ms linear; border-radius: 999px; } .upload-file-status { grid-column: 2 / 3; grid-row: 1 / 2; font-size: 0.82rem; white-space: nowrap; } .upload-file-status--ok { color: var(--color-success, #198754); } .upload-file-status--error { color: var(--color-danger, #dc3545); } .upload-status-summary { font-weight: 500; padding: 0.4rem 0; } .upload-status-summary--ok { color: var(--color-success, #198754); } .upload-status-summary--mixed { color: var(--color-warning, #ffc107); }