MediaWiki:Common.css

De Wiki Kabylie
Aller à la navigation Aller à la recherche

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

  • Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
  • Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
  •  Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
/* ============================================================
   WIKIKABYLIE — STYLE WIKIMEDIA MODERNE
   MediaWiki:Common.css
   ============================================================ */

:root {

    /* --------------------------------------------------------
       COULEURS WIKIKABYLIE
       -------------------------------------------------------- */

    --wk-blue: #0757a6;
    --wk-blue-dark: #073763;
    --wk-blue-light: #eef6fc;

    --wk-green: #16834b;
    --wk-green-light: #edf8f1;

    --wk-gold: #d99a1e;
    --wk-gold-light: #fff8e7;

    /* --------------------------------------------------------
       COULEURS NEUTRES
       -------------------------------------------------------- */

    --wk-ink: #202122;
    --wk-text: #2f3337;
    --wk-muted: #72777d;

    --wk-line: #c8ccd1;
    --wk-line-light: #eaecf0;

    --wk-soft: #f8f9fa;
    --wk-soft-hover: #f1f4f6;

    --wk-white: #ffffff;

    /* --------------------------------------------------------
       RAYONS
       -------------------------------------------------------- */

    --wk-radius-sm: 4px;
    --wk-radius-md: 7px;
    --wk-radius-lg: 12px;
    --wk-radius-xl: 18px;

    /* --------------------------------------------------------
       OMBRES
       -------------------------------------------------------- */

    --wk-shadow-sm:
        0 1px 3px rgba(0, 0, 0, 0.06);

    --wk-shadow-md:
        0 5px 18px rgba(32, 33, 34, 0.08);

    --wk-shadow-lg:
        0 12px 32px rgba(32, 33, 34, 0.10);
}


/* ============================================================
   CONTENU MEDIAWIKI
   ============================================================ */

.mw-parser-output {
    color: var(--wk-text);
}


/* ============================================================
   LIENS
   ============================================================ */

.mw-parser-output a {
    color: var(--wk-blue);
    text-decoration: none;
}


.mw-parser-output a:hover {
    color: var(--wk-blue-dark);
    text-decoration: underline;
}


/* ============================================================
   CARTES PERSONNALISÉES
   ============================================================ */

.wk-card {
    overflow: hidden;

    border: 1px solid var(--wk-line-light);
    border-radius: var(--wk-radius-lg);

    background: var(--wk-white);

    color: var(--wk-ink);

    box-shadow: var(--wk-shadow-sm);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


.wk-card:hover {
    border-color: var(--wk-line);

    box-shadow: var(--wk-shadow-md);

    transform: translateY(-2px);
}


/* ============================================================
   TITRES DES CARTES
   ============================================================ */

.wk-card h2,
.wk-card h3 {
    margin: 0;

    padding: 0.7em 1em;

    border-bottom: 1px solid var(--wk-line-light);

    background: var(--wk-soft);

    color: var(--wk-ink);
}


/* ============================================================
   INFOBOX
   ============================================================ */

.infobox {
    overflow: hidden;

    border: 1px solid var(--wk-line) !important;
    border-radius: var(--wk-radius-lg);

    background: var(--wk-white) !important;

    color: var(--wk-ink);

    box-shadow: var(--wk-shadow-sm);
}


.infobox caption {
    padding: 12px 14px;

    border-bottom: 1px solid var(--wk-line-light);

    background: var(--wk-soft);

    color: var(--wk-ink);

    font-size: 1.15em;
    font-weight: 700;
}


/* ============================================================
   NAVBOX
   ============================================================ */

.navbox {
    overflow: hidden;

    border: 1px solid var(--wk-line) !important;
    border-radius: var(--wk-radius-lg);

    background: var(--wk-white) !important;

    color: var(--wk-ink);
}


.navbox-title {
    background: var(--wk-blue-light) !important;

    color: var(--wk-blue-dark) !important;

    font-weight: 700;
}


.navbox-group {
    background: var(--wk-soft) !important;
}


/* ============================================================
   MINIATURES / IMAGES
   ============================================================ */

.mw-parser-output .thumbinner {
    overflow: hidden;

    border: 1px solid var(--wk-line-light);

    border-radius: var(--wk-radius-md);

    background: var(--wk-soft);

    box-shadow: var(--wk-shadow-sm);
}


.mw-parser-output .thumbimage {
    border: 0;
}


.mw-parser-output .thumbcaption {
    padding: 8px 10px;

    color: var(--wk-muted);

    font-size: 12px;
    line-height: 1.45;
}


/* ============================================================
   TABLES WIKITABLE
   ============================================================ */

.mw-parser-output table.wikitable {
    overflow: hidden;

    border: 1px solid var(--wk-line);
    border-collapse: separate;
    border-spacing: 0;

    border-radius: var(--wk-radius-lg);

    background: var(--wk-white);

    box-shadow: var(--wk-shadow-sm);
}


.mw-parser-output .wikitable > tr > th,
.mw-parser-output .wikitable > * > tr > th {
    padding: 10px 12px;

    border-color: var(--wk-line-light);

    background: var(--wk-soft);

    color: var(--wk-ink);

    font-weight: 700;
}


.mw-parser-output .wikitable > tr > td,
.mw-parser-output .wikitable > * > tr > td {
    padding: 10px 12px;

    border-color: var(--wk-line-light);

    background: var(--wk-white);
}


/* ============================================================
   BOUTONS PERSONNALISÉS
   ============================================================ */

.wk-button {
    display: inline-flex;

    min-height: 36px;

    align-items: center;
    justify-content: center;

    padding: 7px 15px;

    border: 1px solid var(--wk-blue);
    border-radius: var(--wk-radius-md);

    background: var(--wk-blue);

    color: #ffffff !important;

    font-weight: 700;

    text-decoration: none !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


.wk-button:hover {
    border-color: var(--wk-blue-dark);

    background: var(--wk-blue-dark);

    color: #ffffff !important;

    box-shadow: var(--wk-shadow-sm);

    transform: translateY(-1px);
}


/* ============================================================
   BOUTON SECONDAIRE
   ============================================================ */

.wk-button-secondary {
    border-color: var(--wk-line);

    background: var(--wk-white);

    color: var(--wk-blue) !important;
}


.wk-button-secondary:hover {
    border-color: var(--wk-blue);

    background: var(--wk-blue-light);

    color: var(--wk-blue-dark) !important;
}


/* ============================================================
   BOUTON VERT
   ============================================================ */

.wk-button-green {
    border-color: var(--wk-green);

    background: var(--wk-green);

    color: #ffffff !important;
}


.wk-button-green:hover {
    border-color: #0e6338;

    background: #0e6338;

    color: #ffffff !important;
}


/* ============================================================
   BOÎTE D'INFORMATION
   ============================================================ */

.wk-box {
    margin: 18px 0;

    padding: 18px 20px;

    border: 1px solid var(--wk-line-light);
    border-radius: var(--wk-radius-lg);

    background: var(--wk-soft);
}


.wk-box-blue {
    border-left: 4px solid var(--wk-blue);

    background: var(--wk-blue-light);
}


.wk-box-green {
    border-left: 4px solid var(--wk-green);

    background: var(--wk-green-light);
}


.wk-box-gold {
    border-left: 4px solid var(--wk-gold);

    background: var(--wk-gold-light);
}


/* ============================================================
   CATÉGORIES
   ============================================================ */

#catlinks {
    margin-top: 35px;

    padding: 16px 18px;

    border: 1px solid var(--wk-line-light);
    border-radius: var(--wk-radius-lg);

    background: var(--wk-soft);
}


#catlinks a {
    color: var(--wk-blue);
}


/* ============================================================
   TABLE DES MATIÈRES
   ============================================================ */

.vector-toc {
    font-size: 13px;
}


.vector-toc a {
    border-radius: var(--wk-radius-sm);
}


.vector-toc a:hover {
    background: var(--wk-soft);
}


/* ============================================================
   MESSAGES MEDIAWIKI
   ============================================================ */

.mw-message-box {
    border-radius: var(--wk-radius-md);
}


/* ============================================================
   CODE / PRE
   ============================================================ */

.mw-parser-output code {
    padding: 2px 5px;

    border: 1px solid var(--wk-line-light);
    border-radius: 4px;

    background: var(--wk-soft);

    color: #b32424;
}


.mw-parser-output pre {
    padding: 16px;

    overflow-x: auto;

    border: 1px solid var(--wk-line-light);
    border-radius: var(--wk-radius-lg);

    background: var(--wk-soft);
}


/* ============================================================
   STYLE ARRONDI OPTIONNEL
   ============================================================ */

.wk-rounded {
    border-radius: var(--wk-radius-xl) !important;
}


/* ============================================================
   STYLE SANS OMBRE
   ============================================================ */

.wk-flat {
    box-shadow: none !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

    .wk-card,
    .infobox,
    .navbox {
        border-radius: var(--wk-radius-md);
    }


    .wk-button {
        min-height: 38px;

        padding: 8px 14px;
    }


    .mw-parser-output table.wikitable {
        font-size: 12px;
    }

}
Récupérée de "https://www.bylka.fr/index.php?title=MediaWiki:Common.css&oldid=50"