poke/css/watch-util.css

/*

 This Source Code Form is subject to the terms of the GNU General Public License:

    Copyright (C) 2021-2022 POKETUBE (https://github.com/iamashley0/poketube)
    
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program. If not, see https://www.gnu.org/licenses/.

*/

body {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  color: #111111;
}

a {
  color: #0ab7f0;
}
.animated {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: skewX(9deg);
  }
  10% {
    -webkit-transform: skewX(-8deg);
  }
  20% {
    -webkit-transform: skewX(7deg);
  }
  30% {
    -webkit-transform: skewX(-6deg);
  }
  40% {
    -webkit-transform: skewX(5deg);
  }
  50% {
    -webkit-transform: skewX(-4deg);
  }
  60% {
    -webkit-transform: skewX(3deg);
  }
  70% {
    -webkit-transform: skewX(-2deg);
  }
  80% {
    -webkit-transform: skewX(1deg);
  }
  90% {
    -webkit-transform: skewX(0deg);
  }
  100% {
    -webkit-transform: skewX(0deg);
  }
}

@keyframes wiggle {
  0% {
    transform: skewX(9deg);
  }
  10% {
    transform: skewX(-8deg);
  }
  20% {
    transform: skewX(7deg);
  }
  30% {
    transform: skewX(-6deg);
  }
  40% {
    transform: skewX(5deg);
  }
  50% {
    transform: skewX(-4deg);
  }
  60% {
    transform: skewX(3deg);
  }
  70% {
    transform: skewX(-2deg);
  }
  80% {
    transform: skewX(1deg);
  }
  90% {
    transform: skewX(0deg);
  }
  100% {
    transform: skewX(0deg);
  }
}

.wiggle {
  -webkit-animation-name: wiggle;
  animation-name: wiggle;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

.animated.wiggle {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
}
.v-chip:not(.v-chip--outlined).accent,
.v-chip:not(.v-chip--outlined).error,
.v-chip:not(.v-chip--outlined).info,
.v-chip:not(.v-chip--outlined).primary,
.v-chip:not(.v-chip--outlined).secondary,
.v-chip:not(.v-chip--outlined).success,
.v-chip:not(.v-chip--outlined).warning {
  color: #fff;
}
.theme--light.v-chip {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.87);
}
.theme--light.v-chip:not(.v-chip--active) {
  background: #e0e0e0;
}
.theme--light.v-chip:hover:before {
  opacity: 0.04;
}
.theme--light.v-chip--active:before,
.theme--light.v-chip--active:hover:before,
.theme--light.v-chip:focus:before {
  opacity: 0.12;
}
.theme--light.v-chip--active:focus:before {
  opacity: 0.16;
}
.theme--dark.v-chip {
  border-color: hsla(0, 0%, 100%, 0.12);
  color: #fff;
}
.theme--dark.v-chip:not(.v-chip--active) {
  background: #555;
}
.theme--dark.v-chip:hover:before {
  opacity: 0.08;
}
.theme--dark.v-chip--active:before,
.theme--dark.v-chip--active:hover:before,
.theme--dark.v-chip:focus:before {
  opacity: 0.24;
}
.theme--dark.v-chip--active:focus:before {
  opacity: 0.32;
}
.v-chip {
  align-items: center;
  cursor: default;
  display: inline-flex;
  line-height: 20px;
  max-width: 100%;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-decoration: none;
  transition-duration: 0.28s;
  transition-property: box-shadow, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  white-space: nowrap;
}
.v-chip:before {
  background-color: currentColor;
  bottom: 0;
  border-radius: inherit;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  right: 0;
  top: 0;
}
.v-chip .v-avatar {
  height: 24px !important;
  min-width: 24px !important;
  width: 24px !important;
}
.v-chip .v-icon {
  font-size: 24px;
}
.v-application--is-ltr .v-chip .v-avatar--left,
.v-application--is-ltr .v-chip .v-icon--left {
  margin-left: -6px;
  margin-right: 6px;
}
.v-application--is-ltr .v-chip .v-avatar--right,
.v-application--is-ltr .v-chip .v-icon--right,
.v-application--is-rtl .v-chip .v-avatar--left,
.v-application--is-rtl .v-chip .v-icon--left {
  margin-left: 6px;
  margin-right: -6px;
}
.v-application--is-rtl .v-chip .v-avatar--right,
.v-application--is-rtl .v-chip .v-icon--right {
  margin-left: -6px;
  margin-right: 6px;
}
.v-chip:not(.v-chip--no-color) .v-icon {
  color: inherit;
}
.v-chip .v-chip__close.v-icon {
  font-size: 18px;
  max-height: 18px;
  max-width: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.v-application--is-ltr .v-chip .v-chip__close.v-icon.v-icon--right {
  margin-right: -4px;
}
.v-application--is-rtl .v-chip .v-chip__close.v-icon.v-icon--right {
  margin-left: -4px;
}
.v-chip .v-chip__close.v-icon:active,
.v-chip .v-chip__close.v-icon:focus,
.v-chip .v-chip__close.v-icon:hover {
  opacity: 0.72;
}
.v-chip .v-chip__content {
  align-items: center;
  display: inline-flex;
  height: 100%;
  max-width: 100%;
}
.v-chip--active .v-icon {
  color: inherit;
}
.v-chip--link:before {
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.v-chip--link:focus:before {
  opacity: 0.32;
}
.v-chip--clickable {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.v-chip--clickable:active {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.v-chip--disabled {
  opacity: 0.4;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.v-chip__filter {
  max-width: 24px;
}
.v-chip__filter.v-icon {
  color: inherit;
}
.v-chip__filter.expand-x-transition-enter,
.v-chip__filter.expand-x-transition-leave-active {
  margin: 0;
}
.v-chip--pill .v-chip__filter {
  margin-right: 0 16px 0 0;
}
.v-chip--pill .v-avatar {
  height: 32px !important;
  width: 32px !important;
}
.v-application--is-ltr .v-chip--pill .v-avatar--left {
  margin-left: -12px;
}
.v-application--is-ltr .v-chip--pill .v-avatar--right,
.v-application--is-rtl .v-chip--pill .v-avatar--left {
  margin-right: -12px;
}
.v-application--is-rtl .v-chip--pill .v-avatar--right {
  margin-left: -12px;
}
.v-chip--label {
  border-radius: 4px !important;
}
.v-chip.v-chip--outlined {
  border-width: thin;
  border-style: solid;
}
.v-chip.v-chip--outlined.v-chip--active:before {
  opacity: 0.08;
}
.v-chip.v-chip--outlined .v-icon {
  color: inherit;
}
.v-chip.v-chip--outlined.v-chip.v-chip {
  background-color: transparent !important;
}
.v-chip.v-chip--selected {
  background: transparent;
}
.v-chip.v-chip--selected:after {
  opacity: 0.28;
}
.v-chip.v-size--x-small {
  border-radius: 8px;
  font-size: 10px;
  height: 16px;
}
.v-chip.v-size--small {
  border-radius: 12px;
  font-size: 12px;
  height: 24px;
}
.v-chip.v-size--default {
  border-radius: 16px;
  font-size: 14px;
  height: 32px;
}
.v-chip.v-size--large {
  border-radius: 27px;
  font-size: 16px;
  height: 54px;
}
.v-chip.v-size--x-large {
  border-radius: 33px;
  font-size: 18px;
  height: 66px;
}
:root {
  --text-primary: #fff;
  --text-secondary: #fff;
  --text-link: #3ea6ff;

  --app-background: #111111;
  --context-menu-background: #333;
  --border-color: #444;
  --item-hover-background: #373737;
  --item-active-background: #383838;

  --top-bar-background: #202020;
  --guide-background: #212121;

  --thumbnail-background: #252525;

  --channel-info-background: #181818;
  --channel-contents-background: #0f0f0f;
}

@font-face {
  font-family: "Ginto Nord";
  font-weight: 800;
  src: url("https://p.poketube.fun/https://cdn.statically.io/gh/brecert/discord-quote-generator/main/Ginto-Nord-800.woff")
    format("woff");
}

@font-face {
  font-family: "PokeTube Flex";
  src: url("https://p.poketube.fun/https://cdn.glitch.global/43b6691a-c8db-41d4-921c-8cf6aa0d9108/robotoflex.ttf?v=1668343428681");
  font-style: normal;
  font-stretch: 1% 800%;
  font-display: swap;
}

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

.alert.success {
  background-color: #04aa6d;
}
.alert.info {
  background-color: #2196f3;
}
.alert.warning {
  background-color: #ff9800;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
.video {
  text-align: left;
}