diff --git a/src/renderer/less/fullscreen.less b/src/renderer/less/fullscreen.less
new file mode 100644
index 00000000..3c4ef17d
--- /dev/null
+++ b/src/renderer/less/fullscreen.less
@@ -0,0 +1,392 @@
+.fullscreen-view-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: black;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+}
+
+.fullscreen-view {
+  width: 100%;
+  height: 100%;
+  background: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .app-content-container {
+    width:100%;
+    height:100%;
+    #app-content {
+      width:100%;
+      height:100%;
+    }
+  }
+
+
+
+
+  .fs-row {
+    flex-grow: 0.5;
+  }
+
+  .playback-button--small.active {
+    background-color: rgb(200 200 200 / 25%);
+  }
+
+  .playback-button--small {
+    opacity: 0.7;
+  }
+
+  .right-col {
+    height: 50vh;
+  }
+
+  .bg-artwork-container {
+    display: block !important;
+  }
+
+  @media only screen and (max-width: 1121px) {
+    .display--large {
+      display: flex !important;
+    }
+  }
+
+  .display--large {
+    display: flex;
+
+    .slider {
+      width: 100%;
+      z-index: 1;
+    }
+
+    .input-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%
+    }
+
+    .volume-button--small {
+      border-radius: 6px;
+      color: inherit;
+      background-size: 16px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-color: transparent;
+      height: 15px;
+      width: 30px;
+      border: 0px;
+      box-shadow: unset;
+      opacity: 0.70;
+      background-image: url("./assets/feather/volume-2.svg");
+    }
+
+    .volume-button--small:active {
+      transform: scale(0.9);
+    }
+
+    .volume-button--small.active {
+      background-image: url("./assets/feather/volume.svg");
+    }
+
+    input[type=range] {
+      -webkit-appearance: none;
+      height: 4px;
+      background: rgba(255, 255, 255, 0.4);
+      border-radius: 5px;
+      background-size: 70% 100%;
+      background-repeat: no-repeat;
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        height: 14px;
+        width: 14px;
+        border-radius: 50%;
+        background: rgb(50 50 50);
+        cursor: default;
+        box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+        transition: all var(--appleTransition);
+      }
+
+      &::-webkit-slider-thumb:hover {
+        background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
+        transform: scale(1.2);
+      }
+
+      &::-webkit-slider-thumb:active {
+        background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
+        transform: scale(1);
+      }
+
+      &::-webkit-slider-runnable-track {
+        -webkit-appearance: none;
+        box-shadow: none;
+        border: none;
+        background: transparent;
+      }
+    }
+  }
+
+
+  .background {
+    position: absolute;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+
+    .bgArtworkMaterial {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      .bg-artwork-container {
+        z-index: unset;
+      }
+
+      .bg-artwork-container .bg-artwork {
+        filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
+      }
+
+
+    }
+  }
+
+  .lyrics-col {
+
+    height: 62vh;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    width: 80%;
+
+    ::-webkit-scrollbar-thumb {
+      box-shadow: unset;
+    }
+
+    &:hover ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
+    }
+
+    .no-lyrics {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .lyric-line {
+      font-size: 35px;
+    }
+
+  }
+
+  .queue-col {
+
+    width: 60vh;
+    height: 62vh;
+
+    .queue-title {
+      opacity: 0.6;
+    }
+
+    .queue-panel > * {
+      z-index: 3;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      box-shadow: unset;
+    }
+
+    &:hover ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
+    }
+  }
+
+  .tab-toggles {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 15vh;
+    height: 5vh;
+    justify-content: space-evenly;
+
+    .volume {
+      background-image: url("./assets/feathers/volume.svg");
+      padding: 0.5vh;
+      width: 2vh;
+      height: 2vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
+    .queue {
+      background-image: url("./assets/list.svg");
+      padding: 0.5vh;
+      width: 2.5vh;
+      height: 2.5vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
+    .lyrics {
+      background-image: url("./assets/quote-right.svg");
+      padding: 0.5vh;
+      width: 2.5vh;
+      height: 2.5vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
+    .active {
+      background-color: rgba(200, 200, 200, 0.7);
+      border-radius: 3px;
+    }
+  }
+
+  .artwork-col {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    .artwork {
+      width: 50vh;
+      height: 50vh;
+    }
+
+    .controls-parents {
+      width: 50vh;
+    }
+
+    .app-playback-controls {
+      .song-artist, .song-name {
+        font-weight: 600;
+        text-align: center;
+        font-size: 0.9em;
+        height: 1.2em;
+        line-height: 0.9em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 360px;
+
+        .song-name-normal {
+          height: inherit;
+        }
+
+        &.song-artist-marquee {
+          > marquee {
+            //margin-bottom: -3px;
+          }
+        }
+      }
+
+      .song-artist {
+        font-size: 0.875em;
+        font-weight: 400;
+      }
+
+      .song-name {
+        width: unset !important;
+        margin-top: 0.15vh;
+        display: -webkit-box;
+        line-height: 1.2;
+        text-overflow: ellipsis;
+        text-align: center;
+      }
+    }
+
+    .app-playback-controls .playback-info {
+      margin-top: 0.5vh;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+
+      input[type="range"] {
+        width: 100%;
+      }
+
+      > div {
+        width: 100%;
+        text-align: center;
+      }
+
+
+    }
+
+    .app-playback-controls .song-progress {
+      @bgColor: transparent;
+      //height: 16px;
+      position: absolute;
+      bottom: -1.5vh;
+      left: 0px;
+      background: @bgColor;
+
+      .song-duration p {
+        font-weight: 400;
+        font-size: 10px;
+        height: 1.2em;
+        line-height: 1.3em;
+        overflow: hidden;
+        margin: 0 0 0 0.25em;
+      }
+
+      &:hover {
+        > input[type=range] {
+          &::-webkit-slider-thumb {
+            opacity: 1;
+            transform: scale(1);
+            z-index: 1;
+          }
+        }
+      }
+
+      input[type=range] {
+        appearance: none;
+        width: 100%;
+        height: 4px;
+        background-color: rgb(200 200 200 / 10%);
+        border-radius: 2px;
+
+        &::-webkit-slider-thumb {
+          opacity: 0;
+          transform: scale(0.5);
+          -webkit-appearance: none;
+          appearance: none;
+          width: 12px;
+          height: 12px;
+          border-radius: 100%;
+          background: var(--songProgressColor);
+          cursor: default;
+          transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+        }
+
+        &::-moz-range-thumb {
+          width: 8px;
+          height: 8px;
+          border-radius: 100%;
+          background: var(--songProgressColor);
+          cursor: default;
+        }
+      }
+    }
+
+    .control-buttons {
+      margin-top: 2vh;
+      display: inline-flex;
+      width: 100%;
+      justify-content: center;
+    }
+
+  }
+}
diff --git a/src/renderer/less/miniplayer.less b/src/renderer/less/miniplayer.less
new file mode 100644
index 00000000..795c2158
--- /dev/null
+++ b/src/renderer/less/miniplayer.less
@@ -0,0 +1,410 @@
+.mini-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .fs-row {
+    flex-grow: 1;
+  }
+
+  .playback-button--small.active {
+    background-color: rgb(200 200 200 / 25%);
+  }
+
+  .player-exit {
+    z-index: 3;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    -webkit-app-region: no-drag;
+  }
+
+  .player-pin {
+    z-index: 3;
+    position: absolute;
+    min-width: 20px;
+    min-height: 20px;
+    top: 5px;
+    right: 30px;
+    -webkit-app-region: no-drag;
+  }
+
+  #mini-pin {
+    display: none;
+  }
+
+  .player-pin:hover #mini-pin {
+    display: block;
+  }
+
+  .playback-button--small {
+    opacity: 0.7;
+  }
+
+  .right-col {
+    height: 50vh;
+  }
+
+  @media only screen and (max-width: 1121px) {
+    .display--large {
+      display: flex !important;
+    }
+  }
+
+  .display--large {
+    display: flex;
+
+    .slider {
+      width: 100%;
+      z-index: 1;
+    }
+
+    .input-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%
+    }
+
+    .volume-button--small {
+      border-radius: 6px;
+      color: inherit;
+      background-size: 16px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-color: transparent;
+      height: 15px;
+      width: 30px;
+      border: 0px;
+      box-shadow: unset;
+      opacity: 0.70;
+      background-image: url("./assets/feather/volume-2.svg");
+    }
+
+    .volume-button--small:active {
+      transform: scale(0.9);
+    }
+
+    .volume-button--small.active {
+      background-image: url("./assets/feather/volume.svg");
+    }
+
+    input[type=range] {
+      -webkit-appearance: none;
+      height: 4px;
+      background: rgba(255, 255, 255, 0.4);
+      border-radius: 5px;
+      background-size: 70% 100%;
+      background-repeat: no-repeat;
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        height: 14px;
+        width: 14px;
+        border-radius: 50%;
+        background: rgb(50 50 50);
+        cursor: default;
+        box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+        transition: all var(--appleTransition);
+      }
+
+      &::-webkit-slider-thumb:hover {
+        background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
+        transform: scale(1.2);
+      }
+
+      &::-webkit-slider-thumb:active {
+        background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
+        transform: scale(1);
+      }
+
+      &::-webkit-slider-runnable-track {
+        -webkit-appearance: none;
+        box-shadow: none;
+        border: none;
+        background: transparent;
+      }
+    }
+  }
+
+
+  .background {
+    position: absolute;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+
+    .bgArtworkMaterial {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      .bg-artwork-container {
+        z-index: unset;
+      }
+
+      .bg-artwork-container .bg-artwork {
+        filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
+      }
+
+      .no-animation {
+        animation: unset;
+      }
+    }
+  }
+
+
+  .lyrics-col {
+
+    height: 62vh;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    width: 80%;
+
+    ::-webkit-scrollbar-thumb {
+      box-shadow: unset;
+    }
+
+    &:hover ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
+    }
+
+    .no-lyrics {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .lyric-line {
+      font-size: 35px;
+    }
+
+  }
+
+  .queue-col {
+
+    width: 60vh;
+    height: 50vh;
+
+    .queue-title {
+      opacity: 0.6;
+    }
+
+    .queue-panel > * {
+      z-index: 3;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      box-shadow: unset;
+    }
+
+    &:hover ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
+    }
+  }
+
+  .tab-toggles {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 15vh;
+    height: 5vh;
+    justify-content: space-evenly;
+
+    .volume {
+      background-image: url("./assets/feathers/volume.svg");
+      padding: 0.5vh;
+      width: 2vh;
+      height: 2vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
+    .queue {
+      background-image: url("./assets/list.svg");
+      padding: 0.5vh;
+      width: 2.5vh;
+      height: 2.5vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
+    .lyrics {
+      background-image: url("./assets/quote-right.svg");
+      padding: 0.5vh;
+      width: 2.5vh;
+      height: 2.5vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
+    .active {
+      background-color: rgba(200, 200, 200, 0.7);
+      border-radius: 3px;
+    }
+  }
+
+  .artwork-col {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    .artwork {
+      width: 100%;
+      height: 100%;
+
+      .mediaitem-artwork {
+        border-radius: unset;
+      }
+    }
+
+    .controls-parents {
+      width: 100%;
+      position: absolute;
+      background: #0000009e;
+      backdrop-filter: blur(10px);
+      bottom: 0px;
+      z-index: 3;
+      opacity: 0;
+      padding: 3%;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+
+    .app-playback-controls {
+      -webkit-app-region: no-drag;
+
+      .song-artist, .song-name {
+        font-weight: 600;
+        text-align: center;
+        font-size: 0.9em;
+        height: 1.2em;
+        line-height: 0.9em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 360px;
+
+        .song-name-normal {
+          height: inherit;
+        }
+
+        &.song-artist-marquee {
+          > marquee {
+            //margin-bottom: -3px;
+          }
+        }
+      }
+
+      .song-artist {
+        font-size: 0.875em;
+        font-weight: 400;
+      }
+
+      .song-name {
+        width: unset !important;
+        margin-top: 0.15vh;
+        display: -webkit-box;
+        line-height: 1.2;
+        text-overflow: ellipsis;
+        text-align: center;
+      }
+    }
+
+    .app-playback-controls .playback-info {
+      margin-top: 0.5vh;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+
+      input[type="range"] {
+        width: 100%;
+      }
+
+      > div {
+        width: 100%;
+        text-align: center;
+      }
+
+
+    }
+
+    .app-playback-controls .song-progress {
+      @bgColor: transparent;
+      //height: 16px;
+      position: absolute;
+      bottom: -3.5vh;
+      left: 0px;
+      background: @bgColor;
+
+      .song-duration p {
+        font-weight: 400;
+        font-size: 10px;
+        height: 1.2em;
+        line-height: 1.3em;
+        overflow: hidden;
+        margin: 0 0 0 0.25em;
+      }
+
+      &:hover {
+        > input[type=range] {
+          &::-webkit-slider-thumb {
+            opacity: 1;
+            transform: scale(1);
+            z-index: 1;
+          }
+        }
+      }
+
+      input[type=range] {
+        appearance: none;
+        width: 100%;
+        height: 4px;
+        background-color: rgb(200 200 200 / 10%);
+        border-radius: 2px;
+
+        &::-webkit-slider-thumb {
+          opacity: 0;
+          transform: scale(0.5);
+          -webkit-appearance: none;
+          appearance: none;
+          width: 12px;
+          height: 12px;
+          border-radius: 100%;
+          background: var(--songProgressColor);
+          cursor: default;
+          transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+        }
+
+        &::-moz-range-thumb {
+          width: 8px;
+          height: 8px;
+          border-radius: 100%;
+          background: var(--songProgressColor);
+          cursor: default;
+        }
+      }
+    }
+
+    .control-buttons {
+      margin-top: 3.5vh;
+      display: inline-flex;
+      width: 100%;
+      justify-content: center;
+    }
+
+  }
+}
diff --git a/src/renderer/main/components/svg-icon.js b/src/renderer/main/components/svg-icon.js
index 0ad99d2a..71ddd29c 100644
--- a/src/renderer/main/components/svg-icon.js
+++ b/src/renderer/main/components/svg-icon.js
@@ -1,5 +1,7 @@
+import {html} from "../html.js"
+
 export const svgIcon = Vue.component("svg-icon", {
-    template: `
+    template: html`
         <div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
     `,
     props: {
diff --git a/src/renderer/main/html.js b/src/renderer/main/html.js
new file mode 100644
index 00000000..2b4d140c
--- /dev/null
+++ b/src/renderer/main/html.js
@@ -0,0 +1,3 @@
+export function html (str) {
+    return str[0]
+}
\ No newline at end of file
diff --git a/src/renderer/style.less b/src/renderer/style.less
index f9b394e8..a9d8e5c4 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2058,809 +2058,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   animation: unset !important;
 }
 
-.fullscreen-view-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: black;
-  z-index: 99;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 1;
-}
-
-.fullscreen-view {
-  width: 100%;
-  height: 100%;
-  background: black;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .app-content-container {
-    width:100%;
-    height:100%;
-    #app-content {
-      width:100%;
-      height:100%;
-    }
-  }
-
-
-
-
-  .fs-row {
-    flex-grow: 0.5;
-  }
-
-  .playback-button--small.active {
-    background-color: rgb(200 200 200 / 25%);
-  }
-
-  .playback-button--small {
-    opacity: 0.7;
-  }
-
-  .right-col {
-    height: 50vh;
-  }
-
-  .bg-artwork-container {
-    display: block !important;
-  }
-
-  @media only screen and (max-width: 1121px) {
-    .display--large {
-      display: flex !important;
-    }
-  }
-
-  .display--large {
-    display: flex;
-
-    .slider {
-      width: 100%;
-      z-index: 1;
-    }
-
-    .input-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%
-    }
-
-    .volume-button--small {
-      border-radius: 6px;
-      color: inherit;
-      background-size: 16px;
-      background-repeat: no-repeat;
-      background-position: center;
-      background-color: transparent;
-      height: 15px;
-      width: 30px;
-      border: 0px;
-      box-shadow: unset;
-      opacity: 0.70;
-      background-image: url("./assets/feather/volume-2.svg");
-    }
-
-    .volume-button--small:active {
-      transform: scale(0.9);
-    }
-
-    .volume-button--small.active {
-      background-image: url("./assets/feather/volume.svg");
-    }
-
-    input[type=range] {
-      -webkit-appearance: none;
-      height: 4px;
-      background: rgba(255, 255, 255, 0.4);
-      border-radius: 5px;
-      background-size: 70% 100%;
-      background-repeat: no-repeat;
-
-      &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        height: 14px;
-        width: 14px;
-        border-radius: 50%;
-        background: rgb(50 50 50);
-        cursor: default;
-        box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
-        transition: all var(--appleTransition);
-      }
-
-      &::-webkit-slider-thumb:hover {
-        background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
-        transform: scale(1.2);
-      }
-
-      &::-webkit-slider-thumb:active {
-        background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
-        transform: scale(1);
-      }
-
-      &::-webkit-slider-runnable-track {
-        -webkit-appearance: none;
-        box-shadow: none;
-        border: none;
-        background: transparent;
-      }
-    }
-  }
-
-
-  .background {
-    position: absolute;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-
-    .bgArtworkMaterial {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-
-      .bg-artwork-container {
-        z-index: unset;
-      }
-
-      .bg-artwork-container .bg-artwork {
-        filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
-      }
-
-
-    }
-  }
-
-  .lyrics-col {
-
-    height: 62vh;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    width: 80%;
-
-    ::-webkit-scrollbar-thumb {
-      box-shadow: unset;
-    }
-
-    &:hover ::-webkit-scrollbar-thumb {
-      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
-    }
-
-    .no-lyrics {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-    }
-
-    .lyric-line {
-      font-size: 35px;
-    }
-
-  }
-
-  .queue-col {
-
-    width: 60vh;
-    height: 62vh;
-
-    .queue-title {
-      opacity: 0.6;
-    }
-
-    .queue-panel > * {
-      z-index: 3;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      box-shadow: unset;
-    }
-
-    &:hover ::-webkit-scrollbar-thumb {
-      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
-    }
-  }
-
-  .tab-toggles {
-    display: flex;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 15vh;
-    height: 5vh;
-    justify-content: space-evenly;
-
-    .volume {
-      background-image: url("./assets/feathers/volume.svg");
-      padding: 0.5vh;
-      width: 2vh;
-      height: 2vh;
-      background-origin: content-box;
-      background-repeat: no-repeat;
-    }
-
-    .queue {
-      background-image: url("./assets/list.svg");
-      padding: 0.5vh;
-      width: 2.5vh;
-      height: 2.5vh;
-      background-origin: content-box;
-      background-repeat: no-repeat;
-    }
-
-    .lyrics {
-      background-image: url("./assets/quote-right.svg");
-      padding: 0.5vh;
-      width: 2.5vh;
-      height: 2.5vh;
-      background-origin: content-box;
-      background-repeat: no-repeat;
-    }
-
-    .active {
-      background-color: rgba(200, 200, 200, 0.7);
-      border-radius: 3px;
-    }
-  }
-
-  .artwork-col {
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-
-    .artwork {
-      width: 50vh;
-      height: 50vh;
-    }
-
-    .controls-parents {
-      width: 50vh;
-    }
-
-    .app-playback-controls {
-      .song-artist, .song-name {
-        font-weight: 600;
-        text-align: center;
-        font-size: 0.9em;
-        height: 1.2em;
-        line-height: 0.9em;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 360px;
-
-        .song-name-normal {
-          height: inherit;
-        }
-
-        &.song-artist-marquee {
-          > marquee {
-            //margin-bottom: -3px;
-          }
-        }
-      }
-
-      .song-artist {
-        font-size: 0.875em;
-        font-weight: 400;
-      }
-
-      .song-name {
-        width: unset !important;
-        margin-top: 0.15vh;
-        display: -webkit-box;
-        line-height: 1.2;
-        text-overflow: ellipsis;
-        text-align: center;
-      }
-    }
-
-    .app-playback-controls .playback-info {
-      margin-top: 0.5vh;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      position: relative;
-
-      input[type="range"] {
-        width: 100%;
-      }
-
-      > div {
-        width: 100%;
-        text-align: center;
-      }
-
-
-    }
-
-    .app-playback-controls .song-progress {
-      @bgColor: transparent;
-      //height: 16px;
-      position: absolute;
-      bottom: -1.5vh;
-      left: 0px;
-      background: @bgColor;
-
-      .song-duration p {
-        font-weight: 400;
-        font-size: 10px;
-        height: 1.2em;
-        line-height: 1.3em;
-        overflow: hidden;
-        margin: 0 0 0 0.25em;
-      }
-
-      &:hover {
-        > input[type=range] {
-          &::-webkit-slider-thumb {
-            opacity: 1;
-            transform: scale(1);
-            z-index: 1;
-          }
-        }
-      }
-
-      input[type=range] {
-        appearance: none;
-        width: 100%;
-        height: 4px;
-        background-color: rgb(200 200 200 / 10%);
-        border-radius: 2px;
-
-        &::-webkit-slider-thumb {
-          opacity: 0;
-          transform: scale(0.5);
-          -webkit-appearance: none;
-          appearance: none;
-          width: 12px;
-          height: 12px;
-          border-radius: 100%;
-          background: var(--songProgressColor);
-          cursor: default;
-          transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
-        }
-
-        &::-moz-range-thumb {
-          width: 8px;
-          height: 8px;
-          border-radius: 100%;
-          background: var(--songProgressColor);
-          cursor: default;
-        }
-      }
-    }
-
-    .control-buttons {
-      margin-top: 2vh;
-      display: inline-flex;
-      width: 100%;
-      justify-content: center;
-    }
-
-  }
-}
-
-.mini-view {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .fs-row {
-    flex-grow: 1;
-  }
-
-  .playback-button--small.active {
-    background-color: rgb(200 200 200 / 25%);
-  }
-
-  .player-exit {
-    z-index: 3;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    -webkit-app-region: no-drag;
-  }
-
-  .player-pin {
-    z-index: 3;
-    position: absolute;
-    min-width: 20px;
-    min-height: 20px;
-    top: 5px;
-    right: 30px;
-    -webkit-app-region: no-drag;
-  }
-
-  #mini-pin {
-    display: none;
-  }
-
-  .player-pin:hover #mini-pin {
-    display: block;
-  }
-
-  .playback-button--small {
-    opacity: 0.7;
-  }
-
-  .right-col {
-    height: 50vh;
-  }
-
-  @media only screen and (max-width: 1121px) {
-    .display--large {
-      display: flex !important;
-    }
-  }
-
-  .display--large {
-    display: flex;
-
-    .slider {
-      width: 100%;
-      z-index: 1;
-    }
-
-    .input-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%
-    }
-
-    .volume-button--small {
-      border-radius: 6px;
-      color: inherit;
-      background-size: 16px;
-      background-repeat: no-repeat;
-      background-position: center;
-      background-color: transparent;
-      height: 15px;
-      width: 30px;
-      border: 0px;
-      box-shadow: unset;
-      opacity: 0.70;
-      background-image: url("./assets/feather/volume-2.svg");
-    }
-
-    .volume-button--small:active {
-      transform: scale(0.9);
-    }
-
-    .volume-button--small.active {
-      background-image: url("./assets/feather/volume.svg");
-    }
-
-    input[type=range] {
-      -webkit-appearance: none;
-      height: 4px;
-      background: rgba(255, 255, 255, 0.4);
-      border-radius: 5px;
-      background-size: 70% 100%;
-      background-repeat: no-repeat;
-
-      &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        height: 14px;
-        width: 14px;
-        border-radius: 50%;
-        background: rgb(50 50 50);
-        cursor: default;
-        box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
-        transition: all var(--appleTransition);
-      }
-
-      &::-webkit-slider-thumb:hover {
-        background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
-        transform: scale(1.2);
-      }
-
-      &::-webkit-slider-thumb:active {
-        background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
-        transform: scale(1);
-      }
-
-      &::-webkit-slider-runnable-track {
-        -webkit-appearance: none;
-        box-shadow: none;
-        border: none;
-        background: transparent;
-      }
-    }
-  }
-
-
-  .background {
-    position: absolute;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-    -webkit-user-select: none;
-    -webkit-app-region: drag;
-
-    .bgArtworkMaterial {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-
-      .bg-artwork-container {
-        z-index: unset;
-      }
-
-      .bg-artwork-container .bg-artwork {
-        filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
-      }
-
-      .no-animation {
-        animation: unset;
-      }
-    }
-  }
-
-
-  .lyrics-col {
-
-    height: 62vh;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    width: 80%;
-
-    ::-webkit-scrollbar-thumb {
-      box-shadow: unset;
-    }
-
-    &:hover ::-webkit-scrollbar-thumb {
-      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
-    }
-
-    .no-lyrics {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-    }
-
-    .lyric-line {
-      font-size: 35px;
-    }
-
-  }
-
-  .queue-col {
-
-    width: 60vh;
-    height: 50vh;
-
-    .queue-title {
-      opacity: 0.6;
-    }
-
-    .queue-panel > * {
-      z-index: 3;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      box-shadow: unset;
-    }
-
-    &:hover ::-webkit-scrollbar-thumb {
-      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
-    }
-  }
-
-  .tab-toggles {
-    display: flex;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 15vh;
-    height: 5vh;
-    justify-content: space-evenly;
-
-    .volume {
-      background-image: url("./assets/feathers/volume.svg");
-      padding: 0.5vh;
-      width: 2vh;
-      height: 2vh;
-      background-origin: content-box;
-      background-repeat: no-repeat;
-    }
-
-    .queue {
-      background-image: url("./assets/list.svg");
-      padding: 0.5vh;
-      width: 2.5vh;
-      height: 2.5vh;
-      background-origin: content-box;
-      background-repeat: no-repeat;
-    }
-
-    .lyrics {
-      background-image: url("./assets/quote-right.svg");
-      padding: 0.5vh;
-      width: 2.5vh;
-      height: 2.5vh;
-      background-origin: content-box;
-      background-repeat: no-repeat;
-    }
-
-    .active {
-      background-color: rgba(200, 200, 200, 0.7);
-      border-radius: 3px;
-    }
-  }
-
-  .artwork-col {
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-
-    .artwork {
-      width: 100%;
-      height: 100%;
-
-      .mediaitem-artwork {
-        border-radius: unset;
-      }
-    }
-
-    .controls-parents {
-      width: 100%;
-      position: absolute;
-      background: #0000009e;
-      backdrop-filter: blur(10px);
-      bottom: 0px;
-      z-index: 3;
-      opacity: 0;
-      padding: 3%;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-
-    .app-playback-controls {
-      -webkit-app-region: no-drag;
-
-      .song-artist, .song-name {
-        font-weight: 600;
-        text-align: center;
-        font-size: 0.9em;
-        height: 1.2em;
-        line-height: 0.9em;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 360px;
-
-        .song-name-normal {
-          height: inherit;
-        }
-
-        &.song-artist-marquee {
-          > marquee {
-            //margin-bottom: -3px;
-          }
-        }
-      }
-
-      .song-artist {
-        font-size: 0.875em;
-        font-weight: 400;
-      }
-
-      .song-name {
-        width: unset !important;
-        margin-top: 0.15vh;
-        display: -webkit-box;
-        line-height: 1.2;
-        text-overflow: ellipsis;
-        text-align: center;
-      }
-    }
-
-    .app-playback-controls .playback-info {
-      margin-top: 0.5vh;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      position: relative;
-
-      input[type="range"] {
-        width: 100%;
-      }
-
-      > div {
-        width: 100%;
-        text-align: center;
-      }
-
-
-    }
-
-    .app-playback-controls .song-progress {
-      @bgColor: transparent;
-      //height: 16px;
-      position: absolute;
-      bottom: -3.5vh;
-      left: 0px;
-      background: @bgColor;
-
-      .song-duration p {
-        font-weight: 400;
-        font-size: 10px;
-        height: 1.2em;
-        line-height: 1.3em;
-        overflow: hidden;
-        margin: 0 0 0 0.25em;
-      }
-
-      &:hover {
-        > input[type=range] {
-          &::-webkit-slider-thumb {
-            opacity: 1;
-            transform: scale(1);
-            z-index: 1;
-          }
-        }
-      }
-
-      input[type=range] {
-        appearance: none;
-        width: 100%;
-        height: 4px;
-        background-color: rgb(200 200 200 / 10%);
-        border-radius: 2px;
-
-        &::-webkit-slider-thumb {
-          opacity: 0;
-          transform: scale(0.5);
-          -webkit-appearance: none;
-          appearance: none;
-          width: 12px;
-          height: 12px;
-          border-radius: 100%;
-          background: var(--songProgressColor);
-          cursor: default;
-          transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
-        }
-
-        &::-moz-range-thumb {
-          width: 8px;
-          height: 8px;
-          border-radius: 100%;
-          background: var(--songProgressColor);
-          cursor: default;
-        }
-      }
-    }
-
-    .control-buttons {
-      margin-top: 3.5vh;
-      display: inline-flex;
-      width: 100%;
-      justify-content: center;
-    }
-
-  }
-}
+@import url("less/fullscreen.less");
+@import url("less/miniplayer.less");
 
 // Cider App