MediaWiki:Common.css: Difference between revisions

Latest revision as of 08:07, 12 January 2026

/* CSS placed here will be applied to all skins */



/* general */

body { background-color: #eaeaea }

a *, a:hover { color: #807391 !important; text-decoration: none }

.mw-ui-button.mw-ui-progressive,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { background-color: #807391 !important; border-color: #807391 !important }

.client-darkmode { background-color: #e8e8e8 }

a, .client-darkmode a { color: #3366CC}

.mw-page-container { background-color: #efefef }

.vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu { background-color: inherit }

#vector-page-tools-pinned-container .vector-page-tools:after { display: none }


/* specific */

.contentbox {
    border: 1px solid #807391; 
    border-radius: 2px;
    margin:5px;
    padding: 5px 10px;
}

.contentheading {
    font-size: 1.75em;
    font-family: 'Linux Libertine','Georgia','Times',serif;
}

.subcontentheading {
    font-size: 1.5em;
    font-family: 'Linux Libertine','Georgia','Times',serif;
}

.contenthr {
    background-color: #e8e8e8;
    margin: 0px -10px 10px;
}


.charabutton {
    background-color: #807391;
    border: 3px outset #ddd;
    color: white !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 3px;
    width: 70px;
    height: 100px;
    overflow: hidden;
}
/* min-width:75px; replaced with a set width and height from 012port templates. */
/*     margin: 5px; */
/*     padding: 4px 8px 4px; */

.float-right {
    float: right;
    margin: 10px 0 10px 10px;
}

/* homepage table */

.mainpage tr {
    height: 360px;
    text-align: center;
}

.hover-effect img:hover {
	transform: scale(1.05);
    transition: all 125ms ease-in-out;
}

/* hover is for character portraits in game main pages */


 .contain-image {
            width: 100%;
            height: 70px;
            object-fit: contain;
}

.wrap-flex {
             display: flex;
  align-items: stretch; /* baseline | center | stretch */
}

.dotted {text-decoration:underline; text-decoration-style: dotted;}
/* for tooltip text */

.infocolor {
  color: #eef00a;
  text-decoration:underline; text-decoration-style: dotted;
}

.combodef {
   background-color: #223480;
   color: white;
   width: 60%;
}
/* for combo definition templates */

.combodefcontent {
   margin: 1em auto;
   padding: 0;
   height: 13px;
   text-align:center;
   color: white;
}
/* for combo definition templates */

.text-color-orange {
color: #e67300;
font-weight: bold;
}
/* for 012 Warrior of Light's previously bold EX damage numbers. */

/* Navigation button tests below. The goal is to create buttons that are more mobile friendly. If the tests don't work out, remove the code. */

.navbutton a {
background-color: #807391;
    border: 3px outset #ddd;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    display: flex;
    padding: 3px;
    max-width: 100px;
    height: auto;
    overflow: hidden;
    transition-duration: 0.3s;
}

.navbutton:hover a {
	background-color: #ffa31a;
	opacity: 1;
}

.navbutton a:visited {
  color: #ffffff;
}

.navbutton a img {
  margin: auto;
  user-select: none;
  overflow: hidden;
}

.navbuttongroup {
  flex-wrap: wrap;
  display: flex;
}

.charabutton2 a {
    background-color: #807391;
    border: 3px outset #ddd;
    color: white !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 3px;
    width: 70px;
    height: 100px;
    overflow: hidden;
}

.navbutton2 a {
  max-width: 90px;
  max-height: 70px;
  /*flex-grow: 1;*/
  padding: 0.2rem 0.5rem;
  background: #a5a1b5;
  border: 3px outset #ddd;
  border-radius: var(--border-radius-medium);
  color: var( --color-base--emphasized );
  box-shadow: var(--shadow-1);
  display: flex;
  /*justify-content: center;*/
  overflow: hidden;
}


.navbutton2:hover a {
	background-color: #EDA1E8;
	opacity: 1;
}

.navbutton2 a:visited {
    color: #ffff00;
}

.navbutton2 img {
  object-position: 15% 20%;
  object-fit: cover;
}

.navbutton3 a {
background: #a5a1b5;
box-shadow: 2px 2px 2px;
color: white;
display: flex;
font-weight: bold;
max-width: 120px;
max-height: 100px;
overflow: hidden;
padding: 3px;
margin:auto;
}

.navbutton3:hover a {
	background-color: #bbb8c7;
	opacity: 1;
    filter: brightness(120%);
    transition: 0.3s ease-in-out;
}

.navbutton3 img {
  object-position: 0% 30%;
  object-fit: cover;
}

/* Left column */
.leftcolumn {
  float: left;
  width: 70%;
  margin: auto;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 30%;
}

/* Clear floats after the columns */
.leftcolumn::after,
.rightcolumn::after {
  clear: both;
}

/* Responsive layout - when the screen is less than 899px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 899px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}