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

1. 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 mw.pages" .search-content { border-color: var(--body-mid); } }

// inside talk mw.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

1. 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

1. 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; }