Revision as of 21:02, August 21, 2023 by Porplemontage (talk | contribs) (Created page with "→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-...")
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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;
}