Honkai: Nexus Anima Wiki

MediaWiki:Navbox.css

Revision as of 16:34, 29 August 2025 by ReinDevildom (talk | contribs) (Created page with "→navbox: .navbox { width: 100%; font-size: 88%; margin: auto; clear: both; text-align: center; } .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 {...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*navbox*/
.navbox {
    width: 100%;
    font-size: 88%;
    margin: auto;
    clear: both;
    text-align: center;
}

.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;
    border-color: var(--theme-page-background-color);
}

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

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

.navbox-border {
	border-radius: 5px;
	border: 2px solid var(--pi-tabber-bg-color);
    margin-top: 10px;
    margin-bottom: 10px;
}

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

/* Dark mode navbox */
:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-subgroup .navbox-title {
    background: var(--pi-tabber-bg-color);
}

:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-subgroup .navbox-subgroup .navbox-title {
    background: var(--theme-color-6);
}

:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-title {
    background: var(--pi-border);
}

:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-abovebelow,
:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) th.navbox-group,
:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-subgroup .navbox-group,
:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-subgroup .navbox-abovebelow {
    color: var(--theme-page-text-color);
    background: var(--pi-rows-color)!important;
}

:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-image {
    background: var(--pi-rows-color);
}

:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-even {
    background: var(--theme-page-background-color--secondary);
}

/* Light mode navbox */
:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-subgroup .navbox-title {
    background: var(--theme-color-6);
}

:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-subgroup .navbox-subgroup .navbox-title {
    background: var(--theme-color-7);
}

:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-title {
    background: var(--theme-color-4);
}

:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-abovebelow,
:is(.theme-fandomdesktop-light, .theme-fandommobile-light) th.navbox-group,
:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-subgroup .navbox-group,
:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-subgroup .navbox-abovebelow {
    color: var(--theme-page-text-color);
    background: var(--theme-color-7);
}

:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-image {
    background: var(--theme-color-6);
}

:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-even {
    background: var(--pi-tabber-bg-color);
}

table.navbox {
    margin-top: 1em;
}

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(--theme-link-color);
  --pi-secondary-background--label: var(--theme-body-text-color);
  --pi-border-color:#0000;
  padding: 0 3px;
}
.pi-theme-navbox .pi-data {
  padding:0;
}
.portable-infobox.pi-theme-navbox .pi-item {
  border:0;
  margin: 3px 0;
  grid-column-gap: 3px;
}
.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/honkai-nexus-anima/images/d/dd/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;
	}
}
Retrieved from "https://hna.wiki/MediaWiki:Navbox.css?oldid=373"