Merge branch 'develop' of https://github.com/Apple-Music-Electron/Cider into develop
This commit is contained in:
cryptofyre
commit
c5996c9abb
5 changed files with 2910 additions and 2920 deletions
|
|
@ -125,7 +125,6 @@ var CiderAudio = {
|
|||
let LLPW_Q = [5, 1, 3.536, 1.25, 8.409, 1.25, 14.14, 7.071, 5, 0.625, 16.82, 20, 20, 20, 28.28, 28.28, 28.28, 20, 33.64, 33.64, 10, 28.28, 7.071, 3.856];
|
||||
let LLPW_GAIN = [0.38, -1.81, -0.23, -0.51, 0.4, 0.84, 0.36, -0.34, 0.27, -1.2, -0.42, -0.67, 0.81, 1.31, -0.71, 0.68, -1.04, 0.79, -0.73, -1.33, 1.17, 0.57, 0.35, 6.33];
|
||||
let LLPW_FREQUENCIES = [16.452, 24.636, 37.134, 74.483, 159.54, 308.18, 670.21, 915.81, 1200.7, 2766.4, 2930.6, 4050.6, 4409.1, 5395.2, 5901.6, 6455.5, 7164.1, 7724.1, 8449, 10573, 12368, 14198, 17910, 18916];
|
||||
CiderAudio.audioNodes.llpw = [];
|
||||
for (i = 0; i < LLPW_FREQUENCIES.length; i++) {
|
||||
CiderAudio.audioNodes.llpw[i] = CiderAudio.context.createBiquadFilter();
|
||||
CiderAudio.audioNodes.llpw[i].type = 'peaking'; // 'peaking';
|
||||
|
|
@ -153,8 +152,6 @@ var CiderAudio = {
|
|||
let VIBRANTBASSGAIN = app.cfg.audio.vibrantBass.gain;
|
||||
let VIBRANTBASSQ = app.cfg.audio.vibrantBass.Q;
|
||||
|
||||
CiderAudio.audioNodes.vibrantbassNode = [];
|
||||
|
||||
for (i = 0; i < VIBRANTBASSBANDS.length; i++) {
|
||||
CiderAudio.audioNodes.vibrantbassNode[i] = CiderAudio.context.createBiquadFilter();
|
||||
CiderAudio.audioNodes.vibrantbassNode[i].type = 'peaking'; // 'peaking';
|
||||
|
|
@ -174,8 +171,8 @@ var CiderAudio = {
|
|||
hiererchical_unloading: function (){
|
||||
try {CiderAudio.audioNodes.spatialNode.output.disconnect();} catch(e){}
|
||||
try {CiderAudio.audioNodes.gainNode.disconnect();} catch(e){}
|
||||
try {for (var i of CiderAudio.audioNodes.llpw){i.disconnect();}} catch(e){}
|
||||
try {for (var i of CiderAudio.audioNodes.vibrantbassNode){i.disconnect();}} catch(e){}
|
||||
try {for (var i of CiderAudio.audioNodes.llpw){i.disconnect();} CiderAudio.audioNodes.llpw = []} catch(e){}
|
||||
try {for (var i of CiderAudio.audioNodes.vibrantbassNode){i.disconnect();} CiderAudio.audioNodes.vibrantbassNode = []} catch(e){}
|
||||
|
||||
console.log("[Cider][Audio] Finished hierarchical unloading");
|
||||
|
||||
|
|
|
|||
1752
src/renderer/less/elements.less
Normal file
1752
src/renderer/less/elements.less
Normal file
File diff suppressed because it is too large
Load diff
396
src/renderer/less/helpers.less
Normal file
396
src/renderer/less/helpers.less
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
|
||||
.modal-fullscreen {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
|
||||
.modal-window {
|
||||
background: #333;
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--mediaItemShadow-Shadow);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
max-height: 500px;
|
||||
max-width: 360px;
|
||||
background: #121212;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
z-index: 1;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spatialproperties-panel {
|
||||
.modal-window {
|
||||
height: 700px;
|
||||
max-height: 700px;
|
||||
width: 800px;
|
||||
max-width: 800px;
|
||||
overflow: hidden;
|
||||
|
||||
.info-header {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.visual-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visual {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
width: 300px;
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
|
||||
margin: 0 auto;
|
||||
|
||||
.face {
|
||||
position: absolute;
|
||||
width: calc(12px * 6);
|
||||
height: calc(12px * 6);
|
||||
border-radius: 6px;
|
||||
transform: rotateX(60deg) rotateZ(-45deg);
|
||||
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
}
|
||||
|
||||
.listener {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
transform: rotateX(60deg) rotateZ(-45deg);
|
||||
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
background: white;
|
||||
color: black;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.audiosource {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
transform: rotateX(60deg) rotateZ(-45deg);
|
||||
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
|
||||
background: yellow;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.face:nth-of-type(1) {
|
||||
background: linear-gradient(45deg, #28223a, #1f2038);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face:nth-of-type(2) {
|
||||
background: linear-gradient(45deg, #7d53ad, #5763ff);
|
||||
transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
|
||||
opacity: 0.7;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.modal-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
background-image: var(--gfx-closeBtn);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(196, 43, 28)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addtoplaylist-panel {
|
||||
.modal-window {
|
||||
max-height: 600px;
|
||||
max-width: 400px;
|
||||
background: rgb(18 18 18 / 90%);
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
|
||||
.modal-header {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
|
||||
.modal-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
background-image: var(--gfx-closeBtn);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(196, 43, 28)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-search {
|
||||
width: 100%;
|
||||
padding: 0px 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
appearance: none;
|
||||
border: 0px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
background: rgba(32, 32, 32, 0.46);
|
||||
color: #eee;
|
||||
font-family: inherit;
|
||||
font-size: 0.98em;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
flex-flow: row;
|
||||
|
||||
.icon {
|
||||
pointer-events: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.name {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--selected);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--selected-click);
|
||||
}
|
||||
|
||||
&.focused {
|
||||
background: var(--keyColor);
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-item:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100001;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
.menu-header-body {
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
background: rgb(200 200 200 / 10%);
|
||||
|
||||
.menu-option-header {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
&.active {
|
||||
.sidebar-icon > .svg-icon {
|
||||
--color: var(--keyColor);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--selected);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--selected-click);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-panel-body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
background: rgb(38 38 38);
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
border-radius: var(--mediaItemRadius);
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
|
||||
.menu-option {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
appearance: none;
|
||||
border: 0px;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
background: var(--selected);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--selected-click);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-header-text {
|
||||
margin: 18px 6px;
|
||||
|
||||
.close-btn {
|
||||
width: 50px;
|
||||
height: 42px;
|
||||
background-image: var(--gfx-closeBtn);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(196, 43, 28)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-body {
|
||||
overflow: overlay;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-footer {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.queue-panel {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
.queue-header-text {
|
||||
margin: 18px 6px;
|
||||
}
|
||||
|
||||
.queue-body {
|
||||
overflow: overlay;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.queue-footer {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.autoplay {
|
||||
background: rgb(200 200 200 / 15%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.infinity {
|
||||
content: url("./assets/infinity.svg");
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
749
src/renderer/less/pages.less
Normal file
749
src/renderer/less/pages.less
Normal file
|
|
@ -0,0 +1,749 @@
|
|||
// Helpers
|
||||
.content-inner {
|
||||
position: absolute;
|
||||
top: var(--navigationBarHeight);
|
||||
left: 0;
|
||||
padding: 32px;
|
||||
width: 100%;
|
||||
transition: zoom 1s;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.content-inner.centered {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
// End Helpers
|
||||
|
||||
|
||||
// Library - Songs page
|
||||
.library-page {
|
||||
padding: 0px;
|
||||
|
||||
.library-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-bottom: 1px solid rgba(200, 200, 200, 0.05);
|
||||
z-index: 6;
|
||||
background: black;
|
||||
padding: 0px 2em;
|
||||
backdrop-filter: blur(32px);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
top: var(--navigationBarHeight);
|
||||
}
|
||||
|
||||
.well {
|
||||
margin: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Podcast Page
|
||||
.content-inner.podcasts-page {
|
||||
display: flex;
|
||||
height: calc(100% - var(--navigationBarHeight));
|
||||
padding: 0px;
|
||||
|
||||
.list-flat {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.podcast-artwork {
|
||||
width: 200px;
|
||||
margin: 16px auto;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.podcasts-list {
|
||||
height: 100%;
|
||||
width: 280px;
|
||||
background: rgb(200 200 200 / 10%);
|
||||
overflow-y: overlay;
|
||||
border-right: 1px solid var(--color2);
|
||||
flex: none;
|
||||
overflow-x: hidden;
|
||||
|
||||
.podcast-list-header {
|
||||
border-bottom: 1px solid var(--color2);
|
||||
font-size: 0.7em;
|
||||
padding: 6px;
|
||||
background: #ffffff17;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.podcasts-search {
|
||||
padding: 10px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--color2);
|
||||
z-index: 2;
|
||||
background: #303030;
|
||||
}
|
||||
}
|
||||
|
||||
.episodes-list {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgb(200 200 200 / 6%);
|
||||
overflow-y: overlay;
|
||||
overflow-x: hidden;
|
||||
|
||||
.episodes-inline-info {
|
||||
padding: 14px 14px 0px 14px;
|
||||
|
||||
.podcast-show-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.podcast-show-description {
|
||||
margin: 32px 6px;
|
||||
font-size: 0.8rem;
|
||||
white-space: pre-wrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.podcast-artwork {
|
||||
width: 120px;
|
||||
margin: 0px auto;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.podcast-no-search-results {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.podcasts-details {
|
||||
width: 300px;
|
||||
flex: none;
|
||||
background: rgb(255 255 255 / 5%);
|
||||
overflow-y: overlay;
|
||||
overflow-x: hidden;
|
||||
top: 2%;
|
||||
z-index: 2;
|
||||
border-left: 1px solid var(--color2);
|
||||
padding-bottom: 1em;
|
||||
|
||||
.meta-btn {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.podcasts-details-header {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 50px;
|
||||
height: 42px;
|
||||
background-image: var(--gfx-closeBtn);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(196, 43, 28)
|
||||
}
|
||||
}
|
||||
|
||||
.podcast-genre {
|
||||
text-align: center;
|
||||
margin: 6px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.podcast-metainfo {
|
||||
text-align: center;
|
||||
font-size: 0.7em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.podcast-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.podcast-play-btn {
|
||||
width: 50%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.podcast-description {
|
||||
margin: 12px;
|
||||
font-size: 0.75em;
|
||||
white-space: pre-wrap;
|
||||
display: block;
|
||||
line-break: anywhere;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1230px) {
|
||||
.content-inner.podcasts-page {
|
||||
.podcasts-details {
|
||||
height: 96%;
|
||||
width: 300px;
|
||||
flex: none;
|
||||
background: rgb(20 20 20 / 97%);
|
||||
overflow-y: overlay;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 2%;
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Album / Playlist Page */
|
||||
.playlist-page {
|
||||
--bgColor: transparent;
|
||||
padding: 0px;
|
||||
//background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%);
|
||||
top: 0;
|
||||
padding-top: var(--navigationBarHeight);
|
||||
|
||||
.playlist-body {
|
||||
padding: var(--contentInnerPadding) 2em;
|
||||
margin-top: -75px;
|
||||
}
|
||||
|
||||
.floating-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-bottom: 1px solid rgba(200, 200, 200, 0.05);
|
||||
z-index: 6;
|
||||
padding: 0px 1em;
|
||||
backdrop-filter: blur(32px);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
top: var(--navigationBarHeight);
|
||||
transition: opacity 0.1s var(--appleEase);
|
||||
}
|
||||
|
||||
.playlist-display {
|
||||
padding: var(--contentInnerPadding);
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
|
||||
.artworkContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
margin-top: calc(var(--navigationBarHeight) * -1);
|
||||
margin-bottom: -10px;
|
||||
padding: 0;
|
||||
-webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%);
|
||||
opacity: .7;
|
||||
animation: playlistArtworkFadeIn 1s var(--appleEase);
|
||||
|
||||
.artworkMaterial > img {
|
||||
filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
|
||||
object-position: center;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.playlistInfo {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> .row {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.playlist-info {
|
||||
flex-shrink: unset;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
.playlist-name {
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: unset;
|
||||
}
|
||||
|
||||
.nameEdit {
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: unset;
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.playlist-artist {
|
||||
font-size: 20px;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: unset;
|
||||
}
|
||||
|
||||
.playlist-desc {
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
flex-shrink: unset;
|
||||
margin-right: 5px;
|
||||
max-height: 100px;
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
height: 100px;
|
||||
-webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
color: var(--keyColor);
|
||||
background-color: transparent;
|
||||
border: 0px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-desc-expanded {
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
.more-btn {
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
color: var(--keyColor);
|
||||
background-color: transparent;
|
||||
border: 0px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.friends-info {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
.badge-container {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
|
||||
.socialBadge {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--mediaItemShadow-ShadowSubtle);
|
||||
transition: transform .2s var(--appleEase);
|
||||
margin: 6px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.friends-name {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-time {
|
||||
font-size: 0.9em;
|
||||
margin: 6px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.inline-playlist {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 6;
|
||||
position: sticky;
|
||||
margin-top: calc(var(--navigationBarHeight) * -1);
|
||||
|
||||
.floating-header {
|
||||
opacity: 1;
|
||||
top: 0px;
|
||||
z-index: 6;
|
||||
padding: 1em;
|
||||
backdrop-filter: unset;
|
||||
background: black;
|
||||
h3 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.playlist-inner {
|
||||
background: black;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
overflow: overlay;
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
border-radius: var(--mediaItemRadius) var(--mediaItemRadius) 0px 0px;
|
||||
|
||||
.close-btn {
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
margin-left: 16px;
|
||||
z-index: 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes playlistArtworkFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// Collection Page
|
||||
.collection-page {
|
||||
padding-bottom: 128px;
|
||||
|
||||
.top-fab {
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
position: fixed;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
border-radius: 100%;
|
||||
background: rgb(60 60 60);
|
||||
border: 0px;
|
||||
appearance: none;
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
|
||||
> svg {
|
||||
height: 50%;
|
||||
color: #eee;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgb(100 100 100);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--keyColor);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Artist Page */
|
||||
|
||||
.artist-page {
|
||||
padding: 0px;
|
||||
top: 0;
|
||||
|
||||
.floating-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-bottom: 1px solid rgba(200, 200, 200, 0.05);
|
||||
z-index: 6;
|
||||
padding: 0px 1em;
|
||||
backdrop-filter: blur(32px);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
top: var(--navigationBarHeight);
|
||||
transition: opacity 0.1s var(--appleEase);
|
||||
}
|
||||
|
||||
&.animated .artist-header .more-btn-round {
|
||||
position: absolute;
|
||||
bottom: 22px !important;
|
||||
right: 28px;
|
||||
}
|
||||
|
||||
.artist-header {
|
||||
//background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
.header-content {
|
||||
z-index: 1;
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
|
||||
.artworkContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%);
|
||||
opacity: .7;
|
||||
animation: playlistArtworkFadeIn 1s var(--appleEase);
|
||||
|
||||
.artworkMaterial > img {
|
||||
filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
|
||||
object-position: center;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn-round {
|
||||
position: absolute;
|
||||
bottom: 82px;
|
||||
right: 28px;
|
||||
}
|
||||
|
||||
.animated {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
|
||||
|
||||
video {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 56.25vw;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.row .col.flex-center {
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.artist-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 32px;
|
||||
position: relative;
|
||||
|
||||
.overlay-play {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
transition: opacity 0.1s var(--appleEase);
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: 0px;
|
||||
padding: 0px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--selected-click);
|
||||
}
|
||||
|
||||
> svg {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.artist-play {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
border-radius: 100%;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: 0px;
|
||||
padding: 0px;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(125%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
filter: brightness(75%);
|
||||
transform: scale(0.98);
|
||||
transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
|
||||
}
|
||||
}
|
||||
|
||||
.artist-title {
|
||||
|
||||
.artist-play {
|
||||
transform: translateY(3px);
|
||||
margin: 14px;
|
||||
}
|
||||
|
||||
&.artist-animation-on {
|
||||
width: 100%;
|
||||
flex: unset;
|
||||
margin-left: 0.5em;
|
||||
color: whitesmoke;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
.artist-play {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.artist-body {
|
||||
padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
|
||||
margin: -140px 20px;
|
||||
}
|
||||
|
||||
&.animated > .artist-body {
|
||||
padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
|
||||
margin-top: -57px;
|
||||
}
|
||||
|
||||
.showmoreless {
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
border-radius: 6px;
|
||||
appearance: none;
|
||||
color: var(--keyColor);
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.showmoreless:hover {
|
||||
background: rgb(200 200 200 / 10%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Artist Page End */
|
||||
|
||||
// Settings page
|
||||
.settings-page {
|
||||
padding: 0px;
|
||||
|
||||
.md-option-header {
|
||||
padding: 1.25em 1.25em;
|
||||
border-bottom: unset;
|
||||
border-top: unset;
|
||||
font-weight: 600;
|
||||
font-size: 1.0em;
|
||||
background: rgb(255 255 255 / 3%);
|
||||
}
|
||||
|
||||
.settings-option-body {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue