Finish Media module.

scss/menus/media.scss

@@ -0,0 +1,162 @@
+@import "../colors";
+
+.media-indicator-container {
+  min-width: 40rem;
+  min-height: 10rem;
+  background: $mantle;
+  border: 0.25rem solid $surface0; 
+  border-radius: 0.4rem;
+}
+
+.media-indicator-items {
+  margin: 1rem;
+  margin-bottom: 1.3rem;
+}
+
+.media-indicator-current-album-cover {
+  border: 0.25rem solid $surface0; 
+  background-color: $surface0;
+  border-radius: 0.25rem;
+  min-width: 11rem;
+  min-height: 11rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.media-indicator-right-section {
+  margin-left: 2rem;
+}
+
+.media-indicator-current-song-name {
+  margin-bottom: 0.75rem;
+}
+
+.media-indicator-current-song-author {
+  margin-bottom: 0.5rem;
+}
+
+.media-indicator-current-song-name-label {
+  color: $lavender;
+  font-size: 1.65rem;
+}
+
+.media-indicator-current-song-author-label {
+  color: $teal;
+  font-size: 1.1rem;
+}
+
+.media-indicator-current-song-album-label {
+  color: $pink;
+  font-size: 1.1rem;
+}
+
+.media-indicator-current-controls {
+  margin-top: 1.5rem;
+  margin-bottom: 0.2rem;
+}
+
+.media-indicator-control {
+  margin: 0rem 0.5rem;
+}
+
+.media-indicator-time {
+  color: $overlay2;
+  font-size: 0.9rem;
+  font-weight: 800;
+  margin-top: 0.9rem;
+
+  &.total {
+    margin-left: 1.2rem;
+  }
+
+  &.current {
+    margin-right: 1.2rem;
+  }
+}
+
+.media-indicator-control-button {
+  background: $lavender;
+  color: $crust;
+  min-height: 2.1rem;
+  min-width: 2.4rem;
+  border-radius: 0.2rem;
+
+  tooltip {
+    min-width: 10rem;
+    min-height: 10rem;
+    background: red;
+  }
+
+  &.disabled {
+    background: $surface0;
+  }
+
+  &.enabled {
+    background: $lavender;
+    
+    &:hover {
+      background: $pink;
+    }
+
+    &.active {
+      background: $pink;
+    }
+  }
+
+}
+
+image {
+  font-size: 1.5rem;
+}
+
+.menu-slider.media.progress {
+  margin-top: 1rem;
+  min-height: 2rem;
+  min-width: 17rem;
+
+  trough {
+    background: $base;
+    border-radius: 0.3rem;
+
+    highlight,
+    progress {
+      min-height: 1rem;
+      background: $pink;
+      border-radius: 0.3rem;
+    }
+  }
+
+  slider {
+    box-shadow: none;
+    background-color: transparent;
+    min-height: 1.2rem;
+    min-width: 1.2rem;
+    border: 0rem solid transparent;
+    border-radius: 0.3rem;
+  }
+
+  &:hover {
+    trough {
+      background: $surface0;
+    }
+
+    slider {
+      background: $overlay0;
+      box-shadow: none;
+    }
+  }
+
+  &:disabled {
+
+    highlight,
+    progress {
+    }
+  }
+
+  trough:focus {
+
+    slider {
+    }
+  }
+}

scss/menus/menu.scss

@@ -1,13 +1,12 @@
 .menu-slider {
-    // @include unset($rec: true);
-
     trough {
         background: $base;
+        border-radius: 0.3rem;
 
         highlight,
         progress {
             background: $peach;
-            border-radius: 0.7rem;
+            border-radius: 0.3rem;
         }
     }
 
@@ -17,7 +16,7 @@
         min-height: 1.6rem;
         min-width: 1.6rem;
         border: 0rem solid transparent;
-        border-radius: 0.7rem;
+        border-radius: 0.3rem;
     }
 
     &:hover {
@@ -30,23 +29,11 @@
             box-shadow: none;
         }
     }
-
-    &:disabled {
-
-        highlight,
-        progress {
-        }
-    }
-
-    trough:focus {
-
-        slider {
-        }
-    }
 }
 
 .menu-switch {
     background-color: $surface0;
+        border-radius: 0.3rem;
 
     &:checked {
         background: $sky;
@@ -56,7 +43,7 @@
         highlight,
         progress {
             background-color: $peach;
-            border-radius: 0.7rem;
+            border-radius: 0.3rem;
         }
     }
 
@@ -66,7 +53,7 @@
         min-height: 1.2rem;
         min-width: 1.2rem;
         border: 0rem solid transparent;
-        border-radius: 0.7rem;
+        border-radius: 0.3rem;
         margin: 0.1rem 0.2rem;
     }