From 9b159b32cb068280cab7df3217cef64a9dafc5b0 Mon Sep 17 00:00:00 2001
From: James Mills <prologic@shortcircuit.net.au>
Date: Sat, 28 Mar 2020 23:08:36 +1000
Subject: [PATCH] More minor UI tweaks

---
 app/rice-box.go      | 16 ++++++++--------
 static/theme.css     |  7 ++++++-
 templates/index.html |  4 ++--
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/app/rice-box.go b/app/rice-box.go
index fce3f58..49851ad 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(1585398472, 0),
+		FileModTime: time.Unix(1585400862, 0),
 
-		Content: string("{{ define \"content\" }}\r\n{{ $playing := .Playing }}\r\n<div id=\"player\">\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  {{ 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 }}?sort={{ $.Sort }}\" class=\"playing\">\r\n    {{ else }}\r\n      <a href=\"/v/{{ $m.ID }}?sort={{ $.Sort }}\">\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 id=\"player\">\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  {{ 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 }} • {{ $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 }}?sort={{ $.Sort }}\" class=\"playing\">\r\n    {{ else }}\r\n      <a href=\"/v/{{ $m.ID }}?sort={{ $.Sort }}\">\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 }}</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(1585398472, 0),
+		DirModTime: time.Unix(1585400862, 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(1585398472, 0),
+		Time: time.Unix(1585400862, 0),
 		Dirs: map[string]*embedded.EmbeddedDir{
 			"": dir1,
 		},
@@ -101,9 +101,9 @@ func init() {
 	}
 	filec := &embedded.EmbeddedFile{
 		Filename:    "theme.css",
-		FileModTime: time.Unix(1585394984, 0),
+		FileModTime: time.Unix(1585399483, 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: 607px;;\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"),
+		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: 607px;;\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  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\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",
@@ -127,7 +127,7 @@ func init() {
 	// define dirs
 	dir6 := &embedded.EmbeddedDir{
 		Filename:   "",
-		DirModTime: time.Unix(1585394984, 0),
+		DirModTime: time.Unix(1585400068, 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(1585394984, 0),
+		Time: time.Unix(1585400068, 0),
 		Dirs: map[string]*embedded.EmbeddedDir{
 			"": dir6,
 		},
diff --git a/static/theme.css b/static/theme.css
index 60b5479..bb32c80 100644
--- a/static/theme.css
+++ b/static/theme.css
@@ -134,7 +134,12 @@ main {
 }
 
 #playlist > a > div > h1 {
-    white-space: normal;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
 #playlist > a > div > h2 {
diff --git a/templates/index.html b/templates/index.html
index 525710c..b6dcb81 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -17,7 +17,7 @@
       <source src="/v/{{ $playing.ID }}.mp4?quality={{ $.Quality }}" type="video/mp4" />
     </video>
     <h1>{{ $playing.Title }}</h1>
-    <h2>{{ $playing.Views }} views • {{ $playing.Modified }}<br />{{ $playing.Size | bytes }}</h2>
+    <h2>{{ $playing.Views }} views • {{ $playing.Modified }} • {{ $playing.Size | bytes }}</h2>
     <p>{{ $playing.Description }}</p>
   {{ else }}
     <video id="video" controls></video>
@@ -39,7 +39,7 @@
     <img src="/t/{{ $m.ID }}">
     <div>
       <h1>{{ $m.Title }}</h1>
-      <h2>{{ $m.Views }} views • {{ $m.Modified }}<br />{{ $m.Size | bytes }}</h2>
+      <h2>{{ $m.Views }} views • {{ $m.Modified }}</h2>
     </div>
     </a>
   {{ end }}