/* Чертоги: разделы, любимые чертоги (сердечко), звёздочка в шапке (assets/js/chat/halls-layout.336312b.js). Цвета — только опоры из :root, иконки — свои SVG. Без :has(), inset, dvh, color-mix (старые андроиды, Chromium 99). Центровка значков — grid. Крупный режим: размеры через --fs. Иврит: flex сам зеркалит порядок (dir=rtl на странице). */ /* ---------- заголовки разделов ---------- */ #hallsList .hallsec{display:block;margin:16px 4px 8px;padding:0;font-size:calc(11.5px * var(--fs,1));font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);line-height:1.2} #hallsList .hallsec span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [dir=rtl] #hallsList .hallsec{letter-spacing:.04em} /* ---------- плитка слева: скруглённый КВАДРАТ (правка Лираз 11.10: «верни квадраты, в квадратах логотипы») ---------- Картинка/логотип чертога или нейтральная заглушка с тонкой первой буквой названия: без сердечка и без золотого кружка. Плитка открывает чертог (как вся карточка). */ #hallsList .hall .ha{position:relative;overflow:hidden;box-sizing:border-box;width:44px;height:44px;border-radius:12px;background:var(--glass);border:1px solid var(--line)} #hallsList .hall .ha .hal-img{border-radius:inherit} #hallsList .hall .ha .hal-gem{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-items:center;margin:0;padding:0;font-family:'Frank Ruhl Libre',serif;font-weight:400;font-size:19px;line-height:1;color:var(--ink-dim);opacity:.85} #hallsList .hall .ha.hal-has .hal-gem{visibility:hidden} /* ---------- сердечко «любимый чертог»: справа, рядом со стрелкой; только бледный контур ---------- Без круга, без рамки и без фона; цель нажатия 44×44 невидимая. Выключено — лавандовый контур, очень бледный (декоративно); включено — золото (одно). Расстояние до стрелки задаёт gap карточки. */ #hallsList .hall .hall-fav{position:relative;flex:0 0 auto;display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;margin:-6px -6px -6px 0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink-faint);cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit;line-height:0} [dir=rtl] #hallsList .hall .hall-fav{margin:-6px 0 -6px -6px} #hallsList .hall .hall-fav svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.4} #hallsList .hall .hall-fav.on{color:var(--gold-text)} #hallsList .hall .hall-fav.on svg{fill:var(--gold);stroke:var(--gold-text);opacity:1} #hallsList .hall .hall-fav:focus-visible{outline:2px solid var(--gold-text);outline-offset:-6px;border-radius:50%} /* Анимация нажатия (≈300 мс): только transform и opacity, на своём слое; включение — пульс и кольцо, выключение — мягкое сжатие. Класс ставит halls-layout только по жесту; при «меньше движения» и в простом режиме анимации нет. */ #hallsList .hall .hall-fav::after{content:"";position:absolute;top:11px;left:11px;width:22px;height:22px;box-sizing:border-box;border:1px solid var(--gold);border-radius:50%;opacity:0;pointer-events:none} @keyframes hl-fav-pop{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}} @keyframes hl-fav-shrink{0%{transform:scale(1)}45%{transform:scale(.86)}100%{transform:scale(1)}} @keyframes hl-fav-ring{0%{transform:scale(.9);opacity:.85}100%{transform:scale(2.1);opacity:0}} #hallsList .hall .hall-fav.hl-pop-on svg{will-change:transform;animation:hl-fav-pop .3s cubic-bezier(.2,.8,.3,1) 1} #hallsList .hall .hall-fav.hl-pop-on::after{will-change:transform,opacity;animation:hl-fav-ring .3s ease-out 1} #hallsList .hall .hall-fav.hl-pop-off svg{will-change:transform;animation:hl-fav-shrink .22s cubic-bezier(.2,.8,.3,1) 1} @media (prefers-reduced-motion:reduce){#hallsList .hall .hall-fav svg,#hallsList .hall .hall-fav::after{animation:none!important}} html.hl-simple #hallsList .hall .hall-fav svg,html.hl-simple #hallsList .hall .hall-fav::after{animation:none!important} /* ---------- правый край карточки: сердечко, затем счётчик непрочитанных у САМОГО края (правка Лираз 12.10) ---------- Порядок слева направо (на иврите зеркально): название … онлайн … сердечко … [«ЦЕНТР»] … счётчик … стрелка «›» (если есть; стрелка остаётся крайней). Счётчик живёт в слоте фиксированной ширины (.hslot, держит «14» и «99+»), поэтому колонка сердечек стоит на одной вертикальной оси, есть у карточки счётчик или нет. */ #hallsList .hall .hslot{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:flex-end;box-sizing:border-box;width:38px;min-height:21px} #hallsList .hall .hslot .hbadge{margin:0} /* ---------- шапка: сердечко-фильтр и звёздочка рядом с «Чертоги» ---------- */ #v-halls .vhead{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;position:relative} #v-halls .vhead h2{flex:0 1 auto;min-width:0;white-space:nowrap} /* Кнопки 44 px, а шапка остаётся высотой в заголовок (сторож mute-durations: шапку не растягивать): поля -7px. */ .hl-vh-btns{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;margin:-7px 0;margin-inline-start:auto} .hl-vh-btn{display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--glass);color:var(--ink-dim);cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:0} .hl-vh-btn svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .hl-vh-btn.on{color:var(--gold-text);border-color:rgba(var(--gold-rgb),.55);background:rgba(var(--gold-rgb),.12)} .hl-vh-btn.on svg{fill:var(--gold);stroke:var(--gold-text)} .hl-vh-btn:active{background:var(--glass2)} .hl-vh-btn:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px} /* ---------- пустое состояние фильтра ---------- */ #hallsList .hallsempty{margin:18px 8px;padding:18px 12px;text-align:center;line-height:1.45;font-size:calc(14px * var(--fs,1));color:var(--ink-faint);border:1px dashed var(--line);border-radius:16px} /* ---------- заголовок «КУРСЫ» нажимается + капсула «Расписание» справа (слово Лираз 12.10) ---------- Строка: [КУРСЫ ›] … [календарь Расписание]. Цели 44 px, шапка секции не растёт (поля -7px), поверх карточки под ней. Золото одно (--gold-text), размер подписи как у заголовка. В RTL строка зеркалится сама, шеврон переворачивается. */ #hallsList .hallsec.hallsec-link{display:flex;align-items:center;gap:8px;position:relative;z-index:1;margin:1px 4px -7px;min-height:44px} #hallsList .hallsec-main,#hallsList .hallsec-sched{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:1.2} #hallsList .hallsec-main{flex:0 1 auto;min-width:0;gap:4px;padding-inline-end:10px;border-radius:10px} #hallsList .hallsec-main span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #hallsList .hallsec-chev{flex:0 0 auto;display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} [dir=rtl] #hallsList .hallsec-chev{transform:scaleX(-1)} #hallsList .hallsec-sched{flex:0 0 auto;margin-inline-start:auto;border-radius:22px} #hallsList .hallsec .hallsec-pill{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:30px;padding:0 12px;border:1px solid rgba(var(--gold-rgb),.5);border-radius:15px;background:rgba(var(--gold-rgb),.08);color:var(--gold-text);font-size:calc(11.5px * var(--fs,1));font-weight:700;letter-spacing:.02em;text-transform:none;white-space:nowrap} #hallsList .hallsec-pill svg{flex:0 0 auto;display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){#hallsList .hallsec-main:hover{opacity:.82}#hallsList .hallsec-sched:hover .hallsec-pill{background:rgba(var(--gold-rgb),.16)}} #hallsList .hallsec-main:active{opacity:.6} #hallsList .hallsec-sched:active .hallsec-pill{background:rgba(var(--gold-rgb),.24)} #hallsList .hallsec-main:focus-visible,#hallsList .hallsec-sched:focus-visible{outline:2px solid var(--gold-text);outline-offset:-2px} #hallsList .hallsec .hallsec-pill span{display:inline;overflow:visible}