Edge Rewrite
restyle Source code View original
// HTMLRewriter · presentation

This page was redesigned at the edge.

Cloudflare fetched the original article and streamed it through HTMLRewriter to apply an entirely new visual system without rebuilding the source page.

Jump to content

Template:Cdx-message/styles.css

Add links
From Wikipedia, the free encyclopedia
/**
 *  NOTE: THIS IS A MOBILE-FIRST STYLESHEET.
 *  SO ALL BASE * STYLES ARE FOR MOBILE,
 *  AND DESKTOP STYLES ARE IN A MEDIA QUERY.
 *
 *	'cdx-message'
 *	Simple message template.
 *	Copy-cat of Codex. Meant to replace the
 *	giant imposing [[Template:Mbox]], hopefully...
 *  
 *	@license [GPL-2.0+] Codex is copyrighted.
 *  Codex icons are multilicensed with [CC-BY-SA-3.0].
 *  @attribution Wikimedia contributors.
 *  @source [https://github.com/wikimedia/design-codex/].
 *  CSS styles copied from Codex cdxMessage on 2025-08-21.
 *	Added to it myself.
 *
 *
 **********************************************
 * 	CHANGE NAMESPACE BELOW ON OTHER WIKIS.
 *  Hide in article namespace on en-wiki.    */
@media print {
    body.ns-0 .tpl-note {
        display: none !important;
    }
}

.tpl-note__wrapper {
    /* Mobile first! */
    display: flex;
    align-items: flex-start;
    align-self: center;
    flex-direction: row;
    padding: 0;
    min-width: min-content;
    width: auto;
    margin: 4px 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.tpl-note {
    /* Mobile first! */
    overflow: hidden;
    color: var(--color-base, #202122);
    display: block;
    position: relative;
    border-radius: 2px;
    border: 1px solid var(--border-color-base, #a2a9b1);
    background-color: var(--background-color-neutral-subtle, #f8f9fa);
    background-image:
        /* -- [[File: Codex_icon_infoFilled_color-placeholder.svg]] */
        url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Codex_icon_infoFilled_color-placeholder.svg/60px-Codex_icon_infoFilled_color-placeholder.svg.png');
    word-wrap: break-word;
    flex-grow: 1;
    font-weight: 400;
    min-height: 22px;
    /**  Always sync with `padding` in .tpl-note-noimage
    *  (i.e. check if `padding` is the same value)
    *  `padding[-right]` is 12px on cdxMessage.
    *  `padding[-left]` sets padding as distance from message text to the icon which:
    *   = padding of icon to border (value of `background-position`'s first value)
    *     + icon width (value of background-size)
    *     + padding of message text in relation to border (normally value of 
    *  	    padding but Codex keeps this 8px). vvvvvvvvvvvvvvv
    */
    padding: 12px 12px 12px calc(12px + 0.875rem + 6px + 12px);
    margin: 0;
    /**  The left value gives the icon its left margin `margin-left`.
    *  (background-position: left 12px top 50%;) Previously centered icon vertically-centered.
    *  After an update, the icon was aligned vertically to the horizontal center of the text in the
    *  first row.
    */
    background-position: 12px 14px;
    /**  Last variable is linked to a variable in `padding-left`.
    *  So if changing icon size from 6px to 4px for example, reduce 'padding-left' variable
    *  by 2 points px.
    */
    background-size: calc(0.875rem + 6px) calc(0.875rem + 6px);
    /* Icon width and height. */
    background-repeat: no-repeat;
}

.tpl-note img[src*="Codex_icon"] {
    min-height: 22px;
}

.tpl-note .tpl-note-content > p:first-child {
    /* Mobile first! */
    margin-top: 0;
}

.tpl-note .tpl-note-content > p:last-child {
    /* Mobile first! */
    margin-bottom: 0;
}

.tpl-note-content {
    overflow: scroll;
}

/* Styling to be applied to NON-mobile screens only. i.e. desktops. */
@media only screen and (min-width: 600px) {

    /* Right float. */
    .tpl-note--style-right {
        float: right;
        clear: right;
        display: flow-root;
        margin-left: 1em;
    }

    .tpl-note--style-mbox {
        margin-left: 10%;
        margin-right: 10%;
    }

    .tpl-note {
        min-width: 256px;
        clear: left;
    }

    .tpl-note--style-width-auto {
        width: fit-content;
    }
}

.tpl-note-noimage {
    background-size: 0 0;
    background-position: 0;
    /* 	 Always sync with `padding` in .tpl-note (just minus icon) */
    padding: 0px 8px 0px 8px;
}

@media screen {
    html.skin-theme-clientpref-night .tpl-note {
        background-color: transparent;
        color: inherit;
    }

    html.skin-theme-clientpref-night .tpl-note.tpl-note-notice-loud {
        border-color: #eaecf0;
        /* border-color-emphasized */
        background-image:
            url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Codex_icon_infoFilled_color-a2a9b1.svg/60px-Codex_icon_infoFilled_color-a2a9b1.svg.png');
    }
}

@media screen and (prefers-color-scheme: dark) {

    /* 	Dark mode */
    html.skin-theme-clientpref-os .tpl-note {
        background-color: transparent;
        color: inherit;
    }

    html.skin-theme-clientpref-os .tpl-note.tpl-note-notice-loud {
        border-color: #eaecf0;
        /* border-color-emphasized */
        background-image:
            url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Codex_icon_infoFilled_color-a2a9b1.svg/60px-Codex_icon_infoFilled_color-a2a9b1.svg.png');
    }
}

@supports (overflow-wrap:anywhere) {
    .tpl-note {
        word-break: normal;
        overflow-wrap: break-word;
    }
}

.tpl-note-notice-loud {
    /* Codex Notice but loud */
    background-color: var(--background-color-notice-subtle, #eaecf0);
    /* background-color-notice-subtle [[File:Codex_icon_notice_color-notice.svg]] */
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Codex_icon_notice_color-notice.svg/60px-Codex_icon_notice_color-notice.svg.png');
    border-color: #202122;
    /* border-color-emphasized */
}

.tpl-note-notice {
    /* Codex Notice */
    background-color: var(--background-color-notice-subtle, #eaecf0);
    /* background-color-notice-subtle [[File:Codex_icon_infoFilled_color-placeholder.svg]] */
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Codex_icon_infoFilled_color-placeholder.svg/60px-Codex_icon_infoFilled_color-placeholder.svg.png');
    border-color: #72777d;
    /* @border-color-notice */
}

.tpl-note-info {
    /* Reminder more like that of [[mw:Template:Note]] type=info */
    background-color: var(--background-color-progressive-subtle, #f1f4fd);
    /* background-color-progressive-subtle [[File:Codex icon infoFilled blue500.svg]] */
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Codex_icon_InfoFilled_blue.svg/60px-Codex_icon_InfoFilled_blue.svg.png');
    border-color: #6485d1;
}

.tpl-note-success {
    /* Codex Success */
    background-color: var(--background-color-success-subtle, #dff2eb);
    /* background-color-success-subtle [[File:Codex icon Success green.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Codex_icon_Success_green.svg/60px-Codex_icon_Success_green.svg.png);
    border-color: #099979;
}

.tpl-note-reminder {
    /* Reminder more like that of [[mw:Template:Note]] type=reminder */
    background-color: #fffeea;
    /* Half of half the hex of yellow50 [[File:Icon lightbulb yellow.svg]] */
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Icon_lightbulb_yellow.svg/40px-Icon_lightbulb_yellow.svg.png');
    border-color: #fc3
        /*#ffdf80; /* Half the hex of warn & content */
}

.tpl-note-warning {
    /* Codex Warning */
    background-color: var(--background-color-warning-subtle, #fdf2d5);
    /* background-color-warning-subtle [[File:Codex icon alert yellow300.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Codex_icon_alert_color-warning.svg/60px-Codex_icon_alert_color-warning.svg.png);
    border-color: #ab7f2a;
}

.tpl-note-warn {
    /* Warning more like that of [[mw:Template:Note]] type=warn */
    background-color: #fff9ea;
    /* Half the hex of yellow50 [[File:Codex icon alert yellow300.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Codex_icon_alert_yellow300.svg/60px-Codex_icon_alert_yellow300.svg.png);
    border-color: #fc3;
}

.tpl-note-error {
    /* Codex Error */
    background-color: var(--background-color-error-subtle, #ffe9e5);
    /* background-color-error-subtle [[File:Codex icon error red500.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Codex_icon_error_red500.svg/60px-Codex_icon_error_red500.svg.png);
    border-color: #f54739;
}

.tpl-note-caution {
    background-color: #fed;
    /* #ffead4; /* orange50 [[File:Codex icon notice orange400.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Codex_icon_Notice_orange.svg/60px-Codex_icon_Notice_orange.svg.png);
    border-color: #f60;
    /* #d46926; */
    /*#FF5C00;  /* orange500 - CHANGED TO CUSTOM. */
}

.tpl-note-flag {
    background-color: #f0ecf6;
    /* purple50 [[File:Codex icon flag purple.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Codex_icon_flag_purple.svg/60px-Codex_icon_flag_purple.svg.png);
    border-color: #6a60b0;
    /* purple700 */
}

.tpl-note-move {
    /* Move */
    background-color: #f8f9fa;
    /* background-color-neutral-subtle [[File:Merge-split-transwiki default.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6f/Merge-split-transwiki_new2.svg);
    border-color: #6a60b0;
    /* purple700 */
}

.tpl-note-delete {
    /* Delete */
    background-color: var(--background-color-destructive-subtle, #ffe9e5);
    /* background-color-error-subtle [[File:Codex icon alert red500.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Codex_icon_alert_red500.svg/60px-Codex_icon_alert_red500.svg.png);
    border-color: #f54739;
}

.tpl-note-speedy {
    /* Speedy */
    background-color: var(--background-color-destructive-subtle, #ffe9e5);
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Codex_icon_clear_red500.svg/60px-Codex_icon_clear_red500.svg.png);
    border-color: #f54739;
}

.tpl-note-content {
    /* Content */
    background-color: #fff9ea;
    /* Half the hex of yellow50 [[File:OOjs UI icon broom.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/OOjs_UI_icon_broom.svg/40px-OOjs_UI_icon_broom.svg.png);
    border-color: #fc3;
}

.tpl-note-announcement {
    /* Announcement */
    background-color: var(--background-color-neutral-subtle, #f8f9fa);
    /* background-color-neutral-subtle [[File:Codex icon feedback blue.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Codex_icon_feedback_blue.svg/60px-Codex_icon_feedback_blue.svg.png);
    border-color: #6485d1;
    /* border-color-progressive */
}

.tpl-note-help {
    /* Help */
    background-color: var(--background-color-progressive-subtle, #f1f4fd);
    /* background-color-progressive-subtle [[File:Codex icon help notice-blue.svg]] */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Codex_icon_help_notice-blue.svg/60px-Codex_icon_help_notice-blue.svg.png);
    border-color: #6485d1
        /* border-color-progressive */
}

/* Put after the specific selectors above so it overrides the background-color, etc. */
div.tpl-note-inline,
div.tpl-note-inline .tpl-note,
div.tpl-note-inline .tpl-note__wrapper {
    display: inline;
    min-width: 22px;
    margin: 0;
    border: 0;
    padding: 0px 8px 0px calc(20px + 0.875rem);
    background-position: 8px 2px;
    background-color: transparent;
}
Retrieved from "https://en.wikipedia.org/w/index.php?title=Template:Cdx-message/styles.css&oldid=1315579687"