MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
mNo edit summary
mNo edit summary
(326 intermediate revisions by 4 users not shown)
Line 1: Line 1:
/* CSS placed in this file will be applied to all skins */
/* CSS placed in this file will be applied to all skins */
#bodyContent h5 { font-size: 12px; }
/* Hide title and edit tools on main page */
 
.page-Main_Page .mw-side,
/* TEMPORARY WORKAROUND UNTIL I GET TIME TO MAKE AN IMAGEMAP FOR DNFD */
.page-Main_Page .firstHeading,
span#right img { margin-right: -30px; }
.page-Main_Page #siteSub {
span#left img { margin-left: -30px;}
display: none!important;
/* TEMPORARY WORKAROUND UNTIL I GET TIME TO MAKE AN IMAGEMAP FOR DNFD */
 
/* workaround for a glitch in tabber where the hidden tabs are sometimes visible on the egde of the active tab
  remove these two lines when the tabberneue dev fixes the issue on their end
*/
.tabber__panel { display: none; }
.tabber__panel--active { display: block !important; }
 
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 999;
}
 
.tabber__header, .tabber__section, .tabber__tabs {
  scroll-behavior: auto;
}
 
.ForceInheritColor {color: inherit !important;}
 
/* Theory Box CSS Grid */
.TheoryBoxTitle { grid-area: TheoryBoxTitle; }
.TheoryBoxDifficulty { grid-area: TheoryBoxDifficulty; }
.TheoryBoxContent { grid-area: TheoryBoxContent; }
.TheoryBoxVidArea { grid-area: TheoryBoxVidArea; }
 
@media screen and (min-width: 900px) {
  .TheoryBoxContainer {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
 
    grid-template-areas:
      "TheoryBoxTitle TheoryBoxDifficulty"
      "TheoryBoxContent TheoryBoxVidArea";
 
    padding: 10px 10px 5px 15px;
    max-width: 1500px;
  }
  .TheoryBoxContent {
    paddding-right: 3em !important;
  }
}
@media screen and (max-width: 899px) {
.TheoryBoxContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
 
  grid-template-areas:
    "TheoryBoxTitle TheoryBoxDifficulty"
    "TheoryBoxVidArea TheoryBoxVidArea"
    "TheoryBoxContent TheoryBoxContent";
 
  padding: 10px;
  max-width: 1500px;
}
}
 
.TheoryBoxVideo {
  overflow: hidden;
  border-radius: 10px;
  line-height: 0px;
  text-align: center;
}
 
 
.MockCodeBlock {
  border: 1px solid #eaecf0;
  border-radius: 2px;
  margin: 10px 6px;
  padding: 1px 4px;
  background-color: #f8f9fa;
  font-family: monospace,monospace;
  width: fit-content;
}
 
.responsive-imagemap img { width: 100%; height: auto; }
.responsive-img img { width: 100%; height: auto; }
.responsiveImg2 img { width: auto; height: 100%; }
 
/* MoveData frameChart Toggle */
.frameChart-toggle-off,
.frameChart-toggle-on {
  border: 1px solid #000;
  width: 134px;
  height: 24px;
  cursor: pointer;
}
 
.charaLabel {
  display: inline;
}
}


.charaLabel > img {
/* per-game banner images */
    color: transparent!important;
    font-size: 0!important;
    line-height: 0!important;
    vertical-align: middle!important;
    white-space: nowrap!important;
    --width: 0;
    --height: 16px;
    --small-scale: 0.75;
    --gap: 0;
    --base-gap: 2px;
}
 
.frameChart-toggle-on {
  opacity: 1.0;
}
 
.frameChart-toggle-off {
  opacity: 0.5;
  display: none;
}
 
.frameChart {
  width: 100%;
  border-bottom: 1px solid grey;
  display: none;
}
 
/* End MoveData frameChart Toggle */
 
 
.frame-data-startup,
.frame-data-active,
.frame-data-inactive,
.frame-data-recovery,
.frame-data-specialRecovery {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-left: 1px;
  margin-right: 1px;
  vertical-align: middle;
}
 
.frame-data-startup {
  background-color: #36B37E;
}
 
.frame-data-active {
  background-color: #FF5D5D;
}
 
.frame-data-inactive {
  background-color: gray;
}
 
.frame-data-recovery {
  background-color: #0069B6;
}
.frame-data-specialRecovery {
        background-color: #db69cf;
}
 
.spawn-projectile {
  width: 3px;
  height: 14px;
  display: inline-block;
  margin-left: -1px;
  margin-right: 1px;
  vertical-align: middle;
  background-color: red;
}
 
/* -----------------------------------------------------------------------------
                            Effect Classes
----------------------------------------------------------------------------- */
 
.round-corners {
  border-radius: 6px;
}
.responsiveImg img {
  max-width: 100%;
  height: auto;
  max-height: 450px;
}
/* -----------------------------------------------------------------------------
                            Cargo Rules
----------------------------------------------------------------------------- */
 
table.cargoDynamicTable td {
  text-align: center;
}
/* reduce the padding on DynamicTables generated with DataTables */
 
table.cargoDynamicTable thead th, table.cargoDynamicTable thead td {
  padding: 4px 17px 4px 4px
}
table.cargoDynamicTable tfoot th, table.cargoDynamicTable tfoot td {
  padding: 4px
}
table.cargoDynamicTable tbody th, table.cargoDynamicTable tbody td {
  padding: 4px
}
/* disable the tfoot which dupes thead */
 
table.cargoDynamicTable tfoot {
  display: none;
}
 
/* move images to start of line. else they will be at end of line when there are notes */
table.cargoDynamicTable div.tright {
  float: left;
}
 
/* Make the cargo standard table look more like the mediawiki table */
 
table.cargoTable {
  width: 100%;
}
.cargoTable table {
  width: 100%;
}
table.cargoTable tbody {
  text-align: center;
}
table.cargoTable tbody td {
  border: 1px solid #a2a9b1;
  text-align: center;
}
table.cargoTable thead th {
  background-color: #eaecf0;
  margin: 1em 0;
  padding: 0 2px;
  border: 1px solid #a2a9b1;
}
 
table.cargoTable.noMerge tr:nth-child(even) {
  background: #fafafa;
}
 
 
.MaterialTable { border-collapse: collapse; table-layout: fixed; }
.MaterialTable th td { font-weight: 500;}
.MaterialTable tr { border-bottom: 1px solid #a2a9b1; }
.MaterialTable tr:last-child { border-bottom: none; }
.MaterialTable tr td:nth-child(1), .MaterialTable tr td:nth-child(2), .MaterialTable tr td:nth-child(3) {
  text-align: center;
}
.MaterialTable tr td:nth-last-child(1), .MaterialTable tr td:nth-last-child(2) {
  padding-left: 0.5em;
}
.MaterialTable th { border-right: 1px solid rgb(224, 224, 224); }
.MaterialTable th:last-child { border-right: none; }
 
/* -----------------------------------------------------------------------------
                            Global Rules
----------------------------------------------------------------------------- */
/* Collapsible elements. Toggle-link moved to left.
/* Margin around it adjusted. */
.mw-collapsible span.mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}
/* normalize link colors */
 
a, a:visited, a.external, a.external:visited {
  color: rgb(6, 95, 212);
}
body {
body {
     background-image: url(images/background.png);
     background-image: url(images/background.webp);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
body.page-Guilty_Gear_XX_Accent_Core_Plus_R,body.rootpage-GGACR {
.page-Guilty_Gear_XX_Accent_Core_Plus_R,.rootpage-GGACR {
     background-image: url(images/ggacr-background.png);
     background-image: url(images/ggacr-background.webp);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
body.page-Granblue_Fantasy_Versus,body.rootpage-GBVS {
.page-Granblue_Fantasy_Versus,.rootpage-GBVS {
     background-image: url(images/gbvs-background.png);
     background-image: url(images/gbvs-background.webp);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
body.page-Dragon_Ball_FighterZ,body.rootpage-DBFZ {
.page-Granblue_Fantasy_Versus_Rising,.rootpage-GBVSR {
     background-image: url(images/dbfz-background.png);
     background-image: url(images/gbvsr-background.png);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
body.page-Persona_4_Arena_Ultimax_2_5,body.rootpage-P4U2_5 {
.page-Dragon_Ball_FighterZ,.rootpage-DBFZ {
     background-image: url(images/p4u2-background.png);
     background-image: url(images/dbfz-background.webp);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
body.page-BlazBlue_Central_Fiction,body.rootpage-BBCF {
.page-Persona_4_Arena_Ultimax_Remaster,.rootpage-P4U2R {
     background-image: url(images/bbcf-background.png);
     background-image: url(images/p4u2r-background.webp);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
body.page-Guilty_Gear_The_Missing_Link,body.rootpage-GGML {
.page-BlazBlue_Central_Fiction,.rootpage-BBCF {
     background-image: url(images/ggml-background.png);
     background-image: url(images/bbcf-background.webp);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
body.page-BlazBlue_Cross_Tag_Battle,body.rootpage-BBTag {
.page-Guilty_Gear_The_Missing_Link,.rootpage-GGML {
     background-image: url(images/bbtag-background.png);
     background-image: url(images/ggml-background.webp);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
body.page-Hokuto_no_Ken,body.rootpage-HNK {
.page-BlazBlue_Cross_Tag_Battle,.rootpage-BBTag {
     background-image: url(images/hnk-background.png);
     background-image: url(images/bbtag-background.webp);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
body.page-DNF_Duel,body.rootpage-DNFD {
.page-Hokuto_no_Ken,.rootpage-HNK {
     background-image: url(images/dnfd-background.png);
     background-image: url(images/hnk-background.webp);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
#mw-page-base {
.page-DNF_Duel,.rootpage-DNFD {
     background-image: none;
     background-image: url(images/dnfd-background.webp);
     background-color: rgba(0,0,0,0);
     background-repeat: no-repeat;
}
}
 
.page-Sailor_Moon_S,.rootpage-SMS {
div#mw-head div.vectorMenu h3 {
    background-image: url(images/sms-background.png);
  background-image: none;
    background-repeat: no-repeat;
}
}
 
.page-Sengoku_Basara_X,.rootpage-SBX {
#p-personal {
    background-image: url(images/sbx-background.webp);
top: 0;
    background-repeat: no-repeat;
right: 0;
background-color: #fff;
padding-top: 0.25em;
padding-right: 0.75em;
border-radius: 0px 0px 0px 5px;
}
}
 
.page-Guilty_Gear_Xrd_REV_2,.rootpage-GGXRD-R2 {
#p-personal ul {
    background-image: url(images/ggxrd-background.webp);
padding-left: 0;
    background-repeat: no-repeat;
}
}
 
.page-Battle_Fantasia,.rootpage-BatFan {
div#simpleSearch {
     background-image: url(images/batfan-background.png);
     margin-top: 0.35em;
    background-repeat: no-repeat;
}
}
 
.page-King_s_Field_4,.rootpage-KF4 {
#ca-unwatch.icon a,
    background-image: url(images/kf4-background.webp);
#ca-watch.icon a {
     background-repeat: no-repeat;
     padding-top: 2.7em;
}
}
 
.page-Limbus_Company,.rootpage-LCB {
#p-personal {
    background-image: url(images/lcb-background.png);
     text-shadow: 0 0 2px #FEFEFE, 0 0 4px #FFF;
     background-repeat: no-repeat;
}
}


#pt-anonuserpage {
.responsive-imagemap img { width: 100%; height: auto; }
    margin-bottom: 0.8em;
.responsive-img img { width: 100%; height: auto; }
}
.big-pixly-image .image {width: 100%; height: auto; }
.big-pixly-image img { width: 100%; height: auto; image-rendering: pixelated; }


/* Background Ends Here */
/* -----------------------------------------------------------------------------
                            Cargo Rules
----------------------------------------------------------------------------- */
/* disable the tfoot which dupes thead */


.vector-menu-tabs li {
table.dataTable tfoot {
   background: #f6f6f6;
   display: none;
}
.mw-body-content a.external:visited, a.external, a, a:visited {
  color: rgb(6, 95, 212);
}
.mw-body {
  background-color: #f9f9f9;
  box-shadow: rgba(0,0,0,0.15) 0 0.1em 0.75em;
}
.vector-menu-tabs li {
  background-image: none;
}
a:hover, a:focus {
  text-decoration: none;
}
}


/* Odd rows for any table with "stripe" class */
/* move images to start of line. else they will be at end of line when there are notes */
 
table.dataTable div.tright {
table.stripe tr:nth-child(even) {
   float: left;
   background-color: #FFF;
}
}
/* Even rows for any table with "stripe" class */


table.stripe tr:nth-child(odd) {
.stripe tbody tr:nth-child(odd) {
  background-color: #fafafa;
background-color: var(--color-surface-1);
}
}
/* Odd set of 2 rows (for colors table) */


table.colors-table.stripe tr:nth-child(4n), table.colors-table.stripe tr:nth-child(4n-1) {
.stripe tbody tr:nth-child(odd):hover {
  background-color: #FFF;
background-color: var(--color-surface-3);
}
}
/* Even set of 2 rows (for colors table) */


table.colors-table.stripe tr:nth-child(4n-2), table.colors-table.stripe tr:nth-child(4n-3) {
  background-color: #fafafa;
}
.dataTables_wrapper {
  background-color: #FFF;
  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);
  padding: 4px;
  border-radius: 4px;
}
/* -----------------------------------------------------------------------------
/* -----------------------------------------------------------------------------
                             Editorial Rules
                             Tier List Rules
----------------------------------------------------------------------------- */
----------------------------------------------------------------------------- */


.imgContainer {
@media (min-width: 900px) {
  display: inline-block;
  .tierList {
  overflow: hidden;
    display: grid;
  object-fit: cover;
    grid-template-columns: minmax(58px, auto) 1fr;
  object-position: center;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    /* box-shadow: var(--card-shadow-dlw); */
    border-radius: var(--border-radius--small);
    font-size: 0.875em;
    background-color:var(--color-surface-2);
    border-color: var(--border-color-base);
    overflow: hidden;
  }
}
}
.editorial-body {
@media (max-width: 899px) {
  font-size: 14px;
   .tierList {
  line-height: 27px;
    display: grid;
  padding: 4px;
    grid-template-columns: minmax(58px, auto) 1fr;
  margin: 0 auto;
    grid-column-gap: 0px;
  max-width: 1000px;
    grid-row-gap: 0px;
  color: #454545;
    box-shadow: var(--card-shadow-dlw);
  font-weight: normal;
    border-radius: var(--border-radius--small);
}
    font-size: 0.875em;
.editorial-author {
    background-color:var(--color-surface-1);
   font-size: 20px;
    border-color: var(--border-color-base);
  color: #6B778C;
    overflow: hidden;
  font-weight: 500;
   }
  line-height: 20px;
  text-align: center;
}
.editorial-title {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 32px;
  text-align: center;
}
.editorial-subtitle {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 24px;
  margin-top: 36px;
}
.editorial-sectiontitle {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 24px;
  margin-top: 36px;
}
/* -----------------------------------------------------------------------------
                            Footer Nav Rules
----------------------------------------------------------------------------- */
 
.footNav {
  box-sizing: border-box;
  display: grid;
  grid-auto-rows: auto;
  gap: 0px 0px;
  border-radius: 4px;
  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);
  grid-template-areas: "." "." "." "." ".";
}
.footNavHeader {
  background-color: #F64236;
  text-align: center;
  color: white;
  margin: 8px;
  padding: 2px;
}
.footNavFlex {
  display: flex;
  flex: 1 1 0px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0.25em 1% 0px 1%;
  padding-bottom: 1em;
}
.footNavFlex div {
  margin: 4px 10px 4px 10px;
}
/* -----------------------------------------------------------------------------
                            Tier List Rules
----------------------------------------------------------------------------- */
 
.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;
}
}
.tierHeader {
.tierHeader {
Line 495: Line 141:
   justify-content: center;
   justify-content: center;
   text-align: center;
   text-align: center;
   // padding: 1em 2em;
   padding: 1em 2px;
  padding-top: 1em;
   font-size: 1em;
  padding-bottom: 1em;
   font-size: 14px;
   font-weight: 600;
   font-weight: 600;
   border-right: 2px solid #1a1a17;
   color: black;
}
}
.tierGroup {
.tierGroup {
Line 509: Line 153:
}
}
.tierUnderline {
.tierUnderline {
   border-bottom: 2px solid #1a1a17;
   border-bottom: 1px solid var(--border-color-base--darker);
}
}
.generalUnderline {
.generalUnderline {
   border-bottom: 1px solid rgba(160, 160, 160, .4);
   border-bottom: 1px solid var(--border-color-base);
}
}
.tierGroup>div {
.tierGroup>div {
Line 520: Line 164:
   text-align: right;
   text-align: right;
   width: 50%;
   width: 50%;
  vertical-align: text-top;
}
}
/* -----------------------------------------------------------------------------
                            Table of Contents Rules
----------------------------------------------------------------------------- */
/* 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;
}
.overview_toc .toctitle {
  width: 103%;
  margin-left: -1.5%;
  border-bottom: 1px solid rgba(160, 160, 160, .4);
  font-weight: 600;
  font-size: 20px;
}
.overview_toc .toctogglespan {
  font-weight: 300 !important;
  font-size: 14px !important;
}
.overview_toc .toc ul {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  line-height: 1.6;
  padding: 10px 0px 0px 35px;
}
.overview_toc .toc {
  display: block;
  border: unset;
  background-color: unset;
  padding: -4px;
}
/* -----------------------------------------------------------------------------
                                  Tabber Rules
----------------------------------------------------------------------------- */
.tabber .tabbertab {
  border: none;
  padding: 0;
}
ul.tabbernav {
  margin: 0;
  padding: 3px 0;
  border: 0;
  font: bold 14px 'Roboto', sans-serif !important;
}
ul.tabbernav li a {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  padding: 3px .5em;
  margin-left: 3px;
  border: 1px solid #CCC;
  /* background: #F2F7FF; */
  text-decoration: none;
  line-height: 1;
}
ul.tabbernav li.tabberactive a {
  background-color: #FFF;
  border: 1px solid #7ec0ee !important;
}
ul.tabbernav li.tabberactive a:hover {
  color: #000;
  background: #FFF;
  border: 1px solid #7ec0ee !important;
}
/* Prevents tabber contents from showing up for a few frames before the script executes */
.tabber:not(.tabberlive)>.tabbertab:not(:first-child) {
  display: none;
}
/* -----------------------------------------------------------------------------
                          Tooltip CSS from gbf.wiki
----------------------------------------------------------------------------- */
.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dashed black;
}
.tooltiptext {
  visibility: hidden;
  min-width: 250px;
  padding: 12px 14px;
  position: absolute;
  left: 50%;
  bottom: calc(20px + 100%);
  z-index: 99999;
  background: #fff;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
  border: 1px solid #a2a9b1;
  border-radius: 2px;
  white-space: normal;
  font-weight: normal;
  font-style: initial;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}
.tooltiptext:after, .tooltiptext:before {
  content: '';
  position: absolute;
  left: 50%;
  border-style: solid;
}
.tooltiptext:after {
  top: 100%;
  bottom: auto;
  width: 20px;
  height: 20px;
  background: #fff;
  margin-top: -10px;
  margin-left: -10px;
  box-shadow: 1px 1px 0px #a2a9b1;
  transform: rotate(45deg);
  border-width: 0;
}
.tooltiptext:before {
  top: 100%;
  bottom: auto;
  border-width: 18px;
  margin-left: -18px;
  border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent;
  pointer-events: none;
}
.tooltip .tooltip .tooltiptext, .header-fixed-helper .tooltip .tooltiptext {
  bottom: auto;
  top: calc(20px + 100%);
}
.tooltip .tooltip .tooltiptext:after, .header-fixed-helper .tooltip .tooltiptext:after {
  top: auto;
  bottom: 100%;
  border-width: 15px;
  margin-left: -15px;
  border-color: transparent transparent white transparent;
  width: 0;
  height: 0;
  box-shadow: none;
  background: none;
  transform: none;
}
.tooltip .tooltip .tooltiptext:before, .header-fixed-helper .tooltip .tooltiptext:before {
  top: auto;
  bottom: 100%;
  border-width: 16px;
  margin-left: -16px;
  border-color: transparent transparent #888 transparent;
}
.tooltiptext span.hr {
  display: block;
  height: 1px;
  background-color: #a2a9b1;
}
.tooltiptext hr, .tooltiptext span.hr {
  margin: 10px 0 12px;
  position: relative;
  background: none;
}
.tooltiptext hr:after, .tooltiptext span.hr:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px !important;
  position: absolute;
  left: -14px;
  background: #a2a9b1;
  padding: 0 14px;
}
.tooltip:hover>.tooltiptext, .tooltip.hover>.tooltiptext {
  visibility: visible;
}
.tooltiptext {
  opacity: 0;
  transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
  transform: translate(-50%, 8px);
}
.tooltip .tooltip .tooltiptext, .header-fixed-helper .tooltip .tooltiptext {
  transform: translate(-50%, -8px);
}
.tooltip:hover>.tooltiptext, .tooltip.hover>.tooltiptext {
  opacity: 1;
  transition-delay: 0s;
  transform: translate(-50%, 0);
}
.tooltiptext a {
  color: #0645ad;
  border-bottom: 0;
}
.tooltiptext a:visited {
  color: #0b0080;
}
.tooltiptext a:active {
  color: #faa700;
}
.tooltiptext a:hover, a:focus {
  text-decoration: underline;
}
.tooltiptext {
  color: #252525;
}
.tooltiptext a.new {
  color: #ba0000;
}
/* Remove .mw-body-content stacking context so the tooltip can
  overlap with elements outside content area and be shown properly */
.mw-body-content {
  z-index: auto;
}
.flow-post .flow-post-content {
  overflow: visible;
}
/* -----------------------------------------------------------------------------
                              Flex Rules
----------------------------------------------------------------------------- */
.fp-button {
  border-radius: 4px;
  background: none;
  border: 2px solid #2e2d2d;
  cursor: pointer;
  padding: 0.5em 0.75em;
  font-weight: 700;
  font-size: 14px;
  color: white;
  display: inline-block;
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.fp-button:hover {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.24);
}
.fpcontent {
  width: 100%;
  display: inline-block;
  overflow: visible !important;
  z-index: 1;
}
.fpbox {
  background-color: white;
  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);
  margin: 0px 10px 20px 10px;
  padding: 2px;
  border-radius: 4px;
}
.fpbox .heading {
  border-bottom: 1px solid rgba(160, 160, 160, .4);
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  font-weight: 600;
  text-align: center;
  font-size: 22px;
}
.fpbox .heading .smalllink {
  font-weight: 500;
}
.fpbox hr {
  border: none;
  border-bottom: 1px solid rgba(160, 160, 160, .4);
}
.fplinks {
  margin: -5px;
}
.fpvideos {
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}
.fpvideo {
  display: inline-block;
  margin: 0 5px;
}
.fplinks .linkslabel {
  background: rgba(0, 0, 0, 0);
  border-bottom: 2px solid #454545;
  margin: 15px 5px 5px 5px;
  padding: 0 0 5px 0;
}
.fplink {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
}
.fplink a {
  color: black;
}
.fplink a.external {
  color: black;
}
.fplink a.external:visited {
  color: black;
}
.fplink a:visited {
  color: black;
}
/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */


.fplink .box {
  border-collapse: separate;
  border-spacing: 5px;
  display: table;
  width: 100%;
}
.fplink .box .row {
  display: table-row;
}
.fplink .box .row .cell {
  background-color: white;
  border: 1px solid #1976d2;
  color: black;
  border-radius: 4px;
  display: table-cell;
  padding: 0 6px;
  position: relative;
  text-align: center;
  vertical-align: middle;
}
.fplink.wide .box .row .cell {
  padding: 0 5px;
}
#fptopsection .fplink.image, #fpflexsection .fplink.image, #fpbottomsection .fplink.image {
  height: 114px;
  width: 114px;
}
.fplink.image .box .row .cell {
  height: 100px;
  width: 100px;
  vertical-align: bottom;
}
.fplink.image .box .row .cell .image img {
  height: 100px;
  width: 100px;
}
@media (min-width: 470px) {
  .fplink {
    width: 50%;
  }
  .fplink.wide {
    width: 100%;
  }
}
@media (min-width: 580px) {
  .fplink {
    width: 33.333%;
  }
  .fplink.wide {
    width: 66.666%;
  }
}
@media (min-width: 690px) {
  .fplink {
    width: 25%;
  }
  .fplink.wide {
    width: 50%;
  }
}
@media (min-width: 800px) {
  .fplink {
    width: 20%;
  }
  .fplink.wide {
    width: 40%;
  }
}
@media (min-width: 910px) {
  .fplink {
    width: 16.666%;
  }
  .fplink.wide {
    width: 33.333%;
  }
}
@media (min-width: 990px) {
  .fpcontent {
    padding-right: 520px;
    width: calc(100% - 530px);
  }
  #fptopsection {
    float: left;
    width: 100%;
  }
  #fpflexsection {
    float: right;
    width: 520px;
    margin-right: -520px;
  }
  #fpbottomsection {
    float: left;
    width: 100%;
    margin-top: -5px;
  }
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 50%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 100%;
  }
  #fpflexsection .fplink {
    width: 25%;
  }
  #fpflexsection .fplink.wide {
    width: 50%;
  }
}
@media (min-width: 1100px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 33.333%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 66.666%;
  }
}
@media (min-width: 1210px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 25%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 50%;
  }
}
@media (min-width: 1320px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 20%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 40%;
  }
}
@media (min-width: 1430px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 16.666%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 33.333%;
  }
  .fplink a {
    padding: 3px 5px;
    color: black;
  }
  .fplink a:visited {
    color: black;
  }
  .fplink a.external {
    color: black;
  }
  .fplink a.external:visited {
    color: black;
  }
}
@media (min-width: 1540px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 14.285%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 28.571%;
  }
  #fptopsection .fpmaybercol .fpbox, #fpbottomsection .fpmaybercol .fpbox {
    background-image: none;
  }
  .fpmaybelcol {
    float: left;
    width: 70.886%;
  }
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 20%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 40%;
  }
  .fpmaybercol {
    float: right;
    width: 29.113%;
  }
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 50%;
  }
  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 100%;
  }
}
@media (min-width: 1650px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 12.5%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 25%;
  }
}
@media (min-width: 1697px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 16.666%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 33.333%;
  }
}
@media (min-width: 1760px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 11.111%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 22.222%;
  }
}
@media (min-width: 1850px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 14.285%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 28.571%;
  }
}
@media (min-width: 1870px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 10%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 20%;
  }
  #fptopsection .fplink.image, #fpbottomsection .fplink.image {
    width: 134px;
    height: 134px;
  }
  #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
    width: 120px;
    height: 120px;
  }
  #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
    width: 120px;
    height: 120px;
  }
}
@media (min-width: 1918px) {
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 33.333%;
  }
  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 66.666%;
  }
}
@media (min-width: 1980px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 9.09%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 18.181%;
  }
}
@media (min-width: 2006px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 12.5%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 25%;
  }
}
@media (min-width: 2090px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 8.33%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 16.666%;
  }
}
@media (min-width: 2161px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 11.111%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 22.222%;
  }
}
@media (min-width: 2200px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 7.692%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 15.384%;
  }
}
@media (min-width: 2296px) {
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 25%;
  }
  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 50%;
  }
}
@media (min-width: 2310px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 7.142%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 14.285%;
  }
}
@media (min-width: 2316px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 10%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 20%;
  }
}
@media (min-width: 2420px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 6.666%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 13.333%;
  }
  .fplink a {
    padding: 5px 5px;
  }
  #fptopsection .fplink.image, #fpbottomsection .fplink.image {
    width: 164px;
    height: 164px;
  }
  #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
    width: 150px;
    height: 150px;
  }
  #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
    width: 150px;
    height: 150px;
  }
}
.fplink.image .image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.fplink.image a {
  z-index: 2;
}
.fplink a {
  display: block;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1px 5px;
}
.fplink.image .image a {
  padding: 0;
}
.fplink.image .link a {
  background: #f5f5f5;
  border-top: 2px solid #454545;
}
.fplink.wide a {
  margin: 0 -5px;
}
/* -----------------------------------------------------------------------------
/* -----------------------------------------------------------------------------
                             ColumnList Specific Rules
                             ColumnList Specific Rules
Line 1,195: Line 176:
   columns: 16em 2;
   columns: 16em 2;
}
}
/* -----------------------------------------------------------------------------
                            MoveData Specific Rules
----------------------------------------------------------------------------- */


div.movedata {
  border-radius: 4px;
  border: none;
  background-color: white;
  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-collapse: collapse;
  margin: 0em;
}
div.movedata>table.movedata {
  width: 100%;
  text-align: center;
  margin: 0.2em 0;
}
div.movedata>p {
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
}
div.movedata>dl {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
div.movedata>.thumb>.thumbinner>.image>.thumbimage {
  background-color: #f8f9fa;
}
/* -------------------------
Flex Attack Data styling
------------------------- */
/* Hide the sortable on attack-data tables */
.attack-info > table.cargoTable thead th {
  padding-right: 0px;
  background-image: none;
  cursor: initial;
}


.attack-info > table td { vertical-align: middle; }
.attack-data table { line-height: 1.1em; }
@media (min-width: 990px) {
  .attack-container {
    width: auto;
  }
  .attack-gallery {
    float: left;
    width: 220px;
  }
  .attack-info {
    margin-left: 220px;
    margin-top: 0;
  }
}
.input-badge {
  border: 1px solid #2e2d2d;
  border-radius: 4px;
  padding: 1px .35em;
  background-color: white;
}
.attack-container {
  width: 100%;
  display: inline-block;
  overflow: visible !important;
  z-index: 1;
  border-radius: 4px;
  border: none;
  background-color: white;
  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-collapse: collapse;
}
.attack-gallery ul.gallery {
  margin: 0;
}
.attack-gallery * .gallerytext p {
  margin: 0;
  text-align: center;
}
.attack-data { width: 100%; text-align: center; margin: 0; }
.attack-data table {
  border: none;
  background-color: white;
  border-collapse: collapse;
  overflow: auto;
}
.attack-info p, attack-info dl {
  padding: 0 1em 0 0.5em;
}
.attack-info h4 { padding: 0; margin: 0; }
/* -----------------------------------------------------------------------------
                        Character Link Button styling
----------------------------------------------------------------------------- */
.char-btn {
  background-color: #e85a5a;
  color: white;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  padding: 4px 8px 4px;
  margin: 5px;
  min-width: 90px;
}
/* Remove external link icon from external links and adjust their padding
Replace this styling with a more localized solution in the future */


a .external .text {
  background-image: none;
  padding-right: 0px;
}
.addShadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
/* -----------------------------------------------------------------------------
/* -----------------------------------------------------------------------------
                         Cargo Based Move Boxes Styling
                         Cargo Based Move Boxes Styling
Line 1,321: Line 191:
}
}
.move-box {
.move-box {
   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);
   box-shadow: var(--CardShadow);
   border-radius: 4px;
   border-radius: var(--StandardBorderCurve);
  background-color: white;
}
}
.name {
.name {
Line 1,377: Line 246:
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
   box-shadow: rgb(72, 78, 81) 0px -1px 0px 0px inset;
   box-shadow: var(--card-shadow-dlw);
   background: #f9f9f9;
  background-color: var(--color-surface-1);
   border-radius: var(--border-radius--small);
}
}


Line 1,384: Line 254:
     display: inline-flex;
     display: inline-flex;
     align-items: center;
     align-items: center;
     padding: 5px 12px;
     padding: 18px;
    color: #54595d;
     font-weight: bold;
     font-weight: bold;
     scroll-snap-align: start;
     scroll-snap-align: start;
Line 1,391: Line 260:
     white-space: nowrap;
     white-space: nowrap;
     cursor: pointer;
     cursor: pointer;
    color: var(--color-base--subtle);
}
}
.movelist-toggle-button:hover {
.movelist-toggle-button:hover {
    box-shadow: inset 0 -2px 0 0 #447ff5;
background-color: var(--color-surface-3);
    color: #447ff5;
color: var(--color-base--emphasized);
}
}


.movelist-toggle-on {
.movelist-toggle-on {
  box-shadow: rgb(41, 82, 163) 0px -2px 0px 0px inset;
background-color: var(--color-surface-2);
  color: rgb(92, 152, 214);
}
 
/******************************* Gallery Module *******************************/
@media all and (max-width: 720px) {
.mod-gallery {
width: 100% !important;
}
}
 
.mod-gallery {
display: table;
}
}
.movelist-toggle-on:hover {
 
  box-shadow: rgb(9, 59, 161) 0px -2px 0px 0px inset;
.mod-gallery-default {
  color: rgb(76, 159, 245);
background: transparent;
margin-top: 0.3em;
}
}


.note {
.mod-gallery-center {
  background-position: left 7px top 50%;
margin-left: auto;
  padding: 0.5em 0.5em 0.5em 40px;
margin-right: auto;
  margin: 0.5em 0;
}
  overflow: hidden;
 
  background-color: #f8f9fa;
.mod-gallery-left {
  background-repeat: no-repeat;
float: left;
  border: 1px solid #ddd;
}
}
.note-inline {
 
  display: inline-block;
.mod-gallery-right {
  vertical-align: middle;
float: right;
}
}
.note-info {
 
  background-color: #f6efe5;
.mod-gallery-none {
  /* [[File:OOjs_UI_icon_reference_20_ac6600.svg]] */
float: none;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d5/OOjs_UI_icon_reference_20_ac6600.svg);
  background-size: 25px;
  border-color: #ac6600;
  padding-left: 40px;
  min-height: 28px;
}
}
.note-reminder {
 
  background-color: #fff9ea;
.mod-gallery-collapsible {
  /* [[File:OOjs_UI_icon_lightbulb-yellow.svg]] */
width: 100%;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg);
  background-size: 25px;
  border-color: #fc3;
  min-height: 28px;
}
}
.note-warn {
 
  background-color: #fff9ea;
.mod-gallery .title,
  /* [[File:OOjs_UI_icon_alert-warning.svg]] */
.mod-gallery .main,
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg);
.mod-gallery .footer {
  background-size: 25px;
display: table-row;
  border-color: #fc3;
  min-height: 28px;
}
}


.note-error {
.mod-gallery .title > div {
  background-color: #fee7e6;
display: table-cell;
  /* [[File:OOjs_UI_icon_notice-destructive.svg]] */
padding: 0.2em 0 0.6em 1.6em;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg);
text-align: center;
  background-size: 25px;
font-weight: bold;
  border-color: #c33;
  min-height: 28px;
}
}


/* Clr Template to use HTML colors */
.mod-gallery .main > div {
.colorful-text[style] { color: var(--data-color); }
display: table-cell;
}


/* Guilty Gear P button */
.mod-gallery .gallery {
.colorful-text[style="--data-color:1"] { color: #d96aca; }
line-height: 1.35em;
}


/* Guilty Gear K button */
.mod-gallery .footer > div {
.colorful-text[style="--data-color:2"] { color: #1f8ccc; }
display: table-cell;
padding: 0.2em 0 0.6em 1.6em;
text-align: right;
font-size: 80%;
line-height: 1em;
}


/* Guilty Gear S button */
.mod-gallery .title > div *,
.colorful-text[style="--data-color:3"] { color: #009e4e; }
.mod-gallery .footer > div * {
overflow: visible;
}


/* Guilty Gear H button */
.mod-gallery .gallerybox img {
.colorful-text[style="--data-color:4"] { color: #de1616; }
background: none !important;
}


/* Guilty Gear D button */
.mod-gallery .bordered-images .thumb img {
.colorful-text[style="--data-color:5"] { color: #e8982c; }
border: solid #eaecf0 1px;
}


/* very easy difficulty combo*/
.mod-gallery .whitebg .thumb {
.colorful-text[style="--data-color:6"] { color: #3197d3; }
background: #fff !important;
}


/* medium difficulty combo*/
/********************************** Tooltips **********************************/
.colorful-text[style="--data-color:7"] { color: #e49f48; }
.tooltip {
  border-bottom: 1px dashed var(--color-base);
  white-space: nowrap;
}
.tooltiptext {
display: none;
}


/* very hard difficulty combo*/
/******* CLR template styling added back until templatestyles bug is fixed *******/
.colorful-text[style="--data-color:8"] { color: #b769c4; }
.colorful-text-1 { color: var(--color-pink); }
.colorful-text-2 { color: var(--color-blue); }
.colorful-text-3 { color: var(--color-green); }
.colorful-text-4 { color: var(--color-red); }
.colorful-text-5 { color: var(--color-orange); }
.colorful-text-6 { color: var(--color-magenta); }


/* balance badge template */
.balance-badge {
color: var(--balance-badge-font-color);
border-radius: var(--border-radius--small);
font-weight: var(--font-weight-bold);
font-size: 0.75em;
letter-spacing: -0.008em;
padding: 2px 4px;
}


.colorful-text[style="--data-color:added"] {
.balance-badge.added {
   background-color: LemonChiffon;
   background-color: LemonChiffon;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
}
.colorful-text[style="--data-color:new"] {
 
.balance-badge.new {
   background-color: PeachPuff;
   background-color: PeachPuff;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
}
.colorful-text[style="--data-color:removed"] {
 
.balance-badge.removed {
   background-color: Lavender;
   background-color: Lavender;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
}
.colorful-text[style="--data-color:reworked"] {
 
.balance-badge.reworked {
   background-color: LightBlue;
   background-color: LightBlue;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: -0.008em;
  font-size: 12px;
  padding: 2px;
}
}
.colorful-text[style="--data-color:buff"] {
 
.balance-badge.buff {
   background-color: DarkSeaGreen;
   background-color: DarkSeaGreen;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
}
.colorful-text[style="--data-color:nerf"] {
 
.balance-badge.nerf {
   background-color: LightPink;
   background-color: LightPink;
   border-radius: 4px;
}
   font-weight: 600;
 
   font-size: 12px;
/**** Character Label styling added back until templatestyles is fixed ****/
  padding: 2px;
.charaLabel {
  display: inline;
}
 
.charaLabel > img {
    color: transparent!important;
    font-size: 0!important;
    line-height: 0!important;
    vertical-align: middle!important;
    white-space: nowrap!important;
    --width: 0;
    --height: 16px;
    --small-scale: 0.75;
    --gap: 0;
    --base-gap: 2px;
}
 
/**** Input Badge styling added back until templatestyles is fixed ****/
.input-badge {
  border: 1px solid;
   border-radius: var(--border-radius--small);
  border-color: var(--border-color-base);
  padding: .25em .35em;
  font-weight: bold;
  background-color: var( --color-surface-2 );
}
 
/* -----------------------------------------------------------------------------
                        Table alignment helper classes
----------------------------------------------------------------------------- */
 
table.col-1-center td:nth-child(1) { text-align: center; }
table.col-2-center td:nth-child(2) { text-align: center; }
table.col-3-center td:nth-child(3) { text-align: center; }
table.col-4-center td:nth-child(4) { text-align: center; }
table.col-5-center td:nth-child(5) { text-align: center; }
table.col-6-center td:nth-child(6) { text-align: center; }
table.col-7-center td:nth-child(7) { text-align: center; }
table.col-8-center td:nth-child(8) { text-align: center; }
table.col-9-center td:nth-child(9) { text-align: center; }
 
table.col-1-right td:nth-child(1) { text-align: right; }
table.col-2-right td:nth-child(2) { text-align: right; }
table.col-3-right td:nth-child(3) { text-align: right; }
table.col-4-right td:nth-child(4) { text-align: right; }
table.col-5-right td:nth-child(5) { text-align: right; }
table.col-6-right td:nth-child(6) { text-align: right; }
table.col-7-right td:nth-child(7) { text-align: right; }
table.col-8-right td:nth-child(8) { text-align: right; }
table.col-9-right td:nth-child(9) { text-align: right; }
 
/* -----------------------------------------------------------------------------
                            Template:RainbowText styles
----------------------------------------------------------------------------- */
/* In Common.css for Cargo compatibility. */
 
.rainbow-shadow {
  letter-spacing: 0.15rem;
  color: var(--rainbow-text-base-color);
  text-shadow: -1px 1px #ef3550,
              -2px 2px #f48fb1,
              -3px 3px #7e57c2,
              -4px 4px #2196f3,
              -5px 5px #26c6da,
              -6px 6px #43a047,
              -7px 7px #eeff41;
}
 
.rainbow-shadow-huge {
   font-weight: 900;
   font-size: 6em;
  padding-left: 1.8rem;
  padding-bottom: 0.8rem;
  letter-spacing: 0.15rem;
  color: var(--rainbow-text-base-color);
  text-shadow: -4px 4px #ef3550,
              -8px 8px #f48fb1,
              -12px 12px #7e57c2,
              -16px 16px #2196f3,
              -20px 20px #26c6da,
              -24px 24px #43a047,
              -28px 28px #eeff41,
              -32px 32px #f9a825,
              -36px 36px #ff5722;
}
 
 
/*------------------------------ Tippy Tooltips ------------------------------*/
.tippy-box {
    background-color: var(--color-surface-2);
    color: var(--color-base);
    border-radius: var(--border-radius--small);
    font-size: 0.875rem;
    line-height: var(--line-height-sm);
    outline: 0;
    box-shadow: var(--card-shadow-dlw), rgba(255, 255, 255, 0.067) 0px 1px 0px inset;
}
.tippy-content {
text-align: center;
padding: var(--space-sm) var(--space-md);
}
.tippy-arrow {
color: var(--color-surface-2);
}
.tooltip-dashed-underline {
text-decoration: dashed underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: from-font;
}
}

Revision as of 23:14, 5 March 2024

/* CSS placed in this file will be applied to all skins */
/* Hide title and edit tools on main page */
.page-Main_Page .mw-side,
.page-Main_Page .firstHeading,
.page-Main_Page #siteSub {
	display: none!important;
}

/* per-game banner images */
body {
    background-image: url(images/background.webp);
    background-repeat: no-repeat;
}
.page-Guilty_Gear_XX_Accent_Core_Plus_R,.rootpage-GGACR {
    background-image: url(images/ggacr-background.webp);
    background-repeat: no-repeat;
}
.page-Granblue_Fantasy_Versus,.rootpage-GBVS {
    background-image: url(images/gbvs-background.webp);
    background-repeat: no-repeat;
}
.page-Granblue_Fantasy_Versus_Rising,.rootpage-GBVSR {
    background-image: url(images/gbvsr-background.png);
    background-repeat: no-repeat;
}
.page-Dragon_Ball_FighterZ,.rootpage-DBFZ {
    background-image: url(images/dbfz-background.webp);
    background-repeat: no-repeat;
}
.page-Persona_4_Arena_Ultimax_Remaster,.rootpage-P4U2R {
    background-image: url(images/p4u2r-background.webp);
    background-repeat: no-repeat;
}
.page-BlazBlue_Central_Fiction,.rootpage-BBCF {
    background-image: url(images/bbcf-background.webp);
    background-repeat: no-repeat;
}
.page-Guilty_Gear_The_Missing_Link,.rootpage-GGML {
    background-image: url(images/ggml-background.webp);
    background-repeat: no-repeat;
}
.page-BlazBlue_Cross_Tag_Battle,.rootpage-BBTag {
    background-image: url(images/bbtag-background.webp);
    background-repeat: no-repeat;
}
.page-Hokuto_no_Ken,.rootpage-HNK {
    background-image: url(images/hnk-background.webp);
    background-repeat: no-repeat;
}
.page-DNF_Duel,.rootpage-DNFD {
    background-image: url(images/dnfd-background.webp);
    background-repeat: no-repeat;
}
.page-Sailor_Moon_S,.rootpage-SMS {
    background-image: url(images/sms-background.png);
    background-repeat: no-repeat;
}
.page-Sengoku_Basara_X,.rootpage-SBX {
    background-image: url(images/sbx-background.webp);
    background-repeat: no-repeat;
}
.page-Guilty_Gear_Xrd_REV_2,.rootpage-GGXRD-R2 {
    background-image: url(images/ggxrd-background.webp);
    background-repeat: no-repeat;
}
.page-Battle_Fantasia,.rootpage-BatFan {
    background-image: url(images/batfan-background.png);
    background-repeat: no-repeat;
}
.page-King_s_Field_4,.rootpage-KF4 {
    background-image: url(images/kf4-background.webp);
    background-repeat: no-repeat;
}
.page-Limbus_Company,.rootpage-LCB {
    background-image: url(images/lcb-background.png);
    background-repeat: no-repeat;
}

.responsive-imagemap img { width: 100%; height: auto; }
.responsive-img img { width: 100%; height: auto; }
.big-pixly-image .image {width: 100%; height: auto; }
.big-pixly-image img { width: 100%; height: auto; image-rendering: pixelated; }

/* -----------------------------------------------------------------------------
                            Cargo Rules
----------------------------------------------------------------------------- */
/* disable the tfoot which dupes thead */

table.dataTable tfoot {
  display: none;
}

/* move images to start of line. else they will be at end of line when there are notes */
table.dataTable div.tright {
  float: left;
}

.stripe tbody tr:nth-child(odd) {
	background-color: var(--color-surface-1);
}

.stripe tbody tr:nth-child(odd):hover {
	background-color: var(--color-surface-3);
}

/* -----------------------------------------------------------------------------
                            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: var(--card-shadow-dlw); */
    border-radius: var(--border-radius--small);
    font-size: 0.875em;
    background-color:var(--color-surface-2);
    border-color: var(--border-color-base);
    overflow: hidden;
  }
}
@media (max-width: 899px) {
  .tierList {
    display: grid;
    grid-template-columns: minmax(58px, auto) 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    box-shadow: var(--card-shadow-dlw);
    border-radius: var(--border-radius--small);
    font-size: 0.875em;
    background-color:var(--color-surface-1);
    border-color: var(--border-color-base);
    overflow: hidden;
  }
}
.tierHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em 2px;
  font-size: 1em;
  font-weight: 600;
  color: black;
}
.tierGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.tierUnderline {
  border-bottom: 1px solid var(--border-color-base--darker);
}
.generalUnderline {
  border-bottom: 1px solid var(--border-color-base);
}
.tierGroup>div {
  margin: 4px 10px;
}
.CharaInfoLabel {
  text-align: right;
  width: 50%;
  vertical-align: text-top;
}

/* -----------------------------------------------------------------------------
                            ColumnList Specific Rules
----------------------------------------------------------------------------- */

.columns2 {
  -webkit-columns: 16em 2;
  -moz-columns: 16em 2;
  columns: 16em 2;
}



/* -----------------------------------------------------------------------------
                        Cargo Based Move Boxes Styling
----------------------------------------------------------------------------- */

.grid-container {
  display: grid;
  grid-template-columns: 210px auto;
  grid-template-rows: auto auto;
  gap: 0px 0px;
  grid-template-areas: "name data" "gallery description";
}
.move-box {
  box-shadow: var(--CardShadow);
  border-radius: var(--StandardBorderCurve);
}
.name {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  height: 1em;
  gap: 0px 0px;
  grid-template-areas: ".";
  grid-area: name;
  text-align: center;
}
#moveName {
  font-weight: bold;
  font-size: 20px;
  line-height: 1.1em;
}
.gallery {
  grid-area: gallery;
  align-content: center;
  text-align: center;
  overflow: hidden;
}
.description {
  grid-area: description;
  padding: 0.25em 1em;
}
.data {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0px 0px;
  grid-template-areas: ". . . . . . . ." ". . . . . . . .";
  grid-area: data;
  text-align: center;
  border-bottom: 1px solid grey;
}
.data-cell {
  font-size: 20px;
}
#startup {
  color: #4caf50;
}
#active {
  color: #f44336;
}
#recovery {
  color: #2196f3;
}

/* Movelist Toggles */
.movelist-toggles {
  display: flex;
  justify-content: center;
  box-shadow: var(--card-shadow-dlw);
  background-color: var(--color-surface-1);
  border-radius: var(--border-radius--small);
}

.movelist-toggle-button {
    display: inline-flex;
    align-items: center;
    padding: 18px;
    font-weight: bold;
    scroll-snap-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    color: var(--color-base--subtle);
}
.movelist-toggle-button:hover {
	background-color: var(--color-surface-3);
	color: var(--color-base--emphasized);
}

.movelist-toggle-on {
	background-color: var(--color-surface-2);
}

/******************************* Gallery Module *******************************/
@media all and (max-width: 720px) {
	.mod-gallery {
		width: 100% !important;
	}
}

.mod-gallery {
	display: table;
}

.mod-gallery-default {
	background: transparent;
	margin-top: 0.3em;
}

.mod-gallery-center {
	margin-left: auto;
	margin-right: auto;
}

.mod-gallery-left {
	float: left;
}

.mod-gallery-right {
	float: right;
}

.mod-gallery-none {
	float: none;
}

.mod-gallery-collapsible {
	width: 100%;
}

.mod-gallery .title,
.mod-gallery .main,
.mod-gallery .footer {
	display: table-row;
}

.mod-gallery .title > div {
	display: table-cell;
	padding: 0.2em 0 0.6em 1.6em;
	text-align: center;
	font-weight: bold;
}

.mod-gallery .main > div {
	display: table-cell;
}

.mod-gallery .gallery {
	line-height: 1.35em;
}

.mod-gallery .footer > div {
	display: table-cell;
	padding: 0.2em 0 0.6em 1.6em;
	text-align: right;
	font-size: 80%;
	line-height: 1em;
}

.mod-gallery .title > div *,
.mod-gallery .footer > div * {
	overflow: visible;
}

.mod-gallery .gallerybox img {
	background: none !important;
}

.mod-gallery .bordered-images .thumb img {
	border: solid #eaecf0 1px;
}

.mod-gallery .whitebg .thumb {
	background: #fff !important;
}

/********************************** Tooltips **********************************/
.tooltip {
  border-bottom: 1px dashed var(--color-base);
  white-space: nowrap;
}
.tooltiptext {
	display: none;
}

/******* CLR template styling added back until templatestyles bug is fixed *******/
.colorful-text-1 { color: var(--color-pink); }
.colorful-text-2 { color: var(--color-blue); }
.colorful-text-3 { color: var(--color-green); }
.colorful-text-4 { color: var(--color-red); }
.colorful-text-5 { color: var(--color-orange); }
.colorful-text-6 { color: var(--color-magenta); }

/* balance badge template */
.balance-badge {
	color: var(--balance-badge-font-color);
	border-radius: var(--border-radius--small);
	font-weight: var(--font-weight-bold);
	font-size: 0.75em;
	letter-spacing: -0.008em;
	padding: 2px 4px;
}

.balance-badge.added {
  background-color: LemonChiffon;
}

.balance-badge.new {
  background-color: PeachPuff;
}

.balance-badge.removed {
  background-color: Lavender;
}

.balance-badge.reworked {
  background-color: LightBlue;
}

.balance-badge.buff {
  background-color: DarkSeaGreen;
}

.balance-badge.nerf {
  background-color: LightPink;
}

/**** Character Label styling added back until templatestyles is fixed ****/
.charaLabel {
  display: inline;
}

.charaLabel > img {
    color: transparent!important;
    font-size: 0!important;
    line-height: 0!important;
    vertical-align: middle!important;
    white-space: nowrap!important;
    --width: 0;
    --height: 16px;
    --small-scale: 0.75;
    --gap: 0;
    --base-gap: 2px;
}

/**** Input Badge styling added back until templatestyles is fixed ****/
.input-badge {
  border: 1px solid;
  border-radius: var(--border-radius--small);
  border-color: var(--border-color-base);
  padding: .25em .35em;
  font-weight: bold;
  background-color: var( --color-surface-2 );
}

/* -----------------------------------------------------------------------------
                        Table alignment helper classes
----------------------------------------------------------------------------- */

table.col-1-center td:nth-child(1) { text-align: center; }
table.col-2-center td:nth-child(2) { text-align: center; }
table.col-3-center td:nth-child(3) { text-align: center; }
table.col-4-center td:nth-child(4) { text-align: center; }
table.col-5-center td:nth-child(5) { text-align: center; }
table.col-6-center td:nth-child(6) { text-align: center; }
table.col-7-center td:nth-child(7) { text-align: center; }
table.col-8-center td:nth-child(8) { text-align: center; }
table.col-9-center td:nth-child(9) { text-align: center; }

table.col-1-right td:nth-child(1) { text-align: right; }
table.col-2-right td:nth-child(2) { text-align: right; }
table.col-3-right td:nth-child(3) { text-align: right; }
table.col-4-right td:nth-child(4) { text-align: right; }
table.col-5-right td:nth-child(5) { text-align: right; }
table.col-6-right td:nth-child(6) { text-align: right; }
table.col-7-right td:nth-child(7) { text-align: right; }
table.col-8-right td:nth-child(8) { text-align: right; }
table.col-9-right td:nth-child(9) { text-align: right; }

/* -----------------------------------------------------------------------------
                            Template:RainbowText styles
----------------------------------------------------------------------------- */
/* In Common.css for Cargo compatibility. */

.rainbow-shadow {
  letter-spacing: 0.15rem;
  color: var(--rainbow-text-base-color);
  text-shadow: -1px 1px #ef3550,
               -2px 2px #f48fb1,
               -3px 3px #7e57c2,
               -4px 4px #2196f3,
               -5px 5px #26c6da,
               -6px 6px #43a047,
               -7px 7px #eeff41;
}

.rainbow-shadow-huge {
  font-weight: 900;
  font-size: 6em;
  padding-left: 1.8rem;
  padding-bottom: 0.8rem;
  letter-spacing: 0.15rem;
  color: var(--rainbow-text-base-color);
  text-shadow: -4px 4px #ef3550,
               -8px 8px #f48fb1,
               -12px 12px #7e57c2,
               -16px 16px #2196f3,
               -20px 20px #26c6da,
               -24px 24px #43a047,
               -28px 28px #eeff41,
               -32px 32px #f9a825,
               -36px 36px #ff5722;
}


/*------------------------------ Tippy Tooltips ------------------------------*/
.tippy-box {
    background-color: var(--color-surface-2);
    color: var(--color-base);
    border-radius: var(--border-radius--small);
    font-size: 0.875rem;
    line-height: var(--line-height-sm);
    outline: 0;
    box-shadow: var(--card-shadow-dlw), rgba(255, 255, 255, 0.067) 0px 1px 0px inset;
}
.tippy-content {
	text-align: center;
	padding: var(--space-sm) var(--space-md);
}
.tippy-arrow {
	color: var(--color-surface-2);
}
.tooltip-dashed-underline {
	text-decoration: dashed underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: from-font;
}
Retrieved from "https://www.dustloop.com/wiki/index.php?title=MediaWiki:Common.css&oldid=448343"
Last modified
This page was last edited on 5 March 2024, at 23:14.