MediaWiki:Common.css: Difference between revisions

Revision as of 04:03, 8 April 2021

/* 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;
}
/* Navbox */
.nav-header {
	background-color: #2a2a2a;
	font-weight: bold;
	font-style: italic;
	text-align: center;
}
/* Tabber */
ul.tabbernav {
	display: flex;
	flex-wrap: wrap;
}
ul.tabbernav li {
	display: inherit;
	margin-top: 2px;
}
ul.tabbernav li.tabberactive a:hover {
	color: #c1c1c1;
	background: #3A3A3A;
	border-bottom: 1px solid #121212;
}
ul.tabbernav li a:link {
	color: #CC830E;
}
ul.tabbernav li.tabberactive a {
	background-color: #121212;
	border-bottom: 1px solid #121212;
}
ul.tabbernav li a {
	background: none;
        border: 1px solid #121212;
}
ul.tabbernav li a:hover {
	color: #c1c1c1;
	background: none;
	border-color: #121212;
}
.tabber .tabbertab {
	padding: 5px 0 0 0;
	border: 0px;
}
ul.tabbernav {
        padding-top: 3px;
	border-bottom: 1px solid #121212;
	font: bold 12px 'Verdana',sans-serif;
}

/* Prevents tabber contents from showing up for a few frames before the script executes */

.tabber:not(.tabberlive)>.tabbertab:not(:first-child) {
  display: none;
}


/* Invisible header for MoveData editing */
.invisible-header {
	visibility: hidden;
	float: right;
}

@media (max-width:861px) {
 .iconscol {
   flex-direction: row;
   flex-flow: row wrap;
 }
}
@media (min-width:861px) {
 .iconscol {
   flex-direction: column;
   flex-flow: column nowrap;
 }
}

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

.wikiEditor-ui-toolbar .group .label {
color: white;
}

.wikiEditor-ui-toolbar .page-table th {
color: white;
}

.wikiEditor-ui-toolbar .page-table td {
color: white;
}

div#content {
  box-shadow: 0 0 5px #000;
}

.srkbox {
	border-radius: 2px;
	margin:5px;
        box-shadow: 0 0 5px #000;
}

.srkbtn {
	background-color: #e69710;
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	padding: 4px 8px 4px;
	border-radius: 4px;
	margin: 5px;
}

.gamebtn {
	background-color: #121212;
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	padding: 4px 8px 4px;
	border-radius: 4px;
	margin: 5px;
}

.gamebtn:hover {
	background-color: #e69710;
}

/* sortable tables and JS enhanced wikitables with thead, works with Safari. This is ideal. */
/* But borders are broken: https://bugs.webkit.org/show_bug.cgi?id=128486 */
.jquery-tablesorter > thead,
.mw-sticky-header > thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.jquery-tablesorter > tfoot,
.mw-sticky-header > tfoot {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}
/* On mobile, where we have tables in overflowable boxes to avoid viewport overflows,
 * by using display:block, sticky never works though :( */

.hyperGuideBreadcrumb {
    background: #ffe2a5 url(http://shoryuken.com/wiki/skins/hyper-guide-icon.png) 5px 13px no-repeat;
    width: 538px;
    padding: 5px 5px 5px 155px;
    border: 1px solid #ffb924;
}

.movelist {
    border: #262e32 solid 1px;
    width: 700px;
}

.row:nth-child(odd) {
    background: #3a4146;
}

.row:nth-child(even) {
    background: #31373c;
}

div.movelistHeader {
    display: table-row;
    font-weight: bold;
    font-size: 9px;
    background:#262e32;
    color:#fff;
}

.table {
    display: table;
}

.row {
    display: table-row;
}

.gearRow {
    display: table-row;
}

.cell {
    display: table-cell;
}

.right {
    text-align: right;
    padding-right: 10px;
}

.todo {
    background: #fff39f;
    border: solid 1px #544c2f;
    padding: 5px;
}

#characterSelect {
    float:right;
    margin: 0px 30px 0px 30px;
    padding: 5px;
    background: #036;
}

.portrait {
    width: 32px;
    height: 32px;
    padding: 0px;
    border: black solid 1px;
}

div.alphaRow {
    background: #673d5c !important;
}

div.betaRow {
    background: #39576e !important;
}

div.gammaRow {
    background: #3a6553 !important;
}

div.level3 {
    background: #273f50 !important;
}

div.evenRow {
    background: #dedede;
    padding: 6px 20px 6px 10px;
}

div.oddRow {
    background: #fff;
    padding: 6px 20px 6px 10px;
}

div.moveListCell {
    display: table-cell;
    padding: 5px;
}

div.characterBar {
    display: table-row;
    background: #31373c;
}

.characterBar:nth-child(odd) {
    background: #3a4146;
}

.characterBar:nth-child(even) {
    background: #31373c;
}

div.characterBarName {
    display: table-cell;
    color: #fff;
    padding: 0px 10px 0px 10px;
    font-size: 9px;
}

div.characterBarBar {
    height: 5px;    
}

div.characterBarBarH {
    height: 10px;
}

div.characterBarValue {
    color: #fff;
    text-align: right;
    font-size: 10px;
    padding: 0px 10px 0px 0px;
}

div.strategyCorner h1,
div.strategyCorner h2,
div.strategyCorner h3,
div.strategyCorner h4 {
   color: black;	
}

.ambox {
 background-color:#393939;
 border-bottom-color:#383838;
 border-right-color:#383838;
 border-top-color:#383838;
 border-collapse:collapse;
 font-size:95%;
 margin:0 auto 2px auto;
 width:80%
}
.ambox-gray {
 border-left-color:#383838
}
.ambox.ambox-tiny {
 font-size:90%;
 margin:2px 0;
 width:auto
}
.ambox + .ambox {
 margin-top:-2px
}
.ambox-text {
 padding:0.25em 0.5em
}
.ambox-image {
 padding:2px 0px 2px 0.5em;
 text-align:center;
 width:60px
}
.ambox-tiny .ambox-image {
 padding:2px 0.5em;
 text-align:left;
 width:auto
}
.ambox-blue {
 border-left:10px solid #1e90ff
}
.ambox-red {
 border-left:10px solid #b22222
}
.ambox-orange {
 border-left:10px solid #f28500
}
.ambox-yellow {
 border-left:10px solid #f4c430
}
.ambox-purple {
 border-left:10px solid #9932cc
}
.ambox-gray {
 border-left:10px solid #bba
}
.ambox-green {
 border-left:10px solid #228b22
}
.amsmalltext {
 font-size:smaller;
 margin-left:0.8em;
 margin-top:0.5em
}
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { 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;
}