/* * 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--small ); } .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-base--emphasized ); } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { color: var( --color-base--emphasized ); background-color: var( --background-color-quiet--hover ); } .oo-ui-buttonElement-frameless.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-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--subtle ); background-color: var( --background-color-quiet--active ); border-color: var( --background-color-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-primary ); } .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-pressed > .oo-ui-buttonElement-button { color: var( --color-primary--active ); border-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-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-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-buttonElement-button { border-radius: var( --border-radius--small ); } .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button { color: var( --color-base--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-base--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-base--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-primary ); box-shadow: inset 0 0 0 1px var( --color-primary ); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { background-color: var( --color-primary--active ); border-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 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-base--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-primary ); } .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-primary--hover ); } .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-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-primary--active ); background-color: var( --color-surface-2--active ); border-color: var( --color-primary--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-primary ); border-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 { background-color: var( --color-primary--hover ); border-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:focus { border-color: var( --color-primary ); box-shadow: inset 0 0 0 1px var( --color-primary ), 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-primary--active ); border-color: var( --color-primary--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-semibold ); } .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-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--small ) 0 0 var( --border-radius--small ); } .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { border-radius: 0 var( --border-radius--small ) var( --border-radius--small ) 0; } .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label { font-weight: var( --font-weight-semibold ); color: var( --color-base--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--small ); } .oo-ui-optionWidget.oo-ui-widget-disabled { color: var( --color-base--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-base--subtle ); } .oo-ui-messageWidget { font-weight: var( --font-weight-semibold ); border-radius: var( --border-radius--medium ); } .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error { background-color: var( --background-color-destructive ); border-color: transparent; } .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning { background-color: var( --background-color-warning ); border-color: transparent; } .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success { background-color: var( --background-color-success ); 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-text-error ); } .oo-ui-messageWidget.oo-ui-flaggedElement-success:not( .oo-ui-messageWidget-block ) { color: var( --color-text-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 { border-radius: var( --border-radius--small ); } .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button { border-top-left-radius: var( --border-radius--small ); border-bottom-left-radius: var( --border-radius--small ); } .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button { border-top-right-radius: var( --border-radius--small ); border-bottom-right-radius: var( --border-radius--small ); } .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-dialog ); } /* 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-primary ); box-shadow: inset 0 0 0 1px var( --color-primary ); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:hover + span { background-color: var( --color-surface-0 ); border-color: var( --color-primary--hover ); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:active + span { background-color: var( --color-primary--active ); border-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 { background-color: var( --color-primary ); border-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 { background-color: var( --color-primary ); border-color: var( --color-primary ); box-shadow: inset 0 0 0 1px var( --color-primary ), 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-primary--hover ); border-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 { background-color: var( --color-primary--active ); border-color: var( --color-primary--active ); box-shadow: inset 0 0 0 1px var( --color-primary--active ); } .oo-ui-dropdownInputWidget select { border-color: var( --border-color-interactive ); border-radius: var( --border-radius--small ); } .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-base--emphasized ); } .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover { color: var( --color-base ); border-color: var( --color-primary--hover ); } .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:active { color: var( --color-base--emphasized ); border-color: var( --border-color-interactive ); } .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-4 ); } .oo-ui-dropdownInputWidget.oo-ui-widget-disabled select { color: var( --color-base--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-primary--hover ); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:active + span { background-color: var( --color-primary--active ); border-color: var( --color-primary--active ); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked + span { background-color: var( --color-inverted-primary ); border-color: var( --color-primary ); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked:hover + span { border-color: var( --color-primary--hover ); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked:active + span { border-color: var( --color-primary--active ); box-shadow: inset 0 0 0 1px var( --color-primary--active ); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [ type='radio' ]:checked:active + span::before { border-color: var( --color-primary--active ); } .oo-ui-textInputWidget .oo-ui-inputWidget-input { color: var( --color-base--emphasized ); // Show background when hovered background-color: transparent; border-color: var( --border-color-interactive ); border-radius: var( --border-radius--small ); } .oo-ui-textInputWidget .oo-ui-pendingElement-pending { background-color: var( --color-surface-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[ 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-primary--hover ); } .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus { border-color: var( --color-primary ); } @media screen and ( min-width: 0 ) { .oo-ui-textInputWidget.oo-ui-widget-enabled textarea.oo-ui-inputWidget-input:focus { outline: 1px solid var( --color-primary ); } .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-base--subtle ); text-shadow: none; background-color: var( --color-surface-4 ); border-color: var( --border-color-interactive ); -webkit-text-fill-color: var( --color-base--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-base--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--small ) var( --border-radius--small ); box-shadow: var( --box-shadow-dialog ); } .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted { color: var( --color-base--emphasized ); background-color: var( --background-color-quiet--hover ); } .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected { color: var( --color-primary ); background-color: var( --background-color-primary--hover ); } .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-primary ); background-color: var( --background-color-primary--active ); } .oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget { color: var( --color-base--emphasized ); } .oo-ui-menuSectionOptionWidget { font-weight: var( --font-weight-medium ); color: var( --color-base--subtle ); } .oo-ui-dropdownWidget-handle { border-color: var( --border-color-interactive ); border-radius: var( --border-radius--small ); } .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle { color: var( --color-base--emphasized ); // Show background when hovered background-color: transparent; } .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover { color: var( --color-base--emphasized ); // Sync with oo-ui-menuSelectWidget background-color: var( --color-surface-1 ); border-color: var( --color-primary--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-base--emphasized ); border-color: var( --border-color-interactive ); } .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 { // 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-base--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--small ); border-bottom-right-radius: var( --border-radius--small ); } .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-base--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-primary ); } .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-invert ), .oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) { filter: var( --filter-invert ); } // Reset style if light mode @media ( forced-colors: active ) and ( prefers-color-scheme: dark ) { .skin-theme-clientpref-light { .oo-ui-iconElement-icon:not( .oo-ui-image-invert ), .oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) { filter: none; } } }