html/css cleanup

[serve0] / templates / videoview.css.sh

diff --git a/templates/videoview.css.sh b/templates/videoview.css.sh
index bf22dc26aad013437455d49199e8fa351d718930..b2389989e7d96f893eb49d5324f15eaefbfb6d27 100755 (executable)
--- a/templates/videoview.css.sh
+++ b/templates/videoview.css.sh
@@ -16,9 +16,14 @@
 # along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
 
 cat <<EOF
+
+* {
+  box-sizing: border-box;
+}
+
 body {
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
   background-color: #000;
   color: #DDD;
 }
@@ -26,105 +31,130 @@ a {
   color: #EEE;
 }
 
-div.thumb {
-  width: 212px;
-  padding: 0px;
-  float: left;
-  margin: .1em;
-  white-space: normal;
-}
-div.thumbinfo {
-  /*height: 200px;*/
-  min-height: 150px;
-  max-height: 300px;
-  overflow: hidden;
+.label {
+  font-weight: bold;
 }
 
-*.coord {
-  margin: 0em 0em 0em 0em;
-  padding: 0em .2em 0em .2em;
-
-  background-color: #B8B8E0;
+.info {
+  margin: 0;
+  padding: 0 .25em;
+  background-color: #BBD;
   color: #000;
-
-  border-color: #000;
-  border-width: 1px;
-  border-style: solid;
+  border: #000 1px solid;
 }
-*.tag {
-  white-space: nowrap;
-  margin: 0em 0em 0em 0em;
-  padding: 0em .2em 0em .2em;
+.info.tag {
   line-height: 1.6em;
-
   background-color: #DBB;
-  color: #000;
-
-  border-color: #000;
-  border-width: 1px;
-  border-style: solid;
 }
 
-div.panel {
-  overflow: hidden;
-  padding: .4em .5em .2em .5em;
+.panel {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: .25em 1em;
   background-color: #333;
-  border-style: none none solid none;
   border-width: 1px;
+  border-style: none none solid none;
 }
 a.panel {
   font-weight: bold;
-  margin-left: 1em;
-  margin-right: 1em;
-  color: #EEE;
 }
-div.panel form div{
-  display: inline; float: left;
-  margin: .5em 0em 0em 1em;
-  padding: 0em .5em 0em 0em;
-  border-style: none solid none none;
-  border-width: 0px 1px 0px 0px;
+a.clearsearch, a.advanced, a.tagger, .pagination_nav {
+  display: inline;
+  border: none;
 }
-div.panel form div select[multiple]{
-  width: 12em;
-}
-div.footer {
-  position: fixed;
-  bottom: 0px;
-  width: 99%;
-  overflow: hidden;
-  padding: .2em .5em .4em .5em;
-  background-color: #333;
-  border-style: solid none none none;
-  border-width: 1px;
+.pagination_nav {
+  position: absolute;
+  right: 1em;
+  padding-top: .125em;
 }
-div.footer div {
+
+.panel .filter, .panel .quicklinks,
+.footer .newtag, .footer input[type=submit] {
   display: inline-block;
-  border-width: 0px 0px 0px 1px;
-  border-style: solid;
-  padding: .5em;
   vertical-align: top;
+  margin-top: 2em;
 }
-div.footer select[name="category"] {
-  min-width: 8em;
+.panel .help {
+  display: block;
 }
-div.footer select[name="ctag"] {
+.panel .filter select, .panel .filter .help,
+.footer .newtag select, .footer .newtag .label{
+  display: block;
   width: 10em;
 }
+.panel .filter .help.conjunction {
+  font-weight: bold;
+}
+.panel .filter .label.category {
+  display: block;
+  margin-top: 1em;
+}
+.panel .quicklinks * {
+  display: block
+}
 
-.video {
-  display: inline; float: left;
-  width: 60%;
+#thumblist .thumb {
+  display: inline-block;
+  width: 212px;
+  padding: 0;
+  margin: .5em;
+  vertical-align: top;
+  word-wrap: break-word;
 }
-.video video {width: 100%;}
-.video embed {width: 100%; min-height:360px}
-.video iframe {width: 100%; min-height:360px}
-.videoinfo {
-  display: inline; float: left;
-  margin-left: 2%; width: 35%;
+#thumblist .thumb img {
+  height: 162px;
+}
+#thumblist .thumb a {
+  display: block;
+}
+#thumblist .thumb a.fake-mp4 {
+  margin-top: .5em;
 }
 
+.footer {
+  position: fixed;
+  bottom: 0px;
+  border-style: solid none none none;
+}
 
+#videoview a.panel {
+  position: absolute;
+  right: 1em;
+  width: auto;
+  border: none;
+}
+#videoview .video {
+  display: inline-block;
+  width: 60%;
+  vertical-align: top;
+}
+#videoview .video * {
+  display: block;
+}
+#videoview .videoinfo {
+  display: inline-block;
+  width: 39%;
+  margin-top: 2em;
+}
+#videoview .videoinfo h2 {
+  display: inline;
+} 
+#videoview .videoinfo a.meta:after {
+  content: "\A";
+  white-space: pre;
+}
+#videoview .videoinfo .label {
+  display: block;
+  margin-top: 1em;
+}
+#videoview .videoinfo .info.description {
+  display: block;
+  background-color: #DDF;
+}
+#videoview .videoinfo .edit {
+  width: 100%
+}
 EOF
 
 # vi:set filetype=css: