/* * Citizen * * SkinStyles for OOUI * Module: oojs-ui-widgets * Version: v0.44.3 * * Date: 2022-11-30 */ .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget { border-top-color: var( --border-color-base ); } .oo-ui-bookletLayout > .oo-ui-menuLayout-menu { border-right-color: var( --border-color-base ); } .oo-ui-buttonSelectWidget { border-radius: var( --border-radius--small ); } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button { border-top-left-radius: var( --border-radius--small ); border-bottom-left-radius: var( --border-radius--small ); } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button { border-top-right-radius: var( --border-radius--small ); border-bottom-right-radius: var( --border-radius--small ); } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button { border-left-color: var( --border-color-base ); } .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 var( --color-inverted-primary ); } .oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button { color: var( --color-base--emphasized ); background-color: var( --background-color-primary--active ); } .oo-ui-toggleSwitchWidget { // Show background when hovered background-color: transparent; border-color: var( --border-color-interactive ); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip { // Show background when hovered background-color: transparent; border-color: var( --border-color-interactive ); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover { background-color: var( --color-surface-0 ); border-color: var( --color-primary--hover ); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip { background-color: var( --color-surface-0 ); border-color: var( --color-primary--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 { 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-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 { background-color: var( --color-primary ); border-color: var( --color-primary ); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover { background-color: var( --color-primary--hover ); border-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 { background-color: var( --color-primary--active ); border-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-disabled { background-color: var( --color-surface-4 ); border-color: var( --color-surface-4 ); } .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip { border-color: var( --color-base--subtle ); box-shadow: inset 0 0 0 1px var( --color-base--subtle ); } .oo-ui-selectFileWidget-dropTarget { background-color: var( --color-surface-1 ); border-color: var( --border-color-base ); border-radius: var( --border-radius--small ); } .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget { background-color: transparent; } .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget:hover { background-color: var( --color-surface-1 ); border-color: var( --color-primary--hover ); } .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 { color: var( --color-primary--active ); background-color: var( --background-color-primary--hover ); } .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 { background-color: var( --color-surface-4 ); border-color: var( --color-surface-4 ); } .oo-ui-outlineSelectWidget:focus { box-shadow: inset 0 0 0 2px var( --color-primary ); } .oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted { color: var( --color-base--emphasized ); background-color: var( --color-surface-2--hover ); } .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected { color: var( --color-primary ); background-color: var( --background-color-primary--hover ); } .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed { color: var( --color-primary ); background-color: var( --background-color-primary--active ); } .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 { font-weight: var( --font-weight-medium ); color: var( --color-base ); } .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget { border-top-left-radius: var( --border-radius--small ); border-top-right-radius: var( --border-radius--small ); } .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { color: var( --color-base--emphasized ); background-color: var( --color-surface-0 ); } .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 { color: var( --color-base--emphasized ); background-color: var( --background-color-quiet--hover ); } .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active { color: var( --color-base--emphasized ); background-color: var( --background-color-quiet--active ); } .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 { color: var( --color-primary ); box-shadow: inset 0 -2px 0 0 var( --color-primary ); } .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { color: var( --color-primary--hover ); box-shadow: inset 0 -2px 0 0 var( --color-primary--hover ); } .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active { color: var( --color-primary--active ); box-shadow: inset 0 -2px 0 0 var( --color-primary--active ); } .oo-ui-tabSelectWidget-frameless.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { border-radius: var( --border-radius--small ); box-shadow: inset 0 0 0 2px var( --color-primary ); } .oo-ui-tagMultiselectWidget-handle { border-color: var( --border-color-base ); border-radius: var( --border-radius--small ); } .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input { color: var( --color-base--emphasized ); } .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::placeholder { color: var( --color-base--subtle ); } .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 { color: var( --color-base--subtle ); text-shadow: none; background-color: var( --color-surface-3 ); border-color: var( --color-surface-4 ); } .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 { color: var( --color-base ); background-color: var( --color-surface-2--hover ); border-color: var( --border-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 { color: var( --color-base--subtle ); text-shadow: none; background-color: var( --color-surface-3 ); border-color: var( --color-surface-4 ); } .oo-ui-searchWidget-query { border-bottom: 1px solid var( --border-color-base ); }