mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-28 00:01:05 +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
This commit is contained in:
alistair3149
parent
09116cd568
commit
72b41df5ce
|
|
@ -11,8 +11,8 @@
|
|||
"citizen.css": "/* All CSS here will be loaded for users of the Citizen skin */",
|
||||
"citizen.js": "/* All JavaScript here will be loaded for users of the Citizen skin */",
|
||||
|
||||
"citizen-header-menu-toggle": "Toggle menu",
|
||||
"citizen-header-search-toggle": "Toggle search",
|
||||
"citizen-drawer-toggle": "Toggle menu",
|
||||
"citizen-search-toggle": "Toggle search",
|
||||
|
||||
"citizen-footer-desc": "Edit this text on MediaWiki:Citizen-footer-desc",
|
||||
"citizen-footer-tagline": "Edit this text on MediaWiki:Citizen-footer-tagline",
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
"citizen.css": "{{optional}}",
|
||||
"citizen.js": "{{optional}}",
|
||||
|
||||
"citizen-header-menu-toggle": "Tooltip of menu toggle in header",
|
||||
"citizen-header-search-toggle": "Tooltip of search toggle in header",
|
||||
"citizen-drawer-toggle": "Tooltip of drawer menu toggle",
|
||||
"citizen-search-toggle": "Tooltip of search box toggle",
|
||||
|
||||
"citizen-footer-desc": "Edit this text on MediaWiki:Citizen-footer-desc",
|
||||
"citizen-footer-tagline": "Edit this text on MediaWiki:Citizen-footer-tagline",
|
||||
|
|
|
|||
|
|
@ -42,9 +42,7 @@ class CitizenTemplate extends BaseTemplate {
|
|||
),
|
||||
|
||||
'data-header' => [
|
||||
'msg-citizen-header-menu-toggle' => $this->getMsg( 'citizen-header-menu-toggle' )->text(),
|
||||
'data-menu' => $this->buildMenu(),
|
||||
'msg-citizen-header-search-toggle' => $this->getMsg( 'citizen-header-search-toggle' )->text(),
|
||||
'data-drawer' => $this->buildDrawer(),
|
||||
'data-extratools' => $this->getExtraTools(),
|
||||
'data-searchbox' => $this->buildSearchbox(),
|
||||
],
|
||||
|
|
@ -107,11 +105,11 @@ class CitizenTemplate extends BaseTemplate {
|
|||
}
|
||||
|
||||
/**
|
||||
* Render the navigation menu
|
||||
* Render the navigation drawer
|
||||
* Based on Vector (be3843e)
|
||||
* @return array
|
||||
*/
|
||||
private function buildMenu() : array {
|
||||
private function buildDrawer() : array {
|
||||
$skin = $this->getSkin();
|
||||
$portals = $skin->buildSidebar();
|
||||
$props = [];
|
||||
|
|
@ -196,6 +194,7 @@ class CitizenTemplate extends BaseTemplate {
|
|||
$personalToolsPortal[ 'label-class' ] .= 'screen-reader-text';
|
||||
|
||||
return [
|
||||
'msg-citizen-drawer-toggle' => $this->getMsg( 'citizen-drawer-toggle' )->text(),
|
||||
'data-logo' => $this->buildLogo(),
|
||||
'data-portals-first' => $firstPortal,
|
||||
'array-portals-rest' => array_slice( $props, 1 ),
|
||||
|
|
@ -256,6 +255,7 @@ class CitizenTemplate extends BaseTemplate {
|
|||
private function buildSearchbox() : array {
|
||||
$config = $this->config;
|
||||
$props = [
|
||||
'msg-citizen-search-toggle' => $this->getMsg( 'citizen-search-toggle' )->text(),
|
||||
'form-action' => $config->get( 'Script' ),
|
||||
'html-input' => $this->makeSearchInput( [ 'id' => 'searchInput' ] ),
|
||||
'html-button-search' => $this->makeSearchButton(
|
||||
|
|
|
|||
34
includes/templates/Drawer.mustache
Normal file
34
includes/templates/Drawer.mustache
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
{{!
|
||||
string msg-citizen-drawer-toggle The label used by the drawer button.
|
||||
}}
|
||||
<input
|
||||
type="checkbox"
|
||||
id="mw-drawer-button"
|
||||
class="mw-checkbox-hack"
|
||||
role="button"
|
||||
title="{{msg-citizen-drawer-toggle}}"
|
||||
aria-labelledby="mw-drawer-button-label"
|
||||
aria-controls="mw-drawer">
|
||||
<label
|
||||
id="mw-drawer-button-label"
|
||||
class="screen-reader-text"
|
||||
for="mw-drawer-button">
|
||||
{{msg-citizen-drawer-toggle}}
|
||||
</label>
|
||||
<div id="mw-drawer-button-icon">
|
||||
<div id="mw-drawer-button-icon-1" class="mw-drawer-button-icon-div"></div>
|
||||
<div id="mw-drawer-button-icon-2" class="mw-drawer-button-icon-div"></div>
|
||||
<div id="mw-drawer-button-icon-3" class="mw-drawer-button-icon-div"></div>
|
||||
</div>
|
||||
<nav id="mw-drawer-menu">
|
||||
<section id="mw-drawer-menu-logo" role="banner">
|
||||
{{#data-logo}}{{>Logo}}{{/data-logo}}
|
||||
</section>
|
||||
<section id="mw-drawer-menu-main">
|
||||
{{#data-portals-first}}{{>Menu}}{{/data-portals-first}}
|
||||
{{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}}
|
||||
</section>
|
||||
<section id="mw-drawer-menu-user" class="mw-user-links">
|
||||
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
|
||||
</section>
|
||||
</nav>
|
||||
|
|
@ -3,25 +3,10 @@
|
|||
string msg-citizen-header-search-toggle tooltip for search toggle
|
||||
}}
|
||||
<header class="mw-header">
|
||||
<div class="mw-header-menu mw-header-end">
|
||||
<input type="checkbox" role="button" title="{{msg-citizen-header-menu-toggle}}" />
|
||||
<div class="mw-header-menu-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
{{#data-menu}}{{>Menu}}{{/data-menu}}
|
||||
</div>
|
||||
<div class="mw-header-icons">
|
||||
<div id="user-icons">
|
||||
{{#data-extratools}}{{>Portal}}{{/data-extratools}}
|
||||
</div>
|
||||
<div class="mw-header-end" id="site-search">
|
||||
<input type="checkbox" role="button" title="{{msg-citizen-header-search-toggle}}" id="search-toggle" />
|
||||
<div id="search-toggle-icon-container">
|
||||
<div id="search-toggle-icon"></div>
|
||||
</div>
|
||||
{{#data-searchbox}}{{>Searchbox}}{{/data-searchbox}}
|
||||
</div>
|
||||
<div id="mw-header-background"></div>
|
||||
{{#data-drawer}}{{>Drawer}}{{/data-drawer}}
|
||||
<div class="mw-header-tools">
|
||||
{{#data-extratools}}{{>Menu}}{{/data-extratools}}
|
||||
{{#data-searchbox}}{{>Searchbox}}{{/data-searchbox}}
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -1,17 +1,9 @@
|
|||
{{!
|
||||
|
||||
}}
|
||||
<div class="mw-header-menu-drawer">
|
||||
<div class="mw-header-menu-drawer-container">
|
||||
<div class="mw-header-banner" role="banner">
|
||||
{{#data-logo}}{{>Logo}}{{/data-logo}}
|
||||
</div>
|
||||
<div class="mw-nav-links">
|
||||
{{#data-portals-first}}{{>Portal}}{{/data-portals-first}}
|
||||
{{#array-portals-rest}}{{>Portal}}{{/array-portals-rest}}
|
||||
</div>
|
||||
<div class="mw-user-links">
|
||||
{{#data-personal-menu}}{{>Portal}}{{/data-personal-menu}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="mw-portal{{#class}}{{.}}{{/class}}" id="{{id}}" aria-labelledby="{{label-id}}" {{{html-tooltip}}}
|
||||
{{{html-userlangattributes}}}>
|
||||
<h3 id="{{label-id}}"{{#label-class}} class="{{.}}"{{/label-class}}>{{label}}</h3>
|
||||
<ul>{{{html-items}}}</ul>
|
||||
{{{html-after-portal}}}
|
||||
</nav>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{{!
|
||||
|
||||
}}
|
||||
<nav class="mw-portal{{#class}}{{.}}{{/class}}" id="{{id}}" aria-labelledby="{{label-id}}" {{{html-tooltip}}}
|
||||
{{{html-userlangattributes}}}>
|
||||
<h3 id="{{label-id}}"{{#label-class}} class="{{.}}"{{/label-class}}>{{label}}</h3>
|
||||
<ul>{{{html-items}}}</ul>
|
||||
{{{html-after-portal}}}
|
||||
</nav>
|
||||
|
|
@ -5,6 +5,25 @@
|
|||
string html-input raw HTML containing the input box of the search box
|
||||
string html-button-search raw HTML containing the button of the search box
|
||||
}}
|
||||
<input
|
||||
type="checkbox"
|
||||
id="search-toggle"
|
||||
class="mw-checkbox-hack"
|
||||
role="button"
|
||||
title="{{msg-citizen-search-toggle}}"
|
||||
aria-labelledby="search-toggle-label"
|
||||
aria-controls="searchform">
|
||||
<label
|
||||
id="search-toggle-label"
|
||||
class="screen-reader-text"
|
||||
for="search-toggle">
|
||||
{{msg-citizen-search-toggle}}
|
||||
</label>
|
||||
<div id="search-toggle-icon">
|
||||
<div id="search-toggle-icon-1" class="search-toggle-icon-div"></div>
|
||||
<div id="search-toggle-icon-2" class="search-toggle-icon-div"></div>
|
||||
<div id="search-toggle-icon-3" class="search-toggle-icon-div"></div>
|
||||
</div>
|
||||
<form action="{{form-action}}" role="search" id="searchform">
|
||||
<input type="hidden" name="title" value="{{page-title}}">
|
||||
<label class="screen-reader-text" for="searchInput">{{msg-search}}</label>
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@
|
|||
{{{html-indicators}}}
|
||||
{{#data-pagetools}}
|
||||
<div class="mw-side" id="page-tools">
|
||||
{{#data-page-actions}}{{>Portal}}{{/data-page-actions}}
|
||||
{{#data-page-actions-more}}{{>Portal}}{{/data-page-actions-more}}
|
||||
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
|
||||
{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
|
||||
</div>
|
||||
{{/data-pagetools}}
|
||||
<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
|
||||
|
|
@ -53,8 +53,8 @@
|
|||
<div class="printfooter">{{{html-printfooter}}}</div>
|
||||
{{/html-printfooter}}
|
||||
{{#data-pagelinks}}
|
||||
{{#data-namespaces}}{{>Portal}}{{/data-namespaces}}
|
||||
{{#data-variants}}{{>Portal}}{{/data-variants}}
|
||||
{{#data-namespaces}}{{>Menu}}{{/data-namespaces}}
|
||||
{{#data-variants}}{{>Menu}}{{/data-variants}}
|
||||
{{/data-pagelinks}}
|
||||
{{{html-catlinks}}}
|
||||
{{{html-dataAfterContent}}}
|
||||
|
|
|
|||
323
resources/components/Drawer.less
Normal file
323
resources/components/Drawer.less
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
/*
|
||||
* Citizen - Drawer styles
|
||||
* https://starcitizen.tools
|
||||
*/
|
||||
|
||||
#mw-drawer {
|
||||
&-button {
|
||||
&-icon {
|
||||
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;
|
||||
|
||||
&-1 {
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
&-2 {
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
// Transform all the slices of the button into a crossmark
|
||||
~ #mw-drawer-button-icon {
|
||||
#mw-drawer-button-icon {
|
||||
&-1 {
|
||||
opacity: 0;
|
||||
transform: rotate( 0deg ) scale( 0.2, 0.2 );
|
||||
}
|
||||
// Reflect line
|
||||
&-2 {
|
||||
transform: rotate( -45deg ) translate( -2px, 6px );
|
||||
}
|
||||
|
||||
// Hide line
|
||||
&-3 {
|
||||
transform: rotate( 45deg ) translate( -5px, -7px );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-drawer-button-icon {
|
||||
&-div {
|
||||
opacity: @opacity-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show drawer
|
||||
~ #mw-drawer-menu {
|
||||
transform: none;
|
||||
will-change: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #mw-drawer-button-icon {
|
||||
#mw-drawer-button-icon {
|
||||
&-1 {
|
||||
transform: translate( -50%, 0 );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-drawer-button-icon {
|
||||
&-div {
|
||||
opacity: @opacity-icon-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
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: ~'calc(100vh - @{header-height})';
|
||||
.boxshadow(3);
|
||||
background: @menu-background;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform-origin: 0% 0%;
|
||||
transform: translate( -110%, 0 ); // shadow bleeding with 100%
|
||||
transition: @transition-transform;
|
||||
will-change: transform; // help with performance
|
||||
|
||||
&-logo {
|
||||
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;
|
||||
}
|
||||
|
||||
.mw-wiki-title {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
padding: @margin-side / 2 0;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
flex-grow: 1;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&-main,
|
||||
&-user {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-drawer {
|
||||
&-button {
|
||||
&-icon {
|
||||
&-div {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#p-personal {
|
||||
padding-top: @margin-side / 2;
|
||||
border-top: 1px solid @base-80;
|
||||
|
||||
#pt-userpage {
|
||||
margin-bottom: @margin-side / 2;
|
||||
|
||||
a {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
||||
&:after {
|
||||
margin: 0;
|
||||
margin-right: @margin-side;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only show title when screen height is less than 800px
|
||||
@media only screen and ( max-height: 800px ) {
|
||||
#mw-drawer-menu-logo {
|
||||
.mw-wiki-logo {
|
||||
margin: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.mw-wiki-title {
|
||||
margin-top: 20px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#mw-drawer {
|
||||
&-button {
|
||||
&:hover {
|
||||
~ #mw-drawer-button-icon {
|
||||
.mw-drawer-button-icon {
|
||||
&-div {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-menu {
|
||||
background: @dark-bg-40;
|
||||
|
||||
&-logo {
|
||||
border-color: @dark-bg-50;
|
||||
|
||||
.mw-wiki-title {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
h3 {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
}
|
||||
|
||||
&-main,
|
||||
&-user {
|
||||
a {
|
||||
color: @dark-text-80 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: @dark-bg-60;
|
||||
color: @dark-text-90 !important;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @dark-text-100 !important;
|
||||
background-color: @accent-10;
|
||||
}
|
||||
|
||||
&:after {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-drawer {
|
||||
&-button {
|
||||
&-icon {
|
||||
&-div {
|
||||
opacity: 0.4;
|
||||
background: @base-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#p-personal {
|
||||
border-color: @dark-bg-50;
|
||||
}
|
||||
}
|
||||
71
resources/components/Header.less
Normal file
71
resources/components/Header.less
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
* Citizen - Header styles
|
||||
* https://starcitizen.tools
|
||||
*/
|
||||
|
||||
.mw-header {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: @header-height;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: @fonts-secondary;
|
||||
|
||||
&-tools {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#mw-header {
|
||||
&-background {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 0 50px @header-height @header-background-color-light;
|
||||
z-index: -1;
|
||||
transition: @transition-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// User icon bar
|
||||
#p-personal-extra {
|
||||
ul {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// CSS checkbox hack
|
||||
// Technically shouldn't be here but it is only used in header
|
||||
.mw-checkbox-hack {
|
||||
width: @icon-box-size + @margin-side + @icon-padding;
|
||||
height: @header-height;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
margin: 0;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#mw-header {
|
||||
&-background {
|
||||
box-shadow: 0 0 50px @header-height @header-background-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
206
resources/components/Searchbox.less
Normal file
206
resources/components/Searchbox.less
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
//
|
||||
// Citizen - Searchbox styles
|
||||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
#search {
|
||||
&-toggle {
|
||||
right: 0; // align checkbox with icon
|
||||
|
||||
&-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: @icon-box-size + @margin-side + @icon-padding;
|
||||
height: @header-height;
|
||||
opacity: @opacity-icon;
|
||||
transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick;
|
||||
|
||||
&-1 {
|
||||
top: 7px;
|
||||
left: 12px;
|
||||
height: 10px;
|
||||
transform: rotate( -45deg );
|
||||
}
|
||||
|
||||
&-2 {
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: solid 2px @base-0;
|
||||
border-radius: 100%;
|
||||
transform: rotate( -45deg );
|
||||
}
|
||||
|
||||
&-3 {
|
||||
opacity: 0;
|
||||
top: 0px;
|
||||
left: -7px;
|
||||
height: 18px;
|
||||
transform: rotate( -135deg );
|
||||
}
|
||||
|
||||
&-1,
|
||||
&-3 {
|
||||
width: 2px;
|
||||
background-color: @base-0;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ #searchform {
|
||||
z-index: 10;
|
||||
opacity: 1;
|
||||
pointer-events: auto; // clickable
|
||||
|
||||
#searchInput {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
~ #search-toggle-icon {
|
||||
#search-toggle-icon {
|
||||
&-2 {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&-1 {
|
||||
height: 18px;
|
||||
transform: translate( -5px, -7px ) rotate(135deg);
|
||||
}
|
||||
|
||||
&-3 {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: @base-0;
|
||||
|
||||
#search-toggle-icon-3 {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #search-toggle-icon {
|
||||
#search-toggle-icon {
|
||||
&-1 {
|
||||
height: 12px;
|
||||
transform: translate(-5px,-7px) rotate(135deg);
|
||||
}
|
||||
|
||||
&-2 {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&-3 {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #search-toggle-icon {
|
||||
opacity: @opacity-icon-active;
|
||||
|
||||
#search-toggle-icon {
|
||||
&-1 {
|
||||
height: 6px;
|
||||
transform: translate(2px, 2px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&form {
|
||||
position: absolute;
|
||||
z-index: -1; // not interactable
|
||||
margin: 7px 0 8px; // 1px h3 screen reader
|
||||
display: flex;
|
||||
top: 0;
|
||||
right: @icon-box-size + @icon-padding * 2;
|
||||
opacity: 0;
|
||||
.boxshadow(4);
|
||||
transition: @transition-opacity;
|
||||
pointer-events: none; // not clickable
|
||||
}
|
||||
|
||||
&Input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 12px 15px;
|
||||
width: 0;
|
||||
height: 42px;
|
||||
max-width: calc( ~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
|
||||
border: 1px solid @base-90;
|
||||
transition: @transition-width, @transition-box-shadow;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
.boxshadow(5);
|
||||
}
|
||||
}
|
||||
|
||||
&Button {
|
||||
.button-blue;
|
||||
width: @icon-box-size + @icon-padding * 2;
|
||||
height: 42px;
|
||||
border: 0;
|
||||
cursor: pointer; //somehow it is not pointer
|
||||
|
||||
img {
|
||||
filter: invert( 1 );
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-blue-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
&-toggle-icon-div {
|
||||
position: relative;
|
||||
transition: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#search {
|
||||
&-toggle {
|
||||
&-icon {
|
||||
opacity: 0.4;
|
||||
|
||||
&-2 {
|
||||
border-color: @base-100;
|
||||
}
|
||||
|
||||
&-1,
|
||||
&-3 {
|
||||
background: @base-100;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #search-toggle-icon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&Input {
|
||||
border-color: @dark-bg-60;
|
||||
background: @dark-bg-50 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -989,9 +989,6 @@ a {
|
|||
background-color: @base-90;
|
||||
border-radius: 100%;
|
||||
.boxshadow(4);
|
||||
transform: translate( 0, @header-height + @margin-side );
|
||||
transition: @transition-opacity, @transition-transform, @transition-box-shadow-quick;
|
||||
transition-duration: 0.5s !important; // Override duration 0 for ToC
|
||||
|
||||
&:hover {
|
||||
background-color: @menu-item-link-hover;
|
||||
|
|
@ -1035,12 +1032,6 @@ a {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-up {
|
||||
~ .mw-body .mw-body-content #mw-content-text .mw-parser-output #toc .toctoggle a {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( min-width: @screen4 ) {
|
||||
|
|
|
|||
|
|
@ -68,24 +68,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mw-header-menu-drawer-container {
|
||||
.mw-nav-links,
|
||||
.mw-user-links {
|
||||
a {
|
||||
&:hover {
|
||||
background-color: @dark-bg-60;
|
||||
color: @dark-text-90 !important;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @dark-text-100 !important;
|
||||
background-color: @accent-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.wikitable tr:hover {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
|
|
@ -95,49 +77,25 @@
|
|||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
.mw-header-menu-drawer {
|
||||
background: @dark-bg-40;
|
||||
}
|
||||
|
||||
#page-tools #p-actions ul {
|
||||
background: @dark-bg-50;
|
||||
}
|
||||
|
||||
.suggestions-dropdown,
|
||||
#site-search #searchform #searchInput {
|
||||
.suggestions-dropdown {
|
||||
background: @dark-bg-50 !important;
|
||||
}
|
||||
|
||||
.mw-header-menu-drawer-container .mw-header-banner,
|
||||
.mw-header-menu-drawer-container .mw-user-links #p-personal {
|
||||
border-color: @dark-bg-50;
|
||||
}
|
||||
|
||||
.suggestion-link,
|
||||
#site-search #searchform #searchInput {
|
||||
.suggestion-link {
|
||||
border-color: @dark-bg-60;
|
||||
}
|
||||
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon,
|
||||
#site-search > input:checked:hover ~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-100;
|
||||
}
|
||||
|
||||
.mw-header-menu-toggle span,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon:before,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon:after {
|
||||
background: @base-100;
|
||||
}
|
||||
|
||||
.mw-body .firstHeading,
|
||||
.mw-body-content h1,
|
||||
.mw-body-content h2,
|
||||
.mw-body-content h3,
|
||||
.mw-body-content h4,
|
||||
.mw-body-content h5,
|
||||
.mw-body-content h6,
|
||||
.mw-header-menu .mw-wiki-title,
|
||||
.mw-header-menu-drawer-container h3 {
|
||||
.mw-body-content h6 {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
|
||||
|
|
@ -158,8 +116,6 @@
|
|||
.mw-body-content #contentSub2,
|
||||
.mw-body #siteSub,
|
||||
table.wikitable tr th,
|
||||
.mw-header-menu-drawer-container .mw-nav-links a,
|
||||
.mw-header-menu-drawer-container .mw-user-links a,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc a:hover,
|
||||
.suggestion-description {
|
||||
color: @dark-text-80 !important;
|
||||
|
|
@ -181,8 +137,6 @@
|
|||
|
||||
#page-tools #p-views li > a:after,
|
||||
#page-tools #p-actions:before,
|
||||
.mw-header-menu-drawer-container .mw-nav-links a:after,
|
||||
.mw-header-menu-drawer-container .mw-user-links a:after,
|
||||
.mw-editsection > a:before,
|
||||
#pt-notifications-alert .mw-echo-notifications-badge:before,
|
||||
#pt-notifications-notice .mw-echo-notifications-badge:before,
|
||||
|
|
@ -198,20 +152,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mw-header:before {
|
||||
box-shadow: 0 0 50px @header-height @dark-bg-0;
|
||||
}
|
||||
|
||||
.mw-header-menu-toggle span,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.mw-header-menu input:hover ~ .mw-header-menu-toggle > span,
|
||||
#site-search #search-toggle:hover ~ #search-toggle-icon-container #search-toggle-icon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
ol.references li:target,
|
||||
sup.reference:target {
|
||||
background-color: @accent-10;
|
||||
|
|
|
|||
|
|
@ -3,302 +3,6 @@
|
|||
* https://starcitizen.tools
|
||||
*/
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.mw-header {
|
||||
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;
|
||||
}
|
||||
|
||||
.mw-user-links {
|
||||
#p-personal {
|
||||
padding-top: @margin-side / 2;
|
||||
border-top: 1px solid @base-80;
|
||||
|
||||
#pt-userpage {
|
||||
margin-bottom: @margin-side / 2;
|
||||
|
||||
a {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
||||
&:after {
|
||||
margin: 0;
|
||||
margin-right: @margin-side;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar site title
|
||||
.mw-sidebar-sitename {
|
||||
position: fixed;
|
||||
|
|
@ -316,52 +20,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
|
|
@ -370,42 +28,4 @@
|
|||
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 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,159 +5,6 @@
|
|||
|
||||
@suggestion-max-width: 400px + @icon-box-size + @icon-padding * 2; // 454px
|
||||
|
||||
// TODO: Make it configurable and flexible
|
||||
#site-search {
|
||||
#searchform {
|
||||
position: absolute;
|
||||
z-index: -1; // Not interactable
|
||||
margin: 7px 0 8px; // 1px h3 screen reader
|
||||
display: flex;
|
||||
top: 0;
|
||||
right: @icon-box-size + @icon-padding * 2;
|
||||
opacity: 0;
|
||||
.boxshadow(4);
|
||||
transition: @transition-opacity;
|
||||
|
||||
// Search field
|
||||
#searchInput {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 12px 15px;
|
||||
width: 0;
|
||||
height: 42px;
|
||||
max-width: calc( ~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
|
||||
border: 1px solid @base-90;
|
||||
transition: @transition-width, @transition-box-shadow;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
.boxshadow(5);
|
||||
}
|
||||
}
|
||||
|
||||
// Search field button
|
||||
#searchButton {
|
||||
.button-blue;
|
||||
width: @icon-box-size + @icon-padding * 2;
|
||||
height: 42px;
|
||||
border: 0;
|
||||
cursor: pointer; //somehow it is not pointer
|
||||
|
||||
img {
|
||||
filter: invert( 1 );
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.button-blue-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search-toggle-icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: inherit;
|
||||
|
||||
#search-toggle-icon {
|
||||
opacity: @opacity-icon;
|
||||
position: absolute;
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: solid 2px @base-0;
|
||||
border-radius: 100%;
|
||||
transform: rotate( -45deg );
|
||||
transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background-color: @base-0;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 10px;
|
||||
left: 3px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
top: -1px;
|
||||
left: 4px;
|
||||
height: 18px;
|
||||
transform: rotate( -90deg );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search-toggle {
|
||||
&:checked {
|
||||
~ #searchform {
|
||||
z-index: 10;
|
||||
opacity: 1;
|
||||
|
||||
#searchInput {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: transparent;
|
||||
|
||||
&:before {
|
||||
height: 18px;
|
||||
transform: translate( 1px, -11px );
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-0;
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-0;
|
||||
|
||||
&:after {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #search-toggle-icon-container #search-toggle-icon {
|
||||
opacity: @opacity-icon-active;
|
||||
|
||||
&:before {
|
||||
height: 5px;
|
||||
transform: translate( 0, 5px );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#typeahead-suggestions {
|
||||
position: absolute;
|
||||
top: @header-height;
|
||||
|
|
|
|||
|
|
@ -12,3 +12,7 @@
|
|||
@import 'components/scrollbar.less';
|
||||
@import 'components/darkmode.less';
|
||||
@import 'components/reducemotion.less';
|
||||
|
||||
@import 'components/Header.less';
|
||||
@import 'components/Drawer.less';
|
||||
@import 'components/Searchbox.less';
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
/*
|
||||
* Scroll up Header
|
||||
* Modified from https://codepen.io/sajjad/pen/vgEZNy
|
||||
*/
|
||||
|
||||
( function () {
|
||||
// Hide header on scroll down
|
||||
var didScroll,
|
||||
lastScrollTop = 0,
|
||||
navbarHeight = 0,
|
||||
delta = 0,
|
||||
header = document.getElementsByTagName( 'header' )[ 0 ],
|
||||
headerContainer = document.querySelector( '.mw-header-container' );
|
||||
|
||||
if ( headerContainer !== null ) {
|
||||
navbarHeight = headerContainer.offsetHeight;
|
||||
}
|
||||
|
||||
window.addEventListener( 'scroll', function () {
|
||||
didScroll = true;
|
||||
} );
|
||||
|
||||
function hasScrolled() {
|
||||
var st = window.scrollY,
|
||||
body,
|
||||
html,
|
||||
documentHeight;
|
||||
|
||||
if ( Math.abs( lastScrollTop - st ) <= delta ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( st > lastScrollTop && st > navbarHeight ) {
|
||||
// If scrolled down and past the navbar, add class .nav-up.
|
||||
// Scroll Down
|
||||
header.classList.remove( 'nav-down' );
|
||||
header.classList.add( 'nav-up' );
|
||||
} else {
|
||||
// Scroll Up
|
||||
body = document.body;
|
||||
html = document.documentElement;
|
||||
documentHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
|
||||
|
||||
if ( st + window.innerHeight < documentHeight ) {
|
||||
header.classList.remove( 'nav-up' );
|
||||
header.classList.add( 'nav-down' );
|
||||
}
|
||||
}
|
||||
|
||||
lastScrollTop = st;
|
||||
}
|
||||
|
||||
setInterval( function () {
|
||||
if ( didScroll ) {
|
||||
hasScrolled();
|
||||
didScroll = false;
|
||||
}
|
||||
}, 250 );
|
||||
}() );
|
||||
|
|
@ -77,6 +77,9 @@
|
|||
// @color-link-visited-active: #886eb3;
|
||||
|
||||
// Citizen colors
|
||||
@header-background-color-light: @base-100;
|
||||
@header-background-color-dark: @dark-bg-0;
|
||||
|
||||
@color-footer-background-40: #0f1418;
|
||||
@color-footer-background-50: #131a21;
|
||||
@color-footer-background-60: #1a252d;
|
||||
|
|
|
|||
|
|
@ -202,7 +202,6 @@
|
|||
},
|
||||
"skins.citizen.scripts": {
|
||||
"scripts": [
|
||||
"resources/scripts/header.js",
|
||||
"resources/scripts/toc.js",
|
||||
"resources/scripts/searchfocus.js"
|
||||
]
|
||||
|
|
@ -331,7 +330,9 @@
|
|||
"mycontris": "resources/images/icons/contributions.svg",
|
||||
"logout": "resources/images/icons/logOut.svg",
|
||||
"createaccount": "resources/images/icons/userAvatar.svg",
|
||||
"login": "resources/images/icons/logOut.svg"
|
||||
"login": "resources/images/icons/logOut.svg",
|
||||
"anontalk": "resources/images/icons/userTalk.svg",
|
||||
"anoncontribs": "resources/images/icons/contributions.svg"
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.footer": {
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
|
||||
.ve-activated {
|
||||
.mw-header {
|
||||
background-color: #fff;
|
||||
background-color: @header-background-color-light;
|
||||
}
|
||||
|
||||
&:before {
|
||||
box-shadow: none;
|
||||
}
|
||||
#mw-header-background {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mw-sidebar-sitename {
|
||||
|
|
@ -84,8 +84,8 @@
|
|||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.ve-activated {
|
||||
.mw-header-container {
|
||||
background-color: @dark-bg-0;
|
||||
.mw-header {
|
||||
background-color: @header-background-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue