Template:Cdx-message/styles.css
Jump to navigation
Jump to search
/**
* 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;
}