2 files changed, 158 insertions, 15 deletions
diff --git a/mediagoblin/static/css/audio.css b/mediagoblin/static/css/audio.css
new file mode 100644
index 00000000..387278ec
--- /dev/null
+++ b/mediagoblin/static/css/audio.css
@@ -0,0 +1,84 @@
+.audio-spectrogram {
+    position: relative;
+}
+.playhead {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(134, 212, 177, 0.3);
+    border-right: thin solid #ffaa00;
+    height: 100%;
+    -webkit-transition: width .1s ease-out;
+    -moz-transition: width .1s ease-out;
+    transition: width .1s ease-out;
+}
+.audio-control-play-pause {
+    position: absolute;
+    bottom: 0;
+    left: 5px;
+    cursor: pointer;
+    /* background: rgba(0, 0, 0, 0.7); */
+    font-size: 40px;
+    width: 50px;
+    text-shadow: 0 0 10px black;
+}
+    .audio-control-play-pause.playing {
+        color: #b71500;
+        letter-spacing: -17px;
+        margin-left: -7px;
+    }
+    .audio-control-play-pause.paused {
+        /* Warning: this means the the play button shows! */
+        color: rgb(134, 212, 177);
+    }
+
+.buffered-indicators {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+}
+    .buffered-indicators div {
+        position: absolute;
+        height: 2px;
+        left: 0;
+        background: rgba(134, 177, 212, 1);
+
+        -webkit-transition: left 1s ease-out;
+        -moz-transition: left 1s ease-out;
+        transition: left 1s ease-out;
+
+        -webkit-transition: width 1s ease-out;
+        -moz-transition: width 1s ease-out;
+        transition: width 1s ease-out;
+
+        cursor: pointer;
+    }
+
+.seekbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.audio-currentTime {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.7);
+}
+
+.audio-volume {
+    position: absolute;
+    left: 50px;
+    bottom: 10px;
+    opacity: 0.3;
+    -moz-transition: opacity .1s ease-in-out;
+    -webkit-transition: opacity .1s ease-in-out;
+    transition: opacity .1s ease-in-out;
+}
+    .audio-spectrogram:hover .audio-volume {
+        opacity: 1;
+    }
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 34be4f16..e4cd91ca 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -26,8 +26,7 @@
 }
 
 body {
-  background-color: #111;
-  background-image: url("../images/background.png");
+  background-color: #161616;
   color: #C3C3C3;
   padding: 0;
   margin: 0px;
@@ -113,25 +112,71 @@ input, textarea {
 }
 
 header {
-  width: 98%;
-  padding: 6px 1% 0;
-  margin-bottom: 20px;
-  background-color: #222;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 42px;
+  background-color: #303030;
+  border-bottom: 1px solid #252525;
 }
 
 .header_right {
+  margin: 8px;
+  display: inline-block;
   float: right;
-  margin: 8px 0px 8px 8px;
+}
+
+.header_right ul {
+	display: none;
+	position: absolute;
+	top: 42px;
+	right: 0px;
+	background: #252525;
+	padding: 20px;
+}
+
+.header_right li {
+  list-style: none;
+}
+
+.dropdown {
+  display: inline-block;
+  color: #c3c3c3;
+  background-color: #424242;
+  border: 1px solid;
+  border-color: #464646 #2B2B2B #252525;
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 16px;
+  text-decoration: none;
+  font-style: normal;
+  font-weight: bold;
+  cursor: pointer;
+  position: relative;
+}
+
+.dropdown_items {
+  position: absolute;
+  right: 0px;
+  top: 25px;
+  background-color: #424242;
+  padding: 10px;
+  width: 160px;
+  border-radius: 5px 0 5px 5px;
+  box-shadow: 0 2px 1px black;
+}
+
+.dropdown_items a {
+  display: block;
 }
 
 a.logo {
   color: #fff;
   font-weight: bold;
-  margin: 8px 8px 8px 0;
 }
 
 .logo img {
   vertical-align: middle;
+  margin: 6px 8px;
 }
 
 .mediagoblin_content {
@@ -241,7 +286,7 @@ text-align: center;
 }
 
 .media_sidebar p {
-	padding-left: 8px;
+	margin-left: 8px;
 }
 
 /* forms */
@@ -310,18 +355,23 @@ textarea#description, textarea#bio {
 
 /* comments */
 
+.comment_wrapper {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.comment_wrapper p {
+  margin-bottom: 2px;
+}
+
 .comment_author {
-  margin-bottom: 40px;
   padding-top: 4px;
   font-size: 0.9em;
 }
 
 .comment_content {
-  margin-bottom: 30px;
-}
-
-.comment_content p {
-  margin-bottom: 0px;
+  margin-left: 8px;
+  margin-top: 8px;
 }
 
 textarea#comment_content {
@@ -563,6 +613,15 @@ table.media_panel th {
   header {
     text-align: center;
   }
+  
+  .header_right {
+    margin-right: 2%;
+    float: none;
+  }
+  
+  a.logo {
+    margin-left: 2%;
+  }
 }
 
 @media screen and (max-width: 570px) {