/** * app-shell.css — каркас застосунку: сайдбар ліворуч, робота посередині, * місце під агента праворуч. * * Так влаштовані Attio, Linear і Notion: оболонка одна на весь застосунок, * змінюється лише середина. Це дає дві речі, яких немає при навігації * зверху: сталість (людина завжди бачить, де вона) і місце, куди рости — * розділів у списку може стати п'ятнадцять без переверстки. * * Чому підписаний сайдбар, а не рейка з іконок: рейка працює там, де * розділів мало й користувач професійний (VS Code, Slack). Тут аудиторія * неоднорідна, а сторінок планується багато — голі іконки без підписів * означали б, що половину з них ніхто не впізнає. Згорнути можна, але це * вибір користувача, а не стан за замовчуванням. * * Виняток — карта: там горизонталь дорога (панелі забирають 320-380 px), * тож на ній сайдбар починає згорнутим. Розгортається одним кліком. * * Підключається посторінково: . Сторінки переїжджають * по одній, а не всі в один день. */ /* ── Смуги прокрутки ────────────────────────────────────────────────────── */ /* Одним правилом на весь каркас, а не в кожному прокручуваному блоці: таких блоків на карті вже одинадцять, і кожен новий інакше знову вилазив би системною сірою смугою. scrollbar-color успадковується, тож досить поставити його на body; scrollbar-width — ні, тому зірочка. */ body[data-app-shell] { scrollbar-color: var(--scrollbar-thumb) transparent; } body[data-app-shell] * { scrollbar-width: thin; } /* Safari до scrollbar-color не має, для нього — старі псевдоелементи. Chrome при заданому scrollbar-color їх ігнорує, тож конфлікту немає. */ @supports not (scrollbar-color: auto) { body[data-app-shell] ::-webkit-scrollbar { width: 8px; height: 8px; } body[data-app-shell] ::-webkit-scrollbar-track { background: transparent; } body[data-app-shell] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } body[data-app-shell] ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); } } /* ── Каркас ─────────────────────────────────────────────────────────────── */ body[data-app-shell] { padding-left: var(--sidebar-width); transition: padding-left var(--duration-2) var(--ease-out); } body[data-app-shell].shell-collapsed { padding-left: var(--sidebar-collapsed); } /* Сторінки з власним fixed-каркасом (карта) рахують позиції від краю вікна, тож зсуваємо не padding-ом, а змінною, яку вони підставляють самі */ body[data-app-shell] { --shell-offset: var(--sidebar-width); } body[data-app-shell].shell-collapsed { --shell-offset: var(--sidebar-collapsed); } /* ── Сайдбар ────────────────────────────────────────────────────────────── */ .shell-nav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); z-index: var(--z-topbar); display: flex; flex-direction: column; background: var(--color-surface); border-right: 1px solid var(--color-outline-subtle); transition: width var(--duration-2) var(--ease-out); overflow: hidden; } .shell-collapsed .shell-nav { width: var(--sidebar-collapsed); } /* ── Шапка: знак і згортання ────────────────────────────────────────────── */ .shell-head { display: flex; align-items: center; gap: var(--space-2); height: var(--topbar-height); padding: 0 var(--space-3); flex-shrink: 0; } .shell-logo { display: flex; align-items: center; gap: var(--space-2); min-width: 0; text-decoration: none; color: var(--color-text); } /* Знак бренду живе в css/base.css — він потрібен і сторінкам без каркаса */ /* Згорнутий сайдбар: іконка застосунку замість логотипа з написом */ .shell-logo-icon { display: none; width: 28px; height: 28px; flex-shrink: 0; } .shell-logo-icon svg { width: 100%; height: 100%; display: block; } .shell-logo-icon .pin-body { fill: var(--brand-amber); } .shell-logo-icon .pin-hole { fill: var(--color-surface); } .shell-collapse { margin-left: auto; width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: var(--radius-xs); color: var(--color-text-muted); cursor: pointer; transition: background var(--duration-1) var(--ease-in-out); } .shell-collapse:hover { background: var(--color-surface-variant); color: var(--color-text); } .shell-collapse .material-icons-round { font-size: var(--icon-lg); } /* ── Пошук / командна палітра ───────────────────────────────────────────── */ .shell-search { display: flex; align-items: center; gap: var(--space-2); height: 32px; margin: 0 var(--space-3) var(--space-3); padding: 0 var(--space-2); border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface-container); color: var(--color-text-muted); font-size: var(--text-base); font-family: var(--font-family); cursor: pointer; flex-shrink: 0; } .shell-search:hover { border-color: var(--color-primary); color: var(--color-text-secondary); } .shell-search .material-icons-round { font-size: var(--icon-sm); flex-shrink: 0; } .shell-search-key { margin-left: auto; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-outline-subtle); border-radius: var(--radius-xs); padding: 1px 5px; white-space: nowrap; } /* ── Групи й пункти ─────────────────────────────────────────────────────── */ .shell-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: var(--space-2); } .shell-group + .shell-group { margin-top: var(--space-4); } .shell-group-title { padding: 0 var(--space-4) var(--space-1); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; } .shell-item { display: flex; align-items: center; gap: var(--space-3); height: var(--row-height); margin: 0 var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: var(--text-md); text-decoration: none; white-space: nowrap; transition: background var(--duration-1) var(--ease-in-out), color var(--duration-1) var(--ease-in-out); } .shell-item:hover { background: var(--color-surface-variant); color: var(--color-text); text-decoration: none; } .shell-item .material-icons-round { font-size: var(--icon-lg); flex-shrink: 0; color: var(--color-text-muted); } .shell-item--active { background: var(--color-primary-50); color: var(--color-primary-text); font-weight: var(--font-semibold); } .shell-item--active .material-icons-round { color: var(--color-primary-text); } .shell-item:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Вмикач теми — така сама форма, як пункти меню, бо він серед них */ .shell-theme { width: calc(100% - var(--space-4)); cursor: pointer; border: none; background: none; font-family: var(--font-family); text-align: left; } /* ── Низ: сповіщення, налаштування, профіль ─────────────────────────────── */ /* Хто увійшов і вихід — останній рядок низу */ .shell-user { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) var(--space-2) 0; padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-container); min-width: 0; } .shell-user-id { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; } .shell-logout { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; } .shell-logout:hover { background: var(--color-error-50); color: var(--color-error-500); } .shell-logout:focus-visible { outline: none; box-shadow: var(--focus-ring); } .shell-avatar { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-sm); font-weight: var(--font-bold); letter-spacing: .02em; } .shell-user-t { display: grid; min-width: 0; line-height: 1.25; } .shell-user-name, .shell-user-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-user-name { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--color-text); } .shell-user-mail { font-size: var(--text-sm); color: var(--color-text-muted); } .shell-foot { flex-shrink: 0; padding-top: var(--space-2); border-top: 1px solid var(--color-outline-subtle); } .shell-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-error); color: var(--color-on-error); font-size: var(--text-xs); font-weight: var(--font-bold); line-height: 18px; text-align: center; } /* ── Згорнутий стан ─────────────────────────────────────────────────────── */ /* Згорнутий — кружечок з ініціалами (хто це — у підказці), під ним вихід */ .shell-collapsed .shell-user { flex-direction: column; background: none; padding: var(--space-1) 0; gap: var(--space-1); } .shell-collapsed .shell-user-id { justify-content: center; flex: none; } .shell-collapsed .shell-group-title, .shell-collapsed .shell-item-label, .shell-collapsed .shell-user-t, .shell-collapsed .shell-search-key, .shell-collapsed .shell-search span:not(.material-icons-round) { display: none; } .shell-collapsed .shell-item { justify-content: center; padding: 0; gap: 0; } .shell-collapsed .shell-search { justify-content: center; padding: 0; } /* Згорнутий: замість логотипа з написом — іконка застосунку. Іконка і шеврон ділять одне місце, а не туляться поруч: у 56 px їх двоє стояло впритул, і шеврон заважав потрапити по знаку бренду. Наводиш на шапку — знак поступається шевроном, бо саме його зараз і шукають. */ .shell-collapsed .shell-head { padding: 0; justify-content: center; position: relative; } .shell-collapsed .brand-mark { display: none; } .shell-collapsed .shell-logo-icon { display: block; } .shell-collapsed .shell-logo { display: flex; } .shell-collapsed .shell-collapse { margin-left: 0; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .15s ease; background: var(--color-surface); } .shell-collapsed .shell-head:hover .shell-collapse, .shell-collapsed .shell-collapse:focus-visible { opacity: 1; } /* Підпис спливає збоку — щоб згорнутий стан не перетворювався на ребус */ .shell-collapsed .shell-item { position: relative; } .shell-collapsed .shell-item:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 4px var(--space-2); border-radius: var(--radius-xs); background: var(--color-text); color: var(--color-surface); font-size: var(--text-base); font-weight: var(--font-regular); white-space: nowrap; z-index: var(--z-modal); box-shadow: var(--shadow-2); } /* ── Місце під агента ───────────────────────────────────────────────────── */ /* Третя колонка навмисно передбачена зараз, хоч і порожня: додати її потім означало б перекроїти кожен екран удруге. */ .shell-agent { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: var(--z-overlay); display: none; flex-direction: column; background: var(--color-surface); border-left: 1px solid var(--color-outline-subtle); } body[data-app-shell].shell-agent-open .shell-agent { display: flex; } body[data-app-shell].shell-agent-open { padding-right: 380px; } /* ── Командна палітра ───────────────────────────────────────────────────── */ .shell-palette { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; background: rgba(15, 20, 17, .45); } .shell-palette--open { display: flex; } .shell-palette-box { width: min(560px, calc(100vw - 32px)); max-height: 60vh; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-outline); border-radius: var(--radius-md); box-shadow: var(--shadow-4); overflow: hidden; animation: shell-pop var(--duration-2) var(--ease-out); } @keyframes shell-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } } .shell-palette-input { height: 48px; padding: 0 var(--space-4); border: none; border-bottom: 1px solid var(--color-outline-subtle); background: transparent; color: var(--color-text); font-size: var(--text-lg); font-family: var(--font-family); outline: none; } .shell-palette-input::placeholder { color: var(--color-text-muted); } .shell-palette-list { overflow-y: auto; padding: var(--space-1); } .shell-palette-item { display: flex; align-items: center; gap: var(--space-3); height: var(--row-height); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-md); cursor: pointer; } .shell-palette-item .material-icons-round { font-size: var(--icon-lg); color: var(--color-text-muted); } .shell-palette-item--on { background: var(--color-primary-50); } .shell-palette-item--on .material-icons-round { color: var(--color-primary-text); } .shell-palette-hint { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); } .shell-palette-empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); font-size: var(--text-base); } /* ── Мобільний ──────────────────────────────────────────────────────────── */ /* На телефоні навігацію вже несе bottom-nav — другий набір тих самих посилань був би шумом, тому сайдбар просто зникає. */ @media (max-width: 768px) { body[data-app-shell], body[data-app-shell].shell-collapsed { padding-left: 0; --shell-offset: 0px; } .shell-nav { display: none; } body[data-app-shell].shell-agent-open { padding-right: 0; } .shell-agent { width: 100%; } } @media (prefers-reduced-motion: reduce) { body[data-app-shell], .shell-nav, .shell-item, .shell-palette-box { transition: none !important; animation: none !important; } }