Dark Clear Anitube by loliconagent

/* ==UserStyle==
@name         Dark Clear Anitube
@version      20230517.17.58
@namespace    userstyles.world/user/loliconagent
@description  Simple and clean style for night anime watching lovers
/*********************************
*   Special for Anitube users    *
*            <3 UA               *
*       by Lolicon Agent         *
*         v Dark Theme           *
* Для Firefox Nigtly з Stylus    *
*           plugin               *
*                                *
* Зроблено з любов'ю до розвитку *
*     українського контенту      *
*********************************/
@author       loliconagent
@license      No License
==/UserStyle== */

@-moz-document domain("anitube.in.ua") {
/*********************************
*   Special for Anitube users    *
*            <3 UA               *
*       by Lolicon Agent         *
*         v Dark Theme           *
* Для Firefox Nigtly з Stylus    *
*           plugin               *
*                                *
* Зроблено з любов'ю до розвитку *
*     українського контенту      *
*********************************/
/***********************************
!!! Працює(вигляда нормально) тільки на мобільній версії,
на пк версію мені впадлу U-U

Як встановити плагіни Firefox на мобільну версію nightly

https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/

Скопіюйте весь код
Після цьго зайдіть на сторінку анітюб,
відкрийте меню фаєрфокс (три крапки) > додатки > Stylus,
створити стиль для, натисніть на напис anitube.in.ua,
видаліть напис / Insert code here... / та вставте код

***********************************/
:root {
    /** Значення, які можете змінити **/
    --roundness: 35px;
    /** Округлість елементів, за замовч. 35px*/
    --acsient-color: #8e43ed;
    /** Акцентний колір, за замовч. #78b753 **/
    --acsient-color-sec: #F0ec8b;
    /** Акцентний колір 2, за замовч. #91b6c9 **/
    --black-main: #2b2726;
    /** Основний темний колір, за замовч. 37, 38, 42 **/
    --black-second: 30, 30, 30;
    /** Додатковий темний колір, за замовч. 35,35,35 **/
    --black-selected: 27, 27, 27;
    /** Ще однин додатковий темний колір, за замовч. 27,27,27 **/
    --text-main: white;
    /** Колір тексту 1, за замовч. white **/
    --text-sec: rgb(200, 200, 200);
    /** Колір тексту 2, за замовч. rgb(200,200,200) **/
    --text-thrd: rgb(150, 150, 150)/** Колір тексту 3, за замовч. rgb(150,150,150) **/
}

body {
    background: var(--black-main);
}

body ::-moz-selection {
    background: var(--acsient-color);
}
body ::-webkit-selection {
    background: var(--acsient-color);
}
body ::selection {
    background: var(--acsient-color);
}
.block {
    box-shadow: none;
}
input[type="text"],
input[type="password"] {
    background: rgb(var(--black-second)) !important;
    border-radius: 20px;
    color: var(--text-main)
}
::placeholder {
    color: var(--text-sec) !important;
}


/********** Mobile view **********/
/****SIDE BAR****/
.side-panel {
    background: var(--black-main);
    min-width: 420px;
}

.side-panel.active,
.side-panel {
    border-radius: var(--roundness) 0px 0px var(--roundness);
}
.side-panel.active .close_login {
    border-radius: var(--roundness) calc(var(--roundness) + 5px) calc(var(--roundness) + 5px);
    background: var(--acsient-color-sec);
}
.lb-soc a img {
    border-radius: 10px;
}
.login-box form input {
    background: var(--black-main) !important;
    color: var(--text-main);
}
.badge {
    background: var(--acsient-color);
}
.mob-ver {
    border-radius: calc(var(--roundness) - 5px) calc(var(--roundness) - 5px) 0px var(--roundness);
    background: var(--acsient-color-sec);
}

/****TOP BAR***/
.header {
    z-index: 2;
    border-radius: 0px 0px var(--roundness) var(--roundness);
}
.header::before {
    /** shadow **/
    content: '';
    pointer-events: none;
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    min-height: 120px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0px 0px var(--roundness) var(--roundness);
    filter: blur(5px);
    transform: translate(6px, -8px);
}

.head_top,
.head_bot-in {
    background: var(--black-main);
}
.height-menu {
    overflow: hidden;
    border-radius: 0px 0px var(--roundness) var(--roundness);
}
.logotype {
    color: var(--text-main);
}
a:hover,
.head_elem .links li a:hover {
    color: var(--acsient-color) !important;
}
.tit_color {
    color: var(--acsient-color-sec) !important;
}
.nav_mobile-btn:hover {
    color: var(--acsient-color-sec);
}
.button,
button:not(.color-btn):not([class*="fr"]) {
    background: var(--acsient-color);
    border-radius: var(--roundness);
}
.head_txt {
    color: var(--text-sec);
}

/** Search popout **/
.icon_close {
    border-radius: 50%;
}
.icon_close:hover {
    background: var(--acsient-color-sec)
}
.search_form {
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    margin-top: 150px;
    padding: 5px;
    height: 120px;
    border-radius: var(--roundness);
    backdrop-filter: blur(5px);
}
.sf_title {
    margin-bottom: 10px !important;
    margin-top: 5px;
}
.search_form-wrp {
    border-radius: calc(var(--roundness));
    background-color: var(--black-main);
    color: var(--text-main) !important;
}
.search_form-wrp > input {
    color: var(--text-main);
}
.search_form-wrp input {
    background: transparent;
}
.search_form-wrp button {
    box-shadow: 2px 1px 6px var(--acsient-color),
    inset 2px 2px 20px rgba(200, 200, 200, 0.1);
}
/** Popout Menu **/
.content {
    background-color: var(--black-main);
}
.nav_mobile .nav_mobile-btn {
    border-radius: 50%;
}
.nav_mobile .nav_mobile-btn:hover {
    background: var(--acsient-color-sec);
}
.nav_mobile-title {
    color: var(--text-main);
}
.menu a {
    color: var(--text-sec) !important;
}

/** Center List **/
.block,
.main {
    background: var(--black-main);
}
.sect_header {
    background: var(--black-main);
    border-radius: var(--roundness) var(--roundness) 0px 0px;
    box-shadow: 8px 5px 15px rgba(0, 0, 0, 0.3);
}
.sect_header h1 {
    color: var(--text-main);
    border: none;
}
.sect_header h1::after {
    display: none;
}
.sect_header h1 .side_color {
    color: var(--acsient-color-sec);
}
.short {
    background: var(--black-main);
    border-radius: 0px;
}
.items_tabs {
    box-shadow: 8px 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 0px 0px var(--roundness) var(--roundness);
}
.up-series {
    background-color: var(--black-main);
    color: white;
    opacity: 0.8;
    bottom: 10px
}
.short-in a {
    color: var(--text-sec);
}
.short-cat {
    color: var(--text-thrd);
}
.bottom-nav {
    background: var(--black-main);
    margin: 0 0 70px
}
.pagi-load a {
    background: var(--acsient-color);
    border-radius: var(--roundness);
}
.short-img,
.img-box img {
    border: none;
}

.pagi-navi {
    padding: 0;
    height: 40px;
    margin-top: 35px;
    box-shadow: inset -6px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    scrollbar-width: none;
}

.navigation {
    top: 0px !important;
    height: 30px;
    text-align: start;
    user-select: none;
}
.navigation span,
.navigation a {
    top: -11px;
    margin-top: 0;
    color: var(--text-main);
    padding: 0 0 5px;
    text-align: center;
}
.navigation a:before {
    display: none;
}
.navigation span:not(.nav_ext) {
    background: var(--black-main);
    box-shadow: 6px 4px 10px rgba(0, 0, 0, 0.2) !important;
}
.navigation span.nav_ext {
    background: transparent;
}
.navigation > span:hover:not(.active),
.navigation > a:hover,
.pagi-nav > span:first-child:hover,
.pagi-nav > span:last-child:hover {
    color: var(--acsient-color);
}

/** Chat **/
.side_box {
    box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.2) !important;
    border-radius: 0px 0px var(--roundness) var(--roundness);
}
.side_bt,
.side_bt-in {
    padding-top: 0;
    padding-bottom: 0
}
.side_bt-in {
    color: var(--text-main);
    border: none;
}
.side_bt-in .side_color {
    color: var(--acsient-color-sec);
}
.side_bt-in:after {
    display: none;
}
.side_bt,
.side_bc {
    background-color: var(--black-main);
}
.lc_area,
.lc_chat {
    border-radius: calc(var(--roundness) - 5px);
    border: none;
}
.lc_area {
    overflow: hidden;
    background: var(--black-second);
}
.lc_chat_timeout {
    background: rgba(200, 200, 200, 0.05);
    backdrop-filter: blur(5px)
}
a.lc_chat_timeout_imback {
    background: var(--acsient-color) !important;
    border: none;
    box-shadow: 2px 1px 6px var(--acsient-color),
    inset 2px 2px 20px rgba(200, 200, 200, 0.1);
    border-radius: var(--roundness);
}
.lc_area .lc_chat_list_area {
    border: none;
}
.lc_chat_list .lc_chat_li {
    background: var(--black-second);
}
.lc_chat_list .lc_chat_li:nth-child(2n) {
    background: var(--black-main);
}
.lc_chat_list .lc_chat_li {
    color: var(--text-sec);
}
.lc_chat_list .lc_chat_li:nth-child(1) {
    padding-top: calc(var(--roundness) * 0.45);
}
.lc_chat_list .lc_chat_li:nth-child(1) .lc_chat_li_date {
    padding-top: calc(var(--roundness) * 0.3);
}
.lc_chat_list .lc_chat_li_foto_block {
    border-radius: 10px;
}
.lc_chat_list .lc_chat_li:hover {
    background: rgba(var(--black-selected), 0.7);
}
.lc_chat_list .lc_chat_li .lc_group_4 {
    color: var(--text-main);
}
.lc_member,
.lc_chat_li_text a,
.lc_chat_list {
    color: var(--acsient-color-sec) !important;
}
.lc_chat_li_text img {
    border-radius: 5px;
}
.title_quote,
.quote {
    border: none;
    background: 0;
    border-radius: 10px;
}
.quote {
    transform: translatex(10px);
    margin-top: 2px;
}
.quote:before {
    content: '';
    background: linear-gradient(120deg, var(--acsient-color), var(--acsient-color-sec));
    display: block;
    width: 8px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    border-radius: 15px
}
.lc_textarea textarea {
    border: none;
}
.lc_bb_panel {
    background: var(--black-main);
    border: none;
    border-radius: 0px 0px 10px 10px;
}
.lc_bb_panel:before ...