/* Выпадающее меню кнопки «Настройки» в футере сайдбара (аккаунт-меню). Открывается ВВЕРХ по клику (футер прижат к низу сайдбара). Триггер живёт в тёмном футере (наследует .vetka-static-nav-link), поповер — белая карточка по токенам темы. Тогглится инлайн-скриптом в LayoutVertical.cshtml ([data-vetka-settings]). */ .vetka-settings-menu { position: relative; flex: 1 1 auto; min-width: 0; margin: 2px; } /* Триггер — карточка аккаунта: аватар-инициал, «Имя · Кабинет», шеврон справа. Стиль футера как у Claude Code: в покое сливается с футером (прозрачный, как пункты меню выше), при наведении — СДЕРЖАННАЯ нейтральная подсветка, без синего акцента. Рамка занимает 1px всегда (в покое прозрачная) — иначе её появление на hover сдвигало бы содержимое. Теней нет по правилу проекта (см. память vetka-no-shadows). padding перебиваем !important: у .vetka-static-nav-link он тоже !important. */ .vetka-settings-trigger { width: 100% !important; /* перебиваем .vetka-sidebar-footer-actions .vetka-static-nav-link{width:auto} */ gap: 9px; /* !important: body.vetka-project-shell .vetka-static-nav-link задаёт min-height:42px (спец. 0,2,1), перебивает наш селектор по специфичности — как и с padding ниже */ min-height: 34px !important; padding: 4px 10px !important; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); font: inherit; text-align: left; transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } /* Нейтральный hover: заливка --surface-2 + серая рамка --line-2 (граница блока без синевы). Открытое меню держит то же состояние, чтобы триггер не «прыгал» при открытии поповера. */ .vetka-settings-trigger:hover, .vetka-settings-trigger:focus-visible, .vetka-settings-menu.is-open .vetka-settings-trigger { background: var(--surface-2) !important; border-color: var(--line-2) !important; } /* аватар-инициал: спокойный серый кружок, а не акцентный (акцент остаётся у поповера) */ .vetka-settings-badge { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 10.5px; font-weight: 600; line-height: 1; } /* «Имя · Кабинет» в одну строку: длинное ФИО ужимается, кабинет не рвётся */ .vetka-settings-caption { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 13px; line-height: 1.3; } .vetka-settings-caption-name { min-width: 0; overflow: hidden; color: var(--ink); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .vetka-settings-caption-sep, .vetka-settings-caption-scope { flex: 0 0 auto; color: var(--ink-2); white-space: nowrap; } /* Специфичность 0,2,0 > 0,1,1 у .vetka-static-nav-link i{margin:0 !important} — только так margin-left:auto реально прижимает стрелку к правому краю (при равном !important решает специфичность). */ .vetka-settings-trigger .vetka-settings-caret { margin-left: auto !important; font-size: 14px; opacity: .65; transition: transform .15s ease; } .vetka-settings-menu.is-open .vetka-settings-caret { transform: rotate(180deg); } /* поповер — белая карточка над триггером */ .vetka-settings-pop { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 232px; z-index: 1200; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-family: var(--font-ui); color: var(--ink); animation: vetka-settings-in .14s ease; } .vetka-settings-pop[hidden] { display: none; } /* Поповер вынесен инлайн-скриптом в (сайдбар .left-side-menu имеет overflow:hidden по скруглению + backdrop-filter → и absolute, и fixed-поповер там обрезаются). В body он свободен: позиционируется fixed по триггеру (left/bottom/min-width задаёт JS). */ .vetka-settings-pop--detached { position: fixed; right: auto; z-index: 3000; } @keyframes vetka-settings-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* шапка с пользователем */ .vetka-settings-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .vetka-settings-ava { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; background: linear-gradient(135deg, var(--primary), var(--primary-press)); box-shadow: var(--shadow-sm); } .vetka-settings-id { min-width: 0; } .vetka-settings-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vetka-settings-role { font-size: 12px; color: var(--ink-3); margin-top: 1px; } /* пункты меню */ .vetka-settings-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 13.5px; text-decoration: none; cursor: pointer; transition: background .12s ease, color .12s ease; } .vetka-settings-item:hover { background: var(--surface-2); color: var(--ink); } .vetka-settings-item i { width: 20px; font-size: 17px; text-align: center; color: var(--ink-3); } .vetka-settings-item:hover i { color: var(--primary); } .vetka-settings-item--danger, .vetka-settings-item--danger i { color: var(--danger); } .vetka-settings-item--danger:hover { background: var(--danger-tint); color: var(--danger); } .vetka-settings-sep { height: 1px; margin: 6px 4px; background: var(--line); } /* свёрнутый сайдбар: текст триггера скрыт, но меню открывается; даём поповеру ширину */ body.vetka-sidebar-collapsed .vetka-settings-pop { left: 0; right: auto; min-width: 232px; } /* ── Инлайн-переключение рабочего кабинета в поповере (замена страницы-развилки) ── */ .vetka-settings-cab-h { padding: 8px 10px 4px; color: var(--ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .vetka-settings-cab { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .vetka-settings-cab:hover { background: var(--surface-2); border-color: var(--line); } .vetka-settings-cab.is-active { background: var(--primary-tint); border-color: transparent; cursor: default; } .vetka-settings-cab__ph { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--surface-2); } .vetka-settings-cab.is-active .vetka-settings-cab__ph { background: var(--surface); } .vetka-settings-cab__ph img { width: 86%; height: 86%; object-fit: contain; } .vetka-settings-cab__tx { min-width: 0; flex: 1; } .vetka-settings-cab__t { display: block; font-size: 12px; font-weight: 650; color: var(--ink); line-height: 1.2; } .vetka-settings-cab__d { display: block; margin-top: 1px; font-size: 11px; color: var(--ink-3); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vetka-settings-cab__mark { flex: 0 0 auto; margin-left: auto; font-size: 17px; color: var(--primary); } .vetka-settings-cab__go { flex: 0 0 auto; margin-left: auto; font-size: 18px; color: var(--ink-3); } .vetka-settings-cab:hover .vetka-settings-cab__go { color: var(--primary); }