×
Create a new article
Write your page title here:
We currently have 1,288 articles on Historica of Lovely Fate. Type your article name above or click on one of the titles below and start writing!



Historica of Lovely Fate

Difference between revisions of "MediaWiki:Common.css"

m
(Have tables scroll their bodies independently on mobile devices instead of horizontally scrolling the main content)
Line 6: Line 6:
     empty-cells: show;
     empty-cells: show;
     margin: 1em 1em 1em 0; /*give it some breathing room around the table but stay left justified*/
     margin: 1em 1em 1em 0; /*give it some breathing room around the table but stay left justified*/
     overflow-x: scroll; /*on mobile devices, have the tables scroll independently of the main body content*/
 
     /*on mobile devices, have the tables scroll independently of the main body content https://stackoverflow.com/questions/19794211/horizontal-scroll-on-overflow-of-table*/
    display: block;
    overflow-x: auto;
    white-space: nowrap; /*keeps nice spacing within the tables*/
    /*these allow you to still horizontally center tables and prevent it from having undue width which might cover something else beside it*/
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: 0 auto;
}
}
.article-table td, .article-table th{
.article-table td, .article-table th{

Revision as of 06:51, 6 December 2021

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

.article-table{
    /*Tables that are embedded into the articles*/
    border-collapse: collapse; /*have the borders around td sections actually touch*/
    empty-cells: show;
    margin: 1em 1em 1em 0; /*give it some breathing room around the table but stay left justified*/

    /*on mobile devices, have the tables scroll independently of the main body content https://stackoverflow.com/questions/19794211/horizontal-scroll-on-overflow-of-table*/
    display: block;
    overflow-x: auto;
    white-space: nowrap; /*keeps nice spacing within the tables*/
    /*these allow you to still horizontally center tables and prevent it from having undue width which might cover something else beside it*/
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: 0 auto;
}
.article-table td, .article-table th{
    border-style: solid;
    border-width: 0.1em;
}
.article-short-table th, .article-short-table td{
    /*there are tables for resistances and character stats that are only two rows and looks silly with horizontal borders*/
    border-top: none;
    border-bottom: none;
}

.portable-infobox {
    border: solid 0.1em;
}