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

342 lines
12 KiB
Plaintext
Raw Normal View History

Repushed Citizen skin
2019-08-15 17:40:13 +00:00
/*
* Citizen - OOJS-UI Styles
* https://starcitizen.tools
*/
Reorganize skinStyles into separate folders
2019-12-29 09:47:56 +00:00
@import '../../resources/variables.less';
@import '../../resources/mixins.less';
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
feat: use the same font size as Vector for OOUI elements
2021-01-15 00:42:37 +00:00
/**
* 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;
}
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
/*!
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
* Based on OOUI v0.39.3
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
* https://www.mediawiki.org/wiki/OOUI
*
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
* Copyright 2011–2020 OOUI Team and other contributors.
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
* Released under the MIT license
* http://oojs.mit-license.org
*
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
* Date: 2020-07-10T06:32:25Z
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
*/
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
.oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
border-top: 1px solid var( --border-color-base--lighter );
}
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
.oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
border-right: 1px solid var( --border-color-base--lighter );
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
}
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
border-left-color: var( --background-color-framed--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 > .oo-ui-iconElement-icon:not( .oo-ui-image-invert ) {
opacity: var( --opacity-icon-base--active );
}
.oo-ui-toggleSwitchWidget {
border: 1px solid var( --border-color-base );
background-color: var( --background-color-framed );
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
border: 1px solid var( --border-color-base );
background-color: var( --background-color-framed );
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
border-color: var( --color-primary--hover );
background-color: var( --background-color-framed--hover );
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
border-color: var( --color-primary--hover );
background-color: var( --background-color-framed--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-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 {
border-color: var( --color-primary );
background-color: var( --color-primary );
}
.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-disabled {
border-color: var( --background-color-framed--active );
background-color: var( --background-color-framed--active );
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
border: 1px solid var( --background-color-framed--hover );
box-shadow: inset 0 0 0 1px var( --background-color-framed--hover );
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
background-color: var( --background-color-framed--hover );
}
.oo-ui-selectFileWidget-dropTarget {
border: 1px solid var( --border-color-input );
feat: update input field styles
2021-01-15 00:09:15 +00:00
background-color: var( --background-color-input );
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
feat: update input field styles
2021-01-15 00:09:15 +00:00
background-color: var( --background-color-input );
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget:hover {
border-color: var( --border-color-input--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 {
background-color: var( --background-color-primary--hover );
color: var( --color-base--emphasized );
}
.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( --background-color-framed--active );
background-color: var( --background-color-framed--active );
}
.oo-ui-outlineSelectWidget:focus {
box-shadow: inset 0 0 0 2px var( --color-primary );
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var( --background-color-quiet--hover );
color: var( --color-base--emphasized );
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
background-color: var( --background-color-primary--hover );
color: var( --color-base--emphasized );
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
background-color: var( --background-color-primary--active );
color: var( --color-base--emphasized );
}
.oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
opacity: var( --opacity-icon-base );
}
.oo-ui-outlineControlsWidget {
feat: update input field styles
2021-01-15 00:09:15 +00:00
background-color: var( --background-color-input );
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
}
.oo-ui-tabSelectWidget-framed {
background-color: var( --background-color-framed );
}
.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( --background-color-framed--hover );
color: var( --color-base );
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
border-bottom-color: var( --background-color-framed--hover );
}
.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( --background-color-quiet--hover );
}
.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 {
box-shadow: inset 0 0 0 2px var( --color-primary );
}
.oo-ui-tagMultiselectWidget-handle {
border: 1px solid var( --border-color-input );
}
.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 {
feat: update input field styles
2021-01-15 00:09:15 +00:00
background-color: var( --background-color-input );
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {
border-color: var( --border-color-input--hover );
}
.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( --background-color-framed );
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: var( --background-color-framed--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( --background-color-framed--active );
background-color: var( --background-color-framed--active );
color: var( ---color-base--subtle );
text-shadow: 0 1px 1px var( --background-color-framed--hover );
Repushed Citizen skin
2019-08-15 17:40:13 +00:00
}
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
Tweak OOUI tagItemWidget color
2020-06-30 21:53:09 +00:00
.oo-ui-tagItemWidget {
feat: rework OOUI widgets styles
2021-01-14 21:49:41 +00:00
border: 1px solid 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( --background-color-framed--hover );
color: var( --color-base--subtle );
}
.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( --background-color-framed );
}
.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: #d33;
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( --background-color-framed--hover );
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:active {
background-color: var( --background-color-framed--active );
}
.oo-ui-tagItemWidget.oo-ui-widget-disabled {
border-color: var( --background-color-framed--active );
background-color: var( --background-color-framed--active );
color: var( ---color-base--subtle );
text-shadow: 0 1px 1px var( --background-color-framed--hover );
}
.oo-ui-searchWidget-query {
border-bottom: 1px solid var( --border-color-base--lighter );
WIP: Add darkmode definitions to OOUI
2019-12-26 21:46:02 +00:00
}
Reference in a new issue Copy permalink