/* site.css — auto-generated bundle of 20 layout CSS files */ /* === critical.css === */ /* * critical.css — Loaded first to prevent FOUC (Flash of Unstyled Content) * * This file sets intrinsic sizes on SVGs and images so they don't flash * at their default/natural size before the main stylesheets load. * Keep this file minimal — it blocks rendering. */ /* ── SVG icon default removed: broke inline SVG illustrations. Icon SVGs should set their own width/height attributes. ── */ /* ── Prevent images from exceeding their container before CSS loads ── */ img, svg, video, canvas, picture { max-width: 100%; height: auto; } /* ── Common icon sizes used across the site ── */ img[width], svg[width] { max-width: none; /* allow explicit sizes to win */ } /* ── Hide content that depends on JS to initialise ── */ [hidden], .hidden { display: none !important; } /* ── Prevent FOUC: hide content-renderer until markdown is processed ── */ /* The content-renderer is hidden until data-render-ready is set. */ /* With lazy math, this happens immediately after markdown→HTML (text */ /* is visible; MathJax progressively typesets chunks as they scroll in). */ .content-renderer:not([data-render-ready]):not([data-spa-revealed]) .rendered-markdown-content { opacity: 0; } .content-renderer[data-render-ready] .rendered-markdown-content, .content-renderer[data-spa-revealed] .rendered-markdown-content { opacity: 1; transition: opacity 0.15s ease; } /* ── Lazy Math Chunks ── */ /* Each chunk fades in smoothly once MathJax finishes typesetting it. */ /* Before typesetting, raw $...$ text is visible so the user can still */ /* read the content — they just see dollar signs instead of rendered math. */ .math-chunk { /* Subtle transition for layout changes when MathJax replaces inline text */ transition: opacity 0.2s ease; } .math-chunk-ready { opacity: 1; } /* ── Skeleton shimmer utility ── */ /* Base class used by page-specific inline skeletons (e.g. index, theorems, issues). */ @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton { background: linear-gradient( 90deg, var(--skeleton-base, #f0f0f2) 25%, var(--skeleton-shine, #e4e4e7) 37%, var(--skeleton-base, #f0f0f2) 63% ); background-size: 200% 100%; animation: skeleton-shimmer 1.6s ease infinite; border-radius: 4px; color: transparent !important; pointer-events: none; user-select: none; } :root[data-theme="dark"] .skeleton { --skeleton-base: var(--color-bg-tertiary); --skeleton-shine: var(--color-bg-active); } /* Common skeleton shapes reused across page-specific skeletons */ .skeleton-text { height: 14px; margin-bottom: 8px; } .skeleton-text-sm { height: 10px; margin-bottom: 6px; width: 60%; } .skeleton-heading { height: 20px; width: 40%; margin-bottom: 12px; } .skeleton-card { height: 80px; border-radius: 8px; margin-bottom: 12px; } /* === design-tokens.css === */ /** * Design Tokens - Single Source of Truth for Styling * ================================================= * * This file defines ALL design variables used across the application. * When creating new components, ALWAYS use these tokens instead of hardcoded values. * * Usage Examples: * background-color: var(--color-bg-primary); * color: var(--color-text-primary); * padding: var(--spacing-md); * border-radius: var(--radius-md); * font-size: var(--font-size-md); */ :root { /* =================== COLOR PALETTE — Neutral Grays + Patina Accent Body: #1A1A1A · Secondary: #6B6B6B · Borders: #E0E0E0 Chrome bg: #F5F5F5 · Content bg: #FFFFFF Accent (rare punctuation): #5A7A6A (Patina) Temperature: neutral (default), cool, warm — set via data-temperature attribute =================== */ /* Core Colors — Pure Neutrals */ --color-white: #ffffff; --color-black: #000000; --color-dark: #1A1A1A; /* Primary Brand Colors — Neutral darks for UI chrome */ --color-primary: #1A1A1A; /* Links, primary actions, buttons */ --color-primary-hover: #000000; /* Hover state for primary */ --color-primary-subtle: #F5F5F5; /* Light primary background */ /* Accent Color — Sage (rare punctuation only) */ --color-accent: #5C6F5B; /* Badges, presence dots, progress bars */ --color-accent-dark: #465546; /* Darker accent variant */ --color-accent-subtle: #DDE5DC; /* Light accent background */ /* Internal wiki link — derived from accent, lightness varies per theme. oklch(from X L c h) keeps X's chroma & hue, overrides lightness. Light mode: slightly darker than the natural accent (~46% L) for contrast. */ --color-link-internal: oklch(from var(--color-accent) 45% c h); /* Status Colors */ --color-success: #5C6F5B; /* Success states (uses accent) */ --color-success-subtle: #EDF3F0; /* Success background */ --color-warning: #926E18; /* Warning states (WCAG AA on white: 4.70:1) */ --color-warning-subtle: #F5EAD0; /* Warning background */ --color-danger: #8A6060; /* Error, danger, gaps */ --color-danger-subtle: #F2EDED; /* Danger background */ --color-info: #3B6FA0; /* Info states */ --color-info-subtle: #EDF3F8; /* Info background */ --color-info-text: #3B6FA0; /* Info text */ --color-success-text: #2D6B4A; /* Success text */ /* Remark Environment Colors — derived from accent */ --color-remark-accent: var(--color-accent); --color-remark-bg: color-mix(in srgb, var(--color-accent) 8%, transparent); --color-remark-text: #6B6B6B; /* Remark text (neutral gray) */ --color-purple: #6f42c1; /* Merged, special states */ --color-purple-subtle: #f5f0ff; /* Purple background */ /* Text Colors — Pure neutrals */ --color-text-primary: #1A1A1A; /* Main text */ --color-text-secondary: #6B6B6B; /* Muted text, descriptions */ --color-text-tertiary: #8A8A8A; /* Even more muted */ --color-text-medium: #525252; /* Medium emphasis text */ --color-text-placeholder: #8A8A8A; /* Placeholder text */ --color-text-inverse: #ffffff; /* Text on dark backgrounds */ --color-text-link: #1A1A1A; /* Link text */ --color-text-link-hover: #000000; /* Link hover */ /* Background Colors — Pure whites/grays */ --color-bg-primary: #ffffff; /* Main content background */ --color-bg-secondary: #F5F5F5; /* Chrome background, sidebar */ --color-bg-tertiary: #EBEBEB; /* Subtle backgrounds, cards */ --color-bg-hover: #EBEBEB; /* Hover states */ --color-bg-active: #D4D4D4; /* Active/pressed states */ --color-bg-overlay: rgba(0, 0, 0, 0.5); /* Modal overlays */ /* Border Colors — Pure grays */ --color-border-primary: #E0E0E0; /* Primary borders */ --color-border-secondary: #EBEBEB; /* Lighter borders (distinct from primary) */ --color-border-tertiary: #F0F0F0; /* Subtle borders */ --color-border-strong: #CCCCCC; /* Strong borders */ --color-border-focus: #1A1A1A; /* Focus ring */ /* =================== SPACING SCALE =================== */ --spacing-0: 0; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; /* =================== TYPOGRAPHY =================== */ /* Font Families */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* Font Sizes — rem for accessibility (base 16px) */ --font-size-xs: 0.6875rem; /* 11px */ --font-size-sm: 0.75rem; /* 12px */ --font-size-md: 0.875rem; /* 14px */ --font-size-base: 0.9375rem; /* 15px — message text */ --font-size-lg: 1rem; /* 16px — content body */ --font-size-xl: 1.125rem; /* 18px */ --font-size-2xl: 1.25rem; /* 20px */ --font-size-3xl: 1.375rem; /* 22px */ --font-size-4xl: 1.75rem; /* 28px */ --font-size-5xl: 2.25rem; /* 36px */ --font-size-6xl: 3rem; /* 48px */ /* Font Weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.6; /* =================== BORDER RADIUS =================== */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* Pills, avatars */ /* =================== SHADOWS =================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --shadow-focus: 0 0 0 3px rgba(26, 26, 26, 0.25); /* =================== LAYOUT - Standardized Width System =================== */ /* Layout Width Tokens */ --layout-narrow: 768px; /* Reading-focused: articles, wiki pages, docs prose */ --layout-medium: 1024px; /* General content with some complexity */ --layout-wide: 1280px; /* Data-heavy: tables, lists, feeds */ --layout-max: 1400px; /* Maximum container width */ /* Full width = 100% (no max-width, used for app interfaces) */ /* Responsive Breakpoints */ --breakpoint-mobile: 640px; /* Below: single column, touch-friendly */ --breakpoint-tablet: 1024px; /* Below: adapted layout, collapsible sidebars */ --breakpoint-desktop: 1280px; /* Above: full desktop experience */ /* Content Spacing */ --content-padding-mobile: 16px; /* Horizontal padding on mobile */ --content-padding-tablet: 24px; /* Horizontal padding on tablet */ --content-padding-desktop: 32px; /* Horizontal padding on desktop */ /* Legacy variables (kept for backwards compatibility) */ --max-width: 1400px; --content-max-width: 1280px; --narrow-max-width: 768px; --min-width-fixed: 320px; --content-width-percent: 90%; --content-padding-x: 32px; --sidebar-width: 280px; --header-height: 50px; /* =================== TRANSITIONS =================== */ --transition-fast: 0.1s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; /* =================== Z-INDEX SCALE =================== */ --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 400; --z-modal: 500; --z-tooltip: 600; --z-toast: 700; /* Dock uses a separate high scale (units of 10000) so it floats above all site content including modals, tooltips, and toasts. Fallbacks in chat-dock.css reference these exact numeric values, so do not change them without updating the fallbacks. */ --z-dock-shell: 10005; --z-dock-panel: 10008; --z-dock-window: 10010; --z-dock-tooltip: 10015; --z-dock-popover: 10020; /* =================== COLLOQ SURFACE — always-dark voice room bar Intentionally dark regardless of site theme; do not derive from --color-bg-* tokens. =================== */ --color-colloq-bg: #1c1c1e; --color-colloq-text: rgba(255, 255, 255, 0.95); --color-colloq-muted: rgba(255, 255, 255, 0.55); --color-colloq-border: rgba(255, 255, 255, 0.12); --color-colloq-hover: rgba(255, 255, 255, 0.10); /* Avatar fallback background — used when a user has no profile image. */ --color-avatar-fallback: color-mix(in srgb, var(--color-accent) 70%, var(--color-bg-secondary)); /* Focus ring tokens — strong + subtle variants derived from text color so they adapt automatically to theme. */ --focus-ring: var(--color-text-primary); --focus-ring-subtle: color-mix(in srgb, var(--color-text-primary) 35%, transparent); /* =================== NOTIFICATION SYSTEM — bell cards, toasts, status pills Uniform tokens shared across the bell notification dropdown, ephemeral toast confirmations, and status indicators. Derived from existing semantic tokens wherever possible so they inherit theme + temperature overrides automatically. =================== */ /* Bell notification card / row */ --color-notification-card-bg: var(--color-bg-primary); --color-notification-card-border: var(--color-border-primary); --color-notification-card-hover: var(--color-bg-secondary); --color-notification-unread-bar: var(--color-accent); --color-notification-unread-bg: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg-primary)); --color-notification-meta: var(--color-text-tertiary); /* Status pills — Approved / Rejected / Needs revision / Neutral */ --color-pill-success-bg: var(--color-accent); --color-pill-success-fg: var(--color-white); --color-pill-warning-bg: var(--color-warning); --color-pill-warning-fg: var(--color-white); --color-pill-danger-bg: var(--color-danger); --color-pill-danger-fg: var(--color-white); --color-pill-neutral-bg: var(--color-bg-secondary); --color-pill-neutral-fg: var(--color-text-secondary); /* Call invite toast — intentionally dark regardless of site theme. Shares the always-dark colloq voice-room surface so the two "call is happening" affordances feel like the same object. */ --color-notification-call-bg: var(--color-colloq-bg); --color-notification-call-text: var(--color-colloq-text); --color-notification-call-text-muted: rgba(255, 255, 255, 0.45); /* Notification shadows — row has no elevation by default, toasts do */ --shadow-notification: none; --shadow-notification-toast: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-notification-toast-hover: 0 2px 6px rgba(0, 0, 0, 0.10), 0 8px 20px rgba(0, 0, 0, 0.08); --shadow-notification-toast-call: 0 8px 32px rgba(0, 0, 0, 0.30); } /* =================== BACKWARDS COMPATIBILITY Map old variables to new tokens =================== */ :root { /* Map old variables to new tokens for backwards compatibility */ --primary-color: #1A1A1A; --secondary-color: #F5F5F5; --accent-color: #5A7A6A; /* DEPRECATED: use --color-accent instead. Do not add new usages. */ --text-color: #1A1A1A; --light-text: #6B6B6B; --border-color: #E0E0E0; --success-color: #5A7A6A; --error-color: #8A6060; --warning-color: #926E18; --light-gray: #F5F5F5; --medium-gray: #EBEBEB; --dark-gray: #6B6B6B; --white: #ffffff; --toc-width: var(--sidebar-width); --toc-bg: #F5F5F5; --code-bg: #F5F5F5; --shadow-focus: 0 0 0 3px rgba(26, 26, 26, 0.25); } /* =================== COLOR TEMPERATURE — Warm (brown-tinted neutrals) Opt-in via data-temperature="warm" on =================== */ :root[data-temperature="warm"] { /* Exact palette from Paper Messages Redesign — neutral-warm with olive undertone */ --color-dark: #2C2A26; --color-primary: #2C2A26; --color-primary-hover: #1C1A16; --color-primary-subtle: #F4F3F0; --color-text-primary: #2C2A26; --color-text-secondary: #74716A; --color-text-tertiary: #908D85; --color-text-medium: #5A5750; --color-text-placeholder: #908D85; --color-text-link: #2C2A26; --color-text-link-hover: #1C1A16; /* Backgrounds — from Paper: #FAFAF8 everywhere */ --color-bg-primary: #FAFAF8; --color-bg-secondary: #F4F3F0; --color-bg-tertiary: #EDECE8; --color-bg-hover: #EDECE8; --color-bg-active: #E4E3DE; /* Borders — from Paper: #E8E8E3 */ --color-border-primary: #E8E8E3; --color-border-secondary: #EEEDE9; --color-border-tertiary: #F2F1EE; --color-border-strong: #D8D7D2; --color-border-focus: #2C2A26; --color-white: #FFFFFF; /* Accent tints — warmed to blend with cream backgrounds */ --color-accent-subtle: color-mix(in srgb, var(--color-accent) 10%, #F4F3F0); --color-remark-bg: color-mix(in srgb, var(--color-accent) 6%, #FAFAF8); /* Backwards compat */ --primary-color: #2C2A26; --secondary-color: #F4F3F0; --text-color: #2C2A26; --light-text: #74716A; --border-color: #E8E8E3; --light-gray: #F4F3F0; --medium-gray: #EDECE8; --dark-gray: #74716A; --toc-bg: #F4F3F0; --code-bg: #F4F3F0; --color-remark-text: #74716A; --shadow-focus: 0 0 0 3px rgba(44, 42, 38, 0.25); } /* Dark mode + warm temperature — "Soft Charcoal" (neutral, Claude-like) */ :root[data-theme="dark"][data-temperature="warm"] { --color-text-primary: #ececec; --color-text-secondary: #9a9a9e; --color-text-tertiary: #6a6a6e; --color-text-placeholder: #55555a; --color-text-medium: #cdcdcf; --color-text-link: #ececec; --color-bg-primary: #1a1a1e; --color-bg-secondary: #232328; --color-bg-tertiary: #2c2c30; --color-bg-hover: #35353a; --color-bg-active: #3e3e44; --color-border-primary: #35353a; --color-border-secondary: #2c2c30; --color-border-tertiary: #232328; --color-border-strong: #45454a; --primary-color: #ececec; --secondary-color: #232328; --text-color: #ececec; --light-text: #9a9a9e; --border-color: #35353a; --light-gray: #232328; --medium-gray: #2c2c30; --dark-gray: #9a9a9e; --white: #1a1a1e; --toc-bg: #232328; --code-bg: #2c2c30; --color-remark-text: #9a9a9e; } /* =================== COLOR TEMPERATURE — Cool (blue-gray tinted neutrals) Opt-in via data-temperature="cool" on =================== */ :root[data-temperature="cool"] { --color-dark: #1D2433; --color-primary: #1D2433; --color-primary-hover: #0F1520; --color-primary-subtle: #F0F2F5; --color-text-primary: #1D2433; --color-text-secondary: #5E6978; --color-text-tertiary: #7C8694; --color-text-medium: #455060; --color-text-placeholder: #7C8694; --color-text-link: #1D2433; --color-text-link-hover: #0F1520; --color-bg-secondary: #F0F2F5; --color-bg-tertiary: #E3E7EC; --color-bg-hover: #E3E7EC; --color-bg-active: #CDD3DA; --color-border-primary: #DCE0E5; --color-border-secondary: #E8ECF0; --color-border-tertiary: #F0F2F5; --color-border-strong: #C4CAD2; --color-border-focus: #1D2433; /* Backwards compat — cool */ --primary-color: #1D2433; --secondary-color: #F0F2F5; --text-color: #1D2433; --light-text: #5E6978; --border-color: #DCE0E5; --light-gray: #F0F2F5; --medium-gray: #E3E7EC; --dark-gray: #5E6978; --toc-bg: #F0F2F5; --code-bg: #F0F2F5; /* Remark — cool (text matches cool palette; accent/bg inherit from --color-accent) */ --color-remark-text: #6B6B63; --shadow-focus: 0 0 0 3px rgba(29, 36, 51, 0.3); } /* Dark mode + cool temperature — "Warm Ink" (GitHub-like blue-gray) */ :root[data-theme="dark"][data-temperature="cool"] { --color-text-primary: #e6edf3; --color-text-secondary: #8b949e; --color-text-tertiary: #6e7681; --color-text-placeholder: #484f58; --color-text-medium: #c9d1d9; --color-text-link: #e6edf3; --color-bg-primary: #0d1117; --color-bg-secondary: #161b22; --color-bg-tertiary: #1c2128; --color-bg-hover: #292e36; --color-bg-active: #33383f; --color-border-primary: #30363d; --color-border-secondary: #21262d; --color-border-tertiary: #161b22; --color-border-strong: #484f58; --primary-color: #e6edf3; --secondary-color: #161b22; --text-color: #e6edf3; --light-text: #8b949e; --border-color: #30363d; --light-gray: #161b22; --medium-gray: #1c2128; --dark-gray: #8b949e; --white: #0d1117; --toc-bg: #161b22; --code-bg: #1c2128; --color-remark-text: #8b949e; } /* =================== DARK MODE SUPPORT Uses data-theme attribute for explicit control =================== */ /* Dark mode — "Warm Stone" default palette */ :root[data-theme="dark"] { /* Core Colors */ --color-primary: #e8e4df; --color-primary-hover: #c8c3bb; --color-primary-subtle: #37352f; /* Text Colors */ --color-text-primary: #e8e4df; --color-text-secondary: #9b9689; --color-text-tertiary: #6e6a62; --color-text-placeholder: #5a5750; --color-text-inverse: #1c1b19; --color-text-link: #e8e4df; --color-text-link-hover: #c8c3bb; /* Background Colors — warm earthy darks */ --color-bg-primary: #1c1b19; --color-bg-secondary: #252420; --color-bg-tertiary: #2e2d28; --color-bg-hover: #35343033; --color-bg-active: #3e3d38; --color-bg-overlay: rgba(0, 0, 0, 0.7); /* Border Colors */ --color-border-primary: #37352f; --color-border-secondary: #2e2d28; --color-border-tertiary: #252420; --color-border-strong: #47453e; --color-border-focus: #e8e4df; /* Text Colors - dark mode additions */ --color-text-medium: #c8c3bb; /* Status Colors - dark mode */ --color-success-subtle: #1a3d2a; --color-success-text: #6ee7a0; --color-danger: #f87171; --color-danger-subtle: #3d1a1a; --color-warning: #fbbf24; --color-warning-subtle: #3d3a1a; --color-info: #6ea8fe; --color-info-subtle: #1a2d4d; --color-info-text: #6ea8fe; --color-purple: #a78bfa; --color-purple-subtle: #2d1a4d; /* Remark — dark (lighten accent for visibility on dark bg) */ --color-remark-accent: color-mix(in srgb, var(--color-accent) 70%, white); --color-remark-bg: color-mix(in srgb, var(--color-accent) 12%, transparent); --color-remark-text: #9b9689; /* Internal wiki link — brighter sage for dark bg (same hue, higher lightness) */ --color-link-internal: oklch(from var(--color-accent) 78% c h); /* Avatar fallback — lower accent weight on dark bg so it doesn't over-saturate */ --color-avatar-fallback: color-mix(in srgb, var(--color-accent) 50%, var(--color-bg-secondary)); /* Shadows — darker/denser so elevation reads on dark backgrounds */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2); --shadow-focus: 0 0 0 3px rgba(232, 228, 223, 0.25); /* Notification shadows — denser on dark backgrounds so elevation reads */ --shadow-notification-toast: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-notification-toast-hover: 0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.35); --shadow-notification-toast-call: 0 8px 32px rgba(0, 0, 0, 0.55); /* Notification card — hover uses a slightly lighter surface so it reads as "raised" rather than the default secondary bg which can collide with surrounding chrome. Unread tint is more subtle. */ --color-notification-card-hover: var(--color-bg-tertiary); --color-notification-unread-bg: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-primary)); /* Backwards compat */ --bg-dark: #1c1b19; --primary-color: #e8e4df; --secondary-color: #252420; --accent-color: #e8e4df; --text-color: #e8e4df; --light-text: #9b9689; --border-color: #37352f; --light-gray: #252420; --medium-gray: #2e2d28; --dark-gray: #9b9689; --white: #1c1b19; --toc-bg: #252420; --code-bg: #2e2d28; } /* --------------------------------------------------------------- Dark mode is driven ENTIRELY by the token redefinitions above. Do NOT add class-level overrides like :root[data-theme="dark"] .some-class { background: ...; } here. If a component looks wrong in dark mode, fix its BASE style to use tokens (var(--color-bg-secondary), var(--color-text-primary), etc.) instead of hardcoded colors — the token will then adapt automatically. The only exception is MathJax SVG below, whose stroke/fill attributes don't inherit through CSS. --------------------------------------------------------------- */ /* MathJax SVG fills/strokes its glyphs with literal "currentColor" attributes on elements. These don't always resolve through CSS inheritance (especially when the SVG is rendered before the theme attribute is applied), so we force the color here. */ :root[data-theme="dark"] mjx-container[jax="SVG"] g[stroke="currentColor"], :root[data-theme="dark"] .MathJax g[stroke="currentColor"] { stroke: var(--color-text-primary); } :root[data-theme="dark"] mjx-container[jax="SVG"] g[fill="currentColor"], :root[data-theme="dark"] .MathJax g[fill="currentColor"] { fill: var(--color-text-primary); } /* =================== FONT PREFERENCE: Character Mode Curated pairing — Inter Tight for display, Source Serif 4 for math prose, Inter for body =================== */ html[data-font="character"] { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --font-serif inherits the root definition (Source Serif 4) */ } /* Display font — headings everywhere */ html[data-font="character"] h1, html[data-font="character"] h2, html[data-font="character"] h3, html[data-font="character"] h4, html[data-font="character"] h5, html[data-font="character"] h6, html[data-font="character"] .page-title, html[data-font="character"] .landing-logo-title, html[data-font="character"] .landing-features-grid h3, html[data-font="character"] .demo-header h2, html[data-font="character"] .settings-section h2, html[data-font="character"] .card-title, html[data-font="character"] .event-title, html[data-font="character"] .discussion-title, html[data-font="character"] .theorem-citation-box .theorem-title, html[data-font="character"] .toc-header h3, html[data-font="character"] .modal-title, html[data-font="character"] .notifications-header h3, html[data-font="character"] .markdown-content h1, html[data-font="character"] .markdown-content h2, html[data-font="character"] .markdown-content h3, html[data-font="character"] .markdown-content h4, html[data-font="character"] .markdown-content h5, html[data-font="character"] .markdown-content h6 { font-family: var(--font-display); } /* Serif font — mathematical prose, long-form content */ html[data-font="character"] .theorem-content, html[data-font="character"] .theorem-citation-content, html[data-font="character"] .definition-box .definition-content, html[data-font="character"] .proof-content, html[data-font="character"] .example-content, html[data-font="character"] .motivation-content, html[data-font="character"] .flashcard-back .math-content, html[data-font="character"] .flashcard-back .description, html[data-font="character"] .markdown-content p, html[data-font="character"] .markdown-content li, html[data-font="character"] .markdown-content blockquote, html[data-font="character"] .message-content p, html[data-font="character"] .discussion-body, html[data-font="character"] .comment-body { font-family: var(--font-serif); } /* =================== RESPONSIVE TYPOGRAPHY Heading sizes scale down on smaller screens. Body text stays at 1rem (16px) — no change needed. UI chrome (14px) stays fixed across breakpoints. =================== */ @media (max-width: 768px) { :root { --font-size-6xl: 2.25rem; /* 48→36px */ --font-size-5xl: 1.75rem; /* 36→28px */ --font-size-4xl: 1.5rem; /* 28→24px */ --font-size-3xl: 1.25rem; /* 22→20px */ --font-size-2xl: 1.125rem; /* 20→18px */ } } @media (max-width: 480px) { :root { --font-size-6xl: 2rem; /* 48→32px */ --font-size-5xl: 1.5rem; /* 36→24px */ --font-size-4xl: 1.375rem; /* 28→22px */ --font-size-3xl: 1.125rem; /* 22→18px */ --font-size-2xl: 1rem; /* 20→16px */ } } /* === layout.css === */ /** * Layout System - Standardized Page Widths & Responsive Design * ============================================================ * * This file provides a consistent layout system across all pages. * Use these classes instead of custom max-width values. * * LAYOUT TYPES: * - .layout-narrow (768px) - Reading-focused: wiki pages, docs, articles * - .layout-medium (1024px) - General content, forms, moderate complexity * - .layout-wide (1280px) - Data-heavy: tables, lists, feeds, dashboards * - .layout-max (1400px) - Maximum bounded width * - .layout-full (100%) - App interfaces: messages, editors, sidebars * * RESPONSIVE BREAKPOINTS: * - Mobile: < 640px (single column, stacked, touch-friendly) * - Tablet: 640px - 1024px (adapted, collapsible sidebars) * - Desktop: > 1024px (full experience) * * USAGE: *
...
*
...
*
...
* * KNOWN ISSUES TO FIX LATER: * - Mobile dropdown menus (navbar logo) need touch-friendly sizing * - Search bar on mobile needs responsive redesign * - Some sidebars don't collapse properly on tablet */ /* =================== BASE LAYOUT CONTAINERS =================== */ /* All layout containers share these base styles */ .layout-narrow, .layout-medium, .layout-wide, .layout-max { width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--content-padding-mobile); padding-right: var(--content-padding-mobile); box-sizing: border-box; } /* Narrow: Reading-focused content (768px) */ .layout-narrow { max-width: var(--layout-narrow); } /* Medium: General content (1024px) */ .layout-medium { max-width: var(--layout-medium); } /* Wide: Data-heavy content (1280px) */ .layout-wide { max-width: var(--layout-wide); } /* Max: Maximum bounded width (1400px) */ .layout-max { max-width: var(--layout-max); } /* Full: No max-width, for app-like interfaces */ .layout-full { width: 100%; padding-left: var(--content-padding-mobile); padding-right: var(--content-padding-mobile); box-sizing: border-box; } /* =================== RESPONSIVE PADDING =================== */ /* Tablet and up */ @media (min-width: 640px) { .layout-narrow, .layout-medium, .layout-wide, .layout-max, .layout-full { padding-left: var(--content-padding-tablet); padding-right: var(--content-padding-tablet); } } /* Desktop and up */ @media (min-width: 1024px) { .layout-narrow, .layout-medium, .layout-wide, .layout-max, .layout-full { padding-left: var(--content-padding-desktop); padding-right: var(--content-padding-desktop); } } /* =================== LAYOUT MODIFIERS =================== */ /* No horizontal padding */ .layout-no-padding { padding-left: 0 !important; padding-right: 0 !important; } /* Extra padding for breathing room */ .layout-padded-lg { padding-left: calc(var(--content-padding-desktop) * 1.5); padding-right: calc(var(--content-padding-desktop) * 1.5); } /* Center content vertically (for flex parents) */ .layout-centered { display: flex; flex-direction: column; align-items: center; } /* =================== SIDEBAR LAYOUTS =================== */ /* Container for sidebar + main content */ .layout-with-sidebar { display: flex; gap: var(--spacing-lg); width: 100%; } /* Main content area next to sidebar */ .layout-with-sidebar > .layout-main { flex: 1; min-width: 0; /* Prevent overflow */ } /* Fixed sidebar */ .layout-with-sidebar > .layout-sidebar { width: var(--sidebar-width); flex-shrink: 0; } /* Sidebar on right */ .layout-with-sidebar.sidebar-right { flex-direction: row; } /* Sidebar on left */ .layout-with-sidebar.sidebar-left { flex-direction: row-reverse; } /* Collapse sidebar on tablet and below */ @media (max-width: 1024px) { .layout-with-sidebar { flex-direction: column; } .layout-with-sidebar > .layout-sidebar { width: 100%; order: -1; /* Sidebar appears first on mobile */ } /* Option to hide sidebar on mobile */ .layout-with-sidebar > .layout-sidebar.hide-mobile { display: none; } } /* =================== TWO-COLUMN LAYOUTS =================== */ .layout-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); } /* Stack columns on tablet */ @media (max-width: 1024px) { .layout-two-column { grid-template-columns: 1fr; } } /* Three column grid */ .layout-three-column { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); } /* Responsive three columns */ @media (max-width: 1024px) { .layout-three-column { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .layout-three-column { grid-template-columns: 1fr; } } /* =================== RESPONSIVE UTILITIES =================== */ /* Hide on mobile */ .hide-mobile { display: block; } @media (max-width: 640px) { .hide-mobile { display: none !important; } } /* Hide on tablet and below */ .hide-tablet { display: block; } @media (max-width: 1024px) { .hide-tablet { display: none !important; } } /* Show only on mobile */ .show-mobile { display: none; } @media (max-width: 640px) { .show-mobile { display: block !important; } } /* Show only on tablet and below */ .show-tablet { display: none; } @media (max-width: 1024px) { .show-tablet { display: block !important; } } /* =================== MOBILE-FIRST STACK =================== */ /* Stack any flex container on mobile */ .stack-mobile { display: flex; gap: var(--spacing-md); } @media (max-width: 640px) { .stack-mobile { flex-direction: column; } } /* =================== CONTENT WRAPPERS Common patterns for page content =================== */ /* Standard page content wrapper */ .page-content { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-2xl); } /* Compact page content */ .page-content-compact { padding-top: var(--spacing-md); padding-bottom: var(--spacing-lg); } /* Full height content (fills remaining viewport) */ .page-content-full-height { min-height: calc(100vh - var(--header-height) - var(--spacing-2xl)); } /* =================== SECTION SPACING =================== */ .section { margin-bottom: var(--spacing-2xl); } .section-sm { margin-bottom: var(--spacing-lg); } .section-lg { margin-bottom: var(--spacing-3xl); } /* =================== CARD GRID LAYOUTS =================== */ .card-grid { display: grid; gap: var(--spacing-lg); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .card-grid-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .card-grid-lg { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } /* =================== PRINT STYLES =================== */ @media print { .layout-narrow, .layout-medium, .layout-wide, .layout-max, .layout-full { max-width: 100%; padding: 0; } .hide-print { display: none !important; } .layout-with-sidebar > .layout-sidebar { display: none; } } /* === components.css === */ /** * Components Library - Reusable UI Components * ============================================ * * This file contains reusable component styles. * Use these classes instead of creating new similar styles. * * Components included: * - Buttons (.btn, .btn-primary, etc.) * - Cards (.card, .card-header, etc.) * - Forms (.form-group, .form-input, etc.) * - Badges/Labels (.badge, .label, etc.) * - Tabs (.tabs, .tab-btn, etc.) * - Lists (.list-item, etc.) * - Avatars (.avatar, etc.) * - Empty States (.empty-state) */ /* =================== BUTTONS =================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375em; padding: 0.5em 1.125em; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); line-height: 1.3; border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); background-color: var(--color-bg-primary); color: var(--color-text-primary); cursor: pointer; transition: var(--transition-fast); white-space: nowrap; text-decoration: none; } .btn:hover { background-color: var(--color-bg-secondary); text-decoration: none; } .btn:focus { outline: none; box-shadow: var(--shadow-focus); } .btn-primary { background-color: var(--color-dark); color: var(--color-text-inverse); border-color: var(--color-dark); } .btn-primary:hover { background-color: var(--color-black); } .btn-secondary { background-color: var(--color-bg-primary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); } .btn-secondary:hover { background-color: var(--color-bg-tertiary); } .btn-danger { background-color: var(--color-danger); color: var(--color-text-inverse); border-color: var(--color-danger); } .btn-danger:hover { background-color: var(--color-danger); filter: brightness(0.85); } .btn-ghost { background-color: transparent; border-color: transparent; } .btn-ghost:hover { background-color: var(--color-bg-secondary); } .btn-sm { padding: 0.375em 0.75em; font-size: var(--font-size-sm); line-height: 1.25; gap: 0.375em; border-radius: var(--radius-md); } .btn-sm .btn-icon { width: 1.15em; height: 1.15em; } .btn-lg { padding: 0.625em 1.375em; font-size: var(--font-size-base); /* 15px */ font-weight: var(--font-weight-semibold); min-height: 40px; } .btn-lg .btn-icon, .btn-lg svg { width: 1.1em; height: 1.1em; } .btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; } /* =================== CARDS =================== */ .card { background-color: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); overflow: hidden; } .card-header { padding: var(--spacing-md); border-bottom: 1px solid var(--color-border-primary); } .card-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; } .card-content { padding: var(--spacing-md); } .card-footer { padding: var(--spacing-md); border-top: 1px solid var(--color-border-primary); background-color: var(--color-bg-secondary); } .card-clickable { cursor: pointer; transition: var(--transition-fast); } .card-clickable:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-secondary); } /* =================== FORMS =================== */ .form-group { margin-bottom: var(--spacing-md); } .form-label { display: block; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .form-input, .form-textarea, .form-select { width: 100%; padding: 8px 12px; font-size: var(--font-size-md); line-height: 20px; color: var(--color-text-primary); background-color: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); transition: var(--transition-fast); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .form-input::placeholder { color: var(--color-text-placeholder); } .form-hint { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--spacing-xs); } .form-error { font-size: var(--font-size-sm); color: var(--color-danger); margin-top: var(--spacing-xs); } /* =================== BADGES & LABELS =================== */ .badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 2px 8px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border-radius: var(--radius-full); white-space: nowrap; } .badge-primary { background-color: var(--color-primary-subtle); color: var(--color-primary); } .badge-success { background-color: var(--color-success-subtle); color: var(--color-success); } .badge-warning { background-color: var(--color-warning-subtle); color: var(--color-warning); } .badge-danger { background-color: var(--color-danger-subtle); color: var(--color-danger); } .badge-purple { background-color: var(--color-purple-subtle); color: var(--color-purple); } .badge-neutral { background-color: var(--color-bg-secondary); color: var(--color-text-secondary); } /* Labels (like GitHub issue labels) */ .label { display: inline-block; padding: 2px 8px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border-radius: var(--radius-full); border: 1px solid rgba(31, 35, 40, 0.15); white-space: nowrap; } /* =================== TABS =================== */ .tabs { display: flex; gap: var(--spacing-sm); border-bottom: 1px solid var(--color-border-primary); } .tab-btn { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: var(--transition-fast); } .tab-btn:hover { color: var(--color-text-primary); border-bottom-color: var(--color-border-secondary); } .tab-btn.active { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); border-bottom-color: var(--color-danger); } .tab-btn svg { width: 16px; height: 16px; } /* =================== AVATARS =================== */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); overflow: hidden; background-color: var(--color-bg-secondary); flex-shrink: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-xs { width: 16px; height: 16px; } .avatar-sm { width: 24px; height: 24px; } .avatar-md { width: 32px; height: 32px; } .avatar-lg { width: 48px; height: 48px; } .avatar-xl { width: 64px; height: 64px; } /* =================== LIST ITEMS =================== */ .list-item { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-md); border-bottom: 1px solid var(--color-border-primary); transition: var(--transition-fast); } .list-item:hover { background-color: var(--color-bg-secondary); } .list-item:last-child { border-bottom: none; } .list-item-content { flex: 1; min-width: 0; } .list-item-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .list-item-title a { color: inherit; text-decoration: none; } .list-item-title a:hover { color: var(--color-primary); } .list-item-meta { font-size: var(--font-size-sm); color: var(--color-text-secondary); display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; } /* =================== EMPTY STATES =================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-3xl) var(--spacing-md); } .empty-state-icon { width: 48px; height: 48px; color: var(--color-text-tertiary); margin-bottom: var(--spacing-md); } .empty-state h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-sm); } .empty-state p { font-size: var(--font-size-md); color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); max-width: 400px; } /* =================== STATUS ICONS =================== */ .status-icon { width: 16px; height: 16px; flex-shrink: 0; } .status-icon-open { fill: var(--color-success); color: var(--color-success); } .status-icon-closed { fill: var(--color-purple); color: var(--color-purple); } .status-icon-merged { fill: var(--color-purple); color: var(--color-purple); } .status-icon-resolved { fill: var(--color-success); color: var(--color-success); } /* =================== DROPDOWN MENUS =================== */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: 100%; right: 0; min-width: 160px; padding: var(--spacing-xs) 0; background-color: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); display: none; } .dropdown-menu.open { display: block; } .dropdown-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-md); color: var(--color-text-primary); text-decoration: none; cursor: pointer; transition: var(--transition-fast); } .dropdown-item:hover { background-color: var(--color-bg-secondary); } .dropdown-divider { height: 1px; margin: var(--spacing-xs) 0; background-color: var(--color-border-primary); } /* =================== SEARCH INPUT =================== */ .search-wrapper { position: relative; } .search-wrapper .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-text-secondary); pointer-events: none; } .search-wrapper .form-input { padding-left: 36px; } /* =================== PAGE HEADERS =================== */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-lg); gap: var(--spacing-md); } .page-header-content { flex: 1; } .page-title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-xs) 0; line-height: var(--line-height-tight); } .page-description { font-size: var(--font-size-md); color: var(--color-text-secondary); margin: 0; } .page-actions { display: flex; gap: var(--spacing-sm); flex-shrink: 0; } /* =================== BREADCRUMBS =================== */ .breadcrumb { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-md); color: var(--color-text-secondary); margin-bottom: var(--spacing-md); } .breadcrumb a { color: var(--color-text-link); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb-separator { color: var(--color-text-tertiary); } /* =================== UTILITIES =================== */ .text-muted { color: var(--color-text-secondary) !important; } .text-primary { color: var(--color-primary) !important; } .text-success { color: var(--color-success) !important; } .text-danger { color: var(--color-danger) !important; } .text-sm { font-size: var(--font-size-sm) !important; } .text-lg { font-size: var(--font-size-lg) !important; } .font-medium { font-weight: var(--font-weight-medium) !important; } .font-semibold { font-weight: var(--font-weight-semibold) !important; } /* =================== CONTENT CONTAINERS =================== */ /* Standard responsive content container - use for main page content */ .content-container { width: var(--content-width-percent, 90%); max-width: var(--max-width); min-width: min(var(--min-width-fixed, 320px), 100%); margin: 0 auto; padding: 0 var(--content-padding-x, 64px); } /* Narrower content container for focused reading */ .content-container-narrow { width: var(--content-width-percent, 90%); max-width: var(--content-max-width); min-width: min(var(--min-width-fixed, 320px), 100%); margin: 0 auto; padding: 0 var(--content-padding-x, 64px); } /* Full-width container with only max-width constraint */ .content-container-full { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--content-padding-x, 64px); } /* Responsive adjustments for containers */ @media (max-width: 1024px) { .content-container, .content-container-narrow, .content-container-full, .issues-page { padding: 0 var(--spacing-xl, 32px); } } @media (max-width: 768px) { .content-container, .content-container-narrow, .content-container-full, .issues-page { width: 100%; padding: 0 var(--spacing-md, 16px); } } /* =================== ISSUES PAGE STYLES =================== */ /* Container */ .issues-page { width: var(--content-width-percent, 90%); max-width: var(--max-width); min-width: min(var(--min-width-fixed, 320px), 100%); margin: 0 auto; padding: 0 var(--content-padding-x, 64px); } /* Issues toolbar */ .issues-toolbar { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); align-items: center; } .issues-search { position: relative; flex-grow: 1; } .issues-search .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-secondary); width: 16px; height: 16px; } .issues-search .form-input { padding-left: 36px; } /* Issues tabs */ .issues-tabs { display: flex; border-bottom: 1px solid var(--color-border-primary); margin-bottom: var(--spacing-md); } .issue-tab { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); background: none; border: none; border-bottom: 2px solid transparent; color: var(--color-text-secondary); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); cursor: pointer; transition: var(--transition-fast); text-decoration: none; } .issue-tab:hover { color: var(--color-text-primary); background-color: var(--color-bg-secondary); border-radius: var(--radius-md) var(--radius-md) 0 0; } .issue-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-text-primary); background-color: var(--color-bg-primary); } .issue-tab svg { width: 16px; height: 16px; fill: currentColor; } .issue-tab[data-status="open"] svg { fill: var(--color-success); } .issue-tab[data-status="closed"] svg { fill: var(--color-purple); } .issue-tab[data-status="resolved"] svg { fill: var(--color-success); } .issue-tab .count-badge { font-weight: var(--font-weight-semibold); background-color: var(--color-bg-secondary); border-radius: var(--radius-full); padding: 2px 8px; font-size: var(--font-size-sm); min-width: 20px; text-align: center; } .issue-tab.active .count-badge { background-color: var(--color-text-primary); color: var(--color-text-inverse); } /* Issue cards */ a.issue-card, div.issue-card, .issue-card { display: block; border-bottom: 1px solid var(--color-border-primary); background-color: var(--color-bg-primary); transition: var(--transition-fast); text-decoration: none; color: inherit; } .issue-card:last-child { border-bottom: none; } a.issue-card:hover, .issue-card:hover { background: var(--color-bg-hover, #f5f5f5); } .issue-card-main { display: flex; padding: 10px var(--spacing-md); align-items: flex-start; gap: 10px; width: 100%; } .issue-status-icon { flex-shrink: 0; } .issue-status-icon svg { width: 16px; height: 16px; } .issue-status-icon .status-open { fill: var(--color-success); color: var(--color-success); } .issue-status-icon .status-closed { fill: var(--color-purple); color: var(--color-purple); } .issue-status-icon .status-resolved { fill: var(--color-success); color: var(--color-success); } .issue-content { flex-grow: 1; min-width: 0; } .issue-title-row { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); align-items: center; } .issue-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); color: var(--color-text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-tight); } .issue-title:hover { color: var(--color-primary); } .issue-number { font-weight: var(--font-weight-normal); color: var(--color-text-secondary); } .issue-labels { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .issue-description-preview { font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: var(--line-height-normal); margin: var(--spacing-xs) 0 var(--spacing-sm) 0; overflow: hidden; word-break: break-word; } .issue-meta { font-size: var(--font-size-sm); color: var(--color-text-secondary); display: flex; align-items: center; gap: var(--spacing-xs); flex-wrap: wrap; } .issue-stats { display: flex; align-items: center; gap: var(--spacing-sm); } .issue-stat { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-text-primary); font-size: var(--font-size-sm); text-decoration: none; } .issue-stat:hover { color: var(--color-primary); } .issue-stat svg { width: 16px; height: 16px; } /* Author avatar */ .author-avatar { border-radius: var(--radius-full); margin-right: var(--spacing-xs); vertical-align: middle; } .author-avatar-initials { width: 20px; height: 20px; border-radius: var(--radius-full); background-color: var(--color-primary); color: var(--color-text-inverse); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--font-weight-semibold); margin-right: var(--spacing-xs); vertical-align: middle; } /* Reactions */ .reactions { display: flex; gap: var(--spacing-sm); align-items: center; } .reaction-item { display: flex; align-items: center; gap: 2px; padding: 2px 6px; color: var(--color-text-primary); } .reaction-count { font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); } /* New Issue Form */ .new-issue-form { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 700px; background-color: var(--color-bg-primary); box-shadow: var(--shadow-lg); z-index: var(--z-modal); padding: var(--spacing-xl); overflow-y: auto; } .form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border-primary); } .form-actions { display: flex; justify-content: flex-end; gap: var(--spacing-sm); margin-top: var(--spacing-xl); } /* Tag search system */ .tag-search-container { position: relative; } .tag-suggestions { position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); max-height: 200px; overflow-y: auto; z-index: var(--z-dropdown); display: none; box-shadow: var(--shadow-md); } .tag-suggestion { padding: var(--spacing-sm) var(--spacing-md); cursor: pointer; font-size: var(--font-size-md); } .tag-suggestion:hover { background-color: var(--color-bg-secondary); } .selected-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-sm); } .selected-tag { display: inline-flex; align-items: center; padding: 2px 8px; background-color: var(--color-primary-subtle); color: var(--color-primary); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .remove-tag { margin-left: var(--spacing-xs); cursor: pointer; font-weight: bold; } .remove-tag:hover { color: var(--color-danger); } /* Responsive adjustments */ @media (max-width: 768px) { .issues-page { padding: 0 var(--spacing-md); } .page-header { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); } .page-actions { width: auto; } .issues-toolbar { flex-direction: column; align-items: stretch; } .issue-card .issue-title-row { flex-direction: column; align-items: flex-start; } .issue-card .issue-stats { display: none; } .new-issue-form { max-width: 100%; } .issue-card-main { padding: 8px 12px; gap: 8px; } } /* =================== ATTRIBUTION SYSTEM =================== */ /* Attribution Page Container */ .attribution-page { max-width: 1400px; width: 100%; min-width: 0; margin: 0 auto; padding: var(--spacing-xl); box-sizing: border-box; } @media (min-width: 768px) { .attribution-page { min-width: 700px; } } @media (min-width: 1200px) { .attribution-page { min-width: 900px; } } /* Attribution Header */ .attribution-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border-primary); gap: var(--spacing-md); } .attribution-header-content h1 { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-2xl); margin: var(--spacing-sm) 0; } .attribution-header-content h1 svg { width: 24px; height: 24px; flex-shrink: 0; } .attribution-subtitle { color: var(--color-text-secondary); margin: 0; font-size: var(--font-size-md); } .attribution-header-actions { display: flex; gap: var(--spacing-sm); align-items: center; flex-wrap: wrap; } @media (max-width: 768px) { .attribution-header { flex-direction: column; align-items: flex-start; } .attribution-header-actions { width: 100%; } } /* Attribution Tabs */ .attribution-tabs { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border-primary); overflow-x: auto; } .attribution-tab { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); color: var(--color-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--transition-fast); white-space: nowrap; font-weight: var(--font-weight-medium); } .attribution-tab:hover { color: var(--color-text-primary); } .attribution-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-text-primary); } .attribution-tab svg { width: 16px; height: 16px; flex-shrink: 0; } /* Attribution Layout (2-column) */ .attribution-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--spacing-lg); } @media (max-width: 1024px) { .attribution-layout { grid-template-columns: 1fr; } .attribution-summary-panel { order: -1; } } /* Attribution Content Panel */ .attribution-content-panel { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); overflow: hidden; } .attribution-panel-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border-primary); background: var(--color-bg-secondary); } .attribution-panel-header h3 { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); } .attribution-panel-controls { display: flex; gap: var(--spacing-sm); } .attribution-content-body { padding: var(--spacing-lg); } /* Attribution Blocks */ .attribution-blocks { display: flex; flex-direction: column; gap: var(--spacing-md); } .attribution-block { position: relative; padding: var(--spacing-md) var(--spacing-lg); background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); transition: var(--transition-fast); } .attribution-block:hover { border-color: var(--color-border-secondary); box-shadow: var(--shadow-sm); } .attribution-block.verified { border-left: 3px solid var(--color-success); } .attribution-block.unverified { border-left: 3px solid var(--color-warning); } .attribution-block-status { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); } .attribution-block-status.verified { background: var(--color-success-subtle); color: var(--color-success); } .attribution-block-status.unverified { background: var(--color-warning-subtle); color: var(--color-warning); } .attribution-block-status svg { width: 14px; height: 14px; } .attribution-block-content { padding-right: var(--spacing-xl); } .attribution-block-info { display: none; margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-primary); justify-content: space-between; align-items: center; } .attribution-block:hover .attribution-block-info, .show-attributions .attribution-block .attribution-block-info { display: flex; } .attribution-block-meta { display: flex; align-items: center; gap: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .attribution-block-type { padding: 2px 8px; background: var(--color-bg-secondary); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.5px; font-weight: var(--font-weight-semibold); } .attribution-block-contributor, .attribution-block-reviewer { display: flex; align-items: center; gap: var(--spacing-xs); } .attribution-block-contributor svg, .attribution-block-reviewer svg { width: 12px; height: 12px; } .attribution-block-actions { display: flex; gap: var(--spacing-sm); } /* Attribution Summary Panel */ .attribution-summary-panel { display: flex; flex-direction: column; gap: var(--spacing-md); } /* Summary Card (reusable card for panels) */ .summary-card { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: var(--spacing-lg); } .summary-card h4 { display: flex; align-items: center; gap: var(--spacing-sm); margin: 0 0 var(--spacing-md) 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .summary-card h4 svg { width: 16px; height: 16px; } /* Verification Status Display */ .verification-status-display { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--spacing-md); } .verification-status-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); margin-bottom: var(--spacing-sm); } .verification-status-icon svg { width: 24px; height: 24px; } .verification-status-icon.verified { background: var(--color-success-subtle); color: var(--color-success); } .verification-status-icon.pending { background: var(--color-primary-subtle); color: var(--color-primary); } .verification-status-icon.disputed { background: var(--color-danger-subtle); color: var(--color-danger); } .verification-status-icon.unverified { background: var(--color-bg-secondary); color: var(--color-text-tertiary); } .verification-status-text { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); color: var(--color-text-primary); } .verification-status-meta { font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* Stats Grid */ .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } .stat-item { text-align: center; } .stat-item.full-width { grid-column: 1 / -1; } .stat-value { display: block; font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .stat-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); } /* Progress Bar */ .progress-bar { height: 8px; background: var(--color-bg-tertiary); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--spacing-xs); } .progress-fill { height: 100%; background: var(--color-success); border-radius: var(--radius-full); transition: width 300ms ease; } /* Percentage-based verification bar */ .verification-bar { display: flex; align-items: center; gap: var(--spacing-sm); } .verification-bar-fill { flex: 1; height: 6px; background: var(--color-bg-tertiary); border-radius: var(--radius-full); overflow: hidden; } .verification-bar-fill > div { height: 100%; background: var(--color-success); border-radius: var(--radius-full); } .verification-bar-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; } /* Contributors List */ .contributors-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .contributor-item { display: flex; align-items: center; gap: var(--spacing-sm); } .contributor-avatar { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-secondary); border-radius: var(--radius-full); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); flex-shrink: 0; } .contributor-avatar img { width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover; } .contributor-avatar svg { width: 16px; height: 16px; } .contributor-info { display: flex; flex-direction: column; min-width: 0; } .contributor-name { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--color-text-primary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .contributor-stats { font-size: var(--font-size-xs); color: var(--color-text-secondary); } /* Reviewer List */ .reviewer-list { display: flex; flex-direction: column; gap: var(--spacing-sm); max-height: 200px; overflow-y: auto; } .reviewer-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-xs) 0; } .reviewer-avatar { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-secondary); border-radius: var(--radius-full); color: var(--color-text-secondary); flex-shrink: 0; } .reviewer-avatar img { width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover; } .reviewer-avatar svg { width: 14px; height: 14px; } .reviewer-info { display: flex; flex-direction: column; min-width: 0; } .reviewer-name { font-size: var(--font-size-sm); color: var(--color-text-link); text-decoration: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .reviewer-name:hover { text-decoration: underline; } /* Role Badges */ .role-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .role-badge svg { width: 12px; height: 12px; } .role-badge.admin { background: var(--color-warning-subtle); color: var(--color-warning); } .role-badge.moderator { background: var(--color-purple-subtle); color: var(--color-purple); } .role-badge.editor { background: var(--color-primary-subtle); color: var(--color-primary); } .role-badge.reviewer { background: var(--color-success-subtle); color: var(--color-success); } /* Quick Actions */ .quick-actions { display: flex; flex-direction: column; gap: var(--spacing-sm); } .quick-actions .btn { width: 100%; justify-content: center; } /* Note/Info Box */ .info-note { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); margin-bottom: var(--spacing-sm); } .info-note strong { color: var(--color-text-primary); } /* No Data States */ .no-data { color: var(--color-text-tertiary); font-size: var(--font-size-sm); text-align: center; padding: var(--spacing-md); } /* Verification Badge (inline) */ .verification-badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-md); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); } .verification-badge svg { width: 16px; height: 16px; } .verification-badge.verified { background: var(--color-success-subtle); color: var(--color-success); } .verification-badge.unverified { background: var(--color-warning-subtle); color: var(--color-warning); } .verification-badge.pending { background: var(--color-primary-subtle); color: var(--color-primary); } /* =================== MODAL DIALOGS =================== */ .modal-backdrop { position: fixed; inset: 0; background: var(--color-bg-overlay); z-index: var(--z-modal-backdrop); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .modal-backdrop.active { opacity: 1; visibility: visible; } .modal-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); z-index: var(--z-modal); width: 90%; max-width: 420px; max-height: 90vh; background: var(--color-bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; overflow: hidden; } .modal-dialog.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .modal-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border-primary); } .modal-dialog-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; display: flex; align-items: center; gap: var(--spacing-sm); } .modal-dialog-title svg { width: 20px; height: 20px; flex-shrink: 0; } .modal-dialog-title.warning svg { color: var(--color-warning); } .modal-dialog-title.danger svg { color: var(--color-danger); } .modal-dialog-title.info svg { color: var(--color-primary); } .modal-dialog-title.success svg { color: var(--color-success); } .modal-dialog-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--color-text-secondary); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); } .modal-dialog-close:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); } .modal-dialog-close svg { width: 18px; height: 18px; } .modal-dialog-body { padding: var(--spacing-lg); } .modal-dialog-message { font-size: var(--font-size-md); color: var(--color-text-primary); line-height: var(--line-height-normal); margin: 0; } .modal-dialog-input { margin-top: var(--spacing-md); } .modal-dialog-input input, .modal-dialog-input textarea { width: 100%; padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-md); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); background: var(--color-bg-primary); color: var(--color-text-primary); transition: var(--transition-fast); } .modal-dialog-input input:focus, .modal-dialog-input textarea:focus { outline: none; border-color: var(--color-dark); box-shadow: var(--shadow-focus); } .modal-dialog-input textarea { min-height: 80px; resize: vertical; } .modal-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--color-border-primary); background: var(--color-bg-secondary); } /* Toast notifications (for simple alerts) */ .toast-container { position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--spacing-sm); pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--font-size-sm); color: var(--color-text-primary); pointer-events: auto; transform: translateX(120%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .toast.active { transform: translateX(0); opacity: 1; } .toast.success { border-left: 3px solid var(--color-success); } .toast.error { border-left: 3px solid var(--color-danger); } .toast.warning { border-left: 3px solid var(--color-warning); } .toast.info { border-left: 3px solid var(--color-primary); } .toast svg { width: 16px; height: 16px; flex-shrink: 0; } .toast.success svg { color: var(--color-success); } .toast.error svg { color: var(--color-danger); } .toast.warning svg { color: var(--color-warning); } .toast.info svg { color: var(--color-primary); } .toast-message { flex: 1; } .toast-close { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; color: var(--color-text-tertiary); cursor: pointer; border-radius: var(--radius-sm); } .toast-close:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }} /* ======================================== NOTIFICATION TOASTS — Ephemeral bottom-right real-time alerts ---------------------------------------------------------------- Same row pattern as the bell dropdown, but compact and elevated. Dropdown row styles live in style.css under the "NOTIFICATIONS" block so the visual layer stays unified. All color, spacing, and shadow values go through tokens so the toast adapts to data-theme × data-temperature. ======================================== */ .notification-toast-container { position: fixed; bottom: var(--spacing-lg, 24px); right: var(--spacing-lg, 24px); z-index: 10010; display: flex; flex-direction: column-reverse; gap: var(--spacing-sm, 8px); pointer-events: none; max-height: 420px; } .notification-toast { width: 304px; max-width: calc(100vw - 32px); background: var(--color-notification-card-bg, #ffffff); border: 1px solid var(--color-notification-card-border, #E0E0E0); border-radius: 10px; box-shadow: var(--shadow-notification-toast, 0 4px 12px rgba(0, 0, 0, 0.08)); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; pointer-events: auto; cursor: pointer; transform: translateX(120%); opacity: 0; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, box-shadow 0.2s ease; font-family: var(--font-sans, system-ui, sans-serif); color: var(--color-text-primary, #1A1A1A); } .notification-toast.active { transform: translateX(0); opacity: 1; } .notification-toast.dismissing { transform: translateX(120%); opacity: 0; transition-duration: 0.25s; } .notification-toast:hover { box-shadow: var(--shadow-notification-toast-hover, 0 6px 18px rgba(0, 0, 0, 0.14)); } /* Avatar lane — matches dropdown row at 36 x 36 */ .notification-toast-avatar, .notification-toast-avatar-fallback { width: 36px; height: 36px; border-radius: var(--radius-full, 9999px); flex-shrink: 0; } .notification-toast-avatar { object-fit: cover; } .notification-toast-avatar-fallback { display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-inverse, #ffffff); /* Background is applied inline by JS from a muted palette. */ } .notification-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .notification-toast-sender { font-size: 14px; font-weight: 600; color: var(--color-text-primary, #1A1A1A); line-height: 1.3; } .notification-toast-channel { font-size: 0.6875rem; color: var(--color-text-tertiary, #8A8A8A); } .notification-toast-preview { font-size: 13px; color: var(--color-text-secondary, #6B6B6B); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notification-toast-time { font-size: 11px; color: var(--color-notification-meta, #8A8A8A); flex-shrink: 0; align-self: flex-start; margin-top: 2px; } /* Reaction toast — compact, emoji-forward */ .notification-toast--reaction { padding: 10px 16px; align-items: center; } .notification-toast--reaction .notification-toast-avatar, .notification-toast--reaction .notification-toast-avatar-fallback { width: 28px; height: 28px; font-size: 0.6875rem; } /* Call invite toast — always-dark card shared with colloq voice rooms. JS does NOT emit this variant; the separate incoming-call overlay uses these styles. Do not remove. */ .notification-toast--call { background: var(--color-notification-call-bg, #1c1c1e); border-color: transparent; box-shadow: var(--shadow-notification-toast-call, 0 8px 32px rgba(0, 0, 0, 0.3)); } .notification-toast--call .notification-toast-sender { color: var(--color-text-inverse, #ffffff); } .notification-toast--call .notification-toast-channel { color: var(--color-notification-call-text-muted, rgba(255, 255, 255, 0.45)); } .notification-toast--call .notification-toast-actions { display: flex; gap: 0.5rem; margin-left: auto; flex-shrink: 0; } .notification-toast-action-btn { width: 32px; height: 32px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.15s; } .notification-toast-action-btn:hover { opacity: 0.85; } .notification-toast-action-btn--accept { background: var(--color-success, #5C6F5B); color: var(--color-text-inverse, #ffffff); } .notification-toast-action-btn--decline { background: var(--color-danger, #8A6060); color: var(--color-text-inverse, #ffffff); } .notification-toast-action-btn svg { width: 14px; height: 14px; } /* Mobile responsive */ @media (max-width: 640px) { .notification-toast-container { right: var(--spacing-sm, 8px); left: var(--spacing-sm, 8px); bottom: var(--spacing-sm, 8px); } .notification-toast { width: auto; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .notification-toast, .notification-toast.active, .notification-toast.dismissing { transition: none; } } /* =================== UTILITY CLASSES =================== */ /* Flexbox Utilities - Common flex patterns to reduce duplication */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-align-center { display: flex; align-items: center; } .flex-justify-center { display: flex; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .flex-col-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Gap Utilities */ .gap-xs { gap: var(--spacing-xs); } .gap-sm { gap: var(--spacing-sm); } .gap-md { gap: var(--spacing-md); } .gap-lg { gap: var(--spacing-lg); } .gap-xl { gap: var(--spacing-xl); } /* Text Utilities */ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--color-text-secondary); } .text-subtle { color: var(--color-text-tertiary); } /* Common Shadows */ .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } /* Border Radius Utilities */ .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); } /* ============================================================ Attribution Page — Mobile Responsive ============================================================ */ @media (max-width: 600px) { /* Content first, summary second on mobile */ .attribution-summary-panel { order: 1 !important; } .attribution-content-panel { order: 0; } /* Reduce padding at every level */ .attribution-page { padding: 12px; } .attribution-content-body { padding: 10px; } .attribution-block { padding: 10px; } .attribution-block-content { padding-right: 24px; } .attribution-block .rendered-markdown-content { font-size: 14px; line-height: 1.5; overflow-x: auto; word-break: break-word; } .attribution-block .rendered-markdown-content p { font-size: 14px; line-height: 1.5; } /* MathJax overflow */ .attribution-block mjx-container { overflow-x: auto; max-width: 100%; } /* Header */ .attribution-header-content h1, .attribution-header-content h2 { font-size: 18px; } .attribution-header-actions { flex-wrap: wrap; gap: 6px; } /* Panel header */ .attribution-panel-header { padding: 10px; flex-wrap: wrap; gap: 6px; } /* Tabs — smaller font, scrollable */ .attribution-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 0; } .attribution-tab { font-size: 13px; padding: 8px 12px; gap: 4px; } .attribution-tab svg { width: 14px; height: 14px; } /* Summary cards compact */ .summary-card { padding: 12px; } } /* === issue-github.css === */ /* Issue Detail Page CSS */ /* Uses design tokens from design-tokens.css for consistency */ /* ============================================ 1. CSS VARIABLES (mapped to design tokens) ============================================ */ :root { --gh-bg: var(--color-bg-primary, #ffffff); --gh-bg-subtle: var(--color-bg-secondary, #f5f5f5); --gh-border: var(--color-border-primary, #e0e0e0); --gh-border-muted: var(--color-border-secondary, #eee); --gh-text: var(--color-text-primary, #333); --gh-text-muted: var(--color-text-secondary, #666); --gh-text-link: var(--color-text-primary, #333); --gh-accent-green: #1a7f37; --gh-accent-green-bg: #e8f5e9; --gh-accent-purple: #8250df; --gh-accent-purple-bg: #f5f0ff; --gh-btn-primary-bg: var(--color-text-primary, #333); --gh-btn-primary-hover: var(--color-primary-hover, #000); --gh-btn-secondary-bg: var(--color-bg-secondary, #f5f5f5); --gh-btn-secondary-border: var(--color-border-primary, #e0e0e0); --gh-radius: 8px; --gh-radius-lg: 12px; --gh-header-bg: var(--color-bg-secondary, #f8f8f8); --gh-comment-border: var(--color-border-primary, #e0e0e0); } /* ============================================ 1b. BREADCRUMB ============================================ */ .gh-issue-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gh-text-muted); margin-bottom: 20px; } .gh-issue-breadcrumb a { color: var(--gh-text-muted); text-decoration: none; transition: color 0.15s; } .gh-issue-breadcrumb a:hover { color: var(--gh-text); } .gh-issue-breadcrumb svg { flex-shrink: 0; opacity: 0.4; } .gh-issue-breadcrumb .gh-breadcrumb-current { color: var(--gh-text); font-weight: 500; } /* ============================================ 2. PAGE LAYOUT ============================================ */ .gh-issue-page { width: 100%; max-width: 1100px; margin: 0 auto; padding: 32px 24px; font-size: 14px; line-height: 1.5; color: var(--gh-text); background: var(--gh-bg); } /* Remove any container constraints from parent layouts */ .main-content-area:has(.gh-issue-page) { max-width: none !important; width: 100% !important; background: var(--gh-bg) !important; } .content-container:has(.gh-issue-page) { max-width: none !important; width: 100% !important; } .page-content:has(.gh-issue-page) { max-width: none !important; width: 100% !important; } /* ============================================ 3. HEADER ============================================ */ .gh-issue-header { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--gh-border); } .gh-issue-title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .gh-issue-title { font-size: 26px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--gh-text); letter-spacing: -0.02em; } .gh-issue-number { font-weight: 300; color: var(--gh-text-muted); } .gh-issue-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gh-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 2em; font-size: 14px; font-weight: 500; } .gh-status-badge svg { flex-shrink: 0; } .gh-status-open { background: var(--gh-accent-green-bg); color: var(--gh-accent-green); border: 1px solid rgba(26, 127, 55, 0.2); } .gh-status-closed { background: var(--gh-accent-purple-bg); color: var(--gh-accent-purple); border: 1px solid rgba(130, 80, 223, 0.2); } .gh-status-resolved { background: var(--gh-accent-green-bg); color: var(--gh-accent-green); border: 1px solid rgba(26, 127, 55, 0.2); } .gh-meta-text { color: var(--gh-text-muted); font-size: 14px; } .gh-author-link { color: var(--gh-text); font-weight: 600; text-decoration: none; } .gh-author-link:hover { color: var(--gh-text-link); text-decoration: underline; } /* ============================================ 4. MAIN LAYOUT (Two columns) ============================================ */ .gh-issue-layout, .gh-pr-layout { display: flex; gap: 24px; } .gh-issue-main, .gh-pr-main { flex: 1; min-width: 0; } /* ============================================ 4b. PULL REQUEST SPECIFIC STYLES ============================================ */ .gh-pr-page { /* Inherits from gh-issue-page */ } .gh-pr-header { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--gh-border); } .gh-pr-breadcrumb { font-size: 14px; margin-bottom: 8px; color: var(--gh-text-muted); } .gh-pr-breadcrumb a { color: var(--gh-link); text-decoration: none; } .gh-pr-breadcrumb a:hover { text-decoration: underline; } .gh-pr-title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .gh-pr-title { font-size: 32px; font-weight: 400; line-height: 1.25; margin: 0; color: var(--gh-text); } .gh-pr-number { font-weight: 300; color: var(--gh-text-muted); } .gh-pr-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gh-pr-section-badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 12px; font-weight: 500; border-radius: 12px; background: var(--gh-bg-secondary); color: var(--gh-text-muted); } /* PR Tabs */ .pr-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--gh-border); margin-bottom: 16px; } .pr-tabs .tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--gh-text-muted); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.15s ease; } .pr-tabs .tab-btn:hover { color: var(--gh-text); } .pr-tabs .tab-btn.active { color: var(--gh-text); border-bottom-color: #f78166; } .pr-tabs .tab-btn svg { width: 16px; height: 16px; } /* PR Tab Content (scoped to PR detail page only) */ .pr-tabs ~ .tab-content { display: none; } .pr-tabs ~ .tab-content.active { display: block; } /* PR Diff Styles */ .gh-pr-diff { margin-top: 16px; } .gh-diff-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .gh-diff-header h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--gh-text); } .diff-mode-controls { display: flex; gap: 4px; } .diff-mode-btn { padding: 4px 8px !important; } .diff-mode-btn.active { background: var(--gh-bg-secondary) !important; } /* Split Diff View */ .gh-diff-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .gh-diff-panel { border: 1px solid var(--gh-border); border-radius: 8px; overflow: hidden; } .gh-diff-panel-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 12px; font-weight: 600; background: var(--gh-bg-secondary); border-bottom: 1px solid var(--gh-border); color: var(--gh-text-muted); } .gh-diff-panel-header svg { width: 16px; height: 16px; } .gh-diff-content { padding: 16px; min-height: 100px; background: var(--gh-bg); } .gh-diff-original .gh-diff-panel-header { background: rgba(248, 81, 73, 0.1); border-bottom-color: rgba(248, 81, 73, 0.2); } .gh-diff-proposed .gh-diff-panel-header { background: rgba(63, 185, 80, 0.1); border-bottom-color: rgba(63, 185, 80, 0.2); } .gh-empty-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; color: var(--gh-text-muted); } .gh-empty-content p { margin: 8px 0 4px; font-size: 14px; } .gh-empty-hint { font-size: 12px; color: var(--gh-text-muted); } /* Unified Diff View */ .gh-diff-unified { border: 1px solid var(--gh-border); border-radius: 8px; overflow: hidden; } .gh-diff-unified-content { padding: 0; font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; background: var(--gh-bg); overflow-x: auto; } .gh-unified-diff-lines { width: 100%; } .gh-diff-line { display: flex; align-items: stretch; min-height: 20px; } .gh-diff-line-num { width: 40px; min-width: 40px; padding: 0 8px; text-align: right; color: var(--gh-text-muted); background: var(--gh-bg-secondary); border-right: 1px solid var(--gh-border); user-select: none; font-size: 12px; } .gh-diff-line-marker { width: 20px; min-width: 20px; text-align: center; font-weight: 600; user-select: none; } .gh-diff-line-content { flex: 1; padding: 0 8px; white-space: pre-wrap; word-break: break-all; } .gh-diff-line-added { background: rgba(63, 185, 80, 0.15); } .gh-diff-line-added .gh-diff-line-marker { color: var(--color-success); } .gh-diff-line-added .gh-diff-line-num { background: rgba(63, 185, 80, 0.2); } .gh-diff-line-removed { background: rgba(248, 81, 73, 0.15); } .gh-diff-line-removed .gh-diff-line-marker { color: var(--color-danger); } .gh-diff-line-removed .gh-diff-line-num { background: rgba(248, 81, 73, 0.2); } .gh-diff-line-context { background: var(--gh-bg); } .gh-diff-line-context .gh-diff-line-marker { color: var(--gh-text-muted); } .gh-diff-simple { padding: 16px; } .gh-diff-simple pre { background: var(--gh-bg-secondary); padding: 12px; border-radius: 6px; overflow-x: auto; margin: 8px 0; } .gh-diff-error { color: var(--color-danger); padding: 16px; text-align: center; } .gh-diff-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; color: var(--gh-text-muted); } /* ============================================ 5. TIMELINE (Comments) ============================================ */ .gh-timeline { position: relative; margin-top: 24px; } /* Timeline Events (merge/close) */ .gh-timeline-event { display: flex; align-items: center; gap: 12px; padding: 12px 0; padding-left: 40px; position: relative; } .gh-timeline-event-icon { position: absolute; left: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gh-bg); z-index: 1; } .gh-timeline-event-icon svg { width: 16px; height: 16px; } .gh-event-merged .gh-timeline-event-icon { background: rgba(130, 80, 223, 0.1); color: #8250df; } .gh-event-closed .gh-timeline-event-icon { background: rgba(248, 81, 73, 0.1); color: var(--color-danger); } .gh-event-default .gh-timeline-event-icon { background: var(--gh-bg-secondary); color: var(--gh-text-muted); } .gh-timeline-event-content { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gh-timeline-event-text { font-size: 14px; color: var(--gh-text); } .gh-timeline-event-text strong { font-weight: 600; } .gh-timeline-event-time { font-size: 12px; color: var(--gh-text-muted); } /* Add visual connector line between comments */ .gh-timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: var(--gh-border); z-index: 0; } /* Hide line for first/last elements */ .gh-timeline .gh-comment:last-child::after { content: ''; position: absolute; left: -16px; bottom: 0; width: 2px; height: 50%; background: var(--gh-bg); z-index: 0; } .gh-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; color: var(--gh-text-muted); } .gh-spinner { width: 32px; height: 32px; border: 3px solid var(--gh-border); border-top-color: var(--gh-text-link); border-radius: 50%; animation: gh-spin 1s linear infinite; } @keyframes gh-spin { to { transform: rotate(360deg); } } /* Empty state */ .gh-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; text-align: center; color: var(--gh-text-muted); } .gh-empty-state h3 { margin: 16px 0 8px; font-size: 20px; font-weight: 600; color: var(--gh-text); } .gh-empty-state p { margin: 0; font-size: 14px; } /* ============================================ 6. COMMENT BOX ============================================ */ .gh-comment { position: relative; display: flex; gap: 16px; margin-bottom: 16px; padding-bottom: 16px; z-index: 1; } .gh-comment-avatar { flex-shrink: 0; width: 40px; height: 40px; } .gh-comment-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: none; box-shadow: 0 0 0 1px rgba(27, 31, 36, 0.15); } .gh-avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; background: var(--gh-text, #333); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; } .gh-comment-container { flex: 1; min-width: 0; border: 1px solid var(--gh-comment-border); border-radius: var(--gh-radius); background: var(--gh-bg); box-shadow: none; } /* First comment (issue body) styling */ .gh-comment.gh-comment-first .gh-comment-container { border-color: var(--gh-border); border-width: 1px; } .gh-comment.gh-comment-first .gh-comment-header { background: var(--gh-header-bg); border-bottom-color: var(--gh-border); } .gh-comment-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--gh-header-bg); border-bottom: 1px solid var(--gh-comment-border); border-radius: var(--gh-radius) var(--gh-radius) 0 0; font-size: 14px; min-height: 40px; } .gh-comment-header-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gh-comment-author { font-weight: 600; color: var(--gh-text); text-decoration: none; } .gh-comment-author:hover { color: var(--gh-text-link); text-decoration: underline; } .gh-comment-handle { font-size: 0.75rem; font-weight: 400; color: var(--accent-color, #5A7A6A); background: none; border: none; padding: 0; } .gh-comment-badge { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 3px; background: var(--gh-bg-subtle, #F0EEEA); color: var(--gh-text-muted, #5A5A5A); } .gh-comment-timestamp { color: var(--gh-text-muted); text-decoration: none; } .gh-comment-timestamp:hover { color: var(--gh-text-link); text-decoration: underline; } .gh-owner-badge { padding: 0 7px; font-size: 12px; font-weight: 500; line-height: 22px; border: 1px solid var(--gh-border); border-radius: 2em; color: var(--gh-text-muted); background: transparent; } .gh-contributor-badge { padding: 0 7px; font-size: 12px; font-weight: 500; line-height: 22px; border: 1px solid var(--gh-border); border-radius: 2em; color: var(--gh-text-muted); background: transparent; } .gh-edited-badge { font-size: 12px; font-style: italic; color: var(--gh-text-muted); } .gh-comment-header-right { display: flex; align-items: center; gap: 8px; } .gh-comment-actions { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.15s; } .gh-comment:hover .gh-comment-actions { opacity: 1; } .gh-comment-action-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; background: transparent; color: var(--gh-text-muted); border-radius: var(--gh-radius); cursor: pointer; } .gh-comment-action-btn:hover { background: var(--gh-bg-subtle); color: var(--gh-text); } /* Three dot menu button */ .gh-menu-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; background: transparent; color: var(--gh-text-muted); border-radius: var(--gh-radius); cursor: pointer; } .gh-menu-btn:hover { background: var(--gh-bg-subtle); color: var(--gh-text); } .gh-comment-body { padding: 16px; font-size: 14px; line-height: 1.6; color: var(--gh-text); background: var(--gh-bg); border-radius: 0 0 var(--gh-radius) var(--gh-radius); } .gh-comment-body p { margin: 0 0 16px 0; } .gh-comment-body p:last-child { margin-bottom: 0; } .gh-comment-body pre { padding: 16px; background: var(--gh-bg-subtle); border-radius: var(--gh-radius); overflow-x: auto; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; } .gh-comment-body code { padding: 0.2em 0.4em; background: rgba(175, 184, 193, 0.2); border-radius: var(--gh-radius); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 85%; } .gh-comment-body pre code { padding: 0; background: none; } /* Reactions */ .gh-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 16px; border-top: 1px solid var(--gh-comment-border); background: var(--gh-bg); border-radius: 0 0 var(--gh-radius) var(--gh-radius); } .gh-reaction { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: transparent; border: 1px solid var(--gh-border); border-radius: 2em; font-size: 12px; cursor: pointer; transition: all 0.15s ease; color: var(--gh-text-muted); } .gh-reaction:hover { background: var(--gh-bg-subtle); border-color: var(--gh-text-muted); } .gh-reaction.gh-reaction-active { background: var(--gh-bg-subtle); border-color: var(--gh-text); color: var(--gh-text); } .gh-reaction-emoji { font-size: 14px; line-height: 1; } .gh-reaction-count { font-weight: 500; font-size: 12px; } .gh-add-reaction { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px dashed var(--gh-border); border-radius: 2em; color: var(--gh-text-muted); cursor: pointer; transition: all 0.15s ease; } .gh-add-reaction:hover { background: var(--gh-bg-subtle); border-color: var(--gh-text-muted); border-style: solid; color: var(--gh-text); } .gh-add-reaction svg { width: 16px; height: 16px; } /* Thread replies indicator */ .gh-thread-indicator { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--gh-comment-border); color: var(--gh-text-link); font-size: 13px; cursor: pointer; background: var(--gh-bg); border-radius: 0 0 var(--gh-radius) var(--gh-radius); } .gh-thread-indicator:hover { text-decoration: underline; } /* Dropdown menu */ .gh-dropdown { position: relative; display: inline-flex; } .gh-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 160px; padding: 4px 0; background: var(--gh-bg); border: 1px solid var(--gh-border); border-radius: var(--gh-radius); box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2); z-index: 100; } .gh-dropdown:hover .gh-dropdown-menu, .gh-dropdown.gh-dropdown-open .gh-dropdown-menu { display: block; } .gh-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 16px; border: none; background: none; color: var(--gh-text); font-size: 14px; text-align: left; cursor: pointer; } .gh-dropdown-item:hover { background: var(--gh-bg-subtle); } .gh-dropdown-item svg { color: var(--gh-text-muted); flex-shrink: 0; } .gh-dropdown-danger { color: #d1242f; } .gh-dropdown-danger:hover { background: #ffebe9; } .gh-dropdown-danger svg { color: #d1242f; } /* ============================================ 7. NEW COMMENT FORM ============================================ */ .gh-new-comment { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--gh-border); position: relative; z-index: 1; } .gh-comment-box { display: flex; gap: 16px; } .gh-comment-form-container { flex: 1; min-width: 0; } .gh-comment-form { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); background: var(--gh-bg); } .gh-comment-tabs { display: flex; gap: 0; padding: 8px 8px 0; background: var(--gh-bg-subtle); border-bottom: 1px solid var(--gh-border); border-radius: var(--gh-radius) var(--gh-radius) 0 0; } .gh-tab { padding: 8px 16px; border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--gh-text-muted); font-size: 14px; cursor: pointer; border-radius: var(--gh-radius) var(--gh-radius) 0 0; margin-bottom: -1px; } .gh-tab:hover { color: var(--gh-text); } .gh-tab.gh-tab-active { background: var(--gh-bg); border-color: var(--gh-border); color: var(--gh-text); } .gh-write-area textarea { width: 100%; min-height: 150px; padding: 16px; border: none; resize: vertical; font-family: inherit; font-size: 14px; line-height: 1.6; outline: none; box-sizing: border-box; } .gh-write-area textarea::placeholder { color: var(--gh-text-muted); } .gh-preview-area { min-height: 150px; padding: 16px; } .gh-preview-content { color: var(--gh-text-muted); font-style: italic; } .gh-comment-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--gh-bg-subtle); border-top: 1px solid var(--gh-border); border-radius: 0 0 var(--gh-radius) var(--gh-radius); } .gh-format-hint { display: flex; align-items: center; gap: 6px; color: var(--gh-text-muted); font-size: 12px; } .gh-format-hint svg { opacity: 0.7; } .gh-submit-buttons { display: flex; gap: 8px; } /* NOTE: Button styles (.gh-btn-*) removed - now using component system (.btn, .btn-primary, etc.) */ /* ============================================ 9. SIDEBAR ============================================ */ .gh-sidebar { width: 256px; flex-shrink: 0; } .gh-sidebar-section { padding: 16px 0; border-bottom: 1px solid var(--gh-border-muted); } .gh-sidebar-section:first-child { padding-top: 0; } .gh-sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .gh-sidebar-title { font-size: 12px; font-weight: 600; color: var(--gh-text); } .gh-sidebar-content { font-size: 12px; color: var(--gh-text); } .gh-sidebar-empty { color: var(--gh-text-muted); font-size: 12px; } .gh-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .gh-label { display: inline-flex; padding: 0 7px; font-size: 12px; font-weight: 500; line-height: 20px; border-radius: 2em; white-space: nowrap; border: 1px solid transparent; } .gh-label-default { background: #ddf4ff; color: var(--color-info); border-color: rgba(9, 105, 218, 0.2); } .gh-label-bug { background: #ffebe9; color: #d1242f; border-color: rgba(209, 36, 47, 0.2); } .gh-label-enhancement { background: #dafbe1; color: var(--color-success-text); border-color: rgba(26, 127, 55, 0.2); } .gh-label-question { background: #fff8c5; color: #9a6700; border-color: rgba(154, 103, 0, 0.2); } /* Generic label colors */ .gh-label-analysis { background: #ddf4ff; color: var(--color-info); } .gh-label-custom { background: var(--color-bg-secondary); color: var(--gh-text); border-color: var(--gh-border); } .gh-sidebar-link { display: flex; align-items: center; gap: 6px; color: var(--gh-text); text-decoration: none; font-weight: 500; font-size: 12px; } .gh-sidebar-link:hover { color: var(--gh-text-link); text-decoration: underline; } .gh-sidebar-link svg { color: var(--gh-text-muted); flex-shrink: 0; } .gh-sidebar-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 5px 12px; background: var(--gh-btn-secondary-bg); border: 1px solid var(--gh-btn-secondary-border); border-radius: var(--gh-radius); color: var(--gh-text); font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.15s; } .gh-sidebar-btn:hover { background: var(--color-bg-tertiary); border-color: rgba(31, 35, 40, 0.15); } .gh-sidebar-btn svg { flex-shrink: 0; } .gh-sidebar-hint { margin-top: 8px; font-size: 12px; color: var(--gh-text-muted); } .gh-participants { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .gh-participant { width: 28px; height: 28px; } .gh-participant img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(27, 31, 36, 0.15); } .gh-participant .gh-avatar-placeholder { width: 28px; height: 28px; font-size: 12px; } /* ============================================ 10. LOGIN PROMPT ============================================ */ .gh-login-prompt { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; border: 1px solid var(--gh-border); border-radius: var(--gh-radius); background: var(--gh-bg-subtle); color: var(--gh-text-muted); } .gh-login-link { color: var(--gh-text-link); text-decoration: none; font-weight: 500; } .gh-login-link:hover { text-decoration: underline; } /* ============================================ 11. THREAD PANEL ============================================ */ .gh-thread-overlay { display: none; } .gh-thread-overlay.active { display: none; } .gh-thread-panel { display: none; position: fixed; right: 0; top: 0; bottom: 0; width: 440px; max-width: 100%; background: var(--gh-bg); border-left: 1px solid var(--gh-border); z-index: 10001; flex-direction: column; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); } .gh-thread-panel.active, .gh-thread-panel.open { display: flex; } .gh-thread-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--gh-border); } .gh-thread-header h3 { margin: 0; font-size: 16px; font-weight: 600; } .gh-thread-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--gh-text-muted); border-radius: var(--gh-radius); cursor: pointer; } .gh-thread-close:hover { background: var(--gh-bg-subtle); color: var(--gh-text); } .gh-thread-content { flex: 1; overflow-y: auto; padding: 16px; } .gh-thread-parent { margin-bottom: 16px; } .gh-thread-divider { display: flex; align-items: center; gap: 8px; margin: 16px 0; color: var(--gh-text-muted); font-size: 12px; } .gh-thread-divider::before, .gh-thread-divider::after { content: ''; flex: 1; height: 1px; background: var(--gh-border); } .gh-thread-replies { display: flex; flex-direction: column; gap: 12px; } /* Thread message styling */ .gh-thread-message { display: flex; gap: 12px; padding: 12px; background: var(--gh-bg); border-radius: var(--gh-radius); } .gh-thread-message-avatar { flex-shrink: 0; width: 32px; height: 32px; } .gh-thread-message-avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .gh-thread-message-avatar .gh-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: var(--gh-bg-subtle); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--gh-text-muted); } .gh-thread-message-content { flex: 1; min-width: 0; } .gh-thread-message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .gh-thread-author { font-weight: 600; color: var(--gh-text); font-size: 14px; } .gh-thread-time { color: var(--gh-text-muted); font-size: 12px; } .gh-thread-message-body { font-size: 14px; line-height: 1.5; color: var(--gh-text); word-wrap: break-word; } .gh-thread-parent-msg { background: var(--gh-bg-subtle); border: 1px solid var(--gh-border); } .gh-thread-empty { text-align: center; color: var(--gh-text-muted); font-size: 14px; padding: 20px; } .gh-thread-input { padding: 16px; border-top: 1px solid var(--gh-border); } .gh-thread-input form { display: flex; flex-direction: column; gap: 8px; } .gh-thread-input textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--gh-border); border-radius: var(--gh-radius); font-family: inherit; font-size: 14px; resize: none; box-sizing: border-box; } .gh-thread-input textarea:focus { outline: none; border-color: var(--gh-text-link); box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3); } /* ============================================ 12. MODALS ============================================ */ .gh-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 200; } .gh-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .gh-modal-content { position: relative; width: 400px; max-width: 90%; background: var(--gh-bg); border-radius: var(--gh-radius-lg); box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2); } .gh-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--gh-border); } .gh-modal-header h3 { margin: 0; font-size: 14px; font-weight: 600; } .gh-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--gh-text-muted); border-radius: var(--gh-radius); cursor: pointer; } .gh-modal-close:hover { background: var(--gh-bg-subtle); color: var(--gh-text); } .gh-modal-body { padding: 16px; } .gh-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px; border-top: 1px solid var(--gh-border); } /* ============================================ 12B. MESSAGE EDIT FORM (in GitHub-style comments) ============================================ */ .gh-comment-body .message-edit-form { display: flex; flex-direction: column; gap: 8px; } .gh-comment-body .message-edit-input { width: 100%; padding: 12px; border: 1px solid var(--gh-border); border-radius: var(--gh-radius); font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; min-height: 80px; background: var(--gh-bg); color: var(--gh-text); } .gh-comment-body .message-edit-input:focus { outline: none; border-color: var(--gh-text-link); box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1); } .gh-comment-body .message-edit-actions { display: flex; justify-content: flex-end; gap: 8px; } .gh-comment-body .btn-save-edit { padding: 5px 16px; background: var(--gh-btn-primary-bg); border: 1px solid rgba(31, 35, 40, 0.15); color: white; font-size: 14px; font-weight: 500; border-radius: var(--gh-radius); cursor: pointer; } .gh-comment-body .btn-save-edit:hover { background: var(--gh-btn-primary-hover); } .gh-comment-body .btn-save-edit:disabled { opacity: 0.6; cursor: not-allowed; } .gh-comment-body .btn-cancel-edit { padding: 5px 16px; background: var(--gh-btn-secondary-bg); border: 1px solid var(--gh-btn-secondary-border); color: var(--gh-text); font-size: 14px; font-weight: 500; border-radius: var(--gh-radius); cursor: pointer; } .gh-comment-body .btn-cancel-edit:hover { background: var(--color-bg-tertiary); } /* ============================================ 13. REACTION PICKER ============================================ */ .gh-reaction-picker { position: absolute; display: flex; gap: 2px; padding: 8px; background: var(--gh-bg); border: 1px solid var(--gh-border); border-radius: var(--gh-radius); box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2); z-index: 50; } .gh-reaction-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: transparent; font-size: 18px; border-radius: var(--gh-radius); cursor: pointer; transition: transform 0.1s, background 0.1s; } .gh-reaction-btn:hover { background: var(--gh-bg-subtle); transform: scale(1.1); } /* ============================================ 14. RESPONSIVE ============================================ */ @media (max-width: 1024px) { .gh-issue-page { padding: 24px 32px; } .gh-diff-split { grid-template-columns: 1fr; } } @media (max-width: 1012px) { .gh-issue-layout, .gh-pr-layout { flex-direction: column; } .gh-sidebar { width: 100%; display: flex; flex-wrap: wrap; gap: 16px; } .gh-sidebar-section { flex: 1; min-width: 200px; padding: 16px; border: 1px solid var(--gh-border); border-radius: var(--gh-radius); } } @media (max-width: 768px) { .gh-issue-page { width: 100%; padding: 16px; } .gh-issue-breadcrumb { font-size: 12px; } .gh-issue-title, .gh-pr-title { font-size: 22px; } .gh-comment { gap: 12px; } .gh-comment-avatar, .gh-comment-avatar img, .gh-comment-avatar .gh-avatar-placeholder { width: 32px; height: 32px; font-size: 14px; } .gh-timeline::before { left: 36px; } .gh-thread-panel { width: 100%; } .pr-tabs { overflow-x: auto; } } /* ============================================ DARK MODE SUPPORT ============================================ */ :root[data-theme="dark"] { --gh-bg: var(--color-bg-primary); --gh-bg-subtle: var(--color-bg-secondary); --gh-border: var(--color-border-primary); --gh-border-muted: var(--color-border-secondary); --gh-text: var(--color-text-primary); --gh-text-muted: var(--color-text-secondary); --gh-text-link: var(--color-text-primary); --gh-btn-secondary-bg: var(--color-bg-secondary); --gh-btn-secondary-border: var(--color-border-primary); --gh-header-bg: var(--color-bg-secondary); --gh-comment-border: var(--color-border-primary); --gh-accent-green-bg: rgba(26, 127, 55, 0.15); --gh-accent-purple-bg: rgba(130, 80, 223, 0.15); } :root[data-theme="dark"] .gh-issue-page { background: var(--gh-bg); color: var(--gh-text); } :root[data-theme="dark"] .gh-comment-box { background: var(--gh-bg-subtle); border-color: var(--gh-border); } :root[data-theme="dark"] .gh-comment-header { background: var(--gh-bg); border-color: var(--gh-border); } :root[data-theme="dark"] .gh-comment-body { background: var(--gh-bg); } :root[data-theme="dark"] .gh-sidebar-card { background: var(--gh-bg-subtle); border-color: var(--gh-border); } :root[data-theme="dark"] .gh-label-preview { color: var(--color-text-primary); } /* === issues-github.css === */ /* ============================================ Issues List Page - Clean Redesign ============================================ */ /* Page Container */ .issues-page { width: var(--content-width-percent, 90%); max-width: var(--max-width); min-width: min(var(--min-width-fixed, 320px), 100%); margin: 0 auto; padding: 0 var(--content-padding-x, 64px); color: var(--color-text-primary, #333); } /* ============================================ Breadcrumb ============================================ */ .issues-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary, #666); margin-bottom: 24px; } .issues-breadcrumb a { color: var(--color-text-secondary, #666); text-decoration: none; transition: color 0.15s; } .issues-breadcrumb a:hover { color: var(--color-text-primary, #333); } .issues-breadcrumb svg { flex-shrink: 0; opacity: 0.4; } .issues-breadcrumb .breadcrumb-current { color: var(--color-text-primary, #333); font-weight: 500; } /* ============================================ Page Header ============================================ */ .issues-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .issues-page-header h1 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.02em; } /* ============================================ Search Bar ============================================ */ .issues-search { position: relative; margin-bottom: 16px; } .issues-search .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary, #999); fill: var(--color-text-tertiary, #999); pointer-events: none; } .issues-search .search-input { width: 100%; padding: 9px 12px 9px 36px; font-size: 14px; line-height: 20px; border: 1px solid var(--color-border-primary, #e0e0e0); border-radius: 8px; background: var(--color-bg-primary, #fff); color: var(--color-text-primary, #333); box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .issues-search .search-input:focus { outline: none; border-color: var(--color-text-primary, #333); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); } .issues-search .search-input::placeholder { color: var(--color-text-tertiary, #999); } /* ============================================ Issues Container (bordered box) ============================================ */ .issues-container { border: 1px solid var(--color-border-primary, #e0e0e0); border-radius: 10px; overflow: hidden; background: var(--color-bg-primary, #fff); } /* ============================================ Tabs Header (inside container) ============================================ */ .issues-tabs-header { display: flex; align-items: center; gap: 2px; padding: 12px 16px; background: var(--color-bg-secondary, #f8f8f8); border-bottom: 1px solid var(--color-border-primary, #e0e0e0); } .issue-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: none; border: none; border-radius: 6px; color: var(--color-text-secondary, #666); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; text-decoration: none; white-space: nowrap; } .issue-tab:hover { color: var(--color-text-primary, #333); background: var(--color-bg-hover, #eee); } .issue-tab.active { color: var(--color-text-primary, #333); background: var(--color-bg-primary, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); font-weight: 600; } .issue-tab svg { width: 14px; height: 14px; fill: currentColor; } .issue-tab[data-status="open"] svg { fill: #1a7f37; } .issue-tab[data-status="closed"] svg { fill: #8250df; } .issue-tab[data-status="resolved"] svg { fill: #1a7f37; } .issue-tab .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 600; border-radius: 10px; background: var(--color-bg-tertiary, #e5e5e5); color: var(--color-text-secondary, #666); } .issue-tab.active .count-badge { background: var(--color-text-primary, #333); color: var(--color-text-inverse, #fff); } /* ============================================ Issue Cards ============================================ */ a.issue-card, div.issue-card, .issue-card { display: block; border-bottom: 1px solid var(--color-border-primary, #e0e0e0); background-color: var(--color-bg-primary, #fff); transition: background 0.15s ease; text-decoration: none; color: inherit; } .issue-card:last-child { border-bottom: none; } a.issue-card:hover, .issue-card:hover { background: var(--color-bg-secondary, #fafafa); } .issue-card-main { display: flex; padding: 14px 20px; align-items: flex-start; gap: 12px; width: 100%; box-sizing: border-box; } /* Status Icon */ .issue-status-icon { flex-shrink: 0; margin-top: 2px; } .issue-status-icon svg { width: 16px; height: 16px; } .issue-status-icon .status-open { fill: #1a7f37; color: var(--color-success-text); } .issue-status-icon .status-closed { fill: #8250df; color: #8250df; } .issue-status-icon .status-resolved { fill: #1a7f37; color: var(--color-success-text); } /* Issue Content */ .issue-card .issue-content { flex-grow: 1; min-width: 0; } .issue-card .issue-title-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; align-items: baseline; } .issue-card .issue-title { font-weight: 600; font-size: 15px; color: var(--color-text-primary, #333); text-decoration: none; line-height: 1.4; } a.issue-card:hover .issue-title { color: var(--color-primary, #333); text-decoration: underline; } .issue-card .issue-labels { display: inline-flex; flex-wrap: wrap; gap: 4px; } .label { padding: 2px 8px; font-size: 11px; font-weight: 500; border-radius: 12px; white-space: nowrap; display: inline-block; border: 1px solid var(--color-border-primary, #e0e0e0); background: var(--color-bg-secondary, #f5f5f5); color: var(--color-text-secondary, #666); } .issue-card .issue-description-preview { font-size: 13px; color: var(--color-text-secondary, #666); line-height: 1.5; margin: 2px 0 6px 0; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .issue-card .issue-meta { font-size: 12px; color: var(--color-text-tertiary, #999); line-height: 1.4; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .issue-card .issue-meta svg { width: 14px; height: 14px; vertical-align: middle; display: inline; margin-right: 1px; } /* ============================================ Empty State ============================================ */ .issues-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; } .issues-empty-state .empty-state-icon { width: auto; height: auto; color: var(--color-text-tertiary, #ccc); margin-bottom: 16px; display: flex; justify-content: center; } .issues-empty-state .empty-state-icon svg { width: 320px; height: auto; max-width: 100%; } .issues-empty-state h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; color: var(--color-text-primary, #333); } .issues-empty-state p { font-size: 14px; color: var(--color-text-secondary, #666); margin: 0 0 20px; } /* ============================================ Skeleton Loading ============================================ */ @keyframes skeleton-shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .skeleton { background: linear-gradient(90deg, var(--color-bg-secondary, #f5f5f5) 25%, var(--color-bg-tertiary, #eee) 50%, var(--color-bg-secondary, #f5f5f5) 75%); background-size: 200px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 4px; } .issues-skeleton { display: flex; flex-direction: column; } .skeleton-issue-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--color-border-primary, #e0e0e0); } .skeleton-issue-card:last-child { border-bottom: none; } .skeleton-status-icon { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; } .skeleton-issue-content { flex: 1; display: flex; flex-direction: column; gap: 8px; } .skeleton-title-row { display: flex; align-items: center; gap: 8px; } .skeleton-issue-title { width: 55%; height: 16px; } .skeleton-issue-number { width: 35px; height: 14px; } .skeleton-label { width: 60px; height: 18px; border-radius: 10px; } .skeleton-description { width: 75%; height: 12px; } .skeleton-meta { display: flex; align-items: center; gap: 6px; } .skeleton-avatar { width: 16px; height: 16px; border-radius: 50%; } .skeleton-text-sm { width: 120px; height: 11px; } /* ============================================ Tag system (shared) ============================================ */ .tag-search-container { position: relative; } .tag-suggestions { position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--color-bg-primary, #fff); border: 1px solid var(--color-border-primary, #e0e0e0); border-radius: 8px; max-height: 200px; overflow-y: auto; z-index: 10; display: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .tag-suggestion { padding: 8px 12px; cursor: pointer; font-size: 14px; transition: background 0.1s; } .tag-suggestion:hover { background-color: var(--color-bg-secondary, #f5f5f5); } .selected-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .selected-tag { display: inline-flex; align-items: center; padding: 3px 10px; background-color: var(--color-bg-secondary, #f5f5f5); color: var(--color-text-primary, #333); border: 1px solid var(--color-border-primary, #e0e0e0); border-radius: 14px; font-size: 12px; font-weight: 500; } .remove-tag { margin-left: 6px; cursor: pointer; font-weight: bold; opacity: 0.5; transition: opacity 0.15s; } .remove-tag:hover { opacity: 1; color: var(--color-danger, #dc3545); } /* ============================================ Author Avatar ============================================ */ .author-avatar { border-radius: 50%; margin-right: 4px; vertical-align: middle; } .author-avatar-initials { width: 18px; height: 18px; border-radius: 50%; background-color: var(--color-text-primary, #333); color: var(--color-text-inverse, #fff); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; margin-right: 4px; vertical-align: middle; } /* ============================================ New Issue Form (slide-in panel) ============================================ */ .new-issue-form { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 600px; background-color: var(--color-bg-primary, #fff); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08); z-index: 1000; padding: 24px; overflow-y: auto; } .form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border-primary, #e0e0e0); } /* ============================================ Issues / PR Navigation Tabs ============================================ */ .issues-pr-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border-primary, #e0e0e0); margin-bottom: 16px; } .issues-pr-tab { display: flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--color-text-secondary, #666); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; } .issues-pr-tab:hover { color: var(--color-text-primary, #333); } .issues-pr-tab.active { color: var(--color-text-primary, #333); font-weight: 600; border-bottom-color: #fd8c73; } .issues-pr-tab svg { flex-shrink: 0; width: 16px; height: 16px; } /* ============================================ Responsive ============================================ */ @media (max-width: 768px) { .issues-page { width: 100%; padding: 0 16px; } .issues-page-header { flex-direction: column; align-items: flex-start; gap: 12px; } .issue-card-main { padding: 12px 16px; } .issue-card .issue-title-row { flex-direction: column; align-items: flex-start; gap: 4px; } .issues-tabs-header { flex-wrap: wrap; gap: 0; } .issue-tab { font-size: 12px; padding: 8px 10px; } .issues-pr-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; } .new-issue-form { max-width: 100%; } } /* ============================================ Dark Mode ============================================ */ :root[data-theme="dark"] .issues-container { border-color: var(--color-border-primary); } :root[data-theme="dark"] .issues-tabs-header { background: var(--color-bg-secondary); border-color: var(--color-border-primary); } :root[data-theme="dark"] .issue-tab.active { background: var(--color-bg-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } :root[data-theme="dark"] .skeleton-issue-card { border-color: var(--color-border-primary); } :root[data-theme="dark"] .label { background: var(--color-bg-tertiary); border-color: var(--color-border-primary); color: var(--color-text-secondary); } /* === style.css === */ /* Theme Support - Force light color-scheme by default to prevent browser dark form controls when user has light theme but OS is dark */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ═══════════════════════════════════════════════════════════════ SPA Navigation Progress Bar ═══════════════════════════════════════════════════════════════ */ #spa-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; } #spa-progress.active { opacity: 1; } #spa-progress.complete { opacity: 0; } #spa-progress.hidden { display: none; } #spa-progress .spa-progress-bar { height: 100%; width: 0%; background: var(--color-accent, #5C6F5B); border-radius: 0 1px 1px 0; transition: width 0.1s ease-out; } #spa-progress.error .spa-progress-bar { background: var(--error-color, #dc3545); } /* Text Selection Highlight */ ::selection { background-color: var(--color-primary); color: var(--color-text-inverse); } ::-moz-selection { background-color: var(--color-primary); color: var(--color-text-inverse); } /* Dark mode selection (inverted) */ [data-theme="dark"] ::selection { background-color: var(--color-bg-active); color: var(--color-text-primary); } [data-theme="dark"] ::-moz-selection { background-color: var(--color-bg-active); color: var(--color-text-primary); } /* MathJax SVG rendering - ensure proper display */ mjx-container { display: inline !important; } mjx-container svg { display: inline !important; visibility: visible !important; } /* Hide assistive MML (screen reader fallback) from visual display */ mjx-assistive-mml { position: absolute !important; top: 0 !important; left: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; white-space: nowrap !important; } /* Base Styles - colors defined in design-tokens.css */ :root { /* Color variables are now managed in design-tokens.css (neutral default + cool/warm overrides). Only NON-color layout variables and unique vars that aren't in design-tokens.css belong here. */ --content-padding-x: 64px; --content-max-width: 1200px; --slider-track-color: #ddd; --slider-thumb-color: var(--text-color); } *, *::before, *::after { box-sizing: border-box; } ol { padding-left: 40px; } html { overflow-x: clip; max-width: 100vw; } body { font-family: var(--font-sans); font-size: var(--font-size-lg); /* 1rem / 16px base */ line-height: var(--line-height-relaxed); color: var(--color-text-primary, var(--text-color)); margin: 0; padding: 0; background: var(--color-bg-primary, #fff); display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; overflow-x: clip; /* Prevent horizontal scrolling without breaking sticky */ max-width: 100vw; transition: background-color 0.2s ease, color 0.2s ease; } .full-page { width: var(--content-width-percent, 90%); max-width: var(--max-width); min-width: min(var(--min-width-fixed, 320px), 100%); margin: 0 auto; padding: 0 var(--content-padding-x, 64px); } /* Override main container for full-bleed app pages (sidebars, dashboards) */ main:has(.notes-page) { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; margin: 0 !important; margin-bottom: 0 !important; max-width: none !important; width: 100% !important; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; } /* Responsive width adjustments */ @media (max-width: 1024px) { .full-page { padding: 0 32px; } } @media (max-width: 768px) { .full-page { width: 100%; padding: 0 16px; } } a { color: var(--primary-color); text-decoration: none; } /* Main content links should underline on hover, but not navigation or buttons */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); font-family: var(--font-display); margin-bottom: 0.625rem; margin-top: 0.625rem; color: var(--color-text-primary); } h1 { font-size: var(--font-size-5xl); /* 2.25rem / 36px — scales down on mobile */ font-weight: var(--font-weight-semibold); line-height: 1.15; letter-spacing: -0.02em; } h2 { font-size: var(--font-size-4xl); /* 1.75rem / 28px */ font-weight: var(--font-weight-semibold); line-height: 1.2; letter-spacing: -0.015em; } h3 { font-size: var(--font-size-3xl); /* 1.375rem / 22px */ font-weight: var(--font-weight-semibold); line-height: 1.3; letter-spacing: -0.01em; } .wiki-page h1 { color: var(--text-color); margin-bottom: 0.8rem; } p { font-size: inherit; color: var(--color-text-primary); } ul { list-style-position: inside; margin-bottom: 1rem; } /* Header */ header { background-color: var(--color-bg-primary); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } /* Opt-in border — enabled per-page via headerBorder variable */ header.header-bordered { border-bottom: 1px solid var(--color-border-primary); } :root[data-theme="dark"] header { background-color: inherit; } :root[data-theme="dark"] header.header-bordered { border-bottom: 1px solid var(--color-border-primary); } header .container { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; max-width: var(--max-width); margin: 0 auto; height: var(--header-height); box-sizing: border-box; } .header-left { display: flex; align-items: center; min-width: 0; } header nav { flex-shrink: 0; } header h1 { margin: 0; font-size: 1.2rem; } header h1 a { display: flex; align-items: center; text-decoration: none; color: var(--dark); font-weight: 600; } .logo { display: flex; align-items: center; margin-right: 0.25rem; } .logo svg { width: 45px; height: 45px; stroke: var(--color-text-secondary); } .header-logo-img { width: 24px; height: 24px; } .logo-link { display: flex; align-items: center; gap: 6px; text-decoration: none; } .header-site-name { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.02em; } /* When a section label or page title exists, hide "Androma" text */ .logo-link:has(.header-page-name) .header-site-name, .header-left:has(.page-title-header) .header-site-name { display: none; } .header-page-name { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.01em; } .page-title-header { font-size: 20px; font-weight: bold; color: var(--text-color); margin-left: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-title-link { color: inherit; text-decoration: none; transition: color 0.2s ease; display: inline-block; /* Make sure the entire area is clickable */ max-width: 100%; /* Ensure it doesn't overflow container */ } .page-title-link:hover { color: var(--primary); text-decoration: none; cursor: pointer; } /* Styles for mobile page title if needed */ .mobile-page-title { display: none; padding: 10px 15px; font-size: 18px; font-weight: bold; border-bottom: 1px solid var(--color-border-secondary); max-width: 300px; } .search-box { position: relative; margin: 0 1rem; flex-grow: 0.5; max-width: 400px; display: flex; align-items: center; height: 100%; } .search-box form { display: flex; align-items: center; position: relative; width: 100%; } .search-icon { position: absolute; left: 10px; width: 16px; height: 16px; stroke: var(--color-text-tertiary); stroke-width: 2px; pointer-events: none; transition: stroke 0.2s ease; } .search-box:hover .search-icon, .search-box:focus-within .search-icon { stroke: var(--color-text-primary); } .search-box input { width: 100%; padding: 0.5rem 0.5rem 0.5rem 2rem; border: none; border-radius: 16px; background-color: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 0.9rem; transition: background-color 0.2s ease; } .search-box input::placeholder { color: var(--color-text-tertiary); } .search-box input:focus { outline: none; background-color: var(--color-bg-tertiary); } .nav-links { display: flex; align-items: center; margin-left: auto; height: 100%; } .nav-links a { margin-left: 20px; text-decoration: none; color: var(--text-color); font-weight: 500; font-size: 0.9rem; display: flex; align-items: center; height: 100%; } .nav-links a:hover { color: var(--primary-color); } .nav-links .btn { padding: 8px 16px; background-color: var(--primary-color); color: var(--color-text-inverse); border-radius: var(--radius-sm); font-weight: 500; transition: background-color 0.2s; } .nav-links .btn:hover { background-color: var(--color-primary-hover); color: var(--color-text-inverse); text-decoration: none; } /* Main Content */ main { min-height: calc(100vh - 110px); margin-bottom: 2rem; display: flex; padding-top: calc(var(--header-height) + 0rem); } /* On mobile, header is hidden — remove its reserved padding */ @media (max-width: 768px) { main { padding-top: 0 !important; } } /* Wiki Layout */ .wiki-layout { display: flex; width: 100%; position: relative; max-width: none; margin: 0 auto; } .content-wrapper { max-width: none; padding: 2rem; margin: 0; width: 100%; padding-top: 0; } .sidebar { /* Width comes from the grid column, not the element. */ position: sticky; top: calc(var(--header-height) + 20px); max-height: calc(100vh - var(--header-height) - 40px); background: var(--color-bg-primary, #fff); border: none; border-radius: var(--radius-xl); padding: 1.25rem; overflow-y: auto; z-index: 100; box-shadow: none; transition: opacity 0.2s ease; } /* Collapsed: hide visually but keep grid column reserved so the reading column doesn't jump. We use visibility/opacity instead of display:none. */ .sidebar.collapsed { visibility: hidden; opacity: 0; pointer-events: none; } /* Legacy no-op: every wiki-content is now a grid item, so this class is only kept for any old rule that might still reference it. */ .wiki-content.full-width { margin: 0 auto; } .page-header { margin-bottom: 0rem; width: 100%; } .page-title-section { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0.75rem; } .page-title-section h1 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 2rem; font-weight: 600; flex: 0 1 auto; min-width: 0; } .page-title-text { flex: 1 1 0%; min-width: 0; } .page-title-actions { display: inline-flex; align-items: center; gap: 0.3rem; } .page-meta-counters { display: flex; align-items: center; gap: 1rem; margin-left: auto; } /* TOC Toggle Button - Minimal Design */ .toc-toggle-btn { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--text-color); cursor: pointer; transition: opacity 0.2s ease; position: relative; } .toc-toggle-btn:hover { opacity: 0.7; } .toc-toggle-btn:active { opacity: 0.5; } .toc-toggle-btn svg { width: 24px; height: 24px; stroke-width: 2; } .toc-toggle-btn.visible { display: flex; } /* When the sidebar is collapsed at desktop sizes, show the hamburger in the page title so the user can re-open it. */ @media (min-width: 1100px) { .wiki-container:has(.sidebar.collapsed) .toc-toggle-btn { display: flex; } } /* TOC Close Button - Modern Design */ .toc-close-btn { position: absolute; top: -0.75rem; right: 0.75rem; width: 32px; height: 32px; padding: 0; border: none; background: none; color: var(--text-color); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); transition: all 0.2s ease; z-index: 10; } .toc-close-btn:hover { background: none; color: var(--primary-color); transform: rotate(90deg); } .toc-close-btn:active { transform: rotate(90deg) scale(0.9); } .toc-close-btn svg { width: 18px; height: 18px; transition: transform 0.2s ease; } /* Sidebar toggle button */ .toggle-btn { display: flex; align-items: center; justify-content: center; padding: 0.5rem; border: none; background: none; color: var(--text-color); cursor: pointer; border-radius: var(--radius-sm); transition: all 0.2s ease; } .toggle-btn:hover { background-color: var(--light-gray); color: var(--accent-color); } .toggle-btn svg { width: 20px; height: 20px; transition: transform 0.3s ease; } .counter-link { display: flex; align-items: center; gap: 0.25rem; text-decoration: none; color: var(--text-color); padding: 0.25rem 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s ease; } .counter-link:hover { background-color: var(--light-gray); text-decoration: none; } .counter { font-weight: 600; color: var(--text-color); } .counter-label { color: var(--text-muted); } /* Proof Environment Styles — matches proof-citation-box styling */ .proof-environment { border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); margin: 1.5rem 0; background-color: transparent; overflow: hidden; } .proof-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; cursor: pointer; background-color: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); transition: background 0.2s ease; } .proof-header:hover { background: var(--color-bg-hover, var(--color-bg-secondary)); } .proof-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--font-size-md); color: var(--text-primary); } .proof-icon { font-size: 1.2rem; transition: transform 0.25s ease; color: var(--text-secondary); } .proof-toggle { display: flex; align-items: center; } .toggle-icon { font-size: 1rem; color: var(--text-secondary); transition: transform 0.25s ease; display: inline-block; } /* Rotate the icon based on state */ .proof-toggle.collapsed .toggle-icon { transform: rotate(0deg); } .proof-toggle.expanded .toggle-icon { transform: rotate(90deg); } /* Collapsible content styling */ .proof-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; background: var(--color-bg-primary); } .proof-content.collapsed { max-height: 0; padding: 0 20px; } .proof-content.expanded { max-height: 2000px; padding: 16px 20px; } .proof-body { font-size: 15px; line-height: 1.65; color: var(--text-primary); } .proof-body p { margin-bottom: 1em; } .proof-body p:last-child { margin-bottom: 0; } .proof-end { text-align: right; font-size: 18px; color: var(--text-secondary); margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border-color); } /* Dark mode support */ /* Dark mode styles */ /* Footer */ footer { background-color: var(--color-bg-secondary, #f5f5f5); border-top: 1px solid var(--color-border-primary, #e0e0e0); padding: 20px; text-align: center; color: var(--color-text-secondary, #6b6b6b); font-size: 0.9rem; } /* Site Footer - Apple Style */ .footer-container { max-width: 980px; margin: 0 auto; padding: 0 22px; } .footer-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border-color, #ddd); } .footer-column h4 { font-size: 0.75rem; font-weight: 600; color: var(--text-color, #1a1a1a); margin: 0 0 0.5rem; letter-spacing: -0.01em; } .footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column li { margin-bottom: 0.375rem; } .footer-column a { color: var(--light-text, #999); text-decoration: none; font-size: 0.75rem; line-height: 1.33337; transition: color 0.15s ease; } .footer-column a:hover { color: var(--text-color, #1a1a1a); text-decoration: underline; } .footer-divider { height: 1px; background: var(--border-color, #ddd); } .footer-bottom { padding: 1rem 0; } .footer-tagline { font-size: 0.75rem; color: var(--light-text, #999); margin: 0 0 0.75rem; line-height: 1.33337; } .footer-tagline a { color: var(--color-accent, #5A7A6A); text-decoration: none; } .footer-tagline a:hover { text-decoration: underline; } .footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--border-color, #ddd); } .footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem; } .footer-links a { color: var(--light-text, #999); text-decoration: none; font-size: 0.75rem; padding: 0 0.5rem; border-right: 1px solid var(--border-color, #ddd); } .footer-links a:last-child { border-right: none; padding-right: 0; } .footer-links a:first-child { padding-left: 0; } .footer-links a:hover { color: var(--text-color, #1a1a1a); text-decoration: underline; } /* Footer Responsive */ @media (max-width: 833px) { .footer-nav { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .footer-legal { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .footer-links { flex-wrap: wrap; } } .actions { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-color); } .actions .btn { margin-right: 0.5rem; } /* Forms */ .form { background-color: var(--color-bg-primary, #fff); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-lg); margin-bottom: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); width: 100%; } .form-group label { display: block; margin-bottom: 5px; font-weight: 500; } .form-group input, .form-group textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 1rem; } .form-group.checkbox { display: flex; align-items: center; } .form-group.checkbox input { width: auto; margin-right: 0.5rem; } .form-group.checkbox label { margin-bottom: 0; } .form-actions { margin-top: 1rem; } /* Tables */ .data-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; } .data-table th, .data-table td { padding: 0.75rem; border-bottom: 1px solid var(--medium-gray); text-align: left; } .data-table th { background-color: var(--light-gray); font-weight: bold; } .data-table tr:hover { background-color: var(--light-gray); } .data-table .actions { margin-top: 0; white-space: nowrap; } .inline-form { display: inline; } /* Reading progress bar — 3px accent line pinned to top of viewport that tracks how far the reader has scrolled through the page body. */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999; pointer-events: none; background: transparent; } .reading-progress-fill { height: 100%; width: 0%; background: var(--color-accent, #5C6F5B); transition: width 0.1s linear; will-change: width; } /* ============================================================ Wiki page layout — Wikipedia Vector-2022 hybrid model ============================================================ Architecture (mirrors Wikipedia exactly): 1. Outer container .wiki-container: CSS grid centered in the viewport, max-width ~1500px, viewport-scaled padding. Two columns when the TOC is shown: [ TOC col fixed ] [ content col 1fr ] One column when the TOC is hidden or the page has no TOC: [ content col 1fr ] 2. Inside the content col, .wiki-content has its own max-width (--reading-width) and margins:auto, so the reading text is constrained AND centered within whatever column space exists. 3. Toggling the TOC swaps the grid template via :has(.collapsed). Wikipedia ALLOWS the reading column to recenter into the freed gutter when the TOC is hidden — this is intentional, not a bug. The reading column slides left toward the page center; on a re-open it slides back. This is the "hybrid" behavior the user wants. 4. Below 1024px the TOC becomes a fixed overlay drawer and the grid collapses to a single column. ============================================================ */ :root { /* Continuously fluid sizing — no hard breakpoints between 1024 and 1920. The reading column, TOC column, and gap all scale linearly with the viewport (within sensible floors and ceilings) the way Wikipedia Vector 2022 does. */ --reading-width: clamp(800px, 66vw, 1200px); --toc-col-width: clamp(196px, 14vw, 280px); --toc-gap: clamp(32px, 3.5vw, 64px); --wiki-max-width: 1600px; } .wiki-container { display: grid; grid-template-columns: var(--toc-col-width) minmax(0, 1fr); column-gap: var(--toc-gap); max-width: var(--wiki-max-width); margin: 0 auto; /* Viewport-scaled outer padding: 24px floor, grows with viewport */ padding: 0 clamp(24px, 2.5vw, 80px); } /* Single-column variant: no TOC at all (page has < 3 headings) OR the TOC is currently collapsed by the user. Both shapes the grid the same way so the content recenters into the freed space. */ .wiki-container.no-toc, .wiki-container:has(.sidebar.collapsed) { grid-template-columns: minmax(0, 1fr); column-gap: 0; } .sidebar { grid-column: 1; grid-row: 1; } .wiki-content { grid-column: 2; grid-row: 1; } /* When the sidebar is collapsed (or there's no TOC at all), the grid template above already collapsed to a single column. Move .wiki-content into that column AND fully remove the sidebar from layout — otherwise the still-present (but hidden) sidebar element would push content into row 2 because two items in the same column auto-flow into separate rows, leaving a huge empty gap above the article. */ .wiki-container.no-toc .wiki-content, .wiki-container:has(.sidebar.collapsed) .wiki-content { grid-column: 1; } .wiki-container:has(.sidebar.collapsed) .sidebar { display: none; } /* The reading column itself: capped width, centered inside its grid cell. This is what gives us comfortable line length AND the natural recentering when the TOC toggles. */ .wiki-content { display: flex; flex-direction: column; gap: 15px; position: relative; min-width: 0; width: 100%; max-width: var(--reading-width); margin-left: auto; margin-right: auto; } /* ─── Bottom TOC bar (narrow viewports) ────────────────────── Always-visible bottom bar showing the current section name, click to open a popup with the full TOC. Replaces the old left-side overlay drawer pattern. */ .toc-bottom-bar { display: none; /* shown only via the narrow-viewport media query */ position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--color-bg-primary); border-top: 1px solid var(--color-border-primary); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06); } .toc-bottom-bar-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 20px; background: none; border: none; cursor: pointer; color: var(--color-text-primary); font-size: 14px; font-family: inherit; text-align: left; } .toc-bottom-bar-icon { flex-shrink: 0; color: var(--color-text-secondary); } .toc-bottom-bar-label { font-weight: 600; color: var(--color-text-secondary); flex-shrink: 0; } .toc-bottom-bar-current { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); } .toc-bottom-bar-chevron { flex-shrink: 0; color: var(--color-text-tertiary); transition: transform 0.2s ease; } .toc-bottom-bar.open .toc-bottom-bar-chevron { transform: rotate(180deg); } .toc-popup { display: none; position: fixed; bottom: 0; /* sits behind the bar; bar always on top */ left: 0; right: 0; max-height: 65vh; background: var(--color-bg-primary); border-top: 1px solid var(--color-border-primary); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15); overflow-y: auto; z-index: 199; padding: 20px 24px 64px 24px; /* extra bottom padding for the bar */ transform: translateY(100%); transition: transform 0.25s ease; } .toc-popup.open { display: block; transform: translateY(0); } .toc-popup-header h3 { margin: 0 0 12px 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); } .toc-popup-list { list-style: none; padding: 0; margin: 0; } .toc-popup-list .toc-item { margin: 0; } .toc-popup-link { display: block; padding: 8px 12px; color: var(--color-text-primary); text-decoration: none; border-radius: 6px; font-size: 14px; line-height: 1.4; } .toc-popup-link:hover { background: var(--color-bg-hover); } .toc-popup .toc-level-3 .toc-popup-link { padding-left: 28px; font-size: 13px; color: var(--color-text-secondary); } .toc-popup .toc-level-4 .toc-popup-link { padding-left: 44px; font-size: 13px; color: var(--color-text-tertiary); } /* ─── Narrow-viewport activation ───────────────────────────── Below ~1100px we hide the left sidebar entirely and show the bottom bar instead. The reading column expands to use the full container width. */ @media (max-width: 1099px) { :root { --reading-width: 100%; } .wiki-container, .wiki-container.no-toc, .wiki-container:has(.sidebar.collapsed) { grid-template-columns: minmax(0, 1fr); padding: 0 clamp(16px, 3vw, 32px); max-width: 960px; column-gap: 0; } /* Hide the inline sidebar — the bottom bar replaces it */ .wiki-container .sidebar { display: none; } /* The hamburger toggle in the page title also hides — bottom bar is always visible so there's nothing to "show" */ .toc-toggle-btn, .wiki-container:has(.sidebar.collapsed) .toc-toggle-btn { display: none !important; } /* Show the bottom bar */ .toc-bottom-bar { display: block; } /* Reserve space at the bottom of the document so the fixed bar doesn't cover the last line of content */ body { padding-bottom: 56px; } } @media (max-width: 640px) { .wiki-container, .wiki-container.no-toc { padding: 0 16px; } .toc-bottom-bar-trigger { padding: 10px 16px; font-size: 13px; } } .wiki-page { background-color: var(--color-bg-primary, #fff); padding: 0px 30px 30px 30px; border-radius: 0; margin-bottom: 30px; position: relative; flex: 1; box-shadow: none; border: none; } .page-title-row { display: flex; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--color-border-primary); position: relative; } .title-with-button { display: flex; align-items: center; width: 100%; } .settings-icon { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; color: var(--dark-gray); cursor: pointer; background: none; border: none; padding: 0; margin-left: 12px; border-radius: 50%; transition: all 0.2s ease; } .settings-icon:hover { color: var(--primary-color); background-color: var(--light-gray); } .settings-icon svg { width: 20px; height: 20px; stroke: currentColor; } .page-title { margin: 0 !important; color: var(--text-color); font-size: var(--font-size-6xl); /* 3rem / 48px — scales down on mobile */ font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; } .page-meta { display: none; flex-wrap: wrap; gap: 10px; color: var(--light-text, #5E6978); font-size: 0.85rem; margin-bottom: 15px; } .page-actions { display: none; gap: 10px; margin-top: 15px; } .page-actions.visible { display: flex; } /* Table of Contents */ .page-toc { font-size: var(--font-size-md); line-height: 1.4; position: relative; overflow-y: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .toc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 0; } .toc-header h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-color); letter-spacing: -0.01em; } .toc-toggle { background: none; border: 1px solid var(--border-color); padding: 4px; cursor: pointer; border-radius: var(--radius-sm); width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; color: var(--text-color); background-color: var(--secondary-color); position: relative; z-index: 10; margin-left: 20px; flex-shrink: 0; } .toc-toggle:hover { background-color: var(--light-gray); } .toc-toggle svg { width: 18px; height: 18px; stroke: currentColor; transition: transform 0.3s ease; } .sidebar-hidden .toc-toggle svg { transform: rotate(180deg); } .page-toc h3 { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: 0; color: var(--text-color); } .page-toc ul { list-style: none; padding: 0; margin: 0; } .page-toc .toc-item { margin-bottom: 8px; } .page-toc .toc-link { display: block; padding: 6px 8px; color: var(--text-color); text-decoration: none; border-radius: var(--radius-md); transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.3; position: relative; } .page-toc .toc-link:hover { color: var(--text-color); background-color: rgba(0, 0, 0, 0.04); } .page-toc .toc-link.active { color: var(--text-color); background-color: rgba(0, 0, 0, 0.04); font-weight: 500; } /* Vertical progress indicator on left side of active link */ .page-toc .toc-link.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 6px 0 0 6px; will-change: background; } /* Horizontal progress bar at bottom of active link */ .page-toc .toc-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0 0 6px 6px; will-change: background; } /* TOC level hierarchy — typographic weight + spacing */ /* Sections (h2) — dominant, separated from each other */ .page-toc .toc-level-2 { padding-left: 0; margin-top: 12px; } .page-toc .toc-level-2:first-child { margin-top: 0; } .page-toc .toc-level-2 > .toc-item-row > .toc-link, .page-toc .toc-level-2 > .toc-link { font-size: 13.5px; font-weight: 600; color: var(--text-color); } /* Subsections (h3) — lighter, subordinate */ .page-toc .toc-level-3 { padding-left: 12px; } .page-toc .toc-level-3 > .toc-item-row > .toc-link, .page-toc .toc-level-3 > .toc-link { font-size: 12.5px; font-weight: 400; opacity: 0.72; } /* Sub-subsections (h4) — smallest, most muted */ .page-toc .toc-level-4 { padding-left: 24px; } .page-toc .toc-level-4 > .toc-item-row > .toc-link, .page-toc .toc-level-4 > .toc-link { font-size: 12px; font-weight: 400; opacity: 0.58; } /* h5+ — rarely used, continuation of pattern */ .page-toc .toc-level-5 { padding-left: 36px; } .page-toc .toc-level-5 > .toc-item-row > .toc-link, .page-toc .toc-level-5 > .toc-link { font-size: 12px; font-weight: 400; opacity: 0.50; } .page-toc .toc-level-6 { padding-left: 48px; } .page-toc .toc-level-6 > .toc-item-row > .toc-link, .page-toc .toc-level-6 > .toc-link { font-size: 12px; font-weight: 400; opacity: 0.50; } /* Restore full opacity on hover and active for all levels */ .page-toc .toc-link:hover, .page-toc .toc-link.active { opacity: 1; } /* Level-1 (rare, page title level) */ .page-toc .toc-level-1 { font-weight: 600; margin-top: 4px; } /* ---- Collapsible TOC ---- */ /* Row container: arrow + link on the same line */ .toc-item-row { display: flex; align-items: center; gap: 0; } .toc-item-row .toc-link { flex: 1; min-width: 0; } /* Toggle arrow button */ .toc-toggle-arrow { background: none; border: none; cursor: pointer; padding: 3px 2px 3px 0; color: var(--light-text, #999); flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; transition: color 0.2s ease; } .toc-toggle-arrow:hover { color: var(--text-color, #333); } /* Arrow icon — rotates when expanded */ .toc-arrow-icon { width: 12px; height: 12px; transition: transform 0.2s ease; } .toc-toggle-arrow.toc-arrow-open .toc-arrow-icon { transform: rotate(90deg); } /* Children list — collapsed by default when collapsing is active */ .toc-children { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } /* Expanded children */ .toc-children.toc-expanded { max-height: 2000px; } /* Nested indentation — children inherit parent padding and add their own */ .toc-children .toc-item { padding-left: 10px; margin-top: 0; /* Don't inherit section-level spacing inside nested lists */ } /* Progress indicator for TOC */ .toc-link-progress { position: relative; overflow: hidden; } .toc-link-progress::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 0%; background-color: var(--primary-color); transition: width 0.2s ease; } .toc-link.active .toc-link-progress::after { width: var(--scroll-progress, 0%); } /* Scrollbar styles for the TOC */ .page-toc::-webkit-scrollbar { width: 4px; } .page-toc::-webkit-scrollbar-track { background: transparent; } .page-toc::-webkit-scrollbar-thumb { background: var(--medium-gray); border-radius: var(--radius-sm); } .page-toc::-webkit-scrollbar-thumb:hover { background: var(--dark-gray); } /* Dark mode adjustments for the TOC */ /* Markdown Content Styles */ .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6 { margin-top: 1.5em; margin-bottom: 0.75em; line-height: 1.3; color: var(--text-color); font-family: var(--font-display); } .markdown-content h1:first-child, .markdown-content h2:first-child, .markdown-content h3:first-child, .markdown-content h4:first-child, .markdown-content h5:first-child, .markdown-content h6:first-child { margin-top: 0; } .markdown-content h1 { font-size: var(--font-size-6xl); /* 3rem / 48px */ line-height: 1.375; font-weight: 500; padding: 0; margin: 0; letter-spacing: 0.004em; } .markdown-content h2 { font-size: var(--font-size-4xl); /* 1.75rem / 28px */ line-height: 1.2; font-weight: 500; letter-spacing: 0.004em; } .markdown-content h3 { font-size: var(--font-size-3xl); /* 1.375rem / 22px */ line-height: 1.25; font-weight: 500; letter-spacing: 0.004em; } .markdown-content h4 { font-size: var(--font-size-2xl); font-weight: 500; } /* 1.25rem / 20px */ .markdown-content h5 { font-size: var(--font-size-xl); font-weight: 500; } /* 1.125rem / 18px */ /* ── Collapsible sections ── */ .section-collapsible-heading { cursor: pointer; user-select: none; position: relative; } .section-toggle-icon { position: absolute; left: -24px; top: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; transition: transform 0.2s ease, opacity 0.15s ease; color: var(--text-secondary); opacity: 0; } /* Show chevron when hovering anywhere on the heading (including the icon area) */ .section-collapsible-heading:hover .section-toggle-icon { opacity: 1; color: var(--text-primary); } /* Always show chevron when section is collapsed */ .section-collapsible-heading.collapsed .section-toggle-icon { opacity: 1; transform: rotate(-90deg); } /* On mobile: always show chevron (no hover), add separators between collapsed sections */ @media (max-width: 768px) { .section-collapsible-heading .section-toggle-icon { opacity: 1; } .section-collapsible-heading.collapsed { padding-bottom: 12px; border-bottom: 1px solid var(--color-border-primary, #e5e7eb); } } .section-collapsed-hidden { display: none !important; } /* Phase 1 of section collapse: hide every following sibling inside the heading's parent. This is purely CSS so it also catches elements that MathJax inserts asynchronously after the user clicks (e.g. lazy-typeset blocks for $$...$$ math). */ .section-collapsible-heading.collapsed ~ * { display: none !important; } /* Ensure spacing between consecutive paragraphs */ .markdown-content p + p { margin-top: 1.2em; } /* Handle standalone
tags between paragraphs for extra spacing */ .rendered-markdown-content > br { display: block; margin: 0.6em 0; content: ""; } /* Ensure multiple consecutive
tags create visible spacing */ .rendered-markdown-content > br + br { margin-top: 0.6em; } .markdown-content a { color: var(--primary-color); text-decoration: none; } .markdown-content a:hover { text-decoration: underline; } /* Internal wiki links (pages, theorems, definitions) get dotted underline. Color comes from --color-link-internal, which is derived from --color-accent via oklch() and redefined in dark mode — see design-tokens.css. */ a.internal-wiki-link { text-decoration: none; border-bottom: 1.5px dotted var(--color-link-internal); color: var(--color-link-internal); transition: all 0.2s ease; } a.internal-wiki-link:hover { text-decoration: none; border-bottom-style: solid; background: color-mix(in srgb, var(--color-link-internal) 12%, transparent); } .markdown-content code { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background-color: var(--secondary-color); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } .markdown-content pre { background-color: var(--secondary-color); padding: 16px; border-radius: var(--radius-md); overflow-x: auto; font-size: 0.9rem; margin: 1em 0; } .markdown-content pre code { background-color: transparent; padding: 0; font-size: inherit; } .markdown-content blockquote { border-left: 4px solid var(--primary-color); margin: 1.5em 0; padding: 0.5em 1em; background-color: var(--secondary-color); border-radius: 0 6px 6px 0; color: var(--medium-gray); } .markdown-content ul, .markdown-content ol { margin: 1em 0; padding-left: 2em; } .markdown-content img { max-width: 100%; border-radius: var(--radius-md); margin: 1em 0; } .markdown-content table { width: 100%; border-collapse: collapse; margin: 1em 0; } .markdown-content th, .markdown-content td { padding: 8px 12px; border: 1px solid var(--light-gray); } .markdown-content th { background-color: var(--secondary-color); font-weight: 600; text-align: left; } .markdown-content tr:nth-child(even) { background-color: var(--secondary-color); } /* Math styling */ .markdown-content .math { overflow-x: auto; padding: 10px 0; } .markdown-content .math-block { display: block; text-align: center; margin: 1.5em 0; padding: 0.8em 0; } .markdown-content .katex-display { margin: 1.5em 0; overflow-x: auto; overflow-y: hidden; } /* Definition styling */ .markdown-content dl { background-color: var(--light-gray); padding: 15px; border-radius: 5px; border-left: 4px solid var(--primary-color); margin-bottom: 1.5em; } .markdown-content dt { font-weight: 700; color: var(--primary-color); margin-bottom: 0.5em; } .markdown-content dd { margin-bottom: 1em; margin-left: 0; } .markdown-content dd:last-child { margin-bottom: 0; } .search-results { list-style-type: none; } .search-results li { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--medium-gray); } .search-results li:last-child { border-bottom: none; } .result-excerpt { color: var(--dark-gray); font-size: 0.875rem; margin-top: 0.25rem; } /* Alerts */ .error { background-color: #f8d7da; color: #721c24; padding: 0.75rem; margin-bottom: 1rem; border: 1px solid #f5c6cb; border-radius: 3px; } .info { background-color: #d1ecf1; color: #0c5460; padding: 0.75rem; margin-bottom: 1rem; border: 1px solid #bee5eb; border-radius: 3px; } /* Editor Styles */ .editor-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px; } .editor-col { flex: 1; } .editor-label { font-weight: 600; margin-bottom: 10px; } .editor-input { width: 100%; min-height: 400px; padding: 15px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-family: 'Source Code Pro', monospace; font-size: 0.9rem; resize: vertical; } .editor-preview { min-height: 400px; padding: 15px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--color-bg-primary); overflow-y: auto; } /* Form Styles */ .form-group { margin-bottom: 20px; } .form-label { display: block; margin-bottom: 5px; font-weight: 500; } .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 1rem; } .form-input:focus { border-color: var(--primary-color); outline: none; } /* Alerts and Notifications */ .alert { padding: 15px; margin-bottom: 20px; border-radius: var(--radius-sm); } .alert-error { background-color: #ffebee; color: var(--error-color); border: 1px solid #ffcdd2; } .alert-success { background-color: #e8f5e9; color: var(--success-color); border: 1px solid #c8e6c9; } .alert-warning { background-color: #fff8e1; color: var(--warning-color); border: 1px solid #ffecb3; } /* Utilities */ .text-center { text-align: center; } .text-right { text-align: right; } .mb-0 { margin-bottom: 0; } .mt-0 { margin-top: 0; } .hidden { display: none; } /* Responsive Styles for non-wiki pages The wiki page TOC behavior is handled in its own block above (the bottom-bar pattern at <1100px). The legacy overlay-drawer rules that used to live here have been removed. */ .delete-form { display: inline; } /* Navigation Styles */ nav { margin-left: auto; } .nav-menu { display: flex; align-items: center; gap: 1rem; margin-bottom: 0; } .nav-menu a:not(.btn) { color: var(--text-color); text-decoration: none; font-size: 0.9rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); transition: background-color 0.2s ease, color 0.2s ease; } .nav-menu a:not(.btn):hover { background-color: var(--light-gray); color: var(--primary); text-decoration: none; } .nav-menu .button { background-color: var(--primary); color: var(--color-text-inverse); padding: 0.25rem 0.75rem; border-radius: var(--radius-sm); font-weight: 500; } .nav-menu .button:hover { background-color: var(--primary-dark); color: var(--color-text-inverse); text-decoration: none; } .mobile-menu-button { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; } .mobile-menu-button svg { width: 24px; height: 24px; stroke: var(--text-color); } /* Dark mode navigation adjustments */ /* Issue Detail Styles */ .issue-detail-container { max-width: 850px; margin: 0 auto; } .issue-status svg { margin-right: 4px; } .issue-status.open { background-color: rgba(40, 167, 69, 0.1); color: var(--color-success); } .issue-status.closed { background-color: rgba(203, 36, 49, 0.1); color: #cb2431; } .issue-author { font-weight: 500; } .issue-actions { margin-top: 15px; } .issue-body { display: flex; flex-direction: column; gap: 20px; } .issue-description, .comment { background-color: var(--color-bg-primary, #fff); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; } .comment-header { background-color: var(--light-gray); padding: 10px 15px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; } .comment-author { font-weight: 500; } .comment-handle { font-size: 0.75rem; font-weight: 400; color: var(--accent-color, #5A7A6A); background: none; border: none; padding: 0; } .comment-badge { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 3px; background: var(--light-gray, #F0EEEA); color: var(--text-color, #5A5A5A); display: inline-block; } .comment-date { color: var(--light-text); font-size: 0.85rem; } .comment-content { padding: 15px; } .comments-section h3 { margin-top: 30px; margin-bottom: 15px; font-size: 1.2rem; } .comments-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; } .new-comment { margin-top: 30px; } .btn-danger { background-color: #cb2431; color: var(--color-text-inverse); } .btn-danger:hover { background-color: #a91e2a; } /* Responsive design for wiki pages */ /* Add additional styling to ensure wiki pages have minimal gaps and better spacing */ .welcome-section { margin-bottom: 30px; } .pages-section { margin-bottom: 30px; } .page-list { list-style: none; padding-left: 0; margin-top: 15px; } .page-list li { margin-bottom: 8px; padding: 5px 0; border-bottom: 1px solid var(--light-gray); } .page-list li:last-child { border-bottom: none; } .page-list a { color: var(--primary-color); text-decoration: none; display: block; padding: 5px 0; } .page-list a:hover { color: var(--primary-color); text-decoration: underline; } .markdown-content p, .rendered-markdown-content p { font-size: 1rem; /* 16px — body text */ line-height: 1.7; } .markdown-content li, .rendered-markdown-content li { font-size: 1rem; line-height: 1.7; } .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, @media (max-width: 900px) { .page-title { font-size: 2.5rem; } .page-meta { flex-direction: column; gap: 5px; } .page-actions { flex-wrap: wrap; gap: 10px; } } /* Make content area more centered and spacious */ .markdown-content { max-width: 100%; margin: 0 auto; } .page-content { margin-top: 20px; } /* Ensure proper spacing for headers in markdown content */ .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6 { margin-top: 1.5em; margin-bottom: 0.75em; } .markdown-content > :first-child { margin-top: 0; } /* Hide sidebar styles */ .sidebar-hidden .sidebar { transform: translateX(-100%); opacity: 0; width: 0; padding: 0; overflow: hidden; transition: all 0.3s ease; } .sidebar-hidden .wiki-content { padding-left: 30px; max-width: 100%; margin-left: 0 !important; } /* When sidebar hidden but chat-dock present */ body:has(.chat-dock).sidebar-hidden .wiki-content { margin-left: 60px !important; } .sidebar-hidden .toc-toggle { transform: translateX(30px); position: fixed; left: 0; top: 80px; z-index: 100; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: none; /* Hide this button when sidebar is hidden */ } /* Image Upload Styles */ .image-upload-info { display: flex; align-items: center; margin-top: 10px; font-size: 0.9rem; color: var(--light-text); gap: 8px; flex-wrap: wrap; } .paste-instruction { margin-right: 5px; } .upload-label { color: var(--primary-color); cursor: pointer; text-decoration: underline; } .upload-label:hover { text-decoration: none; } .syntax-hint { margin-left: 8px; font-size: 0.85rem; color: var(--light-text); font-style: italic; } .syntax-hint code { background: var(--color-bg-tertiary); padding: 2px 6px; border-radius: 3px; font-family: var(--font-mono); font-size: 0.85em; color: #d73a49; } .size-label { margin-left: 8px; font-weight: 500; color: var(--text-color); } .image-scale-select { padding: 4px 8px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background-color: var(--color-bg-primary); font-size: 0.9rem; cursor: pointer; transition: border-color 0.2s; } .image-scale-select:hover { border-color: var(--primary-color); } .image-scale-select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1); } .hidden-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .uploading-indicator { margin-top: 10px; padding: 8px; background-color: var(--light-gray); border-radius: var(--radius-sm); display: inline-block; font-size: 0.9rem; } /* Textarea Styles */ textarea.form-control { width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.5; resize: vertical; } textarea.form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.1); } /* Issue Comment Styles */ .issue-comment-form { flex: 1; } .tab-nav { display: flex; margin-bottom: 10px; border-bottom: 1px solid var(--border-color); } .tab-nav-item { padding: 8px 12px; margin-right: 10px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: 0.9rem; color: var(--text-color); } .tab-nav-item:hover { color: var(--primary-color); } .tab-nav-item.active { border-bottom-color: var(--primary-color); color: var(--primary-color); font-weight: 500; } .tab-content { margin-bottom: 15px; } .tab-pane { display: none; } .tab-pane.active { display: block; } /* Dark mode adjustments */ /* Theorems Styles */ .theorems-header { text-align: center; margin-bottom: 2rem; } .theorems-header h1 { font-size: 3rem; margin-bottom: 0.5rem; font-weight: 700; } .theorems-header .subtitle { color: var(--light-text); font-size: 1.2rem; } .theorem-search-form .search-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .theorems-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; background-color: var(--color-bg-primary, #fff); } .theorems-table th { background-color: var(--light-gray); padding: 1rem; text-align: left; font-weight: 600; border-bottom: 1px solid var(--border-color); } .theorems-table td { padding: 1rem; border-bottom: 1px solid var(--border-color); vertical-align: top; } .theorems-table tr:last-child td { border-bottom: none; } .theorem-row { cursor: pointer; transition: background-color 0.2s; } .theorem-row:hover { background-color: var(--lighter-gray); } .theorem-id { color: var(--light-text); font-weight: 500; white-space: nowrap; } .theorem-name { font-weight: 600; color: var(--primary-color); } /* Theorem Detail Styles */ .theorem-breadcrumb { margin-bottom: 1.5rem; color: var(--light-text); font-size: 0.9rem; } .theorem-breadcrumb a { color: var(--primary-color); text-decoration: none; } .theorem-breadcrumb a:hover { text-decoration: underline; } .theorem-header { border-bottom: 1px solid var(--border-color); } .theorem-categories { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .theorem-area, .theorem-subarea { background-color: var(--lighter-gray); color: var(--text-color); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500; } .theorem-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .tag { background-color: var(--light-gray); color: var(--text-color); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; } .theorem-meta { color: var(--light-text); font-size: 0.9rem; margin-bottom: 1rem; } .theorem-actions { display: flex; gap: 0.5rem; } .theorem-section { margin-bottom: 2rem; } .theorem-section h2 { font-size: 1.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } /* Theorem Form Styles */ .theorem-form-header { margin-bottom: 1.5rem; } .theorem-form { background-color: var(--color-bg-primary, #fff); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; padding: 1.5rem; } .form-section { margin-bottom: 2rem; } .form-section h2 { font-size: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .editor-tab-container { border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 0.5rem; } .editor-tabs { display: flex; background-color: var(--light-gray); border-bottom: 1px solid var(--border-color); } .editor-tab { padding: 0.5rem 1rem; background: none; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: var(--text-color); } .editor-tab.active { background-color: var(--color-bg-primary, #fff); border-bottom: 2px solid var(--primary-color); color: var(--primary-color); } .editor-pane { display: none; } .editor-pane.active { display: block; } .editor-textarea { width: 100%; padding: 1rem; border: none; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.5; resize: vertical; } .editor-textarea:focus { outline: none; } .preview-content { padding: 1rem; min-height: 100px; } /* Dark mode adjustments */ /* Theorem Preview Styles */ .theorem-preview-tooltip { background-color: var(--color-bg-primary, #fff); border-radius: var(--radius-lg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 400px; padding: 15px; font-size: 0.9rem; line-height: 1.5; border: 1px solid var(--border-color); transition: opacity 0.2s; overflow: hidden; } .theorem-preview-tooltip .theorem-preview-header { margin-bottom: 10px; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .theorem-preview-tooltip h3 { font-size: 1.2rem; margin: 0 0 8px 0; color: var(--primary-color); flex-basis: 100%; } .theorem-preview-controls { position: absolute; top: 0; right: 0; display: flex; gap: 4px; } .theorem-preview-close-btn, .theorem-preview-collapse-btn, .theorem-preview-pin-btn { background: none; border: none; color: var(--light-text); font-size: 1.2rem; line-height: 1; padding: 0; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; opacity: 0.7; border-radius: 50%; transition: all 0.2s ease; } .theorem-preview-close-btn:hover, .theorem-preview-collapse-btn:hover, .theorem-preview-pin-btn:hover { opacity: 1; background-color: var(--lighter-gray); } .theorem-preview-pin-hint { font-size: 0.7rem; text-align: center; margin-top: 8px; color: var(--light-text); font-style: italic; } .theorem-preview-area, .theorem-preview-subarea { background-color: var(--lighter-gray); color: var(--text-color); padding: 2px 8px; border-radius: var(--radius-xl); font-size: 0.75rem; font-weight: 500; margin-right: 6px; display: inline-block; } .theorem-preview-tags { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; } .theorem-preview-tag { background-color: var(--light-gray); color: var(--text-color); padding: 2px 6px; border-radius: 10px; font-size: 0.7rem; font-weight: 400; } .theorem-preview-statement { margin-bottom: 12px; max-height: 150px; overflow-y: auto; padding-right: 5px; } .theorem-preview-statement * { margin-top: 0.5em; margin-bottom: 0.5em; } .theorem-preview-statement *:first-child { margin-top: 0; } .theorem-preview-statement *:last-child { margin-bottom: 0; } .theorem-preview-link { display: block; text-align: right; font-size: 0.8rem; color: var(--primary-color); text-decoration: none; margin-top: 8px; } .theorem-preview-link:hover { text-decoration: underline; } .theorem-preview-loading { padding: 15px; text-align: center; color: var(--light-text); font-style: italic; } .theorem-preview-error { padding: 15px; text-align: center; color: var(--danger-color); font-style: italic; } /* Dark mode adjustments for theorem preview */ /* Theorem Reference Styles */ a.theorem-reference { color: var(--primary-color); text-decoration: none; background-color: rgba(0, 112, 243, 0.1); padding: 2px 5px; border-radius: var(--radius-sm); font-weight: 500; transition: background-color 0.2s; } a.theorem-reference:hover { background-color: rgba(0, 112, 243, 0.2); text-decoration: none; } /* Dark mode adjustments for theorem references */ /* Theorem Environment Styles */ .theorem-box { padding: 1.25rem; margin: 1rem 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg); } /* Theorem citation title — clean, restrained */ .theorem-citation-title { font-size: var(--font-size-xl); /* 1.125rem / 18px */ font-weight: var(--font-weight-semibold); color: var(--color-text-primary); text-decoration: none; line-height: var(--line-height-snug); } .theorem-citation-title:hover { color: var(--color-accent, #5A7A6A); } .theorem-citation-number { font-size: var(--font-size-sm); /* 0.75rem / 12px */ font-weight: var(--font-weight-normal); color: var(--color-text-tertiary, #999); margin-left: 0.25rem; } .definition-box { border-left: 6px solid var(--color-primary); background-color: rgb(0 0 0 / 3%); padding: 12px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); margin: 10px 0; } .definition-box .definition-title { font-weight: 600; } .definition-box p { display: inline; margin: 0; } .definition-box p + p { display: block; margin-top: 8px; } .theorem-content p:last-child { margin-bottom: 0; } /* Remark Box — subtle amber-tinted callout */ .remark-box { display: flex; align-items: flex-start; gap: 12px; background-color: var(--color-remark-bg); border-radius: var(--radius-lg, 8px); padding: 14px 18px; margin: 16px 0; } .remark-box .remark-icon { flex-shrink: 0; margin-top: 2px; color: var(--color-remark-accent); } .remark-box .remark-icon svg { display: block; } .remark-box .remark-body { flex: 1; min-width: 0; } .remark-box .remark-title { display: none; } .remark-box .remark-content { font-size: var(--font-size-lg, 14px); line-height: 1.6; color: var(--color-remark-text); } .remark-box .remark-content, .remark-box .remark-content p, .remark-box .remark-content span, .remark-box .remark-content a, .remark-box .remark-content mjx-container { color: var(--color-remark-text); } .remark-box .remark-content p { margin: 0; } .remark-box .remark-content p + p { margin-top: 8px; } /* Remark with explicit title */ .remark-box.remark-has-title .remark-title { display: block; font-weight: var(--font-weight-semibold, 600); font-size: var(--font-size-lg, 14px); color: var(--color-remark-accent); margin-bottom: 4px; } /* Dark mode overrides for remark box — needed to beat the high-specificity dark-mode catch-all div:not(...) { color: inherit } and MathJax !important rules */ :root[data-theme="dark"] .remark-box .remark-icon { color: var(--color-remark-accent) !important; } :root[data-theme="dark"] .remark-box .remark-content, :root[data-theme="dark"] .remark-box .remark-content p, :root[data-theme="dark"] .remark-box .remark-content span, :root[data-theme="dark"] .remark-box .remark-content a, :root[data-theme="dark"] .remark-box .remark-content mjx-container, :root[data-theme="dark"] .remark-box .remark-content mjx-container svg { color: var(--color-remark-text) !important; } :root[data-theme="dark"] .remark-box.remark-has-title .remark-title { color: var(--color-remark-accent) !important; } /* Dark mode adjustments for theorems */ /* Theorem Citation Styles */ .theorem-citation-box { margin: 20px 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--color-bg-primary); } /* Theorem box header styling */ .theorem-box-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; gap: 1rem; } .theorem-header-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .theorem-header-actions .view-tags-btn { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } @media (max-width: 768px) { .theorem-box-header { flex-direction: column; align-items: flex-start; gap: 8px; } .theorem-header-actions { width: 100%; gap: 4px; } } .theorem-citation-placeholder { padding: 20px; text-align: center; background: var(--color-bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin: 20px 0; } .loading-theorem-citation { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; } .loading-theorem-citation p { margin: 0; font-size: var(--font-size-sm, 13px); color: var(--text-secondary, #666); } .loading-spinner { width: 24px; height: 24px; border: 2.5px solid var(--border-color, #e0e0e0); border-top-color: var(--text-color, #333); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .proof-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; } .proof-loading p { margin: 0; font-size: var(--font-size-sm, 13px); color: var(--text-secondary, #666); } .theorem-citation-error { padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-lg); margin: 20px 0; } .theorem-citation-error .error-message { color: var(--color-danger); font-weight: 500; } /* ===== Proof Citation Box [citeproof:id] ===== */ .proof-citation-box { margin: 20px 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--color-bg-secondary); overflow: hidden; transition: box-shadow 0.2s ease; } .proof-citation-box:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .proof-citation-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; background: var(--color-bg-tertiary, var(--color-bg-secondary)); border-bottom: 1px solid var(--border-color); transition: background 0.2s ease; } .proof-citation-header:hover { background: var(--color-bg-hover, var(--color-bg-secondary)); } .proof-citation-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--font-size-md); color: var(--text-primary); } .proof-citation-icon { transition: transform 0.25s ease; color: var(--text-secondary); } .proof-citation-box.expanded .proof-citation-icon { transform: rotate(90deg); } .proof-citation-link { font-size: var(--font-size-sm); color: var(--primary-color); text-decoration: none; opacity: 0.8; transition: opacity 0.2s ease; } .proof-citation-link:hover { opacity: 1; text-decoration: underline; } .proof-citation-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; background: var(--color-bg-primary); } .proof-citation-box.expanded .proof-citation-content { max-height: 2000px; padding: 20px; } /* After expand transition completes, remove height cap so nested collapsible elements (e.g. expandable proofs) can grow freely */ .proof-citation-box.expand-complete .proof-citation-content { max-height: none; overflow: visible; } .proof-citation-body { font-size: var(--font-size-md); line-height: 1.7; color: var(--text-primary); } .proof-citation-body p { margin-bottom: 1em; } .proof-citation-body p:last-child { margin-bottom: 0; } .proof-citation-qed { text-align: right; font-size: 18px; color: var(--text-secondary); margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border-color); } .proof-citation-error, .proof-citation-empty { padding: 16px 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-lg); margin: 20px 0; color: #b91c1c; font-size: var(--font-size-md); } .proof-citation-empty { background: #fffbeb; border-color: #fde68a; color: #92400e; } /* Dark mode */ :root[data-theme="dark"] .proof-citation-box:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } :root[data-theme="dark"] .proof-citation-error, :root[data-theme="dark"] .proof-citation-empty { background: rgba(185, 28, 28, 0.1); border-color: rgba(185, 28, 28, 0.3); color: #fca5a5; } :root[data-theme="dark"] .proof-citation-empty { background: rgba(146, 64, 14, 0.1); border-color: rgba(146, 64, 14, 0.3); color: #fcd34d; } /* Ensure theorem citation content gets properly styled */ .theorem-citation-content { margin: 12px 0; } /* Theorem citation actions - similar to statement-actions */ .theorem-citation-actions { display: flex; gap: 0.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border-primary); flex-wrap: wrap; justify-content: space-between; align-items: center; } .theorem-citation-actions .left-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .theorem-citation-actions .right-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; } /* ========== Theorem Cite Modal ========== */ .cite-modal-inner { max-width: 520px; max-height: 85vh; overflow-y: auto !important; overscroll-behavior: contain; } .cite-card-tabs { display: flex; padding: 0 20px; border-bottom: 1px solid var(--color-border-secondary); gap: 0; } .cite-tab { display: flex; align-items: center; gap: 6px; padding: 8px 14px 10px 14px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; transition: color var(--transition-fast), border-color var(--transition-fast); } .cite-tab:hover { color: var(--color-text-secondary); } .cite-tab.active { color: var(--color-accent); font-weight: var(--font-weight-semibold); border-bottom-color: var(--color-accent); } .cite-tab.active svg { stroke: var(--color-accent); } .cite-tab svg { stroke: var(--color-text-tertiary); transition: stroke var(--transition-fast); } .cite-tab-content { display: none; padding: 16px 20px 20px 20px; } .cite-tab-content.active { display: flex; flex-direction: column; gap: 16px; } .cite-section { display: flex; flex-direction: column; gap: 6px; } .cite-section-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .cite-section-label-muted { font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); } .cite-section-desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); } .cite-divider { height: 1px; background: var(--color-border-secondary); } .cite-code-row { display: flex; align-items: center; justify-content: space-between; border-radius: var(--radius-md); padding: 10px 12px; gap: 10px; margin-top: 4px; } .cite-code-row.cite-preferred { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); } .cite-code-row.cite-secondary { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-secondary); margin-top: 0; } .cite-code-row code { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-accent-dark, var(--color-accent)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cite-code-row.cite-secondary code { color: var(--color-text-tertiary); } .cite-preferred-badge { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-accent); background: var(--color-accent-subtle); padding: 2px 6px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; } .cite-copy-btn { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-accent); background: var(--color-accent-subtle); border: none; padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background var(--transition-fast), color var(--transition-fast); } .cite-copy-btn:hover { background: color-mix(in srgb, var(--color-accent) 25%, transparent); } .cite-code-row.cite-secondary .cite-copy-btn { color: var(--color-text-tertiary); background: var(--color-bg-hover); } .cite-code-row.cite-secondary .cite-copy-btn:hover { background: var(--color-bg-active); } .cite-copy-btn.copied { color: var(--color-success-text, var(--color-accent)); } .cite-inline-code { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-accent-dark, var(--color-accent)); background: var(--color-accent-subtle); padding: 1px 5px; border-radius: var(--radius-sm); } /* BibTeX block */ .cite-bibtex-block { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); overflow: hidden; margin-top: 4px; } .cite-bibtex-code { font-family: var(--font-mono); font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-secondary); padding: 14px 16px; margin: 0; white-space: pre; overflow-x: auto; } .cite-bibtex-copy-bar { display: flex; justify-content: flex-end; padding: 8px 14px; border-top: 1px solid var(--color-border-primary); background: var(--color-bg-tertiary); } /* ========== Definition Citation Box [citedefinition:reference] ========== */ .definition-citation-box { margin: 20px 0; border: 1px solid var(--border-color); border-left: 6px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--color-bg-secondary, rgb(0 0 0 / 3%)); padding: 20px; } .definition-citation-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; } .definition-citation-title-row { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; } .definition-citation-title-row .tags-section { margin: 0; } .definition-citation-title-row .tag-list { display: flex; gap: 6px; flex-wrap: wrap; } .definition-citation-title-row a { text-decoration: none; color: inherit; } .definition-citation-title-row a:hover { text-decoration: underline; } .definition-header-actions { display: flex; gap: 8px; flex-shrink: 0; } .definition-citation-content { margin: 12px 0; font-size: var(--font-size-md); line-height: 1.7; color: var(--text-primary); } .definition-citation-actions { display: flex; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border-primary); flex-wrap: wrap; justify-content: space-between; align-items: center; } .definition-citation-actions .left-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .definition-citation-actions .right-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; } .definition-citation-brain-wrapper { position: relative; display: inline-flex; align-items: center; } .definition-citation-brain-icon { cursor: pointer; transition: color 0.2s ease, transform 0.15s ease; } .definition-citation-brain-icon:hover { transform: scale(1.1); } .definition-citation-brain-icon.known { color: var(--color-success); } .definition-citation-brain-icon.unknown { color: var(--color-text-secondary); } .definition-citation-generality-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--color-bg-primary, #fff); border: 1px solid var(--border, #d0d7de); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); min-width: 220px; z-index: 200; overflow: hidden; padding: 8px 0; } .definition-citation-generality-dropdown .knowledge-dropdown-header { padding: 6px 12px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-secondary); margin-bottom: 4px; } .definition-citation-generality-dropdown .knowledge-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; transition: background 0.15s ease; } .definition-citation-generality-dropdown .knowledge-dropdown-item:hover { background: var(--color-bg-hover, #f6f8fa); } .definition-citation-generality-dropdown .knowledge-level-check { margin-left: auto; color: var(--color-success); font-weight: 600; } .definition-citation-knowledge-btn { display: inline-flex; align-items: center; gap: 6px; } .definition-citation-placeholder { padding: 24px 20px; text-align: center; background: var(--color-bg-secondary, #f9f9f9); border: 1px solid var(--border-color); border-left: 6px solid var(--color-primary); border-radius: var(--radius-lg); margin: 20px 0; } .loading-definition-citation { display: flex; flex-direction: column; align-items: center; gap: 10px; } .loading-definition-citation p { margin: 0; font-size: var(--font-size-sm, 13px); color: var(--text-secondary, #666); } .definition-citation-error { padding: 16px 20px; background: #fef2f2; border: 1px solid #fecaca; border-left: 6px solid #dc3545; border-radius: var(--radius-lg); margin: 20px 0; color: var(--color-danger); font-weight: 500; } :root[data-theme="dark"] .definition-citation-box { border-left-color: var(--color-text-secondary); background: var(--color-bg-secondary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } :root[data-theme="dark"] .definition-citation-actions { border-top-color: var(--color-border-strong); } :root[data-theme="dark"] .definition-citation-placeholder { background: var(--color-bg-secondary); border-left-color: var(--color-text-secondary); } :root[data-theme="dark"] .definition-citation-generality-dropdown { background: var(--color-bg-secondary); border-color: var(--color-border-primary); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } :root[data-theme="dark"] .definition-citation-generality-dropdown .knowledge-dropdown-header { border-bottom-color: var(--color-border-strong); color: var(--color-text-secondary); } :root[data-theme="dark"] .definition-citation-generality-dropdown .knowledge-dropdown-item:hover { background: rgba(255, 255, 255, 0.05); } :root[data-theme="dark"] .definition-citation-error { background: rgba(185, 28, 28, 0.1); } /* Prerequisite status styling */ .prerequisite-status-text { display: inline-flex; align-items: center; gap: 0.375em; font-size: var(--font-size-md); /* 14px — matches .btn */ font-weight: var(--font-weight-semibold); padding: 0.5em 1.125em; /* matches .btn padding */ border-radius: var(--radius-md); line-height: 1.3; } .prerequisite-status-text.ready-to-learn { color: var(--color-accent-dark); background: rgba(90, 122, 106, 0.1); } .prerequisite-status-text.knowledge-gaps { color: var(--color-warning); background: rgba(196, 152, 64, 0.1); } /* Knowledge gaps hover tooltip */ .knowledge-gaps-wrapper { position: relative; display: inline-flex; cursor: pointer; } .knowledge-gaps-tooltip { display: none; position: absolute; top: calc(100% + 8px); left: 0; padding-top: 0; background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: 10px; padding: 14px 16px; min-width: 240px; max-width: 340px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); z-index: 1000; font-size: 13px; font-weight: 400; color: var(--color-text-primary); line-height: 1.5; } .knowledge-gaps-tooltip::before { content: ''; position: absolute; top: -6px; left: 16px; width: 10px; height: 10px; background: var(--color-bg-primary); border-left: 1px solid var(--color-border-primary); border-top: 1px solid var(--color-border-primary); transform: rotate(45deg); } /* Invisible bridge to keep tooltip open when moving mouse from trigger to tooltip */ .knowledge-gaps-tooltip::after { content: ''; position: absolute; top: -12px; left: 0; width: 100%; height: 12px; } .knowledge-gaps-wrapper:hover .knowledge-gaps-tooltip { display: block; } .knowledge-gaps-tooltip .tooltip-section { margin-bottom: 0; } .knowledge-gaps-tooltip .tooltip-section + .tooltip-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-secondary); } .knowledge-gaps-tooltip .tooltip-section-title { margin: 0 0 6px 0; font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-tertiary); } .knowledge-gaps-tooltip .tooltip-prereq-list { list-style: none; padding: 0; margin: 0; } .knowledge-gaps-tooltip .tooltip-prereq-list li { padding: 3px 0; display: flex; align-items: center; gap: 6px; } .knowledge-gaps-tooltip .tooltip-prereq-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #dc3545; flex-shrink: 0; } .knowledge-gaps-tooltip .tooltip-prereq-list li a { color: #dc3545; text-decoration: none; font-weight: 500; } .knowledge-gaps-tooltip .tooltip-prereq-list li a:hover { text-decoration: underline; } /* Dark mode for knowledge gaps tooltip */ :root[data-theme="dark"] .knowledge-gaps-tooltip { background: var(--color-bg-tertiary); border-color: var(--color-border-strong); color: var(--color-text-primary); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } :root[data-theme="dark"] .knowledge-gaps-tooltip::before { background: var(--color-bg-tertiary); border-color: var(--color-border-strong); } :root[data-theme="dark"] .knowledge-gaps-tooltip .tooltip-section + .tooltip-section { border-top-color: var(--color-border-strong); } :root[data-theme="dark"] .knowledge-gaps-tooltip .tooltip-section-title { color: var(--color-text-secondary); } :root[data-theme="dark"] .knowledge-gaps-tooltip .tooltip-prereq-list li a { color: var(--color-danger); } /* Statement actions layout for theorem citation boxes */ .statement-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border-primary, #e5e7eb); } .statement-actions .left-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .statement-actions .right-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; } @media (max-width: 768px) { .statement-actions .btn, .statement-actions .prerequisite-status-text { font-size: 0; padding: 6px 10px; min-width: 0; } .statement-actions .btn svg, .statement-actions .prerequisite-status-text svg { width: 16px; height: 16px; } .statement-actions, .statement-actions .left-actions, .statement-actions .right-actions { gap: 0.375rem; } } /* ===== Add to Deck Modal ===== */ .add-to-deck-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; animation: addToDeckFadeIn 0.15s ease; } @keyframes addToDeckFadeIn { from { opacity: 0; } to { opacity: 1; } } .add-to-deck-modal { background: var(--color-bg-primary, #fff); border-radius: var(--radius-lg, 12px); width: 90%; max-width: 440px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: addToDeckSlideUp 0.2s ease; } @keyframes addToDeckSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .add-to-deck-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--color-border-primary, #e5e7eb); } .add-to-deck-header h3 { margin: 0; font-size: 16px; font-weight: 600; } .add-to-deck-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--color-text-secondary, #6b7280); padding: 0 4px; line-height: 1; } .add-to-deck-close:hover { color: var(--color-text-primary, #111); } .add-to-deck-subtitle { margin: 0 0 14px 0; font-size: 13px; color: var(--color-text-secondary, #6b7280); padding: 16px 20px 0; } .add-to-deck-options { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; } .add-to-deck-option { background: var(--color-bg-secondary, #f9fafb); border: 1px solid var(--color-border-primary, #e5e7eb); border-radius: var(--radius-md, 8px); padding: 14px 16px; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .add-to-deck-option:hover { border-color: var(--color-primary, #6366f1); background: var(--color-bg-tertiary, #f3f4f6); } .add-to-deck-option-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; color: var(--color-text-primary, #111); } .add-to-deck-option-desc { font-size: 12px; color: var(--color-text-secondary, #6b7280); } .add-to-deck-deck-list { padding: 0 20px 20px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .add-to-deck-deck-item { display: flex; justify-content: space-between; align-items: center; background: var(--color-bg-secondary, #f9fafb); border: 1px solid var(--color-border-primary, #e5e7eb); border-radius: var(--radius-md, 8px); padding: 12px 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s; width: 100%; text-align: left; } .add-to-deck-deck-item:hover { border-color: var(--color-primary, #6366f1); background: var(--color-bg-tertiary, #f3f4f6); } .add-to-deck-deck-name { font-weight: 500; font-size: 14px; color: var(--color-text-primary, #111); } .add-to-deck-deck-count { font-size: 12px; color: var(--color-text-secondary, #6b7280); white-space: nowrap; } .add-to-deck-deck-item.already-added { opacity: 0.5; cursor: default; } .add-to-deck-already-badge { font-size: 11px; font-weight: 500; color: var(--color-text-tertiary, #9ca3af); white-space: nowrap; } .add-to-deck-loading, .add-to-deck-empty, .add-to-deck-error { text-align: center; padding: 20px; font-size: 13px; color: var(--color-text-secondary, #6b7280); } .add-to-deck-error { color: var(--color-danger, #ef4444); } .add-to-deck-success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px; text-align: center; } .add-to-deck-success p { margin: 0; font-size: 15px; font-weight: 500; color: var(--color-text-primary, #111); } /* ===== Share Modal ===== */ .share-link-row { display: flex; gap: 8px; margin-bottom: 16px; } .share-link-input { flex: 1; padding: 10px 12px; border: 1px solid var(--color-border-primary, #e5e7eb); border-radius: var(--radius-md, 8px); font-size: 13px; color: var(--color-text-primary, #111); background: var(--color-bg-secondary, #f9fafb); outline: none; min-width: 0; } .share-link-input:focus { border-color: var(--color-primary, #6366f1); } .share-copy-btn { padding: 10px 18px; border: 1px solid var(--color-border-primary, #e5e7eb); border-radius: var(--radius-md, 8px); background: var(--color-bg-primary, #fff); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .share-copy-btn:hover { background: var(--color-bg-tertiary, #f3f4f6); } .share-copy-btn.copied { background: var(--color-success, #22c55e); color: var(--color-text-inverse); border-color: var(--color-success, #22c55e); } .share-socials { display: flex; gap: 12px; justify-content: center; } .share-social-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.15s, opacity 0.15s; } .share-social-btn:hover { transform: scale(1.1); opacity: 0.85; } .share-twitter { background: var(--color-black); color: var(--color-text-inverse); } .share-facebook { background: #1877f2; color: var(--color-text-inverse); } .share-linkedin { background: #0a66c2; color: var(--color-text-inverse); } .share-reddit { background: #ff4500; color: var(--color-text-inverse); } .share-email { background: var(--color-text-secondary, #6b7280); color: var(--color-text-inverse); } /* ===== Definition Citation Box [citedefinition:reference] ===== */ .definition-citation-box { margin: 20px 0; border: 1px solid var(--border-color); border-left: 6px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--color-bg-secondary, rgb(0 0 0 / 3%)); padding: 20px; } .definition-citation-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; } .definition-citation-title-row { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; } .definition-citation-title-row .tags-section { margin: 0; } .definition-citation-title-row .tag-list { display: flex; gap: 6px; flex-wrap: wrap; } .definition-citation-title-row a { text-decoration: none; color: inherit; } .definition-citation-title-row a:hover { text-decoration: underline; } .definition-header-actions { display: flex; gap: 8px; flex-shrink: 0; } .definition-citation-content { margin: 12px 0; font-size: var(--font-size-md); line-height: 1.7; color: var(--text-primary); } .definition-citation-actions { display: flex; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border-primary); flex-wrap: wrap; justify-content: space-between; align-items: center; } .definition-citation-actions .left-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .definition-citation-actions .right-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; } /* Brain icon inside definition citation */ .definition-citation-brain-wrapper { position: relative; display: inline-flex; align-items: center; } .definition-citation-brain-icon { cursor: pointer; transition: color 0.2s ease, transform 0.15s ease; } .definition-citation-brain-icon:hover { transform: scale(1.1); } .definition-citation-brain-icon.known { color: var(--color-success); } .definition-citation-brain-icon.unknown { color: var(--color-text-secondary); } /* Generality dropdown inside definition citation */ .definition-citation-generality-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--color-bg-primary, #fff); border: 1px solid var(--border, #d0d7de); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); min-width: 220px; z-index: 200; overflow: hidden; padding: 8px 0; } .definition-citation-generality-dropdown .knowledge-dropdown-header { padding: 6px 12px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-secondary); margin-bottom: 4px; } .definition-citation-generality-dropdown .knowledge-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; transition: background 0.15s ease; } .definition-citation-generality-dropdown .knowledge-dropdown-item:hover { background: var(--color-bg-hover, #f6f8fa); } .definition-citation-generality-dropdown .knowledge-level-check { margin-left: auto; color: var(--color-success); font-weight: 600; } /* Knowledge button in definition citation */ .definition-citation-knowledge-btn { display: inline-flex; align-items: center; gap: 6px; } /* Placeholder / loading state */ .definition-citation-placeholder { padding: 24px 20px; text-align: center; background: var(--color-bg-secondary, #f9f9f9); border: 1px solid var(--border-color); border-left: 6px solid var(--color-primary); border-radius: var(--radius-lg); margin: 20px 0; } .loading-definition-citation { display: flex; flex-direction: column; align-items: center; gap: 10px; } .loading-definition-citation p { margin: 0; font-size: var(--font-size-sm, 13px); color: var(--text-secondary, #666); } /* Error state */ .definition-citation-error { padding: 16px 20px; background: #fef2f2; border: 1px solid #fecaca; border-left: 6px solid #dc3545; border-radius: var(--radius-lg); margin: 20px 0; color: var(--color-danger); font-weight: 500; } /* Dark mode */ :root[data-theme="dark"] .definition-citation-box { border-left-color: var(--color-text-secondary); background: var(--color-bg-secondary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } :root[data-theme="dark"] .definition-citation-actions { border-top-color: var(--color-border-strong); } :root[data-theme="dark"] .definition-citation-placeholder { background: var(--color-bg-secondary); border-left-color: var(--color-text-secondary); } :root[data-theme="dark"] .definition-citation-generality-dropdown { background: var(--color-bg-secondary); border-color: var(--color-border-primary); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } :root[data-theme="dark"] .definition-citation-generality-dropdown .knowledge-dropdown-header { border-bottom-color: var(--color-border-strong); color: var(--color-text-secondary); } :root[data-theme="dark"] .definition-citation-generality-dropdown .knowledge-dropdown-item:hover { background: rgba(255, 255, 255, 0.05); } :root[data-theme="dark"] .definition-citation-error { background: rgba(185, 28, 28, 0.1); border-color: rgba(185, 28, 28, 0.3); } b, strong { font-weight: 600; color: var(--color-text-primary); } /* Live Search Dropdown */ /*.search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-bg-primary, #fff); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); margin-top: 5px; z-index: 1000; max-height: 350px; overflow-y: auto; } */ .search-result-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid var(--light-gray); } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover, .search-result-item.active { background-color: var(--light-gray); } .result-title { font-weight: 600; margin-bottom: 3px; color: var(--primary-color); } .result-snippet { font-size: 0.85rem; color: var(--dark-gray); line-height: 1.4; max-height: 2.8em; /* ~2 lines */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .result-snippet code { background: rgba(0, 0, 0, 0.05); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; } .result-snippet strong { font-weight: 600; } .result-snippet em { font-style: italic; } /* Dark mode adjustments for search dropdown */ /* Show sidebar button */ .show-sidebar-btn { display: flex; width: 32px; height: 32px; border-radius: 50%; background-color: var(--color-primary); color: var(--color-text-inverse); border: none; cursor: pointer; align-items: center; justify-content: center; margin-right: 15px; transition: transform 0.3s ease, background-color 0.3s ease; } .show-sidebar-btn svg { width: 16px; height: 16px; stroke: currentColor; } .show-sidebar-btn:hover { background-color: var(--text-color); transform: scale(1.05); } .sidebar-hidden .show-sidebar-btn { display: flex; } /* ============================================================ NOTIFICATIONS — Bell button, dropdown, rows, filters, pills ------------------------------------------------------------ Visual layer is fully tokenized; everything adapts to data-theme (light|dark) × data-temperature (warm|cool). All tokens include a hardcoded light+warm fallback so this block still renders if design-tokens.css hasn't loaded yet. Scoped to the header bell dropdown — the /notifications full-page view uses .notifications-page-list and lives below. ============================================================ */ /* Bell button container */ .notifications-container { position: relative; display: flex; align-items: center; } /* Messages nav item shares badge positioning with notifications */ .messages-nav-item { position: relative; display: flex; align-items: center; } .messages-nav-item .nav-icon-link { position: relative; } .messages-badge { position: absolute; top: 0; right: 0; background-color: var(--color-text-primary, #1A1A1A); color: var(--color-text-inverse, #ffffff); font-size: 10px; font-weight: bold; min-width: 16px; height: 16px; border-radius: var(--radius-full, 9999px); display: flex; align-items: center; justify-content: center; padding: 0 4px; transform: translate(10%, -20%); } /* Unread count badge on the bell */ .notification-badge { position: absolute; top: 0; right: 0; background-color: var(--color-accent, #5C6F5B); color: var(--color-text-inverse, #ffffff); font-size: 10px; font-weight: bold; min-width: 16px; height: 16px; border-radius: var(--radius-full, 9999px); display: flex; align-items: center; justify-content: center; padding: 0 4px; transform: translate(10%, -20%); } .notification-badge.badge-urgent { background-color: var(--color-accent, #60828A); } /* Dropdown panel */ .notifications-dropdown { display: none; position: absolute; right: 0; top: 100%; width: 380px; background-color: var(--color-notification-card-bg, #ffffff); border: 1px solid var(--color-notification-card-border, #E0E0E0); border-radius: var(--radius-lg, 8px); z-index: 1000; box-shadow: var(--shadow-notification-toast, 0 4px 12px rgba(0, 0, 0, 0.08)); overflow: hidden; font-family: var(--font-sans, system-ui, sans-serif); } .notifications-dropdown.active { display: block; } /* Header row: title + mark-all-read */ .notifications-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm, 8px) var(--spacing-md, 16px); border-bottom: 1px solid var(--color-border-primary, #E0E0E0); } .notifications-header h3 { margin: 0; font-size: var(--font-size-lg, 16px); font-weight: 600; color: var(--color-text-primary, #1A1A1A); } .mark-all-read { background: none; border: none; color: var(--color-text-secondary, #6B6B6B); font-size: var(--font-size-sm, 13px); cursor: pointer; padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px); border-radius: var(--radius-sm, 4px); font-family: inherit; transition: background-color 0.15s ease, color 0.15s ease; } .mark-all-read:hover { background-color: var(--color-bg-hover, #EBEBEB); color: var(--color-text-primary, #1A1A1A); } /* Filter tabs row — pill-style segmented control */ .notification-filters { display: flex; gap: var(--spacing-xs, 4px); padding: var(--spacing-sm, 8px) var(--spacing-md, 16px); border-bottom: 1px solid var(--color-border-primary, #E0E0E0); } .notification-filter-tab { background: none; border: none; padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px); font-size: 0.75rem; color: var(--color-text-tertiary, #8A8A8A); cursor: pointer; border-radius: var(--radius-full, 9999px); font-weight: 500; font-family: inherit; transition: background-color 0.15s ease, color 0.15s ease; } .notification-filter-tab:hover { color: var(--color-text-secondary, #6B6B6B); background: var(--color-bg-hover, #EBEBEB); } .notification-filter-tab.active { background: var(--color-bg-tertiary, #EBEBEB); color: var(--color-text-primary, #1A1A1A); font-weight: 600; } /* Scrollable list + empty state */ .notifications-list { max-height: 400px; overflow-y: auto; padding: var(--spacing-sm, 8px) 0; } .notification-empty { padding: var(--spacing-lg, 24px) var(--spacing-md, 16px); color: var(--color-text-tertiary, #8A8A8A); text-align: center; font-size: var(--font-size-sm, 13px); } /* Time group header (Today / Yesterday / Older) */ .notification-time-group { padding: var(--spacing-sm, 8px) var(--spacing-md, 16px) var(--spacing-xs, 4px); font-size: 0.6875rem; font-weight: 600; color: var(--color-text-tertiary, #8A8A8A); text-transform: uppercase; letter-spacing: 0.05em; } /* Footer link */ .notifications-footer { padding: var(--spacing-sm, 8px); border-top: 1px solid var(--color-border-primary, #E0E0E0); text-align: center; } .view-all-link { color: var(--color-text-secondary, #6B6B6B); font-size: var(--font-size-sm, 13px); text-decoration: none; font-weight: 500; } .view-all-link:hover { color: var(--color-text-primary, #1A1A1A); text-decoration: underline; } /* ------------------------------------------------------------ Notification row — the central card pattern Structure: (36 x 36) (optional) (timestamp) ------------------------------------------------------------ */ .notification-item-link { display: block; text-decoration: none; color: inherit; cursor: pointer; padding: 0 var(--spacing-sm, 8px); } .notification-item-link + .notification-item-link { margin-top: var(--spacing-xs, 4px); } .notification-item-link:hover { text-decoration: none; color: inherit; } .notifications-list .notification-item { display: flex; flex-direction: row; gap: 14px; padding: 16px 18px; background: var(--color-notification-card-bg, #ffffff); border: 1px solid transparent; border-radius: var(--radius-md, 8px); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; position: relative; } .notifications-list .notification-item:hover { background-color: var(--color-notification-card-hover, #F5F5F5); } .notifications-list .notification-item.unread { border-left: 3px solid var(--color-notification-unread-bar, #5C6F5B); padding-left: 15px; /* 18px - 3px border */ } /* Avatar lane — 36 x 36 circle */ .notification-item__avatar, .notification-item__avatar-fallback { width: 36px; height: 36px; border-radius: var(--radius-full, 9999px); flex-shrink: 0; } .notification-item__avatar { object-fit: cover; } .notification-item__avatar-fallback { display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-inverse, #ffffff); /* Background is applied inline by JS from a muted palette (sage / tan / purple / neutral) rotated by actor id hash. */ } /* Content column */ .notification-item__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .notification-item__title { font-size: 14px; line-height: 1.45; color: var(--color-text-secondary, #6B6B6B); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .notification-item__actor { font-weight: 600; color: var(--color-text-primary, #1A1A1A); } .notification-item__action { color: var(--color-text-secondary, #6B6B6B); } .notification-item__preview { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary, #6B6B6B); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notification-item__meta { font-size: 12px; color: var(--color-notification-meta, #8A8A8A); } /* ------------------------------------------------------------ Status pills — optional inline review-status indicator ------------------------------------------------------------ */ .notification-pill { display: inline-block; padding: 2px 9px; border-radius: var(--radius-full, 9999px); font-size: 10.5px; font-weight: 500; white-space: nowrap; line-height: 1.4; } .notification-pill--success { background: var(--color-pill-success-bg, #5C6F5B); color: var(--color-pill-success-fg, #ffffff); } .notification-pill--warning { background: var(--color-pill-warning-bg, #926E18); color: var(--color-pill-warning-fg, #ffffff); } .notification-pill--danger { background: var(--color-pill-danger-bg, #8A6060); color: var(--color-pill-danger-fg, #ffffff); } .notification-pill--neutral { background: var(--color-pill-neutral-bg, #F5F5F5); color: var(--color-pill-neutral-fg, #6B6B6B); } /* Notifications in nav menu (alt placement) */ .nav-menu .notifications-container { position: relative; margin: 0 10px; display: flex; align-items: center; } .nav-menu .notifications-dropdown { top: 40px; z-index: 1001; } /* ------------------------------------------------------------ Full-page notifications view (/notifications) Unit 3 owns the detailed styling — these are the minimal layout rules preserved from the legacy styles. ------------------------------------------------------------ */ .notifications-page-list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; max-width: 800px; } .notifications-page-list .notification-item { padding: 15px; border: 1px solid var(--color-border-primary, #E0E0E0); border-radius: var(--radius-lg, 8px); background: var(--color-bg-primary, #ffffff); transition: background-color 0.2s ease; cursor: pointer; } .notifications-page-list .notification-item:hover { background-color: var(--color-bg-hover, #EBEBEB); } .notifications-page-list .notification-item.unread { background-color: var(--color-notification-unread-bg, #f6f8f6); border-left: 4px solid var(--color-accent, #5C6F5B); } .notifications-page-list .notification-content { margin-bottom: 8px; font-size: var(--font-size-lg, 16px); display: flex; justify-content: space-between; align-items: flex-start; color: var(--color-text-primary, #1A1A1A); } .notification-info { display: flex; justify-content: space-between; color: var(--color-text-secondary, #6B6B6B); font-size: var(--font-size-md, 14px); } .notification-actions { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-border-primary, #E0E0E0); } .notification-empty-state { padding: 40px; text-align: center; color: var(--color-text-secondary, #6B6B6B); background-color: var(--color-bg-secondary, #F5F5F5); border-radius: var(--radius-lg, 8px); margin-top: 20px; } /* User mention styling (used in post/comment bodies) */ .user-mention { background-color: color-mix(in srgb, var(--color-accent, #5C6F5B) 10%, transparent); color: var(--color-accent, #5C6F5B); border-radius: 3px; padding: 2px 4px; font-weight: 500; white-space: nowrap; transition: background-color 0.2s ease; } .user-mention:hover { background-color: color-mix(in srgb, var(--color-accent, #5C6F5B) 20%, transparent); cursor: pointer; } /* Profile Icon Link */ .profile-icon-link { align-items: center; justify-content: center; padding: 8px; border-radius: 50%; transition: background-color 0.2s ease; } .profile-icon-link:hover { background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05)); } .profile-icon-link svg { color: var(--color-text-primary, #1A1A1A); } /* Legacy class kept as a no-op so stray markup doesn't leak */ .notification-link { display: none; } /* User page sections */ .user-page-section { background-color: var(--color-bg-primary, #fff); padding: 20px; margin-bottom: 20px; border-radius: var(--radius-lg); } .user-page-section h2 { font-size: 1.8rem; margin-top: 0; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--light-gray); } .user-description { line-height: 1.6; color: var(--text-color); margin-bottom: 20px; } .publications-list { list-style: none; padding: 0; margin: 0; } .publication-item { padding: 15px; margin-bottom: 15px; border-left: 4px solid var(--primary-color); background-color: rgba(0, 0, 0, 0.02); } .publication-title { font-weight: 600; font-size: 1.2rem; margin-bottom: 5px; color: var(--text-color); } .publication-authors { font-style: italic; margin-bottom: 5px; color: var(--medium-gray); } .publication-venue { font-weight: 500; margin-bottom: 5px; color: var(--text-color); } .publication-categories { color: var(--medium-gray); font-style: italic; font-size: 0.9em; } .publication-summary { margin: 10px 0; font-size: 0.9rem; line-height: 1.4; color: var(--text-color); } .publication-links { margin-top: 10px; display: flex; gap: 15px; } .publication-link { display: inline-block; color: var(--primary-color); text-decoration: none; font-size: 0.9rem; } .publication-link:hover { text-decoration: underline; } .recent-activity { margin-top: 20px; } .activity-item { padding: 10px 0; border-bottom: 1px solid var(--light-gray); display: flex; justify-content: space-between; } .activity-item:last-child { border-bottom: none; } .activity-content { display: flex; flex-direction: column; } .activity-title { font-weight: 500; margin-bottom: 4px; } .activity-date { font-size: 0.9rem; color: var(--medium-gray); } /* Dark mode support for user page sections */ .research-group-members, .research-group-members .icon, .research-group-areas .icon { margin-right: 0.5rem; flex-shrink: 0; } .filter-section { margin: 1.5rem 0; } /* Create Research Group Form Styles */ .areas-container { margin-top: 0.5rem; } .areas-input-wrapper { position: relative; } .areas-suggestions { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--card-bg, #fff); border: 1px solid var(--border-color, #ddd); border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 10; max-height: 200px; overflow-y: auto; display: none; } .area-suggestion { padding: 0.5rem 1rem; cursor: pointer; } .area-suggestion:hover { background-color: var(--hover-bg, #f5f5f5); } .area-suggestion.custom { font-style: italic; color: var(--primary-color, #666); } .selected-areas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .area-tag { display: flex; align-items: center; background-color: var(--primary-light, #666); color: var(--color-text-inverse); border-radius: 16px; padding: 0.25rem 0.5rem 0.25rem 0.75rem; font-size: 0.875rem; } .area-remove { background: none; border: none; color: var(--color-text-inverse); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 0.25rem; padding: 2px; } .area-remove:hover { color: var(--danger-light, #fc8181); } /* Responsive styles */ /* Dark mode support */ /* Research Group Detail Styles */ .page-header-nav { margin-bottom: 1rem; } .back-link { display: inline-flex; align-items: center; color: var(--primary-color, #666); text-decoration: none; font-weight: 500; } .back-link svg { margin-right: 0.5rem; } .back-link:hover { color: var(--primary-dark, #333); text-decoration: underline; } .research-group-section { margin-top: 2rem; } .research-group-section h2 { font-size: 1.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-color, #ddd); } .research-areas-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .members-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color, #ddd); padding-bottom: 0.5rem; } .members-tab { background: none; border: none; padding: 0.5rem 1rem; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; color: var(--text-color, #333); } .members-tab:hover { background-color: var(--hover-bg, #f5f5f5); } .members-tab.active { background-color: var(--primary-color, #666); color: var(--color-text-inverse); } .members-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } .member-card { display: flex; padding: 1rem; background-color: var(--card-bg, #fff); border-radius: var(--radius-md); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .member-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .member-info { flex-grow: 1; } .member-name { color: var(--primary-color, #666); text-decoration: none; } .member-name:hover { text-decoration: underline; } .member-info h3 { margin: 0 0 0.25rem; font-size: 1.1rem; } .member-role { font-weight: 500; color: var(--text-color, #333); margin-bottom: 0.25rem; } .member-duration { font-size: 0.875rem; color: var(--text-muted, #666); } .research-group-actions { margin-top: 2rem; display: flex; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color, #ddd); } .empty-state.small { padding: 1.5rem; text-align: center; } /* Dark mode support */ /* Research Groups Styles */ .title-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .page-title.text-3xl { font-size: var(--font-size-4xl); /* 1.75rem / 28px — scales down on mobile */ font-weight: 700; margin: 0; } .create-group-btn { display: flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.375rem; transition: background-color 0.2s, transform 0.1s; margin-left: 0.5rem; } .create-group-btn:hover { transform: translateY(-1px); } .create-group-btn .icon { margin-right: 0.5rem; } .page-description { color: var(--text-muted, #666); margin-bottom: 2rem; max-width: 800px; } .text-muted { color: var(--text-muted, #666); } .search-and-filter-section { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; align-items: center; } .search-container { flex: 1; position: relative; min-width: 250px; } .search-container .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted, #666); pointer-events: none; } .search-input { width: 100%; padding: 0.75rem 2.5rem 0.75rem 2.5rem; border: 1px solid var(--border-color, #ddd); border-radius: 0.375rem; font-size: 1rem; background-color: var(--input-bg, #fff); color: var(--text-color, #333); } .search-input:focus { outline: none; border-color: var(--primary-color, #666); box-shadow: 0 0 0 2px rgba(74, 85, 104, 0.2); } .search-clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted, #666); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0.25rem; border-radius: 9999px; } .search-clear:hover { color: var(--danger-color, #e53e3e); background-color: rgba(0, 0, 0, 0.05); } .filter-controls { display: flex; gap: 0.5rem; align-items: center; } .filter-btn { display: flex; align-items: center; padding: 0.5rem 1rem; border: 1px solid var(--border-color, #ddd); border-radius: 0.375rem; background: var(--btn-outline-bg, #fff); color: var(--text-color, #333); cursor: pointer; transition: background-color 0.2s; height: 2.25rem; } .filter-btn:hover { background-color: var(--hover-bg, #f5f5f5); } .filter-btn .icon { margin-right: 0.5rem; } .sort-select { position: relative; } .select-wrapper { position: relative; display: flex; align-items: center; } .sort-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted, #666); pointer-events: none; } .sort-dropdown { padding: 0.5rem 1rem 0.5rem 2.5rem; border: 1px solid var(--border-color, #ddd); border-radius: 0.375rem; background-color: var(--input-bg, #fff); color: var(--text-color, #333); cursor: pointer; height: 2.25rem; font-size: 0.875rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .sort-dropdown:focus { outline: none; border-color: var(--primary-color, #666); box-shadow: 0 0 0 2px rgba(74, 85, 104, 0.2); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .category-tabs { margin-bottom: 2rem; } .tabs-list { display: flex; border-bottom: 1px solid var(--border-color, #ddd); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs-list::-webkit-scrollbar { display: none; } .tab-trigger { padding: 0.75rem 1rem; margin-right: 0.5rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted, #666); cursor: pointer; font-weight: 500; transition: all 0.2s; white-space: nowrap; } .tab-trigger:hover { color: var(--primary-color, #666); } .tab-trigger.active { color: var(--primary-color, #666); border-bottom-color: var(--primary-color, #666); } .research-groups-container { margin-top: 1.5rem; } .research-groups-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; } .research-group-card { display: flex; flex-direction: column; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); background-color: var(--card-bg, #fff); transition: transform 0.2s ease, box-shadow 0.2s ease; height: 100%; } .research-group-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .research-group-card-header { padding: 1.25rem; position: relative; border-bottom: 1px solid var(--border-color, #ddd); } .group-badge { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; } .group-badge.new { background-color: #84cc16; color: var(--color-text-inverse); } .group-badge.featured { background-color: var(--color-purple); color: var(--color-text-inverse); } .group-badge.popular { background-color: #f97316; color: var(--color-text-inverse); } .research-group-name { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 600; line-height: 1.4; } .research-group-name a { color: var(--heading-color, #1a1a1a); text-decoration: none; } .research-group-name a:hover { text-decoration: underline; } .research-group-members { display: flex; align-items: center; color: var(--text-muted, #666); font-size: 0.875rem; } .research-group-members .icon { margin-right: 0.5rem; flex-shrink: 0; } .research-group-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex-grow: 1; gap: 1rem; } .group-description { margin: 0; color: var(--text-color, #333); line-height: 1.5; } .group-discussions { display: flex; align-items: center; color: var(--text-muted, #666); font-size: 0.875rem; } .group-discussions .icon { margin-right: 0.5rem; flex-shrink: 0; } .group-avatars { margin-top: 0.5rem; } .avatar-list { display: flex; align-items: center; } .avatar { width: 2rem; height: 2rem; border-radius: 9999px; background-color: var(--primary-light, #999); color: var(--text-color-inverse, #fff); display: flex; align-items: center; justify-content: center; font-weight: 600; margin-right: -0.5rem; border: 2px solid var(--card-bg, #fff); } .avatar-more { width: 2rem; height: 2rem; border-radius: 9999px; background-color: var(--primary-color, #666); color: var(--color-text-inverse); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; margin-left: 0.25rem; border: 2px solid var(--card-bg, #fff); } .research-group-areas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; } .area-badge { background-color: var(--badge-bg, #ddd); color: var(--text-color, #333); border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; display: inline-flex; align-items: center; } .area-badge.more { background-color: transparent; border: 1px dashed var(--border-color, #ddd); color: var(--text-muted, #666); } .join-group-btn, .view-group-btn { margin-top: 0.5rem; padding: 0.5rem 1rem; text-align: center; background-color: var(--primary-color, #666); color: var(--color-text-inverse); text-decoration: none; border-radius: 0.375rem; transition: background-color 0.2s; font-weight: 500; display: inline-block; margin-top: auto; } .join-group-btn:hover, .view-group-btn:hover { background-color: var(--primary-dark, #333); text-decoration: none; } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; background-color: var(--card-bg, #fff); border-radius: 0.5rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); text-align: center; } .empty-state h3 { margin: 0 0 0.5rem; color: var(--heading-color, #1a1a1a); font-weight: 600; } .empty-state p { margin: 0; color: var(--text-muted, #666); max-width: 500px; } .site-footer { margin-top: 4rem; padding: 1.5rem 0; background-color: var(--color-bg-secondary, #f5f5f5); border-top: 1px solid var(--border-color, #ddd); } .footer-content { display: flex; justify-content: space-between; align-items: center; } .footer-brand { font-weight: 600; font-size: 1.125rem; color: var(--primary-color, #666); } .footer-copyright { color: var(--text-muted, #666); font-size: 0.875rem; } /* Responsive styles */ @media (max-width: 1024px) { .research-groups-grid { grid-template-columns: repeat(2, 1fr); } } /* Dark mode support */ /* Add these styles after the existing join-group-btn styles */ .join-group-btn.already-joined { background-color: var(--success-color, #38a169); cursor: default; opacity: 0.9; } .join-group-btn.already-joined:hover { background-color: var(--success-color, #38a169); } /* ##### Messaging System Styles ##### */ .messages-container { padding: 2rem; max-width: 900px; margin: 0; } .conversation-list { list-style: none; padding: 0; margin: 0; } .conversation-item { border: 1px solid var(--border-color, #ddd); border-radius: var(--radius-lg); margin-bottom: 1rem; transition: background-color 0.2s ease; } .conversation-item.unread { border-left: 4px solid var(--primary-color); background-color: rgba(0, 122, 255, 0.05); } .conversation-link { display: flex; padding: 1rem; text-decoration: none; color: inherit; justify-content: space-between; align-items: center; } .conversation-item:hover { background-color: var(--light-gray, #f5f5f5); } .conversation-info { display: flex; align-items: center; flex-grow: 1; margin-right: 1rem; } .conversation-username { font-weight: 600; margin-right: 0.5rem; } .unread-badge { background-color: var(--error-color, #F44336); color: var(--color-text-inverse); font-size: 0.75rem; font-weight: bold; padding: 2px 6px; border-radius: 10px; } .conversation-preview { flex-basis: 60%; color: var(--light-text, #666); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .last-message-indicator { font-weight: 500; } .last-message-text.italic { font-style: italic; } .conversation-timestamp { font-size: 0.8rem; color: var(--light-text, #666); white-space: nowrap; margin-left: 1rem; } .conversation-container { display: flex; flex-direction: column; height: calc(100vh - var(--header-height) - 2rem); /* Adjust based on footer height if necessary */ max-width: 800px; margin: 1rem auto; border: 1px solid var(--border-color, #ddd); border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-bg-primary, #fff); } .conversation-header { padding: 1rem; border-bottom: 1px solid var(--border-color, #ddd); display: flex; align-items: center; background-color: var(--light-gray, #f5f5f5); } .conversation-header h2 { margin: 0; font-size: 1.2rem; margin-left: 1rem; } .conversation-header h2 a { color: var(--primary-color); } .message-list { flex-grow: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .message-item { display: flex; max-width: 75%; } .message-item.sent { align-self: flex-end; } .message-item.received { align-self: flex-start; } .message-bubble { padding: 0.75rem 1rem; border-radius: 18px; word-wrap: break-word; } .message-item.sent .message-bubble { background-color: var(--primary-color, #007bff); color: var(--color-text-inverse); border-bottom-right-radius: 4px; } .message-item.received .message-bubble { background-color: var(--light-gray, #eee); color: var(--text-color, #1a1a1a); border-bottom-left-radius: 4px; } .message-content { line-height: 1.4; } .message-content p:last-child { margin-bottom: 0; } .message-timestamp { font-size: 0.7rem; margin-top: 0.25rem; text-align: right; opacity: 0.7; } .message-item.sent .message-timestamp { color: rgba(255, 255, 255, 0.7); } .message-item.received .message-timestamp { color: var(--light-text, #666); } .message-form-container { padding: 1rem; border-top: 1px solid var(--border-color, #ddd); background-color: var(--light-gray, #f5f5f5); } .message-form { display: flex; gap: 0.5rem; } .message-input { flex-grow: 1; padding: 0.75rem 1rem; border: 1px solid var(--border-color, #ddd); border-radius: 18px; resize: none; font-size: 1rem; font-family: inherit; min-height: 40px; max-height: 150px; } .message-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.1); } .send-button { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; } /* Dark mode messaging */ header ul { margin-bottom: 0; list-style-type: none; } /* Global rule to prevent any button-like elements from showing underlines */ a[class*="btn"]:hover, a.button:hover, .button:hover, button a:hover, a button:hover, .nav-links a:hover, .action-link:hover, .tab-trigger:hover, header a:hover { text-decoration: none !important; } /* Style for centering profile action buttons */ .profile-buttons-container { display: flex; justify-content: center; gap: 0.75rem; width: 100%; max-width: 280px; margin: 0 auto; } .profile-action-btn { display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; min-width: 100px; } /* Target specific profile action buttons */ .profile-page .btn-secondary, .profile-page .btn-primary, .profile-page .btn-outline, form[action*="follow"] .btn, form[action*="unfollow"] .btn, a[href*="/messages/"] { display: flex; justify-content: center; align-items: center; text-align: center; margin: 0 auto; } .btn-outline { background-color: transparent; color: var(--color-text-primary, #1D2433); border: 1px solid var(--color-border-primary, #d1d5db); padding: 8px 16px; border-radius: var(--radius-md, 6px); font-weight: 500; text-decoration: none; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; } .btn-outline:hover { background-color: var(--color-bg-secondary, #f5f5f7); text-decoration: none; } /* Page Tags Styling */ .page-tags { margin: 10px 0 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .tags-label { font-weight: 500; color: var(--light-text); margin-right: 8px; } .tags-list { display: flex; flex-wrap: wrap; gap: 8px; } .tag-badge { display: inline-block; padding: 4px 10px; background-color: #f0f5ff; color: #3b5bdb; border: 1px solid #d0dbff; border-radius: 20px; font-size: 0.85rem; text-decoration: none; transition: all 0.2s ease; } .tag-badge:hover { background-color: #dbe4ff; color: #364fc7; text-decoration: none; } /* Tag Search UI Styling */ .tag-search-container { position: relative; margin-bottom: 10px; } .tag-suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background-color: var(--color-bg-primary, #fff); border: 1px solid var(--border-color); border-radius: 0.375rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); max-height: 200px; overflow-y: auto; display: none; } .tag-suggestion { padding: 8px 12px; cursor: pointer; transition: background-color 0.2s; } .tag-suggestion:hover, .tag-suggestion.active { background-color: #f0f5ff; } .selected-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .selected-tag { display: inline-flex; align-items: center; background-color: #f0f5ff; color: #3b5bdb; border: 1px solid #d0dbff; border-radius: 20px; padding: 4px 10px; font-size: 0.85rem; margin-right: 4px; margin-bottom: 4px; } .remove-tag { margin-left: 6px; cursor: pointer; font-size: 1.1rem; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; transition: background-color 0.2s; } .remove-tag:hover { background-color: rgba(59, 91, 219, 0.1); } /* Generality Switcher Styles (legacy — kept for backward compat) */ .generality-switcher { position: fixed; right: 1.5rem; top: 88px; z-index: 100; background: var(--color-bg-primary, #fff); padding: 0.25rem; border-radius: var(--radius-sm); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; width: auto; } .generality-tab { cursor: pointer; color: var(--light-text); transition: all 0.2s ease; font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 3px; user-select: none; background: transparent; display: flex; align-items: center; text-decoration: none; white-space: nowrap; } .generality-tab:hover { background: var(--hover-bg); color: var(--text); text-decoration: none; } .generality-tab.active { background: var(--color-primary); color: var(--color-text-inverse); text-decoration: none; } /* Page Hierarchy Tree */ .page-tree { position: fixed; right: 1.5rem; top: 88px; z-index: 100; background: var(--color-bg-secondary, #f7f7f5); padding: 0.375rem; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 1px; width: auto; max-width: 220px; } .page-tree-node { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 7px; font-size: 0.8rem; color: var(--light-text, #666); text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; cursor: pointer; } .page-tree-node:hover { background: var(--hover-bg, rgba(0, 0, 0, 0.04)); color: var(--text, #333); text-decoration: none; } .page-tree-node.active { background: var(--color-primary, #1a1a1a); color: var(--color-text-inverse, #fff); font-weight: 500; text-decoration: none; } .page-tree-arrow { font-size: 9px; color: var(--light-text, #bbb); transition: transform 0.15s ease; display: inline-block; flex-shrink: 0; } .page-tree-arrow.expanded { transform: rotate(90deg); } .page-tree-node.active .page-tree-arrow { color: rgba(255, 255, 255, 0.5); } .page-tree-label { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 768px) { .page-tree { display: none; } } /* Section Slider Styles */ .section-slider { position: fixed; right: 1.5rem; top: calc(var(--header-height, 50px) + 8px); z-index: 100; background: var(--color-bg-primary, #fff); padding: 0.25rem; border-radius: var(--radius-sm); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); display: flex; align-items: center; width: auto; transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Slide the section switcher up when mobile header hides on scroll */ html.header-hidden .section-slider { top: 8px; } @media (max-width: 480px) { .section-slider { right: 0.75rem; } } .slider-labels { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.25rem; } .slider-label { cursor: pointer; color: var(--light-text); transition: all 0.2s ease; font-size: 0.7rem; padding: 0.25rem; border-radius: 3px; user-select: none; background: transparent; display: flex; align-items: center; justify-content: center; gap: 0.25rem; min-width: 24px; } .section-icon { width: 14px; height: 14px; transition: all 0.2s ease; flex-shrink: 0; } .label-text { display: none; opacity: 0; transform: translateX(-5px); transition: all 0.3s ease; } .slider-label:hover { background: var(--hover-bg); color: var(--text); } .slider-label:hover .section-icon { transform: scale(1.1); } .slider-label.active { background: var(--color-primary); color: var(--color-text-inverse); padding: 0.25rem 0.5rem; } .slider-label.active .section-icon { transform: scale(1.1); } .slider-label.active .label-text { display: inline; opacity: 1; transform: translateX(0); } /* view-tags-btn defined in page meta actions section below */ .page-tags-display { position: relative; display: none; align-items: center; gap: 0.5rem; white-space: nowrap; background: var(--color-bg-primary, #fff); padding: 0.25rem; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); z-index: 1; } .no-tags { color: var(--light-text); font-size: 0.75rem; font-style: italic; } @keyframes fadeIn { from { opacity: 0; transform: translate(0, -2px); } to { opacity: 1; transform: translate(0, 0); } } /* MathJax Display Math Centering */ mjx-container[display="true"] { display: block !important; text-align: center; margin: 1em 0; overflow-x: auto; overflow-y: hidden; } mjx-container[display="true"] svg { max-width: 100%; } /* Ensure display math in definition/theorem blocks is centered */ .definition-box mjx-container[display="true"], .theorem-content mjx-container[display="true"], .remark-content mjx-container[display="true"], .example-content mjx-container[display="true"], .solution-body mjx-container[display="true"], .proof-body mjx-container[display="true"], .problem-content mjx-container[display="true"], .motivation-content mjx-container[display="true"], .claim-content mjx-container[display="true"] { display: block !important; text-align: center; margin: 1em 0; } /* Clickable math areas */ .MathJax { transition: filter 0.2s ease-in-out; border-radius: var(--radius-sm); padding: 0 4px; } .MathJax:hover { background-color: rgba(0, 0, 0, 0.05); } [data-theme="dark"] .MathJax:hover, :root[data-theme="dark"] .MathJax:hover { background-color: rgba(255, 255, 255, 0.1); } /* Tooltip for clickable math */ .MathJax[data-original]::after { content: 'Click to search'; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 4px 8px; background-color: rgba(0, 0, 0, 0.8); color: var(--color-text-inverse); border-radius: var(--radius-sm); font-size: var(--font-size-sm); opacity: 0; transition: opacity 0.2s ease-in-out; pointer-events: none; white-space: nowrap; } .MathJax[data-original]:hover::after { opacity: 1; } [data-theme="dark"] .MathJax[data-original]::after, :root[data-theme="dark"] .MathJax[data-original]::after { background-color: rgba(255, 255, 255, 0.9); color: black; } /* Progressive Math Loading States */ body.math-loading { /* Page is usable immediately, just math is rendering */ } /* Style unrendered math nicely while loading */ body.math-loading mjx-container, body:not(.math-ready) mjx-container { opacity: 1; } /* Smooth fade-in for rendered math */ mjx-container { transition: opacity 0.15s ease-in; } /* Raw math source styling before MathJax processes it */ body:not(.math-ready) .wiki-content > p, body:not(.math-ready) .theorem-content, body:not(.math-ready) .proof-content { /* Ensure text is readable even with raw LaTeX */ word-break: break-word; } /* Loading indicator for math-heavy pages */ body.math-loading::after { content: ''; position: fixed; bottom: 20px; right: 20px; width: 24px; height: 24px; border: 2px solid var(--color-border-secondary); border-top-color: #3498db; border-radius: 50%; animation: mathSpinner 0.8s linear infinite; z-index: 9999; opacity: 0.7; } @keyframes mathSpinner { to { transform: rotate(360deg); } } /* Hide spinner when math is ready */ body.math-ready::after { display: none; } /* Section lazy-load bottom notification bar */ .section-render-notice { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px; background: #f0f5ff; border-top: 1px solid #d0dff5; color: #3b6cb5; font-size: 13px; font-weight: 500; transform: translateY(100%); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; pointer-events: none; } .section-render-notice.visible { transform: translateY(0); opacity: 1; } .section-render-notice .notice-spinner { width: 14px; height: 14px; border: 2px solid #c4d5ef; border-top-color: #3b82f6; border-radius: 50%; animation: mathSpinner 0.7s linear infinite; flex-shrink: 0; } .close-tags-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0.15rem; cursor: pointer; color: var(--light-text); border-radius: 3px; transition: all 0.2s ease; } .close-tags-btn:hover { background: var(--hover-bg); color: var(--text); } .page-tag { display: inline-block; padding: 0.15rem 0.4rem; background: var(--hover-bg); color: var(--text); font-size: 0.75rem; border-radius: 3px; text-decoration: none; transition: all 0.2s ease; } .page-tag:hover { background: var(--dark-hover-bg); color: var(--text); text-decoration: none; } /* Section content transitions */ .section-content { display: none; opacity: 0; transition: opacity 0.2s ease-in-out; } .section-content.active { display: block; opacity: 1; } /* Empty state section styles */ .empty-state-section { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 800px; margin: 0 auto; } .empty-state-icon { margin-bottom: 0 !important; color: var(--text-muted); } .empty-state-section h2 { font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem; color: var(--text); } .empty-state-section p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; max-width: 600px; } .submit-box { background: var(--bg-alt); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 2rem; width: 100%; max-width: 600px; border: 1px dashed; border-color: rgb(229, 231, 235); } .submit-box h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text); } .submit-box p { font-size: 1rem; margin-bottom: 1.25rem; } .github-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--primary-color); color: var(--color-text-inverse); text-decoration: none; border-radius: var(--radius-md); font-weight: 500; transition: background-color 0.2s ease; } .github-link:hover { background: var(--primary-hover); color: var(--color-text-inverse); text-decoration: none; } .github-link svg { color: var(--color-text-inverse); } .guidelines-box { background: var(--bg-alt); border-radius: var(--radius-lg); padding: 1.5rem; width: 100%; max-width: 600px; } .guidelines-box h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--text); } .guidelines-box ul { list-style-type: none; padding: 0; margin: 0; text-align: left; } .guidelines-box li { display: flex; align-items: center; padding: 0.5rem 0; color: var(--text-muted); font-size: 1rem; } .guidelines-box li::before { content: "•"; color: var(--primary-color); font-weight: bold; margin-right: 0.75rem; } /* Dark mode styles */ .page-meta-actions { display: flex; align-items: center; flex-wrap: wrap; flex-shrink: 0; gap: 0.15rem; } .view-tags-btn { display: inline-flex; align-items: center; background: var(--color-bg-primary, #fff); color: var(--text, #1f2328); font-size: 0.8rem; padding: 0.3rem 0.6rem; cursor: pointer; transition: all 0.2s ease; border-radius: var(--radius-md); white-space: nowrap; text-decoration: none; gap: 0.3rem; font-weight: 500; border-style: none; } .view-tags-btn:hover { color: var(--text); background: var(--hover-bg, #f6f8fa); border-color: var(--text, #1f2328); text-decoration: none; } .view-tags-btn .counter { font-weight: 600; color: var(--text-color); background: var(--hover-bg, #f0f0f0); padding: 0.05rem 0.35rem; border-radius: 10px; font-size: 0.75rem; } @media (max-width: 768px) { .page-meta-actions .view-tags-btn .btn-label { display: none; } .page-meta-actions .view-tags-btn { padding: 0.3rem 0.4rem; } .page-meta-actions .view-tags-btn .counter { font-size: 0.7rem; } } .follow-form { display: inline-block; position: relative; } .follow-btn { background: none; border: none; padding: 0.25rem; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: all 0.2s ease; } .follow-btn:hover { background-color: var(--hover-bg); } .follow-btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .follow-btn:hover svg { transform: scale(1.1); } .follow-btn.following { color: var(--text-color); } .follow-tooltip { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: var(--color-text-inverse); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s ease; pointer-events: none; z-index: 100; } .follow-btn:hover .follow-tooltip { opacity: 1; visibility: visible; bottom: -25px; } .verification-status { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem; border-radius: var(--radius-sm); transition: background-color 0.2s ease; } .verification-status:hover { background-color: var(--hover-bg); } .verification-status.verified { color: var(--success); } .verification-status.unverified { color: var(--warning); } /* Full-width layout (no sidebar) */ .wiki-layout.full-width { display: block; padding: 0; } .content-wrapper.full-width { margin-left: 0; width: 100%; max-width: 1200px; margin: 0 auto; padding: 2rem; } /* Pull request pages full width */ body[data-page*="pull-requests"] main, body[data-page*="new-pull-request"] main { width: 100%; max-width: 100%; } body[data-page*="pull-requests"] .content-wrapper, body[data-page*="new-pull-request"] .content-wrapper { width: 100%; max-width: 100%; margin-left: 0; padding: 0; } body[data-page*="pull-requests"] .wiki-layout, body[data-page*="new-pull-request"] .wiki-layout { display: block; padding: 0; } /* Pull request detail pages specific styling */ .pull-request-detail-container { width: 100%; max-width: 100%; padding: 0 2rem; } /* Remove footer from pull request pages */ body[data-page*="pull-requests"] footer, body[data-page*="new-pull-request"] footer { display: none; } .testbox:hover { background: hsl(0, 0%, 100%); padding: 16px 24px; position: relative; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px rgba(0,0,0,.01); &::after { position: absolute; content: ""; top: 0px; left: 0; right: 0; z-index: -1; height: 100%; width: 100%; transform: scale(1) translateZ(0); filter: blur(15px); background: linear-gradient( to left, #ff5770, #e4428d, #c42da8, #9e16c3, #6501de, #9e16c3, #c42da8, #e4428d, #ff5770 ); background-size: 200% 200%; animation: animateGlow 1.25s linear infinite; } } @keyframes animateGlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* Add at the end of the file - Chat Menu Layout Adjustments */ /* Override for specific layouts that shouldn't have the chat menu margin */ body.no-chat-menu { margin-left: 0; } /* Mobile responsiveness - hide chat menu on small screens */ @media (max-width: 480px) { body { margin-left: 0; /* Ensure no chat menu margin on small mobile */ } } /* Solution Environment Styles (Collapsible like proofs) */ .solution-environment { background: var(--light-gray); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin: 20px 0; } .solution-header { background: var(--color-bg-tertiary); padding: 12px 16px; cursor: pointer; user-select: none; border-radius: 8px 8px 0 0; } .solution-header:hover { background: var(--color-bg-active); } .solution-title { font-weight: bold; color: var(--color-text-secondary); font-size: var(--font-size-lg); } .solution-content { overflow: hidden; transition: max-height 0.3s ease-in-out, opacity 0.2s ease; } .solution-content.collapsed { max-height: 0; opacity: 0; } .solution-content.expanded { max-height: none; opacity: 1; } .solution-body { padding: 16px; color: var(--color-text-secondary); line-height: 1.6; } /* Problem Environment Styles (Non-collapsible like theorems) */ .problem-box { padding: 20px; margin: 10px 0; border: 1px solid var(--border-color); border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .problem-title { font-size: 15px; font-weight: bold; color: var(--color-warning); } .problem-content { line-height: 1.6; } /* Problem Difficulty Rating Styles */ .problem-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .problem-difficulty-wrapper { position: relative; display: inline-flex; } .problem-difficulty { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg-secondary, #f8f9fa); border-radius: 20px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .problem-difficulty:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .difficulty-stars { display: inline-flex; align-items: center; gap: 2px; } .difficulty-star { flex-shrink: 0; } .difficulty-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Difficulty Tooltip */ .difficulty-tooltip { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: 10px; padding: 14px 18px; min-width: 260px; max-width: 320px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); z-index: 1000; font-size: 13px; font-weight: 400; color: var(--color-text-primary); line-height: 1.5; } /* Tooltip arrow */ .difficulty-tooltip::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--color-bg-primary); border-left: 1px solid var(--color-border-primary); border-top: 1px solid var(--color-border-primary); } /* Invisible bridge to keep tooltip open when moving mouse */ .difficulty-tooltip::after { content: ''; position: absolute; top: -12px; left: 0; width: 100%; height: 12px; } .problem-difficulty-wrapper:hover .difficulty-tooltip { display: block; } .difficulty-tooltip-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 600; } .difficulty-tooltip-level { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; } .difficulty-tooltip-label { font-size: 14px; } .difficulty-tooltip-description { margin: 0; font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; } /* Dark mode support for problem difficulty */ :root[data-theme="dark"] .problem-difficulty { background: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .problem-difficulty:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } :root[data-theme="dark"] .difficulty-tooltip { background: var(--color-bg-tertiary); border-color: var(--color-border-strong); color: var(--color-text-primary); } :root[data-theme="dark"] .difficulty-tooltip::before { background: var(--color-bg-tertiary); border-color: var(--color-border-strong); } :root[data-theme="dark"] .difficulty-tooltip-description { color: var(--color-text-secondary); } /* Responsive adjustments */ @media (max-width: 768px) { .solution-environment, .problem-box { margin: 15px 0; border-radius: var(--radius-md); } .solution-header, .solution-body { padding: 12px; } .problem-box { padding: 15px; } .solution-title, .problem-title { font-size: var(--font-size-md); } } /* Ensure math rendering works properly in solution and problem environments */ .solution-body .MathJax, .problem-content .MathJax { display: inline-block; } .solution-body .MathJax_Display, .problem-content .MathJax_Display { margin: 1em 0; } .claim-box { margin: 1.5rem 0; padding: 0; border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); background-color: transparent; overflow: hidden; } .claim-box .claim-header { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-md); font-weight: 600; line-height: 18px; color: var(--color-text-primary); padding: 12px 16px; margin-bottom: 0; border-bottom: 1px solid var(--color-border-primary); background-color: var(--color-bg-secondary); } .claim-box .claim-title { font-size: var(--font-size-md); } .claim-box .claim-content { color: var(--color-text-primary); padding: 16px 20px; font-size: 15px; line-height: 1.65; } .claim-box .claim-body { margin: 0; } /* =================== COMPREHENSIVE DARK MODE SUPPORT Site-wide dark mode fixes for elements with hardcoded colors =================== */ /* Main content areas */ :root[data-theme="dark"] main { background-color: var(--color-bg-primary); } :root[data-theme="dark"] .sidebar { background: var(--color-bg-secondary); border-color: var(--color-border-strong); } :root[data-theme="dark"] .content-wrapper { background-color: transparent; } /* Navigation links */ :root[data-theme="dark"] nav a, :root[data-theme="dark"] .nav-link { color: var(--color-text-medium); } :root[data-theme="dark"] nav a:hover, :root[data-theme="dark"] .nav-link:hover { color: var(--color-text-primary); } /* Page title in header */ :root[data-theme="dark"] .page-title-header { color: var(--color-text-primary); } /* Logo and header links */ :root[data-theme="dark"] header h1 a { color: var(--color-text-primary); } :root[data-theme="dark"] .logo svg { stroke: var(--color-text-primary); } /* Logo image for dark mode - use dark variant */ :root[data-theme="dark"] .logo img, :root[data-theme="dark"] .logo-link img { content: url('/images/favicon-dark.svg'); } :root[data-theme="dark"] .landing-logo-svg { filter: invert(1); } /* Navigation icons in dark mode - use filter for img tags */ /* Exclude profile avatar (profile-dropdown-avatar) and user-avatar from inversion */ :root[data-theme="dark"] header img:not(.logo img):not(.logo-link img):not([alt="admin"]):not(.profile-dropdown-avatar img):not(.user-avatar img):not(.nav-profile-avatar) { filter: brightness(0) invert(1); } /* Explicitly keep profile/user avatar images un-inverted in dark mode */ :root[data-theme="dark"] .profile-dropdown-avatar img, :root[data-theme="dark"] header .user-avatar img, :root[data-theme="dark"] .nav-profile-avatar { filter: none !important; } :root[data-theme="dark"] .nav-icon-link img:not(.nav-profile-avatar), :root[data-theme="dark"] .notifications-button img, :root[data-theme="dark"] .mobile-menu-btn img, :root[data-theme="dark"] header button img:not(.nav-profile-avatar) { filter: brightness(0) invert(1); } /* SVG fallback for inline SVGs (nav icons use currentColor, no override needed) */ :root[data-theme="dark"] .profile-dropdown-trigger svg, :root[data-theme="dark"] .mobile-menu-btn svg, :root[data-theme="dark"] header svg:not(.nav-icon-link svg):not(.notifications-button svg) { stroke: var(--color-text-primary) !important; } /* Page content icons in dark mode */ :root[data-theme="dark"] .page-meta-actions .view-tags-btn, :root[data-theme="dark"] .page-meta-actions a { color: var(--color-text-secondary); background: transparent; } :root[data-theme="dark"] .page-meta-actions .view-tags-btn svg, :root[data-theme="dark"] .page-meta-actions a svg { stroke: var(--color-text-secondary); } :root[data-theme="dark"] .page-meta-actions .view-tags-btn:hover, :root[data-theme="dark"] .page-meta-actions a:hover { color: var(--color-text-primary); background: var(--color-bg-hover); } :root[data-theme="dark"] .page-meta-actions .view-tags-btn:hover svg, :root[data-theme="dark"] .page-meta-actions a:hover svg { stroke: var(--color-text-primary); } :root[data-theme="dark"] .page-meta-actions .view-tags-btn .counter { background: var(--color-bg-tertiary, #333); color: var(--color-text-secondary); } :root[data-theme="dark"] .toc-toggle-btn, :root[data-theme="dark"] .follow-btn, :root[data-theme="dark"] .slider-label, :root[data-theme="dark"] .section-icon, :root[data-theme="dark"] .brain-icon { color: var(--color-text-secondary); } :root[data-theme="dark"] .toc-toggle-btn svg, :root[data-theme="dark"] .follow-btn svg, :root[data-theme="dark"] .slider-label svg, :root[data-theme="dark"] .section-icon { stroke: var(--color-text-secondary); } :root[data-theme="dark"] .toc-toggle-btn:hover, :root[data-theme="dark"] .follow-btn:hover, :root[data-theme="dark"] .slider-label:hover { color: var(--color-text-primary); } :root[data-theme="dark"] .toc-toggle-btn:hover svg, :root[data-theme="dark"] .follow-btn:hover svg, :root[data-theme="dark"] .slider-label:hover svg { stroke: var(--color-text-primary); } :root[data-theme="dark"] .slider-label:hover { background: var(--color-bg-hover, rgba(255,255,255,0.08)); } :root[data-theme="dark"] .slider-label.active { background: rgba(255,255,255,0.9); color: #111; } :root[data-theme="dark"] .slider-label.active svg { stroke: #111; } /* Page title icons - use filter for img tags with dark icons */ :root[data-theme="dark"] .toc-toggle-btn img, :root[data-theme="dark"] .follow-btn img, :root[data-theme="dark"] .page-meta-actions img { filter: brightness(0) invert(0.8); } :root[data-theme="dark"] .toc-toggle-btn:hover img, :root[data-theme="dark"] .follow-btn:hover img, :root[data-theme="dark"] .page-meta-actions:hover img { filter: brightness(0) invert(1); } /* Form elements */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-border-strong); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--color-text-tertiary); } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus { border-color: var(--color-text-secondary); outline-color: var(--color-text-secondary); } /* Buttons */ :root[data-theme="dark"] .btn-secondary { background-color: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-border-strong); } :root[data-theme="dark"] .btn-secondary:hover { background-color: var(--color-bg-active); } /* Cards and boxes */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .box, :root[data-theme="dark"] .panel { background-color: var(--color-bg-secondary); border-color: var(--color-border-strong); } /* Tables */ :root[data-theme="dark"] table { border-color: var(--color-border-strong); } :root[data-theme="dark"] th { background-color: var(--color-bg-hover); border-color: var(--color-border-strong); } :root[data-theme="dark"] td { border-color: var(--color-border-strong); } :root[data-theme="dark"] tr:nth-child(even) { background-color: var(--color-bg-secondary); } :root[data-theme="dark"] tr:hover { background-color: var(--color-bg-hover); } /* Code blocks and syntax highlighting */ :root[data-theme="dark"] pre, :root[data-theme="dark"] code { background-color: var(--color-bg-hover); color: var(--color-text-primary); } :root[data-theme="dark"] .hljs { background-color: var(--color-bg-hover) !important; color: var(--color-text-primary) !important; } /* Claim boxes and special containers */ :root[data-theme="dark"] .claim-box { border-color: var(--color-border-primary); } :root[data-theme="dark"] .claim-box .claim-header { color: var(--color-text-primary); border-color: var(--color-border-primary); background-color: rgba(255, 255, 255, 0.05); } /* Modal and dropdown overlays */ :root[data-theme="dark"] .modal-backdrop { background-color: rgba(0, 0, 0, 0.7); } :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .modal-dialog { background-color: var(--color-bg-secondary); border-color: var(--color-border-strong); color: var(--color-text-primary); } /* Tooltips */ :root[data-theme="dark"] .tooltip { background-color: var(--color-bg-active); color: var(--color-text-primary); } /* Borders and dividers */ :root[data-theme="dark"] hr { border-color: var(--color-border-strong); } :root[data-theme="dark"] .divider { background-color: var(--color-border-strong); } /* Text selection in dark mode */ :root[data-theme="dark"] ::selection { background-color: var(--color-bg-active); color: var(--color-text-primary); } :root[data-theme="dark"] ::-moz-selection { background-color: var(--color-bg-active); color: var(--color-text-primary); } /* (Removed: :root[data-theme="dark"] a { color: var(--color-text-link); } and its :hover sibling. They had selector specificity (0,1,2) which was beating component rules like a.internal-wiki-link (0,1,1) and stomping their colors in dark mode. The base `a { color: var(--primary-color); }` at line 186 already adapts to dark mode via the token, so the override was redundant as well as harmful.) */ /* Preserve button and nav link colors */ :root[data-theme="dark"] .btn-primary { background-color: var(--color-text-primary); color: var(--color-bg-primary); } :root[data-theme="dark"] .btn-primary:hover { background-color: var(--color-text-medium); } /* Chat dock dark mode */ :root[data-theme="dark"] .chat-dock { background-color: transparent; } :root[data-theme="dark"] .chat-dock-rail { background-color: var(--color-bg-primary); border-color: transparent; } :root[data-theme="dark"] .chat-dock-item { background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); } :root[data-theme="dark"] .chat-dock-item:hover { background-color: var(--color-bg-hover); } :root[data-theme="dark"] .chat-float-window { background-color: var(--color-bg-secondary); border-color: var(--color-border-strong); } :root[data-theme="dark"] .chat-float-header { background-color: var(--color-bg-hover); border-color: var(--color-border-strong); } :root[data-theme="dark"] .chat-channel-panel { background-color: var(--color-bg-secondary); border-color: var(--color-border-strong); } /* Messages area dark mode */ :root[data-theme="dark"] .cfm-messages { background-color: var(--color-bg-primary); } :root[data-theme="dark"] .cfm-message { background-color: transparent; } :root[data-theme="dark"] .cfm-message:hover { background-color: rgba(255, 255, 255, 0.05); } :root[data-theme="dark"] .cfm-composer { background-color: var(--color-bg-secondary); border-color: var(--color-border-strong); } :root[data-theme="dark"] .cfm-input { background-color: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-border-strong); } /* Thread panel dark mode */ :root[data-theme="dark"] .chat-float-thread { background-color: var(--color-bg-secondary); border-color: var(--color-border-strong); } /* Mention toast dark mode */ :root[data-theme="dark"] .chat-mention-toast { background-color: var(--color-bg-secondary); border-color: var(--color-border-strong); } /* Scrollbars in dark mode */ :root[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg-secondary); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-bg-active); border-radius: var(--radius-sm); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); } /* ═══════════════════════════════════════════════════════════════ Illustration Block Tags [illustration:slug] ═══════════════════════════════════════════════════════════════ */ .illustration-block { width: 100%; margin: 20px 0; display: flex; justify-content: center; background: var(--color-bg-secondary, #f8f9fa); border-radius: var(--radius-lg, 8px); overflow: hidden; } .illustration-block > svg { width: 100%; max-width: 560px; height: 140px; display: block; } .illustration-placeholder { width: 100%; height: 140px; margin: 20px 0; display: flex; justify-content: center; align-items: center; background: var(--color-bg-secondary, #f8f9fa); border-radius: var(--radius-lg, 8px); } .illustration-loading { width: 24px; height: 24px; border: 2px solid var(--border-color, #c0bdb8); border-top-color: var(--color-accent, #5c6b5a); border-radius: 50%; animation: illustration-spin 0.8s linear infinite; } @keyframes illustration-spin { to { transform: rotate(360deg); } } .illustration-error { padding: 12px; color: var(--color-text-secondary); font-size: var(--font-size-sm, 13px); font-style: italic; } @media print { .illustration-block { page-break-inside: avoid; } } /* === theorems-redesign.css === */ /* Theorems Card Design — aligned with design-tokens.css */ .theorems-grid { padding: 20px 0; } .theorems-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 20px; max-width: 1400px; margin: 0 auto; } .theorem-card { background: var(--color-bg-primary, #fff); border-radius: 16px; border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.08)); padding: 24px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; min-width: 0; text-decoration: none; color: inherit; display: block; } .theorem-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); border-color: var(--color-text-primary, #1A1A1A); } .theorem-card:active { transform: translateY(-2px); transition: transform 0.1s; } /* Card Header */ .theorem-card-header { margin-bottom: 16px; } .theorem-card-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } .theorem-name { font-size: 18px; font-weight: 600; color: var(--color-text-primary, #1A1A1A); margin: 0; line-height: 1.3; flex: 1; margin-right: 12px; min-width: 0; overflow-wrap: break-word; } .theorem-id { background: var(--color-bg-secondary, #f5f5f3); color: var(--color-text-tertiary, #8A8A8A); font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; } /* Tags */ .theorem-card-tags { margin-bottom: 16px; } .theorem-card-tags .tag-container { display: flex; flex-wrap: wrap; gap: 6px; } .theorem-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; text-decoration: none; transition: all 0.2s ease; } .theorem-tag.area-tag { background: var(--color-bg-secondary, #f5f5f3); color: var(--color-text-secondary, #6B6B6B); border: 1px solid var(--color-border-primary, #E0E0E0); } .theorem-tag.subarea-tag { background: rgba(90, 122, 106, 0.08); color: var(--accent-color, #5A7A6A); border: 1px solid rgba(90, 122, 106, 0.15); } .theorem-tag.custom-tag { background: var(--color-bg-secondary, #f5f5f3); color: var(--color-text-tertiary, #8A8A8A); border: 1px solid var(--color-border-secondary, #E0E0E0); } .theorem-tag:hover { transform: scale(1.05); } /* Card Content */ .theorem-card-content { margin-bottom: 20px; min-width: 0; } .theorem-statement, .theorem-description { margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; min-width: 0; } .theorem-statement:last-child, .theorem-description:last-child { margin-bottom: 0; } .statement-label, .description-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-tertiary, #8A8A8A); margin-bottom: 6px; } .statement-text, .description-text { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary, #6B6B6B); margin: 0; word-break: break-word; overflow-wrap: break-word; } /* MathJax overflow containment */ .theorem-statement mjx-container, .theorem-description mjx-container { max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; } .theorem-statement mjx-container[jax="CHTML"][display="true"], .theorem-description mjx-container[jax="CHTML"][display="true"] { overflow-x: auto !important; overflow-y: hidden !important; max-width: 100% !important; } /* Card preview renderer for list view */ .theorem-statement .card-preview-renderer, .theorem-description .card-preview-renderer { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary, #6B6B6B); position: relative; word-break: break-word; overflow-wrap: break-word; min-width: 0; } /* Math in card previews: match the card's font-size so inline math aligns with surrounding text. */ .card-preview-renderer mjx-container { font-size: inherit !important; } .card-preview-renderer mjx-container[display="true"] { color: inherit; margin: 0.35em 0 !important; } /* Scale down display math SVGs in card previews so they don't dominate the compact card layout */ .card-preview-renderer mjx-container[display="true"] svg { max-height: 4.5em; width: auto !important; max-width: 100%; } .theorem-statement .card-preview-renderer .rendered-markdown-content p, .theorem-description .card-preview-renderer .rendered-markdown-content p { margin: 0 0 0.4rem 0; font-size: inherit; color: inherit; line-height: inherit; } .theorem-statement .card-preview-renderer .rendered-markdown-content h1, .theorem-statement .card-preview-renderer .rendered-markdown-content h2, .theorem-statement .card-preview-renderer .rendered-markdown-content h3, .theorem-description .card-preview-renderer .rendered-markdown-content h1, .theorem-description .card-preview-renderer .rendered-markdown-content h2, .theorem-description .card-preview-renderer .rendered-markdown-content h3 { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.25rem 0; } .theorem-statement .card-preview-renderer .rendered-markdown-content ul, .theorem-statement .card-preview-renderer .rendered-markdown-content ol, .theorem-description .card-preview-renderer .rendered-markdown-content ul, .theorem-description .card-preview-renderer .rendered-markdown-content ol { margin: 0 0 0.4rem 1.25rem; padding: 0; } /* Card Footer */ .theorem-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--color-border-secondary, #E0E0E0); margin-top: auto; } .theorem-meta { display: flex; gap: 8px; flex-wrap: wrap; } .theorem-area, .theorem-subarea { font-size: 12px; color: var(--color-text-tertiary, #8A8A8A); background: var(--color-bg-secondary, #f5f5f3); padding: 2px 6px; border-radius: 4px; } .theorem-actions { color: var(--color-text-tertiary, #8A8A8A); transition: color 0.2s ease; } .theorem-card:hover .theorem-actions { color: var(--color-text-primary, #1A1A1A); } .chevron-right { width: 14px; height: 14px; } /* Empty State */ .empty-state { text-align: center; padding: 80px 20px; max-width: 400px; margin: 0 auto; } .empty-state-icon { margin-bottom: 24px; color: var(--color-border-primary, #E0E0E0); } .empty-state-illustration { margin-bottom: 8px; } .empty-state h3 { font-size: 20px; font-weight: 600; color: var(--color-text-primary, #1A1A1A); margin: 0 0 8px 0; } .empty-state p { font-size: 16px; color: var(--color-text-tertiary, #8A8A8A); margin: 0 0 32px 0; line-height: 1.4; } /* Search Form */ .theorem-search-container { margin-bottom: 32px; } .search-form-redesign { background: var(--color-bg-primary, #fff); border-radius: 16px; border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.08)); padding: 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); max-width: 800px; margin: 0 auto; } .search-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; } .search-field-group { display: flex; flex-direction: column; gap: 12px; } .search-input-redesign { width: 100%; padding: 12px 16px; border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.1)); border-radius: 10px; font-size: 14px; background: var(--color-bg-secondary, #f5f5f3); transition: all 0.2s ease; outline: none; box-sizing: border-box; } .search-input-redesign:focus { border-color: var(--color-text-primary, #1A1A1A); background: var(--color-bg-primary, #fff); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); } .search-input-redesign::placeholder { color: var(--color-text-tertiary, #8A8A8A); } .search-actions { display: flex; justify-content: center; gap: 12px; } .btn-search { background: var(--color-text-primary, #1A1A1A); color: var(--color-text-inverse, #FFFFFF); border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; } .btn-search:hover { opacity: 0.9; transform: translateY(-1px); } .btn-search:active { transform: translateY(0); } .btn-clear { background: transparent; color: var(--color-text-tertiary, #8A8A8A); border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.1)); padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; } .btn-clear:hover { background: var(--color-bg-secondary, #f5f5f3); border-color: var(--color-border-primary, rgba(0, 0, 0, 0.2)); color: var(--color-text-secondary, #6B6B6B); } /* Pagination Controls */ .pagination-container { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; padding: 24px 0; } .load-more-btn { background: var(--color-bg-primary, #fff); border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.1)); color: var(--color-text-primary, #1A1A1A); padding: 12px 24px; border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; min-width: 160px; justify-content: center; margin: 0 auto; } .load-more-btn:hover { background: var(--color-bg-secondary, #f5f5f3); border-color: var(--color-border-primary, rgba(0, 0, 0, 0.2)); transform: translateY(-1px); } .load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .pagination-info { font-size: 13px; color: var(--color-text-tertiary, #8A8A8A); text-align: center; } /* Loading and Error States */ .loading-state, .error-state { display: flex; justify-content: center; align-items: center; padding: 60px 20px; font-size: 16px; color: var(--color-text-tertiary, #8A8A8A); } .loading-state { animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .error-state { color: var(--color-error, #8A6060); flex-direction: column; gap: 16px; } /* Spin animation for loading icon */ .animate-spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Dark mode support */ :root[data-theme="dark"] .theorem-card { background: var(--color-bg-primary, #1a1a1a); border-color: var(--color-border-primary, rgba(255, 255, 255, 0.1)); } :root[data-theme="dark"] .theorem-card:hover { border-color: var(--color-text-primary, #fff); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } :root[data-theme="dark"] .search-form-redesign { background: var(--color-bg-primary, #1a1a1a); border-color: var(--color-border-primary, rgba(255, 255, 255, 0.1)); } :root[data-theme="dark"] .search-input-redesign { background: var(--color-bg-secondary, #2a2a2a); border-color: var(--color-border-primary, rgba(255, 255, 255, 0.1)); color: var(--color-text-primary, #fff); } :root[data-theme="dark"] .search-input-redesign:focus { background: var(--color-bg-secondary, #2a2a2a); border-color: var(--color-text-primary, #fff); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .load-more-btn { background: var(--color-bg-secondary, #2a2a2a); border-color: var(--color-border-primary, rgba(255, 255, 255, 0.1)); color: var(--color-text-primary, #fff); } :root[data-theme="dark"] .load-more-btn:hover { background: var(--color-bg-hover, #3a3a3a); } /* Responsive Design */ @media (max-width: 1024px) { .theorems-cards { grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr)); gap: 18px; } .theorem-card { padding: 20px; } .theorem-name { font-size: 17px; } } /* Small tablets */ @media (max-width: 768px) { .theorem-search-container { margin-bottom: 24px; } .theorems-cards { grid-template-columns: 1fr; gap: 16px; padding: 0 16px; } .theorem-card { padding: 20px; border-radius: 12px; } .theorem-name { font-size: 16px; } .theorem-card-title { flex-direction: column; align-items: flex-start; gap: 8px; } .theorem-card-title .theorem-name { margin-right: 0; } .search-form-redesign { padding: 16px; border-radius: 12px; } } /* Larger phones */ @media (max-width: 600px) { .theorems-cards { padding: 0 12px; } .theorem-card { padding: 16px; } .theorem-name { font-size: 15px; line-height: 1.4; } .statement-text, .description-text { font-size: 13px; } .search-form-redesign { padding: 14px; } } /* Small phones */ @media (max-width: 480px) { .theorems-cards { padding: 0 8px; } .theorem-card { padding: 14px; } .empty-state { padding: 60px 20px; } .theorem-card-footer { flex-direction: column; align-items: flex-start; gap: 8px; } .theorem-actions { align-self: flex-end; } .search-form-redesign { padding: 12px; border-radius: 10px; } } /* Animation for card entrance */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .theorem-card { animation: fadeInUp 0.4s ease-out both; } .theorem-card:nth-child(1) { animation-delay: 0.05s; } .theorem-card:nth-child(2) { animation-delay: 0.1s; } .theorem-card:nth-child(3) { animation-delay: 0.15s; } .theorem-card:nth-child(4) { animation-delay: 0.2s; } .theorem-card:nth-child(5) { animation-delay: 0.25s; } .theorem-card:nth-child(6) { animation-delay: 0.3s; } /* ─── Explore Further Section (Theorem Detail) ─── */ .explore-further-section { padding: 0; margin-top: 8px; } .explore-further-divider { height: 1px; background: var(--color-border-primary, #e0e0e0); margin-bottom: 24px; } .explore-further-title { font-size: var(--font-size-sm, 0.75rem); font-weight: var(--font-weight-semibold, 600); color: var(--color-text-tertiary, #8a8a8a); text-transform: uppercase; letter-spacing: 0.8px; margin: 0 0 16px 0; } .explore-further-pills { display: flex; flex-wrap: wrap; gap: 10px; } .explore-further-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--color-bg-primary, #fff); border: 1px solid var(--color-border-primary, #e0e0e0); border-radius: var(--radius-lg, 10px); text-decoration: none; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .explore-further-pill:hover { border-color: var(--color-text-secondary, #6b6b6b); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)); } .explore-further-pill-name { font-size: var(--font-size-md, 0.875rem); font-weight: var(--font-weight-medium, 500); color: var(--color-text-primary, #1a1a1a); } .explore-further-pill-type { font-size: var(--font-size-sm, 0.75rem); color: var(--color-text-tertiary, #8a8a8a); } @media (max-width: 768px) { .explore-further-pills { gap: 8px; } .explore-further-pill { padding: 6px 12px; gap: 6px; } .explore-further-pill-name { font-size: 13px; } .explore-further-pill-type { font-size: 11px; } } /* === page-preview.css === */ /* Page Preview Tooltip Styles - Matching theorem preview */ .page-preview-tooltip { background-color: var(--color-bg-primary, #fff); border-radius: var(--radius-lg, 8px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-width: 400px; padding: 16px 18px; font-size: 13px; line-height: 150%; color: var(--color-text-primary, #1A1A1A); border: 1px solid var(--color-border-primary, #E0E0E0); transition: opacity var(--transition-normal); overflow: hidden; position: absolute; z-index: 1000; } .page-preview-tooltip .page-preview-header { margin-bottom: 10px; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .page-preview-tooltip h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px 0; color: var(--color-text-primary, #1A1A1A); letter-spacing: -0.2px; line-height: 20px; flex-basis: 100%; } .page-preview-controls { position: absolute; top: 0; right: 0; display: flex; gap: 4px; } .page-preview-close-btn, .page-preview-pin-btn, .page-preview-collapse-btn { background: none; border: none; color: var(--color-text-tertiary, #8A8A8A); font-size: 1.2rem; line-height: 1; padding: 0; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; opacity: 0.7; border-radius: 50%; transition: all var(--transition-normal); } .page-preview-close-btn:hover, .page-preview-pin-btn:hover, .page-preview-collapse-btn:hover { opacity: 1; background-color: var(--color-bg-hover, rgba(0,0,0,0.05)); } .page-preview-content { margin-bottom: 12px; max-height: 150px; overflow-y: auto; padding-right: 5px; } .page-preview-content *:first-child { margin-top: 0; } .page-preview-content *:last-child { margin-bottom: 0; } .page-preview-link { display: block; text-align: right; font-size: 12px; color: var(--color-text-tertiary, #8A8A8A); text-decoration: none; margin-top: 8px; } .page-preview-link:hover { text-decoration: underline; color: var(--color-text-primary, #1A1A1A); } .page-preview-loading { padding: 15px; text-align: center; color: var(--color-text-tertiary, #8A8A8A); font-style: italic; } .page-preview-error { padding: 15px; text-align: center; color: var(--color-danger, #dc2626); font-style: italic; } .page-preview-no-definition { padding: 10px 0; text-align: center; color: var(--color-text-tertiary, #8A8A8A); font-style: italic; } .definition-label { font-weight: 600; color: var(--color-success, #059669); display: block; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } /* Override global p styles inside preview */ .page-preview-tooltip p { margin: 0 0 8px 0; font-size: inherit; color: inherit; line-height: inherit; } .page-preview-tooltip p:last-child { margin-bottom: 0; } /* Override global p styles inside rendered markdown within preview */ .page-preview-tooltip .rendered-markdown-content p { margin: 0 0 6px 0; font-size: inherit; color: inherit; line-height: inherit; } /* Headings inside preview content */ .page-preview-tooltip h1, .page-preview-tooltip h2, .page-preview-tooltip h4, .page-preview-tooltip h5, .page-preview-tooltip h6 { margin: 0 0 8px 0; font-size: 14px; font-weight: 600; color: var(--color-text-primary, #1A1A1A); } .page-preview-tooltip.show { opacity: 1 !important; transform: translateY(0) !important; } .page-preview-tooltip .definition-label { font-weight: 600; color: var(--color-success, #059669); display: block; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .page-preview-tooltip .loading { color: var(--color-text-tertiary, #8A8A8A); font-style: italic; display: flex; align-items: center; gap: 8px; } .page-preview-tooltip .loading::before { content: ''; width: 12px; height: 12px; border: 2px solid var(--color-border-primary, #E0E0E0); border-top: 2px solid var(--color-text-primary, #1A1A1A); border-radius: 50%; animation: spin 1s linear infinite; } .page-preview-tooltip .error { color: var(--color-danger, #dc2626); font-style: italic; } .page-preview-tooltip .no-preview { color: var(--color-text-tertiary, #8A8A8A); font-style: italic; } /* Pinned tooltip styles */ .page-preview-tooltip.pinned-tooltip { position: fixed; z-index: 1001; cursor: move; } .page-preview-tooltip.pinned-tooltip .page-preview-header { cursor: move; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive design */ @media (max-width: 768px) { .page-preview-tooltip { max-width: 280px; font-size: 13px; padding: 12px; } .page-preview-tooltip h3 { font-size: 14px; } .page-preview-tooltip h1, .page-preview-tooltip h2, .page-preview-tooltip h4, .page-preview-tooltip h5, .page-preview-tooltip h6 { font-size: 13px; } } /* Dark mode support */ :root[data-theme="dark"] .page-preview-tooltip { background: var(--color-bg-secondary); border-color: var(--color-border-primary); color: var(--color-text-primary); } :root[data-theme="dark"] .page-preview-tooltip h1, :root[data-theme="dark"] .page-preview-tooltip h2, :root[data-theme="dark"] .page-preview-tooltip h3, :root[data-theme="dark"] .page-preview-tooltip h4, :root[data-theme="dark"] .page-preview-tooltip h5, :root[data-theme="dark"] .page-preview-tooltip h6 { color: var(--color-text-primary); } :root[data-theme="dark"] .page-preview-tooltip .definition-label { color: var(--color-text-primary); } :root[data-theme="dark"] .page-preview-tooltip .loading { color: var(--color-text-secondary); } :root[data-theme="dark"] .page-preview-tooltip .loading::before { border-color: var(--color-border-primary); border-top-color: var(--color-text-primary); } :root[data-theme="dark"] .page-preview-tooltip .error { color: var(--color-danger); } :root[data-theme="dark"] .page-preview-tooltip .no-preview { color: var(--color-text-secondary); } :root[data-theme="dark"] .page-preview-link { color: var(--color-text-tertiary); } :root[data-theme="dark"] .page-preview-close-btn, :root[data-theme="dark"] .page-preview-pin-btn, :root[data-theme="dark"] .page-preview-collapse-btn { color: var(--color-text-secondary); } :root[data-theme="dark"] .page-preview-close-btn:hover, :root[data-theme="dark"] .page-preview-pin-btn:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); } /* === spotlight-search.css === */ /** * Spotlight Search - macOS Spotlight/Raycast Style * Inspired by modern command palette UIs * Matches Apple design system */ /* Overlay - dark background that covers the whole screen */ .spotlight-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; -webkit-backdrop-filter: saturate(180%) blur(20px); z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; animation: spotlightFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes spotlightFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Main container - the white box */ .spotlight-container { background: rgba(255, 255, 255, 0.98); border-radius: 16px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.1), 0 24px 48px rgba(0, 0, 0, 0.08); width: 90%; max-width: 640px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; animation: spotlightSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid rgba(0, 0, 0, 0.04); } @keyframes spotlightSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Highlight pulse animation for already-pinned previews */ @keyframes highlight-pulse { 0%, 100% { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); } 50% { box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.5), 0 25px 50px rgba(0, 0, 0, 0.3); } } /* Mobile close button — hidden on desktop */ .spotlight-close-btn { display: none; } /* Search header (input + close) */ .spotlight-search-header { display: flex; align-items: center; width: 100%; } .spotlight-search-header .spotlight-input { flex: 1; min-width: 0; } /* Search input wrapper and overlay for syntax highlighting */ .spotlight-input-wrapper { position: relative; width: 100%; } .spotlight-input-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 18px 24px; font-size: 17px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Roboto', sans-serif; pointer-events: none; color: transparent; white-space: pre; overflow: hidden; letter-spacing: -0.022em; } /* Search input */ .spotlight-input { position: relative; width: 100%; padding: 18px 24px; font-size: 17px; font-weight: 400; border: none; outline: none; background: transparent; color: var(--text-color, #1D2433); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Roboto', sans-serif; letter-spacing: -0.022em; z-index: 1; } .spotlight-input::placeholder { color: var(--dark-gray, #86868b); font-weight: 400; } /* Delimiter highlighting in input */ .spotlight-input-wrapper { position: relative; width: 100%; } /* Dictionary Button - Ghost button pattern (matches nav icons) */ .dictionary-button { display: inline-flex; align-items: center; justify-content: center; position: relative; isolate: isolate; flex-shrink: 0; user-select: none; height: 32px; min-width: 0; padding: 6px 16px; margin-left: 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; font-size: 13px; overflow: hidden; transition: color 300ms cubic-bezier(0.165, 0.85, 0.45, 1), background-color 300ms cubic-bezier(0.165, 0.85, 0.45, 1), border-color 300ms cubic-bezier(0.165, 0.85, 0.45, 1); } .dictionary-button:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); } .dictionary-button:active { background-color: var(--color-bg-active); transform: scale(1.0); } .dictionary-button svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5px; transition: stroke 300ms cubic-bezier(0.165, 0.85, 0.45, 1); } .dictionary-button:hover svg { stroke: currentColor; } /* Dictionary mode active indicator */ .dictionary-button.active svg { color: white; } /* Tooltip for dictionary button */ .dictionary-button::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(5px); background: rgba(0, 0, 0, 0.85); color: white; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 10001; letter-spacing: 0.01em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .dictionary-button:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.5s; } /* Dark mode support for dictionary button */ /* Hint text */ .spotlight-hint { padding: 10px 24px 12px 24px; font-size: 11px; color: var(--dark-gray, #86868b); border-top: 0.5px solid var(--border-color, #d2d2d7); background: var(--secondary-color, #f5f5f7); font-weight: 400; letter-spacing: -0.01em; } .spotlight-hint kbd { display: inline-block; padding: 2px 6px; font-size: 10px; font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', 'Monaco', 'Consolas', monospace; background: var(--color-bg-primary, #fff); border: 0.5px solid var(--border-color, #d2d2d7); border-radius: 4px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04), inset 0 0 0 0.5px rgba(255, 255, 255, 0.5); margin: 0 3px; font-weight: 500; color: var(--text-color, #1D2433); } /* Results container */ .spotlight-results { max-height: 50vh; overflow-y: auto; border-top: 0.5px solid var(--border-color, #d2d2d7); } /* Individual result item */ .spotlight-result-item { display: flex; align-items: flex-start; padding: 10px 24px; cursor: pointer; border-bottom: 0.5px solid rgba(0, 0, 0, 0.04); } .spotlight-result-item:last-child { border-bottom: none; } .spotlight-result-item:hover, .spotlight-result-item.selected { background: var(--color-bg-hover); } /* Result icon */ .spotlight-result-icon { font-size: 20px; margin-right: 14px; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--secondary-color, #f5f5f7); border-radius: 8px; border: 0.5px solid rgba(0, 0, 0, 0.04); align-self: flex-start; } .spotlight-result-icon svg { width: 18px; height: 18px; color: var(--dark-gray, #86868b); } /* Result content */ .spotlight-result-content { flex: 1; min-width: 0; } .spotlight-result-title { font-size: 15px; font-weight: 500; color: var(--text-color, #1D2433); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.022em; } .spotlight-result-snippet { font-size: 13px; color: var(--dark-gray, #86868b); line-height: 1.5; max-height: 2.95em; /* ~2 lines at 1.5 line-height */ overflow: hidden; letter-spacing: -0.016em; } .spotlight-result-snippet code { background: rgba(0, 0, 0, 0.04); padding: 2px 5px; border-radius: 4px; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', 'Monaco', 'Consolas', monospace; } .spotlight-result-snippet strong { font-weight: 600; color: var(--text-color, #1D2433); } .spotlight-result-snippet em { font-style: italic; } /* MathJax in search results */ .spotlight-result-title .MathJax, .spotlight-result-snippet .MathJax { display: inline !important; font-size: inherit !important; } .spotlight-result-title mjx-container, .spotlight-result-snippet mjx-container { display: inline-block !important; margin: 0 !important; vertical-align: middle; } .spotlight-result-snippet mjx-container { font-size: 0.95em !important; } /* Ensure inline math doesn't break layout */ .spotlight-result-title mjx-container[display="true"], .spotlight-result-snippet mjx-container[display="true"] { display: inline-block !important; max-width: 100%; overflow: hidden; } /* Result badge (type indicator) */ .spotlight-result-badge { padding: 3px 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; background: var(--secondary-color, #f5f5f7); color: var(--dark-gray, #86868b); border-radius: 6px; border: 0.5px solid var(--border-color, #d2d2d7); margin-left: 12px; flex-shrink: 0; letter-spacing: 0.02em; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* No results state */ .spotlight-no-results, .spotlight-error { padding: 48px 24px; text-align: center; color: var(--dark-gray, #86868b); font-size: 14px; font-weight: 400; letter-spacing: -0.016em; } .spotlight-error { color: #ff3b30; } /* Scrollbar styling for results - Apple style */ .spotlight-results::-webkit-scrollbar { width: 10px; } .spotlight-results::-webkit-scrollbar-track { background: transparent; margin: 4px 0; } .spotlight-results::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } .spotlight-results::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); border: 2px solid transparent; background-clip: padding-box; } /* Dark mode support */ [data-theme="dark"] .spotlight-container { background: var(--color-bg-tertiary); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .spotlight-input { color: var(--color-text-primary); } [data-theme="dark"] .spotlight-input::placeholder { color: var(--color-text-tertiary); } [data-theme="dark"] .spotlight-hint { background: var(--color-bg-secondary); border-top-color: var(--color-bg-active); color: var(--color-text-secondary); } [data-theme="dark"] .spotlight-hint kbd { background: var(--color-bg-active); border-color: var(--color-border-strong); color: var(--color-text-medium); } [data-theme="dark"] .spotlight-results { border-top-color: var(--color-bg-active); } [data-theme="dark"] .spotlight-result-item { border-bottom-color: var(--color-bg-active); } [data-theme="dark"] .spotlight-result-title { color: var(--color-text-primary); } [data-theme="dark"] .spotlight-result-snippet { color: var(--color-text-secondary); } [data-theme="dark"] .spotlight-result-snippet code { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .spotlight-result-badge { background: var(--color-bg-active); color: var(--color-text-secondary); border-color: var(--color-border-strong); } [data-theme="dark"] .spotlight-result-icon { background: var(--color-bg-active); border-color: var(--color-border-strong); } [data-theme="dark"] .spotlight-result-icon svg { color: var(--color-text-secondary); } [data-theme="dark"] .spotlight-no-results, [data-theme="dark"] .spotlight-error { color: var(--color-text-tertiary); } /* ── User result card ── */ .spotlight-result-user { align-items: center; } .spotlight-user-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin-right: 14px; background: var(--secondary-color, #f5f5f7); border: 0.5px solid rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: center; } .spotlight-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .spotlight-user-avatar svg { width: 20px; height: 20px; color: var(--dark-gray, #86868b); } .spotlight-user-title-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .spotlight-user-handle { font-size: 13px; color: var(--dark-gray, #86868b); font-weight: 400; flex-shrink: 0; } .spotlight-user-occupation { font-size: 13px; color: var(--dark-gray, #86868b); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spotlight-user-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } .spotlight-user-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dark-gray, #86868b); font-weight: 500; } .spotlight-user-stat svg { opacity: 0.6; } .spotlight-user-role { display: inline-block; padding: 1px 7px; font-size: 10px; font-weight: 500; border-radius: 4px; background: var(--secondary-color, #f5f5f7); color: var(--dark-gray, #86868b); border: 0.5px solid rgba(0, 0, 0, 0.06); white-space: nowrap; } .spotlight-user-role--moderator { background: rgba(52, 120, 246, 0.08); color: #2563eb; border-color: rgba(52, 120, 246, 0.15); } .spotlight-user-role--reviewer { background: rgba(168, 85, 247, 0.08); color: #7c3aed; border-color: rgba(168, 85, 247, 0.15); } /* User card hover */ .spotlight-result-user:hover, .spotlight-result-user.selected { background: var(--color-bg-hover); } /* Dark mode for user cards */ [data-theme="dark"] .spotlight-user-avatar { background: var(--color-bg-active); border-color: var(--color-border-strong); } [data-theme="dark"] .spotlight-user-handle { color: var(--color-text-tertiary); } [data-theme="dark"] .spotlight-user-occupation { color: var(--color-text-secondary); } [data-theme="dark"] .spotlight-user-stat { color: var(--color-text-secondary); } [data-theme="dark"] .spotlight-user-role { background: var(--color-bg-active); color: var(--color-text-secondary); border-color: var(--color-border-strong); } [data-theme="dark"] .spotlight-user-role--moderator { background: rgba(52, 120, 246, 0.15); color: #60a5fa; border-color: rgba(52, 120, 246, 0.25); } [data-theme="dark"] .spotlight-user-role--reviewer { background: rgba(168, 85, 247, 0.15); color: #a78bfa; border-color: rgba(168, 85, 247, 0.25); } /* Responsive design */ @media (max-width: 768px) { .spotlight-overlay { padding-top: 10vh; } .spotlight-container { width: 95%; max-height: 80vh; } .spotlight-input { font-size: 16px; padding: 16px 20px; } .spotlight-hint { padding: 6px 20px 10px 20px; font-size: 11px; } .spotlight-result-item { padding: 10px 20px; } .spotlight-result-icon { font-size: 20px; width: 28px; height: 28px; margin-right: 12px; } .spotlight-user-avatar { width: 36px; height: 36px; margin-right: 12px; } .spotlight-result-title { font-size: 14px; } .spotlight-result-snippet { font-size: 12px; } .spotlight-user-meta { gap: 4px; } } /* === example-environment.css === */ /* Example Environment Styles Collapsible example boxes with left accent bar. Follows the same visual language as definition-box and remark-box. */ .example-environment { background: rgb(0 0 0 / 2%); border: 1px solid var(--color-border-secondary, var(--border-color)); border-left: 4px solid var(--color-border-strong); border-radius: var(--radius-lg); margin: 16px 0; overflow: hidden; } .example-header { padding: 14px 18px; cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; transition: background 0.15s ease; } .example-header:hover { background: rgb(0 0 0 / 3%); } .example-title { font-weight: 600; color: var(--color-text-primary); font-size: var(--font-size-md, 14px); display: flex; align-items: center; gap: 8px; } .example-icon { width: 16px; height: 16px; color: var(--color-text-secondary); } .example-toggle { color: var(--color-text-tertiary); font-size: 12px; line-height: 1; transition: transform 0.2s ease; } /* Preview snippet — shown when collapsed */ .example-preview { padding: 0 18px 14px; color: var(--color-text-secondary); font-size: 14px; line-height: 1.6; } /* Expanded content area */ .example-content { overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; } .example-content.collapsed { max-height: 0; opacity: 0; } .example-content.expanded { max-height: none; opacity: 1; padding: 18px; border-top: 1px solid var(--color-border-secondary, var(--border-color)); } .example-body { color: var(--color-text-primary); line-height: 1.65; } /* === motivation-environment.css === */ /* Motivation Environment Styling - Matching Example Environment */ .motivation-environment { margin: 1.5rem 0; border: 1px solid #dee2e6; background-color: var(--color-bg-secondary); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; } .motivation-header { padding: 12px 16px; cursor: pointer; user-select: none; background-color: var(--color-bg-primary, #fff); transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: space-between; } .motivation-header:hover { background-color: #dee2e6; } .motivation-header:active { background-color: #ced4da; } .motivation-title { font-weight: 600; font-size: 1rem; color: var(--color-text-medium); display: flex; align-items: center; gap: 8px; } .motivation-icon { stroke: #495057; flex-shrink: 0; } .motivation-preview { padding: 16px; color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.6; border-top: 1px solid #dee2e6; display: block; /* Visible by default */ max-height: 150px; /* Limit preview height */ overflow: hidden; /* Crop overflow */ position: relative; font-style: italic; } .motivation-preview p:last-child { margin-bottom: 0; } /* Add a fade-out effect at the bottom of the preview when cropped */ .motivation-preview::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to bottom, transparent, #f8f9fa); pointer-events: none; } .motivation-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .motivation-content.collapsed { max-height: 0; padding: 0; } .motivation-content.expanded { max-height: none; padding: 16px; border-top: 1px solid #dee2e6; background-color: var(--color-bg-primary, #fff); } .motivation-body { color: var(--color-text-medium); font-size: 0.95rem; line-height: 1.6; } .motivation-body p:first-child { margin-top: 0; } .motivation-body p:last-child { margin-bottom: 0; } /* Dark mode support */ :root[data-theme="dark"] .motivation-environment { background-color: var(--color-bg-tertiary); border-color: var(--color-border-strong); } :root[data-theme="dark"] .motivation-header { background-color: var(--color-bg-hover); } :root[data-theme="dark"] .motivation-header:hover { background-color: var(--color-border-strong); } :root[data-theme="dark"] .motivation-header:active { background-color: var(--color-border-strong); } :root[data-theme="dark"] .motivation-title { color: var(--color-text-primary); } :root[data-theme="dark"] .motivation-icon { stroke: var(--color-text-primary); } :root[data-theme="dark"] .motivation-preview { color: var(--color-text-medium); border-top-color: var(--color-border-strong); } :root[data-theme="dark"] .motivation-preview::after { background: linear-gradient(to bottom, transparent, var(--color-bg-tertiary)); } :root[data-theme="dark"] .motivation-content.expanded { background-color: var(--color-bg-secondary); border-top-color: var(--color-border-strong); } :root[data-theme="dark"] .motivation-body { color: var(--color-text-primary); } /* Responsive adjustments */ @media (max-width: 768px) { .motivation-environment { margin: 1rem 0; } .motivation-header { padding: 10px 12px; } .motivation-title { font-size: 0.95rem; } .motivation-preview, .motivation-body { padding: 12px; font-size: 0.9rem; } .motivation-content.expanded { padding: 12px; } } /* Smooth animation for content */ @keyframes motivationExpand { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .motivation-content.expanded .motivation-body { animation: motivationExpand 0.3s ease; } /* Print styles */ @media print { .motivation-environment { page-break-inside: avoid; border-left: 3px solid #495057; } .motivation-header { background-color: transparent; cursor: default; } .motivation-preview { display: none !important; } .motivation-content { display: block !important; max-height: none !important; padding: 12px !important; } .motivation-content.collapsed { display: block !important; max-height: none !important; } } /* === explanation-environment.css === */ /* Explanation Environment Styling — Collapsible, matching Motivation pattern */ .explanation-environment { margin: 1.5rem 0; border: 1px solid #dee2e6; background-color: var(--color-bg-secondary); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; } .explanation-header { padding: 12px 16px; cursor: pointer; user-select: none; background-color: var(--color-bg-primary, #fff); transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: space-between; } .explanation-header:hover { background-color: #dee2e6; } .explanation-header:active { background-color: #ced4da; } .explanation-title { font-weight: 600; font-size: 1rem; color: var(--color-text-medium); display: flex; align-items: center; gap: 8px; } .explanation-icon { stroke: #495057; flex-shrink: 0; } .explanation-preview { padding: 16px; color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.6; border-top: 1px solid #dee2e6; display: block; max-height: 150px; overflow: hidden; position: relative; font-style: italic; } .explanation-preview p:last-child { margin-bottom: 0; } .explanation-preview::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to bottom, transparent, #f8f9fa); pointer-events: none; } .explanation-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .explanation-content.collapsed { max-height: 0; padding: 0; } .explanation-content.expanded { max-height: none; padding: 16px; border-top: 1px solid #dee2e6; background-color: var(--color-bg-primary, #fff); } .explanation-body { color: var(--color-text-medium); font-size: 0.95rem; line-height: 1.6; } .explanation-body p:first-child { margin-top: 0; } .explanation-body p:last-child { margin-bottom: 0; } /* Dark mode */ :root[data-theme="dark"] .explanation-environment { background-color: var(--color-bg-tertiary); border-color: var(--color-border-strong); } :root[data-theme="dark"] .explanation-header { background-color: var(--color-bg-hover); } :root[data-theme="dark"] .explanation-header:hover { background-color: var(--color-border-strong); } :root[data-theme="dark"] .explanation-header:active { background-color: var(--color-border-strong); } :root[data-theme="dark"] .explanation-title { color: var(--color-text-primary); } :root[data-theme="dark"] .explanation-icon { stroke: var(--color-text-primary); } :root[data-theme="dark"] .explanation-preview { color: var(--color-text-medium); border-top-color: var(--color-border-strong); } :root[data-theme="dark"] .explanation-preview::after { background: linear-gradient(to bottom, transparent, var(--color-bg-tertiary)); } :root[data-theme="dark"] .explanation-content.expanded { background-color: var(--color-bg-secondary); border-top-color: var(--color-border-strong); } :root[data-theme="dark"] .explanation-body { color: var(--color-text-primary); } /* Responsive */ @media (max-width: 768px) { .explanation-environment { margin: 1rem 0; } .explanation-header { padding: 10px 12px; } .explanation-preview { padding: 12px; } .explanation-content.expanded { padding: 12px; } } /* === step-environment.css === */ /* Step Environment — Collapsible proof steps with Exact/Guided toggle */ /* ============================================================ Step Container ============================================================ */ .step-environment { margin: 0.75rem 0; border-bottom: 1px solid var(--color-border-primary, #e5e3df); } .step-environment:last-child { border-bottom: none; } /* Nested steps get indentation */ .step-environment .step-environment { margin-left: 1rem; padding-left: 0.75rem; border-left: 2px solid var(--color-border-primary, #e5e3df); border-bottom: none; } /* ============================================================ Step Header (clickable to expand/collapse) ============================================================ */ .step-header { padding: 10px 0; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; transition: opacity 0.15s ease; } .step-header:hover { opacity: 0.8; } .step-header .toggle-icon { flex-shrink: 0; color: var(--color-text-tertiary, #9ca396); transition: transform 0.2s ease; } .step-environment.expanded > .step-header .toggle-icon { transform: rotate(90deg); } .step-name { font-weight: 600; font-size: 0.95rem; color: var(--color-text-primary, #1f2328); font-style: italic; } .step-summary { color: var(--color-accent, #5C6F5B); font-size: 0.9rem; font-style: normal; } /* Hide summary when step is expanded */ .step-environment.expanded .step-summary { display: none; } /* ============================================================ Exact/Guided Mode Toggle ============================================================ */ .step-mode-toggle { display: flex; align-items: center; margin-left: auto; flex-shrink: 0; background-color: #F0EEEA; border-radius: 100px; padding: 2px; gap: 0px; } .step-mode-toggle .mode-btn { font-family: "Inter", system-ui, sans-serif; font-size: 13px; font-weight: 500; line-height: 16px; padding: 4px 12px; border: none; outline: none; border-radius: 100px; background: transparent; color: #9E9A92; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; -webkit-appearance: none; appearance: none; box-shadow: none; } .step-mode-toggle .mode-btn:focus, .step-mode-toggle .mode-btn:focus-visible { outline: none; box-shadow: none; } .step-mode-toggle .mode-btn:hover { color: #6b6862; } .step-mode-toggle .mode-btn.active[data-mode="exact"] { color: #2C2C2A; background-color: #FFFFFF; font-weight: 600; } .step-mode-toggle .mode-btn.active[data-mode="guided"] { color: #FFFFFF; background-color: #5C6B56; font-weight: 600; } /* ============================================================ Step Content (collapsible) ============================================================ */ .step-content { overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .step-content.collapsed { max-height: 0; padding: 0; } .step-content.expanded { max-height: 5000px; padding: 8px 0 16px 20px; } .step-exact, .step-guided { font-size: 0.95rem; line-height: 1.65; color: var(--color-text-primary, #1f2328); } /* Guided content gets a subtle left accent bar */ .step-guided { border-left: 3px solid var(--color-accent, #5C6F5B); padding-left: 16px; margin-left: 0; } .step-guided p:first-child { margin-top: 0; } .step-guided p:last-child { margin-bottom: 0; } /* ============================================================ Proof Plan Card ============================================================ */ .proofplan-box { background-color: var(--color-bg-secondary, #f5f4f1); border-radius: 6px; padding: 14px 18px; margin-bottom: 1.25rem; } .proofplan-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .proofplan-icon { color: var(--color-text-tertiary, #9ca396); flex-shrink: 0; } .proofplan-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary, #9ca396); } .proofplan-content { font-size: 0.9rem; line-height: 1.6; color: var(--color-text-medium, #4a4843); font-style: italic; } .proofplan-content p:first-child { margin-top: 0; } .proofplan-content p:last-child { margin-bottom: 0; } /* ============================================================ Dark Mode Overrides ============================================================ */ :root[data-theme="dark"] .step-environment { border-bottom-color: var(--color-border-primary); } :root[data-theme="dark"] .step-environment .step-environment { border-left-color: var(--color-border-primary); } :root[data-theme="dark"] .step-mode-toggle { border-color: var(--color-border-primary); } :root[data-theme="dark"] .step-mode-toggle .mode-btn:hover { background-color: var(--color-bg-secondary); } :root[data-theme="dark"] .step-mode-toggle .mode-btn.active[data-mode="exact"] { background-color: var(--color-bg-secondary); } :root[data-theme="dark"] .proofplan-box { background-color: var(--color-bg-secondary); } :root[data-theme="dark"] .step-guided { border-left-color: var(--color-accent); } /* ============================================================ Mobile — Stack header vertically ============================================================ */ @media (max-width: 600px) { .step-header { flex-wrap: wrap; gap: 6px; } .step-mode-toggle { margin-left: 20px; margin-top: 2px; } } /* === markdown-spacing.css === */ /** * Markdown Content Spacing * Ensures proper spacing between consecutive paragraphs and other markdown elements */ /* Ensure paragraphs have proper spacing */ .rendered-markdown-content p { margin-bottom: 1em; } /* Add extra spacing between consecutive paragraphs */ .rendered-markdown-content p + p { margin-top: 1em; } /* Handle
tags that appear between paragraphs (from multiple newlines) */ .rendered-markdown-content br { display: block; content: ""; margin-top: 0.5em; } /* Ensure standalone
tags create proper spacing */ .rendered-markdown-content p + br { margin-top: 0.5em; } .rendered-markdown-content br + p { margin-top: 0.5em; } /* Handle multiple consecutive
tags */ .rendered-markdown-content br + br { margin-top: 0.5em; } /* Lists should have proper spacing */ .rendered-markdown-content ul, .rendered-markdown-content ol { margin-bottom: 1em; } /* Spacing between list and paragraph */ .rendered-markdown-content p + ul, .rendered-markdown-content p + ol { margin-top: 0.5em; } .rendered-markdown-content ul + p, .rendered-markdown-content ol + p { margin-top: 1em; } /* First heading doesn't need top margin */ .rendered-markdown-content h1:first-child, .rendered-markdown-content h2:first-child, .rendered-markdown-content h3:first-child, .rendered-markdown-content h4:first-child, .rendered-markdown-content h5:first-child, .rendered-markdown-content h6:first-child { margin-top: 0; } /* Code blocks should have proper spacing */ .rendered-markdown-content pre { margin-top: 1em; margin-bottom: 1em; } .rendered-markdown-content p + pre { margin-top: 1em; } .rendered-markdown-content pre + p { margin-top: 1em; } /* Blockquotes should have proper spacing */ .rendered-markdown-content blockquote { margin-top: 1em; margin-bottom: 1em; } .rendered-markdown-content p + blockquote { margin-top: 1em; } .rendered-markdown-content blockquote + p { margin-top: 1em; } /* Tables should have proper spacing */ .rendered-markdown-content table { margin-top: 1em; margin-bottom: 1em; width: 100%; border-collapse: collapse; border: 1px solid var(--border-color, #e1e4e8); border-radius: 6px; overflow: hidden; font-size: 0.95em; } .rendered-markdown-content table thead { background-color: var(--table-header-bg, #f6f8fa); } .rendered-markdown-content table th { padding: 12px 16px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border-color, #e1e4e8); color: var(--text-primary, #24292f); } .rendered-markdown-content table td { padding: 10px 16px; border-bottom: 1px solid var(--border-color, #e1e4e8); color: var(--text-primary, #24292f); } .rendered-markdown-content table tbody tr:last-child td { border-bottom: none; } .rendered-markdown-content table tbody tr:hover { background-color: var(--table-row-hover, #f6f8fa); } /* Alternate row colors for better readability */ .rendered-markdown-content table tbody tr:nth-child(even) { background-color: var(--table-row-alt, #fafbfc); } .rendered-markdown-content table tbody tr:nth-child(even):hover { background-color: var(--table-row-hover, #f6f8fa); } /* Center alignment for table headers if specified */ .rendered-markdown-content table th[align="center"], .rendered-markdown-content table td[align="center"] { text-align: center; } .rendered-markdown-content table th[align="right"], .rendered-markdown-content table td[align="right"] { text-align: right; } /* Dark mode support */ :root[data-theme="dark"] .rendered-markdown-content table { border-color: var(--color-border-primary); } :root[data-theme="dark"] .rendered-markdown-content table thead { background-color: var(--color-bg-primary); } :root[data-theme="dark"] .rendered-markdown-content table th { border-bottom-color: var(--color-border-primary); color: var(--color-text-primary); } :root[data-theme="dark"] .rendered-markdown-content table td { border-bottom-color: var(--color-border-primary); color: var(--color-text-primary); } :root[data-theme="dark"] .rendered-markdown-content table tbody tr:nth-child(even) { background-color: var(--color-bg-primary); } :root[data-theme="dark"] .rendered-markdown-content table tbody tr:hover { background-color: var(--color-bg-secondary); } :root[data-theme="dark"] .rendered-markdown-content table tbody tr:nth-child(even):hover { background-color: var(--color-bg-secondary); } .rendered-markdown-content p + table { margin-top: 1em; } .rendered-markdown-content table + p { margin-top: 1em; } /* Horizontal rules should have proper spacing */ .rendered-markdown-content hr { margin-top: 2em; margin-bottom: 2em; } /* Images should be responsive and have proper spacing */ .rendered-markdown-content img, .rendered-markdown-content .content-image { max-width: 100%; height: auto; display: block; margin: 1.5em auto; border-radius: 4px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .rendered-markdown-content img:hover, .rendered-markdown-content .content-image:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* SVG-specific styling for better rendering */ .rendered-markdown-content img[src$=".svg"], .rendered-markdown-content .content-image[src$=".svg"] { /* SVGs often look better without border-radius */ border-radius: 0; /* Allow SVGs to use their intrinsic size or explicit width attribute */ max-width: 100%; /* Optional: Add a subtle background for transparent SVGs */ background: transparent; } /* Images in paragraphs */ .rendered-markdown-content p img { margin: 1em auto; } /* Spacing between paragraph and image */ .rendered-markdown-content p + img, .rendered-markdown-content p + .content-image { margin-top: 1.5em; } .rendered-markdown-content img + p, .rendered-markdown-content .content-image + p { margin-top: 1.5em; } /* Image captions (if using title attribute) */ .rendered-markdown-content img[title]::after, .rendered-markdown-content .content-image[title]::after { content: attr(title); display: block; text-align: center; font-size: 0.9em; color: var(--color-text-secondary); font-style: italic; margin-top: 0.5em; } /* Image modal for full-size viewing */ .image-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 10000; cursor: pointer; animation: fadeIn 0.2s ease; } .image-modal.active { display: flex; align-items: center; justify-content: center; } .image-modal img { max-width: 95%; max-height: 95%; object-fit: contain; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); border-radius: 4px; } .image-modal-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; background: rgba(0, 0, 0, 0.5); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background 0.2s; } .image-modal-close:hover { background: rgba(0, 0, 0, 0.8); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* === icon-navigation.css === */ /* Icon-based Navigation Styles - Apple-esque Design */ /* Navigation Menu */ nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } nav ul li { list-style: none; margin: 0; } /* Icon Link Styles — Ghost button pattern */ .nav-icon-link { display: inline-flex; align-items: center; justify-content: center; position: relative; isolate: isolate; flex-shrink: 0; user-select: none; height: 32px; min-width: 0; padding: 6px 16px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary) !important; text-decoration: none; white-space: nowrap; font-size: 13px; overflow: visible; transition: color 300ms cubic-bezier(0.165, 0.85, 0.45, 1), background-color 300ms cubic-bezier(0.165, 0.85, 0.45, 1), border-color 300ms cubic-bezier(0.165, 0.85, 0.45, 1); } .nav-icon-link:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary) !important; text-decoration: none; } .nav-icon-link:active { background-color: var(--color-bg-active); transform: scale(1.0); } .nav-icon-link svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5px; transition: stroke 300ms cubic-bezier(0.165, 0.85, 0.45, 1); } .nav-icon-link:hover svg { stroke: currentColor; } /* Tooltip on hover - Apple style */ .nav-icon-link::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(5px); background-color: rgba(0, 0, 0, 0.85); color: white; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 1000; letter-spacing: 0.01em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .nav-icon-link::before { content: ''; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%) translateY(5px); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid rgba(0, 0, 0, 0.85); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 1001; } .nav-icon-link:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.5s; } .nav-icon-link:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.5s; } /* Notifications button — Ghost button pattern */ .notifications-button { display: inline-flex; align-items: center; justify-content: center; position: relative; isolate: isolate; flex-shrink: 0; user-select: none; height: 32px; min-width: 0; padding: 6px 16px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; font-size: 13px; overflow: visible; transition: color 300ms cubic-bezier(0.165, 0.85, 0.45, 1), background-color 300ms cubic-bezier(0.165, 0.85, 0.45, 1), border-color 300ms cubic-bezier(0.165, 0.85, 0.45, 1); } .notifications-button:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); } .notifications-button:active { background-color: var(--color-bg-active); transform: scale(1.0); } .notifications-button svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5px; transition: stroke 300ms cubic-bezier(0.165, 0.85, 0.45, 1); } .notifications-button:hover svg { stroke: currentColor; } /* Tooltip for notifications button */ .notifications-button::after { content: attr(data-tooltip); position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%) translateY(5px); background-color: rgba(0, 0, 0, 0.85); color: white; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 1000; letter-spacing: 0.01em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .notifications-button::before { content: ''; position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%) translateY(5px); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid rgba(0, 0, 0, 0.85); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 1001; } .notifications-button:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.5s; } .notifications-button:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.5s; } /* Notification badge positioning */ .notification-badge { position: absolute; top: 0; right: 0; background-color: var(--color-accent, #5A7A6A); color: white; font-size: 10px; font-weight: bold; padding: 0 4px; border-radius: 8px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; transform: translate(10%, -20%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } /* Dark mode: use red/accent background for notification badge visibility */ :root[data-theme="dark"] .notification-badge { background-color: var(--color-danger); color: var(--color-text-primary); } /* Active state for current page */ .nav-icon-link.active { background-color: var(--color-bg-hover); color: var(--color-text-primary); } .nav-icon-link.active svg { stroke: currentColor; } /* Responsive adjustments */ @media (max-width: 768px) { nav ul { gap: 2px; } .nav-icon-link { padding: 6px 10px; height: 28px; } .notifications-button { padding: 6px 10px; height: 28px; } /* Hide tooltips on mobile */ .nav-icon-link::after, .nav-icon-link::before, .notifications-button::after, .notifications-button::before { display: none; } } /* Smooth icon stroke animation */ @keyframes iconPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .nav-icon-link:focus svg, .notifications-button:focus svg { animation: iconPulse 0.3s ease; } /* Focus visible for accessibility */ .nav-icon-link:focus-visible, .notifications-button:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } /* ============================================ Navigation Dropdown Menu - Supabase-inspired ============================================ */ .nav-dropdown-container { position: relative; display: inline-flex; align-items: center; } /* Trigger button styling — Ghost button pattern */ .nav-dropdown-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 0; padding: 6px 16px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); text-decoration: none; cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; position: relative; white-space: nowrap; overflow: hidden; transition: color 300ms cubic-bezier(0.165, 0.85, 0.45, 1), background-color 300ms cubic-bezier(0.165, 0.85, 0.45, 1), border-color 300ms cubic-bezier(0.165, 0.85, 0.45, 1); } .nav-dropdown-trigger:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); text-decoration: none; } .nav-dropdown-trigger:active { background-color: var(--color-bg-active); transform: scale(1.0); } .nav-dropdown-trigger svg { width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; } /* Chevron icon */ .nav-dropdown-trigger .chevron-icon { width: 12px; height: 12px; transition: transform 0.2s ease; } .nav-dropdown-container:hover .nav-dropdown-trigger .chevron-icon { transform: rotate(180deg); } /* The dropdown panel */ .nav-dropdown-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background-color: var(--color-bg-primary, #fff); border: 1px solid var(--border-color, #d2d2d7); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.06); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; z-index: 1000; min-width: 520px; max-width: calc(100vw - 2rem); padding: 0; overflow: hidden; } /* Show on hover */ .nav-dropdown-container:hover .nav-dropdown-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Show on click (active state) */ .nav-dropdown-container.active .nav-dropdown-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Invisible bridge to prevent closing when moving to dropdown */ .nav-dropdown-container::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; background: transparent; } /* Panel inner layout - multi-column like Supabase */ .nav-dropdown-inner { display: flex; } /* Main content section (left) */ .nav-dropdown-main { flex: 1; padding: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } /* Sidebar section (right) - like Supabase's "Modules" or "Customer Stories" */ .nav-dropdown-sidebar { width: 360px; background-color: var(--light-gray, #f5f5f7); padding: 16px; border-left: 1px solid var(--border-color, #d2d2d7); display: flex; flex-direction: column; } /* Two-column layout for sidebar items (after the title) */ .nav-dropdown-sidebar-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 8px; } .nav-dropdown-sidebar-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--light-text, #86868b); margin: 0 0 12px 0; padding: 0 8px; } /* Individual navigation item */ .nav-dropdown-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 8px; text-decoration: none; color: var(--text-color, #1D2433); transition: background-color 0.15s ease; } .nav-dropdown-item:hover { background-color: var(--light-gray, #f5f5f7); text-decoration: none; } .nav-dropdown-item:active { background-color: var(--medium-gray, #e8e8ed); } /* Item icon container */ .nav-dropdown-item-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background-color: var(--light-gray, #f5f5f7); flex-shrink: 0; transition: background-color 0.15s ease; } .nav-dropdown-item:hover .nav-dropdown-item-icon { background-color: var(--medium-gray, #e8e8ed); } .nav-dropdown-item-icon svg { width: 18px; height: 18px; stroke: var(--text-color, #1D2433); } /* Item text content */ .nav-dropdown-item-content { flex: 1; min-width: 0; } .nav-dropdown-item-title { font-size: 14px; font-weight: 500; color: var(--text-color, #1D2433); margin: 0 0 2px 0; line-height: 1.3; } .nav-dropdown-item-desc { font-size: 12px; color: var(--light-text, #86868b); margin: 0; line-height: 1.4; } /* Sidebar items - simpler style */ .nav-dropdown-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 6px; text-decoration: none; color: var(--text-color, #1D2433); font-size: 13px; font-weight: 500; transition: background-color 0.15s ease; } .nav-dropdown-sidebar-item:hover { background-color: rgba(0, 0, 0, 0.05); text-decoration: none; } .nav-dropdown-sidebar-item svg { width: 16px; height: 16px; stroke: var(--light-text, #86868b); flex-shrink: 0; } /* Section divider */ .nav-dropdown-divider { grid-column: span 2; height: 1px; background-color: var(--border-color, #d2d2d7); margin: 8px 0; } /* Full-width item (spans both columns) */ .nav-dropdown-item.full-width { grid-column: span 2; } /* Small variant for sidebar items */ .nav-dropdown-item.small { padding: 8px 10px; } .nav-dropdown-item.small .nav-dropdown-item-icon { width: 28px; height: 28px; } .nav-dropdown-item.small .nav-dropdown-item-icon svg { width: 14px; height: 14px; } .nav-dropdown-item.small .nav-dropdown-item-title { font-size: 13px; } .nav-dropdown-item.small .nav-dropdown-item-desc { font-size: 11px; } /* Footer link for "View All" style */ .nav-dropdown-footer { padding: 12px 16px; border-top: 1px solid var(--border-color, #d2d2d7); text-align: center; } .nav-dropdown-footer-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-primary); font-size: 13px; font-weight: 500; text-decoration: none; transition: opacity 0.15s ease; } .nav-dropdown-footer-link:hover { opacity: 0.8; text-decoration: none; } .nav-dropdown-footer-link svg { width: 14px; height: 14px; stroke: currentColor; } /* Responsive adjustments */ @media (max-width: 768px) { .nav-dropdown-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; transform: translateX(0) translateY(100%); border-radius: 16px 16px 0 0; min-width: unset; width: 100%; max-height: 80vh; overflow-y: auto; } .nav-dropdown-container:hover .nav-dropdown-panel { transform: translateX(0) translateY(0); } .nav-dropdown-inner { flex-direction: column; } .nav-dropdown-main { grid-template-columns: 1fr; } .nav-dropdown-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border-color, #d2d2d7); } .nav-dropdown-sidebar-items { grid-template-columns: 1fr; } .nav-dropdown-item.full-width, .nav-dropdown-divider { grid-column: span 1; } } /* ============================================ Logo Dropdown Specific Styles ============================================ */ .logo-dropdown { display: inline-flex; align-items: center; } .logo-dropdown h1 { margin: 0; } .logo-dropdown .logo-link { display: flex; align-items: center; text-decoration: none; color: inherit; padding: 8px; border-radius: 8px; transition: background-color 0.2s ease; } .logo-dropdown .logo-link:hover { background-color: rgba(0, 0, 0, 0.05); } .logo-dropdown .nav-dropdown-panel { left: 0; transform: translateX(0) translateY(8px); } .logo-dropdown:hover .nav-dropdown-panel { transform: translateX(0) translateY(0); } /* Mobile: Click to open dropdown, not hover */ @media (max-width: 768px) { /* Disable hover on mobile for logo dropdown */ .logo-dropdown:hover .nav-dropdown-panel { opacity: 0; visibility: hidden; transform: translateX(0) translateY(100%); } /* Show dropdown only when active class is added via JS */ .logo-dropdown.mobile-active .nav-dropdown-panel { opacity: 1; visibility: visible; transform: translateX(0) translateY(0); } .logo-dropdown .nav-dropdown-panel { left: 0; right: 0; transform: translateX(0) translateY(100%); } } /* ============================================ Profile Dropdown Styles ============================================ */ .profile-dropdown { position: relative; } .profile-dropdown-trigger { background: none; border: none; cursor: pointer; } /* Nav profile avatar image */ .nav-profile-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .profile-dropdown-panel { min-width: 280px; right: 0; left: auto; transform: translateX(0) translateY(8px); padding: 0; } .profile-dropdown:hover .profile-dropdown-panel { transform: translateX(0) translateY(0); } /* Show profile dropdown when clicked (active state) */ .profile-dropdown.active .profile-dropdown-panel { opacity: 1; visibility: visible; transform: translateX(0) translateY(0); } /* Profile header in dropdown */ .profile-dropdown-header { display: flex; align-items: center; gap: 12px; padding: 16px; } .profile-dropdown-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--light-gray, #f5f5f7); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .profile-dropdown-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-dropdown-avatar svg { width: 22px; height: 22px; stroke: var(--light-text, #86868b); } .profile-dropdown-info { flex: 1; min-width: 0; } .profile-dropdown-name { font-size: 14px; font-weight: 600; color: var(--text-color, #1D2433); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-dropdown-email { font-size: 12px; color: var(--light-text, #86868b); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Divider */ .profile-dropdown-divider { height: 1px; background-color: var(--border-color, #d2d2d7); margin: 0; } /* Menu items */ .profile-dropdown-menu { padding: 8px; } .profile-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--text-color, #1D2433); font-size: 14px; transition: background-color 0.15s ease; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: inherit; } .profile-dropdown-item:hover { background-color: var(--light-gray, #f5f5f7); text-decoration: none; } .profile-dropdown-item svg { width: 18px; height: 18px; stroke: var(--light-text, #86868b); flex-shrink: 0; } .profile-dropdown-item span { flex: 1; } /* Logout item - slightly different style */ .profile-dropdown-logout { color: #ff3b30; } .profile-dropdown-logout svg { stroke: #ff3b30; } .profile-dropdown-logout:hover { background-color: rgba(255, 59, 48, 0.1); } /* Mobile adjustments for profile dropdown */ @media (max-width: 768px) { .profile-dropdown:hover .profile-dropdown-panel { opacity: 0; visibility: hidden; } .profile-dropdown.mobile-active .profile-dropdown-panel { opacity: 1; visibility: visible; transform: translateX(0) translateY(0); } .profile-dropdown-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; min-width: unset; width: 100%; border-radius: 16px 16px 0 0; transform: translateX(0) translateY(100%); max-height: 80vh; overflow-y: auto; } } /* === subnav.css === */ /* Subnav - Apple-style breadcrumb navigation */ .subnav { position: sticky; top: var(--header-height, 50px); z-index: 90; background: rgba(var(--bg-primary-rgb, 255, 255, 255), 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); } .subnav-inner { width: var(--content-width-percent, 90%); max-width: var(--max-width, 1600px); margin: 0 auto; padding: 0.75rem var(--content-padding-x, 64px); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @media (max-width: 1024px) { .subnav-inner { padding: 0.75rem 32px; } } @media (max-width: 768px) { .subnav-inner { padding: 0.75rem 16px; flex-wrap: wrap; } } .subnav-breadcrumbs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; min-width: 0; flex: 1; } .subnav-breadcrumb-link { color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: color 0.15s ease; } .subnav-breadcrumb-link:hover { color: var(--accent-primary); } .subnav-breadcrumb-separator { color: var(--text-tertiary); flex-shrink: 0; } .subnav-breadcrumb-current { color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subnav-status { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; margin-left: 0.5rem; flex-shrink: 0; } .subnav-status.open { background: rgba(46, 164, 79, 0.15); color: #2ea44f; } .subnav-status.closed { background: rgba(139, 69, 255, 0.15); color: #8b45ff; } .subnav-status.merged { background: rgba(139, 69, 255, 0.15); color: #8b45ff; } .subnav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Extend components.css .btn with subnav-specific sizing */ .subnav-actions .btn { padding: 0.375rem 0.75rem; font-size: 0.8125rem; gap: 0.375rem; } .subnav-actions .btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); } .subnav-actions .btn-outline:hover { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color-strong); } .subnav-actions .btn svg { width: 14px; height: 14px; } /* Dark mode adjustments */ [data-theme="dark"] .subnav { background: rgba(var(--bg-primary-rgb, 18, 18, 18), 0.85); } [data-theme="dark"] .subnav-status.open { background: rgba(46, 164, 79, 0.2); } [data-theme="dark"] .subnav-status.closed, [data-theme="dark"] .subnav-status.merged { background: rgba(139, 69, 255, 0.2); } /* === mobile.css === */ /** * Mobile Responsive Styles * Comprehensive mobile fixes for all components * Breakpoint: 768px and below */ /* ============================================ Mobile Variables and Reset ============================================ */ :root { --mobile-header-height: 56px; --mobile-padding: 6px; --mobile-gap: 12px; --touch-target-min: 44px; } /* ============================================ Mobile Main Content - Lower stacking context ============================================ */ @media (max-width: 768px) { main { position: relative; z-index: 1; } } /* ============================================ Mobile Close Button ============================================ */ .mobile-dropdown-close { display: none; /* Hidden by default */ } @media (max-width: 768px) { .mobile-dropdown-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; background: var(--bg-secondary, #f5f5f7); border: none; border-radius: 50%; cursor: pointer; z-index: 10; transition: background-color 0.2s ease; } .mobile-dropdown-close:hover, .mobile-dropdown-close:active { background: var(--bg-tertiary, #e5e5e7); } .mobile-dropdown-close svg { width: 20px; height: 20px; stroke: var(--text-color, #1D2433); } /* Notifications close button - inline in header */ .notifications-close { position: relative; top: auto; right: auto; margin-right: auto; } .notifications-header { display: flex; align-items: center; gap: 12px; } .notifications-header h3 { flex: 1; } } /* ============================================ Mobile Hamburger Menu Button ============================================ */ /* Hidden by default (desktop) */ .mobile-menu-btn, .mobile-search-btn { display: none; } @media (max-width: 768px) { .mobile-menu-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; border-radius: var(--radius-lg); cursor: pointer; padding: 0; margin-left: 8px; transition: background-color 0.2s ease; position: relative; z-index: 100; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mobile-menu-btn:hover, .mobile-menu-btn:active { background: var(--bg-secondary, rgba(0, 0, 0, 0.05)); } .mobile-menu-btn svg { width: 20px; height: 20px; stroke: var(--color-text-primary, #333); } } /* ============================================ Mobile Header ============================================ */ @media (max-width: 768px) { /* Header container - boost z-index for mobile dropdowns */ header { height: var(--mobile-header-height); z-index: 10000 !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } /* Scroll-aware header states (YouTube-style headroom) */ header.header--hidden { transform: translateY(-100%); } header.header--visible { transform: translateY(0); } header .container { height: var(--mobile-header-height); padding: 0 var(--mobile-padding); gap: 8px; } .header-left { flex-shrink: 0; } /* Logo */ .logo { margin-right: 0; } .header-logo-img { width: 20px; height: 20px; } /* Mobile logo/title adjustments */ .header-page-name { font-size: 0.9375rem; } .logo img, .logo svg { width: 28px !important; height: 28px !important; } /* Hide page title on mobile */ .page-title-header { display: none; } /* Search box - expand to fill available space */ .search-box { flex: 1; max-width: none; margin: 0 8px; min-width: 0; } .search-box input { width: 100%; min-width: 0; padding: 8px 12px 8px 32px; font-size: var(--font-size-lg); /* Prevents iOS zoom */ border-radius: var(--radius-lg); } /* Dictionary button - hide on mobile */ .dictionary-button { display: none !important; } /* Nav menu - compact */ nav ul.nav-menu { gap: 2px; } /* Navigation icons */ .nav-icon-link { padding: 8px; min-width: var(--touch-target-min); min-height: var(--touch-target-min); } .nav-icon-link svg { width: 20px; height: 20px; } /* Hide icon labels/tooltips on mobile */ .nav-icon-link::after, .nav-icon-link::before { display: none !important; } /* === Mobile Search Button === */ .mobile-search-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; padding: 6px; color: var(--color-text-primary, #333); min-width: 36px; min-height: 36px; } .mobile-search-btn svg { width: 20px; height: 20px; } /* Hide the inline search box on mobile — use the search icon instead */ .search-box { display: none !important; } /* === Messages icon visible on mobile === */ .messages-nav-item { display: list-item !important; } .messages-nav-item > a { display: flex !important; } } /* ============================================ Mobile Dropdown Menus (Logo, Profile, etc.) ============================================ */ @media (max-width: 768px) { /* Full-screen overlay for dropdowns */ .nav-dropdown-panel, .profile-dropdown-panel, .logo-dropdown-panel { position: fixed !important; top: var(--mobile-header-height) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: calc(100dvh - 56px) !important; max-width: none !important; min-width: unset !important; max-height: none !important; border-radius: 0 !important; transform: none !important; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 99999 !important; background: var(--bg-color, #fff); isolation: isolate; pointer-events: none; } /* When panel is moved to body and needs to show */ .nav-dropdown-panel.mobile-active-panel, .profile-dropdown-panel.mobile-active-panel { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Ensure dropdown content receives clicks */ .nav-dropdown-container.mobile-active .nav-dropdown-panel, .logo-dropdown.mobile-active .nav-dropdown-panel, .profile-dropdown.mobile-active .profile-dropdown-panel { pointer-events: auto !important; } .nav-dropdown-panel *, .profile-dropdown-panel *, .logo-dropdown-panel * { pointer-events: auto; } /* Ensure header-left doesn't block dropdown */ .header-left { overflow: visible !important; } /* When dropdown is active, lower main content stacking */ body:has(.mobile-active) main { z-index: 1 !important; position: relative; } /* Disable hover on mobile - use click only */ .nav-dropdown-container:hover .nav-dropdown-panel, .logo-dropdown:hover .nav-dropdown-panel, .profile-dropdown:hover .profile-dropdown-panel { opacity: 0 !important; visibility: hidden !important; } /* Show when active (via JS click) */ .nav-dropdown-container.mobile-active .nav-dropdown-panel, .logo-dropdown.mobile-active .nav-dropdown-panel, .profile-dropdown.mobile-active .profile-dropdown-panel { opacity: 1 !important; visibility: visible !important; } /* Ensure dropdown panel links are visible (override .nav-menu a:not(.button) { display: none }) */ .nav-dropdown-panel a, .profile-dropdown-panel a, .notifications-dropdown a { display: flex !important; } /* Dropdown inner layout */ .nav-dropdown-inner { flex-direction: column; padding: var(--mobile-padding); } /* Dropdown main section */ .nav-dropdown-main { display: flex; flex-direction: column; gap: 4px; } /* Dropdown items - larger touch targets */ .nav-dropdown-item { padding: 16px; min-height: var(--touch-target-min); border-radius: var(--radius-xl); } .nav-dropdown-item-icon { width: 40px; height: 40px; } .nav-dropdown-item-icon svg { width: 24px; height: 24px; } .nav-dropdown-item-title { font-size: var(--font-size-lg); } .nav-dropdown-item-desc { font-size: var(--font-size-md); } /* Dropdown sidebar - full width on mobile */ .nav-dropdown-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border-color, #e5e5e5); margin-top: 16px; padding-top: 16px; } .nav-dropdown-sidebar-item { padding: 12px 16px; min-height: var(--touch-target-min); font-size: 15px; } } /* ============================================ Mobile Profile Dropdown ============================================ */ @media (max-width: 768px) { .profile-dropdown-header { padding: 20px; } .profile-dropdown-avatar { width: 56px; height: 56px; } .profile-dropdown-name { font-size: 18px; } .profile-dropdown-email { font-size: var(--font-size-md); } .profile-dropdown-menu { padding: 8px; } .profile-dropdown-item { padding: 14px 16px; min-height: var(--touch-target-min); font-size: var(--font-size-lg); border-radius: 10px; } .profile-dropdown-item svg { width: 22px; height: 22px; } } /* ============================================ Mobile Notifications Dropdown ============================================ */ @media (max-width: 768px) { .notifications-container { position: static !important; } .notifications-button { min-width: var(--touch-target-min); min-height: var(--touch-target-min); padding: 8px; } .notifications-dropdown { position: fixed !important; top: var(--mobile-header-height) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; border: none !important; z-index: 9999; } .notifications-header { padding: 16px; position: sticky; top: 0; background: var(--bg-color, #fff); z-index: 1; } .notifications-header h3 { font-size: 18px; } .notifications-list { max-height: none; padding-bottom: 100px; /* Safe area for bottom */ } .notification-item { padding: 16px; min-height: 60px; } .notification-content { font-size: 15px; } .notifications-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 16px; background: var(--bg-color, #fff); border-top: 1px solid var(--border-color, #e5e5e5); } .view-all-link { display: block; padding: 12px; text-align: center; font-size: var(--font-size-lg); } } /* ============================================ Mobile Spotlight Search ============================================ */ @media (max-width: 768px) { .spotlight-overlay { padding-top: 0; align-items: flex-start; } .spotlight-container { width: 100%; max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; border: none; } /* Mobile close button for spotlight */ .spotlight-close-btn { display: flex !important; align-items: center; justify-content: center; background: none; border: none; color: var(--color-accent, #5A7A6A); font-size: 16px; font-weight: 500; padding: 8px 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .spotlight-search-header { display: flex; align-items: center; } .spotlight-search-header .spotlight-input { flex: 1; min-width: 0; } .spotlight-input { font-size: var(--font-size-lg); /* Prevents iOS zoom */ padding: 16px 20px; } .spotlight-hint { padding: 10px 16px; } .spotlight-results { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .spotlight-result-item { padding: 14px 16px; min-height: 56px; } .spotlight-result-icon { width: 36px; height: 36px; } .spotlight-result-title { font-size: 15px; } .spotlight-result-snippet { font-size: 13px; } } /* ============================================ Mobile Auth Modals (Login/Register) ============================================ */ @media (max-width: 768px) { .auth-modal-content { width: 100%; max-width: none; min-height: 100vh; border-radius: 0; margin: 0; } .auth-modal-header { padding: 24px 20px; } .auth-modal-body { padding: 0 20px 24px; } .auth-form-group label { font-size: var(--font-size-md); } .auth-form-group input { padding: 14px 16px; font-size: var(--font-size-lg); /* Prevents iOS zoom */ } .auth-modal-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 28px; } } /* ============================================ Mobile Main Content ============================================ */ @media (max-width: 768px) { /* Fix main element - remove flex that causes vertical issues */ /* Header is hidden on mobile (tab bar replaces it), so no top padding needed */ main { display: block !important; padding-top: 0 !important; min-height: auto; } /* Content wrapper - ensure proper display */ .content-wrapper { padding: var(--mobile-padding); width: 100% !important; max-width: 100% !important; } /* Wiki container - fix layout */ .wiki-container { display: block !important; width: 100%; } /* Wiki content - remove left margin from sidebar */ .wiki-content { margin-left: 0 !important; width: 100% !important; padding: 0; } /* Sidebar TOC overlay handled by style.css @media (max-width: 1000px) */ /* Ensure proper padding for layout classes */ .layout-full, .layout-wide, .layout-medium, .layout-narrow { padding-left: var(--mobile-padding); padding-right: var(--mobile-padding); } /* Full page containers */ .full-page { width: 100%; padding: 0 var(--mobile-padding); } /* Page headers */ .page-header { padding: 12px 0; margin-bottom: 0; } .page-header .title-section, .page-title-section { flex-direction: column; align-items: flex-start; gap: 12px; } .page-title-section h1 { font-size: 1.25rem; line-height: 1.3; } .page-title { font-size: 1.25rem; } /* TOC toggle button on mobile */ .toc-toggle-btn { display: inline-flex; margin-right: 8px; } .create-area-btn { width: 100%; justify-content: center; } } /* ============================================ Mobile Forms ============================================ */ @media (max-width: 768px) { /* Search filters */ .search-filters { flex-direction: column; gap: 12px; } .filter-group { width: 100%; } .filter-select { width: 100%; padding: 12px 16px; font-size: var(--font-size-lg); /* Prevents iOS zoom */ } .search-actions { width: 100%; } .search-actions button { width: 100%; padding: 12px; } /* Form inputs */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], textarea, select { font-size: var(--font-size-lg); /* Prevents iOS zoom */ } } /* ============================================ Mobile Tables ============================================ */ @media (max-width: 768px) { /* Horizontal scroll wrapper for tables */ .table-wrapper, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--mobile-padding)); padding: 0 var(--mobile-padding); } table { min-width: 600px; } th, td { padding: 12px 8px; font-size: var(--font-size-md); } } /* ============================================ Mobile Cards and Lists ============================================ */ @media (max-width: 768px) { /* Card grids - single column */ .cards-grid, .theorems-grid, .pages-grid { grid-template-columns: 1fr !important; gap: 12px; } /* Card styling */ .card, .theorem-card, .page-card { padding: 16px; } /* List items */ .list-item { padding: 14px 16px; } } /* ============================================ Mobile Tooltips - Hide All ============================================ */ @media (max-width: 768px) { [title]::after, [title]::before, .tooltip, [data-tooltip]::after, [data-tooltip]::before { display: none !important; } } /* ============================================ Mobile Touch Improvements ============================================ */ @media (max-width: 768px) { /* Better touch targets - only for nav/icon elements, not styled buttons */ [role="button"]:not(.btn):not(button) { min-height: 44px; min-width: 44px; } /* Disable hover states on touch devices */ @media (hover: none) { a:hover, button:hover, .btn:hover { /* Reset hover styles for touch devices */ } } /* Active states for touch feedback */ a:active, button:active, .btn:active { opacity: 0.7; transform: scale(0.98); } } /* ============================================ Mobile Safe Areas (Notch support) ============================================ */ @supports (padding-top: env(safe-area-inset-top)) { @media (max-width: 768px) { header { padding-top: env(safe-area-inset-top); height: calc(var(--mobile-header-height) + env(safe-area-inset-top)); } .notifications-dropdown, .nav-dropdown-panel, .profile-dropdown-panel { padding-bottom: env(safe-area-inset-bottom); } .spotlight-container { padding-bottom: env(safe-area-inset-bottom); } } } /* ============================================ Mobile Utility Classes ============================================ */ @media (max-width: 768px) { .hide-mobile { display: none !important; } .show-mobile { display: block !important; } .show-mobile-flex { display: flex !important; } .show-mobile-inline { display: inline !important; } .mobile-full-width { width: 100% !important; } .mobile-text-center { text-align: center !important; } .mobile-stack { flex-direction: column !important; } } /* ============================================ Mobile Thread Panel (Chat) ============================================ */ @media (max-width: 768px) { /* Ensure thread panel is hidden by default on mobile */ .thread-panel { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 10000 !important; transform: none !important; } /* Only show when explicitly opened */ .thread-panel.open { display: flex !important; } } /* ============================================ Mobile Chat Navigation (Slack-style) ============================================ */ /* Hide back button on desktop */ .mobile-chat-back-btn { display: none; } @media (max-width: 768px) { /* Show mobile back button */ .mobile-chat-back-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; border-radius: var(--radius-lg); cursor: pointer; padding: 0; margin-right: 8px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mobile-chat-back-btn:hover, .mobile-chat-back-btn:active { background: rgba(0, 0, 0, 0.05); } .mobile-chat-back-btn svg { width: 20px; height: 20px; stroke: var(--color-text-primary, #1D2433); } /* Chat menu container - full screen on mobile */ .chat-menu-container { display: block !important; } /* Hide collapsed sidebar on mobile */ .chat-menu-collapsed { display: none !important; } /* Channel list (chat-menu) - full screen, shown by default */ .chat-menu { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; z-index: 1000 !important; background: var(--color-bg-primary, #fff) !important; transform: none !important; display: flex !important; flex-direction: column !important; } /* Chat content - full screen, hidden by default on mobile */ .chat-content { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; z-index: 1001 !important; display: none !important; } /* When conversation is active, show chat content */ .chat-content.mobile-conversation-view { display: flex !important; flex-direction: column !important; } /* Chat content header adjustments */ .chat-content-header { display: flex; align-items: center; padding: 8px 12px; } .chat-content-header .channel-info { flex: 1; display: flex; align-items: center; overflow: hidden; } .chat-content-header .channel-info h3 { font-size: var(--font-size-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hide member count on very small screens */ .chat-content-header .member-count { display: none; } /* Ensure channel items are tappable */ .channel-item { min-height: 44px; padding: 12px 16px; } .dm-item { min-height: 44px; padding: 12px 16px; } /* Close button visible on mobile */ .chat-menu-close { display: flex !important; } } /* Hide on desktop, show on mobile */ @media (min-width: 769px) { .show-mobile, .show-mobile-flex, .show-mobile-inline, .mobile-only { display: none !important; } } /* ============================================ Mobile GitHub Stars (Header) ============================================ */ @media (max-width: 768px) { .github-stars-container { display: none; } .auth-buttons-container { display: flex; gap: 8px; } .auth-buttons-container .btn { padding: 8px 12px; font-size: var(--font-size-md); } } /* ============================================ Dark Mode Mobile Overrides ============================================ */ @media (max-width: 768px) { :root[data-theme="dark"] .nav-dropdown-panel, :root[data-theme="dark"] .profile-dropdown-panel, :root[data-theme="dark"] .notifications-dropdown { background: var(--color-bg-secondary); border-color: var(--color-bg-active); } :root[data-theme="dark"] .notifications-header, :root[data-theme="dark"] .notifications-footer { background: var(--color-bg-secondary); } } /* ============================================ Fix #6: Mobile Header — hide GitHub Stars on small screens to reduce crowding (Sign in wrapping to 2 lines) ============================================ */ @media (max-width: 480px) { .github-stars-container { display: none !important; } } /* ============================================ Fix #7: Theorem Detail Tab Bar — horizontal scroll on mobile ============================================ */ @media (max-width: 768px) { .theorem-tabs, .tab-nav, .tabs-header, .content-section .section-header + .tabs, [class*="tab-bar"], .theorem-detail-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .theorem-tabs::-webkit-scrollbar, .tab-nav::-webkit-scrollbar, .tabs-header::-webkit-scrollbar, .theorem-detail-tabs::-webkit-scrollbar { display: none; } /* Make tabs row not wrap */ .theorem-tabs a, .theorem-tabs button, .tab-nav a, .tab-nav button, .tabs-header a, .tabs-header button { white-space: nowrap; flex-shrink: 0; } } /* ============================================ Fix #8: Collapsible Theorem Search Form on Mobile ============================================ */ @media (max-width: 768px) { .theorem-search-form, .theorems-filter-form { position: relative; } .theorem-search-form .filter-fields, .theorems-filter-form .filter-inputs { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .theorem-search-form.expanded .filter-fields, .theorems-filter-form.expanded .filter-inputs { max-height: 500px; } } /* ============================================ Fix #4 + #11: Profile Activity Heatmap Mobile: hide month labels that overflow Desktop: add spacing between labels ============================================ */ /* Desktop — prevent month label overlap */ .heatmap-months, .activity-heatmap text, .heatmap-container svg text { font-size: 11px; } @media (max-width: 768px) { /* Make heatmap horizontally scrollable with hidden scrollbar */ .activity-heatmap, .heatmap-container, .heatmap-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; max-width: 100%; } .activity-heatmap::-webkit-scrollbar, .heatmap-container::-webkit-scrollbar, .heatmap-wrapper::-webkit-scrollbar { display: none; } /* Scale down the heatmap SVG on mobile */ .activity-heatmap svg, .heatmap-container svg { min-width: 650px; height: auto; } } /* ============================================ Fix #13: Wiki Pages Search Form — compact grid layout ============================================ */ @media (max-width: 768px) { .pages-filter-form, .knowledge-base-filters { display: flex; flex-direction: column; gap: 8px; } .pages-filter-form label, .knowledge-base-filters label { font-size: 13px; margin-bottom: 2px; } .pages-filter-form select, .pages-filter-form input, .knowledge-base-filters select, .knowledge-base-filters input { width: 100%; padding: 10px; font-size: 16px; /* Prevent iOS zoom */ } } /* === colloq.css === */ /** * Colloq — Voice Room / Huddle Feature * ===================================== * Voice channel bar, participant avatars, controls, screen share preview. * Uses design tokens from design-tokens.css throughout. */ /* =================== ANIMATIONS =================== */ @keyframes colloq-slide-down { from { opacity: 0; max-height: 0; transform: translateY(-8px); } to { opacity: 1; max-height: 80px; transform: translateY(0); } } @keyframes colloq-slide-up { from { opacity: 1; max-height: 80px; transform: translateY(0); } to { opacity: 0; max-height: 0; transform: translateY(-8px); } } @keyframes colloq-speaking-pulse { 0% { box-shadow: 0 0 0 0 rgba(90, 122, 106, 0.45); } 70% { box-shadow: 0 0 0 5px rgba(90, 122, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(90, 122, 106, 0); } } @keyframes colloq-active-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes colloq-join-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } @keyframes colloq-leave-shrink { from { transform: scale(1); opacity: 1; } to { transform: scale(0); opacity: 0; } } /* =================== COLLOQ BAR Top banner above the message area =================== */ .colloq-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); min-height: 48px; max-height: 56px; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); position: relative; z-index: var(--z-sticky); flex-shrink: 0; /* Entrance animation */ animation: colloq-slide-down 0.25s var(--transition-normal) forwards; overflow: hidden; } .colloq-bar.leaving { animation: colloq-slide-up 0.2s ease forwards; pointer-events: none; } .colloq-bar-left { display: flex; align-items: center; gap: var(--spacing-sm); min-width: 0; flex: 1; } .colloq-bar-right { display: flex; align-items: center; gap: var(--spacing-xs); flex-shrink: 0; } /* Status label: small "Colloq" text or live indicator */ .colloq-bar-label { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); white-space: nowrap; user-select: none; } .colloq-bar-label .colloq-live-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-accent); animation: colloq-active-dot 1.5s ease-in-out infinite; flex-shrink: 0; } /* =================== COLLOQ START BUTTON Icon button in the channel header toolbar =================== */ .colloq-start-btn { position: relative; width: 32px; height: 32px; background: none; border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); padding: 0; } .colloq-start-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .colloq-start-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-border-strong); } .colloq-start-btn:active { background: var(--color-bg-active); } .colloq-start-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* Active-colloq indicator: green dot on the button */ .colloq-start-btn .colloq-active-indicator { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-accent); border: 2px solid var(--color-bg-primary); animation: colloq-active-dot 1.5s ease-in-out infinite; } /* When colloq is active, subtly tint the button */ .colloq-start-btn.active { color: var(--color-accent); border-color: var(--color-accent-subtle); background: var(--color-accent-subtle); } .colloq-start-btn.active:hover { background: var(--color-accent-subtle); border-color: var(--color-accent); } /* =================== PARTICIPANT AVATARS Overlapping row of small circles =================== */ .colloq-participants { display: flex; align-items: center; flex-shrink: 0; } .colloq-participant { position: relative; width: 30px; height: 30px; border-radius: var(--radius-full); border: 2px solid var(--color-bg-secondary); overflow: visible; flex-shrink: 0; transition: transform var(--transition-fast); /* Entrance */ animation: colloq-join-pop 0.25s ease forwards; } /* Overlap: every avatar after the first shifts left */ .colloq-participant + .colloq-participant { margin-left: -8px; } .colloq-participant:hover { z-index: 2; transform: translateY(-1px); } .colloq-participant img { width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover; display: block; } /* Fallback when no avatar image */ .colloq-participant .colloq-avatar-fallback { width: 100%; height: 100%; border-radius: var(--radius-full); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); text-transform: uppercase; line-height: 1; } /* Speaking state: green ring with pulse */ .colloq-participant.speaking { border-color: var(--color-accent); animation: colloq-speaking-pulse 1.4s ease-in-out infinite; } /* Muted overlay: small icon badge in bottom-right */ .colloq-participant .colloq-muted-badge { position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); display: flex; align-items: center; justify-content: center; z-index: 3; } .colloq-participant .colloq-muted-badge svg { width: 8px; height: 8px; color: var(--color-danger); } /* Leaving animation */ .colloq-participant.leaving { animation: colloq-leave-shrink 0.2s ease forwards; } /* Overflow count: "+3" pill */ .colloq-participant-overflow { width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--color-bg-tertiary); border: 2px solid var(--color-bg-secondary); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); cursor: default; flex-shrink: 0; user-select: none; } /* Names / count text next to avatars */ .colloq-participant-names { margin-left: var(--spacing-sm); font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* =================== CONTROLS Mute, Screen Share, Leave =================== */ .colloq-controls { display: flex; align-items: center; gap: var(--spacing-xs); } .colloq-control-btn { width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--color-border-primary); background: var(--color-bg-tertiary); color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .colloq-control-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .colloq-control-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-border-strong); } .colloq-control-btn:active { background: var(--color-bg-active); } .colloq-control-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* Mute button — default (unmuted) */ .colloq-btn-mute { /* inherits base .colloq-control-btn styles */ } /* Mute button — muted state */ .colloq-btn-mute.muted { background: var(--color-danger-subtle); border-color: var(--color-danger); color: var(--color-danger); } .colloq-btn-mute.muted:hover { background: var(--color-danger); color: var(--color-white); } /* Screen share button */ .colloq-btn-screenshare { /* inherits base .colloq-control-btn styles */ } /* Screen share — active state */ .colloq-btn-screenshare.sharing { background: var(--color-accent-subtle); border-color: var(--color-accent); color: var(--color-accent-dark); } .colloq-btn-screenshare.sharing:hover { background: var(--color-accent); color: var(--color-white); } /* Leave / hang-up button — solid red (matching Paper design) */ .colloq-btn-leave { background: var(--color-danger); border-color: transparent; color: var(--color-white); } .colloq-btn-leave:hover { background: #b91c1c; color: var(--color-white); border-color: transparent; } .colloq-btn-leave:active { filter: brightness(0.9); } /* Join button — shown instead of leave when not in the colloq */ .colloq-btn-join { height: 32px; padding: 0 var(--spacing-sm); border-radius: var(--radius-full); border: none; background: var(--color-accent); color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background-color var(--transition-fast), box-shadow var(--transition-fast); } .colloq-btn-join svg { width: 14px; height: 14px; flex-shrink: 0; } .colloq-btn-join:hover { background: var(--color-accent-dark); } .colloq-btn-join:active { filter: brightness(0.9); } .colloq-btn-join:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(90, 122, 106, 0.35); } /* =================== SCREEN SHARE PREVIEW =================== */ .colloq-screen-share { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--transition-fast); } .colloq-screen-share:hover { background: var(--color-bg-tertiary); } .colloq-screen-share-icon { width: 16px; height: 16px; color: var(--color-accent); flex-shrink: 0; } .colloq-screen-share-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .colloq-screen-share-label strong { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } /* Thumbnail preview of the shared screen */ .colloq-screen-share-preview { width: 200px; aspect-ratio: 16 / 9; border-radius: var(--radius-md); border: 1px solid var(--color-border-primary); overflow: hidden; flex-shrink: 0; background: var(--color-black); position: relative; } .colloq-screen-share-preview img, .colloq-screen-share-preview video { width: 100%; height: 100%; object-fit: contain; } /* Expand hint on hover */ .colloq-screen-share-preview::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background var(--transition-fast); } .colloq-screen-share-preview:hover::after { background: rgba(0, 0, 0, 0.25); } /* Expanded / larger view */ .colloq-screen-share-expanded { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-bg-overlay); display: flex; align-items: center; justify-content: center; padding: var(--spacing-xl); } .colloq-screen-share-expanded-inner { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-black); box-shadow: var(--shadow-xl); } .colloq-screen-share-expanded-inner img, .colloq-screen-share-expanded-inner video { width: 100%; height: 100%; object-fit: contain; } .colloq-screen-share-expanded-close { position: absolute; top: var(--spacing-md); right: var(--spacing-md); width: 36px; height: 36px; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.6); border: none; color: var(--color-white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast); } .colloq-screen-share-expanded-close:hover { background: rgba(0, 0, 0, 0.85); } .colloq-screen-share-expanded-close svg { width: 18px; height: 18px; } /* =================== UTILITY / STATE MODIFIERS =================== */ /* Hidden state (for JS toggling) */ .colloq-bar[hidden], .colloq-screen-share[hidden] { display: none; } /* Reduced-motion: disable all animations */ @media (prefers-reduced-motion: reduce) { .colloq-bar, .colloq-bar.leaving, .colloq-participant, .colloq-participant.speaking, .colloq-participant.leaving, .colloq-start-btn .colloq-active-indicator, .colloq-bar-label .colloq-live-dot { animation: none; } .colloq-participant.speaking { box-shadow: 0 0 0 2px var(--color-accent); } } /* =================== RESPONSIVE =================== */ @media (max-width: 640px) { .colloq-bar { padding: var(--spacing-xs) var(--spacing-sm); gap: var(--spacing-sm); min-height: 44px; } /* Hide the text names on small screens, keep avatars */ .colloq-participant-names { display: none; } .colloq-bar-label span:not(.colloq-live-dot) { display: none; } .colloq-participant { width: 26px; height: 26px; } .colloq-participant + .colloq-participant { margin-left: -6px; } .colloq-participant-overflow { width: 26px; height: 26px; font-size: 10px; } .colloq-control-btn { width: 28px; height: 28px; } .colloq-control-btn svg { width: 14px; height: 14px; } .colloq-btn-join { height: 28px; padding: 0 var(--spacing-xs); font-size: var(--font-size-xs); } .colloq-screen-share-preview { width: 140px; } } /* =================== DURATION TIMER Shown next to the Colloq label =================== */ .colloq-timer { font-size: var(--font-size-xs); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; user-select: none; } /* =================== DIVIDER Vertical separator in the bar =================== */ .colloq-bar-divider { width: 1px; height: 20px; background: var(--color-border-primary); flex-shrink: 0; } /* =================== SIDEBAR INDICATOR Green dot + count next to channels with active Colloqs =================== */ .colloq-sidebar-indicator { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; } .colloq-sidebar-indicator .colloq-sidebar-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-success); animation: colloq-active-dot 1.5s ease-in-out infinite; } .colloq-sidebar-indicator .colloq-sidebar-count { font-size: 10px; font-weight: 500; color: var(--color-success); line-height: 1; } /* =================== CHAT NOTICE "X started a Colloq" inline in message stream =================== */ .colloq-chat-notice { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0; } .colloq-chat-notice-line { flex: 1; height: 1px; background: #d4edda; } .colloq-chat-notice-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: #f0faf0; border-radius: 12px; border: 1px solid #d4edda; white-space: nowrap; } .colloq-chat-notice-pill svg { width: 12px; height: 12px; color: var(--color-success); flex-shrink: 0; } .colloq-chat-notice-pill .colloq-notice-text { font-size: 12px; font-weight: 500; color: var(--color-success); } .colloq-chat-notice-pill .colloq-notice-time { font-size: 11px; color: #86efac; } /* Dark mode adjustments for chat notice */ :root[data-theme="dark"] .colloq-chat-notice-line { background: rgba(34, 197, 94, 0.15); } :root[data-theme="dark"] .colloq-chat-notice-pill { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.2); } :root[data-theme="dark"] .colloq-chat-notice-pill .colloq-notice-text { color: #4ade80; } :root[data-theme="dark"] .colloq-chat-notice-pill .colloq-notice-time { color: rgba(74, 222, 128, 0.5); } /* =================== FLOATING PIP (Picture-in-Picture) Persistent mini card that survives page navigation =================== */ @keyframes colloq-pip-enter { from { opacity: 0; transform: translateY(12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes colloq-pip-exit { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(12px) scale(0.95); } } .colloq-pip { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 280px; background: #1c1c1e; border-radius: 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2); color: var(--color-text-inverse); overflow: hidden; animation: colloq-pip-enter 0.25s ease forwards; user-select: none; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); } .colloq-pip.leaving { animation: colloq-pip-exit 0.2s ease forwards; pointer-events: none; } .colloq-pip[hidden] { display: none; } /* -- Pip Header: channel name + live dot + timer -- */ .colloq-pip-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; cursor: grab; } .colloq-pip-header:active { cursor: grabbing; } .colloq-pip-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; animation: colloq-active-dot 1.5s ease-in-out infinite; } .colloq-pip-channel { font-size: 13px; font-weight: 600; color: var(--color-text-inverse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .colloq-pip-timer { font-size: 11px; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } /* -- Pip Participants Row -- */ .colloq-pip-participants { display: flex; align-items: center; gap: 0; padding: 4px 14px 10px; } .colloq-pip-participant { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #1c1c1e; overflow: hidden; flex-shrink: 0; position: relative; } .colloq-pip-participant + .colloq-pip-participant { margin-left: -6px; } .colloq-pip-participant img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .colloq-pip-participant .colloq-pip-avatar-fallback { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: var(--color-text-inverse); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; text-transform: uppercase; line-height: 1; } .colloq-pip-participant.speaking { border-color: #22c55e; animation: colloq-speaking-pulse 1.4s ease-in-out infinite; } .colloq-pip-participant-count { margin-left: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; } /* -- Pip Controls Row -- */ .colloq-pip-controls { display: flex; align-items: center; gap: 6px; padding: 0 14px 12px; } .colloq-pip-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color 0.15s ease, color 0.15s ease; } .colloq-pip-btn svg { width: 15px; height: 15px; flex-shrink: 0; } .colloq-pip-btn:hover { background: rgba(255, 255, 255, 0.18); color: var(--color-text-inverse); } .colloq-pip-btn:active { background: rgba(255, 255, 255, 0.08); } /* Muted state */ .colloq-pip-btn.muted { background: rgba(220, 38, 38, 0.25); color: #f87171; } .colloq-pip-btn.muted:hover { background: rgba(220, 38, 38, 0.4); color: #fca5a5; } /* Expand button — pushes to right */ .colloq-pip-btn-expand { margin-left: auto; } /* Leave button — red */ .colloq-pip-btn-leave { background: var(--color-danger); color: var(--color-text-inverse); } .colloq-pip-btn-leave:hover { background: #b91c1c; color: var(--color-text-inverse); } .colloq-pip-btn-leave:active { background: #991b1b; } /* -- Pip Responsive -- */ @media (max-width: 640px) { .colloq-pip { bottom: 12px; right: 12px; left: 12px; width: auto; } } /* Reduced-motion */ @media (prefers-reduced-motion: reduce) { .colloq-pip, .colloq-pip.leaving, .colloq-pip-live-dot, .colloq-pip-participant.speaking { animation: none; } .colloq-pip-participant.speaking { box-shadow: 0 0 0 2px #22c55e; } } /* =================== SETTINGS OVERLAY + PANEL Fixed overlay modal for audio device & volume controls =================== */ .colloq-settings-overlay { position: fixed; inset: 0; z-index: 999999; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; animation: colloq-settings-backdrop-enter 0.15s ease; } .colloq-settings-overlay.closing { animation: colloq-settings-backdrop-exit 0.15s ease forwards; pointer-events: none; } @keyframes colloq-settings-backdrop-enter { from { opacity: 0; } to { opacity: 1; } } @keyframes colloq-settings-backdrop-exit { from { opacity: 1; } to { opacity: 0; } } .colloq-settings-panel { width: 320px; max-width: calc(100vw - 32px); background: var(--color-bg-primary, #fff); border: 1px solid var(--color-border-primary, #e0e0e0); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1); padding: 20px; font-size: 13px; color: var(--color-text-primary, #111); animation: colloq-settings-enter 0.2s ease; } /* Dark variant when triggered from pip mode */ .colloq-settings-overlay.pip-mode .colloq-settings-panel { background: #2c2c2e; border-color: rgba(255, 255, 255, 0.1); color: var(--color-text-inverse); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25); } @keyframes colloq-settings-enter { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .colloq-settings-title { font-size: 13px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; } .colloq-settings-close { width: 22px; height: 22px; border: none; background: none; color: inherit; opacity: 0.5; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 16px; line-height: 1; padding: 0; } .colloq-settings-close:hover { opacity: 1; background: rgba(128, 128, 128, 0.15); } .colloq-settings-group { margin-bottom: 14px; } .colloq-settings-group:last-child { margin-bottom: 0; } .colloq-settings-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin-bottom: 6px; display: block; } .colloq-settings-select { width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--color-border-primary); background: var(--color-bg-secondary); color: inherit; font-size: 12px; font-family: inherit; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px; } .colloq-settings-overlay.pip-mode .colloq-settings-select { border-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } .colloq-settings-select:focus { border-color: var(--color-accent, #5a7a6a); } .colloq-settings-select option { background: var(--color-bg-primary); color: var(--color-text-primary); } .colloq-settings-overlay.pip-mode .colloq-settings-select option { background: #2c2c2e; color: var(--color-text-inverse); } /* Volume slider */ .colloq-settings-slider-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .colloq-settings-slider-row svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; } .colloq-settings-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: rgba(128, 128, 128, 0.25); outline: none; cursor: pointer; } .colloq-settings-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent, #5a7a6a); border: none; cursor: pointer; transition: transform 0.1s ease; } .colloq-settings-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .colloq-settings-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent, #5a7a6a); border: none; cursor: pointer; } .colloq-settings-overlay.pip-mode .colloq-settings-slider::-webkit-slider-thumb { background: var(--color-success); } .colloq-settings-overlay.pip-mode .colloq-settings-slider::-moz-range-thumb { background: var(--color-success); } .colloq-settings-slider-value { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.6; min-width: 28px; text-align: right; } /* Separator line */ .colloq-settings-separator { height: 1px; background: rgba(128, 128, 128, 0.2); margin: 12px 0; } /* Settings button active state */ .colloq-btn-settings.active { background: var(--color-accent-subtle); border-color: var(--color-accent); color: var(--color-accent-dark); } .colloq-pip-btn-settings.active { background: rgba(34, 197, 94, 0.2); color: var(--color-success); } /* === incoming-call.css === */ /** * Incoming Call Overlay * --------------------- * Full-screen overlay shown when a Colloq voice call is active in a channel * the user belongs to. Uses the Androma design language with dark-mode card * styling, green pulse rings, and slide-up/fade-out transitions. */ /* ── Overlay backdrop ── */ .incoming-call-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); opacity: 0; animation: incomingCallFadeIn 0.3s ease forwards; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .incoming-call-overlay.is-dismissing { animation: incomingCallFadeOut 0.35s ease forwards; } /* ── Card ── */ .incoming-call-card { width: 380px; max-width: calc(100vw - 32px); background: #1c1c1e; border-radius: 24px; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5); padding: 40px 32px 36px; display: flex; flex-direction: column; align-items: center; text-align: center; transform: translateY(40px); opacity: 0; animation: incomingCallSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.08s forwards; } .incoming-call-overlay.is-dismissing .incoming-call-card { animation: incomingCallSlideDown 0.3s ease forwards; } /* ── "INCOMING CALL" label ── */ .incoming-call-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-bottom: 28px; } /* ── Avatar with pulse rings ── */ .incoming-call-avatar-wrap { position: relative; width: 96px; height: 96px; margin-bottom: 24px; } /* Pulse rings */ .incoming-call-avatar-wrap::before, .incoming-call-avatar-wrap::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid #22c55e; opacity: 0; animation: incomingCallPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite; } .incoming-call-avatar-wrap::after { animation-delay: 0.6s; } .incoming-call-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; } .incoming-call-avatar-fallback { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 600; color: var(--color-text-inverse); user-select: none; } /* ── Caller info ── */ .incoming-call-name { font-size: 1.25rem; font-weight: 600; color: var(--color-text-inverse); margin-bottom: 4px; line-height: 1.3; } .incoming-call-channel { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); margin-bottom: 36px; line-height: 1.4; } /* ── Action buttons row ── */ .incoming-call-actions { display: flex; align-items: flex-start; gap: 56px; } .incoming-call-action { display: flex; flex-direction: column; align-items: center; gap: 8px; } .incoming-call-btn { width: 56px; height: 56px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; outline: none; } .incoming-call-btn:hover { transform: scale(1.1); } .incoming-call-btn:active { transform: scale(0.95); } .incoming-call-btn--decline { background: var(--color-danger); box-shadow: 0 4px 20px rgba(220, 38, 38, 0.35); } .incoming-call-btn--decline:hover { box-shadow: 0 6px 28px rgba(220, 38, 38, 0.5); } .incoming-call-btn--accept { background: var(--color-success); box-shadow: 0 4px 20px rgba(34, 197, 94, 0.35); } .incoming-call-btn--accept:hover { box-shadow: 0 6px 28px rgba(34, 197, 94, 0.5); } .incoming-call-btn svg { width: 24px; height: 24px; color: var(--color-text-inverse); stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Rotated phone icon for decline */ .incoming-call-btn--decline svg { transform: rotate(135deg); } .incoming-call-action-label { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.55); } /* ── Keyframe animations ── */ @keyframes incomingCallFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes incomingCallFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes incomingCallSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes incomingCallSlideDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(30px); opacity: 0; } } @keyframes incomingCallPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } } /* ── Responsive tweaks ── */ @media (max-width: 440px) { .incoming-call-card { padding: 32px 24px 28px; } .incoming-call-actions { gap: 40px; } }