mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-30 17:14:50 +00:00
c88df2d194
Old variables are being deprecated to align naming convention with Codex. They will be hard-deprecated on the next major Citizen version.
760 lines
30 KiB
Plaintext
760 lines
30 KiB
Plaintext
/*
|
|
* Citizen
|
|
*
|
|
* SkinStyles for OOUI
|
|
* Module: oojs-ui-core.styles
|
|
* Version: v0.44.3
|
|
*
|
|
* Date: 2023-06-24
|
|
*/
|
|
|
|
@import '../../resources/variables.less';
|
|
|
|
.oo-ui-buttonElement > .oo-ui-buttonElement-button {
|
|
font-weight: var( --font-weight-medium );
|
|
border-radius: var( --border-radius-base );
|
|
}
|
|
|
|
.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-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
|
|
color: var( --color-emphasized );
|
|
}
|
|
|
|
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
|
|
color: var( --color-emphasized );
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
}
|
|
|
|
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
|
|
border-color: var( --color-progressive );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive );
|
|
}
|
|
|
|
.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-emphasized );
|
|
background-color: var( --background-color-button-quiet--active );
|
|
border-color: var( --background-color-button-quiet--active );
|
|
}
|
|
|
|
.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-progressive );
|
|
}
|
|
|
|
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
|
|
color: var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
|
|
color: var( --color-progressive--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-pressed > .oo-ui-buttonElement-button {
|
|
color: var( --color-progressive--active );
|
|
border-color: var( --color-progressive--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-pressed > .oo-ui-buttonElement-button {
|
|
color: var( --color-destructive--active );
|
|
border-color: var( --color-destructive--active );
|
|
}
|
|
|
|
.oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
|
|
color: var( --color-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-buttonElement-button {
|
|
border-radius: var( --border-radius-base );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
|
|
color: var( --color-subtle );
|
|
background-color: var( --color-surface-4 );
|
|
border-color: var( --color-surface-4 );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-disabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
|
|
background-color: var( --color-surface-4 );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
|
|
color: var( --color-emphasized );
|
|
background-color: var( --color-surface-2 );
|
|
border-color: var( --border-color-base );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
|
|
color: var( --color-emphasized );
|
|
background-color: var( --color-surface-2--hover );
|
|
border-color: var( --border-color-base );
|
|
}
|
|
|
|
.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-progressive );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
|
|
color: var( --color-inverted-primary );
|
|
background-color: var( --color-progressive--active );
|
|
border-color: var( --color-progressive--active );
|
|
|
|
> .oo-ui-iconElement-icon {
|
|
filter: var( --filter-invert-primary );
|
|
}
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus {
|
|
border-color: var( --color-progressive );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
|
|
color: var( --color-subtle );
|
|
background-color: var( --color-surface-2--active );
|
|
border-color: var( --color-surface-2--active );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
|
|
color: var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
|
|
background-color: var( --color-surface-2--hover );
|
|
border-color: var( --color-progressive--hover );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
|
|
border-color: var( --color-progressive );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive );
|
|
}
|
|
|
|
.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-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 {
|
|
color: var( --color-progressive--active );
|
|
background-color: var( --color-surface-2--active );
|
|
border-color: var( --color-progressive--active );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
|
|
color: var( --color-destructive );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
|
|
background-color: var( --color-surface-2--hover );
|
|
border-color: var( --color-destructive--hover );
|
|
}
|
|
|
|
.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 );
|
|
}
|
|
|
|
.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-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 {
|
|
color: var( --color-destructive--active );
|
|
background-color: var( --color-surface-2--active );
|
|
border-color: var( --color-destructive--active );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
|
|
color: var( --color-inverted-primary );
|
|
background-color: var( --color-progressive );
|
|
border-color: var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
|
|
background-color: var( --color-progressive--hover );
|
|
border-color: var( --color-progressive--hover );
|
|
}
|
|
|
|
.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-progressive );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary );
|
|
}
|
|
|
|
.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-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: var( --color-progressive--active );
|
|
border-color: var( --color-progressive--active );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
|
|
background-color: var( --color-destructive );
|
|
border-color: var( --color-destructive );
|
|
}
|
|
|
|
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
|
|
background-color: var( --color-destructive--hover );
|
|
border-color: var( --color-destructive--hover );
|
|
}
|
|
|
|
.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 var( --color-inverted-primary );
|
|
}
|
|
|
|
.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-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 {
|
|
background-color: var( --color-destructive--active );
|
|
border-color: var( --color-destructive--active );
|
|
}
|
|
|
|
.oo-ui-labelElement .oo-ui-labelElement-label-highlight {
|
|
font-weight: var( --font-weight-semi-bold );
|
|
}
|
|
|
|
.oo-ui-pendingElement-pending {
|
|
background-color: var( --color-surface-2 );
|
|
background-image: -webkit-linear-gradient( 135deg, var( --color-surface-1 ) 25%, transparent 25%, transparent 50%, var( --color-surface-1 ) 50%, var( --color-surface-1 ) 75%, transparent 75%, transparent );
|
|
background-image: -moz-linear-gradient( 135deg, var( --color-surface-1 ) 25%, transparent 25%, transparent 50%, var( --color-surface-1 ) 50%, var( --color-surface-1 ) 75%, transparent 75%, transparent );
|
|
background-image: linear-gradient( 135deg, var( --color-surface-1 ) 25%, transparent 25%, transparent 50%, var( --color-surface-1 ) 50%, var( --color-surface-1 ) 75%, transparent 75%, transparent );
|
|
}
|
|
|
|
.oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
|
|
color: var( --color-subtle );
|
|
}
|
|
|
|
.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget.oo-ui-textInputWidget > .oo-ui-inputWidget-input,
|
|
.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget .oo-ui-dropdownWidget-handle,
|
|
.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget .oo-ui-tagMultiselectWidget-handle {
|
|
border-radius: var( --border-radius-base ) 0 0 var( --border-radius-base );
|
|
}
|
|
|
|
.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
|
|
border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;
|
|
}
|
|
|
|
.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
|
|
font-weight: var( --font-weight-semi-bold );
|
|
color: var( --color-emphasized );
|
|
letter-spacing: 0; // reset legend style in Citizen core
|
|
}
|
|
|
|
.oo-ui-panelLayout-framed {
|
|
border-color: var( --border-color-base );
|
|
border-radius: var( --border-radius-base );
|
|
}
|
|
|
|
.oo-ui-optionWidget.oo-ui-widget-disabled {
|
|
color: var( --color-subtle );
|
|
}
|
|
|
|
.oo-ui-decoratedOptionWidget.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon,
|
|
.oo-ui-decoratedOptionWidget.oo-ui-widget-enabled:hover .oo-ui-indicatorElement-indicator {
|
|
opacity: var( --opacity-icon-hover );
|
|
}
|
|
|
|
.oo-ui-decoratedOptionWidget.oo-ui-widget-enabled .oo-ui-iconElement-icon,
|
|
.oo-ui-decoratedOptionWidget.oo-ui-widget-enabled .oo-ui-indicatorElement-indicator {
|
|
opacity: var( --opacity-icon-base );
|
|
}
|
|
|
|
.oo-ui-decoratedOptionWidget.oo-ui-widget-disabled .oo-ui-iconElement-icon,
|
|
.oo-ui-decoratedOptionWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator {
|
|
opacity: var( --opacity-base--disabled );
|
|
}
|
|
|
|
.oo-ui-labelWidget.oo-ui-inline-help {
|
|
color: var( --color-subtle );
|
|
}
|
|
|
|
.oo-ui-messageWidget {
|
|
font-weight: var( --font-weight-semi-bold );
|
|
border-radius: var( --border-radius-medium );
|
|
}
|
|
|
|
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
|
|
background-color: var( --background-color-destructive-subtle );
|
|
border-color: transparent;
|
|
}
|
|
|
|
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
|
|
background-color: var( --background-color-warning-subtle );
|
|
border-color: transparent;
|
|
}
|
|
|
|
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
|
|
background-color: var( --background-color-success-subtle );
|
|
border-color: transparent;
|
|
}
|
|
|
|
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice {
|
|
background-color: var( --color-surface-2 );
|
|
border-color: transparent;
|
|
}
|
|
|
|
.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-base );
|
|
}
|
|
|
|
.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 {
|
|
border-radius: var( --border-radius-base );
|
|
}
|
|
|
|
.oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button {
|
|
border-top-left-radius: var( --border-radius-base );
|
|
border-bottom-left-radius: var( --border-radius-base );
|
|
}
|
|
|
|
.oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button {
|
|
border-top-right-radius: var( --border-radius-base );
|
|
border-bottom-right-radius: var( --border-radius-base );
|
|
}
|
|
|
|
.oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
|
|
border-left-color: var( --border-color-base );
|
|
}
|
|
|
|
.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 {
|
|
background-color: var( --color-surface-1 );
|
|
border-color: var( --border-color-base );
|
|
border-radius: var( --border-radius-medium );
|
|
box-shadow: var( --box-shadow-drop-xx-large );
|
|
}
|
|
|
|
/*
|
|
TODO: Need to refactor the current shadow for filter drop-shadow, see variables.less
|
|
@supports ( filter: drop-shadow( 0 0 0 ) ) {
|
|
.oo-ui-popupWidget {
|
|
filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3));
|
|
}
|
|
}
|
|
*/
|
|
|
|
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
|
|
border-bottom-color: var( --border-color-base );
|
|
}
|
|
|
|
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
|
|
border-bottom-color: var( --color-surface-1 );
|
|
}
|
|
|
|
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before {
|
|
border-top-color: var( --border-color-base );
|
|
}
|
|
|
|
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
|
|
border-top-color: var( --color-surface-1 );
|
|
}
|
|
|
|
.oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::before {
|
|
border-right-color: var( --border-color-base );
|
|
}
|
|
|
|
.oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::after {
|
|
border-right-color: var( --color-surface-1 );
|
|
}
|
|
|
|
.oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::before {
|
|
border-left-color: var( --border-color-base );
|
|
}
|
|
|
|
.oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::after {
|
|
border-left-color: var( --color-surface-1 );
|
|
}
|
|
|
|
.oo-ui-checkboxInputWidget [ type='checkbox' ] + span {
|
|
// Show background when hovered
|
|
background-color: transparent;
|
|
border-color: var( --border-color-interactive );
|
|
}
|
|
|
|
.oo-ui-checkboxInputWidget [ type='checkbox' ]:disabled + span {
|
|
background-color: var( --color-surface-4 );
|
|
border-color: var( --color-surface-4 );
|
|
}
|
|
|
|
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:focus + span {
|
|
background-color: var( --color-surface-0 );
|
|
border-color: var( --color-progressive );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:hover + span {
|
|
background-color: var( --color-surface-0 );
|
|
border-color: var( --color-progressive--hover );
|
|
}
|
|
|
|
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:active + span {
|
|
background-color: var( --color-progressive--active );
|
|
border-color: var( --color-progressive--active );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive--active );
|
|
}
|
|
|
|
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:checked + span,
|
|
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:indeterminate + span {
|
|
background-color: var( --color-progressive );
|
|
border-color: var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:checked:focus + span,
|
|
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:indeterminate:focus + span {
|
|
background-color: var( --color-progressive );
|
|
border-color: var( --color-progressive );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary );
|
|
}
|
|
|
|
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:checked:hover + span,
|
|
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:indeterminate:hover + span {
|
|
background-color: var( --color-progressive--hover );
|
|
border-color: var( --color-progressive--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 {
|
|
background-color: var( --color-progressive--active );
|
|
border-color: var( --color-progressive--active );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive--active );
|
|
}
|
|
|
|
.oo-ui-dropdownInputWidget select {
|
|
border-color: var( --border-color-interactive );
|
|
border-radius: var( --border-radius-base );
|
|
}
|
|
|
|
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
|
|
// Show background when hovered
|
|
background-color: transparent;
|
|
}
|
|
|
|
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover {
|
|
background-color: var( --color-surface-0 );
|
|
}
|
|
|
|
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
|
|
color: var( --color-emphasized );
|
|
}
|
|
|
|
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover {
|
|
color: var( --color-emphasized );
|
|
border-color: var( --color-progressive--hover );
|
|
}
|
|
|
|
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:active {
|
|
color: var( --color-emphasized );
|
|
border-color: var( --border-color-interactive );
|
|
}
|
|
|
|
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:focus {
|
|
border-color: var( --color-progressive );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-dropdownInputWidget.oo-ui-widget-disabled {
|
|
background-color: var( --color-surface-4 );
|
|
}
|
|
|
|
.oo-ui-dropdownInputWidget.oo-ui-widget-disabled select {
|
|
color: var( --color-subtle );
|
|
border-color: var( --color-surface-4 );
|
|
}
|
|
|
|
.oo-ui-radioInputWidget [ type='radio' ] + span {
|
|
// Show background when hovered
|
|
background-color: transparent;
|
|
border-color: var( --border-color-interactive );
|
|
}
|
|
|
|
.oo-ui-radioInputWidget [ type='radio' ]:disabled + span {
|
|
background-color: var( --color-surface-4 );
|
|
border-color: var( --color-surface-4 );
|
|
}
|
|
|
|
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:hover + span {
|
|
background-color: var( --color-surface-0 );
|
|
border-color: var( --color-progressive--hover );
|
|
}
|
|
|
|
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:active + span {
|
|
background-color: var( --color-progressive--active );
|
|
border-color: var( --color-progressive--active );
|
|
}
|
|
|
|
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked + span {
|
|
background-color: var( --color-inverted-primary );
|
|
border-color: var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked:hover + span {
|
|
border-color: var( --color-progressive--hover );
|
|
}
|
|
|
|
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked:active + span {
|
|
border-color: var( --color-progressive--active );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive--active );
|
|
}
|
|
|
|
.oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked:active + span::before {
|
|
border-color: var( --color-progressive--active );
|
|
}
|
|
|
|
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
|
|
color: var( --color-emphasized );
|
|
// Show background when hovered
|
|
background-color: transparent;
|
|
border-color: var( --border-color-interactive );
|
|
border-radius: var( --border-radius-base );
|
|
}
|
|
|
|
.oo-ui-textInputWidget .oo-ui-pendingElement-pending {
|
|
background-color: var( --color-surface-3 );
|
|
}
|
|
|
|
.oo-ui-textInputWidget > .oo-ui-labelElement-label {
|
|
color: var( --color-subtle );
|
|
}
|
|
|
|
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
|
|
color: var( --color-subtle );
|
|
}
|
|
|
|
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
|
|
border-color: var( --color-progressive );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[ readonly ]:not( .oo-ui-pendingElement-pending ) {
|
|
background-color: var( --color-surface-2 );
|
|
}
|
|
|
|
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
|
|
background-color: var( --color-surface-0 );
|
|
border-color: var( --color-progressive--hover );
|
|
}
|
|
|
|
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus {
|
|
border-color: var( --color-progressive );
|
|
}
|
|
|
|
@media screen and ( min-width: 0 ) {
|
|
.oo-ui-textInputWidget.oo-ui-widget-enabled textarea.oo-ui-inputWidget-input:focus {
|
|
outline: var( --border-width-base ) solid var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid textarea.oo-ui-inputWidget-input:focus {
|
|
outline-color: var( --color-destructive );
|
|
}
|
|
}
|
|
|
|
.oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-iconElement-icon {
|
|
opacity: var( --opacity-icon-base );
|
|
}
|
|
|
|
.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 {
|
|
color: var( --color-subtle );
|
|
text-shadow: none;
|
|
background-color: var( --color-surface-4 );
|
|
border-color: var( --border-color-interactive );
|
|
-webkit-text-fill-color: var( --color-subtle );
|
|
}
|
|
|
|
.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-subtle );
|
|
text-shadow: none;
|
|
}
|
|
|
|
.oo-ui-menuSelectWidget {
|
|
z-index: @z-index-overlay;
|
|
background-color: var( --color-surface-1 );
|
|
border-color: var( --border-color-interactive );
|
|
border-radius: 0 0 var( --border-radius-base ) var( --border-radius-base );
|
|
box-shadow: var( --box-shadow-drop-xx-large );
|
|
}
|
|
|
|
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
|
|
color: var( --color-emphasized );
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
}
|
|
|
|
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
|
|
color: var( --color-progressive );
|
|
background-color: var( --background-color-progressive-subtle );
|
|
}
|
|
|
|
.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 {
|
|
color: var( --color-progressive );
|
|
background-color: var( --background-color-progressive-subtle );
|
|
}
|
|
|
|
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
|
|
color: var( --color-emphasized );
|
|
}
|
|
|
|
.oo-ui-menuSectionOptionWidget {
|
|
font-weight: var( --font-weight-medium );
|
|
color: var( --color-subtle );
|
|
}
|
|
|
|
.oo-ui-dropdownWidget-handle {
|
|
border-color: var( --border-color-interactive );
|
|
border-radius: var( --border-radius-base );
|
|
}
|
|
|
|
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
|
|
color: var( --color-emphasized );
|
|
// Show background when hovered
|
|
background-color: transparent;
|
|
}
|
|
|
|
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
|
|
color: var( --color-emphasized );
|
|
// Sync with oo-ui-menuSelectWidget
|
|
background-color: var( --color-surface-1 );
|
|
border-color: var( --color-progressive--hover );
|
|
}
|
|
|
|
.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 {
|
|
color: var( --color-emphasized );
|
|
border-color: var( --border-color-interactive );
|
|
}
|
|
|
|
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
|
|
border-color: var( --color-progressive );
|
|
box-shadow: inset 0 0 0 1px var( --color-progressive );
|
|
}
|
|
|
|
.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 {
|
|
// Sync with oo-ui-menuSelectWidget
|
|
background-color: var( --color-surface-1 );
|
|
}
|
|
|
|
.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
|
|
color: var( --color-subtle );
|
|
text-shadow: none;
|
|
background-color: var( --color-surface-4 );
|
|
border-color: var( --color-surface-4 );
|
|
}
|
|
|
|
.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator {
|
|
opacity: var( --opacity-base--disabled );
|
|
}
|
|
|
|
.oo-ui-comboBoxInputWidget.oo-ui-comboBoxInputWidget-empty .oo-ui-inputWidget-input,
|
|
.oo-ui-comboBoxInputWidget-php .oo-ui-inputWidget-input {
|
|
border-top-right-radius: var( --border-radius-base );
|
|
border-bottom-right-radius: var( --border-radius-base );
|
|
}
|
|
|
|
.oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton > .oo-ui-buttonElement-button {
|
|
// Sync with oo-ui-menuSelectWidget
|
|
background-color: var( --color-surface-1 );
|
|
}
|
|
|
|
.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-subtle );
|
|
}
|
|
|
|
.oo-ui-progressBarWidget {
|
|
border-color: var( --border-color-base );
|
|
}
|
|
|
|
.oo-ui-progressBarWidget:not( .oo-ui-pendingElement-pending ) {
|
|
background-color: var( --color-surface-1 );
|
|
}
|
|
|
|
.oo-ui-progressBarWidget.oo-ui-widget-enabled .oo-ui-progressBarWidget-bar {
|
|
background-color: var( --color-progressive );
|
|
}
|
|
|
|
.oo-ui-progressBarWidget.oo-ui-widget-disabled .oo-ui-progressBarWidget-bar {
|
|
background-color: var( --color-surface-4 );
|
|
}
|
|
|
|
// Invert icon for dark mode
|
|
.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ):not( .oo-ui-image-invert ):not( .mw-no-invert ),
|
|
.oo-ui-indicatorElement-indicator {
|
|
filter: var( --filter-invert );
|
|
}
|
|
|
|
.oo-ui-iconElement-icon.oo-ui-image-progressive {
|
|
filter: var( --filter-invert-primary );
|
|
}
|