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

173 lines
3.2 KiB
Plaintext
Raw Normal View History

refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch
2022-05-10 00:23:42 +00:00
.citizen-header {
refactor(core): clean up unused LESS variables
2022-05-01 23:09:00 +00:00
--margin-header-item: 8px;
feat: improve header button behavior
2021-05-04 17:27:47 +00:00
--padding-header-icon: ~'calc( ( var( --height-header ) - var( --size-icon ) - var( --margin-header-item ) * 2 ) / 2 )';
refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch
2022-05-10 00:23:42 +00:00
--size-button--header: ~'calc( var( --height-header ) - 1rem )';
--size-icon--header: 1.25rem;
--margin-header: 0.5rem;
--padding-header: ~'calc( 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;
fix: lower header z-index to 4 The original z-index is way too high (10) and would overlap dialogs. It should be set to 4 (same as Vector 2022) to ensure compatiblity with OOUI elements. Closes #447
2022-04-30 17:50:49 +00:00
z-index: 4;
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
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;
refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch
2022-05-10 00:23:42 +00:00
padding: 0 var( --padding-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
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;
refactor(core): clean up inner header implementation This is a part of the header refactor * Add hover and active state for title button * Clean up DOM structure * Clean up unnessecary styles * Clean up HTML class names
2022-05-10 14:50:01 +00:00
z-index: -1;
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(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch
2022-05-10 00:23:42 +00:00
pointer-events: none;
}
&__item {
display: flex;
align-items: center;
}
&__button {
display: grid;
width: var( --size-button--header );
height: var( --size-button--header );
border-radius: var( --border-radius--small );
place-items: center;
// Used in checkbox hack
&Checkbox {
position: absolute;
display: block;
width: inherit;
height: inherit;
}
&Icon {
overflow: hidden; // Sometimes CSS animation can clip
width: var( --size-icon--header );
height: var( --size-icon--header );
}
&:hover {
background-color: var( --background-color-quiet--hover );
}
&:active {
background-color: var( --background-color-quiet--active );
}
}
refactor(core): clean up inner header implementation This is a part of the header refactor * Add hover and active state for title button * Clean up DOM structure * Clean up unnessecary styles * Clean up HTML class names
2022-05-10 14:50:01 +00:00
&__inner {
display: flex;
min-width: 0;
flex-grow: 1;
justify-content: space-between;
}
&__start,
&__end {
display: flex;
align-items: center;
}
&__start {
min-width: 0;
}
&__title {
display: flex;
min-width: 0;
height: var( --size-button--header );
align-items: center;
padding: 0 0.5rem;
border-radius: var( --border-radius--small );
color: var( --color-base--emphasized );
font-weight: 500;
white-space: nowrap;
> div {
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
background-color: var( --background-color-quiet--hover );
color: var( --color-base--emphasized );
}
&:active {
background-color: var( --background-color-quiet--active );
color: var( --color-base--emphasized );
}
&--page {
display: none;
}
}
}
.skin-citizen--titlehidden {
.citizen-header {
&__title {
&--site {
display: none;
}
&--page {
display: grid;
}
}
}
refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch
2022-05-10 00:23:42 +00:00
}
.mw-header {
ul {
list-style: none;
}
ul,
li {
display: block;
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
}
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
}
// 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