MediaWiki:Navbox.css

.portable-infobox.pi-theme-navbox {
    box-sizing: border-box;
    float: none;
    margin: 0;
    /* fallback width */
    width: 100%;
    /* (1px border + 0.5em padding) * 2 = 16px
    width: calc(100% - 1em - 2px); */
}

.portable-infobox.pi-theme-navbox .pi-data-value {
    flex-basis: 100%;
    width: 100%;
}
 
.portable-infobox.pi-theme-navbox .pi-data-label {
    flex-basis: 200px;
}

.navbox {
    width: 100%;
    font-size: 88%;
    margin: auto;
    clear: both;
    text-align: center;
    border-radius: 10px !important;
    overflow: hidden;
}

.navbox td {
    padding: 0 !important;
}

.navbox-inner,
.navbox-subgroup {
    width: 100%;
}

.navbox-group,
.navbox-title,
.navbox-abovebelow {
    padding: 0.25em 1em;
    line-height: 1.5em;
    text-align: center;
}

th.navbox-group {
    white-space: nowrap;
    text-align: left;
    /* Align Left cuz read words LTR, skim left side charaters first */
}

.skin-fandommobile th.navbox-group {
    white-space: normal;
}

.navbox,
.navbox-subgroup {
    background: var(--theme-page-background-color);
}

.navbox-list {
    line-height: 1.5em;
}


table.navbox table.navbox {
    margin-top: 0;
}

table.navbox + table.navbox {
    margin-top: -1px;
}

.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0;
}

.page-content .navbox .hlist dl,
.page-content .navbox .hlist ol,
.page-content .navbox .hlist ul {
    margin: 0;
    padding: 0;
}

.hlist dd,
.hlist dt,
.hlist li {
    display: inline;
}

.hlist .inline,
.hlist .inline dl,
.hlist .inline ol,
.hlist .inline ul,
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
    display: inline;
}

.hlist dt:after {
    content: ":"
}

.hlist dd:after,
.hlist li:after {
    content: " · ";
    font-weight: bold;
}

.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}

.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
    content: none;
}

.hlist dd dd:first-child:before,
.hlist dd dt:first-child:before,
.hlist dd li:first-child:before,
.hlist dt dd:first-child:before,
.hlist dt dt:first-child:before,
.hlist dt li:first-child:before,
.hlist li dd:first-child:before,
.hlist li dt:first-child:before,
.hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}

.hlist dd dd:last-child:after,
.hlist dd dt:last-child:after,
.hlist dd li:last-child:after,
.hlist dt dd:last-child:after,
.hlist dt dt:last-child:after,
.hlist dt li:last-child:after,
.hlist li dd:last-child:after,
.hlist li dt:last-child:after,
.hlist li li:last-child:after {
    content: ") ";
    font-weight: normal;
}

.hlist dd dd.hlist-last-child:after,
.hlist dd dt.hlist-last-child:after,
.hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after,
.hlist dt dt.hlist-last-child:after,
.hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after,
.hlist li dt.hlist-last-child:after,
.hlist li li.hlist-last-child:after {
    content: ") ";
    font-weight: normal;
}

.hlist ol {
    counter-reset: listitem;
}

.hlist ol > li {
    counter-increment: listitem;
}

.hlist ol > li:before {
    content: " " counter(listitem) " ";
    white-space: nowrap
}

.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
    content: " (" counter(listitem) " ";
}

.navbar {
    display: inline;
    font-size: 88%;
    font-weight: normal;
}

.navbar ul {
    display: inline;
    white-space: nowrap;
}

.mw-body-content .navbar ul {
    line-height: inherit;
}

.navbar li {
    word-spacing: -0.125em;
}

.navbox .navbar {
    display: block;
    font-size: 100%;
}

.navbox-title .navbar {
    float: left;
    text-align: left;
    margin-right: 0.5em;
    width: 6em;
}

.collapseButton {
    float: right;
    font-weight: normal;
    margin-left: 0.5em;
    text-align: right;
    width: auto;
}

.navbox .collapseButton {
    width: 6em;
}

.mw-collapsible-toggle {
    font-weight: normal;
    text-align: right;
}

.navbox .mw-collapsible-toggle {
    width: 6em;
}

/* Portable Navbox */
.pi-theme-navbox {
    --pi-secondary-background: var(--color-progressive);
    --pi-secondary-background--label: var(--theme-body-text-color);
    padding: 0 3px;
}
.pi-theme-navbox .pi-data {
    padding: 0;
}

.portable-infobox.pi-theme-navbox :is(.pi-data-label, .pi-data-value) {
    line-height: 1.5em;
    font-size: .7em;
    padding: 0.25em 1em;
}
.portable-infobox.pi-theme-navbox .pi-data-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align Left cuz read words LTR, skim left side charaters first */
    flex-basis: 200px;
    background-color: var(--custom-tertiary-color);
    color: var(--custom-tertiary-color-text);
}
.portable-infobox.pi-theme-navbox .pi-data-value {
    flex-basis: 100%;
}
.portable-infobox.pi-theme-navbox .pi-data:nth-child(odd) .pi-data-value {
    background-color: var(--theme-page-background-color--secondary);
}

/* For Template:Characters_Navbox */
.navbox-list-top > div > div {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* align left when navbox list contains cards */
.navbox-list:has(div > .card-list-container) > div,
.navbox-list:has(div > div > .card-list-container) > div {
    text-align: left;
}

/* Adds Unknown image for not uploaded files and hides redlink */
.navbox-list a.new[href*="Special:Upload"] {
    display: inline-flex;
    width: 45px;
    height: 45px;
    background-image: url(https://static.wikia.nocookie.net/gensin-impact/images/4/4a/Item_Unknown.png/revision/latest/scale-to-width-down/45);
    background-size: cover;
    vertical-align: middle;
    font-size: 0;
}

/* Hide empty sub-navboxes (second rule is for the spacing row) */
.navbox-inner tr:has(> td.navbox-list:only-child > .navbox-subgroup tr:only-child > th.navbox-title),
.navbox-inner tr:has(+ tr > td.navbox-list:only-child > .navbox-subgroup tr:only-child > th.navbox-title) {
    display: none !important;
}

/* Gallery for mobile */
.skin-fandommobile .navbox-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;

    .article-media-thumbnail {
        margin-bottom: 0;
    }

    .article-media-placeholder {
        border: none;
    }

    br,
    figcaption {
        display: none;
    }
}


/* Navbox colors */
.navbox-title a,
.navbox-group a {
    color: var(--color-progressive);
}

.navbox-title,
.navbox-group,
.navbox-title .mw-collapsible-text {
    color: var(--color-base);
}


.navbox-odd {
    background: var(--background-color-1);
}

.navbox-subgroup .navbox-title {
    background: var(--background-color-2);
}

.navbox-subgroup .navbox-subgroup .navbox-title {
    background: var(--background-color-6);
}

.navbox-title {
    background: var(--background-color-4);
}

.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    color: var(--color-base);
    background: var(--pi-rows-color)!important;
}

.navbox-image {
    background: var(--pi-rows-color);
}

.navbox-even {
    background: var(--theme-page-background-color--secondary);
}