StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-15 02:24:04 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Citizen/skinStyles/oojs/oojs-ui-core.less

692 lines
28 KiB
Plaintext
Raw Normal View History

Repushed Citizen skin
2019-08-15 17:40:13 +00:00
/*
* Citizen - OOJS-UI Styles
* https://starcitizen.tools
*/
Reorganize skinStyles into separate folders
2019-12-29 09:47:56 +00:00
@import '../../resources/variables.less';
@import '../../resources/mixins.less';
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
/*!
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
* Based on OOUI v0.39.3
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
* https://www.mediawiki.org/wiki/OOUI
*
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
* Copyright 2011–2020 OOUI Team and other contributors.
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
* Released under the MIT license
* http://oojs.mit-license.org
*
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
* Date: 2020-07-10T06:32:25Z
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
*/
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
opacity: var( --opacity-icon-base );
}
.oo-ui-buttonElement.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
.oo-ui-buttonElement.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-icon-base--active );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var( --color-base );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: var( --background-color-quiet--hover );
color: var( --color-base--emphasized );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
background-color: var( --background-color-quiet--active );
color: var( --color-base--subtle );
}
.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: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-indicatorElement:not( .oo-ui-iconElement ):not( .oo-ui-labelElement ) > .oo-ui-buttonElement-button:focus {
box-shadow: 0 0 0 2px var( --color-primary );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > input.oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
color: var( --color-base--emphasized );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: var( --color-primary );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
color: var( --color-primary--hover );
}
.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: var( --color-primary--active );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
color: var( --color-destructive );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
color: var( --color-destructive--hover );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
color: var( --color-destructive--active );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled[ class*='oo-ui-flaggedElement' ] > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled[ class*='oo-ui-flaggedElement' ] > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-icon-base--active );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
color: var( --color-base--subtle );
}
.oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
.oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-base--disabled );
}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
border-color: var( --background-color-framed--active );
background-color: var( --background-color-framed--active );
color: var( --color-base--subtle );
}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
background-color: var( --background-color-framed--active );
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
border-color: var( --border-color-base );
background-color: var( --background-color-framed );
color: var( --color-base );
}
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
border-color: var( --border-color-base );
background-color: var( --background-color-framed--hover );
color: var( --color-base--emphasized );
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover > .oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover > .oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
opacity: var( --opacity-icon-base--hover );
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
border-color: var( --border-color-base--darker );
background-color: var( --background-color-framed--active );
color: var( --color-base--subtle );
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
}
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
border-color: var( --color-primary--active );
background-color: var( --color-primary--active );
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
}
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
}
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: var( --color-primary );
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
border-color: var( --color-primary--hover );
background-color: var( --background-color-framed--hover );
More tweaks to RC filter styles
2020-06-30 21:50:39 +00:00
}
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.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 {
border-color: var( --color-primary--active );
background-color: var( --background-color-framed--active );
color: var( --color-primary--active );
}
Initial VE dark styles
2019-12-28 23:52:36 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
Add darkmode for pending animation
2019-12-27 14:20:11 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
color: var( --color-destructive );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
border-color: var( --color-destructive--hover );
background-color: var( --background-color-framed--hover );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
border-color: var( --color-destructive--active );
background-color: var( --background-color-framed--active );
color: var( --color-destructive--active );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus {
border-color: var( --color-destructive );
box-shadow: inset 0 0 0 1px var( --color-destructive );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
border-color: var( --color-primary );
background-color: var( --color-primary );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
border-color: var( --color-primary--hover );
background-color: var( --color-primary--hover );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.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 {
border-color: var( --color-primary--active );
background-color: var( --color-primary--active );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
border-color: var( --color-destructive );
background-color: var( --color-destructive );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
border-color: var( --color-destructive--hover );
background-color: var( --color-destructive--hover );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
border-color: var( --color-destructive--active );
background-color: var( --color-destructive--active );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus {
border-color: var( --color-destructive );
box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px #fff;
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-pendingElement-pending {
background-color: var( --background-color-framed );
background-image: -webkit-linear-gradient( 135deg, var( --background-color-quiet--active ) 25%, transparent 25%, transparent 50%, var( --background-color-quiet--active ) 50%, var( --background-color-quiet--active ) 75%, transparent 75%, transparent );
background-image: -moz-linear-gradient( 135deg, var( --background-color-quiet--active ) 25%, transparent 25%, transparent 50%, var( --background-color-quiet--active ) 50%, var( --background-color-quiet--active ) 75%, transparent 75%, transparent );
background-image: linear-gradient( 135deg, var( --background-color-quiet--active ) 25%, transparent 25%, transparent 50%, var( --background-color-quiet--active ) 50%, var( --background-color-quiet--active ) 75%, transparent 75%, transparent );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
color: var( --color-base--subtle );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-panelLayout-framed {
border: 1px solid var( --border-color-base );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-optionWidget.oo-ui-widget-disabled {
color: var( --color-base--subtle );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-labelWidget.oo-ui-inline-help {
color: var( --color-base--subtle );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
border-color: var( --border-color-base );
background-color: var( --background-color-destructive );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
border-color: var( --border-color-base );
background-color: var( --background-color-warning );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
border-color: var( --border-color-base );
background-color: var( --background-color-success );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice {
border-color: var( --border-color-base );
background-color: var( --background-color-framed );
}
.oo-ui-messageWidget.oo-ui-flaggedElement-error:not( .oo-ui-messageWidget-block ) {
color: var( --color-destructive );
}
.oo-ui-messageWidget.oo-ui-flaggedElement-success:not( .oo-ui-messageWidget-block ) {
color: var( --color-warning );
}
.oo-ui-iconWidget.oo-ui-widget-disabled {
opacity: var( --opacity-base--disabled );
}
.oo-ui-indicatorWidget.oo-ui-widget-disabled {
opacity: var( --opacity-base--disabled );
}
.oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
border-left-color: var( --background-color-framed--hover );
}
.oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-toggleWidget-on + .oo-ui-toggleWidget-on > .oo-ui-buttonElement-button,
.oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-toggleWidget-on + .oo-ui-toggleWidget-on > .oo-ui-buttonElement-button:active {
border-left-color: var( --border-color-base );
}
.oo-ui-popupWidget-popup {
border: 1px solid var( --border-color-base--lighter );
background-color: var( --background-color-dp-08 );
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before {
border-bottom-color: var( --border-color-base--lighter );
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after {
border-bottom-color: var( --background-color-dp-08 );
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor:before {
border-top-color: var( --border-color-base--lighter );
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor:after {
border-top-color: var( --background-color-dp-08 );
}
.oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor:before {
border-right-color: var( --border-color-base--lighter );
}
.oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor:after {
border-right-color: var( --background-color-dp-08 );
}
.oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor:before {
border-left-color: var( --border-color-base--lighter );
}
.oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor:after {
border-left-color: var( --background-color-dp-08 );
}
.oo-ui-checkboxInputWidget [ type='checkbox' ] + span {
border-color: var( --border-color-input );
feat: update input field styles
2021-01-15 00:09:15 +00:00
background-color: var( --background-color-input );
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
}
.oo-ui-checkboxInputWidget [ type='checkbox' ]:indeterminate + span:before {
feat: update input field styles
2021-01-15 00:09:15 +00:00
background-color: var( --background-color-input );
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
}
.oo-ui-checkboxInputWidget [ type='checkbox' ]:disabled + span {
border-color: var( --background-color-framed--active );
background-color: var( --background-color-framed--active );
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:focus + span {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:hover + span {
border-color: var( --color-primary--hover );
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:active + span {
border-color: var( --color-primary--active );
background-color: var( --color-primary--active );
box-shadow: inset 0 0 0 1px var( --color-primary--active );
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:checked + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:indeterminate + span {
border-color: var( --color-primary );
background-color: var( --color-primary );
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:checked:focus + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:indeterminate:focus + span {
border-color: var( --color-primary );
background-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:checked:hover + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:indeterminate:hover + span {
border-color: var( --color-primary--hover );
background-color: var( --color-primary--hover );
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:checked:active + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:indeterminate:active + span {
border-color: var( --color-primary--active );
background-color: var( --color-primary--active );
box-shadow: inset 0 0 0 1px var( --color-primary--active );
}
.oo-ui-dropdownInputWidget select {
border: 1px solid var( --border-color-input );
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
background-color: var( --background-color-framed );
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover {
background-color: var( --background-color-framed--hover );
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
color: var( --color-base );
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover {
border-color: var( --border-color-input );
color: var( --color-base--emphasized );
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:active {
border-color: var( --border-color-input );
color: var( --color-base--subtle );
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
.oo-ui-dropdownInputWidget.oo-ui-widget-disabled {
background-color: var( --background-color-framed--active );
}
.oo-ui-dropdownInputWidget.oo-ui-widget-disabled select {
border-color: var( --background-color-framed--active );
color: var( --color-base--subtle );
}
.oo-ui-radioInputWidget [ type='radio' ] + span {
border-color: var( --border-color-input );
feat: update input field styles
2021-01-15 00:09:15 +00:00
background-color: var( --background-color-input );
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
}
.oo-ui-radioInputWidget [ type='radio' ]:disabled + span {
border-color: var( --background-color-framed--active );
background-color: var( --background-color-framed--active );
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:hover + span {
border-color: var( --color-primary--hover );
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:active + span {
border-color: var( --color-primary--active );
background-color: var( --color-primary--active );
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked + span {
border-color: var( --color-primary );
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked:hover + span {
border-color: var( --color-primary--hover );
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked:active + span {
border-color: var( --color-primary--active );
box-shadow: inset 0 0 0 1px var( --color-primary--active );
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked:active + span:before {
border-color: var( --color-primary--active );
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
border: 1px solid var( --border-color-input );
feat: update input field styles
2021-01-15 00:09:15 +00:00
background-color: var( --background-color-input );
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
color: var( --color-base--emphasized );
}
.oo-ui-textInputWidget .oo-ui-pendingElement-pending {
background-color: var( --background-color-framed );
}
.oo-ui-textInputWidget > .oo-ui-labelElement-label {
color: var( --color-base--subtle );
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
color: var( --color-base--subtle );
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus ~ .oo-ui-iconElement-icon,
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus ~ .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-icon-base--active );
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[ readonly ] {
background-color: var( --background-color-framed );
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
border-color: var( --border-color-input--hover );
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus {
border-color: var( --color-primary );
}
@media screen and ( min-width: 0 ) {
.oo-ui-textInputWidget.oo-ui-widget-enabled textarea.oo-ui-inputWidget-input:focus {
outline: 1px solid var( --color-primary );
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
}
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid textarea.oo-ui-inputWidget-input:focus {
outline-color: var( --color-destructive );
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
}
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-iconElement-icon {
opacity: var( --opacity-icon-base );
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
.oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-icon-base );
}
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
border-color: var( --color-destructive );
}
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input:hover {
border-color: var( --color-destructive );
}
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input:focus {
border-color: var( --color-destructive );
box-shadow: inset 0 0 0 1px var( --color-destructive );
}
.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input {
border-color: var( --background-color-framed--active );
background-color: var( --background-color-framed--active );
color: var( --color-base--subtle );
-webkit-text-fill-color: var( --color-base--subtle );
text-shadow: 0 1px 1px var( --background-color-framed--hover );
}
.oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-iconElement-icon,
.oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-base--disabled );
}
.oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-labelElement-label {
color: var( --color-base--subtle );
text-shadow: 0 1px 1px var( --background-color-framed--hover );
}
.oo-ui-menuSelectWidget {
border: 1px solid var( --border-color-base--lighter );
background-color: var( --background-color-dp-08 );
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var( --background-color-quiet--hover );
color: var( --color-base--emphasized );
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
background-color: var( --background-color-primary--hover );
color: var( --color-base--emphasized );
}
.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: var( --background-color-primary--active );
color: var( --color-primary );
}
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
color: var( --color-base );
}
.oo-ui-menuSectionOptionWidget {
color: var( --color-base--subtle );
}
.oo-ui-dropdownWidget-handle {
border: 1px solid var( --border-color-base );
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
background-color: var( --background-color-framed );
color: var( --color-base );
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
border-color: var( --border-color-base );
background-color: var( --background-color-framed--hover );
color: var( --color-base--subtle );
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover .oo-ui-iconElement-icon,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-icon-base--hover );
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active {
border-color: var( --border-color-base );
color: var( --color-base--emphasized );
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle .oo-ui-iconElement-icon,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-icon-base );
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
background-color: var( --background-color-dp-08 );
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle .oo-ui-iconElement-icon,
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-icon-base--active );
}
.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
border-color: var( --background-color-framed--active );
background-color: var( --background-color-framed--active );
color: var( --color-base--subtle );
text-shadow: 0 1px 1px var( --background-color-framed--hover );
}
.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-base--disabled );
}
.oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton > .oo-ui-buttonElement-button {
background-color: var( --background-color-framed );
}
.oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton > .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-icon-base );
}
.oo-ui-comboBoxInputWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-base--disabled );
}
.oo-ui-multioptionWidget.oo-ui-widget-disabled {
color: var( --color-base--subtle );
}
.oo-ui-progressBarWidget {
border: 1px solid var( --border-color-base--lighter );
background-color: var( --background-color-dp-24 );
}
.oo-ui-progressBarWidget.oo-ui-widget-enabled .oo-ui-progressBarWidget-bar {
background-color: var( --color-primary );
}
.oo-ui-progressBarWidget.oo-ui-widget-disabled .oo-ui-progressBarWidget-bar {
background-color: var( --background-color-framed--active );
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
}
fix: missing dark mode styles
2021-01-14 22:06:00 +00:00
// Invert icon for dark mode
.skin-citizen-dark {
feat: tweak VisualEditor styles
2021-01-14 23:52:40 +00:00
.oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator {
fix: missing dark mode styles
2021-01-14 22:06:00 +00:00
filter: invert( 1 ) hue-rotate( 180deg );
}
}
Reference in a new issue Copy permalink