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

changes to item sizing

Browse source 
* added :no-scale for mediaitem-square
* cards now scale
* changed sweeteners method of scaling items
This commit is contained in:
booploops 2022-06-14 04:32:59 -07:00
parent 493492c579
commit 7746daee54
5 changed files with 88 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -400,15 +400,15 @@
.listitem-content {
width: 100%;
height: 60px;
display: flex;
flex: 0 0 auto;
flex-direction: row;
font-size: 14px;
justify-content: center-between;
align-items: center;
border-radius: var(--mediaItemRadius);
position: relative;
height: 60px;
display: flex;
flex: 0 0 auto;
flex-direction: row;
font-size: 14px;
justify-content: center-between;
align-items: center;
border-radius: var(--mediaItemRadius);
position: relative;
}
&:hover {
@ -444,6 +444,7 @@
.mediaitem-artwork {
border-radius: var(--mediaItemRadiusSmall);
}
.overlay-play {
background: rgba(0, 0, 0, 0.5);
opacity: 0;
@ -957,6 +958,7 @@
/* mediaitem-square */
.cd-mediaitem-square {
--transitionDuration: .25s;
--scaleRate: 1.25;
--scaleRateArtwork: 1;
width: 200px;
@ -968,6 +970,7 @@
justify-content: center;
align-items: center;
border-radius: 6px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork-container {
position: relative;
@ -982,6 +985,7 @@
flex: 0 0 auto;
margin: 6px;
cursor: pointer;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.mediaitem-artwork {
box-shadow: unset;
@ -1055,16 +1059,33 @@
}
}
@media (min-width: 1600px) {
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
&:not(.noscale) {
@media (min-width: 1460px) {
--scaleRate: 1.1;
--scaleRateArtwork: 0.9;
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
.artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
}
}
@media (min-width: 1550px) {
--scaleRate: 1.25;
--scaleRateArtwork: 1;
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
}
}
}
.info-rect {
width: 90%;
height: 100%;
@ -1122,13 +1143,15 @@
width: 212px;
}
@media (min-width: 1600px) {
width: calc(240px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
&:not(.noscale) {
@media (min-width: 1600px) {
width: calc(240px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(212px * var(--scaleRateArtwork));
height: calc(120px * var(--scaleRateArtwork));
.artwork-container > .artwork {
width: calc(212px * var(--scaleRateArtwork));
height: calc(120px * var(--scaleRateArtwork));
}
}
}
}
@ -1241,14 +1264,25 @@
border-radius: inherit;
}
//@media (min-width: 1600px) {
// width: calc(230px * 1.25);
// height: calc(298px * 1.25);
// .artwork-container>.artwork {
// width: calc(230px * 1.25);
// height: calc(230px * 1.25);
// }
//}
&:not(.noscale) {
@media (min-width: 1460px) {
width: calc(230px * 1.1);
height: calc(298px * 1.1);
.artwork-container > .artwork {
width: calc(230px * 1.1);
height: calc(230px * 1.1);
}
}
@media (min-width: 1550px) {
width: calc(230px * 1.25);
height: calc(298px * 1.25);
.artwork-container > .artwork {
width: calc(230px * 1.25);
height: calc(230px * 1.25);
}
}
}
}
}