шириной
195px, а ![]()
внутри — 220px. Центрировался анкор, а видно картинку,
поэтому она стабильно уезжала вправо на ~13px, и на каждом следующем
слайде это читалось как «постер сползает».
Заставляем ссылку обнимать картинку по размеру и центрируем её саму. */
.screens-c .owl-item .highslide {
display: block;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
margin: 0 auto;
}
.screens-c .owl-item .highslide img {
display: block;
max-width: 100%;
height: auto;
/* !important здесь не от лени: движок вешает картинке ИНЛАЙНОВЫЙ
style="margin:0 15px 10px 0; float:left" прямо при вставке в текст,
а инлайновый стиль не перебивается никаким селектором. Именно эти
15px справа раздували ссылку до 235px при картинке в 220 и уводили
постер от центра. */
margin: 0 auto !important;
float: none !important;
}
.screens-c.owl-theme .owl-controls {
position: static;
margin-top: 10px;
height: auto;
}
.screens-c .owl-pagination { top: 0; }
.owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer; }
.owl-controls { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.grabbing { cursor: url(../images/grabbing.png) 8 8, move; }
.owl-carousel .owl-wrapper, .owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.owl-origin { -webkit-perspective: 1200px; perspective: 1200px; }
.owl-fade-out { z-index: 10; animation: fadeOut .7s both ease; }
.owl-fade-in { animation: fadeIn .7s both ease; }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.owl-buttons div {
position: absolute;
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: var(--r-pill);
color: var(--fg);
background: var(--glass-strong);
-webkit-backdrop-filter: blur(14px) saturate(170%);
backdrop-filter: blur(14px) saturate(170%);
border: 1px solid var(--glass-border);
box-shadow: var(--sh-2);
z-index: 30;
opacity: 0;
transition: all var(--t) var(--e-out);
}
.carousel-wr:hover .owl-buttons div,
.k-rel-box:hover .owl-buttons div { opacity: 1; }
.owl-buttons div:hover { color: #fff; background: var(--accent-grad); border-color: transparent; box-shadow: var(--sh-glow); }
.carousel-wr .owl-buttons .owl-prev { left: 8px; }
.carousel-wr .owl-buttons .owl-next { right: 8px; }
/* Карусель похожих работ: в engine.css её стрелки вынесены НАД блоком
(.k-rel-box .owl-controls {top:-30px; right:7px}) — оставляем эту схему,
только приводим сами кнопки к общему виду. */
.k-rel-box .owl-theme .owl-controls { pointer-events: none; }
.k-rel-box .owl-buttons div {
position: relative;
pointer-events: auto;
top: auto;
margin: 0 3px;
opacity: 1;
border-radius: var(--r-pill) !important;
}
.k-rel-box .owl-prev, .k-rel-box .owl-next { left: auto; right: auto; padding: 0; }
/* Слайдер: фиксированная высота слайда. Раньше картинка (300px) была выше
слайда (280px) и вылезала — из-за этого и высота .owl-carousel «плыла»,
и стрелки, спозиционированные от неё через top:50%, уезжали вниз. */
.carousel-wr {
position: relative;
height: auto;
margin-bottom: 18px;
padding: 10px;
border-radius: var(--r-lg);
background: var(--glass);
-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
backdrop-filter: blur(var(--blur)) saturate(150%);
border: 1px solid var(--glass-border);
box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi);
overflow: hidden;
}
.carou {
position: relative;
display: block;
height: 270px;
max-width: none;
border-radius: var(--r-md);
overflow: hidden;
background: var(--surface-2);
}
.carou img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
}
/* Карусель до инициализации Owl.
Owl вешает класс owl-carousel сам и только когда лента собрана; в разметке
стоит голый . Раньше постеры подгружались скриптом
(data-src), поэтому пустые блоки никто не замечал. После перехода на обычный
src картинки приходят сразу, и двадцать слайдов по 270px во всю ширину
успевали мигнуть на весь экран при каждом обновлении страницы.
Держим высоту готовой ленты и прячем содержимое до готовности: сдвига
макета нет (высота та же), мигания тоже. */
#owl-carou:not(.owl-carousel) {
height: 270px;
overflow: hidden;
}
#owl-carou:not(.owl-carousel) > .carou {
visibility: hidden;
}
/* Стрелки — строго по центру слайда.
В engine.css лежит `.owl-theme .owl-controls {position:absolute; bottom:0;
height:10px}` — этот десятипиксельный блок под лентой и был точкой отсчёта
для стрелок, поэтому top:50% опускал их под карусель. Растягиваем контейнер
на всю высоту карусели (селектор той же специфичности, иначе не перебьётся)
и отключаем ему перехват мыши, чтобы не мешал перетаскиванию слайдов. */
.carousel-wr .owl-theme .owl-controls {
top: 0;
bottom: 0;
height: auto;
pointer-events: none;
}
.carousel-wr .owl-buttons div {
pointer-events: auto;
top: 50%;
margin-top: -20px;
}
/* --------------------------------------------------------------------------
17. Адаптив
-------------------------------------------------------------------------- */
@media (max-width: 1280px) {
.center { max-width: 1100px; }
}
@media (max-width: 1024px) {
.wr { padding-top: 80px; }
.kino-title-full h1.kino-h { font-size: 25px; }
}
@media screen and (max-width: 768px), screen and (max-width: 480px) {
.center { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; }
.wr { padding-top: 68px; }
.cols, #cols { padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.col-side { display: none !important; }
.col-cont { border-radius: var(--r-md); margin: 0 !important; width: 100% !important; float: none !important; padding: 8px 4px !important; box-sizing: border-box !important; }
/* Шапка: логотип слева, справа — иконки в один ряд, поиск разворачивается
отдельной строкой под ними. Кнопки стоят рядом с поиском и подписаны
через aria-label/title, а не висят отдельным блоком под шапкой. */
.top {
padding: 6px 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
height: auto;
}
.logo { position: static; width: auto; height: 40px; margin-right: auto; }
.top .show-menu,
.top .show-search {
display: inline-flex;
align-items: center;
justify-content: center;
position: static;
order: 2;
width: 38px;
height: 38px;
padding: 0;
flex: none;
font-size: 0;
line-height: 0;
color: var(--fg-muted);
background: var(--glass-light);
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
cursor: pointer;
transition: color var(--t-fast) var(--e-out), background var(--t) var(--e-out),
border-color var(--t) var(--e-out);
}
.top .show-menu .fa,
.top .show-search .fa { font-size: 17px; }
.top .show-menu:hover,
.top .show-search:hover,
.top .show-menu[aria-expanded="true"],
.top .show-search[aria-expanded="true"] {
color: #fff;
background: var(--accent-grad);
border-color: transparent;
}
/* На десктопе .log-buts позиционирован absolute (правый край шапки).
В мобильном ряду это заставляло его наезжать на кнопки меню и поиска —
возвращаем в поток. */
.log-buts {
position: static;
order: 3;
margin-left: 0;
display: flex;
gap: 6px;
line-height: normal;
}
.log-buts a { float: none; margin: 0; }
.log-buts a span { display: none; }
.log-buts a { padding: 0; width: 38px; height: 38px; justify-content: center; }
/* Поиск разворачивается второй строкой — под иконками, во всю ширину */
.search-wrap {
flex: 1 1 100%;
order: 4;
position: static;
width: 100%;
padding: 0;
margin-top: 6px;
background: none;
}
.main-items.grid-thumb,
.main-items.grid-thumb > #dle-content { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 12px; }
.kino-title-full h1.kino-h { font-size: 21px; }
.kino-lines .k-label { min-width: 100%; }
.chips { gap: 6px; }
.to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
.bottom { padding: 18px; }
/* Мобильное меню — горизонтальная лента чипсов */
.first-menu, .second-menu {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 6px;
scroll-snap-type: x proximity;
}
.first-menu::-webkit-scrollbar, .second-menu::-webkit-scrollbar { height: 3px; }
/* Выпадающее мобильное меню под шапкой */
.mob-dropdown {
width: 100% !important;
background: rgba(22, 22, 22, 0.98) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.7) !important;
z-index: 999 !important;
box-sizing: border-box !important;
}
.mob-dropdown__inner {
padding: 16px 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
box-sizing: border-box !important;
}
.mob-nav-title {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--fg-dim, #888) !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
margin-bottom: 10px !important;
}
.mob-nav-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.mob-nav-list li a {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 14px !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: var(--r-md, 10px) !important;
color: var(--fg, #eee) !important;
font-size: 13.5px !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
.mob-nav-list li a i {
color: var(--accent, #ff2a5f) !important;
font-size: 14px !important;
width: 16px !important;
text-align: center !important;
}
.mob-nav-list li a:hover,
.mob-nav-list li a:active {
background: rgba(255, 255, 255, 0.12) !important;
color: #fff !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.mob-nav-chips {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.mob-nav-chips li a {
display: inline-flex !important;
align-items: center !important;
padding: 8px 16px !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: var(--r-pill, 999px) !important;
color: var(--fg-muted, #ccc) !important;
font-size: 13px !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
}
.mob-nav-chips li a:hover,
.mob-nav-chips li a:active {
background: var(--accent-grad, linear-gradient(135deg, #ff2a5f, #ce1025)) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 4px 12px rgba(206, 16, 37, 0.4) !important;
}
}
@media (max-width: 480px) {
body { font-size: 14.5px; }
.center { padding: 0 4px !important; }
.col-cont { padding: 6px 4px !important; }
.main-items.grid-thumb,
.main-items.grid-thumb > #dle-content { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.grid-thumb { padding: 12px; }
.kino-item { padding: 14px; margin: 0; }
}
/* Печать */
@media print {
.top-wr, .col-side, .bottom, .to-top, .owl-buttons, .k-link, .tabs { display: none !important; }
body { background: #fff; color: #000; }
body::before, body::after { display: none; }
}
/* Пункт «Предложить хентай» в меню разделов.
Он переехал из боковой колонки и по смыслу не раздел каталога, а действие,
поэтому не заливаем акцентом (так помечен текущий раздел), а обводим
акцентной рамкой — заметно, но с активным пунктом не путается. */
/* Меню разделов app.js переносит в .main-menu.mob-menu, поэтому селектор
не привязан к исходному контейнеру — иначе акцент теряется после переноса. */
.second-menu li a.is-offer,
.main-menu li a.is-offer {
color: var(--accent);
background: var(--accent-soft);
border-color: var(--accent);
}
.second-menu li a.is-offer:hover,
.main-menu li a.is-offer:hover {
color: #fff;
background: var(--accent-grad);
border-color: transparent;
box-shadow: var(--sh-glow);
}
/* Иконки в меню шапки: чуть мельче текста и приглушены, чтобы читалась подпись,
а не значок. У активного пункта и у ссылки под курсором — цвет текста. */
.first-menu li a .fa,
.second-menu li a .fa {
font-size: .92em;
opacity: .75;
transition: opacity var(--t) var(--e-out);
}
.first-menu li a:hover .fa,
.second-menu li a:hover .fa,
.first-menu li a.active .fa,
.second-menu li a.active .fa { opacity: 1; }
/* =====================================================================
Панель над списком: вид (список / плитка) и сортировка
===================================================================== */
.list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin: 0 0 18px;
padding: 10px 16px;
border-radius: var(--r-lg, 12px);
background: var(--surface-2, rgba(43, 43, 43, 0.6));
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}
.view-switch {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border-radius: var(--r-pill, 999px);
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}
button.view-switch__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 30px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--r-pill, 999px);
background: none;
color: var(--fg-dim, #888);
font-size: 14px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background var(--t) var(--e-out), color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
button.view-switch__btn:hover {
color: var(--fg, #fff);
background: rgba(255, 255, 255, .08);
}
button.view-switch__btn.is-active {
color: #fff !important;
background: var(--accent-grad, linear-gradient(135deg, #ff2a5f, #ce1025)) !important;
box-shadow: 0 2px 10px rgba(206, 16, 37, 0.45) !important;
}
.sort-box {
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.sort-box__label {
font-size: 13px;
font-weight: 500;
color: var(--fg-dim, #888);
}
.sort-box__select {
height: 34px;
padding: 0 32px 0 14px;
border-radius: var(--r-pill, 999px);
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
background: rgba(0, 0, 0, 0.35)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23ff2a5f'/%3E%3C/svg%3E")
no-repeat right 10px center / 16px 16px;
color: var(--fg, #eee);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.sort-box__select:hover,
.sort-box__select:focus {
border-color: var(--accent, #ce1025);
box-shadow: 0 0 10px rgba(206, 16, 37, 0.3);
outline: none;
}
.sort-box__select option {
background: #232323;
color: #eee;
padding: 6px 10px;
}
.sorting {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 18px !important;
margin: 0 0 16px 0 !important;
border-bottom: 1px solid var(--glass-border) !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.sorting-menu {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.grid-select {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
position: static !important;
float: none !important;
margin-left: auto !important;
}
.grid-select span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 32px !important;
border-radius: var(--r-md, 8px) !important;
background: var(--glass-light, rgba(255,255,255,0.05)) !important;
border: 1px solid var(--glass-border, rgba(255,255,255,0.1)) !important;
color: var(--fg-muted) !important;
cursor: pointer !important;
float: none !important;
margin: 0 !important;
font-size: 14px !important;
transition: all 0.2s ease !important;
}
.grid-select span:hover {
color: var(--fg) !important;
background: rgba(255, 255, 255, 0.12) !important;
}
.grid-select span.current {
color: #fff !important;
background: var(--accent-grad) !important;
border-color: transparent !important;
box-shadow: var(--sh-glow) !important;
}
/* =====================================================================
Списочный вид: та же карточка, что и в плитке, но развёрнутая
===================================================================== */
.main-items.list-view,
.main-items.grid-list,
.grid-list {
display: block !important;
padding: 0 !important;
}
.main-items.list-view .kino-item,
.main-items.grid-list .kino-item,
.grid-list .kino-item {
width: auto !important;
float: none !important;
margin: 0 0 14px !important;
padding: 14px !important;
border-radius: var(--r-lg) !important;
border: 1px solid var(--glass-border);
background: var(--surface-2);
box-shadow: var(--sh-2);
transition: border-color var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.main-items.list-view .kino-item:hover {
border-color: var(--glass-hi);
transform: translateY(-2px);
}
/* В плитке эти блоки скрыты (styles222.css), в списке они и есть содержание */
.main-items.list-view .kino-text,
.main-items.list-view .kino-date { display: block; }
.main-items.list-view .kino-inner {
display: flex;
align-items: flex-start;
gap: 16px;
}
.main-items.list-view .kino-img {
flex: none;
width: 180px;
border-radius: var(--r-md, 10px);
overflow: hidden;
}
.main-items.list-view .kino-img img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2 / 3;
object-fit: cover;
}
.main-items.list-view .kino-text {
flex: 1 1 auto;
min-width: 0;
}
.main-items.list-view .kino-title { margin-bottom: 4px; }
.main-items.list-view .kino-title h2 { font-size: 17px; line-height: 1.3; }
.main-items.list-view .kino-date {
margin-bottom: 10px;
font-size: 12px;
color: var(--fg-dim);
}
.main-items.list-view .kino-lines {
margin: 10px 0 12px;
padding: 0;
list-style: none;
font-size: 13px;
line-height: 1.6;
}
.main-items.list-view .kino-lines li { display: flex; gap: 8px; }
.main-items.list-view .kino-lines .k-label { flex: none; min-width: 150px; color: var(--fg-dim); }
.main-items.list-view .kino-lines strong { font-weight: 600; }
.main-items.list-view .kino-desc {
margin-bottom: 10px;
font-size: 13.5px;
line-height: 1.55;
color: var(--fg-muted);
}
.main-items.list-view .k-link { display: inline-flex; }
/* Своя пагинация ajax-выдачи */
.hs-pager {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 16px 0 4px;
}
.hs-pager .chip[disabled] { opacity: .4; cursor: default; }
.hs-pager__gap { color: var(--fg-dim); padding: 0 2px; }
@media (max-width: 768px) {
.view-switch {
display: none !important;
}
.list-toolbar {
justify-content: flex-end !important;
margin-bottom: 12px !important;
}
.sort-box {
margin-left: auto !important;
}
.sort-box__label {
display: none !important;
}
.main-items.list-view {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
gap: 16px 12px !important;
}
.main-items.list-view .kino-item {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
.main-items.list-view .kino-inner {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 8px !important;
}
.main-items.list-view .kino-img {
width: 100% !important;
aspect-ratio: 2 / 3 !important;
height: auto !important;
}
.main-items.list-view .kino-desc,
.main-items.list-view .kino-lines,
.main-items.list-view .k-link {
display: none !important;
}
.main-items.list-view .kino-text {
display: flex !important;
flex-direction: column !important;
}
}
/* =====================================================================
Фоновая иллюстрация
Слой лежит НИЖЕ градиента (у body::before z-index -2, здесь -3), поэтому
цветные пятна темы остаются главными, а картинка читается фоном.
Под общий стиль приглушаем: обесцвечиваем, гасим яркость и уводим низ
в прозрачность маской — иначе картинка спорит с карточками за внимание
и текст на ней теряется.
Файл: templates/hentaro/images/bg-hero.jpg. Если его нет — слой просто
пустой, вёрстка не меняется.
===================================================================== */
html::before {
content: '';
position: fixed;
inset: 0;
z-index: -3;
/* Картинку так и не залили: файла нет, слой всё равно пустой, а запрос
давал 404 в консоли на каждой загрузке. Вернуть — раскомментировать
строку и положить bg-hero.jpg в images/.
background: url('../images/bg-hero.jpg') no-repeat center top / cover; */
filter: grayscale(.4) brightness(.5) saturate(.8);
opacity: .55;
/* Низ уводим в прозрачность: контент начинается сразу под шапкой,
и под ним картинка только мешала бы */
-webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.75) 42%, transparent 88%);
mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.75) 42%, transparent 88%);
pointer-events: none;
}
/* На узких экранах картинка почти не видна за контентом, а перерисовка
фиксированного слоя при скролле заметно дороже — отключаем */
@media (max-width: 900px) {
html::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
html::before { background-attachment: scroll; }
}
/* ==========================================================================
Плавающие и фиксированные рекламные блоки (ExoClick Sticky & Outstream)
========================================================================== */
/* 1. Плавающий видеоплеер (Outstream / Stripchat / LoverKiss) — всегда фиксирован в правом нижнем углу */
div[class*="_main_outstream"],
div[id*="outstream"],
div[class*="outstream"],
div[class*="exo_outstream"],
div[class*="_effect_exo"] {
position: fixed !important;
right: 20px !important;
bottom: 20px !important;
left: auto !important;
top: auto !important;
width: auto !important;
max-width: 400px !important;
z-index: 999999 !important;
}
div[class*="_effect_exo_wrapper"] {
max-width: 100% !important;
}
/* 2. Плавающий / липкий баннер в правом верхнем углу (Sticky Desktop 3374061) */
.adv-sticky-right,
ins.eas6a97888e[data-zoneid="3374061"],
[data-zoneid="3374061"],
div[class*="_main_sticky"],
div[class*="sticky_banner"] {
position: fixed !important;
top: 90px !important;
right: 20px !important;
left: auto !important;
bottom: auto !important;
z-index: 99998 !important;
}
@media (max-width: 1200px) {
.adv-sticky-right,
ins.eas6a97888e[data-zoneid="3374061"],
[data-zoneid="3374061"] {
display: none !important;
}
}
/* ===========================================================================
Селекторы «Год / Студия / Режиссёр» в сайдбаре
Перенос блоков #sort-film и #sort-serial из боевого шаблона anime-share3.
=========================================================================== */
.hs-jump__row {
display: block;
margin-bottom: 12px;
}
.hs-jump__row:last-child { margin-bottom: 0; }
.hs-jump__label {
display: block;
margin-bottom: 5px;
font-size: 12px;
letter-spacing: .02em;
color: var(--fg-dim, #9aa0a6);
}
select.hs-jump {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 8px 30px 8px 11px;
font: inherit;
font-size: 13px;
line-height: 1.3;
color: var(--fg, #e8eaed);
background-color: var(--glass, rgba(255, 255, 255, .04));
border: 1px solid var(--glass-border, rgba(255, 255, 255, .1));
border-radius: 8px;
cursor: pointer;
/* стрелка своя: системную у appearance:none браузер убирает */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239aa0a6'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px 16px;
}
select.hs-jump:hover { border-color: var(--accent, #ff2a5f); }
select.hs-jump:focus {
outline: none;
border-color: var(--accent, #ff2a5f);
}
/* Список раскрывается системным виджетом — там своя палитра, задаём явно */
select.hs-jump option { color: #e8eaed; background: #232323; }
/* ===========================================================================
Слайдер ExoClick — прилипить к экрану
---------------------------------------------------------------------------
Формат приходит в .adv-box--content (зона 2852744) и по умолчанию встаёт
в поток страницы: блок уезжает вместе с телом и упирается в футер.
Выводим его из потока и прижимаем к левому нижнему углу окна — тогда он
следует за прокруткой. Правый нижний угол уже занят outstream-правилом
выше по файлу, поэтому слайдер уходит влево, чтобы они не перекрывались.
Селекторы — по стабильным классам самого ExoClick: id у контейнера
генерируется случайным (aBObJxMQ и т.п.), опираться на него нельзя.
=========================================================================== */
div[class*="exo-video-slider-container-wrapper"],
div[id*="exo-video-slider-content"] > .exo_wrapper {
position: fixed !important;
right: 20px !important;
bottom: 20px !important;
top: auto !important;
left: auto !important;
width: auto !important;
max-width: 360px !important;
z-index: 999998 !important;
}
/* Крестик закрытия у этого формата абсолютный внутри обёртки — не даём ему
уехать за пределы окна вместе с фиксированным родителем. */
div[class*="exo-video-slider-container-wrapper"] .exo_close {
z-index: 1 !important;
}
@media (max-width: 1000px) {
div[class*="exo-video-slider-container-wrapper"] {
position: static !important;
max-width: 100% !important;
}
}
/* ===========================================================================
Выдача поиска — приведение к общему оформлению
---------------------------------------------------------------------------
DLE отдаёт страницу поиска со своей вёрсткой: белые карточки .sres-wrap,
жёлтая плашка .berrors, форма таблицей с кнопками input.bbcodes.
Всё это описано в engine.css светлой палитрой.
Правила ниже намеренно вложены в .search-page: класс .bbcodes носит и
панель редактора комментариев, .berrors выводится и в других разделах —
без ограничения областью мы бы задели их тоже.
=========================================================================== */
.search-page { margin-bottom: 20px; }
.search-page .sub-title { margin-bottom: 18px; }
.search-page .sub-title h1 {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: var(--fg);
}
/* --- Форма запроса ------------------------------------------------------- */
.search-page .searchtable {
padding: 6px 4px;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--r-md);
-webkit-backdrop-filter: blur(var(--blur));
backdrop-filter: blur(var(--blur));
}
.search-page .searchtable table { width: 100%; border-collapse: collapse; }
.search-page .searchtable td { border: 0; }
.search-page input.textin,
.search-page #searchinput {
width: 100% !important;
max-width: 420px;
box-sizing: border-box;
padding: 10px 13px;
font: inherit;
font-size: 14px;
color: var(--fg);
background: var(--glass-light);
border: 1px solid var(--glass-border);
border-radius: var(--r-sm);
transition: border-color var(--t-fast) var(--e-out);
}
.search-page input.textin:focus,
.search-page #searchinput:focus {
outline: none;
border-color: var(--accent);
}
.search-page input.textin::placeholder { color: var(--fg-dim); }
.search-page input.bbcodes {
min-width: 0;
margin: 0 8px 0 0;
padding: 9px 18px;
font: inherit;
font-size: 13.5px;
font-weight: 600;
color: var(--fg);
background: var(--glass-light);
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
cursor: pointer;
transition: background var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.search-page input.bbcodes:hover {
background: var(--glass-hi);
border-color: var(--accent);
}
/* «Начать поиск» — основное действие */
.search-page input#dosearch {
color: #fff;
background: var(--accent);
border-color: transparent;
}
.search-page input#dosearch:hover {
background: var(--accent);
filter: brightness(1.1);
}
/* Расширенный поиск: поля, легенды, чекбоксы */
.search-page fieldset,
.search-page #searchtable fieldset {
color: var(--fg-muted);
background: var(--glass-light);
border: 1px solid var(--glass-border) !important;
border-radius: var(--r-sm);
}
.search-page fieldset legend { color: var(--fg); font-size: 12px; }
.search-page select,
.search-page textarea {
padding: 7px 10px;
font: inherit;
font-size: 13px;
color: var(--fg);
background: var(--glass-light);
border: 1px solid var(--glass-border);
border-radius: var(--r-xs);
}
.search-page select option { color: #e8eaed; background: #232323; }
/* --- Плашка «Информация» ------------------------------------------------- */
.search-page .berrors {
margin: 18px 0;
padding: 13px 17px;
color: var(--fg-muted);
background: var(--accent-soft);
border: 1px solid var(--glass-border);
border-left: 3px solid var(--accent);
border-radius: var(--r-sm);
}
.search-page .berrors b { color: var(--fg); }
.search-page .berrors a { color: var(--accent); }
/* --- Карточки результатов ------------------------------------------------ */
.sres-wrap {
margin-bottom: 12px;
padding: 14px 14px 14px 226px;
color: var(--fg-muted);
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--r-md);
transition: border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.sres-wrap:nth-child(2n) { background: var(--glass); }
.sres-wrap:hover {
border-color: var(--accent);
box-shadow: var(--sh-2);
transform: translateY(-1px);
}
.sres-img { margin-left: -212px; width: 196px; }
.sres-img img { border-radius: var(--r-sm); }
.sres-date {
left: 0;
top: 0;
padding: 5px 9px;
font-size: 11px;
color: var(--fg);
background: rgba(0, 0, 0, .72);
border-radius: var(--r-sm) 0 var(--r-sm) 0;
}
.sres-text { color: var(--fg-muted); }
.sres-text h2 {
margin-bottom: 10px;
font-size: 17px;
line-height: 1.3;
color: var(--fg);
}
.sres-wrap:hover .sres-text h2 { color: var(--accent); }
.sres-desc {
font-size: 13.5px;
line-height: 1.55;
color: var(--fg-dim);
}
@media (max-width: 768px) {
.sres-wrap { padding: 12px; }
.sres-img { margin-left: 0; }
/* Подпись поверх постера читается только на тёмной подложке */
.sres-text {
padding: 10px;
background: rgba(0, 0, 0, .72);
border-radius: 0 0 var(--r-md) var(--r-md);
}
.sres-text h2 { color: #fff; }
}
/* ===========================================================================
Слайдер главной: круглые кнопки «жидкое стекло»
---------------------------------------------------------------------------
Область — только .carousel-wr (лента на главной). Остальные карусели
(похожие работы, боковая, скриншоты) сохраняют прежние стрелки.
«Жидкое стекло» здесь — это четыре слоя на одной кнопке:
1) сильное размытие с подъёмом насыщенности — подложка «оживает»;
2) полупрозрачная белая заливка вместо плотной --glass-strong;
3) внутренняя светлая кромка (inset box-shadow) — блик по краю стекла;
4) диагональный блик ::before поверх — отражение.
Кнопки видны всегда, а не только при наведении: лента больше не крутится
сама, и стрелка стала единственным способом её листать.
=========================================================================== */
.carousel-wr .owl-theme .owl-controls .owl-buttons div {
width: 46px;
height: 46px;
opacity: 1;
overflow: hidden;
color: #fff;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .22);
/* !important здесь вынужденно: в engine.css у .owl-next скругление
50% 0 0 50% помечено !important, и никакая специфичность его не берёт —
правая стрелка оставалась полукруглой. */
border-radius: 50% !important;
-webkit-backdrop-filter: blur(18px) saturate(190%);
backdrop-filter: blur(18px) saturate(190%);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, .38),
inset 0 -1px 2px rgba(0, 0, 0, .28),
0 6px 18px -6px rgba(0, 0, 0, .55);
margin-top: -23px;
transition:
background var(--t-fast) var(--e-out),
border-color var(--t-fast) var(--e-out),
transform var(--t-fast) var(--e-out);
}
/* Блик. pointer-events: none — иначе перекрывает саму кнопку и клик не проходит */
.carousel-wr .owl-theme .owl-controls .owl-buttons div::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(145deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 62%);
}
.carousel-wr .owl-theme .owl-controls .owl-buttons div .fa {
position: relative;
z-index: 1;
font-size: 15px;
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.carousel-wr .owl-theme .owl-controls .owl-buttons div:hover {
background: rgba(255, 255, 255, .18);
border-color: rgba(255, 255, 255, .38);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, .48),
inset 0 -1px 2px rgba(0, 0, 0, .28),
var(--sh-glow);
transform: scale(1.06);
}
.carousel-wr .owl-theme .owl-controls .owl-buttons div:active { transform: scale(.97); }
/* Отключаем правило прозрачности по ховеру родителя из блока выше —
кнопки нужны постоянно */
.carousel-wr:hover .owl-buttons div { opacity: 1; }
/* Safari/Firefox без backdrop-filter: без подложки стекло выглядит пустым */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.carousel-wr .owl-theme .owl-controls .owl-buttons div { background: rgba(40, 40, 40, .82); }
}
/* ===========================================================================
Telegram: плавающая кнопка и блок в полной новости
---------------------------------------------------------------------------
Оба перенесены из anime-share3 и переписаны:
— вместо css/tg4.css (отдельный запрос) правила лежат здесь;
— вместо иконки Font Awesome с bootstrapcdn (внешний CDN на каждой
странице) — встроенный SVG прямо в разметке;
— вместо inline-стилей в
— классы и переменные шаблона;
— «волны» вокруг кнопки рисует один псевдоэлемент вместо двух,
и они выключаются при prefers-reduced-motion.
Фирменный #0088cc сохранён: по нему кнопку узнают.
=========================================================================== */
/* --- Плавающая кнопка ---------------------------------------------------- */
.tg-float {
position: fixed;
right: 22px;
bottom: 80px; /* над кнопкой «наверх», та сидит на bottom: 22px */
z-index: 700;
width: 46px;
height: 46px;
display: grid;
place-items: center;
color: #fff;
background: #0088cc;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--r-pill);
box-shadow: var(--sh-2);
transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.tg-float svg { position: relative; z-index: 1; }
.tg-float:hover {
color: #fff;
transform: scale(1.07);
box-shadow: 0 8px 26px -8px rgba(0, 136, 204, .85);
}
.tg-float:active { transform: scale(.96); }
/* Расходящаяся волна. Один псевдоэлемент вместо двух из tg4.css:
вторая волна там отличалась только задержкой, а стоила лишнего слоя. */
.tg-float::before {
content: "";
position: absolute;
inset: -14px;
border: 1px solid #0088cc;
border-radius: 50%;
opacity: 0;
pointer-events: none;
animation: tg-wave 2.4s linear infinite;
}
@keyframes tg-wave {
0% { transform: scale(.62); opacity: 0; }
35% { opacity: .8; }
100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.tg-float::before { animation: none; }
}
/* На узких экранах внизу справа уже теснится кнопка «наверх» —
уводим самолётик выше, чтобы они не наезжали друг на друга. */
@media (max-width: 480px) {
.tg-float { width: 42px; height: 42px; bottom: 74px; right: 16px; }
}
/* --- Блок в полной новости ----------------------------------------------- */
.tg-cta {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0;
padding: 13px 18px;
color: var(--fg);
background: linear-gradient(115deg, rgba(0, 136, 204, .22) 0%, var(--glass) 62%);
border: 1px solid var(--glass-border);
border-left: 3px solid #0088cc;
border-radius: var(--r-md);
-webkit-backdrop-filter: blur(var(--blur));
backdrop-filter: blur(var(--blur));
transition: border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.tg-cta:hover {
color: var(--fg);
border-color: #0088cc;
transform: translateY(-1px);
}
.tg-cta svg { flex: none; color: #29a7e3; }
.tg-cta__text {
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}
.tg-cta__hint {
margin-left: auto;
font-size: 12.5px;
color: var(--fg-dim);
}
@media (max-width: 560px) {
.tg-cta { flex-wrap: wrap; }
.tg-cta__hint { margin-left: 0; width: 100%; }
}
/* ===========================================================================
Инфоблок полной новости: единый ряд жанров и уплотнение строк
=========================================================================== */
/* Жанры, предложения на голосовании и кнопка «+» в одной ленте.
display: contents у вложенных списков убирает их собственные боксы,
и чипсы обоих становятся прямыми детьми ряда — только так «+» встаёт
вплотную за последним жанром, а не с новой строки. */
.xf-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
margin: 8px 0 0;
}
.xf-row > .xf-chips { display: contents; }
/* hidden на элементе с display:contents браузером не соблюдается —
гасим пустой список предложений явно */
.xf-row > .xf-chips[hidden] { display: none; }
.xf-row > .gf__add { margin-left: 2px; }
/* Строки студии и режиссёра внутри общего списка характеристик */
.kino-lines .k-line--chips .xf-chips { margin: 0; gap: 4px; }
.kino-lines .k-line--chips .xf-chips a { height: 22px; padding: 0 9px; }
/* --- Уплотнение -----------------------------------------------------------
Просили «строчки чуть компактнее друг к другу»: режем вертикальные
отступы примерно вдвое, размеры шрифта не трогаем — читаемость та же. */
.xf-block { margin: 14px 0; }
.xf-block__title { margin-bottom: 6px; }
.xf-chips { margin: 8px 0; }
/* На узких экранах колонка подписей съедала бы место у значения —
складываем строку в один столбец. */
@media (max-width: 560px) {
.kino-lines li {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
}
/* ===========================================================================
Инфоблок: постер и характеристики двумя настоящими колонками
---------------------------------------------------------------------------
Постер плавал (float: left), и список характеристик его обтекал: строки
выше нижнего края постера были уже и начинались правее, а те, что ниже —
от левого края блока. Отсюда «Студия» и «Режиссёр» стояли не в одной
колонке с остальными, а длинные названия ломались на две строки.
Грид, а не флекс: во флексе список характеристик не помещался рядом
с постером и переносился под него. Здесь постер занимает первую колонку
на всю высоту, а всё остальное строго во второй — сколько бы блоков
там ни было и какой бы высоты ни был постер.
=========================================================================== */
.kino-desc.full-text {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 0 20px;
align-items: start;
}
.kino-desc.full-text > .story-poster {
grid-column: 1;
grid-row: 1 / span 99; /* -1 у неявных строк не работает, поэтому span */
float: none;
margin: 0;
max-width: 100%;
}
.kino-desc.full-text > *:not(.story-poster) {
grid-column: 2;
min-width: 0;
}
/* Без постера (есть галерея [xfvalue_poster2]) колонка не нужна */
.kino-desc.full-text:not(:has(> .story-poster)) {
grid-template-columns: minmax(0, 1fr);
}
.kino-desc.full-text:not(:has(> .story-poster)) > * { grid-column: 1; }
@media (max-width: 560px) {
.kino-desc.full-text {
grid-template-columns: minmax(0, 1fr);
}
.kino-desc.full-text > .story-poster {
grid-row: auto;
margin-bottom: 14px;
}
.kino-desc.full-text > *:not(.story-poster) { grid-column: 1; }
}
/* ===========================================================================
Гео-заглушка вместо плеера (DLE Country Filter v2.0)
---------------------------------------------------------------------------
Показывается только гостю из закрытой страны. Занимает то же место, что
плеер, и держит те же пропорции 16:9 — страница не «прыгает» при входе.
=========================================================================== */
.geo-lock {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
min-height: 220px;
margin: 0 0 16px;
padding: 22px 24px;
color: var(--fg);
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
-webkit-backdrop-filter: blur(var(--blur));
backdrop-filter: blur(var(--blur));
}
.geo-lock__ico {
flex: none;
display: grid;
place-items: center;
width: 46px;
height: 46px;
color: var(--warn);
background: var(--glass-light);
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
}
.geo-lock__ico .fa { font-size: 20px; }
.geo-lock__body { flex: 1 1 260px; min-width: 0; }
.geo-lock__title {
margin-bottom: 5px;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.geo-lock__text {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--fg-dim);
}
.geo-lock__btn {
flex: none;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--accent);
border-radius: var(--r-pill);
transition: filter var(--t-fast) var(--e-out);
}
.geo-lock__btn:hover { color: #fff; filter: brightness(1.1); }
@media (max-width: 560px) {
.geo-lock { padding: 18px; }
.geo-lock__btn { width: 100%; text-align: center; }
}
/* Иконки входа и регистрации в шапке.
В styles222.css под @media (max-width:760px) висит `.log-buts i {position:relative; top:5px}` —
нудж родом из времён, когда кнопка не центровала содержимое сама. Сейчас у `.log-buts a`
стоит flex с align-items:center при высоте 38px, и нудж уводит иконку на 5px вниз:
отступы получаются 12/2 вместо 7/7. Возвращаем иконку в поток; специфичности
`.log-buts a .fa` (0,2,1) хватает, чтобы перебить `.log-buts i` (0,1,1) без !important. */
.log-buts a .fa {
position: static;
top: auto;
}
/* Постер новости на мобильных — по центру, как на страницах со слайдером.
У картинки float:left и margin-right:15px: на десктопе вокруг неё обтекает текст,
но в узкой колонке она просто прижимается влево, оставляя 156px пустоты справа.
float игнорирует и text-align:center у родителя, и margin:auto — поэтому снимаем
сам float, и только на мобильных, чтобы не сломать обтекание на десктопе. */
@media (max-width: 767px) {
.story-poster img {
float: none;
display: block;
margin: 0 auto 10px;
}
}
/* Первый слайд карусели показываем ещё до инициализации Owl.
Правило выше (#owl-carou:not(.owl-carousel) > .carou {visibility:hidden})
ставилось против мигания стопкой, но заодно держало невидимой LCP-картинку:
она скачивалась рано, а отрисовывалась только после выполнения JS.
Селектор с :first-child специфичнее, поэтому перебивает его. */
#owl-carou:not(.owl-carousel) > .carou:first-child {
visibility: visible;
}
/* Ширина первого слайда до инициализации — та же, что Owl выставит после.
Брейкпоинты повторяют itemsCustom из app.js:
[[0,2],[470,3],[590,4],[760,5],[950,6],[1220,7]].
Без этого открытый слайд растягивался во всю ширину и мигал. */
#owl-carou:not(.owl-carousel) > .carou:first-child { width: 50%; }
@media (min-width: 470px) { #owl-carou:not(.owl-carousel) > .carou:first-child { width: 33.3333%; } }
@media (min-width: 590px) { #owl-carou:not(.owl-carousel) > .carou:first-child { width: 25%; } }
@media (min-width: 760px) { #owl-carou:not(.owl-carousel) > .carou:first-child { width: 20%; } }
@media (min-width: 950px) { #owl-carou:not(.owl-carousel) > .carou:first-child { width: 16.6667%; } }
@media (min-width: 1220px) { #owl-carou:not(.owl-carousel) > .carou:first-child { width: 14.2857%; } }
/* --- Студии: чипсы-ссылки -------------------------------------------------
Жанровая чипса .gf-chip — это контейнер с кнопками + и −, здесь же сама
чипса является ссылкой. Наследуем её вид, но убираем место под кнопки. */
.gf-chip--link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
text-decoration: none;
color: inherit;
}
.gf-chip--link:hover { background: var(--surface-3, rgba(255,255,255,.06)); }
.gf-chip--link .gf-chip__count { opacity: .6; font-size: 11px; }
.gf--studios { margin-top: 14px; }
/* Сводная страница /studio.html */
.studios-lead { margin: 0 0 16px; color: var(--fg-muted, #9aa0a6); }
.studios-abc {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 18px;
position: sticky;
top: 0;
z-index: 2;
padding: 8px 0;
background: var(--bg, #0c0d11);
}
.studios-abc a {
min-width: 26px;
text-align: center;
padding: 3px 6px;
border-radius: var(--r-sm, 6px);
background: var(--surface-2, rgba(255,255,255,.04));
text-decoration: none;
}
.studios-letter { margin: 18px 0 8px; font-size: 18px; }
.studios-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* --- Хронология франшизы -------------------------------------------------
Список частей по порядку выхода. Текущая часть не ссылка — ссылка на
страницу, где ты уже находишься, только сбивает. */
.hs-chrono {
margin: 18px 0;
padding: 14px 16px;
border-radius: var(--r-lg, 12px);
background: var(--glass, rgba(255,255,255,.03));
border: 1px solid var(--glass-border, rgba(255,255,255,.06));
}
.hs-chrono .kino-h { margin: 0 0 10px; }
.hs-chrono__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.hs-chrono__item {
display: flex;
align-items: baseline;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.05));
}
.hs-chrono__item:last-child { border-bottom: 0; }
.hs-chrono__num {
flex: 0 0 auto;
min-width: 28px;
font-size: 12px;
opacity: .55;
}
.hs-chrono__title { flex: 1 1 auto; }
a.hs-chrono__title { text-decoration: none; }
a.hs-chrono__title:hover { text-decoration: underline; }
.hs-chrono__item.is-current { background: rgba(235, 51, 68, .07); border-radius: 6px; padding-left: 6px; }
.hs-chrono__item.is-current .hs-chrono__title { font-weight: 600; }
.hs-chrono__year { flex: 0 0 auto; font-size: 12px; opacity: .55; }
/* --- Owl не должен гасить карусель при инициализации ---------------------
В vendor.js при init выполняется this.$elem.css({opacity:0}), а в конце
сборки — fadeIn(400). Постер первого слайда к этому моменту уже скачан
(44 мс) и отрисован, но Owl гасит контейнер целиком и проявляет заново —
а Lighthouse засчитывает LCP по ПОСЛЕДНЕЙ отрисовке. Отсюда LCP 5.3 с
при мгновенно загруженной картинке.
!important перебивает инлайновый стиль, который ставит jQuery, поэтому
контейнер не гаснет ни на кадр. Анимация проявления теряется — и хорошо:
она и была тем самым «миганием». display задаём явно: класс owl-carousel
в engine.css объявлен как display:none, и между его навешиванием и
fadeIn есть окно, когда лента невидима. */
#owl-carou { opacity: 1 !important; }
#owl-carou.owl-carousel { display: block; }
/* --- Задержка тапа 300 мс (INP) ------------------------------------------
Мобильный Chrome ждёт возможного двойного тапа, прежде чем отдать клик.
На каждое касание это 250–300 мс, которые целиком уходят в INP — тот
самый показатель, из-за которого пришло письмо Search Console.
touch-action: manipulation отключает двойной тап (зум щипком остаётся). */
html, body, a, button, input, select, textarea, label,
[role="button"], [role="tab"],
.kino-item, .k-link, .k-poster, .RlItem, .hr-btn, .gf-chip,
.owl-item, .carou, .chips, .xf-chips a, .bot-menu a, .to-top {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Ленте карусели оставляем вертикальную прокрутку страницы пальцем */
#owl-carou, #owl-carou .owl-wrapper { touch-action: pan-y; }
/* ---------- suite.css ---------- */
/* --------------------------------------------------------------------------
0. Сброс чужих стилей для всех кнопок набора
В styles222.css есть общее правило
button:not(.color-btn), input[type=submit] { height:40px; line-height:40px;
padding:0 15px; border-radius:4px }
со специфичностью 0,1,1 — оно перебивает одиночные классы вроде .hs-pchip__ok
и растягивает наши компактные кнопки до 40px. Плюс группа .grey задаёт им
серый градиент. Поэтому сбрасываем всё явно и с запасом по специфичности.
-------------------------------------------------------------------------- */
button.gf__add,
button.gf-chip__plus,
button.gf-chip__minus,
button.gf__reset,
button.hs-pchip__plus,
button.hs-pchip__ok,
button.hs-pchip__del,
button.hs-pl-btn,
button.hs-pl__item,
button.hs-modal__close,
button.hs-plm__tab,
button.hs-plm__del,
button.gf-tag,
button.gf-h-tab,
button.chips__more {
height: auto;
min-height: 0;
min-width: 0;
line-height: 1;
padding: 0;
margin: 0;
border-radius: 0;
background-image: none;
box-shadow: none;
text-shadow: none;
font: inherit;
appearance: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
/* ==========================================================================
suite.css — оформление модулей Hentaro Suite
Фильтр жанров, голосование, плейлисты, лайки и ответы в комментариях.
Использует токены из theme.css.
========================================================================== */
/* --------------------------------------------------------------------------
1. Фильтр жанров в боковой колонке
-------------------------------------------------------------------------- */
.gf { margin-bottom: 4px; }
.gf__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.gf__title {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--fg-dim);
}
.xf-block__title .gf__add,
.gf__head .gf__add,
button.gf__add {
/* Явный сброс: общее правило styles222 `button:not(.color-btn)
{height:40px; line-height:40px; padding:0 15px}` специфичнее, чем
одиночный класс, и растягивало кнопку до 40px. */
width: 24px;
height: 24px;
min-width: 0;
line-height: 1;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
display: grid; place-items: center;
flex: none;
border-radius: var(--r-pill);
border: 1px dashed var(--glass-border);
background: transparent;
color: var(--fg-dim);
cursor: pointer;
padding: 0;
transition: all var(--t) var(--e-out);
}
.gf__add:hover {
color: #fff;
background: var(--accent-grad);
border-color: transparent;
border-style: solid;
transform: rotate(90deg);
}
.gf__add .fa { font-size: 12px; }
/* Выбранные условия */
.gf__chosen {
margin-bottom: 10px;
padding: 8px;
border-radius: var(--r-md);
background: rgba(255,255,255,.04);
border: 1px solid var(--glass-border);
}
.gf__chosen-list { display: flex; flex-wrap: wrap; gap: 5px; }
.gf-tag {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 8px;
border-radius: var(--r-pill);
font: inherit;
font-size: 11.5px;
font-weight: 600;
line-height: 1;
color: #fff;
border: 0;
cursor: pointer;
transition: filter var(--t) var(--e-out);
}
.gf-tag:hover { filter: brightness(1.12); }
.gf-tag span { font-weight: 800; opacity: .85; }
.gf-tag .fa { font-size: 9px; opacity: .7; }
.gf-tag--inc { background: linear-gradient(118deg, #2ea36a, #35c07d); }
.gf-tag--exc { background: linear-gradient(118deg, #b3283f, #d8384f); }
.gf__reset {
margin-top: 8px;
padding: 0;
font: inherit;
font-size: 12px;
color: var(--fg-dim);
background: none;
border: 0;
cursor: pointer;
text-decoration: underline dotted;
}
.gf__reset:hover { color: var(--accent); }
/* Чипса жанра с двумя кнопками */
.gf__list { display: flex; flex-wrap: wrap; gap: 5px; }
.gf-chip {
display: inline-flex;
align-items: stretch;
flex: 0 1 auto;
max-width: 100%;
height: 26px;
border-radius: var(--r-pill);
overflow: hidden;
font-size: 12px;
font-weight: 600;
line-height: 1;
color: var(--fg-muted);
background: var(--glass-light);
border: 1px solid var(--glass-border);
transition: color var(--t-fast) var(--e-out), border-color var(--t) var(--e-out),
background var(--t) var(--e-out);
}
.gf-chip__name {
display: flex;
align-items: center;
padding: 0 4px 0 9px;
white-space: nowrap;
cursor: pointer;
flex: 1 1 auto;
justify-content: center;
}
.gf-chip__count {
display: flex;
align-items: center;
padding-right: 5px;
font-size: 10px;
font-weight: 700;
color: var(--fg-dim);
}
.gf__list .gf-chip__plus,
.gf__list .gf-chip__minus,
.gf-chip__plus,
.gf-chip__minus {
/* В styles222 есть общее `button:not(.color-btn) {height:40px;
line-height:40px; padding:0 15px; border-radius:4px}` — без явного
сброса кнопки разъезжались красными прямоугольниками поверх чипсы. */
width: 20px;
min-width: 0;
height: auto;
line-height: 1;
border-radius: 0;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
display: grid;
place-items: center;
flex: none;
padding: 0;
border: 0;
background: rgba(255,255,255,.05);
color: var(--fg-dim);
font: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.gf-chip__plus:hover { background: #2ea36a; color: #fff; }
.gf-chip__minus:hover { background: #b3283f; color: #fff; }
.gf-chip:hover { border-color: var(--glass-hi); color: var(--fg); }
/* Состояния */
.gf-chip.is-inc {
color: #fff;
border-color: transparent;
background: linear-gradient(118deg, #2ea36a, #35c07d);
box-shadow: 0 6px 18px -8px rgba(53,192,125,.7);
}
.gf-chip.is-exc {
color: #fff;
border-color: transparent;
background: linear-gradient(118deg, #b3283f, #d8384f);
box-shadow: 0 6px 18px -8px rgba(216,56,79,.7);
}
.gf-chip.is-inc .gf-chip__count,
.gf-chip.is-exc .gf-chip__count { color: rgba(255,255,255,.75); }
.gf-chip.is-inc .gf-chip__plus,
.gf-chip.is-exc .gf-chip__minus { background: rgba(0,0,0,.22); color: #fff; }
/* Зачёркиваем исключённый жанр — состояние читается без наведения */
.gf-chip.is-exc .gf-chip__name { text-decoration: line-through; opacity: .85; }
/* Пул голосования */
.gf__pool {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--glass-border);
}
.gf__pool-title {
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--warn);
margin-bottom: 8px;
}
.gf-chip--pool {
border-style: dashed;
border-color: rgba(255,176,32,.4);
background: rgba(255,176,32,.08);
}
.gf-chip--pool .gf-chip__plus { background: rgba(255,176,32,.2); color: var(--warn); }
.gf-chip--pool .gf-chip__plus:hover { background: var(--warn); color: #1a1a1a; }
.gf-chip__done {
display: grid;
place-items: center;
width: 20px;
flex: none;
color: var(--ok);
font-size: 11px;
background: rgba(50,193,122,.14);
}
/* --------------------------------------------------------------------------
1б. Горизонтальный интерактивный подбор (+ / −) над пагинацией
-------------------------------------------------------------------------- */
.gf-horizontal-bar {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px 20px;
margin: 28px 0 12px;
background: var(--glass);
-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
backdrop-filter: blur(var(--blur)) saturate(150%);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi);
box-sizing: border-box;
width: 100%;
}
.gf-h-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid var(--glass-border);
}
.gf-h-title-wrap {
display: flex;
align-items: center;
gap: 12px;
}
.gf-h-icon {
width: 36px;
height: 36px;
border-radius: var(--r-md);
background: var(--accent-soft);
color: var(--accent);
display: grid;
place-items: center;
font-size: 16px;
flex: none;
}
.gf-h-title {
font-size: 14px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--fg);
line-height: 1.2;
}
.gf-h-hint {
font-size: 12px;
color: var(--fg-dim);
margin-top: 2px;
}
.gf-plus-hint {
color: #35c07d;
font-weight: 800;
}
.gf-minus-hint {
color: #d8384f;
font-weight: 800;
}
.gf-h-tabs {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px;
border-radius: var(--r-pill);
background: var(--surface-2);
border: 1px solid var(--glass-border);
}
button.gf-h-tab {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 14px;
border-radius: var(--r-pill);
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
color: var(--fg-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: all var(--t-fast) var(--e-out);
}
button.gf-h-tab:hover {
color: var(--fg);
background: rgba(255, 255, 255, 0.08);
}
button.gf-h-tab.is-active {
color: #ffffff !important;
background: var(--accent-grad) !important;
box-shadow: 0 2px 8px var(--accent-glow) !important;
}
.gf-h-katalog-link {
display: inline-flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 16px;
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.gf-h-katalog-link:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px 0 var(--accent-glow);
}
.gf-h-content {
width: 100%;
}
.gf-chips-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.gf__chosen-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.gf__chosen-label {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--fg-dim);
}
/* Скрытие дубля при двойной навигации DLE */
#dle-content > .gf-horizontal-bar:first-child {
display: none;
}
@media (max-width: 900px) {
.gf-h-header {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.gf-h-tabs {
width: 100%;
justify-content: space-between;
}
.gf-h-tab {
flex: 1;
justify-content: center;
}
.gf-h-katalog-link {
justify-content: center;
width: 100%;
}
}
/* --------------------------------------------------------------------------
2. Выдача фильтра
-------------------------------------------------------------------------- */
.hs-result-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 12px 20px;
border-bottom: 1px solid var(--glass-border);
font-size: 13.5px;
color: var(--fg-dim);
}
.hs-result-count b { color: var(--fg); font-size: 15px; }
#grid.is-loading { opacity: .45; pointer-events: none; transition: opacity var(--t) var(--e-out); }
.hs-empty {
grid-column: 1 / -1;
padding: 40px 20px;
text-align: center;
color: var(--fg-dim);
font-size: 15px;
}
.hs-pager {
grid-column: 1 / -1;
display: flex;
justify-content: center;
gap: 8px;
padding: 18px 0 4px;
}
/* --------------------------------------------------------------------------
3. Уведомления
-------------------------------------------------------------------------- */
.hs-toasts {
position: fixed;
right: 18px;
bottom: 78px;
z-index: 950;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
max-width: min(360px, calc(100vw - 36px));
}
.hs-toast {
padding: 11px 15px;
border-radius: var(--r-md);
font-size: 13.5px;
font-weight: 600;
color: var(--fg);
background: var(--glass-strong);
-webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
backdrop-filter: blur(var(--blur)) saturate(170%);
border: 1px solid var(--glass-border);
box-shadow: var(--sh-3);
opacity: 0;
transform: translateX(20px);
transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.hs-toast.is-in { opacity: 1; transform: none; }
.hs-toast--ok { border-color: rgba(50,193,122,.45); }
.hs-toast--error { border-color: rgba(255,47,82,.5); }
/* --------------------------------------------------------------------------
4. Модальное окно
-------------------------------------------------------------------------- */
.hs-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
/* Прижимаем к верху, а не центрируем: при центрировании окно
пересчитывает позицию каждый раз, когда меняется высота содержимого
(переключение вкладок плейлистов, подгрузка списка) — и визуально
дёргается вверх-вниз. */
place-items: start center;
padding: 8vh 20px 20px;
overflow-y: auto;
background: rgba(5,6,9,.68);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity var(--t) var(--e-out);
}
.hs-modal.is-open { opacity: 1; }
.hs-modal__box {
width: min(460px, 100%);
max-height: 86vh;
overflow-y: auto;
border-radius: var(--r-lg);
background: var(--glass-strong);
-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
backdrop-filter: blur(var(--blur-lg)) saturate(180%);
border: 1px solid var(--glass-border);
box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi);
transform: translateY(14px) scale(.97);
transition: transform var(--t) var(--e-spring);
}
.hs-modal.is-open .hs-modal__box { transform: none; }
.hs-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid var(--glass-border);
}
.hs-modal__title { font-size: 16px; font-weight: 700; color: var(--fg); }
.hs-modal__close {
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: var(--r-pill);
border: 1px solid var(--glass-border);
background: var(--glass-light);
color: var(--fg-muted);
cursor: pointer;
padding: 0;
transition: all var(--t) var(--e-out);
}
.hs-modal__close:hover { color: #fff; background: var(--accent-grad); border-color: transparent; }
.hs-modal__body { padding: 18px; }
/* Формы в модалке */
.hs-form__hint { font-size: 13px; line-height: 1.55; color: var(--fg-dim); margin-bottom: 14px; }
.hs-form__hint b { color: var(--fg-muted); }
.hs-field { display: block; margin-bottom: 12px; }
.hs-field span {
display: block;
font-size: 12px;
color: var(--fg-dim);
margin-bottom: 5px;
}
.hs-field input {
width: 100%;
height: 40px;
padding: 0 14px;
border-radius: var(--r-sm);
background: var(--glass-light);
border: 1px solid var(--glass-border);
color: var(--fg);
font: inherit;
font-size: 14px;
transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.hs-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hs-form__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 16px;
}
.hs-form__slots { font-size: 12px; color: var(--fg-dim); }
.hs-pool-preview { margin-top: 16px; }
/* --------------------------------------------------------------------------
5. Плейлисты
-------------------------------------------------------------------------- */
.hs-pl__list { display: grid; gap: 8px; }
.hs-pl__item {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 11px 14px;
border-radius: var(--r-md);
background: var(--glass-light);
border: 1px solid var(--glass-border);
color: var(--fg-muted);
font: inherit;
font-size: 14px;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: all var(--t) var(--e-out);
}
.hs-pl__item:hover { color: var(--fg); border-color: var(--glass-hi); transform: translateX(2px); }
.hs-pl__item.is-on {
color: #fff;
background: rgba(50,193,122,.14);
border-color: rgba(50,193,122,.45);
}
.hs-pl__name { flex: 1 1 auto; }
.hs-pl__count {
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: var(--r-pill);
background: rgba(255,255,255,.08);
color: var(--fg-dim);
}
.hs-pl__item.is-on .hs-pl__mark { color: var(--ok); }
.hs-pl__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--glass-border);
}
.hs-pl__balance { font-size: 12px; color: var(--fg-dim); }
.hs-pl__balance b { color: var(--warn); font-size: 14px; }
/* Кнопка «в плейлист» в карточке и полной новости */
button.hs-pl-btn,
.hs-pl-btn {
/* тот же сброс общего правила button из styles222 */
min-width: 0;
line-height: 1;
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 34px; height: 34px;
padding: 0;
border-radius: var(--r-pill);
background: var(--glass-light);
border: 1px solid var(--glass-border);
color: var(--fg-muted);
cursor: pointer;
transition: all var(--t) var(--e-spring);
}
.hs-pl-btn:hover { color: var(--ok); border-color: var(--ok); transform: scale(1.08); }
.hs-pl-btn.is-on { color: var(--ok); border-color: rgba(50,193,122,.45); background: rgba(50,193,122,.14); }
.hs-pl-btn--wide { width: auto; padding: 0 16px; height: 42px; font-size: 14px; font-weight: 600; }
/* Баланс в шапке профиля */
.hs-wallet {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 12px;
border-radius: var(--r-pill);
background: rgba(255,176,32,.12);
border: 1px solid rgba(255,176,32,.32);
color: var(--warn);
font-size: 12.5px;
font-weight: 700;
}
/* --------------------------------------------------------------------------
7. Адаптив
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.hs-toasts { right: 12px; left: 12px; bottom: 68px; max-width: none; }
.hs-modal { padding: 12px; }
.hs-modal__box { max-height: 92vh; }
.gf__list { max-height: none; }
}
/* --------------------------------------------------------------------------
8. Предложенные жанры публикации (голосование)
-------------------------------------------------------------------------- */
/* Кнопка + рядом с заголовком «Жанры» */
.xf-block__title .gf__add {
margin-left: 8px;
vertical-align: middle;
}
.hs-pool { margin-top: 6px; }
.hs-pchip {
display: inline-flex;
align-items: stretch;
height: 26px;
border-radius: var(--r-pill);
overflow: hidden;
font-size: 12px;
font-weight: 600;
line-height: 1;
color: var(--warn);
background: rgba(255,176,32,.09);
border: 1px dashed rgba(255,176,32,.45);
}
.hs-pchip__name { display: flex; align-items: center; padding: 0 4px 0 10px; white-space: nowrap; }
.hs-pchip__n {
display: flex;
align-items: center;
padding: 0 7px 0 4px;
font-size: 10px;
font-weight: 700;
opacity: .8;
}
.hs-pchip__plus,
.hs-pchip__ok,
.hs-pchip__del,
.hs-pchip__done {
width: 22px;
display: grid;
place-items: center;
flex: none;
min-width: 0;
height: auto;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
line-height: 1;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
background: rgba(255,176,32,.2);
color: var(--warn);
transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.hs-pchip__plus:hover { background: var(--warn); color: #1a1a1a; }
.hs-pchip__ok { background: rgba(50,193,122,.22); color: var(--ok); font-size: 12px; }
.hs-pchip__ok:hover { background: var(--ok); color: #111111; }
.hs-pchip__done { background: rgba(50,193,122,.16); color: var(--ok); cursor: default; font-size: 10px; }
/* Удаление предложения — только у администратора. Красная, в отличие
от зелёной «одобрить»: действие необратимое. Размер и раскладку берёт
из общей группы выше, поэтому кнопка ровно такая же, как ✓. */
.hs-pchip__del { background: rgba(255,47,82,.18); color: var(--accent); font-size: 14px; }
.hs-pchip__del:hover { background: var(--accent); color: #fff; }
.hs-pchip__del:disabled { opacity: .5; cursor: progress; }
/* Только что добавленный голосованием жанр коротко подсвечиваем */
.xf-chips a.is-fresh {
animation: hs-fresh 2.2s var(--e-out);
border-color: var(--ok);
}
@keyframes hs-fresh {
0% { background: rgba(50,193,122,.45); transform: scale(.9); }
40% { background: rgba(50,193,122,.22); transform: none; }
100% { background: var(--glass-light); }
}
.gf__hint {
font-size: 11px;
font-weight: 700;
color: var(--fg-dim);
letter-spacing: .04em;
cursor: help;
}
/* --------------------------------------------------------------------------
9. Возврат размеров после сброса (блок 0 обнуляет padding/height)
-------------------------------------------------------------------------- */
button.gf__add { width: 24px; height: 24px; border-radius: var(--r-pill); }
button.gf-chip__plus,
button.gf-chip__minus { width: 20px; }
button.hs-pchip__plus,
button.hs-pchip__ok { width: 22px; }
button.hs-pl-btn { width: 34px; height: 34px; border-radius: var(--r-pill); }
button.hs-pl-btn--wide { width: auto; height: 42px; padding: 0 16px; }
button.hs-pl__item { padding: 11px 14px; border-radius: var(--r-md); }
button.gf-tag { height: 24px; padding: 0 8px; border-radius: var(--r-pill); }
button.chips__more { height: 26px; padding: 0 10px; border-radius: var(--r-pill); }
button.hs-modal__close { width: 30px; height: 30px; border-radius: var(--r-pill); }
button.hs-plm__tab { height: 30px; padding: 0 12px; border-radius: var(--r-pill); }
button.hs-plm__del { width: 26px; height: 26px; border-radius: var(--r-pill); }
/* --------------------------------------------------------------------------
10. Меню пользователя (login.tpl) в общем стиле
В styles222 пункты меню попадают в группу `.grey`, где им задан серый
градиент из старого оформления — отсюда серые прямоугольники поверх
тёмного интерфейса. Переопределяем целиком.
-------------------------------------------------------------------------- */
/* Оверлей центрует окно сам. jQuery от DLE показывает его через
inline display:block, поэтому свой display здесь не задаём — иначе
окно либо не откроется, либо не закроется. */
.overlay {
position: fixed;
inset: 0;
z-index: 1000;
padding: 20px;
background: rgba(5,6,9,.68);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
overflow-y: auto;
text-align: center; /* центрируем inline-block окно */
}
.login-box {
/* В styles222 у блока `position:absolute; left:50%; top:20%;
margin-left:-160px` — старая схема центрирования отрицательным
отступом. Сбрасываем ВСЕ её части: если оставить left:50%, при
position:relative окно уезжает вправо за край экрана. */
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
display: inline-block;
vertical-align: middle;
text-align: left;
width: min(360px, 100%);
max-width: 100%;
margin: 40px auto;
margin-left: auto;
margin-right: auto;
padding: 0 0 14px;
border-radius: var(--r-lg);
background: var(--glass-strong);
background-image: none;
-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
backdrop-filter: blur(var(--blur-lg)) saturate(180%);
border: 1px solid var(--glass-border);
box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi);
}
.login-title {
padding: 16px 18px 12px;
font-size: 16px;
font-weight: 700;
color: var(--fg);
text-align: center;
background: none;
background-image: none;
border-bottom: 1px solid var(--glass-border);
text-shadow: none;
}
.login-avatar { text-align: center; padding: 16px 18px 10px; }
.login-avatar .avatar-box {
width: 72px;
height: 72px;
margin: 0 auto 10px;
border-radius: var(--r-pill);
overflow: hidden;
border: 2px solid var(--glass-border);
background: var(--surface-2);
}
.login-avatar .avatar-box img { width: 100%; height: 100%; object-fit: cover; }
.login-avatar > a {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 12px;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 600;
color: var(--accent);
background: var(--accent-soft);
background-image: none;
border: 1px solid rgba(255,47,82,.3);
text-decoration: none;
}
.login-avatar > a:hover { color: #fff; background: var(--accent-grad); border-color: transparent; }
.login-menu { padding: 0 14px; display: grid; gap: 5px; margin: 0; }
.login-menu li { list-style: none; float: none; height: auto; line-height: normal; }
.login-menu a {
display: flex;
align-items: center;
gap: 10px;
float: none;
padding: 9px 13px;
border-radius: var(--r-sm);
font-size: 14px;
font-weight: 600;
color: var(--fg-muted);
background: var(--glass-light);
background-image: none;
border: 1px solid var(--glass-border);
text-decoration: none;
text-shadow: none;
transition: color .16s ease, background .26s ease, border-color .26s ease, transform .26s ease;
}
.login-menu a:hover {
color: var(--fg);
background: rgba(255,255,255,.09);
background-image: none;
border-color: var(--glass-hi);
transform: translateX(2px);
}
.login-menu a .fa { width: 16px; flex: none; font-size: 14px; opacity: .75; }
.login-menu .lm-count {
margin-left: auto;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: var(--r-pill);
background: rgba(255,255,255,.08);
color: var(--fg-dim);
float: none;
}
.login-menu .lm-exit { color: var(--accent); }
.login-menu .lm-exit:hover { color: #fff; background: var(--accent-grad); border-color: transparent; }
.login-wallet {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin: 0 14px 10px;
padding: 9px 13px;
border-radius: var(--r-sm);
background: rgba(255,176,32,.1);
border: 1px solid rgba(255,176,32,.3);
color: var(--warn);
font-size: 13px;
font-weight: 700;
}
.overlay-close {
position: absolute;
top: 14px;
right: 14px;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: var(--r-pill);
background: var(--glass-light);
border: 1px solid var(--glass-border);
color: var(--fg-muted);
cursor: pointer;
font-size: 13px;
z-index: 2;
transition: all .26s ease;
}
.overlay-close:hover { color: #fff; background: var(--accent-grad); border-color: transparent; }
/* Форма входа для гостей */
.login-form { padding: 16px 18px 6px; }
.login-input { margin-bottom: 10px; }
.login-input input {
width: 100%;
height: 42px;
padding: 0 14px;
border-radius: var(--r-sm);
background: var(--glass-light);
border: 1px solid var(--glass-border);
color: var(--fg);
font: inherit;
font-size: 14px;
}
.login-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.login-button button {
width: 100%;
height: 44px;
line-height: 1;
border-radius: var(--r-sm);
background: var(--accent-grad);
background-image: var(--accent-grad);
border: 0;
color: #fff;
font: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.login-button button:hover { filter: brightness(1.07); }
.login-checkbox { margin: 10px 0; font-size: 13px; color: var(--fg-dim); }
.login-links {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 13px;
padding-top: 6px;
}
.login-links a { color: var(--fg-dim); }
.login-links a:hover { color: var(--accent); }
.login-links .log-register { color: var(--accent); font-weight: 600; }
/* --------------------------------------------------------------------------
11. Менеджер плейлистов (открывается из меню пользователя)
-------------------------------------------------------------------------- */
.hs-plm { display: grid; gap: 12px; }
.hs-plm__tabs {
display: flex;
flex-wrap: wrap;
align-content: start;
min-height: 36px;
gap: 6px;
padding-bottom: 12px;
border-bottom: 1px solid var(--glass-border);
}
.hs-plm__tab {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
border-radius: var(--r-pill);
font: inherit;
font-size: 12.5px;
font-weight: 600;
line-height: 1;
color: var(--fg-muted);
background: var(--glass-light);
background-image: none;
border: 1px solid var(--glass-border);
cursor: pointer;
transition: all .26s ease;
}
.hs-plm__tab:hover { color: var(--fg); border-color: var(--glass-hi); }
.hs-plm__tab.is-on {
color: #fff;
background: var(--accent-grad);
border-color: transparent;
box-shadow: var(--sh-glow);
}
.hs-plm__tab b { font-weight: 700; opacity: .75; }
/* Фиксированная область списка: пустой плейлист и плейлист на 20 позиций
дают одинаковую высоту окна, поэтому оно не прыгает при переключении. */
.hs-plm__items {
display: grid;
gap: 8px;
align-content: start;
min-height: 264px;
max-height: 46vh;
overflow-y: auto;
}
.hs-plm__item {
display: flex;
align-items: center;
gap: 11px;
padding: 8px;
border-radius: var(--r-sm);
background: var(--glass-light);
border: 1px solid var(--glass-border);
color: var(--fg-muted);
text-decoration: none;
transition: all .26s ease;
}
.hs-plm__item:hover { color: var(--fg); border-color: var(--glass-hi); transform: translateX(2px); }
.hs-plm__item img {
width: 40px;
height: 56px;
object-fit: cover;
border-radius: var(--r-xs);
flex: none;
background: var(--surface-2);
}
.hs-plm__t { flex: 1 1 auto; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.hs-plm__del {
width: 26px;
height: 26px;
display: grid;
place-items: center;
flex: none;
border-radius: var(--r-pill);
background: transparent;
background-image: none;
border: 1px solid var(--glass-border);
color: var(--fg-dim);
font: inherit;
font-size: 11px;
line-height: 1;
padding: 0;
cursor: pointer;
transition: all .26s ease;
}
.hs-plm__del:hover { color: #fff; background: var(--accent); border-color: transparent; }
.hs-plm__empty { padding: 26px; text-align: center; color: var(--fg-dim); font-size: 14px; }
.hs-plm__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding-top: 12px;
border-top: 1px solid var(--glass-border);
font-size: 12px;
color: var(--fg-dim);
}
/* Публикация и удаление в менеджере плейлистов */
.hs-plm__share {
padding: 12px;
background: var(--surface-2, rgba(255, 255, 255, 0.03));
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
border-radius: var(--r-md, 10px);
}
.hs-plm__pub {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.hs-plm__descr {
flex: 1 1 200px;
height: 34px;
padding: 0 12px;
border-radius: var(--r-pill, 999px);
background: var(--glass-light, rgba(255, 255, 255, 0.05));
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
color: #fff;
font-size: 13px;
box-sizing: border-box;
}
.chip.is-danger,
button.chip.is-danger {
background: rgba(235, 47, 75, 0.15) !important;
border: 1px solid rgba(235, 47, 75, 0.35) !important;
color: #ff4d6d !important;
transition: all 0.2s ease !important;
cursor: pointer;
}
.chip.is-danger:hover,
button.chip.is-danger:hover {
background: rgba(235, 47, 75, 0.9) !important;
border-color: transparent !important;
color: #fff !important;
box-shadow: 0 2px 10px rgba(235, 47, 75, 0.45) !important;
}
/* --------------------------------------------------------------------------
12. Сводная страница доп. полей (жанры, студии, режиссёры, годы)
-------------------------------------------------------------------------- */
.xcat { padding: 4px 0 20px; }
.xcat__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--glass-border);
}
.xcat__nav { display: flex; flex-wrap: wrap; gap: 6px; }
.xcat__nav .chip { text-decoration: none; }
.xcat__sort {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.xcat__sort-label { font-size: 12px; color: var(--fg-dim); }
button.xcat__sort-btn { height: 26px; padding: 0 10px; }
/* Поиск по значениям */
.xcat__search {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.xcat__input {
flex: 1 1 260px;
height: 42px;
padding: 0 16px;
border-radius: var(--r-pill);
background: var(--glass-light);
border: 1px solid var(--glass-border);
color: var(--fg);
font: inherit;
font-size: 14px;
transition: border-color .26s ease, box-shadow .26s ease;
}
.xcat__input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.xcat__input::placeholder { color: var(--fg-dim); }
.xcat__found { font-size: 13px; color: var(--fg-dim); }
/* Группа значений */
.xcat__group { margin-bottom: 28px; scroll-margin-top: 100px; }
.xcat__group.is-empty { display: none; }
.xcat__title {
display: flex;
align-items: center;
gap: 9px;
font-size: 17px;
font-weight: 700;
color: var(--fg);
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--glass-border);
}
.xcat__title .fa { color: var(--accent); font-size: 15px; }
.xcat__n {
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: var(--r-pill);
background: var(--glass-light);
border: 1px solid var(--glass-border);
color: var(--fg-dim);
}
.xcat__chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* Чипса значения: ссылка + счётчик + «в подбор» */
.xcat-chip {
display: inline-flex;
align-items: stretch;
height: 28px;
border-radius: var(--r-pill);
overflow: hidden;
font-size: 12.5px;
font-weight: 600;
line-height: 1;
color: var(--fg-muted);
background: var(--glass-light);
border: 1px solid var(--glass-border);
transition: color .16s ease, border-color .26s ease, background .26s ease,
transform .26s ease, box-shadow .26s ease;
}
.xcat-chip:hover {
color: var(--fg);
border-color: var(--glass-hi);
transform: translateY(-1px);
}
.xcat-chip.is-hidden { display: none; }
.xcat-chip.is-filtered { display: none; }
.xcat-chip__link {
display: flex;
align-items: center;
padding: 0 5px 0 11px;
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.xcat-chip__n {
display: flex;
align-items: center;
padding-right: 9px;
font-size: 10px;
font-weight: 700;
color: var(--fg-dim);
}
button.xcat-chip__add {
width: 22px;
min-width: 0;
height: auto;
line-height: 1;
display: grid;
place-items: center;
flex: none;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
background: rgba(255,255,255,.05);
background-image: none;
box-shadow: none;
color: var(--fg-dim);
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background .16s ease, color .16s ease;
}
button.xcat-chip__add:hover { background: #2ea36a; color: #fff; }
.xcat-chip.is-picked {
color: #fff;
border-color: transparent;
background: linear-gradient(118deg, #2ea36a, #35c07d);
box-shadow: 0 6px 18px -8px rgba(53,192,125,.7);
}
.xcat-chip.is-picked .xcat-chip__n { color: rgba(255,255,255,.75); }
.xcat-chip.is-picked .xcat-chip__add { background: rgba(0,0,0,.22); color: #fff; }
.xcat__empty {
padding: 40px 20px;
text-align: center;
color: var(--fg-dim);
font-size: 15px;
}
/* Панель «перейти к подбору» появляется, когда что-то выбрано */
.xcat-bar {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, 20px);
z-index: 900;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
max-width: min(760px, calc(100vw - 32px));
padding: 10px 14px;
border-radius: var(--r-pill);
background: var(--glass-strong);
-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
backdrop-filter: blur(var(--blur-lg)) saturate(180%);
border: 1px solid var(--glass-border);
box-shadow: var(--sh-3);
opacity: 0;
pointer-events: none;
transition: opacity .26s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
}
.xcat-bar.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.xcat-bar__list { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.xcat-bar__go {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 18px;
flex: none;
border-radius: var(--r-pill);
background: var(--accent-grad);
background-image: var(--accent-grad);
border: 0;
color: #fff;
font: inherit;
font-size: 13.5px;
font-weight: 700;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.xcat-bar__go:hover { color: #fff; filter: brightness(1.07); }
@media (max-width: 768px) {
.xcat__head { flex-direction: column; gap: 12px; }
.xcat-bar { left: 12px; right: 12px; transform: translateY(20px); max-width: none; }
.xcat-bar.is-on { transform: none; }
}
/* Ссылка на расширенный подбор под списком жанров */
.gf__more {
display: flex;
align-items: center;
gap: 9px;
margin-top: 12px;
padding: 10px 13px;
border-radius: var(--r-sm);
font-size: 13px;
font-weight: 600;
color: var(--fg-muted);
background: var(--glass-light);
border: 1px dashed var(--glass-border);
text-decoration: none;
transition: color .16s ease, background .26s ease, border-color .26s ease;
}
.gf__more:hover {
color: #fff;
background: var(--accent-grad);
border-color: transparent;
border-style: solid;
}
.gf__more span { flex: 1 1 auto; }
.gf__more .fa { font-size: 13px; opacity: .8; }
.gf__more-arrow { flex: none; }
/* Исключённое значение в каталоге */
.xcat-chip.is-excluded {
color: #fff;
border-color: transparent;
background: linear-gradient(118deg, #b3283f, #d8384f);
box-shadow: 0 6px 18px -8px rgba(216,56,79,.7);
}
.xcat-chip.is-excluded .xcat-chip__n { color: rgba(255,255,255,.75); }
.xcat-chip.is-excluded .xcat-chip__minus { background: rgba(0,0,0,.22); color: #fff; }
.xcat-chip.is-excluded .xcat-chip__link { text-decoration: line-through; opacity: .85; }
button.xcat-chip__minus {
width: 22px;
min-width: 0;
height: auto;
line-height: 1;
display: grid;
place-items: center;
flex: none;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
background: rgba(255,255,255,.05);
background-image: none;
box-shadow: none;
color: var(--fg-dim);
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background .16s ease, color .16s ease;
}
button.xcat-chip__minus:hover { background: #b3283f; color: #fff; }
.xcat-chip__link { padding-left: 8px; }
/* =====================================================================
Выбор жанра из каталога в форме «предложить жанр»
Сначала человек выбирает из того, что на сайте уже есть, и лишь если
нужного нет — вводит свой вариант. Так каталог не зарастает разными
написаниями одного жанра.
===================================================================== */
.hs-gpick__list {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-height: 240px;
overflow-y: auto;
padding: 10px;
margin-bottom: 12px;
border: 1px solid var(--glass-border);
border-radius: var(--r-md, 10px);
background: var(--surface-2);
}
.hs-gpick__empty {
font-size: 13px;
color: var(--fg-dim);
padding: 6px 2px;
}
button.hs-gchip {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 6px 10px;
border: 1px solid var(--glass-border);
border-radius: 999px;
background: var(--surface-1, rgba(255, 255, 255, .04));
color: var(--fg-muted);
font: inherit;
font-size: 13px;
line-height: 1.2;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
button.hs-gchip:hover { border-color: var(--accent); color: #fff; }
button.hs-gchip.is-picked {
background: var(--accent-grad);
border-color: transparent;
color: #fff;
box-shadow: 0 2px 8px var(--accent-glow);
}
/* Уже указан у публикации или уже на голосовании — виден, но не выбирается:
иначе непонятно, почему привычного жанра нет в списке */
button.hs-gchip.is-off {
opacity: .42;
cursor: not-allowed;
text-decoration: line-through;
}
button.hs-gchip.is-off:hover { border-color: var(--glass-border); color: var(--fg-muted); }
.hs-gchip__n {
font-size: 11px;
color: var(--fg-dim);
font-variant-numeric: tabular-nums;
}
button.hs-gchip.is-picked .hs-gchip__n { color: rgba(255, 255, 255, .75); }
button.hs-gpick__own {
display: block;
width: 100%;
margin: 0 0 12px;
padding: 9px 12px;
border: 1px dashed var(--glass-border);
border-radius: var(--r-md, 10px);
background: none;
color: var(--fg-dim);
font: inherit;
font-size: 13px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: color .16s ease, border-color .16s ease;
}
button.hs-gpick__own:hover { color: var(--accent); border-color: var(--accent); }
.hs-gpick__custom { margin-bottom: 4px; }