Convert watch page to flask framework

1 files changed, 0 insertions, 372 deletions

diff --git a/youtube/shared.css b/youtube/shared.css
deleted file mode 100644
index 1b25d7f..0000000
--- a/youtube/shared.css
+++ /dev/null
@@ -1,372 +0,0 @@
-h1, h2, h3, h4, h5, h6, div, button{
-    margin:0;
-    padding:0;
-    
-}
-
-
-body{
-    margin:0;
-    padding: 0;
-    color:#222;
-    
-    
-    background-color:#cccccc;
-    
-    min-height:100vh;
-    
-    display:grid;
-    grid-template-rows: 50px 1fr;
-}
-
-    header{
-        background-color:#333333;
-
-        grid-row: 1;
-
-        display:grid;
-        grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
-    }
-
-    main{
-        grid-row: 2;
-    }
-
-address{
-    font-style:normal;
-}
-
-
-
-    #site-search{
-        grid-column: 2;
-        display: grid;
-        grid-template-columns: 1fr auto auto;
-
-    }
-
-        #site-search .search-box{
-            align-self:center;
-            height:25px;
-            border:0;
-            
-            grid-column: 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{
-                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;
-                    }
-
-.dropdown{
-    z-index:1;
-}
-    .dropdown-content{
-        display:none;
-        background-color: #e9e9e9;
-    }
-    .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;
-    }
-
-
-
-#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;
-}
-    .item-grid .video-thumbnail-box{
-        width:168px;
-    }
-    .item-grid .playlist-thumbnail-box{
-        width:168px;
-    }
-
-
-
-.medium-item-box{
-
-    display:grid;
-    grid-template-columns: 1fr 30px;
-}
-.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;
-}
-    .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;
-    }
-    /*.medium-item .views{
-        grid-column: 3;
-        grid-row: 2;
-        justify-self:end;
-    }
-    .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;
-    }
-    
-    .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;
-
-    display:grid;
-    grid-template-columns: 1fr 30px;
-    grid-template-rows: 94px;
-}
-
-.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: #333;
-        font-size: 16px;
-        font-weight: 500;
-        text-decoration:initial;
-        min-width: 0;
-        justify-self:start;
-
-        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;
-}
-
-/* ---Thumbnails for videos---- */
-.video-thumbnail-box{
-    max-height:100%;
-
-    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;
-    }
-
-/* ---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{
-    justify-self:center;
-    display: grid;
-    grid-auto-columns: 40px;
-    grid-auto-flow: column; 
-    height: 40px;
-}
-    .page-button{
-        background-color: #e9e9e9;
-        border-style: outset;
-        border-width: 2px;
-        font-weight: bold;
-        text-align: center;
-    }
-.sort-button{
-    background-color: #d0d0d0;
-    padding: 2px;
-    justify-self: start;
-}