/** * Shared layout, nav, surfaces, and composer base for social-style public pages * (/feed, /messages, /tracks, /hubs). Load before page-specific CSS. * * Theme: set `data-theme="light"` on for light mode; omit or use "dark" for default. */ :root { color-scheme: dark; --bg: #020617; --bg-elevated: #020617; --panel: #020617; --panel-soft: #020817; --panel-subtle: #020617; --card: #020617; --card-soft: #030712; --border-subtle: rgba(148, 163, 184, 0.18); --border-strong: rgba(148, 163, 184, 0.4); --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, 0.06); --accent-strong: #0ea5e9; --accent-gradient: linear-gradient(135deg, #38bdf8, #22c55e); --muted: #9ca3af; --text-main: #e5e7eb; --text-strong: #f9fafb; --danger: #f97373; --radius-lg: 18px; --radius-md: 12px; --radius-pill: 999px; --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.6); --shadow-card: 0 18px 40px rgba(15, 23, 42, 0.8); --ring: 0 0 0 1px rgba(148, 163, 184, 0.26); --ring-strong: 0 0 0 1px rgba(148, 163, 184, 0.45); --nav-height: 60px; --feed-max: 780px; --sidebar-width: 280px; /* Page & shell (theme-switchable) */ --page-bg-gradient: radial-gradient(circle at top, #0f172a 0, #020617 42%, #020617 100%); --header-backdrop: linear-gradient(to bottom, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.6), transparent); --header-border: rgba(15, 23, 42, 0.7); /* Surface / overlay fills (slate stack) */ --fill-surface-70: rgba(15, 23, 42, 0.7); --fill-surface-90: rgba(15, 23, 42, 0.9); --fill-surface-94: rgba(15, 23, 42, 0.94); --fill-surface-95: rgba(15, 23, 42, 0.95); --fill-surface-96: rgba(15, 23, 42, 0.96); --fill-surface-98: rgba(15, 23, 42, 0.98); --fill-surface-100: rgba(15, 23, 42, 1); --fill-void-98: rgba(2, 6, 23, 0.98); --fill-void-100: rgba(2, 6, 23, 1); /* UI chrome borders */ --border-ui: rgba(148, 163, 184, 0.4); --border-ui-hover: rgba(248, 250, 252, 0.55); --border-ui-muted: rgba(148, 163, 184, 0.35); --border-ui-strong: rgba(148, 163, 184, 0.6); --border-slate-700: rgba(30, 41, 59, 1); --border-slate-800: rgba(51, 65, 85, 1); --border-slate-800-soft: rgba(51, 65, 85, 0.8); --border-slate-800-faint: rgba(51, 65, 85, 0.95); /* Brand mark (logo) */ --logo-conic: conic-gradient(from 180deg, #22c55e, #38bdf8, #6366f1, #22c55e); --logo-mark-fg: #020617; --logo-ring: rgba(15, 23, 42, 0.7); --logo-shadow: rgba(15, 23, 42, 0.8); /* Shared cyan outline (nav active, menu actions, sidebar pills, unread badge). Light: override per token where softer. */ --accent-control-border: rgba(56, 189, 248, 0.8); /* Main nav pills */ --nav-pill-bg: radial-gradient(circle at top left, rgba(148, 163, 184, 0.3), rgba(15, 23, 42, 0.98) 52%); --nav-pill-active-border: var(--accent-control-border); --nav-pill-active-bg: linear-gradient(to right, rgba(56, 189, 248, 0.18), rgba(34, 197, 94, 0.08)); --nav-pill-active-shadow: 0 16px 38px rgba(15, 23, 42, 0.95); /* Account / popover */ --popover-bg: rgba(2, 6, 23, 0.98); --popover-border: var(--border-slate-800); --popover-item-bg: rgba(15, 23, 42, 0.98); --popover-item-border: var(--border-slate-700); --popover-action-bg: rgba(15, 23, 42, 1); --popover-action-border: var(--accent-control-border); --popover-action-fg: rgba(224, 242, 254, 0.97); --popover-logout-border: rgba(248, 113, 113, 0.75); --popover-logout-fg: #fecaca; --avatar-initial-bg: radial-gradient(circle at top left, #38bdf8, #22c55e); --avatar-initial-fg: #0b1120; /* Card / panel surfaces */ --surface-radial: radial-gradient(circle at top left, rgba(148, 163, 184, 0.22), transparent 60%); --surface-linear: linear-gradient(to bottom right, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.98)); /* .surface border matches --border-subtle in both themes (single token). */ --surface-soft-linear: linear-gradient(to bottom right, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.98)); /* Primary / ghost / compact buttons */ --btn-primary-fg: #022c22; --btn-primary-shadow: 0 15px 35px rgba(8, 47, 73, 0.9); --btn-primary-shadow-hover: 0 18px 40px rgba(8, 47, 73, 1); --btn-ghost-bg: rgba(15, 23, 42, 0.94); --btn-ghost-bg-hover: rgba(15, 23, 42, 0.98); /* Loading strip */ --loading-border: rgba(56, 189, 248, 0.35); --loading-bg: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.98)); --loading-text: rgba(224, 242, 254, 0.95); /* Composer & inputs */ --composer-top-border: rgba(15, 23, 42, 0.9); --composer-bg: radial-gradient(circle at top, rgba(15, 23, 42, 1), rgba(2, 6, 23, 0.98)); --input-bg: rgba(15, 23, 42, 0.98); --input-border: var(--border-slate-800); --placeholder: rgba(148, 163, 184, 0.85); /* Toolbar */ --toolbar-bg: rgba(15, 23, 42, 1); --toolbar-border-hover: rgba(248, 250, 252, 0.4); --toolbar-active-fg: #e5f3ff; --toolbar-active-border: rgba(56, 189, 248, 0.9); --toolbar-active-bg: rgba(15, 23, 42, 0.96); --toolbar-active-ring: rgba(56, 189, 248, 0.4); --btn-compact-fg: #eff6ff; --btn-compact-bg: linear-gradient(to right, rgba(56, 189, 248, 0.3), rgba(37, 99, 235, 0.2)); --btn-compact-border: rgba(56, 189, 248, 0.9); --btn-compact-hover-shadow: 0 14px 28px rgba(15, 23, 42, 0.9); --btn-compact-hover-border: rgba(56, 189, 248, 1); /* Sidebar */ --sidebar-bg: radial-gradient(circle at top left, rgba(148, 163, 184, 0.2), rgba(15, 23, 42, 1)); --sidebar-heading: rgba(148, 163, 184, 0.95); --sidebar-badge-border: var(--border-ui); --sidebar-badge-fg: rgba(148, 163, 184, 0.9); --sidebar-list-border: rgba(15, 23, 42, 1); --sidebar-list-bg: rgba(15, 23, 42, 0.96); --sidebar-list-title: rgba(248, 250, 252, 0.96); --sidebar-list-muted: rgba(148, 163, 184, 0.95); --sidebar-pill-border: var(--accent-control-border); --sidebar-pill-bg: rgba(15, 23, 42, 1); --sidebar-pill-fg: var(--popover-action-fg); /* Skeleton & dots */ --skeleton-base: radial-gradient(circle at top left, rgba(51, 65, 85, 0.5), rgba(15, 23, 42, 1)); --skeleton-shimmer: var(--border-subtle); --skeleton-line: rgba(15, 23, 42, 1); --dot-bg: rgba(148, 163, 184, 0.7); /* Feed, messages & other content surfaces (used by feed.css, messages.css) */ --avatar-shadow: 0 14px 35px rgba(15, 23, 42, 0.9); --rail-border: rgba(51, 65, 85, 0.9); --rail-border-soft: rgba(51, 65, 85, 0.85); --rail-head-border: rgba(51, 65, 85, 0.8); /* Feed .pill-action[data-state="active"] fill (distinct from flat toolbar active). */ --content-pill-active-bg: radial-gradient(circle at top left, rgba(56, 189, 248, 0.3), rgba(15, 23, 42, 1)); --chip-indicator-muted: #4b5563; --chip-indicator-on: #22c55e; --visibility-pill-border: rgba(148, 163, 184, 0.32); --visibility-public-border: rgba(52, 211, 153, 0.7); --visibility-public-fg: rgba(52, 211, 153, 0.96); --visibility-private-border: rgba(248, 250, 252, 0.18); --visibility-private-fg: rgba(148, 163, 184, 0.96); --bubble-own-border: rgba(56, 189, 248, 0.85); --bubble-own-bg: linear-gradient(to right, rgba(56, 189, 248, 0.14), rgba(37, 99, 235, 0.12)); --badge-unread-bg: rgba(56, 189, 248, 0.22); --badge-unread-border: var(--accent-control-border); /* Toast / global status (core-shell.js #globalStatus) */ --toast-shadow: 0 10px 25px rgba(15, 23, 42, 0.7); --toast-fg: #f9fafb; --toast-bg-info: var(--accent-strong); --toast-bg-success: #16a34a; --toast-bg-error: #dc2626; } html[data-theme="light"] { color-scheme: light; --bg: #f8fafc; --bg-elevated: #ffffff; --panel: #f1f5f9; --panel-soft: #e2e8f0; --panel-subtle: #f8fafc; --card: #ffffff; --card-soft: #f8fafc; --border-subtle: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.18); --accent-soft: rgba(14, 165, 233, 0.12); --muted: #64748b; --text-main: #0f172a; --text-strong: #020617; --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08); --shadow-card: 0 18px 40px rgba(15, 23, 42, 0.1); --ring: 0 0 0 1px rgba(15, 23, 42, 0.12); --ring-strong: 0 0 0 1px rgba(15, 23, 42, 0.2); --page-bg-gradient: radial-gradient(circle at top, #e2e8f0 0, #f8fafc 45%, #f8fafc 100%); --header-backdrop: linear-gradient(to bottom, rgba(248, 250, 252, 0.92), rgba(248, 250, 252, 0.65), transparent); --header-border: rgba(226, 232, 240, 0.95); --fill-surface-70: rgba(255, 255, 255, 0.85); --fill-surface-90: rgba(255, 255, 255, 0.92); --fill-surface-94: rgba(255, 255, 255, 0.94); --fill-surface-95: rgba(255, 255, 255, 0.95); --fill-surface-96: rgba(255, 255, 255, 0.96); --fill-surface-98: rgba(255, 255, 255, 0.98); --fill-surface-100: #ffffff; --fill-void-98: rgba(248, 250, 252, 0.98); --fill-void-100: #f8fafc; --border-ui: rgba(15, 23, 42, 0.14); --border-ui-hover: rgba(15, 23, 42, 0.28); --border-ui-muted: rgba(15, 23, 42, 0.1); --border-ui-strong: rgba(15, 23, 42, 0.22); --border-slate-700: rgba(226, 232, 240, 1); --border-slate-800: rgba(203, 213, 225, 1); --border-slate-800-soft: rgba(203, 213, 225, 0.85); --border-slate-800-faint: rgba(203, 213, 225, 0.9); --logo-mark-fg: #ffffff; --logo-ring: rgba(255, 255, 255, 0.85); --logo-shadow: rgba(15, 23, 42, 0.12); --nav-pill-bg: radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.98) 52%); --nav-pill-active-shadow: 0 12px 28px rgba(14, 165, 233, 0.18); --popover-bg: rgba(255, 255, 255, 0.98); --popover-item-bg: rgba(248, 250, 252, 0.98); --popover-action-bg: #ffffff; --popover-action-border: rgba(14, 165, 233, 0.45); --popover-action-fg: #0c4a6e; --popover-logout-border: rgba(220, 38, 38, 0.4); --popover-logout-fg: #b91c1c; --surface-radial: radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 60%); --surface-linear: linear-gradient(to bottom right, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.99)); --surface-soft-linear: linear-gradient(to bottom right, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98)); --btn-primary-shadow: 0 12px 28px rgba(14, 165, 233, 0.25); --btn-primary-shadow-hover: 0 14px 32px rgba(14, 165, 233, 0.3); --btn-ghost-bg: rgba(255, 255, 255, 0.9); --btn-ghost-bg-hover: rgba(255, 255, 255, 1); --loading-border: rgba(14, 165, 233, 0.28); --loading-bg: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98)); --loading-text: #0c4a6e; --composer-top-border: rgba(226, 232, 240, 0.95); --composer-bg: radial-gradient(circle at top, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.98)); --input-bg: rgba(255, 255, 255, 0.98); --placeholder: rgba(100, 116, 139, 0.75); --toolbar-bg: #ffffff; --toolbar-border-hover: rgba(15, 23, 42, 0.22); --toolbar-active-fg: #0369a1; --toolbar-active-bg: rgba(255, 255, 255, 0.98); --toolbar-active-border: rgba(14, 165, 233, 0.65); --toolbar-active-ring: rgba(14, 165, 233, 0.25); --btn-compact-hover-shadow: 0 12px 24px rgba(15, 23, 42, 0.1); --sidebar-bg: radial-gradient(circle at top left, rgba(14, 165, 233, 0.06), rgba(255, 255, 255, 1)); --sidebar-heading: rgba(71, 85, 105, 0.95); --sidebar-badge-border: rgba(15, 23, 42, 0.12); --sidebar-badge-fg: rgba(71, 85, 105, 0.9); --sidebar-list-border: rgba(241, 245, 249, 1); --sidebar-list-bg: rgba(248, 250, 252, 0.96); --sidebar-list-title: rgba(15, 23, 42, 0.96); --sidebar-list-muted: rgba(71, 85, 105, 0.95); --sidebar-pill-bg: #ffffff; --skeleton-base: radial-gradient(circle at top left, rgba(203, 213, 225, 0.6), rgba(248, 250, 252, 1)); --skeleton-shimmer: rgba(255, 255, 255, 0.65); --skeleton-line: rgba(241, 245, 249, 1); --dot-bg: rgba(100, 116, 139, 0.45); --avatar-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); --rail-border: rgba(203, 213, 225, 0.95); --rail-border-soft: rgba(203, 213, 225, 0.9); --rail-head-border: rgba(226, 232, 240, 0.95); --content-pill-active-bg: radial-gradient(circle at top left, rgba(14, 165, 233, 0.14), rgba(255, 255, 255, 1)); --chip-indicator-muted: #94a3b8; --chip-indicator-on: #16a34a; --visibility-pill-border: rgba(15, 23, 42, 0.14); --visibility-public-border: rgba(16, 185, 129, 0.55); --visibility-public-fg: rgba(5, 122, 85, 0.98); --visibility-private-border: var(--visibility-pill-border); --visibility-private-fg: rgba(71, 85, 105, 0.95); --bubble-own-border: rgba(14, 165, 233, 0.45); --bubble-own-bg: linear-gradient(to right, rgba(14, 165, 233, 0.12), rgba(37, 99, 235, 0.08)); --badge-unread-bg: rgba(14, 165, 233, 0.12); --badge-unread-border: rgba(14, 165, 233, 0.45); --toast-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); --toast-fg: #ffffff; --toast-bg-info: #0284c7; --toast-bg-success: #15803d; --toast-bg-error: #b91c1c; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--page-bg-gradient); color: var(--text-main); -webkit-font-smoothing: antialiased; } body { display: flex; flex-direction: column; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } /** * Fixed toast from core-shell.js (communicator showMessage). Variants use theme tokens only. */ .cansome-toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-family: inherit; box-shadow: var(--toast-shadow); color: var(--toast-fg); max-width: min(92vw, 420px); text-align: center; display: none; } .cansome-toast.cansome-toast--visible { display: block; } .cansome-toast--info { background: var(--toast-bg-info); } .cansome-toast--success { background: var(--toast-bg-success); } .cansome-toast--error { background: var(--toast-bg-error); } /* Auth UI before core-shell runs */ html[data-cansome-auth="session"] [data-anon-only] { display: none !important; } html[data-cansome-auth="anon"] [data-requires-auth] { display: none !important; } html[data-cansome-auth="anon"] #auth-check-status { display: none !important; } html[data-cansome-auth="unknown"] [data-anon-only], html[data-cansome-auth="unknown"] [data-requires-auth] { display: none !important; } html[data-cansome-auth="session"] #auth-content-host:empty, html[data-cansome-auth="session"] #auth-sidebar-host:empty { display: none !important; } html:not([data-cansome-nav-ready]) #main-nav { visibility: hidden; min-height: 36px; } /* ---------- Header & main nav ---------- */ header.feed-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); background: var(--header-backdrop); border-bottom: 1px solid var(--header-border); transition: transform 0.2s ease-out; } header.feed-header.feed-header-hidden-mobile { transform: translateY(-105%); } .feed-header-inner { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: grid; gap: 10px; } .feed-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 3; min-width: 0; } .feed-header-brand { min-width: 0; flex: 0 1 auto; } .feed-header-home { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; text-decoration: none; } .feed-header-bottom { display: flex; align-items: center; justify-content: flex-start; gap: 10px; position: relative; z-index: 0; } .feed-brand-static { cursor: default; } .feed-page-title { min-width: 0; } .feed-header-search { flex: 0 1 360px; width: 100%; max-width: 360px; display: inline-flex; align-items: center; gap: 8px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--input-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--input-bg) 86%, white 14%), var(--input-bg)); padding: 7px 12px; box-shadow: 0 6px 20px color-mix(in srgb, black 16%, transparent), inset 0 1px 0 color-mix(in srgb, white 8%, transparent); backdrop-filter: blur(10px); } .feed-header-search-icon { color: color-mix(in srgb, var(--text-main) 60%, var(--muted)); font-size: 12px; line-height: 1; } .feed-header-search-input { width: 100%; border: 0; outline: none; background: transparent; color: var(--text-main); font-size: 13px; line-height: 1.2; } .feed-header-search-input::placeholder { color: var(--placeholder); } .feed-header-search-input:disabled { opacity: 0.9; cursor: not-allowed; } .feed-header-search:focus-within { border-color: color-mix(in srgb, var(--accent) 62%, var(--input-border)); box-shadow: 0 8px 24px color-mix(in srgb, black 20%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); } .cansome-universal-search { position: relative; width: 100%; max-width: 100%; z-index: 1; } .cansome-universal-search--open { z-index: 6; } body.cansome-universal-search-active header.feed-header { z-index: 50; } .cansome-universal-search--open .feed-header-search { flex: 1 1 auto; max-width: min(640px, 94vw); transition: max-width 0.22s ease, box-shadow 0.22s ease; } .cansome-universal-search-kbd { flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: color-mix(in srgb, var(--muted) 88%, transparent); white-space: nowrap; user-select: none; } .cansome-universal-search-panel { position: absolute; left: 0; top: calc(100% + 8px); width: min(420px, calc(100vw - 32px)); max-height: min(72vh, 520px); overflow: auto; padding: 8px 0; border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--toolbar-bg); box-shadow: 0 18px 50px color-mix(in srgb, black 38%, transparent), 0 0 0 1px color-mix(in srgb, white 6%, transparent); z-index: 7; } .cansome-us-section { padding: 4px 0 10px; } .cansome-us-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 6px 14px 8px; } .cansome-us-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; text-decoration: none; color: inherit; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; box-sizing: border-box; } a.cansome-us-row:hover, .cansome-us-row--person:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .cansome-us-row--person { align-items: center; } .cansome-us-row--hub { align-items: center; } .cansome-us-hub-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; background: color-mix(in srgb, var(--accent) 18%, var(--input-bg)); } .cansome-us-row-stack { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cansome-us-row-text { flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; } .cansome-us-row-main { font-size: 13px; font-weight: 600; color: var(--text-main); line-height: 1.25; } .cansome-us-row-sub { font-size: 12px; color: var(--muted); line-height: 1.3; } .cansome-us-row-meta { flex: 0 0 auto; font-size: 11px; color: var(--muted); align-self: center; } .cansome-us-empty { padding: 6px 14px 4px; font-size: 12px; color: var(--muted); } .cansome-us-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--accent) 22%, var(--input-bg)); display: flex; align-items: center; justify-content: center; } .cansome-us-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .cansome-us-avatar--initials { font-size: 11px; font-weight: 700; color: var(--text-strong, var(--text-main)); } .cansome-us-connect { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--input-border)); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .cansome-us-connect:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 24%, transparent); } .cansome-us-connect:disabled { opacity: 0.55; cursor: default; } .cansome-us-pending { flex: 0 0 auto; font-size: 11px; color: var(--muted); } .cansome-us-connected { flex: 0 0 auto; font-size: 12px; color: color-mix(in srgb, var(--accent) 80%, var(--muted)); } .cansome-us-invite { margin: 8px 10px 4px; padding: 12px 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border-subtle)); background: color-mix(in srgb, var(--accent) 8%, transparent); } .cansome-us-invite-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; line-height: 1.35; display: block; } .cansome-us-invite-link:hover { text-decoration: underline; } .cansome-universal-search-backdrop { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, black 42%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .cansome-universal-search-backdrop.is-visible { opacity: 1; pointer-events: auto; } .feed-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; color: inherit; } .feed-logo { width: 28px; height: 28px; border-radius: 10px; background: var(--logo-conic); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--logo-ring), 0 14px 30px var(--logo-shadow); } .feed-logo span { font-size: 14px; font-weight: 800; color: var(--logo-mark-fg); } .feed-title { display: flex; flex-direction: column; gap: 0; } .feed-title-main { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; } .feed-title-sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; } nav#main-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; flex: 1; min-width: 0; } .main-nav-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; overflow: visible; /* Room for count badges (kept inside pills; avoids clipping / scrollbars) */ padding: 2px 0 4px; } .main-nav-pill { flex: 0 0 auto; position: relative; border-radius: var(--radius-pill); padding: 8px 12px; font-size: 12px; color: var(--muted); border: 1px solid var(--border-ui); background: var(--nav-pill-bg); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; transition: all 0.13s ease-out; } .main-nav-pill:hover { border-color: var(--border-ui-hover); color: var(--text-main); transform: translateY(-0.5px); text-decoration: none; } .main-nav-pill.active { border-color: var(--nav-pill-active-border); background: var(--nav-pill-active-bg); color: var(--text-strong); box-shadow: var(--nav-pill-active-shadow); } .main-nav-icon { width: 16px; min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; opacity: 0.95; } .main-nav-label { display: inline-block; } .main-nav-notification-badge { position: absolute; top: 2px; right: 2px; box-sizing: border-box; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.55); background: #dc2626; color: #fff; font-size: 9px; line-height: 1; font-weight: 700; text-align: center; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; max-width: 28px; overflow: hidden; text-overflow: ellipsis; } /* Author `display` on this class overrides the `hidden` attribute's UA `display:none`, leaving empty red circles. */ .main-nav-notification-badge[hidden] { display: none !important; } .nav-notification-trigger { position: relative; width: 36px; min-width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border-ui); background: var(--nav-pill-bg); color: var(--text-main); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .nav-notification-icon { font-size: 14px; line-height: 1; } .nav-notification-trigger .main-nav-notification-badge { top: 1px; right: 1px; } .nav-notification-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.58); opacity: 0; pointer-events: none; transition: opacity 0.18s ease-out; z-index: 70; } .nav-notification-backdrop.open { opacity: 1; pointer-events: auto; } .nav-notification-drawer { position: fixed; top: 0; right: 0; width: min(420px, 92vw); height: 100dvh; background: var(--popover-bg); border-left: 1px solid var(--popover-border); box-shadow: var(--shadow-card); transform: translateX(105%); transition: transform 0.22s ease-out; z-index: 71; display: flex; flex-direction: column; } .nav-notification-drawer.open { transform: translateX(0); } .nav-notification-head { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--border-ui-muted); } .nav-notification-head-actions { display: inline-flex; align-items: center; gap: 8px; } .nav-notification-mark-all { border-radius: 999px; border: 1px solid var(--border-ui); background: var(--fill-surface-95); color: var(--text-main); font-size: 11px; padding: 4px 9px; cursor: pointer; } .nav-notification-mark-all:disabled { opacity: 0.55; cursor: default; } .nav-notification-title { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .nav-notification-close { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--border-ui); background: var(--fill-surface-95); color: var(--text-main); cursor: pointer; } .nav-notification-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; } .nav-notification-empty { border: 1px dashed var(--border-ui); border-radius: 12px; padding: 12px; color: var(--muted); text-align: center; font-size: 12px; } .nav-notification-item { position: relative; border: 1px solid var(--popover-item-border); background: var(--popover-item-bg); border-radius: 12px; padding: 10px; display: block; color: inherit; text-decoration: none; } .nav-notification-item.unread { border-color: var(--accent-control-border); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.18); } .nav-notification-item:hover { border-color: var(--border-ui-hover); text-decoration: none; } .nav-notification-unread-dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 999px; background: #ef4444; border: 1px solid rgba(248, 250, 252, 0.75); } .nav-notification-item-title { font-size: 13px; color: var(--text-main); margin-bottom: 3px; } .nav-notification-item-meta { font-size: 11px; color: var(--muted); } .nav-notification-item.is-seen { opacity: 0.88; } .nav-notification-item.is-seen .nav-notification-item-title { color: var(--muted); } .nav-notification-status { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 9px; } .nav-notification-status-unread { color: var(--accent, #38bdf8); } .nav-notification-status-seen { color: var(--sidebar-list-muted, var(--muted)); } .nav-notification-sentinel { height: 1px; margin: 4px 0; pointer-events: none; } .nav-notification-inbox-loading { text-align: center; font-size: 11px; color: var(--muted); padding: 10px 8px 6px; } .nav-notification-inbox-loading[hidden] { display: none !important; } .nav-account-wrap { position: relative; flex: 0 0 auto; } .nav-account-trigger { border-radius: 999px; border: 1px solid var(--border-ui); background: var(--fill-surface-95); color: var(--text-main); font-size: 12px; padding: 4px 8px 4px 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; max-width: 176px; } .nav-account-avatar { width: 24px; height: 24px; border-radius: 999px; background: var(--avatar-initial-bg); color: var(--avatar-initial-fg); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; } .nav-account-name { max-width: 98px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-account-name-short { display: none; } .nav-account-caret { opacity: 0.8; } .nav-account-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: min(360px, 92vw); border-radius: 14px; border: 1px solid var(--popover-border); background: var(--popover-bg); box-shadow: var(--shadow-card); padding: 8px; display: flex; flex-direction: column; gap: 8px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.15s ease-out, transform 0.15s ease-out; } .nav-account-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-account-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 12px; border: 1px solid var(--popover-item-border); background: var(--popover-item-bg); padding: 8px; } .nav-account-item-main { min-width: 0; } .nav-account-item-name { font-size: 12px; color: var(--text-main); } .nav-account-current { color: var(--accent); } .nav-account-item-meta { font-size: 11px; color: var(--muted); } .nav-account-profile-link { display: block; border-radius: 10px; border: 1px solid var(--popover-item-border); background: var(--popover-item-bg); color: var(--text-main); text-decoration: none; padding: 8px 10px; font-size: 12px; } .nav-account-switch, .nav-account-logout { border-radius: 999px; border: 1px solid var(--popover-action-border); background: var(--popover-action-bg); color: var(--popover-action-fg); padding: 4px 10px; font-size: 11px; cursor: pointer; } .nav-account-switch:disabled { opacity: 0.55; cursor: default; } .nav-account-logout { align-self: flex-end; border-color: var(--popover-logout-border); color: var(--popover-logout-fg); } .nav-link { font-size: 13px; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; color: var(--muted); white-space: nowrap; text-decoration: none; background: transparent; } .nav-link:hover { color: var(--text-main); border-color: var(--border-ui-muted); background: var(--fill-surface-70); } /* ---------- Layout ---------- */ .feed-shell { flex: 1; display: flex; justify-content: center; padding: 10px 14px 24px; } .feed-shell-inner { width: 100%; max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; overflow-x: clip; } .feed-main-column { width: 100%; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .feed-sidebar { display: none; width: 100%; min-width: 0; max-width: 100%; gap: 14px; overflow: hidden; } @media (min-width: 960px) { .feed-shell-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 22px; } .feed-main-column { margin-left: 0; max-width: 100%; } .feed-sidebar { display: flex; flex-direction: column; } } @media (max-width: 1120px) { .feed-title-sub { display: none; } } @media (max-width: 980px) { .feed-title { display: none; } } @media (max-width: 860px) { .feed-header-bottom { flex-direction: column; align-items: stretch; } .feed-header-search { max-width: 100%; flex-basis: auto; } .main-nav-label { display: none; } .main-nav-pill { width: 36px; min-width: 36px; height: 36px; padding: 0; justify-content: center; gap: 0; } .nav-account-name-full { display: none; } .nav-account-name-short { display: inline; } } .surface, .surface-soft, .sidebar-card { width: 100%; max-width: 100%; } .surface { border-radius: var(--radius-lg); background: var(--surface-radial), var(--surface-linear); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .surface-soft { border-radius: var(--radius-lg); background: var(--surface-soft-linear); border: 1px solid var(--border-slate-800-soft); box-shadow: var(--shadow-soft); } .surface-inner { padding: 14px 14px 12px; } @media (min-width: 640px) { .surface-inner { padding: 16px 18px 14px; } } /* ---------- Auth states & promo ---------- */ .anon-hero { text-align: center; padding: 24px 18px 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .anon-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .anon-title { font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: 0.01em; margin: 0; } .anon-body { font-size: 13px; color: var(--muted); max-width: 460px; margin: 0; } .anon-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; margin-top: 4px; } .btn-primary, .btn-ghost { border-radius: var(--radius-pill); border: 1px solid transparent; padding: 10px 16px; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out, border-color 0.12s ease-out; } .btn-primary { background-image: var(--accent-gradient); color: var(--btn-primary-fg); box-shadow: var(--btn-primary-shadow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--btn-primary-shadow-hover); } .btn-ghost { background: var(--btn-ghost-bg); color: var(--text-main); border-color: var(--border-ui-muted); } .btn-ghost:hover { background: var(--btn-ghost-bg-hover); border-color: var(--border-ui-strong); } .anon-meta { font-size: 11px; color: var(--muted); margin-top: 4px; } .feed-loading-state { padding: 12px 14px; border: 1px solid var(--loading-border); background: var(--loading-bg); } .feed-loading-copy { font-size: 12px; color: var(--loading-text); letter-spacing: 0.01em; } /* ---------- Shared composer (feed / messages) ---------- */ .composer { padding: 10px 14px 12px; border-top: 1px solid var(--composer-top-border); background: var(--composer-bg); } .composer-main { flex: 1 1 auto; min-width: 0; } .composer-body-editor { width: 100%; min-height: 44px; max-height: 260px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-main); font-size: 14px; line-height: 1.4; outline: none; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; } .composer-body-editor:empty::before { content: attr(data-placeholder); color: var(--placeholder); pointer-events: none; } .composer-footer { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .composer-toolbar { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .toolbar-btn { border-radius: 999px; border: 1px solid var(--input-border); background: var(--toolbar-bg); color: var(--muted); padding: 4px 9px; font-size: 12px; cursor: pointer; } .toolbar-btn:hover { border-color: var(--toolbar-border-hover); color: var(--text-main); } .toolbar-btn.active { border-color: var(--toolbar-active-border); color: var(--toolbar-active-fg); background: var(--toolbar-active-bg); box-shadow: 0 0 0 1px var(--toolbar-active-ring); } .btn-compact { border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 500; border: 1px solid var(--btn-compact-border); background: var(--btn-compact-bg); color: var(--btn-compact-fg); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all 0.13s ease-out; } .btn-compact:hover:not(:disabled) { transform: translateY(-0.5px); box-shadow: var(--btn-compact-hover-shadow); border-color: var(--btn-compact-hover-border); } .btn-compact:disabled { opacity: 0.6; cursor: default; } /* ---------- Sidebar cards ---------- */ .sidebar-card { padding: 14px 14px 12px; border-radius: var(--radius-lg); background: var(--sidebar-bg); border: 1px solid var(--border-slate-800-faint); box-shadow: var(--shadow-card); } .sidebar-title { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sidebar-heading); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar-title span.badge, .sidebar-title .badge { border-radius: 999px; padding: 2px 7px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; border: 1px solid var(--sidebar-badge-border); color: var(--sidebar-badge-fg); } .sidebar-body { font-size: 12px; color: var(--sidebar-list-muted); display: flex; flex-direction: column; gap: 6px; } .sidebar-list-item { padding: 7px 8px; border-radius: 12px; border: 1px solid var(--sidebar-list-border); background: var(--sidebar-list-bg); display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; transition: all 0.13s ease-out; } .sidebar-list-item:hover { border-color: var(--border-ui); background: var(--fill-surface-100); transform: translateY(-0.5px); } .sidebar-list-main { display: flex; flex-direction: column; gap: 2px; } .sidebar-list-title { font-size: 12px; font-weight: 500; color: var(--sidebar-list-title); } .sidebar-list-sub { font-size: 11px; color: var(--sidebar-list-muted); } .sidebar-list-pill { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--sidebar-pill-border); background: var(--sidebar-pill-bg); color: var(--sidebar-pill-fg); white-space: nowrap; } .sidebar-notification-link { text-decoration: none; position: relative; } .sidebar-notification-link.unread { border-color: var(--accent-control-border); } .sidebar-notification-link.is-seen { opacity: 0.88; } .sidebar-notification-link.is-seen .sidebar-list-title { color: var(--muted); } .sidebar-notification-link .sidebar-list-sub { padding-right: 14px; } .sidebar-notification-dot { width: 8px; min-width: 8px; height: 8px; border-radius: 999px; background: #ef4444; border: 1px solid rgba(248, 250, 252, 0.75); } /* ---------- Empty / skeleton / utility ---------- */ .feed-empty { padding: 10px; font-size: 12px; color: var(--muted); text-align: center; } .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--dot-bg); } .hidden { display: none !important; } .skeleton { position: relative; overflow: hidden; background: var(--skeleton-base); } .skeleton::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--skeleton-shimmer), transparent); transform: translateX(-100%); animation: shimmer 1.6s infinite; } .skeleton-line { height: 9px; border-radius: 999px; background: var(--skeleton-line); } .skeleton-line.sm { width: 36%; } .skeleton-line.md { width: 66%; } .skeleton-line.lg { width: 86%; } /* ---------- Paid status notice ---------- */ .paid-status-notice { margin-bottom: 12px; border-radius: var(--radius-lg); border: 1px solid var(--input-border); background: var(--surface-0); box-shadow: var(--shadow-card); padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .paid-status-notice__main { min-width: 0; } .paid-status-notice__title { display: block; font-size: 13px; color: var(--text-main); margin-bottom: 3px; } .paid-status-notice__text { margin: 0; font-size: 12px; color: var(--muted); } .paid-status-notice__action { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--btn-compact-border); background: var(--btn-compact-bg); color: var(--btn-compact-fg); font-size: 12px; font-weight: 600; padding: 6px 10px; text-decoration: none; } .paid-status-notice__action:hover { border-color: var(--btn-compact-hover-border); box-shadow: var(--btn-compact-hover-shadow); } .paid-status-notice--trial { border-color: rgba(217, 119, 6, 0.45); background: rgba(245, 158, 11, 0.08); } .paid-status-notice__sub { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted, #64748b); } .paid-status-notice__sub--founding strong { font-weight: 700; color: var(--text-strong, #0f172a); } .paid-status-notice--overdue { border-color: rgba(185, 28, 28, 0.45); background: rgba(239, 68, 68, 0.1); } @media (max-width: 740px) { .paid-status-notice { flex-direction: column; align-items: flex-start; } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* * Overlay scrim: dim + blur behind dialogs/popovers so content separates from the page. * Use on a full-viewport layer inside a fixed `inset: 0` root; pair with a panel above (higher z-index). * Button-triggered panels: position with positionPopoverNearAnchor(); centered modals: flex-center the panel. */ .cansome-overlay-scrim { position: absolute; inset: 0; z-index: 0; background: rgba(2, 6, 23, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; } /* Full-screen post preview from notifications (stays on current section) */ .cansome-post-focus-backdrop[hidden], .cansome-post-focus-shell[hidden] { display: none !important; pointer-events: none; } .cansome-post-focus-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(2, 6, 23, 0.38); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); } .cansome-post-focus-shell { position: fixed; inset: 0; z-index: 910; display: flex; align-items: flex-start; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px 24px; pointer-events: none; } .cansome-post-focus-panel { pointer-events: auto; width: min(720px, 100%); max-height: min(92vh, 900px); display: flex; flex-direction: column; background: var(--surface-elevated, var(--toolbar-bg)); border: 1px solid var(--input-border); border-radius: 16px; box-shadow: var(--shadow-popover); overflow: hidden; } .cansome-post-focus-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--input-border); flex-shrink: 0; } .cansome-post-focus-title { font-weight: 600; color: var(--text-strong, var(--text-main)); } .cansome-post-focus-actions { display: flex; align-items: center; gap: 10px; } .cansome-post-focus-open-feed { font-size: 0.85rem; color: var(--accent); text-decoration: none; } .cansome-post-focus-open-feed:hover { text-decoration: underline; } .cansome-post-focus-close { border: none; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; } .cansome-post-focus-close:hover { background: var(--content-pill-active-bg, rgba(255, 255, 255, 0.06)); color: var(--text-main); } .cansome-post-focus-body { overflow: auto; padding: 16px; -webkit-overflow-scrolling: touch; } .cansome-post-focus-body .post-card { margin: 0; } .cansome-post-focus-loading, .cansome-post-focus-error { padding: 24px; text-align: center; color: var(--muted); } .cansome-post-focus-flash { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; transition: outline-color 0.4s ease; } .post-interactions-popover-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.42); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.16s ease, visibility 0s linear 0.16s; z-index: 1098; } .post-interactions-popover-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.16s ease, visibility 0s; } .post-interactions-popover { position: fixed; left: 0; top: 0; width: min(94vw, 420px); max-height: min(70vh, 520px); opacity: 0; visibility: hidden; transition: opacity 0.16s ease, visibility 0s linear 0.16s; z-index: 1100; background: var(--toolbar-bg); border: 1px solid var(--input-border); border-radius: 12px; box-shadow: var(--shadow-popover); display: flex; flex-direction: column; overflow: hidden; } .post-interactions-popover.is-open { opacity: 1; visibility: visible; transition: opacity 0.16s ease, visibility 0s; } .post-interactions-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-bottom: 1px solid var(--input-border); } .post-interactions-head h3 { margin: 0; font-size: 15px; } .post-interactions-head button { border: 1px solid var(--input-border); background: var(--toolbar-bg); color: var(--text-main); border-radius: 999px; padding: 5px 10px; cursor: pointer; } .post-interactions-body { padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 8px; } .drawer-row, .drawer-comment { border: 1px solid var(--input-border); border-radius: 10px; padding: 8px 9px; background: var(--toolbar-bg); } .drawer-row-title { font-size: 12px; color: var(--text-strong); } .drawer-row-copy { margin-top: 3px; font-size: 12px; color: var(--text-main); } .drawer-empty, .drawer-loading { color: var(--muted); font-size: 12px; } .drawer-comment-form { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; } .post-inline-contributions { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--input-border); display: flex; flex-direction: column; gap: 8px; } .post-inline-contrib-preview-wrap { display: flex; flex-direction: column; gap: 8px; } .post-inline-see-more { align-self: flex-start; margin-top: 2px; padding: 4px 0; font-size: 13px; cursor: pointer; border: none; background: transparent; color: var(--toolbar-active-fg, #2563eb); text-decoration: underline; text-underline-offset: 2px; } .post-inline-contribution { background: var(--toolbar-bg); } .drawer-comment-form textarea { width: 100%; min-height: 70px; resize: vertical; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-main); padding: 8px; } .drawer-comment-form select { width: 100%; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-main); padding: 8px; } .drawer-signal-actions { display: flex; flex-wrap: wrap; gap: 7px; } .drawer-signal-actions button { border-radius: 999px; border: 1px solid var(--input-border); background: var(--toolbar-bg); color: var(--text-main); padding: 5px 9px; cursor: pointer; } .drawer-comment-form button { align-self: flex-end; border-radius: 999px; border: 1px solid var(--toolbar-active-border); background: var(--toolbar-active-bg); color: var(--toolbar-active-fg); padding: 6px 12px; cursor: pointer; } .pill-action-more { padding-inline: 10px; } .pill-action-more .pill-action-icon { letter-spacing: 1px; font-weight: 700; } .post-inline-contribution-actions { margin-top: 7px; display: flex; justify-content: flex-end; } .post-inline-report-btn { font-size: 12px; }