aboutsummaryrefslogtreecommitdiffstats
path: root/youtube/static/shared.css
diff options
context:
space:
mode:
Diffstat (limited to 'youtube/static/shared.css')
-rw-r--r--youtube/static/shared.css491
1 files changed, 205 insertions, 286 deletions
diff --git a/youtube/static/shared.css b/youtube/static/shared.css
index 848b8da..72d290a 100644
--- a/youtube/static/shared.css
+++ b/youtube/static/shared.css
@@ -7,93 +7,114 @@ h1, h2, h3, h4, h5, h6, div, button{
padding:0;
}
+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 */
@@ -101,281 +122,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;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 14:20:31 +0000