MediaWiki:Common.css - Revision history

Willow at 14:28, 1 January 2026

2026-01-01T14:28:05Z

← Older revision		Revision as of 14:28, 1 January 2026
Line 35:		Line 35:
	* Sound *		* Sound *
	******************************/		******************************/
	.sound-button,		.sound-button,.sound-button a,.sound-button a.image,.sound-button img {
	.sound-button a,
	.sound-button a.image,
	.sound-button img {
	background: none !important;		background: none !important;
	background-color: transparent !important;		background-color: transparent !important;
Line 46:		Line 43:
	text-decoration: none !important;		text-decoration: none !important;
	padding: 0 !important;		padding: 0 !important;
	margin: 0 !important;		margin: 0 !important
	}

	~~.sound-button {~~
	~~cursor: pointer;~~
	~~display: inline-flex;~~
	~~align-items: center;~~
	~~justify-content: center;~~
	~~vertical-align: middle;~~
	~~margin: 0 4px !important;~~
	}		}

Line 61:		Line 49:
	filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);		filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);
	transition: filter 0.2s ease-in-out;		transition: filter 0.2s ease-in-out;
	~~/* This ensures only the icon shape is seen */~~
	display: inline-block !important;		display: inline-block !important;
	vertical-align: middle;		vertical-align: middle;
			margin: 0 !important;
	}		}

	.sound-button:~~hover img,~~		.sound-button {
	~~.sound~~-~~button.playing img {~~		cursor: pointer;
	~~filter~~: ~~invert(93%) sepia(5%) saturate(782%) hue~~-~~rotate(151deg) brightness(115%) contrast(100%)~~		display: inline-block !important;
	~~drop~~-~~shadow(0 0 2px rgba(201, 225, 230, 0.7))~~;		vertical-align: middle;
			margin: 0 2px !important;
			line-height: 1;
			white-space: nowrap;
	}		}

	.sound-button a:hover,		.sound-button:hover img,.sound-button.playing img {
	.sound-button a:focus {		filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(115%) contrast(100%) drop-shadow(0 0 2px rgba(201,225,230,0.7))
			}

			.sound-button a:hover,.sound-button a:focus {
	background: none !important;		background: none !important;
	border: none !important;		border: none !important
	}		}
	/*****************************		/*****************************

Willow at 14:23, 1 January 2026

2026-01-01T14:23:16Z

← Older revision		Revision as of 14:23, 1 January 2026
Line 62:		Line 62:
	transition: filter 0.2s ease-in-out;		transition: filter 0.2s ease-in-out;
	/* This ensures only the icon shape is seen */		/* This ensures only the icon shape is seen */
	display: block !important;		display: inline-block !important;
			vertical-align: middle;
	}		}

Willow: more mobile stuff

2026-01-01T13:12:52Z

more mobile stuff

@@ Line 3,894: / Line 3,894: @@
      .mp-box h2 { font-size: 1.5em !important; padding: 0.2em 0 !important; }
      .mp-box .welcome-message { font-size: 1.3em !important; padding: 0.4em !important; }
      .druid-infobox .druid-title { font-size: 1.3em !important; min-height: auto !important; }
      a.tabber__tab { font-size: 1.1em !important; }
@@ Line 4,036: / Line 4,035: @@
          padding: 10px 5px !important;
+     }
+}

Willow: mobile fixes (by SublimeText.Mediawiker)

2025-12-31T15:29:20Z

mobile fixes (by SublimeText.Mediawiker)

Show changes

Willow at 12:54, 31 December 2025

2025-12-31T12:54:47Z

← Older revision		Revision as of 12:54, 31 December 2025
Line 35:		Line 35:
	* Sound *		* Sound *
	******************************/		******************************/
			.sound-button,
			.sound-button a,
			.sound-button a.image,
			.sound-button img {
			background: none !important;
			background-color: transparent !important;
			border: none !important;
			outline: none !important;
			box-shadow: none !important;
			text-decoration: none !important;
			padding: 0 !important;
			margin: 0 !important;
			}

	.sound-button {		.sound-button {
	cursor: pointer;		cursor: pointer;
Line 40:		Line 54:
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
	~~padding: 3px;~~
	~~border-radius: 4px;~~
	~~transition: all 0.3s ease;~~
	vertical-align: middle;		vertical-align: middle;
			margin: 0 4px !important;
	}		}

	.sound-button img {		.sound-button img {
	filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);		filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);
	transition: filter 0.3s ease;		transition: filter 0.2s ease-in-out;
			/* This ensures only the icon shape is seen */
			display: block !important;
	}		}

	.sound-button:hover img,		.sound-button:hover img,
	.sound-button.playing img {		.sound-button.playing img {
	filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(~~105~~%) contrast(89%)		filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(115%) contrast(100%)
	drop-shadow(0 0 ~~3px #c9e1e6)~~		drop-shadow(0 0 2px rgba(201, 225, 230, 0.7));
	~~drop-shadow(0 0 6px~~ rgba(201, 225, 230, 0.6));
	}

	~~.sound-button:hover,~~
	~~.sound-button.playing {~~
	~~background: rgba(201, 225, 230, 0.1~~);
	}		}

	.sound-button a.~~image~~ {		.sound-button a:hover,
	~~pointer-events~~: none !important;		.sound-button a:focus {
			background: none !important;
			border: none !important;
	}		}
	/*****************************		/*****************************

Willow: test

2025-12-31T12:49:42Z

test

← Older revision		Revision as of 12:49, 31 December 2025
Line 35:		Line 35:
	* Sound *		* Sound *
	******************************/		******************************/
	~~/* Container Setup */~~
	.sound-button {		.sound-button {
	cursor: pointer;		cursor: pointer;
Line 41:		Line 40:
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
	padding: ~~2px~~;		padding: 3px;
	border-radius: 4px;		border-radius: 4px;
	transition: all 0.2s ease;		transition: all 0.3s ease;
	~~background~~: ~~rgba(0, 0, 0, 0.1);~~		vertical-align: middle;
	~~border: 1px solid transparent~~;
	}		}

	.sound-button~~:hover~~ {		.sound-button img {
	~~background~~: ~~rgba~~(~~255, 255, 255, 0.1~~);		filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);
	~~border-color~~: ~~#D3D3D3~~;		transition: filter 0.3s ease;
	}		}

	.sound-~~icon-playing {~~		.sound-button:hover img,
	~~display~~: ~~none;~~		.sound-button.playing img {
	}		filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(105%) contrast(89%)
			drop-shadow(0 0 3px #c9e1e6)
	.sound-button.playing ~~.sound-icon-static~~ {		drop-shadow(0 0 6px rgba(201, 225, 230, 0.6));
	~~display~~: ~~none;~~
	}

	~~.sound~~-~~button~~.~~playing .sound-icon-playing {~~
	~~display: inline-block~~;
	}		}

			.sound-button:hover,
	.sound-button.playing {		.sound-button.playing {
	background: rgba(93, ~~190~~, ~~255~~, 0.2);		background: rgba(201, 225, 230, 0.1);
	}		}

Willow at 12:13, 31 December 2025

2025-12-31T12:13:09Z

← Older revision		Revision as of 12:13, 31 December 2025
Line 35:		Line 35:
	* Sound *		* Sound *
	******************************/		******************************/
			/* Container Setup */
	.sound-button {		.sound-button {
	cursor: pointer;		cursor: pointer;
	display: inline-~~block~~;		display: inline-flex;
			align-items: center;
			justify-content: center;
	padding: 2px;		padding: 2px;
	border-radius: 4px;		border-radius: 4px;
	transition: background 0.2s;		transition: all 0.2s ease;
	~~vertical-align~~: ~~middle~~;		background: rgba(0, 0, 0, 0.1);
			border: 1px solid transparent;
	}		}

	.sound-button:hover {		.sound-button:hover {
	background: rgba(255, 255, 255, 0.2);		background: rgba(255, 255, 255, 0.1);
			border-color: #D3D3D3;
			}

			.sound-icon-playing {
			display: none;
			}

			.sound-button.playing .sound-icon-static {
			display: none;
			}

			.sound-button.playing .sound-icon-playing {
			display: inline-block;
	}		}

	.sound-button.playing {		.sound-button.playing {
	background: ~~#5dbeff~~;		background: rgba(93, 190, 255, 0.2);
	~~box~~-~~shadow~~: ~~0 0 5px #5dbeff~~;		}

			.sound-button a.image {
			pointer-events: none !important;
	}		}
	/*****************************		/*****************************

Willow: test

2025-12-31T11:18:39Z

test

@@ Line 31: / Line 31: @@
      --is-navigation-inside-content: 0;
+}
 /*****************************

Willow: test !@!!!@! (by SublimeText.Mediawiker)

2025-12-30T22:29:17Z

test !@!!!@! (by SublimeText.Mediawiker)

← Older revision		Revision as of 22:29, 30 December 2025
Line 1,645:		Line 1,645:
	}		}

	.has-worn-variant {		body .has-worn-variant .image-base {
	~~position: relative;~~		display: block !important;
	display: ~~flex~~ !important;
	~~flex-direction: column;~~
	~~align-items: center~~;
	}		}

	.has-worn-variant .image-worn {		body .has-worn-variant .image-worn {
	display: none !important;		display: none !important;
	}		}

	.has-worn-variant.is-worn-active .image-base {		body .has-worn-variant.is-worn-active .image-base {
	display: none !important;		display: none !important;
	}		}
	.has-worn-variant.is-worn-active .image-worn {
			body .has-worn-variant.is-worn-active .image-worn {
			display: block !important;
			}

			.image-base img, .image-worn img {
	display: block !important;		display: block !important;
			margin: 0 auto !important;
			max-width: 100%;
			height: auto;
	}		}

Line 1,666:		Line 1,671:
	display: inline-block !important;		display: inline-block !important;
	margin-top: 10px;		margin-top: 10px;
	padding: ~~6px 14px~~;		padding: 5px 15px;
	background~~-color~~: #~~222~~ !important;		background: #333 !important;
	color: #fff !important;		color: #fff !important;
	border: 1px solid #~~555~~ !important;		border: 1px solid #666 !important;
	border-radius: 4px;		border-radius: 4px;
	cursor: pointer;		cursor: pointer;
	font-size: ~~12px~~;		font-size: 11px;
	font-weight: bold;		font-weight: bold;
	text-transform: uppercase;		text-transform: uppercase;
	~~transition: all 0.2s;~~
	~~user-select: none;~~
	}

	~~.worn-toggle-button:hover {~~
	~~background-color: #444 !important;~~
	~~border-color: #999 !important;~~
	}		}

	.is-worn-active .worn-toggle-button {		.is-worn-active .worn-toggle-button {
	background~~-color~~: #~~622~~ !important;		background: #833 !important;
	}		}

Willow: testy westy (by SublimeText.Mediawiker)

2025-12-30T22:25:13Z

testy westy (by SublimeText.Mediawiker)

← Older revision		Revision as of 22:25, 30 December 2025
Line 1,647:		Line 1,647:
	.has-worn-variant {		.has-worn-variant {
	position: relative;		position: relative;
	display: flex;		display: flex !important;
	flex-direction: column;		flex-direction: column;
	align-items: center;		align-items: center;
Line 1,664:		Line 1,664:

	.worn-toggle-button {		.worn-toggle-button {
	display: inline-block;		display: inline-block !important;
	margin-top: ~~8px~~;		margin-top: 10px;
	padding: ~~5px 12px~~;		padding: 6px 14px;
	background: #222;		background-color: #222 !important;
	color: #~~eee~~;		color: #fff !important;
	border: 1px solid #~~444~~;		border: 1px solid #555 !important;
	border-radius: ~~3px~~;		border-radius: 4px;
	cursor: pointer;		cursor: pointer;
	font-size: ~~11px~~;		font-size: 12px;
	font-weight: bold;		font-weight: bold;
	text-transform: uppercase;		text-transform: uppercase;
	z-~~index~~: 10;		transition: all 0.2s;
			user-select: none;
	}		}

	.worn-toggle-button:hover {		.worn-toggle-button:hover {
	background: #444;		background-color: #444 !important;
	color: #~~fff~~;		border-color: #999 !important;
	}		}

	~~.has-worn-variant~~.is-worn-active .worn-toggle-button {		.is-worn-active .worn-toggle-button {
	background~~: #5a2d2d;~~		background-color: #622 !important;
	~~border~~-color: #~~833~~;
	}		}