/* Портфели — стили приложения (.pf-*). Раньше жили инлайном в portfolios.html. С 31.07.2026 портфели переехали в раздел «Активы» трекера, и стили понадобились на другой странице — поэтому файл. Правило то же, что у остальной статики: правишь — бампаешь ?v=N в tracker.html. */ html[data-ui="terminal"] .pf-wrap { max-width: none; margin: 0; padding: 18px 24px 72px; } html[data-ui="terminal"] .site-header .container { max-width: none; } @media (max-width: 760px){ html[data-ui="terminal"] .pf-wrap { padding: 12px 14px 56px; } /* KPI: вместо обрезанной полосы со скрытым скроллом — сетка 2 колонки, видно всё сразу */ html[data-ui="terminal"] .pf-wrap .dt-kpis { display: grid; grid-template-columns: 1fr 1fr; } html[data-ui="terminal"] .pf-wrap .dt-kpi { border-left: none; border-top: 1px solid var(--border-soft); min-width: 0; } html[data-ui="terminal"] .pf-wrap .dt-kpi:nth-child(-n+2) { border-top: none; } html[data-ui="terminal"] .pf-wrap .dt-kpi:nth-child(2n) { border-left: 1px solid var(--border-soft); } html[data-ui="terminal"] .pf-wrap .dt-kpi-l { white-space: normal; } /* Длинные подписи под тикером (дивиденды/купоны) переносим, а не обрезаем */ html[data-ui="terminal"] .pf-wrap .dt-table .dt-cell-sub { white-space: normal; max-width: 230px; } /* Подытог группы на узком экране переносится под название класса */ .pf-grp-sum { gap: 10px; } /* Шапка блока с переключателем «Диаграмма/Таблица» — переносится, а не вылезает */ .pf-card-head { flex-wrap: wrap; } } .pf-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } /* Шапка вкладки «Пассивный доход»: заголовок слева, селектор года справа */ .pf-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .pf-pay-title { font-size: 18px; font-weight: 700; } /* Селектор года — переносится и скроллится, если лет много */ .pf-year-seg { flex-wrap: wrap; } .pf-toolbar .dt-spacer { flex: 1; } .pf-total-big { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 0; } .pf-total-wrap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; } .pf-total-chip { display: inline-flex; align-items: baseline; gap: 8px; } .pf-total-sub { font-size: 13px; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; } #pf-op-list { top: 42px; min-width: 210px; } /* Тикер справа от названия бумаги — мелко и приглушённо */ .pf-tkr { font-size: 11px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Название как кнопка (открывает карточку бумаги) */ .pf-name-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; } .pf-name-btn:hover { color: var(--primary); text-decoration: underline; } /* Карточка бумаги */ .pf-sec-box { max-width: 640px; position: relative; } .pf-sec-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-soft); font-size: 15px; z-index: 2; } @media (max-width: 640px){ .pf-sec-box { max-width: none; min-height: 100vh; border-radius: 0; } .pf-modal { padding: 0; } } .pf-sec-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-right: 34px; margin-bottom: 2px; } .pf-sec-h h3 { font-size: 20px; margin: 0; } .pf-sec-h .pf-tkr { font-size: 13px; } .pf-sec-price { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0 2px; } .pf-sec-chg { font-size: 14px; font-weight: 600; } .pf-sec-seg { display: inline-flex; gap: 4px; margin: 12px 0 8px; } .pf-sec-seg button { padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 999px; cursor: pointer; } .pf-sec-seg button.on { background: var(--primary); color: #fff; border-color: var(--primary); } .pf-sec-chart-wrap { position: relative; } .pf-sec-chart-wrap #pf-sec-chart { width: 100%; height: 220px; } .pf-sec-block { margin-top: 16px; } .pf-sec-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 8px; } .pf-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .pf-kv > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; } .pf-kv .k { color: var(--text-soft); } .pf-kv .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } @media (max-width: 480px){ .pf-kv { grid-template-columns: 1fr; } } .pf-sec-note { font-size: 12px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; } .pf-sec-skel { height: 220px; border-radius: var(--radius-sm); background: linear-gradient(90deg,var(--bg-soft),var(--surface),var(--bg-soft)); background-size: 200% 100%; animation: pf-shimmer 1.2s infinite; } @keyframes pf-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* Чипы быстрого выбора тикера в модалке сделки */ .pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; } .pf-chips[hidden] { display: none; } .pf-chips .pf-chip-lbl { flex: 0 0 100%; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; } .pf-chip { padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: 999px; } .pf-chip:hover { border-color: var(--primary); color: var(--primary); } /* Каждый класс активов — своя карточка со своей таблицей (наборы колонок разные). Шапка группы: слева класс, справа подытог. */ .pf-grp-card + .pf-grp-card { margin-top: 18px; } .pf-grp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-size: 13px; } .pf-grp-name { flex: 1; min-width: 140px; } .pf-grp-sum { display: inline-flex; align-items: baseline; gap: 14px; font-variant-numeric: tabular-nums; } .pf-grp-sum > b { font-size: 14px; } /* Справочная колонка (НКД, дюрация) — тише основных цифр */ .pf-col-soft { color: var(--text-muted); } /* --- «Клетка»: 16 колонок без разделителей читаются как каша --- */ .pf-grp-card .dt-table th, .pf-grp-card .dt-table td { border-right: 1px solid var(--border-soft); } .pf-grp-card .dt-table th:last-child, .pf-grp-card .dt-table td:last-child { border-right: none; } /* Граница смыслового блока: позиция | показатели класса | итоги. Толще обычной клетки — иначе 16 колонок так и остаются сплошной лентой. */ .pf-grp-card .dt-table .pf-edge { border-right: 2px solid var(--border); } /* --- Первая колонка закреплена --- */ /* Таблица шире экрана, и при горизонтальной прокрутке название бумаги уезжало первым — строка становилась набором цифр без подписи. Прибиваем её слева. Фон обязателен: под sticky-ячейкой едет остальная таблица. */ .pf-grp-card .dt-table .pf-col-name { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 2px solid var(--border); } .pf-grp-card .dt-table thead .pf-col-name { z-index: 3; background: var(--bg-soft); } /* Подсветка строки под закреплённой ячейкой своя — фон перекрывает hover */ .pf-grp-card .dt-table tbody tr:hover .pf-col-name { background: var(--bg-soft); } /* --- Заголовки --- */ /* Заголовок повторяет выравнивание своих значений: над числами — вправо, над названием — влево. Центрированная подпись над колонкой чисел смотрится сдвинутой, а с появлением клетки это стало особенно заметно. */ .pf-grp-card thead th { vertical-align: bottom; } .pf-th { padding: 0; } .pf-sort { display: flex; align-items: baseline; justify-content: flex-start; gap: 4px; width: 100%; padding: 8px 10px; background: none; border: none; cursor: pointer; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; line-height: 1.25; text-align: left; } .pf-th.n .pf-sort { justify-content: flex-end; text-align: right; } .pf-sort:hover { color: var(--primary); } .pf-th--on { color: var(--text); } .pf-th--on .pf-th-t { text-decoration: underline; text-underline-offset: 3px; } /* Место под стрелку резервируем всегда — иначе заголовок дёргается при сортировке */ .pf-sort-a { flex: none; min-width: 8px; font-size: 9px; color: var(--primary); } /* Значок типа купонной ставки облигации */ .pf-rate { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; } .pf-rate--fix { color: var(--text-soft); background: var(--bg-soft); } /* Янтарный берём явными значениями: var(--warn) слишком светлый для мелкого текста на белом, а в тёмной теме наоборот нужен светлее. */ .pf-rate--float { color: #B45309; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.42); } html[data-theme="dark"] .pf-rate--float { color: #FBBF24; background: rgba(245,158,11,.14); } .pf-bar { display: block; height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; } .pf-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--primary); } /* Шапка сворачиваемого блока */ .pf-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; } .pf-collapse { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--text); } .pf-collapse:hover { color: var(--primary); } .pf-caret { display: inline-block; font-size: 11px; color: var(--text-muted); transition: transform .15s; } .pf-caret.closed { transform: rotate(-90deg); } .pf-seg--sm button { padding: 4px 10px; font-size: 12px; } /* Диаграмма выплат */ .pf-chart-wrap { position: relative; } .pf-chart-wrap canvas { width: 100%; height: 190px; display: block; } .pf-tip { position: absolute; top: 0; z-index: 5; pointer-events: none; min-width: 150px; background: var(--surface); border: var(--card-border); border-radius: var(--radius-sm); box-shadow: var(--pop-shadow); padding: 8px 10px; font-size: 12px; } .pf-tip[hidden] { display: none; } .pf-dash-2 { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 12px; margin-bottom: 12px; } @media (max-width: 900px){ .pf-dash-2 { grid-template-columns: 1fr; } } .pf-donut-row { display: flex; gap: 16px; align-items: center; } .pf-donut-row canvas { width: 150px; height: 150px; flex: none; } .pf-legend { flex: 1; min-width: 0; } /* Кнопка «назад к списку». Это