/* =========================================================================
sportosphereTheme.css — целевая библиотека для новых стилей проекта,
кроме стилей самой библиотеки инструментов sportosphereTools.js (те
остаются в sportosphereTools.css) — rules.md, п. 5, зафиксировано
2026-08-21. Подключается через Сохранить
Отмена
Цветовые варианты: button--default/--primary/--success/--info/--warning/
--danger. Размеры: button--sm/--lg (без модификатора — базовый размер).
Состояния: обычный `disabled` для , класс `button--disabled` для
/; класс `button--active` — переключённое/выбранное состояние
(аналог Bootstrap `.active`, например текущая страница пагинации).
Эта задача (2026-08-26) — только разработка и документирование класса.
Существующая разметка (~130 шаблонов на `.btn`/`.btn-sportosphere-*` и
JS-инструменты библиотеки) на новый класс не переносится — см.
`sportosphere/docs/known-issues.md`, CSS-4.
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
Раздел: Публичная страница БА (visitsites) — 2026-08-21.
Отказ от классов Bootstrap/theme.min.css в шаблонах
visitsite_page_landing.html и _visitsite_main.html (задача «убрать
Bootstrap с публичной страницы БА»). Значения ниже — точные компьютед-
стили исходной вёрстки (rules.md, п. 7), сняты через Playwright с живой
страницы на всех брейкпоинтах темы (576/768/992/1200/1540 — контейнер
.container-xxl в theme.min.css переключается на 1540px, а не на
стандартные для Bootstrap 1400px).
Классы с префиксом `visitsite-*` — общие для обоих шаблонов.
Классы с префиксом `visitsiteLanding-*` — только visitsite_page_landing.html.
Классы с префиксом `visitsiteMain-*` — только _visitsite_main.html.
------------------------------------------------------------------------- */
/* ---- Общее: контейнер, заголовок раздела, лид-текст, кнопка-CTA, аватар,
круглое изображение — переиспользуются в нескольких секциях лендинга и
в футере (rules.md, п. 5: «исключить указание классов стилей... —
объединить в единую библиотеку», тот же принцип «объединить повторы»,
что в задаче на этот файл). ---- */
.visitsite-container {
position: relative;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.visitsite-container { max-width: 540px; }
}
@media (min-width: 768px) {
.visitsite-container { max-width: 720px; }
}
@media (min-width: 992px) {
.visitsite-container { max-width: 960px; }
}
@media (min-width: 1200px) {
.visitsite-container { max-width: 1140px; }
}
@media (min-width: 1540px) {
.visitsite-container { max-width: 1480px; }
}
/* Вариант контейнера с уменьшенным гаттером (было `.container.g-3.mb-3` —
g-3 задаёт --sportosphere-gutter-x:1rem, отступ = половина гаттера) —
разделы «Тренеры»/«Тренировки». */
.visitsite-container--tight {
position: relative;
width: 100%;
padding-right: .5rem;
padding-left: .5rem;
margin-right: auto;
margin-left: auto;
margin-bottom: 1rem;
}
@media (min-width: 576px) {
.visitsite-container--tight { max-width: 540px; }
}
@media (min-width: 768px) {
.visitsite-container--tight { max-width: 720px; }
}
@media (min-width: 992px) {
.visitsite-container--tight { max-width: 960px; }
}
@media (min-width: 1200px) {
.visitsite-container--tight { max-width: 1140px; }
}
@media (min-width: 1540px) {
.visitsite-container--tight { max-width: 1480px; }
}
/* Заголовок h1 (было `fs-2 fs-sm-4 fs-md-5`) — заголовки секций лендинга
(интро/о нас/тренеры/тренировки) и значения в разделе «Контакты». */
.visitsite-title {
margin-top: 0;
margin-bottom: .5rem;
font-family: var(--sportosphere-font-sans-serif);
font-weight: 500;
line-height: 1.2;
color: var(--sportosphere-heading-color);
font-size: 3.5831808rem;
}
@media (min-width: 576px) {
.visitsite-title { font-size: 2.48832rem; }
}
@media (min-width: 768px) {
.visitsite-title { font-size: 2.0736rem; }
}
/* Лид-параграф (было `.lead`) — подзаголовки секций, текст блоков «О нас»,
текст доп. секций (custom_section). */
.visitsite-lead {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: 400;
}
/* Аватар 98x98 (было `.avatar.avatar-4xl`) — карточки «Интро» и карточки
тренировок (visitCard). */
.visitsite-avatar4xl {
position: relative;
display: inline-block;
height: 6.125rem;
width: 6.125rem;
}
/* Круглое изображение внутри .visitsite-avatar4xl (было `.rounded-circle` на
фото внутри `.avatar` — само заполнение 100%/100% + object-fit давал
`.avatar img` в theme.min.css, не `.rounded-circle`; без него исходный
файл фото рендерился в натуральную величину и распирал раскладку). */
.visitsite-imgCircle {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* Кнопка-CTA «Вся команда»/«Все тренировки» (было
`.btn.btn-lg.btn-sportosphere-default.mt-4`). */
.visitsite-cta {
display: inline-block;
margin-top: 1.8rem;
padding: .375rem 1.25rem;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
border-radius: .375rem;
color: var(--sportosphere-btn-sportosphere-default-color);
background-color: var(--sportosphere-btn-sportosphere-background);
border-color: var(--sportosphere-btn-sportosphere-background);
box-shadow: var(--sportosphere-btn-sportosphere-box-shadow);
transition: color .15s ease-in-out, background-color .15s ease-in-out,
border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.visitsite-cta:hover,
.visitsite-cta:focus {
text-decoration: none;
color: var(--sportosphere-btn-sportosphere-default-hover-color);
}
/* Обёртки кнопки-CTA (было `.d-flex.justify-content-center.mb-2` +
вложенный `.p-2`). */
.visitsite-cta-wrap {
display: flex;
justify-content: center;
margin-bottom: .5rem;
}
.visitsite-cta-innerWrap {
padding: .5rem;
}
/* ---- Баннер (#banner) ---- */
.visitsiteLanding-banner {
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
.visitsiteLanding-banner-bg {
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: center;
overflow: hidden;
background-repeat: no-repeat;
z-index: 0;
}
.visitsiteLanding-banner-bg::before {
position: absolute;
content: "";
background: rgba(0, 0, 0, .25);
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.visitsiteLanding-banner-row {
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
padding-top: 7.5rem;
}
@media (min-width: 992px) {
.visitsiteLanding-banner-row {
padding-top: 12.5rem;
padding-bottom: 12.5rem;
}
}
.visitsiteLanding-banner-textCol {
width: 91.66666667%;
max-width: 100%;
padding-right: 1rem;
padding-left: 1rem;
padding-bottom: 5rem;
text-align: center;
}
@media (min-width: 992px) {
.visitsiteLanding-banner-textCol { width: 66.66666667%; }
}
@media (min-width: 1200px) {
.visitsiteLanding-banner-textCol {
width: 41.66666667%;
padding-bottom: 10rem;
text-align: left;
}
}
.visitsiteLanding-banner-title {
margin-right: .5rem;
margin-bottom: 1rem;
font-weight: 300;
line-height: 1;
font-size: calc(1.554981696rem + 3.659780352vw);
}
@media (min-width: 1200px) {
.visitsiteLanding-banner-title { font-size: 4.29981696rem; }
}
.visitsiteLanding-banner-text {
margin-bottom: 1rem;
font-weight: 900;
line-height: 1;
font-size: calc(1.554981696rem + 3.659780352vw);
}
@media (min-width: 1200px) {
.visitsiteLanding-banner-text { font-size: 4.29981696rem; }
}
.visitsiteLanding-banner-cta {
display: inline-block;
margin-top: 1.8rem;
padding: .5rem 1.25rem;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
vertical-align: middle;
cursor: pointer;
user-select: none;
color: var(--sportosphere-white);
border: 2px solid var(--sportosphere-white);
border-radius: var(--sportosphere-border-radius-pill);
background-color: transparent;
transition: color .15s ease-in-out, background-color .15s ease-in-out,
border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.visitsiteLanding-banner-cta:hover,
.visitsiteLanding-banner-cta:focus {
text-decoration: none;
color: #4d5969;
background-color: var(--sportosphere-white);
border-color: var(--sportosphere-white);
}
.visitsiteLanding-banner-cta-icon {
margin-left: .5rem;
}
.visitsiteLanding-banner-sideCol {
width: 58.33333333%;
margin-left: 8.33333333%;
align-self: flex-end;
margin-top: 1.8rem;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 1200px) {
.visitsiteLanding-banner-sideCol { margin-top: 0; }
}
/* ---- Заголовок секции (интро/о нас/тренеры/тренировки) — было
`.row.justify-content-center.text-center` + `.col-lg-8.col-xl-7.
col-xxl-6`, заголовок/лид внутри — .visitsite-title/.visitsite-lead. ---- */
.visitsiteLanding-headerRow {
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
margin-right: -1rem;
margin-left: -1rem;
}
.visitsiteLanding-headerCol {
width: 100%;
max-width: 100%;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 992px) {
.visitsiteLanding-headerCol { width: 66.66666667%; }
}
@media (min-width: 1200px) {
.visitsiteLanding-headerCol { width: 58.33333333%; }
}
@media (min-width: 1540px) {
.visitsiteLanding-headerCol { width: 50%; }
}
/* ---- Интро (#intro) ---- */
.visitsiteLanding-intro {
background-color: rgba(var(--sportosphere-gray-200-rgb), 1);
text-align: center;
}
.visitsiteLanding-intro-cardsRow {
display: flex;
flex-wrap: wrap;
margin-top: 4rem;
margin-right: -1rem;
margin-left: -1rem;
}
.visitsiteLanding-intro-cardCol {
width: 100%;
max-width: 100%;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 992px) {
.visitsiteLanding-intro-cardCol { width: 33.33333333%; }
}
.visitsiteLanding-intro-cardCol--gap {
margin-top: 4rem;
}
@media (min-width: 992px) {
.visitsiteLanding-intro-cardCol--gap { margin-top: 0; }
}
.visitsiteLanding-intro-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
word-wrap: break-word;
background-color: var(--sportosphere-white);
background-clip: border-box;
border: 0 solid var(--sportosphere-border-color);
border-radius: .375rem;
box-shadow: rgba(65, 69, 88, .1) 0 7px 14px 0, rgba(0, 0, 0, .07) 0 3px 6px 0;
transition: all .4s ease;
}
.visitsiteLanding-intro-card-imgWrap {
position: absolute;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 7rem;
height: 7rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--sportosphere-card-span-img-bg);
box-shadow: var(--sportosphere-card-span-img-box-shadow);
border-radius: 50%;
}
.visitsiteLanding-intro-card:hover .visitsiteLanding-intro-card-imgWrap,
.visitsiteLanding-intro-card:focus .visitsiteLanding-intro-card-imgWrap {
box-shadow: var(--sportosphere-card-span-img-hover-box-shadow);
}
.visitsiteLanding-intro-card-body {
flex: 1 1 auto;
padding: 4rem 1.25rem 1.8rem;
}
.visitsiteLanding-intro-card-title {
margin-top: 0;
margin-bottom: .5rem;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.2;
color: var(--sportosphere-heading-color);
}
/* ---- О нас (about) ---- */
.visitsiteLanding-about {
background-color: rgba(var(--sportosphere-gray-200-rgb), 1);
}
.visitsiteLanding-about-block {
background-color: rgba(var(--sportosphere-gray-200-rgb), 1);
}
.visitsiteLanding-about-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-right: -1rem;
/* margin-bottom: 7.5rem; */
margin-left: -1rem;
}
.visitsiteLanding-about-imgCol {
flex: 1 0 0%;
width: 100%;
max-width: 100%;
padding-right: 1rem;
padding-left: 1rem;
padding-bottom: 3rem;
padding-top: 3rem;
}
@media (min-width: 992px) {
.visitsiteLanding-about-imgCol { flex: 0 0 auto; width: 41.66666667%; }
}
@media (min-width: 1200px) {
.visitsiteLanding-about-imgCol { width: 33.33333333%; }
}
.visitsiteLanding-about-imgCol--reverse {
order: 0;
}
@media (min-width: 768px) {
.visitsiteLanding-about-imgCol--reverse { order: 2; }
}
.visitsiteLanding-about-img {
padding: .25rem;
background-color: var(--sportosphere-white);
border: 3px solid var(--sportosphere-white);
border-radius: var(--sportosphere-border-radius);
box-shadow: var(--sportosphere-box-shadow-sm);
max-width: 100%;
height: auto;
}
.visitsiteLanding-about-textCol {
flex: 1 0 0%;
width: 100%;
max-width: 100%;
margin-top: 1.8rem;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 768px) {
.visitsiteLanding-about-textCol { margin-top: 0; }
}
@media (min-width: 992px) {
.visitsiteLanding-about-textCol { flex: 0 0 auto; width: 41.66666667%; }
}
@media (min-width: 1200px) {
.visitsiteLanding-about-textCol { width: 33.33333333%; }
}
.visitsiteLanding-about-block-title {
margin-top: 0;
margin-bottom: .5rem;
font-family: var(--sportosphere-font-sans-serif);
font-weight: 500;
line-height: 1.2;
color: var(--sportosphere-heading-color);
font-size: calc(1.373832rem + 1.485984vw);
}
@media (min-width: 1200px) {
.visitsiteLanding-about-block-title { font-size: 2.48832rem; }
}
/* ---- Доп. секции конструктора (custom_section_after_{about,coach,training}) —
было голый `` + `.container` + `p.lead` (последний переиспользует
.visitsite-lead). ---- */
.visitsiteLanding-customSection {
position: relative;
}
/* ---- Тренеры (#section-coaches) ---- */
.visitsiteLanding-coach {
background-color: rgba(var(--sportosphere-light-rgb), 1);
text-align: center;
}
.visitsiteLanding-coach-cardsRow {
display: flex;
flex-wrap: wrap;
margin-top: 4rem;
margin-right: -1rem;
margin-left: -1rem;
}
/* cssClass карточки в конфиге smartView (было `col-lg-4 col-xl-3`). */
.visitsiteLanding-coach-cardCol {
width: 100%;
max-width: 100%;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 992px) {
.visitsiteLanding-coach-cardCol { width: 33.33333333%; }
}
@media (min-width: 1200px) {
.visitsiteLanding-coach-cardCol { width: 25%; }
}
/* ---- Тренировки (#section-workouts) ---- */
.visitsiteLanding-training {
background-color: rgba(var(--sportosphere-gray-200-rgb), 1);
}
.visitsiteLanding-training-cardsRow {
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
}
/* cssClass карточки в конфиге smartView (было `col-md-6 h-100`). */
.visitsiteLanding-training-cardCol {
width: 100%;
max-width: 100%;
height: 100%;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 768px) {
.visitsiteLanding-training-cardCol { width: 50%; }
}
/* ---- Галерея (#gallary) ---- */
.visitsiteLanding-gallary {
background-color: rgba(var(--sportosphere-light-rgb), 1);
}
.visitsiteLanding-gallary-wrap {
width: 100%;
}
.visitsiteLanding-gallary-panel {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: var(--sportosphere-white);
background-clip: border-box;
border: 0 solid var(--sportosphere-border-color);
border-radius: .375rem;
box-shadow: rgba(65, 69, 88, .1) 0 7px 14px 0, rgba(0, 0, 0, .07) 0 3px 6px 0;
margin-bottom: 1rem;
}
.visitsiteLanding-gallary-panelBody {
flex: 1 1 auto;
padding: 1.25rem;
overflow: hidden;
}
.visitsiteLanding-gallary-grid {
display: flex;
flex-wrap: wrap;
margin-right: -.25rem;
margin-left: -.25rem;
}
.visitsiteLanding-gallary-cell {
width: 50%;
max-width: 100%;
padding: .25rem;
}
.visitsiteLanding-gallary-img {
max-width: 100%;
height: auto;
border-radius: var(--sportosphere-border-radius);
}
/* ---- Контакты (#contacts) ---- */
.visitsiteLanding-contacts {
background-color: rgba(var(--sportosphere-gray-200-rgb), 1);
}
.visitsiteLanding-contacts-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%;
margin-right: -1rem;
margin-bottom: 7.5rem;
margin-left: -1rem;
}
.visitsiteLanding-contacts-col {
flex: 1 0 0%;
width: 50%;
max-width: 100%;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 992px) {
.visitsiteLanding-contacts-col { flex: 0 0 auto; width: 41.66666667%; }
}
@media (min-width: 1200px) {
.visitsiteLanding-contacts-col { width: 33.33333333%; }
}
.visitsiteLanding-contacts-hours {
margin-top: 0;
margin-bottom: .5rem;
font-family: var(--sportosphere-font-sans-serif);
font-weight: 500;
line-height: 1.2;
color: var(--sportosphere-heading-color);
font-size: calc(1.2978rem + .5736vw);
}
@media (min-width: 1200px) {
.visitsiteLanding-contacts-hours { font-size: 1.728rem; }
}
/* ---- Футер и обёртка страницы (_visitsite_main.html) ---- */
.visitsiteMain-footer {
position: relative;
padding-top: 7.5rem;
padding-bottom: 1.8rem;
background-color: var(--sportosphere-dark);
color: rgba(var(--sportosphere-gray-600-rgb), 1);
}
.visitsiteMain-backToTop {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
top: -7.5rem;
height: 2.5rem;
width: 2.5rem;
background-color: var(--sportosphere-dark);
border-top-right-radius: .25rem;
transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}
.visitsiteMain-backToTop-link {
color: rgba(var(--sportosphere-gray-600-rgb), 1);
}
.visitsiteMain-backToTop-icon {
transform: rotate(45deg);
}
.visitsiteMain-footer-row {
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
}
.visitsiteMain-footer-missionCol {
width: 100%;
max-width: 100%;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 992px) {
.visitsiteMain-footer-missionCol { width: 33.33333333%; }
}
.visitsiteMain-footer-heading {
margin-top: 0;
margin-bottom: 1rem;
font-family: var(--sportosphere-font-sans-serif);
font-weight: 500;
line-height: 1.2;
font-size: 1.2rem;
text-transform: uppercase;
color: var(--sportosphere-white);
opacity: .85;
}
.visitsiteMain-footer-missionText {
margin-top: 0;
margin-bottom: 1rem;
color: rgba(var(--sportosphere-gray-600-rgb), 1);
}
.visitsiteMain-footer-iconGroup {
display: flex;
margin-top: 1.8rem;
}
.visitsiteMain-footer-iconGroup .visitsiteMain-footer-iconItem:not(:last-child) {
margin-right: .5rem;
}
.visitsiteMain-footer-iconItem {
display: flex;
align-items: center;
justify-content: center;
height: 2.5rem;
width: 2.5rem;
border: 0;
border-radius: 50%;
font-size: .875rem;
color: rgba(var(--sportosphere-gray-700-rgb), 1);
background-color: var(--sportosphere-white);
box-shadow: var(--sportosphere-box-shadow-sm);
text-decoration: none;
transition: all .2s ease-in-out;
}
.visitsiteMain-footer-iconItem:hover,
.visitsiteMain-footer-iconItem:focus {
background-color: rgba(var(--sportosphere-gray-200-rgb), 1);
}
.visitsiteMain-footer-rightCol {
flex: 1 0 0%;
width: 100%;
max-width: 100%;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 992px) {
.visitsiteMain-footer-rightCol { padding-left: 4rem; }
}
@media (min-width: 1200px) {
.visitsiteMain-footer-rightCol { padding-left: 7.5rem; }
}
.visitsiteMain-footer-innerRow {
display: flex;
flex-wrap: wrap;
margin-top: 3rem;
margin-right: -1rem;
margin-left: -1rem;
}
@media (min-width: 992px) {
.visitsiteMain-footer-innerRow { margin-top: 0; }
}
.visitsiteMain-footer-companyCol {
width: 50%;
max-width: 100%;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 768px) {
.visitsiteMain-footer-companyCol { width: 25%; }
}
.visitsiteMain-footer-list {
padding-left: 0;
list-style: none;
margin-bottom: 1rem;
}
.visitsiteMain-footer-listItem {
margin-bottom: .25rem;
}
.visitsiteMain-footer-link {
color: rgba(var(--sportosphere-gray-600-rgb), 1);
text-decoration-color: rgba(var(--sportosphere-gray-600-rgb), 1);
}
.visitsiteMain-footer-link:hover,
.visitsiteMain-footer-link:focus {
color: var(--sportosphere-gray-link-hover-600);
text-decoration-color: var(--sportosphere-gray-link-hover-600);
}
/* -------------------------------------------------------------------------
Раздел: Публичные страницы заведения (visitsite, уровень `place`) —
2026-09-03 (`VS-8`, known-issues.md). До этой правки
`visitsite_place_view.html`/`_photo_list.html`/`_equipment_list.html`
были однострочными заглушками при полностью рабочем backend. Уровень
заведения (в отличие от уровня БА, раздел выше) не имеет собственной
модели контента (`docs/visitsites-spec.md`, раздел 10) — разметка ниже
показывает поля модели `place.Place` напрямую и данные `PlacePhoto`/
`equipment.Equipment`, без конструктора. Новые классы (не буквальный
перенос вычисленных значений, как в разделе выше — там переносилась
уже существовавшая Bootstrap-вёрстка, здесь вёрстки не было вообще)
— по аналогии с уже существующим `.widget`/`.widgets-layout`
(обязательны для любого блока с содержимым страницы, rules.md, п. 5) и
`.visitsite-container`/`.visitsite-title`/`.visitsite-lead` (общие для
публичных страниц визитки, раздел выше). `visitsite_place_scheduler.html`
(уже реализована раньше, до этого решения) и `visitsite_employee_list.html`/
`_workout_list.html` (уровень БА) по-прежнему используют старую
Bootstrap-сетку (`row`/`col-*`, `form-select`) — известный, отдельно
зафиксированный технический долг (`CSS-5`); новые страницы этой правки
его не наследуют и не усугубляют, но из-за этого визуально не буквально
идентичны соседним уже существовавшим страницам того же приложения.
Классы с префиксом `visitsitePlace-*`.
------------------------------------------------------------------------- */
.visitsitePlace-hero {
max-width: 700px;
margin: 0 auto 1rem;
text-align: center;
}
.visitsitePlace-hero-meta {
margin: 0 0 .25rem;
font-size: 1.05rem;
color: var(--sportosphere-body-color);
}
.visitsitePlace-switcher {
margin: 0 auto 1rem;
max-width: 320px;
}
.visitsitePlace-switcher-select {
width: 100%;
padding: .5rem .75rem;
font-size: 1rem;
color: var(--sportosphere-body-color);
background-color: var(--sportosphere-emphasis-bg);
border: 1px solid var(--sportosphere-border-color);
border-radius: .375rem;
}
.visitsitePlace-sectionHeading {
max-width: 700px;
margin: 0 auto 2rem;
text-align: center;
}
.visitsitePlace-linksLayout {
margin-top: 2rem;
}
.visitsitePlace-linkCard {
flex: 1 1 0;
text-decoration: none;
color: inherit;
transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.visitsitePlace-linkCard:hover,
.visitsitePlace-linkCard:focus {
text-decoration: none;
color: inherit;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
transform: translateY(-2px);
}
.visitsitePlace-linkCard-header {
display: flex;
align-items: center;
gap: .75rem;
font-size: 1.1rem;
font-weight: 500;
}
.visitsitePlace-linkCard-icon {
font-size: 1.5rem;
color: var(--sportosphere-primary);
}
.visitsitePlace-equipmentGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.visitsitePlace-equipmentCard {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--sportosphere-emphasis-bg);
border-radius: var(--sportosphere-border-radius-lg);
box-shadow: var(--sportosphere-box-shadow);
}
.visitsitePlace-equipmentCard-imgWrap {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
background-color: rgba(var(--sportosphere-light-rgb), 1);
}
.visitsitePlace-equipmentCard-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.visitsitePlace-equipmentCard-imgPlaceholder {
font-size: 2.5rem;
color: var(--sportosphere-gray-400);
}
.visitsitePlace-equipmentCard-body {
padding: 1rem 1.25rem;
}
.visitsitePlace-equipmentCard-title {
margin: 0 0 .25rem;
font-size: 1.1rem;
font-weight: 500;
}
.visitsitePlace-equipmentCard-category {
margin: 0 0 .5rem;
font-size: .9rem;
color: var(--sportosphere-gray-600);
}
.visitsitePlace-equipmentCard-description {
margin: 0;
font-size: .95rem;
}
/* -------------------------------------------------------------------------
Раздел: Страница «Мой день» (my_day.html) — 2026-08-24, обновлено
2026-08-24 дважды (виджеты на универсальный `.widget`; контейнер
раскладки — `.widgets-layout`, см. раздел «Универсальный компонент
"виджет"» выше) и 2026-08-26 (задача tasks-widgets-compliance):
содержимое виджета «Задачи» (список/карточка/формы) переведено на
библиотечный `smartView`/`smartForm` — соответствующие классы
`.myday-widget__*`/`.myday-task-*` перенесены в `sportosphereTools.css`
как `.smartView-taskCard-*` и удалены отсюда. Здесь остаются только
специфичные для этой страницы пропорции виджетов (2/3+1/3) — они
модификаторы `.widget`, не содержимого, которое теперь рисует
библиотека (rules.md, п. 5). 2026-08-27: в виджет «Тренировки на
сегодня» добавлен кликабельный аватар ученика (переход на
`student_list_progress`) — `.myday-widget__item-avatar[-img|-fallback]`,
строка обёрнута в `.myday-widget__item-info`.
Классы с префиксом `myday-*`.
------------------------------------------------------------------------- */
.myday-widget--workouts {
flex: 2 1 0%;
min-width: 0;
}
.myday-widget--tasks {
flex: 1 1 0%;
min-width: 0;
}
.myday-widget__title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--sportosphere-heading-color);
}
.myday-widget__list {
list-style: none;
margin: 0;
padding: 0;
}
.myday-widget__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 0.75rem 0;
border-bottom: 1px solid var(--sportosphere-border-color);
}
.myday-widget__item:last-child {
border-bottom: none;
}
.myday-widget__item-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Аватар ученика (было бы `.avatar.avatar-2xl` + `.rounded-circle` в
theme.min.css) — кликабелен, переход на страницу прогресса ученика
(`student_list_progress`). Значения — `.avatar`/`.avatar-2xl`/`.avatar
img`/`.rounded-circle`/`.avatar-name`/`.avatar-2xl .avatar-name`
дословно (rules.md, п. 7). Показывается только тренеру (событие с
учеником), не самому ученику. */
.myday-widget__item-avatar {
position: relative;
display: inline-block;
flex-shrink: 0;
height: 2.5rem;
width: 2.5rem;
}
.myday-widget__item-avatar-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.myday-widget__item-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--sportosphere-avatar-name-bg);
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8333333333rem;
}
.myday-widget__item-main {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.myday-widget__item-title {
font-weight: 600;
color: var(--sportosphere-body-color);
}
.myday-widget__item-meta {
font-size: 0.85rem;
color: var(--sportosphere-gray-600);
}
.myday-widget__item-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.myday-widget__action {
display: inline-flex;
align-items: center;
border: none;
border-radius: var(--sportosphere-border-radius-pill);
padding: 0.375rem 0.9rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--sportosphere-white);
background-color: var(--sportosphere-primary);
text-decoration: none;
cursor: pointer;
}
.myday-widget__action:hover,
.myday-widget__action:focus {
color: var(--sportosphere-white);
text-decoration: none;
opacity: 0.9;
}
.myday-widget__status {
font-size: 0.85rem;
color: var(--sportosphere-gray-600);
}
.myday-widget__status--done {
color: var(--sportosphere-success);
}
/* Предупреждение о несоответствии интенсивности тренировки текущей фазе
цикла (femalecalendar/cycle-tracking, my-day/dashboard-page) —
информационное, не блокирует проведение тренировки. */
.myday-widget__intensity-warning {
display: inline-flex;
align-items: center;
gap: 0.35rem;
width: fit-content;
padding: 0.2rem 0.6rem;
border-radius: var(--sportosphere-border-radius-pill);
font-size: 0.8rem;
color: var(--sportosphere-warning-text-emphasis);
background-color: var(--sportosphere-warning-bg-subtle);
}
.myday-widget__intensity-warning-icon {
color: var(--sportosphere-warning);
}
.myday-widget__empty {
margin: 0;
color: var(--sportosphere-gray-600);
}
/* Разделитель между формой быстрого создания задачи и списком задач
(my_day.html) — по правке пользователя, 2026-08-26: не Bootstrap-классы
`.border-bottom.border-dashed.my-3` в разметке, а свой класс со
значениями, перенесёнными дословно из theme.min.css (rules.md, п. 7):
.border-bottom + .border-dashed вместе дают border-bottom:
var(--sportosphere-border-width) dashed var(--sportosphere-border-color)
(border-dashed переопределяет --sportosphere-border-style на dashed),
.my-3 — margin: 1rem сверху и снизу. */
.myday-widget__tasks-divider {
margin: 1rem 0;
border-bottom: var(--sportosphere-border-width) dashed var(--sportosphere-border-color);
}
/* Меню действий события ("Провести без назначения" / "Назначить программу"
/ "Отменить") — openspec/changes/myday-workout-actions-menu. По точному
образцу, присланному пользователем, — кнопка "Ещё"/выпадающий список
локальной панели smartNavBars (buildLocalNavMore()/buildLocalNavLink(),
sportosphereTools.css, класс .smartNavBars-local-more и соседние).
Значения перенесены дословно (rules.md, п. 7) в свои классы — не
переиспользуют классы smartNavBars напрямую (та же изоляция модулей,
что и у самого smartNavBars относительно Bootstrap, rules.md, п. 4):
.myday-widget__menu = .smartNavBars-local-more, .myday-widget__menu-toggle
= .smartNavBars-local-link (кнопка-пилюля — по отзыву пользователя
корректна как есть), .myday-widget__menu-dropdown[-inner] =
.smartNavBars-local-more-dropdown[-inner], .myday-widget__menu-divider =
.smartNavBars-dropdown-divider. Открытие/закрытие — свой JS-тоггл в
myDayWorkoutActions.js (тот же приём без Bootstrap JS, что и
bindLocalNavMoreEvents() в smartNavBars.js — см. Decision 1, design.md).
.myday-widget__menu-item — **не** копирует пилюльный вид
.smartNavBars-local-link: по правке пользователя (2026-08-26) пункты
списка плоские, без фона/рамки/тени, с подсветкой при наведении — тот
же приём/переменная, что у .smartNavBars-dropdown-link
(sportosphereTools.css). Та же правка одновременно внесена и в сам
.smartNavBars-local-more-dropdown-inner .smartNavBars-local-link
(sportosphereTools.css) — пункты списка "Ещё" локальной панели на
других страницах (например "Клиенты заведения") тоже больше не
выглядят кнопками, только сама кнопка-тоггл "Ещё"/обычные вкладки ряда
остаются пилюлями. */
.myday-widget__menu {
position: relative;
}
.myday-widget__menu-toggle {
display: block;
box-sizing: border-box;
padding: .1875rem .75rem;
font-family: var(--sportosphere-font-sans-serif);
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
color: var(--sportosphere-btn-sportosphere-default-color);
text-align: center;
white-space: nowrap;
text-decoration: none;
background-color: var(--sportosphere-btn-sportosphere-background);
border: var(--sportosphere-border-width) solid var(--sportosphere-btn-sportosphere-background);
border-radius: var(--sportosphere-border-radius);
box-shadow: var(--sportosphere-btn-sportosphere-box-shadow);
cursor: pointer;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.myday-widget__menu-toggle:hover {
color: var(--sportosphere-btn-sportosphere-default-hover-color);
}
/* Пункты меню — плоские (не кнопки/пилюли, как сама кнопка-тоггл): фон/
рамка/тень отсутствуют, вместо них — подсветка фона при наведении, тот
же приём/переменная, что у .smartNavBars-dropdown-link
(sportosphereTools.css) — по прямой правке пользователя, 2026-08-26. */
.myday-widget__menu-item {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
padding: .1875rem .75rem;
font-family: var(--sportosphere-font-sans-serif);
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
color: var(--sportosphere-btn-sportosphere-default-color);
text-align: left;
white-space: nowrap;
text-decoration: none;
background-color: transparent;
border: var(--sportosphere-border-width) solid transparent;
border-radius: var(--sportosphere-border-radius);
cursor: pointer;
transition: color .15s ease-in-out, background-color .15s ease-in-out;
}
.myday-widget__menu-item:hover {
color: var(--sportosphere-btn-sportosphere-default-hover-color);
background-color: var(--sportosphere-dropdown-link-hover-bg-global);
}
.myday-widget__menu-item--danger {
color: var(--sportosphere-danger);
}
.myday-widget__menu-dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
margin-top: .5rem;
min-width: 12rem;
padding: .5rem 0;
background-color: var(--sportosphere-dropdown-bg-global);
border-radius: .375rem;
box-shadow: var(--sportosphere-box-shadow);
}
.myday-widget__menu-dropdown.show {
display: block;
}
.myday-widget__menu-dropdown-inner {
display: flex;
flex-direction: column;
gap: .25rem;
padding: 0 .5rem;
}
.myday-widget__menu-divider {
height: 0;
margin: .5rem 0;
border-top: var(--sportosphere-border-width) solid var(--sportosphere-border-color);
opacity: 1;
}
/* Страница "Собрать по ходу" (myday/templates/my_day_conduct_ad_hoc.html,
myday-assign-workout-freeform-page) — сборка состава тренировки без
предварительного назначения. Раньше было модальным окном
(#conductAdHocModal) поверх my_day.html — перенесено на отдельную
страницу, контейнер (заголовок/тело/футер) теперь даёт универсальный
.widget/.widget-header/.widget-body/.widget-footer (rules.md, п. 5), не
собственные модальные классы — .myday-adhoc-modal-dialog/-close/-body/
-title отсюда удалены (были нужны только для .modal-контейнера).
Вложенный пикер упражнения остаётся модалкой — тот же приём, что уже
использует smartConstructor.js (BaseTemplateConstructor.mountModal()),
не затронут этим переносом. .myday-adhoc-page-actions — только
расположение кнопок "Отмена"/"Начать" в .widget-footer (значения — те
же display/gap/justify-content, что были у .modal-footer из
theme.min.css, rules.md п. 7). */
.myday-adhoc-page-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
}
.myday-adhoc-exercises-list {
list-style: none;
margin: 0 0 0.75rem;
padding: 0;
}
.myday-adhoc-exercise-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--sportosphere-border-color);
}
.myday-adhoc-exercise-row:last-child {
border-bottom: none;
}
.myday-adhoc-exercise-row-name {
flex: 1 1 auto;
min-width: 8rem;
border: none;
background: none;
padding: 0;
font-weight: 600;
color: var(--sportosphere-body-color);
}
.myday-adhoc-exercise-row-name::placeholder {
font-weight: 400;
color: var(--sportosphere-gray-600);
}
.myday-adhoc-exercise-row-attempts {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--sportosphere-gray-600);
white-space: nowrap;
}
.myday-adhoc-exercise-row-attempts input {
width: 3.5rem;
padding: 0.25rem 0.4rem;
border: 1px solid var(--sportosphere-border-color);
border-radius: var(--sportosphere-border-radius);
color: var(--sportosphere-body-color);
background-color: var(--sportosphere-body-bg);
}
.myday-adhoc-exercise-row-remove {
border: none;
background: none;
color: var(--sportosphere-danger);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: 0 0.25rem;
}
.myday-adhoc-empty {
margin: 0 0 0.75rem;
color: var(--sportosphere-gray-600);
}
/* -------------------------------------------------------------------------
Раздел: Страница «Все задачи» (tasks/templates/tasks_list.html) —
2026-08-25, change `tasks-list-page`; обновлено 2026-08-26 (задача
tasks-widgets-compliance) — по той же причине, что и «Мой день» выше:
содержимое виджета переведено на `smartView`/`smartForm`
(`.smartView-taskCard-*` в `sportosphereTools.css`), классы
`.tasks-page-item*`/`.tasks-page-action`/`.tasks-page-status`/
`.tasks-page-form*`/`.tasks-page-edit-form` удалены отсюда. Остаётся
только модификатор ширины виджета на этой странице.
Классы с префиксом `tasks-page-*`.
------------------------------------------------------------------------- */
.tasks-page-widget {
flex: 1 1 100%;
width: 100%;
}
.tasks-page-title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--sportosphere-heading-color);
}
/* -------------------------------------------------------------------------
Раздел: Страница «Прогресс ученика» (progress/templates/
studentProfile.html) — 2026-08-27, change coach-student-progress-notes;
дополнено 2026-08-27, change coach-student-tasks-widget (скрытие
кнопки-триггера localNav на xl+, id ниже); дополнено 2026-08-28, change
student-tasks-offcanvas-own-classes (классы содержимого списка задач
#studentTasksOffcanvas, `studentTasks-*` ниже — сама панель офканваса
теперь на собственных классах `.isOffcanvas*`, sportosphereTools.css).
Дополнено 2026-09-05 (найдено по прямому сообщению пользователя):
верхнеуровневая раскладка страницы (сайдбар + основной контент) была на
литеральной Bootstrap-сетке `row`/`col-xxl-3`/`col-xl-4`/`order-xl-1`/
`col-xxl-9`/`col-xl-8` — переведена на `.widgets-layout` (универсальный
компонент, раздел выше) с модификаторами пропорций `.studentProfile-
widget--main`(2)/`--sidebar`(1), см. также `docs/known-issues.md`,
`CAL-9`-соседний пункт (структурный аналог, но для сетки, не для
`#smartCalendar`). Брейкпоинт стека — НЕ дефолтный у `.widgets-layout`
(991.98px), а собственный, 1199.98px: сайдбар этой страницы жёстко
завязан на xl (1200px) в двух других местах (`#studentTasksNavTrigger`
скрывается на xl+ здесь же ниже; `.isOffcanvas--sidebar-sticky`
переключается в статичный сайдбар на xl+, sportosphereTools.css) —
несовпадающий брейкпоинт раскладки создал бы диапазон 992–1199px, где
виджет «Задачи» одновременно показан и в сайдбаре, и по кнопке-триггеру
localNav. `order-xl-1` не перенесён — вместо него сайдбар и основной
блок просто поменяны местами в DOM (тот же визуальный результат: слева
контент, справа сайдбар на xl+, без утилиты `order`).
`bg-body-tertiary` (2 вхождения, шапка офканваса/встроенного виджета
«Задачи») заменена на `.studentProfile-tertiary-bg` — тот же приём и
та же переменная `--sportosphere-tertiary-bg-rgb`, что уже используют
`.smartCalendar-tertiary-bg`/`.smartTable-tertiary-bg`/`.smartView-
tertiary-bg` (`sportosphereTools.css`), здесь — под префиксом страницы,
т.к. это не разметка библиотеки инструментов.
Классы с префиксом `coachNotes-*`/`studentTasks-*`/`studentProfile-*`.
------------------------------------------------------------------------- */
.studentProfile-layout > .studentProfile-widget--main {
flex: 2 1 0%;
min-width: 0;
}
.studentProfile-layout > .studentProfile-widget--sidebar {
flex: 1 1 0%;
min-width: 0;
}
@media (max-width: 1199.98px) {
.studentProfile-layout {
flex-direction: column;
}
.studentProfile-layout > .studentProfile-widget--main,
.studentProfile-layout > .studentProfile-widget--sidebar {
flex: 1 1 100%;
width: 100%;
}
}
.studentProfile-tertiary-bg {
background-color: rgba(var(--sportosphere-tertiary-bg-rgb), 1);
}
/* Разделитель между формой быстрого добавления заметки и списком заметок
(вкладка «Заметки») — та же пунктирная линия, что и в разделителе формы/
списка задач на «Мой день» (.myday-widget__tasks-divider выше), но свой
класс с префиксом страницы (rules.md, п. 4/5 — новые классы модуля, не
переиспользование чужого префикса). Значения — дословно из
.border-bottom + .border-dashed + .my-3 (theme.min.css), см. комментарий
у .myday-widget__tasks-divider. */
.coachNotes-divider {
margin: 1rem 0;
border-bottom: var(--sportosphere-border-width) dashed var(--sportosphere-border-color);
}
/* Кнопка-триггер offcanvas «Задачи» — вкладка localNav инструмента
smartNavBars (id задаётся в конфиге `{% block local_nav_config %}`,
studentProfile.html: `{ id: 'studentTasksNavTrigger', ... }`,
smartNavBars.buildLocalNavLink() присваивает этот id самому элементу).
localNav не поддерживает скрытие пункта по брейкпоинту в конфиге — на
xl+ (>=1200px) кнопка скрывается точечным правилом здесь, т. к. на этих
экранах offcanvas #studentTasksOffcanvas и так всегда виден (модификатор
.isOffcanvas--sidebar-sticky, sportosphereTools.css) — кнопка,
открывающая уже открытый виджет, только вводит в заблуждение (найдено
пользователем после того, как первая версия оставляла кнопку видимой на
всех брейкпоинтах). Тот же брейкпоинт, что был у прежней `d-xl-none`-
кнопки до перехода на localNav (coach-student-tasks-widget, design.md,
решение 3). */
@media (min-width: 1200px) {
#studentTasksNavTrigger {
display: none;
}
}
/* Список задач внутри #studentTasksOffcanvas (виджет «Задачи») —
содержимое, которое рендерит studentTasksWidget.js. Сама панель — на
универсальных `.isOffcanvas*` (sportosphereTools.css); эти классы —
специфичны для содержимого именно этого списка, поэтому здесь, а не там
(по аналогии с `.coachNotes-divider` выше). Значения — перенос
поведения `.ticket-todo-list`/`.hover-actions`/`.form-check-line-through`
(theme.min.css), см. design.md (student-tasks-offcanvas-own-classes). */
/* Ограниченная высота списка со своей прокруткой (дословно
.ticket-todo-list) — снимается, когда офканвас открыт как выезжающая
панель на <1200px (дословно .offcanvas.offcanvas-contact-info.show
.ticket-todo-list{height:auto!important}); на >=1200px, где .show не
переключается (см. правило скрытия кнопки-триггера выше), список
остаётся с фиксированной высотой и собственной прокруткой. */
#studentTasks-list {
height: 25.65rem;
overflow-y: auto;
}
#studentTasksOffcanvas.show #studentTasks-list {
height: auto !important;
}
/* Строка одной задачи — обёртка для чекбокса и кнопки удаления,
появляющейся по наведению (дословно .hover-actions-trigger). */
.studentTasks-item {
position: relative;
display: flex;
gap: 1rem;
}
/* Кнопка удаления — скрыта, пока не наведена строка задачи (дословно
.hover-actions{display:none;position:absolute} +
.hover-actions-trigger:hover .hover-actions{display:flex}). Условие
:focus-within — то же, что было у исходного :focus триггера, но
работает и при фокусе на самой кнопке клавиатурой, не только на
обёртке. */
.studentTasks-item-actions {
display: none;
position: absolute;
top: 0;
right: 0;
}
.studentTasks-item:hover .studentTasks-item-actions,
.studentTasks-item:focus-within .studentTasks-item-actions {
display: flex;
}
/* Зачёркивание заголовка выполненной задачи при отметке чекбокса
(дословно .form-check-line-through:checked+label{color:#9da9bb;
text-decoration:line-through} — #9da9bb это var(--sportosphere-gray-500)
светлой темы, см. theme.min.css). Чекбокс/лейбл — обычные
.form-check-input/.form-check-label (как и в остальном проекте, см.
smartForm.js) — этот модификатор только меняет их вид у выполненной
задачи. */
.studentTasks-checkbox:checked + label {
color: var(--sportosphere-gray-500);
text-decoration: line-through;
}
/* -------------------------------------------------------------------------
Раздел: Страница «Профиль сотрудника» (employee/templates/
employee_profile_view.html) — 2026-09-06, найдено по прямому сообщению
пользователя. Верхнеуровневая раскладка страницы (сайдбар с фото + карточками
сведений + основной контент) была на литеральной Bootstrap-сетке
`row`/`col-lg-4`/`col-xl-3`/`col-lg-8`/`col-xl-9` — переведена на
`.widgets-layout` с модификаторами пропорций `.employeeProfile-widget--
main`(3)/`--sidebar`(1), тот же приём, что и `.studentProfile-*`
(`CAL-9`-соседний пункт, `CSS-7`). Брейкпоинт стека — дефолтный у
`.widgets-layout` (991.98px), совпадает с исходным `col-lg-*` (992px) без
доп. настройки — в отличие от страницы «Прогресс ученика», здесь нет
стороннего компонента, завязанного на другой брейкпоинт.
Дополнительно исправлена вложенная разметка фото+имени внутри сайдбар-
виджета: была `row g-3 align-items-center` > `col-md-6 col-lg-12`
(фото) + `col-md-6` (имя) — из-за `CSS-7` (переопределение `.row > *` в
`sportosphereTools.css`, загружаемом позже `theme.min.css`, без переноса
ВСЕХ брейкпоинт-вариантов `.col-*`) `.col-lg-12` не был внесён в
белый список, поэтому терял бой `.col-md-6` (внесён в список ради других
инструментов) на любой ширине ≥768px — фото оставалось на 50% ширины
вместо предполагаемых 100% на ≥992px, там где сайдбар уже сам узкая
колонка. Заменено на простой вертикальный стек (фото сверху на всю
ширину `w-100`, имя/роль под ним) — не только чинит имеющийся баг, но и
устраняет саму зависимость от белого списка `CSS-7` для этого блока.
Классы с префиксом `employeeProfile-*`.
------------------------------------------------------------------------- */
.employeeProfile-layout > .employeeProfile-widget--main {
flex: 3 1 0%;
min-width: 0;
}
.employeeProfile-layout > .employeeProfile-widget--sidebar {
flex: 1 1 0%;
min-width: 0;
}
@media (max-width: 991.98px) {
.employeeProfile-layout > .employeeProfile-widget--main,
.employeeProfile-layout > .employeeProfile-widget--sidebar {
flex: 1 1 100%;
width: 100%;
}
}
/* -------------------------------------------------------------------------
Раздел: Страница «Типы сетов» (management/templates/
management_set_list.html, management_set_edit.html,
management_setcategory_edit.html) — 2026-08-30, change
`set-categories` (перевод карточек `.card`/`.card-body` на
универсальный компонент «виджет», rules.md, п. 5). На каждой из трёх
страниц — ровно один виджет на всю ширину, тот же модификатор, что у
`.tasks-page-widget` выше.
Классы с префиксом `sets-page-*`.
------------------------------------------------------------------------- */
.sets-page-widget {
flex: 1 1 100%;
width: 100%;
}
/* Только для страниц со вкладками (smartTabs) — сама вкладка уже даёт
свой отступ через .tab-pane-body (sportosphereTools.css), двойной
padding не нужен. На страницах редактирования (голый smartForm в
.widget-body без вкладок) этот класс не ставится — там нужен
стандартный отступ .widget-body. */
.sets-page-tabs-body {
padding: 0;
}
.sets-page-title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--sportosphere-heading-color);
}
/* -------------------------------------------------------------------------
Раздел: Страница «Заведение — обзор» (place/templates/place_view.html)
— 2026-09-06, найдено при анализе вёрстки страницы, тот же класс
дефекта, что `CSS-7`/`docs/known-issues.md` (place_view.html значился
там непроверенным подозреваемым, здесь подтверждён построчно).
Внутри `.widget-body` было два литеральных Bootstrap-грида:
1) `row` > `col-lg col-xxl-5` (+ `offset-xxl-1` у второго блока) —
блоки «Сведения о заведении»/«Описание» рядом. `col-xxl-5`
(брейкпоинт 1540px в этой сборке, см. theme.min.css) не входит в
белый список `sportosphereTools.css` («Раздел: Сетка») — на
ширинах ≥1540px его `width` откатывался на 100% (`row > *`,
подключается позже `theme.min.css`, та же специфичность), то есть
блоки схлопывались в одну колонку именно на САМЫХ широких экранах,
хотя на 992–1539px (там сайдбар держится на `flex:1 0 0%` голого
`col-lg`, без явного `width` — коллизии не задевает) рядность
работала.
2) `row` > `col-5 col-sm-4` (подпись поля) + `col` (значение) — четыре
раза, для ID/Адреса/Телефона/Псевдонима. `col-5` тоже не в белом
списке — на ширинах <576px подпись растягивалась на 100% вместо
41.67%, то есть подпись и значение поля переставали быть на одной
строке. На ≥576px спасало случайное совпадение: `col-sm-4` внесён
в белый список `sportosphereTools.css` с тем же значением (33.33%)
ради других инструментов.
Решение — тот же приём, что уже применялся для аналогичной находки на
`employee_profile_view.html` (см. раздел `employeeProfile-*` выше):
не чинить точечно белый список `CSS-7` (архитектурное решение шире
этой страницы, требует отдельного openspec-propose), а вывести
разметку из-под самого механизма — заменить `row`/`col-*` на
собственные классы страницы. Ниже — дословный перенос вычисленных
значений затронутых Bootstrap-классов (rules.md, п. 5/7): гаттер
строки 2rem (как у настоящего `.row`, 1rem паддинга на каждую
сторону), `col-lg`→`flex:1 0 0%`, `col-xxl-5`→`flex:0 0 auto;
width:41.6666667%`, `offset-xxl-1`→`margin-left:8.3333333%` (только
у блока «Описание», как и было), `col-5`→`width:41.6666667%`,
`col-sm-4`→`width:33.3333333%`, `col`→`flex:1 0 0%`. `mt-4`/`mt-lg-0`
(отступ между блоками при стеке на <992px, снимался на ≥992px)
перенесён как `margin-top` без брейкпоинт-утилиты — здесь всего два
возможных ребёнка контейнера, второй уже адресуется отдельным
модификатором `--description`.
Классы с префиксом `placeView-*`.
------------------------------------------------------------------------- */
.placeView-info-layout {
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
}
.placeView-info-block {
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
}
.placeView-info-block--description {
margin-top: 1.5rem;
}
@media (min-width: 992px) {
.placeView-info-block {
flex: 1 0 0%;
width: auto;
}
.placeView-info-block--description {
margin-top: 0;
}
}
@media (min-width: 1540px) {
.placeView-info-block {
flex: 0 0 auto;
width: 41.6666667%;
}
.placeView-info-block--description {
margin-left: 8.3333333%;
}
}
.placeView-field-row {
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
}
.placeView-field-label {
flex: 0 0 auto;
width: 41.6666667%;
padding-right: 1rem;
padding-left: 1rem;
}
.placeView-field-value {
flex: 1 0 0%;
padding-right: 1rem;
padding-left: 1rem;
}
@media (min-width: 576px) {
.placeView-field-label {
width: 33.3333333%;
}
}
/* -------------------------------------------------------------------------
Раздел: Страница «Бизнес-аккаунт — обзор» (organization/templates/
businessaccount_view.html) — 2026-09-06, тот же класс дефекта и то же
решение, что у `.placeView-*` выше (`CSS-7`, docs/known-issues.md):
`row` > `col-lg col-xxl-5` (+ `offset-xxl-1` у второго блока) —
«Информация об аккаунте» / точка монтирования `smartView`-виджета
`businessCard` (`#businessAccountContact-container`) рядом — и
вложенный `row` > `col-5 col-sm-4` (подпись) + `col` (значение) для
полей ID/Создан/Владелец/Псевдоним. `col-xxl-5` вне белого списка
`sportosphereTools.css` — на ≥1540px схлопывался в одну колонку;
`col-5` вне списка — на <576px подпись поля расходилась со значением
на разные строки. Заголовочный ряд страницы (лого `col-sm-6` + текст
`col` + `col-12` с `