okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mediaitem square artwork res now adapts to window size

Browse source
This commit is contained in:
booploops 2022-07-07 02:50:35 -07:00
parent 5e3bdd96f3
commit 6cb95f2d10
5 changed files with 55 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/renderer/less/elements.less
View file

@ -1195,41 +1195,41 @@
}
&.mediaitem-brick {
height: calc(200px, var(--windowRelativeScale));
width: calc(240px, var(--windowRelativeScale));
height: 200px;
width: 240px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork {
height: calc(123px, var(--windowRelativeScale));
width: calc(220px, var(--windowRelativeScale));
height: 123px;
width: 220px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
}
// &:not(.noscale) {
// @media (min-width: 1460px) {
// --scaleRate: 1.1;
// --scaleRateArtwork: 1.1;
// width: calc(240px * var(--scaleRate));
// height: calc(200px * var(--scaleRate));
&:not(.noscale) {
@media (min-width: 1460px) {
--scaleRate: 1.1;
--scaleRateArtwork: 1.1;
width: calc(240px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
// .artwork-container > .artwork {
// width: calc(220px * var(--scaleRateArtwork));
// height: calc(123px * var(--scaleRateArtwork));
// }
// }
.artwork-container > .artwork {
width: calc(220px * var(--scaleRateArtwork));
height: calc(123px * var(--scaleRateArtwork));
}
}
// @media (min-width: 1550px) {
// --scaleRate: 1.25;
// --scaleRateArtwork: 1.25;
// width: calc(240px * var(--scaleRate));
// height: calc(200px * var(--scaleRate));
@media (min-width: 1550px) {
--scaleRate: 1.25;
--scaleRateArtwork: 1.25;
width: calc(240px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
// .artwork-container > .artwork {
// width: calc(220px * var(--scaleRateArtwork));
// height: calc(123px * var(--scaleRateArtwork));
// }
// }
// }
.artwork-container > .artwork {
width: calc(220px * var(--scaleRateArtwork));
height: calc(123px * var(--scaleRateArtwork));
}
}
}
}
&.mediaitem-small {