/* ============================================ Timeline (хронология) — публичный просмотр Read-only сетка столбцы×линии на странице статьи ============================================ */ .article-timeline { display: block; margin: 32px 0; border-radius: 12px; overflow: hidden; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04); } .article-timeline__header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: #ffffff; } .article-timeline__icon { flex-shrink: 0; width: 16px; height: 16px; opacity: 0.9; } /* Селектор с .article-timeline поднимает специфичность выше .prose h3, иначе типографика статьи навязывает заголовку margin-top: 2em и свой цвет. */ .article-timeline .article-timeline__title { margin: 0; padding: 0; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: inherit; scroll-margin-top: 0; } .article-timeline__scroll { overflow-x: auto; padding: 14px; background: #f8fafc; } .article-timeline__grid { display: grid; grid-template-columns: var(--tlp-cols); gap: 8px; align-items: start; min-width: max-content; } .tlp-corner { display: flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; padding: 8px; } .tlp-col-head { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; color: #1e293b; text-align: center; } /* Строка линии раскладывается по общей grid-сетке. */ .tlp-row { display: contents; } .tlp-lane-head { display: flex; align-items: center; background: #ffffff; border: 1px solid #e2e8f0; border-left: 4px solid #2563eb; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; color: #1e293b; position: sticky; left: 0; } .tlp-cell { display: flex; flex-direction: column; gap: 6px; min-height: 48px; background: #ffffff; border: 1px solid #e8edf3; border-radius: 8px; padding: 8px; } .tlp-event { display: flex; flex-direction: column; gap: 3px; border-left: 3px solid #2563eb; border-radius: 5px; background: #f1f5f9; padding: 6px 8px; } .tlp-event__title { font-size: 13px; font-weight: 600; color: #1e293b; word-break: break-word; } .tlp-event__desc { font-size: 12px; line-height: 1.45; color: #475569; word-break: break-word; } /* Тёмная тема — переключатель [data-theme="dark"] на . */ [data-theme="dark"] .article-timeline { background: #1e293b; border-color: #334155; } [data-theme="dark"] .article-timeline__scroll { background: #172033; } [data-theme="dark"] .tlp-col-head, [data-theme="dark"] .tlp-lane-head, [data-theme="dark"] .tlp-cell { background: #1e293b; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .tlp-lane-head { border-left-color: #3b82f6; } [data-theme="dark"] .tlp-event { background: #0f172a; border-left-color: #3b82f6; } [data-theme="dark"] .tlp-event__title { color: #e2e8f0; } [data-theme="dark"] .tlp-event__desc { color: #94a3b8; } [data-theme="dark"] .tlp-corner { color: #94a3b8; } /* ===================== Связи (стрелки, read-only) ====================== */ .article-timeline__grid { position: relative; } .tlp-links { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 1; } .tlp-link { fill: none; stroke: #2563eb; stroke-width: 2.5; stroke-linecap: round; opacity: 0.75; transition: opacity 0.15s, stroke-width 0.15s; } .tlp-link--dashed { stroke-dasharray: 6 4; } .tlp-link--active { opacity: 1; stroke-width: 3.5; } .tlp-arrowhead { fill: #2563eb; fill: context-stroke; } .tlp-event { position: relative; transition: opacity 0.15s; } .tlp-grid--focusing .tlp-event { opacity: 0.35; } .tlp-grid--focusing .tlp-event--focus { opacity: 1; } @media (prefers-color-scheme: dark) { .tlp-link { stroke: #60a5fa; } } [data-theme="dark"] .tlp-link { stroke: #60a5fa; } /* Подпись связи (read-only) */ .tlp-link-label { font-size: 11px; font-weight: 600; fill: #1e293b; paint-order: stroke; stroke: #f8fafc; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; } [data-theme="dark"] .tlp-link-label { fill: #e2e8f0; stroke: #172033; } @media (prefers-color-scheme: dark) { .tlp-link-label { fill: #e2e8f0; stroke: #172033; } }