From 668f6cba15b06086845ae29da6accfe0e6411d6c Mon Sep 17 00:00:00 2001
From: James Mills <prologic@shortcircuit.net.au>
Date: Sat, 28 Mar 2020 18:40:43 +1000
Subject: [PATCH] Refactored UI to be more mobile friendly with new quality
navs
---
app/rice-box.go | 22 +++++++++++-----------
static/theme.css | 41 +++++++++++++++++++----------------------
static/upload.css | 2 +-
templates/index.html | 6 +++---
4 files changed, 34 insertions(+), 37 deletions(-)
diff --git a/app/rice-box.go b/app/rice-box.go
index 5b02586..4bca57e 100644
--- a/app/rice-box.go
+++ b/app/rice-box.go
@@ -23,9 +23,9 @@ func init() {
}
file4 := &embedded.EmbeddedFile{
Filename: "index.html",
- FileModTime: time.Unix(1585382983, 0),
+ FileModTime: time.Unix(1585384536, 0),
- Content: string("{{ define \"content\" }}\r\n{{ $playing := .Playing }}\r\n<div class=\"topnav\" id=\"myTopnav\">\r\n <a {{ if eq $.Quality \"\" }}class=\"active\"{{ end }} href=\"/v/{{ $playing.ID }}\">fullHD</a>\r\n <a {{ if eq $.Quality \"720p\" }}class=\"active\"{{ end }} href=\"/v/{{ $playing.ID }}?quality=720p\">720p</a>\r\n <a {{ if eq $.Quality \"480p\" }}class=\"active\"{{ end }} href=\"/v/{{ $playing.ID }}?quality=480p\">480p</a>\r\n <a {{ if eq $.Quality \"360p\" }}class=\"active\"{{ end }} href=\"/v/{{ $playing.ID }}?quality=360p\">360p</a>\r\n <a {{ if eq $.Quality \"240p\" }}class=\"active\"{{ end }} href=\"/v/{{ $playing.ID }}?quality=240p\">240p</a>\r\n <a href=\"javascript:void(0);\" class=\"icon\" onclick=\"myFunction()\">\r\n <i class=\"fa fa-bars\"></i>\r\n </a>\r\n</div>\r\n\r\n<div id=\"player\">\r\n {{ if $playing.ID }}\r\n <video id=\"video\" controls preload=\"metadata\" poster=\"/t/{{ $playing.ID}}\">\r\n <source src=\"/v/{{ $playing.ID }}.mp4?quality={{ $.Quality }}\" type=\"video/mp4\" />\r\n </video>\r\n <h1>{{ $playing.Title }}</h1>\r\n <h2>{{ $playing.Views }} views • {{ $playing.Modified }}<br />{{ $playing.Size | bytes }}</h2>\r\n <p>{{ $playing.Description }}</p>\r\n {{ else }}\r\n <video id=\"video\" controls></video>\r\n {{ end }}\r\n</div>\r\n<div id=\"playlist\">\r\n <div class=\"nav\">\r\n <ul>\r\n <li><a {{ if or (eq $.Sort \"timestamp\") (eq $.Sort \"\") }}class=\"active\"{{ end }} href=\"?sort=timestamp\">Recent</a></li>\r\n <li><a {{ if eq $.Sort \"views\" }}class=\"active\"{{ end }} href=\"?sort=views\">Views</a></li>\r\n </ul>\r\n </div>\r\n {{ range $m := .Playlist }}\r\n {{ if eq $m.ID $playing.ID }}\r\n <a href=\"/v/{{ $m.ID }}\" class=\"playing\">\r\n {{ else }}\r\n <a href=\"/v/{{ $m.ID }}\">\r\n {{ end }}\r\n <img src=\"/t/{{ $m.ID }}\">\r\n <div>\r\n <h1>{{ $m.Title }}</h1>\r\n <h2>{{ $m.Views }} views • {{ $m.Modified }}<br />{{ $m.Size | bytes }}</h2>\r\n </div>\r\n </a>\r\n {{ end }}\r\n</div>\r\n{{end}}\r\n{{ define \"scripts\" }}\r\n<script type=\"application/javascript\">\r\n/* Toggle between adding and removing the \"responsive\" class to topnav when the user clicks on the icon */\r\nfunction myFunction() {\r\n var x = document.getElementById(\"myTopnav\");\r\n if (x.className === \"topnav\") {\r\n x.className += \" responsive\";\r\n } else {\r\n x.className = \"topnav\";\r\n }\r\n}\r\n</script>\r\n{{ end }}\r\n"),
+ Content: string("{{ define \"content\" }}\r\n{{ $playing := .Playing }}\r\n<div class=\"topnav\" id=\"myTopnav\">\r\n <a href=\"javascript:void(0);\" class=\"icon\" onclick=\"myFunction()\">\r\n <i class=\"fa fa-cogs\"></i>\r\n </a>\r\n <a {{ if eq $.Quality \"\" }}class=\"active\"{{ end }} href=\"/v/{{ $playing.ID }}\">fullHD</a>\r\n <a {{ if eq $.Quality \"720p\" }}class=\"active\"{{ end }} href=\"/v/{{ $playing.ID }}?quality=720p\">720p</a>\r\n <a {{ if eq $.Quality \"480p\" }}class=\"active\"{{ end }} href=\"/v/{{ $playing.ID }}?quality=480p\">480p</a>\r\n <a {{ if eq $.Quality \"360p\" }}class=\"active\"{{ end }} href=\"/v/{{ $playing.ID }}?quality=360p\">360p</a>\r\n <a {{ if eq $.Quality \"240p\" }}class=\"active\"{{ end }} href=\"/v/{{ $playing.ID }}?quality=240p\">240p</a>\r\n</div>\r\n\r\n<div id=\"player\">\r\n {{ if $playing.ID }}\r\n <video id=\"video\" controls preload=\"metadata\" poster=\"/t/{{ $playing.ID}}\">\r\n <source src=\"/v/{{ $playing.ID }}.mp4?quality={{ $.Quality }}\" type=\"video/mp4\" />\r\n </video>\r\n <h1>{{ $playing.Title }}</h1>\r\n <h2>{{ $playing.Views }} views • {{ $playing.Modified }}<br />{{ $playing.Size | bytes }}</h2>\r\n <p>{{ $playing.Description }}</p>\r\n {{ else }}\r\n <video id=\"video\" controls></video>\r\n {{ end }}\r\n</div>\r\n<div id=\"playlist\">\r\n <div class=\"nav\">\r\n <ul>\r\n <li><a {{ if or (eq $.Sort \"timestamp\") (eq $.Sort \"\") }}class=\"active\"{{ end }} href=\"?sort=timestamp\">Recent</a></li>\r\n <li><a {{ if eq $.Sort \"views\" }}class=\"active\"{{ end }} href=\"?sort=views\">Views</a></li>\r\n </ul>\r\n </div>\r\n {{ range $m := .Playlist }}\r\n {{ if eq $m.ID $playing.ID }}\r\n <a href=\"/v/{{ $m.ID }}\" class=\"playing\">\r\n {{ else }}\r\n <a href=\"/v/{{ $m.ID }}\">\r\n {{ end }}\r\n <img src=\"/t/{{ $m.ID }}\">\r\n <div>\r\n <h1>{{ $m.Title }}</h1>\r\n <h2>{{ $m.Views }} views • {{ $m.Modified }}<br />{{ $m.Size | bytes }}</h2>\r\n </div>\r\n </a>\r\n {{ end }}\r\n</div>\r\n{{end}}\r\n{{ define \"scripts\" }}\r\n<script type=\"application/javascript\">\r\n/* Toggle between adding and removing the \"responsive\" class to topnav when the user clicks on the icon */\r\nfunction myFunction() {\r\n var x = document.getElementById(\"myTopnav\");\r\n if (x.className === \"topnav\") {\r\n x.className += \" responsive\";\r\n } else {\r\n x.className = \"topnav\";\r\n }\r\n}\r\n</script>\r\n{{ end }}\r\n"),
}
file5 := &embedded.EmbeddedFile{
Filename: "upload.html",
@@ -37,7 +37,7 @@ func init() {
// define dirs
dir1 := &embedded.EmbeddedDir{
Filename: "",
- DirModTime: time.Unix(1585382983, 0),
+ DirModTime: time.Unix(1585384536, 0),
ChildFiles: []*embedded.EmbeddedFile{
file2, // "base.html"
file3, // "import.html"
@@ -53,7 +53,7 @@ func init() {
// register embeddedBox
embedded.RegisterEmbeddedBox(`../templates`, &embedded.EmbeddedBox{
Name: `../templates`,
- Time: time.Unix(1585382983, 0),
+ Time: time.Unix(1585384536, 0),
Dirs: map[string]*embedded.EmbeddedDir{
"": dir1,
},
@@ -89,7 +89,7 @@ func init() {
}
filea := &embedded.EmbeddedFile{
Filename: "import.css",
- FileModTime: time.Unix(1585354927, 0),
+ FileModTime: time.Unix(1585384768, 0),
Content: string(".import-container {\r\n display: inline-block;\r\n max-width: 100%;\r\n margin-top: 50px;\r\n}\r\n\r\n.import-wrapper {\r\n padding: 20px;\r\n background-color: #282a2e;\r\n border: 1px solid #1e1e1e;\r\n border-radius: 20px;\r\n font-family: 'Trebuchet MS', Arial, sans-serif;\r\n}\r\n\r\n.import-form {\r\n padding: 20px;\r\n border: 5px dashed #676867;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.import-details {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0 0 20px 0;\r\n}\r\n\r\n.import-details > * {\r\n margin-top: 20px;\r\n}\r\n\r\n.import-details span {\r\n color: #c5c8c6;\r\n font-weight: bold;\r\n}\r\n\r\n.import-message {\r\n white-space: normal;\r\n padding: 0 20px;\r\n word-wrap: break-word;\r\n max-width: 300px;\r\n}\r\n\r\n.import-message.error {\r\n color: #e82e57;\r\n}\r\n\r\n.import-button-wrapper {\r\n display: none;\r\n width: 100%;\r\n padding: 0 20px;\r\n}\r\n\r\n.import-button {\r\n border: 0;\r\n box-shadow: none;\r\n border-radius: 0px;\r\n\r\n width: 100%;\r\n padding: 15px;\r\n background: #191919 !important;\r\n font-family: 'Trebuchet MS', Arial, sans-serif;\r\n color: #c5c8c6;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.import-button.transparent {\r\n background: transparent !important;\r\n padding: 10px;\r\n}\r\n\r\n.import-progress-container {\r\n display: none;\r\n width: 100%;\r\n padding: 0 20px;\r\n}\r\n\r\n.import-progress {\r\n height: 30px;\r\n background: linear-gradient(45deg, #c7c7c7, #ae81ff);\r\n border-radius: 5px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.import-progress-label {\r\n color: #282a2e !important;\r\n}\r\n\r\n/* SPINNER */\r\n\r\n.loader,\r\n.loader:after {\r\n border-radius: 50%;\r\n width: 3em;\r\n height: 3em;\r\n}\r\n.loader {\r\n font-size: 10px;\r\n position: relative;\r\n text-indent: -9999em;\r\n border-top: 0.5em solid rgba(255, 255, 255, 0.2);\r\n border-right: 0.5em solid rgba(255, 255, 255, 0.2);\r\n border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);\r\n border-left: 0.5em solid #ffffff;\r\n -webkit-transform: translateZ(0);\r\n -ms-transform: translateZ(0);\r\n transform: translateZ(0);\r\n -webkit-animation: load8 1.1s infinite linear;\r\n animation: load8 1.1s infinite linear;\r\n}\r\n@-webkit-keyframes load8 {\r\n 0% {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n}\r\n@keyframes load8 {\r\n 0% {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n}\r\n"),
}
@@ -101,9 +101,9 @@ func init() {
}
filec := &embedded.EmbeddedFile{
Filename: "theme.css",
- FileModTime: time.Unix(1585382910, 0),
+ FileModTime: time.Unix(1585384302, 0),
- Content: string(":root {\n --main-title-color: #ae81ff;\n --link-hover-color: #ae81ff;\n}\n\n/* normalize */\n* {\n font-weight: inherit;\n font-size: inherit;\n border: none;\n outline: none;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\nbody {\n font-family: Arial, sans-serif;\n font-size: 16px;\n font-weight: 400;\n color: #c5c8c6;\n background: #1e1e1e;\n padding-bottom: 10px;\n}\n\nnav {\n z-index: 100;\n color: var(--main-title-color);\n text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.7);\n font-weight: 700;\n font-size: 20px;\n text-indent: 20px;\n line-height: 50px;\n width: 100%;\n height: 50px;\n background: #171717;\n border-bottom: 1px solid #272727;\n position: relative;\n overflow: hidden;\n}\n\nnav a.centered {\n float: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\nmain {\n width: 1156px;\n margin:0 auto;\n margin-top: 15px;\n white-space: nowrap;\n}\n\n#player {\n width: 854px;\n display: inline-block;\n vertical-align: top;\n}\n\n/* 480p */\n#video {\n width: 100%;\n height: 480px;\n background: #000;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n}\n\n#player > h1 {\n margin-top: 10px;\n}\n\n#player > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n#player > p {\n margin-top: 10px;\n font-size: 80%;\n width: 100%;\n white-space: normal;\n}\n\n#playlist {\n font-size: 13px;\n display: inline-block;\n margin-left: 10px;\n width: 290px;\n height: 543px;\n background: #282a2e;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n overflow-x: hidden;\n overflow-y: auto;\n}\n\n#playlist > a {\n display: block;\n padding: 10px;\n position: relative;\n min-height: 54px;\n}\n\n#playlist > a:hover {\n color: var(--link-hover-color);\n}\n\n#playlist > a.playing {\n background: #383a3e;\n}\n\n#playlist > a + a {\n border-top: 1px solid #1e1e1e;\n}\n\n#playlist > a > img {\n width: 70px;\n}\n\n#playlist > a > div {\n position: absolute;\n top: 10px;\n right: 10px;\n bottom: 10px;\n left: 90px;\n}\n\n#playlist > a > div > h1 {\n white-space: normal;\n}\n\n#playlist > a > div > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n/* 360p */\n@media only screen and (max-width: 1180px) {\n main {\n width: 940px;\n }\n #player {\n width: 640px;\n }\n #video {\n height: 360px;\n }\n}\n\n/* 240p */\n@media only screen and (max-width: 965px) {\n main {\n width: 726px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n}\n\n/* 240p with shifted playlist */\n@media only screen and (max-width: 750px) {\n main {\n width: 426px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n #playlist {\n width: 426px;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* responsive width with shifted playlist */\n@media only screen and (max-width: 440px) {\n main {\n width: 100%;\n }\n #player {\n width: 100%;\n }\n #video {\n height: auto;\n }\n #playlist {\n width: 100%;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* Upload */\n.upload_form_cont {\n background: -moz-linear-gradient(#ffffff, #f2f2f2);\n background: -ms-linear-gradient(#ffffff, #f2f2f2);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));\n background: -webkit-linear-gradient(#ffffff, #f2f2f2);\n background: -o-linear-gradient(#ffffff, #f2f2f2);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')\";\n background: linear-gradient(#ffffff, #f2f2f2);\n color:#000;\n overflow:hidden;\n}\n#upload_form {\n float:left;\n padding:20px;\n width:700px;\n}\n#upload_form > div {\n margin-bottom:10px;\n}\n#speed,#remaining {\n float:left;\n width:100px;\n}\n#b_transfered {\n float:right;\n text-align:right;\n}\n.clear_both {\n clear:both;\n}\n\ntextarea {\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n border:1px solid #ccc;\n font-size:14pt;\n padding:5px 10px;\n}\n\ninput {\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n border:1px solid #ccc;\n font-size:14pt;\n padding:5px 10px;\n}\ninput[type=button] {\n background: -moz-linear-gradient(#ffffff, #dfdfdf);\n background: -ms-linear-gradient(#ffffff, #dfdfdf);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));\n background: -webkit-linear-gradient(#ffffff, #dfdfdf);\n background: -o-linear-gradient(#ffffff, #dfdfdf);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')\";\n background: linear-gradient(#ffffff, #dfdfdf);\n}\n#video_file {\n width:400px;\n}\n#progress_info {\n font-size:10pt;\n}\n#fileinfo,#error,#error2,#abort,#warnsize {\n color:#aaa;\n display:none;\n font-size:10pt;\n font-style:italic;\n margin-top:10px;\n}\n#progress {\n border:1px solid #ccc;\n display:none;\n float:left;\n height:14px;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n background: -moz-linear-gradient(#66cc00, #4b9500);\n background: -ms-linear-gradient(#66cc00, #4b9500);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));\n background: -webkit-linear-gradient(#66cc00, #4b9500);\n background: -o-linear-gradient(#66cc00, #4b9500);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')\";\n background: linear-gradient(#66cc00, #4b9500);\n}\n#progress_percent {\n float:right;\n}\n#upload_response {\n margin-top: 10px;\n padding: 20px;\n overflow: hidden;\n display: none;\n border: 1px solid #ccc;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n box-shadow: 0 0 5px #ccc;\n background: -moz-linear-gradient(#bbb, #eee);\n background: -ms-linear-gradient(#bbb, #eee);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));\n background: -webkit-linear-gradient(#bbb, #eee);\n background: -o-linear-gradient(#bbb, #eee);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')\";\n background: linear-gradient(#000000, #1e1e1e);\n}\n\n.fileContainer {\n overflow: hidden;\n position: relative;\n}\n\nlabel.filebutton {\n width:120px;\n height:40px;\n overflow:hidden;\n position:relative;\n background:linear-gradient(#000000, #1e1e1e);\n box-shadow: 0 0 5px #ccc;\n}\n\nlabel span input {\n z-index: 999;\n line-height: 0;\n font-size: 50px;\n position: absolute;\n top: -2px;\n left: -700px;\n opacity: 0;\n filter: alpha(opacity = 0);\n -ms-filter: \"alpha(opacity=0)\";\n cursor: pointer;\n _cursor: hand;\n margin: 0;\n padding:0;\n}\n.lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n}\n.lds-ellipsis div {\n position: absolute;\n top: 33px;\n width: 13px;\n height: 13px;\n border-radius: 50%;\n background: #fff;\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n}\n.lds-ellipsis div:nth-child(1) {\n left: 8px;\n animation: lds-ellipsis1 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(2) {\n left: 8px;\n animation: lds-ellipsis2 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(3) {\n left: 32px;\n animation: lds-ellipsis2 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(4) {\n left: 56px;\n animation: lds-ellipsis3 0.6s infinite;\n}\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n}\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(24px, 0);\n }\n}\n\n.nav ul {\n list-style: none;\n background-color: #444;\n text-align: center;\n padding: 0;\n margin: 0;\n}\n.nav li {\n font-family: 'Oswald', sans-serif;\n font-size: 1.2em;\n line-height: 40px;\n height: 40px;\n border-bottom: 1px solid #888;\n}\n\n.nav a {\n text-decoration: none;\n color: #fff;\n display: block;\n transition: .3s background-color;\n}\n\n.nav a:hover {\n background-color: #005f5f;\n}\n\n.nav a.active {\n background-color: #fff;\n color: #444;\n cursor: default;\n}\n\n@media screen and (min-width: 600px) {\n .nav li {\n width: 120px;\n border-bottom: none;\n height: 50px;\n line-height: 50px;\n font-size: 1.4em;\n }\n\n /* Option 1 - Display Inline */\n .nav li {\n display: inline-block;\n margin-right: -4px;\n }\n\n /* Options 2 - Float\n .nav li {\n float: left;\n }\n .nav ul {\n overflow: auto;\n width: 600px;\n margin: 0 auto;\n }\n .nav {\n background-color: #444;\n }\n */\n}\n\nfooter {\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: #1e1e1e;\n color: white;\n text-align: center;\n}\n\nfooter p {\n font-size: 8px;\n}\n\nfooter p a {\n color: #fff;\n}\n\nfooter p a {\n text-decoration: underline;\n color: #fff;\n transition: .3s background-color;\n}\n\nfooter p a:hover {\n background-color: #005f5f;\n}\n\n/* Add a black background color to the top navigation */\n.topnav {\n background-color: #333;\n overflow: hidden;\n}\n\n/* Style the links inside the navigation bar */\n.topnav a {\n float: left;\n display: block;\n color: #f2f2f2;\n text-align: center;\n padding: 14px 16px;\n text-decoration: none;\n font-size: 17px;\n}\n\n/* Change the color of links on hover */\n.topnav a:hover {\n background-color: #ddd;\n color: black;\n}\n\n/* Add an active class to highlight the current page */\n.topnav a.active {\n background-color: #4CAF50;\n color: white;\n}\n\n/* Hide the link that should open and close the topnav on small screens */\n.topnav .icon {\n display: none;\n}\n/* When the screen is less than 600 pixels wide, hide all links, except for the first one (\"Home\"). Show the link that contains should open and close the topnav (.icon) */\n@media screen and (max-width: 600px) {\n .topnav a:not(:first-child) {display: none;}\n .topnav a.icon {\n float: right;\n display: block;\n }\n}\n\n/* The \"responsive\" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */\n@media screen and (max-width: 600px) {\n .topnav.responsive {position: relative;}\n .topnav.responsive a.icon {\n position: absolute;\n right: 0;\n top: 0;\n }\n .topnav.responsive a {\n float: none;\n display: block;\n text-align: left;\n }\n}\n"),
+ Content: string(":root {\n --main-title-color: #ae81ff;\n --link-hover-color: #ae81ff;\n}\n\n/* normalize */\n* {\n font-weight: inherit;\n font-size: inherit;\n border: none;\n outline: none;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\nbody {\n font-family: Arial, sans-serif;\n font-size: 16px;\n font-weight: 400;\n color: #c5c8c6;\n background: #1e1e1e;\n padding-bottom: 10px;\n}\n\nnav {\n z-index: 100;\n color: var(--main-title-color);\n text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.7);\n font-weight: 700;\n font-size: 20px;\n text-indent: 20px;\n line-height: 50px;\n width: 100%;\n height: 50px;\n background: #171717;\n border-bottom: 1px solid #272727;\n position: relative;\n overflow: hidden;\n}\n\nnav a.centered {\n float: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\nmain {\n width: 1156px;\n margin:0 auto;\n margin-top: 15px;\n white-space: nowrap;\n}\n\n#player {\n width: 854px;\n display: inline-block;\n vertical-align: top;\n}\n\n/* 480p */\n#video {\n width: 100%;\n height: 480px;\n background: #000;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n}\n\n#player > h1 {\n margin-top: 10px;\n}\n\n#player > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n#player > p {\n margin-top: 10px;\n font-size: 80%;\n width: 100%;\n white-space: normal;\n}\n\n#playlist {\n font-size: 13px;\n display: inline-block;\n margin-left: 10px;\n width: 290px;\n height: 543px;\n background: #282a2e;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n overflow-x: hidden;\n overflow-y: auto;\n}\n\n#playlist > a {\n display: block;\n padding: 10px;\n position: relative;\n min-height: 54px;\n}\n\n#playlist > a:hover {\n color: var(--link-hover-color);\n}\n\n#playlist > a.playing {\n background: #383a3e;\n}\n\n#playlist > a + a {\n border-top: 1px solid #1e1e1e;\n}\n\n#playlist > a > img {\n width: 70px;\n}\n\n#playlist > a > div {\n position: absolute;\n top: 10px;\n right: 10px;\n bottom: 10px;\n left: 90px;\n}\n\n#playlist > a > div > h1 {\n white-space: normal;\n}\n\n#playlist > a > div > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n/* 360p */\n@media only screen and (max-width: 1180px) {\n main {\n width: 940px;\n }\n #player {\n width: 640px;\n }\n #video {\n height: 360px;\n }\n}\n\n/* 240p */\n@media only screen and (max-width: 965px) {\n main {\n width: 726px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n}\n\n/* 240p with shifted playlist */\n@media only screen and (max-width: 750px) {\n main {\n width: 426px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n #playlist {\n width: 426px;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* responsive width with shifted playlist */\n@media only screen and (max-width: 440px) {\n main {\n width: 100%;\n }\n #player {\n width: 100%;\n }\n #video {\n height: auto;\n }\n #playlist {\n width: 100%;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* Upload */\n.upload_form_cont {\n background: -moz-linear-gradient(#ffffff, #f2f2f2);\n background: -ms-linear-gradient(#ffffff, #f2f2f2);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));\n background: -webkit-linear-gradient(#ffffff, #f2f2f2);\n background: -o-linear-gradient(#ffffff, #f2f2f2);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')\";\n background: linear-gradient(#ffffff, #f2f2f2);\n color:#000;\n overflow:hidden;\n}\n#upload_form {\n float:left;\n padding:20px;\n width:700px;\n}\n#upload_form > div {\n margin-bottom:10px;\n}\n#speed,#remaining {\n float:left;\n width:100px;\n}\n#b_transfered {\n float:right;\n text-align:right;\n}\n.clear_both {\n clear:both;\n}\n\ntextarea {\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n border:1px solid #ccc;\n font-size:14pt;\n padding:5px 10px;\n}\n\ninput {\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n border:1px solid #ccc;\n font-size:14pt;\n padding:5px 10px;\n}\ninput[type=button] {\n background: -moz-linear-gradient(#ffffff, #dfdfdf);\n background: -ms-linear-gradient(#ffffff, #dfdfdf);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));\n background: -webkit-linear-gradient(#ffffff, #dfdfdf);\n background: -o-linear-gradient(#ffffff, #dfdfdf);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')\";\n background: linear-gradient(#ffffff, #dfdfdf);\n}\n#video_file {\n width:400px;\n}\n#progress_info {\n font-size:10pt;\n}\n#fileinfo,#error,#error2,#abort,#warnsize {\n color:#aaa;\n display:none;\n font-size:10pt;\n font-style:italic;\n margin-top:10px;\n}\n#progress {\n border:1px solid #ccc;\n display:none;\n float:left;\n height:14px;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n background: -moz-linear-gradient(#66cc00, #4b9500);\n background: -ms-linear-gradient(#66cc00, #4b9500);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));\n background: -webkit-linear-gradient(#66cc00, #4b9500);\n background: -o-linear-gradient(#66cc00, #4b9500);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')\";\n background: linear-gradient(#66cc00, #4b9500);\n}\n#progress_percent {\n float:right;\n}\n#upload_response {\n margin-top: 10px;\n padding: 20px;\n overflow: hidden;\n display: none;\n border: 1px solid #ccc;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n box-shadow: 0 0 5px #ccc;\n background: -moz-linear-gradient(#bbb, #eee);\n background: -ms-linear-gradient(#bbb, #eee);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));\n background: -webkit-linear-gradient(#bbb, #eee);\n background: -o-linear-gradient(#bbb, #eee);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')\";\n background: linear-gradient(#000000, #1e1e1e);\n}\n\n.fileContainer {\n overflow: hidden;\n position: relative;\n}\n\nlabel.filebutton {\n width:120px;\n height:40px;\n overflow:hidden;\n position:relative;\n background:linear-gradient(#000000, #1e1e1e);\n box-shadow: 0 0 5px #ccc;\n}\n\nlabel span input {\n z-index: 999;\n line-height: 0;\n font-size: 50px;\n position: absolute;\n top: -2px;\n left: -700px;\n opacity: 0;\n filter: alpha(opacity = 0);\n -ms-filter: \"alpha(opacity=0)\";\n cursor: pointer;\n _cursor: hand;\n margin: 0;\n padding:0;\n}\n.lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n}\n.lds-ellipsis div {\n position: absolute;\n top: 33px;\n width: 13px;\n height: 13px;\n border-radius: 50%;\n background: #fff;\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n}\n.lds-ellipsis div:nth-child(1) {\n left: 8px;\n animation: lds-ellipsis1 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(2) {\n left: 8px;\n animation: lds-ellipsis2 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(3) {\n left: 32px;\n animation: lds-ellipsis2 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(4) {\n left: 56px;\n animation: lds-ellipsis3 0.6s infinite;\n}\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n}\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(24px, 0);\n }\n}\n\n.nav ul {\n list-style: none;\n background-color: #444;\n text-align: center;\n padding: 0;\n margin: 0;\n}\n.nav li {\n font-family: 'Oswald', sans-serif;\n font-size: 1.2em;\n line-height: 40px;\n height: 40px;\n border-bottom: 1px solid #888;\n}\n\n.nav a {\n text-decoration: none;\n color: #fff;\n display: block;\n transition: .3s background-color;\n}\n\n.nav a:hover {\n background-color: #005f5f;\n}\n\n.nav a.active {\n background-color: #fff;\n color: #444;\n cursor: default;\n}\n\n@media screen and (min-width: 600px) {\n .nav li {\n width: 120px;\n border-bottom: none;\n height: 50px;\n line-height: 50px;\n font-size: 1.4em;\n }\n\n /* Option 1 - Display Inline */\n .nav li {\n display: inline-block;\n margin-right: -4px;\n }\n\n /* Options 2 - Float\n .nav li {\n float: left;\n }\n .nav ul {\n overflow: auto;\n width: 600px;\n margin: 0 auto;\n }\n .nav {\n background-color: #444;\n }\n */\n}\n\nfooter {\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: #1e1e1e;\n color: white;\n text-align: center;\n}\n\nfooter p {\n font-size: 8px;\n}\n\nfooter p a {\n color: #fff;\n}\n\nfooter p a {\n text-decoration: underline;\n color: #fff;\n transition: .3s background-color;\n}\n\nfooter p a:hover {\n background-color: #005f5f;\n}\n\n/* Add a black background color to the top navigation */\n.topnav {\n background-color: #333;\n overflow: hidden;\n}\n\n/* Style the links inside the navigation bar */\n.topnav a {\n float: left;\n display: block;\n color: #f2f2f2;\n text-align: center;\n padding: 14px 16px;\n text-decoration: none;\n font-size: 17px;\n}\n\n.topnav a:not(:first-child) {\n display: none;\n}\n\n/* Change the color of links on hover */\n.topnav a:hover {\n background-color: #ddd;\n color: black;\n}\n\n/* Add an active class to highlight the current page */\n.topnav a.active {\n background-color: #4CAF50;\n color: white;\n}\n\n/* Hide the link that should open and close the topnav on small screens */\n.topnav .icon {\n float: right;\n display: block;\n}\n\n.topnav.responsive {\n position: relative;\n}\n.topnav.responsive a.icon {\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.topnav.responsive a {\n float: none;\n display: block;\n text-align: left;\n}\n"),
}
filed := &embedded.EmbeddedFile{
Filename: "upload-icon.png",
@@ -113,9 +113,9 @@ func init() {
}
filee := &embedded.EmbeddedFile{
Filename: "upload.css",
- FileModTime: time.Unix(1585341743, 0),
+ FileModTime: time.Unix(1585384774, 0),
- Content: string(".upload-container {\r\n display: inline-block;\r\n max-width: 100%;\r\n margin-top: 50px;\r\n}\r\n\r\n.upload-wrapper {\r\n padding: 20px;\r\n background-color: #282a2e;\r\n border: 1px solid #1e1e1e;\r\n border-radius: 20px;\r\n font-family: 'Trebuchet MS', Arial, sans-serif;\r\n}\r\n\r\n.upload-form {\r\n border: 5px dashed #676867;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.upload-box {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n justify-content: center;\r\n align-items: center;\r\n min-width: 300px;\r\n min-height: 200px;\r\n}\r\n\r\n.upload-box span {\r\n color: #c5c8c6;\r\n font-weight: bold;\r\n}\r\n\r\n.upload-details {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0 0 20px 0;\r\n}\r\n\r\n.upload-details > * {\r\n margin-top: 20px;\r\n}\r\n\r\n.upload-details span {\r\n color: #c5c8c6;\r\n font-weight: bold;\r\n}\r\n\r\n.upload-file {\r\n display: none;\r\n width: 100%;\r\n padding: 0 20px;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.upload-message {\r\n white-space: normal;\r\n padding: 0 20px;\r\n word-wrap: break-word;\r\n max-width: 300px;\r\n}\r\n\r\n.upload-message.error {\r\n color: #e82e57;\r\n}\r\n\r\n.upload-button-wrapper {\r\n display: none;\r\n width: 100%;\r\n padding: 0 20px;\r\n}\r\n\r\n.upload-button {\r\n border: 0;\r\n box-shadow: none;\r\n border-radius: 0px;\r\n\r\n width: 100%;\r\n padding: 15px;\r\n background: #191919 !important;\r\n font-family: 'Trebuchet MS', Arial, sans-serif;\r\n color: #c5c8c6;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.upload-button.transparent {\r\n background: transparent !important;\r\n padding: 10px;\r\n}\r\n\r\n.upload-progress-container {\r\n display: none;\r\n width: 100%;\r\n padding: 0 20px;\r\n}\r\n\r\n.upload-progress {\r\n height: 30px;\r\n background: linear-gradient(45deg, #c7c7c7, #ae81ff);\r\n border-radius: 5px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.upload-progress-label {\r\n color: #282a2e !important;\r\n}\r\n\r\n/* SPINNER */\r\n\r\n.loader,\r\n.loader:after {\r\n border-radius: 50%;\r\n width: 3em;\r\n height: 3em;\r\n}\r\n.loader {\r\n font-size: 10px;\r\n position: relative;\r\n text-indent: -9999em;\r\n border-top: 0.5em solid rgba(255, 255, 255, 0.2);\r\n border-right: 0.5em solid rgba(255, 255, 255, 0.2);\r\n border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);\r\n border-left: 0.5em solid #ffffff;\r\n -webkit-transform: translateZ(0);\r\n -ms-transform: translateZ(0);\r\n transform: translateZ(0);\r\n -webkit-animation: load8 1.1s infinite linear;\r\n animation: load8 1.1s infinite linear;\r\n}\r\n@-webkit-keyframes load8 {\r\n 0% {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n}\r\n@keyframes load8 {\r\n 0% {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n}\r\n"),
+ Content: string(".upload-container {\r\n display: inline-block;\r\n max-width: 100%;\r\n margin-top: 50px;\r\n}\r\n\r\n.upload-wrapper {\r\n padding: 20px;\r\n background-color: #282a2e;\r\n border: 1px solid #1e1e1e;\r\n border-radius: 20px;\r\n font-family: 'Trebuchet MS', Arial, sans-serif;\r\n}\r\n\r\n.upload-form {\r\n border: 5px dashed #676867;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.upload-box {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n justify-content: center;\r\n align-items: center;\r\n min-width: 300px;\r\n min-height: 150px;\r\n}\r\n\r\n.upload-box span {\r\n color: #c5c8c6;\r\n font-weight: bold;\r\n}\r\n\r\n.upload-details {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0 0 20px 0;\r\n}\r\n\r\n.upload-details > * {\r\n margin-top: 20px;\r\n}\r\n\r\n.upload-details span {\r\n color: #c5c8c6;\r\n font-weight: bold;\r\n}\r\n\r\n.upload-file {\r\n display: none;\r\n width: 100%;\r\n padding: 0 20px;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.upload-message {\r\n white-space: normal;\r\n padding: 0 20px;\r\n word-wrap: break-word;\r\n max-width: 300px;\r\n}\r\n\r\n.upload-message.error {\r\n color: #e82e57;\r\n}\r\n\r\n.upload-button-wrapper {\r\n display: none;\r\n width: 100%;\r\n padding: 0 20px;\r\n}\r\n\r\n.upload-button {\r\n border: 0;\r\n box-shadow: none;\r\n border-radius: 0px;\r\n\r\n width: 100%;\r\n padding: 15px;\r\n background: #191919 !important;\r\n font-family: 'Trebuchet MS', Arial, sans-serif;\r\n color: #c5c8c6;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.upload-button.transparent {\r\n background: transparent !important;\r\n padding: 10px;\r\n}\r\n\r\n.upload-progress-container {\r\n display: none;\r\n width: 100%;\r\n padding: 0 20px;\r\n}\r\n\r\n.upload-progress {\r\n height: 30px;\r\n background: linear-gradient(45deg, #c7c7c7, #ae81ff);\r\n border-radius: 5px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.upload-progress-label {\r\n color: #282a2e !important;\r\n}\r\n\r\n/* SPINNER */\r\n\r\n.loader,\r\n.loader:after {\r\n border-radius: 50%;\r\n width: 3em;\r\n height: 3em;\r\n}\r\n.loader {\r\n font-size: 10px;\r\n position: relative;\r\n text-indent: -9999em;\r\n border-top: 0.5em solid rgba(255, 255, 255, 0.2);\r\n border-right: 0.5em solid rgba(255, 255, 255, 0.2);\r\n border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);\r\n border-left: 0.5em solid #ffffff;\r\n -webkit-transform: translateZ(0);\r\n -ms-transform: translateZ(0);\r\n transform: translateZ(0);\r\n -webkit-animation: load8 1.1s infinite linear;\r\n animation: load8 1.1s infinite linear;\r\n}\r\n@-webkit-keyframes load8 {\r\n 0% {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n}\r\n@keyframes load8 {\r\n 0% {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n}\r\n"),
}
filef := &embedded.EmbeddedFile{
Filename: "upload.js",
@@ -127,7 +127,7 @@ func init() {
// define dirs
dir6 := &embedded.EmbeddedDir{
Filename: "",
- DirModTime: time.Unix(1585382910, 0),
+ DirModTime: time.Unix(1585384774, 0),
ChildFiles: []*embedded.EmbeddedFile{
file7, // "close-icon.png"
file8, // "defaulticon.jpg"
@@ -148,7 +148,7 @@ func init() {
// register embeddedBox
embedded.RegisterEmbeddedBox(`../static`, &embedded.EmbeddedBox{
Name: `../static`,
- Time: time.Unix(1585382910, 0),
+ Time: time.Unix(1585384774, 0),
Dirs: map[string]*embedded.EmbeddedDir{
"": dir6,
},
diff --git a/static/theme.css b/static/theme.css
index 54e7f93..0dcbd1a 100644
--- a/static/theme.css
+++ b/static/theme.css
@@ -520,6 +520,10 @@ footer p a:hover {
font-size: 17px;
}
+.topnav a:not(:first-child) {
+ display: none;
+}
+
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
@@ -534,28 +538,21 @@ footer p a:hover {
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
- display: none;
-}
-/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
-@media screen and (max-width: 600px) {
- .topnav a:not(:first-child) {display: none;}
- .topnav a.icon {
- float: right;
- display: block;
- }
+ float: right;
+ display: block;
}
-/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
-@media screen and (max-width: 600px) {
- .topnav.responsive {position: relative;}
- .topnav.responsive a.icon {
- position: absolute;
- right: 0;
- top: 0;
- }
- .topnav.responsive a {
- float: none;
- display: block;
- text-align: left;
- }
+.topnav.responsive {
+ position: relative;
+}
+.topnav.responsive a.icon {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
+.topnav.responsive a {
+ float: none;
+ display: block;
+ text-align: left;
}
diff --git a/static/upload.css b/static/upload.css
index 194d3d0..9add614 100644
--- a/static/upload.css
+++ b/static/upload.css
@@ -26,7 +26,7 @@
justify-content: center;
align-items: center;
min-width: 300px;
- min-height: 200px;
+ min-height: 150px;
}
.upload-box span {
diff --git a/templates/index.html b/templates/index.html
index 78d5586..bdf5f24 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,14 +1,14 @@
{{ define "content" }}
{{ $playing := .Playing }}
<div class="topnav" id="myTopnav">
+ <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+ <i class="fa fa-cogs"></i>
+ </a>
<a {{ if eq $.Quality "" }}class="active"{{ end }} href="/v/{{ $playing.ID }}">fullHD</a>
<a {{ if eq $.Quality "720p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=720p">720p</a>
<a {{ if eq $.Quality "480p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=480p">480p</a>
<a {{ if eq $.Quality "360p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=360p">360p</a>
<a {{ if eq $.Quality "240p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=240p">240p</a>
- <a href="javascript:void(0);" class="icon" onclick="myFunction()">
- <i class="fa fa-bars"></i>
- </a>
</div>
<div id="player">