MediaWiki:Gadget-morebits.css
Appearance
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.
/** * morebits.css * =========== * Styles to support morebits.js. * * The morebits library is maintained by the maintainers of Twinkle. * For queries, suggestions, help, etc., head to [[WT:TW]]. * The latest development source is available at [https://github.com/wikimedia-gadgets/twinkle/blob/master/morebits.css]. */ /* Define CSS variables */ html { --morebits-color-status-status: #4682B4; --morebits-color-legend: #31628F; --morebits-color-tooltip: #0000cd; --morebits-color-info: #228B22; --morebits-color-warning: #FF4500; --morebits-color-titlebar-links: #3062AD; --morebits-bgcolor-dialog: #F0F8FF; --morebits-bgcolor-titlebar: #BCCADF; } @media screen { html.skin-theme-clientpref-night { --morebits-color-status-status: #A6C4DE; --morebits-color-legend: #6B9DCC; --morebits-color-tooltip: #7A7AFF; --morebits-color-info: #6BDB6B; --morebits-color-warning: #FF6D38; --morebits-color-titlebar-links: #8BADDF; --morebits-bgcolor-dialog: #141c26; --morebits-bgcolor-titlebar: #1c2a52; } } @media screen and (prefers-color-scheme: dark) { html.skin-theme-clientpref-os { --morebits-color-status-status: #A6C4DE; --morebits-color-legend: #6B9DCC; --morebits-color-tooltip: #7A7AFF; --morebits-color-info: #6BDB6B; --morebits-color-warning: #FF6D38; --morebits-color-titlebar-links: #8BADDF; --morebits-bgcolor-dialog: #141c26; --morebits-bgcolor-titlebar: #1c2a52; } } /* Morebits.Status */ .morebits_status_status { color: var(--morebits-color-status-status, #4682B4); } .morebits_status_info { color: var(--morebits-color-info, #228B22); } .morebits_status_warn { color: var(--morebits-color-warning, #FF4500); } .morebits_status_error { color: var(--morebits-color-warning, #FF4500); font-weight: bold; } /* Morebits.QuickForm */ form.quickform { width: 96%; vertical-align: middle; margin: auto; padding: .5em; color: var(--color-base, #202122); } form.quickform * { font-family: sans-serif; } form.quickform fieldset { margin: .4em 0 1em; } form.quickform legend { color: var(--morebits-color-legend, #31628F); font-weight: bold; } form.quickform input[type=text], form.quickform select { min-width: 15em; font-size: 110%; } form.quickform select { border: 1px solid gray; margin-left: .2em; } form.quickform input[type=checkbox], form.quickform input[type=radio] { height: 13px; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; padding: 0; width: 13px; vertical-align: top; } form.quickform div { line-height: 18px; } form.quickform h5 { margin: .5em 0 0; padding: .3em .2em .2em; font-size: 108%; /* 100% is 12px => 108% is 12.96px */ } /* only give the top border to headers with something above them */ form.quickform div + h5, form.quickform div + div > h5, form.quickform h5 + h5 { border-top: 1px solid #88A; } form.quickform textarea { width: 100%; height: 4em; font-size: 150%; } form.quickform input:disabled + label { color: var(--color-disabled, #72777d); } form.quickform span.quickformDescription { font-style: italic; } form.quickform span.quickformDescription code { font-style: normal; font-family: monospace; } form.quickform .quickformSubgroup { margin-bottom: .5em; margin-left: 3em; } /* The tooltip button and the content itself */ form.quickform .morebits-tooltipButton { color: var(--morebits-color-tooltip, mediumblue); font-weight: bold; cursor: help; padding: .3em; } .morebits-ui-tooltip { padding: 4px 6px 4px 6px; font-size: 13px; } /* Scrollbox styles, for use within Morebits.SimpleWindow */ div.morebits-scrollbox { background: var(--background-color-base, #fff); color: inherit; border: 1px solid gray; margin-bottom: .6em; margin-top: .6em; max-height: 20em; overflow: auto; padding: 6px 6px 0; } div.morebits-scrollbox > h5:first-child { border: none; margin-top: 0; padding-top: 0; } div.morebits-scrollbox > :last-child { margin-bottom: 6px; } /* Previewbox */ div.morebits-previewbox { background: inherit; color: inherit; border: 2px inset; margin: .4em auto .2em; padding: .2em .4em; } div.morebits-previewbox *:not(img) { vertical-align: baseline; } div.morebits-previewbox .mw-editsection { display: none; } div.morebits-usertext { border: 1px solid #a2a9b1; background-color: var(--background-color-neutral-subtle, #f8f9fa); color: inherit; padding: 5px; font-size: 95%; } /* Morebits.SimpleWindow */ .morebits-dialog { border: 1px #666 solid; font-family: sans-serif; background-color: var(--morebits-bgcolor-dialog, #F0F8FF); color: inherit; background-image: none; } /* px translations in comments are w.r.t standard browser settings, in other settings, the sizes would be scaled accordingly */ .skin-vector .morebits-dialog { font-size: 75%; /* 100% is 16px => 75% is 12px */ } .skin-timeless .morebits-dialog { font-size: 79%; /* 100% is 15.2px => 79% is 12.008px */ } .skin-monobook .morebits-dialog, .skin-modern .morebits-dialog { font-size: 120%; /* 100% is 10px => 120% is 12px */ } body .ui-dialog.morebits-dialog .ui-dialog-titlebar { height: 1em; background-color: var(--morebits-bgcolor-titlebar, #BCCADF) !important; color: inherit; background-image: none !important; font: bold 108% sans-serif; /* 100% is 12px (from above) => 108% is 12.96px */ overflow: hidden; padding: .4em .3em .5em !important; white-space: nowrap; } .morebits-dialog-scriptname { font-weight: normal; } .ui-dialog.morebits-dialog .ui-dialog-titlebar-close { height: 100%; right: 0; top: auto; width: 2em; margin: -.5em -.15em 0; } .ui-dialog.morebits-dialog .ui-dialog-titlebar-close span { margin: .33em; } .ui-dialog.morebits-dialog .morebits-dialog-content { padding: 0; } body .ui-dialog.morebits-dialog .ui-dialog-buttonpane { background-color: var(--morebits-bgcolor-titlebar, #BCCADF); color: inherit; margin: 0; min-height: .5em; padding-left: 1.2em !important; } body .ui-dialog.morebits-dialog .ui-dialog-buttonpane button { float: none; margin: .2em 0 -.1em; cursor: auto; } .morebits-dialog-buttons { font-size: 108%; /* 100% is 12px => 108% is 12.96px */ } .morebits-dialog-footerlinks { font-size: 97%; /* 100% is 12px (from above) => 97% is 11.64px */ float: right; margin: .7em .4em 0 0; } body .ui-dialog.morebits-dialog .morebits-dialog-footerlinks a { color: var(--morebits-color-titlebar-links, #3062AD); } .morebits-dialog-buttons[data-empty] + .morebits-dialog-footerlinks { margin: .1em .4em -.2em 0; } .ui-icon { vertical-align: -3px; } .ui-icon-inline { display: inline-block; } .morebits-ui-tooltip { background: var(--background-color-neutral-subtle, #f8f9fa); color: inherit; border-color: var(--border-color-base, #a2ab91); box-shadow: 0 0 5px #a2ab91; } /* For styling message/warning boxes. Cannot use MediaWiki ombox class because it will be deprecated soon. */ table.morebits-ombox { margin: 4px 10%; border-collapse: collapse; border: 1px solid #a2a9b1; background: var(--background-color-neutral-subtle, #f8f9fa); color: inherit; box-sizing: border-box; } table.morebits-ombox-content { border: 1px solid #f28500; } td.morebits-mbox-image { border: none; padding: 2px 0 2px 0.9em; text-align: center; } th.morebits-mbox-text, td.morebits-mbox-text { border: none; padding: 0.25em 0.9em; width: 100%; } /* Override select2 silliness */ .select2-morebits, .select2-morebits .select2-results, .select2-morebits .select2-results__option[aria-selected=true], .select2-morebits .select2-selection__rendered, .select2-morebits .select2-selection--multiple, .select2-morebits .select2-selection__choice { background: var(--background-color-base, #fff) !important; color: inherit !important; }