MediaWiki:Common.less/interface.less: Difference between revisions

/* =====================
      Common MediaWiki
   elements inside .mw-body
   ===================== */

:root {
	--errorbox-bg: @bridesmaid;
	--errorbox-border: @flamingo;
	--warningbox-bg: @half-dutch;
	--warningbox-border: @supernova;
	--successbox-bg: @frost;
	--successbox-border: @lima;
	
	--vector-tab-background--hover: var(--body-light) !important;
    --vector-tab-link-color: var(--link-color) !important;
}

// core mw messagebox
.mw-message-box-error, .errorbox,
.mw-message-box-warning, .warningbox,
.mw-message-box-success, .successbox,
// anon talk page message alert
.usermessage {
	box-shadow: @box-shadow;
}

.mw-message-box-error, .errorbox {
	background-color: var(--errorbox-bg);
	border-color: var(--errorbox-border);
}

.mw-message-box-warning, .warningbox,
.usermessage {
	background-color: var(--warningbox-bg);
	border-color: var(--warningbox-border);
}

.mw-message-box-success, .successbox {
	background-color: var(--successbox-bg);
	border-color: var(--successbox-border);
}

.catlinks {
	background: var(--body-light);
	border: 1px solid var(--body-border);
	padding: 8px 15px;
	box-shadow: @box-shadow;

	li {
		border-color: var(--body-mid);
	}
}

// Prevents undesired background showing when next to expanded toc
.mw-highlight {
	background: none;
	
	.linenos {
		background-color: var(--mw-code-background-color);
		// line number
		color: var(--body-border);
	}
	
	// line number hover
	a:hover .linenos,
	.hll a .linenos {
		color: var(--body-dark);
	}
}

.mw-content-ltr.mw-highlight-lines pre,
.mw-content-ltr.content .mw-highlight-lines pre {
	box-shadow: inset 2.75em 0 0 var(--mw-code-background-color);
}

// page history
#pagehistory {
	ul {
		list-style: none;
		margin: 0;
	}

	li {
		border: 1px solid transparent;
		padding: 1px 10px;
		margin: 2px 0;

		&.selected {
			background-color: var(--body-light);
			color: inherit;
			border: 1px dashed var(--body-border);
			outline: none;
		}
	}
}

// Sticky compare rev 
#mw-history-compare > div:first-of-type {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: var(--body-main);
	border-bottom: 1px solid @BODY_DARK;
	padding: .25em 0;

	.wgl-stickyheader & {
		top: 2.5rem; // = height of stickyheader
	}
}

// auto section edit summaries
.autocomment,
.autocomment a,
.autocomment a:visited {
	color: var(--link-color);
}

// revdeleted logs: "(log details removed)"
li span.deleted,
span.history-deleted {
	color: var(--byline-color);
}

// redlinked contribs page for users without edits
.mw-usertoollinks-contribs-no-edits,
.mw-usertoollinks-contribs-no-edits:visited {
	color: var(--redlink-color);
}

.CategoryTreeToggle {
	color: var(--link-color);
}

/* --------------------------------------
      fix section heading being hidden
      underneath sticky header
   -------------------------------------- */

// technique from <https://css-tricks.com/hash-tag-links-padding/>

body.wgl-stickyheader.action-view .mw-headline:target::before {
	display: block;
	content: '';
	margin-top: -3rem;
	height: 3rem;
	visibility: hidden;
	pointer-events: none;
}

/* ------------------------
       MultimediaViewer
   ------------------------*/

// main lightbox
.mw-mmv-post-image {
	color: var(--text-color);
	background-color: var(--body-main);
}

// metadata panel
.mw-mmv-image-metadata {
	border-top-color: var(--body-mid);
	background-color: var(--body-light);
}

// download box and etc
.mw-mmv-dialog,
.mw-mmv-dialog .mw-mmv-dialog-down-arrow,
.mw-mmv-options-dialog .mw-mmv-dialog-down-arrow {
	background-color: var(--body-light);
	box-shadow: none;
}

// activation box header
.mw-mmv-options-enable-alert {
	background-color: var(--body-light);
	color: var(--text-color);
}

// use consistent text color for all for simplicity
.mw-mmv-options-dialog-header,
.mw-mmv-options-text-header,
.mw-mmv-options-text-body,

// activation box
.mw-mmv-options-enable-alert,
// deactivation box
.mw-mmv-options-dialog .mw-mmv-disable-confirmation .mw-mmv-options-dialog-header,
.mw-mmv-options-dialog .mw-mmv-disable-confirmation .mw-mmv-options-text-header {
	color: var(--text-color);
}

/* ------------------------
       RevisionSlider
   ------------------------*/

.mw-revslider-container {
	border-color: var(--sidebar);
}

.mw-revslider-slider-wrapper {
	border-top-color: var(--sidebar);
}

/* ------------------------
        mediawiki.ui
   ------------------------*/

.mw-ui {
	&-button {
		background-color: var(--ooui-normal);
		color: var(--ooui-text);
		border-color: var(--ooui-normal-border);

		&:not(:disabled) {
			&:hover,
			&:active {
				background-color: var(--ooui-normal--hover);
				color: var(--ooui-text);
				border-color: var(--ooui-normal-border);
			}

			&:focus {
				color: var(--ooui-text);
				border-color: var(--ooui-accent);
				box-shadow: inset 0 0 0 1px var(--ooui-accent),inset 0 0 0 2px #fff;
			}

			// there's an override for it
			&:visited {
				color: var(--ooui-text);
			}
		}

		&.mw-ui-progressive {
			&:not(:disabled) {
				background-color: var(--ooui-progressive);
				color: #fff;
				border-color: var(--ooui-progressive);

				&:hover {
					background-color: var(--ooui-progressive--hover);
					border-color: var(--ooui-progressive--hover);
				}

				&:focus {
					box-shadow: inset 0 0 0 1px var(--ooui-accent),inset 0 0 0 2px #fff;
				}

				&:active,
				&.is-on {
					background-color: var(--ooui-progressive--hover);
					border-color: var(--ooui-progressive--hover);
					box-shadow: none;
				}
			}
		}
	}

	// a lot of these need to be redefined since they have the same specificity
	// as the above
	&-button&-destructive:not( :disabled ) {
		color: #fff;
	}

	&-button&-quiet,
	&-button&-quiet&-progressive,
	&-button&-quiet&-destructive {
//		background-color: transparent;
		color: var(--text-color);
	}

	input[type='checkbox']:hover + &-button&-quiet,
	input[type='checkbox']:hover + &-button&-quiet&-progressive,
	input[type='checkbox']:hover + &-button&-quiet&-destructive,
	&-button&-quiet:hover,
	&-button&-quiet&-progressive:hover,
	&-button&-quiet&-destructive:hover {
		background-color: rgba(0,24,73,0.02745098);
		color: var(--text-color);
		border-color: transparent
	}

	input[type='checkbox']:focus + &-button&-quiet,
	input[type='checkbox']:focus + &-button&-quiet&-progressive,
	input[type='checkbox']:focus + &-button&-quiet&-destructive,
	&-button&-quiet:focus,
	&-button&-quiet&-progressive:focus,
	&-button&-quiet&-destructive:focus {
		color: var(--text-color);
//		border-color: #36c;
//		box-shadow: inset 0 0 0 1px #36c,inset 0 0 0 2px #fff
	}

	input[type='checkbox']:active + &-button&-quiet,
	input[type='checkbox']:active + &-button&-quiet&-progressive,
	input[type='checkbox']:active + &-button&-quiet&-destructive,
	&-button&-quiet:active,
	&-button&-quiet&-progressive:active,
	&-button&-quiet&-destructive:active {
		background-color: rgba(0,36,73,0.08235294);
		color: var(--text-color);
		border-color: #72777d;
//		box-shadow: none
	}

	&-input {
		background-color: var(--ooui-input);
		color: var(--text-color);
		border-color: var(--ooui-input-border);

		&:hover {
			border-color: var(--ooui-input-border--hover);
		}

		&::placeholder {
			color: var(--byline-color);
		}
	}
}

/* ------------------------
         Redirects
   ------------------------*/

// convert to mask
.mw-content-ltr .redirectText li {
	&:first-child {
		padding: 0;
		background: 0;

		&::before {
			content:'';
			background: currentcolor;
			.mask("filepath://Redirect-arrow.svg");
			display: inline-block;
			width: 47px;
			height: 20px;
		}
	}
}

/* -------------------------------------------------------------
		HEADER bits because I'm not sure where I can put this
	------------------------------------------------------------ */

/* Search bar */
.vector-search-box-inner {
	background: var(--body-main) !important;
	box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.15) !important;
}

/* "More" button */
.vector-menu-dropdown {
	.vector-menu-heading {
		color: var(--vector-tab-link-color) !important;
		&:hover {
			color: var(--vector-tab-link-color) !important;
		}
		&:focus {
			color: var(--vector-tab-link-color) !important;
		}
	}
}

/* Sidebar */
.vector-menu-portal {
	.vector-menu-heading {
		color: var(--background-text-color) !important;
    	font-weight: bold !important;
    	background: none !important;
	}
	.vector-menu-content {
		li {
			a, a:visited {
				color: var(--background-link-color) !important;
			}
		}
	}
}