StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-18 03:41:50 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Citizen/resources/skins.citizen.styles/Header.less

78 lines
1.6 KiB
Plaintext
Raw Normal View History

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 {
feat: improve header button behavior
2021-05-04 17:27:47 +00:00
--margin-header-item: @margin-header-item;
--margin-header-item--corner: ~'calc( var( --padding-page ) / 2 )';
--padding-header-icon: ~'calc( ( var( --height-header ) - var( --size-icon ) - var( --margin-header-item ) * 2 ) / 2 )';
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
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;
feat: use mask-image instead of box-shadow for header background This will allow header fade background blending with color-surface-0, regardless of what color it is set to
2021-08-26 03:56:53 +00:00
top: 0;
Github CI lint - eslint/stylelint
2020-06-07 05:31:34 +00:00
right: 0;
feat: use mask-image instead of box-shadow for header background This will allow header fade background blending with color-surface-0, regardless of what color it is set to
2021-08-26 03:56:53 +00:00
bottom: ~'calc( var( --height-header ) / -2 )';
refactor: order styles with idiomatic order
2021-01-11 16:45:52 +00:00
left: 0;
feat: use mask-image instead of box-shadow for header background This will allow header fade background blending with color-surface-0, regardless of what color it is set to
2021-08-26 03:56:53 +00:00
background: var( --color-surface-0 );
refactor: clean up header structure and styles
2021-01-16 00:56:59 +00:00
content: '';
feat: use mask-image instead of box-shadow for header background This will allow header fade background blending with color-surface-0, regardless of what color it is set to
2021-08-26 03:56:53 +00:00
-webkit-mask-image: linear-gradient( 180deg, #000, transparent );
ci: lint code to MediaWiki standards Check commit and GitHub actions for more details
2021-08-26 03:58:36 +00:00
mask-image: linear-gradient( 180deg, #000, transparent );
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
}
feat: improve header button behavior
2021-05-04 17:27:47 +00:00
&-button {
width: var( --size-icon );
height: var( --size-icon );
padding: var( --padding-header-icon );
margin-top: var( --margin-header-item );
margin-bottom: var( --margin-header-item );
feat: unify header button highlight hover state (#363)
2021-05-10 16:00:04 +00:00
background-color: transparent;
feat: convert border radius to CSS variable
2021-05-27 14:35:21 +00:00
border-radius: var( --border-radius--small );
fix: inconsistent cursor in header button
2021-05-17 22:58:12 +00:00
cursor: pointer;
feat: improve header button behavior
2021-05-04 17:27:47 +00:00
&:active {
// Override hover style
background-color: var( --background-color-quiet--active ) !important;
}
}
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
}
feat: implement reading preferences allow visitor to adjust theme, font size, and page width
2021-04-27 16:57:54 +00:00
#mw-header-tools {
display: inherit;
}
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;
}
}
feat: improve header button behavior
2021-05-04 17:27:47 +00:00
@media ( hover: hover ) {
.mw-header-button:hover {
background-color: var( --background-color-quiet--hover );
}
}
Reference in a new issue Copy permalink