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.
@import url("/index.php?action=raw&title=MediaWiki:FrontPage.css&ctype=text/css");
@import url("/index.php?action=raw&title=MediaWiki:DrawFrameData.css&ctype=text/css");
@import url("/index.php?action=raw&title=MediaWiki:ActionSlideshow.css&ctype=text/css");
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
/* Allow limiting of which header levels are shown in a TOC;
<div class="toclimit-3">, for instance, will limit to
showing ==headings== and ===headings=== but no further
(as long as there are no =headings= on the page, which
there shouldn't be according to the MoS).
*/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}
/* Invisible header for MoveData editing */
.invisible-header {
visibility: hidden;
float: right;
}
.flex-image {
height: auto;
width: 100%;
}
/* Colors (Needed for darkmode) */
.color-red {
color: red;
}
.color-orange {
color: orange;
}
.color-yellow {
color: yellow;
}
.color-green {
color: green;
}
.color-blue {
color: blue;
}
.color-indigo {
color: indigo;
}
.color-violet {
color: violet;
}
.color-purple {
color: purple;
}
.color-brown {
color: brown;
}
.color-white {
color: white;
}
.color-black {
color: black;
}
.color-gray {
color: gray;
}
/**
* Styling for links generated by [[MediaWiki:Edittools]]
* @source https://www.mediawiki.org/wiki/Extension:CharInsert#Styling
* @updated 2020-03-17
*/
.mw-charinsert-buttons {
border: 1px solid #aaa;
margin-top: 10px;
padding: 1px;
font-size: 1.1em;
text-align: left;
}
.mw-charinsert-buttons a {
background-color: #cde !important;
color: #000;
border: thin #069 outset;
padding: 0 1px 1px;
font-weight: bold;
font-size: 0.9em;
text-decoration: none;
}
.mw-charinsert-buttons a:hover,
.mw-charinsert-buttons a:active {
background-color: #bcd;
border-style: inset;
}
.client-js .mw-edittools-section {
display: inline;
}
.client-js .mw-edittools-section input[type="button"] {
font-size: 0.9em;
margin-left: 1px;
padding-left: 1px;
padding-right: 1px;
}
.mw-edittools-section > table > tbody > tr > td > p {
margin:0;
}
/* MoveData Hitbox Toggle */
.hitbox-toggle-off,
.hitbox-toggle-on {
background-image: url("/images/a/a9/Hitbox_display_button.png");
border: 1px solid #000;
width: 134px;
height: 24px;
cursor: pointer;
}
.hitbox-toggle-on {
opacity: 1.0;
display: none;
}
.hitbox-toggle-off {
opacity: 0.5;
}
.move-image,
.move-caption {
}
.hitbox-image,
.hitbox-caption {
display: none;
}
/* End MoveData Hitbox Toggle */
/* Fancy Tooltips */
.tooltip-content {
background-color: black;
color: white;
border-radius: 6px;
width: 400px;
text-align: center;
padding: 5px 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 999;
top: 150%;
left: 0%;
margin-left: 0px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* Navbox */
.nav-header {
background-color: #ccf;
font-weight: bold;
font-style: italic;
text-align: center;
}
.navbox {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
border-style: solid;
clear: both;
width: 80%;
margin: auto;
}
.navbox-header {
width: 100%;
text-align: center;
background-color: #ccf;
font-weight: bold;
font-style: italic;
}
.navbox-row {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
align-content: stretch;
}
.navbox-row-header {
width: 10%;
text-align: center;
}
.navbox-row-items {
width: 90%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
}
.navbox-item {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
align-content: stretch;
}
/* Color Gallery */
.color-gallery-header {
font-weight: bold;
background-color: #f2f2f2;
border-bottom: solid #aaa 1px;
text-align: center;
line-height: 1em;
}
.color-gallery-header hr {
flex-basis: 100%;
height: 0;
margin: 0;
border: 0;
}
.homebox a {
color: #fff;
}
.homebox {
display: inline-block;
border: 1px solid #d8d8d8;
padding: 8px 16px;
font-size: 20px;
margin: 12px;
background: #07a9f5;
border-radius: 10px;
box-shadow: 4px 5px 5px -1px rgba(0,0,0,0.35);
}
#p-logo, a.mw-wiki-logo {
height: 80px !important;
}
/* Skullgirls MoveData specific formatting */
.transparent-background {
background-color: transparent;
}
.transparent-background > * > tr > td {
padding: 0;
}
.no-borders, .no-borders > * > tr > th {
border: none;
}
.force-border-bottom {
border-bottom: 1px solid #a2a9b1;
}
.doc-header {
background: #BBBBFF;
border-left: solid 3px #AAAAFF;
border-right: solid 3px #AAAAFF;
border-top: solid 3px #AAAAFF;
}
.doc-content {
background:#DDDDFF;
border: solid 3px #AAAAFF;
padding: 10px;
}
.bullet-table > tbody > tr > td > p {
margin: 0;
}
.mizubox {
border: 1px solid #a7d7f9;
border-radius: 2px;
margin:5px;
}
.mizubutton {
background-color: #07a9f5;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 4px 8px 4px;
border-radius: 4px;
margin: 5px;
}
.mizubutton > a {
color: white !important;
}
.EFZ-FF span {
color: blue;
}
.EFZ-SF span {
color: red;
}
/* MoveDataCargo CSS */
.movedata-container {
border: 1px solid #a2a9b1;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: stretch;
background-color: white;
}
.movedata-flex-image-container {
display: flex;
flex-flow: column;
justify-content: center;
align-content: flex-start;
padding: 3px;
text-align: center;
line-height: 1.3em;
background-color: #eaecf0;
border: 1px solid #a2a9b1;
flex-basis: 180px;
flex-grow: 1;
flex-shrink: 1;
}
.movedata-flex-images {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: flex-start;
text-align: center;
flex-grow: 1;
flex-shrink: 1;
}
.movedata-flex-images > div > div{
flex-basis: 175px;
display: flex;
flex-flow: column;
justify-content: center;
}
.movedata-flex-information {
display: flex;
flex-flow: column nowrap;
flex-shrink: 0;
flex-grow: 1000;
flex-basis: 300px;
overflow-x: auto;
}
.movedata-flex-framedata {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: stretch;
}
.movedata-flex-framedata-name {
border: 1px solid #a2a9b1;
border-collapse: collapse;
display: flex;
flex-flow: row-reverse wrap;
justify-content: flex-start;
align-content: stretch;
flex-shrink: 1;
flex-grow: 1;
text-align: center;
flex-basis: 130px;
background-color: #eaecf0;
}
.movedata-flex-framedata-name-item {
min-width: 130px;
padding: 3px 5px;
flex-grow: 1;
}
.movedata-flex-framedata-name-item-topright {
text-align: right;
}
.movedata-flex-framedata-name-item-middle {
display: inline-block;
vertical-align: middle;
}
.movedata-flex-framedata-table {
margin: 0;
flex-shrink: 0;
flex-grow: 1000;
flex-basis: 300px;
}
.movedata-flex-information > p {
margin: 3px 5px;
}
.icongrid {
display:flex;
flex-wrap:wrap;
justify-content:center;
}
/* Movelist Toggles */
.movelist-toggles {
display: flex;
}
.movelist-toggle-button {
user-select: none;
flex-flow: row wrap;
padding: 2px 10px;
margin: 0 3px;
border-radius: 3px;
border: 1px solid black;
}
.movelist-toggle-off {
background-color: #aaa;
}
.movelist-toggle-on {
background-color: #eee;
}
/* -----------------------------------------------------------------------------
Tier List Rules
----------------------------------------------------------------------------- */
@media (min-width: 900px) {
.tierList {
display: grid;
grid-template-columns: minmax(58px, auto) 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
border-radius: 4px;
font-size: 12px;
background-color: #f4f4f2;
max-width: fit-content;
}
}
@media (max-width: 899px) {
.tierList {
display: grid;
grid-template-columns: minmax(58px, auto) 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
border-radius: 4px;
font-size: 12px;
background-color: #f4f4f2;
width: 100%;
}
}
.tierHeader {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1em 0;
font-size: 14px;
font-weight: 600;
border-right: 2px solid #1a1a17;
}
.tierGroup {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.tierUnderline {
border-bottom: 2px solid #1a1a17;
}
.generalUnderline {
border-bottom: 1px solid rgba(160, 160, 160, .4);
}
.tierGroup>div {
margin: 4px 10px;
}
.CharaInfoLabel {
text-align: right;
width: 50%;
vertical-align: text-top;
}
.cc-navbox-icon {
border: 2px solid black !important;
}
.cc-navbox-column {
position:absolute;
bottom:0px;
right:0px;
width:20px;
background:#ccc;
height: 69px;
border:2px solid black;
border-color:black!important;
padding-top: 3px;
border-radius: 0px 15px 15px 0px;
}
/* ******************************* */
/* Start Duelists of Eden Playfield */
div.doe-playfield {
background-image: url("https://wiki.gbl.gg/images/0/08/DoE_playfield.png") !important;
background-repeat: no-repeat;
position: relative;
width: 338px;
height: 168px;
overflow: hidden;
margin: 5px;
}
div.doe-playfield-gray {
background-image: url("https://wiki.gbl.gg/images/a/a8/DoE_playfield_gray.png") !important;
background-repeat: no-repeat;
position: relative;
width: 338px;
height: 168px;
overflow: hidden;
margin: 5px;
}
div.entity {
position: absolute;
transform: translate(-50%, -100%);
}
div.entity-flat-align{
position: absolute;
transform: translate(-50%, -100%) translateY(5px);
}
div.tilehighlight {
position: absolute;
transform: translate(-50%, -14px);
width: 34px;
height: 19px;
padding: 0px;
margin: 0px;
}
div.row1 {
top: 150px;
}
div.row2 {
top: 125px;
}
div.row3 {
top: 100px;
}
div.row4 {
top: 75px;
}
div.col1 {
left: 29px;
}
div.col2 {
left: 69px;
}
div.col3 {
left: 109px;
}
div.col4 {
left: 149px;
}
div.col5 {
left: 189px;
}
div.col6 {
left: 229px;
}
div.col7 {
left: 269px;
}
div.col8 {
left: 309px;
}
.absolute-zero {
position: absolute;
top: 0px;
left: 0px;
}
.colorize-red {
filter: brightness(50%) sepia(100%) saturate(10000%);
}
.colorize-green {
filter: brightness(50%) sepia(100%) hue-rotate(30deg) saturate(10000%);
}
.colorize-blue {
filter: brightness(40%) sepia(100%) hue-rotate(180deg) saturate(10000%);
}
.transformer {
display: inline-block;
}
.scale-down-third {
transform: scale(0.33, 0.33);
transform-origin: center bottom;
}
.flip-x {
transform: scaleX(-1.0);
}
.rotate-90-cw {
transform: rotate(90deg);
transform-origin: center center;
}
.rotate-90-ccw {
transform: rotate(-90deg);
transform-origin: center center;
}
/* End Duelists of Eden Playfield */
/* ***************************** */