/* Echo CMS playground — WYSIWYG styles. Plain CSS (native nesting). Theme via [data-theme]. */ :root { /* --ec-accent = Эхо brand #f0776c. Semantic token contract — see base/systems/theme.md + base/systems/dark-theme.md. LIGHT values below = the shipped colors (byte-identical); the dark palette is a considered set (not a naive invert) under [data-theme="dark"]. */ --ec-bg: #f7f8fa; --ec-surface: #ffffff; --ec-surface-2: #fcfcfd; --ec-fg: #25282d; --ec-fg-muted: #9099a4; --ec-fg-soft: #4b5560; --ec-border: #ebedf0; --ec-accent: #f0776c; --ec-accent-fg: #ffffff; --ec-brand-red: #e13e39; --ec-selected: rgba(240,119,108,.08); --ec-hover: rgba(0,0,0,.035); --ec-half-accent: #e167557d; --ec-danger: #d23f57; --ec-success: #16a34a; --ec-warning: #d98324; --ec-shadow: rgba(20,25,35,.14); /* reader / main-page secondary palette (base/MainPage.md Figma spec). LIGHT = the shipped literals, byte-identical; a considered dark set so the MainPage widgets flip in the editor's dark canvas preview (the reader itself is pinned light, render.ts). See base/systems/dark-theme.md. */ --ec-ink-strong: #1a1a1a; --ec-ink-strong-ct: #ffffff; --ec-fg-faint: #808080; --ec-fg-secondary: #5a626c; --ec-border-card: #eceef1; --ec-border-ctl: #dfe3e8; --ec-red-deep: #c0392b; /* back-compat ALIASES: original bare names map 1:1 onto the tokens so existing chrome keeps working. They are re-declared under [data-theme="dark"] too — a var() alias declared only at :root would NOT flip (it substitutes the :root token value at :root, then inherits that literal). */ --bg: var(--ec-bg); --canvas: var(--ec-surface); --panel: var(--ec-surface-2); --ink: var(--ec-fg); --muted: var(--ec-fg-muted); --ink-soft: var(--ec-fg-soft); --line: var(--ec-border); --accent: var(--ec-accent); --brand-red: var(--ec-brand-red); --sel: var(--ec-selected); --hover: var(--ec-hover); --half-accent: var(--ec-half-accent); --err: var(--ec-danger); } [data-theme="dark"] { --ec-bg: #15171c; --ec-surface: #1b1e24; --ec-surface-2: #181b20; --ec-fg: #e6e8eb; --ec-fg-muted: #79828d; --ec-fg-soft: #aab2bc; --ec-border: #2a2f37; --ec-accent: #f0776c; --ec-accent-fg: #ffffff; --ec-brand-red: #e13e39; --ec-selected: rgba(240,119,108,.16); --ec-hover: rgba(255,255,255,.05); --ec-half-accent: #e167557d; --ec-danger: #ef5164; --ec-success: #34d066; --ec-warning: #e69a3d; --ec-shadow: rgba(0,0,0,.45); /* reader / main-page secondary palette — dark values (considered, not naive invert) */ --ec-ink-strong: #e6e8eb; --ec-ink-strong-ct: #15171c; --ec-fg-faint: #8b939d; --ec-fg-secondary: #aab2bc; --ec-border-card: #2a2f37; --ec-border-ctl: #333a45; --ec-red-deep: #f0776c; /* aliases re-pointed so descendants under .EC-app[data-theme=dark] resolve the DARK tokens */ --bg: var(--ec-bg); --canvas: var(--ec-surface); --panel: var(--ec-surface-2); --ink: var(--ec-fg); --muted: var(--ec-fg-muted); --ink-soft: var(--ec-fg-soft); --line: var(--ec-border); --accent: var(--ec-accent); --brand-red: var(--ec-brand-red); --sel: var(--ec-selected); --hover: var(--ec-hover); --half-accent: var(--ec-half-accent); --err: var(--ec-danger); } * { box-sizing: border-box; } body { margin: 0; font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); } a, button { transition: color 0.2s, background 0.2s; } .EC-app { display: flex; flex-direction: column; height: 100vh; } /* public reader page (SSR, /read/) */ .EC-read { margin: 0 auto; padding: 56px 24px 120px; } /* articles: readable line length */ .EC-read--main { max-width: none; padding: 24px 32px 80px; } /* main page: FLUID — flexes to the full viewport width (base/MainPage.md §1) */ .EC-read--wrapped { max-width: 860px; padding-top: 16px; } /* material page wrapped in site chrome (masthead+footer inside the padded column, like the editor canvas) */ .EC-read--title { font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; } .EC-read--meta { color: var(--muted); font-size: 13px; margin-bottom: 32px; } .EC-read--body > .EC-blk { margin: 0 0 18px; } .EC-read--body img.EC-img { max-width: 100%; border-radius: 8px; display: block; } /* aggregation blocks (main page) */ .EC-agg { margin: 0 0 28px; } .EC-feed--ph { font-size: 13px; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; padding: 14px 16px; background: var(--panel); } .EC-feed--empty { font-size: 13px; color: var(--muted); font-style: italic; padding: 10px 0; } .EC-feed--cat { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-bottom: 4px; } .EC-feed--lead { display: block; } /* container */ .EC-feed--leaditem { display: block; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 18px; } .EC-feed--leaditem .EC-feed--ttl { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0; } .EC-feed--headlines { list-style: none; margin: 0; padding: 0; } .EC-feed--li { padding: 8px 0; border-bottom: 1px solid var(--line); } .EC-feed--hl { text-decoration: none; color: var(--ink); font-weight: 600; } .EC-feed--hl:hover { color: var(--accent); } .EC-feed--headlines:empty::after, .EC-feed--grid:empty::after { content: 'No published articles yet'; color: var(--muted); font-style: italic; } .EC-feed--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .EC-feed--lede { font-size: 13px; color: var(--muted); margin: 4px 0 0; line-height: 1.45; } /* «Размер лида» (ledeSize -> .EC-feed--lede--s|m|l|xl, core/blocks/aggregation.ts) — titleSize's twin on the lede (owner, 2026-08-20). Declared AFTER the 13px base so a tier wins at equal (0,1,0) specificity without an !important, exactly like the title tiers below. Inside a grid ROW these are superseded by the cell-derived ladder in the row block's published css: (core/blocks/layout.ts), which is the one definition for all three surfaces; this pair is the PLAIN-COLUMN fallback. */ .EC-feed--lede--s { font-size: 11px; } .EC-feed--lede--m { font-size: 13px; } .EC-feed--lede--l { font-size: 16px; } .EC-feed--lede--xl { font-size: 20px; } .EC-feed--leadimg { width: 100%; max-height: var(--ec-imgh, 320px); object-fit: cover; border-radius: 10px; margin-bottom: 10px; display: block; } /* the material-card TEASER parts on the `lead` preset (core/blocks/feedRender.ts#leadTeaser): the date the toggle appends, and the title-size tiers. Declared here, AFTER `.EC-feed--leaditem .EC-feed--ttl`'s 30px base above, so the tier wins at equal (0,2,0) specificity without an !important. */ .EC-feed--leaditem .EC-feed--time { display: block; margin-top: 6px; font-size: 13px; color: var(--muted, #6b6b6b); } .EC-feed--leaditem .EC-feed--ttl--s { font-size: 18px; } .EC-feed--leaditem .EC-feed--ttl--m { font-size: 24px; } .EC-feed--leaditem .EC-feed--ttl--l { font-size: 30px; } .EC-feed--leaditem .EC-feed--ttl--xl { font-size: 38px; } /* THE LEFT-IMAGE `lead` (imgPos:'left' → `EC-feed--imgleft`, core/blocks/feedRender.ts#leadTeaser). The rules above are the preset's NATIVE stack; this is the very horizontal split `.EC-feed--portraititem` renders, and deliberately through the SAME `--ec-imgshare` seam — so editor/imageGizmo.ts#attachCardSplit drives BOTH presets with one variable, and «Слева» finally means something on the default preset (owner, 2026-08-20: «one 12x6 block that have left image, but it is displaying at the top»). The photo drops the stack's `max-height`/`margin-bottom` and FILLS the media column instead: a left image is bounded SIDEWAYS (imgShare), never downwards (imgHeight) — the same mutual exclusion the renderer enforces by emitting only one of the two vars. `--ec-imgshare` stays a FALLBACK var, so an untouched left card renders the historic 280px column and emits no `style` attribute at all. */ .EC-feed--leaditem.EC-feed--imgleft { display: grid; grid-template-columns: var(--ec-imgshare, 280px) minmax(0, 1fr); gap: 18px; align-items: center; } .EC-feed--leaditem.EC-feed--imgleft > .EC-feed--leadimg, .EC-feed--leaditem.EC-feed--imgleft > .EC-feed--crop { max-height: none; height: 100%; min-height: 0; margin-bottom: 0; align-self: stretch; } .EC-feed--leadbody { min-width: 0; } /* one column on a phone, exactly like portrait — and the photo goes back to being bounded DOWNWARDS, because `height:100%` inside a content-sized single-column grid has nothing left to resolve against. */ @media (max-width: 640px) { .EC-feed--leaditem.EC-feed--imgleft { grid-template-columns: minmax(0, 1fr); } .EC-feed--leaditem.EC-feed--imgleft > .EC-feed--leadimg, .EC-feed--leaditem.EC-feed--imgleft > .EC-feed--crop { height: auto; max-height: var(--ec-imgh, 320px); margin-bottom: 10px; } } .EC-feed--cardimg { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; display: block; } /* opinion: author-forward columns */ .EC-feed--opinion { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .EC-feed--op { text-decoration: none; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 12px; } .EC-feed--opauthor { font-weight: 700; font-size: 13px; margin-bottom: 3px; } /* podcast: media cards */ .EC-feed--podcast { display: flex; flex-direction: column; gap: 12px; } .EC-feed--pod { display: flex; gap: 12px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px; } .EC-feed--pod:hover { border-color: var(--accent); } /* `--ec-imgshare` / `--ec-imgh` are the material-card's two axes, and `podcast` gets them on the same terms as `portrait` (owner, 2026-08-20: «podcast … top positioned image prop is not working there»). FALLBACK vars, so an untouched podcast card still renders the historic 96x96 thumb and emits no `style` attribute at all — the byte-for-byte rule in renderMaterialTeaser. */ .EC-feed--podimg { width: var(--ec-imgshare, 96px); height: 96px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; } .EC-feed--podbody { min-width: 0; } /* imgPos:'top' — the card stacks and the photo spans it, exactly as .EC-feed--portraititem.EC-feed--imgtop does. ⚠ The crop WINDOW is sized with the photo, never separately: that symmetry is the invariant a crop wrapper must not break (see `.EC-feed--crop` at the end of this file), and it is what stops the photo jumping the moment it is grabbed. */ .EC-feed--pod.EC-feed--imgtop { flex-direction: column; } .EC-feed--pod.EC-feed--imgtop > .EC-feed--podimg, .EC-feed--pod.EC-feed--imgtop > .EC-feed--crop { width: 100%; height: var(--ec-imgh, 200px); } .EC-feed--pod.EC-feed--imgleft > .EC-feed--crop, .EC-feed--pod:not(.EC-feed--imgtop) > .EC-feed--crop { width: var(--ec-imgshare, 96px); height: 96px; flex: 0 0 auto; } /* portrait: large feature, image beside text */ /* `--ec-imgshare` is the material-card's image/text SPLIT (core/blocks/aggregation.ts `imgShare`, dragged by editor/imageGizmo.ts#attachCardSplit). It is a FALLBACK var, so an untouched card renders the historic 280px and no `style` attribute is emitted at all — the byte-for-byte rule in renderMaterialTeaser. */ .EC-feed--portraititem { display: grid; grid-template-columns: var(--ec-imgshare, 280px) 1fr; gap: 18px; text-decoration: none; color: var(--ink); align-items: center; } .EC-feed--portraitimg { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; } .EC-feed--portraititem .EC-feed--ttl { font-size: 24px; font-weight: 800; line-height: 1.2; } /* material-card TEASER field-visibility (Vitaly #2+#3): imgPos top/none collapse to a single column (image stacks above the body, or is absent); left = the default 280px+1fr grid above. titleSize tiers override the 24px base. */ .EC-feed--portraititem.EC-feed--imgtop, .EC-feed--portraititem.EC-feed--noimg { grid-template-columns: 1fr; } /* `--ec-imgh` is the material-card's TOP-image HEIGHT (core/blocks/aggregation.ts `imgHeight`, dragged by editor/imageGizmo.ts#attachCardTopHeight) — the third of the same pattern, after `imgShare` for the left split and the image block's own `maxHeight`. A FALLBACK var again: an untouched top card keeps the historic 200px and emits no `style` attribute at all. Inside a grid ROW the fallback is the cell-derived height in the row block's published css: (core/blocks/layout.ts), which is where a row's own numbers live. ⚠ The crop WINDOW is sized with the photo, never separately — see `.EC-feed--crop` at the end of this file. */ .EC-feed--portraititem.EC-feed--imgtop > .EC-feed--portraitimg, .EC-feed--portraititem.EC-feed--imgtop > .EC-feed--crop { height: var(--ec-imgh, 200px); } .EC-feed--portraititem .EC-feed--time { display: block; margin-top: 6px; font-size: 13px; color: var(--muted, #6b6b6b); } .EC-feed--portraititem .EC-feed--ttl--s { font-size: 18px; } .EC-feed--portraititem .EC-feed--ttl--m { font-size: 24px; } .EC-feed--portraititem .EC-feed--ttl--l { font-size: 30px; } .EC-feed--portraititem .EC-feed--ttl--xl { font-size: 38px; } @media (max-width: 640px) { .EC-feed--portraititem { grid-template-columns: 1fr; } } /* breaking: timestamped list */ .EC-feed--breaking { list-style: none; margin: 0; padding: 0; } .EC-feed--brk { padding: 10px 0; border-bottom: 1px solid var(--line); } .EC-feed--brklink { text-decoration: none; color: var(--ink); } .EC-feed--brkmeta { display: flex; gap: 10px; align-items: baseline; } .EC-feed--time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .EC-feed--air { display: inline-block; margin: 2px 0; font-size: 12px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } /* newsletter CTA + footer */ .EC-cta { background: var(--sel); border-radius: 12px; padding: 22px 24px; margin: 0 0 28px; text-align: center; } .EC-cta--h { font-size: 20px; font-weight: 800; margin: 0 0 6px; } .EC-cta--t { color: var(--muted); margin: 0; } .EC-footer { color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding: 20px 0; margin-top: 28px; } /* masthead (page header block): logo + nav */ .EC-mast { display: flex; align-items: center; gap: 24px; border-bottom: 2px solid var(--ink); padding: 8px 0 12px; margin: 0 0 22px; } .EC-mast--logo { font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: var(--ink); text-decoration: none; } /* details panel: array manager */ .EC-reflist { display: flex; flex-direction: column; gap: 4px; } .EC-reflist--row { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; } .EC-reflist--t { flex: 1; font-size: 13px; } .EC-reflist--b { border: none; background: transparent; color: var(--muted); cursor: pointer; width: 22px; height: 22px; border-radius: 4px; } .EC-reflist--b:hover { background: var(--hover); color: var(--ink); } .EC-reflist--b[disabled] { opacity: .3; pointer-events: none; } .EC-reflist--addbtn { align-self: flex-start; font: inherit; font-size: 12px; padding: 4px 9px; border: 1px dashed var(--line); border-radius: 6px; background: transparent; color: var(--accent); cursor: pointer; } .EC-reflist--addbtn:hover { border-color: var(--accent); background: var(--sel); } /* layout: columns = a row of `column` slots. SSR: EC-col is the flex item (inline flex from settings). Editor: the children row (.EC-slot--row) is the flex container; each column's wrapper is flexed inline. */ .EC-cols { display: flex; gap: 22px; align-items: flex-start; margin: 0 0 24px; } .EC-col { min-width: 0; } /* .EC-slot--row also carries .EC-nest--list (flex-direction:column) — win the direction explicitly */ .EC-nest--list.EC-slot--row { display: flex; flex-direction: row; gap: 22px; align-items: flex-start; flex: 1; } .EC-slot--row > .EC-nest--item { min-width: 0; } /* flex set inline per column (exact widths) */ /* the "+ Column" / "+ Block" add affordance is positioned absolutely (see .EC-nest--add below) so it never sits in the layout flow — the editor matches the published result. */ /* a slot is always a visible drop target, even when empty */ .EC-slot { min-height: 24px; } .EC-blk--section, .EC-col { min-height: 28px; } @media (max-width: 720px) { .EC-cols, .EC-slot--row { flex-direction: column; } } /* recursive List container layouts (items styled by their item-template: EC-nav--it / EC-people--it) */ .EC-list--nav { display: flex; flex-wrap: wrap; gap: 4px 18px; border-bottom: 2px solid var(--ink); padding: 0 0 10px; margin: 0 0 24px; } .EC-list--people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 28px; } .EC-list--stack { display: flex; flex-direction: column; gap: 6px; } /* site nav (menu block) */ .EC-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; border-bottom: 2px solid var(--ink); padding: 0 0 10px; margin: 0 0 24px; } .EC-nav--it { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; } .EC-nav--it:hover { color: var(--accent); } /* people / contributors grid */ .EC-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 28px; } .EC-people--it { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px; } .EC-people--it:hover { border-color: var(--accent); } .EC-people--av { width: 46px; height: 46px; border-radius: 50%; background: var(--sel); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex: 0 0 auto; } .EC-people--av::before { content: '👤'; opacity: .5; } .EC-people--av:not(:empty)::before { content: none; } /* real content (avatar image later) wins */ .EC-people--av.has-img { background-size: cover; background-position: center; } .EC-people--av.has-img::before { content: none; } /* photo present → hide the placeholder */ .EC-people--nm { font-weight: 700; font-size: 14px; } .EC-people--role { font-size: 12px; color: var(--muted); } /* carousel layout — horizontally scrollable strip (drag + ‹ › arrows wired by core/carousel.ts) */ .EC-carousel-wrap { position: relative; margin: 0 0 24px; } .EC-list--carousel { display: flex; overflow-x: auto; gap: 14px; padding: 8px 2px; scrollbar-width: thin; cursor: grab; scroll-behavior: smooth; } .EC-list--carousel.EC-grabbing { cursor: grabbing; scroll-behavior: auto; } /* free drag while grabbing */ .EC-list--carousel > * { flex: 0 0 auto; } .EC-list--carousel .EC-people--it { width: 100px; border: none; padding: 6px; } /* FILMSTRIP (base/GalleryWizard.md) — the simplest gallery: uniform fixed HEIGHT, natural width, horizontal scroll. The flex row is on the list container PUBLIC-side (.EC-list--filmstrip holds items directly) AND on the editor's inner .EC-nest--list (the canvas wraps items in .EC-nest--list/.EC-nest--item) — the same rule written for both surfaces (SSR emits no .EC-nest wrapper). --ec-gal-h = the fixed height. */ .EC-list--filmstrip, .EC-list--filmstrip .EC-nest--list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto; align-items: flex-start; padding: 4px 2px 8px; scrollbar-width: thin; } .EC-list--filmstrip > *, .EC-list--filmstrip .EC-nest--item { flex: 0 0 auto; min-width: 0; } .EC-gal2--it { margin: 0; display: flex; flex-direction: column; gap: 4px; } /* the image fills the fixed height; width follows the (already-cropped-in-URL) aspect. !important beats the inline scalingStyle the image widget writes on the (core/blocks/widgets.tsx). ⚠ DIRECT CHILD of .EC-img2 only — a bare `.EC-gal2--it img` also hit the crop gizmo's TWO overlay layers (.EC-img2 > .EC-ig--panwrap > .EC-ig--bleed/pan > img), whose per-frame inline panStyle (width 200% / left -50% …) the !important here overrode → the live preview snapped to fixed-height/top-left and never tracked the gesture (owner: "offset wrong, image top-left, no live preview"). The gizmo overlay must obey panStyle. */ .EC-list--filmstrip .EC-gal2--it .EC-img2 > img.EC-blk--img { height: var(--ec-gal-h, 240px) !important; width: auto !important; max-width: none !important; display: block; border-radius: 6px; object-fit: cover; } .EC-gal2--cap { font-size: 12px; line-height: 1.3; color: var(--muted); margin: 0; } .EC-gal2--cap:empty { display: none; } /* the «+ add image» affordance as a FILMSTRIP TILE at the end of the strip — the base .EC-nest--add is an absolutely-positioned bottom pill (vertical-slot rule), which the fixed-height strip clipped + scrolled. 3-class selector beats the base rules; static + full-height + always shown reads as "the next slide". */ .EC-list--filmstrip .EC-nest--list > .EC-nest--add { position: static; display: inline-flex; align-items: center; justify-content: center; text-align: center; flex: 0 0 auto; inset: auto; transform: none; height: var(--ec-gal-h, 240px); min-width: 96px; padding: 0 14px; white-space: normal; box-shadow: none; } .EC-list--filmstrip .EC-nest--list > .EC-nest--add::after { content: ''; } .EC-list--carousel .EC-people--av { width: 60px; height: 60px; font-size: 22px; } .EC-carousel--arrow { position: absolute; top: 38px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); cursor: pointer; z-index: 3; box-shadow: 0 1px 6px rgba(0,0,0,.14); display: flex; align-items: center; justify-content: center; } .EC-carousel--prev { left: -6px; } .EC-carousel--next { right: -6px; } /* live player */ .EC-player { display: flex; align-items: center; gap: 14px; background: var(--ink); color: #fff; border-radius: 12px; padding: 14px 18px; margin: 0 0 28px; } .EC-player--play { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; } .EC-player--info { display: flex; align-items: center; gap: 10px; } .EC-player--badge { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 20px; } .EC-player--on { background: var(--err); color: #fff; } .EC-player--off { background: rgba(255,255,255,.18); color: #fff; } .EC-player--ttl { font-weight: 600; } .EC-feed--card { text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--canvas); } .EC-feed--card:hover { border-color: var(--accent); } .EC-feed--card .EC-feed--ttl { font-size: 16px; font-weight: 600; line-height: 1.3; } /* a freshly-arrived feed item grows in + flashes (reconcile onEnter — main page live updates) */ @keyframes EC-grow-in { from { opacity: 0; transform: translateY(-8px) scaleY(.6); } to { opacity: 1; transform: none; } } .EC-enter { animation: EC-grow-in .35s ease-out, EC-flash 1.1s ease-out; transform-origin: top; } @keyframes EC-flash { 0%,100% { background: transparent; } 18% { background: color-mix(in srgb, var(--accent) 16%, transparent); } } /* home / article list */ .EC-home { max-width: 1030px; margin: 0 auto; padding: 20px 24px 80px; } /* widened for the left tag-filter column; the list keeps ~820 */ .EC-home--head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .EC-home--logo { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; } /* T67 — the materials list is a column-aligned grid TABLE (not a flex stack of cards). Tracks: «title» (flexes) · «обновлено» (T65) · «опубликовано» (T65) · actions (status mark + live icon + hide). Rows are `display: contents` (below), so every row's cells share these tracks and line up down the list. Full-width children (the paging sentinel, the empty-state) span every column. */ .EC-art--list { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content max-content; align-content: start; } .EC-art--list > .EC-d--sentinel, .EC-art--list > .EC-art--empty { grid-column: 1 / -1; } /* home: type tabs + search bar; infinite-scroll sentinel (friendly type names from page-types) */ .EC-home--bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } /* The «Мои материалы» refusal row: the server did not acknowledge `mine=1`, so the filter went back off and the list below is NOT filtered. Warning-coloured because it reports a failure, not a hint. */ .EC-home--note { margin: -6px 0 12px; padding: 7px 10px; border: 1px solid var(--err, #c2461f); border-radius: 8px; font-size: 12px; line-height: 1.4; color: var(--err, #c2461f); background: var(--sel, transparent); } .EC-home--bar .EC-d--tabs { flex: 1 1 auto; } .EC-home--search { flex: 0 0 240px; max-width: 240px; } .EC-home--groupn { font-weight: 600; color: var(--accent); background: var(--sel); border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 2px; } .EC-d--tab.is-on .EC-home--groupn { background: var(--canvas); } /* left tag-filter column (attached to the left of the article list; the list keeps its width) */ .EC-home--side { flex: 0 0 190px; display: flex; flex-direction: column; gap: 3px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .EC-home--side::-webkit-scrollbar { width: 8px; } .EC-home--side::-webkit-scrollbar-thumb { background: var(--ec-border); border-radius: 4px; } .EC-home--body .EC-art--list { flex: 1 1 auto; min-width: 0; } .EC-home--sidehd { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; } /* T77 — «актуальные / все» scope toggle above the tag panel (base/MaterialsTable.md §5). A segmented pair; «актуальные» (the default, in-use tags only) is the current filtered view, «все» adds the unused vocabulary. */ .EC-home--tagscope { display: flex; gap: 4px; margin: 0 0 8px; } .EC-home--tagscope .EC-btn { flex: 1 1 0; font-size: 12px; padding: 3px 6px; justify-content: center; } .EC-tagf { display: flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; text-align: left; padding: 4px 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ec-fg); cursor: pointer; } .EC-tagf:hover { background: var(--sel); } .EC-tagf--dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .EC-tagf--nm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .EC-tagf--n { flex: 0 0 auto; font-size: 11px; font-weight: 600; opacity: .65; } .EC-tagf.is-on { color: #fff; } .EC-tagf.is-on .EC-tagf--dot { background: #fff !important; } .EC-tagf.is-on .EC-tagf--n { opacity: .9; } .EC-d--sentinel { height: 1px; } /* Row = `display: contents`: it draws no box of its own, its cells become the grid items. Whole-row click still works (events bubble to the row element) and paging still `insertBefore(sentinel)`s a real element. */ .EC-art--row { display: contents; cursor: pointer; } /* T70 density: rows ~half the pre-table card height — a single hairline divider between rows, no per-row card border/radius, and tight vertical padding (the pre-T67 card was 14px pad + 1px border + 10px radius). */ .EC-art--cell { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 4px 16px; background: var(--canvas); border-bottom: 1px solid var(--line); transition: background .1s; } .EC-art--row:hover > .EC-art--cell { background: var(--hover); } /* T65 — the two date columns. Each cell stacks a tiny muted label over its value (no header row in this contents-grid to hang column names on, so the cell names itself), kept right-aligned + compact for T70. */ .EC-art--c-updated, .EC-art--c-published { align-items: flex-end; gap: 1px; white-space: nowrap; font-size: 12px; color: var(--muted); } .EC-art--dlbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); opacity: .7; } .EC-art--upd, .EC-art--pub { color: var(--muted); } /* T64/T69 — the actions cell: draft mark · live icon · hide, right-aligned. */ .EC-art--c-actions { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; } .EC-art--main { flex: 1; min-width: 0; } .EC-art--title { font-size: 15px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .EC-art--meta { font-size: 12px; line-height: 1.2; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* T64 — published is the silent default (no badge is rendered); this styles only the DRAFT mark that a non-published row carries. A small dot precedes the word so it reads as a positive state, not chrome. */ .EC-art--badge { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px 2px 7px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; } .EC-art--badge.is-draft { background: var(--hover); color: var(--muted); } .EC-art--badge.is-draft::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* T69 — the live/preview link is an ICON ONLY (masked SVG, external-link arrow), tinted with the accent and inheriting on hover. title="live" carries the label; no visible text. OWNER FEEDBACK — like the protected Hide button, it is REVEALED only on row hover (opacity, not display, so it stays in the layout + tab order) and stays reachable by keyboard (:focus-visible). */ .EC-art--live { flex: none; width: 15px; height: 15px; background: var(--accent); cursor: pointer; opacity: 0; transition: opacity .12s; -webkit-mask: var(--ec-live-ic) center/contain no-repeat; mask: var(--ec-live-ic) center/contain no-repeat; } .EC-art--row:hover .EC-art--live, .EC-art--live:focus-visible { opacity: 1; } .EC-art--live:hover { background: var(--ink); } /* OWNER FEATURE — the PENCIL that opens the editor (the navigation the whole-row click used to do; the row click now toggles the detail overlay). Masked-SVG token, same theming discipline as the live/funnel icons; revealed on row hover + keyboard-reachable, like them. */ .EC-art--edit { flex: none; width: 15px; height: 15px; padding: 0; border: 0; cursor: pointer; background: var(--muted); opacity: 0; transition: opacity .12s, background .12s; -webkit-mask: var(--ec-edit-ic) center/contain no-repeat; mask: var(--ec-edit-ic) center/contain no-repeat; } .EC-art--row:hover .EC-art--edit, .EC-art--edit:focus-visible { opacity: 1; } .EC-art--edit:hover { background: var(--accent); } /* T85 — the row's material-TYPE icon, PREFIXING the title (base/MaterialsTable.md §2). The title line becomes a flex row so the slim glyph sits left of the headline; the meta byline stays on its own line below. The icon is a masked-SVG token (per-type via .EC-tic--), themed muted like the row's chrome — ALWAYS visible (it marks identity), unlike the hover-only live/edit actions. */ .EC-art--titline { display: flex; align-items: center; gap: 7px; min-width: 0; } .EC-art--typeic { flex: none; width: 14px; height: 14px; background: var(--muted); -webkit-mask: var(--_tic) center/contain no-repeat; mask: var(--_tic) center/contain no-repeat; } .EC-tic--article { --_tic: var(--ec-type-article-ic); } .EC-tic--news { --_tic: var(--ec-type-news-ic); } .EC-tic--opinion { --_tic: var(--ec-type-opinion-ic); } .EC-tic--broadcast { --_tic: var(--ec-type-broadcast-ic); } .EC-tic--podcast { --_tic: var(--ec-type-podcast-ic); } .EC-tic--video { --_tic: var(--ec-type-video-ic); } .EC-tic--poll { --_tic: var(--ec-type-poll-ic); } .EC-tic--person { --_tic: var(--ec-type-person-ic); } .EC-tic--event { --_tic: var(--ec-type-event-ic); } .EC-tic--page { --_tic: var(--ec-type-page-ic); } .EC-tic--other { --_tic: var(--ec-type-other-ic); } /* the row whose detail overlay is open — its cells hold the hover tint so the anchored row stays legible */ .EC-art--row.is-active > .EC-art--cell { background: var(--hover); } .EC-art--empty { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; } /* ── BROADCAST (эфир) ROW (T79–T84, base/MaterialsTable.md §6) — additive; article rows untouched. The эфир row shares the 4 table columns; for a scheduled airing the date column POSITIONS carry the slot (T80/T84): the day in «обновлено», the from–to time chip(s) in «опубликовано». ── */ .EC-brow--day { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .EC-art--c-published .EC-brow--slot { display: inline-block; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .EC-art--c-published .EC-brow--slot + .EC-brow--slot { margin-top: 2px; } /* multiple airings stack */ /* T81 — colour states. All four colours are semantic tokens defined in BOTH the light and dark palettes (:root + [data-theme="dark"]), so the chip flips with the theme. */ .EC-brow--slot.is-onair { color: var(--brand-red); } /* ON AIR now — the brand red, the loudest state */ .EC-brow--slot.is-today { color: var(--ec-warning); } /* later today — warm, upcoming soon */ .EC-brow--slot.is-future { color: var(--ink-soft); } /* a future day — normal, quiet */ .EC-brow--slot.is-past { color: var(--muted); } /* already aired — muted */ /* T83 — attachment-presence icons (video / audio / transcript). Masked-SVG tokens (the EC-tic precedent), REFERENCED via .EC-att--, coloured by the row so they theme + survive dark mode. No emoji, no inline SVG. */ .EC-brow--atts { display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; } .EC-brow--att { flex: none; width: 13px; height: 13px; background: var(--muted); -webkit-mask: var(--_att) center/contain no-repeat; mask: var(--_att) center/contain no-repeat; } .EC-att--video { --_att: var(--ec-att-video-ic); } .EC-att--audio { --_att: var(--ec-att-audio-ic); } .EC-att--transcript { --_att: var(--ec-att-transcript-ic); } /* ===== ROW-DETAIL OVERLAY (owner feature, home/materialDetail.tsx) ===== */ /* An absolutely-positioned panel over the right of the table — from the «Обновлено» column (left set at open time off the header cell) to the right edge — leaving the title column readable. The inner panel is sticky so a full article stays in view while the page scrolls; it scrolls internally when taller than the viewport. */ .EC-mdo { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; } .EC-mdo--panel { position: sticky; top: 8px; display: flex; flex-direction: column; max-height: calc(100vh - 16px); background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; box-shadow: -8px 0 30px -18px rgba(0,0,0,.4); overflow: hidden; } /* STICKY head (actions + title + badges + meta) never scrolls; only the BODY (the article) does. */ .EC-mdo--head { flex: 0 0 auto; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); } .EC-mdo--body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 22px; } .EC-mdo--top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } /* the pencil (edit) — reuses .EC-art--edit's masked glyph, but ALWAYS visible here (not hover-gated like the row) */ .EC-mdo--edit { opacity: 1; } .EC-mdo--gear { font-size: 14px; line-height: 1; padding: 3px 7px; } .EC-mdo--live { position: static; opacity: 1; width: 15px; height: 15px; } /* the ✕ — LAST in the action row, pushed to the far right */ .EC-mdo--close { margin-left: auto; width: 28px; height: 28px; border: 1px solid var(--line); background: var(--canvas); color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; } .EC-mdo--close:hover { background: var(--hover); color: var(--ink); } .EC-mdo--badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; } .EC-mdo--badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; } .EC-mdo--badge.is-ec { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .EC-mdo--badge.is-main { background: var(--hover); color: var(--ink); } .EC-mdo--tags { display: inline-flex; gap: 5px; flex-wrap: wrap; } /* tag / Раздел chips styled like the left-column filter chips (EC-tagf) — non-interactive here */ .EC-mdo--tagf { padding: 2px 8px; font-size: 12px; cursor: default; } .EC-mdo--tagf:hover { background: transparent; } .EC-mdo--title { font-size: 20px; font-weight: 700; line-height: 1.25; margin: 2px 0 4px; } /* the meta block: «Опубликовано» / «Обновлено» date lines + the views/👍/👎 counters line */ .EC-mdo--meta { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .EC-mdo--counters { display: flex; align-items: center; gap: 9px; margin-top: 4px; } .EC-mdo--cnt { display: inline-flex; align-items: center; gap: 5px; } .EC-mdo--cnt::before { content: ''; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .EC-mdo--cnt-v::before { -webkit-mask-image: var(--ec-views-ic); mask-image: var(--ec-views-ic); } .EC-mdo--cnt-up::before { -webkit-mask-image: var(--thumb); mask-image: var(--thumb); } .EC-mdo--cnt-down::before { -webkit-mask-image: var(--thumb); mask-image: var(--thumb); transform: rotate(180deg); } .EC-mdo--cntsep { color: var(--line); } .EC-mdo--article { font-size: 14px; line-height: 1.55; } .EC-mdo--article img { max-width: 100%; height: auto; } .EC-mdo--note { color: var(--muted); font-style: italic; padding: 8px 0; } /* the ⚙ dialog's protected Hide (same two-step confirm the row used to carry, now un-misclickable behind ⚙) */ .EC-mdo--settings { display: flex; flex-direction: column; gap: 8px; min-width: 200px; } .EC-mdo--hideconf { display: flex; gap: 8px; } /* home header ⚙ → Settings menu: identity + own materials + «Пригласить стажёра» (base/TraineeRole.md) */ .EC-set--btn { font-size: 15px; line-height: 1; padding: 3px 7px; } .EC-pop.EC-set--pop { width: 380px; max-width: 92vw; } /* +40px for the roster rows (email + last-activity + chips) */ .EC-set { display: flex; flex-direction: column; gap: 8px; font-size: 13px; outline: none; padding-bottom: 4px; } .EC-set--me { display: flex; align-items: center; gap: 10px; padding: 4px 0 8px; border-bottom: 1px solid var(--line); } .EC-set--av { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; } .EC-set--who { min-width: 0; } .EC-set--nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .EC-set--sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .EC-set--h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .EC-set--list { display: flex; flex-direction: column; gap: 1px; } /* The one rule in the menu: link rows above, «Мои стажёры» + invite below. Both the box and its neighbours collapse when empty — `.EC-set` is a gapped flex column, so an empty child would still cost 8px of dead space and a separator that separates nothing is exactly what the box must never look like. */ .EC-set--hr { width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid var(--line); } .EC-set--sep:empty, .EC-set--list:empty, .EC-set--acts:empty { display: none; } .EC-set--row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 7px; text-decoration: none; color: var(--ink); } .EC-set--row:hover, .EC-set--row:focus-visible { background: var(--hover); } .EC-set--rowt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .EC-set--acts { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .EC-set--item { text-align: left; } .EC-set--muted { color: var(--muted); font-size: 12px; padding: 4px 0; } .EC-set--err { color: var(--err); font-size: 12px; padding: 4px 0; } .EC-set--ok { font-weight: 600; } .EC-set--note { color: var(--muted); font-size: 12px; line-height: 1.4; } .EC-set--form { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 6px; } .EC-set--res { display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--sel); } .EC-set--urlrow { display: flex; gap: 6px; } .EC-set--urlrow .EC-input { flex: 1 1 auto; min-width: 0; font-size: 12px; } /* «Мои стажёры» — the mentor's roster inside the same ⚙ panel (base/TraineeRole.md §UI 2) */ .EC-tr, .EC-tr--list { display: flex; flex-direction: column; gap: 2px; } .EC-tr--row { display: flex; flex-direction: column; gap: 4px; padding: 6px 7px; border-radius: 8px; } .EC-tr--row:hover, .EC-tr--row:focus-within { background: var(--hover); } .EC-tr--main { display: flex; align-items: center; gap: 9px; } .EC-tr--av { width: 28px; height: 28px; font-size: 11px; } .EC-tr--who { flex: 1 1 auto; min-width: 0; } .EC-tr--sub { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; color: var(--muted); } .EC-tr--mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .EC-tr--seen.is-pending { color: var(--err); } /* [x] revoke: revealed by hover on the row AND by keyboard focus (:focus-within above + :focus-visible here). Hidden with OPACITY, never display:none — it must stay in the tab order for anyone who cannot hover. */ .EC-tr--x { opacity: 0; flex: 0 0 auto; border: 0; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; transition: opacity .12s; } .EC-tr--row:hover .EC-tr--x, .EC-tr--row:focus-within .EC-tr--x, .EC-tr--x:focus-visible { opacity: 1; } .EC-tr--x:hover, .EC-tr--x:focus-visible { color: var(--err); background: var(--sel); } .EC-tr--chips { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 37px; } .EC-tr--chip { font-size: 11px; padding: 2px 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; } .EC-tr--chip:hover { background: var(--hover); } .EC-tr--chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; } .EC-tr--act { font-size: 11px; padding: 2px 8px; border-radius: 11px; border: 1px dashed var(--line); background: none; color: var(--accent); cursor: pointer; } .EC-tr--act.is-on { color: var(--muted); } .EC-tr--none { font-size: 11px; color: var(--muted); } .EC-tr--tgl { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); padding-left: 37px; cursor: pointer; } .EC-tr--tgl input { margin: 0; } .EC-tr--exp { display: flex; flex-direction: column; gap: 1px; padding-left: 31px; } /* review flow (base/TraineeRole.md §UI 3-4). The toolbar chip states «на проверке» + to whom — it must read as STATUS, not as a button, so no hover/pointer affordance. Two colours: waiting (amber) vs sent back (red). */ .EC-revchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 9px; border-radius: 11px; border: 1px solid transparent; white-space: nowrap; cursor: default; } .EC-revchip.is-wait { background: #fef3c7; border-color: #f0c36d; color: #7a4b00; } .EC-revchip.is-back { background: #fde2e0; border-color: #e9a49e; color: #8a2018; } .EC-rq--row { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; } .EC-rq--top { display: flex; align-items: baseline; gap: 8px; } .EC-rq--t { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .EC-rq--t:hover { text-decoration: underline; } .EC-rq--sub { font-size: 11px; color: var(--muted); } .EC-rq--drift { font-size: 11px; line-height: 1.35; color: #b45309; } .EC-rq--acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .EC-rq--tabs { display: flex; gap: 6px; margin-bottom: 5px; } /* review composer (editor/reviewComposer.tsx) — the thread + the box you answer in. Mounted under the editor's publish control and inside every queue row, so it must sit happily in a 300px popup column. */ .EC-rc { display: flex; flex-direction: column; gap: 6px; } .EC-rc--list { display: flex; flex-direction: column; gap: 5px; } .EC-rc--msg { border-left: 2px solid var(--line); padding-left: 7px; } .EC-rc--msg.is-note { border-left-color: #e9a49e; } .EC-rc--msg.is-finished { border-left-color: #f0c36d; } .EC-rc--who { font-size: 11px; color: var(--muted); } .EC-rc--txt { font-size: 12px; line-height: 1.4; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; } .EC-rc--more { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: 11px; color: var(--muted); text-decoration: underline; cursor: pointer; } .EC-rc--box { display: flex; flex-direction: column; gap: 5px; } textarea.EC-rc--ta { min-height: 54px; line-height: 1.4; resize: vertical; overflow-y: auto; } .EC-rc--bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .EC-rc--hint { flex: 1 1 140px; min-width: 0; font-size: 11px; line-height: 1.3; color: var(--muted); } .EC-rc--hint.is-need { color: #b45309; } .EC-rc--err { font-size: 12px; line-height: 1.35; color: #c0392b; } /* editor toolbar: article title + back link */ .EC-back { text-decoration: none; color: var(--muted); font-size: 18px; padding: 2px 8px; border-radius: 6px; } .EC-back:hover { background: var(--hover); color: var(--ink); } .EC-title { font: inherit; font-size: 14px; font-weight: 600; border: 1px solid transparent; background: transparent; color: var(--ink); padding: 3px 8px; border-radius: 6px; width: 90px; min-width: 90px; } /* width set by autoGrow */ .EC-title:hover { border-color: var(--line); } .EC-title:focus { outline: none; border-color: var(--accent); background: var(--canvas); } .EC-tb--sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; } .EC-uri { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .EC-uri--pfx { opacity: .6; } .EC-slug { font: inherit; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid transparent; background: transparent; color: var(--accent); padding: 2px 4px; border-radius: 5px; width: 60px; } /* width set by autoGrow */ .EC-slug:hover { border-color: var(--line); } .EC-slug:focus { outline: none; border-color: var(--accent); background: var(--canvas); } .EC-art--slug { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); opacity: .8; } .EC-art--row.is-hidden > .EC-art--cell { opacity: .5; } /* row is display:contents → dim the cells, not the (box-less) row */ .EC-art--hide { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 4px 8px; border-radius: 6px; opacity: 0; } .EC-art--row:hover .EC-art--hide { opacity: 1; } .EC-art--hide:hover { background: var(--hover); color: var(--ink); } /* REDESIGN item #2 — the protected-hide two-step confirm. The confirm/cancel pair is NOT hover-gated (unlike the armed .EC-art--hide), so an armed prompt stays visible while the pointer moves to it; «✕» cancels. */ .EC-art--hideconf { display: inline-flex; align-items: center; gap: 4px; } .EC-art--hideyes { border: none; background: var(--brand-red); color: #fff; cursor: pointer; font-size: 12px; padding: 4px 9px; border-radius: 6px; } .EC-art--hideyes:hover { filter: brightness(1.08); } .EC-art--hideno { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 4px 7px; border-radius: 6px; } .EC-art--hideno:hover { background: var(--hover); color: var(--ink); } /* REDESIGN item #1/#3/#4 — the single column-HEADER row (display:contents so its cells share the list's grid tracks and line up over their columns). It replaces the per-row date labels and the standalone sortbar. */ .EC-art--head { display: contents; } .EC-art--hcell { position: sticky; top: 0; z-index: 3; flex-direction: row; align-items: center; padding-top: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--line); } .EC-art--hcell.EC-art--c-updated, .EC-art--hcell.EC-art--c-published { justify-content: flex-end; } .EC-art--search { width: 100%; min-width: 0; } /* the Title header IS the search box (item #4) */ .EC-art--sorth { border: none; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; } .EC-art--sorth:hover { background: var(--hover); color: var(--ink); } .EC-art--hcell.is-sort .EC-art--sorth { color: var(--ink); } .EC-art--arr { font-size: 11px; font-weight: 700; color: var(--accent); } /* OWNER FEEDBACK A — the date filter lives ON the «Опубликовано» header: a funnel icon to the LEFT of the label (grey inactive → accent when a range is set) and, when active, the selected range in accent, smaller, BELOW the header. The published header cell therefore stacks (icon+label row over the range text). */ .EC-art--hcell.EC-art--c-published { flex-direction: column; align-items: flex-end; gap: 2px; } .EC-art--hpub { display: inline-flex; align-items: center; gap: 4px; } /* the funnel: a masked SVG token so it themes with the background colour (grey → accent), like --ec-live-ic */ .EC-art--datefilter { flex: none; width: 14px; height: 14px; padding: 0; border: 0; background: var(--muted); cursor: pointer; -webkit-mask: var(--ec-filter-ic) center/contain no-repeat; mask: var(--ec-filter-ic) center/contain no-repeat; } .EC-art--datefilter:hover { background: var(--ink); } .EC-art--datefilter.is-active { background: var(--accent); } /* the selected range under the header — accent, smaller; clicking it re-opens the picker */ .EC-art--daterange { border: 0; background: transparent; color: var(--accent); cursor: pointer; font: inherit; font-size: 10px; line-height: 1.2; letter-spacing: 0; text-transform: none; font-weight: 600; padding: 0; white-space: nowrap; } .EC-art--daterange:hover { text-decoration: underline; } /* REDESIGN items #4/#5/T105 — the ONE top filter bar (date-range · active section/tag chips). */ .EC-home--filters { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 8px 0 14px; } .EC-home--chips { min-height: 0; } .EC-home--chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--canvas); color: var(--ec-fg); cursor: pointer; } .EC-home--chip:hover { background: var(--hover); } .EC-home--chiptx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .EC-home--chipx { font-size: 11px; opacity: .55; } /* REDESIGN item #5 — the minimal Разделы/Теги TAB strip atop the left panel. */ .EC-home--tagtabs { display: flex; gap: 2px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .EC-home--tagtab { flex: 1 1 0; font: inherit; font-size: 13px; padding: 6px 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .EC-home--tagtab:hover { color: var(--ink); } .EC-home--tagtab.is-on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; } /* toolbar — quiet */ .EC-toolbar { display: flex; align-items: center; gap: 18px; padding: 7px 14px; background: var(--panel); border-bottom: 1px solid var(--line); } .EC-group { display: flex; align-items: center; gap: 3px; } .EC-group--lbl { font-size: 11px; color: var(--muted); margin-right: 5px; } .EC-seg, .EC-btn { font: inherit; font-size: 13px; padding: 3px 9px; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 6px; cursor: pointer; } .EC-seg:hover, .EC-btn:hover { background: var(--hover); color: var(--ink); } .EC-seg.is-on, .EC-btn.is-on { background: var(--canvas); color: var(--accent); border-color: var(--line); } /* icon segmented multivalue toggle (device / theme) */ .EC-iseg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; } .EC-iseg--b { font: inherit; font-size: 14px; line-height: 1; padding: 4px 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; } .EC-iseg--b + .EC-iseg--b { border-left: 1px solid var(--line); } .EC-iseg--b:hover { background: var(--hover); color: var(--ink); } .EC-iseg--b.is-on { background: var(--canvas); color: var(--accent); } /* icon button (panel toggles / collapse) */ .EC-icon { font-size: 15px; line-height: 1; padding: 4px 8px; } .EC-tgl { border: 1px solid var(--line); } .EC-tgl.is-on { color: var(--accent); border-color: var(--accent); background: var(--canvas); } .EC-tgl--right { margin-left: 4px; } /* History button = save-state indicator (border color) + a transient floating status label below it. */ .EC-histwrap { position: relative; display: inline-flex; } .EC-histbtn.is-saved { border-color: var(--ec-success); box-shadow: 0 0 0 1px var(--ec-success) inset; } /* saved/up-to-date */ .EC-histbtn.is-editing { border-color: var(--line); } /* editing */ .EC-histbtn.is-detached { border-color: var(--ec-warning); box-shadow: 0 0 0 1px var(--ec-warning) inset; } /* on a history branch */ .EC-histbtn.is-conflict { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626 inset; } /* sync conflict / offline */ .EC-histlabel { position: absolute; top: calc(100% + 5px); right: 0; white-space: nowrap; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; box-shadow: 0 3px 10px var(--ec-shadow); opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; z-index: 50; } .EC-histlabel.is-show { opacity: 1; transform: translateY(0); } .EC-save { font-size: 12px; color: var(--muted); } .EC-save.is-saved { color: #2faf5a; } .EC-btn.is-off { opacity: .35; pointer-events: none; } /* top-panel undo/redo split buttons (main = one step, ▾/right-click = dropdown) */ .EC-undgrp { display: inline-flex; } .EC-undgrp .EC-seg { padding: 3px 7px; } .EC-und--caret { padding: 3px 3px; margin-left: -3px; font-size: 10px; } .EC-seg.is-off { opacity: .4; } .EC-blk--missing { display: none; } /* dangling block reference → render nothing (safety placeholder) */ /* presence: active-editor avatars (base/Multiplayer.md) — colored initials, overlapped */ .EC-presence-wrap { display: inline-flex; align-items: center; margin-right: 8px; } .EC-presence { display: inline-flex; align-items: center; } .EC-presence--av { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--panel); font-size: 10px; font-weight: 700; color: #fff; box-shadow: 0 1px 2px rgba(20,25,35,.2); } .EC-presence--av:first-child { margin-left: 0; } .EC-presence--more { margin-left: 4px; font-size: 11px; color: var(--muted); } /* Head picker (base/CollabModel.md §7a): Live + colleagues' draft branches. Functional pass; UX polish later. */ .EC-headpicker { display: none; align-items: center; gap: 4px; margin-right: 8px; } .EC-headpicker.is-on { display: inline-flex; } .EC-head { display: inline-flex; align-items: center; gap: 4px; padding: 0px 0px 0px 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; min-height: 24px; box-sizing: border-box; } .EC-head.is-empty { padding: 0 10px; } /* no avatars → balanced horizontal padding (the min-height keeps it the same size as chips with people) */ .EC-head:hover { border-color: var(--accent); color: var(--accent); } /* The head THIS TAB (socket) is currently in — the per-tab accent. NOT keyed by account, so each tab of the same user (a shared link opened twice) highlights its OWN current head (base/CollabModel.md §7a). */ .EC-head.is-here { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .EC-head--lbl { padding: 0 2px; } .EC-head { padding-right: 4px; } /* room for the trailing avatars */ /* Per-person avatar INSIDE a head chip — clickable, jumps to where that person is (their own history/draft room). */ .EC-head--av { width: 18px; height: 18px; font-size: 9px; border-width: 2px; cursor: pointer; } .EC-head--av:hover, .EC-head--av.is-here { box-shadow: 0 0 0 2px var(--accent); z-index: 1; } /* Detached-from-live banner (base/CollabModel.md §7): shown when viewing/editing an earlier version (a branch). */ .EC-livebanner { display: none; align-items: center; gap: 6px; margin-right: 8px; padding: 3px 10px; border: 1px solid var(--ec-warning); border-radius: 6px; background: #fff5e8; color: #a35a00; font-size: 12px; font-weight: 600; cursor: pointer; } .EC-livebanner.is-on { display: inline-flex; animation: ec-pulse 1.2s ease 2; } .EC-livebanner:hover { background: #ffe9cc; } /* dark: the cream bg (#fff5e8) + amber ink (#a35a00) become a translucent warning tint + light amber */ [data-theme="dark"] .EC-livebanner { background: color-mix(in srgb, var(--ec-warning) 18%, transparent); color: var(--ec-warning); } [data-theme="dark"] .EC-livebanner:hover { background: color-mix(in srgb, var(--ec-warning) 28%, transparent); } .EC-presence-wrap.has-others { animation: ec-pulse 1.2s ease 2; } .EC-presence-wrap.is-hidden { display: none; } /* head picker is showing → it already lists who's where */ @keyframes ec-pulse { 50% { filter: brightness(1.3); } } /* Remote cursor (base/Multiplayer.md): a thin colored caret at a co-author's exact text position + a name flag. */ .EC-rcaret { position: absolute; width: 2px; border-radius: 1px; pointer-events: none; z-index: 6; animation: ec-rcaret-in .12s ease; transition: left .08s linear, top .08s linear, height .08s linear; } .EC-rcaret--flag { position: absolute; top: -1.15em; left: -1px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.3; font-weight: 600; color: #fff; background: inherit; padding: 0 4px; border-radius: 3px 3px 3px 0; box-shadow: 0 1px 2px rgba(20,25,35,.25); opacity: 0; transition: opacity .15s ease; } .EC-rcaret:hover .EC-rcaret--flag, .EC-rcaret.is-fresh .EC-rcaret--flag { opacity: .96; } @keyframes ec-rcaret-in { from { opacity: 0; } } /* Interactive chart (editor): drag nodes to pin; «↻» resets to autolayout (base/Chart.md). */ .EC-blk--chart { position: relative; } .EC-chart--auto { position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; } .EC-chart--auto:hover, .EC-chart--help:hover { color: var(--accent); border-color: var(--accent); } .EC-chart--help { position: absolute; top: 6px; right: 36px; z-index: 2; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--muted); cursor: pointer; } /* node SHAPES (base/Chart.md): rect (default) · rhombus (condition) · ellipse */ .doc-chart__node.shape-ellipse { border-radius: 50%; text-align: center; padding: 20px 28px; } .doc-chart__node.shape-ellipse::before { display: none; } .doc-chart__node.shape-rhombus { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); text-align: center; padding: 28px 34px; border-radius: 0; } .doc-chart__node.shape-rhombus::before { display: none; } /* per-node control bar (a canvas sibling above the node → never clipped by a shape) */ .EC-chart--bar { position: absolute; display: flex; gap: 2px; z-index: 6; opacity: 0; pointer-events: none; transition: opacity .1s; } .EC-chart--bar.show { opacity: 1; pointer-events: auto; } .EC-chart--bar button { width: 20px; height: 20px; padding: 0; font-size: 12px; line-height: 1; border: 1px solid var(--line); border-radius: 5px; background: var(--canvas); color: var(--muted); cursor: pointer; } .EC-chart--bar button:hover { color: var(--accent); border-color: var(--accent); } .EC-blk--chart .doc-chart__t[contenteditable], .EC-blk--chart .doc-chart__b[contenteditable] { outline: none; cursor: text; border-radius: 3px; } .EC-blk--chart .doc-chart__t[contenteditable]:focus, .EC-blk--chart .doc-chart__b[contenteditable]:focus { box-shadow: 0 0 0 2px var(--accent); } /* syntax legend */ .EC-chart--legend { position: absolute; top: 38px; right: 6px; z-index: 7; display: none; width: 250px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px var(--ec-shadow); font-size: 12px; color: var(--ink-soft); } .EC-chart--legend.show { display: block; } .EC-chart--legend b { display: block; margin: 7px 0 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .EC-chart--legend b:first-child { margin-top: 0; } .EC-chart--legend b span { text-transform: none; letter-spacing: 0; font-weight: 400; } .EC-chart--legend code { font-size: 11.5px; background: var(--canvas); padding: 1px 4px; border-radius: 4px; } .EC-chart--legend .EC-chart--lh { color: var(--muted); margin-top: 3px; } .EC-toolbar .EC-lang { padding: 3px 6px; font-size: 12px; color: var(--muted); cursor: pointer; } .EC-toolbar .EC-lang:hover { color: var(--ink); } .EC-toolbar .EC-lang.is-translating { color: var(--accent); background: var(--canvas); border: 1px solid var(--accent); border-radius: 6px; } /* Translation mode: a thin accent rail down the canvas so it's clear you're editing a translation, not the source. */ .EC-translating .EC-canvas { box-shadow: inset 3px 0 0 var(--accent); } .EC-hist--menu { min-width: 190px; } /* commit graph drawer */ .EC-drawer { width: 0; overflow: hidden; transition: width .15s ease; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; } .EC-app.history-open .EC-drawer { width: 300px; } .EC-drawer--head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; flex: 0 0 auto; } .EC-drawer--body { overflow: auto; } .EC-graph { padding: 6px 0; } .EC-graph--row { display: flex; gap: 10px; padding: 6px 12px; cursor: pointer; position: relative; } .EC-graph--row:hover { background: var(--hover); } /* The commit currently being PREVIEWED — left accent bar + tint, so it's clear which version you're looking at. */ .EC-graph--row.is-viewing { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); } .EC-graph--row::before { content: ''; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--line); } .EC-graph--dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 2px solid; flex: 0 0 auto; margin-top: 3px; } /* commit author avatar (initial in a colored circle) — replaces the email; one-line "