MediaWiki:Vector-darkmode.less/specials.less

From Old School RuneScape Wiki
Jump to: navigation, search
// <pre>
/* ========================
        special pages
   ======================== */

// Special:RecentChanges
.mw-plusminus-pos {
	color: @lima;
}

.mw-plusminus-neg {
	color: @flamingo;
}

.mw-plusminus-null {
	color: @loblolly;
}

// Special:Editcount
#editcount table[border="1"] {
	background: @dark-wikitable-background !important;
	border-color: @dark-wikitable-border !important;
}

// Special:Search
.mw-search-profile-tabs {
    background-color: @pickled-bluewood;
    border-color: @big-stone;
}

.search-types .current a {
    color: @dark-text;
}

#mw-searchoptions {
    background-color: @pickled-bluewood;
    border-color: @big-stone;

    .divider {
    	border-color: @big-stone;
    }

}

/* ---------------------------
         Special:Browse
   --------------------------- */

.smwb-theme-light {
	.smwb-title,
	.smwb-center,
	.smwb-actions,
	.smwb-prophead {
		background-color: @dark-wikitable-header;
	}

	.smwb-factbox {
		border-left-color: @dark-wikitable-header;
	}

	.smwb-ifactbox {
		border-right-color: @dark-wikitable-header;
	}

	.smwb-propval {
		background-color: @dark-wikitable-background;
	}
}

.smwb-action-separator {
	border-color: @dark-wikitable-border;
}

.smwb-bottom {
	border-bottom-color: @dark-wikitable-border;
}

.smwb-ifactbox,
.smwb-factbox {
	.smwb-cell {
		border-top-color: @dark-wikitable-border;
	}
}

/* -----------------------------
       [[Special:Editcount]]
   ----------------------------- */

#editcount table[border="1"] {
    background-color: @dark-body !important; // override inline style

    th {
        background-color: @dark-wikitable-header;
        border: 1px solid @dark-wikitable-border;
    }

    td {
        border: 1px solid @dark-wikitable-border;
    }

    tr:nth-child(odd) {
        background-color: @dark-wikitable-background;
    }
}

/* ---------------------------
      Special:Notifications
   --------------------------- */

// popup header
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
	border-color: @ooui-interface-border;
}

// bell icon
.mw-echo-ui-overlay .oo-ui-popupWidget-head .oo-ui-iconElement-icon {
	filter: invert(1);
}

// individual notification entry
.mw-echo-ui-notificationItemWidget {
	background-color: desaturate( lighten( @ooui-interface, 4% ), 2% );
	border-color: @ooui-interface-border;

	&:hover {
		background: desaturate( lighten( @ooui-interface, 6% ), 4% );
	}

}

// edit summary
.mw-echo-ui-notificationItemWidget-content-message-body {
	color: @ooui-text;
}

// icon on left
.mw-echo-ui-notificationItemWidget-icon {
	filter: brightness(150%);
}

// entry's main "headline"
.mw-echo-ui-notificationItemWidget-content-message-header {
	color: @ooui-text;
}

.mw-echo-ui-menuItemWidget {

	// entry username/View changes text	
	> .oo-ui-labelElement-label {
		color: fade( @ooui-text, 85% );
	}

	// icon on left
	> .oo-ui-iconElement-icon {
		filter: invert(1);
	}

}

// cross-wiki notifications
.mw-echo-ui-crossWikiNotificationItemWidget-separator,
.mw-echo-ui-bundleNotificationItemWidget-separator {
	border-color: @ooui-interface-border;
}

.mw-echo-ui-crossWikiNotificationItemWidget-group,
.mw-echo-ui-bundleNotificationItemWidget-group {
	background-color: desaturate( lighten( @ooui-interface, 4% ), 2% );
}

// unread entry
.mw-echo-ui-notificationItemWidget-unread {
    background-color: desaturate( lighten( @ooui-interface, 12% ), 10% );
}

// fix background for unseen _and_ unread entry
@keyframes unseen-fadeout-to-unread {

	// background-color on .mw-echo-ui-notificationItemWidget:hover
    from {
        background-color: desaturate( lighten( @ooui-interface, 6% ), 4% );
    }

	// background-color on .mw-echo-ui-notificationItemWidget-unread
    to {
        background-color: desaturate( lighten( @ooui-interface, 12% ), 10% );
    }

}

@keyframes unseen-fadeout-to-read {

	// background-color on .mw-echo-ui-notificationItemWidget:hover
    from {
        background-color: desaturate( lighten( @ooui-interface, 6% ), 4% );
    }

	// background-color on .mw-echo-ui-notificationItemWidget
    to {
        background-color: desaturate( lighten( @ooui-interface, 4% ), 2% );
    }

}

// footer
.oo-ui-popupWidget-footer {

    .mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > & {
        border-color: @ooui-normal-border;
    }

    .oo-ui-buttonElement .oo-ui-buttonElement-button {
        background-color: @ooui-normal;
    }

    .oo-ui-iconElement-icon {
        filter: invert(1);
    }
    
    .mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > & .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement:last-child {
    	border-color: @ooui-normal-border;
    }

}

/* --------------------------
       Notifications page
   -------------------------- */

// all/read/unread and settings toolbar
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
	background: transparent;
	box-shadow: none;
}

// list of notifications
.mw-echo-ui-notificationItemWidget:last-child {
	border-color: @ooui-interface-border;
}

// Recent activity box
.mw-echo-ui-crossWikiUnreadFilterWidget {
	border-color: @ooui-interface-border;
}

// wiki name
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected {
	background-color: @ooui-progressive;
}

.oo-ui-optionWidget-selected .mw-echo-ui-pageNotificationsOptionWidget-label-count {
	color: @ooui-text;
}

.mw-echo-ui-pageNotificationsOptionWidget-icon .oo-ui-iconElement-icon {
	filter: invert(1);
}

// number of notifs
.mw-echo-ui-pageNotificationsOptionWidget-label-count {
	background-color: @ooui-interface;
}

// hovering over username
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted {
	background-color: @ooui-interface;
}

// secondary dates next to "Today", "Yesterday", etc.
.mw-body-content .mw-echo-ui-datedSubGroupListWidget-title-secondary {
	color: fade( @ooui-text, 85% );
}

// preferences menu
.mw-echo-ui-specialHelpMenuWidget {

	.oo-ui-iconElement-icon,
	.oo-ui-indicator-down {
		filter: invert(1);
	}

}

.mw-echo-ui-specialHelpMenuWidget-menu {

	.oo-ui-buttonWidget:hover {
		background-color: @ooui-normal--hover;
	}

	.oo-ui-iconElement-icon {
		filter: invert(1);
	}
}