pronounmail wiki

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

← Older editNewer edit →
m 1 revision imported
Template>Izno
div imbox
Line 1: Line 1:
/**
/* {{pp|small=y}} */
* {{imbox}} (image message box) styles
.imbox {
*
margin: 4px 0;
* @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-enwp-boxes.css
border: 3px solid #36c;   /* Default "notice" blue */
* @revision 2021-07-15
background-color: var(--background-color-interactive-subtle, #f8f9fa);  
*/
table.imbox {
margin: 4px 10%;
border-collapse: collapse;
/* Default "notice" blue */
border: 3px solid var(--border-color-progressive, #36c);
background-color: var(--background-color-neutral-subtle, #f8f9fa);
box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
}
}


/* For imboxes inside imbox-text cells. */
/* For imboxes inside imbox-text cells. */
.imbox .mbox-text .imbox {
.imbox .mbox-text .imbox {
/* 0.9 - 0.5 = 0.4em left/right.       */
margin: 0 -0.6em; /* 1 - 0.6 = 0.4em left/right. */
margin: 0 -0.5em;
/* Fix for webkit to force 100% width.  */
display: block;
}
}


/* For imboxes inside other templates.  */
.imbox-speedy {
.mbox-inside .imbox {
border: 3px solid #b32424;    /* Red */
margin: 4px;
background-color: #fee7e6;   /* Pink */
}
}


/* An empty narrow cell */
.imbox-delete {
.imbox td.mbox-empty-cell {
border: 3px solid #b32424;   /* Red */
border: none;
padding: 0;
width: 1px;
}
}


/* The message body cell(s) */
.imbox-content {
.imbox th.mbox-text,
border: 3px solid #f28500;   /* Orange */
.imbox td.mbox-text {
border: none;
/* 0.9em left/right */
padding: 0.25em 0.9em;
/* Make all mboxes the same width regardless of text length */
width: 100%;
}
}


/* The left image cell */
.imbox-style {
.imbox td.mbox-image {
border: 3px solid #fc3;      /* Yellow */
/* 0.9em left, 0px right */
/* @noflip */
padding: 2px 0 2px 0.9em;
}
}


/* The right image cell */
.imbox-move {
.imbox td.mbox-imageright {
border: 3px solid #9932cc;    /* Purple */
/* 0px left, 0.9em right */
/* @noflip */
padding: 2px 0.9em 2px 0;
}
}


table.imbox-notice {
.imbox-protection {
/* Blue */
border: 3px solid #a2a9b1;    /* Gray-gold */
border-color: #36c;
}
}


table.imbox-speedy {
.imbox-license {
/* Pink */
border: 3px solid #88a;       /* Dark gray */
background-color: #fee7e6;
/* temp fix for dark mode */
color: #222;
}
}


table.imbox-delete,
.imbox-featured {
table.imbox-speedy {
border: 3px solid #cba135;   /* Brown-gold */
/* Red */
border-left-color: var(--border-color-destructive, #bf3c2c);
border-bottom-color: var(--border-color-destructive, #bf3c2c);
border-right-color: var(--border-color-destructive, #bf3c2c);
border-top-color: var(--border-color-destructive, #bf3c2c);
}
}


table.imbox-content {
.imbox .mbox-text {
/* Orange */
padding: 0.35em 1em;
border-color: #f28500;
flex: 1 1 100%;
}
}


table.imbox-style {
.imbox .mbox-image,
/* Yellow */
.imbox .mbox-imageright {
border-color: #fc3;
padding: 4px 2px;
text-align: center;
flex: none;
}
}


table.imbox-move {
/* keep synced with each other type of message box as this isn't qualified */
/* Purple */
.mbox-invalid-type {
border-color: #9932cc;
text-align: center;
}
}


table.imbox-protection {
@media (min-width: 480px) {
/* Gray-gold */
.imbox:not(.mbox-with-below),
border-left-color: var(--border-color-base, #a2a9b1);
.imbox .mbox-flex {
border-bottom-color: var(--border-color-base, #a2a9b1);
display: flex;
border-right-color: var(--border-color-base, #a2a9b1);
align-items: center;
border-top-color: var(--border-color-base, #a2a9b1);
}
 
.imbox .mbox-image {
/* @noflip */
padding-left: 1em;
}
.imbox .mbox-imageright {
/* @noflip */
padding-right: 1em;
}
}
 
@media (min-width: 640px) {
.imbox {
margin: 4px 10%;
}
}
}


table.imbox-license {
@media screen {
/* Dark gray */
    html.skin-theme-clientpref-night .imbox-speedy {
border-left-color: var(--border-color-notice, #72777d);
background-color: #310402;   /* Dark red, same hue/saturation as light */
border-bottom-color: var(--border-color-notice, #72777d);
}
border-right-color: var(--border-color-notice, #72777d);
border-top-color: var(--border-color-notice, #72777d);
/* Light gray */
background-color: var(--background-color-neutral-subtle, #f8f9fa);
}
}


table.imbox-featured {
@media screen and (prefers-color-scheme: dark) {
/* Brown-gold */
html.skin-theme-clientpref-os .imbox-speedy {
border-color: #cba135;
background-color: #310402; /* Dark red, same hue/saturation as light */
}
}
}
Retrieved from "https://wiki.pronounmail.com/wiki/Module:Message_box/imbox.css"