mediawiki-skins-Citizen/resources/skins.citizen.styles/Header.less

.mw-header {
	--width-button-base: ~'calc(var(--size-icon) + var(--padding-page))';
	--width-button-corner: ~'calc(var(--size-icon) + var(--padding-page) * 2)';
	position: fixed;
	z-index: 10;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	height: var( --height-header );
	justify-content: space-between;
	pointer-events: none;

	& > * {
		pointer-events: auto;
	}

	&-tools {
		display: inherit;
	}

	ul {
		list-style: none;
	}

	ul,
	li {
		display: block;
		margin: 0;
	}

	&:before {
		position: absolute;
		right: 0;
		left: 0;
		height: ~'calc( var( --height-header ) + 20px )';
		/*
		 * ease(x) := 1 - pow(1 - x, 2);
		 */
		background-image: linear-gradient( to bottom, ~'rgba( var( --background-color-dp-00--rgb ), 1 )' 0%, ~'rgba( var( --background-color-dp-00--rgb ), 0.988 )' 11.11%, ~'rgba( var( --background-color-dp-00--rgb ), 0.951 )' 22.22%, ~'rgba( var( --background-color-dp-00--rgb ), 0.889 )' 33.33%, ~'rgba( var( --background-color-dp-00--rgb ), 0.802 )' 44.44%, ~'rgba( var( --background-color-dp-00--rgb ), 0.691 )' 55.56%, ~'rgba( var( --background-color-dp-00--rgb ), 0.556 )' 66.67%, ~'rgba( var( --background-color-dp-00--rgb ), 0.395 )' 77.78%, ~'rgba( var( --background-color-dp-00--rgb ), 0.210 )' 88.89%, ~'rgba( var( --background-color-dp-00--rgb ), 0 )' 100% );
		content: '';
	}
}

// User icon bar
#p-personal-extra {
	ul {
		display: flex;
		height: var( --height-header );
		align-items: center;
	}
}
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00			`.mw-header {`
refactor: clean up header structure and styles 2021-01-16 00:56:59 +00:00			`--width-button-base: ~'calc(var(--size-icon) + var(--padding-page))';`
			`--width-button-corner: ~'calc(var(--size-icon) + var(--padding-page) * 2)';`
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00			`position: fixed;`
			`z-index: 10;`
			`top: 0;`
refactor: clean up header structure and styles 2021-01-16 00:56:59 +00:00			`right: 0;`
			`left: 0;`
refactor: order styles with idiomatic order 2021-01-11 16:45:52 +00:00			`display: flex;`
refactor: clean up header structure and styles 2021-01-16 00:56:59 +00:00			`height: var( --height-header );`
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00			`justify-content: space-between;`
remove pointer events on header This allows users to click on things underneath the header itself or its shadow. Very useful, especially if the shadow is made any bigger. 2021-02-04 03:41:00 +00:00			`pointer-events: none;`

			`& > * {`
			`pointer-events: auto;`
			`}`
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00
			`&-tools {`
			`display: inherit;`
			`}`

			`ul {`
			`list-style: none;`
			`}`

			`ul,`
			`li {`
			`display: block;`
refactor: order styles with idiomatic order 2021-01-11 16:45:52 +00:00			`margin: 0;`
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00			`}`

refactor: clean up header structure and styles 2021-01-16 00:56:59 +00:00			`&:before {`
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00			`position: absolute;`
Github CI lint - eslint/stylelint 2020-06-07 05:31:34 +00:00			`right: 0;`
refactor: order styles with idiomatic order 2021-01-11 16:45:52 +00:00			`left: 0;`
fix: fix header background bleeding into content 2021-02-04 15:41:01 +00:00			`height: ~'calc( var( --height-header ) + 20px )';`
change header shadow to an eased gradient 2021-02-04 03:40:35 +00:00			`/*`
			`* ease(x) := 1 - pow(1 - x, 2);`
			`*/`
refactor: clean up header background var 2021-02-04 15:38:29 +00:00			background-image: linear-gradient( to bottom, ~'rgba( var( --background-color-dp-00--rgb ), 1 )' 0%, ~'rgba( var( --background-color-dp-00--rgb ), 0.988 )' 11.11%, ~'rgba( var( --background-color-dp-00--rgb ), 0.951 )' 22.22%, ~'rgba( var( --background-color-dp-00--rgb ), 0.889 )' 33.33%, ~'rgba( var( --background-color-dp-00--rgb ), 0.802 )' 44.44%, ~'rgba( var( --background-color-dp-00--rgb ), 0.691 )' 55.56%, ~'rgba( var( --background-color-dp-00--rgb ), 0.556 )' 66.67%, ~'rgba( var( --background-color-dp-00--rgb ), 0.395 )' 77.78%, ~'rgba( var( --background-color-dp-00--rgb ), 0.210 )' 88.89%, ~'rgba( var( --background-color-dp-00--rgb ), 0 )' 100% );
refactor: clean up header structure and styles 2021-01-16 00:56:59 +00:00			`content: '';`
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00			`}`
			`}`

			`// User icon bar`
			`#p-personal-extra {`
			`ul {`
			`display: flex;`
refactor: clean up header structure and styles 2021-01-16 00:56:59 +00:00			`height: var( --height-header );`
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00			`align-items: center;`
			`}`
			`}`