@font-face { font-family: "Sen-Bold"; src: url("/font/Sen-Bold.woff"); font-family: "Sen-Bold"; } @font-face { font-family: "Sen-Regular"; src: url("/font/Sen-Regular.woff"); font-family: "Sen-Regular"; } * { margin: 0; padding: 0; } html { height: 100%; scrollbar-color: var(--accent-font-dark) #0000; } ::-webkit-scrollbar { width: 7px; } ::-webkit-scrollbar-thumb { background: var(--accent-font-dark); border-radius: 10px; } body { background-color: var(--main-bg); min-height: 100%; display: grid; grid-template-rows: 1fr auto; } a { font-family: Sen-Regular, sans-serif; text-decoration: none; color: var(--accent-font-light); } h1 { font-family: Sen-Bold, sans-serif; font-size: 2.3em; color: var(--accent-font-light); } h2 { font-size: 1.2em; margin-bottom: 10px; font-family: Sen-Bold, sans-serif; color: var(--accent-font-dark); } h3 { font-size: 1.1em; margin-bottom: 7px; font-family: Sen-Regular, sans-serif; color: var(--accent-font-light); } h4 { font-size: 0.7em; margin-bottom: 7px; font-family: Sen-Regular, sans-serif; color: var(--accent-font-light); } p, i, li { font-family: Sen-Regular, sans-serif; margin-bottom: 10px; color: var(--main-font); } ul { margin-left: 20px; } td, th, span, label { font-family: Sen-Regular, sans-serif; color: var(--main-font); } select, input { padding: 5px; margin: 5px; border-radius: 0; color: var(--main-bg); background-color: var(--accent-font-light); } select { border: none; } input { border: solid 1px var(--main-font); } textarea { width: 100%; } button { border-radius: 0; padding: 5px 13px; border: none; cursor: pointer; background-color: var(--accent-font-dark); color: #ffffff; } button:hover { background-color: var(--accent-font-light); transform: scale(1.05); color: var(--main-bg); } .button-box { padding: 5px 0; } .unsubscribe { background-color: var(--accent-font-light); } .unsubscribe:hover { background-color: var(--accent-font-dark); } .boxed-content { max-width: 1000px; width: 80%; margin: 0 auto; } .boxed-content.boxed-4 { max-width: 1200px; width: 80%; } .boxed-content.boxed-5, .boxed-content.boxed-6, .boxed-content.boxed-7 { max-width: unset; width: 85%; } .round-img img { border-radius: 50%; } .settings-current { color: var(--accent-font-light); } .top-banner { text-align: center; } .top-banner img { width: 100%; max-width: 700px; } .footer { margin: 0; padding: 20px 0; background-color: var(--accent-font-dark); grid-row-start: 2; grid-row-end: 3; } .footer a { text-decoration: underline; } /* toggle on-off */ .toggle { display: flex; align-items: center; } .toggleBox > input[type="checkbox"] { position: relative; width: 70px; height: 30px; background-color: var(--accent-font-light); border-color: var(--accent-font-light); appearance: none; border-radius: 15px; transition: 0.4s; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); cursor: pointer; } .toggleBox > input:checked[type="checkbox"] { background-color: var(--accent-font-dark); border-color: var(--accent-font-dark); } .toggleBox > input[type="checkbox"]::before { z-index: 2; position: absolute; content: ""; left: 0; top: 0; width: 30px; height: 30px; background-color: white; border-radius: 50%; transform: scale(1.1); transition: 0.4s; } .toggleBox > input:checked[type="checkbox"]::before { left: 40px; } .toggleBox { margin-left: 10px; position: relative; display: inline; } .toggleBox > label { position: absolute; color: var(--main-font); pointer-events: none; } .toggleBox > .onbtn { right: 70%; top: 45%; transform: translate(50%, -50%); font-family: Sen-Regular, sans-serif; } .toggleBox > .ofbtn { left: 37%; top: 45%; transform: translate(50%, -50%); font-family: Sen-Regular, sans-serif; color: var(--main-font); } /* delete button */ .delete-confirm { display: none; } .delete-confirm button { margin: 3px 0; } .danger-button { background-color: var(--highlight-error); } .danger-button:hover { background-color: var(--highlight-error-light); } /* navigation */ .top-nav { display: block; padding: 5px 0; position: relative; } .nav-items { width: 100%; display: flex; justify-content: center; } .nav-item { font-size: 1.3em; padding: 10px 20px; margin: 0 10px; border-bottom: 2px solid; color: var(--accent-font-dark); } .nav-icons { width: auto; display: inline-flex; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); } .nav-icons img { width: 40px; padding: 0 5px; filter: var(--img-filter); } #castbutton { float: right; width: 40px; padding: 0 5px; --disconnected-color: var(--accent-font-dark); --connected-color: var(--accent-font-light); } .alert-hover:hover { filter: var(--img-filter-error); } /* top of page */ .title-bar { padding-top: 30px; } .sort { display: flex; flex-wrap: wrap; align-items: center; } .padding-box { padding: 30px 0; } .two-col { display: flex; } .two-col > div { width: 50%; } .view-controls { display: grid; grid-template-columns: 1fr auto auto; border-bottom: 2px solid; border-color: var(--accent-font-dark); margin: 15px 0; } .view-icons, .grid-count { display: flex; justify-content: end; align-items: center; } .view-icons img { width: 30px; margin: 5px 10px; cursor: pointer; filter: var(--img-filter); } .grid-count img { width: 15px; margin: 5px; cursor: pointer; filter: var(--img-filter); } #hidden-form { display: none; } #hidden-form button { margin-right: 1rem; } #text-reveal { height: 0; overflow: hidden; } #text-expand { overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } /* video player */ .player-wrapper { background-color: var(--highlight-bg); margin: 20px 0; } .video-player { display: grid; align-content: space-evenly; height: 100vh; position: relative; /* needed for modal */ } #notifications { position: relative; } .notifications { text-align: center; width: 80%; margin: auto; } .sponsorblock { text-align: center; width: 80%; margin: auto; } .video-player video, .video-main video { max-height: 80vh; width: 90%; max-width: 1500px; margin: 0 auto; display: block; } .player-title img { width: 30px; margin: 10px 10px 10px 0; } /* fix for safari full screen not scaling full */ video:-webkit-full-screen { max-height: unset !important; max-width: unset !important; } /* video list */ .video-list { display: grid; grid-gap: 1rem; margin-top: 1rem; } .video-list.grid.grid-3 { grid-template-columns: 1fr 1fr 1fr; } .video-list.grid.grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .video-list.grid.grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .video-list.grid.grid-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .video-list.grid.grid-7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .video-list.list { grid-template-columns: unset; } .video-item { overflow: hidden; } .video-item:hover .video-tags { opacity: 1; } .video-item.list { display: grid; grid-template-columns: 26% auto; background-color: var(--highlight-bg); align-items: center; } .video-progress-bar, .notification-progress-bar { position: absolute; background-color: var(--accent-font-dark); height: 7px; left: 0; bottom: 3px; } .video-thumb img { width: 100%; position: relative; } .video-tags { position: absolute; top: 5px; left: 0; padding: 5px; opacity: 0; transition: 300ms ease-in-out; } .video-tags span { background-color: var(--accent-font-light); padding: 5px; } .video-play img { width: 40px; filter: var(--img-filter); } .video-thumb-wrap { position: relative; } .video-thumb-wrap:hover > .video-play { opacity: 1; padding: 15px; } .video-play { opacity: 0; transition: all 0.3s ease-in-out; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); background-color: var(--highlight-bg); border-radius: 50%; padding: 8px; } .video-desc.grid { padding: 10px; height: 100%; background-color: var(--highlight-bg); } .video-desc.list { padding: 10px; height: 100%; display: flex; flex-wrap: wrap; align-content: center; } .video-desc > div { width: 100%; } .video-desc img { width: 20px; margin-right: 10px; } .video-desc a { text-decoration: none; text-align: left; } .video-desc h3, .player-title h3 { font-size: 0.9em; text-transform: uppercase; } .player-stats { float: right; display: flex; align-items: center; margin-top: 10px; } .player-stats span { margin: 0 5px; } .video-desc-player { margin-bottom: 8px; display: flex; align-items: center; } .watch-button, .close-button { cursor: pointer; filter: var(--img-filter); } .video-more { text-decoration: underline; text-align: right; } /* pagination */ .pagination { padding: 30px 0; margin-left: auto; margin-right: auto; text-align: center; } .pagination-item { padding: 5px; border: 1px solid; } /* info box */ .title-split { display: grid; grid-template-columns: 1fr 1fr; } .title-split img { width: 40px; filter: var(--img-filter); cursor: pointer; margin: 0 10px; } .title-split-form { padding-top: 30px; display: flex; } .info-box { display: grid; grid-gap: 1rem; margin-top: 1rem; } .description-box, .comments-section { margin-top: 1rem; padding: 15px; background-color: var(--highlight-bg); } .info-box-3 { grid-template-columns: 1fr 1fr 1fr; } .info-box-2 { grid-template-columns: 1fr 1fr; } .info-box img { width: 80px; margin: 0 15px; } .info-box-item { display: flex; flex-wrap: wrap; align-items: center; padding: 15px; background-color: var(--highlight-bg); } .info-box-item p { width: 100%; } .description-text { width: 100%; } .description-text br { margin-bottom: 10px; } .overwrite-form { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .overwrite-form button { width: 200px; } .overwrite-form-item { margin-bottom: 1rem; } .overwrite-form-item input { width: 90%; } .hidden-overwrite { display: none; } /* login */ .login-page { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; align-content: center; } .login-page > * { width: 100%; } .login-page img { width: 100%; max-width: 200px; max-height: 200px; margin-bottom: 40px; } .login-page form { margin: 30px 0; } .login-page input { min-width: 200px; } #id_remember_me { min-width: unset; } .login-page button, .login-page .danger-zone { width: 210px; margin-top: 5px; } .login-links a { text-decoration: underline; margin: 30px 0; padding: 20px; } .footer-colors { grid-row-start: 2; grid-row-end: 3; display: flex; } .footer-colors div { padding: 20px 0; width: 33.33%; } .col-1 { background-color: var(--highlight-bg); } .col-2 { background-color: var(--accent-font-dark); } .col-3 { background-color: var(--accent-font-light); } /* video page */ .video-main { margin: 1rem 0; position: relative; /* needed for modal */ } .video-modal { position: absolute; z-index: 1; top: 20%; width: 100%; text-align: center; } .video-modal-text { background: rgba(0, 0, 0, 0.5); color: #eeeeee; font-size: 1.3em; display: none; } .video-main video { max-height: 70vh; margin-bottom: 1rem; } .video-info-watched { display: flex; align-items: center; } .video-info-watched img { width: 20px; margin-left: 5px; } .thumb-icon { display: flex; } .video-tag-box { display: flex; flex-wrap: wrap; justify-content: center; } .video-tag { padding: 5px 10px; margin: 5px; border: 1px solid var(--accent-font-light); } .thumb-icon img, .rating-stars img { width: 20px; margin: 0 5px; filter: var(--img-filter); } .dislike { transform: rotate(180deg); } .playlist-wrap { background-color: var(--highlight-bg); margin: 1rem 0; padding: 1rem; } .playlist-wrap > a > h3 { text-align: center; } .playlist-nav { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 10px; } .playlist-nav-item { display: flex; justify-content: space-between; } .playlist-nav-item img { width: 200px; } .playlist-desc { padding: 5px; width: 100%; } .comment-box { padding-bottom: 1rem; overflow: hidden; } .comment-box h3 { line-break: anywhere; } .comments-replies { display: none; padding-left: 1rem; border-left: 1px solid var(--accent-font-light); margin-top: 1rem; } .comment-highlight { background-color: var(--main-font); padding: 3px; color: var(--accent-font-dark); font-family: Sen-bold, sans-serif; width: fit-content; } .comment-meta { display: flex; } .space-carrot { margin: 0 5px; } .comment-like img { width: 20px; margin-left: 5px; filter: var(--img-filter-error); } /* multi search page */ .multi-search-box { padding-right: 20px; } .multi-search-box input { width: 100%; } .multi-search-result, #multi-search-results-placeholder { padding: 1rem 0; } #multi-search-results-placeholder span { font-family: monospace; color: var(--accent-font-dark); background-color: var(--highlight-bg); } #multi-search-results-placeholder span.value { color: var(--accent-font-light); } #multi-search-results-placeholder ul { margin-top: 10px; } /* channel overview page */ .channel-list.list { display: block; } .channel-list.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } .channel-item.list { padding-bottom: 1rem; } .channel-item.grid > .info-box { display: block; } .channel-banner img { margin-top: 1rem; width: 100%; } .channel-banner.grid { overflow: hidden; } .channel-banner.list img { width: 100%; } .channel-banner.grid img { width: 250%; transform: translateX(-30%); } .info-box-item.channel-nav { justify-content: center; } .info-box-item.channel-nav a { padding: 0 1rem; } .info-box-item.channel-nav a:hover { text-decoration: underline; } /* playlist overview page */ .playlist-list.list { display: grid; grid-template-columns: unset; gap: 1rem; } .playlist-list.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } .playlist-item { overflow: hidden; } .playlist-item.list { display: flex; } .playlist-thumbnail img { width: 100%; } .playlist-desc.grid { padding: 10px; height: 100%; background-color: var(--highlight-bg); } .playlist-desc.list { width: 100%; padding: 10px; height: unset; background-color: var(--highlight-bg); display: flex; flex-wrap: wrap; align-content: center; } .playlist-desc.list > a, .playlist-desc.list > p { width: 100%; } /* download page */ .icon-text { background-color: var(--highlight-bg); text-align: center; padding: 15px; } .icon-text img { filter: var(--img-filter); cursor: pointer; } .task-control-icons { display: flex; justify-content: center; } .task-control-icons img { width: 30px; cursor: pointer; margin: 5px; } #stop-icon { filter: var(--img-filter); } #kill-icon { filter: var(--img-filter-error); } .title-split { display: flex; justify-content: space-between; } /* status message */ .notification { position: relative; background-color: var(--highlight-bg); text-align: center; padding: 30px 0 15px 0; margin: 1rem 0; } .notification.info { background-color: var(--highlight-bg); } .notification.error { background-color: var(--highlight-error); } .notification.error h3 { color: #fff; } /* settings */ .settings-group { background-color: var(--highlight-bg); padding: 20px; margin: 20px 0; } .settings-item { margin-top: 25px; } .settings-item input { min-width: 300px; } .danger-zone { background-color: var(--highlight-error); color: #fff; padding: 3px; } .backup-grid-row { display: grid; grid-template-columns: 10% 10% 10% auto; align-items: center; padding: 5px 10px; border-bottom: solid 1px; border-color: var(--main-font); } .backup-grid-row > span { margin-left: 10px; } /* about */ .about-section { padding: 20px 0; } .about-section ol { margin-left: 20px; } .about-section ul { margin-top: 15px; } .about-section li { margin-bottom: 10px; } .about-icon img { margin-left: 5px; width: 20px; cursor: unset; } /* animation */ .rotate-img { animation: rotation 4s infinite linear; } .bounce-img { animation: bounce 1.5s infinite ease-in-out alternate; } .pulse-img { animation: pulse 1.5s infinite ease-in-out alternate; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @keyframes bounce { 0% { transform: translateY(-5%); } 100% { transform: translateY(5%); scale: 1.15; } } @keyframes pulse { 0% { scale: 1; } 100% { scale: 1.15; } } /* tablet */ @media screen and (max-width: 1000px), screen and (max-height: 850px) { .boxed-content, .boxed-content.boxed-4, .boxed-content.boxed-5, .boxed-content.boxed-6, .boxed-content.boxed-7 { width: 90%; } .video-list.grid.grid-3, .video-list.grid.grid-4, .video-list.grid.grid-5, .video-list.grid.grid-6, .video-list.grid.grid-7, .channel-list.grid, .playlist-list.grid { grid-template-columns: 1fr 1fr; } .video-item.list, .playlist-item.list { display: grid; grid-template-columns: 35% auto; } .two-col { display: block; } .two-col > div { width: 100%; } .top-nav { flex-wrap: wrap-reverse; display: flex; } .nav-icons { width: 100%; justify-content: center; position: unset; transform: unset; } .grid-count { display: none; } .video-player { height: unset; padding: 20px 0; } .video-player video { width: 90%; } } /* phone */ @media screen and (max-width: 600px) { * { word-wrap: anywhere; } .video-list.grid.grid-3, .video-list.grid.grid-4, .video-list.grid.grid-5, .video-list.grid.grid-6, .video-list.grid.grid-7, .channel-list.grid, .video-item.list, .playlist-list.list, .playlist-list.grid, .info-box-2, .info-box-3, .overwrite-form { grid-template-columns: 1fr; } .playlist-item.list { display: block; } .video-desc.grid { height: unset; display: flex; flex-wrap: wrap-reverse; } .boxed-content { width: 95%; } .footer { text-align: center; } .footer .boxed-content span { width: 100%; display: block; } .toggle { flex-wrap: wrap; } .nav-items { display: grid; grid-template-columns: 1fr 1fr; } .nav-item { padding: 5px 0; margin: 15px; text-align: center; } .view-controls.three { grid-template-columns: unset; justify-content: center; } .sort { display: block; } .sort select { margin: unset; } .description-box { display: block; } .backup-grid-row { display: flex; flex-wrap: wrap; padding: 10px 0; justify-content: center; } .backup-grid-row span { padding: 5px 0; } .playlist-nav { display: block; grid-template-columns: unset; } .playlist-nav-item { display: block; justify-content: unset; } .playlist-nav-item img { width: 100%; } }