html, body { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } #contents { display: flex; flex-direction: column; height: 100vh; } .deleted { background-color: rgb(255, 0, 0, 0.5); } .channel-profile > * { font-size: 1.17em; font-weight: bold; vertical-align: middle; } .channel-profile > img { width: 48px; height: auto; } body a.channel-owner { background-color: #008bec; color: #fff; border-radius: 9px; padding: 1px 6px; } .creator-heart-container { display: inline-block; padding: 0px 7px 6px 0px; margin: 0px -7px -4px 0px; } .creator-heart { position: relative; width: 16px; height: 16px; border: 2px none; } .creator-heart-background-hearted { width: 16px; height: 16px; padding: 0px; position: relative; } .creator-heart-small-hearted { position: absolute; right: -7px; bottom: -4px; } .creator-heart-small-container { position: relative; width: 13px; height: 13px; color: rgb(255, 0, 0); } .feed-menu { display: flex; justify-content: center; flex-wrap: wrap; } .feed-menu-item { text-align: center; } @media screen and (max-width: 640px) { .feed-menu-item { flex: 0 0 40%; } } .h-box { padding-left: 1em; padding-right: 1em; } .v-box { padding-top: 1em; padding-bottom: 1em; } div { overflow-wrap: break-word; word-wrap: break-word; } .loading { display: inline-block; animation: spin 2s linear infinite; } .playlist-restricted { height: 20em; padding-right: 10px; } body a.pure-button { color: rgba(0,0,0,.8); } button.pure-button-primary, body a.pure-button-primary, .channel-owner:hover { background-color: #a0a0a0; color: rgba(35, 35, 35, 1); } button.pure-button-primary:hover, body a.pure-button-primary:hover { background-color: rgba(0, 182, 240, 1); color: #fff; } div.thumbnail { padding: 28.125%; position: relative; box-sizing: border-box; } img.thumbnail { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; } .length { z-index: 100; position: absolute; background-color: rgba(35, 35, 35, 0.75); color: #fff; border-radius: 2px; padding: 2px; font-size: 16px; right: 0.25em; bottom: -0.75em; } .watched { z-index: 100; position: absolute; background-color: rgba(35, 35, 35, 0.75); color: #fff; border-radius: 2px; padding: 4px 8px 4px 8px; font-size: 16px; left: 0.2em; top: -0.7em; } /* * Navbar */ .navbar { margin: 1em 0; display: flex; /* this is also defined in framework, but in case of future changes */ align-items: center; justify-content: space-between; } .navbar > div { flex: 1; } .navbar > .searchbar { flex-grow: 2; /* take double the space of the other items */ } .navbar a { padding: 0; /* this way it will stay aligned with content under */ } .navbar .index-link { font-weight: bold; display: inline; } .navbar > .searchbar .pure-form input[type="search"] { margin-bottom: 1px; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid #ccc; border-radius: 0; padding: initial 0; box-shadow: none; -webkit-appearance: none; } /* https://stackoverflow.com/a/55170420 */ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 14px; width: 14px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC); background-size: 14px; } .navbar > .searchbar .pure-form fieldset { padding: 0; } /* attract focus to the searchbar by adding a subtle transition */ .navbar > .searchbar .pure-form input[type="search"]:focus { margin-bottom: 0px; border-bottom: 2px solid #aaa; } .user-field { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .user-field div { width: initial; } .user-field div:not(:last-child) { margin-right: 1em; } @media only screen and (max-aspect-ratio: 16/9) { .player-dimensions.vjs-fluid { padding-top: 46.86% !important; } #player-container { padding-bottom: 46.86% !important; } } @media screen and (max-width: 767px) { .navbar { flex-direction: column; } .navbar > div { display: flex; justify-content: center; } .navbar > div:not(:last-child) { margin-bottom: 1em; } .navbar > .searchbar > form { width: 60%; } h1 { font-size: 1.25em; margin: 0.42em 0; } } @media screen and (max-width: 320px) { .navbar > .searchbar > form { width: 100%; margin: 0 1em; } } /* * Footer */ footer { color: #919191; margin-top: auto; padding: 1.5em 0; text-align: center; max-height: 30vh; } footer a { color: #919191 !important; text-decoration: underline; } /* keyframes */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Control Bar */ @media screen and (max-width: 640px) { .video-js .vjs-control-bar, .vjs-menu-button-popup .vjs-menu .vjs-menu-content { overflow-x: scroll; } } ul.vjs-menu-content::-webkit-scrollbar { display: none; } .vjs-user-inactive { cursor: none; } .video-js .vjs-text-track-display > div > div > div { background-color: rgba(0, 0, 0, 0.75) !important; border-radius: 9px !important; padding: 5px !important; } .vjs-play-control, .vjs-volume-panel, .vjs-current-time, .vjs-time-control, .vjs-duration, .vjs-progress-control, .vjs-remaining-time { order: 1; } .vjs-captions-button { order: 2; } .vjs-quality-selector, .video-js .vjs-http-source-selector { order: 3; } .vjs-playback-rate { order: 4; } .vjs-share-control { order: 5; } .vjs-fullscreen-control { order: 6; } .vjs-playback-rate > .vjs-menu { width: 50px; } .vjs-control-bar { display: flex; flex-direction: row; scrollbar-width: none; } .vjs-control-bar::-webkit-scrollbar { display: none; } .video-js .vjs-icon-cog { font-size: 18px; } .video-js .vjs-control-bar, .vjs-menu-button-popup .vjs-menu .vjs-menu-content { background-color: rgba(35, 35, 35, 0.75); } .vjs-menu li.vjs-menu-item:focus, .vjs-menu li.vjs-menu-item:hover { background-color: rgba(255, 255, 255, 0.75); color: rgba(49, 49, 51, 0.75); } .vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover { background-color: rgba(0, 182, 240, 0.75); } /* Progress Bar */ .video-js .vjs-slider { background-color: rgba(15, 15, 15, 0.5); } fieldset > select, span > select { color: rgba(49, 49, 51, 1); } .video-js .vjs-load-progress, .video-js .vjs-load-progress div { background: rgba(87, 87, 88, 1); } .video-js .vjs-slider:hover, .video-js button:hover { color: rgba(0, 182, 240, 1); } .video-js .vjs-play-progress { background-color: rgba(0, 182, 240, 1); } /* Overlay */ .video-js .vjs-overlay { background-color: rgba(35, 35, 35, 0.75); color: rgba(255, 255, 255, 1); } /* ProgressBar marker */ .vjs-marker { background-color: rgba(255, 255, 255, 1); z-index: 0; } /* Big "Play" Button */ .video-js .vjs-big-play-button { background-color: rgba(35, 35, 35, 0.5); } .video-js:hover .vjs-big-play-button { background-color: rgba(35, 35, 35, 0.75); } .video-js .vjs-current-time, .video-js .vjs-time-divider, .video-js .vjs-duration { display: block; } .video-js .vjs-time-divider { min-width: 0px; padding-left: 0px; padding-right: 0px; } .video-js .vjs-poster { background-size: cover; object-fit: cover; } .player-dimensions.vjs-fluid { padding-top: 82vh; } video.video-js { position: absolute; height: 100%; } #player-container { position: relative; padding-bottom: 82vh; height: 0; } .pure-control-group label { word-wrap: normal; } .video-js.player-style-invidious { /* This is already the default */ } .video-js.player-style-youtube .vjs-control-bar { display: flex; flex-direction: row; } .video-js.player-style-youtube .vjs-big-play-button { /* Styles copied from video-js.min.css, definition of .vjs-big-play-centered .vjs-big-play-button */ top: 50%; left: 50%; margin-top: -0.81666em; margin-left: -1.5em; } /* * Light theme */ .light-theme a:hover, .light-theme a:active, .light-theme summary:hover { color: #075A9E !important; } .light-theme a.pure-button-primary:hover { color: #fff !important; } .light-theme a { color: #335d7a; text-decoration: none; } /* All links that do not fit with the default color goes here */ .light-theme a:not([data-id]) > .icon, .light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"], .light-theme .playlist-restricted > ol > li > a { color: #303030; } .light-theme .pure-menu-heading { color: #565d64; } @media (prefers-color-scheme: light) { .no-theme a:hover, .no-theme a:active, .no-theme summary:hover { color: #075A9E !important; } .no-theme a.pure-button-primary:hover { color: #fff !important; } .no-theme a { color: #335d7a; text-decoration: none; } /* All links that do not fit with the default color goes here */ .no-theme a:not([data-id]) > .icon, .no-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"], .no-theme .playlist-restricted > ol > li > a { color: #303030; } .light-theme .pure-menu-heading { color: #565d64; } } /* * Dark theme */ .dark-theme a:hover, .dark-theme a:active, .dark-theme summary:hover { color: rgb(0, 182, 240); } .dark-theme a { color: #a0a0a0; text-decoration: none; } body.dark-theme { background-color: rgba(35, 35, 35, 1); color: #f0f0f0; } .dark-theme .pure-form legend { color: #f0f0f0; } .dark-theme .pure-menu-heading { color: #f0f0f0; } .dark-theme input, .dark-theme select, .dark-theme textarea { color: rgba(35, 35, 35, 1); } .dark-theme .pure-form input[type="file"] { color: #f0f0f0; } .dark-theme .navbar > .searchbar input { background-color: inherit; color: inherit; } @media (prefers-color-scheme: dark) { .no-theme a:hover, .no-theme a:active { color: rgb(0, 182, 240); } .no-theme a { color: #a0a0a0; text-decoration: none; } body.no-theme { background-color: rgba(35, 35, 35, 1); color: #f0f0f0; } .no-theme .pure-form legend { color: #f0f0f0; } .no-theme .pure-menu-heading { color: #f0f0f0; } .no-theme input, .no-theme select, .no-theme textarea { color: rgba(35, 35, 35, 1); } .no-theme .pure-form input[type="file"] { color: #f0f0f0; } .no-theme .navbar > .searchbar input { background-color: inherit; color: inherit; } } #filters { display: inline; margin-top: 15px; } #filters > div { display: inline-block; } #filters > summary { display: block; margin-bottom: 15px; } #filters > summary::before { content: "[ + ]"; font-size: 1.5em; } #filters[open] > summary::before { content: "[ - ]"; font-size: 1.5em; }