/* ============================================================ FOMO&TEMA · App Shell — единый каркас платформы ------------------------------------------------------------ Источник: memory/strategies/STRATEGY_ECOSYSTEM.md Часть 16.2 memory/project/project_unified_cockpit.md раздел 2 Grid layout: [topbar] [sidebar | main | right-panel] Темы: data-theme="dark"|"light"|"contrast" Акцент: data-accent="green"|"blue"|"purple"|"orange"|"cyan" Плотность: data-density="compact"|"normal"|"spacious" ============================================================ */ /* ───────────────────────────────────────────────────────── CSS-переменные: общие для всего App Shell ───────────────────────────────────────────────────────── */ :root { /* Layout */ --sh-topbar-h: 52px; --sh-sidebar-w: 260px; --sh-sidebar-w-collapsed: 68px; --sh-right-w: 260px; --sh-right-w-collapsed: 0px; /* панель полностью скрывается; видна только кнопка-язычок toggle, торчащая в main */ --sh-transition: .28s cubic-bezier(.4, 0, .2, 1); --sh-radius: 8px; /* Типографика */ --sh-font-base: 'Inter', 'Urbanist', system-ui, -apple-system, sans-serif; --sh-font-numeric: 'Inter Tight', 'JetBrains Mono', ui-monospace, monospace; /* Z-index шкала */ --sh-z-topbar: 200; --sh-z-sidebar: 190; --sh-z-right-panel: 180; --sh-z-boundary: 201; --sh-z-dropdown: 1000; --sh-z-modal: 9000; --sh-z-toast: 9500; } /* Плотность интерфейса */ [data-density="compact"] { --sh-row-h: 28px; --sh-gap: 8px; --sh-pad: 10px; } [data-density="normal"], :root:not([data-density]) { --sh-row-h: 36px; --sh-gap: 12px; --sh-pad: 14px; } [data-density="spacious"] { --sh-row-h: 44px; --sh-gap: 16px; --sh-pad: 18px; } /* Акценты (используют общую --accent из старой темы, если задана, иначе своё) */ :root:not([data-accent]) { --sh-accent: var(--green, #00ff88); } [data-accent="green"] { --sh-accent: #00ff88; } [data-accent="blue"] { --sh-accent: #3b82f6; } [data-accent="purple"] { --sh-accent: #a855f7; } [data-accent="orange"] { --sh-accent: #f97316; } [data-accent="cyan"] { --sh-accent: #06b6d4; } /* ───────────────────────────────────────────────────────── Shell root: grid-layout 12px rail, адаптив ───────────────────────────────────────────────────────── */ html, body { height: 100%; margin: 0; } body.ft-shell { display: block; /* сбрасываем любой flex/grid от страничного CSS */ font-family: var(--sh-font-base); background: var(--bg, #0a0a0a); color: var(--text, #e5e5e5); overflow: hidden; /* скроллы — внутри регионов */ } .ft-shell-root { display: grid; height: 100vh; grid-template-columns: var(--sh-sidebar-w) 1fr var(--sh-right-w); grid-template-rows: var(--sh-topbar-h) 1fr; grid-template-areas: "topbar topbar topbar" "sidebar main rightpanel"; transition: grid-template-columns var(--sh-transition); } /* Подавить transition при инициализации — иначе правая панель анимируется при каждой загрузке */ .ft-shell-root[data-initializing] { transition: none !important; } /* Pre-init: состояние панелей из localStorage до того как JS запустился. Атрибуты на ставит инлайн-скрипт в синхронно. HTML по умолчанию: data-right-collapsed="0" (открыто) — CSS-дефолт показывает 260px. Инлайн-скрипт ставит data-right-init="1" когда панель была закрыта, CSS скрывает её. После rAF JS убирает data-right-init — правила ниже перестают работать, управление передаётся data-right-collapsed на .ft-shell-root. */ html[data-side-init="1"] .ft-shell-root { grid-template-columns: var(--sh-sidebar-w-collapsed) 1fr var(--sh-right-w); } html[data-right-init="1"] .ft-shell-root { grid-template-columns: var(--sh-sidebar-w) 1fr 0px; } html[data-side-init="1"][data-right-init="1"] .ft-shell-root { grid-template-columns: var(--sh-sidebar-w-collapsed) 1fr 0px; } .ft-shell-root[data-sidebar-collapsed="1"] { grid-template-columns: var(--sh-sidebar-w-collapsed) 1fr var(--sh-right-w); } .ft-shell-root[data-right-collapsed="1"] { grid-template-columns: var(--sh-sidebar-w) 1fr var(--sh-right-w-collapsed); } .ft-shell-root[data-sidebar-collapsed="1"][data-right-collapsed="1"] { grid-template-columns: var(--sh-sidebar-w-collapsed) 1fr var(--sh-right-w-collapsed); } .ft-shell-topbar { grid-area: topbar; z-index: var(--sh-z-topbar); } .ft-shell-side { grid-area: sidebar; z-index: var(--sh-z-sidebar); } .ft-shell-main { grid-area: main; overflow: auto; position: relative; } .ft-shell-right { grid-area: rightpanel; z-index: var(--sh-z-right-panel); } /* ───────────────────────────────────────────────────────── Topbar ───────────────────────────────────────────────────────── */ .ft-shell-topbar { display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--bg2, #141414); border-bottom: 1px solid var(--border, #2a2a2a); min-height: var(--sh-topbar-h); } /* ───────────────────────────────────────────────────────── Sidebar container ───────────────────────────────────────────────────────── */ .ft-shell-side { background: var(--bg2, #141414); border-right: 1px solid var(--border, #2a2a2a); overflow: hidden; position: relative; display: flex; flex-direction: column; } /* Кнопка-граница «свернуть по центру» */ .ft-shell-sidebar-toggle { position: absolute; top: 50%; right: -12px; transform: translateY(-50%); width: 24px; height: 48px; background: var(--bg2, #141414); border: 1px solid var(--border, #2a2a2a); border-left: none; border-radius: 0 var(--sh-radius) var(--sh-radius) 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted, #808080); font-size: 11px; transition: background .15s, color .15s, right var(--sh-transition); z-index: var(--sh-z-boundary); padding: 0; } .ft-shell-sidebar-toggle { font-size: 13px; } .ft-shell-sidebar-toggle:hover { background: var(--bg3, #1a1a1a); color: var(--sh-accent); } /* ───────────────────────────────────────────────────────── Main content area ───────────────────────────────────────────────────────── */ .ft-shell-main { background: var(--bg, #0a0a0a); padding: var(--sh-pad, 14px); } /* Route container */ .ft-shell-route { min-height: calc(100% - 4px); display: block; opacity: 1; transition: opacity .18s ease; } .ft-shell-route[data-loading="1"] { opacity: .45; pointer-events: none; } /* ───────────────────────────────────────────────────────── Right panel ───────────────────────────────────────────────────────── */ .ft-shell-right { background: var(--bg2, #141414); border-left: 1px solid var(--border, #2a2a2a); display: flex; flex-direction: column; /* overflow hidden — зеркально левому sidebar: кнопка toggle (-12px) тоже частично обрезается, чтобы выглядеть одинаковой полоской-язычком. */ overflow: hidden; position: relative; } /* Свёрнутая правая панель — ширина 0, видна только кнопка-язычок toggle. Тело и табы скрыты, панель не занимает места в сетке; overflow:visible — чтобы абсолютная кнопка на left:-12px торчала в main-область. */ .ft-shell-root[data-right-collapsed="1"] .ft-shell-right { overflow: visible !important; border-left: none; } .ft-shell-root[data-right-collapsed="1"] .ft-shell-right .ft-rp-tabs, .ft-shell-root[data-right-collapsed="1"] .ft-shell-right .ft-rp-body, .ft-shell-root[data-right-collapsed="1"] .ft-shell-right .ft-rp-header-text { display: none !important; } /* Кнопка свернуть правую панель */ .ft-shell-right-toggle { position: absolute; top: 50%; left: -12px; transform: translateY(-50%); width: 24px; height: 48px; background: var(--bg2, #141414); border: 1px solid var(--border, #2a2a2a); border-right: none; border-radius: var(--sh-radius) 0 0 var(--sh-radius); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted, #808080); font-size: 11px; transition: background .15s, color .15s; z-index: var(--sh-z-boundary); padding: 0; } .ft-shell-right-toggle { font-size: 13px; } .ft-shell-right-toggle:hover { background: var(--bg3, #1a1a1a); color: var(--sh-accent); } /* ───────────────────────────────────────────────────────── Адаптив ───────────────────────────────────────────────────────── */ /* 1024–1440 — правая панель по кнопке (не занимает сетку постоянно) */ @media (max-width: 1440px) { .ft-shell-root:not([data-right-collapsed="1"]) { grid-template-columns: var(--sh-sidebar-w) 1fr var(--sh-right-w); } .ft-shell-root[data-sidebar-collapsed="1"]:not([data-right-collapsed="1"]) { grid-template-columns: var(--sh-sidebar-w-collapsed) 1fr var(--sh-right-w); } } /* 768–1024 — sidebar оверлеем (перекрываем все collapsed-состояния) */ @media (max-width: 1024px) { /* Sidebar всегда 0 в сетке — он показывается через position:fixed */ .ft-shell-root, .ft-shell-root[data-sidebar-collapsed="1"], .ft-shell-root[data-sidebar-collapsed="0"] { grid-template-columns: 0 1fr var(--sh-right-w); } .ft-shell-root[data-right-collapsed="1"], .ft-shell-root[data-sidebar-collapsed="1"][data-right-collapsed="1"], .ft-shell-root[data-sidebar-collapsed="0"][data-right-collapsed="1"] { grid-template-columns: 0 1fr 0; } .ft-shell-side { position: fixed; top: var(--sh-topbar-h); bottom: 0; left: 0; width: var(--sh-sidebar-w); transform: translateX(-100%); transition: transform var(--sh-transition); box-shadow: 0 0 24px rgba(0,0,0,.4); } .ft-shell-root[data-mobile-sidebar="1"] .ft-shell-side { transform: translateX(0); } /* Backdrop — затемнение позади открытого мобильного sidebar */ .ft-shell-root[data-mobile-sidebar="1"]::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: calc(var(--sh-z-sidebar) - 1); cursor: pointer; } .ft-shell-sidebar-toggle { display: none; } } /* <768 — полная мобильная */ @media (max-width: 768px) { /* !important — единственный способ перебить высокоспецифичные base-правила для collapsed-комбинаций */ .ft-shell-root, .ft-shell-root[data-sidebar-collapsed="1"], .ft-shell-root[data-sidebar-collapsed="0"], .ft-shell-root[data-right-collapsed="1"], .ft-shell-root[data-sidebar-collapsed="1"][data-right-collapsed="1"], .ft-shell-root[data-sidebar-collapsed="0"][data-right-collapsed="1"] { grid-template-columns: 1fr !important; grid-template-areas: "topbar" "main" !important; } /* Sidebar скрыт по умолчанию; показывается только как overlay */ .ft-shell-side { display: none !important; } .ft-shell-root[data-mobile-sidebar="1"] .ft-shell-side { display: flex !important; position: fixed !important; top: var(--sh-topbar-h); bottom: 0; left: 0; width: var(--sh-sidebar-w); z-index: var(--sh-z-sidebar); transform: none !important; } .ft-shell-right { display: none !important; } .ft-shell-main { padding: 10px; overflow-x: hidden; } } /* ───────────────────────────────────────────────────────── Scrollbars ───────────────────────────────────────────────────────── */ .ft-shell-side, .ft-shell-right, .ft-shell-main { scrollbar-width: thin; scrollbar-color: var(--border, #2a2a2a) transparent; } .ft-shell-side::-webkit-scrollbar, .ft-shell-right::-webkit-scrollbar, .ft-shell-main::-webkit-scrollbar { width: 6px; height: 6px; } .ft-shell-side::-webkit-scrollbar-thumb, .ft-shell-right::-webkit-scrollbar-thumb, .ft-shell-main::-webkit-scrollbar-thumb { background: var(--border, #2a2a2a); border-radius: 3px; } .ft-shell-side::-webkit-scrollbar-thumb:hover, .ft-shell-right::-webkit-scrollbar-thumb:hover, .ft-shell-main::-webkit-scrollbar-thumb:hover { background: var(--muted, #808080); } /* ───────────────────────────────────────────────────────── Skeleton / loader ───────────────────────────────────────────────────────── */ .ft-shell-skeleton { padding: 32px; text-align: center; color: var(--muted, #808080); font-size: 13px; } .ft-shell-skeleton::before { content: ''; display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border, #2a2a2a); border-top-color: var(--sh-accent); border-radius: 50%; animation: ft-sh-spin .7s linear infinite; vertical-align: middle; margin-right: 10px; } @keyframes ft-sh-spin { to { transform: rotate(360deg); } } /* ───────────────────────────────────────────────────────── FOUC: первичный рендер без shell ───────────────────────────────────────────────────────── */ .ft-shell-loading .ft-shell-root > * { visibility: hidden; } .ft-shell-loading::after { content: ''; position: fixed; inset: 0; background: var(--bg, #0a0a0a); z-index: 999999; animation: ft-sh-fadeout .3s ease .5s forwards; } @keyframes ft-sh-fadeout { to { opacity: 0; visibility: hidden; } }