mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-02 18:06:21 +00:00
47e1259bc3
* Looks more natural * Can be customized through the surface-shadow and shadow-strength CSS var * Light mode and dark mode have been different shadow now, it should be more visible in dark mode * Box-shadow is a CSS var, which can be used in templates and wiki CSS
269 lines
5 KiB
Plaintext
269 lines
5 KiB
Plaintext
#mw-drawer {
|
|
position: fixed;
|
|
z-index: 4;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
overflow: auto;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: var( --margin-header-item ) var( --margin-header-item--corner );
|
|
overscroll-behavior: contain;
|
|
transform: translate3d( -110%, -110%, 0 );
|
|
transform-origin: 0 0;
|
|
user-select: none;
|
|
.citizen-card();
|
|
|
|
&-checkbox {
|
|
&:checked {
|
|
// Transform all the slices of the button into a crossmark
|
|
~ #mw-drawer-button-icon {
|
|
#mw-drawer-button-icon {
|
|
&-1 {
|
|
opacity: 0;
|
|
/* @noflip */
|
|
transform: rotate( 0deg ) scale( 0.2, 0.2 );
|
|
}
|
|
// Reflect line
|
|
&-2 {
|
|
/* @noflip */
|
|
transform: rotate( -45deg ) translate3d( -2px, 6px, 0 );
|
|
}
|
|
|
|
// Hide line
|
|
&-3 {
|
|
/* @noflip */
|
|
transform: rotate( 45deg ) translate3d( -5px, -7px, 0 );
|
|
}
|
|
}
|
|
}
|
|
|
|
// Show drawer
|
|
~ #mw-drawer {
|
|
transform: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-button {
|
|
position: absolute;
|
|
z-index: 8;
|
|
margin-right: var( --margin-header-item--corner );
|
|
// Need to align with page padding
|
|
margin-left: var( --margin-header-item--corner );
|
|
|
|
&-icon {
|
|
display: flex;
|
|
overflow: hidden;
|
|
width: var( --size-icon );
|
|
height: var( --size-icon );
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
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;
|
|
}
|
|
|
|
&-2 {
|
|
transform-origin: 0 100%;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
~ #mw-drawer-button-icon {
|
|
#mw-drawer-button-icon {
|
|
&-1 {
|
|
transform: translate3d( -50%, 0, 0 );
|
|
}
|
|
}
|
|
|
|
.mw-drawer-button-icon {
|
|
&-div {
|
|
background-color: var( --background-color-icon--hover );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
~ #mw-drawer-button-icon {
|
|
.mw-drawer-button-icon {
|
|
&-div {
|
|
background-color: var( --background-color-icon--active );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-header {
|
|
display: flex;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: ~'calc( var( --padding-page ) + 20px )' var( --padding-page ) 15px var( --padding-page );
|
|
border-bottom: 1px solid var( --border-color-base );
|
|
}
|
|
|
|
&-logo {
|
|
.mw-logo-icon {
|
|
width: auto;
|
|
height: 48px;
|
|
}
|
|
}
|
|
|
|
&-siteinfo {
|
|
margin: 0 20px;
|
|
|
|
.mw-logo-wordmark {
|
|
margin-top: 5px;
|
|
color: var( --color-base--emphasized );
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
&-search {
|
|
margin-top: 10px;
|
|
|
|
&-input {
|
|
width: 200px;
|
|
padding: 8px;
|
|
background: var( --color-surface-1 );
|
|
border-radius: var( --border-radius--small );
|
|
box-shadow: var( --box-shadow-card );
|
|
text-align: center;
|
|
transition: @transition-background-quick;
|
|
}
|
|
}
|
|
|
|
&-menu {
|
|
display: grid;
|
|
max-width: ~'calc( 100vw - var( --padding-page ) * 4 )';
|
|
padding: ~'calc( var(--padding-page) / 2 ) calc( var(--padding-page) / 2 ) var( --padding-page ) calc( var(--padding-page) / 2 )';
|
|
font-size: @ui-menu-text;
|
|
gap: ~'calc( var(--padding-page) / 4 )';
|
|
grid-template-columns: repeat( auto-fit, 240px );
|
|
|
|
a {
|
|
.menu-item-link;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: @padding-menu-item-big;
|
|
border-radius: var( --border-radius--small );
|
|
|
|
&:after {
|
|
.resource-loader-list-icon;
|
|
display: block;
|
|
margin-left: @icon-padding;
|
|
background-size: contain;
|
|
opacity: var( --opacity-icon-base );
|
|
transition: @transition-opacity-quick;
|
|
}
|
|
|
|
&:hover {
|
|
.menu-item-link-hover;
|
|
|
|
&:after {
|
|
opacity: var( --opacity-icon-base--hover );
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
.menu-item-link-active;
|
|
|
|
&:after {
|
|
opacity: var( --opacity-icon-base--active );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-drawer {
|
|
&-button {
|
|
&-icon {
|
|
&-div {
|
|
z-index: 5;
|
|
display: block;
|
|
width: @icon-size;
|
|
height: 2px;
|
|
margin: 1.5px 0;
|
|
background-color: var( --background-color-icon );
|
|
border-radius: var( --border-radius--large );
|
|
transform-origin: 4px 0;
|
|
transition: @transition-transform-quick, @transition-background-quick, @transition-opacity-quick;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.client-nojs {
|
|
#mw-drawer-search {
|
|
// Hide search when client has no JS
|
|
// Since the function does not work without script
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.citizen-animations-ready {
|
|
#mw-drawer {
|
|
transition: @transition-transform-quick;
|
|
}
|
|
}
|
|
|
|
.skin-citizen-dark {
|
|
#mw-drawer-menu a:after {
|
|
filter: invert( 1 );
|
|
}
|
|
}
|
|
|
|
// RTL
|
|
.rtl {
|
|
#mw-drawer-button:hover {
|
|
~ #mw-drawer-button-icon {
|
|
#mw-drawer-button-icon-1 {
|
|
transform: translate3d( 50%, 0, 0 );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @width-breakpoint-tablet ) {
|
|
#mw-drawer {
|
|
right: unset;
|
|
bottom: unset;
|
|
max-height: ~'calc(100vh - var(--margin-header-item) * 2 )';
|
|
align-items: flex-start;
|
|
|
|
&-header {
|
|
justify-content: left;
|
|
}
|
|
|
|
&-siteinfo {
|
|
.mw-logo-wordmark {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
&-logo {
|
|
.mw-logo-icon {
|
|
width: auto;
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
|
#mw-drawer-menu {
|
|
max-width: 1200px;
|
|
}
|
|
}
|