Module:Message box/cmbox.css: Difference between revisions

m 1 revision imported: message box templates
m 1 revision imported: box update
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
/* {{pp|small=y}} */
/**
.cmbox {
* {{cmbox}} (category message box) styles
margin: 3px 0;
*
* @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-enwp-boxes.css
* @revision 2021-07-15
*/
table.cmbox {
margin: 3px 10%;
border-collapse: collapse;
border-collapse: collapse;
border: 1px solid #a2a9b1;
border: 1px solid var(--border-color-base, #a2a9b1);
background-color: #dfe8ff;    /* Default "notice" blue */
/* Default "notice" light blue */
background-color: var(--background-color-progressive-subtle--hover, #d9e2ff);
color: var(--color-base, #202122);
box-sizing: border-box;
box-sizing: border-box;
    /* necessary when embedded in other templates like [[:Category:Pending_AfC_submissions]] */
color: var( --color-base );
}
}


.cmbox-speedy {
/* An empty narrow cell */
border: 4px solid #b32424;    /* Red */
.cmbox td.mbox-empty-cell {
background-color: #ffdbdb;    /* Pink */
border: none;
}
padding: 0;
 
width: 1px;
.cmbox-delete {
background-color: #ffdbdb;    /* Pink */
}
 
.cmbox-content {
background-color: #ffe7ce;    /* Orange */
}
 
.cmbox-style {
background-color: #fff9db;   /* Yellow */
}
 
.cmbox-move {
background-color: #e4d8ff;   /* Purple */
}
 
.cmbox-protection {
background-color: #efefe1;   /* Gray-gold */
}
}


.cmbox .mbox-text {
/* The message body cell(s) */
.cmbox th.mbox-text,
.cmbox td.mbox-text {
border: none;
border: none;
/* @noflip */
/* 0.9em left/right */
padding: 0.25em 0.9em;
padding: 0.25em 0.9em;
/* Make all mboxes the same width regardless of text length */
width: 100%;
width: 100%;
}
}


.cmbox .mbox-image {
/* The left image cell */
border: none;
.cmbox td.mbox-image {
/* 0.9em left, 0px right */
/* @noflip */
/* @noflip */
padding: 2px 0 2px 0.9em;
padding: 2px 0 2px 0.9em;
text-align: center;
}
}


.cmbox .mbox-imageright {
/* The right image cell */
border: none;
.cmbox td.mbox-imageright {
/* 0px left, 0.9em right */
/* @noflip */
/* @noflip */
padding: 2px 0.9em 2px 0;
padding: 2px 0.9em 2px 0;
text-align: center;
}
}


/* An empty narrow cell */
table.cmbox-notice {
.cmbox .mbox-empty-cell {
/* Light blue */
border: none;
background-color: var(--background-color-progressive-subtle--hover, #d9e2ff);
padding: 0;
}
width: 1px;
 
table.cmbox-speedy {
margin-top: 4px;
margin-bottom: 4px;
/* Red */
border: 4px solid #b32424;
}
}


.cmbox .mbox-invalid-type {
table.cmbox-delete,
text-align: center;
table.cmbox-speedy {
/* Pink */
background-color: var(--background-color-error-subtle--active, #ffc8bd);
 
}
}


@media (min-width: 720px) {
table.cmbox-content {
.cmbox {
/* Orange */
margin: 3px 10%;
background-color: var(--background-color-error-subtle--hover, #ffdad3);
}
}
}


/* flipped lightness in hsl space except the main cmbox is the main page blue */
table.cmbox-style {
/* Yellow */
background-color: var(--background-color-warning-subtle, #fdf2d5);
}


@media screen {
table.cmbox-move {
    html.skin-theme-clientpref-night .cmbox {
/* Blue */
background-color: #0d1a27;    /* Default "notice" blue */
background-color: var(--background-color-progressive-subtle--active, #b6d4fb);
}
html.skin-theme-clientpref-night .cmbox-speedy,
html.skin-theme-clientpref-night .cmbox-delete {
background-color: #300;    /* Pink */
}
html.skin-theme-clientpref-night .cmbox-content {
background-color: #331a00;    /* Orange */
}
html.skin-theme-clientpref-night .cmbox-style {
background-color: #332b00;    /* Yellow */
}
html.skin-theme-clientpref-night .cmbox-move {
background-color: #08001a;    /* Purple */
}
html.skin-theme-clientpref-night .cmbox-protection {
background-color: #212112;   /* Gray-gold */
}
}
}


table.cmbox-protection {
/* Gold */
background-color: var(--background-color-content-removed, #ffe49c);
}


@media screen and ( prefers-color-scheme: dark) {
@media screen and (max-width: 720px) {
html.skin-theme-clientpref-os .cmbox {
  table.cmbox {
background-color: #0d1a27;    /* Default "notice" blue */
margin: 3px auto;
}
  }
html.skin-theme-clientpref-os .cmbox-speedy,
html.skin-theme-clientpref-os .cmbox-delete {
background-color: #300;    /* Pink */
}
html.skin-theme-clientpref-os .cmbox-content {
background-color: #331a00;   /* Orange */
}
html.skin-theme-clientpref-os .cmbox-style {
background-color: #332b00;    /* Yellow */
}
html.skin-theme-clientpref-os .cmbox-move {
background-color: #08001a;    /* Purple */
}
html.skin-theme-clientpref-os .cmbox-protection {
background-color: #212112;    /* Gray-gold */
}
}
}