mediawiki-skins-Citizen/skinStyles/mediawiki/mediawiki.rcfilters.filters.ui.less
alistair3149 c88df2d194
feat(tokens): deprecate old font-weight-semibold variables
Old variables are being deprecated to align naming convention with Codex.
They will be hard-deprecated on the next major Citizen version.
2024-10-23 17:34:41 -04:00

384 lines
9.2 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Special:RecentChanges filters
* Module: mediawiki.rcfilters.filters.ui
* Version: 1.39.0
*
* Date: 2023-06-29
*/
@import '../../resources/variables.less';
/* mw.rcfilters.ui.FilterTagMultiselectWidget.less */
.mw-rcfilters-ui-filterTagMultiselectWidget {
&.oo-ui-widget-enabled {
// Needed extra specificity
&.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined {
background-color: var( --color-surface-1 );
border-radius: var( --border-radius-base );
}
.oo-ui-tagMultiselectWidget-handle {
padding: 0.1em 0.75em 0.4em 0.75em; // align with filter card
background-color: var( --color-surface-2 );
border-color: var( --border-color-base );
border-bottom: var( --border-width-base ) solid var( --border-color-base ); // Add divider
border-radius: var( --border-radius-base ) var( --border-radius-base ) 0 0;
}
}
.mw-rcfilters-collapsed & {
border-bottom-color: transparent;
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-hideshow {
border-left-color: transparent;
}
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle {
background-color: var( --background-color-progressive-subtle );
}
.oo-ui-tagMultiselectWidget-input input {
background-color: var( --color-surface-0 );
border-top-color: transparent; // Avoid double border with oo-ui-tagMultiselectWidget-handle
}
&-wrapper {
&-content {
&-title {
font-size: var( --font-size-x-small );
font-weight: var( --font-weight-normal );
// Citizen label styles
color: var( --color-subtle );
letter-spacing: 0.05em;
}
&-savedQueryTitle {
font-weight: var( --font-weight-semi-bold );
color: var( --color-emphasized );
}
}
}
&-views {
&-select {
&-widget.oo-ui-widget {
border-color: var( --border-color-interactive ); // align with input field on the left
border-top-color: transparent;
border-left-width: 0;
border-radius: 0 0 var( --border-radius-base ) 0;
}
}
}
&-emptyFilters {
color: var( --color-subtle );
vertical-align: sub; // fix incorrect top alignment
}
}
/* mw.rcfilters.ui.ItemMenuOptionWidget.less */
.mw-rcfilters-ui-itemMenuOptionWidget {
&:not( :last-child ):not( .mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk ) {
border-bottom: 0;
}
&-view-namespaces {
border-top-color: var( --border-color-base );
}
&:hover {
background-color: var( --background-color-button-quiet--hover );
}
&.oo-ui-optionWidget-selected {
background-color: var( --background-color-progressive-subtle );
}
&-label {
&-title {
font-weight: var( --font-weight-semi-bold );
color: var( --color-emphasized );
}
&-desc {
color: var( --color-subtle );
}
}
&-excludeLabel {
color: var( --color-subtle );
}
// Add margin between item and next header
+ .mw-rcfilters-ui-filterMenuSectionOptionWidget {
margin-top: var( --space-md );
}
}
/* mw.rcfilters.ui.FilterMenuOptionWidget.less */
.mw-rcfilters-ui-filterMenuOptionWidget {
&.oo-ui-flaggedElement-muted {
&:not( .oo-ui-optionWidget-selected ) {
background-color: var( --color-surface-2 );
}
.mw-rcfilters-ui-itemMenuOptionWidget-label-title,
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
color: var( --color-subtle );
}
&.oo-ui-optionWidget-highlighted {
color: var( --color-base );
background-color: var( --background-color-button-quiet--hover );
}
}
}
/* mw.rcfilters.ui.FilterMenuSectionOptionWidget.less */
// Make it sticky
.mw-rcfilters-ui-filterMenuSectionOptionWidget {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: @z-index-sticky; // Needed for sticky header
padding-top: var( --space-xs );
padding-bottom: var( --space-xs );
background-color: var( --color-surface-1 ); // Sync with background
border-bottom: var( --border-width-base ) solid var( --border-color-base );
&-header-title.oo-ui-labelElement-label {
font-size: var( --font-size-x-small );
font-weight: var( --font-weight-normal );
// Citizen label styles
color: var( --color-subtle );
letter-spacing: 0.05em;
}
&-whatsThisButton {
&-popup-content {
&-header {
font-weight: var( --font-weight-semi-bold );
}
}
}
&-active .mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title {
font-weight: var( --font-weight-semi-bold );
}
}
/* mw.rcfilters.ui.TagItemWidget.less */
.mw-rcfilters-ui-tagItemWidget {
// Background and color of the capsule widget need a bit
// more specificity to override OOUI internals
&.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: var( --color-surface-4 );
border-color: var( --color-surface-4 );
.oo-ui-labelElement-label {
color: var( --color-subtle );
}
}
&.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled {
.oo-ui-labelElement-label {
color: var( --color-destructive );
// color: var( --color-destructive--active );
}
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
color: var( --color-inverted-primary );
background-color: var( --color-progressive );
border-color: var( --color-progressive );
}
&-popup-content {
color: var( --color-base );
}
}
/* mw.rcfilters.ui.FilterMenuHeaderWidget.less */
.mw-rcfilters-ui-filterMenuHeaderWidget {
&-title {
// Left padding ~12px, sync with other padding
// Handle top padding in header instead so everything is aligned
padding: 0 0 0 0.75em;
font-size: 1rem;
font-weight: var( --font-weight-semi-bold );
color: var( --color-emphasized );
}
&-header {
padding-top: 0.75em;
background-color: transparent;
border-bottom-color: transparent; // Sticky header have divider already
}
}
/* mw.rcfilters.ui.MenuSelectWidget.less */
.mw-rcfilters-ui-menuSelectWidget {
&-noresults {
color: var( --color-subtle );
}
&-footer {
margin-top: var( --space-md );
background-color: transparent;
border-top-color: var( --border-color-base );
}
}
/* mw.rcfilters.ui.ViewSwitchWidget.less */
.mw-rcfilters-ui-viewSwitchWidget {
label.oo-ui-labelWidget {
font-size: var( --font-size-x-small );
font-weight: var( --font-weight-normal );
// Citizen label styles
color: var( --color-subtle );
letter-spacing: 0.05em;
}
&-buttons {
margin-top: 0.75em; // Sync with header spacing above
}
}
/* mw.rcfilters.ui.ValuePickerWidget.less */
.mw-rcfilters-ui-valuePickerWidget {
&-title {
font-size: var( --font-size-x-small );
font-weight: var( --font-weight-normal );
// Citizen label styles
color: var( --color-subtle );
letter-spacing: 0.05em;
}
}
/* mw.rcfilters.ui.DatePopupWidget.less */
.mw-rcfilters-ui-datePopupWidget {
border-top-color: var( --border-color-base );
&-title {
font-weight: var( --font-weight-semi-bold );
color: var( --color-emphasized );
}
.mw-rcfilters-ui-valuePickerWidget-title {
color: var( --color-subtle );
}
}
/* mw.rcfilters.ui.ChangesListWrapperWidget.less */
@keyframes fadeBlueCitizen {
60% {
border-top-color: var( --color-progressive );
}
100% {
border-top-color: var( --color-surface-4 );
}
}
.mw-rcfilters-ui-changesListWrapperWidget {
&-previousChangesIndicator {
border-top-color: var( --color-surface-4 );
animation: 1s ease fadeBlueCitizen;
}
&-results {
&-noresult,
&-conflict {
font-weight: var( --font-weight-semi-bold );
}
}
&-enhanced-grey td:not( :nth-child( -n+2 ) ) {
background-color: var( --color-surface-3 );
}
.mw-changeslist-legend {
background-color: var( --color-surface-2 );
border-color: var( --border-color-base );
}
}
/* mw.rcfilters.ui.HighlightColorPickerWidget.less */
.mw-rcfilters-ui-highlightColorPickerWidget {
&-label {
margin-top: 0.75em;
margin-bottom: 0.25em;
font-size: var( --font-size-small );
font-weight: var( --font-weight-semi-bold );
color: var( --color-emphasized );
}
}
/* mw.rcfilters.ui.SavedLinksListWidget.less */
.mw-rcfilters-ui-savedLinksListWidget {
&-placeholder {
&-title {
font-weight: var( --font-weight-semi-bold );
}
&.oo-ui-optionWidget .oo-ui-labelElement-label {
color: var( --color-subtle );
}
}
}
/* mw.rcfilters.ui.SavedLinksListItemWidget.less */
.mw-rcfilters-ui-savedLinksListItemWidget {
&:hover {
color: var( --color-base );
background-color: var( --background-color-button-quiet--hover );
}
&-label {
color: var( --color-progressive );
}
}
/* mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget {
&-popup {
> .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
> .oo-ui-labelElement-label {
font-weight: var( --font-weight-medium );
}
}
}
}
/* mw.rcfilters.ui.LiveUpdateButtonWidget.less */
.mw-rcfilters-ui-liveUpdateButtonWidget {
&.oo-ui-toggleWidget-on {
&::after {
background: var( --background-color-progressive-subtle );
}
}
}
/* mw.rcfilters.ui.RclToOrFromWidget.less */
.mw-rcfilters-ui-rclToOrFromWidget {
&.oo-ui-dropdownWidget.oo-ui-widget-enabled {
.oo-ui-dropdownWidget-handle {
font-weight: var( --font-weight-medium );
}
}
}
/* mw.rcfilters.ui.WatchlistTopSectionWidget.less */
.mw-rcfilters-ui-watchlistTopSectionWidget {
&-separator {
border-top: var( --border-width-base ) solid var( --border-color-base );
}
}
.mw-rcfilters-ui-overlay {
z-index: @z-index-overlay;
}