MediaWiki:Common.css - Revision history

Patrick at 18:23, 20 May 2025

2025-05-20T18:23:40Z

← Older revision		Revision as of 18:23, 20 May 2025
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */

	~~#toc {~~
	~~float: left;~~
	~~position: fixed;~~
	~~margin-right: 1em; /* Add some space between TOC and content */~~
	~~/* Add other styling like width, border, background as needed */~~
	~~width: 250px; /* Example width */~~
	~~background-color: #f9f9f9;~~
	~~border: 1px solid #aaa;~~
	~~padding: 0.5em;~~
	}

Patrick at 18:22, 20 May 2025

2025-05-20T18:22:23Z

← Older revision		Revision as of 18:22, 20 May 2025
Line 3:		Line 3:
	#toc {		#toc {
	float: left;		float: left;
			position: fixed;
	margin-right: 1em; /* Add some space between TOC and content */		margin-right: 1em; /* Add some space between TOC and content */
	/* Add other styling like width, border, background as needed */		/* Add other styling like width, border, background as needed */

Patrick at 18:19, 20 May 2025

2025-05-20T18:19:29Z

← Older revision		Revision as of 18:19, 20 May 2025
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */

			#toc {
			float: left;
			margin-right: 1em; /* Add some space between TOC and content */
			/* Add other styling like width, border, background as needed */
			width: 250px; /* Example width */
			background-color: #f9f9f9;
			border: 1px solid #aaa;
			padding: 0.5em;
			}

Patrick: Replaced content with "/* CSS placed here will be applied to all skins */"

2025-05-20T17:38:48Z

Replaced content with "CSS placed here will be applied to all skins: "

← Older revision		Revision as of 17:38, 20 May 2025
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */



	~~#toc {~~
	~~position: fixed; /* This makes the TOC stay in place as the user scrolls */~~
	~~right: 10px; /* Adjust distance from the right edge as needed */~~
	~~top: 7em; /* Adjust distance from the top; this might need tweaking based on your header's height */~~
	~~width: 250px; /* Or your preferred width */~~
	~~background-color: #f9f9f9; /* A light background color */~~
	~~border: 1px solid #aaa; /* A light border */~~
	~~padding: 1em;~~
	~~z-index: 100; /* Ensures it stays on top of other page content */~~
	~~max-height: 70vh; /* Limits the height to 70% of the viewport height */~~
	~~overflow-y: auto; /* Adds a scrollbar within the TOC if its content is too long */~~
	}

	~~/* Optional: Adjustments for the TOC title if needed */~~
	~~#toc #toctitle {~~
	~~text-align: center; /* Centers the "Contents" title */~~
	~~margin-bottom: 0.5em;~~
	}

	~~/* Optional: Ensure the list within the TOC doesn't have excessive margins */~~
	~~#toc ul {~~
	~~margin-top: 0;~~
	~~padding-left: 1.5em; /* Adjust list indentation if needed */~~
	}

	~~#toc > ul {~~
	~~max-height: 350px; /* Or a percentage like 70vh */~~
	~~overflow-y: auto; /* Add scrollbar if content exceeds max-height */~~
	}

Patrick at 16:55, 20 May 2025

2025-05-20T16:55:14Z

← Older revision		Revision as of 16:55, 20 May 2025
Line 26:		Line 26:
	margin-top: 0;		margin-top: 0;
	padding-left: 1.5em; /* Adjust list indentation if needed */		padding-left: 1.5em; /* Adjust list indentation if needed */
			}

			#toc > ul {
			max-height: 350px; /* Or a percentage like 70vh */
			overflow-y: auto; /* Add scrollbar if content exceeds max-height */
	}		}

Patrick at 16:53, 20 May 2025

2025-05-20T16:53:12Z

← Older revision		Revision as of 16:53, 20 May 2025
Line 4:		Line 4:

	#toc {		#toc {
	~~float~~: right; /* ~~You can use float~~: ~~left~~; ~~to float it to~~ the ~~left~~ */		position: fixed; /* This makes the TOC stay in place as the user scrolls */
	width: ~~300px~~; /* ~~Adjust~~ width ~~as needed, e.g., 25% or a fixed pixel value~~ */		right: 10px; /* Adjust distance from the right edge as needed */
	~~margin~~: ~~0 0 1em 1em~~; /* ~~Example margin~~: ~~top right bottom left (for float:right). Adjust as needed.~~ */		top: 7em; /* Adjust distance from the top; this might need tweaking based on your header's height */
			width: 250px; /* Or your preferred width */
			background-color: #f9f9f9; /* A light background color */
			border: 1px solid #aaa; /* A light border */
	padding: 1em;		padding: 1em;
	~~border~~: ~~1px solid #aaa~~;		z-index: 100; /* Ensures it stays on top of other page content */
	~~background~~-~~color~~: ~~#f9f9f9~~; /* ~~Or your preferred background~~ */		max-height: 70vh; /* Limits the height to 70% of the viewport height */
	/* ~~Remove position: fixed; and related properties like top, right, z-index if you used them previously for~~ a ~~fixed~~ TOC */		overflow-y: auto; /* Adds a scrollbar within the TOC if its content is too long */
	}		}

	/* Optional: If the TOC ~~has many items and you want its internal content to scroll~~		/* Optional: Adjustments for the TOC title if needed */
	~~even when the TOC block itself scrolls with the page, you can add:~~ */		#toc #toctitle {
	#toc ~~> ul~~ {		text-align: center; /* Centers the "Contents" title */
	~~max~~-~~height~~: ~~400px~~; /* ~~Adjust as desired, or remove if you want~~ the ~~TOC to expand fully~~ */		margin-bottom: 0.5em;
	~~overflow~~-y: ~~auto~~; /* ~~Adds a scrollbar if~~ the list ~~of contents is taller than max~~-~~height~~ */		}

			/* Optional: Ensure the list within the TOC doesn't have excessive margins */
			#toc ul {
			margin-top: 0;
			padding-left: 1.5em; /* Adjust list indentation if needed */
	}		}

Patrick at 16:47, 20 May 2025

2025-05-20T16:47:42Z

← Older revision		Revision as of 16:47, 20 May 2025
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */

	~~/*#toc {~~
	~~float: right;~~
	~~right: 0;~~
	~~top: 7em; /* Adjust as needed; 5em might be header height, 6em just under */~~
	~~/* bottom: 5em; / / Alternative bottom positioning */~~
	~~z-index: 10000; /* Ensures it floats above other content */~~
	~~background-color: rgb(249, 249, 249); /* Fallback background color */~~
	~~background-color: rgba(249, 249, 249, 0.9); /* Background with opacity */~~
	~~/* Higher opacity (last argument) means less transparency */~~
	~~padding: 1em; /* Add some padding around the TOC content */~~
	~~border: 1px solid #aaa; /* Optional border */~~
	~~max-width: 300px; /* Optional: constrain the width */~~
	}

	~~/* Ensure the TOC height doesn't take over the screen; adjust max-height as needed */~~
	~~#toc > ul {~~
	~~max-height: 350px; /* Or a percentage like 70vh */~~
	~~overflow-y: auto; /* Add scrollbar if content exceeds max-height */~~
	}

	~~/* Optional: Style for the show/hide toggle if it's part of your TOC structure */~~
	~~.toctoggle {~~
	~~float: right; /* Or adjust as needed */~~
	~~}*/~~

	#toc {		#toc {

Patrick at 16:46, 20 May 2025

2025-05-20T16:46:54Z

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
-#toc {
+/*#toc {
    float: right;
    right: 0;
@@ Line 24: / Line 24: @@
 .toctoggle {
    float: right; /* Or adjust as needed */
+}

Patrick at 16:43, 20 May 2025

2025-05-20T16:43:57Z

← Older revision		Revision as of 16:43, 20 May 2025
Line 2:		Line 2:

	#toc {		#toc {
	~~position~~: ~~fixed~~;		float: right;
	right: 0;		right: 0;
	top: 7em; /* Adjust as needed; 5em might be header height, 6em just under */		top: 7em; /* Adjust as needed; 5em might be header height, 6em just under */

Patrick at 16:26, 20 May 2025

2025-05-20T16:26:28Z

← Older revision		Revision as of 16:26, 20 May 2025
Line 2:		Line 2:

	#toc {		#toc {
	position: ~~sticky~~;		position: fixed;
	right: 0;		right: 0;
	top: 7em; /* Adjust as needed; 5em might be header height, 6em just under */		top: 7em; /* Adjust as needed; 5em might be header height, 6em just under */