MediaWiki:Vector-darkmode.less/rc.less

From Old School RuneScape Wiki
Jump to: navigation, search
// [[Special:RecentChanges]]

// Filter colors
@filter-icon-color-1: @venice-blue;
@filter-color-1: @filter-icon-color-1;
@filter-text-color1: @tropical-blue;
@filter-icon-color-2: @la-palma;
@filter-color-2: @filter-icon-color-2;
@filter-text-color2: @frost;
@filter-icon-color-3: @olive;
@filter-color-3: @filter-icon-color-3;
@filter-text-color3: @half-dutch;
@filter-icon-color-4: @korma;
@filter-color-4: @filter-icon-color-4;
@filter-text-color4: @lace;
@filter-icon-color-5: @old-brick;
@filter-color-5: @filter-icon-color-5;
@filter-text-color5: @bridesmaid;

&.page-Special_RecentChanges {
    // Date popup widget subtitle text color
    .mw-rcfilters-ui-datePopupWidget .mw-rcfilters-ui-valuePickerWidget-title {
        color: @dark-links;
    }

    // Make all search filter indicators have the same font color
    .mw-rcfilters-ui-tagItemWidget.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-labelElement-label {
        color: @dark-text;
    }

    // Namespaces and Tags buttons
    .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
        background-color: @dark-wikitable-background;
        border-color: lighten( @dark-wikitable-background, 8% );
    }
    .oo-ui-selectWidget .oo-ui-labelElement:not(.oo-ui-optionWidget-selected) .oo-ui-labelElement-label {
        color: @dark-text;
    }
    
    // Filter popup
    // Make saved Filters popup text more readable
    .mw-rcfilters-ui-savedLinksListWidget-placeholder.oo-ui-optionWidget .oo-ui-labelElement-label {
        color: @dark-text;
    }
    // Filters popup header
    .mw-rcfilters-ui-filterMenuHeaderWidget-header {
		border-color: @dark-infobox-border;
		background-color: @dark-infobox-header;
    }
    // Filters popup subheaders
	.mw-rcfilters-ui-filterMenuSectionOptionWidget {
		background-color: @dark-infobox-subheader;
    }
    // Filters popup entries with checkboxes
	.mw-rcfilters-ui-filterMenuOptionWidget {
        border-color: @dark-infobox-border;
        // Muted entries
        &.oo-ui-flaggedElement-muted {
            background-color: @dark-wikitable-background;
        }
        // Entry label descriptions
		.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
			color: @dark-links;
		}
    }
    // Entire Filters popup
    .oo-ui-menuSelectWidget {
        border-color: @dark-infobox-border;
    }
    // Filters popup footer
    .mw-rcfilters-ui-menuSelectWidget-footer {
        background-color: @dark-wikitable-header;
        border-color: @dark-infobox-border;
    }

    // Saved filters menu item hover
    .mw-rcfilters-ui-savedLinksListItemWidget:hover {
        // Yoinked from .oo-ui-buttonElement-framed.oo-ui-widget-enabled:not(.oo-ui-buttonElement-active) > .oo-ui-buttonElement-button:hover
        background-color: #384766;
        border-color: #475980;
    }

    // Currently/last selected filter when using the filter menu
    .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
        // Yoinked from .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button
        background-color: #2a4b8d;
        border-color: #2a4b8d;
        color: white;
    }

    // List of abbreviations float
    .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
        background-color: @dark-wikitable-background;
        border-color: @dark-infobox-border;
        color: @dark-text;
    }
    
    // Highlight colors for recent changes
    // Mixins
    .filter-color( @filter-number, @filter-icon-color, @filter-color, @filter-text-color ) {
    	.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey td:not(:nth-child(-n+2)),
        .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c@{filter-number} tr:first-child,
        .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c@{filter-number}.mw-rcfilters-ui-changesListWrapperWidget-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
        .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c@{filter-number}.mw-rcfilters-ui-changesListWrapperWidget-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
            background-color: transparent;
            .mw-title {
                background-color: @filter-color;
                a {
                    color: @filter-text-color;
                }
            }
        }
        .mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color-c@{filter-number}.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
        .mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color-c@{filter-number}.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
        .mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color-c@{filter-number}.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected,
        .mw-rcfilters-ui-changesListWrapperWidget-highlights-color-c@{filter-number},
        .mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color-c@{filter-number},
        .oo-ui-buttonWidget.oo-ui-popupButtonWidget .oo-ui-buttonElement-button > .mw-rcfilters-ui-filterItemHighlightButton-circle-color-c@{filter-number},
        .mw-rcfilters-ui-tagItemWidget-highlight[data-color='[email protected]{filter-number}']:before {
            background-color: @filter-icon-color;
        }
    }
    // Define filter color coding
    .filter-color( 1, @filter-icon-color-1, @filter-color-1, @filter-text-color1 );
    .filter-color( 2, @filter-icon-color-2, @filter-color-2, @filter-text-color2 );
    .filter-color( 3, @filter-icon-color-3, @filter-color-3, @filter-text-color3 );
    .filter-color( 4, @filter-icon-color-4, @filter-color-4, @filter-text-color4 );
    .filter-color( 5, @filter-icon-color-5, @filter-color-5, @filter-text-color5 );
 

    // Other review tools expandable menu at top
    .client-js & .mw-recentchanges-toplinks:not(.mw-recentchanges-toplinks-collapsed) {
        border: 1px solid @dark-interface-border;
        background-color: @pickled-bluewood;
    }

    // Various icons
    .mw-rcfilters-ui-filterWrapperWidget-top .oo-ui-iconElement-icon,
    .mw-rcfilters-ui-filterWrapperWidget-top .oo-ui-indicatorElement-indicator,
    .mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-iconElement-icon,
    .mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-indicatorElement-indicator,
    .mw-rcfilters-ui-liveUpdateButtonWidget .oo-ui-iconElement-icon,
    .mw-rcfilters-ui-liveUpdateButtonWidget .oo-ui-indicatorElement-indicator,
    .mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-iconElement-icon,
    .mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-indicatorElement-indicator,
    .mw-rcfilters-ui-savedLinksListItemWidget-button .oo-ui-iconElement-icon,
    .mw-rcfilters-ui-savedLinksListItemWidget-menu .oo-ui-iconElement-icon,
    .mw-rcfilters-ui-filterMenuHeaderWidget-header .oo-ui-iconElement-icon,
    .mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .oo-ui-iconElement-icon,
    .mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .oo-ui-indicatorElement-indicator,
    .mw-rcfilters-ui-viewSwitchWidget-buttons .oo-ui-iconElement-icon,
    .mw-recentchanges-toplinks .oo-ui-indicatorElement-indicator {
        filter: invert(1);
    }
    .mw-rcfilters-ui-filterWrapperWidget-top .oo-ui-iconElement-icon.oo-ui-image-invert,
    .mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-iconElement-icon.oo-ui-image-invert,
    .mw-rcfilters-ui-liveUpdateButtonWidget .oo-ui-iconElement-icon.oo-ui-image-invert,
    .mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-iconElement-icon.oo-ui-image-invert,
    .mw-rcfilters-ui-filterMenuHeaderWidget-header .oo-ui-iconElement-icon.oo-ui-image-invert,
    .mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .mw-rcfilters-ui-filterItemHighlightButton-circle {
        filter: none;
    }
}