Anonymous

MediaWiki:Common.css: Difference between revisions

From Melvor Idle
Dark mode improvements for Special:RecentChanges, popups, and some UI icons
(Re-add various 'box' classes previously defined within Timeless 1.38)
(Dark mode improvements for Special:RecentChanges, popups, and some UI icons)
Line 187: Line 187:
.mw-rcfilters-ui-filterMenuHeaderWidget-title,
.mw-rcfilters-ui-filterMenuHeaderWidget-title,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label,
.mw-rcfilters-ui-filterTagMultiselectWidget-resetButton > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
.mw-rcfilters-ui-filterTagMultiselectWidget-resetButton > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title,
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title,
.mw-rcfilters-ui-savedLinksListWidget-placeholder.oo-ui-optionWidget .oo-ui-labelElement-label,
.mw-rcfilters-ui-savedLinksListWidget-placeholder.oo-ui-optionWidget .oo-ui-labelElement-label,
.mw-rcfilters-ui-tagItemWidget-popup-content,
.mw-rcfilters-ui-tagItemWidget-popup-content,
.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget,
.mw-rcfilters-ui-viewSwitchWidget > .oo-ui-labelElement-label,
.mw-rcfilters-ui-viewSwitchWidget > .oo-ui-labelElement-label,
.mw-widget-calendarWidget-day,
.mw-widget-calendarWidget-day,
.mw-widget-calendarWidget-labelButton > .oo-ui-buttonElement-button,
.mw-widget-calendarWidget-labelButton > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-buttonOptionWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
.oo-ui-buttonOptionWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget,
.oo-ui-messageDialog-message,
.oo-ui-messageDialog-message,
.search-types .current a,
.search-types .current a,
Line 215: Line 219:
outline: #0060df solid 2px
outline: #0060df solid 2px
}
}
.warningbox {
.mw-search-result-data,
color:#f2d790;
.results-info {
border-color:#9b5e1c;
color: #acafb3;
}
.warningbox,
.mw-message-box-warning {
color:#eee;
border-color:#ce7e28;
background-color:#6f4f2e;
background-color:#6f4f2e;
}
}
Line 283: Line 292:
border-color:#465160;
border-color:#465160;
color:#eee
color:#eee
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled:not(.oo-ui-flaggedElement-progressive):not([aria-selected="true"]) > .oo-ui-buttonElement-button:hover,
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.mw-rcfilters-ui-savedLinksListItemWidget:hover {
background-color:#3c424a
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-optionWidget-highlighted {
background-color:#223145
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle,
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
color:#a4a1a1;
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle,
.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.mw-rcfilters-ui-menuSelectWidget-footer {
background-color:#282e37;
}
.mw-widget-calendarWidget-day-heading {
  color:#a6a6a6;
}
.mw-widget-calendarWidget-day-additional {
color:#222
}
.oo-ui-toggleSwitchWidget:hover {
background-color:#323942
}
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
border-color:#72777d
border-color:#72777d
}
.oo-ui-popupWidget-anchor:before {
border-top-color:#465160
}
.oo-ui-popupWidget-anchor:after {
border-top-color:#323942
}
}
#simpleSearch,
#simpleSearch,
Line 343: Line 318:
background-color:#2c343f;
background-color:#2c343f;
border-color:#2c343f
border-color:#2c343f
}
#contentSub {
color: #9fa9b0;
}
}
.not-patrolled {
.not-patrolled {
Line 412: Line 390:
background-image:linear-gradient(to right,rgba(255,255,255,0),#323942 50%)
background-image:linear-gradient(to right,rgba(255,255,255,0),#323942 50%)
}
}
/* Arrows on various popups */
.pokey,
.pokey,
.pokey:after,
.pokey:after,
Line 433: Line 413:
border-bottom-color:#465160
border-bottom-color:#465160
}
}
.oo-ui-popupWidget-anchor:before,
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor:before {
border-top-color:#465160
}
.oo-ui-popupWidget-anchor:after,
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor:after {
border-top-color:#323942
}
#mw-related-navigation .sidebar-inner::before,
#mw-site-navigation .sidebar-chunk h2 span::before,
#personal .dropdown::before {
border-bottom-color:#465160
}
#mw-related-navigation .sidebar-inner::after,
#mw-site-navigation .sidebar-chunk h2 span::after,
#personal .dropdown::after {
border-bottom-color:#323942
}
/* Icons for personal nav & link decoration */
#mw-site-navigation h2::after,
#mw-related-navigation h2::after,
#personal h2::after {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIxNiI+Cgk8cGF0aCBkPSJtMTUuNSA2LTUgNS01LTV6IiBzdHlsZT0iZmlsbDojYjNiM2IzIiBvcGFjaXR5PSIuMzMiLz4KPC9zdmc+Cg==);
}
#personal h2 {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+Cgk8cGF0aCBkPSJNMy42NDMgOS40NmMtMS43NTggMi4zOS0xLjk1NyA1LTEuMjI3IDYuNzI5LjQ5IDEuMTggMS4xOCAxLjg3MSAxLjk5IDIuMjkuNzkyLjQyOSAxLjc1LjUxOCAyLjYuNTIxaDYuMzI5Yy45MiAwIDEuODUxLS4yMDggMi42NS0uNjc1LjgtLjQ2NyAxLjQ2LTEuMTk4IDEuOC0yLjI5LjQ5LTEuNTQ5LjI2Ni00LjAzLTEuNDgtNi40Ni0uMDA3LjAxMy0uMDIuMDItLjAzLjAzYTcuNTA2IDcuNTA2IDAgMCAxLTYuMjY3IDMuMzlBNy41MDYgNy41MDYgMCAwIDEgMy42NDMgOS40NnoiIG9wYWNpdHk9Ii4zMyIgc3R5bGU9ImZpbGw6I2IzYjNiMyIvPgoJPHBhdGggZD0iTTEwLjAwOC45OTJhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTl6IiBvcGFjaXR5PSIuMzMiIHN0eWxlPSJmaWxsOiNiM2IzYjMiLz4KPC9zdmc+);
}
.mw-editsection,
#ca-edit a {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+Cgk8cGF0aCBkPSJtMTIuODc5IDIuMTY1LTkuNDY1IDkuNDcxIDQuOTUgNC45NSA5LjQ2NS05LjQ3MXptMCAyLjgyOUwxNSA3LjExNWwtNi42MzYgNi42NDMtMi4xMjEtMi4xMjJ6TTYuOTUgMThIMnYtNC45NXoiIG9wYWNpdHk9Ii4zMyIgc3R5bGU9ImZpbGw6I2IzYjNiMyIvPgo8L3N2Zz4=);
}
#ca-history a {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+Cgk8cGF0aCBkPSJNMTAgMmE4IDggMCAwIDAtOCA4IDggOCAwIDAgMCA4IDggOCA4IDAgMCAwIDgtOCA4IDggMCAwIDAtOC04em0wIDJhNiA2IDAgMCAxIDYgNiA2IDYgMCAwIDEtNiA2IDYgNiAwIDAgMS02LTYgNiA2IDAgMCAxIDYtNnoiIG9wYWNpdHk9Ii4zMyIgc3R5bGU9ImZpbGw6I2IzYjNiMyIvPgoJPHBhdGggZD0iTTkuOTg0IDQuOTg2QTEgMSAwIDAgMCA5IDZ2NWgzYTEgMSAwIDEgMCAwLTJoLTFWNmExIDEgMCAwIDAtMS4wMTYtMS4wMTR6IiBvcGFjaXR5PSIuMzMiIHN0eWxlPSJmaWxsOiNiM2IzYjMiLz4KPC9zdmc+);
}
.tools-inline li[id^="ca-nstab-"] a {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+Cgk8cGF0aCBkPSJNNCAydjE2aDEyVjcuMDFMMTEgMnptMiAyaDMuOTk0djRIMTR2OEg2eiIgb3BhY2l0eT0iLjMzIiBzdHlsZT0iZmlsbDojYjNiM2IzIi8+Cjwvc3ZnPg==);
}
#ca-talk a {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+Cgk8ZyBvcGFjaXR5PSIuMzMiIHN0eWxlPSJmaWxsOiNiM2IzYjMiPgoJCTxwYXRoIGQ9Ik01LjM5MSAxNS41NzVjLjU1MyAxLjU1Ni0uMDk4IDIuNTM3LS45NDIgMy40MjUgMy4yNjItLjczMSAzLjI0My0yLjEzNCAzLjc3LTMuNDI1em0xMC4zNjYtMy45MzNjLS41NTMgMS41NTcuMDk4IDIuNTM4Ljk0MiAzLjQyNi0zLjI2Mi0uNzMyLTMuMjQyLTIuMTM0LTMuNzY5LTMuNDI2eiIvPgoJCTxwYXRoIGQ9Ik03Ljc2OCA3LjE0NmMtMy4yMDIgMC01Ljc5OCAyLjAzNS01Ljc5NyA0LjU0NSAwIDIuNTEgMi41OTYgNC41NDQgNS43OTcgNC41NDMgMy4yIDAgNS43OTQtMi4wMzQgNS43OTUtNC41NDMgMC0yLjUxLTIuNTk1LTQuNTQ0LTUuNzk1LTQuNTQ1em0tLjAyMiAyLjI0N2MyLjAxIDAgMy42NCAxLjAzNCAzLjYzOSAyLjMwOC0uMDAxIDEuMjc0LTEuNjMgMi4zMDYtMy42MzkgMi4zMDctMi4wMSAwLTMuNjQtMS4wMzMtMy42NC0yLjMwNy0uMDAxLTEuMjc1IDEuNjI5LTIuMzA5IDMuNjQtMi4zMDh6Ii8+CgkJPHBhdGggZD0iTTEyLjQ3MyAyLjcyN2MtMy42MDQgMC02LjUyNSAyLjE0OS02LjUyNiA0LjhsMi4xMDQtLjAxN2MuMDAxLTEuMzkyIDEuOTc0LTIuNTIgNC40MDYtMi41MiAyLjQzMyAwIDQuNDA3IDEuMTI4IDQuNDA4IDIuNTIgMCAxLjM5My0xLjk3MyAyLjUyMi00LjQwOCAyLjUyMWwuMDE2IDIuM2MzLjYwMy0uMDAxIDYuNTI0LTIuMTUyIDYuNTIzLTQuODA0IDAtMi42NS0yLjkyLTQuOC02LjUyMy00Ljh6Ii8+Cgk8L2c+Cjwvc3ZnPg==);
}
#ca-watch a {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+Cgk8cGF0aCBkPSJNMTAuMDQxIDEuMTI1IDcuNDA3IDYuMjQzbC01LjY1NC45NSA0LjAyNSA0LjEwMi0uODQ2IDUuNzAzIDUuMTIzLTIuNTg3IDUuMTMgMi41NjctLjg2Mi01LjY4OSA0LjAxNC00LjExMy01LjY1Mi0uOTM2em0uMDAzIDQuMzU1IDEuMzMyIDIuNTc4IDIuODQ3LjQ3LTIuMDIyIDIuMDcxLjQzNSAyLjg2My0yLjU4Ny0xLjI5NC0yLjU3OCAxLjMwMi40MjYtMi44NzEtMi4wMjMtMi4wNjQgMi44NDQtLjQ3N3oiIG9wYWNpdHk9Ii4zMyIgc3R5bGU9ImZpbGw6I2IzYjNiMyIvPgo8L3N2Zz4=);
}
#mw-header-nav-hack {
#mw-header-nav-hack {
background:#323942;
background:#323942;
Line 508: Line 533:
}
}
/* Special:RecentChanges */
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color:#193558;
border-color:#124c92;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget.oo-ui-flaggedElement-muted {
background-color: #282f39;
color: #717f93;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget.oo-ui-flaggedElement-muted:hover {
background-color: #2e3641;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget.oo-ui-optionWidget-selected {
background-color: #485668;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget.oo-ui-optionWidget-selected:hover {
background-color: #525f70;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget.oo-ui-optionWidget-pressed.oo-ui-optionWidget-highlighted {
background-color: #606d7d;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled:not(.oo-ui-flaggedElement-progressive):not([aria-selected="true"]) > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.mw-rcfilters-ui-savedLinksListItemWidget:hover {
color:inherit;
background-color:#3c424a
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-optionWidget-highlighted {
background-color:#223145
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle,
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
color:#a4a1a1;
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle,
.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget,
.mw-rcfilters-ui-menuSelectWidget-footer {
background-color:#282e37;
}
.mw-widget-calendarWidget-day-heading {
  color:#a6a6a6;
}
.mw-widget-calendarWidget-day-additional {
color:#222
}
.oo-ui-toggleSwitchWidget:hover {
background-color:#323942
}
/* Special:RecentChanges - Highlight rules */
/* Special:RecentChanges - Highlight rules */
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c1,
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c1,