MediaWiki:Common.css - Revision history

Lokiy at 19:04, 13 February 2025

2025-02-13T19:04:00Z

← Older revision		Revision as of 19:04, 13 February 2025
Line 1:		Line 1:
	~~/* CSS placed here will be applied to all skins */~~		.image-link {
	.image-~~hover~~ {
	position: relative;		position: relative;
	text-decoration: ~~underline;~~		text-decoration: none;
	~~cursor: pointer~~;
	}		}

	.~~hover-~~image-~~wrapper~~ {		.image-preview {
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			width: 200px; /* Adjust as needed */
			height: 200px; /* Adjust as needed */
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
	display: none;		display: none;
	~~position: absolute;~~
	~~top: 20px;~~
	~~left: 0;~~
	~~max-width: 200px; /* Adjust as needed */~~
	~~background: white;~~
	~~padding: 5px;~~
	border: 1px solid #ccc;		border: 1px solid #ccc;
	~~box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);~~		z-index: 10;
	z-index: ~~1000~~;
	}		}

	.image-~~hover~~:hover .~~hover-~~image-~~wrapper~~ {		.image-link:hover + .image-preview {
	display: block;		display: block;
	}		}

Admin at 22:42, 12 February 2025

2025-02-12T22:42:39Z

← Older revision		Revision as of 22:42, 12 February 2025
Line 6:		Line 6:
	}		}

	.image-~~hover img~~ {		.hover-image-wrapper {
	display: none;		display: none;
	position: absolute;		position: absolute;
	top: 20px;		top: 20px;
	left: 0;		left: 0;
	max-width: 200px; /* Adjust ~~size~~ as needed */		max-width: 200px; /* Adjust as needed */
	~~border: 1px solid #ccc;~~
	background: white;		background: white;
	padding: 5px;		padding: 5px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);		border: 1px solid #ccc;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	z-index: 1000;		z-index: 1000;
	}		}

	.image-hover:hover ~~img~~ {		.image-hover:hover .hover-image-wrapper {
	display: block;		display: block;
	}		}

Admin at 22:41, 12 February 2025

2025-02-12T22:41:02Z

← Older revision		Revision as of 22:41, 12 February 2025
Line 4:		Line 4:
	text-decoration: underline;		text-decoration: underline;
	cursor: pointer;		cursor: pointer;
	~~display: inline-block;~~
	}		}

	.~~hover-~~image-~~wrapper~~ {		.image-hover img {
	display: none;		display: none;
	position: absolute;		position: absolute;
	top: ~~25px~~;		top: 20px;
	left: 0;		left: 0;
			max-width: 200px; /* Adjust size as needed */
			border: 1px solid #ccc;
	background: white;		background: white;
	padding: 5px;		padding: 5px;
	~~border: 1px solid #ccc;~~		box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	z-index: 1000;		z-index: 1000;
	}		}

	~~.hover-image-wrapper img {~~		.image-hover:hover img {
	~~max-width: 200px; /* Adjust as needed */~~
	~~height: auto;~~
	}

	.image-hover:hover ~~.hover-image-wrapper~~ {
	display: block;		display: block;
	}		}

Admin at 20:49, 12 February 2025

2025-02-12T20:49:32Z

← Older revision		Revision as of 20:49, 12 February 2025
Line 4:		Line 4:
	text-decoration: underline;		text-decoration: underline;
	cursor: pointer;		cursor: pointer;
			display: inline-block;
	}		}

Line 9:		Line 10:
	display: none;		display: none;
	position: absolute;		position: absolute;
	top: ~~20px~~;		top: 25px;
	left: 0;		left: 0;
	~~max-width: 200px; /* Adjust as needed */~~
	background: white;		background: white;
	padding: 5px;		padding: 5px;
Line 17:		Line 17:
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	z-index: 1000;		z-index: 1000;
			}

			.hover-image-wrapper img {
			max-width: 200px; /* Adjust as needed */
			height: auto;
	}		}

Admin at 20:44, 12 February 2025

2025-02-12T20:44:12Z

← Older revision		Revision as of 20:44, 12 February 2025
Line 6:		Line 6:
	}		}

	.image-~~hover img~~ {		.hover-image-wrapper {
	display: none;		display: none;
	position: absolute;		position: absolute;
	top: 20px;		top: 20px;
	left: 0;		left: 0;
	max-width: 200px; /* Adjust ~~size~~ as needed */		max-width: 200px; /* Adjust as needed */
	~~border: 1px solid #ccc;~~
	background: white;		background: white;
	padding: 5px;		padding: 5px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);		border: 1px solid #ccc;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	z-index: 1000;		z-index: 1000;
	}		}

	.image-hover:hover ~~img~~ {		.image-hover:hover .hover-image-wrapper {
	display: block;		display: block;
	}		}

Admin at 20:41, 12 February 2025

2025-02-12T20:41:13Z

← Older revision		Revision as of 20:41, 12 February 2025
Line 4:		Line 4:
	text-decoration: underline;		text-decoration: underline;
	cursor: pointer;		cursor: pointer;
	~~display: inline-block;~~
	}		}

Line 12:		Line 11:
	top: 20px;		top: 20px;
	left: 0;		left: 0;
	max-width: 200px;		max-width: 200px; /* Adjust size as needed */
	border: 1px solid #ccc;		border: 1px solid #ccc;
	background: white;		background: white;

Admin at 03:21, 12 February 2025

2025-02-12T03:21:14Z

← Older revision		Revision as of 03:21, 12 February 2025
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
	.hover~~-image~~ {		.image-hover {
	position: relative;		position: relative;
	text-decoration: ~~none~~;		text-decoration: underline;
			cursor: pointer;
			display: inline-block;
	}		}

	.~~hover~~-~~image:~~hover~~::after~~ {		.image-hover img {
	~~content~~: ~~attr(data-image)~~;		display: none;
	position: absolute;		position: absolute;
	top: 20px;		top: 20px;
	left: ~~20px~~;		left: 0;
	width: 200px~~; /* Adjust size as needed */~~		max-width: 200px;
	~~height: auto;~~
	~~background-size: cover;~~
	~~background-position: center;~~
	~~background-repeat: no-repeat;~~
	~~display: block~~;
	border: 1px solid #ccc;		border: 1px solid #ccc;
			background: white;
	padding: 5px;		padding: 5px;
	~~background-color: white;~~		box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: ~~0px 0px 10px~~ rgba(0, 0, 0, 0.5);		z-index: 1000;
			}

			.image-hover:hover img {
			display: block;
	}		}

Admin at 03:13, 12 February 2025

2025-02-12T03:13:04Z

← Older revision		Revision as of 03:13, 12 February 2025
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
	.~~custom~~-~~tooltip~~ {		.hover-image {
	position: relative;		position: relative;
	~~cursor: pointer;~~		text-decoration: none;
	~~border~~-~~bottom~~: ~~1px dotted black~~; ~~/* Makes it look like a tooltip */~~
	}		}

	.~~tooltip~~-~~content~~ {		.hover-image:hover::after {
	~~display~~: ~~none~~;		content: attr(data-image);
	position: absolute;		position: absolute;
	top: ~~1.5em~~;		top: 20px;
	left: 0;		left: 20px;
	background: ~~white~~;		width: 200px; /* Adjust size as needed */
	border: 1px solid ~~black~~;		height: auto;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			display: block;
			border: 1px solid #ccc;
	padding: 5px;		padding: 5px;
	z-~~index~~: ~~100~~;		background-color: white;
	~~width: auto;~~		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	~~max-width: 250px; /* Adjust size if needed */~~
	box-shadow: ~~2px 2px 5px~~ rgba(0,0,0,0.3);
	}

	~~.custom-tooltip:hover .tooltip-content {~~
	~~display: block~~;
	}		}

Admin at 23:08, 11 February 2025

2025-02-11T23:08:41Z

← Older revision		Revision as of 23:08, 11 February 2025
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
	.tooltip {		.custom-tooltip {
	border-bottom: 1px dotted ~~#000;~~		position: relative;
	~~cursor: help~~;		cursor: pointer;
			border-bottom: 1px dotted black; /* Makes it look like a tooltip */
	}		}

	.tooltip~~:hover::after~~ {		.tooltip-content {
	~~content~~: ~~attr(title)~~;		display: none;
	position: absolute;		position: absolute;
			top: 1.5em;
			left: 0;
	background: white;		background: white;
	border: 1px solid ~~#ccc~~;		border: 1px solid black;
	padding: 5px;		padding: 5px;
	~~white~~-~~space~~: ~~nowrap~~;		z-index: 100;
			width: auto;
			max-width: 250px; /* Adjust size if needed */
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);		box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
			}

			.custom-tooltip:hover .tooltip-content {
			display: block;
	}		}

Admin at 23:04, 11 February 2025

2025-02-11T23:04:01Z

← Older revision		Revision as of 23:04, 11 February 2025
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
	.~~custom-~~tooltip {		.tooltip {
	~~position~~: ~~relative~~;		border-bottom: 1px dotted #000;
	cursor: ~~pointer;~~		cursor: help;
	~~border-bottom: 1px dotted black~~; ~~/* Adds a dotted underline to make it look like a link */~~
	}		}

	.tooltip~~-content~~ {		.tooltip:hover::after {
	~~display~~: ~~none~~; ~~/* Hide the tooltip by default */~~		content: attr(title);
	position: absolute;		position: absolute;
	~~top: 1.5em;~~
	~~left: 0;~~
	background: white;		background: white;
	border: 1px solid ~~black~~;		border: 1px solid #ccc;
	padding: 5px;		padding: 5px;
	z-~~index~~: ~~100;~~		white-space: nowrap;
	~~width: auto;~~
	~~max-width: 250px~~;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);		box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	}

	~~.custom-tooltip:hover .tooltip-content {~~
	~~display: block; /* Show the tooltip on hover */~~
	}		}