mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-01 17:36:49 +00:00
Initial styles for the logo
This commit is contained in:
alistair3149
parent
2d39c93bc7
commit
dab3cb690f
|
|
@ -8,53 +8,53 @@
|
|||
*/
|
||||
|
||||
.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;
|
||||
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;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Hide header when scroll
|
||||
&.nav-up {
|
||||
transform: translate( 0, -@header-height );
|
||||
}
|
||||
// Hide header when scroll
|
||||
&.nav-up {
|
||||
transform: translate(0, -@header-height );
|
||||
}
|
||||
|
||||
.mw-header-icons {
|
||||
display: inherit;
|
||||
}
|
||||
.mw-header-icons {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.mw-header-end {
|
||||
width: @icon-box-size + @margin-side + @icon-padding;
|
||||
height: @header-height;
|
||||
user-select: none;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -62,280 +62,296 @@
|
|||
* Modified from https://codepen.io/erikterwan/pen/EVzeRP and https://codepen.io/oxla/pen/zgvqmM
|
||||
*/
|
||||
.mw-header-menu {
|
||||
input {
|
||||
&:checked {
|
||||
input {
|
||||
&:checked {
|
||||
|
||||
// Show drawer
|
||||
~ .mw-header-menu-drawer {
|
||||
transform: none;
|
||||
will-change: unset;
|
||||
}
|
||||
// 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 );
|
||||
// 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 );
|
||||
}
|
||||
// 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 );
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
// Hover state
|
||||
&:hover~.mw-header-menu-toggle>span {
|
||||
opacity: @opacity-icon-active;
|
||||
|
||||
&:first-child {
|
||||
transform: translate( -50%, 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
&: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;
|
||||
&-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, @transition-background-quick, @transition-opacity;
|
||||
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, @transition-background-quick, @transition-opacity;
|
||||
|
||||
&:first-child {
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
&:first-child {
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
&:nth-last-child( 2 ) {
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&: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
|
||||
&-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;
|
||||
&-container {
|
||||
height:~'calc(100vh - @{header-height})';
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: @transition-height;
|
||||
|
||||
.mw-wiki-title {
|
||||
padding: @margin-side;
|
||||
}
|
||||
.mw-header-banner {
|
||||
padding: 0 @margin-side @margin-side @margin-side;
|
||||
border-bottom: 1px solid @base-80;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mw-nav-links {
|
||||
padding-bottom: @margin-side / 2;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
flex-grow: 1;
|
||||
.mw-wiki-logo {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
#p-navigation-label {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
}
|
||||
.mw-wiki-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-user-links {
|
||||
#p-personal {
|
||||
padding-top: @margin-side / 2;
|
||||
border-top: 1px solid @base-80;
|
||||
.mw-nav-links {
|
||||
padding: @margin-side / 2 0;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
flex-grow: 1;
|
||||
|
||||
h3 {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
#p-navigation-label {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
}
|
||||
|
||||
#pt-userpage {
|
||||
margin-bottom: @margin-side / 2;
|
||||
.mw-user-links {
|
||||
#p-personal {
|
||||
padding-top: @margin-side / 2;
|
||||
border-top: 1px solid @base-80;
|
||||
|
||||
a {
|
||||
justify-content: unset;
|
||||
h3 {
|
||||
.mixin-screen-reader-text;
|
||||
}
|
||||
|
||||
&:after {
|
||||
margin: 0;
|
||||
width: @icon-box-size;
|
||||
height: @icon-box-size;
|
||||
}
|
||||
}
|
||||
#pt-userpage {
|
||||
margin-bottom: @margin-side / 2;
|
||||
|
||||
span {
|
||||
order: 2;
|
||||
padding-left: @margin-side;
|
||||
}
|
||||
}
|
||||
a {
|
||||
justify-content: unset;
|
||||
|
||||
#pt-login {
|
||||
a {
|
||||
.button-blue;
|
||||
&:after {
|
||||
margin: 0;
|
||||
width: @icon-box-size;
|
||||
height: @icon-box-size;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-blue-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
order: 2;
|
||||
padding-left: @margin-side;
|
||||
}
|
||||
}
|
||||
|
||||
#pt-logout {
|
||||
a {
|
||||
.button-red;
|
||||
#pt-login {
|
||||
a {
|
||||
.button-blue;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-red-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-blue-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;
|
||||
#pt-logout {
|
||||
a {
|
||||
.button-red;
|
||||
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
margin-left: @icon-padding;
|
||||
opacity: 0.4;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
transition: @transition-opacity-quick;
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-red-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
.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 {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
margin-left: @icon-padding;
|
||||
opacity: 0.4;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
transition: @transition-opacity-quick;
|
||||
}
|
||||
|
||||
&:active {
|
||||
.menu-item-link-active;
|
||||
}
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
|
||||
&:focus {
|
||||
.menu-item-link-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
&:active {
|
||||
.menu-item-link-active;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&: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;
|
||||
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;
|
||||
}
|
||||
.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-sidebar-sitename {
|
||||
transform: translateY(-@header-height + @margin-side ) translateX(-100%) rotate(-90deg);
|
||||
}
|
||||
|
||||
.mw-header-menu-drawer-container {
|
||||
height: 100vh;
|
||||
}
|
||||
.mw-header-menu-drawer-container {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
@media only screen and (max-width: @mw-sidebar-sitename-max-width ) {
|
||||
.mw-sidebar-sitename {
|
||||
z-index: -1; // remove link
|
||||
opacity: 0; // hide visual
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: @screen2 ) {
|
||||
.mw-header-container {
|
||||
background: @base-100;
|
||||
@media only screen and (max-width: @screen2 ) {
|
||||
.mw-header-container {
|
||||
background: @base-100;
|
||||
|
||||
&.nav-down {
|
||||
border-bottom: 1px solid @base-80;
|
||||
.boxshadow(2);
|
||||
}
|
||||
&.nav-down {
|
||||
border-bottom: 1px solid @base-80;
|
||||
.boxshadow(2);
|
||||
}
|
||||
|
||||
&.nav-up {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&.nav-up {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* User icon bar
|
||||
*/
|
||||
#p-personal-extra {
|
||||
ul {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
ul {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -344,23 +360,23 @@
|
|||
#feedlinks,
|
||||
#pt-anontalk,
|
||||
#pt-anoncontribs {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// RTL tweaks
|
||||
.rtl {
|
||||
.mw-sidebar-sitename {
|
||||
left: unset;
|
||||
right: @margin-side;
|
||||
transform: translateY( 0 ) rotate( 90deg );
|
||||
transform-origin: top right;
|
||||
}
|
||||
.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 );
|
||||
}
|
||||
.nav-up~.mw-sidebar-sitename {
|
||||
transform: translateY(@header-height - @margin-side ) rotate(90deg);
|
||||
}
|
||||
|
||||
.mw-header-menu-drawer {
|
||||
transform: translate( 100%, 0 );
|
||||
}
|
||||
}
|
||||
.mw-header-menu-drawer {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue