StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-12-03 10:26:46 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Citizen/resources/skins.citizen.styles/Drawer.less

142 lines
2.6 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-drawer {
z-index: 102; // Higher than z-index-overlay from WMUI
refactor: clean up header structure and styles
2021-01-16 00:56:59 +00:00
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
&__card {
feat: move personal menu to header (#231) * fix: fix header background bleeding in VE * feat: move personal menu out of drawer to header * feat: update personal menu styles in smaller breakpoints * fix: fix typo in qqq documentation * ci: lint code to MediaWiki standards Check commit and GitHub actions for more details * feat: add title text to personal menu button Co-authored-by: github-actions <github-actions@users.noreply.github.com>
2021-01-19 20:56:42 +00:00
position: absolute;
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
top: 0;
left: 0;
overflow: auto;
max-height: ~'calc(100vh - var( --margin-header ) * 2 )';
margin: var( --margin-header ) var( --padding-header );
overscroll-behavior: contain;
user-select: none;
will-change: transform;
.citizen-card();
.citizen-card-hide( 0 0 );
// For transition purpose
> * {
opacity: 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(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
&__header {
feat: add drawer subsearch part 2
2021-02-03 20:47:32 +00:00
display: flex;
align-items: center;
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: var( --size-button--header ) var( --padding-page ) 0.8rem; // TODO: Replace with space token
feat: show article stats in menu on mobile viewport
2021-07-30 18:05:25 +00:00
border-bottom: 1px solid var( --border-color-base );
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
gap: 1.25rem;
refactor: clean up header structure and styles
2021-01-16 00:56:59 +00:00
}
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(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
// Keep aspect ratio
&__logo img {
width: auto;
height: 3rem;
feat: revamp drawer header * wgLogo is always visible in the drawer * Increase the size of wiki name * Sitestats will now format large numbers into human readable formats (e.g. 12.2K, 3M, etc.) * Sitestats now use icons instead of text as labels * Remove wordmark for now, will revisit later
2022-04-23 05:06:07 +00:00
}
feat: tweak header and drawer logo styles
2021-03-05 16:37:27 +00:00
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
&__siteinfo {
feat: revamp drawer header * wgLogo is always visible in the drawer * Increase the size of wiki name * Sitestats will now format large numbers into human readable formats (e.g. 12.2K, 3M, etc.) * Sitestats now use icons instead of text as labels * Remove wordmark for now, will revisit later
2022-04-23 05:06:07 +00:00
.mw-logo-wordmark {
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
margin-top: 0.375rem;
feat: revamp drawer header * wgLogo is always visible in the drawer * Increase the size of wiki name * Sitestats will now format large numbers into human readable formats (e.g. 12.2K, 3M, etc.) * Sitestats now use icons instead of text as labels * Remove wordmark for now, will revisit later
2022-04-23 05:06:07 +00:00
color: var( --color-base--emphasized );
font-size: 1.5rem;
feat: tweak header and drawer logo styles
2021-03-05 16:37:27 +00:00
}
}
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
&__menu {
feat: change menu into a modal instead of overlay
2021-07-30 17:48:57 +00:00
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
max-width: 92vw;
justify-content: center;
padding: 0.625rem 0.625rem 1.25rem 0.625rem; // TODO: Replace with space token
font-size: 0.875rem; // TODO: Make this a variable
gap: 0.625rem; // TODO: Replace with space token
grid-template-columns: repeat( auto-fit, 15rem );
refactor: clean up portal styles
2021-01-27 20:05:31 +00:00
refactor: clean up header structure and styles
2021-01-16 00:56:59 +00:00
a {
.menu-item-link;
align-items: center;
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.625rem 1.25rem; // TODO: Make this a variable
feat: convert border radius to CSS variable
2021-05-27 14:35:21 +00:00
border-radius: var( --border-radius--small );
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
gap: 1rem; // TODO: Replace with space token
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
&:after {
.resource-loader-list-icon;
display: block;
background-size: contain;
opacity: var( --opacity-icon-base );
refactor(core): clean up transition variable names
2022-05-01 23:14:17 +00:00
transition: @transition-opacity;
refactor: clean up header structure and styles
2021-01-16 00:56:59 +00:00
}
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
&:hover {
.menu-item-link-hover;
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
&:after {
opacity: var( --opacity-icon-base--hover );
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
}
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
&:active {
.menu-item-link-active;
feat: unify icon opacity and states
2021-01-14 17:20:15 +00:00
refactor: clean up header structure and styles
2021-01-16 00:56:59 +00:00
&:after {
opacity: var( --opacity-icon-base--active );
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(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
// Checkbox hack
#citizen-drawer__checkbox:checked {
refactor(core): move checkboxHack checkboxes into container
2022-05-10 15:15:34 +00:00
~ .citizen-drawer__card {
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-card-show;
feat: hide drawer subsearch when no js
2021-02-03 20:52:25 +00:00
}
}
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
// Wait for first paint before animating
fix: CSS animation flash on page load on Chromium
2021-03-13 17:43:28 +00:00
.citizen-animations-ready {
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-drawer__card {
refactor(core): turn card animation into a mixin
2022-05-02 01:23:37 +00:00
.citizen-card-transition();
fix: CSS animation flash on page load on Chromium
2021-03-13 17:43:28 +00:00
}
}
refactor: Convert colors to css variables
2021-01-09 21:56:28 +00:00
.skin-citizen-dark {
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
// Icons in nav links
.citizen-drawer__menu a:after {
feat: move personal menu to header (#231) * fix: fix header background bleeding in VE * feat: move personal menu out of drawer to header * feat: update personal menu styles in smaller breakpoints * fix: fix typo in qqq documentation * ci: lint code to MediaWiki standards Check commit and GitHub actions for more details * feat: add title text to personal menu button Co-authored-by: github-actions <github-actions@users.noreply.github.com>
2021-01-19 20:56:42 +00:00
filter: invert( 1 );
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
}
Github CI lint - eslint/stylelint
2020-06-07 05:31:34 +00:00
}
feat: convert drawer menu to overlay menu
2021-01-29 16:47:33 +00:00
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
@media ( max-width: @width-breakpoint-tablet ) {
.citizen-drawer {
&__card {
right: 0;
}
&__header {
justify-content: center;
feat: add RTL icons for drawer toggle and VE save button (#374) * Customize the drawer button for RTL language * Convert ">" to "<" for RTL language Co-authored-by: eshagh79 <eshagh094@gmail.com>
2021-05-07 02:36:34 +00:00
}
}
}
feat: change menu into a modal instead of overlay
2021-07-30 17:48:57 +00:00
@media ( min-width: @width-breakpoint-tablet ) {
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-drawer {
&__logo img {
// Bigger logo
height: 5rem;
feat: revamp drawer header * wgLogo is always visible in the drawer * Increase the size of wiki name * Sitestats will now format large numbers into human readable formats (e.g. 12.2K, 3M, etc.) * Sitestats now use icons instead of text as labels * Remove wordmark for now, will revisit later
2022-04-23 05:06:07 +00:00
}
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
&__siteinfo {
feat: revamp drawer header * wgLogo is always visible in the drawer * Increase the size of wiki name * Sitestats will now format large numbers into human readable formats (e.g. 12.2K, 3M, etc.) * Sitestats now use icons instead of text as labels * Remove wordmark for now, will revisit later
2022-04-23 05:06:07 +00:00
.mw-logo-wordmark {
font-size: 2rem;
}
}
fix: portal should be centered in single col layout
2021-02-20 20:23:59 +00:00
}
}
feat: convert drawer menu to overlay menu
2021-01-29 16:47:33 +00:00
@media ( min-width: @width-breakpoint-desktop-wide ) {
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-drawer__menu {
max-width: 1200px; // So that it doesn't span too wide
feat: convert drawer menu to overlay menu
2021-01-29 16:47:33 +00:00
}
}
Reference in a new issue Copy permalink