Difference between revisions of "MediaWiki:Common.css"

From Dustloop Wiki
Jump to navigation Jump to search
m
 
(206 intermediate revisions by 3 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; }
 +
 +
/* 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 {
 +
    padding-right: 3em;
 +
  }
 +
}
 +
@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 {
 +
    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;
 +
}
  
 
/* -----------------------------------------------------------------------------
 
/* -----------------------------------------------------------------------------
Line 36: Line 207:
 
   display: none;
 
   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 */
 
/* Make the cargo standard table look more like the mediawiki table */
  
Line 52: Line 229:
 
}
 
}
 
table.cargoTable thead th {
 
table.cargoTable thead th {
   background-color: #f8f9fa;
+
   background-color: #eaecf0;
 
   margin: 1em 0;
 
   margin: 1em 0;
 
   padding: 0 2px;
 
   padding: 0 2px;
Line 58: Line 235:
 
}
 
}
  
div.tright {
+
table.cargoTable.noMerge tr:nth-child(even) {
   float: inline-start;
+
   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
 
                             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 */
 
/* normalize link colors */
  
 
a, a:visited, a.external, a.external:visited {
 
a, a:visited, a.external, a.external:visited {
 
   color: rgb(6, 95, 212);
 
   color: rgb(6, 95, 212);
 +
}
 +
body {
 +
    background-image: url(images/background.png);
 +
    background-repeat: no-repeat;
 +
}
 +
body.page-Guilty_Gear_XX_Accent_Core_Plus_R,body.rootpage-GGACR {
 +
    background-image: url(images/ggacr-background.png);
 +
    background-repeat: no-repeat;
 +
}
 +
body.page-Granblue_Fantasy_Versus,body.rootpage-GBVS {
 +
    background-image: url(images/gbvs-background.png);
 +
    background-repeat: no-repeat;
 +
}
 +
body.page-Dragon_Ball_FighterZ,body.rootpage-DBFZ {
 +
    background-image: url(images/dbfz-background.png);
 +
    background-repeat: no-repeat;
 +
}
 +
body.page-Persona_4_Arena_Ultimax_2_5,body.rootpage-P4U2_5 {
 +
    background-image: url(images/p4u2-background.png);
 +
    background-repeat: no-repeat;
 +
}
 +
body.page-BlazBlue_Central_Fiction,body.rootpage-BBCF {
 +
    background-image: url(images/bbcf-background.png);
 +
    background-repeat: no-repeat;
 +
}
 +
body.page-Guilty_Gear_The_Missing_Link,body.rootpage-GGML {
 +
    background-image: url(images/ggml-background.png);
 +
    background-repeat: no-repeat;
 +
}
 +
body.page-BlazBlue_Cross_Tag_Battle,body.rootpage-BBTag {
 +
    background-image: url(images/bbtag-background.png);
 +
    background-repeat: no-repeat;
 +
}
 +
body.page-Hokuto_no_Ken,body.rootpage-HNK {
 +
    background-image: url(images/hnk-background.png);
 +
    background-repeat: no-repeat;
 +
}
 +
body.page-DNF_Duel,body.rootpage-DNFD {
 +
    background-image: url(images/dnfd-background.png);
 +
    background-repeat: no-repeat;
 +
}
 +
#mw-page-base {
 +
    background-image: none;
 +
    background-color: rgba(0,0,0,0);
 +
}
 +
 +
div#mw-head div.vectorMenu h3 {
 +
  background-image: none;
 +
}
 +
 +
#p-personal {
 +
top: 0;
 +
right: 0;
 +
background-color: #fff;
 +
padding-top: 0.25em;
 +
padding-right: 0.75em;
 +
border-radius: 0px 0px 0px 5px;
 +
}
 +
 +
#p-personal ul {
 +
padding-left: 0;
 +
}
 +
 +
div#simpleSearch {
 +
    margin-top: 0.35em;
 +
}
 +
 +
#ca-unwatch.icon a,
 +
#ca-watch.icon a {
 +
    padding-top: 2.7em;
 +
}
 +
 +
#p-personal {
 +
    text-shadow: 0 0 2px #FEFEFE, 0 0 4px #FFF;
 +
}
 +
 +
#pt-anonuserpage {
 +
    margin-bottom: 0.8em;
 +
}
 +
 +
/* Background Ends Here */
 +
 +
.vector-menu-tabs li {
 +
  background: #f6f6f6;
 
}
 
}
 
.mw-body-content a.external:visited, a.external, a, a:visited {
 
.mw-body-content a.external:visited, a.external, a, a:visited {
 
   color: rgb(6, 95, 212);
 
   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 {
 
a:hover, a:focus {
 
   text-decoration: none;
 
   text-decoration: none;
 
}
 
}
/* move collapsible element indicator to the left */
 
  
span.mw-collapsible-toggle {
 
  float: left;
 
  margin-left: 0;
 
  margin-right: 1em;
 
}
 
 
/* Odd rows for any table with "stripe" class */
 
/* Odd rows for any table with "stripe" class */
  
 
table.stripe tr:nth-child(even) {
 
table.stripe tr:nth-child(even) {
   background-color: white;
+
   background-color: #FFF;
 
}
 
}
 
/* Even rows for any table with "stripe" class */
 
/* Even rows for any table with "stripe" class */
  
 
table.stripe tr:nth-child(odd) {
 
table.stripe tr:nth-child(odd) {
   background-color: #f9f9f9;
+
   background-color: #fafafa;
 
}
 
}
 
/* Odd set of 2 rows (for colors table) */
 
/* 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) {
 
table.colors-table.stripe tr:nth-child(4n), table.colors-table.stripe tr:nth-child(4n-1) {
   background-color: white;
+
   background-color: #FFF;
 
}
 
}
 
/* Even set of 2 rows (for colors table) */
 
/* 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) {
 
table.colors-table.stripe tr:nth-child(4n-2), table.colors-table.stripe tr:nth-child(4n-3) {
   background-color: #f9f9f9;
+
   background-color: #fafafa;
 
}
 
}
 
.dataTables_wrapper {
 
.dataTables_wrapper {
   background-color: white;
+
   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);
 
   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;
 
   padding: 4px;
Line 194: Line 477:
 
.tierList {
 
.tierList {
 
   display: grid;
 
   display: grid;
   grid-template-columns: 58px 1fr;
+
   grid-template-columns: minmax(58px, auto) 1fr;
 
   grid-column-gap: 0px;
 
   grid-column-gap: 0px;
 
   grid-row-gap: 0px;
 
   grid-row-gap: 0px;
Line 206: Line 489:
 
   align-items: center;
 
   align-items: center;
 
   justify-content: center;
 
   justify-content: center;
   padding: 1em 2em;
+
   text-align: center;
 +
  // padding: 1em 2em;
 +
  padding-top: 1em;
 +
  padding-bottom: 1em;
 
   font-size: 14px;
 
   font-size: 14px;
 
   font-weight: 600;
 
   font-weight: 600;
Line 268: Line 554:
 
   padding: -4px;
 
   padding: -4px;
 
}
 
}
/* -----------------------------------------------------------------------------
 
                        Image Map Sizing Rules
 
----------------------------------------------------------------------------- */
 
 
/* GBVS Imagemap */
 
 
img[alt="GBVS CharSelect.png"] {
 
  transform-origin: center left;
 
}
 
@media (max-width: 1800px) {
 
  img[alt="GBVS CharSelect.png"] {
 
    transform: scale(0.9);
 
  }
 
}
 
@media (max-width: 1600px) {
 
  img[alt="GBVS CharSelect.png"] {
 
    transform: scale(0.8);
 
  }
 
}
 
@media (max-width: 1366px) {
 
  img[alt="GBVS CharSelect.png"] {
 
    transform: scale(0.58);
 
  }
 
}
 
@media (max-width: 1280px) {
 
  img[alt="GBVS CharSelect.png"] {
 
    transform: scale(0.5);
 
  }
 
}
 
@media (max-width: 989px) {
 
  img[alt="GBVS CharSelect.png"] {
 
    transform: scale(0.72);
 
  }
 
}
 
/* GGXRD-R2 Imagemap */
 
  
img[alt="GGXRD-R2_Roster.png"] {
 
  transform-origin: center left;
 
}
 
@media (max-width: 1366px) {
 
  img[alt="GGXRD-R2_Roster.png"] {
 
    transform: scale(0.85);
 
  }
 
}
 
@media (max-width: 1280px) {
 
  img[alt="GGXRD-R2_Roster.png"] {
 
    transform: scale(0.75);
 
  }
 
}
 
/* -----------------------------------------------------------------------------
 
                              Text colors  Tempalte Rules
 
----------------------------------------------------------------------------- */
 
 
.text-color--1 {
 
  color: #d96aca;
 
}
 
/* Guilty Gear P button */
 
 
.text-color--2 {
 
  color: #1f8ccc;
 
}
 
/* Guilty Gear K button */
 
 
.text-color--3 {
 
  color: #009e4e;
 
}
 
/* Guilty Gear S button */
 
 
.text-color--4 {
 
  color: #de1616;
 
}
 
/* Guilty Gear H button */
 
 
.text-color--5 {
 
  color: #e8982c;
 
}
 
/* Guilty Gear D button */
 
 
.text-color--6 {
 
  color: #3197d3;
 
}
 
/* very easy difficulty combo*/
 
 
.text-color--7 {
 
  color: #e49f48;
 
}
 
/* medium difficulty combo*/
 
 
.text-color--8 {
 
  color: #b769c4;
 
}
 
/* very hard difficulty combo*/
 
 
.text-color--added {
 
  background-color: LemonChiffon;
 
  border-radius: 4px;
 
  font-weight: 600;
 
  font-size: 12px;
 
  letter-spacing: -0.008em;
 
  padding: 2px;
 
}
 
.text-color--new {
 
  background-color: PeachPuff;
 
  border-radius: 4px;
 
  font-weight: 600;
 
  font-size: 12px;
 
  letter-spacing: -0.008em;
 
  padding: 2px;
 
}
 
.text-color--removed {
 
  background-color: Lavender;
 
  border-radius: 4px;
 
  font-weight: 600;
 
  font-size: 12px;
 
  letter-spacing: -0.008em;
 
  padding: 2px;
 
}
 
.text-color--reworked {
 
  background-color: LightBlue;
 
  border-radius: 4px;
 
  font-weight: 600;
 
  letter-spacing: -0.008em;
 
  font-size: 12px;
 
  padding: 2px;
 
}
 
.text-color--buff {
 
  background-color: DarkSeaGreen;
 
  border-radius: 4px;
 
  font-weight: 600;
 
  font-size: 12px;
 
  letter-spacing: -0.008em;
 
  padding: 2px;
 
}
 
.text-color--nerf {
 
  background-color: LightPink;
 
  border-radius: 4px;
 
  font-weight: 600;
 
  font-size: 12px;
 
  padding: 2px;
 
}
 
 
/* -----------------------------------------------------------------------------
 
/* -----------------------------------------------------------------------------
 
                                   Tabber Rules
 
                                   Tabber Rules
Line 1,075: Line 1,222:
 
Flex Attack Data styling
 
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) {
 
@media (min-width: 990px) {
 
   .attack-container {
 
   .attack-container {
    /* margin-right: 220px; */
 
 
     width: auto;
 
     width: auto;
 
   }
 
   }
Line 1,090: Line 1,244:
 
   }
 
   }
 
}
 
}
span.input-badge {
+
.input-badge {
 
   border: 1px solid #2e2d2d;
 
   border: 1px solid #2e2d2d;
 
   border-radius: 4px;
 
   border-radius: 4px;
Line 1,107: Line 1,261:
 
   border-collapse: collapse;
 
   border-collapse: collapse;
 
}
 
}
div.attack-gallery ul.gallery {
+
.attack-gallery ul.gallery {
 
   margin: 0;
 
   margin: 0;
 
}
 
}
div.attack-gallery * .gallerytext p {
+
.attack-gallery * .gallerytext p {
 
   margin: 0;
 
   margin: 0;
 
   text-align: center;
 
   text-align: center;
 
}
 
}
div.attack-data {
+
.attack-data { width: 100%; text-align: center; margin: 0; }
 +
.attack-data table {
 
   border: none;
 
   border: none;
 
   background-color: white;
 
   background-color: white;
 
   border-collapse: collapse;
 
   border-collapse: collapse;
  margin-top: 0;
 
 
   overflow: auto;
 
   overflow: auto;
 
}
 
}
div.attack-info>table.attack-data {
+
.attack-info p, attack-info dl {
  width: 100%;
+
   padding: 0 1em 0 0.5em;
  text-align: center;
 
  margin-top: 0;
 
  margin-left: 0;
 
  margin-bottom: 0.2em;
 
}
 
div.attack-info>p {
 
  padding-left: 0.5em;
 
  padding-right: 0.5em;
 
  padding-bottom: 0.5em;
 
}
 
div.attack-info>dl {
 
   padding-left: 0.5em;
 
  padding-right: 0.5em;
 
}
 
.attack-info h4 {
 
  padding: 0;
 
  margin: 0;
 
 
}
 
}
 +
.attack-info h4 { padding: 0; margin: 0; }
 
/* -----------------------------------------------------------------------------
 
/* -----------------------------------------------------------------------------
 
                         Character Link Button styling
 
                         Character Link Button styling
Line 1,146: Line 1,284:
  
 
.char-btn {
 
.char-btn {
   background-color: white;
+
   background-color: #e85a5a;
  border: 1px solid #1976d2;
+
   color: white;
   color: black;
 
 
   border-radius: 4px;
 
   border-radius: 4px;
 
   text-align: center;
 
   text-align: center;
Line 1,234: Line 1,371:
 
.movelist-toggles {
 
.movelist-toggles {
 
   display: flex;
 
   display: flex;
 +
  justify-content: center;
 +
  box-shadow: rgb(72, 78, 81) 0px -1px 0px 0px inset;
 +
  background: #f9f9f9;
 
}
 
}
  
 
.movelist-toggle-button {
 
.movelist-toggle-button {
  user-select: none;
+
    display: inline-flex;
  flex-flow: row wrap;
+
    align-items: center;
   padding: 2px 10px;
+
    padding: 5px 12px;
   margin: 0 3px;
+
    color: #54595d;
   border-radius: 3px;
+
    font-weight: bold;
   border: 1px solid black;
+
    scroll-snap-align: start;
 +
    text-decoration: none;
 +
    white-space: nowrap;
 +
    cursor: pointer;
 +
}
 +
.movelist-toggle-button:hover {
 +
    box-shadow: inset 0 -2px 0 0 #447ff5;
 +
    color: #447ff5;
 +
}
 +
 
 +
.movelist-toggle-on {
 +
   box-shadow: rgb(41, 82, 163) 0px -2px 0px 0px inset;
 +
   color: rgb(92, 152, 214);
 +
}
 +
.movelist-toggle-on:hover {
 +
   box-shadow: rgb(9, 59, 161) 0px -2px 0px 0px inset;
 +
   color: rgb(76, 159, 245);
 
}
 
}
  
.movelist-toggle-off {
+
.note {
   background-color: #aaa;
+
  background-position: left 7px top 50%;
 +
  padding: 0.5em 0.5em 0.5em 40px;
 +
  margin: 0.5em 0;
 +
  overflow: hidden;
 +
  background-color: #f8f9fa;
 +
   background-repeat: no-repeat;
 +
  border: 1px solid #ddd;
 
}
 
}
 +
.note-inline {
 +
  display: inline-block;
 +
  vertical-align: middle;
 +
}
 +
.note-info {
 +
  background-color: #f6efe5;
 +
  /* [[File:OOjs_UI_icon_reference_20_ac6600.svg]] */
 +
  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;
 +
  /* [[File:OOjs_UI_icon_lightbulb-yellow.svg]] */
 +
  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;
 +
  /* [[File:OOjs_UI_icon_alert-warning.svg]] */
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg);
 +
  background-size: 25px;
 +
  border-color: #fc3;
 +
  min-height: 28px;
 +
}
 +
 +
.note-error {
 +
  background-color: #fee7e6;
 +
  /* [[File:OOjs_UI_icon_notice-destructive.svg]] */
 +
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg);
 +
  background-size: 25px;
 +
  border-color: #c33;
 +
  min-height: 28px;
 +
}
 +
 +
/* Clr Template to use HTML colors */
 +
.colorful-text[style] { color: var(--data-color); }
 +
 +
/* Guilty Gear P button */
 +
.colorful-text[style="--data-color:1"] { color: #d96aca; }
 +
 +
/* Guilty Gear K button */
 +
.colorful-text[style="--data-color:2"] { color: #1f8ccc; }
 +
 +
/* Guilty Gear S button */
 +
.colorful-text[style="--data-color:3"] { color: #009e4e; }
 +
 +
/* Guilty Gear H button */
 +
.colorful-text[style="--data-color:4"] { color: #de1616; }
  
.movelist-toggle-on {
+
/* Guilty Gear D button */
   background-color: #eee;
+
.colorful-text[style="--data-color:5"] { color: #e8982c; }
 +
 
 +
/* very easy difficulty combo*/
 +
.colorful-text[style="--data-color:6"] { color: #3197d3; }
 +
 
 +
/* medium difficulty combo*/
 +
.colorful-text[style="--data-color:7"] { color: #e49f48; }
 +
 
 +
/* very hard difficulty combo*/
 +
.colorful-text[style="--data-color:8"] { color: #b769c4; }
 +
 
 +
 
 +
.colorful-text[style="--data-color:added"] {
 +
  background-color: LemonChiffon;
 +
  border-radius: 4px;
 +
  font-weight: 600;
 +
  font-size: 12px;
 +
  letter-spacing: -0.008em;
 +
  padding: 2px;
 +
}
 +
.colorful-text[style="--data-color:new"] {
 +
  background-color: PeachPuff;
 +
  border-radius: 4px;
 +
  font-weight: 600;
 +
  font-size: 12px;
 +
  letter-spacing: -0.008em;
 +
  padding: 2px;
 +
}
 +
.colorful-text[style="--data-color:removed"] {
 +
  background-color: Lavender;
 +
  border-radius: 4px;
 +
  font-weight: 600;
 +
  font-size: 12px;
 +
  letter-spacing: -0.008em;
 +
  padding: 2px;
 +
}
 +
.colorful-text[style="--data-color:reworked"] {
 +
   background-color: LightBlue;
 +
  border-radius: 4px;
 +
  font-weight: 600;
 +
  letter-spacing: -0.008em;
 +
  font-size: 12px;
 +
  padding: 2px;
 +
}
 +
.colorful-text[style="--data-color:buff"] {
 +
  background-color: DarkSeaGreen;
 +
  border-radius: 4px;
 +
  font-weight: 600;
 +
  font-size: 12px;
 +
  letter-spacing: -0.008em;
 +
  padding: 2px;
 +
}
 +
.colorful-text[style="--data-color:nerf"] {
 +
  background-color: LightPink;
 +
  border-radius: 4px;
 +
  font-weight: 600;
 +
  font-size: 12px;
 +
  padding: 2px;
 
}
 
}

Latest revision as of 19:33, 29 June 2022

/* CSS placed in this file will be applied to all skins */
#bodyContent h5 { font-size: 12px; }

/* 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 {
    padding-right: 3em;
  }
}
@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 {
    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 {
    background-image: url(images/background.png);
    background-repeat: no-repeat;
}
body.page-Guilty_Gear_XX_Accent_Core_Plus_R,body.rootpage-GGACR {
    background-image: url(images/ggacr-background.png);
    background-repeat: no-repeat;
}
body.page-Granblue_Fantasy_Versus,body.rootpage-GBVS {
    background-image: url(images/gbvs-background.png);
    background-repeat: no-repeat;
}
body.page-Dragon_Ball_FighterZ,body.rootpage-DBFZ {
    background-image: url(images/dbfz-background.png);
    background-repeat: no-repeat;
}
body.page-Persona_4_Arena_Ultimax_2_5,body.rootpage-P4U2_5 {
    background-image: url(images/p4u2-background.png);
    background-repeat: no-repeat;
}
body.page-BlazBlue_Central_Fiction,body.rootpage-BBCF {
    background-image: url(images/bbcf-background.png);
    background-repeat: no-repeat;
}
body.page-Guilty_Gear_The_Missing_Link,body.rootpage-GGML {
    background-image: url(images/ggml-background.png);
    background-repeat: no-repeat;
}
body.page-BlazBlue_Cross_Tag_Battle,body.rootpage-BBTag {
    background-image: url(images/bbtag-background.png);
    background-repeat: no-repeat;
}
body.page-Hokuto_no_Ken,body.rootpage-HNK {
    background-image: url(images/hnk-background.png);
    background-repeat: no-repeat;
}
body.page-DNF_Duel,body.rootpage-DNFD {
    background-image: url(images/dnfd-background.png);
    background-repeat: no-repeat;
}
#mw-page-base {
    background-image: none;
    background-color: rgba(0,0,0,0);
}

div#mw-head div.vectorMenu h3 {
   background-image: none;
}

#p-personal {
top: 0;
right: 0;
background-color: #fff;
padding-top: 0.25em;
padding-right: 0.75em;
border-radius: 0px 0px 0px 5px;
}

#p-personal ul {
padding-left: 0;
}

div#simpleSearch {
    margin-top: 0.35em;
}

#ca-unwatch.icon a,
#ca-watch.icon a {
    padding-top: 2.7em;
}

#p-personal {
    text-shadow: 0 0 2px #FEFEFE, 0 0 4px #FFF;
}

#pt-anonuserpage {
    margin-bottom: 0.8em;
}

/* Background Ends Here */

.vector-menu-tabs li {
  background: #f6f6f6;
}
.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 */

table.stripe tr:nth-child(even) {
  background-color: #FFF;
}
/* Even rows for any table with "stripe" class */

table.stripe tr:nth-child(odd) {
  background-color: #fafafa;
}
/* 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) {
  background-color: #FFF;
}
/* 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
----------------------------------------------------------------------------- */

.imgContainer {
  display: inline-block;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
}
.editorial-body {
  font-size: 14px;
  line-height: 27px;
  padding: 4px;
  margin: 0 auto;
  max-width: 1000px;
  color: #454545;
  font-weight: normal;
}
.editorial-author {
  font-size: 20px;
  color: #6B778C;
  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 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  // padding: 1em 2em;
  padding-top: 1em;
  padding-bottom: 1em;
  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%;
}
/* -----------------------------------------------------------------------------
                            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
----------------------------------------------------------------------------- */

.columns2 {
  -webkit-columns: 16em 2;
  -moz-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
----------------------------------------------------------------------------- */

.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: 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;
  background-color: white;
}
.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: rgb(72, 78, 81) 0px -1px 0px 0px inset;
  background: #f9f9f9;
}

.movelist-toggle-button {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    color: #54595d;
    font-weight: bold;
    scroll-snap-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.movelist-toggle-button:hover {
    box-shadow: inset 0 -2px 0 0 #447ff5;
    color: #447ff5;
}

.movelist-toggle-on {
  box-shadow: rgb(41, 82, 163) 0px -2px 0px 0px inset;
  color: rgb(92, 152, 214);
}
.movelist-toggle-on:hover {
  box-shadow: rgb(9, 59, 161) 0px -2px 0px 0px inset;
  color: rgb(76, 159, 245);
}

.note {
  background-position: left 7px top 50%;
  padding: 0.5em 0.5em 0.5em 40px;
  margin: 0.5em 0;
  overflow: hidden;
  background-color: #f8f9fa;
  background-repeat: no-repeat;
  border: 1px solid #ddd;
}
.note-inline {
  display: inline-block;
  vertical-align: middle;
}
.note-info {
  background-color: #f6efe5;
  /* [[File:OOjs_UI_icon_reference_20_ac6600.svg]] */
  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;
  /* [[File:OOjs_UI_icon_lightbulb-yellow.svg]] */
  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;
  /* [[File:OOjs_UI_icon_alert-warning.svg]] */
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg);
  background-size: 25px;
  border-color: #fc3;
  min-height: 28px;
}

.note-error {
  background-color: #fee7e6;
  /* [[File:OOjs_UI_icon_notice-destructive.svg]] */
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg);
  background-size: 25px;
  border-color: #c33;
  min-height: 28px;
}

/* Clr Template to use HTML colors */
.colorful-text[style] { color: var(--data-color); }

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

/* Guilty Gear K button */
.colorful-text[style="--data-color:2"] { color: #1f8ccc; }

/* Guilty Gear S button */
.colorful-text[style="--data-color:3"] { color: #009e4e; }

/* Guilty Gear H button */
.colorful-text[style="--data-color:4"] { color: #de1616; }

/* Guilty Gear D button */
.colorful-text[style="--data-color:5"] { color: #e8982c; }

/* very easy difficulty combo*/
.colorful-text[style="--data-color:6"] { color: #3197d3; }

/* medium difficulty combo*/
.colorful-text[style="--data-color:7"] { color: #e49f48; }

/* very hard difficulty combo*/
.colorful-text[style="--data-color:8"] { color: #b769c4; }


.colorful-text[style="--data-color:added"] {
  background-color: LemonChiffon;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
.colorful-text[style="--data-color:new"] {
  background-color: PeachPuff;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
.colorful-text[style="--data-color:removed"] {
  background-color: Lavender;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
.colorful-text[style="--data-color:reworked"] {
  background-color: LightBlue;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: -0.008em;
  font-size: 12px;
  padding: 2px;
}
.colorful-text[style="--data-color:buff"] {
  background-color: DarkSeaGreen;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
.colorful-text[style="--data-color:nerf"] {
  background-color: LightPink;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  padding: 2px;
}