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", {
|
||||
template: `
|
||||
template: html`
|
||||
<div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
|
||||
`,
|
||||
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;
|
||||
}
|
||||
|
||||
.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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue