No edit summary |
(Hopefully fixed Tooltips overflowing the sides of the page when sufficiently long and allowed the content to wrap and make the tooltip taller.) |
||
| Line 370: | Line 370: | ||
visibility: hidden; | visibility: hidden; | ||
min-width: 100px; | min-width: 100px; | ||
max-width: 600px; | |||
padding: 12px 14px; | padding: 12px 14px; | ||
| Line 380: | Line 381: | ||
border-radius: 4px; | border-radius: 4px; | ||
font-weight: normal; | font-weight: normal; | ||
font-style: initial; | font-style: initial; | ||
Revision as of 11:22, 15 May 2024
/* 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 {
font-weight: bold;
font-style: italic;
text-align: center;
}
/* 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 */
div#content {
box-shadow: 0 0 5px #000;
}
.srkbox {
border-radius: 2px;
margin:5px;
box-shadow: 0 0 5px #000;
}
.srkbtn, .sc-btn {
color: #fff !important;
background: #2c2c2c;
border: 1px solid #474747;
border-radius: 2px;
display: inline-block !important;
text-align: center;
text-decoration: none;
font-weight: bold;
padding: 0.2rem 0.4rem;
margin: 0.2rem;
}
.srkbtn > a, .sc-btn > a {
color: #fff !important;
}
.srkbtn:hover, .sc-btn:hover {
background: #039BE5;
border-color: #039BE5;
transition: 0.2s;
}
.selflink > .srkbtn, .selflink > .sc-btn {
background: #039BE5;
border-color: #039BE5;
}
.gamebtn {
background-color: #121212;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 4px 8px 4px;
border-radius: 8px;
margin: 5px;
}
.gamebtn:hover {
background-color: #039BE5;
}
/* 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: var(--color-surface-0);
border-bottom-color: var(--color-surface-2);
border-right-color: var(--color-surface-2);
border-top-color: var(--color-surface-2);
border-style: solid;
margin: 0.8rem auto 0.8rem auto;
width: 100%;
max-width: 800px;
border-width: 1px;
border-radius: 8px;
}
.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
}
/* -----------------------------------------------------------------------------
Tooltip CSS from gbf.wiki
----------------------------------------------------------------------------- */
.tooltip {
position: relative;
display: inline;
border-bottom: 1px dashed black;
}
.tooltiptext {
visibility: hidden;
min-width: 100px;
max-width: 600px;
padding: 12px 14px;
position: absolute;
left: 50%;
bottom: calc(20px + 100%);
z-index: 99999;
background: #353535;
border-radius: 4px;
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 - changed to new style */
.sc-rounded, .srk-gradient {
background: #121212;
border-radius: 8px;
border: 1px solid #363636;
}
/* -----------------------------------------------------------------------------
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: 8px 4px;
text-align: center;
border: 1px solid #2c2c2c;
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 {
background: #2c2c2c;
border: 1px solid var(--color-surface-2);
display: flex;
flex-flow: row-reverse wrap;
justify-content: flex-start;
align-content: center;
flex-shrink: 1;
flex-grow: 1;
text-align: center;
flex-basis: 130px;
}
.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;
}
.sc-img-responsive {
max-width: 100% !important;
height: auto !important;
}