Template:Brimstone/styles.css - Revision history

SomebodyRum at 14:59, 20 April 2026

2026-04-20T14:59:23Z

← Older revision		Revision as of 14:59, 20 April 2026
Line 97:		Line 97:
	background: rgba(0, 0, 0, 0.85);		background: rgba(0, 0, 0, 0.85);
	color: #eee;		color: #eee;
	~~border-radius: 8px; /* Round corners kept only on the inventory frame */~~
	padding: 15px;		padding: 15px;
	font-family: sans-serif;		font-family: sans-serif;

SomebodyRum at 14:58, 20 April 2026

2026-04-20T14:58:02Z

← Older revision		Revision as of 14:58, 20 April 2026
Line 1:		Line 1:
	/*		/*
	BRIMSTONE HAZARD LABEL & INVENTORY CSS		BRIMSTONE HAZARD LABEL & INVENTORY CSS
	~~Sharp OSHA~~-~~style warning sign~~		Shrink-wrapped (Sanitizer-safe) with larger bottom text
	*/		*/

	.brim-wrapper {		.brim-wrapper {
	margin: 1em auto;		margin: 1em auto;
	~~max-width~~: ~~450px~~;		display: table; /* MAGIC FIX: Shrink-wraps the container safely */
	font-family: "Arial Black", "Arial Bold", sans-serif;		font-family: "Arial Black", "Arial Bold", sans-serif;
	}		}

	/* THE CLICKABLE STICKER ~~- Sharp corners, reduced padding~~ */		/* THE CLICKABLE STICKER */
	.brim-sticker {		.brim-sticker {
	background: #fff;		background: #fff;
	border: 4px solid #000;		border: 4px solid #000;
	border-radius: 0; ~~/* Removed round corners */~~		border-radius: 0;
	cursor: pointer;		cursor: pointer;
	user-select: none;		user-select: none;
Line 20:		Line 20:
	transition: transform 0.1s ease, box-shadow 0.1s ease;		transition: transform 0.1s ease, box-shadow 0.1s ease;
	overflow: hidden;		overflow: hidden;
			display: flex;
			flex-direction: column;
	}		}

Line 27:		Line 29:
	}		}

	/* TOP HEADER~~: Tightened up~~ */		/* TOP HEADER */
	.brim-sticker-head {		.brim-sticker-head {
	background: #ffcc00;		background: #ffcc00;
	border-bottom: 4px solid #000;		border-bottom: 4px solid #000;
	padding: ~~6px 10px~~; /* ~~Reduced~~ padding */		padding: 8px 12px; /* Very tight padding */
	text-align: center;		text-align: center;
	font-size: ~~2em~~;		font-size: 2.1em; /* Larger header */
	font-weight: 900;		font-weight: 900;
	color: #000;		color: #000;
Line 48:		Line 50:
	background: #000;		background: #000;
	padding: 4px 10px;		padding: 4px 10px;
	border-radius: 0; ~~/* Removed round corners */~~		border-radius: 0;
	display: inline-block;		display: inline-block;
	}		}

	~~/* Removes underlines if the wiki forces them on links inside the highlight */~~
	.brim-sticker-head .brim-hl a {		.brim-sticker-head .brim-hl a {
	text-decoration: none !important;		text-decoration: none !important;
Line 65:		Line 66:
	/* Left side: The Icon */		/* Left side: The Icon */
	.brim-sticker-icon {		.brim-sticker-icon {
	padding: ~~8px 12px~~; ~~/* Reduced padding */~~		padding: 10px 15px;
	border-right: 4px solid #000;		border-right: 4px solid #000;
	display: flex;		display: flex;
Line 74:		Line 75:
	/* Right side: The Warning Text */		/* Right side: The Warning Text */
	.brim-sticker-text {		.brim-sticker-text {
	padding: ~~8px 15px~~; ~~/* Reduced padding */~~		padding: 10px 18px;
	color: #000;		color: #000;
	font-size: 1.~~4em~~;		font-size: 1.8em; /* BIG MAIN TEXT */
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
	justify-content: center;		justify-content: center;
	line-height: 1.1; ~~/* Tighter line spacing */~~		line-height: 1.1;
	}		}

Line 86:		Line 87:
	font-family: Arial, sans-serif;		font-family: Arial, sans-serif;
	font-weight: bold;		font-weight: bold;
	font-size: 0.~~65em~~;		font-size: 0.75em; /* BIG SUBTEXT */
	margin-top: ~~4px~~;		margin-top: 6px;
	color: #333;		color: #333;
	}		}
Line 96:		Line 97:
	background: rgba(0, 0, 0, 0.85);		background: rgba(0, 0, 0, 0.85);
	color: #eee;		color: #eee;
	border-radius: 8px; /* ~~Kept round~~ corners ~~for~~ the inventory frame ~~as requested~~ */		border-radius: 8px; /* Round corners kept only on the inventory frame */
	padding: 15px;		padding: 15px;
	font-family: sans-serif;		font-family: sans-serif;

SomebodyRum at 14:54, 20 April 2026

2026-04-20T14:54:50Z

← Older revision		Revision as of 14:54, 20 April 2026
Line 1:		Line 1:
	/*		/*
	BRIMSTONE HAZARD LABEL & INVENTORY CSS		BRIMSTONE HAZARD LABEL & INVENTORY CSS
	OSHA-style warning sign ~~that acts as a clickable UI button~~		Sharp OSHA-style warning sign
	*/		*/

Line 10:		Line 10:
	}		}

	/* THE CLICKABLE STICKER */		/* THE CLICKABLE STICKER - Sharp corners, reduced padding */
	.brim-sticker {		.brim-sticker {
	background: #fff;		background: #fff;
	border: 4px solid #000;		border: 4px solid #000;
	border-radius: ~~8px~~; /* ~~Slightly rounded~~ corners */		border-radius: 0; /* Removed round corners */
	cursor: pointer;		cursor: pointer;
	user-select: none;		user-select: none;
Line 22:		Line 22:
	}		}

	~~/* Push down slightly when clicked */~~
	.brim-sticker:active {		.brim-sticker:active {
	transform: scale(0.98);		transform: scale(0.98);
Line 28:		Line 27:
	}		}

	/* TOP HEADER: ~~Yellow background~~ */		/* TOP HEADER: Tightened up */
	.brim-sticker-head {		.brim-sticker-head {
	background: #ffcc00;		background: #ffcc00;
	border-bottom: 4px solid #000;		border-bottom: 4px solid #000;
	padding: 10px;		padding: 6px 10px; /* Reduced padding */
	text-align: center;		text-align: center;
	font-size: 2em;		font-size: 2em;
Line 42:		Line 41:
	gap: 12px;		gap: 12px;
	text-transform: uppercase;		text-transform: uppercase;
			line-height: 1;
	}		}

Line 47:		Line 47:
	.brim-sticker-head .brim-hl {		.brim-sticker-head .brim-hl {
	background: #000;		background: #000;
	~~color: #ffcc00;~~		padding: 4px 10px;
	padding: ~~2px~~ 10px;		border-radius: 0; /* Removed round corners */
	border-radius: ~~4px~~;		display: inline-block;
	~~font~~-~~size: 0.9em~~;
	}		}

	/* BOTTOM SECTION~~: Splits Icon and Text~~ */		/* Removes underlines if the wiki forces them on links inside the highlight */
			.brim-sticker-head .brim-hl a {
			text-decoration: none !important;
			}

			/* BOTTOM SECTION */
	.brim-sticker-body {		.brim-sticker-body {
	display: flex;		display: flex;
Line 61:		Line 65:
	/* Left side: The Icon */		/* Left side: The Icon */
	.brim-sticker-icon {		.brim-sticker-icon {
	padding: ~~15px 20px~~;		padding: 8px 12px; /* Reduced padding */
	border-right: 4px solid #000;		border-right: 4px solid #000;
	display: flex;		display: flex;
Line 70:		Line 74:
	/* Right side: The Warning Text */		/* Right side: The Warning Text */
	.brim-sticker-text {		.brim-sticker-text {
	padding: 15px;		padding: 8px 15px; /* Reduced padding */
	color: #000;		color: #000;
	font-size: 1.4em;		font-size: 1.4em;
Line 76:		Line 80:
	flex-direction: column;		flex-direction: column;
	justify-content: center;		justify-content: center;
	line-height: 1.2;		line-height: 1.1; /* Tighter line spacing */
	}		}

Line 83:		Line 87:
	font-weight: bold;		font-weight: bold;
	font-size: 0.65em;		font-size: 0.65em;
	margin-top: ~~8px~~;		margin-top: 4px;
	color: #333;		color: #333;
	}		}
Line 89:		Line 93:
	/* THE INVENTORY PANEL */		/* THE INVENTORY PANEL */
	.brim-inventory {		.brim-inventory {
	margin-top: 10px; ~~/* Small gap between the sticker and the inventory frame */~~		margin-top: 10px;
	background: rgba(0, 0, 0, 0.85); ~~/* Semi-transparent black */~~		background: rgba(0, 0, 0, 0.85);
	color: #eee;		color: #eee;
	border-radius: 8px; /* ~~Round~~ corners */		border-radius: 8px; /* Kept round corners for the inventory frame as requested */
	padding: ~~20px~~;		padding: 15px;
	font-family: sans-serif; ~~/* Returns to standard readable font for content */~~		font-family: sans-serif;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);		box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	line-height: 1.5;		line-height: 1.5;
	}		}

	~~/* Hides MediaWiki's auto-generated toggle bracket */~~
	.brim-wrapper .mw-collapsible-toggle {		.brim-wrapper .mw-collapsible-toggle {
	display: none !important;		display: none !important;
	}		}

SomebodyRum at 14:50, 20 April 2026

2026-04-20T14:50:50Z

Show changes

SomebodyRum at 14:30, 20 April 2026

2026-04-20T14:30:31Z

Show changes

SomebodyRum at 14:25, 20 April 2026

2026-04-20T14:25:27Z

Show changes

SomebodyRum at 14:08, 20 April 2026

2026-04-20T14:08:20Z

← Older revision		Revision as of 14:08, 20 April 2026
Line 1:		Line 1:
	/*		/*
	BRIMSTONE CONTAINMENT CSS		BRIMSTONE CONTAINMENT CSS
	~~Sanitizer-~~safe ~~HTML details/summary container~~		Uses standard MediaWiki custom toggles (100% parser safe)
	*/		*/

Line 25:		Line 25:
	position: relative;		position: relative;
	border-bottom: 3px solid #bfc200;		border-bottom: 3px solid #bfc200;
	~~display: block;~~
	cursor: pointer;		cursor: pointer;
	~~list~~-~~style~~: none; ~~/* Removes native dropdown arrow */~~		user-select: none;
	}		}

Line 82:		Line 81:
	color: #000;		color: #000;
	box-shadow: 0 0 12px rgba(191, 194, 0, 0.8);		box-shadow: 0 0 12px rgba(191, 194, 0, 0.8);
	}

	/*
	~~Button Swap Logic~~
	~~Safely uses attribute selectors supported by MediaWiki~~
	*/
	~~.brim-btn-collapse {~~
	~~display: none;~~
	}
	~~.brim-box[open] .brim-btn-expand {~~
	~~display: none;~~
	}
	~~.brim-box[open] .brim-btn-collapse {~~
	~~display: inline-block;~~
	}		}

Line 102:		Line 87:
	background: #110005;		background: #110005;
	color: #e0e0e0;		color: #e0e0e0;
	~~border-top: 1px solid #000;~~
	line-height: 1.6;		line-height: 1.6;
			}

			/* FORCES MEDIAWIKI TO HIDE ITS DEFAULT TOGGLE BUTTON */
			.brim-box .mw-collapsible-toggle {
			display: none !important;
	}		}

SomebodyRum at 14:06, 20 April 2026

2026-04-20T14:06:13Z

← Older revision		Revision as of 14:06, 20 April 2026
Line 1:		Line 1:
	/*		/*
	BRIMSTONE CONTAINMENT CSS		BRIMSTONE CONTAINMENT CSS
	~~Industrial hazard crate design.~~		Sanitizer-safe HTML details/summary container
	*/		*/

Line 11:		Line 11:
	border-radius: 6px;		border-radius: 6px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.6);		box-shadow: 0 5px 15px rgba(0,0,0,0.6);
	~~overflow: hidden;~~
	font-family: sans-serif;		font-family: sans-serif;
	}		}
Line 22:		Line 21:
	#1a0005 15px,		#1a0005 15px,
	#1a0005 30px		#1a0005 30px
	); ~~/* Dark maroon hazard stripes */~~		);
	padding: 20px 15px;		padding: 20px 15px;
	~~display: flex;~~
	~~flex-direction: column;~~
	~~align-items: center;~~
	position: relative;		position: relative;
	border-bottom: 3px solid #bfc200;		border-bottom: 3px solid #bfc200;
			display: block;
			cursor: pointer;
			list-style: none; /* Removes native dropdown arrow */
	}		}

	/* Yellow Hazard Tape at the ~~very~~ top */		/* Yellow Hazard Tape at the top */
	.brim-header::before {		.brim-header::before {
	content: "";		content: "";
Line 47:		Line 46:

	.brim-title {		.brim-title {
	~~order: 1; /* Flexbox trick: Keeps title above the auto-injected toggle */~~
	font-size: 1.5em;		font-size: 1.5em;
	font-weight: 900;		font-weight: 900;
Line 60:		Line 58:
	}		}

	.brim-~~title img~~ {		.brim-btn-container {
	~~border~~-~~radius~~: ~~50%~~;		text-align: center;
	~~background~~: ~~#fff~~; ~~/* In case the doctos.png needs a backdrop to pop */~~		margin-top: 15px;
	}		}

	~~/* MediaWiki's auto-generated Expand/Collapse button styling */~~		.brim-btn {
	.brim-~~header .mw-collapsible-toggle {~~
	~~order: 2; /* Flexbox trick: Forces the button below the title */~~
	~~float: none !important;~~
	~~margin: 15px 0 0 0;~~
	~~font-size: 0; /* Hides the default MediaWiki [ ] brackets */~~
	}

	~~.brim-header .mw-collapsible-toggle a~~ {
	display: inline-block;		display: inline-block;
	background: #000;		background: #000;
	color: #bfc200;		color: #bfc200;
	font-size: 14px; ~~/* Restores text size inside the hidden-bracket wrapper */~~		font-size: 14px;
	font-weight: bold;		font-weight: bold;
	padding: 8px 16px;		padding: 8px 16px;
	border: 2px solid #bfc200;		border: 2px solid #bfc200;
	border-radius: 4px;		border-radius: 4px;
	~~text-decoration: none;~~
	text-transform: uppercase;		text-transform: uppercase;
	letter-spacing: 1px;		letter-spacing: 1px;
Line 88:		Line 77:
	}		}

	.brim-header ~~.mw-collapsible-toggle a~~:hover,		/* Hover effects for the whole banner */
	.brim-~~header .mw-collapsible-toggle a:focus~~ {		.brim-header:hover .brim-btn {
	background: #bfc200;		background: #bfc200;
	color: #000;		color: #000;
	box-shadow: 0 0 12px rgba(191, 194, 0, 0.8);		box-shadow: 0 0 12px rgba(191, 194, 0, 0.8);
			}

			/*
			Button Swap Logic
			Safely uses attribute selectors supported by MediaWiki
			*/
			.brim-btn-collapse {
			display: none;
			}
			.brim-box[open] .brim-btn-expand {
			display: none;
			}
			.brim-box[open] .brim-btn-collapse {
			display: inline-block;
	}		}

	.brim-content {		.brim-content {
	padding: 20px;		padding: 20px;
	background: #110005; ~~/* Deep, dark vile interior */~~		background: #110005;
	color: #e0e0e0;		color: #e0e0e0;
	border-top: 1px solid #000;		border-top: 1px solid #000;
	line-height: 1.6;		line-height: 1.6;
	}		}

SomebodyRum: testing...

2026-04-20T14:02:34Z

testing...

New page

/*
BRIMSTONE CONTAINMENT CSS
Industrial hazard crate design.
*/

.brim-box {
margin: 1em auto;
border: 2px solid #530014;
background: #0a0a0a;
max-width: 800px;
border-radius: 6px;
box-shadow: 0 5px 15px rgba(0,0,0,0.6);
overflow: hidden;
font-family: sans-serif;
}

.brim-header {
background: repeating-linear-gradient(
-45deg,
#2a000a,
#2a000a 15px,
#1a0005 15px,
#1a0005 30px
); /* Dark maroon hazard stripes */
padding: 20px 15px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
border-bottom: 3px solid #bfc200;
}

/* Yellow Hazard Tape at the very top */
.brim-header::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 8px;
background: repeating-linear-gradient(
45deg,
#000,
#000 10px,
#bfc200 10px,
#bfc200 20px
);
}

.brim-title {
order: 1; /* Flexbox trick: Keeps title above the auto-injected toggle */
font-size: 1.5em;
font-weight: 900;
color: #bfc200;
text-align: center;
text-shadow: 0 0 8px rgba(191, 194, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 5px;
}

.brim-title img {
border-radius: 50%;
background: #fff; /* In case the doctos.png needs a backdrop to pop */
}

/* MediaWiki's auto-generated Expand/Collapse button styling */
.brim-header .mw-collapsible-toggle {
order: 2; /* Flexbox trick: Forces the button below the title */
float: none !important;
margin: 15px 0 0 0;
font-size: 0; /* Hides the default MediaWiki [ ] brackets */
}

.brim-header .mw-collapsible-toggle a {
display: inline-block;
background: #000;
color: #bfc200;
font-size: 14px; /* Restores text size inside the hidden-bracket wrapper */
font-weight: bold;
padding: 8px 16px;
border: 2px solid #bfc200;
border-radius: 4px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease-in-out;
}

.brim-header .mw-collapsible-toggle a:hover,
.brim-header .mw-collapsible-toggle a:focus {
background: #bfc200;
color: #000;
box-shadow: 0 0 12px rgba(191, 194, 0, 0.8);
}

.brim-content {
padding: 20px;
background: #110005; /* Deep, dark vile interior */
color: #e0e0e0;
border-top: 1px solid #000;
line-height: 1.6;
}