Add darkmode to diff view and legacy inputs

This commit is contained in:
Hannes 2019-12-27 14:54:40 +01:00
parent da13b518e9
commit d3a0ce33c8
No known key found for this signature in database
GPG key ID: 371029119C5F0D51
5 changed files with 89 additions and 2 deletions

View file

@ -351,13 +351,19 @@
"+mediawiki.special.changeslist": "skinStyles/mediawiki.special.changeslist.less", "+mediawiki.special.changeslist": "skinStyles/mediawiki.special.changeslist.less",
"+mediawiki.special.changeslist.enhanced": "skinStyles/mediawiki.special.changeslist.enhanced.less", "+mediawiki.special.changeslist.enhanced": "skinStyles/mediawiki.special.changeslist.enhanced.less",
"+mediawiki.special.search.styles": "skinStyles/mediawiki.special.search.styles.less", "+mediawiki.special.search.styles": "skinStyles/mediawiki.special.search.styles.less",
"+mediawiki.special.userlogin.login.styles": "skinStyles/mediawiki.special.userlogin.login.styles.less",
"+mediawiki.special.apisandbox": "skinStyles/mediawiki.special.apisandbox.less",
"+mediawiki.special.preferences.styles.ooui": "skinStyles/mediawiki.special.preferences.styles.ooui.less",
"+mediawiki.diff.styles": "skinStyles/mediawiki.diff.styles.less",
"+mediawiki.ui.input": "skinStyles/mediawiki.ui.components.input.less",
"+mediawiki.ui.checkbox": "skinStyles/mediawiki.ui.components.checkbox.less",
"+oojs-ui-core": "skinStyles/oojs-ui-core.less", "+oojs-ui-core": "skinStyles/oojs-ui-core.less",
"+oojs-ui-toolbars": "skinStyles/oojs-ui-toolbars.less", "+oojs-ui-toolbars": "skinStyles/oojs-ui-toolbars.less",
"+oojs-ui-widgets": "skinStyles/oojs-ui-widgets.less", "+oojs-ui-widgets": "skinStyles/oojs-ui-widgets.less",
"+oojs-ui-windows": "skinStyles/oojs-ui-windows.less", "+oojs-ui-windows": "skinStyles/oojs-ui-windows.less",
"+mmv": "skinStyles/mmv.less", "+mmv": "skinStyles/mmv.less",
"+mw.rcfilters.ui.ChangesListWrapperWidget": "skinStyles/mw.rcfilters.ui.ChangesListWrapperWidget.less", "+mediawiki.rcfilters.filters.base.styles": "skinStyles/mediawiki.rcfilters.filters.base.styles.less",
"+mw.rcfilters.ui.FilterTagMultiselectWidget": "skinStyles/mw.rcfilters.ui.FilterTagMultiselectWidget.less", "+mediawiki.widgets.DateInputWidget.styles": "skinStyles/mediawiki.widgets.DateInputWidget.styles.less",
"ext.CookieWarning.styles": "skinStyles/ext.CookieWarning.styles.less", "ext.CookieWarning.styles": "skinStyles/ext.CookieWarning.styles.less",
"+ext.echo.styles.badge": "skinStyles/ext.echo.styles.badge.less", "+ext.echo.styles.badge": "skinStyles/ext.echo.styles.badge.less",
"+ext.echo.ui": "skinStyles/ext.echo.ui.less", "+ext.echo.ui": "skinStyles/ext.echo.ui.less",

View file

@ -0,0 +1,28 @@
/*
* Citizen - Diff Styles
* https://starcitizen.tools
*/
@import '../resources/variables.less';
@media ( prefers-color-scheme: dark ) {
.diff-context {
background: @dark-bg-10;
border-color: @dark-bg-20;
color: @dark-text-90;
}
/* TODO */
.diff-addedline .diffchange {
background: #d8ecff;
}
.diff-deletedline .diffchange {
background: #feeec8;
}
.mw-diff-movedpara-left:after,
.mw-diff-movedpara-right:after {
color: @dark-text-90;
}
}

View file

@ -0,0 +1,23 @@
/*
* Citizen - Checkbox
* https://starcitizen.tools
*/
@import '../resources/variables.less';
@media ( prefers-color-scheme: dark ) {
.mw-ui-checkbox:not( #noop ) {
[ type='checkbox' ] {
& + label:before {
background-color: @dark-bg-0;
border: 1px solid @dark-bg-60;
}
// disabled checkboxes have a gray background
&:disabled + label:before {
background-color: @dark-bg-30;
border-color: @dark-bg-30;
}
}
}
}

View file

@ -0,0 +1,24 @@
/*
* Citizen - Inputs
* https://starcitizen.tools
*/
@import '../resources/variables.less';
@media ( prefers-color-scheme: dark ) {
.mw-ui-input {
background-color: @dark-bg-0;
color: @dark-text-100;
border: 1px solid @dark-bg-50;
box-shadow: inset 0 0 0 0.1em @dark-bg-0;
&:hover {
border-color: @dark-bg-60;
}
&:disabled {
border-color: @dark-bg-20;
color: @dark-text-70;
}
}
}

View file

@ -215,6 +215,12 @@
background-color: @dark-bg-0; background-color: @dark-bg-0;
} }
} }
.oo-ui-tagItemWidget {
&.oo-ui-widget-enabled {
background-color: @dark-bg-0;
}
}
} }
} }