MediaWiki:Vector.css

From Dark Deity Wiki
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
html {
	scroll-padding-top: 35px;
}
/* Background */
body {
	background: var(--theme-background-image) top center / cover no-repeat fixed;
	/*background-color: var(--theme-background-main);*/
}
#mw-page-base {
	background: none;
}

/* reposition logo */
#p-logo {
	left: 50%;
	position: absolute;
	top: 35px;
	transform: translate(-50%, 0);
}

/* resize logo */
#p-logo,
#p-logo a {
	background-size: 100%;
	height: 140px;
	width: 374px;
}

/* top navigation offset */
#left-navigation,
#right-navigation {
	margin-top: 175px;
}

#mw-head-base {
	border: none;
}
.vectorTabs,
.vectorTabs li,
.vectorTabs li.selected,
.vectorTabs li span,
.vectorTabs ul,
#mw-head .vectorMenu #p-cactions-label {
	background: none;
}
#mw-head .vectorTabs li:not(.new) a,
#mw-head .vectorTabs li.selected a,
#mw-head .vectorMenu #p-cactions-label span {
	color: #fff;
	font-weight: 700;
	text-shadow: 0 0 10px #000;
}
#p-cactions-label span:after {
	filter: invert(1);
}
.vector-menu-portal .vector-menu-heading {
  background-image: none;
}
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
  background-image: none;
}
.vector-menu-tabs .new a,
.vector-menu-tabs .new a:visited {
	color: var(--theme-alert-color);
}

/* Link color */
.content-body a,
.content-body a.external,
.content-body a.extiw,
.content-body a:visited,
.content-body a.external:visited,
.content-body a.extiw:visited {
	color: var(--theme-link-color);
}
.content-body a:not(.mw-selflink):hover,
.content-body a.external:hover,
.content-body a.extiw:hover {
	color: var(--theme-link-color--hover);
	text-decoration: underline;
}
.content-body a.new {
	color: var(--theme-alert-color);
}
.content-body a.new:hover {
	color: var(--theme-alert-color--hover);
}
a.mw-selflink {
	color: var(--theme-text-color);
}
a.mw-selflink:hover {
	text-decoration: none;
}

/* Content */
#content {
	margin-top: 8.5em;
	background-color: var(--theme-content-background);
	border-radius: 0.3em 0.3em 0 0;
	border-bottom: 0;
	color: var(--theme-text-color);
}
.mw-body {
	border-color: #474646;
}

/* Footer */
#footer {
	background-color: var(--theme-content-background);
	border-radius: 0 0 0.3em 0.3em;
	color: var(--theme-text-color);
	margin-bottom: 0.5em;
}
#footer #footer-info li {
	color: var(--theme-text-color);
}

/* Sidebar */
#mw-panel #p-logo + .portal {
	margin-top: 0;
}
#mw-panel .portal + .portal {
	margin-top: 0.5em;
}

#mw-panel .portal {
	backdrop-filter: blur(5px);
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	margin-top: 0.5em;
	overflow: unset;
	padding-top: 0;
}
#mw-panel .portal .body {
	background-image: none;
}
#mw-panel .portal .vector-menu-heading {
	background-color: #000;
	border-radius: 5px;
	color: #fff;
	font-size: 1em;
	margin: 0;
	padding: 5px 0;
	text-align: center;
}
#mw-panel .portal .body li a,
#mw-panel .portal .body li a:visited {
	color: #fff;
	text-shadow: 0 0 10px black;
}

/* hide footer */
#footer-places {
	display: none;
}

/* text color */
h1, h2, h3, h4, h5, h6, .mw-body {
	color: var(--theme-text-color);
}
.codeEditor-status-worker-cell {
	color: #000;
}

/* Tables */
code {
    border: none;
    background-color: inherit;
    color: inherit;
}
pre {
    color: #c1c1c1;
    background-color: #4c4c4c;
    border-color: #666;
}

/* version history diff */
.diff td.diff-context {
	background: transparent;
	border-color: var(--theme-border-color);
	color: var(--theme-text-color);
}
.diff td.diff-addedline {
	background-color: var(--theme-background-color);
	border-color: var(--theme-success-color);
}
.diff td.diff-addedline .diffchange {
	background-color: var(--theme-success-color);
	color: #fff;
}
.diff td.diff-deletedline {
	background-color: var(--theme-background-color);
	border-color: var(--theme-alert-color);
}
.diff td.diff-deletedline .diffchange {
	background-color: var(--theme-alert-color);
	color: #fff;
}
#pagehistory li {
	border: 1px solid var(--theme-border-color);
}
#pagehistory li.selected {
	background-color: var(--theme-background-color--secondary);
	color: var(--theme-text-color);
}

/* Thumbnails */
.vector-body .gallerybox .thumb {
    background-color: rgba(255,255,255,.4);
    border-color: #fff;
}
.theme-dark .vector-body .gallerybox .thumb {
    background-color: rgba(0,0,0,.4);
    border-color: #000;
}

/* ToC */
.theme-dark #toc,
.theme-dark .catlinks {
	background: #1a1a1a;
}

/* Portable Infobox */
.portable-infobox {
	border-radius: 7px;
	border: 2px solid var(--theme-border-color);
	padding: 1px;
	--pi-item-spacing: 1px;
	--pi-background: rgba(0,0,0,0.25);
	--pi-secondary-background: #000;
	--pi-border-color: transparent
}
.portable-infobox .pi-title {
	font-size: 1.2rem;
}
.portable-infobox .pi-header {
	font-size: 0.8rem;
	padding: 4px;
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
	background: var(--theme-background-gradient);
	border-radius: 7px;
	color: white;
	font-weight: bold;
	text-align: center;
}
.portable-infobox .pi-data-label {
	background-color: var(--theme-title-border);
	border-radius: 7px;
	color: white;
	padding: 2px 4px;
}

/* Tabber */
.tabber {
	width: fit-content;
}

/* Category footer */
.catlinks {
	border: none;
	border-radius: 5px;
}

/* Copyright CC-BY-SA icon */
/* Copied from Terraria wiki */
#footer{
	/* self */
	padding: 12px;
	box-sizing: border-box;
	position: relative;
	/* grid */
	display: grid;
	grid-template-columns: [l] 1fr 0fr [r];
	grid-template-rows: [t] auto auto [b];
	z-index: 0;
}
#footer-info{
	font-size: 11px;
	display: contents;
}
#footer ul li{
	font-size: inherit;
	line-height: 1.5;
	padding: 0;
}
#footer-icons{
	grid-column: span 1 / r;
	grid-row: t / b;
	place-self: end;
}
#footer #footer-info-lastmod{
	grid-column: l / span 1;
	grid-row: t / span 1;
	place-self: start;
	margin-bottom: 1em;
}
#footer #footer-info-copyright{
	grid-column: l / span 1;
	grid-row: span 1 / b;
	place-self: end stretch;
	position: relative;
	padding-right: 100px;
}
#footer-info-copyright img{
	position: absolute;
	right: 0;
	/* mediawiki logo is 31px height, and this image has a 1px black border, 
	   a small tweak to make them visually matched on size and position */
	bottom: -1px;
	height: 33px;
	width: auto;
}
.ace_text-input {
	position: absolute!important;
}

/* temporary fixes */
table {
	display: table;
	white-space: inherit;
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
	background-color: transparent;
}

/* wikitable and cargoTable main */
.mw-datatable,
.mw_metadata,
.mw-tags-table,
.mw-json,
.cargoTable,
.cargo-tablelist,
.wikitable {
	background-color: var(--theme-table-background);
	color: var(--theme-text-color);
}

/* wikitable and cargoTable header */
.mw_metadata > * > tr > th,
.mw-datatable > tr > th,
.mw-datatable > * > tr > th,
.mw-json > tr > th,
.mw-json > * > tr > th,
.cargoTable > tr > th,
.cargoTable > * > tr > th,
.wikitable > tr > th,
.wikitable > * > tr > th {
	background-color: var(--theme-table-header);
	border-color: var(--theme-border-color);
	color: var(--theme-text-color);
	padding-bottom: 0.56rem;
	padding-top: 0.56rem;
}

/* wikitable and cargoTable data */
.mw_metadata > * > tr > td,
.mw-datatable > tr > td,
.mw-datatable > * > tr > td,
.mw-json > tr > td,
.mw-json > * > tr > td,
.cargoTable > tr > td,
.cargoTable > * > tr > td,
.wikitable > tr > td,
.wikitable > * > tr > td {
	border-color: var(--theme-border-color);
	color: var(--theme-text-color);
	padding: 0.2rem 0.4rem;
}
.mw-datatable > * > tr:hover > td,
#mw-content-text table.cargoTable tr,
.mw_metadata td,
.mw-datatable td {
	background-color: transparent;
}
.cargo-tablelist > tr:hover > td,
.cargo-tablelist > * > tr:hover > td,
.cargoTable > tr:hover > td,
.cargoTable > * > tr:hover > td,
.mw-datatable > tr:hover > td,
.mw-datatable > * > tr:hover > td,
.wikitable > tr:hover > td,
.wikitable > * > tr:hover > td {
	background-image: linear-gradient(
		rgba(var(--theme-hover-background), var(--theme-hover-transparency)),
		rgba(var(--theme-hover-background), var(--theme-hover-transparency))
	);
}
.theme-dark .cargo-tablelist .oo-ui-iconWidget {
	filter: invert(1);
}