/* ========================================================================= LIQUID GLASS — DARK / RED THEME Профессиональная оверлей-тема в стиле "жидкого стекла" (Apple Liquid Glass) с красными акцентами, вдохновлённая современным YouTube dark mode. ВАЖНО: этот файл подключается ПОСЛЕ style.css, theme-style.css и night-mode.css. Все исходные CSS-классы (ключи) сохранены без изменений — переопределяются только значения (цвет, фон, тени, радиусы, blur). Ничего из исходных файлов удалять не нужно. Подключение (в конце , после остальных стилей): ========================================================================= */ /* ------------------------------------------------------------------------- 1. ТОКЕНЫ ТЕМЫ ------------------------------------------------------------------------- */ :root{ /* Базовые поверхности */ --lg-bg: #0a0a0d; --lg-bg-elev-1: #111116; --lg-bg-elev-2: #17161c; /* Стекло */ --lg-glass: rgba(255,255,255,0.055); --lg-glass-strong: rgba(255,255,255,0.09); --lg-glass-header: rgba(14,13,16,0.62); --lg-glass-panel: rgba(255,255,255,0.045); --lg-glass-input: rgba(255,255,255,0.06); --lg-border: rgba(255,255,255,0.09); --lg-border-strong: rgba(255,255,255,0.16); --lg-highlight: rgba(255,255,255,0.10); --lg-blur: blur(22px) saturate(170%); --lg-blur-soft: blur(14px) saturate(150%); /* Текст */ --lg-text: #f3f2f4; --lg-text-dim: #b1aeb6; --lg-text-muted: #726f78; /* Красный акцент */ --lg-red: #ff3b52; --lg-red-strong: #ff1f3d; --lg-red-dark: #b3162c; --lg-red-soft: rgba(255,59,82,0.16); --lg-red-glow: rgba(255,59,82,0.45); --lg-red-gradient: linear-gradient(135deg,#ff3b52 0%,#e01b3d 100%); /* Семантика (не красная, чтобы не конфликтовать с акцентом) */ --lg-success: #33d17a; --lg-warning: #ffb648; --lg-info: #4fb7ff; --lg-radius-xs: 6px; --lg-radius-sm: 8px; --lg-radius-md: 14px; --lg-radius-lg: 20px; --lg-shadow: 0 8px 30px rgba(0,0,0,0.45); --lg-shadow-red: 0 6px 24px rgba(255,59,82,0.28); } /* ------------------------------------------------------------------------- 2. БАЗА / ФОН СТРАНИЦЫ ------------------------------------------------------------------------- */ body{ background: radial-gradient(1100px 600px at 12% -10%, rgba(255,59,82,0.10), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(255,59,82,0.06), transparent 55%), var(--lg-bg) !important; color: var(--lg-text) !important; } ::selection{ background: var(--lg-red-soft); color:#fff; } /* Скроллбар */ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background: transparent; } ::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border-radius: 10px; border: 2px solid transparent; } ::-webkit-scrollbar-thumb:hover{ background: var(--lg-red-dark); } hr, .divider{ background: var(--lg-border) !important; border-color: var(--lg-border) !important; } a{ color: var(--lg-text) !important; } .main, .main:hover, .main-color{ color: var(--lg-red) !important; } /* ------------------------------------------------------------------------- 3. ШАПКА / НАВИГАЦИЯ — стеклянная, полупрозрачная, с blur ------------------------------------------------------------------------- */ .navbar-fixed-top, header, nav.navbar-findcond, nav{ background: var(--lg-glass-header) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border-bottom: 1px solid var(--lg-border) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35); } nav.navbar-findcond .search-header input{ background-color: var(--lg-glass-input) !important; border: 1px solid var(--lg-border) !important; color: var(--lg-text) !important; border-radius: 999px !important; transition: border-color .2s ease, box-shadow .2s ease; } nav.navbar-findcond .search-header input:focus{ border-color: var(--lg-red) !important; box-shadow: 0 0 0 3px var(--lg-red-soft) !important; } nav.navbar-findcond ul.navbar-nav a.search-icon svg path{ fill: var(--lg-text) !important; } /* Активные/hover пункты навбара */ .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover{ background-color: var(--lg-red-soft) !important; border-bottom: 0 !important; } .second-header-layout li.active > a{ background: var(--lg-red-soft) !important; color: var(--lg-red) !important; } .settings-sidebar ul li.active a{ color: var(--lg-red) !important; } /* ------------------------------------------------------------------------- 4. ВЫПАДАЮЩИЕ МЕНЮ / DROPDOWN — карточки из стекла ------------------------------------------------------------------------- */ ul.dropdown-menu, .dropdown-menu, .dropdown-menu.notfi-dropdown, nav.navbar-findcond .search-header .search-dropdown{ background: var(--lg-glass-strong) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-border) !important; border-radius: var(--lg-radius-md) !important; box-shadow: var(--lg-shadow) !important; } .dropdown-menu.notfi-dropdown h5{ background: rgba(255,255,255,0.04) !important; } ul.notfi-dropdown li h5 b{ background: var(--lg-red-soft) !important; color: var(--lg-red) !important; } .dropdown-menu.notfi-dropdown li ul li:hover, ul.dropdown-menu > li > a:hover, ul.dropdown-menu > li > a:focus{ background: rgba(255,59,82,0.10) !important; color: #fff !important; } .dropdown-menu.ani-acc-menu svg.feather{ color: var(--lg-text-dim); } header .dropdown-menu.ani-acc-menu li a, header .dropdown-menu.ani_log_menu li a{ color: var(--lg-text) !important; } /* Меню создателя контента (загрузка/импорт/эфир) */ .dropdown-menu.vp_creator_menu li a{ border: 1px solid var(--lg-border) !important; background: var(--lg-glass) !important; color: var(--lg-text-dim) !important; border-radius: var(--lg-radius-sm) !important; } .dropdown-menu.vp_creator_menu li a:hover{ border-color: var(--lg-red) !important; } .dropdown-menu.vp_creator_menu li a.upload-button svg{ color: var(--lg-red); background-color: var(--lg-red-soft); } .dropdown-menu.vp_creator_menu li.live-button a svg{ color: var(--lg-red); background-color: var(--lg-red-soft); } /* Хедер аккаунт-меню */ .vp_acc_menu_hd .hd_btn{ border: 1px solid var(--lg-border); background: var(--lg-glass); } .vp_acc_menu_hd .hd_btn.logot{ color: var(--lg-red); } .vp_acc_menu_hd .hd_btn.logot:hover{ background: var(--lg-red); color:#fff; border-color: var(--lg-red); } .vp_acc_menu_hd .hd_btn.sett{ color: var(--lg-info); } .vp_acc_menu_hd .hd_btn.sett:hover{ background: var(--lg-info); color:#fff; border-color: var(--lg-info); } /* ------------------------------------------------------------------------- 5. КНОПКИ ------------------------------------------------------------------------- */ .btn{ border-radius: 999px !important; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; } .btn:active{ transform: translateY(1px) scale(.99); } .btn_primary, .btn-main, .login-page .btn.btn_primary, .login_aside_innr .btn{ background: var(--lg-red-gradient) !important; color:#fff !important; box-shadow: var(--lg-shadow-red) !important; border: 1px solid rgba(255,255,255,0.12) !important; } .btn_primary:hover, .btn_primary:focus, .btn-main:hover, .btn-main:focus{ background: linear-gradient(135deg,#ff5468 0%, #ff1f3d 100%) !important; box-shadow: 0 8px 28px rgba(255,59,82,0.4) !important; } .btn_primary_rev{ color: var(--lg-red) !important; background-color: var(--lg-red-soft) !important; } .btn_primary_rev:hover, .btn_primary_rev:focus{ background-color: var(--lg-red) !important; color:#fff !important; } .btn-default{ background: var(--lg-glass) !important; color: var(--lg-text) !important; border: 1px solid var(--lg-border) !important; } .btn-default:hover, .btn-default:active, .btn-default:focus{ background: var(--lg-glass-strong) !important; border-color: var(--lg-red) !important; } /* Подписка */ .pt_video_info .btn-subscribe, .yp_pub_elemnt .btn-subscribe{ background: var(--lg-red-gradient) !important; color:#fff !important; box-shadow: var(--lg-shadow-red) !important; } .pt_video_info .btn-subscribed, .yp_pub_elemnt .btn-subscribed{ background: var(--lg-glass-strong) !important; color: var(--lg-text) !important; border: 1px solid var(--lg-border) !important; } /* ------------------------------------------------------------------------- 6. ФОРМЫ / ПОЛЯ ВВОДА — стеклянные, с красным фокус-кольцом ------------------------------------------------------------------------- */ input, textarea, select, .bootstrap-select button, .bootstrap-select button span, .setting-panel input[type='text'], .setting-panel input[type='password'], .setting-panel.no-padding textarea, .setting-panel textarea, .setting-panel.no-padding select, .setting-panel select, .pp_mat_input > input, .pp_mat_input > textarea, .pp_mat_input > select{ background-color: var(--lg-glass-input) !important; border: 1px solid var(--lg-border) !important; color: var(--lg-text) !important; box-shadow: none !important; } .pp_mat_input > input:focus, .pp_mat_input > textarea:focus, .pp_mat_input > select:focus, .pt_forms .form-group input:focus, .pt_forms .form-group select:focus, .pt_forms .form-group textarea:focus, nav.navbar-findcond .search-header input:focus{ border-color: var(--lg-red) !important; box-shadow: 0 0 0 3px var(--lg-red-soft) !important; background-color: rgba(255,255,255,0.08) !important; } .pp_mat_input label{ color: var(--lg-red) !important; } .pp_mat_input > input:placeholder-shown:not(:focus) + label, .pp_mat_input > textarea:placeholder-shown:not(:focus) + label{ color: var(--lg-text-muted) !important; } .vp_media_file .btn-file span{ background-color: var(--lg-red-soft) !important; color: var(--lg-red) !important; } /* Тумблеры / чекбоксы */ .tgl-ios + .tgl-btn{ background: rgba(255,255,255,0.16) !important; } .tgl-ios:checked + .tgl-btn{ background: var(--lg-red) !important; } .vp_check label:before{ background: rgba(255,255,255,0.16) !important; } /* ------------------------------------------------------------------------- 7. КАРТОЧКИ / ПАНЕЛИ — стекло с мягким свечением ------------------------------------------------------------------------- */ .vp_panel, .user-setting-panel, .pt_vid_card_prvw, .customdes, .read-content, .related-article-wrapper, .user-ads-list-container, .create-new-ad-container{ background: var(--lg-glass-panel) !important; -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft); border: 1px solid var(--lg-border) !important; border-radius: var(--lg-radius-md) !important; box-shadow: var(--lg-shadow) !important; color: var(--lg-text) !important; overflow: hidden; } /* .content — универсальный layout-контейнер, оборачивающий целые секции страницы (например блок "Последние видео"). Это НЕ карточка и не должно иметь рамку — иначе вокруг всей секции появляется лишний "квадрат". Делаем его полностью плоским и прозрачным. */ .content{ background: transparent !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--lg-text) !important; } /* --- Карточка видео (.vp_vid_list) --------------------------------------- Раньше превью (.video-list-image) имело собственный радиус 5px, а сама карточка — 14px без overflow:hidden. Из-за этого угол превью выступал за скруглённую рамку карточки и выглядело "сломанным". Теперь у карточки единый радиус + overflow:hidden — превью, картинка и хавер-кнопка play всегда обрезаются точно по контуру карточки, независимо от их собственного border-radius. */ .vp_vid_list{ background: var(--lg-glass-panel) !important; border: 1px solid var(--lg-border) !important; border-radius: var(--lg-radius-md) !important; box-shadow: var(--lg-shadow) !important; overflow: hidden !important; isolation: isolate; } .vp_vid_list .video-list-image a{ border-radius: 0 !important; /* обрезается родителем, свой радиус не нужен */ background: var(--lg-bg-elev-1) !important; } .vp_vid_list .play_hover_btn{ border-radius: 0 !important; } .vp_vid_list img{ border-radius: 0 !important; } /* Тонкая "стеклянная" подсветка по верхней кромке карточки — сигнатурный штрих Liquid Glass (луч света на границе стекла) */ .vp_vid_list::before{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 14%); z-index: 2; } .vp_vid_list .video-list-title, .vp_vid_list .video-list-by, .vp_vid_list .video-views, .vp_vid_list .video-publisher{ position: relative; z-index: 1; } .vp_vid_list .video-list-title{ padding: 0 12px; } .vp_vid_list .video-list-by{ padding: 0 12px 12px; } .vp_vid_list .video-views{ padding: 0 12px; } /* На случай, если счётчик просмотров лежит отдельным блоком после блока "видео-list-by" — подстраховываем нижний отступ последнего элемента карточки, чтобы текст не касался скруглённого нижнего края */ .vp_vid_list > *:last-child{ padding-bottom: 12px; } .vp_vid_list:hover{ border-color: var(--lg-red) !important; box-shadow: 0 12px 34px rgba(255,59,82,0.22) !important; transform: translateY(-3px); } .vp_vid_list .video-list-title h4{ color: var(--lg-text) !important; } .vp_vid_list .video-list-by, .vp_vid_list .video-list-by a{ color: var(--lg-text-muted) !important; } /* Длительность видео / бейджи / шортсы */ .video-latest-list .video-thumb .video-duration, .vp_vid_list .duration, .shorts_badge{ background-color: rgba(8,8,10,0.78) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff !important; border: 1px solid rgba(255,255,255,0.10); border-radius: var(--lg-radius-xs) !important; } .video-title{ color: var(--lg-text) !important; } .video-publisher, .video-views{ color: var(--lg-text-dim) !important; } .videos-list .video-wrapper .video-views, .videos-list .video-wrapper .video-publisher, .author-list .video-wrapper .video-views, .author-list .video-wrapper .video-publisher{ color: var(--lg-text-muted) !important; } .video-big-title, .video-big-title a{ color: var(--lg-text) !important; } .video-big-title .featured-text{ color: var(--lg-success) !important; } .watch-video-description p, .watch-video-description a{ color: var(--lg-text-dim) !important; } .watch-video-description:hover a{ color: var(--lg-red) !important; } .mejs-qualities-selected, .mejs__qualities-selected{ color: var(--lg-red) !important; } .plyr__menu__container .plyr__control>span, .plyr__menu__container .plyr__menu__value, .plyr__progress .plyr__tooltip{ color: var(--lg-text) !important; } /* ------------------------------------------------------------------------- 8. МОДАЛЬНЫЕ ОКНА / SWEETALERT ------------------------------------------------------------------------- */ /* ЕДИНАЯ стеклянная поверхность — только на внешнем контейнере модалки. Раньше .modal-header и .modal-footer получали ТУ ЖЕ стеклянную рамку, что и .modal-content, в котором они лежат — получались две полупрозрачные рамки одна внутри другой (визуально "сломанная" модалка). Теперь заголовок/футер прозрачны и просто наследуют стекло родителя. */ .modal-content, .swal2-modal{ background: var(--lg-glass-strong) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-border) !important; border-radius: var(--lg-radius-lg) !important; box-shadow: var(--lg-shadow) !important; color: var(--lg-text) !important; overflow: hidden; /* скругление аккуратно обрезает шапку/футер внутри */ } .modal-backdrop{ background: rgba(4,4,6,0.7) !important; } /* Шапка/футер material-диалогов — без своего фона и рамки, только тонкий разделитель там, где он реально нужен */ .modal.matdialog .modal-header, .modal.matdialog .modal-footer{ background: transparent !important; border: none !important; } .modal.matdialog .modal-title, .modal-title{ color: var(--lg-text) !important; } .modal.matdialog .modal-body{ color: var(--lg-text-dim) !important; } /* Обычный (не material) футер Bootstrap-модалки — тонкая линия-разделитель вместо сплошного светлого фона */ .modal-footer{ background: transparent !important; border-top: 1px solid var(--lg-border) !important; } /* Кнопки внутри material-диалога */ .modal.matdialog .matbtn:hover{ background: rgba(255,255,255,0.08) !important; } .modal.matdialog .matbtn[data-dismiss="modal"]{ background-color: var(--lg-red-soft) !important; color: var(--lg-red) !important; } .swal2-modal button.btn{ background: var(--lg-red-gradient) !important; border: none !important; color:#fff !important; } /* Модалка с видео-трейлером — здесь должен быть чёрный фон плеера, а не стекло */ .watch-movie-trailer-modal.matdialog .modal-content{ background: #000 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ------------------------------------------------------------------------- 9. АЛЕРТЫ / УВЕДОМЛЕНИЯ ------------------------------------------------------------------------- */ .alert{ background: var(--lg-glass) !important; border-radius: var(--lg-radius-sm) !important; border: 1px solid var(--lg-border) !important; color: var(--lg-text) !important; } .alert-info{ border-left: 3px solid var(--lg-info) !important; } .alert-success{ border-left: 3px solid var(--lg-success) !important; } .alert-warning{ border-left: 3px solid var(--lg-warning) !important; } .alert-danger{ border-left: 3px solid var(--lg-red) !important; } .announcement-renderer, .announcement-renderer .alert{ background: rgba(10,10,13,0.75) !important; } /* ------------------------------------------------------------------------- 10. ТАБЫ / АККОРДЕОН / FAQ ------------------------------------------------------------------------- */ .vp_tabs .nav-item .nav-link{ border-bottom-color: var(--lg-border) !important; color: var(--lg-text-dim); } .vp_tabs .nav-item .nav-link.active{ color: var(--lg-red) !important; border-bottom-color: var(--lg-red) !important; } .vp_tabs:after{ background-color: var(--lg-border) !important; } .tube_faq .accordion{ border-color: var(--lg-border) !important; } .tube_faq .accordion-item > .btn{ background: var(--lg-glass) !important; color: var(--lg-text) !important; } .tube_faq .accordion-item.is-active > .btn{ background: var(--lg-red-soft) !important; color: var(--lg-red) !important; } .tube_faq .accordion-item.is-active > .card{ background: var(--lg-glass-panel) !important; } /* ------------------------------------------------------------------------- 11. КОММЕНТАРИИ / ЧАТ / ЛАЙВ ------------------------------------------------------------------------- */ li.sort-comments a:hover{ background: var(--lg-glass-strong) !important; color: var(--lg-text) !important; } .pt_history .video-wrapper .video-info{ background: var(--lg-glass) !important; border-color: var(--lg-border) !important; } .pt_video_comments .yp_video_comment textarea{ background-color: var(--lg-glass-input) !important; border-color: var(--lg-border) !important; } .mic_drop .dropdown-menu div, .cam_drop .dropdown-menu div, .chat_drop .dropdown-menu div{ color: var(--lg-text) !important; } /* ------------------------------------------------------------------------- 12. ТАБЛИЦЫ ------------------------------------------------------------------------- */ .bootstrap-select *, .user-ads-list-container table *, table#withdrawal-requests *{ background: transparent !important; color: var(--lg-text) !important; border-color: var(--lg-border) !important; } .table-bordered, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{ border-color: var(--lg-border) !important; } /* ------------------------------------------------------------------------- 13. СТРАНИЦА ВХОДА / РЕГИСТРАЦИИ — тёмная с красным градиентным стеклом ------------------------------------------------------------------------- */ .vp_auth_page{ background: var(--lg-bg) !important; } .login_page, .login-page{ background: transparent !important; color: var(--lg-text) !important; } .login-page h4{ color: var(--lg-text) !important; } .login-page p{ color: var(--lg-text-dim) !important; } .login-page .errors.success{ color: var(--lg-success) !important; } .login_aside, .vp_auth_page.vp_rgstr_pg .login_aside{ background: radial-gradient(600px 400px at 80% -10%, rgba(255,255,255,0.10), transparent 60%), linear-gradient(150deg, #3a0a14 0%, #7a1226 45%, var(--lg-red-strong) 100%) !important; } .login_aside_innr{ color:#fff !important; } .login_aside_innr .btn{ background: rgba(255,255,255,0.14) !important; color:#fff !important; border: 1px solid rgba(255,255,255,0.25) !important; box-shadow:none !important; } .login_aside_innr .btn:hover{ background: rgba(255,255,255,0.22) !important; } /* ------------------------------------------------------------------------- 14. ПОДВАЛ ------------------------------------------------------------------------- */ footer .footer-container, .pt_footer .container-fluid{ background: var(--lg-glass-header) !important; -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft); border-top: 1px solid var(--lg-border) !important; color: var(--lg-text-dim) !important; } .pt_footer a{ color: var(--lg-text-dim) !important; } .pt_footer a:hover{ color: var(--lg-red) !important; } .footer-copyright{ color: var(--lg-text-muted) !important; } /* ------------------------------------------------------------------------- 15. КОД / PRE ------------------------------------------------------------------------- */ pre{ background-color: var(--lg-bg-elev-1) !important; color: var(--lg-text) !important; border-color: var(--lg-border) !important; } code{ background-color: var(--lg-bg-elev-2) !important; color: var(--lg-red) !important; } /* ------------------------------------------------------------------------- 16. МЕЛКИЕ ДЕТАЛИ / ПОЛИРОВКА ------------------------------------------------------------------------- */ .empty_state > span{ background-color: var(--lg-red-soft) !important; color: var(--lg-red) !important; } .slick-prev, .slick-next{ background: var(--lg-glass) !important; } .load-more, .load-related-videos button{ color: var(--lg-text-dim) !important; } .load-more:hover, .load-related-videos button:hover{ color: var(--lg-red) !important; } .pt_language_select:before{ background: var(--lg-glass-strong) !important; } /* Плавные переходы для интерактивных стеклянных поверхностей */ .vp_panel, .user-setting-panel, .content, .vp_vid_list, .pt_vid_card_prvw, .dropdown-menu, ul.dropdown-menu, .modal-content, .btn, input, textarea, select{ transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } /* ------------------------------------------------------------------------- 17. ПОЛНАЯ ЗАЧИСТКА ОСТАТОЧНОГО ЖЁЛТОГО (#edb927 / #EDB927 / #FEC31F) Ниже — КАЖДОЕ место во всех трёх исходных файлах, где встречался жёлтый акцент (кнопки, иконки, бейджи, чекбоксы, свитчер, мобильное меню). Всё переведено на единый красный акцент. ------------------------------------------------------------------------- */ /* Иконка-бейдж в заголовке блока (например "⚡ Последние видео") — именно она давала жёлтый круг на скриншоте */ .home-page-categories .title h4 div, h4.ptitle div{ background-color: var(--lg-red) !important; color: #fff !important; } /* Поля ввода: фокус/лейбл */ .pp_mat_input input:focus, .pp_mat_input textarea:focus, .pp_mat_input select:focus{ border-color: var(--lg-red) !important; } .pp_mat_input label{ color: var(--lg-red) !important; } /* Ссылки/переключатели */ .main-color{ color: var(--lg-red) !important; } .messages-sidebar .saving, .messages-sidebar .saving span{ color: var(--lg-red) !important; } .video-menu ul li span:hover{ background: var(--lg-red) !important; color:#fff !important; } .watch-video-description:hover a{ color: var(--lg-red) !important; } /* Кнопки "primary reverse" и их hover/disabled состояния */ .btn_primary_rev{ color: var(--lg-red) !important; background-color: var(--lg-red-soft) !important; } .btn_primary:hover, .btn_primary:focus, .btn_primary_rev:hover, .btn_primary_rev:focus, .btn_primary[disabled]:hover, .btn_primary[disabled]:focus{ background-color: var(--lg-red-strong) !important; color:#fff !important; } /* Бейдж-кружок в уведомлениях (счётчик) */ ul.notfi-dropdown li h5 b{ color: var(--lg-red) !important; border: 1px solid var(--lg-red) !important; } /* Мобильное боковое меню (yp_side_drawer) и мобильный dock-nav */ .yp_side_drawer ul.sections li.active a{ color: #fff !important; background-color: var(--lg-red) !important; } .yp_side_drawer ul.sections li a:not(.active):hover{ background-color: var(--lg-red-soft) !important; } .mobile-dock-nav ul.sections li.active a svg, .mobile-dock-nav ul.sections li.active a{ color: var(--lg-red) !important; } .mobile-dock-nav .active .avatar-wrapper img{ border: 2px solid var(--lg-red) !important; } /* Иконка "Загрузить" в меню создателя */ .dropdown-menu.vp_creator_menu li a.upload-button svg{ color: var(--lg-red) !important; background-color: var(--lg-red-soft) !important; } /* SweetAlert подтверждение */ .swal2-modal button.swal2-confirm{ background-color: var(--lg-red) !important; } /* Иконка в заголовке модалки (vp_modal_title) */ .vp_modal_title span{ background-color: var(--lg-red-soft) !important; color: var(--lg-red) !important; } /* Кастомные чекбоксы/радио/плейлист-индикаторы */ .playlist-item span.active:before, .vp_custm_chk input[type="checkbox"]:checked + label:before, .vp_custm_rdo input[type="radio"]:checked + label:before{ border-color: var(--lg-red) !important; } .playlist-item span.active:after, .vp_custm_chk input[type="checkbox"]:checked + label:after, .vp_custm_rdo input[type="radio"]:checked + label:after{ background-color: var(--lg-red) !important; } /* Радио-карточки выбора (select_radio_btn) */ .select_radio_btn label > input:checked ~ .sr_btn_lab_innr .sr_btn_img{ color:#fff !important; background-color: var(--lg-red) !important; border-color: var(--lg-red) !important; } /* Статистические цветные чипы — оставляем разные цвета (это данные, а не акцент темы), но переводим на тёмное стекло, чтобы не было светлых плашек на тёмном фоне */ .vp_stats .vp_stat_single span.blue{ background: rgba(79,183,255,0.16) !important; color: var(--lg-info) !important; } .vp_stats .vp_stat_single span.green{ background: rgba(51,209,122,0.16) !important; color: var(--lg-success) !important; } .vp_stats .vp_stat_single span.violet{ background: rgba(136,108,255,0.16) !important; color: #a996ff !important; } .vp_stats .vp_stat_single span.yellow{ background: rgba(255,182,72,0.16) !important; color: var(--lg-warning) !important; } /* Статус "warning" в таблице выплат — тёмный вариант вместо светлого */ #withdrawal-requests tbody tr td span.warning{ color: var(--lg-warning) !important; background: rgba(255,182,72,0.14) !important; } /* ------------------------------------------------------------------------- 18. ГЛОБАЛЬНАЯ СИНХРОНИЗАЦИЯ СКРУГЛЕНИЙ В исходниках радиусы у похожих элементов были разными и несогласованными (2px, 4px, 5px, 6px, 10px, 20px — у разных карточек/превью/бейджей). Приводим все повторяющиеся типы элементов к единой шкале, чтобы дизайн выглядел цельным на любой странице, а не только на главной. ------------------------------------------------------------------------- */ /* Крупные превью / миниатюры видео и карточки (все страницы) */ .video-thumb, .ra-thumb, .pt_mv_list_thumb, .image-renderer, .card, .two_check_card, .thumbnail-preview-renderer, .pt_import_vdo .import-form-content .thumbnail-preview-renderer, .vp_edt_vdo_pg .thumbnail-preview, .vp_vid_stud_my_vids .head_table.video-wrapper .stud_table-video .video-thumb a, .movie-file-input, .vid_img_modal img{ border-radius: var(--lg-radius-md) !important; overflow: hidden; } .thumb-image, .vp_media_file_preview .btn-file span div:not(.vp_med_fi_prev_info) img.thumb-image{ border-radius: var(--lg-radius-md) !important; } .vp_media_file_preview .btn-file span, .vp_media_file_preview .btn-file span div:not(.vp_med_fi_prev_info){ border-radius: var(--lg-radius-md) !important; } /* Мелкие бейджи/тэги/оверлеи на превью — отдельная, меньшая шкала */ .shorts_badge, .video-duration, .vp_vid_list .duration, .wow_liv_counter{ border-radius: var(--lg-radius-xs) !important; } /* Круглые элементы (аватары) — оставляем 50%, просто фиксируем сюда явно, чтобы не потерялись при копировании темы дальше */ .publisher-avatar, .avatar-container, .header-image, .avatar, .popular-articles-wrapper .video-thumb img{ border-radius: 50% !important; } /* Поповеры/тултипы плеера и мелкие подсказки — унифицируем с инпутами */ .plyr__tooltip{ border-radius: var(--lg-radius-xs) !important; } /* Уважение к reduced-motion */ @media (prefers-reduced-motion: reduce){ .vp_vid_list:hover{ transform: none; } .btn:active{ transform: none; } }