and this is why you should test your code before pushing
This commit is contained in:
parent
92ce7b38f3
commit
62fd9d825e
2 changed files with 25 additions and 41 deletions
|
@ -925,7 +925,7 @@ const app = new Vue({
|
||||||
})
|
})
|
||||||
|
|
||||||
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
|
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
|
||||||
self.lyriccurrenttime = self.mk.currentPlaybackTime + app.lyricOffset
|
self.lyriccurrenttime = self.mk.currentPlaybackTime + (app.lyricOffset / 2)
|
||||||
this.currentSongInfo = a
|
this.currentSongInfo = a
|
||||||
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
|
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
|
||||||
// wsapi
|
// wsapi
|
||||||
|
@ -3192,7 +3192,8 @@ const app = new Vue({
|
||||||
applied +=2;
|
applied +=2;
|
||||||
}
|
}
|
||||||
else if (app.lyrics[applied].line === raw_lines[i].childNodes[0].childNodes[0].textContent) {
|
else if (app.lyrics[applied].line === raw_lines[i].childNodes[0].childNodes[0].textContent) {
|
||||||
// Do nothing
|
// Skip this line
|
||||||
|
applied +=1;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
app.lyrics[applied].translation = raw_lines[i].childNodes[0].childNodes[0].textContent;
|
app.lyrics[applied].translation = raw_lines[i].childNodes[0].childNodes[0].textContent;
|
||||||
|
|
|
@ -11334,11 +11334,11 @@ fieldset:disabled .btn {
|
||||||
}
|
}
|
||||||
/* mediaitem-square */
|
/* mediaitem-square */
|
||||||
.cd-mediaitem-square {
|
.cd-mediaitem-square {
|
||||||
--transitionDuration: 0.25s;
|
--transitionDuration: 0.5s;
|
||||||
--scaleRate: 1.25;
|
--scaleRate: 1.25;
|
||||||
--scaleRateArtwork: 1;
|
--scaleRateArtwork: 1;
|
||||||
width: 200px;
|
width: calc(160px * var(--windowRelativeScale));
|
||||||
height: 200px;
|
height: calc(200px * var(--windowRelativeScale));
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -11346,14 +11346,13 @@ fieldset:disabled .btn {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
|
||||||
}
|
}
|
||||||
.cd-mediaitem-square .artwork-container {
|
.cd-mediaitem-square .artwork-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.cd-mediaitem-square .artwork-container .artwork {
|
.cd-mediaitem-square .artwork-container .artwork {
|
||||||
height: 150px;
|
height: calc(140px * var(--windowRelativeScale));
|
||||||
width: 150px;
|
width: calc(140px * var(--windowRelativeScale));
|
||||||
background: blue;
|
background: blue;
|
||||||
border-radius: var(--mediaItemRadius);
|
border-radius: var(--mediaItemRadius);
|
||||||
background: var(--artwork);
|
background: var(--artwork);
|
||||||
|
@ -11361,7 +11360,6 @@ fieldset:disabled .btn {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
margin: 6px;
|
margin: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
|
||||||
}
|
}
|
||||||
.cd-mediaitem-square .artwork-container .artwork .mediaitem-artwork {
|
.cd-mediaitem-square .artwork-container .artwork .mediaitem-artwork {
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
|
@ -11421,30 +11419,6 @@ fieldset:disabled .btn {
|
||||||
.cd-mediaitem-square .artwork-container:hover > .menu-btn {
|
.cd-mediaitem-square .artwork-container:hover > .menu-btn {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@media (min-width: 1460px) {
|
|
||||||
.cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
|
|
||||||
--scaleRate: 1.1;
|
|
||||||
--scaleRateArtwork: 0.9;
|
|
||||||
width: calc(200px * var(--scaleRate));
|
|
||||||
height: calc(200px * var(--scaleRate));
|
|
||||||
}
|
|
||||||
.cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) .artwork-container > .artwork {
|
|
||||||
width: calc(190px * var(--scaleRateArtwork));
|
|
||||||
height: calc(190px * var(--scaleRateArtwork));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 1550px) {
|
|
||||||
.cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
|
|
||||||
--scaleRate: 1.25;
|
|
||||||
--scaleRateArtwork: 1;
|
|
||||||
width: calc(200px * var(--scaleRate));
|
|
||||||
height: calc(200px * var(--scaleRate));
|
|
||||||
}
|
|
||||||
.cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) .artwork-container > .artwork {
|
|
||||||
width: calc(190px * var(--scaleRateArtwork));
|
|
||||||
height: calc(190px * var(--scaleRateArtwork));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.cd-mediaitem-square .info-rect {
|
.cd-mediaitem-square .info-rect {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -11488,10 +11462,12 @@ fieldset:disabled .btn {
|
||||||
.cd-mediaitem-square.mediaitem-video {
|
.cd-mediaitem-square.mediaitem-video {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
|
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||||
}
|
}
|
||||||
.cd-mediaitem-square.mediaitem-video .artwork {
|
.cd-mediaitem-square.mediaitem-video .artwork {
|
||||||
height: 120px;
|
height: 120px;
|
||||||
width: 212px;
|
width: 212px;
|
||||||
|
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||||
}
|
}
|
||||||
@media (min-width: 1460px) {
|
@media (min-width: 1460px) {
|
||||||
.cd-mediaitem-square.mediaitem-video:not(.noscale) {
|
.cd-mediaitem-square.mediaitem-video:not(.noscale) {
|
||||||
|
@ -11520,10 +11496,12 @@ fieldset:disabled .btn {
|
||||||
.cd-mediaitem-square.mediaitem-brick {
|
.cd-mediaitem-square.mediaitem-brick {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
|
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||||
}
|
}
|
||||||
.cd-mediaitem-square.mediaitem-brick .artwork {
|
.cd-mediaitem-square.mediaitem-brick .artwork {
|
||||||
height: 123px;
|
height: 123px;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
|
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||||
}
|
}
|
||||||
@media (min-width: 1460px) {
|
@media (min-width: 1460px) {
|
||||||
.cd-mediaitem-square.mediaitem-brick:not(.noscale) {
|
.cd-mediaitem-square.mediaitem-brick:not(.noscale) {
|
||||||
|
@ -11550,12 +11528,14 @@ fieldset:disabled .btn {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.cd-mediaitem-square.mediaitem-small {
|
.cd-mediaitem-square.mediaitem-small {
|
||||||
width: 140px;
|
width: calc(140px, var(--windowRelativeScale));
|
||||||
height: 180px;
|
height: calc(180px, var(--windowRelativeScale));
|
||||||
|
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||||
}
|
}
|
||||||
.cd-mediaitem-square.mediaitem-small .artwork {
|
.cd-mediaitem-square.mediaitem-small .artwork {
|
||||||
height: 128px;
|
height: calc(128px, var(--windowRelativeScale));
|
||||||
width: 128px;
|
width: calc(128px, var(--windowRelativeScale));
|
||||||
|
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||||
}
|
}
|
||||||
.cd-mediaitem-square.mediaitem-card {
|
.cd-mediaitem-square.mediaitem-card {
|
||||||
background: #ccc;
|
background: #ccc;
|
||||||
|
@ -11566,6 +11546,7 @@ fieldset:disabled .btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: calc(var(--mediaItemRadius) * 2);
|
border-radius: calc(var(--mediaItemRadius) * 2);
|
||||||
box-shadow: var(--mediaItemShadow-ShadowSubtle);
|
box-shadow: var(--mediaItemShadow-ShadowSubtle);
|
||||||
|
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
|
||||||
}
|
}
|
||||||
.cd-mediaitem-square.mediaitem-card .artwork {
|
.cd-mediaitem-square.mediaitem-card .artwork {
|
||||||
width: 230px;
|
width: 230px;
|
||||||
|
@ -11645,7 +11626,7 @@ fieldset:disabled .btn {
|
||||||
.cd-mediaitem-square.mediaitem-card:hover .info-rect-card::before {
|
.cd-mediaitem-square.mediaitem-card:hover .info-rect-card::before {
|
||||||
filter: brightness(0.3) blur(50px) saturate(180%);
|
filter: brightness(0.3) blur(50px) saturate(180%);
|
||||||
}
|
}
|
||||||
@media (min-width: 1460px) {
|
@media (min-width: 1200px) {
|
||||||
.cd-mediaitem-square.mediaitem-card:not(.noscale) {
|
.cd-mediaitem-square.mediaitem-card:not(.noscale) {
|
||||||
width: calc(230px * 1.1);
|
width: calc(230px * 1.1);
|
||||||
height: calc(298px * 1.1);
|
height: calc(298px * 1.1);
|
||||||
|
@ -11655,7 +11636,7 @@ fieldset:disabled .btn {
|
||||||
height: calc(230px * 1.1);
|
height: calc(230px * 1.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (min-width: 1550px) {
|
@media (min-width: 1400px) {
|
||||||
.cd-mediaitem-square.mediaitem-card:not(.noscale) {
|
.cd-mediaitem-square.mediaitem-card:not(.noscale) {
|
||||||
width: calc(230px * 1.25);
|
width: calc(230px * 1.25);
|
||||||
height: calc(298px * 1.25);
|
height: calc(298px * 1.25);
|
||||||
|
@ -13995,7 +13976,7 @@ input[type=checkbox][switch]:checked:active::before {
|
||||||
right: 28px;
|
right: 28px;
|
||||||
}
|
}
|
||||||
.artist-page.animated .artist-header {
|
.artist-page.animated .artist-header {
|
||||||
min-height: 500px;
|
min-height: 80vh;
|
||||||
}
|
}
|
||||||
.artist-page .artist-header {
|
.artist-page .artist-header {
|
||||||
color: white;
|
color: white;
|
||||||
|
@ -14080,6 +14061,7 @@ input[type=checkbox][switch]:checked:active::before {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.artist-page .artist-header .row .col.flex-center {
|
.artist-page .artist-header .row .col.flex-center {
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
@ -14862,6 +14844,7 @@ input[type=checkbox][switch]:checked:active::before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
:root {
|
:root {
|
||||||
|
--windowRelativeScale: 1;
|
||||||
--appleEase: cubic-bezier(0.42, 0, 0.58, 1);
|
--appleEase: cubic-bezier(0.42, 0, 0.58, 1);
|
||||||
--borderColor: rgba(200, 200, 200, 0.16);
|
--borderColor: rgba(200, 200, 200, 0.16);
|
||||||
--mediaItemShadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16);
|
--mediaItemShadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16);
|
||||||
|
@ -16598,7 +16581,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 1500px) {
|
@media screen and (min-width: 1500px) {
|
||||||
.well.itemContainer.collection-list-square {
|
.well.itemContainer.collection-list-square {
|
||||||
grid-template-columns: repeat(6, minmax(200px, 1fr));
|
grid-template-columns: repeat(5, minmax(200px, 1fr));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1150px) {
|
@media screen and (max-width: 1150px) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue