/* ====== ГЛОБАЛЬНІ ЗМІННІ ТА БАЗОВІ СТИЛІ ====== */
:root {
--bg-color: #121212;
--text-color: #ffffff;
--bg-primary: #121212;
--bg-secondary: #1d1d1d;
--bg-tertiary: #292929;
--text-primary: #e8e8e8;
--text-secondary: #ddd;
--border-color: rgba(255,255,255,0.08);
--accent-color: #ffae3d;
--footer-bg: #111;
--tag-bg-light: #fbe8ed;
--tag-text-light: #901c31;
--tag-border-light: #901c31;
--tag-hover-bg-light: #901c31;
--tag-hover-txt-light: #fff;
--tag-label-light: #901c31;
--tag-bg-dark: #35101a;
--tag-text-dark: #ffe7ec;
--tag-border-dark: #b23b58;
--tag-hover-bg-dark: #901c31;
--tag-hover-txt-dark: #fff;
--tag-label-dark: #fff;
--ss-accent: #a61a32;
}
[data-theme="light"] {
--bg-color: #ffffff;
--text-color: #333333;
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-tertiary: #e0e0e0;
--text-primary: #333333;
--text-secondary: #555;
--border-color: rgba(0,0,0,0.08);
--accent-color: #8d1835;
--footer-bg: #f9f9f9;
--ss-accent: #8d1835;
}
/* ====== СКИД СТИЛІВ ТА БАЗОВІ НАЛАШТУВАННЯ ====== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: 0;
background: transparent;
}
ol, ul, .ss-steps { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
article, aside, figure, hgroup, footer, header, nav, section, main { display: block; }
/* ====== ТІЛО ДОКУМЕНТА ====== */
body {
font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
background: var(--bg-color);
color: var(--text-color);
min-height: 100%;
transition: background-color 0.3s, color 0.3s;
}
/* ====== УТІЛІТИ ====== */
.clr, .clearfix::after, .slf-clearfix::after {
content: "";
display: table;
clear: both;
}
a {
color: var(--text-color);
text-decoration: none;
transition: color 0.2s, border-color 0.2s;
}
a:hover { color: #FF9800; }
h1, h2, h3, h4, h5, .sub-title h1, .rels-t {
font-weight: 400;
margin-bottom: 15px;
}
.sub-title h1 {
font-size: 24px;
font-weight: 700;
}
/* ====== КНОПКА ГАМБУРГЕРА ====== */
.btn-menu {
display: none;
align-items: center;
gap: 10px;
background: var(--bg-secondary);
color: var(--text-primary);
padding: 10px 18px;
border: 1px solid var(--border-color);
border-radius: 12px;
font: 700 15px/1 sans-serif;
cursor: pointer;
user-select: none;
transition: background .25s, border-color .25s, transform .25s;
}
.btn-menu:hover {
background: var(--bg-tertiary);
transform: translateY(-1px);
}
.btn-menu.opened {
background: #8a0c1c;
border-color: #8a0c1c;
color: #fff;
}
.btn-menu .fa-bars {
position: relative;
width: 20px;
height: 2px;
background: #ffae3d;
font-size: 0;
border-radius: 2px;
transition: .3s;
}
.btn-menu .fa-bars::before,
.btn-menu .fa-bars::after {
content: "";
position: absolute;
left: 0;
width: 20px;
height: 2px;
background: #ffae3d;
border-radius: 2px;
transition: .3s;
}
.btn-menu .fa-bars::before { top: -6px; }
.btn-menu .fa-bars::after { top: 6px; }
.btn-menu.opened .fa-bars { background: transparent; }
.btn-menu.opened .fa-bars::before { top: 0; transform: rotate(45deg); background: #fff; }
.btn-menu.opened .fa-bars::after { top: 0; transform: rotate(-45deg); background: #fff; }
.menu-label { letter-spacing: .5px; }
/* ====== ПЕРЕМИКАЧ ТЕМ ====== */
.theme-switch-wrapper {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
align-items: center;
font-size: 18px;
}
.theme-switch {
display: inline-block;
height: 26px;
width: 50px;
margin-right: 8px;
}
.theme-switch input { display: none; }
.slider {
position: absolute;
inset: 0;
background: #ccc;
cursor: pointer;
transition: .4s;
border-radius: 34px;
}
.slider:before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 4px;
bottom: 3px;
background: #fff;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider { background: #888; }
input:checked + .slider:before { transform: translateX(24px); }
.theme-toggle-floating {
position: fixed;
top: 0.6rem;
right: 1.4rem;
z-index: 1005;
width: 2.8rem;
height: 2.8rem;
background: rgba(255,255,255,.08);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--header-text);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
backdrop-filter: blur(4px);
transition: all .25s ease;
}
.theme-toggle-floating:hover {
background: rgba(255,255,255,.2);
transform: scale(1.1);
}
.theme-label {
font-weight: 700;
font-size: 1.2em;
padding: 2px 8px;
border-radius: 6px;
background: #fff;
border: 1px solid #eee;
transition: color .2s, background .2s, font-size .2s;
}
[data-theme="dark"] .theme-label {
background: #222;
border-color: #333;
color: #fff;
}
.xf-mini-nav, .top-links {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 15px 0 25px;
padding: 10px 0;
}
.xf-mini-nav a, .top-btn {
background: var(--bg-secondary);
padding: 8px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: .9rem;
color: var(--text-primary);
transition: all .3s ease;
}
.xf-mini-nav a:hover, .top-btn:hover {
background: var(--bg-tertiary);
transform: translateY(-1px);
}
.top-btn {
display: flex;
gap: 6px;
font-weight: 600;
}
.top-rated { color: #ffcf7d; }
.top-views { color: #ff7d7d; }
/* ====== САЙДБАР ====== */
@media (min-width: 1025px) {
.cols.fx-row { display: flex; gap: 10px; }
.usp-sidebar-panels {
position: relative !important;
width: 230px;
padding: 16px;
background: var(--bg-color);
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
}
@media (max-width: 1024px) {
.usp-sidebar-panels {
position: fixed;
top: 0;
left: 0;
width: 80%;
max-width: 200px;
height: 100vh;
padding: 20px 0;
background: var(--bg-primary);
border-right: 1px solid var(--border-color);
transform: translateX(-100%);
transition: transform .30s ease;
z-index: 9999;
overflow-y: auto;
}
.usp-sidebar-panels.open { transform: translateX(0); }
body.no-scroll { overflow: hidden; }
}
/* ====== ТРЕНДОВІ ТЕМИ ====== */
.ds-trending-block {
margin: 25px 0 22px;
padding: 18px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
}
[data-theme="light"] .ds-trending-block {
background: #f4f4f4;
border-color: #ddd;
}
.ds-geo-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
color: var(--text-color);
}
.ds-geo-title .geo-flag { margin-left: 4px; font-size: 22px; }
.ds-trending-wrapper {
overflow-x: auto;
white-space: nowrap;
padding-bottom: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.ds-trending-wrapper::-webkit-scrollbar { height: 6px; }
.ds-trending-wrapper::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 10px;
}
.ds-pill {
display: inline-block;
margin: 0 10px 10px 0;
padding: 8px 14px;
background: rgba(255,255,255,0.12);
border-radius: 18px;
font-size: 14px;
color: #fff;
transition: .2s;
}
.ds-pill:hover { background: rgba(255,255,255,0.22); }
[data-theme="light"] .ds-pill {
background: rgba(0,0,0,0.06);
color: #333;
}
[data-theme="light"] .ds-pill:hover { background: rgba(0,0,0,0.12); }
/* ====== ІНСТРУКЦІЯ ====== */
.ss-howto {
--ss-bg: var(--bg-secondary);
--ss-bg-light: var(--bg-tertiary);
--ss-text: var(--text-primary);
--ss-text-soft: var(--text-secondary);
--ss-border: var(--border-color);
margin: 20px 0 40px;
padding: 0;
color: var(--ss-text);
line-height: 1.55;
}
.ss-howto__lead {
background: var(--ss-bg);
padding: 18px 20px;
border: 1px solid var(--ss-border);
border-radius: 14px;
margin-bottom: 22px;
font-size: 1.05rem;
}
.ss-howto__lead a {
color: var(--ss-accent);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.ss-howto__card {
background: var(--ss-bg);
border: 1px solid var(--ss-border);
padding: 20px 22px;
border-radius: 14px;
margin-bottom: 26px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.ss-howto__h2 {
margin: 0 0 14px;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.25;
}
.ss-howto__list {
padding-left: 22px;
margin: 12px 0 18px;
}
.ss-howto__list li { margin: 6px 0; color: var(--ss-text); }
.ss-howto__note {
margin-top: 14px;
font-size: .95rem;
color: var(--ss-text-soft);
}
.ss-howto__note a { color: var(--ss-accent); }
.ss-instr__logo {
width: 160px;
margin: 0 auto 16px;
display: block;
}
.ss-step {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px 0;
border-bottom: 1px dashed var(--ss-border);
}
.ss-step:last-child { border-bottom: none; }
.ss-step__num {
background: var(--ss-accent);
color: #fff;
min-width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
margin-top: 4px;
font-weight: 700;
}
.ss-step__text { line-height: 1.55; }
.ss-instr__figure { margin: 14px 0; }
.ss-instr__figure img {
width: 100%;
border: 1px solid var(--ss-border);
border-radius: 10px;
}
.ss-instr__cap {
font-size: .85rem;
opacity: .75;
margin-bottom: 4px;
}
.ss-faq { margin-bottom: 12px; }
.ss-faq summary {
cursor: pointer;
padding: 12px 14px;
border-radius: 10px;
background: var(--ss-bg-light);
border: 1px solid var(--ss-border);
font-weight: 600;
color: var(--ss-text);
display: flex;
align-items: center;
justify-content: space-between;
}
.ss-faq__a {
padding: 14px 14px 4px;
color: var(--ss-text-soft);
line-height: 1.55;
}
.ss-howto__links {
margin-top: 20px;
font-size: .95rem;
}
.ss-howto__links a {
color: var(--ss-accent);
text-decoration: none;
}
.ss-howto__links a:hover { text-decoration: underline; }
.ss-howto__seo {
margin-top: 20px;
font-size: .9rem;
opacity: .8;
}
/* ====== ОПИСИ ====== */
.main-description,
.site-desc-footer .main-description-footer {
background: rgba(255,255,255,0.8);
padding: 24px 32px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
margin-bottom: 32px;
min-height: 110px;
transition: none;
overflow: hidden;
}
.main-description h1,
.site-desc-footer .footer-desc-title {
font-size: 1.5rem;
font-weight: 700;
color: #333;
margin-bottom: 16px;
line-height: 1.2;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
min-height: 38px;
}
.main-description p,
.site-desc-footer .main-description-footer p {
font-size: 1rem;
color: #555;
line-height: 1.6;
margin-bottom: 12px;
min-height: 22px;
}
.site-desc-footer .main-description-footer {
font-size: 1.07rem;
}
.site-desc-footer .footer-desc-title {
color: #901c31;
min-height: 30px;
text-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.site-desc-footer .main-description-footer p {
color: #434343;
font-size: 1.01rem;
margin-bottom: 10px;
min-height: 20px;
}
.slf-desc {
--slf-text: var(--text-color);
--slf-accent: var(--accent-color);
--slf-panel: #ffffff;
}
[data-theme="dark"] .slf-desc { --slf-panel: #2b2b2b; }
.slf-box {
overflow: hidden;
background: var(--slf-panel);
border-radius: 9px;
padding: 18px 22px;
margin-bottom: 24px;
box-shadow: 0 4px 14px 0 rgba(0,0,0,0.04);
color: var(--slf-text);
}
.slf-title, .slf-box b {
color: var(--slf-text);
line-height: 1.25;
}
.slf-title {
font-size: clamp(1.125rem, 1.8vw + 0.8rem, 1.6rem);
margin: 0 0 10px;
}
.slf-box p {
color: var(--slf-text);
line-height: 1.56;
font-size: 1.02rem;
margin: 0 0 10px;
}
.slf-box p:last-child { margin-bottom: 0; }
.slf-box a {
color: var(--slf-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ====== УТІЛІТИ ГЕОМЕТРІЇ ====== */
.nowrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fx-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.fx-center { justify-content: center; }
.fx-between { justify-content: space-between; }
.fx-stretch { align-items: stretch; }
.fx-top { align-items: flex-start; }
.fx-middle { align-items: center; }
.fx-bottom { align-items: flex-end; }
.fx-col { display: flex; flex-direction: column; }
.fx-wrap { flex-wrap: wrap; }
.showfull-uniq {
min-height: 320px;
margin-bottom: 32px;
padding-bottom: 1px;
overflow: visible;
}
/* ====== КОНТЕЙНЕРИ ТА СІТКА ====== */
.wrap { min-width: 320px; overflow: hidden; }
.center {
max-width: 1800px;
margin: 0 auto;
position: relative;
z-index: 20;
}
.topchik-one,
.topchik-two {
height: 60px;
padding: 0 2010px;
margin: 0 -2000px;
}
.topchik-one { background: #888; }
.topchik-two {
background: var(--bg-color);
box-shadow: 0 20px 20px -20px rgba(0,0,0,0.2);
}
.cols { margin: 20px 0; padding: 0 10px; }
.bochello { width: 240px; background: #f5f5f5; }
.contello {
width: calc(100% - 240px);
padding-left: 20px;
min-height: 600px;
}
.footer {
background: #3b3b3b;
padding: 20px 2010px;
margin: 0 -2000px;
color: #fff;
text-align: center;
box-shadow: 0 -20px 20px -20px rgba(0,0,0,0.2);
}
/* ====== ШАПКА ====== */
.logo {
display: block;
float: left;
width: 240px;
height: 60px;
margin-right: 60px;
}
.search-box {
width: 400px;
float: left;
margin-top: 10px;
}
.search-field {
width: 100%;
position: relative;
}
.search-field input,
.search-field input:focus {
width: 100%;
height: 40px;
padding: 0 50px 0 10px;
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 7px;
line-height: 40px;
box-shadow: none;
}
[data-theme="light"] .search-field input {
background: #fff;
color: #333;
border-color: #ddd;
}
.search-field input::placeholder { color: var(--text-secondary); opacity: .8; }
.search-box button {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 40px;
padding: 0;
background: transparent !important;
color: #888 !important;
font-size: 18px;
line-height: 40px !important;
}
.btns-log {
float: right;
height: 60px;
line-height: 60px;
white-space: nowrap;
}
.btns-log a {
display: inline-block;
padding: 0 20px;
color: var(--bg-color);
}
.show-login {
background: #888;
color: var(--bg-color);
cursor: pointer;
display: inline-block;
padding: 0 20px;
border-radius: 8px;
}
.btns-log a:hover,
.show-login:hover { text-decoration: underline; }
.topchik-menu,
.topchik-menu li { float: left; }
.topchik-menu a {
display: block;
line-height: 30px;
padding: 0 10px;
background: #f2f2f2;
margin: 10px 10px 0 0;
}
.topchik-menu a span {
display: inline-block;
vertical-align: top;
height: 20px;
line-height: 20px;
padding: 0 5px;
margin: 5px 0 0 10px;
background: #fa5800;
color: var(--bg-color);
}
.sorter {
float: right;
position: relative;
cursor: pointer;
margin-top: 10px;
padding: 0 10px;
line-height: 30px;
}
.sorter:before {
content: attr(data-label);
float: left;
padding-right: 10px;
}
.sorter form {
display: none;
position: absolute;
right: 0;
top: 100%;
width: 160px;
background: var(--bg-color);
padding: 10px;
line-height: 26px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
z-index: 999;
}
.sort li.asc a::after,
.sort li.desc a::after {
content: "\f063";
font-family: FontAwesome;
display: inline-block;
margin-left: 10px;
}
.sort li.desc a::after { content: "\f062"; }
/* ====== ПРЕВ'Ю ЕЛЕМЕНТІВ ====== */
.vidos {
float: left;
width: 33.33%;
padding: 0 5px 10px;
}
.preview-in {
position: relative;
background: var(--bg-color);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.preview-img { display: block; height: 240px; }
.preview-img:hover img { opacity: .8; }
.preview-rate,
.preview-time {
display: inline-block;
padding: 5px 10px;
position: absolute;
top: 10px;
z-index: 20;
font-size: 12px;
white-space: nowrap;
}
.preview-rate {
right: 0;
background: rgba(250,88,0,0.8);
color: var(--bg-color);
}
.preview-time {
left: 0;
background: rgba(0,0,0,0.5);
color: #fff;
}
.preview-text { padding: 15px 10px; }
.preview-title {
display: block;
font: 300 16px/22px 'Inter', sans-serif;
height: 44px;
overflow: hidden;
}
/* ====== БОКОВА ПАНЕЛЬ ====== */
.bochello-box { padding: 10px; }
.bochello-bt {
font-size: 18px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #888;
}
.bochello-nav { background: #888888; color: var(--bg-color); }
.bochello-nav .bochello-bt {
border-bottom: 0;
margin: -10px -10px 10px;
padding: 10px;
background: #888;
color: var(--bg-color);
}
.bochello-nav a {
position: relative;
display: block;
padding: 10px 50px 10px 0;
border-bottom: 1px solid #888;
box-shadow: 0 1px #888;
color: var(--bg-color);
font-size: 14px;
}
.bochello-nav li:last-child a { border-bottom: 0; box-shadow: none; }
.bochello-nav a:hover { color: #888; }
.bochello-nav li span {
position: absolute;
right: 10px;
top: 10px;
opacity: .8;
}
/* ====== ФУТЕР ТЕГИ ====== */
.podvalchik-menu {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 1rem 0;
justify-content: center;
}
.podvalchik-menu a,
.podvalchik-menu span {
display: inline-block;
padding: .3rem .6rem;
font-size: .875rem;
border-radius: 1.2rem;
border: 1px solid var(--accent-color);
background: transparent;
color: var(--accent-color);
transition: all .2s ease;
}
.podvalchik-menu a:hover,
.podvalchik-menu span:hover {
background: var(--accent-color);
color: #fff;
transform: translateY(-1px);
}
.podvalchik-copyr {
margin-bottom: 10px;
font-size: 18px;
}
.counter {
position: absolute;
left: 0;
bottom: 20px;
margin-left: 2010px;
height: 31px;
background: #86636f;
}
/* ====== ПАГІНАЦІЯ ====== */
.navigation {
text-align: center;
margin: 10px 0;
}
.navigation a,
.navigation span,
.pnext a,
.pprev a,
.pprev > span,
.pnext > span {
display: inline-block;
padding: 0 5px;
min-width: 46px;
height: 46px;
margin: 5px 5px 0 0;
background: #222;
color: #fff;
border-radius: 6px;
font-size: 18px;
line-height: 46px;
text-align: center;
text-decoration: none;
transition: background .15s, color .15s;
}
.navigation span:not(.nav_ext),
.pagi-nav a:hover { background: #6a1008; color: #fff; font-weight: 700; }
.navigation span.nav_ext {
background: var(--bg-color);
color: #222;
font-weight: normal;
}
.pprev,
.pnext { display: inline-block; }
.pprev a,
.pnext a,
.pprev > span,
.pnext > span { width: 46px; }
.dle-comments-navigation .pagi-nav { margin-bottom: 0; }
/* ====== ПОВНА СТОРІНКА ВІДЕО ====== */
.vidoser-in {
background: var(--bg-color);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.player-box { background: #000; }
.player-box .video-box { max-width: 700px; margin: 0 auto; }
.vidoser h1 a {
color: #fa5800;
margin-left: 10px;
}
.vidoser-meta {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
padding: 10px;
margin-bottom: 12px;
font-size: .9rem;
}
.vidoser-meta .icon-l {
display: flex;
align-items: center;
gap: 4px;
color: #666;
}
.vidoser-meta .icon-l span.fa { color: #5a5a5a; }
.vidoser-tags__label {
color: var(--tag-label-light);
font-weight: 600;
font-size: .92rem;
white-space: nowrap;
padding-left: 4px;
margin-bottom: .5rem;
letter-spacing: .3px;
}
[data-theme="dark"] .vidoser-tags__label { color: var(--tag-label-dark); }
.vidoser-tags__scroll,
.ds-trending-wrapper {
display: block;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: thin;
scrollbar-color: #aaa transparent;
padding-bottom: 4px;
}
.vidoser-tags__scroll::-webkit-scrollbar,
.ds-trending-wrapper::-webkit-scrollbar { height: 6px; }
.vidoser-tags__scroll::-webkit-scrollbar-track,
.ds-trending-wrapper::-webkit-scrollbar-track { background: transparent; }
.vidoser-tags__scroll::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.vidoser-tags__scroll a,
.vidoser-tags__scroll span {
display: inline-block;
background: #f0f0f0;
color: #111;
padding: .375rem .75rem;
margin-right: .5rem;
border-radius: .375rem;
font-size: .89rem;
line-height: 1.4;
transition: all .2s ease;
}
.vidoser-tags__scroll a:hover,
.vidoser-tags__scroll span:hover { background: #888; color: #fff; }
.vidoser-tags__grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
padding-bottom: 8px;
}
.vidoser-tags__grid a,
.vidoser-tags__grid span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 10px 18px;
margin: 6px 6px 6px 0;
background: var(--tag-bg-light);
color: var(--tag-text-light);
border: 1px solid var(--tag-border-light);
border-radius: .375rem;
font-size: 1rem;
font-weight: 600;
transition: all .18s ease;
}
.vidoser-tags__grid a:hover,
.vidoser-tags__grid span:hover {
background: var(--tag-hover-bg-light);
color: var(--tag-hover-txt-light);
border-color: var(--tag-hover-bg-light);
box-shadow: 0 2px 8px rgba(144, 28, 49, 0.1);
}
[data-theme="dark"] .vidoser-tags__grid a,
[data-theme="dark"] .vidoser-tags__grid span {
background: var(--tag-bg-dark);
color: var(--tag-text-dark);
border-color: var(--tag-border-dark);
}
[data-theme="dark"] .vidoser-tags__grid a:hover,
[data-theme="dark"] .vidoser-tags__grid span:hover {
background: var(--tag-hover-bg-dark);
color: var(--tag-hover-txt-dark);
border-color: var(--tag-hover-bg-dark);
}
.vmeta-fav,
.btn-scr,
.btn-dl,
.vmeta-time,
.vmeta-views {
float: left;
margin-left: 20px;
line-height: 40px;
cursor: pointer;
}
.vmeta-time,
.vmeta-views { float: right; }
.vmeta-desc { background: var(--bg-color); }
.vmeta-screens {
display: none;
padding: 10px 5px 0;
background: #f2f2f2;
border: 1px solid #f0f0f0;
text-align: center;
margin-bottom: 10px;
}
.vmeta-screens a,
.vmeta-screens > img {
display: inline-block;
vertical-align: top;
margin: 0 5px 10px;
max-width: 250px;
max-height: 150px;
overflow: hidden;
}
.btn-dl ul {
position: absolute;
left: 0;
top: 100%;
z-index: 100;
width: 200px;
background: rgba(0,0,0,0.8);
color: var(--bg-color);
padding: 5px 0;
display: none;
}
.btn-dl ul li {
padding: 5px 10px;
line-height: normal;
text-transform: none;
}
.btn-dl ul li a { color: var(--bg-color); }
.btn-dl li:hover { background: #000; }
/* ====== РЕЙТИНГ ====== */
.vmeta-rate {
display: inline-flex;
align-items: center;
gap: 8px;
float: left;
white-space: nowrap;
text-align: center;
border-radius: 4px;
overflow: hidden;
background: #f5f5f5;
box-shadow: 0 0 0 1px #e3e3e3;
width: 246px;
}
.rate-data,
.vmeta-rate .rate-data { display: none; }
.rate-counts {
width: 160px;
padding: 3px 10px 0;
height: 40px;
}
.rate-plus,
.rate-minus {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 40px;
height: 40px;
font-size: 24px;
background: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
line-height: 40px;
}
.rate-plus {
color: #1e9b05;
border-right: 1px solid #e3e3e3;
}
.rate-minus {
color: #d00707;
border-left: 1px solid #e3e3e3;
}
.rate-plus:hover,
.rate-minus:hover {
background: linear-gradient(to top, #fff 0%, #e6e6e6 100%);
}
.rate-bar {
width: 100%;
height: 6px;
min-height: 6px;
border-radius: 4px;
overflow: hidden;
position: relative;
background: #ef4559;
}
.rate-fill {
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #7bbc00;
transition: width 1s linear;
}
.rate-perc {
margin-right: 5px;
font-size: 18px;
color: #1e9b05;
}
.rate-action {
display: inline-flex;
padding: 4px;
font-size: 1.1rem;
color: #666;
transition: color .2s;
}
.rate-action:hover { color: #888; }
.rate-action.active[data-type="plus"] { color: #888; }
.rate-action.active[data-type="minus"] { color: #333; }
.rate-counts .rate-num {
font-weight: bold;
min-width: 24px;
text-align: center;
}
/* ====== СВ'ЯЗАНІ ВІДЕО ====== */
.vidoser .vidos { padding: 10px 5px 0; }
/* ====== ВІДЕО ПЛЕЄР ====== */
.video-box embed,
.video-box object,
.video-box video,
.video-box iframe,
.mejs-container {
max-width: 100% !important;
display: block;
width: 100%;
height: 400px;
}
.vidoser-text {
font: 14px/20px Arial, Helvetica, sans-serif;
color: var(--text-color);
}
.vidoser-text img:not(.emoji) {
max-width: 100%;
margin: 10px 0;
}
.vidoser-text > img[style*="left"],
.vidoser-text > .highslide img[style*="left"] { margin: 0 10px 10px 0; }
.vidoser-text > img[style*="right"],
.vidoser-text > .highslide img[style*="right"] { margin: 0 0 10px 10px; }
.vidoser-text a {
text-decoration: underline;
color: #3366cc;
}
.vidoser-text a:hover { text-decoration: none; }
.vidoser-text h2,
.vidoser-text h3,
.vidoser-text h4,
.vidoser-text h5 {
margin: 10px 0;
font: 700 18px/1.2 Arial, Helvetica, sans-serif;
}
.vidoser-text p { margin-bottom: 10px; }
.vidoser-text ul li,
.vidoser-text ol li {
margin-left: 40px;
}
.vidoser-text ul li { list-style: disc; }
.vidoser-text ol li { list-style: decimal; }
.vidoser-taglist { margin-top: 20px; }
.vidoser-taglist a { color: #e13d7a; }
.vidoser-taglist span:not(.fa):not(:last-child)::after {
content: ",";
display: inline;
}
/* ====== ТЕГИ ====== */
.vidoser-tags {
font-size: .95rem;
margin: 2rem 0 1rem;
display: flex;
flex-direction: column;
gap: .375rem;
overflow: hidden;
}
.vidoser-header { margin-bottom: 20px; padding: 0 12px; }
.vidoser-info-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding-top: 10px;
font-size: .95rem;
color: var(--text-color);
border-top: 1px solid rgba(100,100,100,0.15);
flex-wrap: nowrap;
}
.vidoser-info-category {
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vidoser-info-meta {
display: flex;
align-items: center;
gap: 16px;
white-space: nowrap;
flex-shrink: 0;
}
.vidoser-meta-item {
display: flex;
align-items: center;
gap: 4px;
color: var(--text-color);
}
/* ====== КОМЕНТАРІ ====== */
.vidoser-comms {
padding: 10px;
background: var(--bg-color);
margin-top: 30px;
}
.comms-title {
font-weight: bold;
margin-bottom: 12px;
line-height: 40px;
}
.comms-title > span { font-size: 16px; }
.add-comm-form {
position: relative;
margin: 20px 0;
display: none;
}
.ac-soc {
position: absolute;
right: 0;
top: -8px;
}
.ac-soc:before {
content: attr(data-label);
display: inline-block;
vertical-align: top;
line-height: 30px;
margin-right: 5px;
}
.ac-soc a {
display: inline-block;
margin: 0 0 0 3px;
vertical-align: top;
}
.ac-soc img {
display: block;
width: 30px;
}
.ac-inputs,
.ac-textarea { margin-bottom: 15px; }
.ac-av {
width: 40px;
height: 40px;
float: left;
margin-right: 10px;
background: #fff url(../dleimages/noavatar.png) no-repeat;
background-size: contain;
}
.ac-title {
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
}
.ac-inputs input {
width: 49%;
background: #ffffff;
box-shadow: 0 0 0 1px #EDEDED, inset 1px 1px 3px 0 rgba(0,0,0,0.1);
}
.ac-textarea textarea {
height: 85px;
resize: vertical;
}
.sec-answer + .sec-label { margin-top: 10px; }
.ac-protect {
margin-top: -10px;
display: none;
}
.ac-protect .label { font-size: 12px; }
.ac-protect .sep-input { padding: 10px 10px 10px 160px; }
.ac-protect input { background: var(--bg-color); }
.mass_comments_action {
text-align: right;
padding: 5px 15px;
background: #f0f0f0;
margin: 20px 0 0;
}
.last-comm-link {
font-size: 16px;
margin-bottom: 10px;
}
.last-comm-link a { text-decoration: underline; }
.comm {
background: var(--bg-color);
padding: 10px 10px 10px 60px;
margin-top: 10px;
}
.comm-av {
width: 40px;
height: 40px;
float: left;
margin-left: -50px;
}
.comm-meta { margin-bottom: 8px; }
.comm-meta span + span { margin-left: 10px; opacity: .8; }
.comm-author { font-weight: 700; }
.comm-text { font: 14px/18px Arial, Helvetica, sans-serif; }
.add-comm-btn {
cursor: pointer;
background: #901c31;
color: var(--bg-color);
padding: 6px 12px;
border-radius: 4px;
}
/* ====== ФОРМА ВХОДУ ====== */
.login-box {
background: var(--bg-color);
padding: 20px;
display: none;
}
.lb-user {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
margin: -20px -20px 20px;
padding: 20px;
background: var(--bg-color);
}
.lb-ava {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 20px;
}
.lb-name div { font-size: 18px; }
.lb-name a { margin-top: 10px; }
.lb-menu a {
display: block;
line-height: 30px;
padding: 0 10px;
background: var(--bg-color);
}
.lb-menu a:hover,
.lb-menu a:hover .fa {
background: #e13d7a;
color: var(--bg-color);
}
.lb-menu a .fa { color: #593136; }
.login-box input[type="text"],
.login-box input[type="password"],
.login-box button,
.lb-check {
display: block;
width: 100%;
margin-bottom: 20px;
}
.lb-check input { display: none; }
.lb-check input + label::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 7px;
cursor: pointer;
position: relative;
top: 3px;
border-radius: 3px;
border: 1px solid #ccc;
background: #888;
}
.lb-check input:checked + label::before { background: #e5050b; }
.lb-soc {
margin: 20px -20px -20px;
padding: 20px;
background: #f6f6f6;
text-align: center;
}
.lb-soc a {
display: inline-block;
margin: 10px 3px 0;
vertical-align: top;
}
.lb-soc img { display: block; width: 30px; }
/* ====== XFSEARCH - Бордово-черная тема ====== */
/* Темная тема (по умолчанию) */
:root {
--bg-primary: #0a0a0a;
--bg-secondary: #151515;
--bg-tertiary: #222222;
--border-color: #2a2a2a;
--text-primary: #f0f0f0;
--text-secondary: #aaaaaa;
--accent-color: #901c31;
--accent-light: #b0243f;
--accent-dark: #701525;
--accent-glow: rgba(144, 28, 49, 0.15);
--shadow-color: rgba(0, 0, 0, 0.3);
--glass-effect: rgba(21, 21, 21, 0.85);
}
/* Светлая тема */
[data-theme="light"],
.theme-light {
--bg-primary: #f9f7f5;
--bg-secondary: #f0ece8;
--bg-tertiary: #e8e4df;
--border-color: #d4cfc8;
--text-primary: #2d2a24;
--text-secondary: #66615a;
--accent-color: #901c31;
--accent-light: #b0243f;
--accent-dark: #701525;
--accent-glow: rgba(144, 28, 49, 0.1);
--shadow-color: rgba(0, 0, 0, 0.08);
--glass-effect: rgba(240, 236, 232, 0.9);
}
/* Авто-определение темы */
@media (prefers-color-scheme: light) {
:root:not([data-theme]):not(.theme-dark) {
--bg-primary: #f9f7f5;
--bg-secondary: #f0ece8;
--bg-tertiary: #e8e4df;
--border-color: #d4cfc8;
--text-primary: #2d2a24;
--text-secondary: #66615a;
--accent-color: #901c31;
--accent-light: #b0243f;
--accent-dark: #701525;
--accent-glow: rgba(144, 28, 49, 0.1);
--shadow-color: rgba(0, 0, 0, 0.08);
--glass-effect: rgba(240, 236, 232, 0.9);
}
}
.xf-bottom-box,
.xf-bottom-links {
margin: 30px 0 20px;
padding: clamp(18px, 4vw, 22px);
background: var(--glass-effect);
border: 1px solid var(--border-color);
border-radius: 16px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 8px 32px var(--shadow-color),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Эффект градиентной обводки */
.xf-bottom-box::before,
.xf-bottom-links::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--accent-color) 50%,
transparent 100%);
opacity: 0.6;
}
.xf-bottom-title {
font-size: clamp(1.05rem, 2.8vw, 1.15rem);
font-weight: 600;
margin-bottom: 16px;
color: var(--text-primary);
padding-bottom: 10px;
position: relative;
letter-spacing: -0.01em;
}
.xf-bottom-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--accent-color), transparent);
border-radius: 2px;
}
.xf-bottom-group {
margin-bottom: 20px;
padding: 0 4px;
position: relative;
}
.xf-bottom-group h4 {
font-size: clamp(0.92rem, 2.2vw, 0.98rem);
margin-bottom: 10px;
color: var(--text-primary);
font-weight: 500;
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 8px;
}
.xf-bottom-group h4::before {
content: '';
width: 4px;
height: 14px;
background: var(--accent-color);
border-radius: 2px;
opacity: 0.7;
}
.xf-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
position: relative;
}
.xf-tags a,
.xf-tag {
padding: 8px 16px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 12px;
font-size: clamp(0.82rem, 1.9vw, 0.88rem);
color: var(--text-secondary);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
position: relative;
overflow: hidden;
z-index: 1;
}
/* Эффект свечения при hover */
.xf-tags a::before,
.xf-tag::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
var(--accent-glow),
transparent);
transition: left 0.6s ease;
z-index: -1;
}
.xf-tags a:hover::before,
.xf-tag:hover::before {
left: 100%;
}
/* Акцентные теги */
.xf-tags a.xf-accent,
.xf-tag.xf-accent {
background: linear-gradient(135deg, var(--accent-dark), var(--accent-color));
border: none;
color: #ffffff;
font-weight: 500;
box-shadow: 0 4px 15px var(--accent-glow);
}
.xf-tags a:hover,
.xf-tag:hover {
background: linear-gradient(135deg, var(--accent-dark), var(--accent-color));
border-color: transparent;
color: #ffffff;
transform: translateY(-2px);
box-shadow:
0 6px 20px var(--accent-glow),
0 0 0 1px rgba(144, 28, 49, 0.1);
}
.xf-row {
margin: 20px 0;
padding: 16px 20px;
background: linear-gradient(90deg,
rgba(144, 28, 49, 0.08) 0%,
rgba(144, 28, 49, 0.03) 50%,
transparent 100%);
border-left: 4px solid var(--accent-color);
border-radius: 8px;
position: relative;
overflow: hidden;
}
.xf-row::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
opacity: 0.3;
}
.xf-row h4 {
margin-bottom: 10px;
color: var(--accent-color);
font-weight: 600;
font-size: clamp(0.98rem, 2.4vw, 1.05rem);
position: relative;
}
/* Мобильные настройки */
@media (max-width: 768px) {
.xf-bottom-box,
.xf-bottom-links {
margin: 20px -12px;
padding: 18px 16px;
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.xf-bottom-group {
margin-bottom: 18px;
}
.xf-tags {
gap: 6px;
}
.xf-tags a,
.xf-tag {
padding: 7px 14px;
min-height: 38px;
flex-grow: 1;
min-width: calc(50% - 6px);
border-radius: 10px;
}
.xf-row {
margin: 16px -8px;
padding: 14px 16px;
border-radius: 6px;
}
@media (max-width: 480px) {
.xf-bottom-box,
.xf-bottom-links {
padding: 16px 14px;
margin: 16px -10px;
border-radius: 12px;
}
.xf-tags a,
.xf-tag {
min-width: 100%;
margin-bottom: 5px;
font-size: 0.85rem;
}
.xf-bottom-title {
font-size: 1.1rem;
text-align: left;
}
.xf-bottom-title::after {
left: 50%;
transform: translateX(-50%);
width: 40px;
}
}
}
/* Планшеты */
@media (min-width: 769px) and (max-width: 1024px) {
.xf-bottom-box,
.xf-bottom-links {
margin: 25px 0 20px;
padding: 20px;
border-radius: 16px;
}
.xf-tags a,
.xf-tag {
min-width: calc(33.333% - 8px);
}
}
/* Десктоп - эффекты при hover */
@media (min-width: 1025px) {
.xf-tags a,
.xf-tag {
min-width: auto;
flex-grow: 0;
}
.xf-bottom-box:hover,
.xf-bottom-links:hover {
transform: translateY(-2px);
box-shadow:
0 12px 40px var(--shadow-color),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
}
/* Плавные переходы */
@media (prefers-reduced-motion: no-preference) {
.xf-tags a,
.xf-tag {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.xf-bottom-box,
.xf-bottom-links,
.xf-row {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
}
/* Touch-устройства */
@media (hover: none) and (pointer: coarse) {
.xf-tags a:active,
.xf-tag:active {
background: linear-gradient(135deg, var(--accent-dark), var(--accent-color));
border-color: transparent;
color: #ffffff;
transform: scale(0.96);
}
.xf-tags a,
.xf-tag {
min-height: 40px;
-webkit-tap-highlight-color: transparent;
}
}
/* Специфичные настройки для светлой темы */
[data-theme="light"] .xf-bottom-box,
[data-theme="light"] .xf-bottom-links,
.theme-light .xf-bottom-box,
.theme-light .xf-bottom-links {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 6px 24px var(--shadow-color),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .xf-tags a.xf-accent,
[data-theme="light"] .xf-tag.xf-accent,
.theme-light .xf-tags a.xf-accent,
.theme-light .xf-tag.xf-accent {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
/* Темный режим дополнения */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]):not(.theme-light) .xf-bottom-box,
:root:not([data-theme]):not(.theme-light) .xf-bottom-links {
border: 1px solid rgba(42, 42, 42, 0.7);
}
}
/* Анимация появления */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.xf-bottom-box,
.xf-bottom-links {
animation: fadeInUp 0.5s ease-out;
}
/* Эффект параллакса для глубины */
.xf-bottom-group::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--border-color),
transparent);
opacity: 0.3;
}
/* ====== ГЛОБАЛЬНИЙ ФУТЕР ====== */
.ds-footer {
margin-top: 40px;
padding: 40px 0 30px;
background: var(--footer-bg);
border-top: 1px solid var(--border-color);
color: var(--text-primary);
font-size: 15px;
}
.ds-footer__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
display: flex;
justify-content: space-between;
gap: 40px;
}
.ds-footer__col h3.ds-footer__title {
font-size: 16px;
font-weight: 700;
margin-bottom: 14px;
color: var(--text-primary);
}
.ds-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
}
.ds-footer__col li { margin-bottom: 10px; }
.ds-footer__col a {
display: inline-flex;
align-items: center;
gap: 6px;
opacity: .85;
color: var(--text-primary);
font-size: 15px;
transition: .25s;
}
.ds-footer__col a:hover {
color: var(--accent-color);
opacity: 1;
}
.ds-footer__copy {
margin-top: 35px;
text-align: center;
opacity: .5;
font-size: 14px;
color: var(--text-primary);
}
/* ====== ЗОБРАЖЕННЯ ====== */
.img-box,
.img-wide,
.img-resp-h,
.img-resp-v {
position: relative;
overflow: hidden;
background: #000;
border-radius: 9px;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.img-resp-h { padding-top: 56.25%; }
.img-resp-v { padding-top: 130%; }
.img-box img,
.img-wide img,
.img-resp-h img,
.img-resp-v img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.img-wide img { position: static; }
.img-square img {
width: 150%;
max-width: 150%;
margin-left: -25%;
}
/* ====== ФОРМИ ====== */
input[type="text"],
input[type="password"],
textarea,
select {
width: 100%;
font-size: 1rem;
padding: .65em 1em;
border: 1px solid #e3e3e3;
border-radius: 10px;
color: inherit;
transition: border-color .2s, background .2s;
outline: none;
box-shadow: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border-color: #bb296b;
}
textarea { resize: vertical; min-height: 90px; }
select { min-height: 44px; }
/* ====== КНОПКА НАВЕРХ ====== */
#gotop {
position: fixed;
right: 20px;
bottom: 80px;
z-index: 1111;
width: 48px;
height: 48px;
display: none;
align-items: center;
justify-content: center;
padding: 0;
background: linear-gradient(145deg, #901c31 60%, #59131e 100%);
border: none;
border-radius: 50%;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity .22s, background .2s, box-shadow .2s;
}
#gotop.visible {
display: flex;
opacity: 1;
pointer-events: auto;
}
#gotop svg {
width: 26px;
height: 26px;
fill: #fff;
filter: drop-shadow(0 1px 1px #0002);
transition: fill .2s;
}
#gotop:hover {
background: linear-gradient(145deg, #a12c42 60%, #901c31 100%);
box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}
#gotop:active svg { fill: #ffd700; }
/* ====== ПРОГРЕС ЧИТАННЯ ====== */
#reading-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(0,0,0,0.1);
z-index: 9999;
}
#reading-progress__bar {
width: 0%;
height: 100%;
background: #5bdd32;
transition: width .1s ease-out;
}
/* ====== ЛАЙТБОКС ====== */
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out;
z-index: 10000;
}
.lightbox-overlay img {
max-width: 90%;
max-height: 90%;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
border-radius: 4px;
}
/* ====== КАРУСЕЛЬ ====== */
.my-carousel { margin: 40px 0; }
.my-carousel__wrap {
position: relative;
overflow: hidden;
border: 2px solid #888;
border-radius: 8px;
padding: 16px 0;
background: var(--bg-color);
}
.my-carousel__list {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 0 48px;
margin: 0;
}
.my-carousel__list::-webkit-scrollbar { display: none; }
.my-carousel__list .recommended-item {
flex: 0 0 auto;
width: 140px;
background: #f9f9f9;
border-radius: 6px;
overflow: hidden;
transition: transform .2s, box-shadow .2s;
}
.my-carousel__list .recommended-item:hover {
transform: translateY(-3px);
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.my-carousel__list .recommended-thumb {
position: relative;
width: 100%;
padding-top: 100%;
overflow: hidden;
background: #ddd;
}
.my-carousel__list .recommended-thumb img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.my-carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
padding: 14px;
width: 0;
height: 0;
}
.my-carousel__arrow--left { left: 30px; }
.my-carousel__arrow--left::before {
content: "";
display: block;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-right: 32px solid #ff0707;
}
.my-carousel__arrow--left:hover::before { border-right-color: #cf711f; }
.my-carousel__arrow--right { right: 30px; }
.my-carousel__arrow--right::before {
content: "";
display: block;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-left: 32px solid #ff0707;
}
.my-carousel__arrow--right:hover::before { border-left-color: #cf711f; }
/* ====== ПОДІЛИТИСЬ ====== */
.video-share-box {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 24px 0;
text-align: center;
}
.share-icon {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: .95rem;
border-radius: 999px;
background: #333;
color: var(--text-color);
text-decoration: none;
transition: background .3s, transform .3s;
white-space: nowrap;
}
.share-icon:hover {
background: #901c31;
transform: scale(1.05);
}
.share-icon.tg { background: #0088cc; }
.share-icon.vb { background: #665cac; }
.share-icon.wa { background: #25D366; }
.share-icon.x { background: #000; }
.scat-share-box {
display: flex;
flex-direction: column;
align-items: center;
max-width: 420px;
margin: 24px auto;
padding: 18px 15px;
background: var(--bg-color);
border: 1.5px solid rgba(140,140,140,0.08);
border-radius: 14px;
box-shadow: 0 2px 14px rgba(40,40,40,0.09);
text-align: center;
}
.scat-share-heading {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
font-size: 1.13rem;
font-weight: 600;
letter-spacing: .01em;
color: var(--text-color);
}
.scat-social-buttons {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.scat-social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1.13rem;
color: #fff !important;
box-shadow: 0 2px 8px rgba(40,40,40,0.07);
transition: transform .19s, box-shadow .18s;
outline: none;
}
.scat-social-btn:focus-visible { outline: 2px solid #ffd700; }
.scat-social-btn.scat-tg { background: #2196f3; }
.scat-social-btn.scat-vb { background: #6f55c2; }
.scat-social-btn.scat-wa { background: #25d366; }
.scat-social-btn.scat-tw { background: #191919; }
[data-theme="dark"] .scat-social-btn.scat-tw { background: #fff; color: #222 !important; }
.scat-social-btn:hover,
.scat-social-btn:focus {
transform: scale(1.07);
box-shadow: 0 4px 16px rgba(40,40,40,0.13);
filter: brightness(1.07);
}
.scat-icon {
width: 20px;
height: 20px;
display: inline-block;
fill: currentColor;
}
/* ====== ЕМОДЗІ ====== */
.emoji-search-btn {
position: absolute;
right: 4px;
top: 4px;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: #6a1008;
box-shadow: 0 2px 8px rgba(80,20,10,0.14);
color: #fff;
font-size: 20px;
cursor: pointer;
outline: none;
display: flex;
align-items: center;
justify-content: center;
transition: all .18s ease;
z-index: 2;
}
.emoji-search-btn:hover,
.emoji-search-btn:focus {
transform: scale(1.13) rotate(-6deg);
background: #901c31;
box-shadow: 0 6px 18px rgba(106,16,8,0.23);
border: 1.5px solid #fff;
}
/* ====== АДАПТИВНІСТЬ ====== */
@media (max-width: 1400px) { .preview-img { height: 200px; } }
@media (max-width: 1220px) {
.center { max-width: 1000px; }
.preview-img { height: 202px; }
.vidos { width: 49.33%; }
}
@media (max-width: 1024px) {
.btn-menu {
display: flex;
flex-direction: row-reverse;
}
.btns-log a,
.topchik-menu,
.bochello { display: none; }
.contello { width: 100%; padding-left: 0; }
.counter { position: static; margin: 10px 0 0; }
}
@media (max-width: 950px) {
.center { max-width: 768px; }
.search-box { width: 250px; }
}
@media (max-width: 900px) {
.ds-footer__inner {
flex-wrap: wrap;
justify-content: center;
text-align: center;
gap: 26px;
}
.ds-footer__col ul li { margin-bottom: 8px; }
.site-desc-footer .main-description-footer {
padding: 16px 10px 12px;
min-height: 100px;
font-size: 1rem;
margin-bottom: 7px;
}
}
@media (max-width: 768px) {
.center { max-width: 100%; }
.vidos { width: 50%; }
.topchik-one { height: 100px; position: relative; }
.search-box {
width: auto;
float: none;
margin-top: 0;
position: absolute;
top: 60px;
left: 2010px;
right: 2010px;
}
.search-field input,
.search-field input:focus {
height: 30px;
line-height: 30px;
}
.search-box button {
width: 30px;
height: 30px;
line-height: 30px;
}
.vmeta-fav,
.btn-scr,
.btn-dl,
.vmeta-time,
.vmeta-views { margin-left: 10px; }
.xf-bottom-box,
.xf-bottom-links {
padding: 15px;
margin: 30px 0 20px;
}
.xf-mini-nav {
gap: 8px;
margin: 10px 0 20px;
}
.xf-mini-nav a {
flex: 1 1 calc(50% - 8px);
text-align: center;
padding: 10px 8px;
font-size: .85rem;
}
.ss-howto__lead {
font-size: 1rem;
padding: 16px;
}
.ss-howto__card { padding: 18px; }
.ss-howto__h2 { font-size: 1.25rem; }
.ss-step { gap: 10px; }
.ss-step__num {
min-width: 28px;
height: 28px;
font-size: .95rem;
}
}
@media (max-width: 600px) {
.top-links {
flex-direction: row;
justify-content: flex-start;
gap: 8px;
}
.top-btn {
flex: 1;
text-align: center;
padding: 10px 0;
font-size: .9rem;
}
.ds-footer {
padding: 32px 0 26px;
}
.ds-footer__inner {
flex-direction: column;
align-items: center;
gap: 28px;
}
.ds-footer__col h3.ds-footer__title { font-size: 15px; }
.ds-footer__col a { font-size: 14px; }
.xf-tags,
.xf-mini-nav { justify-content: center; }
.xf-tag {
font-size: 13px;
padding: 5px 12px;
}
.ds-geo-title {
font-size: 18px;
line-height: 1.2;
}
.ds-geo-title .geo-flag { font-size: 18px; }
.ds-pill {
font-size: 13px;
padding: 7px 12px;
margin-right: 8px;
}
.theme-label {
font-size: 1em;
padding: 1px 5px;
border-radius: 4px;
}
input[type="text"],
input[type="password"],
select,
textarea {
font-size: .97rem;
border-radius: 9px;
}
.img-box,
.img-wide,
.img-resp-h,
.img-resp-v { border-radius: 8px; }
.my-carousel__wrap { padding: 12px 0; }
.my-carousel__list {
padding: 0 48px;
gap: 8px;
}
.my-carousel__list .recommended-item { width: 100px; }
.my-carousel__arrow { padding: 12px; }
.my-carousel__arrow--left { left: 30px; }
.my-carousel__arrow--right { right: 30px; }
.my-carousel__arrow::before {
border-top-width: 17px;
border-bottom-width: 17px;
border-right-width: 28px;
border-left-width: 28px;
}
}
@media (max-width: 590px) {
.center2 { max-width: 320px; }
.show-login {
padding: 0 5px;
font-size: 12px;
max-width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.logo {
width: 260px;
overflow: hidden;
margin: 0;
}
.vidos { width: 100%; }
.site-desc { display: none; }
.preview-img { height: 190px; }
.add-comm-btn { padding: 0 10px; }
.comms-title2 {
text-align: center;
display: block !important;
}
.video-box embed,
.video-box object,
.video-box video,
.video-box iframe,
.video-box frame { height: 250px; }
.ac-soc { position: static; }
.ac-inputs input {
width: 100%;
margin-top: 10px;
}
.ac-protect {
width: 100%;
float: none;
margin: 0;
}
.ui-dialog { width: 100% !important; }
.upop-left,
.upop-right {
float: none !important;
width: 100% !important;
margin: 0;
padding: 0 20px;
}
.upop-left {
margin-bottom: 10px;
text-align: center;
}
.ui-dialog-buttonset button {
display: block;
margin: 0 0 5px 0;
width: 100%;
}
#dofullsearch,
#searchsuggestions span.seperator { display: none !important; }
.attach .download-link {
margin: 0 -15px 0 0;
float: none;
display: block;
padding: 0 10px;
}
.attach-info { float: none; }
}
@media (max-width: 540px) {
.scat-share-box {
max-width: 98vw;
padding: 9px 3px;
}
.scat-social-btn {
width: 38px;
height: 38px;
font-size: 1rem;
}
.scat-icon {
width: 18px;
height: 18px;
}
.scat-share-heading { font-size: 1rem; }
.scat-social-buttons { gap: 8px; }
}
@media (max-width: 480px) {
.xf-bottom-title { font-size: 18px; }
.xf-row h4 { font-size: 14px; }
.top-links { gap: 6px; }
.top-btn {
font-size: .85rem;
padding: 8px 12px;
}
.ss-howto__h2 { font-size: 1.15rem; }
.ss-step {
flex-direction: column;
align-items: flex-start;
}
.ss-step__num { margin-bottom: 6px; }
.ss-instr__logo { width: 130px; }
.main-description {
padding: 16px;
margin-bottom: 20px;
min-height: 68px;
font-size: .9rem;
}
.main-description h1 {
font-size: 1.07rem;
margin-bottom: 10px;
min-height: 24px;
}
.main-description p {
font-size: .88rem;
margin-bottom: 8px;
min-height: 16px;
}
.podvalchik-menu a,
.podvalchik-menu span {
flex: 1 1 45%;
text-align: center;
}
.share-icon {
font-size: .875rem;
padding: 6px 12px;
}
.vidoser-info-row { gap: 8px; }
.vidoser-info-category {
font-size: .9rem;
max-width: 50%;
}
.vidoser-info-meta {
gap: 10px;
font-size: .85rem;
}
.vidoser-tags__scroll a,
.vidoser-tags__scroll span {
font-size: .8rem;
padding: .25rem .5rem;
}
.vidoser-tags__grid a,
.vidoser-tags__grid span {
font-size: .92rem;
padding: 9px 14px;
min-width: 36px;
min-height: 36px;
margin: 5px 4px 5px 0;
}
}
@media (max-width: 420px) {
.ds-geo-title {
font-size: 16.5px;
gap: 6px;
}
.ds-geo-title .geo-flag { font-size: 16px; }
.ds-pill {
font-size: 12.5px;
padding: 6px 10px;
}
}
@media (max-width: 400px) {
.theme-label {
font-size: .9em;
padding: 1px 3px;
border-radius: 3px;
}
}
@media (max-width: 360px) {
.xf-mini-nav a { flex: 1 1 100%; }
.top-links { flex-direction: column; }
.top-btn { width: 100%; }
}
/* ====== НАВІГАЦІЯ (БОРДОВАЯ ТЕМА) ====== */
:root {
--nav-bg: rgba(144, 28, 49, 0.08);
--nav-accent: #901c31;
--nav-accent-light: #b0243f;
--nav-accent-dark: #701525;
--nav-text: #ffffff;
--nav-inactive: rgba(255, 255, 255, 0.7);
}
[data-theme="light"] {
--nav-bg: rgba(144, 28, 49, 0.05);
--nav-accent: #901c31;
--nav-accent-light: #b0243f;
--nav-accent-dark: #701525;
--nav-text: #2d2a24;
--nav-inactive: rgba(45, 42, 36, 0.7);
}
.speedbar {
/* Базовые стили */
font-size: clamp(0.9rem, 1.8vw, 1rem);
color: var(--nav-text);
margin: 0 0 clamp(20px, 3vw, 25px) 0;
padding: clamp(12px, 2vw, 16px) clamp(12px, 2vw, 20px);
/* Фон и оформление */
background: var(--nav-bg);
border: 1px solid rgba(144, 28, 49, 0.2);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
/* Флекс-контейнер */
display: flex;
align-items: center;
gap: clamp(6px, 1vw, 10px);
/* Скролл и поведение */
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: thin;
scrollbar-color: rgba(144, 28, 49, 0.6) transparent;
min-height: 52px;
-webkit-overflow-scrolling: touch;
/* Улучшенный скроллбар */
&::-webkit-scrollbar {
height: 5px;
}
&::-webkit-scrollbar-track {
background: rgba(144, 28, 49, 0.1);
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: linear-gradient(90deg,
var(--nav-accent-dark),
var(--nav-accent),
var(--nav-accent-light));
border-radius: 3px;
}
/* Градиентные края для индикации скролла */
mask-image: linear-gradient(
to right,
transparent 0%,
black 40px,
black calc(100% - 40px),
transparent 100%
);
}
/* Ссылки навигации */
.speedbar a {
color: var(--nav-text) !important;
font-weight: 600;
padding: clamp(5px, 0.8vw, 8px) clamp(10px, 1.5vw, 16px);
background: rgba(144, 28, 49, 0.15);
border-radius: 8px;
border: 1px solid transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
position: relative;
overflow: hidden;
flex-shrink: 0;
/* Эффект свечения */
&::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(144, 28, 49, 0.3),
transparent
);
transition: left 0.6s ease;
}
&:hover::before {
left: 100%;
}
}
/* Первая ссылка (домен) - особый стиль */
.speedbar a:first-of-type {
background: linear-gradient(135deg,
var(--nav-accent-dark),
var(--nav-accent));
color: white !important;
font-weight: 700;
box-shadow: 0 4px 12px rgba(144, 28, 49, 0.3);
&:hover {
background: linear-gradient(135deg,
var(--nav-accent),
var(--nav-accent-light));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(144, 28, 49, 0.4);
}
}
/* Остальные ссылки при наведении */
.speedbar a:not(:first-of-type):hover {
background: rgba(144, 28, 49, 0.25);
border-color: var(--nav-accent);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(144, 28, 49, 0.2);
}
/* Текущая страница */
.speedbar span:not(.separator) {
color: var(--nav-inactive);
font-weight: 500;
padding: 5px 10px;
white-space: nowrap;
flex-shrink: 0;
display: inline-flex;
align-items: center;
background: rgba(144, 28, 49, 0.08);
border-radius: 6px;
}
/* Разделители */
.speedbar .separator,
.speedbar .fa-angle-right {
margin: 0 clamp(4px, 0.8vw, 8px);
color: var(--nav-inactive) !important;
opacity: 0.6;
font-size: 0.9em;
flex-shrink: 0;
}
/* SVG иконка дома - БОЛЬШЕ И ЯРЧЕ */
.speedbar svg {
width: clamp(20px, 2.5vw, 24px) !important;
height: clamp(20px, 2.5vw, 24px) !important;
vertical-align: middle;
margin-right: 8px;
flex-shrink: 0;
fill: #ffffff;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
transition: all 0.3s ease;
/* Первая ссылка */
&:first-of-type {
fill: #ffffff !important;
}
/* Остальные ссылки */
&:not(:first-of-type) {
fill: var(--nav-accent-light);
}
}
/* Анимация иконки при наведении */
.speedbar a:hover svg {
transform: scale(1.1) translateY(-1px);
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}
/* ====== АДАПТИВНОСТЬ ====== */
/* Планшеты (до 1024px) */
@media (max-width: 1024px) {
.speedbar {
padding: 14px 16px;
margin: 0 0 20px 0;
border-radius: 10px;
/* Увеличиваем видимость скроллбара */
&::-webkit-scrollbar {
height: 6px;
}
}
.speedbar a {
padding: 7px 14px;
font-size: 0.95rem;
}
.speedbar svg {
width: 22px !important;
height: 22px !important;
}
}
/* Мобильные (до 768px) */
@media (max-width: 768px) {
.speedbar {
padding: 12px 14px;
margin: 0 -10px 15px -10px;
border-radius: 0;
border-left: none;
border-right: none;
border-top: none;
border-bottom: 2px solid rgba(144, 28, 49, 0.3);
/* Усиливаем градиентные края */
mask-image: linear-gradient(
to right,
transparent 0%,
black 20px,
black calc(100% - 20px),
transparent 100%
);
}
.speedbar a {
padding: 8px 12px;
font-size: 0.9rem;
background: rgba(144, 28, 49, 0.2);
/* Минимальная ширина для удобного тапа */
min-width: fit-content;
}
.speedbar svg {
width: 20px !important;
height: 20px !important;
margin-right: 6px;
}
/* Увеличиваем разделители для лучшей видимости */
.speedbar .separator,
.speedbar .fa-angle-right {
margin: 0 6px;
font-size: 1em;
}
}
/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
.speedbar {
padding: 10px 12px;
min-height: 46px;
gap: 4px;
}
.speedbar a {
padding: 6px 10px;
font-size: 0.85rem;
gap: 4px;
}
.speedbar svg {
width: 18px !important;
height: 18px !important;
margin-right: 4px;
}
/* Уменьшаем разделители но оставляем видимыми */
.speedbar .separator,
.speedbar .fa-angle-right {
margin: 0 4px;
font-size: 0.9em;
min-width: 8px;
}
/* Скрываем текст "Home" но оставляем иконку */
.speedbar a:first-of-type:not([href*="/"]) {
&::after {
content: 'Home';
font-size: 0;
opacity: 0;
}
}
}
/* Супер маленькие экраны (до 375px) */
@media (max-width: 375px) {
.speedbar {
padding: 8px 10px;
font-size: 0.85rem;
}
.speedbar a {
padding: 5px 8px;
}
.speedbar svg {
width: 16px !important;
height: 16px !important;
margin-right: 3px;
}
/* Делаем иконку дома еще заметнее */
.speedbar a:first-of-type svg {
width: 18px !important;
height: 18px !important;
fill: #ffffff !important;
background: var(--nav-accent);
padding: 3px;
border-radius: 5px;
box-shadow: 0 0 0 2px rgba(144, 28, 49, 0.5);
}
}
/* Десктопы (от 1025px) */
@media (min-width: 1025px) {
.speedbar {
padding: 16px 24px;
/* Эффект при наведении на весь блок */
&:hover {
background: rgba(144, 28, 49, 0.12);
border-color: rgba(144, 28, 49, 0.3);
box-shadow: 0 6px 24px rgba(144, 28, 49, 0.15);
}
}
.speedbar a {
padding: 8px 18px;
}
.speedbar svg {
width: 24px !important;
height: 24px !important;
}
}
/* Светлая тема - дополнительные корректировки */
[data-theme="light"] .speedbar {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
svg {
fill: var(--nav-accent);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
svg:first-of-type {
fill: #ffffff !important;
}
}
/* Анимация появления */
@keyframes navSlideIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.speedbar {
animation: navSlideIn 0.4s ease-out;
}
/* Фикс для темных тем - делаем иконку ярче */
@media (prefers-color-scheme: dark) {
.speedbar svg:not(:first-of-type) {
fill: var(--nav-accent-light);
opacity: 0.9;
}
}
/* === КОНТЕЙНЕР ДЛЯ ВСЕХ КНОПОК === */
.top-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 18px;
}
/* ===== DARK THEME (по умолчанию) ===== */
.top-links a {
flex: 1 1 calc(50% - 10px);
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: .9rem;
color: #fff;
transition: .25s;
background-color: #353434;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* ХОВЕР */
.top-links a:hover {
background: #444;
border-color: #fff;
}
/* TELEGRAM HUB (DARK) */
.top-btn-telegram {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 10px 12px;
background: #353434;
}
.top-btn-telegram:hover {
background: rgba(0, 0, 0, 0.75);
}
.tg-ico svg { width: 20px; height: 20px; }
.tg-name-main {
font-weight: 700;
font-size: 15px;
color: #fff;
letter-spacing: .2px;
line-height: 1;
}
.tg-hub-box {
align-items: center;
gap: 1px;
padding: 2px 2px;
background: #ff9000;
border-radius: 1px;
height: 20px;
}
.hub-text {
font-weight: 700;
font-size: 15px;
color: #000;
line-height: 1;
}
.tg-emoji { font-size: 14px; line-height: 1; }
/* ===== LIGHT THEME SUPPORT ===== */
[data-theme="light"] .top-links a {
background-color: #f1f1f1;
color: #222;
border-color: rgba(0,0,0,0.15);
}
[data-theme="light"] .top-links a:hover {
background-color: #e4e4e4;
border-color: #000;
}
/* Телеграм кнопки в светлой теме */
[data-theme="light"] .top-btn-telegram {
background: #f1f1f1;
border-color: rgba(0,0,0,0.15);
}
[data-theme="light"] .top-btn-telegram:hover {
background: #e4e4e4;
}
/* Текстовая часть — тёмная в светлой теме */
[data-theme="light"] .tg-name-main {
color: #111;
}
[data-theme="light"] .tg-ico svg {
filter: brightness(0.2);
}
/* HUB оранжевый остаётся, но текст становится темнее */
[data-theme="light"] .hub-text {
color: #111;
}
/* ===== АДАПТИВ ===== */
@media (min-width: 900px) {
.top-links a {
flex: 1 1 calc(25% - 10px);
max-width: 240px;
}
}
@media (max-width: 600px) {
.top-links a { padding: 8px 10px; font-size: 12px; }
.tg-ico svg { width: 17px; height: 17px; }
.tg-name-main { font-size: 13px; }
.tg-hub-box { padding: 2px 2px; height: 18px; }
.hub-text { font-size: 13.5px; }
.tg-emoji { font-size: 12px; }
}
/* ============================================
ГЛОБАЛЬНЫЕ ФИКСЫ ДЛЯ CLS (Cumulative Layout Shift)
============================================ */
/* 1. ФИКС ДЛЯ ВСЕХ ИЗОБРАЖЕНИЙ НА СТРАНИЦЕ */
/* Задает соотношение сторон всем изображениям, чтобы они не вызывали сдвигов */
img {
aspect-ratio: attr(width) / attr(height); /* Сохраняем пропорции из атрибутов */
max-width: 100%; /* Не выходят за пределы контейнера */
height: auto; /* Высота рассчитывается автоматически */
display: block; /* Убираем лишние отступы снизу */
}
/* 2. ГАРАНТИЯ ОТСУТСТВИЯ СДВИГОВ ПРИ ЗАГРУЗКЕ */
/* Отключает навигацию по якорям для предотвращения неожиданных скроллов */
body {
overflow-anchor: none;
}
/* 3. ПРЕДОТВРАЩЕНИЕ FOUT/FOIT (всплытие текста) */
/* Указывает браузеру использовать резервный шрифт при загрузке */
.vidoser-title,
.vidoser-info-row,
.vr-title {
font-display: swap; /* Использует системный шрифт до загрузки кастомного */
contain: layout; /* Изолирует изменения макета внутри элемента */
}
/* ============================================
ОСНОВНОЙ КОНТЕЙНЕР И СЕТКА
============================================ */
/* Контейнер всей страницы видео */
.vidoser-in {
color: var(--text-color);
contain: layout style paint; /* Изолирует всю область от внешних влияний */
}
/* Сетка с двумя колонками (контент + сайдбар) */
.video-layout {
display: grid;
grid-template-columns: 1fr 320px; /* 320px - фиксированная правая колонка */
gap: 20px;
align-items: start;
}
/* Левая основная область (видео + контент) */
.video-main-area {
contain: layout style paint; /* Полная изоляция - никаких сдвигов! */
}
/* ============================================
ПРАВАЯ КОЛОНКА (РЕКОМЕНДАЦИИ) - FIXED HEIGHT
============================================ */
/* Правая колонка (рекомендации) */
.video-rightbar {
position: sticky;
top: 90px; /* Прилипает при скролле */
padding-right: 5px;
overflow: visible;
contain: strict; /* КРИТИЧЕСКИ ВАЖНО: изолирует правую колонку */
height: 1600px; /* Фиксированная высота предотвращает сдвиги */
overflow: hidden; /* Скрываем выходящий контент */
}
/* Заголовки в правой колонке */
.vr-title {
font-size: 1rem;
margin: 0 0 10px;
font-weight: 700;
color: var(--text-color);
contain: layout; /* Предотвращает сдвиги текста */
}
/* Списки рекомендаций */
.vr-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
contain: content; /* Изолирует изменения контента */
}
/* Карточки в рекомендациях */
.vr-list .vidos {
background: rgba(25, 25, 25, 0.85);
border-radius: 8px;
padding: 6px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
contain: layout; /* Каждая карточка изолирована */
}
.vr-list img {
border-radius: 6px;
aspect-ratio: 16/9; /* Фиксируем пропорции миниатюр */
object-fit: cover; /* Заполняем контейнер без искажений */
}
/* ============================================
ЗАГОЛОВОК И МЕТА-ИНФОРМАЦИЯ
============================================ */
/* Строка с мета-информацией (категория, просмотры, дата) */
.vidoser-info-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
color: var(--text-color);
border-top: 1px solid rgba(100, 100, 100, 0.15);
padding-top: 10px;
flex-wrap: nowrap;
contain: layout; /* Изолируем строку мета-инфо */
}
/* Категория видео */
.vidoser-info-category {
font-weight: 500;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Блок с просмотрами и датой */
.vidoser-info-meta {
display: flex;
align-items: center;
gap: 16px;
white-space: nowrap;
flex-shrink: 0;
}
/* Отдельный элемент мета-информации */
.vidoser-meta-item {
display: flex;
align-items: center;
gap: 4px;
color: var(--text-color);
}
/* ============================================
ВИДЕО ПЛЕЙЕР - FIXED ASPECT RATIO
============================================ */
/* Обёртка для плеера - резервируем место ДО загрузки iframe */
#video-embed-placeholder {
width: 100%;
max-width: 1200px;
margin: 20px auto;
position: relative;
aspect-ratio: 16/9; /* КРИТИЧЕСКИ ВАЖНО: фиксируем пропорции */
background: #000; /* Черный фон пока грузится видео */
border-radius: 0;
overflow: hidden;
contain: strict; /* Полная изоляция */
}
/* Внутренний контейнер плеера */
.video-iframe-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
contain: strict; /* Iframe не влияет на родителя */
}
/* Сам iframe */
.video-iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
background: #000;
}
/* ============================================
КНОПКА СКАЧИВАНИЯ - RESERVED SPACE
============================================ */
/* Обёртка для кнопки - резервируем место */
#download-btn-wrap {
margin: 14px 0 22px;
text-align: center;
min-height: 60px; /* Резервируем высоту кнопки */
contain: layout; /* Изолируем от сдвигов */
}
/* ============================================
📥 КНОПКА СКАЧИВАНИЯ (FIXED)
============================================ */
/* Обёртка */
#download-btn-wrap {
margin: 14px 0 22px;
text-align: center;
min-height: 60px;
contain: layout;
}
/* КНОПКА */
.dl-btn-uni,
.vipfile-autobtn,
.dl-btn-uni:link,
.dl-btn-uni:visited,
.vipfile-autobtn:link,
.vipfile-autobtn:visited {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 900px;
margin: 15px auto 25px;
padding: 17px 22px;
background: #b10020;
border: 1px solid #fe7702;
box-shadow: 0 0 0 1px #fe7702;
border-radius: 10px;
color: #fff !important;
font-size: 17px;
font-weight: 600;
letter-spacing: 0.3px;
text-decoration: none !important; /* 🔥 УБИВАЕМ underline */
transition: background 0.2s ease, box-shadow 0.2s ease;
touch-action: manipulation;
contain: layout;
}
/* УБИВАЕМ underline ВНУТРИ */
.dl-btn-uni *,
.vipfile-autobtn * {
text-decoration: none !important;
}
/* HOVER */
.dl-btn-uni:hover,
.vipfile-autobtn:hover {
background: #570d1a !important;
box-shadow: 0 0 10px rgba(47, 164, 223, 0.45);
}
/* ИКОНКА */
.dl-btn-uni::before {
content: "";
width: 26px;
height: 26px;
display: inline-block;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* DISABLED */
.dl-btn-uni.disabled {
opacity: 0.6;
cursor: not-allowed;
background: #808080;
border: 1px solid #5f5f5f;
}
/* ============================================
ГАЛЕРЕЯ (ПОСТЕР + СКРИНШОТЫ) - FIXED SIZE
============================================ */
/* ===== POSTER GALLERY (FULL REPLACEMENT) ===== */
.poster-gallery {
width: 600px;
height: 337px;
flex-shrink: 0;
position: relative;
overflow: hidden;
border-radius: 8px;
background: #000;
display: flex; /* Центрирование */
align-items: center;
justify-content: center;
contain: strict;
}
/* Базовые стили картинки */
#gallery-img {
display: block;
border-radius: 8px;
border: 1px solid #222;
cursor: pointer;
transition: opacity 0.2s ease;
}
/* 🔥 Обычные широкие картинки: на весь контейнер (обрезка по краям) */
#gallery-img.is-landscape {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* 🔥 Вертикальные картинки: полностью видны, по центру, черные поля */
#gallery-img.is-portrait {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
/* Стрелки навигации */
.gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--accent-color);
color: #fff;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
z-index: 10;
font-size: 20px;
user-select: none;
line-height: 1;
transition: background 0.2s;
}
.gallery-arrow:hover {
background: rgba(138, 91, 0, 0.7);
}
.gallery-arrow.left { left: 10px; }
.gallery-arrow.right { right: 10px; }
/* Адаптивность */
@media (max-width: 640px) {
.poster-gallery {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
}
/* ============================================
МАКЕТ С ДВУМЯ КОЛОНКАМИ (ПОСТЕР + МЕТА)
============================================ */
/* Ряд с постером и мета-информацией - ФИКСИРОВАННАЯ ВЫСОТА */
.poster-meta-row {
display: flex;
align-items: stretch; /* Растягиваем до одинаковой высоты */
gap: 25px;
margin: 25px 0;
height: 400px; /* ФИКСИРОВАННАЯ высота всей строки */
contain: strict !important; /* КРИТИЧЕСКИ ВАЖНО: изолируем всю строку */
position: relative;
}
/* Мета-информация - занимает оставшееся пространство */
.poster-meta-row .video-meta {
flex: 1; /* Занимает всё доступное пространство */
height: 100%; /* Растягиваем на всю высоту родителя */
overflow: hidden; /* Скрываем выходящий контент */
contain: strict; /* Изолируем мета-таблицу */
padding: 10px;
background: var(--bg-color);
border: 1px solid #1f1f1f;
border-radius: 6px;
}
/* Отдельная строка мета-данных */
.video-meta .meta-line {
padding: 6px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
display: flex;
gap: 10px;
font-size: 14px;
contain: layout; /* Каждая строка изолирована */
}
/* Заголовки в мета-данных (фиксированная ширина) */
.video-meta strong {
min-width: 92px; /* Фиксированная ширина для выравнивания */
font-weight: 600;
color: var(--text-color);
flex-shrink: 0; /* Не сжимается */
}
/* Текст мета-данных */
.meta-text {
flex: 1;
min-width: 0; /* Позволяет сжиматься при переполнении */
contain: layout;
}
/* Ссылки в мета-данных (теги, категории) */
.meta-text a {
display: inline-block;
padding: 3px 8px;
background: #1b1b1b;
border: 1px solid #2b2b2b;
border-radius: 5px;
font-size: 13px;
color: #d85d76;
text-decoration: none;
transition: background 0.15s;
margin: 1px 3px 1px 0;
}
/* Ховер для ссылок */
.meta-text a:hover {
background: #901c31;
border-color: #901c31;
color: #fff;
}
/* Стрелка после ссылки */
.meta-text a::after {
content: "↗";
opacity: 0.6;
margin-left: 4px;
font-size: 11px;
}
/* ============================================
TELEGRAM КНОПКА
============================================ */
.top-btn-telegram {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 15px;
padding: 8px 15px;
background: rgba(0, 136, 204, 0.1);
border-radius: 6px;
text-decoration: none;
color: #0088cc;
font-weight: 600;
contain: layout; /* Изолируем кнопку */
}
.top-btn-telegram svg {
width: 20px;
height: 20px;
}
/* ============================================
ZOOM МОДАЛЬНОЕ ОКНО
============================================ */
#zoom-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
justify-content: center;
align-items: center;
contain: strict; /* Модалка не влияет на основной макет */
}
#zoom-modal img {
max-width: 90%;
max-height: 90%;
border-radius: 8px;
}
/* ====== STICKY ACTION BAR (ПЛАВАЮЩАЯ ПАНЕЛЬ) ====== */
/* Основной стиль sticky-панели */
.sticky-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(20, 20, 20, 0.92);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
z-index: 9999;
transform: translateY(100%);
transition: transform 0.35s ease;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Видимое состояние */
.sticky-bar--visible {
transform: translateY(0%);
}
/* Миниатюра в панели */
.sticky-bar__thumb img {
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 6px;
display: block;
}
/* Заголовок в панели */
.sticky-bar__title {
font-size: 14px;
font-weight: 600;
color: #fff;
max-width: 220px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Кнопки в панели */
.sticky-bar__btn {
border: none;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
/* Кнопка скачивания */
.sticky-bar__btn--download {
background: #218a00;
color: #fff;
}
.sticky-bar__btn--download:hover {
background: #10b32d;
}
/* Кнопка "Следующее" */
.sticky-bar__btn--next {
background: #333;
color: #fff;
}
.sticky-bar__btn--next:hover {
background: #555;
}
/* ============================================
АДАПТИВНОСТЬ - МОБИЛЬНЫЕ УСТРОЙСТВА
============================================ */
/* Большие ноутбуки (до 1500px) */
@media (max-width: 1500px) {
.video-layout {
grid-template-columns: 1fr 300px;
}
}
/* 1366px */
@media (max-width: 1366px) {
.video-layout {
grid-template-columns: 1fr 280px;
}
/* Уменьшаем галерею пропорционально */
.poster-gallery {
width: 550px;
height: 309px; /* 550 * 9/16 */
}
.poster-meta-row {
height: 350px; /* Уменьшаем высоту строки */
}
}
/* 1280px */
@media (max-width: 1280px) {
.video-layout {
grid-template-columns: 1fr 260px;
}
.poster-gallery {
width: 500px;
height: 281px;
}
.poster-meta-row {
height: 320px;
gap: 20px;
}
}
/* 1180px */
@media (max-width: 1180px) {
.video-layout {
grid-template-columns: 1fr 240px;
}
.poster-gallery {
width: 450px;
height: 253px;
}
.poster-meta-row {
height: 300px;
}
}
/* 1080px */
@media (max-width: 1080px) {
.video-layout {
grid-template-columns: 1fr 220px;
}
.poster-gallery {
width: 400px;
height: 225px;
}
.poster-meta-row {
height: 270px;
}
}
/* 960px */
@media (max-width: 960px) {
.video-layout {
grid-template-columns: 1fr 200px;
}
.poster-gallery {
width: 350px;
height: 197px;
}
.poster-meta-row {
height: 240px;
gap: 15px;
}
}
/* Планшеты и мобильные (до 900px) - ОСНОВНОЙ БРЕЙКПОИНТ */
@media (max-width: 900px) {
/* Переключаемся на одну колонку */
.video-layout {
grid-template-columns: 1fr;
}
/* Скрываем правую колонку на мобильных */
.video-rightbar {
display: none;
}
/* МЕНЯЕМ ЛОГИКУ: на мобильных убираем фиксированную высоту */
.poster-meta-row {
flex-direction: column; /* Колонка вместо строки */
gap: 15px;
height: auto !important; /* Автоматическая высота */
min-height: auto;
contain: layout !important; /* Более легкая изоляция */
}
/* Галерея становится адаптивной */
.poster-gallery {
width: 100% !important;
max-width: 600px;
height: auto !important;
aspect-ratio: 16/9; /* Сохраняем пропорции */
margin: 0 auto;
}
.poster-gallery img {
position: relative; /* Меняем позиционирование */
height: auto; /* Автоматическая высота */
}
/* Мета-таблица тоже адаптивная */
.poster-meta-row .video-meta {
height: auto;
contain: layout;
}
}
/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
/* Sticky панель - оптимизация для маленьких экранов */
.sticky-bar {
padding: 15px;
gap: 10px;
flex-wrap: wrap; /* Переносим элементы */
justify-content: space-between;
}
.sticky-bar__thumb img {
width: 40px;
height: 40px;
}
.sticky-bar__title {
font-size: 13px;
max-width: 100%;
flex: 1 1 100%; /* Занимает всю ширину */
margin-bottom: 4px;
}
.sticky-bar__btn {
padding: 6px 10px;
font-size: 13px;
flex: 1 1 auto;
text-align: center;
}
.sticky-bar__btn--download {
flex: 1; /* Кнопка скачивания растягивается */
}
.sticky-bar__btn--next {
flex: 0 0 auto; /* Кнопка "Следующее" не растягивается */
white-space: nowrap;
margin-left: auto;
}
/* Мета-информация в заголовке - вертикальное расположение */
.vidoser-info-row {
align-items: flex-start;
gap: 8px;
}
/* Галерея на маленьких экранах */
.gallery-arrow {
padding: 6px 10px;
font-size: 16px;
}
}
.vidoser-title {
font-size: 28px;
line-height: 1.3;
font-weight: 700;
margin: 20px 0;
color: var(--text-color);
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
padding: 0 15px;
}
/* Планшеты (768px и меньше) */
@media (max-width: 768px) {
.vidoser-title {
font-size: 22px;
margin: 15px 0;
padding: 0 10px;
}
}
/* Мобильные (480px и меньше) */
@media (max-width: 480px) {
.vidoser-title {
font-size: 18px;
line-height: 1.25;
margin: 12px 0;
padding: 0 8px;
}
}
/* Очень маленькие экраны (375px и меньше) */
@media (max-width: 375px) {
.vidoser-title {
font-size: 16px;
margin: 10px 0;
}
}
/* Стили для заголовков "Recommended For You" и "Related Scat Video" */
.rels-t {
font-weight: bold; /* Устанавливаем жирный шрифт */
color: #fff; /* Белый цвет текста */
text-transform: uppercase; /* Все буквы большие */
margin: 15px 0; /* Отступы сверху и снизу */
padding-left: 15px; /* Отступ слева */
font-size: 1.5rem; /* Размер шрифта для обычных экранов */
border-left: 5px solid #ff4d4d; /* Линия слева */
padding-left: 20px; /* Отступ от левого края */
}
/* Стили для заголовков на маленьких экранах (мобильные устройства) */
@media (max-width: 768px) {
.rels-t {
font-size: 1.2rem; /* Уменьшаем размер шрифта на мобильных */
padding-left: 10px; /* Меньший отступ слева */
margin: 10px 0; /* Меньшие отступы сверху и снизу */
}
}
/* Дополнительный стиль для заголовков, если необходимо изменить конкретные заголовки */
h3.rels-t {
color: #ff4d4d; /* Цвет для "Recommended For You" */
font-size: 1.7rem;
}
h4.rels-t {
color: #ffcc00; /* Цвет для "Related Scat Video" */
font-size: 1.5rem;
}
/* Адаптивные изменения для разных экранов */
@media (max-width: 1200px) {
.rels-t {
font-size: 1.3rem; /* Меньше шрифт для больших экранов */
}
}
@media (max-width: 992px) {
.rels-t {
font-size: 1.2rem; /* Еще меньше шрифт для планшетов */
}
}