Merge branch 'layout'

5 files changed, 246 insertions, 289 deletions

diff --git a/youtube/static/comments.css b/youtube/static/comments.css
index 4cec3e1..85f0cc1 100644
--- a/youtube/static/comments.css
+++ b/youtube/static/comments.css
@@ -69,7 +69,7 @@
     display:grid;
     grid-template-columns: auto auto 100px 1fr;
     grid-template-rows: 0fr 0fr 0fr 0fr;
-    background-color: #dadada;
+    background-color: var(--interface-color);
     justify-content: start;
 }
 
@@ -102,8 +102,6 @@
     grid-column: 3;
     grid-row: 1;
     white-space: nowrap;
-    color: black;
-
 }
 
 
@@ -126,4 +124,5 @@
 .more-comments{
     justify-self:center;
     margin-top:10px;
+    margin-bottom: 10px;
 }
diff --git a/youtube/static/dark_theme.css b/youtube/static/dark_theme.css
new file mode 100644
index 0000000..4f302cb
--- /dev/null
+++ b/youtube/static/dark_theme.css
@@ -0,0 +1,21 @@
+body{
+    --interface-color: #333333;
+    --text-color: #cccccc;
+    --background-color: #000000;
+}
+
+a:link {
+    color: #22aaff;
+}
+
+a:visited {
+    color: ##7755ff;
+}
+
+a:not([href]){
+    color: var(--text-color);
+}
+
+.comment .permalink{
+    color: #ffffff;
+}
diff --git a/youtube/static/gray_theme.css b/youtube/static/gray_theme.css
new file mode 100644
index 0000000..69cc849
--- /dev/null
+++ b/youtube/static/gray_theme.css
@@ -0,0 +1,9 @@
+body{
+    --interface-color: #dadada;
+    --text-color: #222222;
+    --background-color: #bcbcbc;
+}
+
+.comment .permalink{
+    color: #000000;
+}
diff --git a/youtube/static/light_theme.css b/youtube/static/light_theme.css
new file mode 100644
index 0000000..05697b9
--- /dev/null
+++ b/youtube/static/light_theme.css
@@ -0,0 +1,9 @@
+body{
+    --interface-color: #ffffff;
+    --text-color: #222222;
+    --background-color: #f8f8f8;
+}
+
+.comment .permalink{
+    color: #000000;
+}
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;
 }