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

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

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

body {
	background-color: @chromeColor;
}

// FIXME: should we use .mw-body here instead?
#content {
	// avoid margin collapsing (see T147956)
	border-top: solid 1px transparent;
	padding-bottom: 32px;
}

.overlay-enabled,
#content {
	background-color: @skinContentBgColor;
}

.header-container {
	border-bottom: solid 1px @chromeContentSeparator;

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

.last-modified-bar {
	background-color: transparent;
	display: block;
	color: @colorGray5;
	transition: background-color 0.2s ease, color 0.2s ease;

	a,
	a:visited {
		color: @colorGray6;
		// If browser supports
		&:nth-child( 2 ) {
			font-weight: bold;
		}
	}

	#mw-mf-last-modified {
		padding-top: 5px;
		padding-bottom: 5px;
		background-color: @colorGray14;
	}

	&.active {

		#mw-mf-last-modified {
			background-color: @lastModifiedBarActiveBackgroundColor;
		}

		color: #fff;
		a {
			color: #fff;
		}
	}
}

.header {
	display: table;
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	height: @headerHeight;
	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 {
		width: @headerHeight;
		position: relative;
		vertical-align: middle;
		display: table-cell;
	}

	// Menu and notifications button
	> div a {
		display: block;
	}

	.branding-box {
		width: auto;

		h1 {
			margin-left: 5px;
			font-size: 1em;

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

	.header-action > * {
		min-height: @headerHeight;
	}
}

.header > form,
.overlay-header .overlay-title {
	padding: 0.15em 0;

	&:last-child {
		// Reserve space to the right in case the search form in the header or
		// overlay title in the overlay header is the last element. Use @iconGutterWidth
		// because there is a hamburger or close/back icon next to this element and
		// the space between them is exactly that.
		padding-right: @iconGutterWidth;
	}
}

// Make search input more visible for users on small screens.
// Opera Mini doesn't support placeholders.
// FIXME: As soon as HeaderV2 feature flag is removed this entire block can disappear as a search icon
// will now be shown on Opera Mini instead.
@media all and ( max-width: @wgMFDeviceWidthMobileSmall ) {
	.header {
		.search {
			border: 1px solid @grayLight;
			// Remove the space for the search icon inside the search bar and increase height to size of button
			padding: 0.5em 0.1em;
			background: none;  // so that the icon doesn't overlap with the placeholder
		}
	}
}

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

.search-box {
	// FIXME: remove when micro.tap in stable and rule from common-js.less too
	-webkit-tap-highlight-color: rgba( 255, 255, 255, 0 );

	.search {
		@searchIconSize: 20px;
		@searchIconGutter: 6px;
		// FIXME: input's cannot have child elements so not possible to use mw-ui-icon-before here
		// How can we avoid multiple use of magnifying glass icon?
		.background-image-svg( 'magnifying-glass.svg', 'magnifying-glass.png' );
		outline: 0;
		width: 100%;
		// FIXME: unable to check but the important may not be needed for Nokia S60;
		background-color: #fff !important; /* remove fennec default background also see bug 36490 */
		// get rid of rounded corners in Safari
		-webkit-appearance: none;

		padding: 0.5em 0 0.5em @searchIconSize + (2 * @searchIconGutter);
		background-position: left @searchIconGutter center;
		background-repeat: no-repeat;
		.background-size( @searchIconSize, @searchIconSize );
		border-radius: @borderRadius;
		box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 );
		margin-top: 0;
	}
}

/* Search */
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 {
	// Correct icon sizes of edit icon when using mw-ui-icon.
	h1 {
		.edit-page {
			font-size: 1 / @fontSizeH1;
		}
	}

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

		.edit-page {
			font-size: 1 / @fontSizeH2;
		}
	}

	h3 {
		.edit-page {
			font-size: 1 / @fontSizeH3;
		}
	}

	.edit-page {
		display: inline-block;
		visibility: hidden;
	}

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

	.section-heading {
		width: 100%;
		border-bottom: solid 1px @colorGray14;
		margin-bottom: @headingMargin;

		.indicator {
			font-size: @indicatorFontSize;
			margin-left: -@iconGutterWidth;
		}
	}

	.section-heading,
	.in-block {
		// Safari needs this. @see T106347
		display: table;
		.mw-headline {
			width: 100%;
		}
		> span {
			display: table-cell;
			vertical-align: middle;
		}
	}
}

// Toggling indicators are unusable without JavaScript
.client-nojs {
	.section-heading .indicator {
		display: none;
	}
}

#page-secondary-actions {
	// Clears floating on table of contents on stub pages.
	clear: both;

	a {
		margin: 10px 2px 2px 0;
	}
	.language-selector {
		margin-top: 1em;
	}
}

.truncated-text {
	white-space: nowrap;
	overflow: hidden;
	-webkit-text-overflow: ellipsis;
	text-overflow: ellipsis;

	// FIXME: this works only in WebKit
	&.multi-line {
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	&.two-line {
		-webkit-line-clamp: 2;
		// fallback for non-WebKit
		max-height: 2.6em;
	}
}

// FIXME: Create generic class to represent both of these headers
.overlay,
.header {

	// need to specify id or else other rules are more important
	// FIXME: simplify when .icon class from Overlay used instead
	#secondary-button.user-button,
	.user-button {
		// Make sure count is positioned correctly in relation to bell icon
		position: relative;

		// can't use display:none class as icons must have a label to retain height
		.label {
			visibility: hidden;
		}

		&.loading span {
			display: none;
		}
	}
}

.notification-count {
	@circleSize: 24px;
	@borderSize: 2px;
	margin: auto;
	height: @circleSize;
	background: @notificationBackgroundRead;
	color: @notificationColorRead;
	cursor: pointer;

	.circle {
		border-radius: 50%;
		border: @borderSize solid @notificationColorRead;
		margin: auto;
		height: @circleSize - @borderSize;
		width: @circleSize - @borderSize;

		/* stylelint-disable declaration-block-no-duplicate-properties */
		// Center the text number inside the circle
		display: block; // Fallback for old iOS
		text-align: center; // Fallback for old iOS
		display: -webkit-box;
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;

		span {
			font-weight: bold;
			font-size: 13px;
			line-height: 1;
			letter-spacing: -0.5px;
		}
	}

	&.notification-unseen {
		color: @notificationColorUnread;

		.circle {
			background: @notificationBackgroundUnread;
			border-color: @notificationBackgroundUnread;
		}
	}

	// FIXME: There must be a better way of doing this
	&.max {
		right: 0.2em;
		width: 2em;
		height: 2em;
		line-height: 2em;
		font-size: 0.7em;
	}

	&:hover {
		text-decoration: none;
	}
}

// FIXME [mediawiki ui] These rules should not be needed in the mobile context
.mw-ui-button-group {
	text-align: center;

	* {
		float: none !important;
	}

	// For talk and CTA drawer
	.mw-ui-block {
		width: auto;
	}
}

// This is here rather than in mainmenu.less because we want to load these rules for non-js users too
// Transparent shield hidden by default
.transparent-shield,
.navigation-drawer {
	// don't use display: none because it's not animatable
	position: absolute;
	z-index: @z-indexBase;
	visibility: hidden;
}

.content .nojs-edit {
	display: inline-block !important;
	visibility: visible;
	float: right;
}

// 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/
.last-modified-bar #mw-mf-last-modified,
#bodyContent .panel .content,
.overlay .content-header,
.overlay .panel,
.page-list.side-list .list-thumb,
.overlay .cleanup li .issue-notice,
.editor-overlay .wikitext-editor,
.page-list li,
.topic-title-list li,
.site-link-list li,
.previewnote p,
.pointer-overlay,
.drawer,
.successbox,
.errorbox,
.list-header,
.warningbox,
.mw-revision {
	padding-left: @contentPadding;
	padding-right: @contentPadding;
}

.talk-overlay .comment .comment-content,
.backtotop,
.image-list,
.pre-content,
.content,
.post-content {
	margin: 0 @contentMargin;
}

@media all and ( min-width: @deviceWidthTablet ) {
	// FIXME: this should be one generic class name
	.page-summary-list,
	.topic-title-list,
	.site-link-list,
	.overlay .panel,
	.list-header {
		padding-left: @contentPaddingTablet;
		padding-right: @contentPaddingTablet;
	}
}