mediawiki-skins-Gongbi/resources/screen-desktop.less

/* stylelint-disable selector-max-id */
/**
 * Gongbi Skin
 * © 2015-2021 Issara
 * © 2022-2023 WaitSpring
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc.,
 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 */
@import 'variables.less';

/* T181484 (firefox and chrome; doesn't fix anything else as yet) */
body,
html {
	scroll-padding-top: @fixed-header-height + 0.5em;
}

/* Override menu display from mobile */
/* This also requires !importants where they hover and stuff */
.dropdown,
.sidebar-inner {
	display: block !important;
}

.mobile-close-button {
	display: none;
}

.ts-inner:not( .mw-footer ) {
	max-width: @content-width;
	box-sizing: border-box;
	margin: auto;
}

div.mw-notification-area {
	top: @fixed-header-height + 0.25em;
}

/* Header */

#mw-header {
	.flex-display;
	align-items: center;
}

#mw-header-container {
	position: fixed;
	z-index: 100;
	top: 0;
	width: 100%;
	/* Stupid IE10+ bug requires defining the height property for this to work
	 * the way it is intended; without doing that this'll break horribly under
	 * IE10 and IE11.
	 * @see https://phabricator.wikimedia.org/T173769
	 */
	height: 0;
	min-height: @fixed-header-height;
	box-sizing: border-box;
	padding: 0.5em 0;
	border-bottom: solid 4px @blue;
	background: @background;
	color: @text;
	/* box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.08 ), 0 0 2px rgba( 0, 0, 0, 0.15 ); */
}

#p-logo-text {
	max-width: @column-left-size;
	align-items: center;
	.flex(0, 0, auto, 1);
	.flex-display;
	justify-content: center;

	/* images */
	a.wordmark {
		object-fit: contain;
	}
}

#p-search {
	.flex(1, 1, auto, 2);
	max-width: 50vw;
	margin: auto;
}

#user-tools {
	.flex(0, 1, auto, 3);
	.flex-display;
	flex-direction: row-reverse;
	gap: 0.25em;
	/* For the more responsive user tools support */
	min-width: @column-right-size - 3.25em * 2;
	margin: auto 1em auto 6.5em;

	h2 span {
		display: inline-block;
		overflow: hidden;
		max-width: 300px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

#personal {
	position: relative;
	display: inline-block;
	order: 1;
	line-height: 1;

	.dropdown {
		top: 2.5em;
		display: none !important;
		.dropdown-menu();
		.dropdown-pokey();
	}

	.pokey {
		top: 1.9em;
	}

	h2 {
		padding-left: 25px;
		margin: 0;
		background-image: url( images/user-grey.svg );
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 18px;

		/* from .dropdown-header(); */
		cursor: pointer;
		font-family: @fonts-secondary;
		font-size: 1.25em;
		font-weight: 600;

		&:after {
			display: inline-block;
			width: 12px;
			height: 12px;
			background-image: url( images/arrow-down-grey.svg );
			background-position: center center;
			background-repeat: no-repeat;
			content: '';
		}

		span {
			display: none;
		}
	}
}

.client-nojs #personal:hover {
	.pokey,
	.dropdown {
		display: block !important;
	}
}

#mw-wrapper .dropdown-active {
	.pokey,
	.dropdown,
	.sidebar-inner {
		display: block !important;
	}
}

#p-variants-desktop {
	position: relative;
	margin: 0.5em 0 0 1em;
	float: right;

	h3 {
		.dropdown-header();
		.ca-icon( 'images/languages-grey' );
		padding-bottom: 1em;
		border-bottom: transparent;
		margin: 0 0 -1em;
		font-family: @fonts;
		font-size: 1em;
		line-height: 1.5;
	}

	.dropdown {
		/* Override the mobile thing */
		top: 2.25em !important;
		display: none !important;
		padding-bottom: 2em;
		margin-right: 2px;
		.dropdown-menu();
		.dropdown-pokey();

		.selected a {
			color: @text;
		}
	}
}

.client-nojs #p-variants-desktop:hover .dropdown {
	display: block !important;
}

.mw-wiki-logo {
	display: block;
	margin: 0.75em auto 0;

	&.fallback {
		width: 11em;
		height: 11em;
		background-position: center center;
		background-repeat: no-repeat;
		content: '';
	}

	&.gongbi-logo {
		background-image: none;

		img {
			/* Let's not assume our users are sizing these to anything in particular */
			/* 135px because that keeps things semi-consistent with logo parts of oldstyle logos */
			width: 135px;
			height: auto;
			margin: 0.75em 0 0.5em;
		}
	}
}

#p-variants,
#other-languages.variants-only,
#mw-page-header-links #p-more,
#sidebar-tools,
#search-button,
.sidebar-chunk h2 {
	display: none;
}

/* Content */
#mw-content-container {
	margin: @fixed-header-height 0 0;
}

/* Misc */
.mobileonly,
.onlymobile {
	display: none;
}