Reorganized player buttons

2011-10-01 17:04:28 +04:00
parent 037f16ea80
commit 0071d476ae
10 changed files with 77 additions and 43 deletions
@@ -1,19 +1,6 @@
+@import "opacity";
+
 .player {
-  .buttons {
-    text-align: center;
-    height: 36px;
-  }
-  .play {
-    border-radius: 21px !important;
-    padding: 11px 11px 11px 15px !important;
-    margin-top: -10px !important;
-  }
-  .pause {
-    font-weight: bold;
-    border-radius: 21px !important;
-    padding: 11px 16px 11px 16px !important;
-    display: none;
-  }
  .now-playing {
    text-align: center;
  }
@@ -34,21 +21,58 @@
      }
    }
  }
-  .secondary-buttons {
-    margin: 10px 0;
-    text-align: center;
-    a {
-      font-size: 11px;
-      color: #cacaca;
-      font-weight: bold;
-      text-decoration: none;
-      cursor: pointer;
-      
-      &:hover {
-        color: #b0b0b0;
+  .buttons {
+    clear: both;
+    height: 50px;
+    .secondary-buttons {
+      float: left;
+      width: 20px;
+      margin: -10px 0 0 20px;
+      text-align: center;
+      a {
+        display: block;
+        margin: -5px 0 0 0;
+        @include opacity(0.3);
+        cursor: pointer;
+        &.do_empty {
+          margin-top: -2px;
+        }
+        &:hover {
+          @include opacity(0.6);
+        }
+        &.on {
+          @include opacity(0.9);
+        }
      }
-      &.on {
-        color: #606060;
+    }
+    .primary-buttons {
+      float: left;
+      width: 200px;
+      margin: 10px 0 0 0;
+      text-align: center;
+      height: 36px;
+      .play {
+        border-radius: 21px !important;
+        padding: 11px 11px 11px 15px !important;
+        margin-top: -10px !important;
+      }
+      .pause {
+        font-weight: bold;
+        border-radius: 21px !important;
+        padding: 11px 16px 11px 16px !important;
+        display: none;
+      }
+    }
+    .quality-buttons {
+      float: left;
+      width: 20px;
+      a {
+        display: block;
+        @include opacity(0.4);
+        cursor: pointer;
+        &:hover {
+          @include opacity(0.8);
+        }
      }
    }
  }