From a6641805da46027b2bc6996f199ce3ae5d81f706 Mon Sep 17 00:00:00 2001 From: Ashley Date: Thu, 2 Feb 2023 12:05:37 +0000 Subject: [PATCH] je --- css/mobile.css | 2868 +++++++++++++++--------------------------------- 1 file changed, 875 insertions(+), 1993 deletions(-) diff --git a/css/mobile.css b/css/mobile.css index 5c359b49..cceff5f2 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -1,2107 +1,989 @@ body { - max-width: 100%; - overflow-x: hidden; /* Hide horizontal scrollbar */ - color: #111111; -} - -html, -body { - overflow-x: hidden; -} - -body { - position: relative; -} - -* { - font-family:ubuntu, sans-serif; -} - -.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; -} - -.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; -} - -.new-button { - background: #0009; - border-radius: 2em; - padding-right: 1em; - display: flex; - justify-content: center; - align-items: center; - align-content: center; - width: max-content; - margin-top: 4px; - margin-left: 3px; - margin-right: 0; -} -.pill-button { - margin-left: 1em; -} - -.vertical { - border-left: 1px solid gray; - height: 15px; -} - -@-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; -} - -:root { - --text-primary: #fff; - --text-secondary: #fff; - --text-link: #0ab7f0; - - --app-background: #0a0101; - --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; - - /* text */ - --text-link: #0ab7f0 !important; - --text-link-visited: #00c0ff; - --text-color: #ffffff; - --text-font-primary: "PokeTube Flex"; - --text-header-weight: 1000; - - /* Divs */ - --div-gradient: linear-gradient( - 135deg, - #f97794 10%, - #623aa2 100%, - #8e6f7e 100% - ); - --div-border-color: #7c44a0; - --div-prim-bg: #1c1c1c; - --div-second-bg: #1a1a1a; - --div-transparent-bg: #0009; + font-size:16px } +/* cyrillic */ @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-family: 'Ubuntu'; + font-style: italic; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-300-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-300-italic.woff) format('woff'); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } -.alert { - padding: 20px; - background-color: #f44336; - color: white; - opacity: 1; - transition: opacity 0.6s; - margin-bottom: 15px; +/* cyrillic-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-300-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-300-italic.woff) format('woff'); + unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } -.alert.success { - background-color: #04aa6d; -} -.alert.info { - background-color: #2196f3; -} -.alert.warning { - background-color: #ff9800; +/* greek */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-300-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-300-italic.woff) format('woff'); + unicode-range: U+0370-03FF; } -.closebtn { - margin-left: 15px; - color: white; - font-weight: bold; - float: right; - font-size: 22px; - line-height: 20px; - cursor: pointer; - transition: 0.3s; +/* greek-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-300-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-300-italic.woff) format('woff'); + unicode-range: U+1F00-1FFF; } -.closebtn:hover { - color: black; +/* latin */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-300-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-300-italic.woff) format('woff'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } -:visited { - color: #00c0ff; +/* latin-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-300-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-300-italic.woff) format('woff'); + unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +/* cyrillic */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-400-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-400-italic.woff) format('woff'); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; +} + +/* cyrillic-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-400-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-400-italic.woff) format('woff'); + unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; +} + +/* greek */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-400-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-400-italic.woff) format('woff'); + unicode-range: U+0370-03FF; +} + +/* greek-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-400-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-400-italic.woff) format('woff'); + unicode-range: U+1F00-1FFF; +} + +/* latin */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-400-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-400-italic.woff) format('woff'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +/* latin-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-400-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-400-italic.woff) format('woff'); + unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +/* cyrillic */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-500-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-500-italic.woff) format('woff'); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; +} + +/* cyrillic-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-500-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-500-italic.woff) format('woff'); + unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; +} + +/* greek */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-500-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-500-italic.woff) format('woff'); + unicode-range: U+0370-03FF; +} + +/* greek-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-500-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-500-italic.woff) format('woff'); + unicode-range: U+1F00-1FFF; +} + +/* latin */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-500-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-500-italic.woff) format('woff'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +/* latin-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-500-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-500-italic.woff) format('woff'); + unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +/* cyrillic */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-700-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-700-italic.woff) format('woff'); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; +} + +/* cyrillic-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-700-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-700-italic.woff) format('woff'); + unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; +} + +/* greek */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-700-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-700-italic.woff) format('woff'); + unicode-range: U+0370-03FF; +} + +/* greek-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-700-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-700-italic.woff) format('woff'); + unicode-range: U+1F00-1FFF; +} + +/* latin */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-700-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-700-italic.woff) format('woff'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +/* latin-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: italic; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-700-italic.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-700-italic.woff) format('woff'); + unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +/* cyrillic */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-300-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-300-normal.woff) format('woff'); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; +} + +/* cyrillic-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-300-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-300-normal.woff) format('woff'); + unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; +} + +/* greek */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-300-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-300-normal.woff) format('woff'); + unicode-range: U+0370-03FF; +} + +/* greek-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-300-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-300-normal.woff) format('woff'); + unicode-range: U+1F00-1FFF; +} + +/* latin */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-300-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-300-normal.woff) format('woff'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +/* latin-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 300; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-300-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-300-normal.woff) format('woff'); + unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +/* cyrillic */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-400-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-400-normal.woff) format('woff'); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; +} + +/* cyrillic-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-400-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-400-normal.woff) format('woff'); + unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; +} + +/* greek */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-400-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-400-normal.woff) format('woff'); + unicode-range: U+0370-03FF; +} + +/* greek-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-400-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-400-normal.woff) format('woff'); + unicode-range: U+1F00-1FFF; +} + +/* latin */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-400-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-400-normal.woff) format('woff'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +/* latin-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 400; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-400-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-400-normal.woff) format('woff'); + unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +/* cyrillic */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-500-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-500-normal.woff) format('woff'); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; +} + +/* cyrillic-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-500-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-500-normal.woff) format('woff'); + unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; +} + +/* greek */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-500-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-500-normal.woff) format('woff'); + unicode-range: U+0370-03FF; +} + +/* greek-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-500-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-500-normal.woff) format('woff'); + unicode-range: U+1F00-1FFF; +} + +/* latin */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-500-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-500-normal.woff) format('woff'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +/* latin-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 500; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-500-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-500-normal.woff) format('woff'); + unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +/* cyrillic */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-700-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-700-normal.woff) format('woff'); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; +} + +/* cyrillic-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-700-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-cyrillic-ext-700-normal.woff) format('woff'); + unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; +} + +/* greek */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-700-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-700-normal.woff) format('woff'); + unicode-range: U+0370-03FF; +} + +/* greek-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-700-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-greek-ext-700-normal.woff) format('woff'); + unicode-range: U+1F00-1FFF; +} + +/* latin */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-700-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-700-normal.woff) format('woff'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +/* latin-ext */ +@font-face { + font-family: 'Ubuntu'; + font-style: normal; + font-weight: 700; + src: url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-700-normal.woff2) format('woff2'), url(https://p.poketube.fun/https://fonts.bunny.net/ubuntu/files/ubuntu-latin-ext-700-normal.woff) format('woff'); + unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + + +::-webkit-scrollbar { + width: 8.5px; + background-color: #36363e; +} + +::-webkit-scrollbar-thumb { + background-color: #7c7c84; + border-radius: 8.75px; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #909098; +} + +p { + color: #fff; +} + +h1 { + font-size: 50px; + margin: 0; + color: #fff; +} + +h5 { + display: block; + font-size: 0.83em; + margin: 1.67em 0; + font-weight: 700; + color: #fff; } a { - color: #0ab7f0; -} -.fromtheweb-outer { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - -moz-box-pack: justify; - padding: 10px; - margin-bottom: 12px; - border-bottom-right-radius: 10px; - border-bottom-left-radius: 10px; -} -.fromtheweb-inner { - -moz-box-align: center; - text-align: left; - font-size: 14px; - -moz-box-pack: center; - justify-content: center; - padding: 0px 0px; - line-height: 18px; + color: #007bff; + text-decoration: none; + background-color: transparent; } -#desc-container .backtotop { - margin: 0%; - display: none; -} -#desc-container .backtotop a { - margin-top: 0.5em; -} -#desc .close { - display: none; -} -#desc { - font-size: 0.94em; - line-height: 1.2em; - text-align: left; - padding: 0.6em 3%; - margin: 0; - background: #000; - border-top: none; - border-radius: 4px; - height: 100%; -} -#set-language { - margin-bottom: 0.2em; -} -#set-language + p { - display: inline-block; - font-size: 1em; /* 15px */ - margin: 0.45em 0 0; +a:hover { + color: #0056b3; + text-decoration: underline; } -#descs { - padding: 0.4em 0; -} -#descs p { - margin: 0; - font-weight: 900; - font-stretch: ultra-expanded; - padding: 3px; -} -#descs span { - display: inline-block; - width: 10.5em; - line-height: 2em; -} -#descs span a { - line-height: 1.9em; -} -#descs span.original { - font-weight: bold; -} -/* Display/hide language list */ - -#desc-container { - display: none; -} -#desc-container:target { - display: block; -} -.backtotop b { - display: none; +a:not([href]) { + color: inherit; + text-decoration: none; } -body { - position: relative; +a:not([href]):hover { + color: inherit; + text-decoration: none; } -#desc-container { - position: absolute; - margin-top: -18.9em; - left: 0; - width: 100%; - height: 100%; +.page-footer-section a, +.page-footer-section p { + color: #b2b4bf; } -#language-container .backtotop a { - position: absolute; - width: 100%; - height: 100%; - background: transparent; - border: none; +p { margin-top: 0; + margin-bottom: 1rem; } -#desc .close { - float: right; + +p { display: block; -} -#desc .close span { - display: none; -} -#desc .close:after { - content: "\2A09"; - float: right; - position: relative; - bottom: 0.1em; - cursor: pointer; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; } -#descs { - column-width: 10em; - column-count: 3; - column-gap: 0; -} -#descs span { - display: block; -} -#descs span a { - display: inline-block; +.mb-3, +.my-3 { + margin-bottom: 1rem !important; } -#comments-container .backtotop { - margin: 0%; - display: none; -} -#comments-container .backtotop a { - margin-top: 0.5em; -} -#comments .close { - display: none; -} -#comments { - font-size: 0.94em; - line-height: 1.2em; - text-align: left; - padding: 0.6em 3%; - margin: 0; - background: #000; - border-top: none; - border-radius: 4px; - height: 100%; -} -#set-language { - margin-bottom: 0.2em; -} -#set-language + p { - display: inline-block; - font-size: 1em; /* 15px */ - margin: 0.45em 0 0; -} - -#commentss { - padding: 0.4em 0; -} -#commentss p { - margin: 0; - font-weight: 900; - font-stretch: ultra-expanded; - padding: 3px; -} -#commentss span { - display: inline-block; - width: 10.5em; - line-height: 2em; -} -#commentss span a { - line-height: 1.9em; -} -#commentss span.original { - font-weight: bold; -} -/* Display/hide language list */ - -#comments-container { - display: none; -} -#comments-container:target { - display: block; -} - -#rec-cont:target { - display: none; -} -#rec-cont { - display: block; -} - -.backtotop b { - display: none; -} - -body { - position: relative; -} -#comments-container { - position: absolute; - margin-top: -18.9em; - left: 0; - width: 100%; - height: 100%; -} -#language-container .backtotop a { - position: absolute; - width: 100%; - height: 100%; - background: transparent; - border: none; - margin-top: 0; -} -#comments .close { - float: right; - display: block; -} -#comments .close span { - display: none; -} -#comments .close:after { - content: "\2A09"; - float: right; - position: relative; - bottom: 0.1em; - cursor: pointer; -} - -#commentss { - column-width: 10em; - column-count: 3; - column-gap: 0; -} -#commentss span { - display: block; -} -#commentss span a { - display: inline-block; -} - -.description { - white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - white-space: pre-wrap; /* css-3 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ - white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/ - word-break: break-all; - white-space: normal; -} - -.desc { - white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - white-space: pre-wrap; /* css-3 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ - white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/ - word-break: break-all; - white-space: normal; -} - -#more-button-container .backtotop { - margin: 0%; - display: none; -} -#more-button-container .backtotop a { - margin-top: 0.5em; -} -#more-button .close { - display: none; -} -#more-button { - font-size: 0.94em; - line-height: 1.2em; - text-align: left; - padding: 0.6em 3%; - margin: 0; - background: #000; - border-top: none; - border-radius: 4px; - height: 100%; -} -#set-language { - margin-bottom: 0.2em; -} -#set-language + p { - display: inline-block; - font-size: 1em; /* 15px */ - margin: 0.45em 0 0; -} - -#more-buttons { - padding: 0.4em 0; -} -#more-buttons p { - margin: 0; - font-weight: 900; - font-stretch: ultra-expanded; - padding: 3px; -} -#more-buttons span { - display: inline-block; - width: 10.5em; - line-height: 2em; -} -#more-buttons span a { - line-height: 1.9em; -} -#more-buttons span.original { - font-weight: bold; -} -/* Display/hide language list */ - -#more-button-container { - display: none; -} -#more-button-container:target { - display: block; -} - -#rec-cont:target { - display: none; -} -#rec-cont { - display: block; -} - -.backtotop b { - display: none; -} - -body { - position: relative; -} -#more-button-container { - position: absolute; - margin-top: -18.9em; - left: 0; - width: 100%; - height: 100%; -} -#language-container .backtotop a { - position: absolute; - width: 100%; - height: 100%; - background: transparent; - border: none; - margin-top: 0; -} -#more-button .close { - float: right; - display: block; -} -#more-button.close span { - display: none; -} -#more-button .close:after { - content: "\2A09"; - float: right; - position: relative; - bottom: 0.1em; - cursor: pointer; -} - -#more-buttons { - column-width: 10em; - column-count: 3; - column-gap: 0; -} -#more-buttons span { - display: block; -} -#more-buttons span a { - display: inline-block; -} - -.date-publish { -} -/* common stuff */ - -.max-lines-1 { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 1; - line-clamp: 1; - -webkit-box-orient: vertical; -} - -.max-lines-2 { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; -} - -/* shared layout */ - -body { - margin: 48px 0; - padding: 0; - font-family: sans-serif; -} - -html { - background-color: var(--app-background); -} - -body.noguide { - grid-template-areas: "top-bar top-bar" "app app"; -} - -* { - box-sizing: border-box; - color: var(--text-secondary); +.h5, +h5 { + font-size: 1.3125rem; } +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, h1, h2, h3, h4, h5, h6 { - color: var(--text-primary); + line-height: 1.25; } -.top-bar { - position: fixed; - top: 0; - left: 0; - right: 0; - height: 48px; - - display: flex; - align-items: center; - padding: 0 16px; - - box-shadow: #0004 0 2px 5px; - background-color: var(--top-bar-background); - - z-index: 9999; +.h5, +h5 { + font-size: 1.25rem; } -.top-bar > form { - display: none; -} - -.top-bar > .divider { - flex-grow: 1; -} - -.guide { - position: fixed; - left: 0; - right: 0; - bottom: 0; - height: 48px; - - border-top: 1px solid var(--border-color); - - display: flex; - flex-direction: row; - justify-content: space-around; - - background-color: var(--guide-background); -} - -.top-bar.full-size-search > .logo, -.top-bar.full-size-search > .divider, -.top-bar.full-size-search > .search-button, -.top-bar.full-size-search > .account { - display: none; -} - -.top-bar.full-size-search > form { - height: 40px; - flex-grow: 1; - display: flex !important; -} - -.top-bar.full-size-search > form > input { - box-sizing: border-box; - height: 40px; - border: 1px solid var(--border-color); - border-radius: 0; - color: var(--text-primary); - background-color: var(--item-active-background); -} - -.top-bar.full-size-search > form > input[type="text"] { - flex-grow: 1; -} - -.top-bar.full-size-search > form > input[type="submit"] { - width: 64px; - flex-basis: 64px; -} - -.app { - background-color: var(--app-background); - margin-top: 48px; -} - -a.icon-link, -a.icon-link > i { - width: 32px; - height: 32px; - line-height: 32px; - text-align: center; -} - -.noguide > .guide { - display: none; -} - -/* guide */ - -.guide-item > a { - height: 100%; - padding: 0 24px; - display: flex; - text-align: center; - flex-direction: column; - font-size: x-small; - align-items: center; - text-decoration: none; - justify-content: center; - - color: var(--text-primary); -} - -.guide-item > a > .icon { - width: 24px; - height: 24px; - line-height: 24px; - font-size: initial; - margin-right: 0; -} - -.guide-item:hover { - background-color: var(--item-hover-background); -} - -.guide-item.active { - background-color: var(--item-active-background); -} - -.hide-on-minmode { - display: none; -} - -.show-on-minmode { - display: none; -} - -/* top bar */ - -.logo { - color: var(--text-primary) !important; - text-decoration: none; - font-size: larger; -} - -.account { - width: 48px; - height: 48px; - display: flex; - align-items: center; - justify-content: center; -} - -.account > img { - width: 32px; - height: 32px; -} - -.account-menu { - display: none; -} - -.search-button { - width: 48px; - height: 48px; - display: flex; - align-items: center; - justify-content: center; -} - -/* rich video grid */ - -@media screen and (min-width: 850px) { - .rich-video-grid { - width: 100%; - - display: flex; - flex-wrap: wrap; - gap: 16px 16px; - padding-top: 16px; - justify-content: space-evenly; - } - - .rich-video-grid > .video { - display: grid; - grid-template-columns: 52px 1fr; - grid-template-rows: min-content min-content; - grid-auto-flow: row; - grid-gap: 10px 0; - grid-template-areas: - "thumbnail thumbnail" - "avatar info"; - - margin-bottom: 16px; - width: 400px; - } -} - -@media screen and (max-width: 850px) { - .rich-video-grid { - width: 100%; - } - - .rich-video-grid > .video { - display: grid; - grid-template-columns: 52px 1fr; - grid-template-rows: min-content min-content; - grid-auto-flow: row; - grid-gap: 10px 0; - grid-template-areas: - "thumbnail thumbnail" - "avatar info"; - - margin-bottom: 16px; - } -} - -/* list video item */ - -.video a { - text-decoration: none; - color: #606060; -} - -.video > .thumbnail { - grid-area: thumbnail; - background-color: #ccc; - width: 100%; - height: fit-content; - aspect-ratio: 16 / 9; - - display: flex; - justify-content: flex-end; - align-items: flex-end; - padding: 4px; - - background-position-y: center; - background-size: cover; -} - -.video > .thumbnail.img-thumbnail { - padding: 0 !important; -} - -.video > .thumbnail > img { - object-fit: cover; - width: 100%; - height: 100%; -} - -.video > .thumbnail > span { - font-size: smaller; - - background-color: #0008; - color: #fff; - padding: 2px; - border-radius: 2px; -} - -.video > .avatar { - grid-area: avatar; - width: 36px; - height: 36px; - border-radius: 18px; - background-color: #e3e3e3; - - margin-left: 12px; -} - -.video > .avatar > img { - width: 36px; - height: 36px; - border-radius: 18px; -} - -.video > .info { - grid-area: info; -} - -.video > .info > div { - display: flex; - flex-direction: row; - flex-wrap: wrap; - color: #606060; - column-gap: 8px; - overflow-y: hidden; -} - -.video > .info > .title { - color: var(--text-primary) !important; -} - -/* playlist video item */ - -.playlist-video a { - text-decoration: none; - color: #606060; -} - -.playlist-video > .thumbnail { - grid-area: thumbnail; - background-color: #ccc; - width: 100%; - height: fit-content; - aspect-ratio: 16 / 9; - - display: flex; - justify-content: flex-end; - align-items: flex-end; - padding: 4px; - - background-position-y: center; - background-size: cover; -} - -.playlist-video > .thumbnail > span { - font-size: smaller; - - background-color: #0008; - color: #fff; - padding: 2px; - border-radius: 2px; -} - -.playlist-video > .avatar { - grid-area: avatar; - width: 36px; - height: 36px; - border-radius: 18px; - background-color: #e3e3e3; - - margin-left: 12px; -} - -.playlist-video > .avatar > img { - width: 36px; - height: 36px; - border-radius: 18px; -} - -.playlist-video > .info { - grid-area: info; -} - -.playlist-video > .info > div { - display: flex; - flex-direction: row; - flex-wrap: wrap; - color: #606060; - column-gap: 8px; - overflow-y: hidden; -} - -.playlist-video > .info > .title { - color: var(--text-primary) !important; -} - -.playlist-video > .index { - grid-area: index; - display: none; -} - -.playlist-video > .edit { - grid-area: edit; - display: flex; - justify-content: center; - align-items: center; -} - -/* list playlist item */ - -.playlist a { - text-decoration: none; - color: var(--text-secondary); -} - -.playlist > .thumbnail { - grid-area: thumbnail; - - background-color: #ccc; - - display: flex; - justify-content: flex-end; - align-items: center; - - background-position-y: center; - background-size: cover; -} - -.playlist > .thumbnail > div { - font-size: smaller; - - background-color: #0008; - color: #fff; - padding: 2px; - width: 50%; - height: 100%; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - row-gap: 8px; -} - -.playlist > .thumbnail > div > * { +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; color: #fff; } -.playlist > .thumbnail > div > *:nth-child(1) { - font-size: x-large; +.page-footer-section { + position: relative; + padding-top: 100px; + padding-bottom: 20px; + background-color: #f0eef5; } -.playlist > .info { - grid-area: info; - font-size: small; +.page-footer-section.bg-dark .caption { + color: rgba(255, 255, 255, 0.6); } -.playlist > .info > div > ul { - display: none; +.page-footer-section.bg-dark hr { + border-color: #4d4853; } -.playlist > .info > .title { - color: var(--text-primary) !important; - font-weight: bold; - font-size: initial; - margin-bottom: 8px; +.menu-link { + position: relative; + padding-left: 0; + list-style: none; } -/* list playlist item */ +.menu-link li { + display: block; + margin: 10px 0; +} -.channel a { +.mea:hover { + color: #526bf5; text-decoration: none; - color: var(--text-secondary); } -.channel > .avatar { - grid-area: thumbnail; - - display: flex; - justify-content: center; - align-items: center; +.page-footer-section a, +.page-footer-section p { + color: #b2b4bf; } -.channel > .avatar > img { - background-color: #ccc; - - height: 90px; - width: 90px; +.page-footer-section a:hover { + color: #526bf5; + text-decoration: none; } -.channel > .info { - grid-area: info; - font-size: small; -} - -.channel > .info > .name { - color: var(--text-primary) !important; - font-weight: bold; - font-size: initial; - margin-bottom: 8px; -} - -.channel > .info p { - display: none; -} - -/* watch page */ - -.watch-page { - display: grid; - grid-template-columns: 1fr 256px; - grid-template-rows: 1fr; - grid-template-areas: "primary secondary"; -} - -@media screen and (max-width: 900px) { - .watch-page { - grid-template-areas: "primary" "secondary"; - grid-template-columns: 1fr; - grid-template-rows: max-content 1fr; - } -} - -.primary { - grid-area: primary; -} - -.video-player-container { +.client-img > img { + width: auto; max-width: 100%; - margin: auto; - max-height: 75vh; - aspect-ratio: 16 / 9; - background-color: #000; + height: auto; + max-height: 100px; } -.player { - width: 100%; - height: 100%; -} - -.player.error { +.row { display: flex; - align-items: center; - justify-content: center; - background-color: #ccc; - background-image: url("/img/player-error.png") !important; - background-size: contain; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; } -.player.error > * { - background-color: #000; +.col, +.col-1, +.col-10, +.col-11, +.col-12, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-auto, +.col-lg, +.col-lg-1, +.col-lg-10, +.col-lg-11, +.col-lg-12, +.col-lg-2, +.col-lg-3, +.col-lg-4, +.col-lg-5, +.col-lg-6, +.col-lg-7, +.col-lg-8, +.col-lg-9, +.col-lg-auto, +.col-md, +.col-md-1, +.col-md-10, +.col-md-11, +.col-md-12, +.col-md-2, +.col-md-3, +.col-md-4, +.col-md-5, +.col-md-6, +.col-md-7, +.col-md-8, +.col-md-9, +.col-md-auto, +.col-sm, +.col-sm-1, +.col-sm-10, +.col-sm-11, +.col-sm-12, +.col-sm-2, +.col-sm-3, +.col-sm-4, +.col-sm-5, +.col-sm-6, +.col-sm-7, +.col-sm-8, +.col-sm-9, +.col-sm-auto, +.col-xl, +.col-xl-1, +.col-xl-10, +.col-xl-11, +.col-xl-12, +.col-xl-2, +.col-xl-3, +.col-xl-4, +.col-xl-5, +.col-xl-6, +.col-xl-7, +.col-xl-8, +.col-xl-9, +.col-xl-auto { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px; +} + +.fa-icon { + align-items: center; + background-color: transparent; + border: 0; + display: inline-flex; + justify-content: center; + margin: 0; + padding: 0 0.1em; + position: relative; + user-select: none; + vertical-align: text-bottom; + -webkit-user-select: none; +} + +.fa-icon > * { + pointer-events: none; +} + +.fa-icon.disabled, +.fa-icon[disabled] { + color: var(--button-disabled-ink); + fill: var(--button-disabled-ink); + filter: var(--button-disabled-filter); + stroke: var(--button-disabled-ink); + pointer-events: none; +} + +.fa-icon > .fa-icon-badge, +.fa-icon.disabled > .fa-icon-badge { + visibility: hidden; +} + +.fa-icon.fa-icon-badged > .fa-icon-badge { + bottom: -20%; + display: inline-block; + font: 60% sans-serif; + left: calc(100% - 0.2em); + position: absolute; + visibility: visible; +} + +.fa-icon.fa-icon-hflipped > svg { + transform: scale(-1, 1); +} + +.fa-icon.fa-icon-vflipped > svg { + transform: scale(1, -1); +} + +.fa-icon > svg { + height: 1em; + overflow: visible; + width: 1em; +} + +.fa-icon > .fa-icon_bar-chart { + width: calc(1em * 2048 / 1792); +} + +.fa-icon > .fa-icon_cloud-download, +.fa-icon > .fa-icon_cloud-upload, +.fa-icon > .fa-icon_cogs, +.fa-icon > .fa-icon_eraser, +.fa-icon > .fa-icon_film { + width: calc(1em * 1920 / 1792); +} + +.fa-icon > .fa-icon_code { + width: calc(1em * 1830 / 1792); +} + +.fa-icon > .fa-icon_exclamation-triangle { + width: calc(1em * 1794 / 1792); +} + +.fa-icon > .fa-icon_clipboard, +.fa-icon > .fa-icon_comment-alt, +.fa-icon > .fa-icon_external-link, +.fa-icon > .fa-icon_eye-dropper, +.fa-icon > .fa-icon_eye-open, +.fa-icon > .fa-icon_eye-slash, +.fa-icon > .fa-icon_files-o, +.fa-icon > .fa-icon_list-alt { + width: calc(1em * 1792 / 1792); +} + +.fa-icon > .fa-icon_download-alt, +.fa-icon > .fa-icon_font, +.fa-icon > .fa-icon_search, +.fa-icon > .fa-icon_spinner, +.fa-icon > .fa-icon_unlink, +.fa-icon > .fa-icon_upload-alt, +.fa-icon > .fa-icon_zoom-in, +.fa-icon > .fa-icon_zoom-out { + width: calc(1em * 1664 / 1792); +} + +.fa-icon > .fa-icon_home { + width: calc(1em * 1612 / 1792); +} + +.fa-icon > .fa-icon_check { + width: calc(1em * 1550 / 1792); +} + +.fa-icon > .fa-icon_clock-o, +.fa-icon > .fa-icon_cog, +.fa-icon > .fa-icon_floppy-o, +.fa-icon > .fa-icon_info-circle, +.fa-icon > .fa-icon_pause-circle-o, +.fa-icon > .fa-icon_play-circle-o, +.fa-icon > .fa-icon_power-off, +.fa-icon > .fa-icon_question-circle, +.fa-icon > .fa-icon_refresh, +.fa-icon > .fa-icon_save, +.fa-icon > .fa-icon_sliders, +.fa-icon > .fa-icon_undo { + width: calc(1em * 1536 / 1792); +} + +.fa-icon > .fa-icon_arrow-right { + width: calc(1em * 1472 / 1792); +} + +.fa-icon > .fa-icon_filter { + width: calc(1em * 1410 / 1792); +} + +.fa-icon > .fa-icon_plus, +.fa-icon > .fa-icon_trash-o { + width: calc(1em * 1408 / 1792); +} + +.fa-icon > .fa-icon_times { + width: calc(1em * 1188 / 1792); +} + +.fa-icon > .fa-icon_angle-up, +.fa-icon > .fa-icon_double-angle-up, +.fa-icon > .fa-icon_lock, +.fa-icon > .fa-icon_unlock-alt { + width: calc(1em * 1152 / 1792); +} + +.fa-icon > .fa-icon_double-angle-left { + width: calc(1em * 966 / 1792); +} + +.fa-icon > .fa-icon_bolt { + width: calc(1em * 896 / 1792); +} + +body { + background: #000; +} + +nav { + font-family: Roboto; + display: flex; + justify-content: space-between; + height: 4em; +} + +nav a { color: #fff; + text-decoration: none; + font-weight: 700; } -.video-info { - padding: 12px; +nav a span { + color: red; } -.video-title { - font-size: large; - color: var(--text-primary); -} - -.video-info-bar { - font-size: small; - display: grid; - grid-auto-columns: 1fr; - grid-template-columns: max-content max-content max-content 1fr max-content; - grid-template-rows: max-content max-content; - gap: 0 8px; - grid-template-areas: - "views . uploaddate divider" - "buttons buttons buttons buttons"; -} - -.video-info-bar > span:nth-child(1) { - grid-area: views; -} - -.video-info-bar > .divider { - grid-area: divider; -} - -.video-info-bar > span:nth-child(3) { - grid-area: uploaddate; -} - -.video-info-bar > .video-info-buttons { - grid-area: buttons; -} - -.video-info-buttons { +nav .left { display: flex; - justify-content: space-evenly; - flex-direction: row; - column-gap: 8px; - padding: 8px 0; + justify-content: flex-start; + align-items: center; + padding-left: 1em; } -.video-info-buttons > * { +nav .left a { + margin-left: 30px; +} + +nav .left a i { + padding-right: 4px; +} + +nav .middle { display: flex; - flex-direction: column; justify-content: center; align-items: center; - column-gap: 4px; - text-decoration: none; } -.video-info-buttons > * > i.bi { - font-size: x-large; +nav .middle .search-bar { + display: flex; + transform: translateY(1em); + background: #222; + border: 1px solid #444; + width: 320px; + height: 30px; } -.channel-info, -.channel-info__bordered { - display: grid; - grid-template-columns: 34px max-content 1fr min-content; - grid-template-rows: 34px; - grid-auto-columns: 1fr; - gap: 8px; - grid-auto-flow: row; - grid-template-areas: "avatar name . subscribe-button"; - - padding: 8px 0; - - border-top: 1px solid var(--border-color); - border-bottom: 1px solid var(--border-color); -} - -.avatar { - grid-area: avatar; -} - -.avatar > img { - width: 100%; - height: 100%; +nav .middle button { + display: flex; + transform: translate(22em, -1.25em); + background: #454545; + color: #999; + padding: 10px 10px; + border: 1px; border-radius: 50%; } -.name { - grid-area: name; +nav .middle input { + background: #454545; + color: #999; + padding: 2px 25px; +} +.search { display: flex; - flex-direction: column; + flex-direction: row; justify-content: center; + align-items: center; } -.name > a { - color: var(--text-primary); - text-decoration: none; -} - -.name > span { - font-size: small; - color: var(--text-secondary); -} - -.subscribe-button { - grid-area: subscribe-button; - - background-color: #0000; - color: #c00; - text-transform: uppercase; - border: none; - - height: 100%; -} - -.subscribe-button.subscribed { - color: var(--text-secondary); -} - -.secondary { - grid-area: secondary; - - padding: 16px 8px; -} - -.resolutions-list { - width: 100%; - padding: 4px; - border: 1px solid var(--border-color); - margin-bottom: 16px; -} - -.resolutions-list > div { +.search .search-bar { display: flex; - flex-direction: column; - column-gap: 16px; + transform: translateY(1.5em); + background: #222; + border: 1px solid #444; + width: 320px; + height: 30px; } -.resolutions-list > div > * { - line-height: 32px; -} - -.recommended-list { +.search button { display: flex; - flex-direction: column; - row-gap: 16px; -} - -.recommended-list > .video { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr max-content; - grid-auto-flow: row; - grid-gap: 0 8px; - grid-template-areas: "thumbnail" "info"; - - color: var(--text-secondary); -} - -.recommended-list > .video > .info { - font-size: small; -} - -.recommended-list > .video > .info > a { - font-size: initial; -} - -.recommended-list > .video > .info > div { - flex-wrap: wrap; - max-height: unset; -} - -/* channel page */ - -.channel-banner { - display: block; - width: 100%; - height: auto; - aspect-ratio: 6.2; - background-color: #000a; - background-size: contain; -} - -.channel-info-container { - background-color: var(--channel-info-background); -} - -.channel-info-container > .channel-info { - grid-template-columns: 50px 1fr; - grid-template-rows: 50px min-content; - grid-template-areas: "avatar name" ". subscribe-button"; - column-gap: 16px; - padding: 16px; -} - -.channel-info-container > .channel-info > .subscribe-button { - width: max-content; -} - -.channel-info-container > .channel-info > .name > *:first-child { - font-size: larger; - color: var(--text-primary); -} - -.channel-info-container > .channel-info > .name > * { - color: var(--text-secondary); -} - -.channel-page > p { - color: var(--text-secondary); -} - -.channel-page .video-grid { - background-color: var(--channel-contents-background); -} - -/* card list item */ - -.card-list { - display: flex; - flex-direction: row; - overflow-x: scroll; - column-gap: 16px; -} - -.card { - width: 150px; - background: var(--context-menu-background); - border: 1px solid var(--border-color); - border-radius: 8px; - text-decoration: none; -} - -.card > img { - aspect-ratio: 16 / 9; - width: 150px; - height: fit-content; -} - -.card > span { - text-decoration: none; - color: var(--text-primary); - margin: 0 8px; -} - -/* channel video "grid" */ - -.video-grid { - display: flex; - flex-direction: column; - flex-wrap: nowrap; - column-gap: 16px; - row-gap: 12px; - padding: 0 12px; -} - -.video-grid > .video { - display: grid; - grid-template-columns: 160px 1fr; - grid-template-rows: 90px; - grid-auto-flow: row; - grid-gap: 10px 10px; - grid-template-areas: "thumbnail info"; - - color: var(--text-secondary); - text-decoration: none; -} - -.video-grid > .avatar { - display: none; -} - -.video-grid > .video > .info > span { - font-weight: bold; - font-size: initial; -} - -.video-grid > .video > .info > div > div { - display: flex; - flex-direction: column; - flex-wrap: wrap; -} - -/* Pagination links */ - -.pagination-buttons { - border-top: 1px solid var(--border-color); - width: 100%; - display: flex; -} - -.pagination-buttons > * { - height: 3rem; - line-height: 3rem; - color: var(--text-secondary); - text-decoration: none; -} - -.pagination-buttons > .divider { - flex-grow: 1; -} - -/* normal video list */ - -.video-list { - margin: auto; - display: flex; - flex-direction: column; - row-gap: 16px; - padding: 16px; -} - -.video-list > .video { - text-decoration: none; - display: grid; - grid-template-columns: 160px; - grid-template-rows: 90px; - grid-auto-flow: row; - grid-gap: 0 16px; - grid-template-areas: "thumbnail info"; - - color: var(--text-secondary); - font-size: small; -} - -.video-list > .playlist-video { - text-decoration: none; - display: grid; - grid-template-columns: 160px 1fr 50px; - grid-template-rows: 90px; - grid-auto-flow: row; - grid-gap: 0 16px; - grid-template-areas: "thumbnail info edit"; - - color: var(--text-secondary); - font-size: small; -} - -.video-list > .video > .info > .title, -.video-list > .playlist-video > .info > .title { - font-weight: bold; -} - -.video-list > .video > .info > div > a > img { - display: none; -} - -.video-list > .playlist { - text-decoration: none; - display: grid; - grid-template-columns: 160px; - grid-template-rows: 90px; - grid-auto-flow: row; - grid-gap: 0 16px; - grid-template-areas: "thumbnail info"; - - color: var(--text-secondary); -} - -.video-list > .channel { - text-decoration: none; - display: grid; - grid-template-columns: 160px 1fr max-content; - grid-template-rows: 90px; - grid-auto-flow: row; - grid-gap: 0 16px; - grid-template-areas: "thumbnail info subscribe-button"; - - color: var(--text-secondary); -} - -.video-list > .channel > .subscribe-button { - display: none; -} - -/* Playlist page */ - -.playlist-info > .thumbnail { - width: 100%; - height: auto; - aspect-ratio: 16 / 9; - background-color: var(--thumbnail-background); - background-size: contain; -} - -.playlist-info > .thumbnail > a { - display: none; -} - -.playlist-info > .title { - font-size: x-large; - color: var(--text-primary); -} - -.playlist-info { - background-color: var(--channel-contents-background); - padding-bottom: 16px; -} - -.playlist-info > .title, -.playlist-info > .info, -.playlist-info > .description { - display: block; - padding: 0 16px; -} - -.playlist-info > .channel-info { - display: none; -} - -/* horizontal channel list */ - -.horizontal-channel-list { - display: flex; - column-gap: 16px; - padding: 16px; - overflow-x: scroll; - background-color: var(--item-hover-background); -} - -.horizontal-channel-list > .channel { - text-decoration: none; - display: flex; - flex-direction: column; - row-gap: 4px; - color: var(--text-secondary); -} - -.horizontal-channel-list > .channel > div { - font-size: small; - text-align: center; - width: 48px; - color: var(--text-secondary); -} - -.horizontal-channel-list > .channel > img { - width: 48px; - height: 48px; + transform: translate(11.5em, -0.75em); + background: #454545; + color: #999; + padding: 10px 10px; + border: 1px; border-radius: 50%; - background-color: var(--thumbnail-background); } -.horizontal-channel-list > .channel > i { - font-size: 24px; - line-height: 48px; - text-align: center; - width: 48px; - height: 48px; +.search input { + background: #454545; + color: #999; + padding: 2px 25px; +} + +nav .right { + display: flex; + align-items: center; + padding-right: 1.5em; +} + +nav .right a { + padding-left: 1.5em; +} + +nav .right img { + height: 30px; + width: 30px; border-radius: 50%; - background-color: var(--thumbnail-background); } -/* Login / Register / Delete pages */ - -.login-container { - display: flex; - flex-direction: row; - padding: 24px; -} - -@media screen and (max-width: 1300px) { - .login-container { - flex-direction: column; - } -} - -.login-container > * { - flex: 1 1 0; -} - -.login-container > * > div { - max-width: 600px; - margin: auto; -} - -.login-form { - display: flex; - flex-direction: column; - max-width: 400px; - row-gap: 10px; - margin: auto; -} - -.login-form > input, -.login-button { - background-color: var(--item-active-background); - color: var(--text-primary); - border: 1px solid var(--border-color); - padding: 10px; - max-width: 400px; - row-gap: 10px; - margin: auto; -} - -.playlist-form { - display: flex; - flex-direction: column; - max-width: 400px; - row-gap: 10px; - margin: auto; -} - -.playlist-form > input, -.playlist-form > select, -.login-button { - background-color: var(--item-active-background); - color: var(--text-primary); - border: 1px solid var(--border-color); - padding: 10px; - width: 80%; - row-gap: 10px; - margin: auto; -} - -.login-button { - background-color: var(--item-active-background); - color: var(--text-primary); - display: block; - text-align: center; - text-decoration: none; - width: fit-content; -} - -.login-button.danger { - color: red; - font-weight: bold; -} - -.login-form > h1 { - text-align: center; -} - -.login-message { - width: calc(100% - 96px); - margin: 48px; - padding: 16px; - border: 1px solid var(--border-color); - background-color: var(--item-active-background); - border-radius: 5px; -} - -/* Account Menu */ - -.fullscreen-account-menu > .guide-item:hover { - background-color: var(--item-hover-background); -} - -.fullscreen-account-menu > .guide-item > a { - height: 40px; - display: flex; - align-items: start; - color: var(--text-primary); - text-decoration: none; - font-size: initial; - padding: 0; -} - -.fullscreen-account-menu > .guide-item > a > .icon { - height: 24px; - width: 24px; - margin-right: 24px; -} - -.fullscreen-account-menu > .guide-item.active { - background-color: var(--item-active-background); -} - -/* download page */ - -.download-list { - display: flex; - flex-direction: row; - flex-wrap: wrap; - column-gap: 32px; -} - -.download-format { - max-width: 400px; - padding: 8px; - display: flex; - flex-direction: column; - row-gap: 8px; -} - -.download-format > div { - color: var(--text-primary); -} - -.download-format > a { - padding: 8px; - background-color: var(--channel-contents-background); - border: 1px solid var(--border-color); - text-decoration: none; -} - -/* settings page */ - -.settings-categories { - background-color: var(--context-menu-background); - display: flex; - column-gap: 16px; - padding: 0 16px; -} - -.settings-categories > a { - height: 3rem; - line-height: 3rem; - padding: 0 8px; - text-decoration: none; -} - -.settings-content { - max-width: 400px; - margin: auto; -} - -.settings-content > div { - width: 100%; - padding: 8px; -} - -.settings-content > div > label { - width: 45%; - display: inline-block; - font-weight: bold; - color: var(--text-primary); -} - -.settings-content > div > select { - width: 50%; - display: inline-block; - border: 1px solid var(--border-color); - padding: 8px; - background-color: var(--context-menu-background); - color: var(--text-primary); -} - -/* logins page */ - -.logins-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - gap: 16px; - padding: 16px; -} - -.login { - border: 1px solid var(--border-color); - border-radius: 4px; - width: 500px; - padding: 8px; -} - -.subscribe-button > a { - color: black !important; - margin: auto; - margin-right: auto; - background: white; - border-radius: 2em; - text-transform: initial; - font-weight: 900; - padding: 10px 16px; - border: none; - margin-left: 0.5em; +@font-face { font-family: "PokeTube Flex"; - font-stretch: ultra-expanded; + 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-weight: 1 1000; + font-display: swap; } -h3 { - font-stretch: ultra-expanded !important; +.video > .thumbnail > .video-length { + font-size: smaller; + background-color: #0008; + color: #fff; + padding: 2px; + border-radius: 3px; + font-family: PokeTube Flex; + font-stretch: 100%; + font-weight: 600; } -.tags { - display: flex; - flex-direction: row; - overflow-x: auto; - column-gap: 3px; -} - -.tag { - background: #333; - padding: 5px; - border-radius: 4px; - word-break: break-all; - white-space: nowrap; -} - -ptd-custom-more { - color: #ffffff; -} - -/* Landscape */ -@media screen and (orientation: landscape) { - .ptnewbuttons { - margin-left: auto; - width: fit-content; - margin-right: auto; - width: -moz-fit-content; +@media screen and (min-width: 865px) { + .btn.btn-success { + transform: translate(21em, -1.25em) !important; + /* Old webkit based browsers */ + -webkit-transform: translate(21em, -1.25em) !important; } } -.new-button.engagement:hover { - background-color: #0009; +nav .middle .search-bar { + border-radius: 2em !important; + font-family: "poketube flex", sans-serif !important; + font-weight: 850 !important; + font-stretch: extra-expanded !important; } -div.new-button:hover { - background-color: #0008; -} - -a.new-button:hover { - background-color: #0008; -}