added html module for js vue components
This commit is contained in:
booploops
parent
fa2c36b6ed
commit
964a8d328c
5 changed files with 810 additions and 804 deletions
392
src/renderer/less/fullscreen.less
Normal file
392
src/renderer/less/fullscreen.less
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
410
src/renderer/less/miniplayer.less
Normal file
410
src/renderer/less/miniplayer.less
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
|
import {html} from "../html.js"
|
||||||
|
|
||||||
export const svgIcon = Vue.component("svg-icon", {
|
export const svgIcon = Vue.component("svg-icon", {
|
||||||
template: `
|
template: html`
|
||||||
<div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
|
<div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
|
||||||
`,
|
`,
|
||||||
props: {
|
props: {
|
||||||
|
|
|
||||||
3
src/renderer/main/html.js
Normal file
3
src/renderer/main/html.js
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
export function html (str) {
|
||||||
|
return str[0]
|
||||||
|
}
|
||||||
|
|
@ -2058,809 +2058,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
||||||
animation: unset !important;
|
animation: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen-view-container {
|
@import url("less/fullscreen.less");
|
||||||
position: absolute;
|
@import url("less/miniplayer.less");
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cider App
|
// Cider App
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue