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 }