mirror of
https://github.com/lscambo13/ElegantFin.git
synced 2025-09-22 17:49:34 +00:00
Fix: Style media info items more consistently and logically
New: Added % symbol after RottenTomatoes rating Fix: Reduced Main media portrait cover width and increased main media title text size
This commit is contained in:
@@ -461,18 +461,45 @@ html {
|
|||||||
height: 13em;
|
height: 13em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoOfficialRating {
|
.itemMiscInfo>.mediaInfoItem:not(:first-child, .mediaInfoCriticRating) {
|
||||||
|
padding-inline-start: .125em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemMiscInfo>.mediaInfoItem:not(:last-child) {
|
||||||
|
padding-inline-end: .125em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaInfoItem {
|
||||||
|
font-family: system-ui;
|
||||||
border-radius: var(--smallRadius);
|
border-radius: var(--smallRadius);
|
||||||
font-size: 66%;
|
font-size: .85em;
|
||||||
line-height: 1em;
|
font-weight: 500;
|
||||||
margin: 0em 0.5em .15em 0em !important;
|
padding-block: 0;
|
||||||
padding-inline: .5em;
|
}
|
||||||
padding-block-start: .4em;
|
|
||||||
font-weight: 600;
|
.mediaInfoOfficialRating {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
|
font-size: xx-small;
|
||||||
|
transform: translateY(-.15em);
|
||||||
|
padding-inline: .5em !important;
|
||||||
|
font-weight: 600;
|
||||||
border: var(--defaultBorder);
|
border: var(--defaultBorder);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.starIcon {
|
||||||
|
margin-left: -.125em;
|
||||||
|
transform: translateY(-.02em);
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir=ltr] .mediaInfoCriticRating {
|
||||||
|
background-size: 30%;
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir=ltr] .mediaInfoCriticRating::after {
|
||||||
|
content: "%";
|
||||||
|
}
|
||||||
|
|
||||||
.layout-desktop .detailRibbon {
|
.layout-desktop .detailRibbon {
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
margin-top: unset !important;
|
margin-top: unset !important;
|
||||||
@@ -480,7 +507,7 @@ html {
|
|||||||
|
|
||||||
.layout-desktop .detailImageContainer .card {
|
.layout-desktop .detailImageContainer .card {
|
||||||
top: unset !important;
|
top: unset !important;
|
||||||
width: 25vw !important;
|
width: 23vw !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 62.5em) {
|
@media (max-width: 62.5em) {
|
||||||
@@ -520,11 +547,11 @@ html {
|
|||||||
height: 40vh;
|
height: 40vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoOfficialRating {
|
/* .mediaInfoOfficialRating {
|
||||||
padding-inline-start: .5em;
|
padding-inline-start: .5em;
|
||||||
padding-inline-end: .475em;
|
padding-inline-end: .475em;
|
||||||
padding-block-start: 0.470em;
|
padding-block-start: 0.470em;
|
||||||
}
|
} */
|
||||||
|
|
||||||
.layout-mobile .detailPageWrapperContainer {
|
.layout-mobile .detailPageWrapperContainer {
|
||||||
padding-top: 35vh;
|
padding-top: 35vh;
|
||||||
@@ -1663,17 +1690,11 @@ div[data-role=controlgroup] a.ui-btn-active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.infoWrapper h1.itemName {
|
.infoWrapper h1.itemName {
|
||||||
font-size: xx-large;
|
font-size: xxx-large;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-mobile .infoWrapper h1.itemName {
|
.layout-mobile .infoWrapper h1.itemName {
|
||||||
font-size: x-large;
|
font-size: 1.75em;
|
||||||
}
|
|
||||||
|
|
||||||
[dir=ltr] .mediaInfoItem {
|
|
||||||
transform-origin: left;
|
|
||||||
transform: scale(.85);
|
|
||||||
margin: 0 .4em 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-active {
|
.programCell-active {
|
||||||
|
Reference in New Issue
Block a user