MediaWiki:Minerva.less/interface.less

From Old School RuneScape Wiki
Jump to navigation Jump to search
// <pre>
/* ================================
      changes to the mobile skin
   ================================ */

@mobile-header-height: 3.75em;

/* -----------------------
       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);
	}

    .header {
        height: @mobile-header-height;

        // for bigger screen sizes where search bar is shown automatically
        .search-box {
            text-align: right;
        }

        .search {
            box-shadow: @box-shadow;
        }

    }

    .notification-count {
        border-radius: 50%;
        &.notification-unseen {
            background: none;
        }
    }

	// wiki logo
	.branding-box {
		opacity: 1;
	}
}

/* -------------
       overlay
   ------------- */

.overlay {
	background: var(--body-main);
	// 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);
		}
	}

	// category menu
	.content-header {
		background-color: var(--body-light);
		border-color: transparent;
	}

	// inside talk pages and editor?
	.license {
		color: var(--base-text-color);
	}
}

// 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
.overlay-enabled .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;
}

/* -------------
       footer
   ------------- */

.minerva-footer {
	border-color: var(--sidebar);
}

// why this specific??
footer > .post-content,
.mw-footer > .post-content {
	margin-top: 1em;
}

// remove the wiki logo in the footer
footer > .post-content > h2:first-child {
	display: none;
}

.last-modified-bar {
	border-color: var(--body-background-color);
	background-color: var(--body-main);
	color: var(--base-text-color);
	a,
	a:visited {
		color: var(--base-text-color);
	}
	// when recently edited
	&.active {
		a,
		a:visited {
			color: @white;
		}
	}
}

/* -------------
       other
   ------------- */

// page tabs
.minerva__tab-container .minerva__tab {
	color: var(--base-text-color) !important; // bypass having a large selector
	&.selected {
		border-color: var(--body-border);
	}
}

// gap between search bar and content
#content {
	border-top: none;
}

// 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);
}

.page-actions-menu {
	border-color: var(--sidebar);
}

// Hide language selector
#language-selector {
	display: none;
}

//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");
	}
}

// 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='white'%3E%3Cpath d='M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z'/%3E%3Cpath d='M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z'/%3E%3C/g%3E%3C/svg%3E");
}

// Mobile Diff thank window
#mw-mf-diffview #mw-mf-userinfo {
	background-color: @BODY_LIGHT;
	border-top: solid 1px @BODY_BORDER;
	.mw-mf-edit-count div {
		color: @mineshaft;
	}
}

// Sidebar menus
#mw-mf-page-left {
	background-color: var(--body-background-color);
	ul {

		// buttons
		li {
			background-color: var(--body-main);
			border-color: var(--body-mid);

			a {
				color: var(--base-text-color);
			}

			a:hover {
				box-shadow: inset 4px 0 0 0 var(--body-dark);
			}
		}

		// links below buttons
		&.hlist li a {
			color: var(--link-color);
		}
	}
}

// same as opposite sidebar menu
.notifications-overlay.navigation-drawer {
	box-shadow: -1px 0 8px 0 rgba(0, 0, 0, 0.35);
}

.mw-ui-anchor.mw-ui-progressive {
	color: var(--link-color);
	&:active,
	&:hover {
		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);
}

.client-js .skin-minerva--talk-simplified .section-heading {
	border-color: var(--sidebar);
}

// notifs
.mw-notification,
.toast {
	a {
		color: var(--link-color);
	}
}

// Refs drawer
.drawer.references-drawer {
	background: var(--body-light);
	color: var(--text-color);
	.references-drawer__title {
		color: var(--text-color);
	}

	// channging colour to be the same as text-color
	.mw-ui-icon {
		filter: brightness(0);
	}
}

// Special:Contributions
ul.mw-contributions-list li,
ul.special li {
	border-color: var(--sidebar);
}

.wikitext-editor {
	background-color: var(--body-main);
}