MLG userstyle for cobalt.tools (made as a joke, not recommended)

mlgCobalt.user.css

/* ==UserStyle==
@name           MLG userstyle for cobalt.tools
@description    made as a joke, not recommended
@namespace      rebane2001
@author         rebane2001
@version        1.0.0
@license        MIT
@preprocessor   default
==/UserStyle== */


#body-auto {
  #cobalt {
    display: flex;
  }

  #sidebar {
    position: absolute;
    background: #0000;
    opacity: 0;
    transition: opacity 0.5s, background 0.5s;
    &:hover {
      opacity: 1;
      background: #0007;
    }
  }

  #cobalt-logo, .meowbalt, #terms-note {
    display: none;
  }

  #content {
    --angle: 0deg;
    width: 100%;
    background: conic-gradient(from var(--angle) at 50% calc(20% + 130px), red, yellow, lime, aqua, blue, magenta, red);
    animation: 20s rotate linear infinite;
  }

  #supported-services {
    * { opacity: 0; }
    &::after {
      font-family: "Impact", fantasy;
      font-size: 100px;
      content: "MLG YOUTUBE MP4 DOWNLOADER";
      left: 0;
      right: 0;
      max-width: 800px;
      color: #F0D;
      margin: auto;
      display: block;
      position: fixed;
      top: 20%;
      rotate: 2deg;
      z-index: 1000;
      pointer-events: none;
      text-align: center;
      text-shadow: 3px 4px #00f;
    }
    &::before {
      font-family: "Comic Sans MS", cursive;
      font-size: 16px;
      content: "dont use this web site illegaly m8";
      left: 0;
      right: 0;
      max-width: 800px;
      color: #000;
      margin: auto;
      display: block;
      position: fixed;
      bottom: 10px;
      z-index: 1000;
      pointer-events: none;
      text-align: center;
    }
  }
  #omnibox {
    position: absolute;
    bottom: 37%;
    &::before {
      content: "TIᎮƎ⅃ %001";
      content: "";
      display: block;
      background: url("https://www.gstatic.com/youtube/img/branding/favicon/favicon.svg");
      position: fixed;
      width: 200px;
      height: 200px;
      top: calc(20% + 30px);
      left: 0;
      right: 0;
      margin: auto;
      transform: scaleX(-1.3) rotate(4deg);
      filter: hue-rotate(331deg);
    }
  }
  #input-container {
    --color: red;
    --angle: 0deg;
    border-radius: 0px;
    outline: none;
    border: 3px solid transparent;
    border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
    animation: 10s rotate linear infinite, 5s rainbow linear infinite;
    background: #FFF;
        box-shadow: 0 0 13px 0 var(--color) inset;


    #link-area {
      font-family: "Comic Sans MS", cursive;
      font-size: 28px;
      height: 26px;
      line-height: 4;
      color: #00F;
    }
  }
  #clear-button {
    background: #F00;
    svg {
      display: none;
    }
    &::after {
      color: #FFF;
      font-family: "Comic Sans MS", cursive;
      content: "X";
      font-size: 20px;
    }
  }
  #download-button {

    position: absolute;
    border: none;
    border-left: none!important;
    bottom: calc(20% - 133px);
    height: fit-content;
    width: 100%;
    transition: scale 0.5s;
    scale: 1;

    text-shadow: 2px 2px #FFF;

    &:hover {
      scale: 1.2;
    }
    &::after {
      --color: red;
      color: var(--color);
      animation: 0.5s rainbow linear infinite;
      background: linear-gradient(90deg, red, yellow, lime, aqua, blue, magenta, red);
      border: 4px solid #0F0;
      font-size: 40px;
      font-family: "Impact", fantasy;
      content: "CLICK 2 DOWNLAOD!\A DOESNT DOESNLOAD VIRUS. ITS LEGIT M8";
      outline: 3px solid var(--color);
    }
    #download-state {
      display: none;
    }
  }

  #action-container .switcher {
    .button {
      --color: red;
      animation: 3.2s rainbow linear infinite;
      box-shadow: none;
      color: #000;
      font-size: 0;
      background: #0000;
      svg {
        display: none;
      }
      /*
      &::before {
        content: "[ ]";
        color: #000;
        font-size: 14.5px;
      }
      &.active::before {
        content: "[M8]";
      }
      */
      &.active {
        color: #FFF;
        font-weight: 900;
        text-shadow: 1px 1px 0 var(--color);
      }
      &::after {
        font-family: "Comic Sans MS", cursive;
        content: attr(id);

        font-size: 14.5px;
      }
      &#setting-button-save-downloadMode-auto::after  { content: "MLG Mode" }
      &#setting-button-save-downloadMode-audio::after { content: "Skrillex Mode" }
      &#setting-button-save-downloadMode-mute::after  { content: "Shut Up (SMOSH MODE)" }
    }
  }
  #processing-status {
    filter:none;
    border-radius:0;
    &>.icon-holder { display: none; }
    &::after {
        font-family: "Comic Sans MS", cursive;
        content: "Win free iPod";
    }
  }
  #processing-popover {
    border-radius: 0;
    background: #343A8E;
    #queue-title {
      font-size: 0;
      font-family: "Comic Sans MS", cursive;
      &::after {
        font-size: 16px;
        content: "New MLG Messages";
      }
    }
    .beta-label {
      font-family: "Impact", fantasy;
      font-size: 0;
      background:#E9302E;
      &::after {
        color: #FFF;
        font-size: 11px;
        content: "MLG";
      }
    }
    .clear-button {
      font-size: 0;
      font-family: "Arial", sans-serif;
      &::after {
        font-size: 13px;
        content: "tactical nuke";
      }
      svg {display:none;}
    }
    .file-actions {
      background:#E9302E!important;
      .action-button {
        background:#E9302E!important;
        font-family: "Impact", fantasy;
        svg {display:none;}
      }
      [aria-label="download"]::after { content: "free download";color: #02ff2d;scale: 1.1;}
      [aria-label="delete"]::after { content: "noscope";color: orange;}
    }
    .filename {
      font-family: "Comic Sans MS", cursive;
    }
    .subtext.stub-text {
      font-size: 0;
      font-family: "Arial", sans-serif;
      &::after {
        color:red;
        font-size: 13px;
        content: "u have no new msgs m8!!! u need 2 git good";
      }
    }
    .status-spinner {
      svg::after { content: "360 noscoping...";color:yellow; }
    }
    &:has(.status-spinner) .status-text {
      &::before { content: "generating robux"; }
    }
    .file-progress {
      background: #000;
      background: linear-gradient(#B2B2B2 3%, #F3F3F3 6%, #FCFCFC 10%, #EFEFEF 14%, #E5E5E5 18%, #DDD 22%, #DADADA 25%, #C9C9C9 31%, #C9C9C9 74%, #D5D5D5 90%, #EAEAEA 93%, #8C8C8C 96%);
      &,.progress {
        border-radius: 0;
        height: 32px;
      }
      .progress {
        --color: red;
        animation: 0.6s rainbow linear infinite;
        background: linear-gradient(var(--color)), linear-gradient(#B2B2B2 3%, #F3F3F3 6%, #FCFCFC 10%, #EFEFEF 14%, #E5E5E5 18%, #DDD 22%, #DADADA 25%, #C9C9C9 31%, #C9C9C9 74%, #D5D5D5 90%, #EAEAEA 93%, #8C8C8C 96%);
        background-blend-mode: color;
      }
    }
  }
  #button-paste {
    font-family: "Impact", fantasy;
    border-radius: 0;
    background: #00F;
    svg, span { display:none; }
    &::after { content: "quick scope"; }
  }
}

/* https://codepen.io/bramus/pen/rNWByYz */
@keyframes rotate {
	to {
		--angle: 360deg;
	}
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}



@property --color {
  syntax: '<color>';
  initial-value: red;
  inherits: false;
}

@keyframes rainbow{
  0% {
    --color: red;
  }
  16.6% {
    --color: yellow;
  }
  33.3% {
    --color: lime;
  }
  50% {
    --color: aqua;
  }
  66.6% {
    --color: blue;
  }
  83.3% {
    --color: magenta;
  }
  100% {
    --color: red;
  }
}