anitube.in.ua Catpuccine by lorem-ipsum

/* ==UserStyle==
@name           anitube.in.ua Catpuccine
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A catpuccin theme for anitube.in.ua
@author         lorem-ipsum
@preprocessor   stylus
@var    select  flavor "Flavor" ["Latte:🌻 Latte", "Frappe:🪴 Frappé", "Macchiato:🌺 Macchiato", "Mocha:🌿 Mocha"]
@var    select  accent "Accent" ["Rosewater:Rosewater", "Flamingo:Flamingo", "Pink:Pink", "Mauve:Mauve", "Red:Red", "Maroon:Maroon", "Peach:Peach", "Yellow:Yellow", "Green:Green", "Teal:Teal", "Blue:Blue*", "Sapphire:Sapphire", "Sky:Sky", "Lavender:Lavender"]
@var    checkbox hideCarousel "Hide сarousel" 0
@var    checkbox hideVotes "Hide help ZSU alert" 0
==/UserStyle== */

@-moz-document domain("anitube.in.ua") {

  if (flavor=="Frappe") {
    $color-base=#303446;
    $color-blue=#8caaee;
    $color-crust=#232634;
    $color-flamingo=#eebebe;
    $color-green=#a6d189;
    $color-lavender=#babbf1;
    $color-mantle=#292c3c;
    $color-maroon=#ea999c;
    $color-mauve=#ca9ee6;
    $color-overlay0=#737994;
    $color-overlay1=#838ba7;
    $color-overlay2=#949cbb;
    $color-peach=#ef9f76;
    $color-pink=#f4b8e4;
    $color-red=#e78284;
    $color-rosewater=#f2d5cf;
    $color-sapphire=#85c1dc;
    $color-sky=#99d1db;
    $color-subtext0=#a5adce;
    $color-subtext1=#b5bfe2;
    $color-surface0=#414559;
    $color-surface1=#51576d;
    $color-surface2=#626880;
    $color-teal=#81c8be;
    $color-text=#c6d0f5;
    $color-yellow=#e5c890;
  }

  else if (flavor=="Latte") {
    $color-base=#eff1f5;
    $color-blue=#1e66f5;
    $color-crust=#dce0e8;
    $color-flamingo=#dd7878;
    $color-green=#40a02b;
    $color-lavender=#7287fd;
    $color-mantle=#e6e9ef;
    $color-maroon=#e64553;
    $color-mauve=#8839ef;
    $color-overlay0=#9ca0b0;
    $color-overlay1=#8c8fa1;
    $color-overlay2=#7c7f93;
    $color-peach=#fe640b;
    $color-pink=#ea76cb;
    $color-red=#d20f39;
    $color-rosewater=#dc8a78;
    $color-sapphire=#209fb5;
    $color-sky=#04a5e5;
    $color-subtext0=#6c6f85;
    $color-subtext1=#5c5f77;
    $color-surface0=#ccd0da;
    $color-surface1=#bcc0cc;
    $color-surface2=#acb0be;
    $color-teal=#179299;
    $color-text=#4c4f69;
    $color-yellow=#df8e1d;
  }

  else if (flavor=="Macchiato") {
    $color-base=#24273a;
    $color-blue=#8aadf4;
    $color-crust=#181926;
    $color-flamingo=#f0c6c6;
    $color-green=#a6da95;
    $color-lavender=#b7bdf8;
    $color-mantle=#1e2030;
    $color-maroon=#ee99a0;
    $color-mauve=#c6a0f6;
    $color-overlay0=#6e738d;
    $color-overlay1=#8087a2;
    $color-overlay2=#939ab7;
    $color-peach=#f5a97f;
    $color-pink=#f5bde6;
    $color-red=#ed8796;
    $color-rosewater=#f4dbd6;
    $color-sapphire=#7dc4e4;
    $color-sky=#91d7e3;
    $color-subtext0=#a5adcb;
    $color-subtext1=#b8c0e0;
    $color-surface0=#363a4f;
    $color-surface1=#494d64;
    $color-surface2=#5b6078;
    $color-teal=#8bd5ca;
    $color-text=#cad3f5;
    $color-yellow=#eed49f;
  }

  else if (flavor=="Mocha") {
    $color-base=#1e1e2e;
    $color-blue=#89b4fa;
    $color-crust=#11111b;
    $color-flamingo=#f2cdcd;
    $color-green=#a6e3a1;
    $color-lavender=#b4befe;
    $color-mantle=#181825;
    $color-maroon=#eba0ac;
    $color-mauve=#cba6f7;
    $color-overlay0=#6c7086;
    $color-overlay1=#7f849c;
    $color-overlay2=#9399b2;
    $color-peach=#fab387;
    $color-pink=#f5c2e7;
    $color-red=#f38ba8;
    $color-rosewater=#f5e0dc;
    $color-sapphire=#74c7ec;
    $color-sky=#89dceb;
    $color-subtext0=#a6adc8;
    $color-subtext1=#bac2de;
    $color-surface0=#313244;
    $color-surface1=#45475a;
    $color-surface2=#585b70;
    $color-teal=#94e2d5;
    $color-text=#cdd6f4;
    $color-yellow=#f9e2af;
  }

  if (accent=="Rosewater") {
    $color-accent=$color-rosewater
  }

  else if (accent=="Flamingo") {
    $color-accent=$color-flamingo
  }

  else if (accent=="Pink") {
    $color-accent=$color-pink
  }

  else if (accent=="Mauve") {
    $color-accent=$color-mauve
  }

  else if (accent=="Red") {
    $color-accent=$color-red
  }

  else if (accent=="Maroon") {
    $color-accent=$color-maroon
  }

  else if (accent=="Peach") {
    $color-accent=$color-peach
  }

  else if (accent=="Yellow") {
    $color-accent=$color-yellow
  }

  else if (accent=="Green") {
    $color-accent=$color-green
  }

  else if (accent=="Teal") {
    $color-accent=$color-teal
  }

  else if (accent=="Blue") {
    $color-accent=$color-blue
  }

  else if (accent=="Sapphire") {
    $color-accent=$color-sapphire
  }

  else if (accent=="Sky") {
    $color-accent=$color-sky
  }

  else if (accent=="Lavender") {
    $color-accent=$color-lavender
  }

  $color-link-base=$color-blue;
  $color-link-hover=$color-sky;
  $color-link-visited=$color-lavender;

  $family-base=convert('Roboto, sans-serif');

  $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;

  $shadow-sm=unquote('0 1px 2px 0 rgb(0 0 0 / 0.05)');
  $shadow-base=unquote('0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)');
  $shadow-md=unquote('0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)');
  $shadow-lg=unquote('0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)');
  $shadow-xl=unquote('0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)');
  $shadow-2xl=unquote('0 25px 50px -12px rgb(0 0 0 / 0.25)');
  $shadow-inner=unquote('inset 0 2px 4px 0 rgb(0 0 0 / 0.05)');

  as-rgba($color) {
    return s('rgba(%s,%s,%s,%s)', red($color), green($color), blue($color), alpha($color));
  }

  as-unit($value) {
    return $value unless ($value is a 'unit') return $value * 1px $value[1];
  }

  lookup-or($name, $fallback=$name) {
    return lookup(''+$name) || $fallback
  }

  space($scale) {
    return 0.25rem*$scale;
  }

  font($size=base, $line=lookup-or('$line-'+$size, base)) {
    $s=shift($size);
    $l=shift($line);

    font-size: lookup-or('$font-'+ $s, $s) $size;
    line-height: lookup-or('$line-'+ $l, $l) $line;
  }

  w($value) {
    width: as-unit($value);
  }

  h($value) {
    height: as-unit($value);
  }

  maxW($value) {
    max-width: as-unit($value);
  }

  maxH($value) {
    max-height: as-unit($value);
  }

  minW($value) {
    min-width: as-unit($value);
  }

  minH($value) {
    min-height: as-unit($value);
  }

  mx($value) {
    ml($value);
    mr($value);
  }

  my($value) {
    mt($value);
    mb($value);
  }

  m($value) {
    margin: $value;
  }

  mt($value) {
    margin-top: as-unit($value);
  }

  mb($value) {
    margin-bottom: as-unit($value);
  }

  mr($value) {
    margin-right: as-unit($value);
  }

  ml($value) {
    margin-left: as-unit($value);
  }

  px($value) {
    pl($value);
    pr($value);
  }

  py($value) {
    pt($value);
    pb($value);
  }

  p($value) {
    padding: $value;
  }

  pt($value) {
    padding-top: as-unit($value);
  }

  pb($value) {
    padding-bottom: as-unit($value);
  }

  pr($value) {
    padding-right: as-unit($value);
  }

  pl($value) {
    padding-left: as-unit($value);
  }

  bg($color=$color-base) {
    background-color: lookup-or($color);
  }

  text($color=$color-text) {
    color: lookup-or($color);
  }

  rounded($value=base) {
    border-radius: lookup-or('$rounded-'+$value, $value);
  }

  shadow($size=base) {
    box-shadow: lookup-or('$shadow-'+$size, $size);
  }

  box-border() {
    box-sizing: border-box;
  }

  box-content() {
    box-sizing: content-box;
  }

  responsive-img($h=auto) {
    max-width: 100%;
    height: as-unit($h);
  }

  _align($dir) {
    return ($dir==row || $dir==row-reverse) ? center: flex-start;
  }

  _justify($dir) {
    return ($dir==row || $dir==row-reverse) ? flex-start: center;
  }

  flexbox($dir=row, $align=_align($dir), $justify=_justify($dir), $gap=0, $wrap=initial, $inline=false) {
    if $inline {
      display: inline-flex !important;
    }

    else {
      display: flex !important;
    }

    &[style*="display: none"] {
      display: none !important;
    }

    flex-direction: $dir;
    flex-wrap: $wrap;
    align-items: $align;
    justify-content: $justify;
    gap: $gap;
  }

  inline-flexbox($dir=row, $align=_align($dir), $justify=_justify($dir), $gap=0, $wrap=initial) {
    flexbox($dir: $dir, $align: $align, $justify: $justify, $gap: $gap, $wrap: $wrap, $inline: true);
  }

  hide() {
    display: none;
  }

  container($h=auto, $spaced=true) {
    $w=$spaced ? (1000px !important): (s('calc(1000px + %s)', space(8)) !important);
    reset-box($box: 'content', $w: $w, $h: $h, $m: (0 auto), $p: $spaced ? (0 space(4)) : 0);
  }

  /* https://tabler-icons.io/ */

  icon($svg, $color=accent, $w=auto, $h=$w) {
    $rgba=as-rgba(lookup-or('$color-'+$color, $color));
    return url(replace(currentColor, $rgba, s($svg, $w, $h)));
  }

  icon-mail-question($color=$color-text, $w=auto, $h=$w) {
    return icon("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-mail-question' width='%s' height='%s' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 19h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4.5' /%3E%3Cpath d='M19 22v.01' /%3E%3Cpath d='M19 19a2.003 2.003 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483' /%3E%3Cpath d='M3 7l9 6l9 -6' /%3E%3C/svg%3E", $color, $w, $h);
  }

  icon-key($color=$color-text, $w=auto, $h=$w) {
    return icon("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-k...