mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-28 00:01:05 +00:00
Add extension Flow darkmode
Some button colors are still of
This commit is contained in:
Hannes
parent
4fe581fb46
commit
cf356d6844
|
|
@ -358,6 +358,7 @@
|
|||
"+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",
|
||||
"+mediawiki.ui.button": "skinStyles/mediawiki.ui.components.button.less",
|
||||
"+mediawiki.legacy.shared": "skinStyles/mediawiki.legacy.shared.less",
|
||||
"+oojs-ui-core.styles": "skinStyles/oojs-ui-core.less",
|
||||
"+oojs-ui-toolbars": "skinStyles/oojs-ui-toolbars.less",
|
||||
|
|
@ -381,7 +382,10 @@
|
|||
"+ext.translate.tag.languages": "skinStyles/ext.translate.tag.languages.less",
|
||||
"+ext.uls.common": "skinStyles/ext.uls.common.less",
|
||||
"+ext.uls.pt": "skinStyles/ext.uls.pt.less",
|
||||
"+ext.visualEditor.core": "skinStyles/ext.visualEditor.core.less"
|
||||
"+ext.visualEditor.core": "skinStyles/ext.visualEditor.core.less",
|
||||
"+ext.flow": "skinStyles/ext.flow.less",
|
||||
"+ext.flow.ui": "skinStyles/ext.flow.ui.less",
|
||||
"+ext.flow.styles.base": "skinStyles/ext.flow.styles.base.less"
|
||||
}
|
||||
},
|
||||
"AutoloadClasses": {
|
||||
|
|
|
|||
260
skinStyles/ext.flow.less
Normal file
260
skinStyles/ext.flow.less
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
/*
|
||||
* Citizen - Flow extension
|
||||
* https://starcitizen.tools
|
||||
*/
|
||||
|
||||
@import '../resources/variables.less';
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
/**
|
||||
board/topic/meta.less
|
||||
*/
|
||||
.flow-topic-meta {
|
||||
color: @dark-text-80;
|
||||
|
||||
a.expand-collapse-posts-link:not( :hover ) {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
board/topic/post.less
|
||||
*/
|
||||
.flow-post {
|
||||
color: @dark-text-90;
|
||||
|
||||
.flow-author {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
.mw-content-ltr & {
|
||||
.flow-replies {
|
||||
border-left: 1px solid @dark-bg-30;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-content-rtl & {
|
||||
.flow-replies {
|
||||
border-right: 1px solid @dark-bg-30;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flow-post-meta {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
|
||||
.flow-post-meta-actions {
|
||||
a {
|
||||
&:after {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
board/topic/summary.less
|
||||
*/
|
||||
.flow-topic-summary-container {
|
||||
.flow-topic-summary,
|
||||
.flow-ui-editTopicSummaryWidget {
|
||||
border-top: 1px solid @dark-bg-30;
|
||||
|
||||
.flow-topic-summary-author {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
board/topic/titlebar.less
|
||||
*/
|
||||
.flow-topic-titlebar {
|
||||
background-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
.flow-moderated-topic-title {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
/**
|
||||
board/menu.less
|
||||
*/
|
||||
div > .flow-menu {
|
||||
&.flow-menu-hoverable:hover,
|
||||
&.focus {
|
||||
.flow-menu-js-drop a {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
background: rgba( 0, 0, 0, 0.05 );
|
||||
|
||||
.caret {
|
||||
border-top-color: @dark-bg-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
background: @dark-bg-0;
|
||||
border: 1px solid @dark-bg-50;
|
||||
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
|
||||
|
||||
> section:not( :first-of-type ) > li:first-of-type,
|
||||
li.flow-menu-section:not( :first-of-type ) {
|
||||
border-top: 1px solid @dark-bg-30;
|
||||
}
|
||||
}
|
||||
|
||||
.flow-menu-js-drop {
|
||||
a {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
board/moderated.less
|
||||
*/
|
||||
.flow-topic-moderatestate-lock {
|
||||
.flow-topic-titlebar {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
}
|
||||
|
||||
.flow-post-moderated .flow-author a,
|
||||
.flow-moderated-post-content {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
/**
|
||||
board/navigation.less
|
||||
*/
|
||||
.flow-board-navigation {
|
||||
.flow-board-navigation-inner {
|
||||
border-bottom: 1px solid @dark-bg-30;
|
||||
}
|
||||
|
||||
a {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.flow-board-navigator-link-highlight {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
}
|
||||
|
||||
&.flow-board-navigation-affixed {
|
||||
background: @dark-bg-0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
board/replycount.less
|
||||
*/
|
||||
.flow-reply-count {
|
||||
/* color: @dark-bg-30; */
|
||||
|
||||
.flow-reply-count-number {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
board/terms-of-use.less
|
||||
*/
|
||||
.flow-terms-of-use {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
/**
|
||||
mediawiki.ui/forms.less
|
||||
*/
|
||||
.flow-ui-input-replacement-anchor.mw-ui-input {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
|
||||
/**
|
||||
mediawiki.ui/modal.less
|
||||
*/
|
||||
.flow-ui-modal {
|
||||
background: fade( @dark-bg-0, 75% );
|
||||
}
|
||||
|
||||
.flow-ui-modal-layout {
|
||||
background: @dark-bg-0;
|
||||
box-shadow: 0 4px 0 0 @dark-bg-30, 0 0 0 1px @dark-bg-30;
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
.flow-ui-modal-heading {
|
||||
color: @dark-text-90;
|
||||
border-bottom: 1px solid @dark-bg-30;
|
||||
}
|
||||
|
||||
.flow-ui-modal-heading-prev {
|
||||
border-right: 1px solid @dark-bg-30;
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
.flow-ui-modal-heading-next {
|
||||
border-left: 1px solid @dark-bg-30;
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
/**
|
||||
mediawiki.ui/tooltips.less
|
||||
*/
|
||||
.flow-ui-tooltip {
|
||||
background-color: @dark-bg-0;
|
||||
color: @dark-text-90;
|
||||
|
||||
.flow-ui-tooltip-triangle {
|
||||
&:after {
|
||||
background: @dark-bg-0;
|
||||
}
|
||||
}
|
||||
|
||||
&.flow-ui-tooltip-up {
|
||||
.flow-ui-tooltip-triangle {
|
||||
&:after {
|
||||
|
||||
/* @noflip */
|
||||
.box-shadow( ~'0 0 1px 0 @{dark-bg-30}' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.flow-ui-tooltip-down {
|
||||
.flow-ui-tooltip-triangle {
|
||||
&:after {
|
||||
/* @noflip */
|
||||
.box-shadow( ~'0 -1.5px 0 1.5px @{dark-bg-30}, 0 0 1px 0 @{dark-bg-30}' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// triangle at left
|
||||
&.flow-ui-tooltip-left {
|
||||
.flow-ui-tooltip-triangle {
|
||||
&:after {
|
||||
/* @noflip */
|
||||
.box-shadow( ~'1.5px 0 0 1.5px @{dark-bg-30}, 0 0 1px 0 @{dark-bg-30}' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// triangle at right
|
||||
&.flow-ui-tooltip-right {
|
||||
.flow-ui-tooltip-triangle {
|
||||
&:after {
|
||||
/* @noflip */
|
||||
.box-shadow( ~'0 1.5px 0 1.5px @{dark-bg-30}, 0 0 1px 0 @{dark-bg-30}' );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
62
skinStyles/ext.flow.styles.base.less
Normal file
62
skinStyles/ext.flow.styles.base.less
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
* Citizen - Flow Styles Base
|
||||
* https://starcitizen.tools
|
||||
*/
|
||||
|
||||
@import '../resources/variables.less';
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.flow-component {
|
||||
.flow-list {
|
||||
li:hover {
|
||||
background: @dark-bg-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flow-revision-content {
|
||||
background-color: @dark-bg-20;
|
||||
color: @dark-text-70;
|
||||
}
|
||||
|
||||
.flow-no-more,
|
||||
.flow-undo {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
|
||||
.flow-ui-boardDescriptionWidget-editButton.oo-ui-widget.oo-ui-buttonElement .oo-ui-buttonElement-button {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.flow-component.flow-board-page {
|
||||
.flow-board-header {
|
||||
background-color: @dark-bg-20;
|
||||
box-shadow: -2px 0 0 0 rgba( 0, 0, 0, 0.1 );
|
||||
}
|
||||
}
|
||||
|
||||
.flow-component.flow-board-page.flow-full-height-side-rail {
|
||||
.flow-board-header {
|
||||
background: @dark-bg-20;
|
||||
}
|
||||
|
||||
.flow-board-header:before {
|
||||
background-color: @dark-bg-20;
|
||||
box-shadow: -2px 0 0 0 rgba( 0, 0, 0, 0.1 );
|
||||
}
|
||||
}
|
||||
|
||||
.flow-component {
|
||||
.mw-ui-icon-before:before,
|
||||
.oo-ui-indicatorElement-indicator,
|
||||
.oo-ui-iconElement-icon {
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
}
|
||||
|
||||
.flow-menu {
|
||||
.mw-ui-button.mw-ui-quiet {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
skinStyles/ext.flow.ui.less
Normal file
47
skinStyles/ext.flow.ui.less
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
/*
|
||||
* Citizen - Flow UI
|
||||
* https://starcitizen.tools
|
||||
*/
|
||||
|
||||
@import '../resources/variables.less';
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
/**
|
||||
mw.flow.ui.NavigationWidget.less
|
||||
*/
|
||||
.flow-ui-navigationWidget {
|
||||
border-bottom: 1px solid @dark-bg-30;
|
||||
|
||||
&-affixed {
|
||||
background: @dark-bg-0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.flow.ui.TopicMenuSelectWidget.less
|
||||
*/
|
||||
.flow-ui-topicMenuSelectWidget {
|
||||
&-locked,
|
||||
&-locked:hover {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
border-color: @dark-bg-30;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border: 2px solid @dark-bg-0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: @dark-bg-0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
mw.flow.ui.TopicTitleWidget.less
|
||||
*/
|
||||
.flow-ui-topicTitleWidget {
|
||||
&-termsLabel {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
73
skinStyles/mediawiki.ui.components.button.less
Normal file
73
skinStyles/mediawiki.ui.components.button.less
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
/*
|
||||
* Citizen - Buttons
|
||||
* https://starcitizen.tools
|
||||
*/
|
||||
|
||||
@import '../resources/variables.less';
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.mw-ui-button {
|
||||
background-color: @dark-bg-10;
|
||||
color: @dark-text-90;
|
||||
border-color: @dark-bg-50;
|
||||
|
||||
&:visited {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @dark-bg-0;
|
||||
color: @dark-text-80;
|
||||
border-color: @dark-bg-50;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: @dark-bg-0;
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.is-on {
|
||||
background-color: @dark-bg-30;
|
||||
color: @dark-text-100;
|
||||
border-color: @dark-bg-60;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: @dark-bg-30 !important;
|
||||
color: @dark-text-100 !important;
|
||||
border-color: @dark-bg-30 !important;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: @dark-bg-20;
|
||||
color: @dark-text-90;
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
}
|
||||
|
||||
&.mw-ui-quiet,
|
||||
&.mw-ui-quiet.mw-ui-progressive,
|
||||
&.mw-ui-quiet.mw-ui-destructive {
|
||||
color: @dark-text-90;
|
||||
|
||||
&:hover {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&:disabled:hover,
|
||||
&:disabled:active {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -65,10 +65,10 @@
|
|||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.oo-ui-pendingElement-pending {
|
||||
background-color: @dark-bg-20;
|
||||
background-image: -webkit-linear-gradient( 135deg, @dark-bg-0 25%, transparent 25%, transparent 50%, @dark-bg-0 50%, @dark-bg-0 75%, transparent 75%, transparent );
|
||||
background-image: -moz-linear-gradient( 135deg, @dark-bg-0 25%, transparent 25%, transparent 50%, @dark-bg-0 50%, @dark-bg-0 75%, transparent 75%, transparent );
|
||||
background-image: linear-gradient( 135deg, @dark-bg-0 25%, transparent 25%, transparent 50%, @dark-bg-0 50%, @dark-bg-0 75%, transparent 75%, transparent );
|
||||
background-color: @dark-bg-20 !important;
|
||||
background-image: -webkit-linear-gradient( 135deg, @dark-bg-0 25%, transparent 25%, transparent 50%, @dark-bg-0 50%, @dark-bg-0 75%, transparent 75%, transparent ) !important;
|
||||
background-image: -moz-linear-gradient( 135deg, @dark-bg-0 25%, transparent 25%, transparent 50%, @dark-bg-0 50%, @dark-bg-0 75%, transparent 75%, transparent ) !important;
|
||||
background-image: linear-gradient( 135deg, @dark-bg-0 25%, transparent 25%, transparent 50%, @dark-bg-0 50%, @dark-bg-0 75%, transparent 75%, transparent ) !important;
|
||||
}
|
||||
|
||||
.oo-ui-buttonElement-frameless {
|
||||
|
|
@ -272,9 +272,9 @@
|
|||
|
||||
.oo-ui-textInputWidget {
|
||||
.oo-ui-inputWidget-input {
|
||||
background-color: @dark-bg-0;
|
||||
color: @dark-text-100;
|
||||
border-color: @dark-bg-50;
|
||||
background-color: @dark-bg-0 !important;
|
||||
color: @dark-text-100 !important;
|
||||
border-color: @dark-bg-50 !important;
|
||||
}
|
||||
|
||||
.oo-ui-pendingElement-pending {
|
||||
|
|
|
|||
Loading…
Reference in a new issue