MediaWiki:Common.css: Difference between revisions

From Buzzutsu Kaisen Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(39 intermediate revisions by 2 users not shown)
Line 10: Line 10:
background-attachment: fixed;
background-attachment: fixed;
background-color: #010101;
background-color: #010101;
font-family: Calibri, sans-serif;
font-family: Calibri, sans-serif, Jujutsu Kaisen;
accent-color: red;
accent-color: red;
font-size: 16px;
font-size: 16px;
Line 18: Line 18:
.mw-parser-output a.extiw, .mw-parser-output a.external,
.mw-parser-output a.extiw, .mw-parser-output a.external,
a, a:visited, a.mw-selflink {
a, a:visited, a.mw-selflink {
color: #FFEC86;
color: #5f9adc;
}
}


Line 36: Line 36:
font-size: 1em;
font-size: 1em;
}
}


/*********
/*********
Line 157: Line 155:
position: absolute;
position: absolute;
height: 100%;
height: 100%;
width: calc(100% - 0.5em);
width: 100%;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 55px), 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 55px), 0% 100%);
z-index: -1;
z-index: -1;
}
}
Line 164: Line 162:
#p-logo {
#p-logo {
margin: -135px 0 0 0;
margin: -135px 0 0 0;
height: 135px;
height: 100px;
}
}
#p-logo a {
#p-logo a {
height: 135px;
height: 100px;
background-size: 100% auto;
}
}
#p-logo a:hover {
#p-logo a:hover {
Line 179: Line 176:


.vector-menu-portal .vector-menu-heading {
.vector-menu-portal .vector-menu-heading {
font-weight: bold;
font-family: 'Jujutsu Kaisen';
    font-weight: bold;
color: #FFF;
color: #FFF;
font-size: 20px;
font-size: 16px;
text-align: center;
text-align: center;
margin: 16px 0 0 0;
margin: 8px 0 0 0;
padding: 0;
padding: 0;
    background-image: linear-gradient(90deg, #fce18600 5%, #fce186 35%, #fce186 65%, #fce18600 95%);
background-size: 100% 2px;
}
}
#p-logo + .mw-portlet .vector-menu-heading {
#p-logo + .mw-portlet .vector-menu-heading {
display: block;
display: block;
Line 224: Line 221:
.mw-body {
.mw-body {
margin-top: 0;
margin-top: 0;
}
.mw-body h1 {
    font-family: 'Jujutsu Kaisen';
}
.mw-body h2 {
    font-family: 'Jujutsu Kaisen';
}
}


Line 978: Line 983:
/* portable infoboxes */
/* portable infoboxes */
:root {
:root {
--pi-background: var(rgb(0,0,0));
--pi-background: transparent;
--pi-secondary-background: var(rgb(0,0,0));
    --pi-label-color: #000;
--pi-secondary-background--rgb: var(rgb(0,0,0));
--pi-secondary-background: #000;
--pi-secondary-background-label: var(rgb(0,0,0));
/*--pi-secondary-background--rgb: var(rgb(0,0,0));*/
--pi-border-color: rgb(255,255,255);
--pi-secondary-background-label: #fff;
--pi-border-color: #fff;
}
}


.portable-infobox {
.portable-infobox {
border:4px solid var(--pi-border-color);
border:1px solid var(--pi-border-color);
     border-radius: 25px;
     /*border-radius: 25px;*/
     background-color: transparent;
     background-color: var(--pi-background);
}
 
.portable-infobox .pi-image {
  padding: 8px;
}
 
.portable-infobox .pi-image-thumbnail {
  width: auto !important;
  max-width: 250px !important;
  height: auto !important;
}
 
.portable-infobox .pi-item-spacing {
  padding: 0;
}
 
.portable-infobox .pi-title {
  font-size: 18px;
  line-height: 23px;
}
}


.portable-infobox .pi-title,
.portable-infobox .pi-title,
.portable-infobox .pi-header {
  color: var(--pi-label-color);
  background-color: var(--pi-border-color);
  font-weight: bold;
  text-align: center;
  padding: 3px 0;
}
.portable-infobox .pi-header {
  border-top: 1px solid silver;
}
.portable-infobox .pi-data {
  border: 0;
  border-top: 1px solid silver;
  margin-bottom: px;
}
.portable-infobox .pi-data-label {
    color: var(--pi-secondary-background-label);
    padding: 5px 5px;
    min-width: 90px;
    background: var(--pi-secondary-background);
}
.portable-infobox .pi-data-value {
    line-height: 26px;
    padding: 0;
    background: transparent;
}
.portable-infobox .pi-data-value:not(:first-child) {
    padding-left: 10px;
}
.portable-infobox .center {
    text-align: center;
}
/*.portable-infobox .pi-title,
.portable-infobox .pi-header {
.portable-infobox .pi-header {
text-align:center;
text-align:center;
Line 1,020: Line 1,085:
.pi-theme-baby .pi-image-thumbnail {
.pi-theme-baby .pi-image-thumbnail {
width:100px;
width:100px;
}
}*/


/* overqualify these to overwrite normal content heading styles */
/* overqualify these to overwrite normal content heading styles */

Latest revision as of 09:51, 18 June 2024

/*********
* GLOBAL *
*********/

body {
	background-image: url(https://www.bzkwiki.com/images/2/26/Background.png);
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #010101;
	font-family: Calibri, sans-serif, Jujutsu Kaisen;
	accent-color: red;
	font-size: 16px;
}

.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited,
.mw-parser-output a.extiw, .mw-parser-output a.external,
a, a:visited, a.mw-selflink {
	color: #5f9adc;
}

h1, h2, h3, h4, h5, h6 {
	color: #FFF;
}

ul {
	list-style-image: none;
}

.thumbnail > a.new, a.new, a.new:visited {
	color: #d95535;
}

.vector-body {
	font-size: 1em;
}

/*********
* HEADER *
*********/

#mw-page-base {
	background: none;
	height: calc(2.5em + 32px);
}
@media screen and (max-width: 720px) {
	#mw-head {
		top: 0;
	}
}

.vector-menu-tabs-legacy li, #p-cactions {
	background-image: url(https://www.bzkwiki.com/images/0/0d/Tab_Background.png);
	margin: 0 8px 0 0;
	border-radius: 4px 4px 0 0;
	background-size: auto 100%;
}
.vector-menu-tabs-legacy li a, #mw-head #p-cactions-label {
	box-sizing: border-box;
	background: none;
	height: 32px;
	padding: 4px 8px 0 8px;
	line-height: 28px;
	font-size: 16px;
	color: #000;
}

}
.vector-menu-tabs-legacy li.selected::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: -100px;
	width: calc(100% + 200px);
	height: 2px;
	background: linear-gradient(90deg, #fce18600 0px, #fce186ff 50px, #fce186ff calc(100% - 50px), #fce18600 100%);
}
#left-navigation .vector-menu-tabs-legacy li.selected:first-of-type::after {
	left: 0px;
	width: calc(100% + 150px);
	background: linear-gradient(90deg, #fce186ff calc(100% - 50px), #fce18600 100%);
}
.vector-menu-tabs-legacy li.selected a {
	font-weight: bold;
	color: #000;
}

.vector-menu-tabs, 
.vector-menu-heading {
	background: none;
}

.vector-menu-tabs .mw-watchlink.icon a:before {
	top: 7px;
}

.vector-menu-tabs-legacy {
	height: 32px;
}

.vector-search-box form {
	margin: 0;
}
.searchButton[name='go'] {
	filter: invert(1);
}

.vector-menu-tabs .mw-watchlink.icon a {
	padding-top: 32px;
}

.vector-menu-dropdown .vector-menu-heading {
	padding-top: 7px;
	background: none;
}
.vector-menu-dropdown .vector-menu-heading:after {
	height: 28px;
	opacity: 1;
	filter: invert(1);
}
.vector-menu-dropdown .vector-menu-content {
	background: #5d5137;
	border-color: #5d513780;
}
.vector-menu-dropdown .mw-list-item a {
	color: #FFF;
}

.vector-search-box-input {
	border-color: #666;
	background: #222;
    color: #fff;
}

.mobile-nav-toggle {
	display: none;
}





/***********
* SIDE BAR *
***********/

#mw-panel {
	margin-top: 135px;
	padding-bottom: 60px;
	position: absolute;
}
#mw-panel::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 55px), 0% 100%);
	z-index: -1;
}

#p-logo {
	margin: -135px 0 0 0;
	height: 100px;
}
#p-logo a {
	height: 100px;
}
#p-logo a:hover {
	filter: drop-shadow(0 0 3px #FFF);
}

.vector-menu-portal {
	margin: 0 4px;
}

.vector-menu-portal .vector-menu-heading {
	font-family: 'Jujutsu Kaisen';
    font-weight: bold;
	color: #FFF;
	font-size: 16px;
	text-align: center;
	margin: 8px 0 0 0;
	padding: 0;
}

#p-logo + .mw-portlet .vector-menu-heading {
	display: block;
	margin-top: 4px;
}

.vector-menu-portal .vector-menu-content {
	margin-left: 0;
}
.vector-menu-portal .vector-menu-content li {
	padding: 0;
}
.vector-menu-portal .vector-menu-content li a {
	color: #FFF;
	font-size: 14px;
	border-radius: 2px;
	display: block;
	padding: 6px 4px;
}
.vector-menu-portal .vector-menu-content li a:visited,
.oo-ui-messageDialog-message {
	color: #FFF;
}
.vector-menu-portal .vector-menu-content li a:hover {
	background: #0005;
}





/**********
* CONTENT *
**********/

.mw-body {
	margin-top: 0;
}

.mw-body h1 {
    font-family: 'Jujutsu Kaisen';
}

.mw-body h2 {
    font-family: 'Jujutsu Kaisen';
}

#content {
	color: #fff;
	background: #000A;
	border-image: repeating-linear-gradient(45deg, #4b412d, #a69758, #4b412d 500px) 2 / 1 / 0;
	border-width: 2px 0 2px 2px;
}

.wikitable {
	background-color: transparent;
	color: #F8F2E0;
	border: none;
}

.mw_metadata td, .mw_metadata th,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
	background-color: #121618;
	color: #F8F2E0;
	border-color: #666;
}

.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.wikitable > tr > th, .wikitable > * > tr > th {
	background-color: #242424;
}
.oo-ui-windowManager-modal > .oo-ui-dialog {
	background-color: #242424AA;
}

.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title,
.oo-ui-tagItemWidget.oo-ui-widget-enabled {
	color: #F8F2E0;
}


.mw-footer li {
	color: #888;
}

#footer-info {
	background-color: #0008;
}

.catlinks, .toc, .toccolours, .tocnumber, .mw-message-box, .oo-ui-toolbar-bar {
	background: #303030;
	color: #FFF;
}

.mw-message-box-warning,
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
	background-color: #694809;
}

img.center-cover {
	display: block;
	max-width: 100%;
	max-height: 60vh;
	width: auto;
	height: auto;
}
.diff-context {
	background: transparent;
	border-color: #444;
	color: #aaa;
}
.diff-addedline .diffchange {
	background: #304830;
}
.diff-deletedline .diffchange {
	background: #483030;
}


/*******
* EDIT *
*******/

pre, code, .mw-code, .oo-ui-window,
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
	background-color: #242424;
	border-color: #666;
	color: #FFF;
	background-image: none;
}

#filetoc {
	background-color: #242424;
}

.mw-content-ltr.mw-highlight-lines pre,
.mw-content-ltr.content .mw-highlight-lines pre {
	box-shadow: inset 2.75em 0 0 #111;
}

.wikiEditor-ui,
.editOptions,
.oo-ui-icon-close,
.oo-ui-window-body .oo-ui-iconElement-icon,
.oo-ui-iconElement-icon {
	filter: invert(1);
}

.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.mw-datatable td,
.oo-ui-menuOptionWidget:hover {
	background: #242424;
}

.oo-ui-menuOptionWidget,
.oo-ui-popupWidget-popup,
.ve-ui-mwSaveDialog-options,
.mw-datatable tr:hover td,
#pagehistory li.selected {
	background: #404040;
}
.mw-widget-titleOptionWidget-description {
	background: #404040;
	color: #fff;
}





/*****************************
* Dark mode Syntax highlight *
*****************************/

.mw-highlight .hll { background-color: #49483e }
.mw-highlight { background: #272822; color: #f8f8f2 }
.mw-highlight .c { color: #75715e } /* Comment */
.mw-highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.mw-highlight .k { color: #66d9ef } /* Keyword */
.mw-highlight .l { color: #ae81ff } /* Literal */
.mw-highlight .n { color: #f8f8f2 } /* Name */
.mw-highlight .o { color: #f92672 } /* Operator */
.mw-highlight .p { color: #f8f8f2 } /* Punctuation */
.mw-highlight .ch { color: #75715e } /* Comment.Hashbang */
.mw-highlight .cm { color: #75715e } /* Comment.Multiline */
.mw-highlight .cp { color: #75715e } /* Comment.Preproc */
.mw-highlight .cpf { color: #75715e } /* Comment.PreprocFile */
.mw-highlight .c1 { color: #75715e } /* Comment.Single */
.mw-highlight .cs { color: #75715e } /* Comment.Special */
.mw-highlight .gd { color: #f92672 } /* Generic.Deleted */
.mw-highlight .ge { font-style: italic } /* Generic.Emph */
.mw-highlight .gi { color: #a6e22e } /* Generic.Inserted */
.mw-highlight .gs { font-weight: bold } /* Generic.Strong */
.mw-highlight .gu { color: #75715e } /* Generic.Subheading */
.mw-highlight .kc { color: #66d9ef } /* Keyword.Constant */
.mw-highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.mw-highlight .kn { color: #f92672 } /* Keyword.Namespace */
.mw-highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.mw-highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.mw-highlight .kt { color: #66d9ef } /* Keyword.Type */
.mw-highlight .ld { color: #e6db74 } /* Literal.Date */
.mw-highlight .m { color: #ae81ff } /* Literal.Number */
.mw-highlight .s { color: #e6db74 } /* Literal.String */
.mw-highlight .na { color: #a6e22e } /* Name.Attribute */
.mw-highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.mw-highlight .nc { color: #a6e22e } /* Name.Class */
.mw-highlight .no { color: #66d9ef } /* Name.Constant */
.mw-highlight .nd { color: #a6e22e } /* Name.Decorator */
.mw-highlight .ni { color: #f8f8f2 } /* Name.Entity */
.mw-highlight .ne { color: #a6e22e } /* Name.Exception */
.mw-highlight .nf { color: #a6e22e } /* Name.Function */
.mw-highlight .nl { color: #f8f8f2 } /* Name.Label */
.mw-highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.mw-highlight .nx { color: #a6e22e } /* Name.Other */
.mw-highlight .py { color: #f8f8f2 } /* Name.Property */
.mw-highlight .nt { color: #f92672 } /* Name.Tag */
.mw-highlight .nv { color: #f8f8f2 } /* Name.Variable */
.mw-highlight .ow { color: #f92672 } /* Operator.Word */
.mw-highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.mw-highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
.mw-highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.mw-highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.mw-highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.mw-highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.mw-highlight .sa { color: #e6db74 } /* Literal.String.Affix */
.mw-highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.mw-highlight .sc { color: #e6db74 } /* Literal.String.Char */
.mw-highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
.mw-highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.mw-highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.mw-highlight .se { color: #ae81ff } /* Literal.String.Escape */
.mw-highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.mw-highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.mw-highlight .sx { color: #e6db74 } /* Literal.String.Other */
.mw-highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.mw-highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.mw-highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.mw-highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.mw-highlight .fm { color: #a6e22e } /* Name.Function.Magic */
.mw-highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.mw-highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.mw-highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.mw-highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
.mw-highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */





/*********************
* Mobile adjustments *
**********************/
@media screen and (max-width:720px) {
	:root {
		--wiki-content-right-margin: 0px;
		--wiki-content-padding:0.5rem;
		--wiki-navigation-right-margin: 1px;
		--wiki-navigation-left-margin: 0px;
		--wiki-navigation-top-padding: 5px;
		--wiki-navigation-bottom-padding:0px;
		--wiki-navigation-height:2rem;
		--wiki-navigation-search-height:2.15rem;
		--wiki-navigation-search-margin:0.5rem;
		--wiki-logo-height: 135px;
		--wiki-logo-width: 100%;
		--wiki-logo-margin: 10px;
		--wiki-head-height: calc(var(--wiki-logo-height) + (var(--wiki-logo-margin) * 2) + var(--wiki-navigation-height) + var(--wiki-navigation-top-padding) + var(--wiki-navigation-bottom-padding));
		--wiki-head-icon-padding: 0.25rem;
		--wiki-head-icon-size: calc(var(--wiki-navigation-height) - var(--wiki-head-icon-padding) * 2);
		--wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
		--wiki-menu-margin: 0.2rem;
		--wiki-menu-top-offset: calc(var(--wiki-head-height) + 35px + var(--wiki-navigation-bottom-padding) + var(--wiki-navigation-search-margin));
	}

	#content {
		padding-top: 50px;
	}

	#p-logo,#p-logo a {
		background-size: contain;
	}

	#mw-page-base,
	#mw-head-base {
		height:var(--wiki-head-height);
	}
	
	#mw-page-base {
		padding-top:35px;
	}
	
	#mw-head-base {
		margin-top:calc(var(--wiki-head-height) * -1);
	}

	#p-logo,
	#p-logo a {
		height: var(--wiki-logo-height);
		width: var(--wiki-logo-width);
	}
	
	#p-logo {
		position:absolute;
		background:none;
		padding:0;
		left:0;
		margin:var(--wiki-logo-margin) 0;
		transform:none;
		/* Logo's a part of the sidebar panel, which uses relative positioning for the expandable button. Offset the logo appropriately. */
		top: calc(-1 * var(--wiki-menu-top-offset) + 35px);
	}
	
	.mw-wiki-logo {
		background-size:contain;
	}
	
	#mw-head {
		left:0;
		width:100%;
		top:calc(var(--wiki-head-height) + 35px - var(--wiki-navigation-height));
		border:none;
		border-image:none;
	}
	
	#mw-navigation {
		position:unset;
	}

	#left-navigation,
	#right-navigation {
		margin-top: 0;
		height:var(--wiki-navigation-height);
	}

	#right-navigation {
		margin-right: var(--wiki-navigation-right-margin);
	}

	div#left-navigation {
		margin-left: var(--wiki-navigation-left-margin);
	}

	div#right-navigation div#p-search {
		margin-right: 0;
	}
	
	.vector-menu-tabs-legacy,
	.vector-menu-dropdown {
		height:var(--wiki-navigation-height);
	}
	
	.vector-menu-tabs-legacy li a {
		height:var(--wiki-navigation-height);
	}
	
	#p-cactions {
		padding-bottom: 0px;
	}

	#p-search {
		position: absolute;
		left: 50%;
		transform:translateX(-50%);
		top: calc(var(--wiki-navigation-height) + var(--wiki-navigation-bottom-padding));
		margin-left:0px;
		z-index: 4 /** above #mw-panel **/;
	}

	#simpleSearch {
		width: calc(100vw - var(--wiki-navigation-right-margin) - var(--wiki-navigation-left-margin));
	}
	
	.vector-search-box-input {
		height:var(--wiki-navigation-search-height);
        color:var(#fff);
	}
	
	.vector-search-box form {
		margin:var(--wiki-navigation-search-margin) 0px;
		margin: 10px 0; /*ADDED*/
	}

	.mw-body {
		border-left: none;
		border-right: none;
		margin-top: 0;
		padding-top:calc(var(--wiki-content-padding) + var(--wiki-navigation-search-height) + var(--wiki-navigation-bottom-padding) + (var(--wiki-navigation-search-margin) * 2) -6px);
	}

	.mw-footer {
		border-left: none;
		border-right: none;
	}

	#mw-panel {
		position: unset;
		width:100%;
		margin: 0px auto;
		padding: 0;
		top: 0;
		background-position:bottom right, top center;
		background-size:100% 0.5em, 100% 100%;
		float:unset;
	}
	#mw-panel::before {
		width: 100%;
		clip-path: none;
	}

	div#mw-navigation div#mw-panel .portal {
		box-sizing:border-box;
		text-align: center
	}

	.vector-menu-dropdown .vector-menu-content {
		right: 0;
		left: unset;
	}
	
	#mw-panel .vector-menu-portal {
		border-left-width:0;
		border-right-width:0;
	}
	
	table.wikitable,
	table.responsive-table {
		display: block;
		overflow-x: scroll;
	}

	/* disable float on RecentChanges legend */
	.mw-changeslist-legend {
		float: none;
		margin: 0 auto;
	}

	/* advanced search options */
	#mw-searchoptions table {
		float: none;
	}

	#mw-searchoptions table td {
		display: block;
	}

	/* popup when clicking the download button in multimediaviewer */
	.mw-mmv-dialog {
		width: unset;
	}

	/* turn math elements into scroll blocks unless they're an immediate child of a span */
	:not(span)>.mwe-math-element {
		display: block;
		overflow-x: auto;
	}

	/* Expandable mobile navigation panel */
	body.has-vector-mobile-menu #mw-panel {
		position: absolute;
		top: var(--wiki-menu-top-offset);
		z-index: 3;
	}

	body.has-vector-mobile-menu #mw-panel .mobile-nav-toggle {
		position: relative;
		z-index: 5;
		display: block;
		appearance: none;
		border: 1px solid var(--wiki-content-border-color);
		margin-left: var(--wiki-navigation-search-margin);
		margin-bottom: 2px;
		background-image: var(--wiki-content-background-color--secondary);
		margin: 4px;
	}

	body.has-vector-mobile-menu #mw-panel .vector-menu-portal {
		display: none;
	}

	body.has-vector-mobile-menu #mw-panel .mobile-nav-toggle.nav--expanded ~ .vector-menu-portal {
		display: block;
	}

	body.has-vector-mobile-menu #mw-navigation #mw-panel .vector-menu-portal {
		text-align: left;
		font-size: 110%;
		border-left-width: 1px;
		border-right-width: 1px;
		margin-inline: calc(var(--wiki-navigation-left-margin) + var(--wiki-menu-margin));
	}

	body.has-vector-mobile-menu #mw-navigation #mw-panel .vector-menu-portal + .vector-menu-portal {
		border-top: 0;
	}

	body.has-vector-mobile-menu #mw-navigation #mw-panel .vector-menu-portal:not(:last-child) {
		border-bottom: 0;
	}

	body.has-vector-mobile-menu #mw-panel .vector-menu-content-list {
		display: flex;
		flex-wrap: wrap;
	}

	body.has-vector-mobile-menu #mw-panel .vector-menu-content-list a {
		display: block;
		padding: 0.2rem 0.5rem;
		border: 1px solid transparent;
	}

	body.has-vector-mobile-menu #mw-panel .vector-menu-content-list a:hover {
		border-color: var(--wiki-content-link-color);
	}

	body.has-vector-mobile-menu #mw-panel #p-navigation-label {
		display: block;
	}

	.mobile-nav-toggle {
		background: #c3a34f;
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z'/%3E%3C/svg%3E%0A");
	}

	/* Search adjustments for the expandable menu */
	body.has-vector-mobile-menu #p-search {
		/* reposition to the right when mobile sidebar menu is active */
		left: calc(var(--wiki-navigation-search-margin) * 3 + var(--wiki-head-icon-size) + var(--wiki-head-icon-padding));
		right: calc(var(--wiki-navigation-right-margin) + var(--wiki-navigation-search-margin));
		transform: none;
	}

	body.has-vector-mobile-menu #simpleSearch {
		width: 100%;
		margin: 0 auto;
	}

	/* icon navbar tabs + expandable nav panel icon */
	#mw-head {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='none' height='24' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none' stroke='none'/%3E%3Cpath d='M4 4l4 16l4 -14l4 14l4 -16'/%3E%3C/svg%3E");
	}

	#mw-head .vector-menu-tabs .mw-list-item a,
	#mw-head .vector-menu-dropdown .vector-menu-heading,
	#mw-panel .mobile-nav-toggle {
		line-height:var(--wiki-head-icon-size);
		width: var(--wiki-head-icon-size); /* same as line height */
		height: var(--wiki-head-icon-size);
		box-sizing: content-box;
		padding: var(--wiki-head-icon-padding);
		color: transparent; /**<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. **/
	}

	#mw-head .vector-menu-tabs .mw-list-item a::before,
	#mw-head .vector-menu-dropdown .vector-menu-heading::before,
	#mw-panel .mobile-nav-toggle::before {
		content: "";
		display: block;
		position: unset;
		background-image: none;
		width: var(--wiki-head-icon-size);
		height: var(--wiki-head-icon-size);
		margin: 0;
		--mask: var(--icon) no-repeat;
		-webkit-mask: var(--mask);
		mask: var(--mask);
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-position: center center;
		mask-position: center center;
		background-color: #000;
	}

	#mw-head .vector-menu-tabs .mw-list-item a:hover::before,
	#mw-head .vector-menu-dropdown .vector-menu-heading:hover::before,
	#mw-panel .mobile-nav-toggle:hover::before,
	#mw-panel .mobile-nav-toggle.nav--expanded::before {
		background-color: #DDD;
	}

	#mw-head .vector-menu-tabs .mw-list-item a span,
	#mw-head .vector-menu-dropdown .vector-menu-heading span {
		display: none;
	}

	#mw-head .vector-menu-dropdown .vector-menu-heading::after {
		display: none;
	}

	#ca-edit {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m16.77 8 1.94-2a1 1 0 0 0 0-1.41l-3.34-3.3a1 1 0 0 0-1.41 0L12 3.23zM1 14.25V19h4.75l9.96-9.96-4.75-4.75z'/%3E%3C/svg%3E%0A");
	}

	#ca-view,
	#ca-view-foreign {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 14.5a4.5 4.5 0 1 1 4.5-4.5 4.5 4.5 0 0 1-4.5 4.5M10 3C3 3 0 10 0 10s3 7 10 7 10-7 10-7-3-7-10-7'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3C/svg%3E");
	}

	#left-navigation li[id^=ca-nstab-] {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E article %3C/title%3E%3Cpath d='M5 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 3h5v1H5zm0 2h5v1H5zm0 2h5v1H5zm10 7H5v-1h10zm0-2H5v-1h10zm0-2H5v-1h10zm0-2h-4V4h4z'/%3E%3C/svg%3E%0A");
	}

	#ca-history {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M9 6v5h.06l2.48 2.47 1.41-1.41L11 10.11V6z'/%3E%3Cpath d='M10 1a9 9 0 0 0-7.85 13.35L.5 16H6v-5.5l-2.38 2.38A7 7 0 1 1 10 17v2a9 9 0 0 0 0-18'/%3E%3C/svg%3E%0A");
	}

	#ca-talk {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M26,12H24V6a3,3,0,0,0-3-3H6A3,3,0,0,0,3,6V24.41l5.12-5.12A1.05,1.05,0,0,1,8.83,19H12v3a3,3,0,0,0,3,3h8.17a1.05,1.05,0,0,1,.71.29L29,30.41V15A3,3,0,0,0,26,12ZM12,15v2H8.83a3,3,0,0,0-2.12.88L5,19.59V6A1,1,0,0,1,6,5H21a1,1,0,0,1,1,1v6H15A3,3,0,0,0,12,15ZM27,25.59l-1.71-1.71A3,3,0,0,0,23.17,23H15a1,1,0,0,1-1-1V15a1,1,0,0,1,1-1H26a1,1,0,0,1,1,1Z'/%3E%3C/g%3E%3C/svg%3E");
	}

	#t-contributions {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg enable-background='new 0 0 32 32' id='Stock_cut' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdesc/%3E%3Cpath d='M27,12V5h-7v0 c0-2.209-1.791-4-4-4h0c-2.209,0-4,1.791-4,4v0H1v7h0c2.209,0,4,1.791,4,4v0c0,2.209-1.791,4-4,4h0v11h11v0c0-2.209,1.791-4,4-4h0 c2.209,0,4,1.791,4,4v0h7V20h0c2.209,0,4-1.791,4-4v0C31,13.791,29.209,12,27,12L27,12z' fill='none' stroke='%23000000' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E");
	}

	#ca-addsection {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpolygon points='29 15 17 15 17 3 15 3 15 15 3 15 3 17 15 17 15 28 17 28 17 17 29 17 29 15'/%3E%3C/g%3E%3C/svg%3E");
	}

	#ca-viewsource {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='heroicon-ui' d='M20.59 12l-3.3-3.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4l3.3-3.3zM3.4 12l3.3 3.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L3.4 12zm7.56 8.24a1 1 0 0 1-1.94-.48l4-16a1 1 0 1 1 1.94.48l-4 16z'/%3E%3C/svg%3E");
	}

	#p-variants {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm8,13a24.28,24.28,0,0,0-.41-3.62c2.19.91,3.75,2.19,4.25,3.62Zm-2,0H17V10a20.9,20.9,0,0,1,4.34.63A20.26,20.26,0,0,1,22,15ZM17,8V4.19c1.43.5,2.71,2.06,3.62,4.25A24.28,24.28,0,0,0,17,8ZM15,4.19V8a24.28,24.28,0,0,0-3.62.41C12.29,6.25,13.57,4.69,15,4.19ZM15,10v5H10a20.26,20.26,0,0,1,.63-4.34A20.9,20.9,0,0,1,15,10ZM8,15H4.19c.5-1.43,2.06-2.71,4.25-3.62A24.28,24.28,0,0,0,8,15Zm0,2a24.28,24.28,0,0,0,.41,3.62C6.25,19.71,4.69,18.43,4.19,17Zm2,0h5v5a20.9,20.9,0,0,1-4.34-.63A20.26,20.26,0,0,1,10,17Zm5,7v3.84c-1.43-.5-2.71-2.06-3.62-4.25A24.28,24.28,0,0,0,15,24Zm2,3.84V24a24.28,24.28,0,0,0,3.62-.41C19.71,25.75,18.43,27.31,17,27.81ZM17,22V17h5a20.26,20.26,0,0,1-.63,4.34A20.9,20.9,0,0,1,17,22Zm7-5h3.84c-.5,1.43-2.06,2.71-4.25,3.62A24.28,24.28,0,0,0,24,17Zm2.87-6.12A15.11,15.11,0,0,0,23,9a15.11,15.11,0,0,0-1.85-3.87A12.12,12.12,0,0,1,26.84,10.88Zm-16-5.72A15.11,15.11,0,0,0,9,9a15.11,15.11,0,0,0-3.87,1.85A12.12,12.12,0,0,1,10.88,5.16Zm-5.72,16A15.11,15.11,0,0,0,9,23a15.11,15.11,0,0,0,1.85,3.87A12.12,12.12,0,0,1,5.16,21.12Zm16,5.72A15.11,15.11,0,0,0,23,23a15.11,15.11,0,0,0,3.87-1.85A12.12,12.12,0,0,1,21.12,26.84Z'/%3E%3C/g%3E%3C/svg%3E");
	}

	#p-cactions {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='3' cy='10' r='2'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3C/svg%3E%0A");
	}

	#ca-watch {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z'/%3E%3C/svg%3E%0A");
	}
	
	#ca-unwatch {
		--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' id='Outlined'%3E%3Cg style='fill:%23000000;fill-opacity:1' id='Fill'%3E%3Cpath style='fill:%23000000;fill-opacity:1' id='path1380' d='M 28.61,11.67 H 20 L 17.34,3.47 C 16.920093,2.1973942 15.119907,2.1973942 14.7,3.47 L 12,11.67 H 3.39 c -1.3409796,0.0031 -1.900508,1.71581 -0.82,2.51 l 7,5.07 -2.68,8.21 C 6.5980433,28.35747 7.2662365,29.278767 8.21,29.28 8.4953889,29.267666 8.7705436,29.170143 9,29 l 7,-5.07 7,5.07 c 0.236205,0.170386 0.518805,0.264586 0.81,0.27 0.943763,-0.0012 1.611957,-0.92253 1.32,-1.82 l -2.66,-8.21 7,-5.07 c 1.075277,-0.810084 0.486081,-2.522863 -0.86,-2.5 z' /%3E%3C/g%3E%3C/svg%3E");
	}

	.vector-menu-tabs #ca-watch.icon a:hover::before,
	.vector-menu-tabs #ca-unwatch.icon a:hover::before {
		background-image:none;
	}
 
	/* RecentChanges - prevent overflow on long summaries */
	.client-js .mw-changeslist ul,
	.client-js .mw-changeslist table.mw-enhanced-rc {
		margin-left:0;
	}

	.mw-changeslist-line-inner-comment,
	.mw-changeslist-line .comment {
		font-size:0.9em;
		word-break:break-all;
	}

	.mw-userlink {
		overflow-wrap:anywhere;
	}
}

/* Hide the expandable navigation button for desktop users */
.mobile-nav-toggle {
	display: none;
}


/**************************
* Start Modular Templates *
**************************/

/********* [[Template:Link icon]] *********/
.link-icon {
	display: inline-flex; 
	align-items: center;
	height: var(--link-icon-line-height);
	vertical-align: bottom;
}

.link-icon .regular {
	align-self: center;
}

.link-icon .regular a {
	display: flex;
}

.link-icon .regular img {
	height: var(--link-icon-size);
	max-width: var(--link-icon-size);
}

.link-icon .fallback {
	outline: 1px solid var(--wiki-content-text-color);
	border-radius: 50%;
	text-align: center;
	width: var(--link-icon-size);
	line-height: var(--link-icon-size);
}

.link-icon.notext .fallback {
	display: inline-block;
}

.link-icon.notext {
	display: inline-flex;
}

/********* [[Template:Quote]] *********/
.quote {
	background: var(--wiki-content-background-color--secondary);
	border-radius: 5px;
	border: 2px solid var(--wiki-content-border-color);
	margin: .5em 0;
	padding: .5em;
}

.quote .block {
	display: block;
}

.quote .title {
	font-size: large;
	font-weight: bold;
}

.quote .content {
	font-style: italic;
}

.quote .author {
	font-weight: bold;
	text-align: end;
}

.quote .marks-wrapper {
	display: flex;
	gap: 5px;
}

.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
	font-size: 100px;
	line-height: 0px;
}

.quote .marks-wrapper::before {
	content: "“";
	margin-top: 40px;
}

.quote .marks-wrapper::after {
	content: "”";
	align-self: end;
	margin-bottom: -10px;
}


/********* [[Template:Card]] *********/

.card {
	display: grid;
	grid-template: auto 1fr / 1fr;
}
.card-title {
	background-image: linear-gradient(90deg, #fce18600 50px, #fce186ff 150px, #fce186ff calc(100% - 150px), #fce18600 calc(100% - 50px));
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100% 2px;
	font-weight: bold;
	margin-top: 8px;
	font-size: 24px;
	text-align: center;
}
.card-title > a, .card-title > a:visited {
	color: #FFF;
}

.card-content {
	padding: 4px;
}
.card-content.flex {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/************************
* End Modular Templates *
*************************/

/************
* Infoboxes *
*************/

/* portable infoboxes */
:root {
	--pi-background: transparent;
    --pi-label-color: #000;
	--pi-secondary-background: #000;
	/*--pi-secondary-background--rgb: var(rgb(0,0,0));*/
	--pi-secondary-background-label: #fff;
	--pi-border-color: #fff;
}

.portable-infobox {
	border:1px solid var(--pi-border-color);
    /*border-radius: 25px;*/
    background-color: var(--pi-background);
}

.portable-infobox .pi-image {
  padding: 8px;
}

.portable-infobox .pi-image-thumbnail {
  width: auto !important;
  max-width: 250px !important;
  height: auto !important;
}

.portable-infobox .pi-item-spacing {
  padding: 0;
}

.portable-infobox .pi-title {
  font-size: 18px;
  line-height: 23px;
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
  color: var(--pi-label-color);
  background-color: var(--pi-border-color);
  font-weight: bold;
  text-align: center;
  padding: 3px 0;
}

.portable-infobox .pi-header {
  border-top: 1px solid silver;
}

.portable-infobox .pi-data {
  border: 0;
  border-top: 1px solid silver;
  margin-bottom: px;
}

.portable-infobox .pi-data-label {
    color: var(--pi-secondary-background-label);
    padding: 5px 5px;
    min-width: 90px;
    background: var(--pi-secondary-background);
}

.portable-infobox .pi-data-value {
    line-height: 26px;
    padding: 0;
    background: transparent;
}

.portable-infobox .pi-data-value:not(:first-child) {
    padding-left: 10px;
}

.portable-infobox .center {
    text-align: center;
}

/*.portable-infobox .pi-title,
.portable-infobox .pi-header {
	text-align:center;
	font-size:1.5em;
	background:rgba(var(--pi-secondary-background--rgb), 0.75);
	color:var(--pi-secondary-background-label);
}

.portable-infobox .pi-data {
	background:rgba(var(--pi-secondary-background--rgb), 0);
}

.portable-infobox .pi-image {
	padding: 8px;
}

.pi-image-thumbnail {
	max-width:100%;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
	background: var(--pi-secondary-background);
	color: var(--pi-secondary-background-label);
}

.pi-theme-baby .pi-image-thumbnail {
	width:100px;
}*/

/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
	border-bottom: 0;
	font-family: inherit;
	font-weight: 700;
	margin: 0;
}
/**/

/* Template infoboxes; [[Template:Infobox]] and [[:Category:Infobox part templates]] */

.infobox {
  float: right;
  width: 23em;
  max-width:100%;
  margin-left: 1em;
  margin-bottom: 0.5em;
  padding: 4px;
  border:2px solid #000;
  background-color:#000;
}

.infobox-table {
  width: 100%;
  padding: 0;
  background-color:transparent;
  border: 0;
}

.infobox-header,
.infobox-section {
  background-color: #000;
  border:1px solid #000;
  font-weight:bold;
  text-align:center;
}

.infobox-header {
  font-size: 150%;
  padding:0.4em;
}

.infobox-section {
  padding:0.05em 0.5em;
}

.infobox-centered {
  text-align: center;
}

.infobox-centered img {
  max-width:100%;
  height:auto;
}

.infobox-row {
  vertical-align: top;
}

.infobox-row-name {
  text-align: left;
  vertical-align:middle;
  padding:0.1em;
  font-size:89%;
}

.infobox-spacer {
  height: 0.5em;
}

/****************
* End Infoboxes *
*****************/


/****************
* PAGE SPECIFIC *
*****************/

/* Main Page */
.mp-container {
	display: grid;
	gap: 0;
	grid-template: auto auto auto / 1fr 360px;
	grid-template-areas:
		"presentation trailer     "
		"navigation   portals     "
		"contributing contributing";
}
@media screen and (max-width: 1100px) {
	.mp-container {
		grid-template-areas:
			"presentation trailer     "
			"presentation portals     "
			"navigation   navigation  "
			"contributing contributing";
	}
}
@media screen and (max-width: 860px) {
	.mp-container {
		grid-template: auto auto auto / 1fr;
		grid-template-areas:
			"presentation"
			"navigation  "
			"trailer     "
			"portals     "
			"contributing";
	}
}

.thumbnail {
	display: grid;
	grid-template: 100px 1px / 1fr;
	width: 100px;
	align-items: end;
}
.thumbnail:hover, .thumbnail:focus {
	filter: brightness(1.2) saturate(1.15);
}
.thumbnail > a, .thumbnail > a.external {
	display: block;
	background-image: linear-gradient(90deg, #fce18600 0px, #fce186ff 10px, #fce186ff calc(100% - 10px), #fce18600 100%);
	background-size: 100% 1px;
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0;
	margin-top: -20px;
	text-align: center;
	font-size: 22px;
	line-height: 1em;
	font-weight: bold;
	text-shadow: -2px -1px 2px #000, 2px 1px 2px #000;
	width: 100%;
	color: #ffec86;
	text-decoration: none;
}

/****************
* PAGE SPECIFIC *
*****************/
Retrieved from "https://www.bzkwiki.com/index.php?title=MediaWiki:Common.css&oldid=116"