MediaWiki:Gadget-GreenUI.css

/* Style the UI elements green */

/* Buttons */ .createboxButton, .bodySearchWrap .mw-ui-button { padding-top: 6px; padding-bottom: 7px; } .mw-ui-button.mw-ui-progressive:not(:disabled) { background-color: #080; border-color: #080; } .mw-ui-button.mw-ui-progressive:not(:disabled):hover { background-color: #0a0; border-color: #0a0; } .mw-ui-button.mw-ui-progressive:not(:disabled):focus { box-shadow: inset 0 0 0 1px #080,inset 0 0 0 2px #fff; } .mw-ui-button.mw-ui-progressive:not(:disabled).is-on, .mw-ui-button.mw-ui-progressive:not(:disabled):active, .mw-ui-button.mw-ui-progressive:not(:disabled).mw-ui-checked { background-color: #060; border-color: #060; } .mw-ui-button.mw-ui-progressive.mw-ui-quiet { color: #080; background-color: transparent; border-color: transparent; } .mw-ui-button.mw-ui-progressive.mw-ui-quiet:hover, input[type="checkbox"]:hover + .mw-ui-button.mw-ui-progressive.mw-ui-quiet { color: #0a0; background-color: rgba(52,255,123,0.1); } .mw-ui-button:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080,inset 0 0 0 2px #fff; } .mw-ui-button.mw-ui-progressive.mw-ui-quiet:focus, input[type="checkbox"]:focus + .mw-ui-button.mw-ui-progressive.mw-ui-quiet { color: #080; border-color: #080; } .mw-ui-button.mw-ui-quiet:focus, .mw-ui-button.mw-ui-quiet.mw-ui-progressive:focus, .mw-ui-button.mw-ui-quiet.mw-ui-destructive:focus, input[type="checkbox"]:focus + .mw-ui-button.mw-ui-quiet, input[type="checkbox"]:focus + .mw-ui-button.mw-ui-quiet.mw-ui-progressive, input[type="checkbox"]:focus + .mw-ui-button.mw-ui-quiet.mw-ui-destructive { color: #080; border-color: #080; box-shadow: inset 0 0 0 1px #080,inset 0 0 0 2px #fff; } .mw-ui-input:focus, .oo-ui-tagItemWidget.oo-ui-widget-enabled:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080; outline: 0; }

/* Radio buttons */ .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked + span { border-color: #080; } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:hover + span, .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked:hover + span { border-color: #0a0; } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked:active + span { border-color: #060; box-shadow: #060; } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:active + span { background-color: #060; border-color: #060; }
 * focus {

outline-color: #080; }

/* Checkboxes */ .client-js .mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:hover + label::before { border-color: #080; } .client-js .mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:focus + label::before { border-color: #080; box-shadow: inset 0 0 0 1px #080,inset 0 0 0 2px #fff; } .client-js .mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:active + label::before { background-color: #060; border-color: #060; box-shadow: inset 0 0 0 1px #060,inset 0 0 0 2px #fff; } .client-js .mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:checked + label::before { background-color: #080; border-color: #080; } .client-js .mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:checked:hover + label::before { background-color: #0a0; border-color: #0a0; } .client-js .mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:checked:focus + label::before { background-color: #080; border-color: #080; box-shadow: inset 0 0 0 1px #080,inset 0 0 0 2px #fff; } .client-js .mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:checked:active + label::before { background-color: #060; border-color: #060; }

/* Calendar widget */ .mw-widget-calendarWidget-item:hover { background-color: #080; } .mw-widget-calendarWidget-day-today { box-shadow: inset 0 0 0 1px #080; } .mw-widget-calendarWidget-item-selected { background-color: #060; }

/* Text input */ .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080; } .oo-ui-textInputWidget.oo-ui-widget-enabled:hover input:focus, .oo-ui-textInputWidget.oo-ui-widget-enabled:hover textarea:focus { border-color: #080; } .oo-ui-textInputWidget.oo-ui-widget-enabled textarea.oo-ui-inputWidget-input:focus { outline: 1px solid #080; }

/* WikiEditor */ .wikiEditor-ui-toolbar .tabs span.tab a { color: #080; } .wikiEditor-ui-toolbar .booklet > .index > .current { color: #080; background-color: #eafff3; }

/* LinkSuggest */ .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { color: #060; border-color: #0a0; background: linear-gradient(to top, rgba(0,255,0,0.25), transparent); }

/* Edit page */ .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { background-color: #080; border-color: #080; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { background-color: #0a0; border-color: #0a0; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active:focus, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button { background-color: #060; border-color: #060; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080,inset 0 0 0 2px #fff; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080; } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked + span { background-color: #080; border-color: #080; } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:hover + span { border-color: #080; } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span { border-color: #080; box-shadow: inset 0 0 0 1px #080; } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:hover + span { background-color: #0a0; border-color: #0a0; } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:active + span { background-color: #060; border-color: #060; box-shadow: inset 0 0 0 1px #060; } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:focus + span { border-color: #080; background-color: #080; box-shadow: inset 0 0 0 1px #080,inset 0 0 0 2px #fff; }

/* Mobile */ .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:focus { box-shadow: inset 0 0 0 1px #080,0 0 0 1px #080; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-iconElement > .oo-ui-buttonElement-button:focus, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-labelElement > .oo-ui-buttonElement-button:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080; } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip { border-color: #0a0; } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus { background-color: #060; border-color: #060; box-shadow: inset 0 0 0 1px #060; } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on { background-color: #080; border-color: #080; } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover { background-color: #060; border-color: #060; } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080; } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus { border-color: #080; } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover { background-color: #0a0; border-color: #0a0; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { background-color: #060; border-color: #060; }

/* Create account */ body.skin-timeless:not(.mobile) #mw-createaccount-join, body:not(.skin-minerva):not(.skin-timeless) #mw-createaccount-join { color: #080; } body.skin-timeless:not(.mobile) #mw-createaccount-join:hover, body:not(.skin-minerva):not(.skin-timeless) #mw-createaccount-join:hover { border-color: #0b0; } body.skin-timeless:not(.mobile) #mw-createaccount-join:active, body:not(.skin-minerva):not(.skin-timeless) #mw-createaccount-join:active { background-color: #d8f0db; border-color: #080; color: #060; } body.skin-timeless:not(.mobile) #mw-createaccount-join:focus, body:not(.skin-minerva):not(.skin-timeless) #mw-createaccount-join:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080; }

/* Window manager */ .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080; } .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected { background-color: #eafff3; color: #080; } .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted { background-color: rgba(41,204,98,0.1); color: #080; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: #080; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { border-color: #080; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active:focus, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button { background-color: #eff3fa; border-color: #2a8d4b; color: #2a8d4b; } .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus { border-color: #080; } .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus { border-color: #080; box-shadow: inset 0 0 0 1px #080; } .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { color: #080; box-shadow: inset 0 -2px 0 0 #080; } .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { color: #0a0; box-shadow: inset 0 -2px 0 0 #0a0; } .oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input { border-color: #d33; } .oo-ui-processDialog .oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(.oo-ui-flaggedElement-destructive) > .oo-ui-buttonElement-button:focus { border-color: #080; }

/* Visual editor */ .ve-init-mw-progressBarWidget { border-color: #080; } .ve-init-mw-progressBarWidget-bar, .oo-ui-progressBarWidget.oo-ui-widget-enabled .oo-ui-progressBarWidget-bar { background: #080; } .mw-pulsating-dot::before, .mw-pulsating-dot::after { background-color: #080; } .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link { background-color: #080; } .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:hover { background-color: #0a0; } .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active:focus, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-tool-link { background-color: #060; } .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:focus { outline: 1px solid #080; }

/* JavaScript recent changes */ .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: #080; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { color: #0a0; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active:focus, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { color: #060; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus, .oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button { border-color: #080; box-shadow: inset 0 0 0 1px #080,inset 0 0 0 2px #fff; }