MediaWiki:Navbox.css - Revision history

Wuffesan at 16:37, 11 June 2025

2025-06-11T16:37:34Z

← Older revision		Revision as of 09:37, 11 June 2025
Line 2:		Line 2:
	.navbox {		.navbox {
	width: 100%;		width: 100%;
	font-size: 88%;		font-size: 88%;c
	margin: auto;		margin: auto;
	clear: both;		clear: both;
	text-align: center;		text-align: center;
			color: var(--theme-page-text-color);
	}		}

Wuffesan at 16:34, 11 June 2025

2025-06-11T16:34:59Z

← Older revision		Revision as of 09:34, 11 June 2025
Line 52:		Line 52:
	}		}

	/* ~~Light~~ mode navbox */		/* Dark mode navbox */
	.navbox-subgroup .navbox-title {		.navbox-subgroup .navbox-title {
	background: ~~var(--theme-color-6)~~;		background: #1F1F1F;
	}		}

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

	.navbox-title {		.navbox-title {
	background: ~~var(--theme-color-4)~~;		background: #161616;
	}		}

Line 70:		Line 70:
	.navbox-subgroup .navbox-abovebelow {		.navbox-subgroup .navbox-abovebelow {
	color: var(--theme-page-text-color);		color: var(--theme-page-text-color);
	background: ~~var(--theme-color-7)~~;		background: #282828 !important;
	}		}

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

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

Wuffesan at 16:32, 11 June 2025

2025-06-11T16:32:45Z

← Older revision		Revision as of 09:32, 11 June 2025
Line 52:		Line 52:
	}		}

	/* ~~Dark~~ mode navbox */		/* Light mode navbox */
	.navbox-subgroup .navbox-title {		.navbox-subgroup .navbox-title {
	background: ~~#1F1F1F~~;		background: var(--theme-color-6);
	}		}

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

	.navbox-title {		.navbox-title {
	background: ~~#161616~~;		background: var(--theme-color-4);
	}		}

Line 70:		Line 70:
	.navbox-subgroup .navbox-abovebelow {		.navbox-subgroup .navbox-abovebelow {
	color: var(--theme-page-text-color);		color: var(--theme-page-text-color);
	background: ~~#282828 !important~~;		background: var(--theme-color-7);
	}		}

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

	.navbox-even {		.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);		background: var(--pi-tabber-bg-color);
	}		}

Wuffesan at 16:31, 11 June 2025

2025-06-11T16:31:50Z

← Older revision		Revision as of 09:31, 11 June 2025
Line 53:		Line 53:

	/* Dark mode navbox */		/* Dark mode navbox */
	~~:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark)~~ .navbox-subgroup .navbox-title {		.navbox-subgroup .navbox-title {
	background: #1F1F1F;		background: #1F1F1F;
	}		}

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

	~~:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark)~~ .navbox-title {		.navbox-title {
	background: #161616;		background: #161616;
	}		}

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

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

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

Wuffesan: 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 */ } .navbox,.navbox-subgroup { background: var(--theme-page-background-co..."

2025-06-10T13:58:36Z

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: } .navbox,.navbox-subgroup { background: var(--theme-page-background-co..."

New page

/*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 */
}

.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: #1F1F1F;
}

: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: #161616;
}

: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: #282828 !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;
}

/* 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://wiki.zombiepanicsource.com/images/8/85/Placeholder_InfoGame.png);
background-size: cover;
vertical-align: middle;
font-size: 0;
}
/* Handle default [[Template:Item]] usage which is 30px */
.navbox-items.navbox-list a.new[href*="Special:Upload"],
.navbox-items .navbox-list a.new[href*="Special:Upload"] {
display: block;
width: 30px;
height: 30px;
background-image: url(https://wiki.zombiepanicsource.com/images/8/85/Placeholder_InfoGame.png);
background-size: cover;
font-size: 0;
}

.skin-fandommobile .navbox-subgroup tr > th.navbox-group {
max-width: 120px;
width: 120px;
overflow-wrap: break-word;
text-wrap: wrap;
padding: 0.25em;
}

.navbox-agent-content, .flex-table {
display: flex;
flex-wrap: wrap;
}

.navbox-agent-section, .flex-table-section {
flex-grow: 1;
border: 1px solid var(--pi-tabber-bg-color);
min-width: 100px;
}

.navbox-agent-section-header, .flex-table-section-header {
min-height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: var(--theme-page-background-color--secondary);
padding: 0 10px;
font-weight: bold;
}

.flex-table-section-flex {
display: flex;
gap: 10px;
justify-content: center;
}