diff --git a/src/renderer/views/components/app-content.ejs b/src/renderer/views/components/app-content.ejs
new file mode 100644
index 00000000..611a67f5
--- /dev/null
+++ b/src/renderer/views/components/app-content.ejs
@@ -0,0 +1,57 @@
+
+
+
\ No newline at end of file
diff --git a/src/renderer/views/components/sidebar-playlist.ejs b/src/renderer/views/components/sidebar-playlist.ejs
index 8a252226..8565c642 100644
--- a/src/renderer/views/components/sidebar-playlist.ejs
+++ b/src/renderer/views/components/sidebar-playlist.ejs
@@ -126,9 +126,9 @@
}
})
- if (typeof this.$parent.getChildren == "function") {
- this.$parent.getChildren()
- console.log(this.$parent.children)
+ if (typeof this.$root.getChildren == "function") {
+ this.$root.getChildren()
+ console.log(this.$root.children)
}
await this.getChildren()
this.$root.sortPlaylists()
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 34c5c9dd..9b5aad5d 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -122,7 +122,7 @@
From 964a8d328ca3832d17052d97d5081f90e17f6f1a Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 29 Jun 2022 14:30:34 -0700
Subject: [PATCH 4/5] added html module for js vue components
---
src/renderer/less/fullscreen.less | 392 +++++++++++
src/renderer/less/miniplayer.less | 410 ++++++++++++
src/renderer/main/components/svg-icon.js | 4 +-
src/renderer/main/html.js | 3 +
src/renderer/style.less | 805 +----------------------
5 files changed, 810 insertions(+), 804 deletions(-)
create mode 100644 src/renderer/less/fullscreen.less
create mode 100644 src/renderer/less/miniplayer.less
create mode 100644 src/renderer/main/html.js
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`
`,
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
From afeab7c38bf24b8e8d38f699d31bda01ac9a398d Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 29 Jun 2022 14:36:50 -0700
Subject: [PATCH 5/5] replaced nav buttons with svg-icon
---
src/renderer/less/elements.less | 2 +-
src/renderer/views/app/chrome-top.ejs | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 4c57db78..9341a783 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -1873,7 +1873,7 @@ input[type=checkbox][switch]:checked:active::before {
align-items: center;
color: white;
- > svg {
+ > ._svg-icon {
height: 16px;
width: 16px;
pointer-events: none;
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index bb7a1f48..ec063027 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -18,13 +18,13 @@