Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

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

From Mechsploit.me Wiki
m Protected "Module:Message box/imbox.css" ([Edit=Allow only autoconfirmed users] (indefinite) [Move=Allow only autoconfirmed users] (indefinite))
 
w>Izno
english
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
* @revision 2021-07-15
*/
table.imbox {
margin: 4px 10%;
border-collapse: collapse;
border-collapse: collapse;
/* Default "notice" blue */
border: 3px solid #36c;    /* Default "notice" blue */
border: 3px solid var(--border-color-progressive, #36c);
background-color: var(--background-color-interactive-subtle, #f8f9fa);  
background-color: var(--background-color-neutral-subtle, #f8f9fa);
box-sizing: border-box;
box-sizing: border-box;
}
}
Line 16: Line 10:
/* 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.5em; /* 0.9 - 0.5 = 0.4em left/right. */
margin: 0 -0.5em;
/* TODO: Still needed? */
/* Fix for webkit to force 100% width.  */
display: block; /* 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 */
border: none;
border-color: #f28500;
/* @noflip */
padding: 0.25em 0.9em;
width: 100%;
}
}


table.imbox-style {
.imbox .mbox-image {
/* Yellow */
border: none;
border-color: #fc3;
/* @noflip */
padding: 2px 0 2px 0.9em;
text-align: center;
}
}


table.imbox-move {
.imbox .mbox-imageright {
/* Purple */
border: none;
border-color: #9932cc;
/* @noflip */
padding: 2px 0.9em 2px 0;
text-align: center;
}
 
/* An empty narrow cell */
.imbox .mbox-empty-cell {
border: none;
padding: 0;
width: 1px;
}
}


table.imbox-protection {
/* keep synced with each other type of message box as this isn't qualified */
/* Gray-gold */
.mbox-invalid-type {
border-left-color: var(--border-color-base, #a2a9b1);
text-align: center;
border-bottom-color: var(--border-color-base, #a2a9b1);
border-right-color: var(--border-color-base, #a2a9b1);
border-top-color: var(--border-color-base, #a2a9b1);
}
}


table.imbox-license {
@media (min-width: 720px) {
/* Dark gray */
.imbox {
border-left-color: var(--border-color-notice, #72777d);
margin: 4px 10%;
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 {
/* Brown-gold */
    html.skin-theme-clientpref-night .imbox-speedy {
border-color: #cba135;
background-color: #310402;    /* Dark red, same hue/saturation as light */
}
}
}


@media screen and (max-width: 720px) {
@media screen and (prefers-color-scheme: dark) {
  table.imbox {
html.skin-theme-clientpref-os .imbox-speedy {
margin: 4px auto;
background-color: #310402; /* Dark red, same hue/saturation as light */
  }
}
}
}

Revision as of 02:06, 29 August 2025

/* {{pp|small=y}} */
.imbox {
	margin: 4px 0;
	border-collapse: collapse;
	border: 3px solid #36c;    /* Default "notice" blue */
	background-color: var(--background-color-interactive-subtle, #f8f9fa); 
	box-sizing: border-box;
}

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

.imbox-speedy {
	border: 3px solid #b32424;    /* Red */
	background-color: #fee7e6;    /* Pink */
}

.imbox-delete {
	border: 3px solid #b32424;    /* Red */
}

.imbox-content {
	border: 3px solid #f28500;    /* Orange */
}

.imbox-style {
	border: 3px solid #fc3;       /* Yellow */
}

.imbox-move {
	border: 3px solid #9932cc;    /* Purple */
}

.imbox-protection {
	border: 3px solid #a2a9b1;    /* Gray-gold */
}

.imbox-license {
	border: 3px solid #88a;       /* Dark gray */
}

.imbox-featured {
	border: 3px solid #cba135;    /* Brown-gold */
}

.imbox .mbox-text {
	border: none;
	/* @noflip */
	padding: 0.25em 0.9em;
	width: 100%;
}

.imbox .mbox-image {
	border: none;
	/* @noflip */
	padding: 2px 0 2px 0.9em;
	text-align: center;
}

.imbox .mbox-imageright {
	border: none;
	/* @noflip */
	padding: 2px 0.9em 2px 0;
	text-align: center;
}

/* An empty narrow cell */
.imbox .mbox-empty-cell {
	border: none;
	padding: 0;
	width: 1px;
}

/* keep synced with each other type of message box as this isn't qualified */
.mbox-invalid-type {
	text-align: center;
}

@media (min-width: 720px) {
	.imbox {
		margin: 4px 10%;
	}
}

@media screen {
    html.skin-theme-clientpref-night .imbox-speedy {
		background-color: #310402;    /* Dark red, same hue/saturation as light */
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .imbox-speedy {
		background-color: #310402; /* Dark red, same hue/saturation as light */
	}
}