MediaWiki:Minerva.less/interface.less
/* ================================
changes to the mobile skin ================================ */
- root {
--searchbutton-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23000'%3E%3Cpath d='M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM3 8a5 5 0 1 0 10 0A5 5 0 1 0 3 8z'/%3E%3C/g%3E%3C/svg%3E"); --external-icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg fill='%23906039'%3E%3Cpath d='M8.9 8.9H1.1V1.1h2.8V0H1.1C.5 0 0 .5 0 1.1v7.8C0 9.5.5 10 1.1 10h7.8c.6 0 1.1-.5 1.1-1.1V6.1H8.9v2.8z'/%3E%3Cpath d='M10 0H5.6l1.8 1.8L4.2 5l.8.8 3.2-3.2L10 4.4V0z'/%3E%3C/g%3E%3C/svg%3E"); }
/* -----------------------
page container ----------------------- */
// body element is already coloured
- mw-mf-page-center {
background-color: transparent; }
/* -----------------------
header/search bar ----------------------- */
.header { border-top: none; }
.header-container {
&.header-chrome { // not in body element because of search overlay and others background: var(--body-background-image) var(--body-background-color) no-repeat; background-color: var(--body-background-color); background-size: 900px; box-shadow: inset 0 -1px 3px rgba(0, 0, 0, .1); }
.notification-count { border-radius: @border-radius-circle;
&.notification-unseen { background: none; } }
// wiki logo .branding-box { opacity: 1; } }
// search box .search-box { // for bigger screen sizes where search bar is shown automatically text-align: right;
.search { background-color: var(--search-box); border-color: var(--search-box); box-shadow: @box-shadow;
&::placeholder { color: var(--byline-color); } } }
.client-nojs .search-box .search:focus, .search-overlay .search-box .search:focus { border-color: var(--link-color); box-shadow: inset 0 0 0 1px var(--link-color), 0 1px 1px rgba(0,0,0,0.05); }
// magnifying glass icon; cant invert as the class is used in the same // element as .search-box .mw-ui-background-icon-search, .minerva-icon--search-base20, .minerva-icon--search { background-image: var(--searchbutton-icon); }
/* -------------
overlay ------------- */
.overlay { background: var(--body-main);
textarea { color: var(--text-color); }
// self explanatory &.search-overlay { background: var(--body-main);
// results boxes .results, .search-feedback { background-color: var(--body-light); }
// "Search within pages" .search-content { border-color: var(--body-mid); } }
// inside talk pages and editor? .license { color: var(--base-text-color); }
// border seperating summary section and preview .panel { border-color: var(--sidebar); }
// category menu .content-header { background-color: var(--body-light); border-color: transparent; }
&.overlay-loading { // adjustable background: var(--ooui-window-background); }
// this and the one on parent may be able // to colour all overlays .overlay-content { background: var(--body-main); } }
// search results text .page-summary h2, .page-summary h3 { color: var(--text-color); }
// search results border .page-list li, .topic-title-list li, .site-link-list li { border-color: var(--body-mid); }
// background colour wouldnt be affected when scrolling down certain overlays // the :not is there so source edit doesnt get messed up .overlay-enabled .overlay:not(.editor-overlay), .overlay-enabled #mw-mf-page-center { overflow-y: scroll; }
.overlay-header-container, .overlay-footer-container { background-color: var(--body-background-color); border-color: transparent; }
// editor stuff // edit area .editor-overlay { .wikitext-editor { color: var(--text-color); }
.overlay-header { outline-color: transparent; }
.summary-request { color: var(--text-color); }
// switch between ve/source .editor-switcher { border: none; } }
// editor text colour adjustments .action-submit .mw-editnotice .action-edit .mw-editnotice, .action-submit .mw-editTools, .action-edit .mw-editTools, .action-submit .preview-limit-report-wrapper, .action-edit .preview-limit-report-wrapper, .action-submit .diff-otitle, .action-edit .diff-otitle, .action-submit .diff-ntitle, .action-edit .diff-ntitle, .action-submit #section_0, .action-edit #section_0, .action-submit #editpage-copywarn, .action-edit #editpage-copywarn, .action-submit #mw-anon-edit-warning, .action-edit #mw-anon-edit-warning { color: var(--byline-color); }
.wikitext-editor { background-color: var(--body-main); }
.ve-mobile-fakeToolbar { border: none;
&-container { background: var(--body-background-color); border: none; }
.mw-ui-icon-mf-spinner { border-color: transparent; } }
.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .ve-ui-toolbar-group-back { border-color: transparent; }
.ve-ui-mobileContext { background-color: var(--body-light); border-color: var(--body-light);
.ve-ui-linearContextItem-body-action-wrapper { border-color: var(--body-border); } }
.ve-ui-linearContextItem-foot:not(:empty) { border-color: var(--body-border); }
// "This is a minor edit" box .ve-ui-mwSaveDialog-options { backgroubd-color: var(--body-light); border-color: var(--body-mid); }
/* -------------
page tabs and nav ------------- */
.page-actions-menu { border-color: var(--sidebar); }
// Hide language selector
- language-selector {
display: none; }
// page tabs .minerva__tab-container .minerva__tab { color: var(--text-color);
// redlinks &.new, &.new:visited, &.new:hover, &.new:active { color: var(--redlink-color); }
&.selected { border-color: var(--body-border); } }
// "Joined n time ago" on userpages .heading-holder .tagline { color: var(--base-heading-color); }
/* -------------
footer ------------- */
.minerva-footer { border-color: transparent; }
.mw-footer > .post-content { // same margin as .catlinks to .last-modified-bar margin-top: 32px;
// remove the wiki logo in the footer > .minerva-footer-logo { display: none; } }
// why the progressive .mw-footer .hlist li:after { color: var(--background-text-color); }
// bar at the bottom of the page linking to page hist .last-modified-bar { border-top: 1px solid; border-color: transparent; background: none; color: var(--text-color);
a, a:active, a:visited, .last-modified-text-accent { color: var(--background-text-color); }
// when recently edited // might want to overrule `.mw-footer a` etc... &.active { &, &:active, &:visited, .last-modified-text-accent { color: @white; } } }
// arrow icon used by above // :not for .active .mw-ui-icon-mf-expand-gray:not(.mw-ui-icon-mf-expand-invert):before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eexpand%3C/title%3E%3Cg fill='%2354595d'%3E%3Cpath d='M17.5 4.75l-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z'/%3E%3C/g%3E%3C/svg%3E"); }
/* -------------
other ------------- */
// dropdown menu .toggle-list__list--drop-down { background-color: var(--wikitable-bg);
.toggle-list-item:hover { background: var(--wikitable-bg-lighter); } }
.toggle-list-item__label { color: var(--base-text-color); }
// Mobile top icons .minerva-icon { // button so it doesnt affect search bar button &--search-base20, button &--search { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Esearch%3C/title%3E%3Cg fill='white'%3E%3Cpath fill-rule='evenodd' d='M12.2 13.6a7 7 0 111.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM13 8A5 5 0 113 8a5 5 0 0110 0z'/%3E%3C/g%3E%3C/svg%3E%0A"); }
&--menu-base20, &--menu { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Emenu%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z'/%3E%3C/g%3E%3C/svg%3E%0A"); }
&--bellOutline-base20 { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Ebell%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M11.5 2.19C14.09 2.86 16 5.2 16 8v6l2 2v1H2v-1l2-2V8c0-2.8 1.91-5.14 4.5-5.81V1.5C8.5.67 9.17 0 10 0s1.5.67 1.5 1.5v.69zM10 4C7.79 4 6 5.79 6 8v7h8V8c0-2.21-1.79-4-4-4zM8 18h4c0 1.1-.9 2-2 2s-2-.9-2-2z'/%3E%3C/g%3E%3C/svg%3E%0A"); }
&--userAvatarOutline { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Euser avatar%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M10 8c1.7 0 3.06-1.35 3.06-3S11.7 2 10 2 6.94 3.35 6.94 5 8.3 8 10 8zm0 2c-2.8 0-5.06-2.24-5.06-5S7.2 0 10 0s5.06 2.24 5.06 5-2.26 5-5.06 5zm-7 8h14v-1.33c0-1.75-2.31-3.56-7-3.56s-7 1.81-7 3.56V18zm7-6.89c6.66 0 9 3.33 9 5.56V20H1v-3.33c0-2.23 2.34-5.56 9-5.56z'/%3E%3C/g%3E%3C/svg%3E%0A"); } }
// text inside navbar .page-actions-menu__list-item .cdx-button {
color: var(--base-text-color) !important; //there's a !important at core lol
}
// Close button beside the search bar .mw-ui-icon-mf-close-base20 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eclose%3C/title%3E%3Cg fill='%23fff'%3E%3Cpath d='m4.3 2.9 12.8 12.8-1.4 1.4L2.9 4.3z'/%3E%3Cpath d='M17.1 4.3 4.3 17.1l-1.4-1.4L15.7 2.9z'/%3E%3C/g%3E%3C/svg%3E"); }
// Sidebar menus
- mw-mf-page-left {
background-color: var(--body-background-color);
// logout button when not in amc .secondary-action { border-left-color: var(--body-mid); }
ul { // buttons .toggle-list-item { background-color: var(--body-main); border-color: var(--body-mid);
.toggle-list-item__anchor { &:hover { box-shadow: inset 4px 0 0 0 var(--link-color); } } } } }
.notifications-overlay { // same as opposite sidebar menu &.navigation-drawer { box-shadow: -1px 0 8px 0 rgba(0, 0, 0, 0.35); }
// ... menu .mw-echo-ui-actionMenuPopupWidget-menu { border: none; } }
// "All notifications" .mw-mf-anchor { &, &:visited, &:visited:hover, &:hover, &:active { color: var(--link-color); } }
// talk page stuff .minerva-talk-full-page-button { background-color: var(--body-main); border-color: var(--body-dark); color: var(--link-color); }
.minerva-talk-content-explained { border-color: var(--sidebar); color: var(--base-text-color); }
.talk-overlay .comment .wikitext-editor { border-color: var(--body-border); }
.client-js .skin-minerva--talk-simplified .section-heading { border-color: var(--sidebar); }
// notif boxes .mw-notification, .toast { a { color: var(--link-color); } }
// eg when clicking redlinks .drawer { background-color: var(--body-light);
// when clicking references &.references-drawer { background-color: var(--body-light); color: var(--text-color); a { color: var(--link-color); }
.references-drawer__title { color: var(--text-color); }
// channging to be the same as text-color .mw-ui-icon::before { filter: brightness(0); } } }
// obscure class used on non-existent userpages .cta-holder { background: var(--body-light);
.desc { color: var(--byline-color); } }
// edit tag e.g. Rollback .mw-tag-marker { border-color: var(--body-border); }
// visedit/sourceditor switch button .oo-ui-toolGroup { background: var(--body-background-color); }
// MF MediaViewer/ImageCarousel .load-fail-msg { color: var(--text-color);
&-link a { color: var(--link-color); } }
// checkered background .image-carousel .image-loaded { background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0h8v16h8V8H0z' opacity='.13'/%3E%3C/svg%3E%0A") repeat; }
.image-details { background-color: var(--body-light); border-color: transparent; }