MediaWiki:Common.css

From Kovopedia, the Magical Vacation 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)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
@import url("index.php?title=MediaWiki:Themes.css&action=raw&ctype=text/css");

/***** Site-wide Changes *****/
/* Tagline */
#siteSub {
    display: block;
}

/* Main Page Blocks */
.main-page-blocks {
	display: flex;
	justify-content: center;
}

.main-page-left-block {
	padding: 10px 30px 20px;
	flex: 1 1 50%;
	margin-right: 7px;
	text-align: left;
}

.main-page-right-block {
	padding: 10px 30px 20px;
	flex: 1 1 50%;
	margin-left: 7px;
	text-align: left;

}

body.page-Main_Page.action-view #siteSub, body.page-Main_Page.action-submit #siteSub {
	display:none;
}

/* Sitenotice */
#siteNotice {
	text-align:left;
}

/* Logo */
#p-logo {
	height:135px;
}

/* Sidebar */
.vector-menu-portal .vector-menu-content ul {
	text-align: center;
	padding-right:12px;
}

#n-Discord {
   background-image: url(https://kovopedia.com/images/0/01/Discord_Icon.png);
   list-style: none;
   display: inline-block;
   width: 30%;
   height: 3em;
   padding: 0;
   margin-right: 2px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   text-indent: -9999px;
}

#n-Bluesky {
   background-image: url(https://kovopedia.com/images/9/93/Bluesky_Icon.png);
   list-style: none;
   display: inline-block;
   width: 30%;
   height: 3em;
   padding: 0;
   margin: 0 2px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   text-indent: -9999px;
   margin-bottom:1em;
}

#n-Tumblr {
   background-image: url(https://kovopedia.com/images/1/1c/Tumblr_Icon.png);
   list-style: none;
   display: inline-block;
   width: 30%;
   height: 3em;
   padding: 0;
   margin-left: 2px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   text-indent: -9999px;
   margin-bottom:1em;
}

#n-Discord a, #n-Bluesky a, #n-Tumblr a {
   display: block;
   width: 100%;
   height: 100%;
}

#p-Series-label, #p-Content-label, #p-tb-label {
	width: 160px;
	position: relative;
	right: 19px;
	background-image: none;
}

#p-Series-label span, #p-Content-label span, #p-tb-label span {
    color: #00000000;
    height: 18px;
    display: block;
}

#p-Series-label span {
	background-image: url(https://kovopedia.com/images/4/4a/Sidebar_Series.png);
}

#p-Content-label span {
	background-image: url(https://kovopedia.com/images/f/ff/Sidebar_Content.png);
}

#p-tb-label span {
	background-image: url(https://kovopedia.com/images/0/0a/Sidebar_Tools.png);
}

#n-Magical-Vacation, #n-Magical-Starsign {
	font-style: italic;
}

/* Main Page Logo */
.main-page-logo {
	height: auto;
    max-width: 500px;
    width: 100%;
}

/* Overwrite Classes */
.nobold a.mw-selflink {
	font-weight:normal;
}

/*** Roundy ***/
.roundy {
	border-radius: 10px;
}
.roundytl {
	border-top-left-radius: 10px;
}
.roundytr {
	border-top-right-radius: 10px;
}
.roundybl {
	border-bottom-left-radius: 10px;
}
.roundybr {
	border-bottom-right-radius: 10px;
}
.roundybottom {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.roundytop {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.roundyleft {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.roundyright {
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
}

/* References small text */
ol.references,
div.reflist,
div.refbegin {
    font-size: 90%;
}

/* Tooltips */
	/* Derived from https://megatenwiki.com/wiki/MediaWiki:Vector.css */

.tooltip {
    position: relative;
    display: inline-block;
    text-decoration: 1px underline #04032b dotted;
}

.tooltip .tooltiptext {
	background-color: #fff;
	color: #000;
	border: 2px solid #72a0f2;
	border-radius:1em;
	visibility: hidden;
	width:max-content;
	max-width:200px;
	text-align: center;
	padding: 6px 8px 5px;
	position: absolute;
	z-index: 1;
	bottom: 95%;
	left: 50%;
	transform: translateX(-50%);
	font-style: normal;
	line-height: 1.6;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltipsup {
	text-decoration: none;
}

.tooltip .tooltiptextsup {
	text-align:left;
	max-height:200px;
	max-width:250px;
	overflow:auto;
}

.icon-tooltip .tooltip {
	text-decoration: none;
}

.icon-tooltip td {
    vertical-align: top;
}

/*** Infobox Tooltip Hotfix ***/
.infobox .tooltiptextsup {
    right: 5%;
    left: unset;
    transform: none;
}

/*** Table ***/
/**** Derived from https://wikirby.com/wiki/MediaWiki:Common.css ****/
table.wikitable {
    background: #fff;
    color: #fff;
    margin: 1em 0;
    border: 1pt solid #000;
    border-collapse: collapse;
}

table.wikitable > * > tr > td, table.wikitable > * > tr > th {
    border: 3px solid #000851;
    padding: 0.2em 0.4em;
}

table.wikitable > * > tr > th {
    background: #002184;
}

table.wikitable > * > tr:nth-child(odd) > td {
    background: #d9ebff;
    color: black;
}

table.wikitable > * > tr:nth-child(even) > td {
    background:#c2d9fa;
    color: black;
}

table.roundtable tr:last-of-type td:first-of-type {
	border-radius: 0 0 0 10px;
}

table.roundtable tr:last-of-type td:last-of-type {
	border-radius: 0 0 10px 0;
}

table.sticky tr:first-of-type th{
	position:sticky;
	top:0;
	z-index:2
}

table.sticky-2 tr:nth-of-type(2) th{
	position:sticky;
	top:0;
	z-index:2
}

/*** OLD TABLE STYLES ***/

.ms > * > tr > td {
	background-color:#E7C6DE;
	border-color:black;
	color:#73215A;
}

.ms > * > tr > th {
	background-color:#B5529C;
	border-color:black;
	color:white;
}

.mv > * > tr > td {
	background-color:#FFEFD6;
	border-color:#635242;
	color:#635242;
}

.mv > * > tr > th {
	background-color:#EFDEC6;
	border-color:#635242;
	color:#635242;
}

/*** Infobox ***/
	/* NEW INFOBOX */
.infobox {
	float:right;
	clear:right;
	padding:1px;
	font-size:90%;
	margin:0.5em 0 0.5em 1em;
	max-width: 320px;
	width: 320px;
	border-spacing: 1px;
	border-radius: 10px;
}

.infobox tr:last-child th:first-child {
	border-bottom-left-radius: 5px;
}
.infobox tr:last-child td:last-child {
	border-bottom-right-radius: 5px;
}

.infobox .g-tab-header {
	justify-content:center;
}

.infobox .g-tab-content table {
    margin:0 auto;
}

.infobox .g-tab-content td {
    background: #FFFFFF;
}

.portable-infobox {
    border:1px solid #A2A9B1;
    border-radius:0;
    width:270px;
}

.portable-infobox .pi-title {
    text-align:center;
    background-color:#EAECF0;
    padding:6px 10px;
}

.portable-infobox .pi-group {
    border:0;
}

.portable-infobox .pi-horizontal-group {
	border-color:#A2A9B1;
}

.portable-infobox .pi-image-thumbnail {
	max-width:270px;
}

.portable-infobox .pi-image {
    background-color:white;
    border-top:1px solid #A2A9B1;
}

.portable-infobox .pi-header {
    background-color:#EAECF0;
    border-top:1px solid #A2A9B1;
    text-align:center;
    padding:6px 10px;
}

.portable-infobox .pi-data {
    border-top:1px solid #A2A9B1;
    border-bottom:0;
    min-height:34px;
}

.portable-infobox .pi-item-spacing {
    padding: 7px 10px;
}

.portable-infobox .pi-item.pi-border-color {
    border-color:#A2A9B1;
}

.portable-infobox .pi-media-collection-tabs {
	padding:0;
}

/* Table of Contents */
.toc {
	border:2px solid #72a0f2;
	border-width: 2px;
	border-radius: 1em;
}


/* G-Tabs */
.g-tab-header {
	display: flex;
	flex-wrap: wrap;
}

.g-tab {
	border: 2px solid #72a0f2;
	background-color: #fff;
	border-radius: 1em;
	padding: 0.5em 0.75em;
	font-weight: bold;
	margin: 1px;
	cursor: pointer;
	text-align:center;
	white-space: nowrap;
}

.g-tab-active {
	background-color: #e1ebfc;
}

.g-tab-content {
	display: none;
}

.g-tab-content-active {
	display: block;
}

#mw-page-base {
    background-color: transparent;
    background-image: none;
}

body {
	background-image: url(https://kovopedia.com/images/c/ce/Magical_Starsign_-_Menu_background.png);
}

.vjs-subs-caps-button {
	display:none;
}

/* Higher Resolution Sprites */
img[src*="Sprite."] {
    image-rendering: pixelated;
    transform:none !important;
}

img[src*="Icon."] {
    image-rendering: pixelated;
    transform:none !important;
}