diff --git a/css/watch-util.css b/css/watch-util.css new file mode 100644 index 0000000..6178525 --- /dev/null +++ b/css/watch-util.css @@ -0,0 +1,415 @@ +/* + + 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://cdn.statically.io/gh/brecert/discord-quote-generator/main/Ginto-Nord-800.woff") + format("woff"); +} + +.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; +}