diff options
Diffstat (limited to 'youtube/templates/shared.css')
| -rw-r--r-- | youtube/templates/shared.css | 336 |
1 files changed, 336 insertions, 0 deletions
diff --git a/youtube/templates/shared.css b/youtube/templates/shared.css new file mode 100644 index 0000000..141465a --- /dev/null +++ b/youtube/templates/shared.css @@ -0,0 +1,336 @@ +* { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6, div, button{ + margin:0; + padding:0; +} + +address{ + font-style:normal; +} + +html{ + font-family: {{ font_family }}; +} + +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; +} |