Template:Divbox/styles.css

/* {{pp-template}} */

/* If you add new styles, please also add a dark mode equivalent */

.divbox {
	padding: 1em;
	margin: 0.5em;
	color: inherit;
}

.divbox .divbox-heading {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	font-weight: bold;
	text-align: center;
}

.divbox-amber {
	background-color: #ffffcc;
	border: 1px solid #663300;
}

.divbox-berk {
	background-color: #b78727;
	border: 1px solid #0f4d92;
}

.divbox-black {
	background-color: black;
	border: 1px solid white;
	color: white;
	font-weight: bold;
}

.divbox-bloodred {
	background-color: #ff3333;
	border: 1px solid #cc0000;
	font-weight: bold;
}

.divbox-blue {
	background-color: #dee;
	border: 1px solid #0000cc;
}

.divbox-brown {
	background-color: #f2deb8;
	border: 1px solid #663300;
}

.divbox-darkgreen {
	background-color: #006a4d;
	color: #ffffff;
	border: 4px solid #ffffff;
	border-radius: 5em;
	box-shadow: 0.1em 0.1em 0.5em rgba( 0, 0, 0, 0.75 );
}

.divbox-docgreen {
	background-color: #ecfcf4;
	border: 1px solid #aaaaaa;
}

.divbox-double {
	background-color: inherit;
	color: inherit;
	border: 1px double #000000;
	letter-spacing: 0.5em;
}

.divbox-email {
	font-weight: bold;
	margin-left: 2em;
	border: black solid 1px;
	border-style: dotted solid dotted solid;
	background: palegreen;
}

.divbox-fawn {
	border: 1px solid #cd853f;
	background-color: #fff8dc;
	border-radius: 10px;
}

.divbox-forest {
	background-color: #b5dbaf;
	border: 1px solid #006633;
}

.divbox-gold {
	background-color: #cc0;
	border: 1px solid #f00;
}

.divbox-gray,
.divbox-grey {
	background-color: #eeeeee;
	border: 1px solid #999999;
}

.divbox-gray99,
.divbox-grey99 {
	background-color: #f9f9f9;
	border: 1px solid #dddddd;
}

.divbox-grayh,
.divbox-greyh {
	background: transparent;
	color: inherit;
	border: solid 4px lightgray;
	border-left: none;
	border-right: none;
	color: gray;
}

.divbox-green {
	background-color: #ccffcc;
	border: 1px solid #009900;
}

.divbox-greenv {
	background: transparent;
	color: inherit;
	border: solid 8px lightgreen;
	border-top: none;
	border-bottom: none;
}

.divbox-ivory {
	border: 1px solid #0000ff;
	background-color: #fffff0;
	border-radius: 10px;
}

.divbox-lavender {
	background-color: #e6e6fa;
	font-size: 11pt;
	border: 1px solid #7d00b3;
}

.divbox-lightblue {
	background-color: #f0f8ff;
	border: 1px solid #7cb9e8;
}

.divbox-lilac {
	background-color: #c8a2c8;
	border: 1px solid silver;
}

.divbox-n {
	border: 7px solid #0ff0ff;
	background-color: #f0fff0;
	border-radius: 25px;
}

.divbox-navy {
	background-color: #aadbe0;
	border: 1px solid #00477b;
}

.divbox-none {
	border: 1px hidden;
	color: inherit;
}

.divbox-nyanza {
	background-color: #e9ffdb;
	font-size: 11pt;
	border: 1px solid #7d00b3;
}

.divbox-orange {
	background-color: #ffdeb5;
	border: 1px solid #ff6600;
}

.divbox-plain {
	background-color: inherit;
	color: inherit;
	border: 1px solid #000000;
}

.divbox-purple {
	background-color: #ffdaff;
	border: 1px solid #7d00b3;
}

.divbox-red {
	background-color: #ffcccc;
	border: 1px solid #cc0000;
}

.divbox-sia {
	background-color: #cccccc;
	border: 1px solid #6881b9;
}

.divbox-siaaa {
	background-color: #d5dceb;
	border: 1px solid #6881b9;
}

.divbox-simar {
	background-color: #f2deb8;
	border: 4px solid #810541;
	border-radius: 5em;
}

.divbox-teal {
	background-color: #008080;
	border: 1px solid #40e0d0;
}

.divbox-thistle {
	background-color: #d8bfd8;
	font-size: 11pt;
	border: 1px solid #7d00b3;
}

.divbox-tt {
	background-color: transparent;
	color: darkblue;
	border: 1px solid grey;
}

.divbox-wdl {
	background-color: #cee3f6;
	border: 1px solid #cee3f6;
}

.divbox-white {
	background-color: #ffffff;
	border: 1px solid #000000;
}

.divbox-wordperfect {
	background-color: blue;
	color: white;
	border: 1px solid #0000cc;
}

/* "monospace, monospace" per [[WP:MONO]] */
.divbox-email,
.divbox-tt,
.divbox-wordperfect {
	font-family: monospace, monospace;
}

.divbox-yellow {
	background-color: #ffffcc;
	border: 1px solid #ffcc00;
}

/* Dark mode overrides */
html.skin-theme-clientpref-night .divbox {
	background-color: #1a1f24;
	border-color: #2a2f35;
}

/* Specific divbox variants */
html.skin-theme-clientpref-night .divbox-amber {
	background-color: #4a3a1a;
	border-color: #d2a84a;
}

html.skin-theme-clientpref-night .divbox-berk {
	background-color: #5c4820;
	border-color: #3a6ea0;
}

html.skin-theme-clientpref-night .divbox-black {
	background-color: #000;
	border-color: #aaa;
	color: #eee; /* explicit in original */
}

html.skin-theme-clientpref-night .divbox-bloodred {
	background-color: #661a1a;
	border-color: #992222;
	color: #ff9999; /* added for contrast */
}

html.skin-theme-clientpref-night .divbox-blue {
	background-color: #1e2a40;
	border-color: #6699ff;
}

html.skin-theme-clientpref-night .divbox-brown {
	background-color: #4a3a28;
	border-color: #a67c52;
}

html.skin-theme-clientpref-night .divbox-darkgreen {
	background-color: #004d33;
	border-color: #ccc;
	color: #fff; /* explicit in original */
}

html.skin-theme-clientpref-night .divbox-docgreen {
	background-color: #1d2a24;
	border-color: #567d67;
}

html.skin-theme-clientpref-night .divbox-double {
	background-color: inherit;
	border-color: #666;
	color: #e0e0e0; /* explicit in original */
}

html.skin-theme-clientpref-night .divbox-email {
	background-color: #2a3a2a;
	border-color: #4caf50;
}

html.skin-theme-clientpref-night .divbox-fawn {
	background-color: #3a2f24;
	border-color: #a67c52;
}

html.skin-theme-clientpref-night .divbox-forest {
	background-color: #234022;
	border-color: #5bbd6a;
}

html.skin-theme-clientpref-night .divbox-gold {
	background-color: #5c4a00;
	border-color: #d2691e;
}

html.skin-theme-clientpref-night .divbox-gray,
html.skin-theme-clientpref-night .divbox-grey {
	background-color: #2a2a2a;
	border-color: #555;
}

html.skin-theme-clientpref-night .divbox-gray99,
html.skin-theme-clientpref-night .divbox-grey99 {
	background-color: #202225;
	border-color: #444;
}

html.skin-theme-clientpref-night .divbox-grayh,
html.skin-theme-clientpref-night .divbox-greyh {
	background: transparent;
	border-color: #888;
	color: #aaa; /* explicit in original */
}

html.skin-theme-clientpref-night .divbox-green {
	background-color: #1c3a1c;
	border-color: #2e8b57;
}

html.skin-theme-clientpref-night .divbox-greenv {
	background: transparent;
	border-color: #4caf50;
	color: #e0e0e0; /* explicit in original */
}

html.skin-theme-clientpref-night .divbox-ivory {
	background-color: #2a2a1a;
	border-color: #4466cc;
}

html.skin-theme-clientpref-night .divbox-lavender {
	background-color: #2e2a40;
	border-color: #9a4db8;
}

html.skin-theme-clientpref-night .divbox-lightblue {
	background-color: #1a2a3a;
	border-color: #4c9ed9;
}

html.skin-theme-clientpref-night .divbox-lilac {
	background-color: #332a33;
	border-color: #888;
}

html.skin-theme-clientpref-night .divbox-n {
	background-color: #1f2a1f;
	border-color: #0ff0ff;
}

html.skin-theme-clientpref-night .divbox-navy {
	background-color: #1a2a33;
	border-color: #4a8bbf;
}

html.skin-theme-clientpref-night .divbox-none {
	background-color: inherit;
	border-color: transparent;
	color: #e0e0e0; /* explicit in original */
}

html.skin-theme-clientpref-night .divbox-nyanza {
	background-color: #1f2a1f;
	border-color: #9a4db8;
}

html.skin-theme-clientpref-night .divbox-orange {
	background-color: #402a1a;
	border-color: #e67e22;
}

html.skin-theme-clientpref-night .divbox-plain {
	background-color: inherit;
	border-color: #666;
	color: #e0e0e0; /* explicit in original */
}

html.skin-theme-clientpref-night .divbox-purple {
	background-color: #3a2040;
	border-color: #a64ca6;
}

html.skin-theme-clientpref-night .divbox-red {
	background-color: #402020;
	border-color: #a33;
}

html.skin-theme-clientpref-night .divbox-sia {
	background-color: #2a2a2a;
	border-color: #6881b9;
}

html.skin-theme-clientpref-night .divbox-siaaa {
	background-color: #2a2f40;
	border-color: #6881b9;
}

html.skin-theme-clientpref-night .divbox-simar {
	background-color: #3a2f24;
	border-color: #810541;
}

html.skin-theme-clientpref-night .divbox-teal {
	background-color: #004d4d;
	border-color: #20b2aa;
}

html.skin-theme-clientpref-night .divbox-thistle {
	background-color: #3a2a3a;
	border-color: #9a4db8;
}

html.skin-theme-clientpref-night .divbox-tt {
	background-color: transparent;
	border-color: #777;
	color: #9ac; /* explicit in original (darkblue adjusted) */
}

html.skin-theme-clientpref-night .divbox-wdl {
	background-color: #2a3a4a;
	border-color: #2a3a4a;
}

html.skin-theme-clientpref-night .divbox-white {
	background-color: #181c20;
	border-color: #555;
}

html.skin-theme-clientpref-night .divbox-wordperfect {
	background-color: #001a66;
	border-color: #3355cc;
	color: #eee; /* explicit in original */
}

html.skin-theme-clientpref-night .divbox-yellow {
	background-color: #4a4a1a;
	border-color: #d4b100;
}

/* Automatic dark mode */
@media screen and ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os .divbox {
		background-color: #1a1f24;
		border-color: #2a2f35;
	}
	
	/* Specific divbox variants */
	html.skin-theme-clientpref-os .divbox-amber {
		background-color: #4a3a1a;
		border-color: #d2a84a;
	}
	
	html.skin-theme-clientpref-os .divbox-berk {
		background-color: #5c4820;
		border-color: #3a6ea0;
	}
	
	html.skin-theme-clientpref-os .divbox-black {
		background-color: #000;
		border-color: #aaa;
		color: #eee; /* explicit in original */
	}
	
	html.skin-theme-clientpref-os .divbox-bloodred {
		background-color: #661a1a;
		border-color: #992222;
		color: #ff9999; /* added for contrast */
	}
	
	html.skin-theme-clientpref-os .divbox-blue {
		background-color: #1e2a40;
		border-color: #6699ff;
	}
	
	html.skin-theme-clientpref-os .divbox-brown {
		background-color: #4a3a28;
		border-color: #a67c52;
	}
	
	html.skin-theme-clientpref-os .divbox-darkgreen {
		background-color: #004d33;
		border-color: #ccc;
		color: #fff; /* explicit in original */
	}
	
	html.skin-theme-clientpref-os .divbox-docgreen {
		background-color: #1d2a24;
		border-color: #567d67;
	}
	
	html.skin-theme-clientpref-os .divbox-double {
		background-color: inherit;
		border-color: #666;
		color: #e0e0e0; /* explicit in original */
	}
	
	html.skin-theme-clientpref-os .divbox-email {
		background-color: #2a3a2a;
		border-color: #4caf50;
	}
	
	html.skin-theme-clientpref-os .divbox-fawn {
		background-color: #3a2f24;
		border-color: #a67c52;
	}
	
	html.skin-theme-clientpref-os .divbox-forest {
		background-color: #234022;
		border-color: #5bbd6a;
	}
	
	html.skin-theme-clientpref-os .divbox-gold {
		background-color: #5c4a00;
		border-color: #d2691e;
	}
	
	html.skin-theme-clientpref-os .divbox-gray,
	html.skin-theme-clientpref-os .divbox-grey {
		background-color: #2a2a2a;
		border-color: #555;
	}
	
	html.skin-theme-clientpref-os .divbox-gray99,
	html.skin-theme-clientpref-os .divbox-grey99 {
		background-color: #202225;
		border-color: #444;
	}
	
	html.skin-theme-clientpref-os .divbox-grayh,
	html.skin-theme-clientpref-os .divbox-greyh {
		background: transparent;
		border-color: #888;
		color: #aaa; /* explicit in original */
	}
	
	html.skin-theme-clientpref-os .divbox-green {
		background-color: #1c3a1c;
		border-color: #2e8b57;
	}
	
	html.skin-theme-clientpref-os .divbox-greenv {
		background: transparent;
		border-color: #4caf50;
		color: #e0e0e0; /* explicit in original */
	}
	
	html.skin-theme-clientpref-os .divbox-ivory {
		background-color: #2a2a1a;
		border-color: #4466cc;
	}
	
	html.skin-theme-clientpref-os .divbox-lavender {
		background-color: #2e2a40;
		border-color: #9a4db8;
	}
	
	html.skin-theme-clientpref-os .divbox-lightblue {
		background-color: #1a2a3a;
		border-color: #4c9ed9;
	}
	
	html.skin-theme-clientpref-os .divbox-lilac {
		background-color: #332a33;
		border-color: #888;
	}
	
	html.skin-theme-clientpref-os .divbox-n {
		background-color: #1f2a1f;
		border-color: #0ff0ff;
	}
	
	html.skin-theme-clientpref-os .divbox-navy {
		background-color: #1a2a33;
		border-color: #4a8bbf;
	}
	
	html.skin-theme-clientpref-os .divbox-none {
		background-color: inherit;
		border-color: transparent;
		color: #e0e0e0; /* explicit in original */
	}
	
	html.skin-theme-clientpref-os .divbox-nyanza {
		background-color: #1f2a1f;
		border-color: #9a4db8;
	}
	
	html.skin-theme-clientpref-os .divbox-orange {
		background-color: #402a1a;
		border-color: #e67e22;
	}
	
	html.skin-theme-clientpref-os .divbox-plain {
		background-color: inherit;
		border-color: #666;
		color: #e0e0e0; /* explicit in original */
	}
	
	html.skin-theme-clientpref-os .divbox-purple {
		background-color: #3a2040;
		border-color: #a64ca6;
	}
	
	html.skin-theme-clientpref-os .divbox-red {
		background-color: #402020;
		border-color: #a33;
	}
	
	html.skin-theme-clientpref-os .divbox-sia {
		background-color: #2a2a2a;
		border-color: #6881b9;
	}
	
	html.skin-theme-clientpref-os .divbox-siaaa {
		background-color: #2a2f40;
		border-color: #6881b9;
	}
	
	html.skin-theme-clientpref-os .divbox-simar {
		background-color: #3a2f24;
		border-color: #810541;
	}
	
	html.skin-theme-clientpref-os .divbox-teal {
		background-color: #004d4d;
		border-color: #20b2aa;
	}
	
	html.skin-theme-clientpref-os .divbox-thistle {
		background-color: #3a2a3a;
		border-color: #9a4db8;
	}
	
	html.skin-theme-clientpref-os .divbox-tt {
		background-color: transparent;
		border-color: #777;
		color: #9ac; /* explicit in original (darkblue adjusted) */
	}
	
	html.skin-theme-clientpref-os .divbox-wdl {
		background-color: #2a3a4a;
		border-color: #2a3a4a;
	}
	
	html.skin-theme-clientpref-os .divbox-white {
		background-color: #181c20;
		border-color: #555;
	}
	
	html.skin-theme-clientpref-os .divbox-wordperfect {
		background-color: #001a66;
		border-color: #3355cc;
		color: #eee; /* explicit in original */
	}
	
	html.skin-theme-clientpref-os .divbox-yellow {
		background-color: #4a4a1a;
		border-color: #d4b100;
	}
}