MediaWiki:Common.css - Revision history

Pinfold at 18:56, March 13, 2026

2026-03-13T18:56:40Z

← Older revision		Revision as of 11:56, March 13, 2026
Line 48:		Line 48:
	}		}
	.kb-box {		.kb-box {
			position: relative;
	border: 1px solid #cccccc;		border: 1px solid #cccccc;
	border-radius: 12px;		border-radius: 12px;
Line 77:		Line 78:
	/* 7. Makes the cursor a pointer so users know it's interactive */		/* 7. Makes the cursor a pointer so users know it's interactive */
	cursor: pointer;		cursor: pointer;
			}
			.kb-link-overlay a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			text-indent: -9999px; /* Hides the link text while keeping it clickable for SEO/Screen readers */
			z-index: 1;
	}		}
	.kb-box img {		.kb-box img {
	border-radius: 8px; /* ~~Slightly smaller radius for~~ the image ~~inside~~ */		border-radius: 8px; /* Rounded corners on the image */
	max-width: 100%; /* ~~Ensures~~ image ~~stays inside~~ the ~~box~~ */		max-width: 100%; /* Responsive width */
	~~height~~: ~~auto~~;		height: auto; /* Maintain aspect ratio */
			position: relative; /* Required for z-index to work */
			z-index: 0; /* Keeps image behind the clickable link overlay */
			}
			.kb-box p {
			position: relative;
			z-index: 0;
	}		}
	.mainpage_box p:last-child {		.mainpage_box p:last-child {

Pinfold at 18:25, March 13, 2026

2026-03-13T18:25:51Z

← Older revision		Revision as of 11:25, March 13, 2026
Line 48:		Line 48:
	}		}
	.kb-box {		.kb-box {
	border: 1px solid #cccccc; ~~/* Light grey border */~~		border: 1px solid #cccccc;
	border-radius: 12px; ~~/* This creates the rounded corners */~~		border-radius: 12px;
	padding: 20px; ~~/* Space inside the box */~~		padding: 20px;
	background-color: #ffffff; ~~/* White background to make boxes pop */~~		background-color: #ffffff;
	vertical-align: top; ~~/* Keeps text aligned to the top */~~		vertical-align: top;
	font-family: Arial, sans-serif;		font-family: Arial, sans-serif;
	font-size: 12pt;		font-size: 12pt;
	box-shadow: 0 ~~2px~~ 5px rgba(0,0,0,0.05); /* Optional: ~~very soft shadow~~ */
			/* 1. Initial Shadow (Subtle) */
			box-shadow: 0 4px 6px rgba(0,0,0,0.1);

			/* 2. Transition (The "Animation" speed) */
			transition: transform 0.3s ease, box-shadow 0.3s ease;

			/* 3. Ensure the box is treated as a block for the transform */
			display: table-cell;
			}
			.kb-box:hover {
			/* 4. The "Growth" effect (lifts it slightly) */
			transform: translateY(-5px) scale(1.01);

			/* 5. The "Deepening" shadow */
			box-shadow: 0 12px 20px rgba(0,0,0,0.2);

			/* 6. Optional: Change border color slightly */
			border-color: #aaaaaa;

			/* 7. Makes the cursor a pointer so users know it's interactive */
			cursor: pointer;
	}		}
	.kb-box img {		.kb-box img {

Pinfold at 18:20, March 13, 2026

2026-03-13T18:20:42Z

@@ Line 46: / Line 46: @@
      padding: 20px;
      vertical-align: top;
+}
 .mainpage_box p:last-child {

Pinfold at 18:10, March 13, 2026

2026-03-13T18:10:33Z

← Older revision		Revision as of 11:10, March 13, 2026
Line 32:		Line 32:
	}		}
	.banner {		.banner {
	~~flex~~: 1;		background-color: #e0e0e0; /* The grey color from your HTML */
	~~margin~~: ~~5px~~;		font-family: Arial, sans-serif; /* Replaced Comic Sans with Arial */
	~~min~~-~~width~~: ~~210px;~~		font-size: 20pt; /* Match your current header size */
	~~padding: 10px 10px 10px 10px~~;		font-weight: bold; /* Match your <b> tag */
	font-~~family~~: ~~"Comic Sans MS", "Comic Sans", cursive~~;		padding: 5px 20px; /* Corrected padding syntax */
	~~font-size~~: ~~36pt~~;		text-align: left; /* Match your current look */
	text-align: ~~center~~;		margin: 10px 0; /* Spacing between sections */
	~~background-color~~: ~~#ffffff~~;		box-shadow: 0 4px 4px rgba(0,0,0,0.1); /* Subtle shadow (reduced from 0.8 for a cleaner look) */
	box-shadow: 0 4px 4px rgba(0,0,0,0.8);		}
			.kb-text {
			font-family: Arial, sans-serif;
			font-size: 12pt;
			padding: 20px;
			vertical-align: top;
	}		}
	.mainpage_box p:last-child {		.mainpage_box p:last-child {

Pinfold at 21:25, November 4, 2025

2025-11-04T21:25:54Z

@@ Line 126: / Line 126: @@
      outline: 3px solid #0056b3;
      outline-offset: 3px;
+}

Pinfold at 20:43, November 4, 2025

2025-11-04T20:43:41Z

← Older revision		Revision as of 13:43, November 4, 2025
Line 128:		Line 128:
	}		}

	/* ~~Make the~~ OOUI date/time ~~widgets~~ inline */		/* Force OOUI date/time picker inline */
	.mw-widget-dateInputWidget,		form .mw-widget-dateInputWidget,
	.mw-widget-dateInputWidget > .oo-ui-textInputWidget,		form .mw-widget-dateInputWidget > .oo-ui-textInputWidget,
	.mw-widget-dateInputWidget > .oo-ui-textInputWidget > .oo-ui-inputWidget-input {		form .mw-widget-dateInputWidget > .oo-ui-textInputWidget > .oo-ui-inputWidget-input,
	display: inline-block !important;		form .mw-widget-dateInputWidget-handle {
	width: auto !important;		display: inline-block !important;
	vertical-align: middle;		width: auto !important;
			vertical-align: middle !important;
			margin: 0 0.25em 0 0 !important;
			padding: 0 !important;
	}		}

	/* ~~Reduce extra vertical padding~~ */		/* Prevent the calendar pop-up from stretching layout */
	.mw-widget-dateInputWidget .oo-ui-~~textInputWidget~~-~~input~~ {		form .mw-widget-dateInputWidget-calendar {
	margin: 0 !important;		position: absolute !important;
			z-index: 9999 !important;
			}

			/* Optional: shrink spacing between date and time inputs */
			form .mw-widget-dateInputWidget + .mw-widget-dateInputWidget {
			margin-left: 0.5em !important;
	}		}

Pinfold at 20:34, November 4, 2025

2025-11-04T20:34:29Z

@@ Line 128: / Line 128: @@
+}
-/* ===== Page Forms: force datetime widget onto one line =====
+/* Make the OOUI date/time widgets inline */
-   Put this in MediaWiki:Common.css (or your skin CSS) and purge caches.
+.mw-widget-dateInputWidget,
-   Targets the typical Page Forms wrappers and makes selects/inputs inline.
+.mw-widget-dateInputWidget > .oo-ui-textInputWidget,
-*/
+.mw-widget-dateInputWidget > .oo-ui-textInputWidget > .oo-ui-inputWidget-input {
+    display: inline-block !important;
-/* Primary selector: field with the Display Name "Datetime" (adjust if your field label differs) */
+    width: auto !important;
-.mw-htmlform-field-Datetime,
+    vertical-align: middle;
+}
-/* Ensure label and control sit on same baseline (if label is inline) */
+/* Reduce extra vertical padding */
-.mw-htmlform-field-Datetime .mw-label {
+.mw-widget-dateInputWidget .oo-ui-textInputWidget-input {
-  display: inline-block !important;
+    margin: 0 !important;
+}

Pinfold at 20:13, November 4, 2025

2025-11-04T20:13:25Z

@@ Line 128: / Line 128: @@
+}
-/* Date and time formatting */
+/* ===== Page Forms: force datetime widget onto one line =====
-.pf-datetime-inline .input-datetime {
+   Put this in MediaWiki:Common.css (or your skin CSS) and purge caches.
-   display: inline-flex;
+   Targets the typical Page Forms wrappers and makes selects/inputs inline.
-   flex-wrap: nowrap;
+*/
    align-items: center;
-   gap: 4px;
+/* Primary selector: field with the Display Name "Datetime" (adjust if your field label differs) */
+}

Pinfold at 16:48, November 4, 2025

2025-11-04T16:48:58Z

← Older revision		Revision as of 09:48, November 4, 2025
Line 126:		Line 126:
	outline: 3px solid #0056b3;		outline: 3px solid #0056b3;
	outline-offset: 3px;		outline-offset: 3px;
			}

			/* Date and time formatting */
			.pf-datetime-inline .input-datetime {
			display: inline-flex;
			flex-wrap: nowrap;
			align-items: center;
			gap: 4px;
	}		}

Pinfold at 17:39, October 22, 2025

2025-10-22T17:39:15Z

← Older revision		Revision as of 10:39, October 22, 2025
Line 76:		Line 76:
	}		}
	}		}
	/* ~~Styling~~ for the container ~~to hold the buttons side-by-side~~ */		/* Unique wrapper class for the button container */
	.button-~~container~~ {		.data-button-group {
	display: flex;		display: flex;
	gap: 20px;		gap: 20px;
	justify-content: center;		justify-content: center;
	align-items: center;		align-items: center;
	padding: ~~50px~~; /* ~~More~~ padding ~~to center on a full screen */~~		padding: 20px 0; /* Add vertical padding */
	~~min-height: 80vh; /* Takes up most of the viewport height~~ */
	}		}

	.square-button {		/* Scoped styling for the individual button links */
			.data-button-group .square-button {
			/* Dimensions for a square shape */
	width: 250px;		width: 250px;
	height: 250px;		height: 250px;

			/* Basic appearance */
	background-color: #007BFF; /* A nice blue */		background-color: #007BFF; /* A nice blue */
	color: white;		color: white;
	text-decoration: none;		text-decoration: none;
	border-radius: 25px;		border-radius: 25px; /* Rounded Edges */
	border: none;		border: none;
	cursor: pointer;		cursor: pointer;

			/* Text styling */
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 2.5em;		font-size: 2.5em; /* Large text size */
	font-weight: bold;		font-weight: bold;
	text-transform: uppercase;		text-transform: uppercase;

			/* Centering the text inside */
	display: flex;		display: flex;
	justify-content: center;		justify-content: center;
Line 105:		Line 112:
	text-align: center;		text-align: center;
	padding: 10px;		padding: 10px;
			box-sizing: border-box; /* Important: ensures padding/border don't break the size */
	}		}

	.square-button:hover {		/* Hover effect */
			.data-button-group .square-button:hover {
	background-color: #0056b3;		background-color: #0056b3;
	transform: translateY(-2px);		transform: translateY(-2px);
Line 113:		Line 122:
	}		}

	.square-button:focus {		/* Focus effect for accessibility */
			.data-button-group .square-button:focus {
	outline: 3px solid #0056b3;		outline: 3px solid #0056b3;
	outline-offset: 3px;		outline-offset: 3px;