MediaWiki:Gadget-Twinkle.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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;
}
}