StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-09-23 18:28:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve header button behavior

Browse source
This commit is contained in:
alistair3149 2021-05-04 13:27:47 -04:00
parent 9a610b8485
commit 06e91bb42d
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
10 changed files with 56 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/skins.citizen.preferences/skins.citizen.preferences.js
View file

@ -273,6 +273,7 @@ function initPref( window ) {
mw.loader.load( 'skins.citizen.icons.preferences' );
container.id = 'citizen-pref';
container.classList.add( 'mw-header-button' );
button.id = 'citizen-pref-toggle';
button.setAttribute( 'aria-controls', 'citizen-pref-panel' );
button.setAttribute( 'aria-expanded', false );

19
resources/skins.citizen.preferences/skins.citizen.preferences.less
View file

@ -3,9 +3,8 @@
#citizen-pref {
&-toggle {
width: var( --width-button-base );
height: var( --height-header );
padding: 0;
width: var( --size-icon );
height: var( --size-icon );
border: 0;
appearance: none;
background-color: transparent;
@ -15,13 +14,8 @@
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick, @transition-transform-quick;
&:hover {
opacity: var( --opacity-icon-base--hover );
transform: rotate3d( 0, 0, 1, 90deg );
}
&:active {
opacity: var( --opacity-icon-base--active );
opacity: var( --opacity-icon-base--active ) !important;
}
}
@ -184,3 +178,10 @@
}
}
}
@media ( hover: hover ) {
#citizen-pref:hover #citizen-pref-toggle {
opacity: var( --opacity-icon-base--hover );
transform: rotate3d( 0, 0, 1, 90deg );
}
}

11
resources/skins.citizen.styles/Drawer.less
View file

@ -47,8 +47,9 @@
&-button {
position: absolute;
z-index: 8;
width: var( --width-button-corner );
height: var( --height-header );
margin-right: var( --margin-header-item--corner );
// Need to align with page padding
margin-left: var( --margin-header-item--corner );
&-icon {
display: flex;
@ -57,8 +58,10 @@
height: var( --size-icon );
flex-direction: column;
flex-shrink: 0;
margin: ~'calc( ( var( --height-header ) - var( --size-icon ) ) / 2 ) var( --padding-page )';
place-content: center;
align-items: center;
justify-content: center;
// Don't use padding as margin is needed to hide overflow
margin: ~'calc( var( --padding-header-icon ) + var( --margin-header-item ) )' var( --padding-page );
&-1 {
transform-origin: 0 0;

23
resources/skins.citizen.styles/Header.less
View file

@ -1,4 +1,7 @@
.mw-header {
--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 )';
--width-button-base: ~'calc(var(--size-icon) + var(--padding-page))';
--width-button-corner: ~'calc(var(--size-icon) + var(--padding-page) * 2)';
position: fixed;
@ -32,6 +35,20 @@
box-shadow: 0 0 ~'calc( var( --height-header ) - 15px )' var( --height-header ) var( --background-color-overlay );
content: '';
}
&-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 );
border-radius: @border-radius-small;
&:active {
// Override hover style
background-color: var( --background-color-quiet--active ) !important;
}
}
}
#mw-header-tools {
@ -46,3 +63,9 @@
align-items: center;
}
}
@media ( hover: hover ) {
.mw-header-button:hover {
background-color: var( --background-color-quiet--hover );
}
}

3
resources/skins.citizen.styles/Personalmenu.less
View file

@ -26,8 +26,7 @@
}
&-button {
width: var( --width-button-base );
height: var( --height-header );
font-size: 0; // Hide label text
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick;

6
resources/skins.citizen.styles/Searchbox.less
View file

@ -77,7 +77,7 @@
top: 0;
right: @margin-side / 2;
display: flex;
margin: 7px 0 8px; // 1px h3 screen reader
margin: var( --margin-header-item ) 0; // 1px h3 screen reader
border-radius: @border-radius-small;
pointer-events: none; // not clickable
transform: translateX( 120% );
@ -122,8 +122,8 @@
position: absolute;
z-index: 21; // override to be on top of the form
right: 0; // align checkbox with icon
width: ~'calc( var( --width-button-corner ) - 10px )';
height: var( --height-header );
margin-right: var( --margin-header-item--corner );
margin-left: var( --margin-header-item--corner );
&-icon {
position: relative;

11
resources/variables.less
View file

@ -97,7 +97,7 @@
@background-color-icon--hover: rgba( 0, 0, 0, 0.6 );
@background-color-icon--active: rgba( 0, 0, 0, 0.8 );
@background-color-quiet: transparent;
@background-color-quiet--hover: rgba( 0, 0, 0, 0.03 );
@background-color-quiet--hover: rgba( 0, 0, 0, 0.07 );
@background-color-quiet--active: rgba( 0, 0, 0, 0.05 );
@background-color-primary--hover: @color-accent90;
@ -138,6 +138,7 @@
/* == Box model properties == */
/* `--*size` variables are used for `*width` & `*height` properties. */
@size-icon: 20px;
// Not in the header section it is also used outside of header
@height-header: 56px;
@width-layout: @width-breakpoint-desktop - 2 * @padding-page;
@width-toc: @width-breakpoint-desktop-wide - @width-breakpoint-desktop;
@ -256,8 +257,8 @@
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.6 );
@dark-background-color-icon--active: rgba( 255, 255, 255, 0.2 );
// @dark-background-color-quiet: transparent;
@dark-background-color-quiet--hover: rgba( 255, 255, 255, 0.05 );
@dark-background-color-quiet--active: rgba( 255, 255, 255, 0.03 );
@dark-background-color-quiet--hover: rgba( 255, 255, 255, 0.07 );
@dark-background-color-quiet--active: rgba( 255, 255, 255, 0.05 );
@dark-background-color-primary--hover: @color-accent30;
@dark-background-color-primary--active: @color-accent-30--darken;
@ -303,6 +304,10 @@
@padding-menu-item: 10px 15px;
@padding-menu-item-big: 10px 20px;
/* Heade */
@margin-header-item: 8px;
/* Search bar */
@width-search-bar: 500px;
@height-search-bar: 42px;
@height-search-bar__progress-bar: 2px;

2
templates/Drawer.mustache
View file

@ -7,7 +7,7 @@
class="mw-checkbox-hack-checkbox">
<label
id="mw-drawer-button"
class="mw-checkbox-hack-button"
class="mw-checkbox-hack-button mw-header-button"
for="mw-drawer-checkbox"
role="button"
aria-controls="mw-drawer"

2
templates/PersonalMenu.mustache
View file

@ -7,7 +7,7 @@
class="mw-checkbox-hack-checkbox">
<label
id="personalmenu-button"
class="mw-checkbox-hack-button"
class="mw-checkbox-hack-button mw-header-button"
for="personalmenu-checkbox"
role="button"
title="{{msg-citizen-personalmenu-toggle}}"

2
templates/SearchBox.mustache
View file

@ -14,7 +14,7 @@
class="mw-checkbox-hack-checkbox">
<label
id="search-toggle"
class="mw-checkbox-hack-button"
class="mw-checkbox-hack-button mw-header-button"
for="search-checkbox"
role="button"
title="{{msg-citizen-search-toggle-shortcut}}"