/* ═══════════════════════════════════════════════════════════════ PROFANS TWEETS · Twitter-style 3-column platform ═══════════════════════════════════════════════════════════════ */ /* ───── RESET (побеждаем тему сайта) ───── Контракт специфичности: reset держит 0,1,1 (кнопки) / 0,2,1 (инпуты); компоненты перебивают его удвоенным классом (.foo.foo = 0,2,0) — работает и внутри .pft-shell, и в попапах, смонтированных в . .btn из design-tokens исключён из reset через :where(:not(.btn)). */ .pft-shell, .pft-shell *, .pft-shell *::before, .pft-shell *::after{box-sizing:border-box;} .pft-shell input, .pft-shell textarea, .pft-shell button, .pft-shell select, .pft-shell a{ outline:0; -webkit-appearance:none; appearance:none; } .pft-shell input:focus, .pft-shell textarea:focus, .pft-shell button:focus, .pft-shell input:focus-visible, .pft-shell textarea:focus-visible, .pft-shell button:focus-visible{ outline:0; box-shadow:none; } .pft-shell input:not([type="submit"]), .pft-shell textarea{ background:transparent; border:0; box-shadow:none; color:var(--text); font-family:var(--font-ui); } .pft-shell button:where(:not(.btn)){ background:transparent; border:0; box-shadow:none; font-family:var(--font-ui); cursor:pointer; padding:0; margin:0; color:inherit; } .pft-shell a{ color:inherit; text-decoration:none; } .pft-shell ul, .pft-shell ol{ list-style:none; padding:0; margin:0; } .pft-shell h1, .pft-shell h2, .pft-shell h3, .pft-shell h4{ margin:0; } .pft-shell p{ margin:0; } .pft-shell::selection, .pft-shell ::selection{ background:color-mix(in srgb, var(--accent) 30%, transparent); } /* ───── PALETTE (локальные токены для твиттер-палитры) ───── */ .pft-shell{ --pft-blue:#1d9bf0; /* Twitter blue для модератор-бейджа */ --pft-red:#f43f5e; /* лайк */ --pft-green:#22c55e; /* репост */ --pft-hover-bg: color-mix(in srgb, var(--text) 4%, transparent); --pft-hairline: var(--border); --pft-thread-line: color-mix(in srgb, var(--text) 18%, transparent); --pft-surface: var(--surface, var(--bg-1)); --pft-glass: color-mix(in srgb, var(--surface, var(--bg-1)) 88%, transparent); } /* ───── SHELL — 3 колонки ───── */ .pft-shell{ /* GP держит .site-content флексом ради сайдбара; margin:0 auto отключает stretch, и без явной ширины шелл берёт max-content — гуляет 990/1152 от прогона к прогону и даёт CLS ~0.11. */ width:100%; max-width:1280px; margin:0 auto; padding:0 18px; font-family:var(--font-ui); color:var(--text); font-size:15px; line-height:1.4; overflow-x:clip; } .pft-app{ display:grid; grid-template-columns: 250px minmax(0,1fr) 340px; gap:24px; align-items:start; margin:0 auto; padding:0 0 80px; } /* Только feed (/blogs/) — шире центр */ .pft-app.pft-app-feed{ grid-template-columns: 220px minmax(0,1fr) 300px; gap:22px; } .pft-stream{ min-width:0; overflow-x:clip; } /* ════════════════════════════════════════════════ ЛЕВАЯ NAV-КОЛОНКА ════════════════════════════════════════════════ */ .pft-nav{ position:sticky; top:78px; align-self:start; padding-top:14px; padding-bottom:24px; display:flex; flex-direction:column; gap:2px; max-height: calc(100vh - 90px); overflow-y:auto; } .pft-nav::-webkit-scrollbar{ width:0; } .pft-nav-brand{ display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:8px; text-decoration:none; font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--text); letter-spacing:.02em; } .pft-nav-brand .logo{ width:36px; height:36px; border-radius:10px; background:var(--accent); display:inline-flex; align-items:center; justify-content:center; color:#ffffff; font-family:var(--font-display); font-weight:900; font-size:18px; box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); } .pft-nav-link{ display:flex; align-items:center; gap:14px; padding:11px 16px; border-radius:999px; font-size:18px; font-weight:600; color:var(--text); text-decoration:none; transition: background .14s ease; line-height:1.2; } .pft-nav-link:hover{ background:var(--pft-hover-bg); } .pft-nav-link.is-active{ font-weight:900; } .pft-nav-link.is-active .pft-nav-icon{ color:var(--accent-text,var(--accent)); } .pft-nav-icon{ width:26px; height:26px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:var(--text); } .pft-nav-icon svg{ width:24px; height:24px; } /* Модификатор поверх .btn.btn-primary (палитра — из design-tokens) */ .pft-nav-post-btn.pft-nav-post-btn{ display:block; margin:14px 6px 18px; padding:14px 0; height:auto; background:var(--accent); color:var(--accent-ink); border-radius:999px; font-size:16px; font-weight:900; text-align:center; text-decoration:none; transition: background .14s, transform .1s; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 25%, transparent); letter-spacing:.02em; text-shadow:0 1px 0 rgba(0,0,0,.18); } .pft-nav-post-btn.pft-nav-post-btn:hover{ background:var(--accent-hover, var(--accent)); transform:translateY(-1px); } .pft-nav-me{ margin-top:auto; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; background:transparent; transition: background .14s; text-decoration:none; color:var(--text); } .pft-nav-me:hover{ background:var(--pft-hover-bg); } .pft-nav-me img{ width:42px; height:42px; border-radius:50%; object-fit:cover; background:var(--chip-bg); } .pft-nav-me-name{ font-weight:800; font-size:14px; line-height:1.15; } .pft-nav-me-handle{ font-size:13px; color:var(--text-dim); } .pft-nav-me-dots{ width:24px; height:24px; color:var(--text-dim); } /* ════════════════════════════════════════════════ ЦЕНТРАЛЬНАЯ ЛЕНТА ════════════════════════════════════════════════ */ .pft-stream{ min-width:0; border-left:1px solid var(--pft-hairline); border-right:1px solid var(--pft-hairline); background:var(--pft-surface); min-height: calc(100vh - 80px); } /* Header сверху ленты (НЕ sticky целиком — sticky только табы ниже) */ .pft-head{ position:relative; background: var(--pft-surface); border-bottom:1px solid var(--pft-hairline); } .pft-head-title{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px 10px; gap:12px; } .pft-head-title h1{ font-family:var(--font-ui); font-size:20px; font-weight:900; color:var(--text); letter-spacing:-.01em; margin:0; } .pft-head-actions{ display:flex; gap:4px; } .pft-head-icon-btn{ width:36px; height:36px; border-radius:50%; background:transparent; color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center; transition: background .14s, color .14s; } .pft-head-icon-btn:hover{ background:var(--pft-hover-bg); color:var(--accent-text,var(--accent)); } .pft-head-icon-btn svg{ width:18px; height:18px; } .pft-tabs{ display:flex; position:sticky; top:64px; z-index:8; background: var(--pft-glass); backdrop-filter:saturate(170%) blur(14px); -webkit-backdrop-filter:saturate(170%) blur(14px); border-bottom:1px solid var(--pft-hairline); } .pft-tab{ flex:1; padding:15px 8px 0 8px; min-height:54px; background:transparent; border:0; font-weight:600; font-family:var(--font-ui); font-size:15px; color:var(--text-muted); cursor:pointer; position:relative; transition: background .14s, color .14s; text-align:center; line-height:1.1; } .pft-tab > span{ display:inline-block; padding-bottom:14px; position:relative; } .pft-tab:hover{ background:var(--pft-hover-bg); color:var(--text); } .pft-tab.is-active{ color:var(--text); font-weight:900; } .pft-tab.is-active > span::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--accent); border-radius:4px; } /* ───── Tag filter banner ───── */ .pft-tag-filter{ padding:12px 18px; background:color-mix(in srgb, var(--accent) 7%, var(--pft-surface)); border-bottom:1px solid var(--pft-hairline); display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-muted); } .pft-tag-filter strong{ color:var(--text); font-weight:800; font-family:var(--font-display); } .pft-tag-filter .reset{ color:var(--accent-text,var(--accent)); margin-left:auto; font-weight:700; padding:4px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-size:13px; } .pft-tag-filter .reset:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); } /* Top-tab фильтры (вместо композера) */ .pft-top-filters{ padding:16px 18px; background:var(--pft-surface); border-bottom:1px solid var(--pft-hairline); display:flex; flex-direction:column; gap:12px; } .pft-top-filters-label{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--text); } .pft-top-filters-label svg{ color:var(--accent-text,var(--accent)); flex-shrink:0; } .pft-top-filters-row{ display:flex; flex-wrap:wrap; gap:8px; } /* Модификатор поверх .btn.btn-secondary.btn-sm */ .pft-period-btn.pft-period-btn{ height:auto; padding:8px 14px; background:var(--chip-bg); color:var(--text); border:1px solid var(--pft-hairline); border-radius:999px; font-size:13px; font-weight:700; transition:background .15s, color .15s, border-color .15s; } .pft-period-btn.pft-period-btn:hover{ background:color-mix(in srgb, var(--accent) 12%, var(--chip-bg)); border-color:color-mix(in srgb, var(--accent) 30%, var(--pft-hairline)); } .pft-period-btn.pft-period-btn.is-active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } /* ════════════════════════════════════════════════ КОМПОЗЕР ════════════════════════════════════════════════ */ .pft-shell .pft-composer{ display:grid; grid-template-columns:48px 1fr; gap:14px; padding:14px 18px 10px; border-bottom:1px solid var(--pft-hairline); background:var(--pft-surface); position:relative; scroll-margin-top:120px; min-height:160px; align-items:start; } .pft-shell .pft-composer-avatar{ width:48px; height:48px; min-height:48px; border-radius:50%; overflow:hidden; background:var(--chip-bg); } .pft-composer-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .pft-composer-body{ display:flex; flex-direction:column; min-width:0; min-height:130px; gap:2px; } .pft-composer-audience.pft-composer-audience{ display:inline-flex; align-items:center; gap:4px; align-self:flex-start; font-size:12.5px; font-weight:800; color:var(--accent-text,var(--accent)); padding:3px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); margin-bottom:4px; cursor:pointer; transition: background .14s; } .pft-composer-audience:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent); } .pft-composer-audience svg{ width:14px; height:14px; } .pft-composer-reply{ font-size:13.5px; color:var(--text-dim); margin-bottom:4px; font-weight:600; } .pft-composer-reply a{ color:var(--accent-text,var(--accent)); font-weight:700; } /* Contenteditable input (WYSIWYG live formatting) */ .pft-shell .pft-composer-input{ width:100%; display:block; background:transparent; border:0; outline:0; color:var(--text); font-family:var(--font-ui); font-size:19px; line-height:1.45; min-height:72px; max-height:300px; overflow-y:auto; padding:10px 0 6px; margin:6px 0 8px; box-sizing:border-box; word-wrap:break-word; overflow-wrap:anywhere; cursor:text; } .pft-shell .pft-composer-input:empty::before{ content: attr(data-placeholder); color:var(--text-dim); font-weight:500; pointer-events:none; } .pft-shell .pft-composer-input b,.pft-shell .pft-composer-input strong{ font-weight:800; } .pft-shell .pft-composer-input i,.pft-shell .pft-composer-input em{ font-style:italic; } .pft-shell .pft-composer-input u{ text-decoration:underline; text-underline-offset:2px; } .pft-shell .pft-composer-input s,.pft-shell .pft-composer-input strike{ text-decoration:line-through; color:var(--text-dim); } .pft-shell .pft-composer-input mark{ background:#fde047; color:#000; padding:0 4px; border-radius:3px; } .pft-shell .pft-composer-input code{ font-family:var(--font-mono,monospace); background:var(--chip-bg); padding:1px 6px; border-radius:5px; font-size:.92em; color:var(--accent-text,var(--accent)); } .pft-shell .pft-composer-input pre{ background:var(--chip-bg); padding:10px 12px; border-radius:10px; font-size:13px; overflow:auto; margin:6px 0; border:1px solid var(--pft-hairline); } .pft-shell .pft-composer-input pre code{ background:transparent; padding:0; color:var(--text); } .pft-shell .pft-composer-input blockquote{ margin:8px 0; padding:6px 14px; border-left:3px solid var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); border-radius:0 8px 8px 0; font-style:italic; color:var(--text-muted); } .pft-shell .pft-composer-input h2{ font-family:var(--font-display); font-size:24px; font-weight:800; margin:8px 0 4px; line-height:1.2; } .pft-shell .pft-composer-input h3{ font-family:var(--font-display); font-size:20px; font-weight:800; margin:6px 0 3px; line-height:1.2; } .pft-shell .pft-composer-input h4{ font-size:17px; font-weight:800; margin:6px 0 3px; } .pft-shell .pft-composer-input ul{ margin:4px 0; padding-left:24px; list-style-type:disc; } .pft-shell .pft-composer-input ol{ margin:4px 0; padding-left:24px; list-style-type:decimal; } .pft-shell .pft-composer-input li{ margin:1px 0; } .pft-shell .pft-composer-input hr{ border:0; border-top:1px solid var(--pft-hairline); margin:10px 0; } .pft-shell .pft-composer-input a{ color:var(--accent-text,var(--accent)); text-decoration:underline; text-decoration-color:rgba(255,92,141,.4); } .pft-shell .pft-composer-input img{ max-width:100%; max-height:200px; border-radius:8px; vertical-align:middle; } .pft-shell .pft-composer-input img.pf-emoji-img{ width:22px; height:22px; min-width:22px; min-height:22px; max-height:22px; border-radius:50%; display:inline-block; vertical-align:middle; margin:0 2px; } .pft-shell .pft-composer-input .pft-mention{ color:var(--accent-text,var(--accent)); font-weight:700; } .pft-shell .pft-composer-input .pft-hashtag{ color:var(--accent-text,var(--accent)); font-weight:600; } .pft-shell .pft-composer-input .pft-spoiler{ background:var(--text); color:var(--text); padding:0 4px; border-radius:3px; } .pft-shell .pft-composer-input span[data-color]{ /* color spans */ } /* Превью медиа в композере */ .pft-composer-media{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px; margin:10px 0 6px; border-radius:18px; overflow:hidden; border:1px solid var(--pft-hairline); } .pft-composer-media:empty{ display:none; border:0; } .pft-composer-media:has(>:nth-child(1):last-child){ grid-template-columns:1fr; } .pft-composer-media-item{ position:relative; aspect-ratio:16/10; background:#000; } .pft-composer-media-item img{ width:100%; height:100%; object-fit:cover; display:block; } .pft-composer-media-remove.pft-composer-media-remove{ position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; background:rgba(15,23,42,.85); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; backdrop-filter:blur(4px); } .pft-composer-media-remove.pft-composer-media-remove:hover{ background:rgba(15,23,42,.95); } /* Тулбар — 2 строки полностью видимые */ .pft-composer-bar{ display:flex; align-items:center; gap:2px; padding:6px 0 0; flex-wrap:wrap; overflow:visible; } .pft-composer-bar-row1{ margin-top:8px; padding-top:8px; border-top:1px solid var(--pft-hairline); } .pft-composer-bar-row2{ padding-top:2px; padding-bottom:6px; } .pft-composer-bar .pft-tb{ flex-shrink:0; } /* Нижняя строка композера: char-ring + Запостить */ .pft-composer-foot{ display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:8px 0 4px; border-top:1px solid var(--pft-hairline); margin-top:6px; } .pft-composer-foot .pft-submit{ min-width:120px; } .pft-tb{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; cursor:pointer; font-weight:800; font-size:14px; flex-shrink:0; transition: background .14s; } .pft-tb.pft-tb{ background:transparent; border:0; color:var(--accent-text,var(--accent)); } .pft-tb.pft-tb:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); } .pft-tb svg{ width:18px; height:18px; display:block; } .pft-tb.pft-tb-text{ font-family:var(--font-display); font-size:14px; font-weight:900; letter-spacing:.02em; width:auto; min-width:28px; padding:0 6px; color:var(--accent-text,var(--accent)); } .pft-tb-sep{ width:1px; height:18px; background:var(--pft-hairline); margin:0 5px; align-self:center; flex-shrink:0; } .pft-composer-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; padding-left:8px; } .pft-char-ring{ position:relative; width:30px; height:30px; flex-shrink:0; } .pft-char-ring svg{ transform:rotate(-90deg); } .pft-char-ring .bg{ stroke:var(--pft-hairline); } .pft-char-ring .fg{ stroke:var(--accent); transition: stroke-dashoffset .14s, stroke .14s; } .pft-char-ring.warn .fg{ stroke:#f59e0b; } .pft-char-ring.over .fg{ stroke:#f87171; } .pft-char-ring-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--text-dim); font-variant-numeric:tabular-nums; } .pft-char-ring.warn .pft-char-ring-num{ color:#f59e0b; } .pft-char-ring.over .pft-char-ring-num{ color:#f87171; } [data-theme="light"] .pft-char-ring.over .pft-char-ring-num{ color:#dc2626; } [data-theme="light"] .pft-char-ring.over .fg{ stroke:#dc2626; } /* Модификатор поверх .btn.btn-primary: пилюля + акцент-глоу композера */ .pft-submit.pft-submit{ height:auto; border-radius:999px; padding:8px 20px; font-weight:900; font-size:14.5px; line-height:1.1; box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent); flex-shrink:0; } .pft-submit.pft-submit:disabled{ background:color-mix(in srgb, var(--accent) 65%, var(--chip-bg)); color:var(--accent-ink,#142030); cursor:not-allowed; box-shadow:none; opacity:.85; pointer-events:auto; } /* "Ещё форматирование" popup */ .pft-more-pop{ position:absolute; display:none; background:var(--pft-surface); border:1px solid var(--pft-hairline); border-radius:14px; padding:6px; z-index:150; box-shadow:0 12px 32px rgba(0,0,0,.2); grid-template-columns:repeat(6, 36px); gap:2px; } .pft-more-pop.open{ display:grid; } .pft-more-pop .pft-tb{ width:36px; height:36px; } /* @-mentions dropdown */ .pft-mention-dd{ position:fixed; z-index:9999; background:var(--pft-surface); border:1px solid var(--pft-hairline); border-radius:14px; box-shadow:0 14px 36px rgba(0,0,0,.22); min-width:280px; max-width:340px; max-height:280px; overflow-y:auto; padding:6px; } .pft-mention-row{ display:grid; grid-template-columns:36px 1fr auto; gap:10px; width:100%; padding:8px 10px; background:transparent; border:0; border-radius:8px; text-align:left; cursor:pointer; align-items:center; font-family:var(--font-ui); } .pft-mention-row img{ width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--chip-bg); } .pft-mention-row .pft-mention-name{ font-weight:800; color:var(--text); font-size:14.5px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pft-mention-row .pft-mention-handle{ color:var(--text-dim); font-size:13px; } .pft-mention-row:hover, .pft-mention-row.is-sel{ background:var(--pft-hover-bg, rgba(0,0,0,.04)); } .pft-mention-row.is-sel{ background:color-mix(in srgb, var(--accent) 12%, transparent); } /* Color picker — popup в , fixed координаты */ .pft-color-pop-global{ position:fixed; z-index:9999; background:var(--pft-surface); border:1px solid var(--pft-hairline); border-radius:14px; padding:10px; box-shadow:0 14px 36px rgba(0,0,0,.22); display:grid; grid-template-columns:repeat(7,28px); gap:6px; } .pft-color-pop-global button{ width:28px; height:28px; border-radius:50%; border:2px solid rgba(0,0,0,.08); padding:0; cursor:pointer; transition: transform .12s; } .pft-color-pop-global button:hover{ transform:scale(1.18); border-color:var(--text); } /* Live markdown preview */ .pft-composer-preview{ display:none; margin:6px 0 0; padding:12px 14px; background:var(--chip-bg); border-radius:12px; border:1px solid var(--pft-hairline); font-size:15px; line-height:1.5; color:var(--text); max-height:300px; overflow-y:auto; position:relative; } .pft-composer-preview.has-content{ display:block; } .pft-composer-preview::before{ content:"ПРЕВЬЮ"; position:absolute; top:-9px; left:14px; background:var(--pft-surface); padding:0 8px; font-size:10px; color:var(--text-dim); font-weight:800; letter-spacing:.1em; } .pft-composer-preview p{ margin:0 0 6px; } .pft-composer-preview p:last-child{ margin-bottom:0; } .pft-composer-preview strong{ font-weight:800; } .pft-composer-preview em{ font-style:italic; } .pft-composer-preview u{ text-decoration:underline; } .pft-composer-preview s{ text-decoration:line-through; color:var(--text-dim); } .pft-composer-preview mark{ background:#fde047; color:#000; padding:0 4px; border-radius:3px; } .pft-composer-preview code{ font-family:var(--font-mono,monospace); background:var(--pft-surface); padding:1px 5px; border-radius:4px; font-size:.92em; color:var(--accent-text,var(--accent)); } .pft-composer-preview pre{ background:var(--pft-surface); padding:8px 12px; border-radius:8px; font-size:13px; overflow:auto; margin:6px 0; } .pft-composer-preview pre code{ background:transparent; padding:0; color:var(--text); } .pft-composer-preview blockquote{ margin:6px 0; padding:6px 12px; border-left:3px solid var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); border-radius:0 8px 8px 0; font-style:italic; } .pft-composer-preview h2{ font-family:var(--font-display); font-size:20px; font-weight:800; margin:8px 0 4px; } .pft-composer-preview h3{ font-family:var(--font-display); font-size:17px; font-weight:800; margin:6px 0 3px; } .pft-composer-preview h4{ font-size:15px; font-weight:800; margin:6px 0 3px; } .pft-composer-preview ul,.pft-composer-preview ol{ margin:4px 0; padding-left:22px; list-style:revert; } .pft-composer-preview ul{ list-style-type:disc; } .pft-composer-preview ol{ list-style-type:decimal; } .pft-composer-preview hr{ border:0; border-top:1px solid var(--pft-hairline); margin:8px 0; } .pft-composer-preview .pft-mention,.pft-composer-preview .pft-hashtag,.pft-composer-preview a{ color:var(--accent-text,var(--accent)); text-decoration:none; font-weight:600; } .pft-composer-preview .pft-spoiler{ background:var(--text); color:var(--text); border-radius:3px; padding:0 4px; } .pft-composer-preview details.pft-linkspoiler{ display:inline-block; margin:0 4px; padding:2px 8px; border:1px solid var(--pft-hairline); border-radius:8px; background:var(--pft-surface); font-size:12px; } .pft-composer-preview span[style*="color"]{ font-weight:600; } /* ════════════════════════════════════════════════ ТРЕД-ВЬЮ (single) ════════════════════════════════════════════════ */ .pft-thread-back{ position:sticky; top:64px; z-index:9; display:flex; align-items:center; gap:14px; padding:12px 18px; font-weight:900; font-size:20px; color:var(--text); text-decoration:none; background:var(--pft-glass); backdrop-filter:saturate(170%) blur(14px); -webkit-backdrop-filter:saturate(170%) blur(14px); border-bottom:1px solid var(--pft-hairline); } .pft-back-icon{ width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--text); transition: background .14s; } .pft-thread-back:hover .pft-back-icon{ background:var(--pft-hover-bg); } .pft-thread-focus{ padding:16px 18px; border-bottom:1px solid var(--pft-hairline); background:var(--pft-surface); } .pft-focus-head{ display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; margin-bottom:14px; } .pft-focus-avatar{ width:48px; height:48px; border-radius:50%; overflow:hidden; background:var(--chip-bg); position:relative; } .pft-focus-avatar img{ width:100%; height:100%; object-fit:cover; } .pft-focus-name.pft-focus-name{ display:inline-flex; align-items:center; gap:6px; font-weight:900; font-size:15px; color:var(--text); } .pft-focus-name:hover{ text-decoration:underline; } .pft-focus-handle{ display:block; color:var(--text-dim); font-size:14px; } .pft-focus-body{ font-size:22px; line-height:1.4; color:var(--text); margin:8px 0 14px; word-wrap:break-word; overflow-wrap:anywhere; } .pft-focus-body p{ margin:0 0 10px; } .pft-focus-body h2{ font-family:var(--font-display); font-size:26px; font-weight:800; margin:16px 0 8px; } .pft-focus-body h3{ font-family:var(--font-display); font-size:22px; font-weight:800; margin:14px 0 8px; } .pft-focus-body h4{ font-size:18px; font-weight:800; margin:12px 0 6px; } .pft-focus-body.pft-focus-body img{ max-height:600px; } .pft-focus-meta{ font-size:14px; color:var(--text-dim); padding:14px 0 12px; border-top:1px solid var(--pft-hairline); border-bottom:1px solid var(--pft-hairline); margin:14px 0 6px; display:flex; gap:24px; flex-wrap:wrap; } .pft-focus-meta b{ color:var(--text); font-weight:900; } .pft-focus-actions{ display:flex; justify-content:space-around; padding:4px 0; } .pft-focus-actions .pft-act{ padding:6px 8px; font-size:14px; } .pft-focus-actions .pft-act-icon{ width:40px; height:40px; } .pft-focus-actions .pft-act-icon svg{ width:20px; height:20px; } .pft-thread-replies-header{ padding:18px 18px 10px; font-size:13px; font-weight:900; color:var(--text); text-transform:uppercase; letter-spacing:.1em; display:flex; align-items:center; gap:10px; border-top:1px solid var(--pft-hairline); margin-top:6px; } .pft-thread-replies-header::before{ content:""; display:inline-block; width:4px; height:14px; background:var(--accent); border-radius:3px; } /* ─── Вложенные ответы: уровни глубины (Reddit-style) ─── */ /* Каждая вложенная карточка */ .pft-tweet[data-depth="2"], .pft-tweet[data-depth="3"], .pft-tweet[data-depth="4"], .pft-tweet[data-depth="5"], .pft-tweet[data-depth="6"]{ grid-template-columns:32px 1fr; gap:10px; padding-top:10px; padding-bottom:4px; background:transparent; border-bottom:none; } .pft-tweet[data-depth="2"]{ padding-left:64px; } .pft-tweet[data-depth="3"]{ padding-left:96px; } .pft-tweet[data-depth="4"]{ padding-left:128px; } .pft-tweet[data-depth="5"]{ padding-left:152px; } .pft-tweet[data-depth="6"]{ padding-left:172px; } /* Г-уголок — соединение карточки с вертикальной линией branch */ .pft-tweet[data-depth="2"]::before, .pft-tweet[data-depth="3"]::before, .pft-tweet[data-depth="4"]::before, .pft-tweet[data-depth="5"]::before, .pft-tweet[data-depth="6"]::before{ content:""; position:absolute; top:0; width:18px; height:28px; border-left:2px solid var(--pft-thread-line, var(--border-strong)); border-bottom:2px solid var(--pft-thread-line, var(--border-strong)); border-bottom-left-radius:12px; pointer-events:none; transition: border-color .15s; } .pft-tweet[data-depth="2"]::before{ left:42px; width:38px; height:26px; } .pft-tweet[data-depth="3"]::before{ left:80px; width:32px; height:26px; } .pft-tweet[data-depth="4"]::before{ left:112px; width:30px; height:24px; } .pft-tweet[data-depth="5"]::before{ left:142px; width:24px; height:24px; } .pft-tweet[data-depth="6"]::before{ left:166px; width:20px; height:24px; } /* ─── Сплошная вертикальная линия через всю branch (Reddit-style «нить») ─── */ .pft-thread-branch{ position:relative; } .pft-thread-branch::before{ content:""; position:absolute; top:0; bottom:14px; width:2px; background:var(--pft-thread-line, var(--border-strong)); border-radius:2px; pointer-events:none; transition: background .15s; } /* Подсветка нити при ховере на любую карточку внутри branch */ .pft-thread-branch:hover::before{ background:color-mix(in srgb, var(--accent) 50%, var(--border-strong)); } /* Координата X = центр аватарки родителя: depth 1 parent (48px avatar, padding 18) → центр на 42 */ .pft-thread-branch::before{ left:42px; } /* Вложенные branches — центр аватара родителя соответствующего depth */ .pft-thread-branch .pft-thread-branch::before{ left:80px; } .pft-thread-branch .pft-thread-branch .pft-thread-branch::before{ left:112px; } .pft-thread-branch .pft-thread-branch .pft-thread-branch .pft-thread-branch::before{ left:142px; } .pft-thread-branch .pft-thread-branch .pft-thread-branch .pft-thread-branch .pft-thread-branch::before{ left:166px; } /* Hover-подсветка нити */ .pft-thread-branch:hover > .pft-tweet::before, .pft-thread-branch:hover::before{ /* подсвечиваем только при наведении на сам branch */ } .pft-tweet[data-depth]:hover::before{ border-color:color-mix(in srgb, var(--accent) 60%, var(--pft-hairline)); } /* «↪ Отвечая @username» — индикатор родителя в каждой вложенной карточке */ .pft-reply-to{ font-size:12.5px; color:var(--text-dim); margin-bottom:2px; display:flex; align-items:center; gap:4px; font-weight:600; } .pft-reply-to a{ color:var(--accent-text,var(--accent)); text-decoration:none; font-weight:700; } .pft-reply-to a:hover{ text-decoration:underline; } .pft-reply-to svg{ width:12px; height:12px; opacity:.6; } .pft-tweet[data-depth="2"] .pft-tweet-avatar, .pft-tweet[data-depth="3"] .pft-tweet-avatar{ width:32px; height:32px; } .pft-tweet[data-depth="4"] .pft-tweet-avatar, .pft-tweet[data-depth="5"] .pft-tweet-avatar, .pft-tweet[data-depth="6"] .pft-tweet-avatar{ width:28px; height:28px; } .pft-tweet[data-depth="2"] .pft-tweet-mod-badge, .pft-tweet[data-depth="3"] .pft-tweet-mod-badge, .pft-tweet[data-depth="4"] .pft-tweet-mod-badge, .pft-tweet[data-depth="5"] .pft-tweet-mod-badge, .pft-tweet[data-depth="6"] .pft-tweet-mod-badge{ width:14px; height:14px; bottom:-1px; right:-1px; border-width:2px; } .pft-tweet[data-depth="2"] .pft-tweet-mod-badge svg, .pft-tweet[data-depth="3"] .pft-tweet-mod-badge svg, .pft-tweet[data-depth="4"] .pft-tweet-mod-badge svg, .pft-tweet[data-depth="5"] .pft-tweet-mod-badge svg, .pft-tweet[data-depth="6"] .pft-tweet-mod-badge svg{ width:7px; height:7px; } .pft-tweet[data-depth="2"] .pft-tweet-head, .pft-tweet[data-depth="3"] .pft-tweet-head, .pft-tweet[data-depth="4"] .pft-tweet-head, .pft-tweet[data-depth="5"] .pft-tweet-head, .pft-tweet[data-depth="6"] .pft-tweet-head{ font-size:14px; margin-bottom:1px; } .pft-tweet[data-depth="2"] .pft-tweet-body{ font-size:14.5px; } .pft-tweet[data-depth="3"] .pft-tweet-body, .pft-tweet[data-depth="4"] .pft-tweet-body, .pft-tweet[data-depth="5"] .pft-tweet-body, .pft-tweet[data-depth="6"] .pft-tweet-body{ font-size:14px; } .pft-tweet[data-depth="2"] .pft-actions, .pft-tweet[data-depth="3"] .pft-actions, .pft-tweet[data-depth="4"] .pft-actions, .pft-tweet[data-depth="5"] .pft-actions, .pft-tweet[data-depth="6"] .pft-actions{ gap:0; } .pft-tweet[data-depth="2"] .pft-act, .pft-tweet[data-depth="3"] .pft-act, .pft-tweet[data-depth="4"] .pft-act, .pft-tweet[data-depth="5"] .pft-act, .pft-tweet[data-depth="6"] .pft-act{ padding:4px 8px; } .pft-tweet[data-depth="2"] .pft-act-icon svg, .pft-tweet[data-depth="3"] .pft-act-icon svg, .pft-tweet[data-depth="4"] .pft-act-icon svg, .pft-tweet[data-depth="5"] .pft-act-icon svg, .pft-tweet[data-depth="6"] .pft-act-icon svg{ width:15px; height:15px; } /* Collapse — branch контейнер скрывается */ .pft-thread-branch.pft-collapsed{ display:none; } /* Кнопка collapse в actions */ .pft-act-collapse.pft-act-collapse{ margin-left:auto; color:var(--text-dim); } .pft-act-collapse.pft-act-collapse:hover{ color:var(--accent-text,var(--accent)); } .pft-act-collapse.pft-act-collapse.is-collapsed{ color:var(--accent-text,var(--accent)); } /* «↳ Показать N ответов» — кнопка-ссылка, появляется когда branch свернут */ .pft-collapse-summary.pft-collapse-summary{ display:none; margin-top:6px; padding:6px 12px; background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--accent-text,var(--accent)); border-radius:14px; font-size:12.5px; font-weight:700; align-items:center; cursor:pointer; font-family:var(--font-ui); border:0; } .pft-collapse-summary.pft-collapse-summary:hover{ background:color-mix(in srgb, var(--accent) 18%, transparent); } .pft-tweet.pft-children-collapsed{ border-bottom-style:solid; } /* ════════════════════════════════════════════════ ПРАВЫЙ SIDEBAR ════════════════════════════════════════════════ */ .pft-aside{ align-self:start; display:flex; flex-direction:column; gap:16px; padding:14px 0 30px; } .pft-aside-search{ background:var(--chip-bg); border:1px solid transparent; border-radius:999px; display:flex; align-items:center; gap:10px; padding:10px 16px; transition: background .14s, border-color .14s; } .pft-aside-search:focus-within{ background:var(--pft-surface); border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); } .pft-aside-search svg{ flex-shrink:0; color:var(--text-dim); width:18px; height:18px; } .pft-aside-search input{ flex:1; min-width:0; background:transparent; border:0; color:var(--text); font-size:14.5px; font-family:var(--font-ui); } /* ═══════ SIDEBAR REDESIGN ═══════ */ .pft-aside-block{ background:linear-gradient(180deg, var(--pft-surface) 0%, color-mix(in srgb, var(--accent) 3%, var(--pft-surface)) 100%); border:1px solid var(--pft-hairline); border-radius:20px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.02); } .pft-aside-title{ padding:16px 18px 10px; font-family:var(--font-display); font-size:20px; font-weight:900; color:var(--text); letter-spacing:-.01em; display:flex; align-items:center; gap:8px; } .pft-aside-title::before{ content:""; display:inline-block; width:4px; height:18px; background:var(--accent); border-radius:3px; } .pft-aside-list{ display:flex; flex-direction:column; padding:0 0 6px; } /* Тренды */ .pft-aside-trend{ padding:11px 18px; text-decoration:none; display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:center; transition: background .14s; position:relative; } .pft-aside-trend:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent); } .pft-aside-trend::before{ content:attr(data-rank); font-family:var(--font-display); font-size:22px; font-weight:900; color:var(--accent-text,var(--accent)); line-height:1; width:28px; text-align:center; } .pft-aside-trend-content{ min-width:0; } .pft-aside-trend-label{ font-size:11px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.06em; line-height:1.4; } .pft-aside-trend-tag{ font-size:15.5px; font-weight:900; color:var(--text); line-height:1.25; margin:1px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pft-aside-trend-count{ font-size:12.5px; color:var(--text-dim); font-weight:600; } /* Авторы */ .pft-aside-author{ display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; padding:10px 16px; text-decoration:none; transition: background .14s; } .pft-aside-author:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent); } .pft-aside-author > a{ display:contents; color:inherit; } .pft-aside-author img{ width:42px; height:42px; border-radius:50%; object-fit:cover; background:var(--chip-bg); border:2px solid var(--pft-surface); box-shadow:0 1px 4px rgba(0,0,0,.08); } .pft-aside-author-name{ font-weight:900; color:var(--text); font-size:14px; line-height:1.2; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pft-aside-author-handle{ font-size:13px; color:var(--text-dim); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pft-aside-author-cnt{ font-size:13px; color:var(--accent-text,var(--accent)); font-weight:900; text-align:center; line-height:1.1; background:color-mix(in srgb, var(--accent) 12%, transparent); padding:4px 10px; border-radius:999px; min-width:50px; } .pft-aside-author-cnt small{ display:block; font-size:9px; color:inherit; opacity:.7; font-weight:700; text-transform:uppercase; letter-spacing:.05em; line-height:1; margin-top:1px; } .pft-aside-empty{ padding:18px 22px; color:var(--text-muted); font-size:13.5px; line-height:1.55; text-align:center; } .pft-aside-empty strong{ color:var(--accent-text,var(--accent)); } /* Discover-карточки */ .pft-discover-card{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:center; padding:11px 16px; text-decoration:none; transition: background .14s; } .pft-discover-card:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent); } .pft-discover-icon{ width:40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; } .pft-discover-title{ font-weight:900; color:var(--text); font-size:14.5px; line-height:1.2; } .pft-discover-sub{ font-size:13px; color:var(--text-dim); line-height:1.25; } /* Стать друзьями — авто-renderer */ .pft-aside-author .pft-follow-btn{ margin:0; font-size:11.5px; padding:5px 11px; } .pft-aside-footer{ padding:8px 18px 4px; font-size:12px; color:var(--text-muted); text-align:center; } .pft-aside-footer a{ color:inherit; text-decoration:none; } .pft-aside-footer a:hover{ color:var(--accent-text,var(--accent)); text-decoration:underline; } /* ════════════════════════════════════════════════ EMPTY / LOADING ════════════════════════════════════════════════ */ /* Модификатор поверх .pf-empty (DS-контейнер даёт фон/бордер/типографику) */ .pft-empty{ margin:20px 16px; } .pft-empty h3, .pft-empty p{ margin:0; } .pft-empty-icon{ width:56px; height:56px; color:var(--text-dim); opacity:.5; } .pft-loading{ padding:40px; text-align:center; color:var(--text-dim); font-size:14px; } .pft-loading::before{ content:""; display:inline-block; width:22px; height:22px; border:3px solid var(--pft-hairline); border-top-color:var(--accent); border-radius:50%; animation: pft-spin .7s linear infinite; vertical-align:middle; margin-right:10px; } @keyframes pft-spin{ to{ transform:rotate(360deg); } } .pft-loadmore{ display:flex; justify-content:center; padding:0; } .pft-loadmore button{ width:100%; padding:18px; background:transparent; border:0; color:var(--accent-text,var(--accent)); font-weight:800; font-size:14.5px; cursor:pointer; font-family:var(--font-ui); transition: background .14s; } .pft-loadmore button:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent); } /* ════════════════════════════════════════════════ DROPDOWN / TOAST ════════════════════════════════════════════════ */ .pft-menu-dd{ position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:6px; box-shadow:0 18px 48px rgba(15,23,42,.28), 0 4px 12px rgba(15,23,42,.12); z-index:9999; display:none; min-width:220px; backdrop-filter:none; } [data-theme="dark"] .pft-menu-dd{ background:#1a1a2e; border-color:var(--border-strong); } .pft-menu-dd.open{ display:block; } .pft-menu-dd button{ display:flex; width:100%; align-items:center; gap:12px; padding:10px 14px; background:transparent; border:0; color:var(--text); font-size:14px; font-weight:600; font-family:var(--font-ui); cursor:pointer; border-radius:8px; text-align:left; } .pft-menu-dd button:hover{ background:var(--chip-bg, rgba(0,0,0,.06)); } .pft-menu-dd button svg{ width:16px; height:16px; color:var(--text-muted); flex-shrink:0; } .pft-menu-dd .pft-menu-dangerous{ color:#f87171; } [data-theme="light"] .pft-menu-dd .pft-menu-dangerous{ color:#dc2626; } .pft-menu-dd .pft-menu-dangerous svg{ color:inherit; } .pft-toast{ position:fixed; bottom:32px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--surface, var(--bg-1)); padding:12px 22px; border-radius:999px; z-index:999; font-weight:700; font-size:14px; box-shadow:0 12px 32px rgba(0,0,0,.25); animation: pft-toast-in .2s ease-out; } @keyframes pft-toast-in{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } } /* ════════════════════════════════════════════════ NAV BADGE (уведомления) ════════════════════════════════════════════════ */ .pft-nav-link{ position:relative; } .pft-nav-badge{ position:absolute; top:6px; left:24px; min-width:18px; height:18px; border-radius:9px; background:var(--accent); color:#ffffff; font-size:11px; font-weight:900; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; line-height:1; border:2px solid var(--pft-surface); pointer-events:none; } /* ════════════════════════════════════════════════ SEARCH RESULTS DROPDOWN ════════════════════════════════════════════════ */ .pft-aside-search-wrap{ position:relative; } .pft-search-results{ display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--pft-surface); border:1px solid var(--pft-hairline); border-radius:16px; overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.18); z-index:50; max-height:480px; overflow-y:auto; } .pft-search-result{ display:grid; grid-template-columns:38px 1fr; gap:10px; padding:10px 14px; text-decoration:none; color:var(--text); border-bottom:1px solid var(--pft-hairline); transition: background .12s; } .pft-search-result:last-child{ border-bottom:0; } .pft-search-result:hover{ background:var(--pft-hover-bg); } .pft-search-result img{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--chip-bg); } .pft-search-name{ font-weight:800; font-size:14px; color:var(--text); line-height:1.2; } .pft-search-handle{ color:var(--text-dim); font-size:13px; margin-left:6px; font-weight:500; } .pft-search-snippet{ font-size:13px; color:var(--text-muted); line-height:1.35; margin-top:2px; } .pft-search-empty{ padding:18px; color:var(--text-dim); text-align:center; font-size:13.5px; } /* ════════════════════════════════════════════════ FOLLOW BUTTON (стать друзьями) ════════════════════════════════════════════════ */ .pft-follow-btn{ display:inline-flex; align-items:center; gap:4px; height:auto; font-weight:800; font-size:12px; padding:5px 12px; border-radius:999px; cursor:pointer; transition: background .14s, color .14s; white-space:nowrap; } .pft-follow-btn.pft-follow-btn{ background:transparent; border:1.5px solid var(--accent); color:var(--accent-text,var(--accent)); } .pft-follow-btn.pft-follow-btn:hover{ background:var(--accent); color:#ffffff; } .pft-follow-btn.pft-follow-btn.is-sent{ opacity:.6; cursor:default; border-color:var(--text-dim); color:var(--text-dim); } .pft-follow-btn svg{ width:12px; height:12px; } /* ════════════════════════════════════════════════ QUOTE-TWEET MODAL ════════════════════════════════════════════════ */ .pft-modal-bg{ position:fixed; inset:0; background:rgba(15,23,42,.65); backdrop-filter:blur(4px); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; animation: pft-modal-fade .15s ease-out; } @keyframes pft-modal-fade{ from{ opacity:0 } to{ opacity:1 } } .pft-modal{ background:var(--pft-surface); border-radius:18px; padding:18px 20px; width:100%; max-width:540px; box-shadow:0 24px 60px rgba(0,0,0,.35); } .pft-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .pft-modal-head strong{ font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--text); } .pft-modal-close.pft-modal-close{ width:32px; height:32px; border-radius:50%; background:transparent; border:0; color:var(--text-muted); font-size:22px; line-height:1; cursor:pointer; } .pft-modal-close.pft-modal-close:hover{ background:var(--chip-bg); color:var(--text); } /* Модификатор поверх .pf-textarea */ .pft-modal-input.pft-modal-input{ min-height:100px; font-family:var(--font-ui); font-size:16px; line-height:1.45; box-sizing:border-box; } .pft-modal-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; } .pft-modal-count{ font-size:13px; color:var(--text-dim); font-weight:700; font-variant-numeric:tabular-nums; } /* ════════════════════════════════════════════════ NEW BANNER (X новых твитов) ════════════════════════════════════════════════ */ .pft-new-banner.pft-new-banner{ position:sticky; top:108px; z-index:7; width:100%; padding:10px; background:var(--accent); color:#ffffff; border:0; cursor:pointer; font-weight:800; font-size:14px; font-family:var(--font-ui); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); animation: pft-banner-in .25s ease-out; } @keyframes pft-banner-in{ from{ transform:translateY(-100%); opacity:0; } to{ transform:translateY(0); opacity:1; } } .pft-new-banner.pft-new-banner:hover{ background:var(--accent-hover, var(--accent)); } /* ════════════════════════════════════════════════ NOTIFICATIONS LIST (?view=notif) ════════════════════════════════════════════════ */ .pft-notif-item{ display:grid; grid-template-columns:48px 1fr; gap:14px; padding:14px 18px; border-bottom:1px solid var(--pft-hairline); text-decoration:none; transition: background .12s; } .pft-notif-item:hover{ background:var(--pft-hover-bg); } .pft-notif-item.unread{ background:color-mix(in srgb, var(--accent) 5%, var(--pft-surface)); } .pft-notif-item img{ width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--chip-bg); } .pft-notif-item div{ color:var(--text); font-size:14.5px; line-height:1.45; } .pft-notif-item b{ font-weight:900; color:var(--text); } .pft-notif-time{ font-size:12.5px; color:var(--text-dim); margin-top:2px; } /* ════════════════════════════════════════════════ SETTINGS (?view=settings) ════════════════════════════════════════════════ */ .pft-settings{ padding:24px 22px; } .pft-settings h2{ font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--text); margin:0 0 18px; letter-spacing:.01em; } .pft-setting-row{ padding:14px 0; border-bottom:1px solid var(--pft-hairline); } .pft-setting-row label{ display:flex; align-items:center; gap:10px; cursor:pointer; color:var(--text); font-size:15px; } .pft-setting-row input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--accent); cursor:pointer; } .pft-setting-row select{ margin-left:auto; background:var(--chip-bg); border:1px solid var(--pft-hairline); border-radius:8px; padding:6px 10px; color:var(--text); font-family:var(--font-ui); font-size:14px; } /* ════════════════════════════════════════════════ FRIENDS LIST (view=friends) ════════════════════════════════════════════════ */ .pft-friends-grid{ display:grid; grid-template-columns:1fr; gap:14px; padding:18px; } /* Модификатор поверх .card.card-hover (depth = border-color, без in-flow тени) */ .pft-friend-card{ display:grid; grid-template-columns:80px 1fr; gap:16px; padding:18px; color:var(--text); } .pft-friend-avatar{ width:80px; height:80px; border-radius:50%; object-fit:cover; background:var(--chip-bg); border:3px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.1); } .pft-friend-main{ min-width:0; } .pft-friend-avatar-link{ display:block; line-height:0; } .pft-friend-name{ font-weight:900; color:var(--text); font-size:18px; line-height:1.2; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .pft-friend-name a{ color:var(--text); text-decoration:none; } .pft-friend-name a:hover{ color:var(--accent-text,var(--accent)); } .pft-friend-name .rank{ font-size:10px; padding:2px 8px; border-radius:5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; } .pft-friend-handle{ font-size:14px; color:var(--text-dim); margin:2px 0 10px; } .pft-friend-handle a{ color:inherit; text-decoration:none; } .pft-friend-handle a:hover{ color:var(--accent-text,var(--accent)); } .pft-friend-stats{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; padding:10px 0; border-top:1px solid var(--pft-hairline); border-bottom:1px solid var(--pft-hairline); margin-bottom:8px; } .pft-friend-stat{ text-align:center; display:flex; flex-direction:column; align-items:center; text-decoration:none; padding:6px 4px; border-radius:8px; transition:background .15s, transform .1s; color:inherit; } .pft-friend-stat:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent); transform:translateY(-1px); } .pft-friend-stat:hover b{ color:var(--accent-text,var(--accent)); } .pft-friend-stat b{ font-size:18px; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.1; } .pft-friend-stat span{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; } .pft-friend-meta{ font-size:13px; color:var(--text-dim); } @media(max-width:560px){ .pft-friend-card{ grid-template-columns:60px 1fr; padding:14px; gap:12px; } .pft-friend-avatar{ width:60px; height:60px; } .pft-friend-name{ font-size:16px; } .pft-friend-stats{ grid-template-columns:repeat(3, 1fr); gap:6px; } .pft-friend-stat:nth-child(4),.pft-friend-stat:nth-child(5){ grid-column:span 1; } } /* ════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════ */ @media (max-width:1200px){ .pft-app{ grid-template-columns: 78px minmax(0,1fr) 320px; gap:16px; } .pft-app.pft-app-feed{ grid-template-columns: 72px minmax(0,1fr) 280px; gap:14px; } .pft-nav-brand{ padding:10px; justify-content:center; font-size:0; } .pft-nav-brand .logo{ margin:0; } .pft-nav-link{ justify-content:center; padding:13px 0; font-size:0; } .pft-nav-link .pft-nav-icon{ margin:0; } .pft-nav-link span:not(.pft-nav-icon){ display:none; } .pft-nav-post-btn.pft-nav-post-btn{ font-size:0; padding:14px; margin:14px auto; width:52px; height:52px; line-height:0; position:relative; } .pft-nav-post-btn:not(.is-login)::after{ content:"+"; font-size:26px; font-weight:300; line-height:1; color:#ffffff; } .pft-nav-post-btn.is-login::after{ content:"→"; font-size:22px; font-weight:600; line-height:1; color:#ffffff; } .pft-nav-me{ grid-template-columns:42px; padding:6px; justify-content:center; } .pft-nav-me-name, .pft-nav-me-handle, .pft-nav-me-dots{ display:none; } .pft-nav-badge{ right:8px; } } @media (max-width:980px){ .pft-app{ grid-template-columns:78px minmax(0,1fr); } .pft-app.pft-app-feed{ grid-template-columns:72px minmax(0,1fr); } .pft-aside{ display:none; } } @media (max-width:720px){ .pft-app{ grid-template-columns:1fr; gap:14px; padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); } .pft-app.pft-app-feed{ grid-template-columns:1fr; gap:14px; } .pft-nav{ display:none; } .pft-stream{ border:0; } .pft-tabs{ top:56px; } .pft-thread-back{ top:56px; padding:10px 14px; font-size:15px; } .pft-shell{ padding:0; } .pft-thread-replies-header{ padding:14px 14px 8px; } .pft-tweet[data-depth="2"]{ padding-left:46px; } .pft-tweet[data-depth="3"]{ padding-left:68px; } .pft-tweet[data-depth="4"]{ padding-left:86px; } .pft-tweet[data-depth="5"]{ padding-left:100px; } .pft-tweet[data-depth="6"]{ padding-left:112px; } .pft-tweet[data-depth="2"]::before{ left:42px; width:20px; height:26px; } .pft-tweet[data-depth="3"]::before{ left:62px; width:22px; height:26px; } .pft-tweet[data-depth="4"]::before{ left:84px; width:16px; height:24px; } .pft-tweet[data-depth="5"]::before{ left:100px; width:14px; height:24px; } .pft-tweet[data-depth="6"]::before{ left:114px; width:12px; height:24px; } /* Вертикальная нить branch — координаты под 720 */ .pft-thread-branch::before{ left:42px; } .pft-thread-branch .pft-thread-branch::before{ left:62px; } .pft-thread-branch .pft-thread-branch .pft-thread-branch::before{ left:84px; } .pft-thread-branch .pft-thread-branch .pft-thread-branch .pft-thread-branch::before{ left:100px; } .pft-thread-branch .pft-thread-branch .pft-thread-branch .pft-thread-branch .pft-thread-branch::before{ left:114px; } /* Aside (виджеты Тренды/Топ-авторы) теперь под лентой, а не справа */ .pft-aside{ display:flex; position:static; max-height:none; overflow:visible; padding:6px 14px 20px; gap:14px; top:auto; } .pft-aside-search-wrap{ display:none; } /* у сайта свой глобальный поиск */ .pft-aside-block{ border-radius:16px; } .pft-mobile-nav{ display:flex; } } @media (max-width:520px){ .pft-shell{ padding:0; } .pft-composer{ padding:12px 12px 8px; grid-template-columns:38px 1fr; gap:10px; } .pft-composer-avatar{ width:38px; height:38px; } .pft-composer-input{ font-size:18px; } .pft-composer-bar{ flex-wrap:wrap; gap:2px; } .pft-focus-body{ font-size:18px; } .pft-focus-head{ grid-template-columns:42px 1fr auto; padding:10px 12px; } .pft-focus-avatar{ width:42px; height:42px; } .pft-focus-body{ padding:0 12px 8px; } .pft-focus-meta{ padding:8px 12px; font-size:13px; flex-wrap:wrap; gap:8px; } .pft-focus-actions{ padding:6px 8px; } .pft-head-title h1{ font-size:18px; } .pft-tab{ font-size:14px; padding:12px 14px; } .pft-tb{ width:32px; height:32px; } .pft-submit{ padding:9px 18px; font-size:14px; } /* Вложенные ответы на мобиле — ещё компактнее */ .pft-tweet[data-depth="2"], .pft-tweet[data-depth="3"], .pft-tweet[data-depth="4"], .pft-tweet[data-depth="5"], .pft-tweet[data-depth="6"]{ grid-template-columns:28px 1fr; gap:8px; padding-top:8px; padding-bottom:4px; padding-right:10px; } .pft-tweet[data-depth="2"]{ padding-left:38px; } .pft-tweet[data-depth="3"]{ padding-left:56px; } .pft-tweet[data-depth="4"]{ padding-left:70px; } .pft-tweet[data-depth="5"]{ padding-left:82px; } .pft-tweet[data-depth="6"]{ padding-left:92px; } /* Координаты Г-уголков и вертикальной нити под мобилку */ .pft-tweet[data-depth="2"]::before{ left:31px; width:21px; height:22px; border-bottom-left-radius:10px; } .pft-tweet[data-depth="3"]::before{ left:52px; width:18px; height:22px; border-bottom-left-radius:10px; } .pft-tweet[data-depth="4"]::before{ left:70px; width:14px; height:20px; border-bottom-left-radius:9px; } .pft-tweet[data-depth="5"]::before{ left:84px; width:12px; height:18px; border-bottom-left-radius:8px; } .pft-tweet[data-depth="6"]::before{ left:96px; width:10px; height:18px; border-bottom-left-radius:8px; } .pft-thread-branch::before{ left:31px; } .pft-thread-branch .pft-thread-branch::before{ left:52px; } .pft-thread-branch .pft-thread-branch .pft-thread-branch::before{ left:70px; } .pft-thread-branch .pft-thread-branch .pft-thread-branch .pft-thread-branch::before{ left:84px; } .pft-thread-branch .pft-thread-branch .pft-thread-branch .pft-thread-branch .pft-thread-branch::before{ left:96px; } /* «↪ в ответ» — компактнее */ .pft-reply-to{ font-size:11.5px; } .pft-tweet[data-depth="2"] .pft-tweet-avatar, .pft-tweet[data-depth="3"] .pft-tweet-avatar, .pft-tweet[data-depth="4"] .pft-tweet-avatar, .pft-tweet[data-depth="5"] .pft-tweet-avatar, .pft-tweet[data-depth="6"] .pft-tweet-avatar{ width:28px; height:28px; } .pft-tweet[data-depth="2"] .pft-tweet-body, .pft-tweet[data-depth="3"] .pft-tweet-body, .pft-tweet[data-depth="4"] .pft-tweet-body, .pft-tweet[data-depth="5"] .pft-tweet-body, .pft-tweet[data-depth="6"] .pft-tweet-body{ font-size:14px; } .pft-tweet[data-depth="2"] .pft-act-icon svg, .pft-tweet[data-depth="3"] .pft-act-icon svg, .pft-tweet[data-depth="4"] .pft-act-icon svg, .pft-tweet[data-depth="5"] .pft-act-icon svg, .pft-tweet[data-depth="6"] .pft-act-icon svg{ width:14px; height:14px; } /* Thread replies header — больше воздуха */ .pft-thread-replies-header{ padding:12px 12px 6px; font-size:12px; } /* Inline reply — компакт */ .pft-inline-reply{ padding-top:10px; margin-top:8px; } .pft-inline-reply-input{ font-size:14.5px; min-height:48px; } .pft-inline-reply-cancel, .pft-inline-reply-submit{ padding:6px 12px; font-size:12.5px; } /* Aside (если показывается на больших — здесь скрыт; но если кто-то форсит) */ .pft-aside{ display:none; } } /* ════════════════════════════════════════════════ MOBILE BOTTOM NAV (скрыт на десктопе, fixed внизу на ≤720) ════════════════════════════════════════════════ */ .pft-mobile-nav{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--pft-surface); border-top:1px solid var(--pft-hairline); padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px)); gap:2px; justify-content:space-around; align-items:stretch; box-shadow:0 -2px 12px rgba(0,0,0,.06); backdrop-filter:saturate(140%) blur(8px); } [data-theme="dark"] .pft-mobile-nav{ box-shadow:0 -2px 12px rgba(0,0,0,.4); } .pft-mn-link.pft-mn-link{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 2px 4px; color:var(--text-dim); text-decoration:none; font-size:10px; font-weight:700; border-radius:10px; transition: color .14s, background .14s; min-width:0; position:relative; } .pft-mn-link.pft-mn-link:hover, .pft-mn-link.pft-mn-link:active{ color:var(--accent-text,var(--accent)); background:var(--pft-hover-bg); } .pft-mn-icon{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; position:relative; } .pft-mn-icon svg{ width:22px; height:22px; } .pft-mn-label{ font-size:10.5px; line-height:1.1; letter-spacing:.02em; } .pft-mn-badge{ position:absolute; top:-3px; right:-7px; background:var(--accent); color:var(--accent-ink); border-radius:999px; font-size:10px; font-weight:800; min-width:16px; height:16px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; line-height:1; } /* Центральный FAB-Запостить */ .pft-mn-post .pft-mn-icon-fab{ width:42px; height:42px; background:var(--accent); color:var(--accent-ink); border-radius:50%; margin-top:-8px; box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 50%, transparent); } .pft-mn-post .pft-mn-icon-fab svg{ width:22px; height:22px; } .pft-mn-post .pft-mn-label{ display:none; } .pft-mn-post:hover .pft-mn-icon-fab{ filter:brightness(1.06); } /* ════════════════════════════════════════════════ INLINE REPLY (mini-composer под кликнутым твитом) ════════════════════════════════════════════════ */ .pft-inline-reply{ display:grid; grid-template-columns:36px 1fr; gap:10px; margin-top:10px; padding-top:12px; border-top:1px solid var(--pft-hairline); align-items:flex-start; } .pft-inline-reply-avatar{ width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--chip-bg, color-mix(in srgb, var(--text) 8%, transparent)); } .pft-inline-reply-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .pft-inline-reply-body{ display:flex; flex-direction:column; gap:8px; min-width:0; } .pft-inline-reply-input{ min-height:54px; padding:8px 12px; border:1px solid var(--pft-hairline); border-radius:10px; background:transparent; color:var(--text); font-family:var(--font-ui); font-size:15px; line-height:1.4; outline:0; transition:border-color .15s; word-wrap:break-word; overflow-wrap:break-word; } .pft-inline-reply-input:focus{ border-color:var(--accent); } .pft-inline-reply-input:empty::before{ content:attr(data-placeholder); color:var(--text-dim); pointer-events:none; } .pft-inline-reply-foot{ display:flex; align-items:center; gap:10px; } .pft-inline-reply-counter{ font-size:12px; color:var(--text-muted); margin-right:auto; font-variant-numeric:tabular-nums; } .pft-inline-reply-counter.warn{ color:#f59e0b; } .pft-inline-reply-counter.over{ color:#f87171; font-weight:700; } [data-theme="light"] .pft-inline-reply-counter.over{ color:#dc2626; } .pft-inline-reply-buttons{ display:flex; gap:8px; } .pft-inline-reply-cancel.pft-inline-reply-cancel, .pft-inline-reply-submit.pft-inline-reply-submit{ border:0; padding:7px 16px; border-radius:8px; font-size:13px; font-weight:700; font-family:var(--font-ui); cursor:pointer; line-height:1; } .pft-inline-reply-cancel.pft-inline-reply-cancel{ background:transparent; color:var(--text-dim); } .pft-inline-reply-cancel.pft-inline-reply-cancel:hover{ color:var(--text); background:var(--pft-hover-bg); } .pft-inline-reply-submit.pft-inline-reply-submit{ background:var(--accent); color:var(--accent-ink); } .pft-inline-reply-submit:hover:not(:disabled){ filter:brightness(1.08); } .pft-inline-reply-submit:disabled{ opacity:.5; cursor:not-allowed; } .pft-tweet.pft-has-inline-reply{ background:var(--pft-hover-bg); } @media (max-width:520px){ .pft-inline-reply{ grid-template-columns:32px 1fr; gap:8px; } .pft-inline-reply-avatar{ width:32px; height:32px; } .pft-inline-reply-input{ font-size:15px; } }