mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/ui.less

@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';
@import 'mediawiki.mixins.less';

/* stylelint-disable no-descending-specificity */
html,
body {
	// Ensure overlays take up full screen
	height: 100%;
}

html {
	font-size: @font-size-root;
	// Support Safari: Prevent font scaling in landscape
	-webkit-text-size-adjust: none;
}

body {
	background-color: @background-color-base;
	color: @colorGray2;
	// Support All Browsers: Remove `margin` (normalized)
	margin: 0;
}

main {
	// Support IE 9-11: Apply correct `display` (normalized), see T207618.
	display: block;
}

.mw-body {
	// avoid margin collapsing (see T147956)
	border-top: 1px solid transparent;
	padding-bottom: 32px;
}

.overlay-enabled,
.mw-body {
	background-color: @background-color-base;
}

.header-container {
	border-bottom: 1px solid @colorGray12;
	padding: 0 @contentPadding;

	&.header-chrome {
		background-color: @chromeColor;
		border: 0;
		box-shadow: inset 0 -1px 3px rgba( 0, 0, 0, 0.08 );
	}
}

// If footer has last modified list item (Desktop MinervaNeue ?useformat=desktop&useskin=minerva),
// hide it (T173545).
// stylelint-disable-next-line selector-max-id
.navigation-drawer--loading,
#footer-info-lastmod {
	display: none;
}

// One selector for JavaScript overlays
// One selector for server side rendered HTML
// FIXME: The header code should be refactored to use flex box,
// given we don't need to support IE11 for mobile.
.overlay-header,
.minerva-header {
	display: table;
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	height: @siteHeaderHeight;
	white-space: nowrap;
	// When banners are present we want to easily distinguish between them and the header so add border
	border-top: 1px solid @colorGray12;
	margin-top: @headerMarginTop;

	> div,
	> .navigation-drawer {
		position: relative;
		vertical-align: middle;
		display: table-cell;
	}

	.branding-box {
		width: auto;
		opacity: @opacity-icon-subtle; // T251135

		a {
			display: block;
			margin-left: 5px;
			font-size: 1em;
			text-decoration: none;
			color: @colorGray2;

			span {
				line-height: 1;
				font-size: inherit;
			}

			img {
				vertical-align: middle;
			}

			> * {
				float: left;
			}

			sup {
				color: @colorGray5;
				display: none;

				.beta & {
					display: initial;
				}
			}
		}
	}

	> .header-title {
		vertical-align: middle;
	}
}

#searchInput { // stylelint-disable-line selector-max-id
	cursor: text;
}

.search-box,
/* `.minerva-header .search-box` is needed to override table-cell rules */
.minerva-header .search-box {
	display: none;
	width: auto;
}

/* Search */
.search-box .search {
	@size-icon-search: unit( 18 / @font-size-browser, em );
	@size-icon-search-gutter: unit( 8 / @font-size-browser, em );
	@size-modifier-border: unit( 1 / @font-size-browser, em );
	@padding-vertical-search: 8px - @border-width-base;
	@padding-start-search-icon: @size-icon-search + ( 2 * @size-icon-search-gutter ) - @size-modifier-border;
	background-color: #fff; // Support Fennec, Opera Mini: Remove default background, see T38490.
	background-position: left @size-icon-search-gutter center;
	background-repeat: no-repeat;
	background-size: @size-icon-search;
	// Support Safari: Get rid of rounded corners.
	-webkit-appearance: none;
	width: 100%;
	margin-top: 0;
	height: 2.25em;
	border: @border-width-base solid #fff;
	border-radius: @border-radius-base;
	padding: @padding-vertical-search 0 @padding-vertical-search @padding-start-search-icon;
	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 );
	// Keyboard focus is taken care of below at `.search-box .search:focus`.
	outline: 0;
	.transition( border-color @transition-duration-medium, box-shadow @transition-duration-medium; );
}

// Provide focus styles only in non-JS and overlay to prevent double transition.
.client-nojs .search-box .search:focus,
.search-overlay .search-box .search:focus {
	border-color: @colorProgressive;
	box-shadow: inset 0 0 0 1px @colorProgressive, 0 1px 1px rgba( 0, 0, 0, 0.05 );
}

input.search {
	// [T139928] Hide all pseudo-elements added to search inputs in WebKit.
	&::-webkit-search-decoration,
	&::-webkit-search-cancel-button,
	&::-webkit-search-results-button,
	&::-webkit-search-results-decoration {
		display: none;
	}
}

.content {
	h2 {
		// Clear table of contents and any other floated elements in desktop Minerva.
		clear: left;
	}

	.collapsible-heading .edit-page {
		visibility: hidden;
	}

	.collapsible-heading.open-block {
		// Restrict to child so that child section edit links do not get revealed.
		.edit-page {
			visibility: visible;
		}
	}

	.mw-parser-output > h2,
	.section-heading {
		border-bottom: 1px solid @colorGray14;
		margin-bottom: @headingMargin;
	}

	// The following rules are duplicated in MobileFrontend
	// but needed by Minerva desktop
	.mw-parser-output {
		> h1,
		> h2,
		> h3,
		> h4,
		> h5 {
			// Safari needs this. @see T106347
			display: table;

			.mw-headline {
				width: 100%;
			}

			> span {
				display: table-cell;
			}
		}
	}

	.mw-editsection > .mw-ui-icon-element {
		margin-top: -0.75em;
		margin-bottom: -0.75em;
	}
}

// stylelint-disable selector-max-id
#page-secondary-actions {
	a {
		margin: 10px 2px 2px 0;
	}
}

// It may be better to express these in a single class
// or think about using extend or a mixin to stay with semantic selectors
// https://css-tricks.com/the-extend-concept/
#bodyContent .panel .content,
.overlay .content-header,
.overlay .panel,
.page-list.side-list .list-thumb,
.page-list li,
.topic-title-list li,
.site-link-list li,
.drawer,
.list-header,
.mw-revision {
	padding-left: @contentPadding;
	padding-right: @contentPadding;
}

.talk-overlay .comment .comment-content,
.image-list,
.pre-content,
/* Form only pages e.g Special:MobileOptions */
#mw-content-text > form > .oo-ui-fieldLayout > .oo-ui-fieldLayout-body,
/* Save button on Special:MobileOptions */
#mw-content-text > form > .oo-ui-widget,
.content,
.post-content {
	margin: 0 @contentMargin;
}
// stylelint-enable selector-max-id

// T217197
.minerva__subtitle {
	margin-top: 10px;
	margin-bottom: 10px;

	&:empty {
		margin: 0;
	}
}

@media all and ( min-width: @width-breakpoint-tablet ) {
	/* FIXME: this should be one generic class name */
	/* SpecialMobileEditWatchlist */
	.page-summary-list,
	/* Talk overlay */
	.topic-title-list,
	/* structured languages, mobile pagelists */
	.site-link-list,
	/* overlays */
	.overlay .panel,
	/* language overlay / MobileSpecialPageFeed */
	.list-header {
		padding-left: @contentPaddingTablet;
		padding-right: @contentPaddingTablet;
	}
}
/* stylelint-enable no-descending-specificity */