/* ========================================================================== Дизайн-токены ========================================================================== */ /* -------------------------------------------------------------------------- Siora — фирменные токены (источник истины: docs/DESIGN_BRIEF.md, docs/design) Спокойная сине-бирюзовая палитра, тёплое янтарное «ядро» как единственный акцент. Красный/кислотный зелёный запрещены. Компоненты стилизуются ТОЛЬКО через токены; легаси-алиасы --color-* переотображены на палитру Siora, чтобы не переписывать 4700 строк за один заход. -------------------------------------------------------------------------- */ :root { color-scheme: light; /* --- Siora: цвет (светлая тема) --- */ --paper: #f4f6f8; --surface: #ffffff; --surface-2: #f7f9fb; --ink: #16222d; --muted: #657585; --faint: #93a2b1; --line: #e6ebf0; --line-2: #eef2f6; --teal: #2f8fa6; --teal-hover: #26788c; --sky: #57b4cd; --grey-blue: #6d8196; --amber: #cf9a42; --ink-deep: #0e1720; /* sentiment (бейдж 1–10) */ --pos-bg: #e2f0f2; --pos-fg: #1d6f80; --neu-bg: #eaeef2; --neu-fg: #5c6f81; --heavy-bg: #f4e9d6; --heavy-fg: #946a1f; /* фон акцентного «ядра» на surface */ --accent-subtle-bg: #e2f0f2; --accent-subtle-border: #cfe4e8; /* --- Siora: типографика --- */ --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- Siora: форма --- */ --radius-card: 16px; --radius-widget: 14px; --radius-input: 12px; --radius-pill: 999px; /* Легаси-алиасы (переотображены на палитру Siora) */ --color-accent: var(--teal); --color-accent-hover: var(--teal-hover); --color-accent-fg: #ffffff; --color-accent-subtle-bg: var(--accent-subtle-bg); --color-accent-subtle-border: var(--accent-subtle-border); --color-bg: var(--paper); --color-surface: var(--surface); --color-surface-muted: var(--surface-2); --color-text: var(--ink); --color-text-secondary: var(--muted); --color-text-muted: var(--faint); --color-border: var(--line); --color-border-strong: #d3dbe3; /* Статусы — сдержанные, в духе Siora (без алармирующего красного/зелёного) */ --color-success-bg: var(--pos-bg); --color-success-fg: var(--pos-fg); --color-danger-bg: var(--heavy-bg); --color-danger-fg: var(--heavy-fg); --color-warning-bg: var(--heavy-bg); --color-warning-fg: var(--heavy-fg); --color-warning: var(--grey-blue); --color-warning-hover: #5c6f83; --color-warning-button-fg: #ffffff; --color-danger: var(--amber); --color-danger-hover: #b9862f; --color-spam-bg: var(--heavy-bg); --color-spam-fg: var(--heavy-fg); --color-spam-border: var(--amber); --color-digest-bg: var(--surface-2); --color-digest-fg: var(--grey-blue); --color-digest-border: var(--line); /* Радиусы / тени / переходы */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(20,32,43,.05), 0 1px 3px rgba(20,32,43,.06); --shadow-md: 0 4px 14px rgba(20,32,43,.08); --ring: 0 0 0 3px rgba(47,143,166,.35); --transition: .18s ease; /* Шкала отступов */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; } /* Тёмная тема. Inline-скрипт в выставляет data-theme до отрисовки; медиазапрос ниже — fallback для пользователей с отключённым JS. */ [data-theme="dark"] { color-scheme: dark; --paper: #0a1119; --surface: #111b25; --surface-2: #0e1720; --ink: #e9eff5; --muted: #93a6b7; --faint: #6b7d8e; --line: #1e2b39; --line-2: #172230; --teal: #57b4cd; --teal-hover: #6fc4da; --sky: #83d2e6; --grey-blue: #7f95aa; --amber: #dfb15e; --ink-deep: #060c12; --pos-bg: #12303a; --pos-fg: #8fd7e6; --neu-bg: #1a2634; --neu-fg: #9fb1c1; --heavy-bg: #33291a; --heavy-fg: #e0b878; --accent-subtle-bg: #12303a; --accent-subtle-border: #1e4753; --color-accent-fg: #071019; --color-border-strong: #2b3a49; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 18px rgba(0,0,0,.5); --ring: 0 0 0 3px rgba(87,180,205,.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --paper: #0a1119; --surface: #111b25; --surface-2: #0e1720; --ink: #e9eff5; --muted: #93a6b7; --faint: #6b7d8e; --line: #1e2b39; --line-2: #172230; --teal: #57b4cd; --teal-hover: #6fc4da; --sky: #83d2e6; --grey-blue: #7f95aa; --amber: #dfb15e; --ink-deep: #060c12; --pos-bg: #12303a; --pos-fg: #8fd7e6; --neu-bg: #1a2634; --neu-fg: #9fb1c1; --heavy-bg: #33291a; --heavy-fg: #e0b878; --accent-subtle-bg: #12303a; --accent-subtle-border: #1e4753; --color-accent-fg: #071019; --color-border-strong: #2b3a49; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 18px rgba(0,0,0,.5); --ring: 0 0 0 3px rgba(87,180,205,.45); } } /* ========================================================================== Reset и базовые стили ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; } body { font-family: var(--font-ui); line-height: 1.6; color: var(--ink); background-color: var(--paper); -webkit-font-smoothing: antialiased; } /* Видимый фокус для навигации с клавиатуры */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Утилита: визуально скрытая, но доступная скринридерам подпись */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ========================================================================== Siora — каркас приложения (топбар + сайдбар + нижняя навигация) ========================================================================== */ .siora-app { display: flex; flex-direction: column; min-height: 100vh; } /* --- Топбар --- */ .siora-top { display: flex; align-items: center; gap: 16px; padding: 13px clamp(16px, 3vw, 24px); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; } .siora-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; text-decoration: none; } .siora-brand b { font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--ink); } .siora-mark { width: 26px; height: 26px; flex: none; } .siora-mark-outer { stroke: var(--sky); opacity: .75; } .siora-mark-inner { stroke: var(--teal); } .siora-mark-core { fill: var(--amber); } .siora-search { flex: 1; max-width: 440px; display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-input); padding: 9px 13px; color: var(--faint); font-size: 13.5px; text-decoration: none; transition: border-color var(--transition), color var(--transition); } .siora-search:hover { border-color: var(--color-border-strong); color: var(--muted); } .siora-search svg { width: 16px; height: 16px; flex: none; } .siora-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .siora-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; } .siora-avatar { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(150deg, var(--sky), var(--teal)); color: #fff; font-weight: 700; font-size: 13px; line-height: 1; text-transform: uppercase; } /* --- Меню пользователя --- */ .siora-usermenu { position: relative; display: inline-flex; } .siora-usermenu-summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; border-radius: 50%; } .siora-usermenu-summary::-webkit-details-marker { display: none; } .siora-usermenu-summary::marker { content: ""; } .siora-usermenu-panel { position: absolute; top: calc(100% + 10px); right: 0; display: grid; min-width: 15rem; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); z-index: 120; } .siora-usermenu-name { padding: 6px 10px 2px; font-weight: 600; color: var(--ink); font-size: 13.5px; } .siora-usermenu-email { padding: 0 10px 8px; color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; } .siora-usermenu-panel a, .siora-usermenu-panel button { display: flex; width: 100%; align-items: center; min-height: 2.35rem; padding: .5rem .7rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .siora-usermenu-panel a:hover, .siora-usermenu-panel button:hover { background: var(--surface-2); color: var(--teal); } .siora-usermenu-panel a[aria-current="page"] { background: var(--accent-subtle-bg); color: var(--teal); font-weight: 600; } .siora-logout { margin: 0; } /* --- Тело: сайдбар + main --- */ .siora-body { flex: 1; display: grid; grid-template-columns: 210px 1fr; align-items: start; } .siora-side { padding: 18px 14px; border-right: 1px solid var(--line); background: var(--surface); position: sticky; top: 61px; align-self: start; } .siora-nav { display: flex; flex-direction: column; gap: 2px; } .siora-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background-color var(--transition), color var(--transition); } .siora-nav a svg { width: 17px; height: 17px; flex: none; } .siora-nav a:hover { background: var(--surface-2); color: var(--ink); } .siora-nav a.on { background: var(--surface-2); color: var(--ink); font-weight: 600; } .siora-nav a.on svg { color: var(--teal); } .siora-main { padding: 22px clamp(16px, 3vw, 30px); min-width: 0; } /* --- Нижняя навигация (мобайл) --- */ .siora-bottomnav { display: none; } @media (max-width: 900px) { .siora-body { grid-template-columns: 1fr; } .siora-side { display: none; } .siora-search span { display: none; } .siora-search { flex: 0 0 auto; max-width: none; padding: 9px; } .siora-main { padding-bottom: 84px; } .siora-bottomnav { display: flex; position: sticky; bottom: 0; z-index: 100; border-top: 1px solid var(--line); background: var(--surface); } .siora-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 max(11px, env(safe-area-inset-bottom)); color: var(--faint); text-decoration: none; font-size: 10px; font-weight: 600; } .siora-bottomnav a svg { width: 20px; height: 20px; } .siora-bottomnav a.on { color: var(--teal); } .topics-section-head, .feed-topic-header, .topics-empty-card { align-items: stretch; flex-direction: column; } .saved-topic-card { grid-template-columns: 1fr; } .topic-card-actions { grid-template-columns: 1fr; } .topic-card-actions .btn, .topic-card-actions form, .topic-card-actions form .btn, .feed-topic-actions .btn { width: 100%; } .catalog-search-row { flex-direction: column; align-items: stretch; } .catalog-search-row .btn { width: 100%; } .catalog-channel .channel-top-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; } .catalog-channel .channel-actions { grid-column: 1 / -1; justify-content: stretch; margin-left: 0; } .catalog-channel .channel-actions .btn, .catalog-channel .channel-actions form, .catalog-channel .channel-actions form .btn { width: 100%; } } @media (max-width: 760px) { .catalog-hero-metrics, .topics-hero-metrics { grid-template-columns: 1fr; } } /* Переключатель темы */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 9px; font-size: 1rem; line-height: 1; cursor: pointer; transition: color var(--transition), border-color var(--transition), background-color var(--transition); } .theme-toggle:hover { color: var(--teal); border-color: var(--color-border-strong); } /* Иконки темы: по умолчанию (светлая) видна луна, в тёмной — солнце */ .theme-toggle .icon-dark { display: inline; } .theme-toggle .icon-light { display: none; } [data-theme="dark"] .theme-toggle .icon-dark { display: none; } [data-theme="dark"] .theme-toggle .icon-light { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .icon-dark { display: none; } :root:not([data-theme]) .theme-toggle .icon-light { display: inline; } } /* ========================================================================== Основной контейнер (легаси-алиас; каркас Siora — .siora-main) ========================================================================== */ .container { max-width: 960px; margin: 0 auto; min-width: 0; } .footer { max-width: 960px; margin: 2rem auto; padding: 1.5rem 1rem; color: var(--faint); font-size: 0.85rem; text-align: center; border-top: 1px solid var(--line); } /* ========================================================================== Кнопки ========================================================================== */ .btn { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0.6rem 1rem; background-color: var(--color-accent); color: var(--color-accent-fg); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: background-color var(--transition); font-family: inherit; font-size: 0.95rem; line-height: 1.4; text-align: center; } .btn:hover { background-color: var(--color-accent-hover); } .btn-active { background-color: var(--color-accent-hover); color: var(--color-accent-fg); font-weight: 700; outline: 2px solid var(--color-accent); outline-offset: 2px; cursor: default; pointer-events: none; } .btn-small, .btn-sm { min-height: 2.75rem; padding: 0.5rem 0.8rem; font-size: 0.85rem; } .btn-danger { background-color: var(--color-danger); } .btn-danger:hover { background-color: var(--color-danger-hover); } .btn-warning { background-color: var(--color-warning); color: var(--color-warning-button-fg); } .btn-warning:hover { background-color: var(--color-warning-hover); } .btn-secondary { background-color: var(--color-surface-muted); color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); } .btn-secondary:hover { background-color: var(--color-border); } /* ========================================================================== Посты в ленте ========================================================================== */ /* Экраны Siora сидят на «бумаге»; поверхности — отдельные карточки. Общий отступ даёт каркас (.siora-main), поэтому обёртки экранов прозрачны. */ .feed, .search, .channels, .channel-page, .topics-page, .post-view, .admin-dashboard { min-width: 0; } /* Единая пользовательская колонка. Не центрируем: экраны начинаются там же, где лента, сразу после сайдбара. Админ-контур (фаза 2) остаётся широким. */ .feed, .search, .topics-page, .channel-catalog, .channel-page, .account { max-width: 820px; } /* Авторизация — центрированная карточка (минимал, тон лендинга). */ /* ========================================================================== Авторизация (вход / регистрация / смена пароля) — тикет #5B.7 ========================================================================== */ .auth { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(0.75rem, 2vw, 1.25rem); max-width: 62rem; margin: clamp(0.5rem, 3vh, 2rem) auto; align-items: stretch; } .auth--single { grid-template-columns: minmax(0, 34rem); justify-content: center; } .auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.35rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .auth-brand::before { content: ""; position: absolute; top: -35%; right: -20%; width: 65%; height: 150%; background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--amber) 20%, transparent), transparent 62%); pointer-events: none; } .auth-mark { position: relative; width: clamp(3.2rem, 7vw, 4.2rem); height: clamp(3.2rem, 7vw, 4.2rem); margin-bottom: 0.5rem; } .auth-brand .story-kicker { position: relative; margin-top: 0; } .auth-tagline { position: relative; margin: 0.15rem 0 0; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.5rem, 3.2vw, 1.9rem); font-weight: 400; line-height: 1.05; text-wrap: balance; } .auth-lede { position: relative; max-width: 42ch; margin: 0.75rem 0 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; } .auth-points { position: relative; display: grid; gap: 0.5rem; margin: 1.15rem 0 0; padding: 0; list-style: none; } .auth-points li { position: relative; padding-left: 1.5rem; color: var(--ink); font-size: 0.9rem; line-height: 1.4; } .auth-points li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.55rem; height: 0.55rem; border-radius: var(--radius-pill); background: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); } .auth-card { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .auth-card-head { display: grid; gap: 0.15rem; } .auth-card-head .story-kicker { margin-top: 0; } .auth-card-head h1 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.35rem, 2.6vw, 1.6rem); font-weight: 400; line-height: 1.1; } .auth-form { display: grid; gap: 0.5rem; } .auth-form label { color: var(--faint); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } .auth-form .form-input + label { margin-top: 0.5rem; } .auth-form .btn-large { margin-top: 0.75rem; } .auth-field-hint { color: var(--faint); font-size: 0.8rem; line-height: 1.35; } .auth-alt { margin: 0; color: var(--muted); font-size: 0.9rem; } .auth-alt a { color: var(--teal); font-weight: 650; text-decoration: none; } .auth-alt a:hover { text-decoration: underline; } @media (max-width: 760px) { .auth { grid-template-columns: 1fr; } .auth-brand { order: -1; } .auth-points { display: none; } } .feed-filters-cut { margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); } summary { cursor: pointer; } .feed-filters-summary { display: list-item; width: fit-content; margin-bottom: 0.75rem; color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 600; cursor: pointer; } .feed-filters-summary::marker { color: var(--color-text-secondary); } .feed-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; padding-bottom: 1.25rem; } .active-feed-filter { display: flex; width: fit-content; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding: 0.45rem 0.7rem; border: 1px solid var(--color-accent-subtle-border); border-radius: var(--radius-sm); background-color: var(--color-accent-subtle-bg); color: var(--color-text-secondary); font-size: 0.9rem; } .active-feed-filter strong { color: var(--color-text); } .active-feed-filter-clear { color: var(--color-accent); font-weight: 600; text-decoration: none; } .active-feed-filter-clear:hover { text-decoration: underline; } .feed-section-title { margin-bottom: 0.75rem; color: var(--color-text); font-size: 1.1rem; line-height: 1.3; } .feed-stats-section { margin-bottom: 1.25rem; } .feed-stats-summary { display: list-item; width: fit-content; margin-bottom: 0.65rem; color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 600; cursor: pointer; } .feed-stats-section:not([open]) .feed-stats-summary { margin-bottom: 0; } .feed-stats-summary::marker { color: var(--color-text-secondary); } .top-highlights { margin-bottom: 1.75rem; } .top-highlights-header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--color-border); } .top-highlights-header .feed-section-title { margin-bottom: 0; font-size: 1.45rem; letter-spacing: -0.02em; } .top-highlights-kicker { margin: 0 0 0.25rem; color: var(--color-accent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .top-highlights-subtitle { max-width: 28rem; margin: 0; color: var(--color-text-secondary); font-size: 0.92rem; line-height: 1.45; } .top-highlights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; counter-reset: top-highlight; } .top-highlight { position: relative; display: flex; flex-direction: column; min-height: 9.75rem; padding: 0.95rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); background-color: var(--color-surface); color: var(--color-text); counter-increment: top-highlight; text-decoration: none; box-shadow: var(--shadow-sm); transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .top-highlight:first-child { grid-column: 1 / -1; min-height: 12.5rem; padding: 1.25rem; border-left-width: 5px; background: linear-gradient(135deg, var(--color-accent-subtle-bg), transparent 58%), var(--color-surface); } .top-highlight:first-child .top-highlight-category { margin-bottom: 0.9rem; } .top-highlight:first-child .top-highlight-text { max-width: 48rem; font-size: 1.18rem; font-weight: 650; line-height: 1.38; -webkit-line-clamp: 3; } .top-highlight-body { display: flex; flex: 1; min-width: 0; flex-direction: column; } .top-highlight--with-image { flex-direction: row; gap: 1.1rem; } .top-highlight--with-image .top-highlight-body { justify-content: center; } .top-highlight-image-wrap { display: block; width: min(36%, 18rem); min-width: 13rem; overflow: hidden; border-radius: calc(var(--radius-md) - 2px); background-color: var(--color-surface-muted); } .top-highlight-image { display: block; width: 100%; height: 100%; min-height: 10rem; object-fit: cover; transition: transform var(--transition); } .top-highlight--with-image:hover .top-highlight-image { transform: scale(1.025); } .top-highlight:nth-child(n+6) { grid-column: 1 / -1; min-height: 0; padding: 0.85rem 0.95rem 0.85rem 3.2rem; border-left-width: 1px; box-shadow: none; } .top-highlight:nth-child(n+6)::before { top: 0.9rem; right: auto; left: 0.95rem; display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border: 1px solid var(--color-accent-subtle-border); border-radius: 999px; background-color: var(--color-accent-subtle-bg); color: var(--color-accent); opacity: 1; } .top-highlight:nth-child(n+6) .top-highlight-category { margin: 0 0 0.35rem; padding: 0; border: 0; background: transparent; } .top-highlight:nth-child(n+6) .top-highlight-text { font-size: 0.92rem; -webkit-line-clamp: 2; } .top-highlight:nth-child(n+6) .top-highlight-meta { margin-top: 0.45rem; padding-top: 0; border-top: 0; } .top-highlight::before { content: counter(top-highlight); position: absolute; top: 0.85rem; right: 0.9rem; color: var(--color-accent); font-size: 0.82rem; font-weight: 700; line-height: 1; opacity: 0.75; } .top-highlight:hover { background-color: var(--color-surface-muted); border-color: var(--color-accent-subtle-border); border-left-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-1px); } .top-highlight:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow-md); } .top-highlight-category { align-self: flex-start; max-width: 100%; margin: 0 1.5rem 0.65rem 0; padding: 0.15rem 0.45rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-surface-muted); color: var(--color-text-secondary); font-size: 0.76rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top-highlight-text { display: -webkit-box; overflow: hidden; color: var(--color-text); font-size: 0.92rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .top-highlight--pending .top-highlight-text { color: var(--color-text-muted); } .top-highlight--pending .top-highlight-text::after { content: ""; display: inline-block; width: 1.6rem; height: 0.7rem; margin-left: 0.25rem; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--color-accent-subtle-border), transparent); animation: highlight-pending 1.2s ease-in-out infinite; } @keyframes highlight-pending { 0% { opacity: 0.35; transform: translateX(-0.2rem); } 50% { opacity: 1; transform: translateX(0); } 100% { opacity: 0.35; transform: translateX(0.2rem); } } .top-highlight-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.65rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.3; } .top-highlight-meta span + span::before { content: "·"; margin-right: 0.35rem; color: var(--color-border-strong); } .filter-field { display: flex; flex-direction: column; flex: 1 1 11rem; min-width: 0; gap: 0.35rem; } .filter-field .form-input { width: 100%; min-width: 0; } .filter-field label { color: var(--color-text-secondary); font-size: 0.85rem; font-weight: 600; } .filter-field-source { flex-basis: 16rem; } .filter-check { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 2.75rem; gap: 0.45rem; color: var(--color-text-secondary); font-size: 0.9rem; white-space: nowrap; } .filter-check input { width: 1rem; height: 1rem; accent-color: var(--color-accent); } .filter-actions { display: flex; flex: 0 0 auto; gap: 0.5rem; align-items: center; justify-content: flex-end; } .feed-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; } .feed-stat { display: flex; align-items: baseline; gap: 0.35rem; padding: 0.35rem 0.6rem; background-color: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-sm); min-width: 0; } .feed-stat-value { color: var(--color-text); font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; } .feed-stat-label { color: var(--color-text-secondary); font-size: 0.82rem; white-space: nowrap; } .post-source { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.65rem; } .channel-avatar { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: 50%; background-color: var(--color-accent-subtle-bg); color: var(--color-accent); font-weight: 700; line-height: 1; } .channel-avatar-link { display: inline-flex; flex: 0 0 auto; border-radius: 50%; text-decoration: none; } .channel-avatar-link:hover .channel-avatar { border-color: var(--color-accent); box-shadow: var(--ring); } .channel-avatar--list, .channel-avatar--post { width: 3rem; height: 3rem; font-size: 1.1rem; } .channel-avatar--feed { width: 2.25rem; height: 2.25rem; font-size: 0.9rem; } .channel-avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-color: var(--color-surface-muted); } .post-source-details { display: inline-flex; min-width: 0; flex-direction: column; line-height: 1.3; } .source-title { font-weight: bold; font-size: 0.9rem; color: var(--color-accent); text-decoration: none; } a.source-title:hover { text-decoration: underline; } .source-username { font-size: 0.8rem; color: var(--color-text-muted); text-decoration: none; } a.source-username:hover { color: var(--color-accent); text-decoration: underline; } .cluster-badge { display: inline-block; padding: 0.15rem 0.45rem; background-color: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.76rem; color: var(--color-text-secondary); margin-left: 0.5rem; } /* «Прочитать всё» — обнуление счётчика «Нового» одним действием. */ .feed-markall { flex: 0 0 auto; display: flex; align-items: center; margin: 0; } .feed-markall-btn { display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: none; border-radius: calc(var(--radius-md) - 3px); background-color: transparent; color: var(--color-text-muted); cursor: pointer; } .feed-markall-btn svg { width: 1.1rem; height: 1.1rem; } .feed-markall-btn:hover { color: var(--color-text); background-color: var(--color-surface); } /* Темы поверх подписок (тикет #75): вкладки-линзы над лентой. */ .feed-themes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; } .feed-theme { padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--color-border); background-color: var(--color-surface-muted); color: var(--color-text-secondary); font-size: 0.82rem; text-decoration: none; white-space: nowrap; } .feed-theme:hover { color: var(--color-text); background-color: var(--color-surface); } .feed-theme--active { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-fg); } .feed-theme--manage { border-style: dashed; } .feed-topic-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .feed-topic-header h1 { margin: 0.25rem 0 0; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; line-height: 1.12; text-wrap: balance; } .feed-topic-header p { max-width: 60ch; margin: 0.55rem 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; } .feed-topic-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: none; } .save-search-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; } .save-search-form .search-input { flex: 1; min-width: 12rem; } .feed-mode-note { margin: -0.5rem 0 1rem; color: var(--color-text-secondary); font-size: 0.9rem; } .feed-chronology-divider { margin: 0.75rem 0 1rem; color: var(--color-text-muted); font-size: 0.86rem; text-align: center; } .post { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 17px 19px; margin-bottom: 14px; background-color: var(--surface); box-shadow: none; transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition); } .post:hover { background-color: color-mix(in srgb, var(--color-surface-muted) 55%, var(--color-surface)); box-shadow: var(--shadow-sm); } .post--top-insert { border-left: 3px solid var(--color-accent); } /* Прочитанное в режиме «Новое» (#84): пройденный при прокрутке пост приглушается и получает акцентную левую границу — виден фронт «докуда дочитал». Наведение возвращает полную читаемость. */ .post--read { opacity: 0.55; border-left: 3px solid var(--color-border); transition: opacity var(--transition), border-color var(--transition), box-shadow var(--transition); } .post--read:hover { opacity: 1; } .clickable-card { cursor: pointer; } .clickable-card:hover { border-color: var(--color-border-strong); } .clickable-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; box-shadow: var(--shadow-md); } .clickable-card a, .clickable-card button { cursor: pointer; } .post-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.65rem; gap: 0.75rem; } .post-title { font-size: 1.1rem; flex: 1; } .post-date { color: var(--color-text-secondary); font-size: 0.9rem; white-space: nowrap; } .post-classification { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .category-badge, .digest-badge, .top-insert-badge, .spam-badge, .classification-pending { display: inline-block; padding: 0.16rem 0.45rem; border-radius: 999px; font-size: 0.74rem; line-height: 1.2; } .category-badge { border: 1px solid var(--color-border); background: var(--color-surface-muted); color: var(--color-text-secondary); font-weight: 600; text-decoration: none; } .category-badge:hover { border-color: var(--color-accent); color: var(--color-accent); } .spam-badge { border: 1px solid var(--color-spam-border); background: var(--color-spam-bg); color: var(--color-spam-fg); font-weight: 700; } .digest-badge { border: 1px solid var(--color-digest-border); background: var(--color-digest-bg); color: var(--color-digest-fg); font-weight: 700; } .top-insert-badge { border: 1px solid var(--color-accent-subtle-border); background: var(--color-accent-subtle-bg); color: var(--color-accent); font-weight: 700; text-decoration: none; } .top-insert-badge:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-fg); } /* Редакционная карточка ленты (редизайн): шапка = аватар + канал/кикер слева, пилюля тональности справа. */ .post-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; } .post-ident { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .post-top .source-title { font-weight: 700; font-size: 0.98rem; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .post-top .source-title:hover { color: var(--teal); } .post-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--muted); } .post-kicker-cat { color: var(--muted); text-decoration: none; } .post-kicker-cat:hover { color: var(--teal); } .post-top .sentiment-pill { flex: none; margin-left: auto; align-self: flex-start; } .post-kicker .spam-badge, .post-kicker .digest-badge, .post-kicker .top-insert-badge { margin-left: 0.15rem; } /* Стопка аватарок каналов-участников сюжета. */ .avatar-stack { display: inline-flex; flex: none; align-items: center; } .avatar-stack-item { margin-left: -0.6rem; box-shadow: 0 0 0 2px var(--surface); } .avatar-stack-item:first-child { margin-left: 0; } /* Заголовок сюжета дня — serif, редакционный. */ .post-text--headline { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: var(--ink); text-wrap: balance; } /* Медиа как подписанные чипы под текстом. */ .post-media-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.1rem 0 0.2rem; } .media-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-input); background: var(--surface-2); color: var(--muted); font-size: 0.8rem; } .media-chip svg { width: 14px; height: 14px; flex: none; } /* Футер карточки: сводка кластера/метрики слева, действия справа. */ .post-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--line-2); } .post-foot-left, .post-foot-right { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .post-foot-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--teal); font-size: 0.85rem; text-decoration: none; } .post-foot-link:hover { text-decoration: underline; } .post-foot-link svg { width: 15px; height: 15px; flex: none; transform: rotate(45deg); } .post-foot-open { color: var(--teal); font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .post-foot-open:hover { text-decoration: underline; } .post-foot-meta { display: flex; gap: 0.75rem; color: var(--faint); font-size: 0.82rem; } .post-foot-right form { margin: 0; } .post-body--with-aside { display: flex; align-items: flex-start; gap: 1rem; } .post-body-main { min-width: 0; flex: 1 1 auto; } .top-insert-image { display: block; width: 180px; height: 120px; flex: 0 0 180px; object-fit: cover; border-radius: var(--radius-sm); margin: 0; border: 1px solid var(--color-border); } .classification-pending { color: var(--color-text-muted); font-style: italic; } /* Бейдж тональности события: сервер отдаёт только HSL-переменные, а CSS строит лёгкий tonal badge под текущую тему. */ .sentiment-badge { --sentiment-h: 215; --sentiment-s: 13%; --sentiment-l: 48%; display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.25rem; padding: 0 0.38rem; border-radius: 999px; font-size: 0.72rem; font-weight: 750; line-height: 1; color: hsl(var(--sentiment-h) var(--sentiment-s) 30%); background: hsl(var(--sentiment-h) var(--sentiment-s) 95%); border: 1px solid hsl(var(--sentiment-h) var(--sentiment-s) 84%); } /* Тональность как пилюля с подписью (редизайн ленты): цветной кружок-балл + редакционная подпись. HSL-переменные приходят из sentimentStyle. */ .sentiment-pill { --sentiment-h: 215; --sentiment-s: 13%; --sentiment-l: 48%; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem 0.2rem 0.25rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; line-height: 1; color: hsl(var(--sentiment-h) var(--sentiment-s) 32%); background: hsl(var(--sentiment-h) var(--sentiment-s) 95%); border: 1px solid hsl(var(--sentiment-h) var(--sentiment-s) 84%); white-space: nowrap; } .sentiment-pill-score { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; font-size: 0.74rem; font-weight: 750; color: #fff; background: hsl(var(--sentiment-h) var(--sentiment-s) 42%); } /* Шапка ленты (шаг A редизайна): крупный serif-заголовок + пилюля настроения. */ .feed-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.25rem 0 20px; } .feed-head-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2rem); line-height: 1.1; color: var(--ink); } .feed-head-mood { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-widget); background: var(--surface); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition); } .feed-head-mood:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); } .feed-head-mood-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); } .feed-head-mood-score { font-size: 1.05rem; font-weight: 750; color: var(--ink); } /* Панель над лентой: чипы тем слева, сортировка справа (шаг B редизайна). */ .feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .feed-toolbar .feed-themes { margin-bottom: 0; } .feed-sort { position: relative; flex: none; } .feed-sort-summary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.85rem; white-space: nowrap; cursor: pointer; list-style: none; } .feed-sort-summary::-webkit-details-marker { display: none; } .feed-sort-summary svg { width: 14px; height: 14px; transition: transform var(--transition); } .feed-sort[open] .feed-sort-summary svg { transform: rotate(180deg); } .feed-sort-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 12rem; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-input); background: var(--surface); box-shadow: var(--shadow-md); } .feed-sort-option { padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); color: var(--ink); font-size: 0.88rem; text-decoration: none; } .feed-sort-option:hover { background: var(--surface-2); } .feed-sort-option--active { color: var(--teal); font-weight: 650; } /* «Настроение за сутки» — сводный индикатор над лентой. */ /* Виджеты ленты (тикет #166): ряд из трёх равных плашек над лентой. */ .feed-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 0.25rem 0 22px; } @media (max-width: 900px) { /* Виджеты — горизонтальный скролл (бриф): одна строка карточек, первая заподлицо с контентом. Flex вместо grid с отрицательными полями — надёжнее держит стартовую позицию скролла. */ .feed-widgets { display: flex; grid-template-columns: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .feed-widgets::-webkit-scrollbar { display: none; } .feed-widget { flex: 0 0 78%; scroll-snap-align: start; } } /* Мобильная лента: одна колонка, компактные карточки (бриф ≤900px). */ @media (max-width: 700px) { /* Настроение в шапке — отдельной строкой под заголовком. */ .feed-head { flex-wrap: wrap; } .feed-head-mood { width: 100%; justify-content: space-between; } /* Тональность в карточке — только цветной балл (как на мобильном макете). */ .post-top .sentiment-pill { padding: 0; background: transparent; border: none; } .sentiment-pill-label { display: none; } .post-top { gap: 0.55rem; } .post-kicker { gap: 0.25rem 0.35rem; } /* Футер: при нехватке ширины действия переносятся под сводку. */ .post-foot { flex-wrap: wrap; gap: 0.5rem 0.75rem; } .post-foot-right { margin-left: auto; } } .feed-widget { display: flex; flex-direction: column; gap: 7px; min-width: 0; min-height: 104px; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius-widget); background: var(--surface); } .feed-widget-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); } .feed-widget-icon { width: 15px; height: 15px; flex: none; color: var(--teal); } .feed-widget-value { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Крупное числовое значение прямых виджетов (сигнал/объём/канал). */ .feed-widget > .feed-widget-value { font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; } /* Значение мудового виджета — текстовая градация, не крупная цифра. */ .feed-widget-mood .feed-widget-value { font-size: 14.5px; font-weight: 600; } /* Настроение как крупное число с трендом (виджет по макету). */ .feed-mood-number { display: flex; align-items: baseline; gap: 0.4rem; font-size: 30px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; -webkit-line-clamp: none; } .feed-mood-trend { font-size: 13px; font-weight: 700; letter-spacing: 0; } .feed-mood-trend--up { color: var(--teal); } .feed-mood-trend--down { color: var(--amber); } .feed-mood-trend--flat { color: var(--grey-blue); } .feed-widget-sub { font-size: 12px; color: var(--muted); margin-top: auto; } .feed-widget-empty { font-size: 13px; color: var(--muted); margin-top: auto; } .feed-widget-story { display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit; } /* Заголовок сюжета в виджете — редакторский serif, не крупная цифра. */ .feed-widget-story .feed-widget-value { font-family: var(--font-serif); font-size: 16.5px; font-weight: 400; letter-spacing: 0; line-height: 1.3; } .feed-widget-story:hover .feed-widget-value { color: var(--teal); } .feed-widget-story--pending .feed-widget-value { color: var(--faint); font-style: italic; } .feed-widget-mood { display: flex; align-items: center; gap: 0.5rem; } .feed-widget-mood-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .feed-widget-arrow { font-weight: 800; font-size: 0.9em; opacity: 0.78; } .feed-widget-arrow--up { color: var(--teal); } .feed-widget-arrow--down { color: var(--amber); } .feed-widget-arrow--flat { color: var(--faint); } .feed-widget-chip { --sentiment-h: 215; --sentiment-s: 13%; --sentiment-l: 48%; display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.25rem; padding: 0 0.38rem; border-radius: 999px; font-size: 0.72rem; font-weight: 750; vertical-align: middle; color: hsl(var(--sentiment-h) var(--sentiment-s) 30%); background: hsl(var(--sentiment-h) var(--sentiment-s) 95%); border: 1px solid hsl(var(--sentiment-h) var(--sentiment-s) 84%); } @media (max-width: 640px) { .feed-widgets { grid-template-columns: 1fr; } } /* Каталог виджетов в личном кабинете (тикет #166). */ .widget-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 0.75rem; } .widget-slot { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-input); padding: 13px; background: var(--surface-2); } .widget-slot-label { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--faint); } .widget-catalog { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; } .widget-catalog-item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-muted); } .widget-catalog-title { font-weight: 700; font-size: 0.9rem; } .widget-catalog-desc { font-size: 0.82rem; color: var(--color-text-muted); } .widget-catalog-req { font-size: 0.74rem; color: var(--color-accent); } @media (max-width: 640px) { .widget-slots { grid-template-columns: 1fr; } } .feed-mood-badge { --sentiment-h: 215; --sentiment-s: 13%; --sentiment-l: 48%; display: inline-flex; align-items: center; justify-content: center; min-width: 2.35rem; height: 1.85rem; padding: 0 0.55rem; border-radius: 999px; font-size: 0.92rem; font-weight: 780; color: hsl(var(--sentiment-h) var(--sentiment-s) 29%); background: hsl(var(--sentiment-h) var(--sentiment-s) 94%); border: 1px solid hsl(var(--sentiment-h) var(--sentiment-s) 82%); flex-shrink: 0; } .feed-mood-text { display: flex; flex-direction: column; gap: 0.1rem; } .feed-mood-title { font-weight: 600; font-size: 0.9rem; } .feed-mood-caption { font-size: 0.78rem; color: var(--color-text-muted); } [data-theme="dark"] .sentiment-badge, [data-theme="dark"] .sentiment-pill, [data-theme="dark"] .feed-widget-chip { color: hsl(var(--sentiment-h) var(--sentiment-s) 78%); background: hsl(var(--sentiment-h) var(--sentiment-s) 26% / 0.34); border-color: hsl(var(--sentiment-h) var(--sentiment-s) 52% / 0.45); } [data-theme="dark"] .sentiment-pill-score { color: #0a1119; background: hsl(var(--sentiment-h) var(--sentiment-s) 62%); } [data-theme="dark"] .feed-mood-badge { color: hsl(var(--sentiment-h) var(--sentiment-s) 80%); background: hsl(var(--sentiment-h) var(--sentiment-s) 27% / 0.38); border-color: hsl(var(--sentiment-h) var(--sentiment-s) 54% / 0.5); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .sentiment-badge, :root:not([data-theme]) .sentiment-pill, :root:not([data-theme]) .feed-widget-chip { color: hsl(var(--sentiment-h) var(--sentiment-s) 78%); background: hsl(var(--sentiment-h) var(--sentiment-s) 26% / 0.34); border-color: hsl(var(--sentiment-h) var(--sentiment-s) 52% / 0.45); } :root:not([data-theme]) .sentiment-pill-score { color: #0a1119; background: hsl(var(--sentiment-h) var(--sentiment-s) 62%); } :root:not([data-theme]) .feed-mood-badge { color: hsl(var(--sentiment-h) var(--sentiment-s) 80%); background: hsl(var(--sentiment-h) var(--sentiment-s) 27% / 0.38); border-color: hsl(var(--sentiment-h) var(--sentiment-s) 54% / 0.5); } } .post-text { color: var(--color-text); margin: 0.65rem 0 0.75rem; font-size: 0.98rem; line-height: 1.62; } .post-read-more { display: inline-block; margin: -0.25rem 0 0.75rem; color: var(--color-accent); font-size: 0.86rem; font-weight: 600; text-decoration: none; } .post-read-more:hover { text-decoration: underline; } .post-media-only { color: var(--color-text-muted); font-style: italic; } .post-external-links { margin: 0.65rem 0 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-muted); } .post-external-links-title { padding: 0.5rem 0.7rem; color: var(--color-text-secondary); font-size: 0.84rem; font-weight: 600; cursor: pointer; } .post-external-links-list { margin: 0; padding: 0 0.9rem 0.7rem 2rem; } .post-external-links-list li { padding-top: 0.35rem; overflow-wrap: anywhere; } .post-external-link { margin-bottom: 0.65rem; } .post-external-link:last-child { margin-bottom: 0; } .post-external-link-kind, .post-external-link-title, .post-external-link-meta, .post-external-link-context { display: block; } .post-external-link-kind { color: var(--color-text-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .post-external-link-title { margin-top: 0.15rem; font-weight: 600; } .post-external-link-meta, .post-external-link-context { margin-top: 0.2rem; color: var(--color-text-secondary); font-size: 0.85rem; line-height: 1.45; } .post-meta { display: flex; align-items: center; gap: 1rem; margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--color-text-muted); } .post-meta:empty { display: none; } .meta-item { display: flex; align-items: center; gap: 0.3rem; } .copy-post-button { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0.5rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); font: inherit; cursor: pointer; transition: color var(--transition), background-color var(--transition); } .copy-post-button:hover { color: var(--color-accent); background-color: var(--color-accent-subtle-bg); } .copy-post-button:focus-visible { outline: none; box-shadow: var(--ring); } .copy-post-button.is-copied { color: var(--color-success-fg); background-color: var(--color-success-bg); } .copy-post-button.is-copy-error { color: var(--color-danger-fg); background-color: var(--color-danger-bg); } .copy-post-icon { width: 1rem; height: 1rem; flex: 0 0 auto; } .copy-post-status:empty { display: none; } .post-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); } .feed .post-actions .btn-small { min-height: 2.25rem; padding: 0.4rem 0.65rem; font-size: 0.82rem; } .feed .copy-post-button { min-width: 2.25rem; min-height: 2.25rem; padding: 0.4rem; } /* ========================================================================== Результаты поиска ========================================================================== */ .search-form { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; } .search--landing { display: flex; justify-content: center; min-height: min(34rem, calc(100svh - 12rem)); padding-block: 5rem 8rem; background: transparent; } .search--landing .search-form { width: min(100%, 38rem); margin-bottom: 0; } .search--landing .search-query-row { flex-direction: column; align-items: center; gap: 0.9rem; } .search--landing .search-input { width: 100%; min-height: 3.25rem; padding-inline: 1.25rem; border-radius: 999px; box-shadow: 0 0.35rem 1.5rem rgb(15 23 42 / 0.08); } .search--landing .search-query-row .btn { align-self: center; } .search-query-row { display: flex; gap: 0.5rem; } .search-submit { min-height: 2.25rem; padding: 0.45rem 0.9rem; color: var(--color-text-secondary); background-color: var(--color-surface-muted); border-color: var(--color-border); border-radius: 999px; font-size: 0.85rem; font-weight: 500; } .search-submit:hover, .search-submit:focus-visible { color: var(--color-accent-fg); background-color: var(--color-accent); border-color: var(--color-accent); } .search-input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0.6rem 0.75rem; background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: 999px; font-size: 1rem; } .search-input:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: var(--ring); } .search-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; gap: 0.75rem; margin: 0; padding: 0; border: 0; } .search-filters-cut { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .search-filters-summary { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; color: var(--color-text-secondary); cursor: pointer; font-size: 0.9rem; } .search-filters-summary::marker { color: var(--color-text-muted); } .search-filters-count { display: inline-flex; align-items: center; min-height: 1.35rem; padding: 0.1rem 0.45rem; color: var(--color-accent); background-color: var(--color-accent-subtle-bg); border-radius: 999px; font-size: 0.78rem; font-weight: 600; } .search-filters-cut[open] { padding-bottom: 0.75rem; } .search-filters-cut[open] .search-filters { margin-top: 0.25rem; } .search-filter { display: flex; flex-direction: column; gap: 0.25rem; color: var(--color-text-secondary); font-size: 0.875rem; } .search-filter select, .search-filter input { min-width: 0; min-height: 2.75rem; padding: 0.6rem 0.75rem; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; } .search-hint { margin: 0; color: var(--color-text-secondary); font-size: 0.8rem; opacity: 0.82; } .search-hint code { padding: 0.05rem 0.3rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.8125rem; } .search-checkbox { display: flex; align-items: center; min-height: 2.75rem; gap: 0.4rem; color: var(--color-text-secondary); font-size: 0.875rem; } .search-reset { align-self: flex-start; color: var(--color-text-secondary); font-size: 0.875rem; } .search-error { color: var(--color-danger-fg); background-color: var(--color-danger-bg); } .search-empty p { margin: 0 0 0.75rem; } .search-suggestion { font-size: 1.05rem; } .search-suggestion a { color: var(--color-accent); } .search-info { color: var(--color-text-secondary); margin-bottom: 1.5rem; } @media (max-width: 600px) { .search--landing { display: block; min-height: auto; padding-block: 1rem; background-color: var(--color-surface); } .search-query-row { align-items: stretch; } } .results { display: flex; flex-direction: column; gap: 1rem; } .result-item { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 17px 19px; background-color: var(--surface); box-shadow: none; transition: border-color var(--transition), box-shadow var(--transition); } .result-item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); } .result-date { margin-left: auto; } /* Бейдж происхождения результата гибридного поиска (#184): FTS / Ret / оба. margin-left:auto прижимает пару «бейдж + дата» вправо, дата встаёт вплотную. */ .search-source-badge { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: auto; padding: 0.14rem 0.42rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; } .search-source-badge + .result-date { margin-left: 0.5rem; } .search-source-fts { border-color: var(--color-accent-subtle-border); background: var(--color-accent-subtle-bg); color: var(--color-accent); } /* «Найдено по смыслу» — семантический флаг (тон .u-semflag макета). */ .search-source-ret { border-color: transparent; background: var(--pos-bg); color: var(--pos-fg); } .search-source-both { border-color: var(--accent-subtle-border); background: var(--accent-subtle-bg); color: var(--teal); } .search-source-both span { opacity: 0.5; margin: 0 0.05rem; } .result-excerpt { color: var(--color-text-secondary); margin: 1rem 0; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; } .result-excerpt mark { padding: 0 3px; border-radius: 3px; background: var(--heavy-bg); color: var(--heavy-fg); font-weight: 600; box-shadow: none; } .result-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; min-height: 1.5rem; font-size: 0.9rem; color: var(--color-text-secondary); } .result-actions { display: flex; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .stats-channel { display: flex; min-width: 12rem; align-items: center; gap: 0.65rem; } .stats-channel-details { display: inline-flex; min-width: 0; flex-direction: column; line-height: 1.3; } .ops-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .ops-stat-card { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); box-shadow: var(--shadow-sm); } .ops-stat-card--warning { border-color: var(--color-warning-border, var(--color-accent-subtle-border)); background-color: var(--color-warning-bg, var(--color-accent-subtle-bg)); } .ops-stat-value { color: var(--color-text); font-size: 1.55rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .ops-stat-label { color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.3; } .ops-attention-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .ops-attention-card { display: grid; grid-template-columns: minmax(14rem, 1fr); gap: 0.75rem; min-width: 0; padding: 1rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); background-color: var(--color-surface); box-shadow: var(--shadow-sm); } .ops-attention-reasons, .ops-badge-list { display: flex; flex-wrap: wrap; gap: 0.4rem; } .ops-row-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; width: 100%; } .ops-row-actions .btn-sm { width: 100%; box-sizing: border-box; min-height: 2rem; padding: 0.32rem 0.45rem; font-size: 0.78rem; line-height: 1.2; white-space: nowrap; } .ops-row-actions .btn-secondary { border-color: transparent; box-shadow: inset 0 0 0 1px var(--color-border-strong); } .ops-row-actions .btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--color-border-strong); } .ops-mini-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; } .ops-mini-metrics > div { min-width: 0; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); background-color: var(--color-surface-muted); } .ops-mini-metrics dt { overflow: hidden; color: var(--color-text-secondary); font-size: 0.74rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .ops-mini-metrics dd { margin-top: 0.15rem; color: var(--color-text); font-size: 0.95rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .ops-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); } .ops-controls .filter-field { flex: 1 1 14rem; } .ops-controls .filter-field > span { color: var(--color-text-secondary); font-size: 0.85rem; font-weight: 600; } .ops-table { width: 100%; min-width: 79rem; border-collapse: collapse; } .ops-table-scroll { padding-right: 0.35rem; } .ops-table th, .ops-table td { box-sizing: border-box; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .ops-table th { color: var(--color-text-secondary); font-size: 0.78rem; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: 0.02em; background-color: var(--color-surface-muted); } .ops-table tbody tr:hover { background-color: var(--color-surface-muted); } .ops-table-link, .ops-table-link:visited { color: var(--color-accent); } .ops-actions-cell { width: 7rem; min-width: 7rem; padding-right: 1.1rem !important; text-align: right; } .numeric-cell { text-align: right; font-variant-numeric: tabular-nums; } .nowrap-cell { white-space: nowrap; } .muted-row { opacity: 0.58; } .ops-badge { display: inline-flex; align-items: center; min-height: 1.45rem; padding: 0.18rem 0.5rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-secondary); background-color: var(--color-surface-muted); font-size: 0.78rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .ops-badge--ok { color: var(--color-success-fg); border-color: color-mix(in srgb, currentColor 35%, transparent); background-color: color-mix(in srgb, currentColor 10%, transparent); } .ops-badge--warning { color: var(--color-warning-fg); border-color: color-mix(in srgb, currentColor 35%, transparent); background-color: color-mix(in srgb, currentColor 10%, transparent); } .ops-badge--muted { color: var(--color-text-muted); } /* ========================================================================== Мои темы ========================================================================== */ .topics { border: 1px solid var(--line); border-radius: var(--radius-card); background-color: var(--surface); box-shadow: none; padding: 20px 22px; display: flex; flex-direction: column; gap: 1.25rem; margin: 18px 0; } /* Заголовок экрана Siora (H1 23px serif, раздел 3 бриф). */ .siora-page-title { font-family: var(--font-serif); font-weight: 600; font-size: 23px; line-height: 1.1; color: var(--ink); text-wrap: balance; margin: 0 0 18px; } /* Профиль в кабинете (карточка .u-profile макета). */ .account-profile { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 22px; margin-bottom: 22px; } .account-profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; flex: none; border-radius: 50%; background: linear-gradient(150deg, var(--sky), var(--teal)); color: #fff; font-weight: 700; font-size: 22px; text-transform: uppercase; } .account-profile-meta { min-width: 0; } .account-profile-meta h2 { margin: 0; font-size: 18px; color: var(--ink); } .account-profile-meta p { margin: 2px 0 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-profile-edit { margin-left: auto; flex: none; font-size: 13px; color: var(--teal); border: 1px solid var(--line); border-radius: 9px; padding: 8px 15px; font-weight: 600; background: var(--surface); text-decoration: none; } .account-profile-edit:hover { border-color: var(--teal); } .topics-head h2 { margin: 0 0 0.35rem; font-size: 15.5px; color: var(--ink); } .topics-lede { margin: 0; color: var(--muted); font-size: 13px; } .topic-group { display: flex; flex-direction: column; gap: 0.6rem; } .topic-group-head { display: flex; align-items: baseline; gap: 0.6rem; } .topic-group-head h3 { margin: 0; font-size: 0.95rem; } .topic-count { font-size: 0.8rem; color: var(--color-text-muted); } .topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .topic-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface-muted); } .topic-row--on { border-color: var(--color-accent); background-color: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-muted)); } .topic-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; text-decoration: none; color: inherit; } a.topic-main:hover .topic-title { text-decoration: underline; } .topic-title { font-weight: 600; color: var(--color-text); } .topic-desc { font-size: 0.82rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topic-row form { margin: 0; flex-shrink: 0; } .topic-status { flex-shrink: 0; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--color-border); background-color: var(--color-surface); color: var(--color-text-secondary); font-size: 0.78rem; white-space: nowrap; } .topics-page { margin: 0; } .topics-hero, .topics-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: none; } .topics-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: end; padding: clamp(1.15rem, 2.6vw, 2rem); margin-bottom: 1rem; } .topics-hero h1 { margin: 0.3rem 0 0; color: var(--ink); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; line-height: 1.08; text-wrap: balance; } .topics-hero p { max-width: 64ch; margin: 0.75rem 0 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; } .topics-hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; min-width: 0; } .topics-panel { display: grid; gap: 1rem; padding: clamp(1rem, 2.2vw, 1.45rem); margin-top: 1rem; } .topics-section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line-2); } .topics-section-head h2 { margin: 0.2rem 0 0; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.35rem, 2.3vw, 1.7rem); font-weight: 400; line-height: 1.12; } .topics-section-head p { max-width: 34rem; margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; } .topic-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.75rem; } .topic-card, .saved-topic-card, .topics-empty-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-widget); } .topic-card, .saved-topic-card { display: grid; gap: 1rem; align-content: space-between; padding: 1rem; } .topic-card--on { border-color: color-mix(in srgb, var(--teal) 55%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 15%, transparent); } .topic-card-kicker { color: var(--faint); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } .topic-card h3, .saved-topic-card h3 { margin: 0.25rem 0 0; color: var(--ink); font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; line-height: 1.15; } .topic-card h3 a, .saved-topic-main { color: inherit; text-decoration: none; } .topic-card h3 a:hover, .saved-topic-main:hover h3 { color: var(--teal); } .topic-card p, .saved-topic-card p { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; } .topic-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 10rem)); gap: 0.5rem; align-items: stretch; } .topic-card-actions form { margin: 0; } .topic-card-actions .btn, .topic-card-actions form, .topic-card-actions form .btn { width: 100%; } .saved-topic-list { display: grid; gap: 0.75rem; } .saved-topic-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } /* Stack main content above actions on narrow screens. Defined here (after the base rule above) so it wins by source order — the mirrored override in the earlier @media (max-width: 900px) block would otherwise be overridden. */ @media (max-width: 900px) { .saved-topic-card { grid-template-columns: 1fr; align-items: stretch; } .saved-topic-card .topic-card-actions { grid-template-columns: 1fr; } } .topics-empty-card { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem; } .topics-empty-card p { margin: 0; color: var(--muted); } .account-shortcut { align-items: flex-start; } /* ========================================================================== Каналы ========================================================================== */ .channels-list { display: flex; flex-direction: column; gap: 1rem; } .channel-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; background-color: var(--color-surface-muted); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.75rem; } .channel-top-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .channel-info { flex: 1; } .channel-title { font-size: 1.1rem; margin-bottom: 0.3rem; } .channel-title a { color: inherit; text-decoration: none; } .channel-title a:hover { color: var(--teal); } .channel-username { color: var(--color-text-secondary); font-size: 0.9rem; margin-bottom: 0.3rem; } .channel-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.4rem; } .channel-stat { color: var(--color-text-muted); font-size: 0.85rem; } .channel-actions { display: flex; gap: 0.5rem; margin-left: 2rem; } .channel-status { color: var(--color-text-muted); font-style: italic; } .channel-catalog { margin: 0; } .catalog-hero, .catalog-toolbar, .catalog-channel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .catalog-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: end; padding: clamp(1.15rem, 2.6vw, 2rem); margin-bottom: 1rem; } .catalog-hero h1 { margin: 0.3rem 0 0; color: var(--ink); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; line-height: 1.08; text-wrap: balance; } .catalog-hero p { max-width: 62ch; margin: 0.75rem 0 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; } .catalog-hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; min-width: 0; } .catalog-toolbar { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; padding: 1rem; margin-bottom: 1rem; } .catalog-search, .catalog-suggest { display: grid; gap: 0.5rem; margin: 0; } .catalog-search label, .catalog-suggest label { color: var(--faint); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } .catalog-search-row { display: flex; gap: 0.5rem; align-items: stretch; } .catalog-search-row .form-input { flex: 1 1 auto; min-width: 0; } /* Кнопки поиска/предложения выровнены по единой ширине, чтобы «Найти» и «Предложить» смотрелись как один элемент управления рядом с полем. */ .catalog-search-row .btn { flex: 0 0 auto; min-width: 9rem; } .catalog-login-card { display: grid; gap: 0.5rem; padding: 0.9rem; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-widget); } .catalog-login-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; } .catalog-list { gap: 0.75rem; } .catalog-channel { padding: 1rem; background-color: var(--surface); box-shadow: none; } .catalog-channel .channel-top-row { align-items: flex-start; } .catalog-channel .channel-info { min-width: 0; } .catalog-channel .channel-title { margin: 0.15rem 0 0.25rem; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 400; line-height: 1.12; } .catalog-channel .channel-username { display: inline-flex; margin: 0; color: var(--grey-blue); font-size: 0.88rem; font-weight: 650; text-decoration: none; } .catalog-channel .channel-username:hover { color: var(--teal); } .channel-stat--subscribed { color: var(--teal); font-weight: 700; } .catalog-channel .channel-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } /* ========================================================================== Онбординг (первый вход) — тикет #5B.6 ========================================================================== */ .onboarding { max-width: 760px; margin: 0 auto; } .onboarding-hero { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: clamp(0.9rem, 2.5vw, 1.5rem); padding: clamp(1.25rem, 3vw, 2.1rem); margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .onboarding-hero::before { content: ""; position: absolute; top: -45%; right: -12%; width: 60%; height: 160%; background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 62%); pointer-events: none; } .onboarding-mark { flex: none; display: inline-flex; } .onboarding-mark .siora-mark { width: clamp(3rem, 8vw, 4rem); height: clamp(3rem, 8vw, 4rem); } .onboarding-hero-copy { position: relative; min-width: 0; } .onboarding-hero-copy .story-kicker { margin-top: 0; } .onboarding-hero h1 { margin: 0.3rem 0 0; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 1.7rem); font-weight: 400; line-height: 1.08; text-wrap: balance; } .onboarding-hero p { max-width: 60ch; margin: 0.75rem 0 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; } .onboarding-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1rem; padding: 0; list-style: none; } .onboarding-step { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-widget); box-shadow: var(--shadow-sm); } .onboarding-step-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--teal); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-widget); } .onboarding-step-icon svg { width: 1.1rem; height: 1.1rem; } .onboarding-step div { display: grid; gap: 0.2rem; min-width: 0; } .onboarding-step strong { color: var(--ink); font-size: 0.92rem; line-height: 1.2; } .onboarding-step span { color: var(--muted); font-size: 0.82rem; line-height: 1.4; } .onboarding-form { padding: clamp(1rem, 2.5vw, 1.4rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .onboarding-section-header { display: grid; gap: 0.15rem; margin-bottom: 1rem; } .onboarding-section-header .story-kicker { margin-top: 0; } .onboarding-section-header h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; line-height: 1.12; } .onboarding-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.65rem; } .onboarding-channel { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.85rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-widget); cursor: pointer; transition: border-color var(--transition), background-color var(--transition); } .onboarding-channel:hover { border-color: var(--grey-blue); } .onboarding-channel:has(input:checked) { background: var(--pos-bg); border-color: var(--teal); } .onboarding-channel input { position: absolute; opacity: 0; pointer-events: none; } .onboarding-channel:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; } .onboarding-channel-copy { display: grid; gap: 0.1rem; min-width: 0; flex: 1; } .onboarding-channel-title { color: var(--ink); font-size: 0.94rem; font-weight: 650; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .onboarding-channel-username { color: var(--grey-blue); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .onboarding-channel-meta { color: var(--faint); font-size: 0.76rem; } .onboarding-channel-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; color: transparent; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); transition: color var(--transition), background-color var(--transition), border-color var(--transition); } .onboarding-channel-check svg { width: 0.9rem; height: 0.9rem; } .onboarding-channel:has(input:checked) .onboarding-channel-check { color: #fff; background: var(--teal); border-color: var(--teal); } .onboarding-empty { display: grid; justify-items: center; gap: 0.75rem; padding: 2rem 1rem; text-align: center; } .onboarding-empty-mark .siora-mark { width: 2.6rem; height: 2.6rem; opacity: 0.7; } .onboarding-empty p { max-width: 44ch; margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; } .onboarding-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.25rem; } .onboarding-hint { color: var(--faint); font-size: 0.82rem; line-height: 1.4; } .btn-large { min-height: 3rem; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 650; } @media (max-width: 620px) { .onboarding-hero { flex-direction: column; } .onboarding-steps { grid-template-columns: 1fr; } .onboarding-channels { grid-template-columns: 1fr; } } /* Публичная страница канала */ .channel-page { margin: 0; } .channel-hero, .channel-feed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: none; } .channel-hero { position: relative; overflow: hidden; display: grid; gap: 1.25rem; padding: clamp(1.15rem, 2.6vw, 2rem); margin-bottom: 1rem; } .channel-hero-main { display: flex; align-items: center; gap: 1rem; } .channel-avatar--hero { width: 4.2rem; height: 4.2rem; font-size: 1.55rem; } .channel-hero-copy { min-width: 0; } .channel-kicker { display: inline-block; color: var(--faint); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } .channel-hero h1 { margin: 0.25rem 0 0; color: var(--ink); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; line-height: 1.12; text-wrap: balance; } .channel-hero-username { display: inline-block; margin-top: 0.35rem; color: var(--muted); font-size: 0.94rem; text-decoration: none; } .channel-hero-username:hover { color: var(--teal); } .channel-hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .channel-hero-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .channel-feed { display: grid; gap: 0.85rem; padding: clamp(1rem, 2vw, 1.25rem); } .channel-posts { display: grid; gap: 0.85rem; } .channel-post { margin-bottom: 0; } .stop-phrases { font-size: 0.85rem; color: var(--color-text-secondary); } .stop-phrases-title { font-weight: 600; margin-bottom: 0.3rem; } .stop-phrases-list { list-style: none; padding: 0; margin: 0 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.3rem; } .stop-phrase-item { display: flex; align-items: center; gap: 0.25rem; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 3px; padding: 0.15rem 0.4rem; } .stop-phrases-empty { color: var(--color-text-muted); font-style: italic; } .admin-page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .page-subtitle { margin-top: 0.25rem; color: var(--color-text-secondary); } /* Заголовки отдельных админ-страниц — тот же редакторский тон, что дашборд. */ .admin-page-heading h1 { font-family: var(--font-serif); font-weight: 400; line-height: 1.06; } /* Подзаголовки секций внутри админ-форм (Фаза 2): serif, как секции дашборда. */ .admin-subhead, .llm-settings-section h2 { font-family: var(--font-serif); font-weight: 400; line-height: 1.2; } /* Заголовки секций админ-дашбордов метрик (аналитика, расход LLM). Scoped на .analytics, чтобы не затронуть общий .feed-section-title в ленте. */ .analytics .feed-section-title { font-family: var(--font-serif); font-weight: 400; } .admin-channel-count { flex: 0 0 auto; padding: 0.35rem 0.75rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.9rem; } .admin-channel-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .admin-channel-summary-card { padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); } .summary-value { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.2; } .summary-label { display: block; margin-top: 0.15rem; color: var(--color-text-muted); font-size: 0.82rem; } .admin-channel-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; margin-bottom: 1rem; } .admin-channel-filters, .admin-channel-add-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .admin-channel-filters { min-width: 0; } .admin-channel-search { flex: 1 1 18rem; } .admin-channel-add-form { justify-content: flex-end; } .admin-channel-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); } .admin-channel-table { width: 100%; min-width: 62rem; border-collapse: collapse; } .admin-channel-table th, .admin-channel-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; } .admin-channel-table th { background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .admin-channel-row--inactive { opacity: 0.72; } .admin-channel-details-row td { padding: 0; background: color-mix(in srgb, var(--color-surface-muted) 70%, var(--color-surface)); } .admin-channel-main { display: flex; align-items: center; gap: 0.75rem; min-width: 16rem; } .admin-channel-name { min-width: 0; } .admin-channel-cell-main .channel-title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-channel-cell-main .channel-username { margin: 0.1rem 0 0; } .status-pill { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: 0.82rem; white-space: nowrap; } .status-pill--ok { background: var(--color-success-bg); color: var(--color-success-fg); } /* Severity-варианты статус-пилюли (§5C): янтарный «тяжёлый фон» для состояний, требующих внимания. Красный намеренно не используется. */ .status-pill--warn, .status-pill--danger { background: var(--heavy-bg); color: var(--heavy-fg); } .admin-channel-switch { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .numeric-cell { font-variant-numeric: tabular-nums; text-align: right; } .center-cell { text-align: center; } .muted { color: var(--color-text-muted); } .stop-phrase-count { display: inline-flex; min-width: 1.8rem; justify-content: center; padding: 0.12rem 0.45rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .inline-form { display: inline; margin: 0; } .admin-channel-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } .admin-channel-details { padding: 0.45rem 0.75rem 0.65rem 4.35rem; } .admin-channel-details summary { cursor: pointer; color: var(--color-text-secondary); font-size: 0.85rem; } .admin-channel-details .stop-phrases { margin-top: 0.55rem; } .admin-channel-details .stop-phrase-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } /* Стоп-фразы на странице поста */ .post-stop-phrases { background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.5rem; margin-bottom: 2rem; box-shadow: var(--shadow-sm); } .post-stop-phrases-title { cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--color-text); } .post-stop-phrases-title::marker { color: var(--color-accent); } .post-stop-phrases-title:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--ring); } .post-stop-phrases-content { margin-top: 0.75rem; } .stop-phrase-add-form { display: flex; gap: 0.4rem; margin-top: 0.6rem; align-items: center; } .stop-phrase-add-form--post { align-items: flex-start; } .stop-phrase-add-form--post textarea { flex: 1; resize: vertical; } /* ========================================================================== Просмотр поста ========================================================================== */ .post-view { max-width: 860px; margin: 0 auto; } .post-full { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1.1rem, 2.6vw, 2rem); margin-bottom: 1.25rem; box-shadow: none; } .post-full-header { display: grid; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line-2); } .post-back-link { justify-self: start; color: var(--muted); font-size: 0.86rem; font-weight: 650; text-decoration: none; } .post-back-link:hover { color: var(--teal); } .post-full-source { display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--muted); } .post-full-source .post-source-details { display: flex; flex: 1 1 min(26rem, 100%); min-width: 0; flex-direction: column; gap: 0.12rem; } .post-full-kicker { display: block; color: var(--faint); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } .post-full-source .source-title { display: block; font-family: var(--font-serif); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 400; line-height: 1.15; color: var(--ink); text-wrap: balance; } .post-full-source .source-username { display: block; color: var(--muted); } .post-full-spacer { flex: 1 1 auto; } .post-full-badges { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; flex-wrap: wrap; } .post-full-meta { display: inline-flex; align-items: center; gap: 0.45rem 0.85rem; flex-wrap: wrap; margin-top: 0.65rem; font-size: 0.84rem; color: var(--muted); } .post-full-meta .post-date { color: var(--muted); font-size: inherit; margin: 0; white-space: nowrap; } .post-full-content { max-width: 68ch; } /* Панель действий над текстом поста: кнопка «Копировать» до начала текста. */ .post-content-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.4rem; } .post-full-content .post-external-links { margin-top: 1rem; } .post-full-text { font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.78; color: var(--ink); white-space: pre-wrap; word-break: break-word; margin-bottom: 1.25rem; } .post-empty-text { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.25rem; padding: 1rem 1.1rem; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-widget); } .post-empty-text span { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; border-radius: var(--radius-pill); color: var(--amber); background: var(--heavy-bg); } .post-full-actions { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line-2); } /* Обратная связь по посту (тикет #76). Заголовок над рядом кнопок, а сами действия (Спам · Не интересно · Скрыть) — всегда одной строкой. */ .post-feedback { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; margin-top: 0.85rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-widget); background: var(--surface-2); } .post-feedback-title { color: var(--faint); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; } .post-feedback-actions { display: flex; gap: 0.5rem; } .post-feedback-actions form { flex: 1 1 0; min-width: 0; margin: 0; display: flex; } .post-feedback-actions .btn { width: 100%; justify-content: center; white-space: nowrap; } /* Очередь модерации спам-сигналов */ .feedback-queue-hint { color: var(--color-text-secondary); font-size: 0.9rem; margin-bottom: 1rem; } .feedback-item .feedback-meta { color: var(--color-text-secondary); font-size: 0.85rem; margin-left: 0.5rem; } .feedback-item .feedback-post { margin: 0.35rem 0 0; } .feedback-item .feedback-post-text { color: var(--color-text-secondary); } /* Похожие посты */ .similar-section { display: grid; gap: 0.85rem; margin: 1.25rem 0; padding: clamp(1rem, 2vw, 1.25rem); border: 1px solid var(--line); border-radius: var(--radius-card); background: color-mix(in srgb, var(--surface) 82%, var(--surface-2)); } .similar-section-header { display: grid; gap: 0.25rem; margin-bottom: 0.25rem; } .similar-section-header p { max-width: 62ch; color: var(--muted); font-size: 0.9rem; } .similar-kicker { color: var(--faint); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; } .similar-title { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 400; line-height: 1.2; text-wrap: balance; } .similar-details { border: 1px solid var(--line); border-radius: var(--radius-widget); background: var(--surface); } .similar-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: 0.72rem 0.9rem; color: var(--muted); font-size: 0.88rem; font-weight: 700; cursor: pointer; list-style: none; } .similar-details summary::-webkit-details-marker { display: none; } .similar-details summary::after { content: "⌄"; color: var(--faint); font-size: 1rem; transition: transform var(--transition); } .similar-details[open] summary { border-bottom: 1px solid var(--line-2); } .similar-details[open] summary::after { transform: rotate(180deg); } .similar-posts-list { display: grid; gap: 0.85rem; padding: 0.85rem; } .similar-post { margin-bottom: 0; background: var(--surface); } .post-back { display: flex; justify-content: center; margin: 1.25rem 0 2rem; } /* ========================================================================== Экран сюжета ========================================================================== */ .story-view { max-width: 980px; margin: 0 auto; } .story-hero, .story-timeline, .story-posts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: none; } .story-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: clamp(1.15rem, 2.6vw, 2rem); margin-bottom: 1rem; } /* В hero сюжета кикер идёт отдельной строкой под ссылкой «назад», а не в одну строку с ней (в grid-hero'ях он вложен в copy). */ .story-hero .story-kicker { margin-top: 0.25rem; } .story-kicker { display: inline-block; margin-top: 1rem; color: var(--faint); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } .story-title { max-width: 780px; margin: 0.35rem 0 0; color: var(--ink); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; line-height: 1.12; text-wrap: balance; } .story-hero--pending .story-title { color: var(--faint); font-style: italic; } .story-hero--pending .story-title::after { content: ""; display: inline-block; width: 1.15em; height: 0.6em; margin-left: 0.12em; border-radius: var(--radius-pill); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sky) 45%, transparent), transparent); animation: highlight-pending 1.2s ease-in-out infinite; } .story-lede { max-width: 68ch; margin: 0.75rem 0 0; color: var(--muted); font-size: 0.96rem; } .story-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.25rem; } .story-metric { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.85rem 0.95rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-widget); } .story-metric-label { color: var(--faint); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; } .story-metric strong { color: var(--ink); font-size: 1.35rem; line-height: 1.1; } .story-sentiment-range { display: inline-flex; align-items: center; gap: 0.45rem; } .story-timeline, .story-posts { padding: clamp(1rem, 2vw, 1.25rem); margin-bottom: 1rem; } .story-section-header { display: grid; gap: 0.25rem; margin-bottom: 0.85rem; } .story-section-header .story-kicker { margin-top: 0; } .story-section-header h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 400; line-height: 1.2; } .story-timeline-list { list-style: none; display: grid; gap: 0.55rem; margin: 0; padding: 0; } .story-timeline-list li { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.55rem 0.7rem; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-input); } .story-timeline-list time { color: var(--muted); font-size: 0.84rem; white-space: nowrap; } .story-timeline-list span { min-width: 0; color: var(--ink); font-weight: 650; overflow-wrap: anywhere; } .story-posts { display: grid; gap: 0.85rem; } .story-post { margin-bottom: 0; } .post-full .post-title { font-size: 1.8rem; margin-bottom: 0.5rem; } .post-content { font-size: 1.05rem; line-height: 1.8; margin: 2rem 0; color: var(--color-text); } .post-media-badges { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.15rem; } .media-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; color: var(--grey-blue); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); } .media-badge svg { width: 1rem; height: 1rem; } .media-badge-reply { color: var(--teal); } .post-media-gallery { display: grid; gap: 0.85rem; margin: 1.4rem 0; } .post-media-img { width: 100%; max-height: 620px; border-radius: var(--radius-md); object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); } .post-media-video { width: 100%; max-height: 620px; border-radius: var(--radius-md); background: var(--ink-deep); border: 1px solid var(--line); } .post-media-file { display: inline-flex; justify-self: start; padding: 0.55rem 0.85rem; background: var(--accent-subtle-bg); border: 1px solid var(--accent-subtle-border); border-radius: var(--radius-pill); color: var(--teal); text-decoration: none; font-size: 0.88rem; font-weight: 650; } .post-media-file:hover { border-color: var(--teal); } .post-media-fetch { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.95rem 1rem; background: var(--heavy-bg); border: 1px dashed color-mix(in srgb, var(--amber) 62%, var(--line)); border-radius: var(--radius-widget); font-size: 0.9rem; } .post-media-fetch-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--surface); color: var(--amber); font-size: 1.05rem; line-height: 1; } .post-media-fetch-label { color: var(--heavy-fg); font-weight: 650; } .post-media-fetch-size { color: var(--muted); font-weight: 500; } .post-media { margin: 2rem 0; } .post-media h2 { font-size: 1.3rem; margin-bottom: 1rem; } .media-item { margin: 1rem 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem; background-color: var(--color-surface-muted); } .media-image { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .media-placeholder { padding: 2rem; background-color: var(--color-surface-muted); border-radius: var(--radius-sm); text-align: center; color: var(--color-text-secondary); } .post-full .post-actions { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } /* ========================================================================== Пустое состояние / пагинация ========================================================================== */ .empty { text-align: center; color: var(--muted); padding: 3rem 1rem; font-size: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); } /* Пустая лента (состояния из §6 брифа): нет подписок / ничего по фильтру / тихо */ .feed-empty { display: grid; justify-items: center; gap: 0.6rem; padding: clamp(2.5rem, 6vw, 3.5rem) 1.25rem; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .feed-empty-mark .siora-mark { width: 3rem; height: 3rem; opacity: 0.7; } .feed-empty-title { margin: 0.35rem 0 0; color: var(--ink); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; line-height: 1.1; } .feed-empty-text { max-width: 42ch; margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; } .feed-empty .btn { margin-top: 0.5rem; } /* Скелетон-загрузка (раздел 6): мягкое мерцание, безопасное к reduced-motion. */ .skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--line) 60%, transparent), transparent); transform: translateX(-100%); animation: siora-shimmer 1.4s ease-in-out infinite; } @keyframes siora-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } } .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 2rem 0; padding: 2rem 0; border-top: 1px solid var(--color-border); } .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; } .table-scroll:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .stats-table { width: 100%; min-width: 70rem; border-collapse: collapse; } .categories-table { width: 100%; min-width: 52rem; margin-bottom: 2rem; border-collapse: collapse; } .token-table th, .token-table td { padding: 8px 12px; } .token-table th { text-align: left; } .token-table thead tr { border-bottom: 2px solid var(--color-border-strong); } .token-table tbody tr { border-bottom: 1px solid var(--color-border); } .token-table tfoot tr { border-top: 2px solid var(--color-border-strong); } .token-table-row-top { vertical-align: top; } .token-table-muted { color: var(--color-text-muted); } .token-table-small-muted { color: var(--color-text-muted); font-size: 0.75em; } /* ========================================================================== Формы ========================================================================== */ .add-form { display: flex; gap: 0.5rem; margin-bottom: 2rem; } .account-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .form-group { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .add-form > .form-group { flex: 1; } .form-group label { font-weight: bold; white-space: nowrap; } .form-input { flex: 1; min-width: 200px; min-height: 2.75rem; padding: 0.6rem 0.75rem; background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 1rem; } .form-input, input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); } .form-input:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: var(--ring); } /* ========================================================================== Администрирование ========================================================================== */ .admin-header { margin-bottom: 2rem; } .admin-header p { color: var(--color-text-secondary); } .admin-section + .admin-section { margin-top: 2rem; } .admin-section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .75rem; } .admin-section-header h2 { font-size: 1.3rem; line-height: 1.3; } .admin-section-header p { margin-top: .2rem; color: var(--color-text-secondary); } .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .admin-grid-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-grid-processes { grid-template-columns: minmax(16rem, .85fr) minmax(0, 1.15fr); align-items: stretch; } .admin-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-width: 0; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); box-shadow: var(--shadow-sm); } .admin-card h3, .admin-operation h3 { margin-bottom: .35rem; font-size: 1.05rem; line-height: 1.3; } .admin-card p { color: var(--color-text-secondary); } .admin-card-wide { width: 100%; } .admin-card-process-main { grid-row: span 2; } .admin-card-navigation { min-height: 10rem; } .admin-card-link { align-self: flex-start; } .admin-dashboard .admin-card-link { width: 13.75rem; max-width: 100%; } .admin-dashboard .btn { border-radius: 10px; } .admin-dashboard .btn:not(.btn-sm):not(.btn-small) { min-width: 10rem; } .admin-attention-preview { margin-top: 0; } .admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; } .admin-metrics > div { min-width: 0; padding: .65rem .75rem; border-radius: var(--radius-sm); background: var(--color-surface-muted); } .admin-metrics dt { overflow: hidden; color: var(--color-text-secondary); font-size: .78rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .admin-metrics dd { margin-top: .15rem; font-size: 1.2rem; font-weight: 700; line-height: 1.2; } .admin-metrics .admin-metric-danger { color: var(--color-danger); } .admin-button-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; } .admin-button-row form { flex: 0 0 13.75rem; } .admin-button-row .btn { width: 100%; } .admin-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; } .admin-inline-form label { color: var(--color-text-secondary); font-size: .9rem; font-weight: 600; } .admin-inline-form .form-input { flex: 0 0 7rem; min-width: 7rem; } .admin-dashboard .admin-inline-form { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(7rem, 7rem) minmax(8rem, 10rem); gap: .65rem .75rem; } .admin-dashboard .admin-inline-form .form-input { width: 100%; flex: none; } .admin-dashboard .admin-inline-form .btn { width: 100%; } .admin-section-header-with-status { align-items: center; } .admin-status { flex: 0 0 auto; padding: .3rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; } .admin-status-enabled { color: var(--color-success-fg); background: var(--color-success-bg); } .admin-status-disabled { color: var(--color-text-secondary); background: var(--color-surface-muted); border: 1px solid var(--color-border); } /* ========================================================================== Фаза 2 — редакторский язык админ-контура (§5C): serif-заголовки, kicker, бренд-радиусы и статус/severity-чипы. Паттерн-компоненты для админ-страниц. ========================================================================== */ .admin-kicker { display: inline-block; margin-bottom: 0.35rem; color: var(--faint); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } .admin-header h1 { font-family: var(--font-serif); font-weight: 400; line-height: 1.06; text-wrap: balance; } .admin-section-header h2 { font-family: var(--font-serif); font-weight: 400; } .admin-card h3, .admin-operation h3 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-family: var(--font-serif); font-weight: 400; } .admin-card { border-radius: var(--radius-card); } .admin-metrics > div { border-radius: var(--radius-widget); border: 1px solid var(--line-2); } /* Статус/severity-чип: компактная пилюля состояния для счётчиков очередей, метрик и статусов. Нейтральный по умолчанию; warn — янтарный «тяжёлый фон» (требует внимания), ok — teal позитивный, danger — тот же тяжёлый акцент. */ .admin-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; min-width: 1.5rem; justify-content: center; border-radius: var(--radius-pill); background: var(--neu-bg); color: var(--neu-fg); font-family: var(--font-sans, system-ui); font-size: 0.8rem; font-weight: 700; line-height: 1.5; } .admin-chip--warn, .admin-chip--danger { background: var(--heavy-bg); color: var(--heavy-fg); } .admin-chip--ok { background: var(--pos-bg); color: var(--pos-fg); } .admin-edition-operations { gap: 0; } .admin-operation-stack { gap: 0; } .admin-operation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem); align-items: center; gap: 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-border); } .admin-operation:first-child { padding-top: 0; } .admin-operation:last-child { padding-bottom: 0; border-bottom: 0; } .admin-operation-borderless { padding: 0; border: 0; } .admin-operation-copy p { max-width: 42rem; } .admin-operation > form, .admin-operation-control { justify-self: stretch; } .admin-operation-control > .btn { width: 100%; } .admin-operation-control { max-width: 24rem; } .admin-operation-stack .admin-operation-control > .btn { width: 13.75rem; max-width: 100%; } .admin-checkbox { display: inline-flex; align-items: center; gap: .45rem; } .admin-checkbox input { width: 1rem; height: 1rem; } .admin-field-action label { display: block; margin-bottom: .35rem; color: var(--color-text-secondary); font-size: .85rem; font-weight: 600; } .admin-field-action > div { display: grid; grid-template-columns: minmax(8rem, 1fr) auto; gap: .5rem; } .admin-field-action .form-input { min-width: 0; width: 100%; } .admin-config-card { gap: 1.25rem; } .admin-config-form { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(7rem, 12rem); align-items: center; gap: .75rem 1rem; max-width: 48rem; } .admin-config-form label { color: var(--color-text-secondary); font-size: .9rem; font-weight: 600; } .admin-config-form .form-input { width: 100%; } .admin-config-checkbox { grid-column: 1 / -1; } .admin-config-submit { grid-column: 1 / -1; justify-self: flex-start; } .admin-switch { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: .35rem .7rem; color: var(--color-text); background: transparent; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600; } .admin-switch:hover { background: var(--color-surface-muted); } .admin-switch-track { position: relative; display: block; width: 2rem; height: 1.1rem; border-radius: 999px; background: var(--color-border-strong); transition: background-color var(--transition); } .admin-switch-track span { position: absolute; top: .15rem; left: .15rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform var(--transition); } .admin-switch[aria-checked="true"] .admin-switch-track { background: var(--color-accent); } .admin-switch[aria-checked="true"] .admin-switch-track span { transform: translateX(.9rem); } .llm-settings-form { display: flex; flex-direction: column; gap: 1.5rem; } .llm-settings-section { padding-top: 1rem; border-top: 1px solid var(--color-border); } .llm-settings-section h2 { margin-bottom: .75rem; font-size: 1.15rem; } .llm-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .85rem; } .settings-field, .prompt-editor, .few-shot-row label { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .settings-field span, .prompt-editor span, .few-shot-row span { color: var(--color-text-secondary); font-size: .9rem; font-weight: 600; } .settings-field small, .prompt-editor small { color: var(--color-text-muted); font-size: .85rem; } .settings-note { margin: .75rem 0 0; color: var(--color-text-muted); font-size: .85rem; } .settings-field-wide { grid-column: 1 / -1; } .prompt-editor { margin-bottom: 1rem; } .prompt-textarea { width: 100%; min-width: 0; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .9rem; line-height: 1.45; resize: vertical; } .few-shot-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .9rem 0; border-top: 1px solid var(--color-border); } .few-shot-message { grid-column: 2; } .few-shot-meta { display: flex; flex-direction: column; gap: .65rem; } .few-shot-meta .form-input { min-width: 0; } .few-shot-active { flex-direction: row !important; align-items: center; } .llm-settings-actions, .llm-reset-form { display: flex; gap: .6rem; align-items: center; } .llm-reset-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } /* ========================================================================== Алерты ========================================================================== */ .alert { padding: 1rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; border-left: 4px solid; } .alert-error { background-color: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger-fg); } .alert-info { background-color: var(--color-accent-subtle-bg); border-color: var(--color-accent); color: var(--color-text); } /* ========================================================================== Адаптивность ========================================================================== */ @media (max-width: 960px) { .navbar-content, .navbar-actions { gap: .75rem; } .navbar-menu { gap: 1rem; } .admin-grid { grid-template-columns: 1fr; } .admin-card-process-main { grid-row: auto; } .ops-summary-grid, .ops-attention-list { grid-template-columns: 1fr; } .admin-card-navigation { min-height: 0; } .admin-channel-toolbar { grid-template-columns: 1fr; } .admin-channel-add-form { justify-content: flex-start; } .admin-operation { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: 1.25rem; } } @media (max-width: 768px) { .few-shot-row { grid-template-columns: 1fr; } .few-shot-message { grid-column: auto; } .navbar-content { flex-wrap: wrap; padding: .5rem 1rem; gap: .5rem; } .navbar-brand { order: 1; margin-left: .25rem; } .navbar-actions { order: 2; margin-left: auto; gap: .5rem; } .navbar-toggle { display: inline-flex; } .navbar-menu { order: 3; width: 100%; margin-left: 0; gap: .25rem; overflow-x: auto; scrollbar-width: thin; white-space: nowrap; } .navbar-menu.is-collapsible { display: none; } .navbar-menu.is-collapsible.is-open { display: flex; flex-direction: column; gap: 0; overflow: visible; padding-top: .65rem; border-top: 1px solid var(--color-border); white-space: normal; } .navbar-menu.is-open li { width: 100%; } .navbar-menu a { display: flex; min-height: 2.75rem; align-items: center; padding: .6rem .75rem; } .navbar-dropdown, .navbar-dropdown details, .navbar-dropdown-summary { width: 100%; } .navbar-dropdown-summary { min-height: 2.75rem; justify-content: space-between; padding: .6rem .75rem; } .navbar-dropdown-menu { position: static; min-width: 0; margin: .15rem 0 .45rem; padding: .25rem; border-radius: var(--radius-md); box-shadow: none; } .navbar-user-panel { right: 0; } .navbar-logout .btn { white-space: nowrap; } .container { margin: 1rem auto; padding: 0 .75rem; } .feed, .search, .channels, .admin-dashboard { padding: 1.25rem; } .top-highlights-grid { grid-template-columns: 1fr; } .top-highlights-header { display: block; } .top-highlights-subtitle { margin-top: 0.45rem; } .top-highlight { min-height: auto; padding: 0.9rem; } .top-highlight:first-child { min-height: auto; padding: 1rem; } .top-highlight:first-child .top-highlight-text { font-size: 1rem; } .top-highlight--with-image { flex-direction: column; gap: 0.85rem; } .top-highlight-image-wrap { order: -1; width: 100%; min-width: 0; max-height: 12rem; } .top-highlight-image { min-height: 9rem; max-height: 12rem; } .post-body--with-aside { flex-direction: column; gap: 0.75rem; } .top-insert-image { width: 100%; height: auto; max-height: 180px; flex-basis: auto; } .top-highlight:nth-child(n+6) { padding: 0.85rem 0.9rem 0.85rem 3rem; } .post, .post-full, .channel-item, .result-item { padding: 1rem; } .post-full-source { align-items: flex-start; } .post-full-spacer { display: none; } .post-full-badges { justify-content: flex-start; width: 100%; padding-left: calc(3rem + 0.75rem); } .post-full-actions { align-items: stretch; } .post-full-actions .btn { width: 100%; justify-content: center; } /* Ряд обратной связи остаётся одной строкой и на телефоне; лишь ужимаем подписи, чтобы три кнопки помещались по ширине. */ .post-feedback-actions { gap: 0.4rem; } .post-feedback-actions .btn { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.82rem; } .story-metrics { grid-template-columns: 1fr; } .channel-hero-main { align-items: flex-start; } .channel-hero-metrics { grid-template-columns: 1fr; } .channel-hero-actions .btn, .channel-hero-actions form, .channel-hero-actions form .btn { width: 100%; } .story-timeline-list li { grid-template-columns: 1fr; gap: 0.15rem; } .post-text, .post-full-text, .result-excerpt, .post-external-link-title, .post-external-link-meta, .post-external-link-context, .channel-title, .channel-username { overflow-wrap: anywhere; } .post-source { min-width: 0; flex-wrap: wrap; } .post-source-details { overflow-wrap: anywhere; } .post-meta, .post-full-meta, .result-meta, .channel-stats { gap: .5rem 1rem; flex-wrap: wrap; } .post-actions, .result-actions, .channel-actions, .filter-actions, .llm-settings-actions, .llm-reset-form { flex-wrap: wrap; } .add-form, .form-group { width: 100%; flex-wrap: wrap; } .form-group .form-input { min-width: min(100%, 12rem); } .post-full .post-title { font-size: clamp(1.4rem, 5vw, 1.8rem); } .post-stop-phrases { padding: 1rem; } .post-stop-phrases-title, .feed-filters-summary { min-height: 2.75rem; align-content: center; } .admin-dashboard { padding: 1.25rem; } .admin-page-heading { flex-direction: column; align-items: stretch; } .admin-channel-count { width: fit-content; } .admin-channel-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-channel-filters .form-input, .admin-channel-add-form .form-input { width: 100%; } .admin-channel-filters > *, .admin-channel-add-form > * { flex: 1 1 100%; } .admin-channel-details { padding-left: 1rem; } .admin-header { margin-bottom: 1.5rem; } .admin-section + .admin-section { margin-top: 1.5rem; } .admin-section-header, .admin-section-header-with-status { align-items: flex-start; flex-direction: column; gap: .6rem; } .admin-card { padding: 1rem; } .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-summary-grid, .ops-mini-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-controls { padding: 0.75rem; } .admin-operation { grid-template-columns: 1fr; gap: .75rem; padding: 1rem 0; } .admin-operation > form, .admin-operation-control, .admin-switch { width: 100%; } .admin-switch { justify-content: center; } .admin-field-action > div { grid-template-columns: 1fr; } .admin-field-action .btn { width: 100%; } .admin-dashboard .admin-inline-form { grid-template-columns: 1fr; } .admin-config-form { grid-template-columns: 1fr; } .admin-config-checkbox, .admin-config-submit { grid-column: auto; } .filter-actions { justify-content: flex-start; flex-wrap: wrap; } .channel-item { flex-direction: column; align-items: flex-start; } .channel-top-row { align-items: flex-start; flex-wrap: wrap; } .channel-info { min-width: 0; } .channel-actions { width: 100%; margin-left: 0; margin-top: .5rem; } .channel-actions label { display: inline-flex; min-height: 2.75rem; align-items: center; } .post-header { flex-direction: column; } .post-date { white-space: normal; } .feed-stat { flex: 1 1 9rem; } } @media (max-width: 480px) { .navbar-content { padding-inline: .75rem; } .navbar-brand { font-size: 1.25rem; } .navbar-actions { gap: .25rem; } .navbar-brand-mark { width: 2rem; height: 2rem; } .navbar-brand-text, .navbar-user-label { display: none; } .navbar-session.btn, .navbar-session .btn { padding-inline: .65rem; } .container { padding: 0 .5rem; } .feed, .search, .channels, .post-view, .admin-dashboard { padding: 1rem; border-radius: var(--radius-sm); } .post, .post-full, .channel-item, .result-item { padding: .875rem; } .search-query-row, .stop-phrase-add-form { flex-direction: column; } .search-query-row .btn, .stop-phrase-add-form .btn, .add-form > .btn { width: 100%; } .search-query-row .search-submit { width: auto; align-self: center; } .search-filters { grid-template-columns: 1fr; } .form-group { align-items: stretch; flex-direction: column; } .form-group > *, .form-group .form-input { width: 100%; min-width: 0; } .post-full-source .post-date { width: 100%; margin-left: 0; } .post-media-fetch { align-items: flex-start; } .post-media-badges { margin-left: 0; } .feed-stat { flex: 1 1 100%; } .feed-stat-label { white-space: normal; } .pagination { margin: 1.5rem 0; padding: 1.5rem 0; } .admin-dashboard { padding: 1rem; } .admin-header h1 { font-size: 1.75rem; line-height: 1.2; } .admin-button-row form, .admin-button-row .btn { width: 100%; } } /* ========================================================================== Газета ========================================================================== */ /* ========================================================================== Газета «Ежедневник Siora» (§5D) — наборная полоса ========================================================================== */ .edition-page { max-width: 820px; margin: 0 auto; padding: 1.5rem 1rem 3rem; } /* Лист газеты */ .edition-sheet { max-width: 760px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.25rem) 2.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-sm); } /* ── Наборная шапка ── */ .ed-masthead { text-align: center; } .ed-rule-top { border-top: 3px double var(--ink); opacity: 0.85; } .ed-nameplate { display: flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 1.1rem 0 0.35rem; } .ed-aura { width: clamp(2.1rem, 5vw, 2.8rem); height: clamp(2.1rem, 5vw, 2.8rem); flex: none; } .ed-arc-out { stroke: var(--sky); opacity: 0.8; } .ed-arc-in { stroke: var(--teal); } .ed-core { fill: var(--amber); } .ed-wordmark { font-family: var(--font-serif); font-size: clamp(2.4rem, 8vw, 3.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); } .ed-motto { margin: 0 0 0.9rem; font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: var(--muted); } .ed-dateline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--line); border-bottom: 3px double var(--ink); font-family: var(--font-sans, system-ui); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); } .ed-dateline-left { text-align: left; } .ed-dateline-mid { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 0.68rem; color: var(--faint); white-space: nowrap; } .ed-dateline-right { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.45rem; } .ed-tone-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6rem; font-weight: 700; color: var(--faint); } .ed-tone-pill { --sentiment-h: 215; --sentiment-s: 13%; --sentiment-l: 48%; display: inline-flex; align-items: center; padding: 0.12rem 0.5rem; border-radius: var(--radius-pill); color: hsl(var(--sentiment-h) var(--sentiment-s) 32%); background: hsl(var(--sentiment-h) var(--sentiment-s) 95%); border: 1px solid hsl(var(--sentiment-h) var(--sentiment-s) 84%); font-weight: 700; font-size: 0.72rem; font-variant-numeric: tabular-nums; } .ed-dateline-status { padding: 0.12rem 0.5rem; border-radius: var(--radius-pill); background: var(--neu-bg); color: var(--neu-fg); font-weight: 700; font-size: 0.68rem; } .ed-dateline-status--done { background: var(--pos-bg); color: var(--pos-fg); } .ed-dateline-status--failed { background: var(--heavy-bg); color: var(--heavy-fg); } /* ── Кикер-рубрика с волосяными линейками ── */ .ed-kicker { display: flex; align-items: center; gap: 1rem; margin: 2.25rem 0 0.9rem; font-family: var(--font-sans, system-ui); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.68rem; font-weight: 700; color: var(--faint); } .ed-kicker::before, .ed-kicker::after { content: ""; flex: 1; border-top: 1px solid var(--line); } /* ── Передовица ── */ .ed-lead-title { max-width: 22ch; margin: 0.1rem auto 0.35rem; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; text-align: center; color: var(--ink); } .ed-standfirst { max-width: 54ch; margin: 0 auto 1.4rem; text-align: center; color: var(--muted); font-size: 1.02rem; line-height: 1.5; font-style: italic; } .ed-lead .ed-prose p { font-size: 1.13rem; line-height: 1.62; } /* ── Иллюстрации ── */ .ed-figure { margin: 0 0 1.4rem; } .ed-plate { display: block; width: 100%; max-height: 420px; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; background: var(--surface-2); } .ed-figure--inline { float: right; width: 40%; min-width: 200px; margin: 0.3rem 0 1rem 1.6rem; } /* ── Текст ── */ .ed-prose { max-width: 64ch; margin: 0 auto; } .ed-prose p { margin: 0 0 1.05rem; font-size: 1.05rem; line-height: 1.64; color: var(--ink); hyphens: auto; } .ed-dropcap > p:first-of-type::first-letter { float: left; padding: 0.06em 0.1em 0 0; font-family: var(--font-serif); font-size: 3.35em; line-height: 0.82; font-weight: 700; color: var(--ink); } /* ── Отдел ── */ .ed-dept-title { max-width: 30ch; margin: 0 auto 0.8rem; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 3.4vw, 1.7rem); line-height: 1.14; text-align: center; text-wrap: balance; color: var(--ink); } /* ── Колофон ── */ .ed-colophon { margin-top: 2.75rem; padding-top: 1rem; border-top: 3px double var(--ink); font-family: var(--font-mono, ui-monospace); font-size: 0.72rem; line-height: 1.7; color: var(--muted); text-align: center; } .ed-colophon-dim { color: var(--faint); } /* ── Состояния ── */ .ed-state { display: grid; justify-items: center; gap: 0.75rem; padding: 2.5rem 1rem; text-align: center; color: var(--muted); } .ed-state-detail { max-width: 60ch; font-family: var(--font-mono, ui-monospace); font-size: 0.8rem; color: var(--heavy-fg); } .edition-empty { display: grid; justify-items: center; gap: 0.85rem; padding: clamp(2.5rem, 8vw, 4rem) 1rem; text-align: center; color: var(--muted); } .edition-empty-mark .siora-mark { width: 3rem; height: 3rem; opacity: 0.7; } @media (prefers-reduced-motion: no-preference) { .ed-state--wait .siora-mark { animation: edition-press 1.8s ease-in-out infinite; } } @keyframes edition-press { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } } .ed-nav { margin: 1.5rem auto 0; max-width: 760px; } /* ── Подшивка (архив) ── */ .ed-archive { max-width: 760px; margin: 0 auto; } .ed-archive-head { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 1rem; font-family: var(--font-sans, system-ui); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.68rem; font-weight: 700; color: var(--faint); } .ed-archive-head::before, .ed-archive-head::after { content: ""; flex: 1; border-top: 1px solid var(--line); } .ed-issue { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0.8rem 0.2rem; border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit; } .ed-issue-title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink); transition: color var(--transition); } .ed-issue:hover .ed-issue-title { color: var(--teal); } .ed-pill { flex: none; padding: 0.12rem 0.55rem; border-radius: var(--radius-pill); font-family: var(--font-sans, system-ui); font-size: 0.68rem; font-weight: 700; background: var(--neu-bg); color: var(--neu-fg); white-space: nowrap; } .ed-pill--ok { background: var(--pos-bg); color: var(--pos-fg); } .ed-pill--wait { background: var(--heavy-bg); color: var(--heavy-fg); } .ed-pill--fail { background: var(--heavy-bg); color: var(--heavy-fg); } /* ── Печатаемый номер ── */ @media print { .siora-top, .siora-side, .siora-bottomnav, .scroll-top, .ed-nav { display: none !important; } .edition-page { padding: 0; max-width: none; } .edition-sheet { box-shadow: none; border: none; max-width: none; margin: 0; } } /* ========================================================================== Reply-цитата ========================================================================== */ .reply-quote { border: 1px solid var(--accent-subtle-border); border-left: 3px solid var(--teal); padding: 0.8rem 0.95rem; margin: 0 0 1.15rem; background: var(--accent-subtle-bg); border-radius: var(--radius-widget); font-size: 0.9rem; color: var(--muted); } .reply-quote a { color: var(--teal); font-weight: 650; text-decoration: none; } .reply-quote a:hover { text-decoration: underline; } .reply-quote-header { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.3rem; color: var(--grey-blue); font-size: 0.8rem; font-weight: 700; } .reply-quote-header time { color: var(--faint); font-weight: 500; } .reply-quote-text { white-space: pre-wrap; color: var(--ink); } @media (max-width: 560px) { .edition-page { padding: 1rem 0.5rem 2rem; } .edition-sheet { padding: 1.25rem 1.1rem 2rem; } .ed-dateline { grid-template-columns: 1fr; text-align: center; gap: 0.35rem; } .ed-dateline-left, .ed-dateline-right { justify-content: center; text-align: center; } .ed-figure--inline { float: none; width: 100%; margin: 0 0 1.2rem; } .ed-prose p, .ed-lead-title, .ed-dept-title { overflow-wrap: anywhere; } } /* ========================================================================== Кнопка «Наверх» (#94) ========================================================================== */ .scroll-top { position: fixed; /* На широких экранах прижимаем к правому краю колонки контента (max-width 1200px), а не к самому краю viewport, чтобы не тянуться в дальний угол. На узких/мобильных max() выбирает 1.25rem. */ right: max(1.25rem, calc((100vw - 1200px) / 2 + 1.25rem)); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background-color: var(--color-accent); color: var(--color-accent-fg); box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; transform: translateY(0.5rem); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-top:hover { background-color: var(--color-accent-hover); } .scroll-top svg { width: 1.375rem; height: 1.375rem; } /* На мобильных нижняя навигация (sticky, z-index 100) закрывает кнопку «Наверх». Поднимаем её над панелью и по вертикали, и по z-index. Правило идёт ПОСЛЕ базового .scroll-top, иначе оно перекрывается им при равной специфичности. */ @media (max-width: 900px) { .scroll-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 110; } } /* Продуктовая аналитика (тикет #77) */ .analytics-note { color: var(--color-text-secondary); font-size: 0.9rem; margin: 0.25rem 0 1rem; } .analytics-window { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .analytics-window .btn-active { border-color: var(--color-accent); color: var(--color-accent); } .analytics-block { margin-top: 2rem; } .analytics-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; } .analytics-bar { flex: 1 0 6px; min-width: 6px; height: 100%; display: flex; align-items: flex-end; } .analytics-bar-fill { display: block; width: 100%; min-height: 2px; background-color: var(--color-accent); border-radius: 2px 2px 0 0; } .analytics-funnel { display: flex; flex-direction: column; gap: 0.6rem; } .analytics-funnel-step { display: grid; grid-template-columns: 12rem 1fr auto; align-items: center; gap: 0.75rem; } .analytics-funnel-track { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); height: 1.5rem; overflow: hidden; } .analytics-funnel-bar { height: 100%; background-color: var(--color-accent); } .analytics-funnel-value { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); } .analytics-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .analytics-top { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; } .analytics-top h3 { margin: 0 0 0.5rem; font-size: 1rem; } .analytics-top-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; } .analytics-top-list li { display: flex; justify-content: space-between; gap: 0.5rem; } .analytics-top-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .analytics-top-count { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); } .correlation-example + .correlation-example { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); } .correlation-example .analytics-note { margin: 0.25rem 0 0; max-width: 34rem; } .correlation-filters { display: flex; align-items: end; gap: 0.75rem; flex-wrap: wrap; } .correlation-filters label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; color: var(--color-text-secondary); } .correlation-pair-list { display: flex; flex-direction: column; gap: 1rem; } .correlation-pair-example { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; } .correlation-pair-header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .correlation-pair-texts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .correlation-pair-texts p { margin: 0.35rem 0 0; color: var(--color-text-secondary); line-height: 1.5; } @media (max-width: 600px) { .analytics-funnel-step { grid-template-columns: 1fr; gap: 0.25rem; } .correlation-pair-texts { grid-template-columns: 1fr; } } /* Пометка «сокращено ИИ» (#212): текст поста очищен фоновой LLM для спокойного чтения. */ .ai-cleaned-badge { display: inline-block; margin: 2px 0 6px; padding: 1px 8px; font-size: 11px; line-height: 1.6; color: var(--text-secondary, #6b7280); background: var(--surface-muted, rgba(120, 130, 150, 0.12)); border-radius: 999px; letter-spacing: 0.02em; } .ai-cleaned-note { margin: 6px 0 0; font-size: 12px; color: var(--text-secondary, #6b7280); font-style: italic; }