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; min-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; } .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; } .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; } .searchbar .pure-form fieldset { padding: 0; } /* attract focus to the searchbar by adding a subtle transition */ .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; } } /* * Video "cards" (results/playlist/channel videos) */ .video-card-row { margin: 15px 0; } .flexible { display: flex; } .flex-left { flex: 1 1 100%; flex-wrap: wrap; } .flex-right { flex: 1 0 max-content; flex-wrap: nowrap; } p.channel-name { margin: 0; } p.video-data { margin: 0; font-weight: bold; font-size: 80%; } /* * 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); } } fieldset > select, span > select { color: rgba(49, 49, 51, 1); } .pure-control-group label { word-wrap: normal; } /* * 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 .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 .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; } /*With commit d9528f5 all contents of the page is now within a flexbox. However, the hr element is rendered improperly within one. See https://stackoverflow.com/a/34372979 for more info */ hr { margin: 10px 0 10px 0; } /* Description Expansion Styling*/ #descexpansionbutton { display: none } #descexpansionbutton ~ div { overflow: hidden; height: 8.3em; } #descexpansionbutton:checked ~ div { overflow: unset; height: 100%; } #descexpansionbutton ~ label { order: 1; margin-top: 20px; } /* Bidi (bidirectional text) support */ h1, h2, h3, h4, h5, p, #descriptionWrapper, #description-box { unicode-bidi: plaintext; text-align: start; } #descriptionWrapper { max-width: 600px; }