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:
lscambo13
2025-01-22 12:59:57 -08:00
parent 3c2e61f776
commit 731bce85f2

View File

@@ -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 {