/* NIGHT MODE (dark theme) for tubeberry-juice-light Активируется атрибутом theme="dark" на . */ html[theme="dark"] { --primary-text-color: #d6dae1; --secondary-text-color: #8b929c; --dark-bg: #0f1115; --dark-surface: #171a20; --dark-block: #1e222a; --dark-block-2: #252a34; --dark-border: #2c323d; --dark-muted: #99a1ad; } /* --- база --- */ html[theme="dark"] body {background: var(--dark-bg); color: var(--primary-text-color);} html[theme="dark"] .wrapper-main {background: var(--dark-surface); box-shadow: none;} html[theme="dark"] a {color: var(--primary-text-color);} html[theme="dark"] a:hover, html[theme="dark"] a:focus {color: var(--primary-color);} html[theme="dark"] ::selection {background: var(--primary-color); color: #fff;} html[theme="dark"] img {opacity: .94;} html[theme="dark"] img:hover {opacity: 1;} /* --- шапка, поиск --- */ html[theme="dark"] .header__search input, html[theme="dark"] .header__search input:focus {background-color: var(--dark-block); color: var(--primary-text-color); box-shadow: inset 0 0 0 1px var(--dark-border);} html[theme="dark"] .header__search input::placeholder {color: var(--secondary-text-color);} html[theme="dark"] .header__sign-in {background-color: var(--dark-block); color: var(--dark-muted);} /* --- сайдбар, меню, блоки --- */ html[theme="dark"] .side-block, html[theme="dark"] .side-block__content {color: var(--primary-text-color);} html[theme="dark"] .side-block__title {color: #fff;} html[theme="dark"] .side-block__menu a {color: var(--primary-text-color);} html[theme="dark"] .side-block__menu a:hover {color: var(--primary-color);} html[theme="dark"] .side-block__menu--icon a::before {color: #4a515e;} html[theme="dark"] .sb_tags span, html[theme="dark"] .cloud-tags span a {border-color: var(--dark-border);} /* --- карточки видео --- */ html[theme="dark"] .thumb-item, html[theme="dark"] .thumb-item__title, html[theme="dark"] .thumb-item__title a {color: var(--primary-text-color);} html[theme="dark"] .thumb-item__title a:hover {color: var(--primary-color);} /* --- внутренняя страница --- */ html[theme="dark"] .inner-page__columns {background-color: var(--dark-block); box-shadow: none;} html[theme="dark"] .inner-page__desc, html[theme="dark"] .inner-page__fav {background-color: var(--dark-block-2); box-shadow: none; color: var(--primary-text-color);} html[theme="dark"] .inner-page__tags > a:not(:last-child)::after, html[theme="dark"] .inner-page__tags > span:not(:last-child) a::after {color: var(--dark-muted);} html[theme="dark"] .text {color: var(--primary-text-color);} html[theme="dark"] .text table tr td {border-color: var(--dark-border);} html[theme="dark"] .text table tr:nth-child(2n+1) {background-color: var(--dark-block);} html[theme="dark"] .text table tr:nth-child(1) {background-color: var(--dark-block-2);} /* --- пагинация --- */ html[theme="dark"] .pagination a, html[theme="dark"] .pagination span {background-color: var(--dark-block); color: var(--dark-muted);} html[theme="dark"] .pagination a:hover {color: #fff; background-color: var(--dark-block-2);} html[theme="dark"] .pagination span:not(.nav_ext) {background-color: var(--secondary-color); color: #fff;} /* --- формы --- */ html[theme="dark"] input[type="text"], html[theme="dark"] input[type="password"], html[theme="dark"] select, html[theme="dark"] textarea {background-color: var(--dark-block); color: var(--primary-text-color); box-shadow: inset 0 0 0 1px var(--dark-border);} html[theme="dark"] .form__btn--secondary {background-color: var(--dark-block-2); color: var(--primary-text-color);} html[theme="dark"] .checkbox input, html[theme="dark"] .comments_subscribe input {background-color: var(--dark-block-2);} html[theme="dark"] .form__caption--above {background-color: var(--dark-block-2);} /* --- комментарии --- */ html[theme="dark"] .comment-item, html[theme="dark"] .comment-item__text {color: var(--primary-text-color);} html[theme="dark"] .comment-item__rating {background-color: var(--dark-block); color: var(--dark-muted);} html[theme="dark"] #dlefastreplycomments {background: var(--dark-block-2);} html[theme="dark"] .commentsreplyname {background: var(--dark-block); border-color: var(--dark-border); color: var(--primary-text-color);} /* --- вход, попапы, служебные --- */ html[theme="dark"] .login {background-color: var(--dark-block); box-shadow: 0 0 0 10px rgba(255,255,255,.05), 0 15px 45px rgba(0,0,0,.8);} html[theme="dark"] .login__header, html[theme="dark"] .login__social {background-color: var(--dark-block-2);} html[theme="dark"] .login__menu a {background-color: var(--dark-block-2); box-shadow: none; color: var(--primary-text-color);} html[theme="dark"] .mobile-menu {background-color: var(--dark-block);} html[theme="dark"] #dropmenudiv, html[theme="dark"] #searchsuggestions, html[theme="dark"] #share-popup, html[theme="dark"] .ui-dialog {background: var(--dark-block); color: var(--primary-text-color);} html[theme="dark"] #searchsuggestions a:hover {background-color: var(--dark-block-2);} html[theme="dark"] .ui-dialog .ui-dialog-buttonpane {background-color: var(--dark-block-2);} html[theme="dark"] #scrolltop {background-color: var(--dark-block); color: var(--dark-muted);} html[theme="dark"] .message-info {background-color: var(--dark-block); border-color: var(--dark-border); color: var(--primary-text-color);} html[theme="dark"] .quote {background-color: var(--dark-block);} html[theme="dark"] .scriptcode, html[theme="dark"] .title_spoiler, html[theme="dark"] .text_spoiler, html[theme="dark"] .hide {background: var(--dark-block); border-color: var(--dark-border); color: var(--primary-text-color);} html[theme="dark"] .inhide {background-color: var(--dark-block-2); border-color: var(--dark-border);} html[theme="dark"] .findrelated {background-color: var(--dark-block-2); color: var(--primary-text-color);} html[theme="dark"] .dle-table, html[theme="dark"] .pm, html[theme="dark"] .dle-table td, html[theme="dark"] .pm td, html[theme="dark"] .usp {border-color: var(--dark-border);} html[theme="dark"] .dle-table thead tr:nth-child(1), html[theme="dark"] .pm tr:nth-child(1) {background-color: var(--dark-block-2);} html[theme="dark"] .dle-table tr:nth-child(2n+2), html[theme="dark"] .pm tr:nth-child(2n+2) {background-color: var(--dark-block);} html[theme="dark"] .usp {background-color: var(--dark-block);} html[theme="dark"] .usp__meta {background-color: var(--dark-block-2);} html[theme="dark"] .usp__group > b {background-color: var(--dark-block-2); color: var(--primary-text-color);} html[theme="dark"] .search-page .search > div, html[theme="dark"] .tabs-block__select--desc {background: var(--dark-block);} html[theme="dark"] #searchtable fieldset {border-color: var(--dark-border);} html[theme="dark"] #searchtable select {background-color: var(--dark-block);} html[theme="dark"] .bb-pane {background-color: var(--dark-block-2); border-color: var(--dark-border);} html[theme="dark"] .bb-btn:hover {background-color: var(--dark-block); color: #fff;} html[theme="dark"] .xfieldimagegallery li img {border-color: var(--dark-border);} /* --- кнопка переключения темы --- */ .theme-toggle {flex: none; cursor: pointer; width: 40px; height: 40px; line-height: 40px; margin-left: 15px; border-radius: 20px; text-align: center; background-color: rgba(0,0,0,.06); color: #555; transition: background-color .2s, color .2s;} .theme-toggle:hover {background-color: var(--secondary-color); color: #fff;} .theme-toggle svg {width: 18px; height: 18px; vertical-align: middle; fill: currentColor;} .theme-toggle__moon {display: inline-block;} .theme-toggle__sun {display: none;} html[theme="dark"] .theme-toggle {background-color: var(--dark-block-2); color: #f6b93b;} html[theme="dark"] .theme-toggle:hover {background-color: var(--secondary-color); color: #fff;} html[theme="dark"] .theme-toggle__moon {display: none;} html[theme="dark"] .theme-toggle__sun {display: inline-block;}