Jump to content

Template:License/styles.css: Difference between revisions

From MTRNord's Wiki
Fix darkmode
No edit summary
 
Line 1: Line 1:
.mw-license-box {
.mw-license-box {
     display: inline-table;
     display: inline-table;
     border: 1px solid #aaa;
     border: 1px solid var(--border-color-base, #a2a9b1);
     font-size: 88%;
     font-size: 88%;
     margin: 0.2em 0;
     margin: 0.2em 0;
Line 16: Line 16:
     text-align: center;
     text-align: center;
     min-width: 52px;
     min-width: 52px;
     border-right: 1px solid #aaa;
     border-right: 1px solid var(--border-color-base, #a2a9b1);
     white-space: nowrap;
     white-space: nowrap;
    color: #202122;
}
}
.mw-license-desc {
.mw-license-desc {
     max-width: 220px;
     max-width: 220px;
    color: var(--color-base, #202122);
}
.mw-license-desc a {
    font-weight: bold;
}
}
.mw-license-desc a { font-weight: bold; }


/* Light mode badge colours */
/* Light mode badge backgrounds */
.mw-license-cc-by       .mw-license-badge { background: #b3e0b3; }
.mw-license-cc-by .mw-license-badge {
.mw-license-cc-by-sa   .mw-license-badge { background: #99d699; }
    background: #b3e0b3;
.mw-license-cc-by-nc   .mw-license-badge { background: #fde68a; }
}
.mw-license-cc-by-nc-sa .mw-license-badge { background: #fcd34d; }
.mw-license-cc-by-sa .mw-license-badge {
.mw-license-cc-by-nd   .mw-license-badge { background: #a5d8f3; }
    background: #99d699;
.mw-license-cc-by-nc-nd .mw-license-badge { background: #f3a5d8; }
}
.mw-license-cc0         .mw-license-badge { background: #c4b5fd; }
.mw-license-cc-by-nc .mw-license-badge {
.mw-license-arr        .mw-license-badge { background: #e8e8e8; }
    background: #fde68a;
 
}
/* ── Dark mode ────────────────────────────────────────────────────────────── */
.mw-license-cc-by-nc-sa .mw-license-badge {
/* Covers: manual "Night" toggle and OS-level dark preference                */
    background: #fcd34d;
.skin-theme-clientpref-night .mw-license-box,
}
.skin-theme-clientpref-os    .mw-license-box {
.mw-license-cc-by-nd .mw-license-badge {
    border-color: #555;
    background: #a5d8f3;
    color: #e8e8e8;
}
.mw-license-cc-by-nc-nd .mw-license-badge {
    background: #f3a5d8;
}
.mw-license-cc0 .mw-license-badge {
    background: #c4b5fd;
}
}
.skin-theme-clientpref-night .mw-license-badge,
.mw-license-arr .mw-license-badge {
.skin-theme-clientpref-os    .mw-license-badge {
    background: var(--background-color-neutral, #eaecf0);
     border-right-color: #555;
     color: var(--color-base, #202122);
}
}


.skin-theme-clientpref-night .mw-license-cc-by      .mw-license-badge,
/* Dark badge backgrounds + text — manual Night toggle */
.skin-theme-clientpref-os    .mw-license-cc-by       .mw-license-badge { background: #1a4d1a; color: #c8f0c8; }
@media screen {
.skin-theme-clientpref-night .mw-license-cc-by-sa   .mw-license-badge,
    html.skin-theme-clientpref-night .mw-license-cc-by .mw-license-badge {
.skin-theme-clientpref-os    .mw-license-cc-by-sa    .mw-license-badge { background: #144014; color: #a8e0a8; }
        background: #1a4d1a;
.skin-theme-clientpref-night .mw-license-cc-by-nc   .mw-license-badge,
        color: #c8f0c8;
.skin-theme-clientpref-os    .mw-license-cc-by-nc    .mw-license-badge { background: #4d3d00; color: #ffe99a; }
    }
.skin-theme-clientpref-night .mw-license-cc-by-nc-sa .mw-license-badge,
    html.skin-theme-clientpref-night .mw-license-cc-by-sa .mw-license-badge {
.skin-theme-clientpref-os    .mw-license-cc-by-nc-sa .mw-license-badge { background: #4d3200; color: #ffd97a; }
        background: #144014;
.skin-theme-clientpref-night .mw-license-cc-by-nd   .mw-license-badge,
        color: #a8e0a8;
.skin-theme-clientpref-os    .mw-license-cc-by-nd    .mw-license-badge { background: #0d3a52; color: #a8d8f0; }
    }
.skin-theme-clientpref-night .mw-license-cc-by-nc-nd .mw-license-badge,
    html.skin-theme-clientpref-night .mw-license-cc-by-nc .mw-license-badge {
.skin-theme-clientpref-os    .mw-license-cc-by-nc-nd .mw-license-badge { background: #52112e; color: #f0a8cc; }
        background: #4d3d00;
.skin-theme-clientpref-night .mw-license-cc0         .mw-license-badge,
        color: #ffe99a;
.skin-theme-clientpref-os    .mw-license-cc0         .mw-license-badge { background: #2d1a5e; color: #d4bbff; }
    }
.skin-theme-clientpref-night .mw-license-arr        .mw-license-badge,
    html.skin-theme-clientpref-night .mw-license-cc-by-nc-sa .mw-license-badge {
.skin-theme-clientpref-os    .mw-license-arr        .mw-license-badge { background: #333;    color: #ccc;    }
        background: #4d3200;
        color: #ffd97a;
    }
    html.skin-theme-clientpref-night .mw-license-cc-by-nd .mw-license-badge {
        background: #0d3a52;
        color: #a8d8f0;
    }
    html.skin-theme-clientpref-night .mw-license-cc-by-nc-nd .mw-license-badge {
        background: #52112e;
        color: #f0a8cc;
    }
    html.skin-theme-clientpref-night .mw-license-cc0 .mw-license-badge {
         background: #2d1a5e;
        color: #d4bbff;
    }
}


/* OS preference: only apply dark colours when the OS is actually dark */
/* Dark badge backgrounds + text — OS dark preference */
@media (prefers-color-scheme: light) {
@media screen and (prefers-color-scheme: dark) {
     .skin-theme-clientpref-os .mw-license-box        { border-color: #aaa; color: inherit; }
     html.skin-theme-clientpref-os .mw-license-cc-by .mw-license-badge {
    .skin-theme-clientpref-os .mw-license-badge      { border-right-color: #aaa; }
        background: #1a4d1a;
    .skin-theme-clientpref-os .mw-license-cc-by       .mw-license-badge { background: #b3e0b3; color: inherit; }
        color: #c8f0c8;
     .skin-theme-clientpref-os .mw-license-cc-by-sa   .mw-license-badge { background: #99d699; color: inherit; }
    }
     .skin-theme-clientpref-os .mw-license-cc-by-nc   .mw-license-badge { background: #fde68a; color: inherit; }
     html.skin-theme-clientpref-os .mw-license-cc-by-sa .mw-license-badge {
     .skin-theme-clientpref-os .mw-license-cc-by-nc-sa .mw-license-badge { background: #fcd34d; color: inherit; }
        background: #144014;
     .skin-theme-clientpref-os .mw-license-cc-by-nd   .mw-license-badge { background: #a5d8f3; color: inherit; }
        color: #a8e0a8;
     .skin-theme-clientpref-os .mw-license-cc-by-nc-nd .mw-license-badge { background: #f3a5d8; color: inherit; }
    }
     .skin-theme-clientpref-os .mw-license-cc0         .mw-license-badge { background: #c4b5fd; color: inherit; }
     html.skin-theme-clientpref-os .mw-license-cc-by-nc .mw-license-badge {
     .skin-theme-clientpref-os .mw-license-arr        .mw-license-badge { background: #e8e8e8; color: inherit; }
        background: #4d3d00;
        color: #ffe99a;
    }
     html.skin-theme-clientpref-os .mw-license-cc-by-nc-sa .mw-license-badge {
        background: #4d3200;
        color: #ffd97a;
    }
     html.skin-theme-clientpref-os .mw-license-cc-by-nd .mw-license-badge {
        background: #0d3a52;
        color: #a8d8f0;
    }
     html.skin-theme-clientpref-os .mw-license-cc-by-nc-nd .mw-license-badge {
        background: #52112e;
        color: #f0a8cc;
    }
     html.skin-theme-clientpref-os .mw-license-cc0 .mw-license-badge {
        background: #2d1a5e;
        color: #d4bbff;
     }
}
}

Latest revision as of 13:05, 18 April 2026

.mw-license-box {
    display: inline-table;
    border: 1px solid var(--border-color-base, #a2a9b1);
    font-size: 88%;
    margin: 0.2em 0;
    clear: right;
    float: right;
}
.mw-license-box td {
    vertical-align: middle;
    padding: 3px 6px;
}
.mw-license-badge {
    font-weight: bold;
    font-size: 115%;
    text-align: center;
    min-width: 52px;
    border-right: 1px solid var(--border-color-base, #a2a9b1);
    white-space: nowrap;
    color: #202122;
}
.mw-license-desc {
    max-width: 220px;
    color: var(--color-base, #202122);
}
.mw-license-desc a {
    font-weight: bold;
}

/* Light mode badge backgrounds */
.mw-license-cc-by .mw-license-badge {
    background: #b3e0b3;
}
.mw-license-cc-by-sa .mw-license-badge {
    background: #99d699;
}
.mw-license-cc-by-nc .mw-license-badge {
    background: #fde68a;
}
.mw-license-cc-by-nc-sa .mw-license-badge {
    background: #fcd34d;
}
.mw-license-cc-by-nd .mw-license-badge {
    background: #a5d8f3;
}
.mw-license-cc-by-nc-nd .mw-license-badge {
    background: #f3a5d8;
}
.mw-license-cc0 .mw-license-badge {
    background: #c4b5fd;
}
.mw-license-arr .mw-license-badge {
    background: var(--background-color-neutral, #eaecf0);
    color: var(--color-base, #202122);
}

/* Dark badge backgrounds + text — manual Night toggle */
@media screen {
    html.skin-theme-clientpref-night .mw-license-cc-by .mw-license-badge {
        background: #1a4d1a;
        color: #c8f0c8;
    }
    html.skin-theme-clientpref-night .mw-license-cc-by-sa .mw-license-badge {
        background: #144014;
        color: #a8e0a8;
    }
    html.skin-theme-clientpref-night .mw-license-cc-by-nc .mw-license-badge {
        background: #4d3d00;
        color: #ffe99a;
    }
    html.skin-theme-clientpref-night .mw-license-cc-by-nc-sa .mw-license-badge {
        background: #4d3200;
        color: #ffd97a;
    }
    html.skin-theme-clientpref-night .mw-license-cc-by-nd .mw-license-badge {
        background: #0d3a52;
        color: #a8d8f0;
    }
    html.skin-theme-clientpref-night .mw-license-cc-by-nc-nd .mw-license-badge {
        background: #52112e;
        color: #f0a8cc;
    }
    html.skin-theme-clientpref-night .mw-license-cc0 .mw-license-badge {
        background: #2d1a5e;
        color: #d4bbff;
    }
}

/* Dark badge backgrounds + text — OS dark preference */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .mw-license-cc-by .mw-license-badge {
        background: #1a4d1a;
        color: #c8f0c8;
    }
    html.skin-theme-clientpref-os .mw-license-cc-by-sa .mw-license-badge {
        background: #144014;
        color: #a8e0a8;
    }
    html.skin-theme-clientpref-os .mw-license-cc-by-nc .mw-license-badge {
        background: #4d3d00;
        color: #ffe99a;
    }
    html.skin-theme-clientpref-os .mw-license-cc-by-nc-sa .mw-license-badge {
        background: #4d3200;
        color: #ffd97a;
    }
    html.skin-theme-clientpref-os .mw-license-cc-by-nd .mw-license-badge {
        background: #0d3a52;
        color: #a8d8f0;
    }
    html.skin-theme-clientpref-os .mw-license-cc-by-nc-nd .mw-license-badge {
        background: #52112e;
        color: #f0a8cc;
    }
    html.skin-theme-clientpref-os .mw-license-cc0 .mw-license-badge {
        background: #2d1a5e;
        color: #d4bbff;
    }
}