From 67ce46f328d73fb476678daf90a8e423ff74ad2a Mon Sep 17 00:00:00 2001 From: v4ltages Date: Tue, 9 Aug 2022 03:00:07 +0300 Subject: [PATCH] css adjustments --- css/app.main.css | 383 +++++++++++++++- css/search.main.css | 1034 ++++++++++++++++++++++++++++++++++++++++++- html/main.ejs | 28 +- package.json | 3 - 4 files changed, 1432 insertions(+), 16 deletions(-) diff --git a/css/app.main.css b/css/app.main.css index 4eef5088..14a8f5ca 100644 --- a/css/app.main.css +++ b/css/app.main.css @@ -1 +1,382 @@ -::-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:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}.page-footer-section a,.page-footer-section p{color:#B2B4BF}p{margin-top:0;margin-bottom:1rem}p{display:block;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0;margin-inline-end:0}.mb-3,.my-3{margin-bottom:1rem!important}.h5,h5{font-size:1.3125rem}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{line-height:1.25}.h5,h5{font-size:1.25rem}.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}.page-footer-section{position:relative;padding-top:100px;padding-bottom:20px;background-color:#F0EEF5}.page-footer-section.bg-dark .caption{color:rgba(255,255,255,.6)}.page-footer-section.bg-dark hr{border-color:#4d4853}.menu-link{position:relative;padding-left:0;list-style:none}.menu-link li{display:block;margin:10px 0}.mea:hover{color:#526bf5;text-decoration:none}.page-footer-section a,.page-footer-section p{color:#B2B4BF}.page-footer-section a:hover{color:#526bf5;text-decoration:none}.client-img > img{width:auto;max-width:100%;height:auto;max-height:100px}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.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{background:#232323;font-family:Roboto;height:60px;display:grid;grid-template-columns:20% 60% 20%}nav a{color:#fff;text-decoration:none;font-weight:700}nav a span{color:red}nav .left{display:flex;justify-content:flex-start;align-items:center}nav .left a{margin-left:30px}nav .left a i{font-size:20px;padding-right:4px}nav .middle{display:flex;justify-content:center;align-items:center}nav .middle .search-bar{background:#222;border:1px solid #444;width:420px;height:30px}nav .middle button{background:#454545;color:#999;padding:7px 25px}nav .middle input{background:#454545;color:#999;padding:2px 25px}nav .right{display:flex;justify-content:center;align-items:center;margin-left:20px;padding-left:30px}nav .right a{padding-left:30px}nav .right img{height:30px;width:30px;border-radius:50%} +::-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: #007bff; + text-decoration: none; + background-color: transparent +} + +a:hover { + color: #0056b3; + text-decoration: underline +} + +a:not([href]) { + color: inherit; + text-decoration: none +} + +a:not([href]):hover { + color: inherit; + text-decoration: none +} + +.page-footer-section a,.page-footer-section p { + color: #B2B4BF +} + +p { + margin-top: 0; + margin-bottom: 1rem +} + +p { + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0 +} + +.mb-3,.my-3 { + margin-bottom: 1rem!important +} + +.h5,h5 { + font-size: 1.3125rem +} + +.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 { + line-height: 1.25 +} + +.h5,h5 { + font-size: 1.25rem +} + +.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 +} + +.page-footer-section { + position: relative; + padding-top: 100px; + padding-bottom: 20px; + background-color: #F0EEF5 +} + +.page-footer-section.bg-dark .caption { + color: rgba(255,255,255,.6) +} + +.page-footer-section.bg-dark hr { + border-color: #4d4853 +} + +.menu-link { + position: relative; + padding-left: 0; + list-style: none +} + +.menu-link li { + display: block; + margin: 10px 0 +} + +.mea:hover { + color: #526bf5; + text-decoration: none +} + +.page-footer-section a,.page-footer-section p { + color: #B2B4BF +} + +.page-footer-section a:hover { + color: #526bf5; + text-decoration: none +} + +.client-img > img { + width: auto; + max-width: 100%; + height: auto; + max-height: 100px +} + +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px +} + +.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; + grid-template-columns: 20% 60% 20% +} + +nav a { + color: #fff; + text-decoration: none; + font-weight: 700 +} + +nav a span { + color: red +} + +nav .left { + display: flex; + justify-content: flex-start; + align-items: center; + padding-left: 1em +} + +nav .left a { + margin-left: 30px +} + +nav .left a i { + font-size: 20px; + padding-right: 4px +} + +nav .middle { + display:flex; + justify-content:center; + align-items:center +} + +nav .middle .search-bar { + background:#222; + border:1px solid #444; + width:420px; + height:30px +} + +nav .middle button { + background:#454545; + color:#999; + padding:7px 25px +} + +nav .middle input { + background:#454545; + color:#999; + padding:2px 25px +} + +.search { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.search .search-bar { + display: flex; + transform: translateY(1.5em); + background: #222; + border: 1px solid #444; + width: 320px; + height: 30px + +} + +.search button { + display: flex; + transform: translate(11.5em, -0.75em); + background: #454545; + color: #999; + padding: 10px 10px; + border: 1px; + border-radius: 50%; +} + +.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% +} diff --git a/css/search.main.css b/css/search.main.css index 559c0ec6..739559ec 100644 --- a/css/search.main.css +++ b/css/search.main.css @@ -1 +1,1033 @@ -body{overflow-x:hidden}.animated{-webkit-animation-duration:10s;animation-duration:10s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-o-animation-iteration-count:infinite}@-webkit-keyframes wiggle{0%{-webkit-transform:skewX(9deg)}10%{-webkit-transform:skewX(-8deg)}20%{-webkit-transform:skewX(7deg)}30%{-webkit-transform:skewX(-6deg)}40%{-webkit-transform:skewX(5deg)}50%{-webkit-transform:skewX(-4deg)}60%{-webkit-transform:skewX(3deg)}70%{-webkit-transform:skewX(-2deg)}80%{-webkit-transform:skewX(1deg)}90%{-webkit-transform:skewX(0deg)}100%{-webkit-transform:skewX(0deg)}}@keyframes wiggle{0%{transform:skewX(9deg)}10%{transform:skewX(-8deg)}20%{transform:skewX(7deg)}30%{transform:skewX(-6deg)}40%{transform:skewX(5deg)}50%{transform:skewX(-4deg)}60%{transform:skewX(3deg)}70%{transform:skewX(-2deg)}80%{transform:skewX(1deg)}90%{transform:skewX(0deg)}100%{transform:skewX(0deg)}}.wiggle{-webkit-animation-name:wiggle;animation-name:wiggle;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}.animated.wiggle{-webkit-animation-duration:0.75s;animation-duration:0.75s}*{color:var(--text-secondary)}h1,h2,h3,h4,h5,h6{color:var(--text-primary)}.divider{flex-grow:1}.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}html{background-color:var(--app-background)}.logo{color:var(--text-primary) !important;text-decoration:none;font-size:larger}.guide{grid-area:guide;background-color:var(--guide-background);color:var(--text-primary);width:300px;height:100%;min-height:calc(100vh - 56px)}.account{width:56px;height:56px;display:flex;align-items:center;justify-content:center}a.icon-button,a.icon-button > img{width:32px;height:32px}.account-menu{display:none;background-color:var(--context-menu-background)}.account-menu > .guide-item{background-color:var(--context-menu-background)}.account:hover .account-menu{display:block;position:absolute;top:56px;right:0;width:250px;background-color:#fff;border:1px solid var(--border-color)}.account:hover{background-color:var(--context-menu-background)}.app{grid-area:app;background-color:var(--app-background)}.noguide > .guide{display:none}.guide-item:hover{background-color:var(--item-hover-background)}.guide-item > a{height:40px;padding:0 24px;display:flex;align-items:center;color:var(--text-primary);text-decoration:none}.guide-item > a > .icon{height:24px;width:24px;margin-right:24px;line-height:24px;text-align:center}.guide-item.active{background-color:var(--item-active-background)}.guide hr{color:#fff}.guide > p{padding:16px 24px;font-size:small;font-weight:bold}.guide > p > a{color:var(--text-secondary);text-decoration:none}.guide.minmode{width:72px}.guide.minmode > .guide-item{padding-top:16px;padding-bottom:14px}.guide.minmode > .guide-item > a{height:40px;padding:0 24px;display:flex;text-align:center;flex-direction:column;font-size:x-small;align-items:center;color:var(--text-primary);text-decoration:none;justify-content:center}.guide.minmode > .guide-item > a > .icon{font-size:initial;margin-right:0}.guide.minmode > .hide-on-minmode{display:none}.guide > .show-on-minmode{display:none}.guide.minmode > .show-on-minmode{display:block}@media screen and (max-width: 600px){.guide,.top-bar > form{display:none}.search-button{display:block !important}}.watch-page{margin:24px;display:flex;flex-direction:row}@media screen and (max-width: 1000px){.watch-page{flex-direction:column}.video-info{display:grid;grid-auto-rows:1fr;grid-template-columns:1fr;grid-template-rows:max-content max-content max-content;gap:8px;grid-template-areas:"title" "info" "buttons"}.recommended-list{width:calc(100vw - 48px) !important}}@media screen and (min-width: 1000px){.video-info{display:grid;grid-auto-rows:1fr;grid-template-columns:615px 1fr max-content;grid-template-rows:max-content max-content;gap:8px;grid-template-areas:"title title title" "info . buttons"}}.watch-page > .primary{flex-grow:1}.video-player-container{max-width:100%;margin:auto;max-height:75vh;aspect-ratio:16 / 9}.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{color:var(--text-secondary)}.video-title{grid-area:title;color:var(--text-primary);font-size:larger;margin-top:8px}.video-info-bar{font-size:unset;column-gap:16px;border-bottom:1px solid var(--border-color);padding:8px 0}.video-info-bar > a{color:var(--text-secondary);text-decoration:none}.video-info-buttons{grid-area:buttons;display:flex;flex-direction:row;column-gap:8px}.video-info-buttons > *{color:var(--text-primary);display:flex;justify-content:center;align-content:center;column-gap:4px;text-decoration:none;height:36px;line-height:32px;font-size:14px;font-weight:bold}.video-info-buttons > * > .bi{color:var(--text-primary);width:24px;font-size:18px}.channel-info{display:grid;grid-template-columns:48px max-content 1fr min-content;grid-template-rows:48px;grid-auto-columns:1fr;gap:8px;grid-auto-flow:row;grid-template-areas:"avatar name . subscribe-button";padding-top:16px}.channel-info > .avatar > img{width:100%;height:100%}.channel-info__bordered{border:1px solid var(--border-color);border-radius:4px;display:grid;grid-template-columns:48px max-content 1fr min-content;grid-template-rows:16px 16px;grid-auto-columns:1fr;column-gap:8px;row-gap:4px;grid-auto-flow:row;grid-template-areas:"avatar name . subscribe-button" "avatar subs . subscribe-button";padding:8px}.avatar{grid-area:avatar}.avatar > img{width:36px;height:36px;border-radius:50%}.name{grid-area:name;display:flex;flex-direction:column;justify-content:center}.name > a{color:var(--text-primary);text-decoration:none}.subscriber-count{grid-area:subs}.subscribe-button{grid-area:subscribe-button;background-color:#c00;color:#fff;text-transform:uppercase;font-weight:bold;padding:10px 16px;border:none;margin:auto;height:37px}.subscribe-button.subscribed{background-color:#ECECEC;color:var(--text-secondary)}.video-sub-info{grid-area:info;font-weight:lighter;font-size:95%;max-width:615px}.video-sub-info > span{color:var(--text-primary);font-weight:bold}.description > a{text-decoration:none;color:var(--text-link)}.watch-page > .secondary{width:400px}.resolutions-list{width:400px;padding:4px;border:1px solid var(--border-color);margin:0 16px}.resolutions-list > div{display:flex;column-gap:16px}.recommended-list{display:flex;flex-direction:column;flex-wrap:wrap;row-gap:16px;padding:16px;width:400px}.recommended-list > .video{display:grid;grid-template-columns:168px 1fr;grid-template-rows:94px;grid-auto-flow:row;grid-gap:0 8px;grid-template-areas:"thumbnail info";color:var(--text-secondary)}.recommended-list > .playlist{display:grid;grid-template-columns:168px 1fr;grid-template-rows:94px;grid-auto-flow:row;grid-gap:0 8px;grid-template-areas:"thumbnail info";color:var(--text-secondary)}.rich-video-grid{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:40px;padding:16px}.rich-video-grid > .video{display:grid;grid-template-columns:40px 240px;grid-template-rows:160px 52px;grid-auto-flow:row;grid-gap:10px 0;grid-template-areas:"thumbnail thumbnail" "avatar info";color:var(--text-secondary)}.rich-video-grid > .video > .avatar{width:40px;height:40px}.video a{text-decoration:none;color:var(--text-secondary)}.video > .thumbnail{grid-area:thumbnail;background-color:var(--thumbnail-background);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 > .video-length{font-size:smaller;background-color:#0008;color:#fff;padding:2px;border-radius:2px}.video > .info{grid-area:info;font-size:small}.video > .info > div > a > img{width:24px;height:24px;border-radius:50%}.video > .info > .title{color:var(--text-primary) !important;font-weight:bold;font-size:initial;margin-bottom:8px}.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;font-size:large;padding-bottom:8px}.playlist-video > .index{grid-area:index;display:flex;justify-content:center;align-items:center}.playlist a{text-decoration:none;color:var(--text-secondary)}.playlist > .thumbnail{grid-area:thumbnail;background-color:var(--thumbnail-background);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 > *:nth-child(1){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:bold;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:var(--thumbnail-background);height:136px;width:136px}.channel > .info{grid-area:info;font-size:small;padding-top:32px}.channel > .info > .name{color:var(--text-primary) !important;font-weight:bold;font-size:initial;margin-bottom:8px}.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{max-width:1200px;margin:auto;grid-template-columns:80px max-content 1fr min-content;grid-template-rows:80px;gap:16px;padding:16px 0}.channel-info-container > .channel-info > .subscribe-button{margin:20px 0}.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{max-inline-size:164ch;display:flex;flex-wrap:wrap;column-gap:2em;row-gap:40px;padding:32px;justify-content:space-around}.video-grid > .video{text-decoration:none;display:grid;grid-template-columns:280px;grid-template-rows:160px 52px;grid-auto-flow:row;grid-gap:10px 0;grid-template-areas:"thumbnail" "info";color:var(--text-secondary)}.video-grid > .avatar{display:none}.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}.video-list{max-width:850px;margin:auto;display:flex;flex-direction:column;row-gap:16px;padding:16px}.video-list > .video{text-decoration:none;display:grid;grid-template-columns:280px;grid-template-rows:160px;grid-auto-flow:row;grid-gap:0 16px;grid-template-areas:"thumbnail info";color:var(--text-secondary)}.video-list > .playlist-video{text-decoration:none;display:grid;grid-template-columns:36px 160px 1fr;grid-template-rows:90px;grid-auto-flow:row;grid-gap:0 16px;grid-template-areas:"index thumbnail info";color:var(--text-secondary);font-size:small}.video-list > .playlist{text-decoration:none;display:grid;grid-template-columns:280px;grid-template-rows:160px;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:280px 1fr max-content;grid-template-rows:160px;grid-auto-flow:row;grid-gap:0 16px;grid-template-areas:"thumbnail info subscribe-button";color:var(--text-secondary)}.video-list > .channel > .subscribe-button{margin-top:60px}.video-list > .avatar{display:none}.video-list > .playlist > .info > div > ul{display:block;padding-left:0;list-style:none}.video-list > .playlist > .info > div > ul > li > *{color:var(--text-primary);line-height:24px;height:24px;display:inline-block}.video-list > .playlist > .info > div > ul > li:last-child > *{color:var(--text-secondary);text-transform:uppercase}.playlist-page{display:grid;grid-auto-columns:1fr;grid-template-columns:360px 1fr;grid-template-rows:1fr;gap:0 0;grid-template-areas:"info content"}.playlist-info > .thumbnail{grid-area:info;width:100%;height:auto;aspect-ratio:16 / 9;background-color:var(--thumbnail-background);display:flex;justify-content:center;align-items:flex-end;background-position-y:center;background-size:cover}.playlist-info > .thumbnail > a{background-color:#0008;color:#fff;padding:8px;border-radius:2px;width:100%;text-align:center}.playlist-info > .title{font-size:x-large;color:var(--text-primary)}.playlist-info{background-color:var(--channel-contents-background);padding:16px}.playlist-video-list{grid-area:content;max-width:100%;margin:0}.playlist-info > .info{display:block}.playlist-info > .description{display:block;padding:16px 0}.playlist-info > .channel-info > .subscribe-button{margin-top:4px}.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:72px;color:var(--text-secondary)}.horizontal-channel-list > .channel > img{width:72px;height:72px;border-radius:50%;background-color:var(--thumbnail-background)}.horizontal-channel-list > .channel > i{font-size:36px;line-height:72px;text-align:center;width:72px;height:72px;border-radius:50%;background-color:var(--thumbnail-background)}.login-container{display:flex;flex-direction:row}@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}.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}.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:40%;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:4px;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} +body { + overflow-x: hidden; +} +.animated { + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; +} +@-webkit-keyframes wiggle { + 0% { + -webkit-transform: skewX(9deg); + } + 10% { + -webkit-transform: skewX(-8deg); + } + 20% { + -webkit-transform: skewX(7deg); + } + 30% { + -webkit-transform: skewX(-6deg); + } + 40% { + -webkit-transform: skewX(5deg); + } + 50% { + -webkit-transform: skewX(-4deg); + } + 60% { + -webkit-transform: skewX(3deg); + } + 70% { + -webkit-transform: skewX(-2deg); + } + 80% { + -webkit-transform: skewX(1deg); + } + 90% { + -webkit-transform: skewX(0deg); + } + 100% { + -webkit-transform: skewX(0deg); + } +} +@keyframes wiggle { + 0% { + transform: skewX(9deg); + } + 10% { + transform: skewX(-8deg); + } + 20% { + transform: skewX(7deg); + } + 30% { + transform: skewX(-6deg); + } + 40% { + transform: skewX(5deg); + } + 50% { + transform: skewX(-4deg); + } + 60% { + transform: skewX(3deg); + } + 70% { + transform: skewX(-2deg); + } + 80% { + transform: skewX(1deg); + } + 90% { + transform: skewX(0deg); + } + 100% { + transform: skewX(0deg); + } +} +.wiggle { + -webkit-animation-name: wiggle; + animation-name: wiggle; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} +.animated.wiggle { + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; +} +* { + color: var(--text-secondary); +} +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--text-primary); +} +.divider { + flex-grow: 1; +} +.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; +} +html { + background-color: var(--app-background); +} +.logo { + color: var(--text-primary) !important; + text-decoration: none; + font-size: larger; +} +.guide { + grid-area: guide; + background-color: var(--guide-background); + color: var(--text-primary); + width: 300px; + height: 100%; + min-height: calc(100vh - 56px); +} +.account { + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; +} +a.icon-button, +a.icon-button > img { + width: 32px; + height: 32px; +} +.account-menu { + display: none; + background-color: var(--context-menu-background); +} +.account-menu > .guide-item { + background-color: var(--context-menu-background); +} +.account:hover .account-menu { + display: block; + position: absolute; + top: 56px; + right: 0; + width: 250px; + background-color: #fff; + border: 1px solid var(--border-color); +} +.account:hover { + background-color: var(--context-menu-background); +} +.app { + grid-area: app; + background-color: var(--app-background); +} +.noguide > .guide { + display: none; +} +.guide-item:hover { + background-color: var(--item-hover-background); +} +.guide-item > a { + height: 40px; + padding: 0 24px; + display: flex; + align-items: center; + color: var(--text-primary); + text-decoration: none; +} +.guide-item > a > .icon { + height: 24px; + width: 24px; + margin-right: 24px; + line-height: 24px; + text-align: center; +} +.guide-item.active { + background-color: var(--item-active-background); +} +.guide hr { + color: #fff; +} +.guide > p { + padding: 16px 24px; + font-size: small; + font-weight: bold; +} +.guide > p > a { + color: var(--text-secondary); + text-decoration: none; +} +.guide.minmode { + width: 72px; +} +.guide.minmode > .guide-item { + padding-top: 16px; + padding-bottom: 14px; +} +.guide.minmode > .guide-item > a { + height: 40px; + padding: 0 24px; + display: flex; + text-align: center; + flex-direction: column; + font-size: x-small; + align-items: center; + color: var(--text-primary); + text-decoration: none; + justify-content: center; +} +.guide.minmode > .guide-item > a > .icon { + font-size: initial; + margin-right: 0; +} +.guide.minmode > .hide-on-minmode { + display: none; +} +.guide > .show-on-minmode { + display: none; +} +.guide.minmode > .show-on-minmode { + display: block; +} +@media screen and (max-width: 600px) { + .guide, + .top-bar > form { + display: none; + } + .search-button { + display: block !important; + } +} +.watch-page { + margin: 24px; + display: flex; + flex-direction: row; +} +@media screen and (max-width: 1000px) { + .watch-page { + flex-direction: column; + } + .video-info { + display: grid; + grid-auto-rows: 1fr; + grid-template-columns: 1fr; + grid-template-rows: max-content max-content max-content; + gap: 8px; + grid-template-areas: "title" "info" "buttons"; + } + .recommended-list { + width: calc(100vw - 48px) !important; + } +} +@media screen and (min-width: 1000px) { + .video-info { + display: grid; + grid-auto-rows: 1fr; + grid-template-columns: 615px 1fr max-content; + grid-template-rows: max-content max-content; + gap: 8px; + grid-template-areas: "title title title" "info . buttons"; + } +} +.watch-page > .primary { + flex-grow: 1; +} +.video-player-container { + max-width: 100%; + margin: auto; + max-height: 75vh; + aspect-ratio: 16 / 9; +} +.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 { + color: var(--text-secondary); +} +.video-title { + grid-area: title; + color: var(--text-primary); + font-size: larger; + margin-top: 8px; +} +.video-info-bar { + font-size: unset; + column-gap: 16px; + border-bottom: 1px solid var(--border-color); + padding: 8px 0; +} +.video-info-bar > a { + color: var(--text-secondary); + text-decoration: none; +} +.video-info-buttons { + grid-area: buttons; + display: flex; + flex-direction: row; + column-gap: 8px; +} +.video-info-buttons > * { + color: var(--text-primary); + display: flex; + justify-content: center; + align-content: center; + column-gap: 4px; + text-decoration: none; + height: 36px; + line-height: 32px; + font-size: 14px; + font-weight: bold; +} +.video-info-buttons > * > .bi { + color: var(--text-primary); + width: 24px; + font-size: 18px; +} +.channel-info { + display: grid; + grid-template-columns: 48px max-content 1fr min-content; + grid-template-rows: 48px; + grid-auto-columns: 1fr; + gap: 8px; + grid-auto-flow: row; + grid-template-areas: "avatar name . subscribe-button"; + padding-top: 16px; +} +.channel-info > .avatar > img { + width: 100%; + height: 100%; +} +.channel-info__bordered { + border: 1px solid var(--border-color); + border-radius: 4px; + display: grid; + grid-template-columns: 48px max-content 1fr min-content; + grid-template-rows: 16px 16px; + grid-auto-columns: 1fr; + column-gap: 8px; + row-gap: 4px; + grid-auto-flow: row; + grid-template-areas: "avatar name . subscribe-button" "avatar subs . subscribe-button"; + padding: 8px; +} +.avatar { + grid-area: avatar; +} +.avatar > img { + width: 36px; + height: 36px; + border-radius: 50%; +} +.name { + grid-area: name; + display: flex; + flex-direction: column; + justify-content: center; +} +.name > a { + color: var(--text-primary); + text-decoration: none; +} +.subscriber-count { + grid-area: subs; +} +.subscribe-button { + grid-area: subscribe-button; + background-color: #c00; + color: #fff; + text-transform: uppercase; + font-weight: bold; + padding: 10px 16px; + border: none; + margin: auto; + height: 37px; +} +.subscribe-button.subscribed { + background-color: #ececec; + color: var(--text-secondary); +} +.video-sub-info { + grid-area: info; + font-weight: lighter; + font-size: 95%; + max-width: 615px; +} +.video-sub-info > span { + color: var(--text-primary); + font-weight: bold; +} +.description > a { + text-decoration: none; + color: var(--text-link); +} +.watch-page > .secondary { + width: 400px; +} +.resolutions-list { + width: 400px; + padding: 4px; + border: 1px solid var(--border-color); + margin: 0 16px; +} +.resolutions-list > div { + display: flex; + column-gap: 16px; +} +.recommended-list { + display: flex; + flex-direction: column; + flex-wrap: wrap; + row-gap: 16px; + padding: 16px; + width: 400px; +} +.recommended-list > .video { + display: grid; + grid-template-columns: 168px 1fr; + grid-template-rows: 94px; + grid-auto-flow: row; + grid-gap: 0 8px; + grid-template-areas: "thumbnail info"; + color: var(--text-secondary); +} +.recommended-list > .playlist { + display: grid; + grid-template-columns: 168px 1fr; + grid-template-rows: 94px; + grid-auto-flow: row; + grid-gap: 0 8px; + grid-template-areas: "thumbnail info"; + color: var(--text-secondary); +} +.rich-video-grid { + display: flex; + flex-wrap: wrap; + column-gap: 16px; + row-gap: 40px; + padding: 16px; +} +.rich-video-grid > .video { + display: grid; + grid-template-columns: 40px 240px; + grid-template-rows: 160px 52px; + grid-auto-flow: row; + grid-gap: 10px 0; + grid-template-areas: "thumbnail thumbnail" "avatar info"; + color: var(--text-secondary); +} +.rich-video-grid > .video > .avatar { + width: 40px; + height: 40px; +} +.video a { + text-decoration: none; + color: var(--text-secondary); +} +.video > .thumbnail { + grid-area: thumbnail; + background-color: var(--thumbnail-background); + 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 > .video-length { + font-size: smaller; + background-color: #0008; + color: #fff; + padding: 2px; + border-radius: 2px; +} +.video > .info { + grid-area: info; + font-size: small; +} +.video > .info > div > a > img { + width: 24px; + height: 24px; + border-radius: 50%; +} +.video > .info > .title { + color: var(--text-primary) !important; + font-weight: bold; + font-size: initial; + margin-bottom: 8px; +} +.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; + font-size: large; + padding-bottom: 8px; +} +.playlist-video > .index { + grid-area: index; + display: flex; + justify-content: center; + align-items: center; +} +.playlist a { + text-decoration: none; + color: var(--text-secondary); +} +.playlist > .thumbnail { + grid-area: thumbnail; + background-color: var(--thumbnail-background); + 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 > *:nth-child(1) { + 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: bold; + 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: var(--thumbnail-background); + height: 136px; + width: 136px; +} +.channel > .info { + grid-area: info; + font-size: small; + padding-top: 32px; +} +.channel > .info > .name { + color: var(--text-primary) !important; + font-weight: bold; + font-size: initial; + margin-bottom: 8px; +} +.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 { + max-width: 1200px; + margin: auto; + grid-template-columns: 80px max-content 1fr min-content; + grid-template-rows: 80px; + gap: 16px; + padding: 16px 0; +} +.channel-info-container > .channel-info > .subscribe-button { + margin: 20px 0; +} +.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 { + max-inline-size: 164ch; + display: flex; + flex-wrap: wrap; + column-gap: 2em; + row-gap: 40px; + padding: 32px; + padding-top: 34px; + justify-content: space-around; +} +.video-grid > .video { + text-decoration: none; + display: grid; + grid-template-columns: 280px; + grid-template-rows: 160px 52px; + grid-auto-flow: row; + grid-gap: 10px 0; + grid-template-areas: "thumbnail" "info"; + color: var(--text-secondary); +} +.video-grid > .avatar { + display: none; +} +.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; +} +.video-list { + max-width: 850px; + margin: auto; + display: flex; + flex-direction: column; + row-gap: 16px; + padding: 16px; +} +.video-list > .video { + text-decoration: none; + display: grid; + grid-template-columns: 280px; + grid-template-rows: 160px; + grid-auto-flow: row; + grid-gap: 0 16px; + grid-template-areas: "thumbnail info"; + color: var(--text-secondary); +} +.video-list > .playlist-video { + text-decoration: none; + display: grid; + grid-template-columns: 36px 160px 1fr; + grid-template-rows: 90px; + grid-auto-flow: row; + grid-gap: 0 16px; + grid-template-areas: "index thumbnail info"; + color: var(--text-secondary); + font-size: small; +} +.video-list > .playlist { + text-decoration: none; + display: grid; + grid-template-columns: 280px; + grid-template-rows: 160px; + 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: 280px 1fr max-content; + grid-template-rows: 160px; + grid-auto-flow: row; + grid-gap: 0 16px; + grid-template-areas: "thumbnail info subscribe-button"; + color: var(--text-secondary); +} +.video-list > .channel > .subscribe-button { + margin-top: 60px; +} +.video-list > .avatar { + display: none; +} +.video-list > .playlist > .info > div > ul { + display: block; + padding-left: 0; + list-style: none; +} +.video-list > .playlist > .info > div > ul > li > * { + color: var(--text-primary); + line-height: 24px; + height: 24px; + display: inline-block; +} +.video-list > .playlist > .info > div > ul > li:last-child > * { + color: var(--text-secondary); + text-transform: uppercase; +} +.playlist-page { + display: grid; + grid-auto-columns: 1fr; + grid-template-columns: 360px 1fr; + grid-template-rows: 1fr; + gap: 0 0; + grid-template-areas: "info content"; +} +.playlist-info > .thumbnail { + grid-area: info; + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + background-color: var(--thumbnail-background); + display: flex; + justify-content: center; + align-items: flex-end; + background-position-y: center; + background-size: cover; +} +.playlist-info > .thumbnail > a { + background-color: #0008; + color: #fff; + padding: 8px; + border-radius: 2px; + width: 100%; + text-align: center; +} +.playlist-info > .title { + font-size: x-large; + color: var(--text-primary); +} +.playlist-info { + background-color: var(--channel-contents-background); + padding: 16px; +} +.playlist-video-list { + grid-area: content; + max-width: 100%; + margin: 0; +} +.playlist-info > .info { + display: block; +} +.playlist-info > .description { + display: block; + padding: 16px 0; +} +.playlist-info > .channel-info > .subscribe-button { + margin-top: 4px; +} +.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: 72px; + color: var(--text-secondary); +} +.horizontal-channel-list > .channel > img { + width: 72px; + height: 72px; + border-radius: 50%; + background-color: var(--thumbnail-background); +} +.horizontal-channel-list > .channel > i { + font-size: 36px; + line-height: 72px; + text-align: center; + width: 72px; + height: 72px; + border-radius: 50%; + background-color: var(--thumbnail-background); +} +.login-container { + display: flex; + flex-direction: row; +} +@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; +} +.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; +} +.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: 40%; + 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: 4px; + 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; +} diff --git a/html/main.ejs b/html/main.ejs index 6a4cb338..9d559097 100644 --- a/html/main.ejs +++ b/html/main.ejs @@ -26,6 +26,7 @@ + @@ -204,21 +205,26 @@ border-radius: 8px;

-
- -See trending shorts owo~ - - +
+
+
+
+ See trending shorts owo~ +
+
- -
<% k.Explore.Videos.ItemSection[3].Shelf.Items.Video.forEach(x => { %> diff --git a/package.json b/package.json index 94e3eb52..23486998 100644 --- a/package.json +++ b/package.json @@ -24,9 +24,6 @@ "express-useragent": "^1.0.15", "js-sha512":"0.8.0" }, - "engines": { - "node": "16.x" - }, "repository": { "url": "https://github.com/ashpotter/poketube" },