anitube.in.ua Violet by lorem-ipsum

/* ==UserStyle==
@name         My anitube.in.ua
@version      20230630.16.10
@namespace    userstyles.world/user/lorem-ipsum
@description  Full redesign of anitube.com.ua
@author       lorem-ipsum
@license      No License
==/UserStyle== */

@-moz-document domain("anitube.in.ua") {
  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

  :root {
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --family-base: 'Roboto', sans-serif;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%),
      0 4px 6px -4px rgb(0 0 0 / 10%);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%),
      0 8px 10px -6px rgb(0 0 0 / 10%);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
    --color-black: #333c4d;
    --color-white: #fff;
    --color-violet-50: rgb(245 243 255);
    --color-violet-100: rgb(237 233 254);
    --color-violet-200: rgb(221 214 254);
    --color-violet-300: rgb(196 181 253);
    --color-violet-400: rgb(167 139 250);
    --color-violet-500: rgb(139 92 246);
    --color-violet-600: rgb(124 58 237);
    --color-violet-700: rgb(109 40 217);
    --color-violet-800: rgb(91 33 182);
    --color-violet-900: rgb(76 29 149);
    --color-violet-950: rgb(46 16 101);
    --color-slate-50: rgb(248 250 252);
    --color-slate-100: rgb(241 245 249);
    --color-slate-200: rgb(226 232 240);
    --color-slate-300: rgb(203 213 225);
    --color-slate-400: rgb(148 163 184);
    --color-slate-500: rgb(100 116 139);
    --color-slate-600: rgb(71 85 105);
    --color-slate-700: rgb(51 65 85);
    --color-slate-800: rgb(30 41 59);
    --color-slate-900: rgb(15 23 42);
    --color-slate-950: rgb(2 6 23);
    --color-rose-50: rgb(255 241 242);
    --color-rose-100: rgb(255 228 230);
    --color-rose-200: rgb(254 205 211);
    --color-rose-300: rgb(253 164 175);
    --color-rose-400: rgb(251 113 133);
    --color-rose-500: rgb(244 63 94);
    --color-rose-600: rgb(225 29 72);
    --color-rose-700: rgb(190 18 60);
    --color-rose-800: rgb(159 18 57);
    --color-rose-900: rgb(136 19 55);
    --color-rose-950: rgb(76 5 25);
    --color-yellow-50: rgb(254 252 232);
    --color-yellow-100: rgb(254 249 195);
    --color-yellow-200: rgb(254 240 138);
    --color-yellow-300: rgb(253 224 71);
    --color-yellow-400: rgb(250 204 21);
    --color-yellow-500: rgb(234 179 8);
    --color-yellow-600: rgb(202 138 4);
    --color-yellow-700: rgb(161 98 7);
    --color-yellow-800: rgb(133 77 14);
    --color-yellow-900: rgb(113 63 18);
    --color-yellow-950: rgb(66 32 6);
    --color-green-50: rgb(240 253 244);
    --color-green-100: rgb(220 252 231);
    --color-green-200: rgb(187 247 208);
    --color-green-300: rgb(134 239 172);
    --color-green-400: rgb(74 222 128);
    --color-green-500: rgb(34 197 94);
    --color-green-600: rgb(22 163 74);
    --color-green-700: rgb(21 128 61);
    --color-green-800: rgb(22 101 52);
    --color-green-900: rgb(20 83 45);
    --color-green-950: rgb(5 46 22);
    --color-blue-50: rgb(239 246 255);
    --color-blue-100: rgb(219 234 254);
    --color-blue-200: rgb(191 219 254);
    --color-blue-300: rgb(147 197 253);
    --color-blue-400: rgb(96 165 250);
    --color-blue-500: rgb(59 130 246);
    --color-blue-600: rgb(37 99 235);
    --color-blue-700: rgb(29 78 216);
    --color-blue-800: rgb(30 64 175);
    --color-blue-900: rgb(30 58 138);
    --color-blue-950: rgb(23 37 84);
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;
    --line-xs: 1rem;
    --line-sm: 1.25rem;
    --line-base: 1.5rem;
    --line-lg: 1.75rem;
    --line-xl: 2rem;
    --line-2xl: 2.25rem;
    --line-3xl: 2.5rem;
    --rounded-none: 0px;
    --rounded-sm: 0.125rem;
    --rounded-base: 0.25rem;
    --rounded-md: 0.375rem;
    --rounded-lg: 0.5rem;
    --rounded-xl: 0.75rem;
    --rounded-2xl: 1rem;
    --rounded-3xl: 1.5rem;
    --rounded-full: 9999px;
    --p-0: 0px;
    --p-px: 1px;
    --p-0_5: 0.125rem;
    --p-1: 0.25rem;
    --p-1_5: 0.375rem;
    --p-2: 0.5rem;
    --p-2_5: 0.625rem;
    --p-3: 0.75rem;
    --p-3_5: 0.875rem;
    --p-4: 1rem;
    --p-5: 1.25rem;
    --p-6: 1.5rem;
    --p-7: 1.75rem;
    --p-8: 2rem;
    --p-9: 2.25rem;
    --p-10: 2.5rem;
    --p-11: 2.75rem;
    --p-12: 3rem;
    --p-14: 3.5rem;
    --p-16: 4rem;
    --p-20: 5rem;
    --p-24: 6rem;
    --p-28: 7rem;
    --p-32: 8rem;
    --p-36: 9rem;
    --p-40: 10rem;
    --p-44: 11rem;
    --p-48: 12rem;
    --p-52: 13rem;
    --p-56: 14rem;
    --p-60: 15rem;
    --p-64: 16rem;
    --p-72: 18rem;
    --p-80: 20rem;
    --p-96: 24rem;
  }

  /* NORMALIZE */
  html {
    font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji';
    line-height: 1.15;
    text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    margin: 0;
  }

  /* STYLES */
  body *::selection {
    background: var(--color-violet-300);
  }

  * {
    scrollbar-width: auto;
    scrollbar-color: rgb(0 0 0 / 30%) rgb(0 0 0 / 0%);
  }

  *:not(.fa, .icon-dle) {
    font-family: var(--family-base) !important;
  }

  ::-webkit-scrollbar {
    width: auto;
    height: auto;
    background: rgb(0 0 0 / 9%);
    cursor: auto;
  }

  ::-webkit-scrollbar-button {
    display: none;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-track-piece {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb:vertical,
  ::-webkit-scrollbar-thumb:horizontal {
    background: var(--color-slate-500);
    border-radius: var(--rounded-xl);
    border: 4px solid transparent;
    background-clip: content-box;
    cursor: auto;
  }

  /* stylelint-disable-next-line no-duplicate-selectors */
  body {
    display: flex;
    flex-direction: column;
    gap: var(--p-4);
    font-family: var(--family-base);
    font-size: 16px;
    font-weight: 300;
    background-image: linear-gradient(to bottom,
        #111626,
        #0f1733,
        #0f1740,
        #14164b,
        #1e1256,
        #27115e,
        #300f66,
        #3a0b6d,
        #411175,
        #48177d,
        #501c86,
        #57228e);
      min-height: 100vh;
  }

  a,
  a:link {
    color: var(--color-violet-500);
  }

  a:hover,
  a:link:hover {
    color: var(--color-violet-800);
  }

  a:visited {
    color: var(--color-violet-900);
  }

  fieldset {
    border: 0;
    padding: 0;
  }

  b,
  strong {
    font-weight: 500;
  }

  *,
  *:hover {
    text-shadow: none !important;
  }

  /* HEADER */
  header {
    background: none;
    height: auto;
  }

  #header {
    display: flex;
    gap: var(--p-2);
    background: none;
    border: none;
    box-shadow: none;
    height: auto;
  }

  .header_ico {
    display: flex;
    align-items: center;
    float: unset;
    background: none;
    width: auto;
    height: auto;
    order: 2;
  }

  .header_ico ul {
    margin: 0;
    width: auto;
  }

  .header_ico ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    width: auto;
    height: auto;
  }

  .header_ico ul li:not(:nth-child(3)) {
    display: none;
  }

  .header_ico ul li a {
    position: static;
    margin: 0;
    width: 32px !important;
    height: 32px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fff' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z' /%3E%3C/svg%3E%0A") !important;
  }

  .header_logo {
    background: none;
    order: 1;
    width: auto;
    height: auto;
    margin: 0;
    display: flex;
    float: unset;
    align-items: center;
  }

  .header_logo a {
    display: flex;
    align-items: center;
    gap: var(--p-1);
    width: auto;
    height: auto;
    font-size: 0;
    text-indent: 0;
  }

  .header_logo a::after {
    display: inline-flex;
    content: 'AniTube';
    font-size: var(--font-3xl);
    font-weight: 500;
    color: var(--color-white);
  }

  .logo_ukr {
    margin: 0;
    position: static;
  }

  .header_login {
    margin: 0;
    margin-left: auto;
    order: 3;
    float: unset;
    display: flex;
    align-items: center;
  }

  .login_btn {
    background: none;
    height: auto;
    padding: 0;
  }

  .login_btn ul {
    display: flex;
    align-items: center;
    gap: var(--p-6);
    height: 100%;
  }

  .login_btn ul li.log_btn {
    background: none;
    border: none;
    height: auto;
    float: unset;
    font-size: var(--font-base);
    font-weight: 400;
    font-style: normal;
    text-shadow: none;
    display: flex;
    align-items: center;
    gap: var(--p-2);
  }

  .login_btn ul li.log_btn a {
    padding: 0;
...