Toggle search
Toggle menu
1K
1.1K
35
7.5K
The Petit Planet Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
Browse history interactively
← Older edit
Changing how stylesheets are loaded: now uses ResourceLoader and TemplateStyles instead of @import
Added table text alignment and width classes
 
(8 intermediate revisions by the same user not shown)
Line 9: Line 9:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Avestan:wght@400;700&family=El+Messiri:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Avestan:wght@400;700&family=El+Messiri:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text:wght@200..700&display=swap');
/* Imports caching */
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:MessageBox.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Quote.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Recipe.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:CustomTabs.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Item.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Tooltip.css&action=raw&ctype=text/css");


/*=====================*
/*=====================*
Line 294: Line 284:
         color: var(--color-base);
         color: var(--color-base);
         text-decoration: none;
         text-decoration: none;
         background-color: var(--background-color-5);
         background-color: var(--background-color-5);
     }
     }
}
}
Line 301: Line 291:
     line-height: 125% !important;
     line-height: 125% !important;
     margin: 3px !important;
     margin: 3px !important;
     background-color: var(--background-color-2) !important;
     background-color: var(--background-color-2b) !important;
     border-color: transparent !important;
     border-color: transparent !important;
 
    min-width: 1.5em;
    text-align: center;
   
     &:hover {
     &:hover {
         border-color: var(--color-progressive) !important;
         border-color: var(--color-progressive) !important;
     }
     }
}
.wikitable.edittools > tr:nth-child(even) > td,
.wikitable.edittools > * > tr:nth-child(even) > td {
    background: var(--background-color-1);
}
.wikitable.edittools > tr > td a,
.wikitable.edittools > * > tr > td a {
    min-width: 1.5em;
}
.wikitable.edittools > tr > td a:hover,
.wikitable.edittools > * > tr > td a:hover {
    color: var(--color-progressive);
    text-decoration: none;
}


    & a:hover {
.wikitable.edittools > tr:nth-child(even) > th,
        color: var(--color-progressive);
.wikitable.edittools > * > tr:nth-child(even) > th {
        text-decoration: none;
    background: var(--background-color-2);
    }
}
}


Line 319: Line 327:
/* Background */
/* Background */
body {
body {
     background: var(--background-image) no-repeat fixed center center / cover !important;
     background-color: var(--background-color-0) !important;
}
}  


/* Wordmark */
/* Wordmark */
Line 328: Line 336:


.skin-theme-clientpref-day .mp-header-wordmark img {
.skin-theme-clientpref-day .mp-header-wordmark img {
    filter: invert(1);
  filter: invert(1) hue-rotate(180deg);
}
 
/* Hide mobile-only things on desktop (overridden in [[MediaWiki:Citizen.css]]) */
.mobileHide,
.mobile-only,
.no-desktop {
    display: none;
}
}


/* Tables */
/* Tables */
body:not(.ns-special) .wikitable, .article-table {
.wikitable {
     th {
    display: block;
        border: none;
    max-width: max-content;
        background-color: var(--background-color-1b);
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--background-color-0b);
    border-collapse: separate;
    border-spacing: 4px;
    border-radius: 10px;
    border-width: 0;
    padding: 2px;
}
 
.ns-special .wikitable {
    display: table;
}
 
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td,
.wikitable caption {
    border-radius: 8px;
    border-color: transparent;
    padding: 0.25em 0.5em;
}
 
.wikitable > tr > th,
.wikitable > * > tr > th {
     text-align: left;
    background: var(--background-color-3);
}
 
.wikitable--stripe > tr:nth-child(even) > th,
.wikitable--stripe > * > tr:nth-child(even) > th {
    background: var(--background-color-2b);
}
 
.wikitable > tr > td,
.wikitable > * > tr > td,
.wikitable.sortable >  tr:nth-child(odd) > td,
.wikitable.sortable > * >  tr:nth-child(odd) > td {
    background-color: var(--background-color-1b);
}
 
.wikitable--stripe >  tr:nth-child(odd) > td,
.wikitable--stripe > * >  tr:nth-child(odd) > td,
.wikitable.sortable > tr > td,
.wikitable.sortable > * > tr > td {
    background-color: var(--background-color-2b);
}
 
.wikitable caption {
    background: var(--background-color-3);
    margin: 4px 4px 0 4px;
}
 
.mw-collapsible-toggle-default::before,
.mw-collapsible-toggle-default::after {
    display: none;
}
 
.mw-collapsible-toggle-default .mw-collapsible-text {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
    border-radius: 6px;
    padding: 0.125em 0.375em;
    margin-left: 0.5em;
}
 
.mw-collapsible-toggle-default .mw-collapsible-text:hover {
    color: var(--color-accent-text);
}
 
/* Table text alignment */
#content .mw-parser-output {
    /* Header: left */
    .thl th,
    .thl1 th:nth-child(1),
    .thl2 th:nth-child(2),
    .thl3 th:nth-child(3),
    .thl4 th:nth-child(4),
    .thl5 th:nth-child(5),
    .thl6 th:nth-child(6),
    .thl7 th:nth-child(7),
    .thl8 th:nth-child(8),
    .thl9 th:nth-child(9),
    .thl10 th:nth-child(10),
    .thl11 th:nth-child(11),
    .thl12 th:nth-child(12),
    .thl13 th:nth-child(13),
    .thl14 th:nth-child(14),
    .thl15 th:nth-child(15),
    .thl16 th:nth-child(16),
    .thl17 th:nth-child(17),
    .thl18 th:nth-child(18),
    .thl19 th:nth-child(19),
    .thl20 th:nth-child(20) {
         text-align: left;
         text-align: left;
    }
    /* Header: center */
    .thc th,
    .thc1 th:nth-child(1),
    .thc2 th:nth-child(2),
    .thc3 th:nth-child(3),
    .thc4 th:nth-child(4),
    .thc5 th:nth-child(5),
    .thc6 th:nth-child(6),
    .thc7 th:nth-child(7),
    .thc8 th:nth-child(8),
    .thc9 th:nth-child(9),
    .thc10 th:nth-child(10),
    .thc11 th:nth-child(11),
    .thc12 th:nth-child(12),
    .thc13 th:nth-child(13),
    .thc14 th:nth-child(14),
    .thc15 th:nth-child(15),
    .thc16 th:nth-child(16),
    .thc17 th:nth-child(17),
    .thc18 th:nth-child(18),
    .thc19 th:nth-child(19),
    .thc20 th:nth-child(20) {
        text-align: center;
    }
    /* Header: right */
    .thr th,
    .thr1 th:nth-child(1),
    .thr2 th:nth-child(2),
    .thr3 th:nth-child(3),
    .thr4 th:nth-child(4),
    .thr5 th:nth-child(5),
    .thr6 th:nth-child(6),
    .thr7 th:nth-child(7),
    .thr8 th:nth-child(8),
    .thr9 th:nth-child(9),
    .thr10 th:nth-child(10),
    .thr11 th:nth-child(11),
    .thr12 th:nth-child(12),
    .thr13 th:nth-child(13),
    .thr14 th:nth-child(14),
    .thr15 th:nth-child(15),
    .thr16 th:nth-child(16),
    .thr17 th:nth-child(17),
    .thr18 th:nth-child(18),
    .thr19 th:nth-child(19),
    .thr20 th:nth-child(20) {
        text-align: right;
    }
    /* Header: top */
    .tht th,
    .tht1 th:nth-child(1),
    .tht2 th:nth-child(2),
    .tht3 th:nth-child(3),
    .tht4 th:nth-child(4),
    .tht5 th:nth-child(5),
    .tht6 th:nth-child(6),
    .tht7 th:nth-child(7),
    .tht8 th:nth-child(8),
    .tht9 th:nth-child(9),
    .tht10 th:nth-child(10),
    .tht11 th:nth-child(11),
    .tht12 th:nth-child(12),
    .tht13 th:nth-child(13),
    .tht14 th:nth-child(14),
    .tht15 th:nth-child(15),
    .tht16 th:nth-child(16),
    .tht17 th:nth-child(17),
    .tht18 th:nth-child(18),
    .tht19 th:nth-child(19),
    .tht20 th:nth-child(20) {
        vertical-align: top;
    }
    /* Header: middle */
    .thm th,
    .thm1 th:nth-child(1),
    .thm2 th:nth-child(2),
    .thm3 th:nth-child(3),
    .thm4 th:nth-child(4),
    .thm5 th:nth-child(5),
    .thm6 th:nth-child(6),
    .thm7 th:nth-child(7),
    .thm8 th:nth-child(8),
    .thm9 th:nth-child(9),
    .thm10 th:nth-child(10),
    .thm11 th:nth-child(11),
    .thm12 th:nth-child(12),
    .thm13 th:nth-child(13),
    .thm14 th:nth-child(14),
    .thm15 th:nth-child(15),
    .thm16 th:nth-child(16),
    .thm17 th:nth-child(17),
    .thm18 th:nth-child(18),
    .thm19 th:nth-child(19),
    .thm20 th:nth-child(20) {
        vertical-align: middle;
    }
    /* Header: bottom */
    .thb th,
    .thb1 th:nth-child(1),
    .thb2 th:nth-child(2),
    .thb3 th:nth-child(3),
    .thb4 th:nth-child(4),
    .thb5 th:nth-child(5),
    .thb6 th:nth-child(6),
    .thb7 th:nth-child(7),
    .thb8 th:nth-child(8),
    .thb9 th:nth-child(9),
    .thb10 th:nth-child(10),
    .thb11 th:nth-child(11),
    .thb12 th:nth-child(12),
    .thb13 th:nth-child(13),
    .thb14 th:nth-child(14),
    .thb15 th:nth-child(15),
    .thb16 th:nth-child(16),
    .thb17 th:nth-child(17),
    .thb18 th:nth-child(18),
    .thb19 th:nth-child(19),
    .thb20 th:nth-child(20) {
        vertical-align: bottom;
     }
     }


     td {
     /* Cell: left */
         border: none;
    .tdl td,
        background-color: var(--background-color-0b);
    .tdl1 td:nth-child(1),
    .tdl2 td:nth-child(2),
    .tdl3 td:nth-child(3),
    .tdl4 td:nth-child(4),
    .tdl5 td:nth-child(5),
    .tdl6 td:nth-child(6),
    .tdl7 td:nth-child(7),
    .tdl8 td:nth-child(8),
    .tdl9 td:nth-child(9),
    .tdl10 td:nth-child(10),
    .tdl11 td:nth-child(11),
    .tdl12 td:nth-child(12),
    .tdl13 td:nth-child(13),
    .tdl14 td:nth-child(14),
    .tdl15 td:nth-child(15),
    .tdl16 td:nth-child(16),
    .tdl17 td:nth-child(17),
    .tdl18 td:nth-child(18),
    .tdl19 td:nth-child(19),
    .tdl20 td:nth-child(20) {
         text-align: left;
    }
    /* Cell: center */
    .tdc td,
    .tdc1 td:nth-child(1),
    .tdc2 td:nth-child(2),
    .tdc3 td:nth-child(3),
    .tdc4 td:nth-child(4),
    .tdc5 td:nth-child(5),
    .tdc6 td:nth-child(6),
    .tdc7 td:nth-child(7),
    .tdc8 td:nth-child(8),
    .tdc9 td:nth-child(9),
    .tdc10 td:nth-child(10),
    .tdc11 td:nth-child(11),
    .tdc12 td:nth-child(12),
    .tdc13 td:nth-child(13),
    .tdc14 td:nth-child(14),
    .tdc15 td:nth-child(15),
    .tdc16 td:nth-child(16),
    .tdc17 td:nth-child(17),
    .tdc18 td:nth-child(18),
    .tdc19 td:nth-child(19),
    .tdc20 td:nth-child(20) {
        text-align: center;
     }
     }
      
     /* Cell: right */
     tr:nth-child(odd) {
    .tdr td,
        th {
     .tdr1 td:nth-child(1),
            background-color: var(--background-color-2);
    .tdr2 td:nth-child(2),
        }
    .tdr3 td:nth-child(3),
 
    .tdr4 td:nth-child(4),
        td {
    .tdr5 td:nth-child(5),
            background-color: var(--background-color-1);
    .tdr6 td:nth-child(6),
         }
    .tdr7 td:nth-child(7),
    .tdr8 td:nth-child(8),
    .tdr9 td:nth-child(9),
    .tdr10 td:nth-child(10),
    .tdr11 td:nth-child(11),
    .tdr12 td:nth-child(12),
    .tdr13 td:nth-child(13),
    .tdr14 td:nth-child(14),
    .tdr15 td:nth-child(15),
    .tdr16 td:nth-child(16),
    .tdr17 td:nth-child(17),
    .tdr18 td:nth-child(18),
    .tdr19 td:nth-child(19),
    .tdr20 td:nth-child(20) {
         text-align: right;
     }
     }
 
    /* Cell: top */
     & > caption + * th {
    .tdt td,
        background-color: var(--background-color-2b) !important;
    .tdt1 td:nth-child(1),
    .tdt2 td:nth-child(2),
    .tdt3 td:nth-child(3),
    .tdt4 td:nth-child(4),
    .tdt5 td:nth-child(5),
    .tdt6 td:nth-child(6),
     .tdt7 td:nth-child(7),
    .tdt8 td:nth-child(8),
    .tdt9 td:nth-child(9),
    .tdt10 td:nth-child(10),
    .tdt11 td:nth-child(11),
    .tdt12 td:nth-child(12),
    .tdt13 td:nth-child(13),
    .tdt14 td:nth-child(14),
    .tdt15 td:nth-child(15),
    .tdt16 td:nth-child(16),
    .tdt17 td:nth-child(17),
    .tdt18 td:nth-child(18),
    .tdt19 td:nth-child(19),
    .tdt20 td:nth-child(20) {
        vertical-align: top;
     }
     }
}
    /* Cell: middle */
 
    .tdm td,
.article-table {
    .tdm1 td:nth-child(1),
     th {
    .tdm2 td:nth-child(2),
         padding: 0.5em 0.75em;
    .tdm3 td:nth-child(3),
    .tdm4 td:nth-child(4),
    .tdm5 td:nth-child(5),
    .tdm6 td:nth-child(6),
    .tdm7 td:nth-child(7),
    .tdm8 td:nth-child(8),
    .tdm9 td:nth-child(9),
    .tdm10 td:nth-child(10),
    .tdm11 td:nth-child(11),
    .tdm12 td:nth-child(12),
    .tdm13 td:nth-child(13),
    .tdm14 td:nth-child(14),
    .tdm15 td:nth-child(15),
    .tdm16 td:nth-child(16),
    .tdm17 td:nth-child(17),
    .tdm18 td:nth-child(18),
    .tdm19 td:nth-child(19),
     .tdm20 td:nth-child(20) {
         vertical-align: middle;
     }
     }
 
    /* Cell: bottom */
     td {
    .tdb td,
        padding: padding: 0.25em 0.75em;
    .tdb1 td:nth-child(1),
    .tdb2 td:nth-child(2),
    .tdb3 td:nth-child(3),
    .tdb4 td:nth-child(4),
    .tdb5 td:nth-child(5),
    .tdb6 td:nth-child(6),
    .tdb7 td:nth-child(7),
    .tdb8 td:nth-child(8),
    .tdb9 td:nth-child(9),
    .tdb10 td:nth-child(10),
    .tdb11 td:nth-child(11),
    .tdb12 td:nth-child(12),
    .tdb13 td:nth-child(13),
    .tdb14 td:nth-child(14),
    .tdb15 td:nth-child(15),
     .tdb16 td:nth-child(16),
    .tdb17 td:nth-child(17),
    .tdb18 td:nth-child(18),
    .tdb19 td:nth-child(19),
    .tdb20 td:nth-child(20) {
        vertical-align: bottom;
     }
     }
}
}
/* Table width */
.w5 { width: 5%; }
.w10 { width: 10%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w33 { width: 33%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w66 { width: 66%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }


/* Template data */
/* Template data */
Line 437: Line 798:
  | STYLES |
  | STYLES |
  *========*/
  *========*/
/* For [[Template:Card/styles.css]] */
/* For [[Template:Quote/styles.css]] */
.card-image-container a.new,
blockquote.pull-quote:has(.pull-quote__source) {
.mini-card .card-image-container a.new {
     margin-top: 25px !important;
     background-image: var(--unknown-img);
}
}


.card-stars {
.pull-quote__source {
     pointer-events: none;
     width: fit-content;
}
}
Retrieved from "https://petitplanet.wiki/MediaWiki:Common.css"