mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-16 02:54:06 +00:00
Merge pull request #118 from StarCitizenTools/dev
Improvements to header and search
This commit is contained in:
alistair3149
GitHub
commit
f2383bd061
|
|
@ -1,4 +1,4 @@
|
|||
# ES6 files
|
||||
resources/scripts/typeahead-init.js
|
||||
resources/scripts/underscore.partial.js
|
||||
resources/scripts/wm-typeahead.js
|
||||
resources/skins.citizen.scripts.search/typeahead-init.js
|
||||
resources/skins.citizen.scripts.search/underscore.partial.js
|
||||
resources/skins.citizen.scripts.search/wm-typeahead.js
|
||||
|
|
@ -25,6 +25,7 @@ wfLoadSkin( 'Citizen' );
|
|||
### Search suggestions
|
||||
Name | Description | Values | Default
|
||||
:--- | :--- | :--- | :---
|
||||
`$wgCitizenEnableSearch` | Enable or disable rich search suggestions |`true` - enable; `false` - disable | `true`
|
||||
`$wgCitizenSearchDescriptionSource` | Source of description text on search suggestions | `wikidata` - Use description provided by [WikibaseLib](Extension:WikibaseLib) or [ShortDescription](https://www.mediawiki.org/wiki/Extension:ShortDescription); `textextracts` - Use description provided by [TextExtracts](https://www.mediawiki.org/wiki/Extension:TextExtracts); `pagedescription` - Use description provided by [Description2](https://www.mediawiki.org/wiki/Extension:Description2) or any other extension that sets the `description` page property | `textextracts`
|
||||
`$wgCitizenMaxSearchResults` | Max number of search suggestions | Integer > 0 | `6`
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,5 @@
|
|||
"citizen-desc": "Ein responsive Skin entwickelt für das Star Citizen Wiki",
|
||||
|
||||
"citizen-footer-desc": "Bearbeiten Sie diesen Text auf MediaWiki:Citizen-footer-desc",
|
||||
"citizen-footer-tagline": "Bearbeiten Sie diesen Text auf MediaWiki:Citizen-footer-tagline",
|
||||
|
||||
"citizen-search-no-results-title": "Entschuldige, wir konnten zu <em>'$1'</em> nichts finden.",
|
||||
"citizen-search-no-results-desc": "Versuche weiter nach Seiten zu suchen, die <em>'$1'</em> enthalten."
|
||||
"citizen-footer-tagline": "Bearbeiten Sie diesen Text auf MediaWiki:Citizen-footer-tagline"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,11 @@
|
|||
"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",
|
||||
|
||||
"citizen-search-no-results-title": "Sorry we couldn't find '$1'",
|
||||
"citizen-search-no-results-desc": "Maybe continue to search for pages containing '$1'"
|
||||
"citizen-search-fulltext": "Search pages containing"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,11 @@
|
|||
"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",
|
||||
|
||||
"citizen-search-no-results-title": "Title of the message displayed if no results could be found",
|
||||
"citizen-search-no-results-desc": "Description of the message displayed if no results could be found"
|
||||
"citizen-search-fulltext": "Fulltext search suggestion"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ class CitizenHooks {
|
|||
* @return bool
|
||||
*/
|
||||
public static function onBeforePageDisplay( $out, $skin ) {
|
||||
$out->addModules( 'skins.citizen.lazyload.scripts' );
|
||||
$out->addModules( 'skins.citizen.scripts.lazyload' );
|
||||
|
||||
return true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
],
|
||||
|
|
@ -97,8 +95,6 @@ class CitizenTemplate extends BaseTemplate {
|
|||
'msg-citizen-footer-tagline' => $this->getMsg( 'citizen-footer-tagline' )->text(),
|
||||
'array-footer-icons' => $this->getFooterIconsRow(),
|
||||
],
|
||||
|
||||
'data-bottombar' => $this->buildBottombar(),
|
||||
];
|
||||
|
||||
// Prepare and output the HTML response
|
||||
|
|
@ -107,11 +103,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 +192,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,16 +253,13 @@ 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(
|
||||
'image',
|
||||
[ 'id' => 'searchButton',
|
||||
'src' => $this->getSkin()->getSkinStylePath( 'resources/images/icons/search.svg' ),
|
||||
]
|
||||
),
|
||||
'msg-search' => $this->getMsg( 'search' )->text(),
|
||||
'page-title' => SpecialPage::getTitleFor( 'Search' )->getPrefixedDBkey(),
|
||||
'html-random-href' => Skin::makeSpecialUrl( 'Randompage' ),
|
||||
'msg-random' => $this->getMsg( 'Randompage' )->text(),
|
||||
];
|
||||
return $props;
|
||||
}
|
||||
|
|
@ -289,7 +283,7 @@ class CitizenTemplate extends BaseTemplate {
|
|||
|
||||
// Login-based condition, return true if condition is met
|
||||
if ( $condition === 'login' ) {
|
||||
$condition = $skin()->getUser()->isLoggedIn();
|
||||
$condition = $skin->getUser()->isLoggedIn();
|
||||
}
|
||||
|
||||
// Permission-based condition, return true if condition is met
|
||||
|
|
@ -351,26 +345,6 @@ class CitizenTemplate extends BaseTemplate {
|
|||
return $props;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the bottom bar
|
||||
* TODO: Convert button text to i18n message.
|
||||
* TODO: Refactor the bottom bar to be customizable
|
||||
* @return array
|
||||
*/
|
||||
private function buildBottombar() : array {
|
||||
$config = $this->config;
|
||||
$buttonEnabled = $config->get( 'CitizenEnableButton' );
|
||||
if ( $buttonEnabled === false ) {
|
||||
return '';
|
||||
}
|
||||
$props = [
|
||||
'html-citizen-bottombar-button-href' => $config->get( 'CitizenButtonLink' ),
|
||||
'html-citizen-bottombar-button-title' => $config->get( 'CitizenButtonTitle' ),
|
||||
'html-citizen-bottombar-button-text' => $config->get( 'CitizenButtonText' ),
|
||||
];
|
||||
return $props;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get last modified message
|
||||
* @return string html
|
||||
|
|
|
|||
|
|
@ -212,11 +212,14 @@ class SkinCitizen extends SkinTemplate {
|
|||
public function getDefaultModules() {
|
||||
$modules = parent::getDefaultModules();
|
||||
|
||||
// Dequeue default content modules (toc, sortable, collapsible, etc.)
|
||||
$modules['content'] = [];
|
||||
|
||||
// Replace the search module
|
||||
$modules['search'] = 'skins.citizen.search.scripts';
|
||||
if ( $this->getConfigValue( 'CitizenEnableSearch' ) === true ) {
|
||||
$modules['search'] = [
|
||||
'skins.citizen.scripts.search',
|
||||
'skins.citizen.styles.search',
|
||||
'skins.citizen.icons.search',
|
||||
];
|
||||
}
|
||||
|
||||
return $modules;
|
||||
}
|
||||
|
|
@ -228,17 +231,15 @@ class SkinCitizen extends SkinTemplate {
|
|||
$this->out->addModuleStyles( [
|
||||
'mediawiki.skinning.content.externallinks',
|
||||
'skins.citizen.styles',
|
||||
'skins.citizen.styles.fonts',
|
||||
'skins.citizen.icons',
|
||||
'skins.citizen.icons.ca',
|
||||
'skins.citizen.icons.p',
|
||||
'skins.citizen.icons.toc',
|
||||
'skins.citizen.icons.es',
|
||||
'skins.citizen.icons.n',
|
||||
'skins.citizen.icons.t',
|
||||
'skins.citizen.icons.pt',
|
||||
'skins.citizen.icons.footer',
|
||||
'skins.citizen.icons.badges',
|
||||
'skins.citizen.icons.search',
|
||||
] );
|
||||
|
||||
$this->out->addModules( [
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
{{!
|
||||
string html-citizen-bottombar-button-href URL of the button
|
||||
string html-citizen-bottombar-button-title tooltip of the button
|
||||
string html-citizen-bottombar-button-text text of the button
|
||||
}}
|
||||
|
||||
<aside class="mw-bottombar">
|
||||
<nav class="mw-bottombar-buttons">
|
||||
<div class="citizen-ui-icon" id="citizen-ui-button">
|
||||
<a href="{{html-citizen-bottombar-button-href}}" title="{{html-citizen-bottombar-button-title}}" rel="noopener noreferrer" target="_blank">{{{html-citizen-bottombar-button-text}}}</a>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
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>
|
||||
|
|
@ -2,28 +2,11 @@
|
|||
string msg-citizen-header-menu-toggle tooltip for menu toggle
|
||||
string msg-citizen-header-search-toggle tooltip for search toggle
|
||||
}}
|
||||
<header class="mw-header-container" id="mw-navigation">
|
||||
<div class="mw-header-icons">
|
||||
<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>
|
||||
<div class="mw-header-icons">
|
||||
<div class="mw-header" 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>
|
||||
<header class="mw-header">
|
||||
<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>
|
||||
|
|
@ -1,13 +1,42 @@
|
|||
{{!
|
||||
string msg-citizen-search-toggle tooltip message for search toggle
|
||||
string form-action action attribute of the search form
|
||||
string page-title page title of the search page
|
||||
string msg-search search text label
|
||||
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
|
||||
string html-random-href URL of Special:Random
|
||||
string msg-random tooltip message for random page button
|
||||
}}
|
||||
<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>
|
||||
<div id="searchform-icon"></div>
|
||||
{{{html-input}}}
|
||||
{{{html-button-search}}}
|
||||
<a
|
||||
id="searchform-random"
|
||||
href="{{html-random-href}}"
|
||||
title="{{msg-random}}">
|
||||
<div id="searchform-random-label" class="screen-reader-text">
|
||||
{{msg-random}}
|
||||
</div>
|
||||
</a>
|
||||
</form>
|
||||
|
|
@ -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}}}
|
||||
|
|
@ -65,5 +65,4 @@
|
|||
<aside class="mw-sidebar-sitename">
|
||||
<a class="mw-wiki-title" {{{html-mainpage-attributes}}}>{{{msg-sitetitle}}}</a>
|
||||
</aside>
|
||||
{{#data-bottombar}}{{>Bottombar}}{{/data-bottombar}}
|
||||
{{{html-printtail}}}
|
||||
324
resources/components/Drawer.less
Normal file
324
resources/components/Drawer.less
Normal file
|
|
@ -0,0 +1,324 @@
|
|||
/*
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
//
|
||||
// Citizen - Footer Styles
|
||||
// Citizen - Footer styles
|
||||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
57
resources/components/Header.less
Normal file
57
resources/components/Header.less
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#mw-header {
|
||||
&-background {
|
||||
box-shadow: 0 0 50px @header-height @header-background-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
255
resources/components/Searchbox.less
Normal file
255
resources/components/Searchbox.less
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
//
|
||||
// Citizen - Searchbox styles
|
||||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
#search {
|
||||
&form {
|
||||
position: absolute;
|
||||
z-index: -1; // not interactable
|
||||
margin: 7px 0 8px; // 1px h3 screen reader
|
||||
display: flex;
|
||||
top: 0;
|
||||
right: @margin-side / 2;
|
||||
opacity: 0;
|
||||
.boxshadow(4);
|
||||
border-radius: @border-radius-small;
|
||||
transition: @transition-opacity;
|
||||
pointer-events: none; // not clickable
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
z-index: 110;
|
||||
width: @search-bar-height;
|
||||
height: @search-bar-height;
|
||||
opacity: @opacity-icon;
|
||||
background-size: 14px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&-random {
|
||||
position: absolute;
|
||||
z-index: 120;
|
||||
right: 38px;
|
||||
width: @search-bar-height;
|
||||
height: @search-bar-height;
|
||||
opacity: @opacity-icon;
|
||||
background-size: 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: @transition-transform-quick, @transition-opacity-quick;
|
||||
|
||||
&:hover {
|
||||
opacity: @opacity-icon-active;
|
||||
transform: rotate( 30deg );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-toggle {
|
||||
right: 0; // align checkbox with icon
|
||||
z-index: 21; // override to be on top of the form
|
||||
|
||||
&-icon {
|
||||
position: relative;
|
||||
z-index: 20; // stay on top of search form
|
||||
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: 0;
|
||||
left: -7px;
|
||||
height: 14px;
|
||||
transform: rotate( -135deg );
|
||||
}
|
||||
|
||||
&-1,
|
||||
&-3 {
|
||||
width: 2px;
|
||||
background-color: @base-0;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ #searchform {
|
||||
z-index: 10;
|
||||
opacity: 1;
|
||||
pointer-events: auto; // clickable
|
||||
|
||||
#searchInput {
|
||||
width: @search-bar-width;
|
||||
}
|
||||
}
|
||||
|
||||
~ #search-toggle-icon {
|
||||
#search-toggle-icon {
|
||||
&-2 {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&-1 {
|
||||
height: 14px;
|
||||
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 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&Input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
z-index: 100;
|
||||
padding: 8px @icon-box-size + @icon-padding + @search-bar-height + @margin-side / 2 8px @search-bar-height;
|
||||
width: 0;
|
||||
height: @search-bar-height;
|
||||
max-width: calc( ~'100vw -'@margin-side );
|
||||
background: @base-100;
|
||||
border: 1px solid @base-90;
|
||||
border-radius: @border-radius-small;
|
||||
transition: @transition-width, @transition-box-shadow;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
.boxshadow(5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
&-toggle-icon-div {
|
||||
position: relative;
|
||||
transition: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: @search-bar-width ) {
|
||||
#searchform:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @base-100;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#search {
|
||||
&form {
|
||||
&-icon,
|
||||
&-random {
|
||||
opacity: 0.4;
|
||||
filter: invert( 1 );
|
||||
}
|
||||
|
||||
&-random:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: @search-bar-width ) and ( prefers-color-scheme: dark ) {
|
||||
#searchform:before {
|
||||
background: @dark-bg-50;
|
||||
}
|
||||
}
|
||||
31
resources/components/Sidebar.less
Normal file
31
resources/components/Sidebar.less
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/*
|
||||
* Citizen - Sidebar styles
|
||||
* https://starcitizen.tools
|
||||
*/
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
//
|
||||
// Citizen - Bottombar Styles
|
||||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
.mw-bottombar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transform: translate( 0, @header-height + @margin-side );
|
||||
transition: @transition-transform;
|
||||
|
||||
&-buttons {
|
||||
display: flex;
|
||||
margin: @margin-side;
|
||||
background-color: #7289da; // Discord color
|
||||
border-radius: 100%;
|
||||
.boxshadow(4);
|
||||
transition: @transition-transform-quick, @transition-box-shadow-quick;
|
||||
|
||||
.citizen-ui-icon {
|
||||
> a {
|
||||
width: @header-height;
|
||||
height: @header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-indent: -1000px; // Hide text
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
.resource-loader-menu-icon;
|
||||
transition: @transition-opacity;
|
||||
opacity: 1;
|
||||
position: relative; // temp override
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Movable navigation bar
|
||||
.nav-up ~ .mw-bottombar {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: @screen0 ) {
|
||||
.mw-bottombar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,29 @@
|
|||
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
/*
|
||||
* Hacks
|
||||
* TODO: Find a place to put them
|
||||
*/
|
||||
|
||||
// Hide RSS icon
|
||||
a.feedlink {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
// CSS checkbox hack
|
||||
.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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Framework
|
||||
*/
|
||||
|
|
@ -989,9 +1012,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 +1055,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,73 +77,29 @@
|
|||
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 {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
table.wikitable,
|
||||
.suggestion-title {
|
||||
table.wikitable {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
.suggestion-link.active {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
|
||||
.suggestion-link.active .suggestion-title {
|
||||
color: @accent-90;
|
||||
}
|
||||
|
||||
.mw-body-content #contentSub,
|
||||
.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 {
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc a:hover {
|
||||
color: @dark-text-80 !important;
|
||||
}
|
||||
|
||||
|
|
@ -181,8 +119,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,
|
||||
|
|
@ -190,28 +126,6 @@
|
|||
filter: invert( 1 );
|
||||
}
|
||||
|
||||
.suggestion-placeholder {
|
||||
.suggestion-title,
|
||||
.suggestion-description {
|
||||
background: @dark-bg-20;
|
||||
background: linear-gradient( to right, @dark-bg-40 8%, @dark-bg-30 38%, @dark-bg-40 54% );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-header-container: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;
|
||||
|
|
|
|||
|
|
@ -1,411 +0,0 @@
|
|||
/*
|
||||
* 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
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 );
|
||||
}
|
||||
}
|
||||
|
|
@ -1,290 +0,0 @@
|
|||
//
|
||||
// Citizen - Search Styles
|
||||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
@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;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.suggestions-dropdown {
|
||||
background: @base-100;
|
||||
.boxshadow(4);
|
||||
width: @suggestion-max-width;
|
||||
max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
|
||||
}
|
||||
|
||||
.suggestion-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
min-height: 2rem * @content-scaling;
|
||||
padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
|
||||
border-bottom: 1px solid @base-90;
|
||||
}
|
||||
|
||||
.suggestion-title {
|
||||
margin: 0 0 0.78rem * @content-scaling 0;
|
||||
color: @base-10;
|
||||
font-size: 1.6rem * @content-scaling;
|
||||
font-weight: normal;
|
||||
line-height: 1.872rem * @content-scaling;
|
||||
}
|
||||
|
||||
.suggestion-link.active .suggestion-title {
|
||||
color: @accent-50;
|
||||
}
|
||||
|
||||
.suggestion-highlight {
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.suggestion-description {
|
||||
color: @base-30;
|
||||
margin: 0;
|
||||
font-family: @fonts;
|
||||
font-size: 1.3rem * @content-scaling;
|
||||
line-height: 1.43rem * @content-scaling;
|
||||
}
|
||||
|
||||
.suggestion-link.active {
|
||||
background-color: @accent-90;
|
||||
}
|
||||
|
||||
/* using element selector to override default anchor styles */
|
||||
a.suggestion-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.suggestion-thumbnail {
|
||||
background-color: @base-80;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
width: 7rem * @content-scaling;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.suggestion-placeholder {
|
||||
.suggestion-title {
|
||||
width: 30%;
|
||||
height: 1.6rem * @content-scaling;
|
||||
}
|
||||
|
||||
.suggestion-description {
|
||||
width: 70%;
|
||||
height: 1.3rem * @content-scaling;
|
||||
}
|
||||
|
||||
.suggestion-title,
|
||||
.suggestion-description {
|
||||
animation-duration: 1.8s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: placeHolderShimmer;
|
||||
animation-timing-function: linear;
|
||||
background: @base-70;
|
||||
background: linear-gradient( to right, @base-90 8%, @base-80 38%, @base-90 54% );
|
||||
background-size: 1000px 640px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
// RTL tweaks
|
||||
.rtl {
|
||||
#site-search {
|
||||
#searchform {
|
||||
left: @icon-box-size + @margin-side + @icon-padding;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: @suggestion-max-width ) {
|
||||
.suggestions-dropdown {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: @header-height + 1px;
|
||||
max-width: 100vw;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes placeHolderShimmer {
|
||||
0% {
|
||||
background-position: -468px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 468px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 245 240" xml:space="preserve"><style>.st0{fill:#fff}</style><path class="st0" d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zm36.5 0c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/><path class="st0" d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -3,12 +3,13 @@
|
|||
@import 'variables.less';
|
||||
@import 'mixins.less';
|
||||
@import 'components/common.less';
|
||||
@import 'components/navigation.less';
|
||||
@import 'components/wikitable.less';
|
||||
@import 'components/page-tools.less';
|
||||
@import 'components/search.less';
|
||||
@import 'components/footer.less';
|
||||
@import 'components/bottombar.less';
|
||||
@import 'components/scrollbar.less';
|
||||
@import 'components/darkmode.less';
|
||||
@import 'components/reducemotion.less';
|
||||
@import 'components/Header.less';
|
||||
@import 'components/Drawer.less';
|
||||
@import 'components/Searchbox.less';
|
||||
@import 'components/Sidebar.less';
|
||||
@import 'components/Footer.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 );
|
||||
}() );
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 407 B After Width: | Height: | Size: 407 B |
1
resources/skins.citizen.icons.search/searchfulltext.svg
Normal file
1
resources/skins.citizen.icons.search/searchfulltext.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#36c" d="M7.5 13c3.04 0 5.5-2.46 5.5-5.5S10.54 2 7.5 2 2 4.46 2 7.5 4.46 13 7.5 13zm4.55.46A7.432 7.432 0 017.5 15C3.36 15 0 11.64 0 7.5S3.36 0 7.5 0C11.64 0 15 3.36 15 7.5c0 1.71-.57 3.29-1.54 4.55l6.49 6.49-1.41 1.41-6.49-6.49z"/><path fill="#36c" d="M4.00000005 5h7.0000002v1.00000005h-7.0000002zM4.00000005 6.99999995h7.0000002V8h-7.0000002zm0 1.99999995h5.44444499v.9999999H4.00000005z"/></svg>
|
||||
|
After Width: | Height: | Size: 471 B |
|
Before Width: | Height: | Size: 395 B After Width: | Height: | Size: 395 B |
|
Before Width: | Height: | Size: 245 B After Width: | Height: | Size: 245 B |
7
resources/skins.citizen.icons/toc-rtl.svg
Normal file
7
resources/skins.citizen.icons/toc-rtl.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>
|
||||
stripe ToC
|
||||
</title>
|
||||
<path d="M1 3h14v2H1zm0 6h14v2H1zm0 6h14v2H1zM17 3h2v2h-2zm0 6h2v2h-2zm0 6h2v2h-2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 249 B |
|
|
@ -88,7 +88,8 @@ window.WMTypeAhead = function ( appendTo, searchInput ) {
|
|||
searchEl = document.getElementById( searchInput ),
|
||||
server = mw.config.get( 'wgServer' ),
|
||||
articleurl = server + mw.config.get( 'wgArticlePath' ).replace( '$1', '' ),
|
||||
thumbnailSize = getDevicePixelRatio() * 80,
|
||||
searchurl = server + mw.config.get( 'wgScriptPath' ) + '/index.php?title=Special%3ASearch&search=',
|
||||
thumbnailSize = Math.round( getDevicePixelRatio() * 80 ),
|
||||
descriptionSource = mw.config.get( 'wgCitizenSearchDescriptionSource' ),
|
||||
maxSearchResults = mw.config.get( 'wgCitizenMaxSearchResults' ),
|
||||
searchString,
|
||||
|
|
@ -220,39 +221,20 @@ window.WMTypeAhead = function ( appendTo, searchInput ) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Card displayed while loading search results
|
||||
* @return {string}
|
||||
*/
|
||||
function getLoadingIndicator() {
|
||||
return '<div class="suggestions-dropdown">' +
|
||||
'<div class="suggestion-link">' +
|
||||
'<div class="suggestion-text suggestion-placeholder">' +
|
||||
'<h3 class="suggestion-title"></h3>' +
|
||||
'<p class="suggestion-description"></p>' +
|
||||
'</div>' +
|
||||
'<div class="suggestion-thumbnail"></div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Card displayed if no results could be found
|
||||
* @param {string} searchString - The search string.
|
||||
* @return {string}
|
||||
*/
|
||||
function getNoResultsIndicator( searchString ) {
|
||||
const titlemsg = mw.message( 'citizen-search-no-results-title', searchString ).text(),
|
||||
descmsg = mw.message( 'citizen-search-no-results-desc', searchString ).text();
|
||||
function getSuggestionSpecial( searchString ) {
|
||||
const msg = mw.message( 'citizen-search-fulltext' ).text(),
|
||||
href = searchurl + searchString + '&fulltext=1';
|
||||
|
||||
return '<div class="suggestions-dropdown" >' +
|
||||
'<div class="suggestion-link">' +
|
||||
'<div class="suggestion-text">' +
|
||||
'<h3 class="suggestion-title">' + titlemsg + '</h3>' +
|
||||
'<p class="suggestion-description">' + descmsg + '</p>' +
|
||||
'</div>' +
|
||||
'<div class="suggestion-thumbnail"></div>' +
|
||||
'</div>' +
|
||||
return '<a id="suggestion-special" href="' + href + '">' +
|
||||
'<div id="suggestion-special-icon"></div>' +
|
||||
'<div id="suggestion-special-text">' + msg +
|
||||
' <em class="suggestion-highlight">' + searchString +
|
||||
'</em></div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
|
|
@ -308,7 +290,7 @@ window.WMTypeAhead = function ( appendTo, searchInput ) {
|
|||
break;
|
||||
}
|
||||
|
||||
typeAheadEl.innerHTML = getLoadingIndicator();
|
||||
// typeAheadEl.innerHTML = getLoadingIndicator();
|
||||
|
||||
api.get( searchQuery )
|
||||
.done( ( data ) => {
|
||||
|
|
@ -359,14 +341,21 @@ window.WMTypeAhead = function ( appendTo, searchInput ) {
|
|||
suggestionText,
|
||||
suggestionTitle,
|
||||
suggestionDescription,
|
||||
suggestionSpecial,
|
||||
page,
|
||||
sanitizedThumbURL = false,
|
||||
descriptionText = '',
|
||||
pageDescription = '',
|
||||
suggestionLinkID,
|
||||
i;
|
||||
|
||||
suggestionSpecial = getSuggestionSpecial( searchString );
|
||||
|
||||
if ( suggestions.length === 0 ) {
|
||||
return getNoResultsIndicator( searchString );
|
||||
string += suggestionSpecial;
|
||||
string += '</div>';
|
||||
|
||||
return string;
|
||||
}
|
||||
|
||||
for ( i = 0; i < suggestions.length; i++ ) {
|
||||
|
|
@ -415,6 +404,15 @@ window.WMTypeAhead = function ( appendTo, searchInput ) {
|
|||
descriptionText = '';
|
||||
}
|
||||
|
||||
// Add ID if first or last suggestion
|
||||
if ( i === 0 ) {
|
||||
suggestionLinkID = 'suggestion-link-first';
|
||||
} else if ( i === suggestions.length - 1 ) {
|
||||
suggestionLinkID = 'suggestion-link-last';
|
||||
} else {
|
||||
suggestionLinkID = '';
|
||||
}
|
||||
|
||||
suggestionDescription = mw.html.element( 'p', { class: 'suggestion-description' }, descriptionText );
|
||||
|
||||
suggestionTitle = mw.html.element( 'h3', { class: 'suggestion-title' }, new mw.html.Raw( highlightTitle( page.title, searchString ) ) );
|
||||
|
|
@ -426,16 +424,17 @@ window.WMTypeAhead = function ( appendTo, searchInput ) {
|
|||
style: ( sanitizedThumbURL ) ? 'background-image:url(' + sanitizedThumbURL + ')' : false
|
||||
}, '' );
|
||||
|
||||
// TODO: Make it configurable from the skin
|
||||
suggestionLink = mw.html.element( 'a', {
|
||||
class: 'suggestion-link',
|
||||
id: suggestionLinkID,
|
||||
href: articleurl + encodeURIComponent( page.title.replace( / /gi, '_' ) )
|
||||
}, new mw.html.Raw( suggestionText + suggestionThumbnail ) );
|
||||
}, new mw.html.Raw( suggestionThumbnail + suggestionText ) );
|
||||
|
||||
string += suggestionLink;
|
||||
|
||||
}
|
||||
|
||||
string += suggestionSpecial;
|
||||
|
||||
string += '</div>';
|
||||
|
||||
return string;
|
||||
|
|
@ -504,7 +503,9 @@ window.WMTypeAhead = function ( appendTo, searchInput ) {
|
|||
xhrResults.query.pages : [];
|
||||
|
||||
if ( suggestions.length === 0 ) {
|
||||
typeAheadEl.innerHTML = getNoResultsIndicator( queryString );
|
||||
typeAheadEl.innerHTML = '<div class="suggestions-dropdown">' +
|
||||
getSuggestionSpecial( queryString ) +
|
||||
'</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
179
resources/skins.citizen.styles.search/search.less
Normal file
179
resources/skins.citizen.styles.search/search.less
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
//
|
||||
// Citizen - Search styles
|
||||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
@import '../variables.less';
|
||||
@import '../mixins.less';
|
||||
|
||||
#typeahead-suggestions {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.suggestions-dropdown {
|
||||
width: @search-bar-width;
|
||||
max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
|
||||
display: flex; // Needed to show margin
|
||||
flex-direction: column;
|
||||
background: @base-100;
|
||||
border-radius: 0 0 @border-radius-large @border-radius-large;
|
||||
.boxshadow(4);
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
&-link {
|
||||
padding: 8px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.active {
|
||||
background-color: @accent-90;
|
||||
|
||||
.suggestion-title {
|
||||
color: @accent-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin: 0 0 0.78rem * @content-scaling 0;
|
||||
display: inline-block; // so that the margin does not occupy space
|
||||
color: @base-10;
|
||||
font-size: @content-h6-size;
|
||||
line-height: 1.872rem * @content-scaling;
|
||||
}
|
||||
|
||||
&-highlight {
|
||||
color: @base-30;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: @base-30;
|
||||
margin: 0;
|
||||
font-family: @fonts;
|
||||
font-size: @content-caption-size;
|
||||
line-height: 1.43rem * @content-scaling;
|
||||
}
|
||||
|
||||
&-thumbnail {
|
||||
width: 70px;
|
||||
min-width: 70px; // so it won't be squeezed by the content text
|
||||
height: 60px;
|
||||
border-radius: @border-radius-small;
|
||||
background-color: @base-80;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
#suggestion {
|
||||
&-link {
|
||||
&-first {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&-last {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-special {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid @base-80;
|
||||
border-radius: 0 0 @border-radius-large @border-radius-large;
|
||||
display: flex;
|
||||
color: @base-10;
|
||||
align-items: center;
|
||||
|
||||
&-icon {
|
||||
margin: 0 14px 0 10px;
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&-text {
|
||||
padding: 5px 0; // make it looks more center aligned
|
||||
font-size: @content-caption-size;
|
||||
font-family: @fonts;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; // handle overflow
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @accent-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* using element selector to override default anchor styles */
|
||||
a.suggestion-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// RTL tweaks
|
||||
.rtl {
|
||||
#searchform {
|
||||
left: @icon-box-size + @margin-side + @icon-padding;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: @search-bar-width ) {
|
||||
.suggestions-dropdown {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.suggestions-dropdown {
|
||||
background: @dark-bg-50;
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
&-link {
|
||||
&.active {
|
||||
background-color: @accent-10;
|
||||
|
||||
.suggestion-title {
|
||||
color: @accent-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
&-highlight {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
}
|
||||
|
||||
#suggestion {
|
||||
&-special {
|
||||
border-color: @dark-bg-40;
|
||||
color: @dark-text-90;
|
||||
|
||||
&:hover {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -24,6 +24,13 @@
|
|||
@padding-menu-item-big: 10px 20px;
|
||||
@negative-margin: (@footer-width - @page-width) / -2;
|
||||
|
||||
@search-bar-width: 500px;
|
||||
@search-bar-height: 42px;
|
||||
|
||||
@border-radius-small: 4px;
|
||||
@border-radius-medium: @border-radius-small * 2;
|
||||
@border-radius-large: @border-radius-small * 3;
|
||||
|
||||
/*
|
||||
* Colors
|
||||
*/
|
||||
|
|
@ -77,6 +84,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;
|
||||
|
|
|
|||
124
skin.json
124
skin.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "Citizen",
|
||||
"namemsg": "skinname-citizen",
|
||||
"version": "0.8.2",
|
||||
"version": "0.8.3",
|
||||
"author": [
|
||||
"[https://www.mediawiki.org/wiki/User:Alistair3149 Alistair3149]",
|
||||
"[https://www.mediawiki.org/wiki/User:Octfx Octfx]"
|
||||
|
|
@ -123,6 +123,12 @@
|
|||
"descriptionmsg": "citizen-config-manifestbackgroundcolor",
|
||||
"public": true
|
||||
},
|
||||
"EnableSearch": {
|
||||
"value": true,
|
||||
"description": "Enable or disable rich search suggestions",
|
||||
"descriptionmsg": "citizen-config-enablesearch",
|
||||
"public": true
|
||||
},
|
||||
"SearchDescriptionSource": {
|
||||
"value": "textextracts",
|
||||
"description": "The source of the short description in the suggestions",
|
||||
|
|
@ -135,30 +141,6 @@
|
|||
"descriptionmsg": "citizen-config-maxsearchresults",
|
||||
"public": true
|
||||
},
|
||||
"EnableButton": {
|
||||
"value": false,
|
||||
"description": "Enable or disable the floating action button on the bottom left",
|
||||
"descriptionmsg": "citizen-config-enablebutton",
|
||||
"public": true
|
||||
},
|
||||
"ButtonLink": {
|
||||
"value": "",
|
||||
"description": "The URL of the FAB button",
|
||||
"descriptionmsg": "citizen-config-buttonlink",
|
||||
"public": true
|
||||
},
|
||||
"ButtonTitle": {
|
||||
"value": "",
|
||||
"description": "The title of the link element on the FAB",
|
||||
"descriptionmsg": "citizen-config-buttontitle",
|
||||
"public": true
|
||||
},
|
||||
"ButtonText": {
|
||||
"value": "",
|
||||
"description": "The text of the FAB",
|
||||
"descriptionmsg": "citizen-config-buttontext",
|
||||
"public": true
|
||||
},
|
||||
"ShowPageTools": {
|
||||
"value": true,
|
||||
"description": "Page tools visibility condition",
|
||||
|
|
@ -196,44 +178,65 @@
|
|||
},
|
||||
"resources/print.less": {
|
||||
"media": "print"
|
||||
},
|
||||
"resources/font-face.less": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"skins.citizen.styles.fonts": {
|
||||
"class": "ResourceLoaderSkinModule",
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"styles": [ "resources/skins.citizen.styles.fonts/font-face.less" ]
|
||||
},
|
||||
"skins.citizen.styles.search": {
|
||||
"class": "ResourceLoaderSkinModule",
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"styles": [ "resources/skins.citizen.styles.search/search.less" ]
|
||||
},
|
||||
"skins.citizen.scripts": {
|
||||
"scripts": [
|
||||
"resources/scripts/header.js",
|
||||
"resources/scripts/toc.js",
|
||||
"resources/scripts/searchfocus.js"
|
||||
"resources/skins.citizen.scripts/toc.js",
|
||||
"resources/skins.citizen.scripts/searchfocus.js"
|
||||
]
|
||||
},
|
||||
"skins.citizen.search.scripts": {
|
||||
"skins.citizen.scripts.search": {
|
||||
"scripts": [
|
||||
"resources/scripts/underscore.partial.js",
|
||||
"resources/scripts/wm-typeahead.js",
|
||||
"resources/scripts/typeahead-init.js"
|
||||
"resources/skins.citizen.scripts.search/underscore.partial.js",
|
||||
"resources/skins.citizen.scripts.search/wm-typeahead.js",
|
||||
"resources/skins.citizen.scripts.search/typeahead-init.js"
|
||||
],
|
||||
"dependencies": [
|
||||
"mediawiki.api",
|
||||
"oojs-ui-core.styles"
|
||||
],
|
||||
"messages": [
|
||||
"citizen-search-no-results-title",
|
||||
"citizen-search-no-results-desc"
|
||||
"citizen-search-fulltext"
|
||||
]
|
||||
},
|
||||
"skins.citizen.lazyload.scripts": {
|
||||
"skins.citizen.scripts.lazyload": {
|
||||
"scripts": [
|
||||
"resources/scripts/lazyload.js"
|
||||
"resources/skins.citizen.scripts.lazyload/lazyload.js"
|
||||
]
|
||||
},
|
||||
"skins.citizen.icons": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": "#citizen-ui-{name} > *:after",
|
||||
"selector": "{name}",
|
||||
"defaultColor": "#000",
|
||||
"useDataURI": false,
|
||||
"images": {
|
||||
"button": "resources/images/icons/discord.svg"
|
||||
".toctoggle > a:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/toc-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/toc-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#p-actions:before": "resources/skins.citizen.icons/more.svg",
|
||||
"#searchform-icon": "resources/images/icons/search.svg",
|
||||
"#searchform-random": "resources/images/icons/random.svg"
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.ca": {
|
||||
|
|
@ -258,24 +261,6 @@
|
|||
"translate": "resources/images/icons/language.svg"
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.p": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": "#p-{name}:before",
|
||||
"defaultColor": "#000",
|
||||
"useDataURI": false,
|
||||
"images": {
|
||||
"actions": "resources/images/icons/more.svg"
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.toc": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": ".toctoggle > a:before",
|
||||
"defaultColor": "#000",
|
||||
"useDataURI": false,
|
||||
"images": {
|
||||
"": "resources/images/icons/ToC.svg"
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.es": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": ".mw-editsection > a{name}:before",
|
||||
|
|
@ -331,7 +316,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": {
|
||||
|
|
@ -349,21 +336,22 @@
|
|||
"defaultColor": "#fff",
|
||||
"useDataURI": false,
|
||||
"images": {
|
||||
"by-sa": "resources/images/badges/CCBYSA.svg",
|
||||
"mediawiki": "resources/images/badges/MediaWiki.svg",
|
||||
"wikiapiary": "resources/images/badges/WikiApiary.svg",
|
||||
"miraheze": "resources/images/badges/Miraheze.svg",
|
||||
"gdpr": "resources/images/badges/GDPR.svg",
|
||||
"robertsspaceindustries": "resources/images/badges/StarCitizenCommunity.svg",
|
||||
"starcitizen.tools": "resources/images/badges/StarCitizenTools.svg"
|
||||
"by-sa": "resources/skins.citizen.icons.badges/CCBYSA.svg",
|
||||
"mediawiki": "resources/skins.citizen.icons.badges/MediaWiki.svg",
|
||||
"wikiapiary": "resources/skins.citizen.icons.badges/WikiApiary.svg",
|
||||
"miraheze": "resources/skins.citizen.icons.badges/Miraheze.svg",
|
||||
"gdpr": "resources/skins.citizen.icons.badges/GDPR.svg",
|
||||
"robertsspaceindustries": "resources/skins.citizen.icons.badges/StarCitizenCommunity.svg",
|
||||
"starcitizen.tools": "resources/skins.citizen.icons.badges/StarCitizenTools.svg"
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.search": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": ".suggestion-thumbnail",
|
||||
"selector": "{name}",
|
||||
"useDataURI": false,
|
||||
"images": {
|
||||
"noimage": "resources/images/cards/noimage.svg"
|
||||
".suggestion-thumbnail": "resources/skins.citizen.icons.search/noimage.svg",
|
||||
"#suggestion-special-icon": "resources/skins.citizen.icons.search/searchfulltext.svg"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
@import '../../../resources/variables.less';
|
||||
|
||||
.ve-activated {
|
||||
.mw-header-container {
|
||||
background-color: #fff;
|
||||
.mw-header {
|
||||
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