MediaWiki:Common.css
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.
/* CSS placed here will be applied to all skins */
/* Theme Variables */
:root,
.theme-light {
--wiki-body-background-image: url(/images/8/80/Site-background.jpg);
--wiki-body-background-color: #ffffff;
--wiki-body-background-color--rgb: 255,255,255;
--wiki-body-background-color--secondary: #ffffff;
--wiki-body-background-color--secondary--rgb: 255,255,255;
--wiki-content-background-color: #ffffff;
--wiki-content-background-color--rgb: 255, 255, 255;
--wiki-content-background-opacity: 0.8;
--wiki-content-background-color--secondary: #fbfbfb;
--wiki-content-background-color--secondary--rgb: 211, 194, 176;
--wiki-content-border-color: #CF2B83;
--wiki-content-border-color--rgb: 207, 43, 131;
--wiki-content-text-color: #111111;
--wiki-content-text-color--rgb: 17, 17, 17;
--wiki-content-heading-color: var(--wiki-content-text-color);
--wiki-content-heading-color--rgb: var(--wiki-content-text-color--rgb);
--wiki-content-link-color: #CF2B83;
--wiki-content-link-color--visited: var(--wiki-content-link-color);
--wiki-content-link-color--external: #0185C6;
--wiki-content-redlink-color: #ba0000;
--wiki-content-redlink-color--rgb: 186,0,0;
--wiki-navigation-text-color: var(--wiki-content-link-color);
--wiki-navigation-selected-text-color: var(--wiki-content-text-color);
--wiki-navigation-selected-background-color: #F4C3DD;
--wiki-sidebar-background-color: var(--wiki-content-background-color);
--wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb);
--wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
--wiki-sidebar-border-color: var(--wiki-content-border-color);
--wiki-sidebar-border-color--rgb: var(--wiki-content-border-color--rgb);
--wiki-sidebar-heading-color: var(--wiki-content-heading-color);
--wiki-sidebar-link-color: #0185C6;
--wiki-sidebar-link-color--visited: var(--wiki-sidebar-link-color);
--wiki-sidebar-link-color--external: var(--wiki-sidebar-link-color);
--wiki-footer-background-color: var(--wiki-content-background-color);
--wiki-footer-background-color--rgb: var(--wiki-content-background-color--rgb);
--wiki-footer-background-opacity: var(--wiki-content-background-opacity);
--wiki-table-background-color: #f8f9fa;
--wiki-table-background-color--rgb: 248, 249, 250;
--wiki-table-header-background-color: #eaecf0;
--wiki-table-header-background-color--rgb: 234, 236, 240;
--wiki-table-border-color: #a2a9b1;
--wiki-table-border-color--rgb: 162, 169, 177;
--wiki-table-text-color: var(--wiki-content-text-color);
}
.theme-dark {
--wiki-body-background-image: url(/images/8/80/Site-background.jpg);
--wiki-body-background-color: #000000;
--wiki-body-background-color--rgb: 0,0,0;
--wiki-body-background-color--secondary: #000000;
--wiki-body-background-color--secondary--rgb: 0,0,0;
--wiki-content-background-color: #483E49;
--wiki-content-background-color--rgb: 72, 62, 73;
--wiki-content-background-opacity: 0.9;
--wiki-content-background-color--secondary: #353535;
--wiki-content-background-color--secondary--rgb: 53, 53, 53;
--wiki-content-border-color: #F4C3DD;
--wiki-content-border-color--rgb: 244, 195, 221;
--wiki-content-text-color: #ffffff;
--wiki-content-text-color--rgb: 255, 255, 255;
--wiki-content-heading-color: var(--wiki-content-text-color);
--wiki-content-heading-color--rgb: var(--wiki-content-text-color--rgb);
--wiki-content-link-color: #F4C3DD;
--wiki-content-link-color--visited: var(--wiki-content-link-color);
--wiki-content-link-color--external: #70CFFF;
--wiki-content-redlink-color: #FC3B2C;
--wiki-content-redlink-color--rgb: 252, 59, 44;
--wiki-navigation-text-color: var(--wiki-content-link-color);
--wiki-navigation-selected-text-color: var(--wiki-content-text-color);
--wiki-navigation-selected-background-color: #F4C3DD;
--wiki-sidebar-background-color: var(--wiki-content-background-color);
--wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb);
--wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
--wiki-sidebar-border-color: var(--wiki-content-border-color);
--wiki-sidebar-border-color--rgb: var(--wiki-content-border-color--rgb);
--wiki-sidebar-heading-color: var(--wiki-content-heading-color);
--wiki-sidebar-link-color: #C1E2E4;
--wiki-sidebar-link-color--visited: var(--wiki-sidebar-link-color);
--wiki-sidebar-link-color--external: var(--wiki-sidebar-link-color);
--wiki-footer-background-color: var(--wiki-content-background-color);
--wiki-footer-background-color--rgb: var(--wiki-content-background-color--rgb);
--wiki-footer-background-opacity: var(--wiki-content-background-opacity);
--wiki-table-background-color: #505050;
--wiki-table-background-color--rgb: 80, 80, 80;
--wiki-table-header-background-color: #353535;
--wiki-table-header-background-color--rgb: 53, 53, 53;
--wiki-table-border-color: #A2A8AF;
--wiki-table-border-color--rgb: 162, 168, 175;
--wiki-table-text-color: var(--wiki-content-text-color);
}
/* Character Table */
.c-table {
border-width: 2px;
border-color: #ff66cc;
border-style: solid;
border-bottom: 2px solid #ff66cc;
border-collapse: collapse;
}
.c-table td{
border-width: 2px;
border-color: #ff66cc;
border-style: solid;
border-bottom: 2px solid #ff66cc;
}
/* Background Image -- Need Lower Res Image for better loadtimes */
body {
background: var(--wiki-body-background-image) no-repeat fixed center center / cover;
background-color: var(--wiki-body-background-color); /* Fallback Color */
}
/* Pink Rounded Border Around Global Wiki Panel */
#mw-panel {
position: fixed;
float: left;
top: 50px;
bottom: 0;
padding-bottom: 15px;
margin-right: 1em;
margin-bottom: 35px;
border: 3px solid var(--wiki-sidebar-border-color);
border-left: none;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background: rgba(var(--wiki-sidebar-background-color--rgb), var(--wiki-sidebar-background-opacity));
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
@media screen and (min-width: 721px) {
#mw-panel {
overflow: hidden clip;
}
#mw-panel:hover {
overflow-y: scroll;
}
/* Adjust Logo Position */
#p-logo {
margin: 0;
width: auto;
height: auto;
}
#p-logo a {
background-position: center center;
background-repeat: no-repeat;
background-size: calc(100% - 1em);
display: block;
width: 10em;
height: 5em;
text-decoration: none;
}
#mw-panel:hover #p-logo a {
background-size: calc(100% - 2em);
background-position: calc(50% - 0.5em) center;
}
}
@media screen and (min-width: 982px) {
#mw-panel {
padding-left: 0;
}
}
.vector-menu-portal .vector-menu-heading {
color: var(--wiki-sidebar-heading-color);
}
.vector-menu-portal .vector-menu-content li a {
color: var(--wiki-sidebar-link-color);
}
.vector-menu-portal .vector-menu-content li a:visited {
color: var(--wiki-sidebar-link-color--visited);
}
/* Page Content */
.mw-body {
margin-right: 1em;
padding: 1.25em 1.5em 1.5em;
min-height: 500px;
margin-bottom: 20px;
background: rgba(var(--wiki-content-background-color--rgb), var(--wiki-content-background-opacity));
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 982px) {
.mw-body,
.mw-footer,
#mw-data-after-content,
#left-navigation
{
margin-left: 10.5em;
}
}
@media screen and (max-width: 720px) {
#left-navigation,
#content,
footer#footer {
margin-right: 0;
}
#wikigg-header.no-session ~ .content-wrapper,
#wikigg-header.no-session ~ .content-wrapper #mw-head,
#wikigg-header.no-session ~ .content-wrapper #mw-panel {
margin-top: 35px;
}
}
/* Text Colors */
.mw-body,
.parsoid-body,
.mw-footer {
color: var(--wiki-content-text-color);
}
h1, h2, h3, h4, h5, h6 {
color: var(--wiki-content-text-color);
}
/* Link Colors */
a {
color: var(--wiki-content-link-color);
}
a:visited {
color: var(--wiki-content-link-color--visited);
}
.mw-parser-output a.extiw,
.mw-parser-output a.external {
color: var(--wiki-content-link-color--external);
}
a.new {
color: var(--wiki-content-redlink-color);
}
/* Footer Changes */
.mw-footer {
background: rgba(var(--wiki-footer-background-color--rgb), var(--wiki-footer-background-opacity));
margin-right: 1em;
}
.mw-footer ul {
padding: 0 1em;
}
.mw-footer li {
color: var(--wiki-content-text-color);
}
/* Top Nav */
.vector-menu-tabs,
.vector-menu-dropdown .vector-menu-heading {
background: white; /* Fallback Color */
background: rgba(var(--wiki-content-background-color--rgb), 1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.vector-menu-tabs {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.vector-menu-tabs#p-views {
border-top-right-radius: 0;
}
#mw-head .vector-menu-dropdown .vector-menu-heading {
border-top-right-radius: 10px;
background-image: none;
}
.vector-menu-tabs a {
background: none;
}
.vector-menu-tabs li {
background: none;
}
.vector-menu-tabs .selected {
background: none;
color: var(--wiki-navigation-selected-text-color);
background-color: var(--wiki-navigation-selected-background-color);
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.vector-menu-dropdown h3 {
background: none;
}
#mw-page-base {
background: none;
}
.vector-menu-tabs-legacy li a,
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-dropdown .mw-list-item a {
color: var(--wiki-navigation-text-color);
}
/* Other Page Elements */
.catlinks,
ul#filetoc {
background: var(--wiki-content-background-color--secondary);
border: 1px solid var(--wiki-content-border-color);
}
.toc {
position: sticky;
top: 50px;
float: right;
border-radius: 10px;
box-shadow: 0 0.1em 0.2em #000000;
}
.toc, .toccolours {
background-color: var(--wiki-content-background-color--secondary);
border: 1px solid var(--wiki-content-border-color);
}
.tocnumber {
color: var(--wiki-content-text-color);
}
/* Personal Navigation */
#p-personal {
background-color: white; /* Fallback Color */
background-color: rgba(var(--wiki-content-background-color--rgb), var(--wiki-content-background-opacity));
top: -2px;
padding-right: 15px;
border-bottom-left-radius: 20px;
border: 1px solid;
border-color: var(--wiki-content-border-color);
width: auto;
}
#p-personal a {
color: black;
}
#p-personal a:visited {
color: black;
}
#p-personal a:hover {
color: var(--wiki-content-border-color);
}
#p-personal a:active {
color: var(--wiki-content-border-color);
}
/** from responsiveContentBase */
@media only screen and ( max-width: 600px ) {
/* !important to ignore inline styles */
/* .mw-body-content to increase specificity */
.mw-body-content table {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
.mw-body-content table {
overflow: auto;
overflow-y: hidden;
overflow-x: auto;
max-width: 100% !important;
}
.mw-body-content .thumb,
.mw-body-content figure[typeof~='mw:File/Thumb'],
.mw-body-content figure[typeof~='mw:File/Frame'] {
float: none;
clear: none;
margin: 0.5em auto;
}
.mw-body-content .thumbinner {
margin: 0 auto;
max-width: 100%;
box-sizing: border-box;
border: 0;
background-color: transparent;
}
.mw-body-content .thumbinner .thumbimage {
max-width: 100%;
height: auto;
object-fit: contain;
}
.mw-body-content .thumbimage {
border: 0;
background-color: transparent;
}
.mw-body-content figure[typeof~='mw:File/Thumb'],
.mw-body-content figure[typeof~='mw:File/Frame'],
.mw-body-content figure[typeof~='mw:File/Thumb'] > figcaption,
.mw-body-content figure[typeof~='mw:File/Frame'] > figcaption {
border: 0;
background-color: transparent;
}
.mw-body-content figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
.mw-body-content figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
margin: 0 auto;
max-width: calc(100% - 6px);
height: auto;
object-fit: contain;
box-sizing: border-box;
border: 0;
background-color: transparent;
}
.mw-body-content .thumbcaption > .magnify {
display: none;
}
.mw-body-content figure[typeof~='mw:File/Thumb'] > figcaption::before,
.mw-body-content figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,
.mw-body-content figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
content: none;
}
/* amboxes become normal blocks */
.mw-body-content table.ambox > tbody,
.mw-body-content table.ambox > tbody > tr {
display: block;
}
/* of which we hide some parts by default to shorten them */
.mw-body-content .ambox .mbox-image,
.mw-body-content .ambox .mbox-text .hide-when-compact {
display: none;
cursor: pointer;
}
.mw-body-content table.ambox {
font-size: 80%;
background-color: transparent;
margin-left: 0 !important;
padding: 0 !important;
border-width: 0 0 0 3px;
}
.mw-body-content .ambox .mbox-text-span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
/* But we can flip a class to undo the hiding */
.ambox.mbox-expand .mbox-text-span {
text-overflow: initial;
white-space: normal;
overflow: auto;
}
.ambox.mbox-expand .mbox-text .hide-when-compact {
display: inline;
}
#firstHeading .mw-editsection,
#coordinates {
display: none;
}
.mw-body-content .infobox,
.mw-body-content .navbox,
.mw-body-content .navbox > .navbox-inner {
width: 100% !important;
box-sizing: border-box;
display: table;
}
.mw-body-content .image > img,
.mw-body-content [typeof~='mw:File'] .mw-file-element,
.mw-body-content [typeof~='mw:File/Frameless'] .mw-file-element {
max-width: 100%;
min-width: 20px;
height: auto;
object-fit: contain;
}
.mw-body-content {
word-wrap: break-word;
}
}
@media only screen and ( max-width: 600px ) and ( -webkit-min-device-pixel-ratio: 1.5 ),
only screen and ( max-width: 600px) and ( min-resolution: 1.5dppx ) {
@supports ( object-fit: contain ) {
.mw-body-content div.thumbinner,
.mw-body-content figure[typeof~='mw:File/Thumb'],
.mw-body-content figure[typeof~='mw:File/Frame'] {
width: 100% !important;
}
.mw-body-content div.thumbinner .thumbimage,
.mw-body-content figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
.mw-body-content figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
width: 100%;
object-fit: contain;
max-height: 60vh;
}
}
}
@media ( min-width: 1500px ) {
.ns-0:not(.page-Hello_Kitty_Island_Adventure_Wiki) .mw-body-content .mw-parser-output > * {
margin-right: 350px !important;
}
.ns-0 .mw-body-content .mw-parser-output > * > li {
list-style-position: inside;
}
.ns-0 .mw-body-content .mw-parser-output > .infobox,
.ns-0 .mw-body-content .mw-parser-output > .sidebar,
.ns-0 .mw-body-content .mw-parser-output > .floatright,
.ns-0 .mw-body-content .mw-parser-output > .sistersitebox,
.ns-0 .mw-body-content .mw-parser-output > .mbox-small,
.ns-0 .mw-body-content .mw-parser-output > .tright,
.ns-0 .mw-body-content .mw-parser-output > .mw-halign-right,
.ns-0 .mw-body-content.mw-content-ltr .mw-parser-output > figure[typeof~='mw:File/Thumb']:not(.mw-halign-left, .mw-halign-none, .mw-halign-center),
.ns-0 .mw-body-content.mw-content-ltr .mw-parser-output > figure[typeof~='mw:File/Frame']:not(.mw-halign-left, .mw-halign-none, .mw-halign-center) {
margin-right: 0 !important;
margin-left: 1.4em !important;
}
.ns-0 .mw-body-content .mw-parser-output > .infobox,
.ns-0 .mw-body-content .mw-parser-output > .sidebar,
.ns-0 .mw-body-content .mw-parser-output > .floatright,
.ns-0 .mw-body-content .mw-parser-output > .tright {
min-width: 330px !important;
}
.ns-0 .mw-body-content .mw-parser-output > .infobox,
.ns-0 .mw-body-content .mw-parser-output > .sidebar,
.ns-0 .mw-body-content .mw-parser-output > .tright > .thumbinner {
width: 330px !important;
box-sizing: border-box;
}
.ns-0 .mw-body-content .mw-parser-output > .tright .thumbimage {
width: 100%;
height: auto;
}
.ns-0 .mw-body-content .mw-parser-output > .mw-halign-right > :not(figcaption) .mw-file-element,
.ns-0 .mw-body-content.mw-content-ltr .mw-parser-output > figure[typeof~='mw:File/Thumb']:not(.mw-halign-left, .mw-halign-none, .mw-halign-center) > :not(figcaption) .mw-file-element ,
.ns-0 .mw-body-content.mw-content-ltr .mw-parser-output > figure[typeof~='mw:File/Frame']:not(.mw-halign-left, .mw-halign-none, .mw-halign-center) > :not(figcaption) .mw-file-element {
width: 330px !important;
box-sizing: border-box;
height: auto;
}
.ns-0 .mw-body-content .mw-parser-output > #toc,
.ns-0 .mw-body-content .mw-parser-output > .floatleft,
.ns-0 .mw-body-content .mw-parser-output > .tleft,
.ns-0 .mw-body-content .mw-parser-output > .mw-halign-left,
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Thumb']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center),
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Frame']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center) {
margin-right: 1.4em !important;
}
.ns-0 .mw-body-content .mw-parser-output > table,
.ns-0 .mw-body-content .mw-parser-output > .center,
.ns-0 .mw-body-content .mw-parser-output > .navbox {
max-width: calc( 100% - 350px );
}
}
@media ( min-width: 1900px ) {
.ns-0:not(.page-Hello_Kitty_Island_Adventure_Wiki) .mw-body-content .mw-parser-output > * {
margin-left: 350px !important;
}
.ns-0 .mw-body-content .mw-parser-output > #toc {
box-sizing: border-box;
float: left;
}
.ns-0 .mw-body-content .mw-parser-output > #toc,
.ns-0 .mw-body-content .mw-parser-output > .floatleft,
.ns-0 .mw-body-content .mw-parser-output > .mbox-small-left,
.ns-0 .mw-body-content .mw-parser-output > .tleft,
.ns-0 .mw-body-content .mw-parser-output > .mw-halign-left,
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Thumb']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center),
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Frame']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center) {
margin-left: 0 !important;
}
.ns-0 .mw-body-content .mw-parser-output > #toc,
.ns-0 .mw-body-content .mw-parser-output > .floatleft,
.ns-0 .mw-body-content .mw-parser-output > .tleft {
min-width: 330px !important;
max-width: 330px !important;
}
.ns-0 .mw-body-content .mw-parser-output > .tleft > .thumbinner {
width: 330px !important;
box-sizing: border-box;
}
.ns-0 .mw-body-content .mw-parser-output > .tleft .thumbimage {
width: 100%;
height: auto;
}
.ns-0 .mw-body-content .mw-parser-output > .mw-halign-left > :not(figcaption) .mw-file-element,
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Thumb']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center) > :not(figcaption) .mw-file-element,
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Frame']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center) > :not(figcaption) .mw-file-element {
width: 330px !important;
box-sizing: border-box;
height: auto;
}
/* Do this in all namespaces */
:not( .ns-0 ) .mw-body-content .mw-parser-output {
max-width: 1900px;
margin-left: auto;
margin-right: auto;
}
.ns-0 .mw-body > :not(.mw-body-content),
.ns-0 .mw-body-content > :not(#mw-content-text) {
max-width: calc( 1900px - 700px );
margin-left: auto;
margin-right: auto;
}
/* 700 is 350+350 (right side bar + left side bar) */
.ns-0 .mw-body-content .mw-parser-output > table,
.ns-0 .mw-body-content .mw-parser-output > .center,
.ns-0 .mw-body-content .mw-parser-output > .navbox {
max-width: calc( 100% - 700px );
}
/* We increase the font size a bit */
.skin-vector .mw-body-content {
font-size: 0.95em;
}
}
@media only screen and ( max-width: 600px ) and ( -webkit-min-device-pixel-ratio: 2 ),
only screen and ( max-width:600px ) and ( min-resolution: 2dppx ) {
/* We reduce the font size a bit, since retina screens rule */
.skin-vector .mw-body-content {
font-size: 0.75em;
}
.skin-vector .mw-body h1,
.skin-vector .mw-body h2,
.skin-vector .mw-body h3 {
font-size: 1em;
font-weight: bold;
}
}
/* Main Page */
.welcome-logo img {
max-width: 100%;
height: auto;
}
/* Tables */
.wikitable {
color: var(--wiki-table-text-color);
background-color: var(--wiki-table-background-color);
border: 1px solid var(--wiki-table-border-color);
}
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
border: 1px solid var(--wiki-table-border-color);
}
.wikitable > tr > th,
.wikitable > * > tr > th {
background-color: var(--wiki-table-header-background-color);
}