mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-18 19:55:59 +00:00
422 lines
7.5 KiB
Plaintext
422 lines
7.5 KiB
Plaintext
/*
|
|
* Citizen - Navigation Styles
|
|
* https://starcitizen.tools
|
|
*/
|
|
|
|
/*
|
|
* Header
|
|
*/
|
|
|
|
.mw-header-container {
|
|
position: fixed;
|
|
z-index: 10;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: @header-height;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: @fonts-secondary;
|
|
transition: @transition-transform;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
box-shadow: 0 0 50px @header-height rgba( 255, 255, 255, 1 );
|
|
z-index: -1;
|
|
transition: @transition-box-shadow;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
|
|
// Hide header when scroll
|
|
&.nav-up {
|
|
transform: translate( 0, -@header-height );
|
|
|
|
&:before {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.mw-header-icons {
|
|
display: inherit;
|
|
}
|
|
|
|
.mw-header-end {
|
|
width: @icon-box-size + @margin-side + @icon-padding;
|
|
height: @header-height;
|
|
user-select: none;
|
|
|
|
// Input button hack
|
|
> input {
|
|
width: inherit;
|
|
height: inherit;
|
|
position: absolute;
|
|
z-index: 8;
|
|
margin: 0;
|
|
display: block;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Hamburger menu
|
|
* Modified from https://codepen.io/erikterwan/pen/EVzeRP and https://codepen.io/oxla/pen/zgvqmM
|
|
*/
|
|
.mw-header-menu {
|
|
input {
|
|
&:checked {
|
|
|
|
// Show drawer
|
|
~ .mw-header-menu-drawer {
|
|
transform: none;
|
|
will-change: unset;
|
|
}
|
|
|
|
// Transform all the slices of hamburger into a crossmark
|
|
~ .mw-header-menu-toggle > span {
|
|
opacity: @opacity-icon;
|
|
transform: rotate( 45deg ) translate( -5px, -7px );
|
|
|
|
// Reflect line
|
|
&:nth-last-child( 2 ) {
|
|
transform: rotate( -45deg ) translate( -2px, 6px );
|
|
}
|
|
|
|
// Hide line
|
|
&:nth-last-child( 3 ) {
|
|
opacity: 0;
|
|
transform: rotate( 0deg ) scale( 0.2, 0.2 );
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hover state
|
|
&:hover ~ .mw-header-menu-toggle > span {
|
|
opacity: @opacity-icon-active;
|
|
|
|
&:first-child {
|
|
transform: translate( -50%, 0 );
|
|
}
|
|
}
|
|
}
|
|
|
|
&-toggle {
|
|
width: @icon-size;
|
|
height: @icon-size;
|
|
margin: (@header-height - @icon-size) / 2 @icon-padding (@header-height - @icon-size) / 2 (@icon-margin * 2 + @margin-side * 2) / 2;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
span {
|
|
z-index: 5;
|
|
margin: 1.5px 0;
|
|
width: @icon-size;
|
|
height: 2px;
|
|
display: block;
|
|
background: @base-0;
|
|
opacity: @opacity-icon;
|
|
transform-origin: 4px 0;
|
|
transition: @transition-transform-quick, @transition-background-quick, @transition-opacity-quick;
|
|
|
|
&:first-child {
|
|
transform-origin: 0% 0%;
|
|
}
|
|
|
|
&:nth-last-child( 2 ) {
|
|
transform-origin: 0% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-drawer {
|
|
position: fixed;
|
|
z-index: 4;
|
|
top: 0;
|
|
padding-top: @header-height;
|
|
width: @drawer-width;
|
|
max-width: 100vw; // In case if someone has super small screen
|
|
height: 100vh;
|
|
.boxshadow(3);
|
|
background: @menu-background;
|
|
transform-origin: 0% 0%;
|
|
transform: translate( -110%, 0 ); // Shadow bleeding with 100%
|
|
transition: @transition-transform;
|
|
will-change: transform; // Help with performance
|
|
|
|
&-container {
|
|
height: ~'calc(100vh - @{header-height})';
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
transition: @transition-height;
|
|
|
|
.mw-header-banner {
|
|
padding: 0 @margin-side @margin-side / 2 @margin-side;
|
|
border-bottom: 1px solid @base-80;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.mw-wiki-logo {
|
|
margin-bottom: @margin-side / 2;
|
|
width: 120px;
|
|
height: 120px;
|
|
display: block;
|
|
background-position: left center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
transition: @transition-height;
|
|
will-change: height;
|
|
}
|
|
|
|
.mw-wiki-title {
|
|
opacity: 0;
|
|
height: 0;
|
|
transition: @transition-height, @transition-opacity;
|
|
}
|
|
}
|
|
|
|
.mw-nav-links {
|
|
padding: @margin-side / 2 0;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
flex-grow: 1;
|
|
|
|
#p-navigation-label {
|
|
.mixin-screen-reader-text;
|
|
}
|
|
}
|
|
|
|
.mw-user-links {
|
|
#p-personal {
|
|
padding-top: @margin-side / 2;
|
|
border-top: 1px solid @base-80;
|
|
|
|
h3 {
|
|
.mixin-screen-reader-text;
|
|
}
|
|
|
|
#pt-userpage {
|
|
margin-bottom: @margin-side / 2;
|
|
|
|
a {
|
|
justify-content: unset;
|
|
|
|
&:after {
|
|
margin: 0;
|
|
width: @icon-box-size;
|
|
height: @icon-box-size;
|
|
}
|
|
}
|
|
|
|
span {
|
|
order: 2;
|
|
padding-left: @margin-side;
|
|
}
|
|
}
|
|
|
|
#pt-login {
|
|
a {
|
|
.button-blue;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
.button-blue-active;
|
|
}
|
|
}
|
|
}
|
|
|
|
#pt-logout {
|
|
a {
|
|
.button-red;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
.button-red-active;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-nav-links,
|
|
.mw-user-links {
|
|
a {
|
|
.menu-item-link;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: @padding-menu-item-big;
|
|
font-size: @ui-menu-text-big;
|
|
font-family: @fonts;
|
|
|
|
&:after {
|
|
.resource-loader-list-icon;
|
|
margin-left: @icon-padding;
|
|
opacity: 0.4;
|
|
display: block;
|
|
background-size: contain;
|
|
transition: @transition-opacity-quick;
|
|
}
|
|
|
|
&:hover {
|
|
.menu-item-link-hover;
|
|
|
|
&:after {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
.menu-item-link-active;
|
|
}
|
|
|
|
&:focus {
|
|
.menu-item-link-focus;
|
|
}
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
margin: @margin-side / 2 0 0 0;
|
|
padding: @margin-side / 2 @margin-side;
|
|
color: @color-item-header;
|
|
font-size: @ui-menu-header;
|
|
font-weight: normal;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sidebar site title
|
|
.mw-sidebar-sitename {
|
|
position: fixed;
|
|
visibility: visible;
|
|
top: @header-height;
|
|
left: @margin-side;
|
|
font-size: 11px;
|
|
transform: translateY( 100% ) translateX( -100% ) rotate( -90deg );
|
|
transform-origin: top right;
|
|
transition: @transition-transform, @transition-opacity;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
|
|
.mw-wiki-title {
|
|
letter-spacing: 4px;
|
|
}
|
|
}
|
|
|
|
// Nav up stuff
|
|
.nav-up {
|
|
~ .mw-sidebar-sitename {
|
|
transform: translateY( -@header-height + @margin-side ) translateX( -100% ) rotate( -90deg );
|
|
}
|
|
|
|
.mw-header-menu-drawer-container {
|
|
height: 100vh;
|
|
|
|
.mw-header-banner {
|
|
border-color: transparent;
|
|
|
|
.mw-wiki-logo {
|
|
margin: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.mw-wiki-title {
|
|
margin-top: 20px;
|
|
height: auto;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Only show title when screen height is less than 800px
|
|
@media only screen and ( max-height: 800px ) {
|
|
.mw-header-menu-drawer-container {
|
|
.mw-header-banner {
|
|
border-color: transparent;
|
|
|
|
.mw-wiki-logo {
|
|
margin: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.mw-wiki-title {
|
|
margin-top: 20px;
|
|
height: auto;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bypass calculation
|
|
@mw-sidebar-sitename-max-width: @margin-side * 5 + @page-width;
|
|
|
|
@media only screen and ( max-width: @mw-sidebar-sitename-max-width ) {
|
|
.mw-sidebar-sitename {
|
|
z-index: -1; // remove link
|
|
opacity: 0; // hide visual
|
|
}
|
|
}
|
|
|
|
/*
|
|
* User icon bar
|
|
*/
|
|
#p-personal-extra {
|
|
ul {
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Hide stuff
|
|
*/
|
|
#feedlinks,
|
|
#pt-anontalk,
|
|
#pt-anoncontribs {
|
|
display: none;
|
|
}
|
|
|
|
// RTL tweaks
|
|
.rtl {
|
|
.mw-sidebar-sitename {
|
|
left: unset;
|
|
right: @margin-side;
|
|
transform: translateY( 0 ) rotate( 90deg );
|
|
transform-origin: top right;
|
|
}
|
|
|
|
.nav-up ~ .mw-sidebar-sitename {
|
|
transform: translateY( @header-height - @margin-side ) rotate( 90deg );
|
|
}
|
|
|
|
.mw-header-menu-drawer {
|
|
transform: translate( 100%, 0 );
|
|
}
|
|
}
|