poke/css/mobile.css
2023-12-06 14:39:20 +00:00

1802 lines
32 KiB
CSS

body {
max-width:100%;
overflow-x:hidden;
color:#111
}
body,
html {
overflow-x:hidden;
font-family:ubuntu,sans-serif
}
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,.12);
color:rgba(0,0,0,.87)
}
.theme--light.v-chip:not(.v-chip--active) {
background:#e0e0e0
}
.theme--light.v-chip:hover:before {
opacity:.04
}
.theme--light.v-chip--active:before,
.theme--light.v-chip--active:hover:before,
.theme--light.v-chip:focus:before {
opacity:.12
}
.theme--light.v-chip--active:focus:before {
opacity:.16
}
.theme--dark.v-chip {
border-color:hsla(0,0%,100%,.12);
color:#fff
}
.theme--dark.v-chip:not(.v-chip--active) {
background:#555
}
.theme--dark.v-chip:hover:before {
opacity:.08
}
.theme--dark.v-chip--active:before,
.theme--dark.v-chip--active:hover:before,
.theme--dark.v-chip:focus:before {
opacity:.24
}
.theme--dark.v-chip--active:focus:before {
opacity:.32
}
.v-chip {
align-items:center;
cursor:default;
display:inline-flex;
line-height:20px;
max-width:100%;
outline:0;
overflow:hidden;
padding:0 12px;
position:relative;
text-decoration:none;
transition-duration:.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:.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 .3s cubic-bezier(.25, .8, .5, 1)
}
.v-chip--link:focus:before {
opacity:.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,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
.v-chip--disabled {
opacity:.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:.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:0 0
}
.v-chip.v-chip--selected:after {
opacity:.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: 1.5em;
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;
border: solid 0.5px #333;
}
.pill-button {
margin-left: 1em;
font-family: 'PokeTube Flex';
font-stretch: ultra-expanded;
font-weight: 800;
}
.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(0)
}
100% {
-webkit-transform:skewX(0)
}
}
@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(0)
}
100% {
transform:skewX(0)
}
}
.wiggle {
-webkit-animation-name:wiggle;
animation-name:wiggle;
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
.animated.wiggle {
-webkit-animation-duration:.75s;
animation-duration:.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-link:#0ab7f0!important;
--text-link-visited:#00c0ff;
--text-color:#ffffff;
--text-font-primary:"PokeTube Flex";
--text-header-weight:1000;
--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-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")
}
.alert {
padding:20px;
background-color:#f44336;
color:#fff;
opacity:1;
transition:opacity .6s;
margin-bottom:15px
}
.alert.success {
background-color:#04aa6d
}
.alert.info {
background-color:#2196f3
}
.alert.warning {
background-color:#ff9800
}
.closebtn {
margin-left:15px;
color:#fff;
font-weight:700;
float:right;
font-size:22px;
line-height:20px;
cursor:pointer;
transition:.3s
}
.closebtn:hover {
color:#000
}
:visited {
color:#00c0ff
}
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:0 0;
line-height:18px
}
#desc-container .backtotop {
margin:0;
display:none
}
#desc-container .backtotop a {
margin-top:.5em
}
#desc .close {
display:none
}
#desc {
font-size:.94em;
line-height:1.2em;
text-align:left;
padding:.6em 3%;
margin:0;
background:#000;
border-top:none;
border-radius:4px;
height:100%
}
#set-language {
margin-bottom:.2em
}
#set-language+p {
display:inline-block;
font-size:1em;
margin:.45em 0 0
}
#descs {
padding:.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:700
}
#desc-container {
display:none
}
#desc-container:target {
display:block
}
.backtotop b {
display:none
}
body {
position:relative
}
#desc-container {
position:absolute;
margin-top:-18.9em;
left:0;
width:100%;
height:100%
}
#language-container .backtotop a {
position:absolute;
width:100%;
height:100%;
background:0 0;
border:none;
margin-top:0
}
#desc .close {
float:right;
display:block
}
#desc .close span {
display:none
}
#desc .close:after {
content:"\2A09";
float:right;
position:relative;
bottom:.1em;
cursor:pointer
}
#descs {
column-width:10em;
column-count:3;
column-gap:0
}
#descs span {
display:block
}
#descs span a {
display:inline-block
}
#comments-container .backtotop {
margin:0;
display:none
}
#comments-container .backtotop a {
margin-top:.5em
}
#comments .close {
display:none
}
#comments {
font-size:.94em;
line-height:1.2em;
text-align:left;
padding:.6em 3%;
margin:0;
background:#000;
border-top:none;
border-radius:4px;
height:100%
}
#set-language {
margin-bottom:.2em
}
#set-language+p {
display:inline-block;
font-size:1em;
margin:.45em 0 0
}
#commentss {
padding:.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:700
}
#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:0 0;
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:.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;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
white-space:pre-wrap;
word-wrap:break-word;
white-space:-webkit-pre-wrap;
word-break:break-all;
white-space:normal
}
.desc {
white-space:-moz-pre-wrap!important;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
white-space:pre-wrap;
word-wrap:break-word;
white-space:-webkit-pre-wrap;
word-break:break-all;
white-space:normal
}
#more-button-container .backtotop {
margin:0;
display:none
}
#more-button-container .backtotop a {
margin-top:.5em
}
#more-button .close {
display:none
}
#more-button {
font-size:.94em;
line-height:1.2em;
text-align:left;
padding:.6em 3%;
margin:0;
background:#000;
border-top:none;
border-radius:4px;
height:100%
}
#set-language {
margin-bottom:.2em
}
#set-language+p {
display:inline-block;
font-size:1em;
margin:.45em 0 0
}
#more-buttons {
padding:.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:700
}
#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:0 0;
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:.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
}
.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
}
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)
}
h1,
h2,
h3,
h4,
h5,
h6 {
color:var(--text-primary)
}
.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
}
.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>.account,
.top-bar.full-size-search>.divider,
.top-bar.full-size-search>.logo,
.top-bar.full-size-search>.search-button {
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-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
}
.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
}
@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
}
}
.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;
font-family:ubuntu
}
.video>.info>.title {
color:var(--text-primary)!important
}
.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
}
.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>* {
color:#fff
}
.playlist>.thumbnail>div>:first-child {
font-size:x-large
}
.playlist>.info {
grid-area:info;
font-size:small
}
.playlist>.info>div>ul {
display:none
}
.playlist>.info>.title {
color:var(--text-primary)!important;
font-weight:700;
font-size:initial;
margin-bottom:8px
}
.channel a {
text-decoration:none;
color:var(--text-secondary)
}
.channel>.avatar {
grid-area:thumbnail;
display:flex;
justify-content:center;
align-items:center
}
.channel>.avatar>img {
background-color:#ccc;
height:90px;
width:90px
}
.channel>.info {
grid-area:info;
font-size:small
}
.channel>.info>.name {
color:var(--text-primary)!important;
font-weight:700;
font-size:initial;
margin-bottom:8px
}
.channel>.info p {
display:none
}
.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 {
max-width:100%;
margin:auto;
max-height:75vh;
aspect-ratio:16/9;
background-color:#000
}
.player {
width:100%;
height:100%
}
.player.error {
display:flex;
align-items:center;
justify-content:center;
background-color:#ccc;
background-image:url("/img/player-error.png")!important;
background-size:contain
}
.player.error>* {
background-color:#000;
color:#fff
}
.video-info {
padding:12px
}
.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:first-child {
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 {
display:flex;
justify-content:space-evenly;
flex-direction:row;
column-gap:8px;
padding:8px 0
}
.video-info-buttons>* {
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
}
.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%;
border-radius:50%
}
.name {
grid-area:name;
display:flex;
flex-direction:column;
justify-content: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 {
display:flex;
flex-direction:column;
column-gap:16px
}
.resolutions-list>div>* {
line-height:32px
}
.recommended-list {
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;
font-family:ubuntu,sans-serif
}
.recommended-list>.video>.info>a {
font-size:initial
}
.recommended-list>.video>.info>div {
flex-wrap:wrap;
max-height:unset
}
.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 {
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
}
.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:700;
font-size:initial
}
.video-grid>.video>.info>div>div {
display:flex;
flex-direction:column;
flex-wrap:wrap
}
.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
}
.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>.playlist-video>.info>.title,
.video-list>.video>.info>.title {
font-weight:700
}
.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-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>.description,
.playlist-info>.info,
.playlist-info>.title {
display:block;
padding:0 16px
}
.playlist-info>.channel-info {
display:none
}
.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;
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;
border-radius:50%;
background-color:var(--thumbnail-background)
}
.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-button,
.login-form>input {
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
}
.login-button,
.playlist-form>input,
.playlist-form>select {
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:700
}
.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
}
.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-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-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:700;
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-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:#000!important;
margin:auto;
margin-right:auto;
background:#fff;
border-radius:2em;
text-transform:initial;
font-weight:1000;
padding:10px 16px;
border:none;
margin-left:.5em;
font-family:"PokeTube Flex";
font-stretch:ultra-expanded
}
h3 {
font-stretch:ultra-expanded!important
}
.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:#fff
}
@media screen and (orientation:landscape) {
.ptnewbuttons {
margin-left:auto;
width:auto;
max-width:150em!important;
margin-right:auto !important;
}
}
.new-button.engagement:hover {
background-color:#0009
}
div.new-button:hover {
background-color:#0008
}
a.new-button:hover {
background-color:#0008
}
.video-chnl-info-pill>a:first-child {
margin-right:-8px
}
.video-info-buttons.pill>.engagement {
margin-right:2px
}
.button-encryption,
.video-info-buttons.pill>div:nth-child(2)>.new-button {
margin-right:2px
}