Alex at 16:15, 17 October 2024

2024-10-17T16:15:48Z

← Older revision		Revision as of 18:15, 17 October 2024
Line 100:		Line 100:
	}		}

	// "Search within ~~mw.~~pages"		// "Search within pages"
	.search-content {		.search-content {
	border-color: var(--body-mid);		border-color: var(--body-mid);
Line 106:		Line 106:
	}		}

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

Alex: Created page with "/* ================================ 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..."

2024-10-16T23:11:02Z

Created page with "================================ 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..."

New page

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

MediaWiki:Minerva.less/interface.less - Revision history

Alex at 16:15, 17 October 2024