From 125ddaa8da8dad8f3e8eeb54f79a775b865c58bf Mon Sep 17 00:00:00 2001 From: James Taylor Date: Tue, 20 Oct 2020 15:38:00 -0700 Subject: Add setting to change font. Change default to arial Closes #33 --- youtube/static/shared.css | 336 ---------------------------------------------- 1 file changed, 336 deletions(-) delete mode 100644 youtube/static/shared.css (limited to 'youtube/static/shared.css') diff --git a/youtube/static/shared.css b/youtube/static/shared.css deleted file mode 100644 index 7dd16e2..0000000 --- a/youtube/static/shared.css +++ /dev/null @@ -1,336 +0,0 @@ -* { - box-sizing: border-box; -} - -h1, h2, h3, h4, h5, h6, div, button{ - margin:0; - padding:0; -} - -address{ - font-style:normal; -} - -html{ - font-family: "liberation serif", "times new roman", calibri, carlito, serif; -} - -body{ - margin:0; - padding: 0; - color:var(--text-color); - - - background-color:var(--background-color); - - min-height:100vh; - display: flex; - flex-direction: column; -} - - header{ - background-color:#333333; - height: 50px; - - display: flex; - justify-content: center; - } - - #home-link{ - align-self: center; - margin-left:10px; - color: #ffffff; - } - - - #site-search{ - max-width: 600px; - margin-left:10px; - display: flex; - flex-grow: 1; - } - - #site-search .search-box{ - align-self:center; - height:25px; - border:0; - - flex-grow: 1; - } - #site-search .search-button{ - align-self:center; - height:25px; - - border-style:solid; - border-width:1px; - } - #site-search .dropdown{ - margin-left:5px; - align-self:center; - height:25px; - } - #site-search .dropdown button{ - align-self:center; - height:25px; - - border-style:solid; - border-width:1px; - } - #site-search .css-sucks{ - width:0px; - height:0px; - } - #site-search .dropdown-content{ - grid-template-columns: auto auto; - white-space: nowrap; - } - #site-search .dropdown-content h3{ - grid-column:1 / span 2; - } - - #playlist-edit{ - margin-left: 10px; - align-self: center; - } - #local-playlists{ - margin-right:5px; - color: #ffffff; - } - #playlist-name-selection{ - } - #playlist-add-button{ - padding-left: 10px; - padding-right: 10px; - } - #item-selection-reset{ - padding-left: 10px; - padding-right: 10px; - } - - main{ - flex-grow: 1; - padding-bottom: 20px; - } - #message-box{ - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-style: outset; - padding: 20px; - background-color: var(--interface-color); - opacity: 0; - transition-property: opacity; - transition-duration: 0.3s; - } - - -.dropdown{ - z-index:1; -} - .dropdown-content{ - display:none; - background-color: var(--interface-color); - } - .dropdown:hover .dropdown-content{ - /* For some reason, if this is just grid, it will insist on being 0px wide just like its 0px by 0px parent */ - /* making it inline-grid happened to fix it */ - display:inline-grid; - } - -.item-list{ - display: grid; - grid-row-gap: 10px; - -} - - -.item-grid{ - display: flex; - flex-wrap: wrap; -} - .item-grid > .playlist-item-box{ - margin-right: 10px; - } - .item-grid > * { - margin-bottom: 10px; - } - .item-grid .horizontal-item-box .item{ - width:370px; - } - .item-grid .vertical-item-box .item{ - } - -.item-box{ - display: inline-flex; - flex-direction: row; - /* prevent overflow due to long titles with no spaces: - https://stackoverflow.com/a/43312314 */ - min-width: 0; -} -.vertical-item-box{ -} -.horizontal-item-box{ -} - .item{ - background-color:var(--interface-color); - text-decoration:none; - font-size: 0.8125rem; - color: #767676; - } - - .horizontal-item-box .item { - flex-grow: 1; - display: grid; - align-content: start; - grid-template-columns: auto 1fr; - grid-template-rows: auto auto auto auto 1fr; - /* prevent overflow due to long titles with no spaces: - https://stackoverflow.com/a/43312314 */ - min-width: 0; - } - .vertical-item-box .item{ - width: 168px; - } - .thumbnail-box{ - font-size: 0px; /* prevent newlines and blank space from creating gaps */ - position: relative; - display: block; - } - .horizontal-item-box .thumbnail-box{ - grid-row: 1 / span 5; - margin-right: 4px; - } - .no-description .thumbnail-box{ - width: 168px; - height:94px; - } - .has-description .thumbnail-box{ - width: 246px; - height:138px; - } - .video-item .thumbnail-info{ - position: absolute; - bottom: 2px; - right: 2px; - opacity: .8; - color: #ffffff; - font-size: 0.8125rem; - background-color: #000000; - } - .playlist-item .thumbnail-info{ - position: absolute; - right: 0px; - bottom: 0px; - height: 100%; - width: 50%; - text-align:center; - white-space: pre-line; - opacity: .8; - color: #cfcfcf; - font-size: 0.8125rem; - background-color: #000000; - } - .playlist-item .thumbnail-info span{ /* trick to vertically center the text */ - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - } - .thumbnail-img{ /* center it */ - margin: auto; - display: block; - max-height: 100%; - max-width: 100%; - } - .horizontal-item-box .thumbnail-img{ - height: 100%; - } - - .item .title{ - min-width: 0; - line-height:1.25em; - max-height:3.75em; - overflow-y: hidden; - overflow-wrap: break-word; - - color: var(--text-color); - font-size: 1rem; - font-weight: 500; - text-decoration:initial; - } - - .stats{ - list-style: none; - padding: 0px; - margin: 0px; - } - .horizontal-stats{ - max-height:2.4em; - overflow:hidden; - } - .horizontal-stats > li{ - display: inline; - } - - .horizontal-stats > li::after{ - content: " | "; - } - .horizontal-stats > li:last-child::after{ - content: ""; - } - - .vertical-stats{ - display: flex; - flex-direction: column; - } - .stats address{ - display: inline; - } - .vertical-stats li{ - max-height: 1.3em; - overflow: hidden; - } - - .item-checkbox{ - justify-self:start; - align-self:center; - height:30px; - width:30px; - min-width:30px; - margin: 0px; - } - - -.page-button-row{ - margin-top: 10px; - margin-bottom: 10px; - justify-self:center; - justify-content: center; - display: grid; - grid-auto-columns: 40px; - grid-auto-flow: column; - height: 40px; -} -.next-previous-button-row{ - margin: 10px 0px; - display: flex; - justify-self:center; - justify-content: center; - height: 40px; -} - .page-button{ - background-color: var(--interface-color); - border-style: outset; - border-width: 2px; - font-weight: bold; - text-align: center; - padding: 5px; - } - .next-page:nth-child(2){ /* only if there's also a previous page button */ - margin-left: 10px; - } -.sort-button{ - background-color: var(--interface-color); - padding: 2px; - justify-self: start; -} -- cgit v1.2.3