Template:CreateHub/styles.css - Revision history

C at 15:09, 24 November 2025

2025-11-24T15:09:01Z

← Older revision		Revision as of 15:09, 24 November 2025
Line 1:		Line 1:
	~~/* =========================================~~
	~~CONTAINER~~
	~~========================================= */~~
	.creation-row {		.creation-row {
	margin: 10px 0;		margin: 10px 0;
	width: 100%;		width: 100%;
	~~text-align: left; /* <-- add this line */~~
	}		}

	/* ~~=========================================~~		/* Force InputBox to align horizontally */
	~~THE FIX: RECURSIVE FLEX LAYOUT~~		.creation-row .mw-inputbox-centered {
	~~========================================= */~~		margin: 0 !important;
			white-space: nowrap !important; /* Prevents wrapping */
	~~/* 1. Hide the Line Break <br>~~ */
	.creation-row br {
	~~display~~: ~~none~~ !important;
	}

	/* ~~2. Force the Form AND any immediate children (p, div) to be Flex Rows.~~
	~~This handles the nesting: Form -> Paragraph -> Inputs~~ */
	~~.creation-row form,~~
	~~.creation-row form > p,~~
	~~.creation-row form > div {~~
	display: flex !important;		display: flex !important;
	~~flex-direction: row !important;~~
	align-items: center !important;		align-items: center !important;

	~~/* Kill the indentation */~~
	~~margin: 0 !important;~~
	~~padding: 0 !important;~~

	~~/* Space between items */~~
	gap: 15px !important;		gap: 15px !important;
	}		}

	~~/* 3. Handle the Blank Page wrapper specifically~~		.creation-row form {
	~~(InputBox adds an extra div that needs to behave) */~~
	.creation-row ~~.mw-inputbox-centered~~ {
	~~margin: 0 !important;~~
	~~width: auto !important;~~

	~~/* make the blank page input + button sit in one row */~~
	display: flex !important;		display: flex !important;
	~~flex-direction~~: ~~row~~ !important;		gap: 15px !important;
	align-items: center !important;		align-items: center !important;
	~~gap: 15px !important;~~
	}		}

			/* Shared Styling */
	~~/* =========================================~~
	~~VISUALS: INPUTS & BUTTONS~~
	~~========================================= */~~

	/* Shared ~~Sizing & Reset~~ */
	.creation-row input[type="text"],		.creation-row input[type="text"],
	.creation-row input[type="submit"],		.creation-row input[type="submit"] {
	~~.creation-row button~~ {
	height: 40px !important;		height: 40px !important;
	box-sizing: border-box !important;		box-sizing: border-box !important;
	~~font-family: sans-serif !important;~~
	font-size: 14px !important;		font-size: 14px !important;
	~~margin: 0 !important; /* Remove individual margins so gap handles spacing */~~
	}		}

	/* ~~--- TEXT BOX (Left) ---~~ */		/* Text Box */
	.creation-row input[type="text"] {		.creation-row input[type="text"] {
	width: 260px !important;		width: 260px !important;
	background~~-color~~: #fff !important;		background: #fff !important;
	border: 1px solid #a2a9b1 !important;		border: 1px solid #a2a9b1 !important;
	~~border-radius: 2px !important;~~
	padding: 0 10px !important;		padding: 0 10px !important;
	~~color: #000 !important;~~
	~~text-align: left !important;~~
	~~box-shadow: none !important;~~
	}		}

	/* ~~Focus State */~~		/* Button */
	~~.creation-row input[type="text"]:focus {~~		.creation-row input[type="submit"] {
	~~border-color: #3366cc !important;~~
	~~outline: none !important;~~
	}

	~~/* --- BUTTON (Right) ---~~ */
	.creation-row input[type="submit"],
	~~.creation-row button~~ {
	width: 260px !important;		width: 260px !important;

	~~/* Theme: White Background, Black Border */~~
	background: #fff !important;		background: #fff !important;
	~~background-color: #fff !important;~~
	~~background-image: none !important; /* Removes default gradient */~~

	border: 1.5px solid #000 !important;		border: 1.5px solid #000 !important;
	~~border-radius: 2px !important;~~

	color: #000 !important;		color: #000 !important;
	font-weight: 700 !important; ~~/* Bold */~~		font-weight: 700 !important;
	cursor: pointer !important;		cursor: pointer !important;
			border-radius: 2px !important;
	~~text~~-~~shadow~~: ~~none !important;~~
	~~box-shadow: none !important;~~
	~~transition: all 0.2s ease~~ !important;
	}		}

	~~/* HOVER STATE: Light Grey */~~		.creation-row input[type="submit"]:hover {
	.creation-row input[type="submit"]~~:hover,~~		background-color: #f2f2f2 !important;
	~~.creation-row button~~:hover {
	background-color: #f2f2f2 !important; ~~/* Light Grey */~~
	color: #000 !important;		color: #000 !important;
	~~border-color: #000 !important;~~
	}		}

C at 15:08, 24 November 2025

2025-11-24T15:08:09Z

← Older revision		Revision as of 15:08, 24 November 2025
Line 5:		Line 5:
	margin: 10px 0;		margin: 10px 0;
	width: 100%;		width: 100%;
			text-align: left; /* <-- add this line */
	}		}

Line 36:		Line 37:
	(InputBox adds an extra div that needs to behave) */		(InputBox adds an extra div that needs to behave) */
	.creation-row .mw-inputbox-centered {		.creation-row .mw-inputbox-centered {
			margin: 0 !important;
			width: auto !important;

			/* make the blank page input + button sit in one row */
	display: flex !important;		display: flex !important;
			flex-direction: row !important;
	align-items: center !important;		align-items: center !important;
	~~width~~: ~~auto !important;~~		gap: 15px !important;
	~~margin: 0~~ !important;
	}		}


	/* =========================================		/* =========================================

C at 15:05, 24 November 2025

2025-11-24T15:05:30Z

← Older revision		Revision as of 15:05, 24 November 2025
Line 8:		Line 8:

	/* =========================================		/* =========================================
	LAYOUT ~~FIXES (The "Ghost" Method)~~		THE FIX: RECURSIVE FLEX LAYOUT
	========================================= */		========================================= */

	/* 1. ~~The~~ Form ~~becomes~~ the ~~master Flex container~~ */		/* 1. Hide the Line Break <br> */
	.creation-row form {		.creation-row br {
			display: none !important;
			}

			/* 2. Force the Form AND any immediate children (p, div) to be Flex Rows.
			This handles the nesting: Form -> Paragraph -> Inputs */
			.creation-row form,
			.creation-row form > p,
			.creation-row form > div {
	display: flex !important;		display: flex !important;
	flex-direction: row !important;		flex-direction: row !important;
	align-items: center !important;		align-items: center !important;
	~~gap: 15px !important;~~ /* ~~Space between input and button~~ */
			/* Kill the indentation */
	margin: 0 !important;		margin: 0 !important;
	padding: 0 !important;		padding: 0 !important;

			/* Space between items */
			gap: 15px !important;
	}		}

	~~/* 2. CRITICAL: Make the <p> invisible to the layout.~~		/* 3. Handle the Blank Page wrapper specifically
	~~'display: contents' makes the browser treat the children of <p>~~		(InputBox adds an extra div that needs to behave) */
	~~as if they were direct children of <form>. This kills margins/padding automatically. */~~
	~~.creation-row p {~~
	~~display: contents !important;~~
	}

	/* 3. ~~Hide the <br> line break */~~
	~~.creation-row br {~~
	~~display: none !important;~~
	}

	~~/* 4. Fix for~~ the Blank Page (InputBox) ~~wrapper~~ */
	.creation-row .mw-inputbox-centered {		.creation-row .mw-inputbox-centered {
			display: flex !important;
			align-items: center !important;
			width: auto !important;
	margin: 0 !important;		margin: 0 !important;
	~~width: auto !important;~~
	}		}

	/* =========================================		/* =========================================
	~~INPUT~~ & ~~BUTTON SIZING~~		VISUALS: INPUTS & BUTTONS
	========================================= */		========================================= */

			/* Shared Sizing & Reset */
	.creation-row input[type="text"],		.creation-row input[type="text"],
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
Line 49:		Line 54:
	font-family: sans-serif !important;		font-family: sans-serif !important;
	font-size: 14px !important;		font-size: 14px !important;
	margin: 0 !important;		margin: 0 !important; /* Remove individual margins so gap handles spacing */
	}		}

	/* ~~=========================================~~		/* --- TEXT BOX (Left) --- */
	TEXT BOX (Left)
	~~=========================================~~ */
	.creation-row input[type="text"] {		.creation-row input[type="text"] {
	width: 260px !important;		width: 260px !important;
Line 66:		Line 69:
	}		}

			/* Focus State */
	.creation-row input[type="text"]:focus {		.creation-row input[type="text"]:focus {
	border-color: #3366cc !important;		border-color: #3366cc !important;
Line 71:		Line 75:
	}		}

	/* ~~=========================================~~		/* --- BUTTON (Right) --- */
	BUTTON (Right)
	~~=========================================~~ */
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
	.creation-row button {		.creation-row button {
	width: 260px !important;		width: 260px !important;

	/* White Background, Black Border */		/* Theme: White Background, Black Border */
	background: #fff !important;		background: #fff !important;
	background-color: #fff !important;		background-color: #fff !important;
	background-image: none !important;		background-image: none !important; /* Removes default gradient */

	border: 1.5px solid #000 !important;		border: 1.5px solid #000 !important;
Line 87:		Line 89:

	color: #000 !important;		color: #000 !important;
	font-weight: 700 !important;		font-weight: 700 !important; /* Bold */
	cursor: pointer !important;		cursor: pointer !important;

Line 95:		Line 97:
	}		}

	/* ~~NEW~~ HOVER ~~STYLE~~: Light Grey */		/* HOVER STATE: Light Grey */
	.creation-row input[type="submit"]:hover,		.creation-row input[type="submit"]:hover,
	.creation-row button:hover {		.creation-row button:hover {
	background-color: #f2f2f2 !important; /* Light Grey */		background-color: #f2f2f2 !important; /* Light Grey */
	color: #000 !important; ~~/* Text stays black */~~		color: #000 !important;
	border-color: #000 !important;		border-color: #000 !important;
	}		}

C at 15:03, 24 November 2025

2025-11-24T15:03:13Z

← Older revision		Revision as of 15:03, 24 November 2025
Line 8:		Line 8:

	/* =========================================		/* =========================================
	~~THE NUCLEAR OPTION~~		LAYOUT FIXES (The "Ghost" Method)
	========================================= */		========================================= */

	/* 1. ~~Force~~ the ~~row to~~ Flex */		/* 1. The Form becomes the master Flex container */
	.creation-row {		.creation-row form {
	display: flex !important;		display: flex !important;
			flex-direction: row !important;
	align-items: center !important;		align-items: center !important;
			gap: 15px !important; /* Space between input and button */
			margin: 0 !important;
			padding: 0 !important;
	}		}

	/* 2. ~~Target EVERYTHING inside~~ the ~~creation row form~~.		/* 2. CRITICAL: Make the <p> invisible to the layout.
	~~The~~ '*' ~~selector means "I don't care if you are a~~ <p>~~, <div>, or~~ <form>".		'display: contents' makes the browser treat the children of <p>
	~~We strip all~~ margins ~~and~~ padding ~~from the wrappers~~.		as if they were direct children of <form>. This kills margins/padding automatically. */
	*/		.creation-row p {
	.creation-row ~~form,~~		display: contents !important;
	.creation-row form > * {
	~~margin: 0 !important;~~
	~~padding: 0 !important;~~
	display: ~~flex !important; /* Forces nested wrappers to behave like rows */~~
	~~align-items: center !important;~~
	~~gap: 15px~~ !important; ~~/* Ensures the gap persists through wrappers */~~
	}		}

	/* 3. Hide the <br> ~~explicitly~~ */		/* 3. Hide the <br> line break */
	.creation-row br {		.creation-row br {
	display: none !important;		display: none !important;
	}		}

	/* 4. ~~Reset~~ the Blank Page wrapper ~~so it plays nice with the rule above~~ */		/* 4. Fix for the Blank Page (InputBox) wrapper */
	.creation-row .mw-inputbox-centered {		.creation-row .mw-inputbox-centered {
			margin: 0 !important;
	width: auto !important;		width: auto !important;
	}		}

	/* =========================================		/* =========================================
	~~INPUTS~~ & ~~BUTTONS (The Visuals)~~		INPUT & BUTTON SIZING
	========================================= */		========================================= */

	~~/* We target the inputs specifically to give them their shape back,~~
	~~overriding the 'display: flex' we set on the containers above */~~
	.creation-row input[type="text"],		.creation-row input[type="text"],
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
	.creation-row button {		.creation-row button {
	~~display: block !important; /* Behaves like a solid box */~~
	height: 40px !important;		height: 40px !important;
	box-sizing: border-box !important;		box-sizing: border-box !important;
Line 57:		Line 52:
	}		}

	/* ~~--- Text Box ---~~ */		/* =========================================
			TEXT BOX (Left)
			========================================= */
	.creation-row input[type="text"] {		.creation-row input[type="text"] {
	width: 260px !important;		width: 260px !important;
Line 74:		Line 71:
	}		}

	/* ~~--- Button ---~~ */		/* =========================================
			BUTTON (Right)
			========================================= */
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
	.creation-row button {		.creation-row button {
	width: 260px !important;		width: 260px !important;

			/* White Background, Black Border */
	background: #fff !important;		background: #fff !important;
	background-color: #fff !important;		background-color: #fff !important;
Line 88:		Line 89:
	font-weight: 700 !important;		font-weight: 700 !important;
	cursor: pointer !important;		cursor: pointer !important;

			text-shadow: none !important;
	box-shadow: none !important;		box-shadow: none !important;
	~~text-shadow: none !important;~~

	transition: all 0.2s ease !important;		transition: all 0.2s ease !important;
	}		}

			/* NEW HOVER STYLE: Light Grey */
	.creation-row input[type="submit"]:hover,		.creation-row input[type="submit"]:hover,
	.creation-row button:hover {		.creation-row button:hover {
	background-color: #~~000~~ !important;		background-color: #f2f2f2 !important; /* Light Grey */
	color: #~~fff~~ !important;		color: #000 !important; /* Text stays black */
	border-color: #000 !important;		border-color: #000 !important;
	}		}

C at 15:01, 24 November 2025

2025-11-24T15:01:17Z

← Older revision		Revision as of 15:01, 24 November 2025
Line 8:		Line 8:

	/* =========================================		/* =========================================
	~~LAYOUT NORMALIZATION (The Fix)~~		THE NUCLEAR OPTION
	========================================= */		========================================= */

	/* 1. ~~Kill~~ the ~~line break that PageForms inserts~~ */		/* 1. Force the row to Flex */
			.creation-row {
			display: flex !important;
			align-items: center !important;
			}

			/* 2. Target EVERYTHING inside the creation row form.
			The '*' selector means "I don't care if you are a <p>, <div>, or <form>".
			We strip all margins and padding from the wrappers.
			*/
			.creation-row form,
			.creation-row form > * {
			margin: 0 !important;
			padding: 0 !important;
			display: flex !important; /* Forces nested wrappers to behave like rows */
			align-items: center !important;
			gap: 15px !important; /* Ensures the gap persists through wrappers */
			}

			/* 3. Hide the <br> explicitly */
	.creation-row br {		.creation-row br {
	display: none !important;		display: none !important;
	}		}

	/* 2. ~~Force every~~ wrapper ~~(Form, Paragraph, Div) to align items horizontally.~~		/* 4. Reset the Blank Page wrapper so it plays nice with the rule above */
	~~We target everything to ensure we catch PageForms (<p>) and InputBox (<div>)~~ */
	~~.creation-row form,~~
	~~.creation-row form p,~~
	.creation-row .mw-inputbox-centered {		.creation-row .mw-inputbox-centered {
	~~display: flex !important;~~
	~~flex-direction: row !important;~~
	~~align-items: center !important;~~
	~~justify-content: flex-start !important;~~
	~~gap: 15px !important; /* Space between text box and button */~~

	~~/* CRITICAL: Remove browser default margins to fix indentation */~~
	~~margin: 0 !important;~~
	~~padding: 0 !important;~~
	width: auto !important;		width: auto !important;
	}		}

	/* =========================================		/* =========================================
	~~INPUT SIZING~~ (~~Shared~~)		INPUTS & BUTTONS (The Visuals)
	========================================= */		========================================= */
	/* ~~Target specific input types~~ to ~~avoid affecting hidden inputs~~ */
			/* We target the inputs specifically to give them their shape back,
			overriding the 'display: flex' we set on the containers above */
	.creation-row input[type="text"],		.creation-row input[type="text"],
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
	.creation-row button {		.creation-row button {
			display: block !important; /* Behaves like a solid box */
			height: 40px !important;
	box-sizing: border-box !important;		box-sizing: border-box !important;
	~~height: 40px !important;~~
	font-family: sans-serif !important;		font-family: sans-serif !important;
	font-size: 14px !important;		font-size: 14px !important;
	margin: 0 !important;		margin: 0 !important;
	~~vertical-align: middle !important;~~
	}		}

	/* ~~=========================================~~		/* --- Text Box --- */
	~~TEXT BOX STYLE (Left)~~
	~~=========================================~~ */
	.creation-row input[type="text"] {		.creation-row input[type="text"] {
	width: 260px !important;		width: 260px !important;
Line 62:		Line 69:
	}		}

	~~/* Focus State */~~
	.creation-row input[type="text"]:focus {		.creation-row input[type="text"]:focus {
	border-color: #3366cc !important;		border-color: #3366cc !important;
Line 68:		Line 74:
	}		}

	/* ~~=========================================~~		/* --- Button --- */
	~~BUTTON STYLE (Right)~~
	~~=========================================~~ */
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
	.creation-row button {		.creation-row button {
	width: 260px !important;		width: 260px !important;

	~~/* Force White/Black Theme */~~
	background: #fff !important;		background: #fff !important;
	background-color: #fff !important;		background-color: #fff !important;
	background-image: none !important; ~~/* Removes gradients */~~		background-image: none !important;

	border: 1.5px solid #000 !important;		border: 1.5px solid #000 !important;
Line 86:		Line 88:
	font-weight: 700 !important;		font-weight: 700 !important;
	cursor: pointer !important;		cursor: pointer !important;
	~~padding~~: ~~0 10px~~ !important;		box-shadow: none !important;
			text-shadow: none !important;

	~~text-shadow: none !important;~~
	~~box-shadow: none !important;~~
	transition: all 0.2s ease !important;		transition: all 0.2s ease !important;
	}		}

	~~/* Hover State */~~
	.creation-row input[type="submit"]:hover,		.creation-row input[type="submit"]:hover,
	.creation-row button:hover {		.creation-row button:hover {

C at 14:59, 24 November 2025

2025-11-24T14:59:59Z

← Older revision		Revision as of 14:59, 24 November 2025
Line 8:		Line 8:

	/* =========================================		/* =========================================
	LAYOUT ~~FIXES~~ (The ~~"Flattening"~~)		LAYOUT NORMALIZATION (The Fix)
	========================================= */		========================================= */

	/* 1. ~~Reset~~ the ~~Form~~ */		/* 1. Kill the line break that PageForms inserts */
	.creation-row ~~form~~ {		.creation-row br {
	display~~: flex !important;~~		display: none !important;
	~~flex-direction: row !important; /* Force side-by-side */~~
	~~align-items: center !important;~~
	~~margin: 0 !important;~~
	~~padding: 0 !important;~~
	~~border~~: none !important;
	}		}

	/* 2. ~~CRITICAL: Unwrap the PageForms~~ Paragraph		/* 2. Force every wrapper (Form, Paragraph, Div) to align items horizontally.
	PageForms ~~puts inputs inside a~~ <p>~~. We turn that~~ <p> ~~into a flex container~~		We target everything to ensure we catch PageForms (<p>) and InputBox (<div>) */
	~~and kill its margins to fix the "weird" indentation~~.		.creation-row form,
	*/		.creation-row form p,
	.creation-row form p {		.creation-row .mw-inputbox-centered {
	display: flex !important;		display: flex !important;
	flex-direction: row !important;		flex-direction: row !important;
	align-items: center !important;		align-items: center !important;
	gap: 15px !important; /* Space between ~~input~~ and button */		justify-content: flex-start !important;
	~~margin: 0 !important; /* Removes the indentation */~~		gap: 15px !important; /* Space between text box and button */
	~~padding: 0 !important;~~
	~~width: auto !important;~~		/* CRITICAL: Remove browser default margins to fix indentation */
	}

	/* ~~3. Hide the line break <br> PageForms inserts */~~
	~~.creation-row br {~~
	~~display~~: ~~none !important;~~
	}

	~~/* 4. Fix for Blank Page (InputBox) wrapper~~ */
	~~/* This ensures the bottom input aligns with the top ones */~~
	~~.creation-row .mw-inputbox-centered {~~
	margin: 0 !important;		margin: 0 !important;
	padding: 0 !important;		padding: 0 !important;
Line 49:		Line 34:

	/* =========================================		/* =========================================
	INPUT ~~& BUTTON VISUALS~~ (Shared)		INPUT SIZING (Shared)
	========================================= */		========================================= */
	/* Target specific ~~inputs~~ to avoid ~~hitting~~ hidden ~~fields~~ */		/* Target specific input types to avoid affecting hidden inputs */
	.creation-row input[type="text"],		.creation-row input[type="text"],
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
	.creation-row button {		.creation-row button {
			box-sizing: border-box !important;
	height: 40px !important;		height: 40px !important;
	~~box-sizing: border-box !important;~~
	font-family: sans-serif !important;		font-family: sans-serif !important;
	font-size: 14px !important;		font-size: 14px !important;
	margin: 0 !important;		margin: 0 !important;
			vertical-align: middle !important;
	}		}

	/* ~~--- Text Box~~ (Left) ~~---~~ */		/* =========================================
			TEXT BOX STYLE (Left)
			========================================= */
	.creation-row input[type="text"] {		.creation-row input[type="text"] {
	width: 260px !important;		width: 260px !important;
Line 80:		Line 68:
	}		}

	/* ~~--- Button~~ (Right) ~~---~~ */		/* =========================================
			BUTTON STYLE (Right)
			========================================= */
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
	.creation-row button {		.creation-row button {
Line 88:		Line 78:
	background: #fff !important;		background: #fff !important;
	background-color: #fff !important;		background-color: #fff !important;
	background-image: none !important;		background-image: none !important; /* Removes gradients */

	border: 1.5px solid #000 !important;		border: 1.5px solid #000 !important;
Line 96:		Line 86:
	font-weight: 700 !important;		font-weight: 700 !important;
	cursor: pointer !important;		cursor: pointer !important;
			padding: 0 10px !important;

	text-shadow: none !important;		text-shadow: none !important;
	box-shadow: none !important;		box-shadow: none !important;

	transition: all 0.2s ease !important;		transition: all 0.2s ease !important;
	}		}

C at 14:47, 24 November 2025

2025-11-24T14:47:24Z

← Older revision		Revision as of 14:47, 24 November 2025
Line 8:		Line 8:

	/* =========================================		/* =========================================
	LAYOUT FIXES (The ~~Critical Part~~)		LAYOUT FIXES (The "Flattening")
	========================================= */		========================================= */

	/* 1. ~~Target~~ the ~~FORM itself~~ */		/* 1. Reset the Form */
	.creation-row form {		.creation-row form {
	display: flex !important;		display: flex !important;
	flex-direction: row !important;		flex-direction: row !important; /* Force side-by-side */
	align-items: center !important;		align-items: center !important;
	margin: 0 !important;		margin: 0 !important;
			padding: 0 !important;
			border: none !important;
	}		}

	/* 2. CRITICAL ~~FIX~~: PageForms ~~wraps~~ inputs in a <p> ~~tag~~.		/* 2. CRITICAL: Unwrap the PageForms Paragraph
	We ~~must make this~~ <p> a flex container ~~too, or~~ the ~~items will stack~~. */		PageForms puts inputs inside a <p>. We turn that <p> into a flex container
			and kill its margins to fix the "weird" indentation.
			*/
	.creation-row form p {		.creation-row form p {
	display: flex !important;		display: flex !important;
Line 26:		Line 30:
	align-items: center !important;		align-items: center !important;
	gap: 15px !important; /* Space between input and button */		gap: 15px !important; /* Space between input and button */
	margin: 0 !important;		margin: 0 !important; /* Removes the indentation */
	padding: 0 !important;		padding: 0 !important;
	width: ~~100%~~;		width: auto !important;
	}		}

	/* 3. Hide the <br> ~~tag that~~ PageForms inserts */		/* 3. Hide the line break <br> PageForms inserts */
	.creation-row br {		.creation-row br {
	display: none !important;		display: none !important;
	}		}

	/* 4. Fix for ~~the~~ Blank Page ~~wrapper~~ (InputBox) */		/* 4. Fix for Blank Page (InputBox) wrapper */
			/* This ensures the bottom input aligns with the top ones */
	.creation-row .mw-inputbox-centered {		.creation-row .mw-inputbox-centered {
			margin: 0 !important;
			padding: 0 !important;
	width: auto !important;		width: auto !important;
	~~margin: 0 !important;~~
	~~display: flex !important;~~
	~~align-items: center !important;~~
	~~gap: 15px !important;~~
	}
	~~/* InputBox sometimes puts the form inside the centered div */~~
	~~.creation-row .mw-inputbox-centered form {~~
	~~gap: 15px !important;~~
	}		}

	/* =========================================		/* =========================================
	INPUT & BUTTON ~~STYLING~~ (Shared)		INPUT & BUTTON VISUALS (Shared)
	========================================= */		========================================= */
			/* Target specific inputs to avoid hitting hidden fields */
	.creation-row input[type="text"],		.creation-row input[type="text"],
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
Line 62:		Line 62:
	}		}

	/* Text Box (Left) */		/* --- Text Box (Left) --- */
	.creation-row input[type="text"] {		.creation-row input[type="text"] {
	width: 260px !important;		width: 260px !important;
Line 74:		Line 74:
	}		}

			/* Focus State */
	.creation-row input[type="text"]:focus {		.creation-row input[type="text"]:focus {
	border-color: #3366cc !important;		border-color: #3366cc !important;
Line 79:		Line 80:
	}		}

	/* Button (Right) */		/* --- Button (Right) --- */
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
	.creation-row button {		.creation-row button {
	width: 260px !important;		width: 260px !important;

			/* Force White/Black Theme */
	background: #fff !important;		background: #fff !important;
	background-color: #fff !important;		background-color: #fff !important;
Line 99:		Line 102:
	}		}

			/* Hover State */
	.creation-row input[type="submit"]:hover,		.creation-row input[type="submit"]:hover,
	.creation-row button:hover {		.creation-row button:hover {

C at 14:42, 24 November 2025

2025-11-24T14:42:52Z

← Older revision		Revision as of 14:42, 24 November 2025
Line 8:		Line 8:

	/* =========================================		/* =========================================
	LAYOUT FIXES (The ~~"Nuclear" Option~~)		LAYOUT FIXES (The Critical Part)
	========================================= */		========================================= */
	/* 1. ~~Force~~ the ~~form to behave as a row~~ */
			/* 1. Target the FORM itself */
	.creation-row form {		.creation-row form {
	display: flex !important;		display: flex !important;
	flex-direction: row !important;		flex-direction: row !important;
	align-items: center !important;		align-items: center !important;
	~~gap: 15px !important;~~
	margin: 0 !important;		margin: 0 !important;
	}		}

	/* 2. CRITICAL: PageForms ~~often~~ wraps inputs in <p> ~~tags~~.		/* 2. CRITICAL FIX: PageForms wraps inputs in a <p> tag.
	~~'display: contents' makes the~~ <p> ~~invisible to the layout~~,		We must make this <p> a flex container too, or the items will stack. */
	so the ~~inputs inside it sit side-by-side~~. */		.creation-row form p {
	.creation-row p {		display: flex !important;
	display: ~~contents~~ !important;		flex-direction: row !important;
			align-items: center !important;
			gap: 15px !important; /* Space between input and button */
			margin: 0 !important;
			padding: 0 !important;
			width: 100%;
	}		}

	/* 3. ~~CRITICAL:~~ Hide the ~~line breaks~~ PageForms inserts */		/* 3. Hide the <br> tag that PageForms inserts */
	.creation-row br {		.creation-row br {
	display: none !important;		display: none !important;
	}		}

	/* 4. Fix for ~~InputBox~~ wrapper (~~Blank Page~~) */		/* 4. Fix for the Blank Page wrapper (InputBox) */
	.creation-row .mw-inputbox-centered {		.creation-row .mw-inputbox-centered {
	width: auto !important;		width: auto !important;
	margin: 0 !important;		margin: 0 !important;
			display: flex !important;
			align-items: center !important;
			gap: 15px !important;
			}
			/* InputBox sometimes puts the form inside the centered div */
			.creation-row .mw-inputbox-centered form {
			gap: 15px !important;
	}		}

	/* =========================================		/* =========================================
	INPUT & BUTTON ~~SIZING~~		INPUT & BUTTON STYLING (Shared)
	========================================= */		========================================= */
	.creation-row input[type="text"],		.creation-row input[type="text"],
Line 47:		Line 59:
	font-family: sans-serif !important;		font-family: sans-serif !important;
	font-size: 14px !important;		font-size: 14px !important;
	margin: 0 !important; ~~/* Remove default margins to ensure alignment */~~		margin: 0 !important;
	}		}

	/* ~~=========================================~~		/* Text Box (Left) */
	~~TEXT INPUT~~ (Left ~~Side~~)
	~~=========================================~~ */
	.creation-row input[type="text"] {		.creation-row input[type="text"] {
	width: 260px !important;		width: 260px !important;
Line 69:		Line 79:
	}		}

	/* ~~=========================================~~		/* Button (Right) */
	~~BUTTON~~ (Right ~~Side~~)
	~~========================================= */~~
	~~/* We target 'button' too, just in case PageForms switches tags~~ */
	.creation-row input[type="submit"],		.creation-row input[type="submit"],
	.creation-row button {		.creation-row button {
	width: 260px !important;		width: 260px !important;

	~~/* FORCE WHITE & BLACK STYLE */~~
	background: #fff !important;		background: #fff !important;
	background-color: #fff !important;		background-color: #fff !important;
	background-image: none !important; ~~/* Removes the grey gradient seen in your screenshot */~~		background-image: none !important;

	border: 1.5px solid #000 !important;		border: 1.5px solid #000 !important;
Line 94:		Line 99:
	}		}

	~~/* Hover Effect */~~
	.creation-row input[type="submit"]:hover,		.creation-row input[type="submit"]:hover,
	.creation-row button:hover {		.creation-row button:hover {

C at 14:40, 24 November 2025

2025-11-24T14:40:05Z

← Older revision		Revision as of 14:40, 24 November 2025
Line 1:		Line 1:
	/* =========================================		/* =========================================
	CONTAINER ~~& LAYOUT~~		CONTAINER
	========================================= */		========================================= */
	.creation-row {		.creation-row {
	margin: 10px 0;		margin: 10px 0;
	width: 100%;		width: 100%;
	~~display: flex; /* Ensures the row itself behaves predictably */~~
	}		}

	/* ~~Force the form inside to be a flex row.~~		/* =========================================
	~~Note: InputBox adds a wrapper div~~ (~~.mw-inputbox-centered~~).		LAYOUT FIXES (The "Nuclear" Option)
	~~We target both the direct form AND the nested form.~~		========================================= */
	*/		/* 1. Force the form to behave as a row */
	.~~creation-~~row ~~form,~~		.creation-row form {
	.creation-row ~~.mw-inputbox-centered~~ form {
	display: flex !important;		display: flex !important;
			flex-direction: row !important;
	align-items: center !important;		align-items: center !important;
	gap: 15px !important; ~~/* The space between the text box and button */~~		gap: 15px !important;
	margin: 0 !important;		margin: 0 !important;
	}		}

	/* Fix for InputBox wrapper ~~to not break flex flow~~ */		/* 2. CRITICAL: PageForms often wraps inputs in <p> tags.
			'display: contents' makes the <p> invisible to the layout,
			so the inputs inside it sit side-by-side. */
			.creation-row p {
			display: contents !important;
			}

			/* 3. CRITICAL: Hide the line breaks PageForms inserts */
			.creation-row br {
			display: none !important;
			}

			/* 4. Fix for InputBox wrapper (Blank Page) */
	.creation-row .mw-inputbox-centered {		.creation-row .mw-inputbox-centered {
			width: auto !important;
	margin: 0 !important;		margin: 0 !important;
	~~width: auto !important;~~
	}		}

	/* =========================================		/* =========================================
	~~SHARED~~ SIZING ~~(Both Text & Button)~~		INPUT & BUTTON SIZING
	========================================= */		========================================= */
	~~/* Target ANY text input and ANY submit button inside the row */~~
	.creation-row input[type="text"],		.creation-row input[type="text"],
	.creation-row input[type="submit"] {		.creation-row input[type="submit"],
			.creation-row button {
	height: 40px !important;		height: 40px !important;
	box-sizing: border-box !important;		box-sizing: border-box !important;
			font-family: sans-serif !important;
	font-size: 14px !important;		font-size: 14px !important;
	~~font-family~~: ~~sans-serif~~ !important;		margin: 0 !important; /* Remove default margins to ensure alignment */
	}		}

	/* =========================================		/* =========================================
	~~THE~~ TEXT ~~BOX~~ (Left Side)		TEXT INPUT (Left Side)
	========================================= */		========================================= */
	.creation-row input[type="text"] {		.creation-row input[type="text"] {
	width: 260px !important; ~~/* Force width */~~		width: 260px !important;
	background-color: #fff !important;		background-color: #fff !important;
	border: 1px solid #a2a9b1 !important; ~~/* Standard Grey Border */~~		border: 1px solid #a2a9b1 !important;
	border-radius: 2px !important;		border-radius: 2px !important;
	padding: 0 10px !important;		padding: 0 10px !important;
	color: #000 !important;		color: #000 !important;
			text-align: left !important;
	box-shadow: none !important;		box-shadow: none !important;
	~~text-align: left !important;~~
	}		}

	~~/* Blue border on focus */~~
	.creation-row input[type="text"]:focus {		.creation-row input[type="text"]:focus {
	border-color: #3366cc !important;		border-color: #3366cc !important;
Line 59:		Line 70:

	/* =========================================		/* =========================================
	~~THE~~ BUTTON (Right Side)		BUTTON (Right Side)
	========================================= */		========================================= */
	.creation-row input[type="submit"] {		/* We target 'button' too, just in case PageForms switches tags */
	width: 260px !important; ~~/* Force width */~~		.creation-row input[type="submit"],
			.creation-row button {
			width: 260px !important;

	/* FORCE ~~THE~~ WHITE & BLACK STYLE */		/* FORCE WHITE & BLACK STYLE */
	background: #fff !important;		background: #fff !important;
	background-color: #fff !important; ~~/* Doubled for safety */~~		background-color: #fff !important;
	background-image: none !important; /* ~~Kill any gradients~~ */		background-image: none !important; /* Removes the grey gradient seen in your screenshot */

	border: 1.5px solid #000 !important;		border: 1.5px solid #000 !important;
	border-radius: 2px !important;		border-radius: 2px !important;

	color: #000 !important;		color: #000 !important;
	font-weight: 700 !important; ~~/* Bold */~~		font-weight: 700 !important;

	cursor: pointer !important;		cursor: pointer !important;
	text-shadow: none !important;		text-shadow: none !important;
	~~padding~~: ~~0 10px !important;~~		box-shadow: none !important;
	~~margin: 0~~ !important;

	transition: all 0.2s ease !important;		transition: all 0.2s ease !important;
	}		}

	/* Hover ~~State~~ */		/* Hover Effect */
	.creation-row input[type="submit"]:hover {		.creation-row input[type="submit"]:hover,
			.creation-row button:hover {
	background-color: #000 !important;		background-color: #000 !important;
	color: #fff !important;		color: #fff !important;
	border-color: #000 !important;		border-color: #000 !important;
	}		}

C at 14:28, 24 November 2025

2025-11-24T14:28:48Z

Show changes