MediaWiki:Common.css - Revision history

Radar at 03:51, 22 March 2025

2025-03-22T03:51:16Z

Ryan at 05:17, 11 December 2024

2024-12-11T05:17:50Z

Ryan at 03:58, 11 December 2024

2024-12-11T03:58:59Z

@@ Line 601: / Line 601: @@
      padding: 0;
      border: none;
+}

Ryan at 05:40, 9 December 2024

2024-12-09T05:40:27Z

Show changes

Ryan at 03:43, 9 December 2024

2024-12-09T03:43:27Z

@@ Line 559: / Line 559: @@
          height: 100%; /* Match parent height */
+     }
+}

Ryan at 03:30, 9 December 2024

2024-12-09T03:30:35Z

← Older revision		Revision as of 03:30, 9 December 2024
Line 229:		Line 229:
	}		}

			/* Tooltip image within the cell */
	.tooltip-cell img {		.tooltip-cell img {
	display: inline-block;		display: inline-block;
	margin: 0 auto;		margin: 0 auto;
	padding: 0;		padding: 0;
	width: 48px;		width: 48px; /* Fixed size for tooltip images */
	height: 48px;		height: 48px;
	border: none;		border: none;
	background: none;		background: none;
			object-fit: contain; /* Maintain aspect ratio */
	}		}

			/* Tooltip text image styling */
	.tooltip-cell .tooltip-text img {		.tooltip-cell .tooltip-text img {
	width: ~~100%~~;		width: 48px; /* Ensure the image stays at 48px width */
	height: ~~auto~~;		height: 48px; /* Ensure height matches width for square aspect */
	display: block;		display: block;
	margin: 0 auto;		margin: 0 auto;
	border: none !important;		border: none !important;
	background: none;		background: none;
			object-fit: contain; /* Prevents distortion */
	}		}

			/* Prevent global image scaling from affecting tooltip images */
			img.tooltip-cell img {
			max-width: none !important;
			height: 48px !important; /* Ensures height is fixed */
			width: 48px !important; /* Ensures width is fixed */
			}


	/* Style the page action menu container */		/* Style the page action menu container */
Line 547:		Line 559:
	height: 100%; /* Match parent height */		height: 100%; /* Match parent height */
	}		}
			}

			/* Ensure images scale properly and stay within bounds */
			img {
			max-width: 100%; /* Ensures the image never exceeds the container width */
			height: auto; /* Maintains the aspect ratio */
			display: block; /* Makes images block-level to prevent inline overlap */
			margin: 0 auto; /* Centers the image within its container */
			object-fit: contain; /* Ensures images scale without distortion */
			overflow: hidden; /* Prevents images from overflowing out of the container */
			}

			/* Set the parent container for images to have controlled dimensions */
			div.image, .thumb {
			max-width: 100%; /* Prevents container from exceeding the page width */
			max-height: 500px; /* Limit the height to avoid over-scrolling */
			margin: 10px auto; /* Adds some spacing around the container */
			position: relative; /* Make sure images are contained within the bounds */
			overflow: hidden; /* Ensures the images stay within their containers */
			display: inline-block; /* Keeps images from overlapping */
	}		}

Ryan at 03:26, 9 December 2024

2024-12-09T03:26:48Z

← Older revision		Revision as of 03:26, 9 December 2024
Line 550:		Line 550:

	/* Ensure images scale properly and stay within bounds */		/* Ensure images scale properly and stay within bounds */
	img~~:not(.tooltip-cell img)~~ {		img {
	max-width: 100%; /* Ensures the image never exceeds the container width */		max-width: 100%; /* Ensures the image never exceeds the container width */
	height: auto; /* Maintains the aspect ratio */		height: auto; /* Maintains the aspect ratio */
Line 569:		Line 569:
	}		}

	/* Tooltip images ~~(these will not be affected by the global image scaling)~~ */		/* Tooltip images */
	.tooltip-cell img {		.tooltip-cell img {
			width: 48px; /* Keeping the tooltip image size fixed */
			height: 48px;
	display: inline-block;		display: inline-block;
	margin: 0 auto;		margin: 0 auto;
	padding: 0;		padding: 0;
	~~width: 48px; /* Keeping the tooltip image size fixed */~~
	~~height: 48px;~~
	border: none;		border: none;
	background: none;		background: none;
	}		}

			/* Ensure tooltip images within the tooltip text do not get affected */
	.tooltip-cell .tooltip-text img {		.tooltip-cell .tooltip-text img {
	width: 100%;		width: 100%;
Line 587:		Line 588:
	border: none !important;		border: none !important;
	background: none;		background: none;
			}

			/* Exclude images inside tooltips from global image scaling */
			.tooltip-cell img, .tooltip-cell .tooltip-text img {
			max-width: none !important; /* Disable max-width scaling for tooltip images */
			height: auto; /* Maintain aspect ratio without scaling */
			object-fit: contain; /* Prevent distortion */
			margin: 0; /* Keep margins intact */
	}		}

Ryan at 03:25, 9 December 2024

2024-12-09T03:25:45Z

@@ Line 547: / Line 547: @@
          height: 100%; /* Match parent height */
+     }
+}

Ryan at 03:23, 9 December 2024

2024-12-09T03:23:29Z

@@ Line 547: / Line 547: @@
          height: 100%; /* Match parent height */
+     }
+}

Ryan at 03:21, 9 December 2024

2024-12-09T03:21:07Z

← Older revision		Revision as of 03:21, 9 December 2024
Line 548:		Line 548:
	}		}
	}		}

	~~/* IMAGE FIXING */~~

	/* Ensure images scale properly and stay within bounds */		/* Ensure images scale properly and stay within bounds */
	img {		img {
	max-width: 100%; /* Ensures the image never exceeds the container width */		max-width: 100%; /* Ensures the image never exceeds the container width */
	height: auto; /* Maintains the aspect ratio */		height: auto; /* Maintains the aspect ratio */
	display: block; /* Makes images block-level to prevent inline overlap */		display: block; /* Makes images block-level to prevent inline overlap */
	margin: 0 auto; /* Centers the image within its container */		margin: 0 auto; /* Centers the image within its container */
	object-fit: contain; /* Ensures images scale without distortion */		object-fit: contain; /* Ensures images scale without distortion */
			overflow: hidden; /* Prevents images from overflowing out of the container */
			}

			/* Set the parent container for images to have controlled dimensions */
			div.image, .thumb {
			max-width: 100%; /* Prevents container from exceeding the page width */
			max-height: 500px; /* Limit the height to avoid over-scrolling */
			margin: 10px auto; /* Adds some spacing around the container */
			position: relative; /* Make sure images are contained within the bounds */
			overflow: hidden; /* Ensures the images stay within their containers */
			display: inline-block; /* Keeps images from overlapping */
	}		}

	/* Optional: ~~Adjust the~~ image ~~container for spacing and alignment~~ */		/* Optional: If you're using specific image classes */
	img:not([src*="link="]) {		img:not([src*="link="]) {
	max-width: ~~500px~~; /* ~~Example width, you can adjust this~~ */		max-width: 100%; /* Prevents images from being larger than their container */
	~~margin~~: ~~10px~~ auto; /* ~~Add spacing around the image~~ */		height: auto; /* Maintains aspect ratio */
	}		}