diff --git a/app/rice-box.go b/app/rice-box.go
index d00278d..67d2902 100644
--- a/app/rice-box.go
+++ b/app/rice-box.go
@@ -11,9 +11,9 @@ func init() {
// define files
file2 := &embedded.EmbeddedFile{
Filename: "base.html",
- FileModTime: time.Unix(1584787907, 0),
+ FileModTime: time.Unix(1584884378, 0),
- Content: string("{{define \"base\"}}\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n {{ template \"stylesheets\" . }}\r\n {{ template \"css\" . }}\r\n Tube\r\n \r\n\r\n \r\n \r\n {{template \"content\" .}}\r\n \r\n\r\n{{ template \"scripts\" . }}\r\n\r\n{{end}}\r\n{{ define \"css\" }}{{ end }}\r\n{{ define \"scripts\" }}{{ end }}\r\n{{ define \"stylesheets\" }}{{ end }}\r\n"),
+ Content: string("{{define \"base\"}}\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n {{ template \"stylesheets\" . }}\r\n {{ template \"css\" . }}\r\n Tube\r\n \r\n\r\n \r\n \r\n {{template \"content\" .}}\r\n \r\n\r\n{{ template \"scripts\" . }}\r\n\r\n{{end}}\r\n{{ define \"css\" }}{{ end }}\r\n{{ define \"scripts\" }}{{ end }}\r\n{{ define \"stylesheets\" }}{{ end }}\r\n"),
}
file3 := &embedded.EmbeddedFile{
Filename: "index.html",
@@ -31,7 +31,7 @@ func init() {
// define dirs
dir1 := &embedded.EmbeddedDir{
Filename: "",
- DirModTime: time.Unix(1584879674, 0),
+ DirModTime: time.Unix(1584884378, 0),
ChildFiles: []*embedded.EmbeddedFile{
file2, // "base.html"
file3, // "index.html"
@@ -46,7 +46,7 @@ func init() {
// register embeddedBox
embedded.RegisterEmbeddedBox(`../templates`, &embedded.EmbeddedBox{
Name: `../templates`,
- Time: time.Unix(1584879674, 0),
+ Time: time.Unix(1584884378, 0),
Dirs: map[string]*embedded.EmbeddedDir{
"": dir1,
},
@@ -75,9 +75,9 @@ func init() {
}
file8 := &embedded.EmbeddedFile{
Filename: "theme.css",
- FileModTime: time.Unix(1584879783, 0),
+ FileModTime: time.Unix(1584884367, 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}\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 background: #282a2e;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\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}\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"),
+ 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 background: #282a2e;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\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}\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"),
}
file9 := &embedded.EmbeddedFile{
Filename: "upload.js",
@@ -89,7 +89,7 @@ func init() {
// define dirs
dir5 := &embedded.EmbeddedDir{
Filename: "",
- DirModTime: time.Unix(1584879783, 0),
+ DirModTime: time.Unix(1584884367, 0),
ChildFiles: []*embedded.EmbeddedFile{
file6, // "defaulticon.jpg"
file7, // "favicon.ico"
@@ -105,7 +105,7 @@ func init() {
// register embeddedBox
embedded.RegisterEmbeddedBox(`../static`, &embedded.EmbeddedBox{
Name: `../static`,
- Time: time.Unix(1584879783, 0),
+ Time: time.Unix(1584884367, 0),
Dirs: map[string]*embedded.EmbeddedDir{
"": dir5,
},
diff --git a/static/theme.css b/static/theme.css
index a2f269a..e19bad4 100644
--- a/static/theme.css
+++ b/static/theme.css
@@ -40,6 +40,16 @@ nav {
height: 50px;
background: #171717;
border-bottom: 1px solid #272727;
+ position: relative;
+ overflow: hidden;
+}
+
+nav a.centered {
+ float: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
main {
diff --git a/templates/base.html b/templates/base.html
index 2d4fa93..854a845 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -14,7 +14,7 @@
{{template "content" .}}