/* * Дизайн-система «Ньюсрум». * * Токены и компоненты интерфейса. Макет собран на CSS-переменных, поэтому * тёмная тема включается одним атрибутом data-theme="dark" на . */ :root { --bg: #f4f6f7; --surface: #ffffff; --surface2: #eef1f3; --border: #d7dee2; --line: #e8ecef; --text: #111a1f; --text2: #3c4a52; --muted: #6d7d86; --accent: #0d6f8c; --accent2: #0a5570; --accent-fg: #ffffff; --accent-soft: #e2f0f5; --ok: #1c6b4a; --ok-soft: #e2f1ea; --warn: #8a5a06; --warn-soft: #fbf0dc; --danger: #96271f; --danger-soft: #fbe6e3; --shadow: 0 1px 2px rgba(16, 32, 40, .06), 0 8px 24px -16px rgba(16, 32, 40, .24); --font-sans: "IBM Plex Sans", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; --sidebar-w: 236px; --sidebar-w-collapsed: 62px; --topbar-h: 52px; } :root[data-theme="dark"] { --bg: #0e1418; --surface: #151d22; --surface2: #1b252b; --border: #2a373f; --line: #232f36; --text: #e7eef1; --text2: #bdcad1; --muted: #8798a1; --accent: #4fb8d6; --accent2: #7bcde3; --accent-fg: #06222c; --accent-soft: #152e37; --ok: #6ecfa4; --ok-soft: #122a21; --warn: #e2b464; --warn-soft: #2b2314; --danger: #f0918a; --danger-soft: #2e1714; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .7); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); } body { font-family: var(--font-sans); color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent2); text-decoration: underline; } input, select, textarea, button { font-family: inherit; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } @keyframes shimmer { 0% { opacity: .45; } 50% { opacity: .9; } 100% { opacity: .45; } } @keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Каркас ─────────────────────────────────────────────────────────────── */ .app-shell { display: flex; height: 100vh; min-height: 100vh; overflow: hidden; background: var(--bg); color: var(--text); } .app-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .app-main { flex: 1 1 auto; overflow-y: auto; padding: 18px 18px 40px; } .auth-shell { width: min(100% - 32px, 420px); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 32px 0; } .auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; } .auth-card { width: 100%; } .auth-card__submit { justify-content: center; width: 100%; } .screen { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .screen--wide { max-width: 1600px; } .screen--narrow { max-width: 820px; } /* ── Меню ───────────────────────────────────────────────────────────────── */ .sidebar { flex: 0 0 auto; width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: width .18s ease; } .sidebar--collapsed { width: var(--sidebar-w-collapsed); } .sidebar--collapsed .sidebar__wide { display: none; } .sidebar__head { height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); } .sidebar__mark { width: 22px; height: 22px; border-radius: 5px; background: var(--accent); flex: 0 0 auto; } .sidebar__brand { min-width: 0; } .sidebar__brand-title { font-size: 13px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; } .sidebar__brand-sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; } .sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 14px; } .sidebar__foot { padding: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .sidebar__stats { font-size: 11px; color: var(--muted); line-height: 1.5; } .nav-group { display: flex; flex-direction: column; gap: 2px; } .nav-group__title { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 8px 6px; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; cursor: pointer; text-align: left; padding: 7px 8px; border-radius: 7px; background: transparent; color: var(--text2); font-size: 13px; font-weight: 400; } .nav-item:hover { background: var(--surface2); color: var(--text2); text-decoration: none; } .nav-item--active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-item--active:hover { background: var(--accent-soft); color: var(--accent); } .nav-item__chip { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10.5px; background: var(--surface2); color: var(--muted); } .nav-item--active .nav-item__chip { background: var(--accent); color: var(--accent-fg); } .nav-item__label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-item__badge { font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 20px; background: var(--surface2); color: var(--muted); } .nav-item__badge--warn { background: var(--warn-soft); color: var(--warn); } .nav-item__badge--danger { background: var(--danger-soft); color: var(--danger); } .nav-item--active .nav-item__badge { background: var(--surface2); color: var(--muted); } /* ── Верхняя панель ─────────────────────────────────────────────────────── */ .topbar { flex: 0 0 auto; height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar__titles { min-width: 0; } .topbar__title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar__subtitle { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spacer { flex: 1 1 auto; } .search { position: relative; flex: 0 1 300px; display: flex; align-items: center; } .search__prefix { position: absolute; left: 10px; font-size: 12px; color: var(--muted); font-family: var(--font-mono); } .search__input { width: 100%; padding: 6px 10px 6px 24px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font-size: 12.5px; outline: none; } .search__input:focus { border-color: var(--accent); background: var(--surface); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: 0 0 auto; } /* ── Кнопки ─────────────────────────────────────────────────────────────── */ .btn { border: 1px solid var(--border); background: transparent; color: var(--text2); border-radius: 7px; padding: 6px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .btn:hover { background: var(--surface2); text-decoration: none; color: var(--text2); } .btn--primary { border: 0; background: var(--accent); color: var(--accent-fg); padding: 7px 12px; font-size: 12.5px; font-weight: 600; } .btn--primary:hover { background: var(--accent2); color: var(--accent-fg); } .btn--accent { border-color: var(--accent); color: var(--accent); padding: 7px 12px; font-size: 12.5px; font-weight: 600; } .btn--accent:hover { background: var(--accent-soft); color: var(--accent); } .btn--sm { border-radius: 6px; padding: 5px 10px; font-size: 11.5px; } .btn--sm:hover { border-color: var(--accent); color: var(--accent); background: transparent; } .btn--danger { border-color: var(--danger); color: var(--danger); } .btn--danger:hover { background: var(--danger-soft); color: var(--danger); } /* ── Панели и карточки ──────────────────────────────────────────────────── */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } .panel__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .panel__title { font-size: 13px; font-weight: 600; } .panel__note { margin-left: auto; font-size: 11px; color: var(--muted); } .panel__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 12px; } .tile { text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; } .tile:hover { border-color: var(--accent); text-decoration: none; } .tile__label { font-size: 11.5px; color: var(--muted); font-weight: 500; } .tile__figure { display: flex; align-items: baseline; gap: 8px; } .tile__value { font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--text); } .tile__value--accent { color: var(--accent); } .tile__value--warn { color: var(--warn); } .tile__value--danger { color: var(--danger); } .tile__delta { font-size: 11px; color: var(--muted); } .tile__hint { font-size: 11px; color: var(--text2); } .overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; } .overview-grid__side { display: flex; flex-direction: column; gap: 16px; } /* ── Списки ─────────────────────────────────────────────────────────────── */ .queue-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); } .queue-row:hover { background: var(--surface2); } .queue-row__body { min-width: 0; } .queue-row__title { font-size: 13px; font-weight: 500; line-height: 1.35; text-wrap: pretty; } .queue-row__meta { font-size: 11px; color: var(--muted); margin-top: 3px; } .alert { display: flex; gap: 10px; align-items: flex-start; } .alert__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); margin-top: 6px; flex: 0 0 auto; } .alert__dot--danger { background: var(--danger); } .alert__dot--warn { background: var(--warn); } .alert__title { font-size: 12.5px; font-weight: 500; } .alert__text { font-size: 11px; color: var(--muted); line-height: 1.5; } .alert__action { margin-top: 6px; color: var(--accent); } .schedule-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); } .schedule-row__time { font-family: var(--font-mono); font-size: 12px; color: var(--accent); flex: 0 0 auto; } .schedule-row__body { min-width: 0; flex: 1 1 auto; } .schedule-row__title { font-size: 12.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .schedule-row__channels { font-size: 11px; color: var(--muted); } .schedule-row__form { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; } /* ── Метки ──────────────────────────────────────────────────────────────── */ .tag { font-size: 10.5px; font-weight: 600; text-align: center; padding: 3px 6px; border-radius: 4px; background: var(--surface2); color: var(--muted); } .tag--accent { background: var(--accent-soft); color: var(--accent); } .tag--ok { background: var(--ok-soft); color: var(--ok); } .tag--warn { background: var(--warn-soft); color: var(--warn); } .tag--danger { background: var(--danger-soft); color: var(--danger); } .pill { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: var(--surface2); color: var(--muted); } .pill--accent { background: var(--accent-soft); color: var(--accent); } .pill--danger { background: var(--danger-soft); color: var(--danger); } .pill--warn { background: var(--warn-soft); color: var(--warn); } @media (max-width: 1100px) { .overview-grid { grid-template-columns: minmax(0, 1fr); } } /* ── Пометка макета ─────────────────────────────────────────────────────── */ .demo-note { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--muted); background: var(--surface2); border: 1px dashed var(--border); border-radius: 8px; padding: 7px 11px; } /* ── Панель фильтров и поля формы ───────────────────────────────────────── */ .toolbar { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .row__note { font-size: 12px; color: var(--muted); } /* Действующие условия отбора. Выбранное в выпадающих списках на глаза не попадается: пустой список читается как «материалов нет», хотя их отсеяли фильтром. Каждое условие снимается по отдельности. */ .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .filter-chips__label { font-size: 12px; color: var(--muted); } .filter-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 4px 3px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); } .filter-chip__drop { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; color: inherit; text-decoration: none; line-height: 1; opacity: .6; } .filter-chip__drop:hover { opacity: 1; background: var(--surface2); } .input, .select, .textarea { padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font-size: 12.5px; outline: none; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); background: var(--surface); } .input--grow { flex: 1 1 260px; min-width: 200px; } .input--block { width: 100%; padding: 9px 11px; font-size: 13px; } .input--title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .select--block { width: 100%; padding: 8px 10px; } .select--sm { padding: 4px 8px; font-size: 11.5px; max-width: 260px; } .textarea { width: 100%; padding: 9px 11px; font-size: 13px; line-height: 1.6; resize: vertical; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); cursor: pointer; } .form { display: flex; flex-direction: column; gap: 14px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .field__hint { font-size: 11px; color: var(--muted); margin-top: 4px; } .checkbox-line { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text2); cursor: pointer; } .checkbox-list { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 4px 0; } /* ── Переключатель разделов ─────────────────────────────────────────────── */ .segmented { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--surface); } .segmented__item { border: 0; border-left: 1px solid var(--border); padding: 6px 11px; font-size: 11.5px; cursor: pointer; background: transparent; color: var(--text2); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .segmented__item:first-child { border-left: 0; } .segmented__item:hover { background: var(--surface2); color: var(--text2); text-decoration: none; } .segmented__item--active, .segmented__item--active:hover { background: var(--accent); color: var(--accent-fg); } .segmented__count { opacity: .65; } /* ── Массовые действия ──────────────────────────────────────────────────── */ .bulk-bar { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 9px; padding: 9px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .bulk-bar__title { font-size: 12.5px; font-weight: 600; color: var(--accent); } .btn--onaccent { border-color: var(--accent); background: var(--surface); color: var(--accent); border-radius: 6px; padding: 5px 10px; font-size: 12px; } .btn--onaccent:hover { background: var(--accent-soft); color: var(--accent); } .btn--onaccent.btn--danger { border-color: var(--danger); color: var(--danger); } .btn--onaccent.btn--danger:hover { background: var(--danger-soft); color: var(--danger); } .link-button { border: 0; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; text-decoration: underline; } /* ── Таблицы ────────────────────────────────────────────────────────────── */ .table-scroll { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; min-width: 1080px; } .table--wide { min-width: 1120px; } .table thead tr { background: var(--surface2); } .table th { text-align: left; padding: 9px 12px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; } .table th.table__check { width: 36px; } .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text2); } .table tbody tr:hover { background: var(--surface2); } .table__row--selected { background: var(--accent-soft); } .table__row--flagged { background: var(--danger-soft); } .table__cell--main { max-width: 420px; white-space: normal; } .table__cell--text { white-space: normal; line-height: 1.5; } .table__title { font-size: 13px; font-weight: 500; line-height: 1.35; text-wrap: pretty; color: var(--text); } .table__sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .table__sub--mono { font-family: var(--font-mono); } .table__mono { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .table__mono--warn { color: var(--warn); } .table__flags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 3px; } .table__actions { display: flex; gap: 6px; } .meter { display: flex; align-items: center; gap: 7px; } .meter__track { width: 46px; height: 5px; border-radius: 3px; background: var(--surface2); overflow: hidden; } .meter__fill { height: 100%; background: var(--muted); } .meter__fill--ok { background: var(--ok); } .meter__fill--accent { background: var(--accent); } .meter__fill--warn { background: var(--warn); } .meter__value { font-family: var(--font-mono); font-size: 11.5px; color: var(--text2); } .badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--surface2); color: var(--muted); white-space: nowrap; } .badge--accent { background: var(--accent-soft); color: var(--accent); } .badge--ok { background: var(--ok-soft); color: var(--ok); } .badge--warn { background: var(--warn-soft); color: var(--warn); } .badge--danger { background: var(--danger-soft); color: var(--danger); } .badge--upper { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; } .pager { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); } .pager__info { font-size: 11.5px; color: var(--muted); } .pager__pages { display: flex; gap: 6px; } .pager__page { border: 1px solid var(--border); background: transparent; color: var(--text2); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .pager__page--current { background: var(--surface2); color: var(--text); } /* ── Состояния загрузки, пустоты и ошибки ───────────────────────────────── */ .skeleton-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .skeleton-row { display: grid; grid-template-columns: 24px minmax(0, 2.4fr) 1fr .7fr .8fr .6fr; gap: 12px; align-items: center; animation: shimmer 1.4s ease-in-out infinite; } .skeleton { height: 12px; border-radius: 3px; background: var(--surface2); } .skeleton-note { font-size: 11.5px; color: var(--muted); padding-top: 4px; } .state { padding: 54px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .state--compact { padding: 44px 20px; } .state__icon { width: 36px; height: 36px; border-radius: 9px; background: var(--surface2); } .state__title { font-size: 14px; font-weight: 600; } .state__text { font-size: 12.5px; color: var(--muted); max-width: 440px; line-height: 1.55; } .state__actions { display: flex; gap: 8px; margin-top: 6px; } /* ── Сюжеты и дубликаты ─────────────────────────────────────────────────── */ .cluster__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .cluster__title { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; } .cluster__meta { font-size: 11.5px; color: var(--muted); } .cluster-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 190px 130px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); } .cluster-row__similarity { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--muted); } .cluster-row__similarity--ok { color: var(--ok); } .cluster-row__similarity--accent { color: var(--accent); } .cluster-row__similarity--warn { color: var(--warn); } .cluster-row__body { min-width: 0; } .cluster-row__title { font-size: 12.5px; line-height: 1.35; text-wrap: pretty; } .cluster-row__excerpt { font-size: 11px; color: var(--muted); margin-top: 2px; } .cluster-row__source { font-size: 12px; color: var(--text2); } .cluster-row__date { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); } /* ── Публикации и каналы ────────────────────────────────────────────────── */ .code-chips { display: flex; gap: 4px; } .code-chip { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 500; background: var(--surface2); color: var(--muted); } .code-chip--accent { background: var(--accent-soft); color: var(--accent); } .code-chip--ok { background: var(--ok-soft); color: var(--ok); } .code-chip--warn { background: var(--warn-soft); color: var(--warn); } .code-chip--danger { background: var(--danger-soft); color: var(--danger); } .code-chip--lg { width: 26px; height: 26px; border-radius: 6px; font-size: 11px; } .channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; } .channel__head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .channel__body { min-width: 0; flex: 1 1 auto; } .channel__name { font-size: 13.5px; font-weight: 600; } .channel__target { font-size: 11px; color: var(--muted); } .channel__counts { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); } .channel__count { padding: 10px 12px; border-left: 1px solid var(--line); } .channel__count:first-child { border-left: 0; } .channel__count-value { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--text); } .channel__count-value--accent { color: var(--accent); } .channel__count-value--warn { color: var(--warn); } .channel__count-value--danger { color: var(--danger); } .channel__count-value--muted { color: var(--muted); } .channel__count-label { font-size: 10.5px; color: var(--muted); margin-top: 1px; } .channel__section { padding: 12px 14px; } .channel__section-title { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .channel__actions { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; } .channel__note { font-size: 11px; color: var(--muted); margin-top: 9px; line-height: 1.55; } .channel__note--warn { color: var(--warn); } .channel__note--danger { color: var(--danger); } /* ── Редактор публикации ────────────────────────────────────────────────── */ .editor-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; align-items: start; } .editor-grid__side { display: flex; flex-direction: column; gap: 14px; } .publication-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .48fr); gap: 14px; align-items: start; } .publication-layout__main, .publication-layout__side { min-width: 0; display: flex; flex-direction: column; gap: 14px; } .publication-card { min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); } .publication-card__head, .publication-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; } .publication-card__head { justify-content: space-between; } .publication-card__title { font-size: 12.5px; font-weight: 500; line-height: 1.45; text-wrap: pretty; } .publication-card__meta { margin-top: 7px; font-size: 11px; line-height: 1.45; color: var(--muted); } .publication-card__error { margin-top: 8px; font-size: 11px; line-height: 1.45; color: var(--danger); } .editor-bar { position: sticky; top: -18px; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; box-shadow: var(--shadow); } .editor-bar__note { font-size: 12.5px; color: var(--text2); } .panel--padded { padding: 14px; } .source-item { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; } .source-item__check { margin-top: 3px; } .source-item__body { min-width: 0; } .source-item__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; } .source-item__source { font-size: 11.5px; color: var(--text2); } .source-item__date { font-size: 11px; color: var(--muted); font-family: var(--font-mono); } .source-item__title { font-size: 12.5px; font-weight: 500; line-height: 1.4; text-wrap: pretty; } .source-item__excerpt { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 4px; } .source-item__link { font-size: 11.5px; display: inline-block; margin-top: 6px; } .takeaways { display: flex; flex-direction: column; gap: 7px; } .takeaway { display: flex; gap: 8px; align-items: center; } .takeaway__num { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); flex: 0 0 auto; } .takeaway__input { flex: 1 1 auto; } .btn--dashed { border: 1px dashed var(--border); background: transparent; color: var(--accent); border-radius: 7px; padding: 6px 10px; font-size: 12px; width: 100%; justify-content: center; margin-top: 7px; } .btn--dashed:hover { border-color: var(--accent); background: transparent; color: var(--accent); } .btn--dashed-sm { border: 1px dashed var(--border); background: transparent; color: var(--accent); border-radius: 5px; padding: 4px 9px; font-size: 12px; } .btn--dashed-sm:hover { border-color: var(--accent); background: transparent; color: var(--accent); } .choices { display: flex; flex-wrap: wrap; gap: 6px; } .choice { border: 1px solid var(--border); background: transparent; color: var(--text2); border-radius: 20px; padding: 5px 11px; font-size: 12px; cursor: pointer; } .choice--on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tag-chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--border); background: var(--surface2); color: var(--text2); border-radius: 5px; padding: 4px 8px; font-size: 12px; } .tag-chip__remove { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0; } .preview { padding: 14px; background: var(--bg); } .preview__card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 13px 15px; max-width: 560px; } .preview--compact { padding: 0; } .preview--compact .preview__card { background: var(--bg); padding: 11px 13px; max-width: none; } .preview__meta { font-size: 11px; color: var(--muted); margin-bottom: 7px; font-family: var(--font-mono); } .preview__title { font-size: 14.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; } .preview--compact .preview__title { font-size: 13px; } .preview__body { font-size: 12.5px; color: var(--text2); line-height: 1.65; margin-top: 7px; white-space: pre-wrap; } .preview__footer { font-size: 11.5px; color: var(--accent); margin-top: 9px; } /* ── Очередь проверки ───────────────────────────────────────────────────── */ .stat-cards { display: flex; flex-wrap: wrap; gap: 10px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 11px 14px; flex: 1 1 180px; } .stat-card__label { font-size: 11.5px; color: var(--muted); } .stat-card__value { font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .stat-card__value--warn { color: var(--warn); } .stat-card__value--danger { color: var(--danger); } /* ── Рубрики и теги ─────────────────────────────────────────────────────── */ .two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; } .rubric-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); } .rubric-row:hover { background: var(--surface2); } .rubric-row__body { min-width: 0; flex: 1 1 auto; } .rubric-row__name { font-size: 12.5px; font-weight: 500; } .rubric-row__desc { font-size: 11px; color: var(--muted); line-height: 1.5; } .rubric-row__count { font-family: var(--font-mono); font-size: 11.5px; color: var(--text2); } .tag-cloud { padding: 14px; display: flex; flex-wrap: wrap; gap: 7px; } .tag-cloud__item { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--border); background: var(--bg); border-radius: 5px; padding: 5px 9px; font-size: 12px; color: var(--text2); } .tag-cloud__count { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); } a.tag-cloud__item { text-decoration: none; } a.tag-cloud__item:hover { border-color: var(--accent); color: var(--text); } .tag-cloud__item--active { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); } .tag-cloud__item--active .tag-cloud__count { color: var(--accent-fg); } .panel__subtitle { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .panel__footer { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--surface2); } .panel__footer--plain { border-top: 0; } .panel__footer-title { font-size: 12px; font-weight: 600; margin-bottom: 5px; } .panel__footer-text { font-size: 11.5px; color: var(--muted); line-height: 1.6; } /* ── Настройки ──────────────────────────────────────────────────────────── */ .setting-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .setting-row__body { min-width: 0; flex: 1 1 auto; } .setting-row__label { font-size: 12.5px; font-weight: 500; } .setting-row__hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; } .setting-row__value { font-size: 12.5px; color: var(--text2); text-align: right; } .setting-row--stacked { align-items: stretch; flex-direction: column; gap: 5px; } .setting-row__url { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; } .switch { flex: 0 0 auto; width: 38px; height: 21px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface2); position: relative; cursor: pointer; padding: 0; } .switch__knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--muted); transition: left .15s ease; } .switch--on { border-color: var(--accent); background: var(--accent); } .switch--on .switch__knob { left: 19px; background: var(--accent-fg); } /* ── Диалоги и уведомления ──────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(10, 18, 22, .5); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50; } .modal-overlay[hidden] { display: none; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; width: 100%; max-width: 660px; box-shadow: var(--shadow); overflow: hidden; } .modal--md { max-width: 600px; } .modal--sm { max-width: 560px; } .modal__head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .modal__title { font-size: 14px; font-weight: 600; } .modal__close { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; } .modal__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .modal__text { font-size: 12.5px; color: var(--text2); line-height: 1.6; } .modal__foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface2); } .modal__foot .btn { background: var(--surface); } .modal__foot .btn--primary { background: var(--accent); } .modal__foot .btn--primary:hover { background: var(--accent2); } .options { display: flex; flex-direction: column; gap: 8px; } .option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; cursor: pointer; } .option--on { border-color: var(--accent); background: var(--accent-soft); } .option--row { align-items: center; padding: 10px 12px; } .option--row:hover { border-color: var(--accent); } .option__title { font-size: 12.5px; font-weight: 500; line-height: 1.4; } .option__meta { font-size: 11px; color: var(--muted); margin-top: 3px; } .option__name { font-size: 12.5px; font-weight: 500; flex: 1 1 auto; } .option__note { font-size: 11.5px; color: var(--muted); } .note-warn { background: var(--warn-soft); border-radius: 8px; padding: 10px 12px; font-size: 11.5px; color: var(--warn); line-height: 1.55; } .note-ok { background: var(--ok-soft); border-radius: 8px; padding: 10px 12px; font-size: 11.5px; color: var(--ok); line-height: 1.55; } .code-block { font-family: var(--font-mono); font-size: 11.5px; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 11px 12px; color: var(--text2); line-height: 1.6; } /* Для готового текста — JSON настроек, ответов API: переносы значимы. */ .code-block--pre { white-space: pre; overflow-x: auto; margin-top: 6px; } /* ── Текст материала и публикации ───────────────────────────────────────── */ /* * Preflight Tailwind обнуляет заголовкам кегль и насыщенность, а спискам — * маркеры, поэтому размеченный markdown-ом текст пришлось бы читать сплошным * полотном. Всё, что снял preflight, здесь возвращается явно. */ .article-lead { font-size: 13px; line-height: 1.6; color: var(--text); margin-bottom: 12px; max-width: 72ch; } .article-body { font-size: 12.5px; line-height: 1.75; color: var(--text2); max-width: 72ch; } .article-body > :first-child { margin-top: 0; } .article-body > :last-child { margin-bottom: 0; } .article-body p { margin: 0 0 12px; } .article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { margin: 20px 0 10px; line-height: 1.3; font-weight: 600; color: var(--text); } .article-body h1 { font-size: 17px; } .article-body h2 { font-size: 15px; } .article-body h3 { font-size: 13.5px; } .article-body h4, .article-body h5, .article-body h6 { font-size: 12.5px; } .article-body ul, .article-body ol { margin: 0 0 14px; padding-left: 24px; } .article-body ul { list-style: disc; } .article-body ol { list-style: decimal; } .article-body li { margin-bottom: 5px; } .article-body li::marker { color: var(--muted); } .article-body li > ul, .article-body li > ol { margin: 5px 0 0; } .article-body strong { font-weight: 600; color: var(--text); } .article-body em { font-style: italic; } .article-body del { text-decoration: line-through; color: var(--muted); } .article-body hr { margin: 18px 0; border: 0; border-top: 1px solid var(--line); } .article-body blockquote { margin: 14px 0; padding-left: 14px; border-left: 3px solid var(--border); color: var(--muted); } .article-body pre, .article-body code { font-family: var(--font-mono); } .article-body code { font-size: 11.5px; background: var(--surface2); border-radius: 4px; padding: 1px 5px; } .article-body pre { margin: 0 0 14px; overflow-x: auto; padding: 12px; background: var(--surface2); border-radius: 7px; } .article-body pre code { background: none; padding: 0; } .article-body table { width: 100%; border-collapse: collapse; margin: 14px 0; } .article-body th, .article-body td { padding: 8px; border: 1px solid var(--border); text-align: left; } .article-body th { font-weight: 600; color: var(--text); background: var(--surface2); } .toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 11px 14px; box-shadow: var(--shadow); animation: toastin .18s ease; max-width: 380px; } .toast[hidden] { display: none; } .toast--warn { border-left-color: var(--warn); } .toast--danger { border-left-color: var(--danger); } .toast__text { font-size: 12.5px; color: var(--text); line-height: 1.5; } .toast__close { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; } @media (max-width: 1100px) { .editor-grid, .publication-layout, .two-col { grid-template-columns: minmax(0, 1fr); } }