MediaWiki:Gadget-Twinkle.css: Difference between revisions

/* Define CSS variables */
html {
	--twinkle-bgcolor-dialog: #F0F8FF;
	--twinkle-bgcolor-titlebar: #BCCADF;
}

@media screen {
	html.skin-theme-clientpref-night {
		--twinkle-bgcolor-dialog: #141c26;
		--twinkle-bgcolor-titlebar: #1c2a52;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os {
		--twinkle-bgcolor-dialog: #141c26;
		--twinkle-bgcolor-titlebar: #1c2a52;
	}
}

/**
 * Explicitly set width of TW menu so that we can use a hidden peer gadget
 * to add space where the TW menu would go before it loads. See
 * twinkle-pagestyles.css
 */
.skin-vector .vector-menu-dropdown #p-twinkle {
	width: 3.24em;
}

/**
 * In skin vector-2022, open the TW menu when mouse hovers over it. Credit to
 * [[en:User:Nardog]] for this fix.
 */
#p-twinkle:hover > .vector-menu-content {
	opacity: 1;
	visibility: visible;
	height: auto;
}

/* The additional box on user skin.js and twinklepreferences.js pages */
#twinkle-config-headerbox {
	border: 1px #f60 solid;
	background: #fed;
	padding: 0.6em;
	margin: 0.5em auto;
	text-align: center;
	color: inherit;
}

/* twinkleoptions.js */
#twinkle-config-headerbox.config-twopt-box {
	font-weight: bold;
	width: 80%;
	border-width: 2px;
}

/* skin-specific js */
#twinkle-config-headerbox.config-userskin-box {
	width: 60%;
}

/* WP:TWPREFS */
#twinkle-config-content input[type=checkbox] {
	margin-right: 2px;
}

/* Twinkle config */
#twinkle-config {
	border: 1px solid #666;
	background: var(--twinkle-bgcolor-dialog, #F0F8FF);
	color: inherit;
}

#twinkle-config label {
	color: var(--color-base, #202122);
}

#twinkle-config-titlebar {
	background: var(--twinkle-bgcolor-titlebar, #BCCADF);
	color: inherit;
}

#twinkle-config-buttonpane {
	background: var(--twinkle-bgcolor-titlebar, #BCCADF);
	color: inherit;
	padding: 0.5em;
}

.twinkle-config-helptip {
	font-size: 90%;
	color: var(--color-subtle, #54595d);
}

@media screen {
	html.skin-theme-clientpref-night #twinkle-config-headerbox {
		background: #532B18;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os #twinkle-config-headerbox {
		background: #532B18;
	}
}