MediaWiki:Minerva.less/interface.less
Jump to navigation
Jump to search
/* ================================
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 {
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 {
background-color: var(--wikitable-bg);
}
.toggle-list-item__anchor {
&:visited,
&:active {
color: var(--base-text-color);
}
}
.toggle-list-item:hover {
background: var(--wikitable-bg-lighter);
}
.toggle-list-item__label {
color: var(--base-text-color);
}
// Mobile top icons
.mw-ui-icon {
&-wikimedia-search-base20:before {
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");
}
&-wikimedia-menu-base20:before {
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");
}
&-wikimedia-bellOutline-base20:before {
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");
}
&-minerva-userAvatarOutline:before {
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
@media all and (min-width: @width-breakpoint-desktop) {
.mw-ui-icon-with-label-desktop,
.mw-ui-icon-with-label-desktop:hover,
.mw-ui-icon-with-label-desktop:focus,
.mw-ui-icon-with-label-desktop:active,
.mw-ui-icon-with-label-desktop:visited {
color: var(--base-text-color) !important; //there's a !important at core lol
}
}
// Close button beside the search bar
.header-action .mw-ui-icon-mf-close-base20: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%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
li {
background-color: var(--body-main);
border-color: var(--body-mid);
a {
color: var(--base-text-color);
&:hover {
box-shadow: inset 4px 0 0 0 var(--link-color);
}
}
}
// links below buttons
&.hlist li a {
color: var(--background-link-color);
span {
font-size: 0.8125rem; // slightly smaller for smaller chance of overflowing
}
}
}
}
.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-ui-anchor.mw-ui-progressive {
// this should be replaced with our own progressive link colour at some point
&,
&:active,
&:hover,
&:focus {
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;
}