8,290
edits
MediaWiki:Vector.css: Difference between revisions
Adjust input / control colors for dark vector theme
m (fix footer height) |
(Adjust input / control colors for dark vector theme) |
||
| Line 112: | Line 112: | ||
--editor-toolbar-background: var(--qud-bg-color-dark); | --editor-toolbar-background: var(--qud-bg-color-dark); | ||
--editor-toolbar-selected-background: var(--qud-border-bg-color-ultralight); | --editor-toolbar-selected-background: var(--qud-border-bg-color-ultralight); | ||
--ui-field-background-color: rgb(30, 30, 30); | |||
--ui-field-color: var(--body-color); | |||
--msupload-background: radial-gradient(rgba(30, 59, 60, 1), rgba(6, 28, 23,1)); | --msupload-background: radial-gradient(rgba(30, 59, 60, 1), rgba(6, 28, 23,1)); | ||
| Line 331: | Line 334: | ||
/* | /* | ||
* | * UI adjustments for dark theme | ||
* | * ============================= | ||
*/ | */ | ||
/* "Edit" page styles */ | |||
.mw-editform textarea.mw-editfont-monospace, | .mw-editform textarea.mw-editfont-monospace, | ||
.editOptions .mw-summary input[name="wpSummary"] { | .editOptions .mw-summary input[name="wpSummary"] { | ||
background: | background: var(--ui-field-background-color); | ||
color: var(-- | color: var(--ui-field-color); | ||
} | } | ||
.mw-editform textarea.mw-editfont-monospace { | .mw-editform textarea.mw-editfont-monospace { | ||
| Line 351: | Line 356: | ||
/ | /* "History" page diff styles */ | ||
td.diff-context { | td.diff-context { | ||
background-color: #222722; | background-color: #222722; | ||
| Line 378: | Line 380: | ||
/* | /* Wiki page footer */ | ||
#footer-places, #footer-icons { | #footer-places, #footer-icons { | ||
display: inline-block; /* fixes footer height issue */ | display: inline-block; /* fixes footer height issue */ | ||
} | |||
/* dark theme for UI input fields, dropdowns, etc. */ | |||
input, | |||
textarea, | |||
select, | |||
.oo-ui-textInputWidget .oo-ui-inputWidget-input, | |||
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle { | |||
background: var(--ui-field-background-color); | |||
color: var(--ui-field-color); | |||
border-style: solid; | |||
border-width: 2px; | |||
border-color: var(--qud-color-k-dark); | |||
border-radius: 2px; | |||
padding: 6px; | |||
transition: border-color 250ms, box-shadow 250ms; | |||
} | |||
.oo-ui-tabOptionWidget, | |||
.mw-widget-dateInputWidget-handle, | |||
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled, | |||
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected, | |||
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover { | |||
background: var(--ui-field-background-color); | |||
color: var(--ui-field-color); | |||
} | |||
.oo-ui-widget-disabled span.oo-ui-dropdownWidget-handle, | |||
.oo-ui-widget-disabled input, | |||
.oo-ui-toggleWidget-off { | |||
background: #656565 !important; | |||
color: var(--ui-field-color); | |||
} | |||
input:hover, | |||
textarea:hover, | |||
select:hover { | |||
border-color: #72777d; | |||
} | |||
input:focus, | |||
textarea:focus, | |||
select:focus { | |||
outline: 0; | |||
border-color: #36c; | |||
box-shadow: inset 0 0 0 1px #36c; | |||
} | |||
.mw-prefs-buttons, | |||
.oo-ui-tabSelectWidget-framed { | |||
background: var(--ui-field-background-color); | |||
} | |||
/* styles for various warning boxes */ | |||
.mw-destfile-warning, | |||
.mw-confirmaccount-bar { | |||
background: #2f0a0a; | |||
border: 1px solid #990000; | |||
color: var(--ui-field-color); | |||
} | |||
/* padding fixes for Preferences page */ | |||
.oo-ui-fieldsetLayout { | |||
padding: 10px; | |||
} | |||
/* darken & fix up the API sandbox form */ | |||
.mw-apisandbox-toolbar { | |||
background: var(--ui-field-background-color); | |||
padding: 1em; | |||
} | } | ||