/* ============================================================ ENews-bs5 — современный стиль поверх Bootstrap 5.3 Цвета берутся из CSS-переменных Bootstrap (--bs-*) и схем (--en-*). ============================================================ */ :root{ --en-accent:#d62828; --en-accent-2:#0353a4; --en-hero-h:340px; } body{ background:var(--en-page-bg,var(--bs-body-bg)); transition:background .25s ease,color .25s ease; } /* Ссылки — акцент при наведении */ a{color:inherit;text-decoration:none} a:hover{color:var(--en-accent)} .accent{color:var(--en-accent)} .en-title-bar{display:inline-block;width:4px;height:1.15em;background:var(--en-accent); border-radius:2px;margin-right:.5rem;vertical-align:-.15em} /* ---------- Карточка/тени ---------- */ .card,.list-group-item{ background:var(--bs-body-bg); border-color:var(--bs-border-color); } .shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,.08)!important} /* ---------- Навбар ---------- */ .en-navbar{ background:var(--bs-body-bg); border-bottom:2px solid var(--en-accent); box-shadow:0 1px 8px rgba(0,0,0,.06); padding-top:.5rem;padding-bottom:.5rem; } /* DEBUG-панель (fixed, ~60px) не должна перекрывать навбар */ body:has(#edbg){padding-top:30px} body:has(#edbg) .en-navbar{top:30px} .en-navbar .navbar-brand{letter-spacing:-.5px} .en-navbar .nav-link{border-radius:.5rem;padding:.4rem .7rem} .en-navbar .nav-link:hover{background:rgba(127,127,127,.1)} .en-nav-avatar{border-radius:50%;object-fit:cover;border:1px solid var(--bs-border-color)} /* Кнопка «Действия со статьёй» (шестерёнка в мета-строке статьи): меньше обычной btn-sm по горизонтали, чтобы не растягивать строку */ .en-art-actions{padding:.1rem .4rem;line-height:1.2} .en-login-btn{background:var(--en-accent);border:none;color:#fff;border-radius:.5rem} .en-login-btn:hover{background:var(--en-accent-2);color:#fff} /* Выпадашка «Категории»: рубрик больше 30, в одну колонку список длиннее экрана. Пункты раскладываем в две колонки (column-count сам балансирует высоту), пункт не разрывается между колонками, длинные названия не переносятся. ВАЖНО: колонки и прокрутка — на РАЗНЫХ элементах. Если задать column-count и max-height на одном, браузер при нехватке высоты не начинает вертикальную прокрутку, а выводит остаток в лишнюю колонку справа — меню уезжает за край экрана. Поэтому скроллится внешний .en-cats-dropdown, а колонки живут во внутреннем .en-cats-cols без ограничения высоты. */ .en-cats-dropdown{max-height:70vh;overflow:auto;max-width:calc(100vw - 2rem)} /* min-width:560px; */ .en-cats-cols{ column-count:2; column-gap:.5rem; column-rule:1px solid var(--bs-border-color-translucent); list-style:none;margin:0;padding:0; } .en-cats-cols>li{break-inside:avoid;-webkit-column-break-inside:avoid} .en-cats-dropdown .dropdown-item{white-space:nowrap} /* Ниже lg навбар свёрнут в «гамбургер» — широкая панель в две колонки в экран телефона не влезает, там список снова одноколоночный */ @media (max-width:991.98px){ .en-cats-dropdown{min-width:0;max-width:none} .en-cats-cols{column-count:1;column-rule:0} } /* ---------- Поиск ---------- */ .en-search .form-control{border-top-right-radius:0;border-bottom-right-radius:0} .en-search .btn{background:var(--en-accent);color:#fff} /* ---------- Hero-карусель ---------- */ .en-hero{background:#000;max-height:482px} .en-hero .carousel-inner,.en-hero .carousel-item{max-height:482px;min-height:220px;} .en-slide{position:relative;height:100%} .en-slide-img{object-fit:cover;filter:brightness(.85)} .en-slide-caption{ background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 60%,transparent); left:0;right:0;bottom:0;width:100%;text-align:left;padding:2rem 1.25rem 1rem; } .en-slide-caption h3{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)} .en-slide-caption p{color:#e9ecef} /* ---------- Блок «Главные» ---------- */ .en-top-box .card-header{background:var(--en-accent);color:#fff;font-weight:600} .en-top-box .card-header a{color:#fff} .en-top-box .card-header a:hover{color:#fff;text-decoration:underline} .top-box-link{text-decoration:none} .en-top-item{border-left:0;border-right:0} .en-top-img{width:72px;height:54px;object-fit:cover;border-radius:.35rem;flex-shrink:0} .en-top-img-empty{background:rgba(127,127,127,.15);color:var(--bs-secondary-color);font-size:1.4rem} .en-top-title{font-weight:600;line-height:1.3} /* ---------- Секция ---------- */ .en-section-title{font-weight:700} /* ---------- Карточка новости ---------- */ .en-news-card{transition:transform .15s ease,box-shadow .15s ease} .en-news-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.12)!important} .en-thumb{display:block} .en-card-img{height:200px;object-fit:cover;width:100%} .en-cat-badge{position:absolute;top:.6rem;left:.6rem;background:var(--en-accent);color:#fff;font-weight:500} .en-card-link{color:var(--bs-body-color);font-weight:700;line-height:1.35} .en-card-link:hover{color:var(--en-accent)} .en-news-card h3 a{text-decoration:none} .en-rating{white-space:nowrap} .vi-rate .ratingtypeplusminus{font-weight:600;font-size:1.05rem} .ratingplus{color:#2a9d3a} .ratingminus{color:var(--en-accent)} .ratingzero{color:var(--bs-secondary-color)} .fav-btn{cursor:pointer;color:var(--bs-secondary-color);font-size:1.05rem} .fav-btn:hover{color:#f4b400} .fav-btn.fav-on{color:#f4b400} .fav-label{font-size:.8rem;margin-left:.25rem} /* Иконка «Действия со статьёй» на картинке карточки (правый верхний угол). Полупрозрачный тёмный кружок: фотографии бывают любые, а иконка должна читаться на каждой. Лежит вне ссылки-картинки (см. item/news.tpl), поэтому клик не открывает новость и выпадашку не режет overflow-hidden у .en-thumb. .card уже position:relative (Bootstrap), отдельный контекст не нужен. */ .en-news-card .en-card-actions{position:absolute;top:.6rem;right:.6rem;z-index:2} .en-news-card .en-card-actions .en-art-actions{display:flex;align-items:center;justify-content:center; width:2rem;height:2rem;padding:0;border:0;border-radius:50%; background:rgba(0,0,0,.55);color:#fff;font-size:.95rem;line-height:1;opacity:.8; transition:opacity .15s ease,background .15s ease} .en-news-card .en-card-actions .en-art-actions:hover, .en-news-card .en-card-actions .en-art-actions:focus-visible, .en-news-card .en-card-actions .en-art-actions[aria-expanded="true"]{opacity:1;background:rgba(0,0,0,.8)} .en-news-card .en-card-actions .dropdown-menu{font-size:.875rem} /* ---------- боковые списки ---------- */ .en-side2{border-left:0;border-right:0} .en-side2-img{width:60px;height:46px;object-fit:cover;border-radius:.3rem;flex-shrink:0} .en-side2-title{font-weight:600;line-height:1.3;color:var(--bs-body-color)} .en-side2:hover .en-side2-title{color:var(--en-accent)} /* ---------- Сводки ---------- */ .en-svodka-card .card-header a{color:var(--en-accent)} .en-svodka-title{font-weight:600;line-height:1.35;margin:.15rem 0} .en-svodka-title a{color:var(--bs-body-color)} .en-svodka-title a:hover{color:var(--en-accent)} /* ---------- Похожие ---------- */ .en-related-card{transition:transform .15s} .en-related-card:hover{transform:translateY(-2px)} .en-related-img{max-height:230px;object-fit:cover} .en-related-title{color:var(--bs-body-color);line-height:1.3;font-weight:600} .en-related-card:hover .en-related-title{color:var(--en-accent)} /* ---------- Статья ---------- */ .en-article-text img{max-width:100%;height:auto;border-radius:.5rem;margin:.5rem 0} .en-article-text p{margin-bottom:1rem} .en-article-text a{color:var(--en-accent-2);text-decoration:underline} .en-article-text blockquote{border-left:3px solid var(--en-accent);padding-left:1rem; color:var(--bs-secondary-color);margin:1rem 0} /* цитата и спойлер из BBCode (классы как в DLE) */ .quote{border:1px solid var(--bs-border-color);border-left:3px solid var(--en-accent); background:rgba(127,127,127,.06);padding:.5rem .75rem;border-radius:.35rem;margin:.5rem 0} .title_quote{font-size:.85rem;color:var(--bs-secondary-color);margin-bottom:.25rem} /* Спойлер из BBCode: заметная кликабельная плашка, а не просто ссылка в тексте (в теме дня это делал серый блок из engine.css). Состояние «открыт» вешает ShowOrHide в comments.js классом .spoiler-open — по нему поворачиваем стрелку. Иконку рисуем CSS-маркером: картинки dleimages есть не во всех темах. */ .title_spoiler{display:flex;align-items:center;gap:.45rem;cursor:pointer; font-weight:600;color:var(--en-accent-2);background:rgba(3,83,164,.08); border:1px solid rgba(3,83,164,.35);border-left:3px solid var(--en-accent-2); border-radius:.35rem;padding:.5rem .75rem;margin:.75rem 0 .4rem} .title_spoiler:hover{background:rgba(3,83,164,.14)} .title_spoiler img{display:none} .title_spoiler a{color:inherit;text-decoration:none} .title_spoiler a:first-child::before{content:"\25B8";display:inline-block; font-size:.95em;line-height:1} .title_spoiler.spoiler-open a:first-child::before{content:"\25BE"} .title_spoiler a:last-child{flex:1 1 auto;border-bottom:1px dashed currentColor} .title_spoiler a:last-child:hover{border-bottom-style:solid} .text_spoiler{border:1px solid var(--bs-border-color);border-left:3px solid var(--en-accent-2); border-radius:0 0 .35rem .35rem;padding:.65rem .85rem;margin:0 0 .9rem; background:rgba(127,127,127,.05)} img.emoji{ /* height:1.4em; */ vertical-align:-.3em;margin:0 1px} /* ---------- Комментарии ---------- */ /* Дерево ответов — структура как на проде (DLE compile_tree); визуально плоский список (в проде вложенность тоже обнулена в styles.css). */ .comments-tree-list{display:block;margin:0;padding:0;list-style:none} .comments-tree-list .comments-tree-list{padding-left:0} .comments-tree-item{display:block;margin:0;padding:0} /* Аватар комментария: бокс 3rem×3rem, картинка заполняет его без искажения пропорций и обрезается по центру — как .en-nav-avatar в шапке. Раньше размер задавали атрибуты width/height в разметке, поэтому неквадратные фото (94×101, 101×95 и т.п. в uploads/fotos) сплющивались. */ .comm .comm-av img{width:3rem;height:3rem;object-fit:cover;object-position:center; border:1px solid var(--bs-border-color)} /* аватар в форме быстрого ответа (#ac-av) — та же логика, что у комментариев */ #ac-av img{width:100%;height:100%;object-fit:cover;object-position:center} .comm-desc{position:relative;overflow-wrap:anywhere} .comm-desc p:last-child{margin-bottom:0} .comm-desc img{max-width:100%;height:auto;border-radius:.35rem} .comm-desc a{color:var(--en-accent-2);text-decoration:underline} .comm .quote,.comm .text_spoiler{margin:.5rem 0} .signature{border-top:1px dashed var(--bs-border-color);margin-top:.5rem;padding-top:.25rem; color:var(--bs-secondary-color);font-size:.85rem} .comm-rate a{color:var(--bs-secondary-color);font-size:1.25rem;line-height:1;text-decoration:none} .comm-rate a:hover{color:var(--en-accent)} .pos-comm .ratingtypeplusminus,.comm-rate.pos-comm{color:#2a9d3a} .neg-comm .ratingtypeplusminus,.comm-rate.neg-comm{color:var(--en-accent)} /* root-comm/child-comm — на проде пустые маркеры (вложенность деревом), стиля не требуют */ .status-online a,.status-online{position:relative} .comm-author.status-online a::after{content:'';display:inline-block;width:8px;height:8px; border-radius:50%;background:#2a9d3a;margin-left:4px;vertical-align:middle} /* Сворачивание длинных комментариев. .comm-desc получает фиксированную высоту и overflow:hidden, поэтому кнопку нельзя оставлять в потоке — она уезжает ПОД обрезанный текст и её не видно (JS её показывает, но пользователь её не находит). В шаблоне дня кнопка спозиционирована абсолютно у нижнего края блока — делаем так же: снизу градиентная «шторка» цвета карточки и по центру кнопка раскрытия. */ .css--long{overflow:hidden;padding-bottom:2.5rem} .css--long::before{content:'';position:absolute;z-index:1;bottom:0;left:0;right:0;height:2.5rem; background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,var(--bs-card-bg,var(--bs-body-bg)) 100%)} .comment-textButton{display:none;position:absolute;z-index:2;bottom:0;left:0;right:0;text-align:center} .comment-textButton span{display:inline-block;padding:.4rem .85rem;border-radius:.5rem;cursor:pointer; font-size:.85rem;font-weight:600;color:var(--bs-body-color);background:var(--bs-tertiary-bg); transition:background-color .15s ease,color .15s ease} .comment-textButton span:hover{background:var(--en-accent);color:#fff} .comment-textButton em{font-style:normal;opacity:.7} /* быстрая форма ответа (dle_fastreply) */ #dlefastreplycomments .add-comm-form{margin-left:2rem;background:rgba(127,127,127,.05); border-radius:.5rem} /* ---------- Форма добавления комментария ---------- */ .add-comm-form textarea{resize:vertical;min-height:90px} .froala-box .fr-wrapper{border:1px solid var(--bs-border-color)} /* ---------- Пагинация (разметка DLE) ---------- */ .pagi-nav-wr{text-align:center;margin-top:1rem} .pagi-nav{display:inline-flex;flex-wrap:wrap;gap:.25rem;align-items:center; padding:.5rem;background:rgba(127,127,127,.06);border-radius:.6rem} .pagi-nav .navigation{display:inline-flex;gap:.25rem} .pagi-nav .navigation a,.pagi-nav .navigation span, .pagi-nav .pprev a,.pagi-nav .pnext a,.pagi-nav .nav_ext{ min-width:2.2rem;height:2.2rem;padding:0 .55rem;display:inline-flex;align-items:center; justify-content:center;border-radius:.45rem;font-weight:500;text-decoration:none; color:var(--bs-body-color);background:var(--bs-body-bg);border:1px solid var(--bs-border-color)} .pagi-nav .navigation a:hover{background:var(--en-accent);color:#fff;border-color:var(--en-accent)} .pagi-nav .navigation > span{background:var(--en-accent);color:#fff;border-color:var(--en-accent)} /* специфичность выше, чем у «.pagi-nav .navigation > span» (иначе многоточие красилось как активная страница); padding:0 — «...» не занимает ширину кнопки */ .pagi-nav .navigation > span.nav_ext,.pagi-nav .nav_ext span{border:none;background:none;padding:0;min-width:1rem} .pagi-nav .pprev a,.pagi-nav .pnext a{font-weight:600} /* Страницы выдачи поиска (POST-режим, Controller::pager с $postFn): у ссылок намеренно нет href, чтобы в разметке не осталось GET-адреса выдачи. Без href браузер не рисует «руку» — добавляем сами. */ .pagi-nav a[data-page]{cursor:pointer} /* Узкий экран: линейка сворачивается до шести элементов — «Назад, текущая−1, текущая, текущая+1, …, Вперед» вместо полной ленты (~14 кнопок). Расстояние до текущей страницы сервер проставляет классами pg-dN, края и многоточия — pg-edge / pg-edge-l / pg-edge-r (Controller::pager), поэтому сворачивание — чистый CSS, без JS. Мобильную тему (.en-mobile) не трогаем: там линейка листается горизонтально своей прокруткой. */ @media (max-width: 767.98px) { body:not(.en-mobile) .pagi-nav .pg-d2, body:not(.en-mobile) .pagi-nav .pg-d3, body:not(.en-mobile) .pagi-nav .pg-d4, body:not(.en-mobile) .pagi-nav .pg-edge, body:not(.en-mobile) .pagi-nav .pg-edge-l { display: none; } } /* ---------- Выбор категорий (catpick.js, addnews/editnews) ---------- Список с прокруткой вместо голого