Dashboard Widget #548

css/dashboard.scss

@@ -0,0 +1,91 @@
+/**
+ * Audio Player
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the LICENSE.md file.
+ *
+ * @author Marcel Scherello <audioplayer@scherello.de>
+ * @copyright 2021 Marcel Scherello
+ */
+
+ .icon-audioplayer {
+    @include icon-color('app-dark', 'audioplayer', $color-black, 1);
+ }
+
+ body.dark .icon-analytics,
+ body.theme--dark .icon-analytics {
+    @include icon-color('app', 'audioplayer', $color-black, 1);
+ }
+
+.panel--content .playerButton {
+        width: 40px;
+        height: 40px;
+        position: relative;
+        display: inline-block;
+}
+
+.panel--content .playerBar {
+        width: 130px;
+        margin: auto;
+}
+
+.panel--content .categoryBar,
+.panel--content .coverBar,
+.panel--content .itemBar{
+        margin: auto;
+        width: 180px;
+        margin-top: 10px;
+}
+
+.panel--content .coverBar .cover {
+    width: 180px;
+    height: 180px;
+    text-align: center;
+    font-size: 60px;
+    line-height: 150px;
+}
+
+.panel--content .button {
+        background-size: 80%;
+        background-position: center center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.4;
+}
+
+.panel--content .button.previous {
+  @include icon-color('previous', 'audioplayer', $color-black, 1);
+}
+
+.panel--content .button.next {
+  @include icon-color('next', 'audioplayer', $color-black, 1);
+}
+
+.panel--content .button.play-pause {
+  @include icon-color('play', 'audioplayer', $color-black, 1);
+}
+
+.panel--content .button.play-pause.playing {
+  @include icon-color('pause', 'audioplayer', $color-black, 1);
+}
+
+.panel--content .button.previous,
+.panel--content .button.play-pause,
+.panel--content .button.previous,
+.panel--content .button.next {
+  background-size: 80%;
+  background-position: center center;
+  opacity: 0.5;
+}
+
+.panel--content .button.previous:hover,
+.panel--content .button.play-pause:hover,
+.panel--content .button.previous:hover,
+.panel--content .button.next:hover {
+      opacity: 1;
+}
+
+

css/style.scss

@@ -23,7 +23,7 @@
   opacity: 0.5;
   z-index: 100;
   padding: 15px 40px;
-  background-position: 15px;
+  background-position: 15px 19px;
   cursor: pointer;
 }