diff options
author | James Taylor <user234683@users.noreply.github.com> | 2019-09-06 14:23:20 -0700 |
---|---|---|
committer | James Taylor <user234683@users.noreply.github.com> | 2019-09-06 14:23:20 -0700 |
commit | ca49ab170fb44a91c2017078765fd67692f17e9f (patch) | |
tree | 0107bdf9bd712eac85993d712bc9b35ba774e4b0 /youtube/static/shared.css | |
parent | 0c22835dd214dc71e5cd085c5549ffe8dcf7f657 (diff) | |
parent | e9b16ef71fc25f12e26da79392fa91ae30aabe5d (diff) | |
download | yt-local-ca49ab170fb44a91c2017078765fd67692f17e9f.tar.lz yt-local-ca49ab170fb44a91c2017078765fd67692f17e9f.tar.xz yt-local-ca49ab170fb44a91c2017078765fd67692f17e9f.zip |
Merge branch 'layout'
Diffstat (limited to 'youtube/static/shared.css')
-rw-r--r-- | youtube/static/shared.css | 491 |
1 files changed, 205 insertions, 286 deletions
diff --git a/youtube/static/shared.css b/youtube/static/shared.css index a360972..a79e42b 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -4,93 +4,114 @@ h1, h2, h3, h4, h5, h6, div, button{ } +address{ + font-style:normal; +} body{ margin:0; padding: 0; - color:#222; + color:var(--text-color); - background-color:#cccccc; + background-color:var(--background-color); min-height:100vh; - - display:grid; - grid-template-rows: 50px 1fr; + display: flex; + flex-direction: column; } header{ background-color:#333333; + height: 50px; - grid-row: 1; - - display:grid; - grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); - } - - main{ - grid-row: 2; + display: flex; + justify-content: center; } -address{ - font-style:normal; -} - - - - #site-search{ - grid-column: 2; - display: grid; - grid-template-columns: 1fr auto auto; + #home-link{ + align-self: center; + margin-left:10px; + color: #ffffff; + } - } - #site-search .search-box{ - align-self:center; - height:25px; - border:0; - - grid-column: 1; + #site-search{ + max-width: 600px; + margin-left:10px; + display: flex; + flex-grow: 1; } - #site-search .search-button{ - grid-column: 2; - align-self:center; - height:25px; - border-style:solid; - border-width:1px; - } - #site-search .dropdown{ - margin-left:5px; - grid-column: 3; - align-self:center; - height:25px; - } - #site-search .dropdown button{ + #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 .css-sucks{ - width:0px; - height:0px; + #site-search .dropdown{ + margin-left:5px; + align-self:center; + height:25px; } - #site-search .dropdown-content{ - grid-template-columns: auto auto; - white-space: nowrap; + #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 h3{ - grid-column:1 / span 2; + #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; + } + .dropdown{ z-index:1; } .dropdown-content{ display:none; - background-color: #e9e9e9; + 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 */ @@ -98,281 +119,179 @@ address{ display:inline-grid; } - - -#header-right{ - grid-column:4; - - display:grid; - grid-template-columns:auto auto auto 1fr; - grid-template-rows: 1fr; - width: 540px; -} - #playlist-edit{ - display:contents; - } - #local-playlists{ - grid-column: 1; - grid-row:1; - align-self: center; - margin-right:5px; - color: #ffffff; - } - #playlist-name-selection{ - grid-column:2; - grid-row:1; - justify-self:start; - align-self: center; - } - #playlist-add-button{ - grid-column:3; - grid-row:1; - align-self: center; - padding-left: 10px; - padding-right: 10px; - } - #item-selection-reset{ - grid-column:4; - grid-row:1; - align-self: center; - justify-self:start; - padding-left: 10px; - padding-right: 10px; - } - - - .item-list{ display: grid; - grid-auto-rows: 138px; grid-row-gap: 10px; } - .item-list .video-thumbnail-box{ - width:246px; - } - .item-list .playlist-thumbnail-box{ - width:246px; - } .item-grid{ - display:grid; - grid-template-columns: repeat(auto-fill, 400px); - grid-auto-rows: 94px; - grid-row-gap: 10px; + display: flex; + flex-wrap: wrap; } - .item-grid .video-thumbnail-box{ - width:168px; + .item-grid > .playlist-item-box{ + margin-right: 10px; } - .item-grid .playlist-thumbnail-box{ - width:168px; + .item-grid > * { + margin-bottom: 10px; + } + .item-grid .horizontal-item-box .item{ + width:370px; + } + .item-grid .vertical-item-box .item{ } - - -.medium-item-box{ - - display:grid; - grid-template-columns: 1fr 30px; +.item-box{ + display: inline-flex; + flex-direction: row; } -.medium-item{ - background-color:#bcbcbc; - text-decoration:none; - font-size: 12px; - color: #767676; - - display: grid; - align-content: start; - grid-template-columns: auto 1fr auto; - grid-template-rows: auto auto auto auto auto 1fr; +.vertical-item-box{ } - .medium-item .title{ - grid-column:2 / span 2; - grid-row:1; - justify-self:start; - min-width: 0; - max-height:3.6em; - overflow:hidden; - - color: #333; - font-size: 16px; - font-weight: 500; - text-decoration:initial; - } - .medium-item address{ - display:inline; +.horizontal-item-box{ +} + .item{ + background-color:var(--interface-color); + text-decoration:none; + font-size: 12px; + color: #767676; } - /*.medium-item .views{ - grid-column: 3; - grid-row: 2; - justify-self:end; + + .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; } - .medium-item time{ - grid-column: 2; - grid-row: 3; - justify-self:start; - }*/ - .medium-item .stats{ - grid-column: 2 / span 2; - grid-row: 2; - max-height:2.4em; - overflow:hidden; + .vertical-item-box .item{ + width: 168px; } - .medium-item .stats > *::after{ - content: " | "; + .thumbnail-box{ + font-size: 0px; /* prevent newlines and blank space from creating gaps */ + position: relative; + display: block; } - .medium-item .stats > *:last-child::after{ - content: ""; + .horizontal-item-box .thumbnail-box{ + grid-row: 1 / span 5; + margin-right: 4px; } - - .medium-item .description{ - grid-column: 2 / span 2; - grid-row: 4; - } - .medium-item .badges{ - grid-column: 2 / span 2; - grid-row: 5; - } - /* thumbnail size */ - .medium-item img{ - /*height:138px; - width:246px;*/ - height:100%; - justify-self:center; - } - -.small-item-box{ - color: #767676; - font-size: 12px; + .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: 12px; + 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: 12px; + 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%; + } + .horizontal-item-box .thumbnail-img{ + height: 100%; + } - display:grid; - grid-template-columns: 1fr 30px; - grid-template-rows: 94px; -} + .item .title{ + min-width: 0; + max-height:3.6em; + overflow:hidden; -.small-item{ - background-color:#bcbcbc; - align-content: start; - text-decoration:none; - - display: grid; - grid-template-columns: 168px 1fr; - grid-column-gap: 5px; - grid-template-rows: auto auto auto 1fr; -} - .small-item .title{ - grid-column:2; - grid-row:1; - margin:0; + color: var(--text-color); + font-size: 16px; + font-weight: 500; + text-decoration:initial; + } - color: #333; - font-size: 16px; - font-weight: 500; - text-decoration:initial; - min-width: 0; - justify-self:start; + .stats{ + list-style: none; + padding: 0px; + margin: 0px; + } + .horizontal-stats{ + max-height:2.4em; + overflow:hidden; + } + .horizontal-stats > li{ + display: inline; + } - overflow:hidden; - max-height: 3.3em; - line-height: 1.1em; - } - .small-item address{ - grid-column: 2; - grid-row: 2; - justify-self: start; - } - - .small-item .views{ - grid-column: 2; - grid-row: 3; - justify-self:start; - } - /* thumbnail size */ - .small-item img{ - /*height:94px; - width:168px;*/ - height:100%; - justify-self:center; - } - -.item-checkbox{ - justify-self:start; - align-self:center; - height:30px; - width:30px; - - grid-column: 2; -} + .horizontal-stats > li::after{ + content: " | "; + } + .horizontal-stats > li:last-child::after{ + content: ""; + } -/* ---Thumbnails for videos---- */ -.video-thumbnail-box{ - max-height:100%; + .vertical-stats{ + display: flex; + flex-direction: column; + } + .stats address{ + display: inline; + } + .vertical-stats li{ + max-height: 1.3em; + overflow: hidden; + } - grid-column:1; - grid-row:1 / span 6; - - display:grid; - grid-template-columns: 1fr 0fr; -} - .video-thumbnail-img{ - grid-column:1 / span 2; - grid-row:1; - } - .video-duration{ - grid-column: 2; - grid-row: 1; - align-self: end; - opacity: .8; - color: #ffffff; - font-size: 12px; - background-color: #000000; + .item-checkbox{ + justify-self:start; + align-self:center; + height:30px; + width:30px; + min-width:30px; + margin: 0px; } -/* ---Thumbnails for playlists---- */ -.playlist-thumbnail-box{ - max-height:100%; - - grid-column:1; - grid-row:1 / span 6; - - display:grid; - grid-template-columns: 3fr 2fr; -} - .playlist-thumbnail-img{ - grid-column:1 / span 2; - grid-row:1; - } - .playlist-thumbnail-info{ - grid-column:2; - grid-row:1; - - display: grid; - align-items:center; - - text-align:center; - white-space: pre-line; - opacity: .8; - color: #cfcfcf; - background-color: #000000; - } .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; } .page-button{ - background-color: #e9e9e9; + background-color: var(--interface-color); border-style: outset; border-width: 2px; font-weight: bold; text-align: center; } .sort-button{ - background-color: #d0d0d0; + background-color: var(--interface-color); padding: 2px; justify-self: start; } |