MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
(sticky header css)
(removed unused skin code)
Line 9: Line 9:
     top: 0;
     top: 0;
}
}
/* This does not seem to work, possibly due to the absolute/relative hacking mess of timeless */
@media screen and (max-width: 1099px) and (min-width: 851px) {
.skin-timeless .jquery-tablesorter > thead,
.skin-timeless .mw-sticky-header > thead {
top: 3.125em;
}
}
@media screen and (min-width: 1100px) {
.skin-timeless .jquery-tablesorter > thead,
.skin-timeless .mw-sticky-header > thead {
top: 6em;
}
}


.jquery-tablesorter > tfoot,
.jquery-tablesorter > tfoot,

Revision as of 16:56, 7 December 2020

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

/* 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 :( */

body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }

.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;	
}