No edit summary |
No edit summary |
||
| Line 798: | Line 798: | ||
border: 1px solid #111 !important; | border: 1px solid #111 !important; | ||
background-color: black !important; | background-color: black !important; | ||
background-image: none !important; | |||
} | } | ||
.dataTables_wrapper .dataTables_paginate .paginate_button { | .dataTables_wrapper .dataTables_paginate .paginate_button { | ||
Revision as of 22:14, 7 October 2022
/* 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;
}
/* AttackData Flex*/
.attack-row {
width: 100%;
display:flex;
justify-content: center;
flex-wrap: wrap;
}
.attack-data {
border-bottom: none;
border-top: none;
display: flex;
flex-wrap: wrap;
flex:95;
justify-content: center;
min-width: 300px;
}
.attack-info, .attack-caption, .attack-version {
text-align: center;
padding: 0em 0.2em;
}
.attack-version {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex:5;
min-width: 75px;
background-color: #3A3A3A;
font-size: 85%;
}
.attack-cell {
border-left: 1px solid #474747;
flex-grow: 1;
width: 80px;
display: flex;
flex-direction: column;
}
.attack-caption {
background-color: #3A3A3A;
font-size: 80%;
}
.attack-info {
flex-grow: 9;
display: flex;
flex-direction: column;
justify-content: center;
}
.attack-input {
font-size: 70%;
}
/* 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: #1ea8e8;
background: #3A3A3A;
border-bottom: 1px solid #121212;
}
ul.tabbernav li a:link {
color: #1ea8e8;
}
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: #1ea8e8;
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;
}
/* 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: #1D81AF;
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: #1D81AF;
}
/* 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;
}
.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: 100px;
padding: 12px 14px;
position: absolute;
left: 50%;
bottom: calc(20px + 100%);
z-index: 99999;
background: #353535;
border-radius: 4px;
white-space: nowrap;
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: #353535;
margin-top: -10px;
margin-left: -10px;
transform: rotate(45deg);
border-width: 0;
}
.tooltiptext:before {
top: 100%;
bottom: auto;
margin-left: -18px;
pointer-events: none;
border-color: transparent;
}
.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;
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;
}
.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);
}
/* 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;
}
/* gradient bg for boxes */
.srk-gradient {
background: rgb(53,53,53);
background: linear-gradient(180deg, rgba(53,53,53,1) 0%, rgba(22,22,22,1) 100%);
border-radius: 8px;
}
/* -----------------------------------------------------------------------------
Hitbox Toggle CSS from Mizuumi
----------------------------------------------------------------------------- */
/* MoveData Hitbox Toggle */
.hitbox-toggle-off,
.hitbox-toggle-on {
opacity: 0.5;
border: 1px solid #000;
width: 134px;
height: 24px;
cursor: pointer;
margin-top: 5px !important;
}
.hitbox-toggle-on {
opacity: 1.0;
display: none;
}
.hitbox-toggle-off {
opacity: 0.5;
}
.move-image {
}
.hitbox-image,
.hitbox-caption {
display: none;
}
/* End MoveData Hitbox Toggle */
/* MoveDataCargo CSS */
.movedata-container {
border: 0px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: stretch;
border: 1px solid var(--border-color-base);
}
.movedata-flex-image-container {
display: flex;
flex-flow: column;
justify-content: center;
align-content: flex-start;
padding: 3px;
text-align: center;
line-height: 1.3em;
border: 0x;
flex-basis: 180px;
flex-grow: 1;
flex-shrink: 1;
}
.movedata-flex-images {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: flex-start;
text-align: center;
flex-grow: 1;
flex-shrink: 1;
}
.movedata-flex-images > div > div{
flex-basis: 175px;
display: flex;
flex-flow: column;
justify-content: center;
}
.movedata-flex-information {
display: flex;
flex-flow: column nowrap;
flex-shrink: 0;
flex-grow: 1000;
flex-basis: 300px;
overflow-x: auto;
}
.movedata-flex-framedata {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: stretch;
}
.movedata-flex-framedata-name {
border: 0px;
display: flex;
flex-flow: row-reverse wrap;
justify-content: flex-start;
align-content: stretch;
flex-shrink: 1;
flex-grow: 1;
text-align: center;
flex-basis: 130px;
background-color: var(--background-color-dp-01);
}
.movedata-flex-framedata-name-item {
min-width: 130px;
padding: 3px 5px;
flex-grow: 1;
}
.movedata-flex-framedata-name-item-topright {
text-align: right;
}
.movedata-flex-framedata-name-item-middle {
display: inline-block;
vertical-align: middle;
}
.movedata-flex-framedata-table {
margin: 0 !important;
flex-shrink: 0;
flex-grow: 1000;
flex-basis: 300px;
}
.movedata-flex-information > p {
margin: 3px 5px;
}
.icongrid {
display:flex;
flex-wrap:wrap;
justify-content:center;
}
/* -----------------------------------------------------------------------------
Tier List Rules
----------------------------------------------------------------------------- */
@media (min-width: 900px) {
.tierList {
display: grid;
grid-template-columns: minmax(58px, auto) 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
border-radius: 4px;
font-size: 12px;
background-color: #121212;
max-width: fit-content;
}
}
@media (max-width: 899px) {
.tierList {
display: grid;
grid-template-columns: minmax(58px, auto) 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
border-radius: 4px;
font-size: 12px;
background-color: #121212;
width: 100%;
}
}
.tierHeader {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1em 0;
font-size: 14px;
font-weight: 600;
border-right: 2px solid #1a1a17;
color: black;
}
.tierGroup {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.tierUnderline {
border-bottom: 2px solid #1a1a17;
}
.generalUnderline {
border-bottom: 1px solid rgba(160, 160, 160, .4);
}
.tierGroup>div {
margin: 4px 10px;
}
.CharaInfoLabel {
text-align: right;
width: 50%;
vertical-align: text-top;
}
/* Movelist Toggles */
.movelist-toggles {
display: flex;
}
.movelist-toggle-button {
user-select: none;
flex-flow: row wrap;
padding: 2px 10px;
margin: 0 3px;
border-radius: 3px;
border: 1px solid black;
}
.movelist-toggle-off {
background-color: #121212;
}
.movelist-toggle-on {
background-color: #1ea8e8;
}
/* 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;
}
/* -----------------------------------------------------------------------------
Dynamic Table
----------------------------------------------------------------------------- */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
color: var(--color-base) !important;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
background-color: var(--background-color-dp-01) !important;
}
table.dataTable tbody tr {
background-color: var(--background-color-dp-00) !important;
}
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
background-color: var(--background-color-framed) !important;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
border: 0px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: var(--color-base) !important;
border: 1px solid #111 !important;
background-color: black !important;
background-image: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: var(--color-base) !important;
}
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: var(--background-color-dp-01) !important;
}
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: var(--background-color-dp-00) !important;
}