Difference between revisions of "MediaWiki:Common.css"

From Power Wiki
Jump to navigation Jump to search
(Created page with "→‎CSS placed here will be applied to all skins: /* This is the CSS for all skins (for all users) on MediaWiki.org. SECTIONS: 1. Indication of namespaces 2. Color classe...")
 
(Replaced content with "→‎CSS used for https://www.mediawiki.org/wiki/MediaWiki/Homepage_improvements_2018 :: .mainpage_row { display: flex; flex-direction: row; flex-flow: row wrap; justi...")
Tag: Replaced
Line 1: Line 1:
−
/* CSS placed here will be applied to all skins */
+
/* CSS used for https://www.mediawiki.org/wiki/MediaWiki/Homepage_improvements_2018 : */
−
 
+
.mainpage_row {
−
/*
+
display: flex;
−
This is the CSS for all skins (for all users) on MediaWiki.org.
+
flex-direction: row;
−
 
+
flex-flow: row wrap;
−
SECTIONS:
+
justify-content: space-between;
−
1. Indication of namespaces
+
padding: 0;
−
2. Color classes for content
+
margin: 0 -5px 0 -5px;
−
3. Special pages
 
−
4. Main page styling
 
−
5. Wikitables, warnings, and other such stylings
 
−
6. Templates
 
−
7. Some other small things
 
−
*/
 
−
 
 
−
 
 
−
/**
 
−
* 1. INDICATION OF NAMESPACES
 
−
* -------------------------------------------------
 
−
*/
 
−
 
 
−
/* #content for Vector and Monobook, #mw-content for Timeless */
 
−
 
 
−
/* NS Help (Public Domain icon) */
 
−
.action-view.ns-12 #bodyContent {
 
−
    background-image: url(//upload.wikimedia.org/wikipedia/commons/6/67/PD-icon-faded.png);
 
−
    background-repeat: no-repeat;
 
−
    /* @noflip */ background-position: right 5em;
 
−
}
 
−
 
 
−
/**
 
−
* 2. COLOR CLASSES FOR CONTENT
 
−
* -------------------------------------------------
 
−
*/
 
−
 
 
−
/* Border colors */
 
−
.borderc1 {
 
−
    border-color: #e9e9e9;
 
−
    border-width: thin;
 
−
}
 
−
 
 
−
.borderc2 {
 
−
    border-color: #a2a9b1;
 
−
    border-width: thin;
 
−
}
 
−
 
 
−
.borderc3 {
 
−
    border-color: #72777d;
 
−
    border-width: thin;
 
−
}
 
−
 
 
−
.borderc4 {
 
−
    border-color: #000000;
 
−
    border-width: thin;
 
−
}
 
−
 
 
−
.borderc5 {
 
−
    border-color: #c00000;
 
−
    border-width: thin;
 
−
}
 
−
 
 
−
.borderc6 {
 
−
    border-color: #025e9d;
 
−
    border-width: thin;
 
−
}
 
−
 
 
−
.borderc7 {
 
−
    border-color: #008040;
 
−
    border-width: thin;
 
−
}
 
−
 
 
−
.borderc8 {
 
−
    border-color: #ffcc33;
 
−
    border-width: thin;
 
−
}
 
−
/* Used by [[Template:Welcome]]. */
 
−
 
 
−
/* Background colors */
 
−
.backgroundc1 {
 
−
    background-color: #ffffff;
 
−
}
 
−
/* Used by [[Template:Welcome]]. */
 
−
.backgroundc2 {
 
−
    background-color: #f8f9fa;
 
−
}
 
−
 
 
−
.backgroundc3 {
 
−
    background-color: #eaecf0;
 
−
}
 
−
 
 
−
.backgroundc4 {
 
−
    background-color: #e0e0e0;
 
−
}
 
−
 
 
−
.backgroundc5 {
 
−
    background-color: #d2d2d2;
 
−
}
 
−
 
 
−
.backgroundc6 {
 
−
    background-color: #b7b7b7;
 
−
}
 
−
 
 
−
.backgroundc7 {
 
−
    background-color: #a3a3a3;
 
−
}
 
−
 
 
−
.backgroundc8 {
 
−
    background-color: #444455;
 
−
}
 
−
 
 
−
/**
 
−
* 3. SPECIAL PAGES
 
−
* -------------------------------------------------
 
−
*/
 
−
 
 
−
/* Consistent special page navigation */
 
−
.SpecialPageInfo {
 
−
    background-color: #f8f9fa;
 
−
    background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/8/89/Exquisite-khelpcenter.png/35px-Exquisite-khelpcenter.png);
 
−
    background-position: 0.8em 0.5em;
 
−
    background-repeat: no-repeat;
 
−
    padding: 0.3em 0.5em 0.3em 5.0em;
 
−
    border-color: #025e9d;
 
−
    border-width: 1px;
 
−
    border-style: solid;
 
−
    border-bottom-width: medium;
 
−
    margin-bottom: 1em;
 
−
}
 
−
 
 
−
.mw-viewprevnext {
 
−
    display: block;
 
−
    border: 1px solid #c8ccd1;
 
−
    background-color: #f9f9f2;
 
−
    padding: 0.2em 0.4em;
 
−
}
 
−
 
 
−
/*
 
−
* Hide elements on the main page.
 
−
*/
 
−
.page-MediaWiki #lastmod,
 
−
.page-MediaWiki #siteSub,
 
−
.page-MediaWiki #contentSub,
 
−
.page-MediaWiki .subtitle,
 
−
.page-MediaWiki #jump-to-nav,
 
−
.page-MediaWiki .firstHeading {
 
−
    display: none;
 
−
}
 
−
 
 
−
/**
 
−
* 5. WIKITABLES, WARNINGS AND OTHER SUCH STYLINGS
 
−
* -------------------------------------------------
 
−
*/
 
−
 
 
−
/* Custom h* styles (blue headings) */
 
−
.wikitable td.hl3,
 
−
.wikitable th.hl3 {
 
−
    background-color: #8da7d6;
 
−
}
 
−
 
 
−
.wikitable td.hl1,
 
−
.wikitable th.hl1 {
 
−
    background: #c5d8fc;
 
−
}
 
−
 
 
−
.wikitable td.hl2,
 
−
.wikitable th.hl2 {
 
−
    background: #a7c1f2;
 
−
}
 
−
 
 
−
/* Make entire table valign=top, to replace the |valign=top| on every cell. */
 
−
.vatop tr,
 
−
tr.vatop,
 
−
.vatop td,
 
−
.vatop th {
 
−
    vertical-align: top;
 
−
}
 
−
 
 
−
/* General purpose "pretty (data) tables" */
 
−
table.datatable tr:hover {
 
−
    background-color: #a7d7f9;
 
−
}
 
−
 
 
−
/* Major warning - used on the main page template to warn against editing carelessly, but can be used elsewhere as well */
 
−
.majorwarning {
 
−
    background: #fef6e7;
 
−
    padding: 0.3em;
 
−
    text-align: center;
 
−
    font-size: 125%;
 
−
    border: 1px solid #fc3;
 
−
}
 
−
 
 
−
/* Page headings used throughout the wiki (though not very much at the time of writing…) */
 
−
.page-notice,
 
−
.page-warning {
 
−
    border-width: 1px;
 
−
    border-style: solid;
 
−
    padding: 0.3em 0.5em;
 
−
    margin-bottom: 1em;
 
−
    width: 95%;
 
−
    margin-left: auto;
 
−
    margin-right: auto;
 
−
    text-align: center;
 
−
}
 
−
 
 
−
/* Informative notices at the top of pages (blue) */
 
−
.page-notice {
 
−
    background-color: #f8f9fa;
 
−
    border-color: #025e9d;
 
−
    text-align: left;
 
−
}
 
−
 
 
−
/* Warning information at the top of pages (red) */
 
−
.page-warning {
 
−
    background-color: #ffffff;
 
−
    border-color: #c51919;
 
−
    border-width: 2px;
 
−
}
 
−
 
 
−
.pw-head {
 
−
    color: #c51919;
 
−
    font-weight: bold;
 
−
}
 
−
 
 
−
/**
 
−
* Code conventions examples
 
−
* Usage: [[mw:CC/JS]], [[mw:CC/CSS]]
 
−
* <syntaxhighlight lang=".." class="tpl-code-positive"></syntaxhighlight>
 
−
*/
 
−
.tpl-code-positive.mw-highlight pre,
 
−
.tpl-code-negative.mw-highlight pre {
 
−
    /* Reset default browser margin of pre (usually margin: 1em 0;)
 
−
    to be all around */
 
−
    margin: 1em;
 
−
}
 
−
/* Use a double selector to override mw-highlight default background color */
 
−
.tpl-code-positive.mw-highlight {
 
−
    background: #fff;
 
−
    border: 2px solid #00af89;
 
−
}
 
−
 
 
−
.tpl-code-negative.mw-highlight {
 
−
    background: #fff;
 
−
    border: 2px solid #d33;
 
−
}
 
−
 
 
−
/**
 
−
* 6. TEMPLATES
 
−
* -------------------------------------------------
 
−
*/
 
−
 
 
−
/* [[Template:Extension]], [[Template:Skin]] */
 
−
.tpl-infobox {
 
−
    box-sizing: border-box;
 
−
    border: 2px solid #a2a9b1;
 
−
    width: 280px;
 
−
    /* @noflip */ clear: right;
 
−
    /* @noflip */ float: right;
 
−
    margin: 0 0 0.5em 0.5em;
 
−
    border-collapse: collapse;
 
−
    background-color: white;
 
−
}
 
−
 
 
−
    .tpl-infobox td {
 
−
        border: 2px none #a2a9b1;
 
−
        padding: 0.2em 0.5em;
 
−
        border-bottom: 1px solid #f0f0f0 !important;
 
−
    }
 
−
 
 
−
.tpl-infobox-header {
 
−
    background-color: #a2a9b1;
 
−
    color: white;
 
−
    text-align: left;
 
−
}
 
−
 
 
−
    .tpl-infobox-header td {
 
−
        padding-top: 0.5em;
 
−
    }
 
−
 
 
−
.ext-infobox-header img {
 
−
    padding: 0 0.2em 0 0.5em;
 
−
}
 
−
 
 
−
.ext-status-unstable,
 
−
.ext-status-unstable td {
 
−
    border-color: #d33;
 
−
}
 
−
 
 
−
    .ext-status-unstable .ext-infobox-header {
 
−
        background-color: #d33;
 
−
        color: #fff;
 
−
    }
 
−
 
 
−
        .ext-status-unstable .ext-infobox-header a {
 
−
            color: #fff;
 
−
        }
 
−
 
 
−
.ext-status-experimental,
 
−
.ext-status-experimental td {
 
−
    border-color: #ff4500;
 
−
}
 
−
 
 
−
    .ext-status-experimental .ext-infobox-header {
 
−
        background-color: #ff4500;
 
−
    }
 
−
 
 
−
.ext-status-beta,
 
−
.ext-status-beta td {
 
−
    border-color: #fc3;
 
−
}
 
−
 
 
−
    .ext-status-beta .ext-infobox-header {
 
−
        color: #000;
 
−
        background-color: #fc3;
 
−
    }
 
−
 
 
−
.ext-status-stable,
 
−
.ext-status-stable td {
 
−
    border-color: #00af89;
 
−
}
 
−
 
 
−
    .ext-status-stable .ext-infobox-header {
 
−
        background-color: #00af89;
 
−
    }
 
−
 
 
−
        .ext-status-stable .ext-infobox-header a {
 
−
            color: #fff;
 
−
        }
 
−
 
 
−
.ext-status-unmaintained,
 
−
.ext-status-unmaintained td {
 
−
    border-color: #ac6600;
 
−
}
 
−
 
 
−
    .ext-status-unmaintained .ext-infobox-header {
 
−
        background-color: #ac6600;
 
−
    }
 
−
 
 
−
        .ext-status-unmaintained .ext-infobox-header a {
 
−
            color: #fff;
 
−
        }
 
−
 
 
−
.skin-infobox,
 
−
.skin-infobox td {
 
−
    border-color: #a7d7f9;
 
−
}
 
−
 
 
−
.skin-infobox-header {
 
−
    color: #000;
 
−
    background: #e2f4ff;
 
−
}
 
−
 
 
−
/* [[Template:See also]], [[Template:rellink]] etc. */
 
−
.rellink,
 
−
.dablink,
 
−
.mw-tpl-rellink {
 
−
    font-style: italic;
 
−
    padding-bottom: 0.4em;
 
−
    padding-left: 0;
 
−
    margin-bottom: 0.4em;
 
−
    color: #555;
 
−
    border-bottom: 1px solid #ccc;
 
−
}
 
−
 
 
−
/* [[Template:Notice]] */
 
−
.block-note {
 
−
    background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/6/60/Bulbgraph.png/18px-Bulbgraph.png);
 
−
    background-repeat: no-repeat;
 
−
}
 
−
/*
 
−
* Using block-contents in the hope that it can apply to all block-level warning templates,
 
−
* with different images applied as backgrounds to the wrapping DIV.
 
−
*/
 
−
.block-contents {
 
−
    display: block;
 
−
    padding-left: 20px;
 
−
}
 
−
 
 
−
/* [[Template:Documentation]] */
 
−
.template-documentation {
 
−
    clear: both;
 
−
    margin: 1em 0 0 0;
 
−
    border: 1px solid #aaa;
 
−
    background-color: #ecfcf4;
 
−
    padding: 5px;
 
−
}
 
−
 
 
−
/* [[Template:Navbox]] */
 
−
.navbox {
 
−
    /* Navbox container style */
 
−
    border: 1px solid #aaa;
 
−
    width: 100%;
 
−
    margin: auto;
 
−
    clear: both;
 
−
    font-size: 88%;
 
−
    text-align: center;
 
−
    padding: 1px;
 
−
}
 
−
 
 
−
.navbox-inner,
 
−
.navbox-subgroup {
 
−
    width: 100%;
 
−
}
 
−
 
 
−
table.navbox + table.navbox {
 
−
    /* Single pixel border between adjacent navboxes */
 
−
    margin-top: -1px;
 
−
    /* (doesn't work for IE6, but that's okay) */
 
−
}
 
−
 
 
−
.navbox th,
 
−
.navbox-title,
 
−
.navbox-abovebelow {
 
−
    text-align: center;
 
−
    /* Title and above/below styles */
 
−
    padding-left: 1em;
 
−
    padding-right: 1em;
 
−
}
 
−
 
 
−
th.navbox-group {
 
−
    /* Group style */
 
−
    white-space: nowrap;
 
−
    /* @noflip */
 
−
    text-align: right;
 
−
}
 
−
 
 
−
.navbox,
 
−
.navbox-subgroup {
 
−
    background: #fdfdfd;
 
−
}
 
−
 
 
−
.navbox-list {
 
−
    /* Must match background color */
 
−
    border-color: #fdfdfd;
 
−
}
 
−
 
 
−
.navbox th,
 
−
.navbox-title {
 
−
    /* Level 1 color */
 
−
    background: #eaeeff;
 
−
}
 
−
 
 
−
.navbox-abovebelow,
 
−
th.navbox-group,
 
−
.navbox-subgroup .navbox-title {
 
−
    /* Level 2 color */
 
−
    background: #ddddff;
 
 
}
 
}
−
 
+
.mainpage_box {
−
.navbox-subgroup .navbox-group,
+
flex: 1;
−
.navbox-subgroup .navbox-abovebelow {
+
margin: 5px;
−
    /* Level 3 color */
+
min-width: 210px;
−
    background: #e6e6ff;
+
border: 1px solid #CCC;
 +
padding: 0 10px 10px 10px;
 +
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
 
}
 
}
−
 
+
.mainpage_box h3 {
−
.navbox-even {
+
/* Reset padding so is equal across skins */
−
    /* Even row striping */
+
padding: 0;
−
    background: #f7f7f7;
+
margin: 0.5em 0;
 
}
 
}
−
 
+
.mainpage_box h3 .header_icon {
−
.navbox-odd {
+
float: left;
−
    /* Odd row striping */
+
margin-right: 5px;
−
    background: transparent;
 
 
}
 
}
−
 
+
.mainpage_box .items {
−
.navbox .hlist td dl,
+
border-top: 1px solid #CCC;
−
.navbox .hlist td ol,
+
padding-top: 0.5em;
−
.navbox .hlist td ul,
 
−
.navbox td.hlist dl,
 
−
.navbox td.hlist ol,
 
−
.navbox td.hlist ul {
 
−
    /* Adjust hlist padding in navboxes */
 
−
    padding: 0.125em 0;
 
 
}
 
}
−
 
+
.mainpage_box p:last-child {
−
.navbox .hlist dd,
+
margin-bottom: 0;
−
.navbox .hlist dt,
 
−
.navbox .hlist li {
 
−
    /* Nowrap list items in navboxes */
 
−
    white-space: nowrap;
 
 
}
 
}
−
 
+
.mainpage_boxcontents_small {
−
    .navbox .hlist dd dl,
+
font-size: 95%;
−
    .navbox .hlist dt dl,
 
−
    .navbox .hlist li ol,
 
−
    .navbox .hlist li ul {
 
−
        /* But allow parent list items to be wrapped */
 
−
        white-space: normal;
 
−
    }
 
−
 
 
−
ol + table.navbox,
 
−
ul + table.navbox {
 
−
    /* Prevent lists from clinging to navboxes */
 
−
    margin-top: 0.5em;
 
 
}
 
}
−
 
+
/* Style the "other languages" box the same way as other boxes on the main page */
−
/* [[Template:Navbar]] */
+
.mw-pt-languages {
−
.navbar {
+
display: block;
−
    display: inline;
+
background: none;
−
    font-size: 88%;
+
border: 1px solid #CCC;
−
    font-weight: normal;
+
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
 +
width: auto;
 
}
 
}
−
 
+
.mw-pt-languages-label {
−
    .navbar ul {
+
background: none;
−
        display: inline;
+
border-right: none;
−
        white-space: nowrap;
 
−
    }
 
−
 
 
−
    .navbar li {
 
−
        word-spacing: -0.125em;
 
−
    }
 
−
/* Navbar styling when nested in navbox */
 
−
.navbox .navbar {
 
−
    display: block;
 
−
    font-size: 100%;
 
−
}
 
−
 
 
−
.navbox-title .navbar {
 
−
    /* @noflip */
 
−
    float: left;
 
−
    /* @noflip */
 
−
    text-align: left;
 
−
    /* @noflip */
 
−
    margin-right: 0.5em;
 
−
    width: 6em;
 
−
}
 
−
/* [[Template:Cmd]] */
 
−
.cmd:before {
 
−
    content: "$ ";
 
−
    color: #246;
 
−
}
 
−
 
 
−
/**
 
−
* 7. SOME OTHER SMALL THINGS
 
−
* -------------------------------------------------
 
−
*/
 
−
 
 
−
/* Allow people to optionally wrap lines in source listings */
 
−
div.wrapPreLines pre {
 
−
    white-space: pre-wrap;
 
−
}
 
−
 
 
−
/* Give a bit of space to the TOC */
 
−
#toc {
 
−
    margin: 1em 0;
 
−
}
 
−
 
 
−
/*
 
−
* 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.
 
−
* Used in [[Template:TOC]]
 
−
*/
 
−
.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;
 
−
}
 
−
 
 
−
/* make the list of references look smaller and highlight clicked reference in blue */
 
−
ol.references {
 
−
    font-size: 100%;
 
−
}
 
−
 
 
−
.references-small {
 
−
    font-size: 90%;
 
−
}
 
−
 
 
−
ol.references > li:target {
 
−
    background-color: #ddeeff;
 
−
}
 
−
 
 
−
sup.reference:target {
 
−
    background-color: #ddeeff;
 
−
}
 
−
 
 
−
 
 
−
/*
 
−
* Styling for links generated by [[MediaWiki:Edittools]]
 
−
* @source www.mediawiki.org/wiki/Extension:CharInsert#Styling
 
−
* @updated 2012-02-29
 
−
*/
 
−
.mw-charinsert-buttons {
 
−
    margin-top: 10px;
 
−
    border: 1px solid #a2a9b1;
 
−
    padding: 1px;
 
−
    text-align: center;
 
−
    font-size: 110%;
 
−
}
 
−
 
 
−
    .mw-charinsert-buttons a {
 
−
        color: black;
 
−
        background-color: #cde !important;
 
−
        font-weight: bold;
 
−
        font-size: .9em;
 
−
        text-decoration: none;
 
−
        border: thin #069 outset;
 
−
        padding: 0 .1em .1em;
 
−
    }
 
−
 
 
−
        .mw-charinsert-buttons a:hover,
 
−
        .mw-charinsert-buttons a:active {
 
−
            background-color: #bcd;
 
−
            border-style: inset;
 
−
        }
 
−
 
 
−
.client-js .mw-edittools-section {
 
−
    display: inline;
 
−
}
 
−
 
 
−
    .client-js .mw-edittools-section input[type="button"] {
 
−
        font-size: 0.9em;
 
−
        padding-left: 1px;
 
−
        padding-right: 1px;
 
−
        margin-left: 1px;
 
−
    }
 
−
 
 
−
/* from [[User:Splarka/Help:Linked images]] */
 
−
.imagelink_wikilogo a {
 
−
    width: 135px;
 
−
    height: 135px;
 
−
    display: block;
 
−
    text-decoration: none;
 
−
    background-image: url(//upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png);
 
−
}
 
−
 
 
−
/*
 
−
* Infoboxes
 
−
*/
 
−
.infobox {
 
−
    float: right;
 
−
    clear: right;
 
−
    margin-bottom: 0.5em;
 
−
    margin-left: 1em;
 
−
    padding: 0.2em;
 
−
    border: 1px solid #AAA;
 
−
    background: #f8f9fa;
 
−
    color: black;
 
−
}
 
−
 
 
−
    .infobox td,
 
−
    .infobox th {
 
−
        vertical-align: top;
 
−
    }
 
−
 
 
−
    .infobox caption {
 
−
        margin-left: inherit;
 
−
        font-size: larger;
 
−
    }
 
−
 
 
−
    .infobox.bordered {
 
−
        border-collapse: collapse;
 
−
    }
 
−
 
 
−
        .infobox.bordered td,
 
−
        .infobox.bordered th {
 
−
            border: 1px solid #AAA;
 
−
        }
 
−
 
 
−
        .infobox.bordered .borderless td,
 
−
        .infobox.bordered .borderless th {
 
−
            border: 0;
 
−
        }
 
−
 
 
−
/*
 
−
* Apparently the namespaces parameter
 
−
* for inputbox forces a checkbox.
 
−
* Let's hide it in the API sidebar
 
−
*/
 
−
.mw-inputbox-hideapicheck label[for="mw-inputbox-ns104"],
 
−
#mw-inputbox-ns104 {
 
−
    display: none;
 
−
}
 
−
 
 
−
/* Testing for code review */
 
−
div.mw-wordcloud {
 
−
    width: 100%;
 
−
    text-align: justify;
 
−
}
 
−
 
 
−
.mw-wordcloud-size-1 {
 
−
    color: #222;
 
−
    font-size: 2.4em;
 
−
}
 
−
 
 
−
.mw-wordcloud-size-2 {
 
−
    color: #333;
 
−
    font-size: 2.2em;
 
−
}
 
−
 
 
−
.mw-wordcloud-size-3 {
 
−
    color: #444;
 
−
    font-size: 2.0em;
 
−
}
 
−
 
 
−
.mw-wordcloud-size-4 {
 
−
    color: #555;
 
−
    font-size: 1.8em;
 
−
}
 
−
 
 
−
.mw-wordcloud-size-5 {
 
−
    color: #666;
 
−
    font-size: 1.6em;
 
−
}
 
−
 
 
−
.mw-wordcloud-size-6 {
 
−
    color: #777;
 
−
    font-size: 1.4em;
 
−
}
 
−
 
 
−
.mw-wordcloud-size-7 {
 
−
    color: #888;
 
−
    font-size: 1.2em;
 
−
}
 
−
 
 
−
.mw-wordcloud-size-8 {
 
−
    color: #999;
 
−
    font-size: 1em;
 
−
}
 
−
 
 
−
.mw-wordcloud-size-9 {
 
−
    color: #aaa;
 
−
    font-size: 0.8em;
 
−
    letter-spacing: 3px;
 
−
}
 
−
 
 
−
.mw-wordcloud-size-10,
 
−
.mw-wordcloud-size-0 {
 
−
    color: #bbb;
 
−
    font-size: 0.8em;
 
−
}
 
−
 
 
−
/* @todo FIXME: document me :) */
 
−
#signuptopbox li {
 
−
    float: left;
 
−
    list-style: none;
 
−
    font-family: sans-serif;
 
−
}
 
−
 
 
−
#signuptopbox li {
 
−
    color: #3ca7d4;
 
−
    background: #c2e1f9;
 
−
    line-height: 2.8em;
 
−
    margin-right: .25em;
 
−
    padding-right: .5em;
 
−
}
 
−
 
 
−
    #signuptopbox li.pr-active,
 
−
    #signuptopbox li.pr-active div {
 
−
        color: #67ca36;
 
−
        background: #d4f9c2;
 
−
        border-color: #fff #fff #fff #67ca36;
 
−
    }
 
−
 
 
−
    #signuptopbox li div {
 
−
        width: 0;
 
−
        height: 0;
 
−
        border-color: #fff #fff #fff #3CA7D4;
 
−
        border-style: solid;
 
−
        border-width: 1.4em .3em 1.4em 1.4em;
 
−
        float: left;
 
−
    }
 
−
 
 
−
    #signuptopbox li span.pr-number {
 
−
        display: block;
 
−
        width: 1.8em;
 
−
        line-height: 1.8em;
 
−
        background: #3ca7d4;
 
−
        color: #c2e1f9;
 
−
        text-align: center;
 
−
        margin: .5em;
 
−
        -webkit-border-radius: 50%;
 
−
        -moz-border-radius: 50%;
 
−
        -ms-border-radius: 50%;
 
−
        -o-border-radius: 50%;
 
−
        border-radius: 50%;
 
−
        font-weight: 600;
 
−
        float: left;
 
−
    }
 
−
 
 
−
    #signuptopbox li.pr-active span.pr-number {
 
−
        background: #67ca36;
 
−
        color: #d4f9c2;
 
−
    }
 
−
 
 
−
    #signuptopbox li span {
 
−
        float: left;
 
−
    }
 
−
 
 
−
    #signuptopbox li.pr-spacer {
 
−
        padding: 0;
 
−
    }
 
−
 
 
−
/* Breadcrumb code */
 
−
.breadcrumb {
 
−
    list-style: none;
 
−
    overflow: hidden;
 
−
    font: 14px Helvetica, Arial, sans-serif;
 
−
}
 
−
 
 
−
    .breadcrumb li {
 
−
        float: left;
 
−
        margin-bottom: 0;
 
−
    }
 
−
 
 
−
        .breadcrumb li a {
 
−
            color: white;
 
−
            text-decoration: none;
 
−
            padding: 10px 0 10px 45px;
 
−
            position: relative;
 
−
            display: block;
 
−
            float: left;
 
−
        }
 
−
 
 
−
            .breadcrumb li a:after {
 
−
                content: " ";
 
−
                display: block;
 
−
                width: 0;
 
−
                height: 0;
 
−
                /* Go big on the size, and let overflow hide */
 
−
                border-top: 50px solid transparent;
 
−
                border-bottom: 50px solid transparent;
 
−
                position: absolute;
 
−
                top: 50%;
 
−
                margin-top: -50px;
 
−
                left: 100%;
 
−
                z-index: 2;
 
−
            }
 
−
 
 
−
            .breadcrumb li a:before {
 
−
                content: " ";
 
−
                display: block;
 
−
                width: 0;
 
−
                height: 0;
 
−
                border-top: 50px solid transparent;
 
−
                border-bottom: 50px solid transparent;
 
−
                border-left: 31px solid white;
 
−
                position: absolute;
 
−
                top: 50%;
 
−
                margin-top: -50px;
 
−
                margin-left: 1px;
 
−
                left: 100%;
 
−
                z-index: 1;
 
−
            }
 
−
 
 
−
        .breadcrumb li:first-child a {
 
−
            padding-left: 20px;
 
−
        }
 
−
 
 
−
.currentcrumb a {
 
−
    background: #069;
 
−
}
 
−
 
 
−
    .currentcrumb a:after {
 
−
        border-left: 30px solid #069;
 
−
    }
 
−
 
 
−
    .currentcrumb a:hover,
 
−
    .prevcrumb a:hover,
 
−
    .nextcrumb a:hover {
 
−
        background: #002d44;
 
−
    }
 
−
 
 
−
        .currentcrumb a:hover:after,
 
−
        .prevcrumb a:hover:after,
 
−
        .nextcrumb a:hover:after {
 
−
            border-left-color: #002d44 !important;
 
−
        }
 
−
 
 
−
.prevcrumb a {
 
−
    background: #396;
 
−
}
 
−
 
 
−
    .prevcrumb a:after {
 
−
        border-left: 30px solid #396;
 
−
    }
 
−
 
 
−
.nextcrumb a {
 
−
    background: #999;
 
−
}
 
−
 
 
−
    .nextcrumb a:after {
 
−
        border-left: 30px solid #999;
 
−
    }
 
−
 
 
−
/* To facilitate rtl translations */
 
−
#bodyContent .table-RTL a {
 
−
    background: none;
 
−
    padding-right: 0;
 
−
}
 
−
 
 
−
#bodyContent .table-RTL ul {
 
−
    margin-right: 10px;
 
−
    display: table;
 
−
}
 
−
 
 
−
/* Fix annoying bug where the "date" column in the LQT sometimes
 
−
* is two rows because of the date being too long even through there is
 
−
* enough space (otherwise the browser makes it's own decision on where to cut)
 
−
*/
 
−
.lqt_toc th:nth-child(3),
 
−
.lqt_toc td:nth-child(3) {
 
−
    white-space: nowrap;
 
−
}
 
−
 
 
−
.persian {
 
−
    font-family: Tahoma;
 
−
}
 
−
 
 
−
/* Fonts for Persian language for consistency with other Wikimedia wikis */
 
−
:lang(fa) {
 
−
    font-family: Tahoma, 'Iranian Sans', 'DejaVu Sans', sans-serif;
 
−
}
 
−
 
 
−
/*
 
−
* Manual:Database_layout
 
−
*/
 
−
.mwmanual-dbview-box img {
 
−
    opacity: 0.5;
 
−
}
 
−
 
 
−
.mwmanual-dbview-box:hover img {
 
−
    opacity: 0.8;
 
−
}
 
−
 
 
−
.mwmanual-dbview-link {
 
−
    background: rgb(198, 212, 235);
 
−
    background: hsla(217, 48%, 85%, 0.8);
 
−
    border: 1px solid #0645AD;
 
−
    border-radius: 4px;
 
−
    padding: 10px 5px;
 
−
    text-align: center;
 
−
    font-weight: bold;
 
−
}
 
−
 
 
−
.mwmanual-dbview-box:hover .mwmanual-dbview-link {
 
−
    background: hsla(215, 46%, 95%, 0.8);
 
−
}
 
−
 
 
−
.mwmanual-dbview-link:hover {
 
−
    background: hsla(215, 46%, 95%, 0.9);
 
−
}
 
−
 
 
−
/*
 
−
* VisualEditor documentation styles - required for displaying document diagrams
 
−
*/
 
−
.ve-doc-dm-data {
 
−
    list-style: none;
 
−
    cursor: default;
 
−
}
 
−
 
 
−
    .ve-doc-dm-data li {
 
−
        font-family: sans-serif;
 
−
        text-align: center;
 
−
        line-height: 2.25em;
 
−
        display: inline-block;
 
−
        width: 2.25em;
 
−
        height: 2.25em;
 
−
        border: solid 2px white;
 
−
    }
 
−
 
 
−
        .ve-doc-dm-data li.ve-doc-dm-cursor {
 
−
            width: 0.5em;
 
−
        }
 
−
 
 
−
.ve-doc-dm-cursor:hover {
 
−
    border-color: #c8ccd1;
 
−
}
 
−
 
 
−
.ve-doc-dm-open,
 
−
.ve-doc-dm-close {
 
−
    background-color: #50a5f4;
 
−
    color: #7ddcfd;
 
−
}
 
−
 
 
−
    .ve-doc-dm-open:hover,
 
−
    .ve-doc-dm-close:hover {
 
−
        border-color: #7ddcfd;
 
−
    }
 
−
 
 
−
.ve-doc-dm-close {
 
−
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJhJREFUeNrs0UENgEAQBMGThGMkImFBAp8jTVKVjIHptT4yM8eza947F2KIIYYYYoghBmKIgRhiIIYYiCGG18QQQwwxxBBDDMQQAzHEQAwxEEMMMTYHESMWRIwfBhEjFESMUBAxQkHECAURIxREjFAQMUJBxAgFESMURAwa2a9b1a2a9b1a2a9b1a2a9b1a2a9b1GCfW4ABAPk3h3InIbNlAAAAAElFTkSuQmCC);
 
−
    background-size: contain;
 
−
    background-position: left top;
 
−
    background-repeat: no-repeat;
 
−
}
 
−
 
 
−
.ve-doc-dm-char,
 
−
.ve-doc-dm-achar {
 
−
    border-radius: 3em;
 
−
}
 
−
 
 
−
.ve-doc-dm-char {
 
−
    background-color: #7bcc45;
 
−
    color: #fff;
 
−
}
 
−
 
 
−
    .ve-doc-dm-char:hover {
 
−
        border-color: #b6f26c;
 
−
    }
 
−
 
 
−
.ve-doc-dm-achar {
 
−
    background-color: #fa952c;
 
−
    color: #fff;
 
−
}
 
−
 
 
−
    .ve-doc-dm-achar:hover {
 
−
        border-color: #fed045;
 
−
    }
 
−
 
 
−
.ve-doc-dm-element-text {
 
−
    color: #50a5f4;
 
−
}
 
−
 
 
−
.ve-doc-dm-char-text {
 
−
    color: #7bcc45;
 
−
}
 
−
 
 
−
.ve-doc-dm-achar-text {
 
−
    color: #fa952c;
 
−
}
 
−
 
 
−
/* For templates in Category:VisualEditor tests templates */
 
−
tt.ve-typing-test {
 
−
    color: white;
 
−
    background-color: black;
 
−
    padding: 0 1em 0 1em;
 
−
}
 
−
 
 
−
/**
 
−
* Style for horizontal lists (separator following item).
 
−
* @source mediawiki.org/wiki/Snippets/Horizontal_lists
 
−
* @revision 6 (2014-05-09)
 
−
* @author [[User:Edokter]]
 
−
*/
 
−
.hlist dl,
 
−
.hlist ol,
 
−
.hlist ul {
 
−
    margin: 0;
 
−
    padding: 0;
 
−
}
 
−
/* Display list items inline */
 
−
.hlist dd,
 
−
.hlist dt,
 
−
.hlist li {
 
−
    margin: 0;
 
−
    display: inline;
 
−
}
 
−
/* Display nested lists inline */
 
−
.hlist.inline,
 
−
.hlist.inline dl,
 
−
.hlist.inline ol,
 
−
.hlist.inline ul,
 
−
.hlist dl dl, .hlist dl ol, .hlist dl ul,
 
−
.hlist ol dl, .hlist ol ol, .hlist ol ul,
 
−
.hlist ul dl, .hlist ul ol, .hlist ul ul {
 
−
    display: inline;
 
−
}
 
−
/* Generate interpuncts */
 
−
.hlist dt:after {
 
−
    content: ": ";
 
−
}
 
−
 
 
−
.mw-parser-output .hlist dd:after,
 
−
.mw-parser-output .hlist li:after {
 
−
    content: " · ";
 
−
    font-weight: bold;
 
−
}
 
−
 
 
−
.hlist dd:last-child:after,
 
−
.hlist dt:last-child:after,
 
−
.hlist li:last-child:after {
 
−
    content: none;
 
−
}
 
−
/* Add parentheses around nested lists */
 
−
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
 
−
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
 
−
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
 
−
    content: " (";
 
−
    font-weight: normal;
 
−
}
 
−
 
 
−
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
 
−
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
 
−
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
 
−
    content: ") ";
 
−
    font-weight: normal;
 
−
}
 
−
/* Put ordinals in front of ordered list items */
 
−
.hlist ol {
 
−
    counter-reset: listitem;
 
−
}
 
−
 
 
−
    .hlist ol > li {
 
−
        counter-increment: listitem;
 
−
    }
 
−
 
 
−
        .hlist ol > li:before {
 
−
            content: " " counter(listitem) " ";
 
−
            white-space: nowrap;
 
−
        }
 
−
 
 
−
.hlist dd ol > li:first-child:before,
 
−
.hlist dt ol > li:first-child:before,
 
−
.hlist li ol > li:first-child:before {
 
−
    content: " (" counter(listitem) " ";
 
−
}
 
−
/* end hlist */
 
−
 
 
−
/* Unbulleted lists */
 
−
.plainlist ul {
 
−
    line-height: inherit;
 
−
    list-style: none none;
 
−
    margin: 0;
 
−
}
 
−
 
 
−
    .plainlist ul li {
 
−
        margin-bottom: 0;
 
−
    }
 
−
 
 
−
/* Banner - Wikivoyage - Used to test MediaWiki/Homepage redesign/Preview */
 
−
 
 
−
.banner-image {
 
−
    position: relative;
 
−
    overflow: hidden;
 
−
    max-width: 1800px;
 
−
    height: auto;
 
−
    margin-bottom: .6em;
 
−
}
 
−
 
 
−
    .banner-image img {
 
−
        max-width: 100%;
 
−
        height: auto;
 
−
        width: auto;
 
−
    }
 
−
 
 
−
.banner-box {
 
−
    position: absolute;
 
−
    z-index: 2;
 
−
    margin-top: 2.5em;
 
−
    color: white;
 
−
    min-width: 20em;
 
−
    text-shadow: black 0.3em 0.3em 1em,black -0.1em -0.1em 1em;
 
−
}
 
−
 
 
−
.banner-box-wide {
 
−
    width: 80%
 
−
}
 
−
 
 
−
.banner-box-left {
 
−
    left: 5%;
 
−
    text-align: left;
 
−
}
 
−
 
 
−
.banner-box-right {
 
−
    right: 5%;
 
−
    text-align: right;
 
−
}
 
−
 
 
−
.banner-box .name {
 
−
    font-size: 3em;
 
−
    white-space: nowrap;
 
−
    line-height: 1.2em;
 
−
}
 
−
 
 
−
.banner-box .type {
 
−
    font-size: 2em;
 
−
    line-height: 1.2em;
 
−
}
 
−
 
 
−
.mf-mobile-only,
 
−
.lqt-talkpage-search {
 
−
    display: none;
 
−
}
 
−
 
 
−
/* Phabricator-like tag styling */
 
−
.phui-tag {
 
−
    -webkit-font-smoothing: antialiased;
 
−
    background-color: #e7e7e7;
 
−
    border-color: #e7e7e7;
 
−
    border-radius: 3px;
 
−
    border: 1px solid transparent;
 
−
    font: 13px 'Segoe UI','Segoe UI Web Regular','Segoe UI Symbol','Lato','Helvetica Neue',Helvetica,Arial,sans-serif;
 
−
    line-height: 1.51em;
 
−
    padding: 0 4px;
 
 
}
 
}
  
−
.mw-body .phui-tag a.external {
+
@media screen and (max-width: 719px) {
−
    background-image: none;
+
.thumb {
−
    padding-right: 0;
+
float: none;
−
    text-decoration: none;
+
}
−
    color: black;
+
.thumb, .thumbinner {
−
    font-weight: bold;
+
margin-left: auto;
 +
margin-right: auto;
 +
}
 
}
 
}

Revision as of 20:24, 8 October 2020

/* CSS used for https://www.mediawiki.org/wiki/MediaWiki/Homepage_improvements_2018 : */
.mainpage_row {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 0;
	margin: 0 -5px 0 -5px;
}
.mainpage_box {
	flex: 1;
	margin: 5px;
	min-width: 210px;
	border: 1px solid #CCC;
	padding: 0 10px 10px 10px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
.mainpage_box h3 {
	/* Reset padding so is equal across skins */
	padding: 0;
	margin: 0.5em 0;
}
.mainpage_box h3 .header_icon {
	float: left;
	margin-right: 5px;
}
.mainpage_box .items {
	border-top: 1px solid #CCC;
	padding-top: 0.5em;
}
.mainpage_box p:last-child {
	margin-bottom: 0;
}
.mainpage_boxcontents_small {
	font-size: 95%;
}
/* Style the "other languages" box the same way as other boxes on the main page */
.mw-pt-languages {
	display: block;
	background: none;
	border: 1px solid #CCC;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
	width: auto;
}
.mw-pt-languages-label {
	background: none;
	border-right: none;
}

@media screen and (max-width: 719px) {
	.thumb {
		float: none;
	}
	.thumb, .thumbinner {
		margin-left: auto;
		margin-right: auto;
	}
}