/* Extracted from /styles/compat/legacy.css (Stage 13) Перенос 1-в-1: только глобальные overrides Bootstrap компонентов. */ /* Переопределяем фон для контейнеров, чтобы не было белого */ .container { background-color: transparent !important; } /* ================================ Базовые принципы ================================ */ html, body{ background:var(--bs-body-bg); color:var(--bs-body-color); } html{ scroll-behavior:smooth; } /* Prevent background scroll when any modal/sheet is open. Bootstrap toggles `body.modal-open`; we also mirror it to `` for cases where the scroll container is the root element. */ html.modal-open, body.modal-open{ overflow: hidden !important; overscroll-behavior: none; } /* Едва заметные деликатные линии */ hr, .divider{ border:0; border-top:1px solid var(--line); } /* ================================ Кнопки (как в демо — пилюли с тенями) ================================ */ .btn { border-radius: var(--fx-radius-pill); font-weight: 600; padding: 0.65rem 1.25rem; } .btn-primary { /* Use Bootstrap button variables fed from tokens */ --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); /* Ensure readable foreground on primary buttons — force white text for contrast */ --bs-btn-color: var(--fx-card); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 90%, white); /* Make hover text on primary (orange) buttons readable — use standard body color */ --bs-btn-hover-color: var(--bs-body-bg); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black); --bs-btn-active-border-color: var(--bs-primary); /* Добавляем тень как в демо */ box-shadow: 0 3px 8px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08); } .btn-primary:hover { box-shadow: 0 4px 12px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1); } /* Outline / secondary buttons: drive colors through variables */ .btn-outline-secondary { --bs-btn-color: var(--fx-muted); --bs-btn-border-color: var(--fx-border); --bs-btn-hover-bg: color-mix(in srgb, var(--fx-card), black 3%); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--fx-border); background: var(--surface); } /* ================================ Навбар (ровная полоса, токены темы) Сделано theme-aware: навбар цвета берёт из Bootstrap / project tokens - не принуждаем тёмную схему здесь; управляйте через токены (--bs-navbar-*) - кнопки и ссылки наследуют переменные (--bs-navbar-color / --bs-navbar-brand-color) ================================ */ .navbar{ /* Фон навбара — управляется токенами (в light/dark они разные). Убираем лишний !important — теперь фон полностью контролируется через токены (`--bs-navbar-*`). */ background: var(--surface); color: var(--bs-navbar-color, var(--bs-body-color)); border-bottom: none; border-radius: 0; padding: .5rem 0; box-shadow: none; } /* Пусть дочерние элементы наследуют цвета из навбара (но не перезаписываем корневой элемент), чтобы темы могли управлять внешним видом через токены. */ .navbar * { color: inherit; } /* Стили для кнопок в шапке (например, «Выйти») — используют navbar токены */ .navbar button { background: transparent; /* без фона */ border: none; /* убираем рамку */ border-radius: 0; /* убираем скругление */ padding: 0 .5rem; /* небольшие отступы по горизонтали */ color: var(--bs-navbar-color, var(--bs-body-color)); font-weight: 600; /* чуть выделяем */ } .navbar button:hover { color: var(--bs-navbar-hover-color, var(--primary-hover)); } .navbar .navbar-brand:hover, .navbar .nav-link:hover, .navbar a:hover { color: var(--bs-navbar-brand-hover-color, var(--bs-navbar-hover-color, var(--bs-navbar-brand-color))); } /* Navbar: pill actions rendered in the top bar (moved from inline in ERB) */ #mainNavbar .navbar-nav { flex-direction: row; align-items: center; } #mainNavbar .nav-item { display: flex; align-items: center; } #mainNavbar .sk-navbar-pill { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); font-size: 0.875rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; } #mainNavbar .sk-navbar-pill:hover { background: color-mix(in srgb, var(--surface), black 3%); color: var(--bs-body-color); } #mainNavbar .sk-navbar-pill:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15); } /* Green button variant for list controls */ .btn-success{ background: color-mix(in srgb, var(--ok), white 92%); border-color: color-mix(in srgb, var(--ok), white 80%); color: color-mix(in srgb, var(--ok), black 12%); } .btn-success:hover{ background: var(--ok); color: var(--fx-card); border-color: var(--ok); } .form-control::placeholder{ color:color-mix(in srgb,var(--muted),white 35%); } .form-control:focus,.form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 .2rem color-mix(in srgb,var(--focus),transparent 65%); } /* Focus-ring utility for thin bottom-border inputs */ .focus-ring:focus{ outline: none; box-shadow: 0 0 0 .18rem color-mix(in srgb,var(--focus),transparent 65%); } /* Make the border-bottom style slightly muted by default */ .form-control.border-bottom{ border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 1px solid color-mix(in srgb, var(--line), black 2%); border-radius: 0 !important; padding-left: 0.25rem; padding-right: 0.25rem; } .form-control.is-invalid,.form-check-input.is-invalid{ border-color:var(--err); box-shadow:0 0 0 .2rem color-mix(in srgb,var(--err),transparent 82%); } .card{ border-color:var(--fx-border); background:var(--fx-card); color:var(--bs-body-color); border-radius:var(--fx-radius); box-shadow:var(--fx-shadow); overflow: hidden; } .modal-content, .offcanvas, .dropdown-menu{ background: var(--fx-card); color: var(--bs-body-color); border-color: var(--fx-border); border-radius: var(--fx-radius); box-shadow: var(--fx-shadow); } .badge-primary, .badge.bg-primary{ background: var(--bs-primary); } /* ================================ Структуры списков/таблиц/строк (hover = фон) ================================ */ .table tr:hover, .list-group-item:hover { /* Keep padding untouched on hover; only apply background if desired. */ background-color: var(--bs-list-group-action-hover-bg, transparent); } /* ================================ Расширенные размеры модалок Bootstrap 5 — проектные токены Добавляем `--bs-modal-width-m` (medium) и переопределяем стандартные значения для удобства: sm, md, lg, xl. Мы используем CSS custom properties чтобы привязать ширины к токенам темы. -------------------------------- */ :root { --bs-modal-width-sm: 400px; --bs-modal-width-m: 600px; --bs-modal-width-lg: 900px; --bs-modal-width-xl: 1100px; } @media (min-width: 576px) { .modal-sm { --bs-modal-width: var(--bs-modal-width-sm); } .modal-md { --bs-modal-width: var(--bs-modal-width-m); } } @media (min-width: 992px) { .modal-lg { --bs-modal-width: var(--bs-modal-width-lg); } .modal-xl { --bs-modal-width: var(--bs-modal-width-xl); } }