mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-28 00:01:05 +00:00
feat: rewrite OOUI skinstyles to the new system
This commit is contained in:
alistair3149
parent
2f735e4d4c
commit
aae08f0a73
|
|
@ -9,6 +9,9 @@
|
|||
--color-surface-2: @color-surface-2;
|
||||
--color-surface-3: @color-surface-3;
|
||||
--color-surface-4: @color-surface-4;
|
||||
|
||||
--color-surface-2--hover: @color-surface-2--hover;
|
||||
--color-surface-2--active: @color-surface-2--active;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -20,4 +23,7 @@
|
|||
--color-surface-2: @color-surface-2-dark;
|
||||
--color-surface-3: @color-surface-3-dark;
|
||||
--color-surface-4: @color-surface-4-dark;
|
||||
|
||||
--color-surface-2--hover: @color-surface-2-dark--hover;
|
||||
--color-surface-2--active: @color-surface-2-dark--active;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,18 +34,28 @@
|
|||
|
||||
/* == Colors == */
|
||||
/* Base theme */
|
||||
@color-surface-0: #fff;
|
||||
@color-surface-1: #fff;
|
||||
@color-surface-2: #f8f9fa;
|
||||
@color-surface-3: #eaecf0;
|
||||
@color-surface-4: #c8ccd1;
|
||||
@diff-hoverstate: 2;
|
||||
|
||||
@color-surface-0: ~'hsl( 0, 0%, 100% )';
|
||||
@color-surface-1: ~'hsl( 0, 0%, 100% )';
|
||||
@color-surface-2: ~'hsl( 210, 17%, 98% )';
|
||||
@color-surface-3: ~'hsl( 220, 17%, 93% )';
|
||||
@color-surface-4: ~'hsl( 213, 9%, 80% )';
|
||||
|
||||
@color-surface-2--hover: ~'hsl( 210, 17%, 'unit( 98 + @diff-hoverstate, % )~' )';
|
||||
@color-surface-2--active: ~'hsl( 210, 17%, 'unit( 98 - @diff-hoverstate, % )~' )';
|
||||
|
||||
/* Dark theme */
|
||||
@color-surface-0-dark: #131a21;
|
||||
@color-surface-1-dark: #242a31;
|
||||
@color-surface-2-dark: #282f35;
|
||||
@color-surface-3-dark: #30363c;
|
||||
@color-surface-4-dark: #363c42;
|
||||
@diff-hoverstate-dark: 4;
|
||||
|
||||
@color-surface-0-dark: ~'hsl( 210, 27%, 10% )';
|
||||
@color-surface-1-dark: ~'hsl( 212, 15%, 17% )';
|
||||
@color-surface-2-dark: ~'hsl( 208, 14%, 18% )';
|
||||
@color-surface-3-dark: ~'hsl( 210, 11%, 21% )';
|
||||
@color-surface-4-dark: ~'hsl( 210, 10%, 24% )';
|
||||
|
||||
@color-surface-2-dark--hover: ~'hsl( 208, 14%, 'unit( 18 + @diff-hoverstate-dark, % )~' )';
|
||||
@color-surface-2-dark--active: ~'hsl( 208, 14%, 'unit( 18 - @diff-hoverstate-dark, % )~' )';
|
||||
|
||||
/**
|
||||
* Based WikimediaUI (`wmui`) color palette
|
||||
|
|
|
|||
|
|
@ -528,10 +528,10 @@
|
|||
"+mediawiki.rcfilters.filters.base.styles": "skinStyles/mediawiki/mediawiki.rcfilters.filters.base.styles.less",
|
||||
"+mediawiki.widgets.DateInputWidget.styles": "skinStyles/mediawiki/mediawiki.widgets.DateInputWidget.styles.less",
|
||||
|
||||
"+oojs-ui-core.styles": "skinStyles/oojs/oojs-ui-core.less",
|
||||
"+oojs-ui-toolbars": "skinStyles/oojs/oojs-ui-toolbars.less",
|
||||
"+oojs-ui-widgets": "skinStyles/oojs/oojs-ui-widgets.less",
|
||||
"+oojs-ui-windows": "skinStyles/oojs/oojs-ui-windows.less",
|
||||
"+oojs-ui-core.styles": "skinStyles/ooui/oojs-ui-core.less",
|
||||
"+oojs-ui-toolbars": "skinStyles/ooui/oojs-ui-toolbars.less",
|
||||
"+oojs-ui-widgets": "skinStyles/ooui/oojs-ui-widgets.less",
|
||||
"+oojs-ui-windows": "skinStyles/ooui/oojs-ui-windows.less",
|
||||
|
||||
"+jquery.ui": "skinStyles/jquery.ui/smoothness/jquery.ui.theme.less",
|
||||
|
||||
|
|
|
|||
680
skinStyles/ooui/oojs-ui-core.less
Normal file
680
skinStyles/ooui/oojs-ui-core.less
Normal file
|
|
@ -0,0 +1,680 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for OOUI
|
||||
* Module: oojs-ui-core.styles
|
||||
* Version: v0.39.3 (Core REL1_35 086b4f1)
|
||||
*
|
||||
* Date: 2021-07-26
|
||||
*/
|
||||
|
||||
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
|
||||
.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( --color-surface-4 );
|
||||
background-color: var( --color-surface-4 );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2--hover );
|
||||
color: var( --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-primary );
|
||||
box-shadow: inset 0 0 0 1px var( --color-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-button:active:focus,
|
||||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
|
||||
border-color: var( --border-color-base--darker );
|
||||
background-color: var( --color-surface-2--active );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.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( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.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( --color-surface-2--active );
|
||||
color: var( --color-primary--active );
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-color: var( --color-destructive--hover );
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.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( --color-surface-2--active );
|
||||
color: var( --color-destructive--active );
|
||||
}
|
||||
|
||||
.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-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
|
||||
border-color: var( --color-primary );
|
||||
background-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-panelLayout-framed {
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-optionWidget.oo-ui-widget-disabled {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.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-radioSelectWidget:focus [ type='radio' ]:checked + span:before {
|
||||
border-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.oo-ui-labelWidget.oo-ui-inline-help {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --background-color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --background-color-warning );
|
||||
}
|
||||
|
||||
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --background-color-success );
|
||||
}
|
||||
|
||||
.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( --color-surface-2--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-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.oo-ui-checkboxInputWidget [ type='checkbox' ]:indeterminate + span:before {
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.oo-ui-checkboxInputWidget [ type='checkbox' ]:disabled + span {
|
||||
border-color: var( --color-surface-4 );
|
||||
background-color: var( --color-surface-4 );
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
|
||||
.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.oo-ui-widget-enabled:hover {
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover {
|
||||
border-color: var( --border-color-base );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:active {
|
||||
border-color: var( --border-color-base--darker );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.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( --color-surface-3 );
|
||||
}
|
||||
|
||||
.oo-ui-dropdownInputWidget.oo-ui-widget-disabled select {
|
||||
border-color: var( --color-surface-4 );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-radioInputWidget [ type='radio' ] + span {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.oo-ui-radioInputWidget [ type='radio' ]:disabled + span {
|
||||
border-color: var( --color-surface-4 );
|
||||
background-color: var( --color-surface-4 );
|
||||
}
|
||||
|
||||
.oo-ui-radioInputWidget [ type='radio' ]:disabled:checked + span {
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.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:focus + span:before {
|
||||
border-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.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-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-1 );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-textInputWidget .oo-ui-pendingElement-pending {
|
||||
background-color: var( --surface-color-3 );
|
||||
}
|
||||
|
||||
.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( --color-surface-2 );
|
||||
}
|
||||
|
||||
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
|
||||
border-color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-color: var( --border-color-base--darker );
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base--subtle );
|
||||
-webkit-text-fill-color: var( --color-base--subtle );
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.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: none;
|
||||
}
|
||||
|
||||
.oo-ui-menuSelectWidget {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.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--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-menuSectionOptionWidget {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-dropdownWidget-handle {
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
|
||||
background-color: var( --color-surface-2 );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2--hover );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.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--darker );
|
||||
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( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.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( --border-color-base--darker );
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base--subtle );
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.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( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.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-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.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( --color-surface-4 );
|
||||
}
|
||||
|
||||
// Invert icon for dark mode
|
||||
.skin-citizen-dark {
|
||||
.oo-ui-iconElement-icon,
|
||||
.oo-ui-indicatorElement-indicator {
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
}
|
||||
}
|
||||
428
skinStyles/ooui/oojs-ui-toolbars.less
Normal file
428
skinStyles/ooui/oojs-ui-toolbars.less
Normal file
|
|
@ -0,0 +1,428 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for OOUI
|
||||
* Module: oojs-ui-toolbars
|
||||
* Version: v0.39.3 (Core REL1_35 086b4f1)
|
||||
*
|
||||
* Date: 2021-07-26
|
||||
*/
|
||||
|
||||
/**
|
||||
* OOUI has some layout issues when the font size is not
|
||||
* same as what is being used in Vector. This is a dirty
|
||||
* hack to ensure that the UI is displayed correctly.
|
||||
*/
|
||||
.oo-ui-toolbar {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
outline: 1px solid var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled .oo-ui-iconElement-icon {
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled[ class*='oo-ui-flaggedElement' ] .oo-ui-iconElement-icon {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active,
|
||||
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active:focus,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
outline: 1px solid var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active:focus,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-tool-link,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-tool-link {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
outline: 1px solid var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-tool-link {
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:active,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:active:focus,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-tool-active > .oo-ui-tool-link,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-tool-link {
|
||||
background-color: var( --color-surface-1 );
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-destructive );
|
||||
outline: 1px solid var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {
|
||||
background-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:hover {
|
||||
background-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active:focus,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-tool-link {
|
||||
background-color: var( --color-primary--active );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
|
||||
outline: 1px solid var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-tool-link,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-tool-link:active,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-tool-link:active:focus {
|
||||
background-color: var( --color-surface-4 );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-tool-link {
|
||||
background-color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:hover {
|
||||
background-color: var( --color-destructive--hover );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:active,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:active:focus,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-tool-active > .oo-ui-tool-link {
|
||||
background-color: var( --color-destructive--active );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px #fff;
|
||||
outline: 1px solid var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-disabled > .oo-ui-tool-link,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-disabled > .oo-ui-tool-link:active,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-disabled > .oo-ui-tool-link:active:focus {
|
||||
background-color: var( --color-surface-4 );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link > .oo-ui-iconElement-icon,
|
||||
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link > .oo-ui-indicatorElement-indicator {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
|
||||
.oo-ui-toolGroup.oo-ui-widget-disabled:not( .oo-ui-flaggedElement-primary ) .oo-ui-indicatorElement-indicator,
|
||||
.oo-ui-toolGroup.oo-ui-widget-disabled:not( .oo-ui-flaggedElement-primary ) .oo-ui-iconElement-icon {
|
||||
opacity: var( --opacity-base--disabled ) !important;
|
||||
}
|
||||
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon,
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool .oo-ui-iconElement-icon {
|
||||
opacity: var( --opacity-base--disabled );
|
||||
}
|
||||
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link,
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
|
||||
border-color: var( --color-surface-4 );
|
||||
background-color: var( --color-surface-4 );
|
||||
}
|
||||
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link .oo-ui-tool-title,
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link .oo-ui-tool-title {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary.oo-ui-tool-active > .oo-ui-tool-link,
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary.oo-ui-tool-active > .oo-ui-tool-link {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary .oo-ui-iconElement-icon,
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary .oo-ui-iconElement-icon {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link .oo-ui-tool-title,
|
||||
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) .oo-ui-indicatorElement-indicator {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup-header {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup-tools {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-accel {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon,
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover .oo-ui-indicatorElement-indicator {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-iconElement-icon,
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-indicatorElement-indicator {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
outline: 1px solid var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled[ class*='oo-ui-flaggedElement' ] > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
|
||||
.oo-ui-popupToolGroup.oo-ui-widget-enabled[ class*='oo-ui-flaggedElement' ] > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
|
||||
.oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
|
||||
border-right-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
|
||||
border-right-color: var( --background-color-quiet--active );
|
||||
}
|
||||
|
||||
.oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:focus {
|
||||
border-right-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle:hover {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
|
||||
box-shadow: inset 0 0 0 2px var( --color-primary );
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle {
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:hover {
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:active,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:active:focus,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-popupToolGroup-handle,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary--active );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
outline: 1px solid var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle {
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:active,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:active:focus,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive.oo-ui-tool-active > .oo-ui-popupToolGroup-handle,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
color: var( --color-destructive--active );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-destructive );
|
||||
outline: 1px solid var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle {
|
||||
background-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:hover {
|
||||
background-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:active,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:active:focus,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-popupToolGroup-handle {
|
||||
background-color: var( --color-primary--active );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
|
||||
outline: 1px solid var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-popupToolGroup-handle,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-popupToolGroup-handle:active,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-popupToolGroup-handle:active:focus {
|
||||
background-color: var( --color-surface-4 );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle {
|
||||
background-color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:hover {
|
||||
background-color: var( --color-destructive--hover );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:active,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:active:focus,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-tool-active > .oo-ui-popupToolGroup-handle {
|
||||
background-color: var( --color-destructive--active );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:focus {
|
||||
box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px #fff;
|
||||
outline: 1px solid var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-disabled > .oo-ui-popupToolGroup-handle,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-disabled > .oo-ui-popupToolGroup-handle:active,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-disabled > .oo-ui-popupToolGroup-handle:active:focus {
|
||||
background-color: var( --color-surface-4 );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary > .oo-ui-popupToolGroup-handle > .oo-ui-iconElement-icon,
|
||||
.oo-ui-popupToolGroup.oo-ui-flaggedElement-primary > .oo-ui-popupToolGroup-handle > .oo-ui-indicatorElement-indicator {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
|
||||
.oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-listToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
}
|
||||
|
||||
.oo-ui-listToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled:hover {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
}
|
||||
|
||||
.oo-ui-listToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-listToolGroup.oo-ui-widget-disabled,
|
||||
.oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-menuToolGroup {
|
||||
border-right: 1px solid var( --border-color-base );
|
||||
border-left: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:hover {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
}
|
||||
|
||||
.oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-tool-active {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
}
|
||||
|
||||
.oo-ui-menuToolGroup.oo-ui-widget-disabled,
|
||||
.oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-toolbar-bar {
|
||||
background-color: var( --color-surface-1 );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-toolbar-position-bottom > .oo-ui-toolbar-bar {
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-toolbar-narrow.oo-ui-toolbar-position-top .oo-ui-toolbar-bar:after {
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-toolbar-narrow.oo-ui-toolbar-position-bottom .oo-ui-toolbar-bar:after {
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
}
|
||||
350
skinStyles/ooui/oojs-ui-widgets.less
Normal file
350
skinStyles/ooui/oojs-ui-widgets.less
Normal file
|
|
@ -0,0 +1,350 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for OOUI
|
||||
* Module: oojs-ui-widgets
|
||||
* Version: v0.39.3 (Core REL1_35 086b4f1)
|
||||
*
|
||||
* Date: 2021-07-26
|
||||
*/
|
||||
|
||||
/**
|
||||
* OOUI has some layout issues when the font size is not
|
||||
* same as what is being used in Vector. This is a dirty
|
||||
* hack to ensure that the UI is displayed correctly.
|
||||
*/
|
||||
.oo-ui-widget {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
|
||||
border-right: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
|
||||
border-left-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
|
||||
border-color: var( --color-primary );
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
|
||||
}
|
||||
|
||||
.oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button {
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not( .oo-ui-image-invert ) {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
|
||||
border-color: var( --color-primary--hover );
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
|
||||
border-color: var( --color-primary--hover );
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active,
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover,
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus {
|
||||
border-color: var( --color-primary--active );
|
||||
background-color: var( --color-surface-2--active );
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary--active );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active .oo-ui-toggleSwitchWidget-grip,
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover .oo-ui-toggleSwitchWidget-grip,
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus .oo-ui-toggleSwitchWidget-grip {
|
||||
border-color: var( --color-surface-2--hover );
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
|
||||
border-color: var( --color-primary );
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip {
|
||||
border-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
|
||||
border-color: var( --color-primary );
|
||||
background-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
|
||||
border-color: var( --color-surface-2--hover );
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover {
|
||||
border-color: var( --color-primary--hover );
|
||||
background-color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active,
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover {
|
||||
border-color: var( --color-primary--active );
|
||||
background-color: var( --color-primary--active );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus {
|
||||
border-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus:before {
|
||||
border-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
|
||||
border-color: var( --color-surface-4 );
|
||||
background-color: var( --color-surface-4 );
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
|
||||
border-color: var( --color-surface-2--hover );
|
||||
box-shadow: inset 0 0 0 1px var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-selectFileWidget-dropTarget {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget:hover {
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop.oo-ui-selectFileWidget-dropTarget,
|
||||
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-selectFileWidget.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
|
||||
.oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
|
||||
border-color: var( --color-surface-4 );
|
||||
background-color: var( --color-surface-3 );
|
||||
}
|
||||
|
||||
.oo-ui-outlineSelectWidget:focus {
|
||||
box-shadow: inset 0 0 0 2px var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
|
||||
background-color: var( --color-surface-2--hover );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
|
||||
background-color: var( --background-color-primary--hover );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
|
||||
background-color: var( --background-color-primary--active );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-outlineControlsWidget {
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-framed {
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-frameless {
|
||||
box-shadow: inset 0 -1px 0 0 var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-tabOptionWidget {
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
|
||||
background-color: var( --color-surface-0 );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
|
||||
border-bottom-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
|
||||
background-color: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-framed.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
|
||||
border-bottom-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget {
|
||||
box-shadow: inset 0 0 0 0 var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
|
||||
box-shadow: inset 0 -2px 0 0 var( --color-primary );
|
||||
color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
|
||||
box-shadow: inset 0 -2px 0 0 var( --color-primary--hover );
|
||||
color: var( --color-primary--hover );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
|
||||
box-shadow: inset 0 -2px 0 0 var( --color-primary--active );
|
||||
color: var( --color-primary--active );
|
||||
}
|
||||
|
||||
.oo-ui-tabSelectWidget-frameless.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 0 2px var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget-handle {
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input {
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input::placeholder {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {
|
||||
border-color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-tagMultiselectWidget-focus .oo-ui-tagMultiselectWidget-handle {
|
||||
border-color: var( --color-primary );
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid .oo-ui-tagMultiselectWidget-handle,
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid:hover .oo-ui-tagMultiselectWidget-handle {
|
||||
border-color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
|
||||
border-color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
|
||||
color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle {
|
||||
border-color: var( --color-surface-4 );
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base--subtle );
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget {
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget.oo-ui-widget-enabled {
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
|
||||
border-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2--hover );
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
|
||||
border-color: var( --color-primary );
|
||||
box-shadow: inset 0 0 0 1px var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget.oo-ui-widget-enabled:not( .oo-ui-tagItemWidget-fixed ) {
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid {
|
||||
border-color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover {
|
||||
border-color: var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus {
|
||||
border-color: var( --color-destructive );
|
||||
box-shadow: inset 0 0 0 1px var( --color-destructive );
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
|
||||
background-color: var( --color-surface-2--hover );
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:active {
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
|
||||
.oo-ui-tagItemWidget.oo-ui-widget-disabled {
|
||||
border-color: var( --color-surface-4 );
|
||||
background-color: var( --color-surface-3 );
|
||||
color: var( --color-base--subtle );
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.oo-ui-searchWidget-query {
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
113
skinStyles/ooui/oojs-ui-windows.less
Normal file
113
skinStyles/ooui/oojs-ui-windows.less
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for OOUI
|
||||
* Module: oojs-ui-windows
|
||||
* Version: v0.39.3 (Core REL1_35 086b4f1)
|
||||
*
|
||||
* Date: 2021-07-26
|
||||
*/
|
||||
|
||||
/**
|
||||
* OOUI has some layout issues when the font size is not
|
||||
* same as what is being used in Vector. This is a dirty
|
||||
* hack to ensure that the UI is displayed correctly.
|
||||
*/
|
||||
.oo-ui-window {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.oo-ui-messageDialog-content > .oo-ui-window-foot {
|
||||
outline: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-messageDialog-title {
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-messageDialog-message {
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
|
||||
border-right: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget {
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-content .oo-ui-window-head,
|
||||
.oo-ui-processDialog-content .oo-ui-window-foot {
|
||||
outline: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog .oo-ui-actionWidget:not( .oo-ui-flaggedElement-progressive ):not( .oo-ui-flaggedElement-destructive ) > .oo-ui-buttonElement-button:hover,
|
||||
.oo-ui-processDialog .oo-ui-actionWidget:not( .oo-ui-flaggedElement-progressive ):not( .oo-ui-flaggedElement-destructive ) > .oo-ui-buttonElement-button:active {
|
||||
border-right-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog .oo-ui-actionWidget:not( .oo-ui-flaggedElement-progressive ):not( .oo-ui-flaggedElement-destructive ) > .oo-ui-buttonElement-button:focus {
|
||||
border-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-actions-primary .oo-ui-actionWidget > .oo-ui-buttonElement-button {
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-actions-primary .oo-ui-actionWidget:not( .oo-ui-flaggedElement-progressive ):not( .oo-ui-flaggedElement-destructive ) > .oo-ui-buttonElement-button:hover,
|
||||
.oo-ui-processDialog-actions-primary .oo-ui-actionWidget:not( .oo-ui-flaggedElement-progressive ):not( .oo-ui-flaggedElement-destructive ) > .oo-ui-buttonElement-button:active {
|
||||
border-left-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-actions-primary .oo-ui-actionWidget:not( .oo-ui-flaggedElement-progressive ):not( .oo-ui-flaggedElement-destructive ) > .oo-ui-buttonElement-button:focus {
|
||||
border-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-actions-safe .oo-ui-actionWidget > .oo-ui-buttonElement-button,
|
||||
.oo-ui-processDialog-actions-other .oo-ui-actionWidget > .oo-ui-buttonElement-button {
|
||||
border-right-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not( .oo-ui-labelElement ) > .oo-ui-buttonElement-button {
|
||||
border-right-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not( .oo-ui-labelElement ) > .oo-ui-buttonElement-button:hover {
|
||||
border-right-color: var( --border-color-base );
|
||||
background-color: var( --color-surface-2 );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not( .oo-ui-labelElement ) > .oo-ui-buttonElement-button:active {
|
||||
border-right-color: var( --color-surface-2--active );
|
||||
background-color: var( --color-surface-2--active );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not( .oo-ui-labelElement ) > .oo-ui-buttonElement-button:focus {
|
||||
border-color: var( --color-primary );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-errors {
|
||||
background-color: var( --background-color-overlay );
|
||||
}
|
||||
|
||||
.oo-ui-processDialog-errors-title {
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
.oo-ui-windowManager-modal > .oo-ui-dialog {
|
||||
background-color: var( --background-color-overlay--lighter );
|
||||
}
|
||||
|
||||
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
|
||||
background-color: var( --background-color-dp-24 );
|
||||
}
|
||||
|
||||
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
Loading…
Reference in a new issue