This commit is contained in:
Facerafter 2019-08-10 09:38:40 +00:00
commit 5cc98fd9bb
95 changed files with 3760 additions and 0 deletions

14
citizen.php Normal file
View file

@ -0,0 +1,14 @@
<?php
if ( function_exists( 'wfLoadSkin' ) ) {
wfLoadSkin( 'Citizen' );
// Keep i18n globals so mergeMessageFileList.php doesn't break
$wgMessagesDirs['Citizen'] = __DIR__ . '/i18n';
/* wfWarn(
'Deprecated PHP entry point used for Citizen skin. Please use wfLoadSkin instead, ' .
'see https://www.mediawiki.org/wiki/Extension_registration for more details.'
); */
return true;
} else {
die( 'This version of the Citizen skin requires MediaWiki 1.31+' );
}

7
i18n/en.json Normal file
View file

@ -0,0 +1,7 @@
{
"@metadata": {
"authors": [ "alistair3149" ]
},
"skinname-citizen": "Citizen",
"citizen-desc": "A responsive skin developed for the Star Citizen Wiki"
}

7
i18n/qqq.json Normal file
View file

@ -0,0 +1,7 @@
{
"@metadata": {
"authors": [ "alistair3149" ]
},
"skinname-citizen": "{{name}}",
"citizen-desc": "{{desc|what=skin|name=Citizen|url=https://starcitizen.tools}}"
}

View file

@ -0,0 +1,843 @@
<?php
/**
* BaseTemplate class for the Citizen skin
*
* @ingroup Skins
*/
//TODO: Add missing title to buttons
class CitizenTemplate extends BaseTemplate {
/**
* Outputs the entire contents of the page
*/
public function execute() {
$html = '';
$html .= $this->get( 'headelement' );
$loggedinclass = 'not-logged';
// Add class if logged in
if ( $this->getSkin()->getUser()->isLoggedIn() ) {
$loggedinclass .= 'logged-in';
}
$html .= Html::rawElement( 'div', [ 'class' => $loggedinclass, 'id' => 'mw-wrapper' ],
// Header
Html::rawElement( 'header', [ 'class' => 'mw-header-container', 'id' => 'mw-navigation' ],
Html::rawElement( 'div', [ 'class' => 'mw-header-icons'],
// Site navigation menu
$this->getHamburgerMenu()
) .
Html::rawElement( 'div', [ 'class' => 'mw-header-icons'],
// User icons
Html::rawElement( 'div', [ 'class' => 'mw-header', 'id' => 'user-icons' ],
$this->getUserIcons()
) .
// Search bar
$this->getSearchButton()
)
) .
// Main body
Html::rawElement( 'main', [ 'class' => 'mw-body', 'id' => 'content', 'role' => 'main' ],
// Container for compatiblity with extensions
Html::rawElement( 'section', [ 'id' => 'mw-body-container' ],
$this->getSiteNotice() .
$this->getNewTalk() .
$this->getIndicators() .
// Page editing and tools
$this->getPageTools() .
Html::rawElement( 'h1',
[
'class' => 'firstHeading',
'lang' => $this->get( 'pageLanguage' )
],
$this->get( 'title' )
) .
Html::rawElement( 'div', [ 'id' => 'siteSub' ],
$this->getMsg( 'tagline' )->parse()
) .
Html::rawElement( 'div', [ 'class' => 'mw-body-content' ],
Html::rawElement( 'div', [ 'id' => 'contentSub' ],
$this->getPageSubtitle() .
Html::rawElement(
'p',
[],
$this->get( 'undelete' )
)
) .
$this->get( 'bodycontent' ) .
$this->getClear() .
Html::rawElement( 'div', [ 'class' => 'printfooter' ],
$this->get( 'printfooter' )
) .
$this->getPageLinks() .
$this->getCategoryLinks()
) .
$this->getDataAfterContent() .
$this->get( 'debughtml' )
)
) .
$this->getFooterBlock() .
// Site title for sidebar
Html::rawElement( 'div', [ 'id' => 'mw-sidebar-sitename', 'role' => 'banner' ],
$this->getSiteTitle('link')
) .
$this->getBottomBar()
);
$html .= $this->getTrail();
$html .= Html::closeElement( 'body' );
$html .= Html::closeElement( 'html' );
echo $html;
}
/**
* Generates the bottom bar
* @return string html
*/
protected function getBottomBar() {
$linkDiscord = 'https://discord.gg/3kjftWK';
$titleDiscord = 'Contact Us on Discord';
$textDiscord = 'Discord';
/*
$linkReddit = 'https://www.reddit.com/r/starcitizen';
$titleReddit = 'Visit /r/starcitizen';
$textReddit = 'Reddit';
*/
$html = Html::openElement( 'div', [ 'id' => 'mw-bottombar' ] );
$html .= Html::rawElement( 'div', [ 'id' => 'mw-bottombar-contact' ],
Html::rawElement( 'div', [ 'class' => 'citizen-ui-icon', 'id' => 'citizen-ui-discord' ],
Html::rawElement( 'a', [ 'href' => $linkDiscord, 'title' => $titleDiscord, 'rel' => 'noopener noreferrer', 'target' => '_blank' ], $textDiscord )
)
/*
Html::rawElement( 'div', [ 'class' => 'citizen-ui-icon', 'id' => 'citizen-ui-reddit' ],
Html::rawElement( 'a', [ 'href' => $linkReddit, 'title' => $titleReddit, 'target' => '_blank' ], $textReddit )
)
*/
);
$html .= Html::closeElement( 'div' );
return $html;
}
/**
* Generates the search button
* @return string html
*/
protected function getSearchButton() {
$titleButton = 'Toggle Search';
$html = Html::rawElement( 'div', [ 'class' => 'mw-header-end', 'id' => 'site-search' ],
Html::rawElement( 'input', [ 'type' => 'checkbox', 'role' => 'button', 'title' => $titleButton ]) .
// Search button
Html::rawElement( 'div', [ 'id' => 'search-icon-container' ],
Html::rawElement( 'div', [ 'id' => 'search-icon' ] )
) .
// Search form
$this->getSearch()
);
return $html;
}
/**
* Generates the hamburger menu
* @return string html
*/
protected function getHamburgerMenu() {
$titleButton = 'Toggle Menu';
$html = Html::openElement( 'div', [ 'class' => 'mw-header-end', 'id' => 'mw-header-menu' ]);
$html .= Html::rawElement( 'input', [ 'type' => 'checkbox', 'role' => 'button', 'title' => $titleButton ]);
// Actual hamburger
$html .= Html::openElement( 'div', [ 'id' => 'mw-header-menu-toggle' ]);
for ($i = 1; $i <= 3; $i++) {
$html .= Html::rawElement( 'span' );
}
$html .= Html::closeElement( 'div' );
// Get sidebar links
$html .= Html::rawElement( 'div', [ 'id' => 'mw-header-menu-drawer' ],
Html::rawElement( 'div', [ 'id' => 'mw-header-menu-drawer-container' ],
$this->getSiteTitle('text') .
// Container for navigation and tools
Html::rawElement( 'div', [ 'id' => 'p-nt-container' ],
$this->getSiteNavigation()
) .
$this->getUserLinks()
)
);
$html .= Html::closeElement( 'div' );
return $html;
}
/**
* Generates the sitetitle
* @return string html
*/
protected function getSiteTitle( $option ) {
$html = '';
$language = $this->getSkin()->getLanguage();
$siteTitle = $language->convert( $this->getMsg( 'sitetitle' )->escaped() );
switch ( $option ) {
case 'link':
$html .= Html::rawElement(
'a',
[
'id' => 'p-banner',
'class' => 'mw-wiki-title',
'href' => $this->data['nav_urls']['mainpage']['href']
] + Linker::tooltipAndAccesskeyAttribs( 'p-logo' ),
$siteTitle
);
break;
case 'text':
$html .= Html::rawElement(
'span',
[
'id' => 'p-banner',
'class' => 'mw-wiki-title',
],
$siteTitle
);
break;
}
return $html;
}
/**
* Generates the description for footer
* @return string html
*/
protected function getFooterDesc() {
$html = '';
$language = $this->getSkin()->getLanguage();
$siteDesc = $language->convert( $this->getMsg( 'citizen-footer-desc' )->escaped() );
$html .= Html::rawElement(
'span',
[
'id' => 'mw-footer-desc'
],
$siteDesc
);
return $html;
}
/**
* Generates the tagline for footer
* @return string html
*/
protected function getFooterTagline() {
$html = '';
$language = $this->getSkin()->getLanguage();
$siteTagline = $language->convert( $this->getMsg( 'citizen-footer-tagline' )->escaped() );
$html .= Html::rawElement(
'span',
[
'id' => 'mw-footer-tagline'
],
$siteTagline
);
return $html;
}
/**
* Generates the logo
* @param string $id
*
* @return string html
*/
protected function getLogo( $id = 'p-logo' ) {
$html = Html::openElement(
'div',
[
'id' => $id,
'class' => 'mw-portlet',
'role' => 'banner'
]
);
$html .= Html::element(
'a',
[
'href' => $this->data['nav_urls']['mainpage']['href'],
'class' => 'mw-wiki-logo',
] + Linker::tooltipAndAccesskeyAttribs( 'p-logo' )
);
$html .= Html::closeElement( 'div' );
return $html;
}
/**
* Generates the search form
* @return string html
*/
protected function getSearch() {
$html = Html::openElement(
'form',
[
'action' => $this->get( 'wgScript' ),
'role' => 'search',
'class' => 'mw-portlet',
'id' => 'p-search'
]
);
$html .= Html::hidden( 'title', $this->get( 'searchtitle' ) );
$html .= Html::rawElement(
'h3',
[],
Html::label( $this->getMsg( 'search' )->text(), 'searchInput' )
);
$html .= $this->makeSearchInput( [ 'id' => 'searchInput' ] );
$html .= $this->makeSearchButton( 'go', [ 'id' => 'searchGoButton', 'class' => 'searchButton' ] );
$html .= Html::closeElement( 'form' );
return $html;
}
/**
* Generates the sidebar
* Set the elements to true to allow them to be part of the sidebar
* Or get rid of this entirely, and take the specific bits to use wherever you actually want them
* * Toolbox is the page/site tools that appears under the sidebar in vector
* * Languages is the interlanguage links on the page via en:... es:... etc
* * Default is each user-specified box as defined on MediaWiki:Sidebar; you will still need a foreach loop
* to parse these.
* @return string html
*/
protected function getSiteNavigation() {
$html = '';
$sidebar = $this->getSidebar();
$sidebar['SEARCH'] = false;
$sidebar['TOOLBOX'] = true;
$sidebar['LANGUAGES'] = false;
foreach ( $sidebar as $name => $content ) {
if ( $content === false ) {
continue;
}
// Numeric strings gets an integer when set as key, cast back - T73639
$name = (string)$name;
switch ( $name ) {
case 'SEARCH':
$html .= $this->getSearch();
break;
case 'TOOLBOX':
$html .= $this->getPortlet( 'tb', $this->getToolbox(), 'toolbox' );
break;
case 'LANGUAGES':
$html .= $this->getLanguageLinks();
break;
default:
$html .= $this->getPortlet( $name, $content['content'] );
break;
}
}
return $html;
}
/**
* Generates user icon bar
* @return string html
*/
protected function getUserIcons() {
$personalTools = $this->getPersonalTools();
$html = '';
// Create the Echo badges and ULS
$extraTools = [];
if ( isset( $personalTools['notifications-alert'] ) ) {
$extraTools['notifications-alert'] = $personalTools['notifications-alert'];
}
if ( isset( $personalTools['notifications-notice'] ) ) {
$extraTools['notifications-notice'] = $personalTools['notifications-notice'];
}
if ( isset( $personalTools['uls'] ) ) {
$extraTools['uls'] = $personalTools['uls'];
}
// Place the extra icons/outside stuff
if ( !empty( $extraTools ) ) {
$iconList = '';
foreach ( $extraTools as $key => $item ) {
$iconList .= $this->makeListItem( $key, $item );
}
$html .= Html::rawElement(
'div',
[ 'id' => 'p-personal-extra', 'class' => 'p-body' ],
Html::rawElement( 'ul', [], $iconList )
);
}
return $html;
}
/**
* Generates user tools menu
* @return string html
*/
protected function getUserLinks() {
$personalTools = $this->getPersonalTools();
$html = '';
// Move the Echo badges and ULS out of default list
$extraTools = [];
if ( isset( $personalTools['notifications-alert'] ) ) {
unset( $personalTools['notifications-alert'] );
}
if ( isset( $personalTools['notifications-notice'] ) ) {
unset( $personalTools['notifications-notice'] );
}
if ( isset( $personalTools['uls'] ) ) {
unset( $personalTools['uls'] );
}
$html .= Html::openElement( 'div', [ 'id' => 'mw-user-links' ] );
$html .= $this->getPortlet( 'personal', $personalTools, 'personaltools' );
$html .= Html::closeElement( 'div' );
return $html;
}
/**
* In other languages list
*
* @return string html
*/
protected function getLanguageLinks() {
$html = '';
if ( $this->data['language_urls'] !== false ) {
$html .= $this->getPortlet( 'lang', $this->data['language_urls'], 'otherlanguages' );
}
return $html;
}
/**
* Language variants. Displays list for converting between different scripts in the same language,
* if using a language where this is applicable (such as latin vs cyric display for serbian).
*
* @return string html
*/
protected function getVariants() {
$html = '';
if ( count( $this->data['content_navigation']['variants'] ) > 0 ) {
$html .= $this->getPortlet(
'variants',
$this->data['content_navigation']['variants']
);
}
return $html;
}
/**
* Generates page-related tools
* @return string html
*/
protected function getPageTools() {
$html = '';
// Only display if user is logged in
// TODO: Make it check for EDIT permission instead
if ( $this->getSkin()->getUser()->isLoggedIn() ) {
$html .= Html::openElement( 'div', [ 'class' => 'mw-side', 'id' => 'page-tools' ]);
// 'View' actions for the page: view, edit, view history, etc
$html .= $this->getPortlet(
'views',
$this->data['content_navigation']['views']
);
// Other actions for the page: move, delete, protect, everything else
$html .= $this->getPortlet(
'actions',
$this->data['content_navigation']['actions']
);
$html .= Html::closeElement( 'div' );
}
return $html;
}
/**
* Generates page-related links at the bottom
* @return string html
*/
protected function getPageLinks() {
// Namespaces: links for 'content' and 'talk' for namespaces with talkpages. Otherwise is just the content.
// Usually rendered as tabs on the top of the page.
$html = $this->getPortlet(
'namespaces',
$this->data['content_navigation']['namespaces']
);
// Language variant options
$html .= $this->getVariants();
return $html;
}
/**
* Generates siteNotice, if any
* @return string html
*/
protected function getSiteNotice() {
return $this->getIfExists( 'sitenotice', [
'wrapper' => 'div',
'parameters' => [ 'id' => 'siteNotice' ]
] );
}
/**
* Generates new talk message banner, if any
* @return string html
*/
protected function getNewTalk() {
return $this->getIfExists( 'newtalk', [
'wrapper' => 'div',
'parameters' => [ 'class' => 'usermessage' ]
] );
}
/**
* Generates subtitle stuff, if any
* @return string html
*/
protected function getPageSubtitle() {
return $this->getIfExists( 'subtitle', [ 'wrapper' => 'p' ] );
}
/**
* Generates category links, if any
* @return string html
*/
protected function getCategoryLinks() {
return $this->getIfExists( 'catlinks' );
}
/**
* Generates data after content stuff, if any
* @return string html
*/
protected function getDataAfterContent() {
return $this->getIfExists( 'dataAfterContent' );
}
/**
* Simple wrapper for random if-statement-wrapped $this->data things
*
* @param string $object name of thing
* @param array $setOptions
*
* @return string html
*/
protected function getIfExists( $object, $setOptions = [] ) {
$options = $setOptions + [
'wrapper' => 'none',
'parameters' => []
];
$html = '';
if ( $this->data[$object] ) {
if ( $options['wrapper'] == 'none' ) {
$html .= $this->get( $object );
} else {
$html .= Html::rawElement(
$options['wrapper'],
$options['parameters'],
$this->get( $object )
);
}
}
return $html;
}
/**
* Generates a block of navigation links with a header
*
* @param string $name
* @param array|string $content array of links for use with makeListItem, or a block of text
* @param null|string|array $msg
* @param array $setOptions random crap to rename/do/whatever
*
* @return string html
*/
protected function getPortlet( $name, $content, $msg = null, $setOptions = [] ) {
// random stuff to override with any provided options
$options = $setOptions + [
// extra classes/ids
'id' => 'p-' . $name,
'class' => 'mw-portlet',
'extra-classes' => '',
// what to wrap the body list in, if anything
'body-wrapper' => 'nav',
'body-id' => null,
'body-class' => 'mw-portlet-body',
// makeListItem options
'list-item' => [ 'text-wrapper' => [ 'tag' => 'span' ] ],
// option to stick arbitrary stuff at the beginning of the ul
'list-prepend' => '',
// old toolbox hook support (use: [ 'SkinTemplateToolboxEnd' => [ &$skin, true ] ])
'hooks' => ''
];
// Handle the different $msg possibilities
if ( $msg === null ) {
$msg = $name;
} elseif ( is_array( $msg ) ) {
$msgString = array_shift( $msg );
$msgParams = $msg;
$msg = $msgString;
}
$msgObj = $this->getMsg( $msg );
if ( $msgObj->exists() ) {
if ( isset( $msgParams ) && !empty( $msgParams ) ) {
$msgString = $this->getMsg( $msg, $msgParams )->parse();
} else {
$msgString = $msgObj->parse();
}
} else {
$msgString = htmlspecialchars( $msg );
}
$labelId = Sanitizer::escapeIdForAttribute( "p-$name-label" );
if ( is_array( $content ) ) {
$contentText = Html::openElement( 'ul',
[ 'lang' => $this->get( 'userlang' ), 'dir' => $this->get( 'dir' ) ]
);
$contentText .= $options['list-prepend'];
foreach ( $content as $key => $item ) {
$contentText .= $this->makeListItem( $key, $item, $options['list-item'] );
}
// Compatibility with extensions still using SkinTemplateToolboxEnd or similar
if ( is_array( $options['hooks'] ) ) {
foreach ( $options['hooks'] as $hook ) {
if ( is_string( $hook ) ) {
$hookOptions = [];
} else {
// it should only be an array otherwise
$hookOptions = array_values( $hook )[0];
$hook = array_keys( $hook )[0];
}
$contentText .= $this->deprecatedHookHack( $hook, $hookOptions );
}
}
$contentText .= Html::closeElement( 'ul' );
} else {
$contentText = $content;
}
// Special handling for role=search and other weird things
$divOptions = [
'role' => 'navigation',
'id' => Sanitizer::escapeIdForAttribute( $options['id'] ),
'title' => Linker::titleAttrib( $options['id'] ),
'aria-labelledby' => $labelId
];
if ( !is_array( $options['class'] ) ) {
$class = [ $options['class'] ];
}
if ( !is_array( $options['extra-classes'] ) ) {
$extraClasses = [ $options['extra-classes'] ];
}
$divOptions['class'] = array_merge( $class, $extraClasses );
$labelOptions = [
'id' => $labelId,
'lang' => $this->get( 'userlang' ),
'dir' => $this->get( 'dir' )
];
if ( $options['body-wrapper'] !== 'none' ) {
$bodyDivOptions = [ 'class' => $options['body-class'] ];
if ( is_string( $options['body-id'] ) ) {
$bodyDivOptions['id'] = $options['body-id'];
}
$body = Html::rawElement( $options['body-wrapper'], $bodyDivOptions,
$contentText .
$this->getAfterPortlet( $name )
);
} else {
$body = $contentText . $this->getAfterPortlet( $name );
}
$html = Html::rawElement( 'div', $divOptions,
Html::rawElement( 'h3', $labelOptions, $msgString ) .
$body
);
return $html;
}
/**
* Wrapper to catch output of old hooks expecting to write directly to page
* We no longer do things that way.
*
* @param string $hook event
* @param array $hookOptions args
*
* @return string html
*/
protected function deprecatedHookHack( $hook, $hookOptions = [] ) {
$hookContents = '';
ob_start();
Hooks::run( $hook, $hookOptions );
$hookContents = ob_get_contents();
ob_end_clean();
if ( !trim( $hookContents ) ) {
$hookContents = '';
}
return $hookContents;
}
/**
* Better renderer for getFooterIcons and getFooterLinks, based on Vector
*
* @param array $setOptions Miscellaneous other options
* * 'id' for footer id
* * 'order' to determine whether icons or links appear first: 'iconsfirst' or links, though in
* practice we currently only check if it is or isn't 'iconsfirst'
* * 'link-prefix' to set the prefix for all link and block ids; most skins use 'f' or 'footer',
* as in id='f-whatever' vs id='footer-whatever'
* * 'icon-style' to pass to getFooterIcons: "icononly", "nocopyright"
* * 'link-style' to pass to getFooterLinks: "flat" to disable categorisation of links in a
* nested array
*
* @return string html
*/
protected function getFooterBlock( $setOptions = [] ) {
// Set options and fill in defaults
$options = $setOptions + [
'id' => 'footer',
'order' => 'linksfirst',
'link-prefix' => 'footer',
'icon-style' => 'icononly',
'link-style' => 'flat'
];
$validFooterIcons = $this->getFooterIcons( $options['icon-style'] );
$validFooterLinks = $this->getFooterLinks( $options['link-style'] );
$html = '';
$html .= Html::openElement( 'footer', [
'id' => $options['id'],
'role' => 'contentinfo',
'lang' => $this->get( 'userlang' ),
'dir' => $this->get( 'dir' )
] );
$iconsHTML = '';
if ( count( $validFooterIcons ) > 0 ) {
$iconsHTML .= Html::openElement( 'div', [ 'id' => "{$options['link-prefix']}-container-icons"] );
$iconsHTML .= Html::openElement( 'div', [ 'id' => "footer-bottom-container"] );
// Get tagline
$iconsHTML .= $this -> getFooterTagline();
$iconsHTML .= Html::openElement( 'ul', [ 'id' => "{$options['link-prefix']}-icons" ] );
foreach ( $validFooterIcons as $blockName => $footerIcons ) {
$iconsHTML .= Html::openElement( 'li', [
'id' => Sanitizer::escapeIdForAttribute(
"{$options['link-prefix']}-{$blockName}ico"
),
'class' => 'footer-icons'
] );
foreach ( $footerIcons as $icon ) {
$iconsHTML .= $this->getSkin()->makeFooterIcon( $icon );
}
$iconsHTML .= Html::closeElement( 'li' );
}
$iconsHTML .= Html::closeElement( 'ul' );
$iconsHTML .= Html::closeElement( 'div' );
$iconsHTML .= Html::closeElement( 'div' );
}
$linksHTML = '';
if ( count( $validFooterLinks ) > 0 ) {
$linksHTML .= Html::openElement( 'div', [ 'id' => "{$options['link-prefix']}-container-list" ] );
if ( $options['link-style'] == 'flat' ) {
$linksHTML .= Html::openElement( 'ul', [
'id' => "{$options['link-prefix']}-list",
'class' => 'footer-places'
] );
// Site logo
$linksHTML .= Html::rawElement( 'li', [ 'id' => 'sitelogo' ],
$this->getLogo()
);
// Site title
$linksHTML .= Html::rawElement( 'li', [ 'id' => 'sitetitle' ],
$this->getSiteTitle('text')
);
// Site description
$linksHTML .= Html::rawElement( 'li', [ 'id' => 'sitedesc' ],
$this->getFooterDesc()
);
foreach ( $validFooterLinks as $link ) {
$linksHTML .= Html::rawElement(
'li',
[ 'id' => Sanitizer::escapeIdForAttribute( $link ) ],
$this->get( $link )
);
}
$linksHTML .= Html::closeElement( 'ul' );
} else {
$linksHTML .= Html::openElement( 'div', [ 'id' => "{$options['link-prefix']}-list" ] );
foreach ( $validFooterLinks as $category => $links ) {
$linksHTML .= Html::openElement( 'ul',
[ 'id' => Sanitizer::escapeIdForAttribute(
"{$options['link-prefix']}-{$category}"
) ]
);
foreach ( $links as $link ) {
$linksHTML .= Html::rawElement(
'li',
[ 'id' => Sanitizer::escapeIdForAttribute(
"{$options['link-prefix']}-{$category}-{$link}"
) ],
$this->get( $link )
);
}
$linksHTML .= Html::closeElement( 'ul' );
}
// Site title
$linksHTML .= Html::rawElement( 'li', [ 'id' => 'footer-sitetitle' ],
$this->getSiteTitle('text')
);
// Site logo
$linksHTML .= Html::rawElement( 'li', [ 'id' => 'footer-sitelogo' ],
$this->getLogo()
);
$linksHTML .= Html::closeElement( 'div' );
}
$linksHTML .= Html::closeElement( 'div' );
}
if ( $options['order'] == 'iconsfirst' ) {
$html .= $iconsHTML . $linksHTML;
} else {
$html .= $linksHTML . $iconsHTML;
}
$html .= $this->getClear() . Html::closeElement( 'footer' );
return $html;
}
}

52
includes/SkinCitizen.php Normal file
View file

@ -0,0 +1,52 @@
<?php
/**
* SkinTemplate class for the Citizen skin
*
* @ingroup Skins
*/
class SkinCitizen extends SkinTemplate {
public $skinname = 'citizen',
$stylename = 'Citizen',
$template = 'CitizenTemplate';
/**
* ResourceLoader
*
* @param $out OutputPage
*/
public function initPage( OutputPage $out ) {
// Responsive layout
$out->addMeta( 'viewport',
'width=device-width, initial-scale=1'
);
// Edge compatibility
$out->addMeta( 'http:X-UA-Compatible',
'IE=edge'
);
$out->addModuleStyles( [
'mediawiki.skinning.content.externallinks',
'skins.citizen',
'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'
] );
$out->addModules( [
'skins.citizen.js'
] );
}
/**
* @param $out OutputPage
*/
function setupSkinUserCss( OutputPage $out ) {
parent::setupSkinUserCss( $out );
}
}

93
licenses/Lato OFL.txt Normal file
View file

@ -0,0 +1,93 @@
Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

View file

@ -0,0 +1,93 @@
Copyright (c) 2009-2011 by Accademia di Belle Arti di Urbino and students of MA course of Visual design. Some rights reserved.
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

View file

@ -0,0 +1,52 @@
//
// Citizen - Bottombar Styles
// https://starcitizen.tools
//
#mw-bottombar {
position: fixed;
bottom: 0;
display: flex;
justify-content: space-between;
transform: translate(0px, @header-height + @margin-side);
transition: @transition-transform;
&-contact {
display: flex;
margin: @margin-side;
padding: 0 @margin-side / 2;
background-color: #7289da; // Discord color
border-radius: 100%;
.boxshadow(4);
transition: @transition-transform-quick, @transition-box-shadow-quick;
.citizen-ui-icon {
> a {
width: @icon-box-size + @icon-padding;
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;
}
&:hover {
&:after {
opacity: 0.7;
}
}
}
}
}
}
// Movable navigation bar
.nav-up ~ #mw-bottombar {
transform: none;
}

View file

@ -0,0 +1,667 @@
/*
* Citizen - Common Styles
* https://starcitizen.tools
*/
@import 'mediawiki.mixins';
/*
* Framework
*/
html {
font-size: @html-font-size;
scroll-padding-top: @header-height + @margin-side; // fixed header offset, supported by major browsers
scroll-behavior: smooth; // not supported by IE, Edge, Safari, and Opera, use JQuery as fallback
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: @fonts;
// font-smoothing: antialiased;
// -webkit-font-smoothing: antialiased; /* Chrome, Safari */
// -moz-osx-font-smoothing: grayscale; /* Firefox */
}
ul {
list-style-type: square;
}
ol {
list-style-type: none;
}
ul, ol {
padding: 0;
}
p, ul, ol {
margin: 0.8rem 0 0 0;
}
pre, code, tt, kbd, samp, .mw-code {
font-family: @fonts-monospace;
font-size: @content-monospace-size;
}
pre,
code,
.mw-code {
color: @base-0;
background-color: @base-90;
border: 1px solid @base-80;
}
code {
padding: 1px 4px;
}
pre,
.mw-code {
padding: 1rem;
/* Wrap lines in overflow. T2260, T103780 */
white-space: pre-wrap;
}
td {
> p,
> ul,
> ol {
&:first-child {
margin-top: 0; // Remove margin for the first element in td
}
}
}
a {
color: @color-link;
text-decoration: none!important;
&:not( [ href ] ) {
cursor: pointer; /* Always cursor:pointer even without href */
}
&:hover {
color: @color-link-active;
}
&.new {
color: @color-link-new!important; // Override visited
&:hover {
color: @color-link-new-active!important;
}
}
&:visited {
color: @color-link;
&:hover {
color: @color-link-active;
}
}
}
.error {
padding: 2px 4px;
background-color: @red-90;
font-size: unset;
font-weight: 400;
}
.firstHeading {
padding-top: 1.2rem;
line-height: 1.2;
}
/*
* Content
*/
.mw-body,
.parsoid-body {
margin-top: @header-height + @margin-side;
padding: 0 @margin-side;
min-height: 60vh; // avoid footer being in the middle of the page
direction: ltr;
}
.mw-wiki-title {
font-family: @fonts-secondary!important;
text-transform: uppercase;
a& {
color: @base-50;
transition: @transition-opacity;
&:hover,
&:active,
&:focus {
color: @base-30;
text-decoration: none;
}
}
}
.mw-body {
// h1's can exist outside of mw-body-content so some heading styles
// need to be defined in mw-body as well
& h1,
&-content h1,
&-content h2,
&-content h3,
&-content h4 {
font-family: @fonts-secondary;
}
& h1,
&-content h1 {
font-size: @content-h1-size;
}
.firstHeading {
margin: 0;
font-weight: 600;
overflow: inherit; // black magic to wrap in small screen devices
}
#siteSub {
display: block;
margin: .4rem 0 1.6rem;
color: @base-30;
font-size: @content-caption-size;
}
.mw-indicators {
float: right;
line-height: @content-line-height;
font-size: @content-body-size;
/* Ensure that this is displayed on top of .mw-body-content and clickable */
position: relative;
z-index: 1;
}
.mw-indicator {
display: inline-block;
zoom: 1;
*display: inline; // stylelint-disable declaration-block-no-duplicate-properties
}
.firstHeading,
#siteSub {
.content-center;
}
}
.mw-body-content {
position: relative;
.content-center;
line-height: @content-line-height;
font-size: @content-body-size;
z-index: 0;
color: @color-content-text;
#mw-content-text {
.mw-parser-output {
.mw-headline {
order: -1; // Make sure that header is the first
}
p {
overflow-wrap: break-word;
}
&>h1, &>h2 {
margin-top: @content-margin-top * 3;
}
&>h3, &>h4, &>h5, &>h6, &>p+p {
margin-top: @content-margin-top * 2;
}
&>h1+h2, &>h2+h3, &>h3+h4, &>h4+h5, &>h5+h6, &>p, &>table {
margin-top: @content-margin-top;
}
&>h1, &>h2, &>h3, &>h4, &>h5, &>h6 {
display: flex;
align-items: center;
justify-content: space-between;
}
a:not(.external) {
.link-content-text(@color-link-active);
&.new {
background-image: linear-gradient(to right, @color-link-new-active 0, @color-link-new-active 100%);
}
/* Doesn't work for some reason
&:visited {
background-image: linear-gradient(to right, @color-link-visited 0, @color-link-visited 100%)!important;
}
*/
}
.mw-editsection {
position: absolute;
display: flex;
margin: 0;
left: 0;
transform: ~'translateX(calc(-100% - @{margin-side}))';
a {
.resource-loader-icon-link-small;
padding: @margin-side / 4;
opacity: @opacity-icon;
transition: @transition-opacity;
text-indent: -9999px; // Hide text
background: 0!important; // Cancel above styles
&:before {
.resource-loader-icon;
background-size: contain;
display: block;
}
&:hover,
&:active,
&:focus {
opacity: @opacity-icon-active;
}
}
> span {
display: none;
}
}
.toc {
position: fixed;
max-width: 450px;
height: ~'calc( 100vh - @{header-height} * 2 - @{margin-side} * 4 )';
top: @header-height;
right: 0;
padding: @margin-side * 2 @margin-side;
color: #cccccc;
overflow: auto;
&::-webkit-scrollbar {
width: 0; // Hide bar on toc
}
@top: linear-gradient(white, rgba(255, 255, 255, 0.001));
@bottom: linear-gradient(rgba(255, 255, 255, 0.001), white);
&:before {
top: @header-height;
.gradient-overflow(@top);
}
&:after {
bottom: @header-height;
.gradient-overflow(@bottom);
}
.toctitle {
h2 {
color: @base-50;
font-size: @ui-menu-text-big;
}
}
.toctoggle {
display: none;
}
.toctext {
max-width: 250px;
display: flex;
}
a {
display: inline-block;
margin-top: @content-margin-top;
color: @base-50;
background: 0;
&:hover {
color: @base-30!important;
}
}
&level {
&-1 {
font-size: @content-h2-size * @toc-scaling;
}
&-2 {
font-size: @content-h3-size * @toc-scaling;
}
&-3 {
font-size: @content-h4-size * @toc-scaling;
}
&-4 {
font-size: @content-h5-size * @toc-scaling;
}
&-5 {
font-size: @content-h6-size * @toc-scaling;
}
}
.tocnumber {
.mixin-screen-reader-text;
}
&.tochidden {
> ul {
display: block!important; // Force display
}
}
> ul {
direction: rtl; // Hack to force right alignment, need to fix for RTL
margin: @content-margin-top / 2 3px 0 0;
position: relative;
z-index: 2;
border-right: 1px dashed;
display: block;
> li {
margin-right: -3px;
}
}
ul {
list-style-type: disc;
list-style-position: inside;
}
ul, .toctitle {
text-align: right;
}
}
}
}
p {
line-height: inherit;
}
h2 {
font-size: @content-h2-size;
}
h3 {
font-size: @content-h3-size;
}
h4 {
font-size: @content-h4-size;
}
h5 {
font-size: @content-h5-size;
}
h6 {
font-size: @content-h6-size;
}
table {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
color: @color-content-header;
font-weight: 400;
}
h5, h6 {
font-weight: 600;
}
ul {
margin: 0.8rem 0 0 1.6rem;
}
}
// Namespace button
#p-namespaces {
margin: 0 @negative-margin;
padding: @margin-side;
&-label {
.mixin-screen-reader-text;
}
ul{
margin: 1.6rem 0 0 0;
display: flex;
justify-content: flex-end; // Right align
li {
list-style: none;
a {
display: flex;
align-items: center;
padding: 0.4rem 0.8rem;
border: 1px solid @base-80;
background-color: @base-90;
transition: @transition-background-quick, @transition-box-shadow-quick;
.boxshadow(1);
&:hover {
background-color: @base-80;
.boxshadow(2);
}
span {
color: @base-20;
}
&:after {
order: -1;
content: "";
position: relative;
width: 14px;
height: 14px;
margin-right: 8px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.5;
}
}
}
}
}
.catlinks {
margin: 0 @negative-margin;
padding: @margin-side;
line-height: 1.2;
.mw-normal-catlinks {
font-size: 0; // Hide colon
> a {
display: block;
color: @color-content-caption;
font-size: @content-caption-size;
text-transform: uppercase;
letter-spacing: 1px;
}
> ul {
margin: 0;
padding-top: @content-margin-top;
display: flex;
flex-wrap: wrap;
font-size: @content-caption-size; // Reset font
li {
display: block;
margin: 0 @margin-side / 2 @margin-side / 2 0;
padding: 0;
border: 0;
&:first-of-type {
margin-left: 0;
}
a {
padding: @margin-side / 4 @margin-side / 2;
display: block;
border: 1px solid @base-90;
background-color: @base-90;
color: @color-content-caption!important; // Override other styles
.boxshadow(1);
transition: @transition-background-quick,
@transition-color-quick,
@transition-border-quick,
@transition-box-shadow-quick;
&:hover {
background-color: @color-link-active;
border-color: @color-link-active;
color:@base-100!important;
.boxshadow(2);
}
&.new:hover {
background-color: @color-link-new-active;
border-color: @color-link-new-active;
}
}
}
}
}
}
// TODO: Flexible value
@screen1: @page-width + @margin-side * 2;
@screen2: @footer-width;
@screen3: @footer-width + @margin-side * 8;
@media only screen and (max-width: @screen1) {
.catlinks,
#p-namespaces {
margin: 0!important; // somehow got overrided
padding: @margin-side 0;
}
}
@media only screen and (max-width: @screen2) {
.mw-editsection {
position: relative!important;
transform: none!important;
}
.catlinks,
#p-namespaces {
margin: 0 ~"calc((100vw - @{page-width}) / -2)";
}
}
@media only screen and (max-width: @screen3) {
.webfonts-changed .toc {
display: block!important; // Hide until everything is loaded
}
.mw-body-content #mw-content-text .mw-parser-output .toc {
display: none;
background: @base-100;
z-index: 1;
height: 100vh;
margin-top: -@header-height;
padding: 0;
.boxshadow(3);
&:before,
&:after {
content: unset; // Disable fade
}
.toctoggle {
display: block;
font-size: 0;
a {
position: fixed;
z-index: 7;
right: 0;
bottom: 0;
margin: @margin-side;
padding: 0 @margin-side / 2;
width: 39px;
height: 56px;
display: block;
background-color: @base-90;
border-radius: 100%;
.boxshadow(4);
transform: translate(0px, @header-height + @margin-side);
transition: @transition-opacity, @transition-transform, @transition-box-shadow-quick;
&:hover {
.boxshadow(5);
&:before {
opacity: @opacity-icon-active;
}
}
&:before {
.resource-loader-icon;
display: block;
opacity: @opacity-icon;
}
}
}
.toctitle h2 {
display: none;
}
&.tochidden {
> ul {
display: none!important; // Reset hide
transform: translateX(300px + @margin-side);
}
}
> ul {
margin: 0 @margin-side;
padding: @header-height + @margin-side 0 @header-height + @margin-side * 2; // More scroll spaces
transform: none;
transition: @transition-transform;
}
}
.nav-up {
~ .mw-body .mw-body-content #mw-content-text .mw-parser-output .toc .toctoggle a {
transform: none;
}
}
}
/*
// Logged in styles
.not-logged {
.mw-editsection {
display: none!important; // Hide edit icons when not logged in
}
}
*/

View file

@ -0,0 +1,219 @@
//
// Citizen - Footer Styles
// https://starcitizen.tools
//
#footer {
z-index: 9; // High enough so it covers the floating UI
overflow: hidden; //stop background hacks from destroying viewbox
position: relative;
direction: ltr;
margin-top: @margin-side * 2;
color: @color-footer-text;
background: @color-footer-background-50;
font-size: @ui-menu-text;
line-height: @footer-line-height;
a {
color: @color-footer-link;
&:hover,
&:active,
&:focus {
color: @color-footer-link-active;
text-decoration: none;
}
}
ul, li {
margin: 0;
}
li {
list-style: none;
}
div {
display: flex;
}
// Bless Flexbox for saving me from PHP nightmare
// OPTIMIZE: Implement nightmare
&-list {
margin: 0 auto!important;
max-width: @footer-width;
display: flex;
flex-wrap: wrap;
> li {
position: relative;
padding-left: @margin-side;
padding-right: @margin-side;
}
#lastmod {
order: 1;
padding-top: 12px;
padding-bottom: 12px;
display: flex;
a {
margin-right: 5px;
}
// Change icon
&:before {
margin-right: @icon-padding;
.resource-loader-list-icon;
opacity: @opacity-icon;
}
// Background
&:after {
content: "";
background-color: @color-footer-background-60;
height: 100%;
width: 600vw; // so long so it is always there
top: 0;
margin: 0 -100vw; // so long so you can't see the end
display: block;
z-index: -1;
position: absolute;
overflow: hidden; // now you literally can't see the end
}
}
#sitelogo {
order: 2;
}
#sitetitle {
order: 3;
width: 100%;
margin-top: @margin-side * 3;
margin-bottom: @margin-side / 2;
.mw-wiki-title {
color: @base-90;
font-size: 20px;
letter-spacing: 2px;
}
}
#sitedesc {
order: 4;
margin-top: @margin-side / 2;
}
#about {
order: 10;
}
#privacy {
order: 11;
}
#disclaimer {
order: 12;
}
#about,
#privacy,
#disclaimer {
margin: 0 @margin-side / 2;
padding: 0;
a {
padding: 10px;
display: block;
}
}
#sitedesc,
#copyright {
margin-bottom: @margin-side / 2;
width: 100%;
}
#copyright{
margin-top: @margin-side;
order: 20;
opacity: 0.5;
font-size: 12px;
}
}
&-container-icons {
margin-top: @margin-side * 2;
background-color: @color-footer-background-40;
#footer-bottom-container {
margin: 0 auto;
padding: @margin-side / 2 0;
width: 100%;
max-width: @footer-width;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
#mw-footer-tagline {
padding: 10px 20px;
}
#footer-icons {
padding: 0 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
a {
padding: 15px 10px;
height: 50px;
display: block;
opacity: 0.5;
transition: @transition-opacity;
&:before {
content:"";
.resource-loader-icon;
display: block;
background-size: contain;
}
&:hover {
opacity: 0.7;
}
img {
display: none; // hide placeholder images
}
}
}
}
}
// Icon styles
&-madebyico a {
width: 50px;
}
&-gdprcomplianceico a {
width: 50px;
}
&-monitoredbyico a {
width: 95px;
margin-bottom: -3px; //dirty fix
}
&-poweredbyico a {
width: 95px;
}
&-copyrightico a {
width: 110px;
}
}

View file

@ -0,0 +1,347 @@
/*
* 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;
ul {
list-style: none;
}
ul, li {
margin: 0;
display: block;
}
// Hide header when scroll
&.nav-up {
transform: translate(0px, -@header-height);
}
.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 {
.mw-wiki-title {
letter-spacing: 2px;
}
input {
&:checked {
// Show drawer
~ #mw-header-menu-drawer {
transform: none;
will-change: none;
}
// 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 0px;
transition: @transition-transform,
@transition-background-quick,
@transition-opacity;
&:first-child {
transform-origin: 0% 0%;
}
&:nth-last-child(2) {
transform-origin: 0% 100%;
}
}
}
&-drawer {
position: absolute;
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-wiki-title {
padding: @margin-side;
}
#p-nt-container {
overflow: auto;
flex-grow: 1;
}
#p-navigation-label {
.mixin-screen-reader-text;
}
#mw-user-links {
#p-personal {
margin-top: @margin-side / 2;
padding-top: @margin-side / 2;
border-top: 1px solid @base-80;
h3 {
.mixin-screen-reader-text;
}
#pt-userpage {
margin-bottom: @margin-side / 2;
a {
justify-content: unset;
&:after {
margin: 0;
width: @icon-box-size;
height: @icon-box-size;
}
}
span {
order: 2;
padding-left: @margin-side;
}
}
#pt-login {
a {
.button-blue;
&:hover,
&:active,
&:focus {
.button-blue-active;
}
}
}
#pt-logout {
a {
.button-red;
&:hover,
&:active,
&:focus {
.button-red-active;
}
}
}
}
}
h3 {
margin: @margin-side / 2 0 0 0;
padding: @margin-side / 2 @margin-side;
color: @color-item-header;
font-size: @ui-menu-header;
font-weight: normal;
letter-spacing: 1px;
}
span {
display: block;
}
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;
}
}
}
}
}
// Sidebar site title
#mw-sidebar-sitename {
position: fixed;
visibility: visible;
top: @sidebar-sitename-height + @header-height + @margin-side;
left: @margin-side;
font-size: 11px;
letter-spacing: 4px;
transform: translateY(0) rotate(-90deg);
transform-origin: top left;
transition: @transition-transform, @transition-opacity;
}
// Nav up stuff
.nav-up {
~ #mw-sidebar-sitename {
transform: translateY(-54px) rotate(-90deg);
}
#mw-header-menu-drawer-container {
height: 100vh;
}
}
// Bypass calculation
@mw-sidebar-sitename-max-width: @margin-side * 5 + @page-width;
@media only screen and (max-width: @mw-sidebar-sitename-max-width) {
#mw-sidebar-sitename {
z-index: -1; // remove link
opacity: 0; // hide visual
}
}
/*
* 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(-54px) rotate(90deg);
}
#mw-header-menu-drawer {
transform: translate(100%, 0);
}
}

View file

@ -0,0 +1,151 @@
//
// Citizen - Page Tools Styles
// https://starcitizen.tools
// TODO: RTL styles and more flexible
//
// Hide selected item
.mw-portlet li.selected {
.mixin-screen-reader-text;
}
#page-tools {
z-index: 5;
position: absolute;
margin-top: 1.3rem;
display: flex;
transform: translateX(~"calc( (100vw - @{page-width}) / 2 - @{margin-side} * 2 - 100%)"); // magic
h3 {
.mixin-screen-reader-text;
}
ul {
margin: 0;
display: flex;
list-style: none;
}
li {
margin: 0;
}
#p-views {
li > a {
.resource-loader-icon-link;
padding: 5px;
opacity: @opacity-icon;
transition: @transition-opacity;
&:hover {
opacity: @opacity-icon-active;
}
&:after {
.resource-loader-icon;
}
span {
.mixin-screen-reader-text;
}
}
}
#p-actions {
> nav {
.resource-loader-icon-link;
padding: 5px;
cursor: pointer;
// transition: @transition-opacity-quick; - Hidden behind the menu anyways
// TODO: Need to make value more flexible
ul {
z-index: -1;
pointer-events: none;
.menu-container;
position: absolute;
opacity: 0;
.boxshadow(4);
transition: @transition-opacity-quick, @transition-box-shadow-quick;
a {
.menu-item-link;
justify-content: space-between;
font-size: @ui-menu-text;
padding: @padding-menu-item;
&:after {
.resource-loader-list-icon;
margin-left: @icon-padding;
opacity: @opacity-icon;
}
&:hover,
&:active,
&:focus {
&:after {
opacity: @opacity-icon-active;
}
}
&:hover {
.menu-item-link-hover;
}
&:active {
.menu-item-link-active;
}
&:focus {
.menu-item-link-focus;
}
}
}
&:before {
.resource-loader-menu-icon;
opacity: @opacity-icon;
}
/*
* Hidden behind the menu anyways
* &:hover:after {
* opacity: @opacity-icon-active;
* }
*/
&:hover ul {
z-index: 5;
opacity: 1;
pointer-events: auto;
}
}
}
}
// TODO: Flexible value
@media only screen and (max-width: 1250px) {
#page-tools {
position: relative;
margin-left: @margin-side / 2;
float: right;
transform: none;
#p-actions > nav ul {
right: 0;
}
}
}
@media only screen and (max-width: 500px) {
#page-tools {
position: relative;
margin-left: 0;
transform: none;
float: none;
#p-actions > nav ul {
right: unset;
}
}
}

View file

@ -0,0 +1,166 @@
//
// Citizen - Search Styles
// https://starcitizen.tools
//
// TODO: Make it configurable and flexible
#site-search {
#p-search {
position: absolute;
z-index: -1; // Not interactable
margin: 7px 0 8px; // 1px h3 screen reader
top: 0;
right: @icon-box-size + @icon-padding * 2;
opacity: 0;
.boxshadow(4);
transition: @transition-opacity;
// Hide title
h3 {
.mixin-screen-reader-text;
}
// Search field
#searchInput {
padding: 12px 15px;
width: 0;
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
#searchGoButton {
.button-blue;
width: @icon-box-size + @icon-padding * 2;
height: 41px;
border: 0;
cursor: pointer; //somehow it is not pointer
&:hover,
&:active,
&:focus {
.button-blue-active;
}
}
}
#search-icon-container {
display: flex;
align-items: center;
justify-content: center;
height: inherit;
#search-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,
@transition-height,
@transition-opacity,
@transition-border-color;
&: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);
}
}
}
> input {
&:checked {
~ #p-search {
z-index: 5;
opacity: 1;
#searchInput {
width: 400px;
}
}
~ #search-icon-container #search-icon {
border-color: transparent;
&:before {
height: 18px;
transform: translate(1px, -11px);
}
&:after {
opacity: 1;
}
&:hover {
~ #search-icon-container #search-icon {
border-color: @base-0;
&:after {
opacity: 0;
}
}
}
}
&:hover {
~ #search-icon-container #search-icon {
border-color: @base-0;
&:after {
height: 12px;
}
}
}
}
&:hover {
~ #search-icon-container #search-icon {
opacity: @opacity-icon-active;
&:before {
height: 5px;
transform: translate(0px, 5px);
}
}
}
}
}
// RTL tweaks
.rtl {
#site-search {
#p-search {
left: @icon-box-size + @margin-side + @icon-padding;
right: unset;
}
}
}

View file

@ -0,0 +1,42 @@
//
// Citizen - Wikitable Styles
// https://starcitizen.tools
//
table.wikitable {
margin-top: @content-margin-top * 2!important;
background-color: transparent;
color: @base-20;
border: 0;
// TEMP solution to fix overflow
display: block;
max-width: 100vw;
overflow: auto;
tr {
vertical-align: top;
th {
padding: @margin-side / 2 @margin-side @margin-side 0;
border: 0;
border-top: 1px solid currentColor;
color: @base-30;
background-color: transparent;
font-size: @content-caption-size;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
}
td {
border: 0;
border-bottom: 1px solid @base-80;
padding: @margin-side / 2 @margin-side @margin-side / 2 0;
}
&:hover {
background-color: @base-90;
}
}
}

82
resources/font-face.less Normal file
View file

@ -0,0 +1,82 @@
// Font-face stylesheet
// Directory of hosted font
@font-directory: 'fonts/';
@font-face {
font-family: 'Titillium Web';
src: url('@{font-directory}TitilliumWeb-Regular.eot');
src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
url('@{font-directory}TitilliumWeb-Regular.eot?#iefix') format('embedded-opentype'),
url('@{font-directory}TitilliumWeb-Regular.woff2') format('woff2'),
url('@{font-directory}TitilliumWeb-Regular.woff') format('woff'),
url('@{font-directory}TitilliumWeb-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('@{font-directory}Roboto-Italic.eot');
src: local('Roboto Italic'), local('Roboto-Italic'),
url('@{font-directory}Roboto-Italic.eot?#iefix') format('embedded-opentype'),
url('@{font-directory}Roboto-Italic.woff2') format('woff2'),
url('@{font-directory}Roboto-Italic.woff') format('woff'),
url('@{font-directory}Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Titillium Web';
src: url('@{font-directory}TitilliumWeb-Bold.eot');
src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'),
url('@{font-directory}TitilliumWeb-Bold.eot?#iefix') format('embedded-opentype'),
url('@{font-directory}TitilliumWeb-Bold.woff2') format('woff2'),
url('@{font-directory}TitilliumWeb-Bold.woff') format('woff'),
url('@{font-directory}TitilliumWeb-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Titillium Web';
src: url('@{font-directory}TitilliumWeb-Italic.eot');
src: local('Titillium Web Italic'), local('TitilliumWeb-Italic'),
url('@{font-directory}TitilliumWeb-Italic.eot?#iefix') format('embedded-opentype'),
url('@{font-directory}TitilliumWeb-Italic.woff2') format('woff2'),
url('@{font-directory}TitilliumWeb-Italic.woff') format('woff'),
url('@{font-directory}TitilliumWeb-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('@{font-directory}Roboto-Bold.eot');
src: local('Roboto Bold'), local('Roboto-Bold'),
url('@{font-directory}Roboto-Bold.eot?#iefix') format('embedded-opentype'),
url('@{font-directory}Roboto-Bold.woff2') format('woff2'),
url('@{font-directory}Roboto-Bold.woff') format('woff'),
url('@{font-directory}Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('@{font-directory}Roboto-Regular.eot');
src: local('Roboto'), local('Roboto-Regular'),
url('@{font-directory}Roboto-Regular.eot?#iefix') format('embedded-opentype'),
url('@{font-directory}Roboto-Regular.woff2') format('woff2'),
url('@{font-directory}Roboto-Regular.woff') format('woff'),
url('@{font-directory}Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 6.04"><title>CCBYSA4</title><path d="M3,0A2.93,2.93,0,0,1,5.17.88a3.05,3.05,0,0,1,.65,1,3.17,3.17,0,0,1,0,2.32,2.94,2.94,0,0,1-.64,1,3.24,3.24,0,0,1-1,.67A3.08,3.08,0,0,1,3,6a2.94,2.94,0,0,1-1.14-.23,3.08,3.08,0,0,1-1-.66A3,3,0,0,1,.23,1.87a3,3,0,0,1,.66-1A2.86,2.86,0,0,1,3,0ZM3,.54a2.35,2.35,0,0,0-1.74.73,2.55,2.55,0,0,0-.54.81A2.29,2.29,0,0,0,.74,4a2.55,2.55,0,0,0,.54.81,2.73,2.73,0,0,0,.81.54A2.44,2.44,0,0,0,3,5.48a2.41,2.41,0,0,0,1-.19,2.54,2.54,0,0,0,.82-.54A2.32,2.32,0,0,0,5.49,3a2.51,2.51,0,0,0-.18-1,2.48,2.48,0,0,0-.53-.8A2.42,2.42,0,0,0,3,.54Zm0,2-.41.21a.38.38,0,0,0-.16-.19.3.3,0,0,0-.17,0c-.27,0-.41.17-.41.53A.67.67,0,0,0,2,3.41a.34.34,0,0,0,.3.14.37.37,0,0,0,.37-.26L3,3.48a.86.86,0,0,1-.33.35A.91.91,0,0,1,2.2,4a.89.89,0,0,1-.65-.25A.93.93,0,0,1,1.3,3a.93.93,0,0,1,.25-.69.89.89,0,0,1,.63-.25A.86.86,0,0,1,3,2.52Zm1.74,0-.4.21a.44.44,0,0,0-.16-.19.31.31,0,0,0-.18,0c-.27,0-.41.17-.41.53a.67.67,0,0,0,.11.39.39.39,0,0,0,.67-.12l.38.19a.88.88,0,0,1-.34.35.93.93,0,0,1-1.11-.12A1,1,0,0,1,3.05,3a.93.93,0,0,1,.25-.69.86.86,0,0,1,.63-.25A.85.85,0,0,1,4.73,2.52Z" style="fill:#fff"/><path d="M10,0a2.93,2.93,0,0,1,2.15.87A2.91,2.91,0,0,1,13,3a2.87,2.87,0,0,1-.86,2.12A3,3,0,0,1,10,6a2.94,2.94,0,0,1-2.12-.89A2.91,2.91,0,0,1,7,3,3,3,0,0,1,7.87.87,2.89,2.89,0,0,1,10,0Zm0,.54a2.39,2.39,0,0,0-1.75.73A2.41,2.41,0,0,0,7.53,3a2.34,2.34,0,0,0,.73,1.73A2.39,2.39,0,0,0,10,5.49a2.42,2.42,0,0,0,1.75-.74A2.28,2.28,0,0,0,12.47,3a2.38,2.38,0,0,0-.72-1.75A2.38,2.38,0,0,0,10,.54Zm.8,1.73V3.5h-.34V5H9.53V3.5H9.19V2.27a.17.17,0,0,1,.19-.19h1.24a.15.15,0,0,1,.13,0A.2.2,0,0,1,10.81,2.27ZM9.58,1.49A.37.37,0,0,1,10,1.07a.37.37,0,0,1,.42.42.37.37,0,0,1-.42.42A.37.37,0,0,1,9.58,1.49Z" style="fill:#fff"/><path d="M17,0a2.89,2.89,0,0,1,2.14.88A2.87,2.87,0,0,1,20,3a2.89,2.89,0,0,1-.86,2.12A3,3,0,0,1,17,6a2.94,2.94,0,0,1-2.13-.89A2.91,2.91,0,0,1,14,3,3,3,0,0,1,14.85.88,2.9,2.9,0,0,1,17,0Zm0,.54a2.35,2.35,0,0,0-1.74.73A2.38,2.38,0,0,0,14.51,3a2.34,2.34,0,0,0,.73,1.73A2.39,2.39,0,0,0,17,5.49a2.42,2.42,0,0,0,1.75-.74A2.3,2.3,0,0,0,19.46,3a2.39,2.39,0,0,0-.73-1.75A2.36,2.36,0,0,0,17,.54ZM15.64,2.59a1.39,1.39,0,0,1,.45-.86,1.31,1.31,0,0,1,.87-.3,1.46,1.46,0,0,1,1.14.46,1.65,1.65,0,0,1,.42,1.17,1.63,1.63,0,0,1-.44,1.16A1.48,1.48,0,0,1,17,4.68a1.34,1.34,0,0,1-.89-.31,1.31,1.31,0,0,1-.44-.87h.76c0,.37.24.55.66.55a.59.59,0,0,0,.51-.28,1.22,1.22,0,0,0,.2-.73,1.25,1.25,0,0,0-.18-.73.58.58,0,0,0-.51-.25c-.41,0-.63.18-.68.53h.22l-.6.6-.6-.6Z" style="fill:#fff"/></svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.61 6.64"><title>GDPR</title><polygon points="3.3 5.77 3.42 6.1 3.76 6.1 3.52 6.29 3.58 6.64 3.3 6.44 3.02 6.64 3.09 6.29 2.85 6.1 3.19 6.1 3.3 5.77" style="fill:#fff"/><polygon points="3.3 0 3.42 0.33 3.76 0.33 3.52 0.52 3.58 0.87 3.3 0.67 3.02 0.87 3.09 0.52 2.85 0.33 3.19 0.33 3.3 0" style="fill:#fff"/><polygon points="4.69 0.37 4.81 0.7 5.15 0.7 4.91 0.89 4.97 1.24 4.69 1.04 4.42 1.24 4.48 0.89 4.24 0.7 4.58 0.7 4.69 0.37" style="fill:#fff"/><polygon points="1.85 0.37 1.96 0.7 2.3 0.7 2.06 0.89 2.13 1.24 1.85 1.04 1.57 1.24 1.64 0.89 1.4 0.7 1.74 0.7 1.85 0.37" style="fill:#fff"/><polygon points="4.69 5.38 4.81 5.71 5.15 5.71 4.91 5.9 4.97 6.25 4.69 6.05 4.42 6.25 4.48 5.9 4.24 5.71 4.58 5.71 4.69 5.38" style="fill:#fff"/><polygon points="1.85 5.38 1.96 5.71 2.3 5.71 2.06 5.9 2.13 6.25 1.85 6.05 1.57 6.25 1.64 5.9 1.4 5.71 1.74 5.71 1.85 5.38" style="fill:#fff"/><polygon points="0.78 1.46 0.9 1.79 1.24 1.79 0.99 1.98 1.06 2.33 0.78 2.13 0.5 2.33 0.57 1.98 0.33 1.79 0.67 1.79 0.78 1.46" style="fill:#fff"/><polygon points="5.79 1.46 5.91 1.79 6.25 1.79 6 1.98 6.07 2.33 5.79 2.13 5.51 2.33 5.58 1.98 5.34 1.79 5.68 1.79 5.79 1.46" style="fill:#fff"/><polygon points="0.78 4.34 0.9 4.67 1.24 4.67 0.99 4.86 1.06 5.21 0.78 5.01 0.5 5.21 0.57 4.86 0.33 4.67 0.67 4.67 0.78 4.34" style="fill:#fff"/><polygon points="5.79 4.34 5.91 4.67 6.25 4.67 6 4.86 6.07 5.21 5.79 5.01 5.51 5.21 5.58 4.86 5.34 4.67 5.68 4.67 5.79 4.34" style="fill:#fff"/><polygon points="0.45 2.89 0.56 3.22 0.91 3.22 0.66 3.4 0.73 3.76 0.45 3.56 0.17 3.76 0.24 3.4 0 3.22 0.34 3.22 0.45 2.89" style="fill:#fff"/><polygon points="6.16 2.89 6.27 3.22 6.62 3.22 6.37 3.4 6.44 3.76 6.16 3.56 5.88 3.76 5.95 3.4 5.71 3.22 6.05 3.22 6.16 2.89" style="fill:#fff"/><path d="M3.24,4.76a.27.27,0,0,1-.19-.08L2,3.59a.27.27,0,0,1,0-.38.26.26,0,0,1,.37,0l.86.88,2.55-3a.27.27,0,0,1,.37,0,.26.26,0,0,1,0,.38L3.44,4.67a.29.29,0,0,1-.2.09Z" style="fill:#fff"/></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 22 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.36 6.03223"><title>Asset 4</title><path d="M0,2.73H.26625L.85886,5.01084H.86622L1.50055,2.73H1.811l.64292,2.28088L3.04894,2.73h.24539L2.57657,5.33475H2.31646L1.65637,3.00357H1.649L.99259,5.33475H.72267Zm3.61947,0h.22944V3.098H3.61947Zm0,.72266h.22944V5.33475H3.61947ZM4.29428,2.73h.23067V4.36424l1.0429-.91162h.30673l-.8061.69691.85886,1.18522H5.64392l-.74475-1.0245-.36809.30919v.71531h-.2368Zm1.82446,0h.22944V3.098H6.11874Zm0,.72266h.22944V5.33475H6.11874ZM7.5972,2.73h.27729L8.8953,5.33475H8.62906L8.31128,4.525H7.12606l-.3141.80978H6.54572Zm-.39507,1.584H8.22785L7.72971,2.9778Zm1.887-.86132h.211V3.806h.00737a.70548.70548,0,0,1,.67113-.41225c.573,0,.84659.46378.84659.99628s-.27361.99627-.84659.99627a.67115.67115,0,0,1-.654-.40857V6.03165H9.08916Zm.88953.13865c-.50672,0-.66009.37544-.66009.80242,0,.39016.17177.80241.66009.80241.438,0,.61347-.41225.61347-.80241S10.41671,3.59127,9.97869,3.59127ZM11.18723,2.73h.22943V3.098h-.22943Zm0,.72266h.22943V5.33475h-.22943Zm.64905.57667c.02208-.4417.3325-.63188.76315-.63188.33128,0,.69322.10184.69322.60611v1a.12272.12272,0,0,0,.135.13865A.21732.21732,0,0,0,13.5,5.1274V5.32a.61339.61339,0,0,1-.14968.01473c-.23312,0-.26993-.13128-.26993-.32759H13.073a.71775.71775,0,0,1-.68095.3828c-.346,0-.63065-.17177-.63065-.5509,0-.52881.51409-.54721,1.00977-.6061.19018-.02209.2957-.04663.2957-.25521,0-.31041-.22208-.38648-.49078-.38648a.44756.44756,0,0,0-.50427.438Zm1.22693.27728h-.00736c-.02822.054-.13128.07239-.19263.08344-.39016.06993-.876.06625-.876.43433a.39141.39141,0,0,0,.413.36852l.0066-.00044a.60482.60482,0,0,0,.65641-.59015Zm.68832-.85395h.21226v.4417h.00736a.69567.69567,0,0,1,.71162-.46746V3.6563a.64906.64906,0,0,0-.70058.67481V5.33475h-.23066Zm.93861,0h.24538L15.549,5.05746l.58034-1.60484H16.36l-.81837,2.17046c-.13128.31778-.20735.40857-.49077.40857a.59627.59627,0,0,1-.17546-.0184V5.82062a.79266.79266,0,0,0,.157.0184c.2049,0,.24539-.12269.32882-.29569l.07975-.21594ZM.0319,0H.27729L.88217,1.5349,1.48582,0h.24539V1.75084H1.56435V.238L.96069,1.75084H.80364L.20367.238V1.75084H.0319ZM3.18145,1.11774a.602.602,0,1,1-1.19626,0,.60185.60185,0,1,1,1.19626,0Zm-1.04167,0a.48148.48148,0,0,0,.44415.53985.48148.48148,0,0,0,.44415-.53985A.48036.48036,0,0,0,2.58393.57912.48036.48036,0,0,0,2.13978,1.11774Zm1.26988-.627h.1546V.70426a.42942.42942,0,0,1,.40489-.2552c.35458,0,.46255.18649.46255.49077v.81469H4.28324V.96069c0-.21717-.07116-.38157-.32145-.38157a.39655.39655,0,0,0-.39753.4331v.73617h-.1546ZM4.73108,0h.15459V.24539H4.73108Zm0,.49078h.15459V1.75084H4.73108Zm.6969,0h.25643V.61347H5.428v.85886c0,.10061.01472.1595.12269.16686a1.19971,1.19971,0,0,0,.13251-.00736v.13251H5.54576c-.2049,0-.27606-.06871-.2736-.28465V.61347H5.05131V.49078h.22453V.10552h.15459Zm1.61219.627a.602.602,0,1,1-1.19626,0,.60185.60185,0,1,1,1.19626,0Zm-1.04167,0a.48148.48148,0,0,0,.44415.53985.48148.48148,0,0,0,.44416-.53985A.48037.48037,0,0,0,6.44265.57912.48037.48037,0,0,0,5.9985,1.11774Zm1.27234-.627h.14232V.78156A.46869.46869,0,0,1,7.89167.46869V.62328a.43558.43558,0,0,0-.47115.45275v.67481H7.27084Zm.81837.66868a.449.449,0,0,0,.41716.49813.38524.38524,0,0,0,.39752-.32391h.1546a.51712.51712,0,0,1-.55212.454c-.40244,0-.57053-.30919-.57053-.66991,0-.33373.16809-.66868.57053-.66868s.573.35458.557.7104ZM8.9088,1.0294A.42434.42434,0,0,0,8.50637.57911a.44994.44994,0,0,0-.41716.45029Zm1.476.72144h-.14233V1.50545a.50181.50181,0,0,1-.45151.27729c-.38526,0-.56807-.31164-.56807-.66991S9.40571.44415,9.791.44415a.4515.4515,0,0,1,.43924.27729V0h.1546Zm-.59875-.09325c.32882,0,.44415-.27728.44415-.53985S10.11488.57912,9.78606.57912c-.29446,0-.4147.27606-.4147.53862S9.4916,1.65759,9.78606,1.65759ZM11.36022,0h.1546V.72635a.45151.45151,0,0,1,.438-.27729c.38525,0,.56929.31164.56929.66868s-.184.66991-.56929.66991a.4736.4736,0,0,1-.45029-.27729v.24539h-.14233Zm.59752.57911c-.32759,0-.44292.27607-.44292.53863s.11533.53985.44292.53985c.29447,0,.41471-.27728.41471-.53985S12.25221.57912,11.95774.57911ZM12.6252.49078h.16441l.41716,1.07847L13.59571.49078h.15459L13.20186,1.9447c-.08834.21348-.13987.27483-.33373.27483a.39976.39976,0,0,1-.12269-.01227V2.07721a.53655.53655,0,0,0,.10551.01227c.13742,0,.16932-.081.22085-.19877l.054-.14478Z" style="fill:#fff"/></svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 6.64"><title>PoweredByMediawiki</title><path d="M.44,6.56H0V3.3H.67l.89,2.52L2.44,3.3h.69V6.56H2.69l0-2.83-1,2.83H1.41L.4,3.73ZM5.5,5.1a1,1,0,0,0-.27-.48.69.69,0,0,0-.48-.17.66.66,0,0,0-.48.17A.89.89,0,0,0,4,5.1ZM4,5.5A.79.79,0,0,0,4.25,6a.69.69,0,0,0,.51.19.66.66,0,0,0,.38-.1.72.72,0,0,0,.27-.3h.48a1.36,1.36,0,0,1-.45.63,1.08,1.08,0,0,1-.68.21,1.09,1.09,0,0,1-.47-.09,1.14,1.14,0,0,1-.41-.31,1.29,1.29,0,0,1-.26-.42,1.38,1.38,0,0,1,0-1,1.47,1.47,0,0,1,.24-.37,1.35,1.35,0,0,1,.4-.31A1.29,1.29,0,0,1,4.74,4a1.19,1.19,0,0,1,.58.15,1.21,1.21,0,0,1,.44.43A1.46,1.46,0,0,1,5.92,5a2.28,2.28,0,0,1,0,.45V5.5Zm2.66-.19a.9.9,0,0,0,.24.63.76.76,0,0,0,.58.25A.71.71,0,0,0,8,5.94a.85.85,0,0,0,.24-.6A.92.92,0,0,0,8,4.71a.75.75,0,0,0-1.06-.06l-.06.06a.82.82,0,0,0-.24.63ZM8.24,6.56v-.3a1.36,1.36,0,0,1-.36.27,1.17,1.17,0,0,1-.45.09,1.15,1.15,0,0,1-.89-.37,1.32,1.32,0,0,1-.32-.91,1.43,1.43,0,0,1,.09-.5,1.33,1.33,0,0,1,.25-.41,1.1,1.1,0,0,1,.87-.38,1.05,1.05,0,0,1,.81.37V3.3h.43V6.56ZM9.57,3.81H9.12V3.3h.45ZM9.12,6.56V4.1h.45V6.56Zm1.26-1.22a.89.89,0,0,0,.24.62.75.75,0,0,0,.58.26A.74.74,0,0,0,11.74,6,.82.82,0,0,0,12,5.34a.92.92,0,0,0-.24-.63.7.7,0,0,0-.57-.26.72.72,0,0,0-.57.25A.79.79,0,0,0,10.38,5.34ZM12,6.58v-.3a1.07,1.07,0,0,1-.36.27,1,1,0,0,1-.44.09,1.14,1.14,0,0,1-.89-.37,1.29,1.29,0,0,1-.33-.93,1.43,1.43,0,0,1,.09-.5,1.33,1.33,0,0,1,.25-.41,1.27,1.27,0,0,1,.39-.3,1.12,1.12,0,0,1,.48-.1A1.12,1.12,0,0,1,12,4.4V4.1h.44V6.56Zm.6-3.26H13l.67,2.52.61-2.52h.38l.6,2.52.67-2.52h.45l-1,3.26H15l-.56-2.45-.57,2.43h-.4L12.56,3.3ZM17,3.83h-.42V3.3H17Zm-.42,2.75V4.1H17V6.56Zm.93,0V3.3h.41V5.24l.84-1.14h.47l-.86,1.17,1,1.29h-.54l-.94-1.25V6.56ZM20,3.81h-.42V3.3H20Zm-.42,2.75V4.1H20V6.56ZM.42,1H.64A.57.57,0,0,0,1,.89.29.29,0,0,0,1.11.63.29.29,0,0,0,1,.37.52.52,0,0,0,.66.28H.42Zm0,1.13H.11V0h.5L.94,0l.19.07a.47.47,0,0,1,.2.22.55.55,0,0,1,.08.31.57.57,0,0,1-.2.47.84.84,0,0,1-.55.17H.42Zm1.45-.77A.54.54,0,0,0,2,1.73a.51.51,0,0,0,.39.16.51.51,0,0,0,.38-.16A.59.59,0,0,0,3,1.33.6.6,0,0,0,2.8.89.51.51,0,0,0,2.41.74.5.5,0,0,0,2,.89a.55.55,0,0,0-.16.4Zm-.31,0A.88.88,0,0,1,1.63,1,.78.78,0,0,1,1.8.76a.69.69,0,0,1,.28-.2A.71.71,0,0,1,2.4.49a.92.92,0,0,1,.33.06A.77.77,0,0,1,3,.74.88.88,0,0,1,3.2,1a.78.78,0,0,1,.06.31.81.81,0,0,1-.06.31A.69.69,0,0,1,3,1.9a.83.83,0,0,1-.28.21.93.93,0,0,1-.33.07.8.8,0,0,1-.34-.07.83.83,0,0,1-.45-.45.91.91,0,0,1-.06-.32ZM4.44,1,4.09,2.11H3.92L3.36.52h.31L4,1.57l.33-1h.19l.32,1.05.34-1h.31L4.93,2.11H4.76ZM7,1.16A.6.6,0,0,0,6.8.86a.55.55,0,0,0-.66,0,.52.52,0,0,0-.2.3Zm-1.06.26a.51.51,0,0,0,.19.32.48.48,0,0,0,.35.12.51.51,0,0,0,.27-.06.58.58,0,0,0,.19-.19h.33a.83.83,0,0,1-.32.4A.86.86,0,0,1,5.86,1.9a1,1,0,0,1-.18-.27,1,1,0,0,1-.08-.29A.87.87,0,0,1,5.66,1,.8.8,0,0,1,5.84.75.74.74,0,0,1,6.11.56.78.78,0,0,1,6.44.49a.83.83,0,0,1,.41.1.89.89,0,0,1,.31.27.87.87,0,0,1,.1.24,1,1,0,0,1,0,.3v0Zm1.94.69H7.56V.52h.27V.7A.52.52,0,0,1,8,.54.54.54,0,0,1,8.22.49v.3A.44.44,0,0,0,7.93.9a.53.53,0,0,0-.08.32v.89Zm1.86-.95a.56.56,0,0,0-.19-.3A.49.49,0,0,0,9.21.75a.55.55,0,0,0-.33.11.55.55,0,0,0-.2.3Zm-1.06.26a.51.51,0,0,0,.19.32.5.5,0,0,0,.35.12.52.52,0,0,0,.44-.25H10a.87.87,0,0,1-.31.4.82.82,0,0,1-.48.14.92.92,0,0,1-.33-.06.88.88,0,0,1-.27-.19.8.8,0,0,1-.18-.27,1,1,0,0,1-.07-.29A.87.87,0,0,1,8.4,1,1,1,0,0,1,8.57.75.87.87,0,0,1,8.85.56a.85.85,0,0,1,.74,0A.89.89,0,0,1,9.9.86a1,1,0,0,1,.1.24,1,1,0,0,1,0,.3v0Zm1.86-.12a.57.57,0,0,0,.17.41.55.55,0,0,0,.4.16.53.53,0,0,0,.38-.16.53.53,0,0,0,0-.77.56.56,0,0,0-.79,0,.48.48,0,0,0-.16.39Zm1.11.81v-.2a.76.76,0,0,1-.26.18.6.6,0,0,1-.3.05.84.84,0,0,1-.86-.84A.85.85,0,0,1,10.28,1a.8.8,0,0,1,.18-.27.71.71,0,0,1,.27-.18.77.77,0,0,1,.33-.06.79.79,0,0,1,.58.23V0h.29V2.11ZM13.47.89h.1a.71.71,0,0,0,.35-.07A.28.28,0,0,0,14,.58a.25.25,0,0,0-.1-.21A.4.4,0,0,0,13.64.3h-.17Zm0,.94h.24A.54.54,0,0,0,14,1.75a.32.32,0,0,0,.1-.25A.32.32,0,0,0,14,1.23a.5.5,0,0,0-.32-.09h-.24v.68ZM13.62,0a.82.82,0,0,1,.53.15.5.5,0,0,1,.18.44.59.59,0,0,1-.05.23A.58.58,0,0,1,14.1,1a.44.44,0,0,1,.26.18.48.48,0,0,1,.08.31.66.66,0,0,1,0,.28.65.65,0,0,1-.17.2.57.57,0,0,1-.22.11,1.39,1.39,0,0,1-.35,0h-.49V0Zm.93.52h.31l.45,1.18L15.79.52h.32l-.89,2.1h-.31l.22-.56Z" style="fill:#fff"/></svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

View 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="M5 3h14v2H5zm0 6h14v2H5zm0 6h14v2H5zM1 3h2v2H1zm0 6h2v2H1zm0 6h2v2H1z"/>
</svg>

After

Width:  |  Height:  |  Size: 245 B

View 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>
article
</title>
<path d="M5 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 3h5v1H5zm0 2h5v1H5zm0 2h5v1H5zm10 7H5v-1h10zm0-2H5v-1h10zm0-2H5v-1h10zm0-2h-4V4h4z"/>
</svg>

After

Width:  |  Height:  |  Size: 327 B

View 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>
beaker
</title>
<path d="M13 7.61V3h1V1H6v2h1v4.61l-5.86 9.88A1 1 0 0 0 2 19h16a1 1 0 0 0 .86-1.51zm-4.2.88a1 1 0 0 0 .2-.6V3h2v4.89a1 1 0 0 0 .14.51l2.14 3.6H6.72z"/>
</svg>

After

Width:  |  Height:  |  Size: 311 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g><path d="M6 15h3v2H6z"/><path d="M6 9h5v2H6z"/><path d="M6 3h11v2H6z"/><circle cx="2" cy="4" r="2"/><circle cx="2" cy="10" r="2"/><circle cx="2" cy="16" r="2"/><path d="M15.5 13.556c-3.33 0-4.5 1.666-4.5 2.777V18h9v-1.667c0-1.11-1.17-2.777-4.5-2.777z"/><circle cx="15.444" cy="10.5" r="2.5"/></g></svg>

After

Width:  |  Height:  |  Size: 388 B

View 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>
trash
</title>
<path d="M17 2h-3.5l-1-1h-5l-1 1H3v2h14zM4 17a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5H4z"/>
</svg>

After

Width:  |  Height:  |  Size: 242 B

View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 245 240" style="enable-background:new 0 0 245 240;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</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
C114.7,108.9,110.1,103.9,104.4,103.9z M140.9,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
S146.6,103.9,140.9,103.9z"/>
<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.5l12.8,11.9l12.1,11.2
l21.5,19V40.6C210,29.2,200.8,20,189.5,20z M150.9,150.6c0,0-3.6-4.3-6.6-8.1c13.1-3.7,18.1-11.9,18.1-11.9c-4.1,2.7-8,4.6-11.5,5.9
c-5,2.1-9.8,3.5-14.5,4.3c-9.6,1.8-18.4,1.3-25.9-0.1c-5.7-1.1-10.6-2.7-14.7-4.3c-2.3-0.9-4.8-2-7.3-3.4c-0.3-0.2-0.6-0.3-0.9-0.5
c-0.2-0.1-0.3-0.2-0.4-0.3c-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.3c-22.1-0.7-30.5-15.2-30.5-15.2
c0-32.2,14.4-58.3,14.4-58.3c14.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.9
c10.7-4.7,19.2-6,22.7-6.3c0.6-0.1,1.1-0.2,1.7-0.2c6.1-0.8,13-1,20.2-0.2c9.5,1.1,19.7,3.9,30.1,9.6c0,0-7.9-7.5-24.9-12.7l1.4-1.6
c0,0,13.7-0.3,28.1,10.5c0,0,14.4,26.1,14.4,58.3C181.5,135.4,173,149.9,150.9,150.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,8 @@
<?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>
speech bubbles
</title>
<path d="M17 4v7a2 2 0 0 1-2 2H4v1a2 2 0 0 0 2 2h10l4 4V6a2 2 0 0 0-2-2zM6 10H0v6z"/>
<rect width="16" height="12" rx="2"/>
</svg>

After

Width:  |  Height:  |  Size: 292 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19.778 14.222H22v5.556A2.223 2.223 0 0 1 19.778 22H4.222A2.223 2.223 0 0 1 2 19.778v-5.556h2V20h16v-5.436l-.222-.342zM12 18l-5.611-7h11.11L12 18zm1-16v9h-2V2h2z"/></svg>

After

Width:  |  Height:  |  Size: 321 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.5 9.8l2.2-2.2c.4-.4.4-1.1 0-1.6L18 2.3c-.4-.4-1.1-.4-1.6 0l-2.2 2.2 5.3 5.3zm-6.4-4.1L2 16.7V22h5.3l11.1-11.1c-.1 0-5.3-5.2-5.3-5.2z"/></svg>

After

Width:  |  Height:  |  Size: 276 B

View file

@ -0,0 +1,8 @@
<?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>
eye
</title>
<path d="M10 14.5a4.5 4.5 0 1 1 4.5-4.5 4.5 4.5 0 0 1-4.5 4.5zM10 3C3 3 0 10 0 10s3 7 10 7 10-7 10-7-3-7-10-7z"/>
<circle cx="10" cy="10" r="2.5"/>
</svg>

After

Width:  |  Height:  |  Size: 305 B

View file

@ -0,0 +1,8 @@
<?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>
eye closed
</title>
<path d="M12.49 9.94A2.5 2.5 0 0 0 10 7.5z"/>
<path d="M8.2 5.9a4.38 4.38 0 0 1 1.8-.4 4.5 4.5 0 0 1 4.5 4.5 4.34 4.34 0 0 1-.29 1.55L17 14.14A14 14 0 0 0 20 10s-3-7-10-7a9.63 9.63 0 0 0-4 .85zM2 2L1 3l2.55 2.4A13.89 13.89 0 0 0 0 10s3 7 10 7a9.67 9.67 0 0 0 4.64-1.16L18 19l1-1zm8 12.5A4.5 4.5 0 0 1 5.5 10a4.45 4.45 0 0 1 .6-2.2l1.53 1.44a2.47 2.47 0 0 0-.13.76 2.49 2.49 0 0 0 3.41 2.32l1.54 1.45a4.47 4.47 0 0 1-2.45.73z"/>
</svg>

After

Width:  |  Height:  |  Size: 592 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><title>history</title><path d="M11.424 0C6.686 0 2.857 3.806 2.857 8.5H0l3.71 3.68.066.136L7.62 8.5H4.76c0-3.65 2.986-6.61 6.667-6.61 3.68 0 6.665 2.96 6.665 6.61 0 3.65-2.985 6.61-6.666 6.61a6.668 6.668 0 0 1-4.71-1.94l-1.35 1.337A8.553 8.553 0 0 0 11.426 17C16.16 17 20 13.194 20 8.5S16.162 0 11.424 0zm-1.037 5v4.524l3.904 2.298.66-1.1-3.192-1.877V5H10.39z"/></svg>

After

Width:  |  Height:  |  Size: 489 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><title>history</title><path fill="#fff" d="M11.424 0C6.686 0 2.857 3.806 2.857 8.5H0l3.71 3.68.066.136L7.62 8.5H4.76c0-3.65 2.986-6.61 6.667-6.61 3.68 0 6.665 2.96 6.665 6.61 0 3.65-2.985 6.61-6.666 6.61a6.668 6.668 0 0 1-4.71-1.94l-1.35 1.337A8.553 8.553 0 0 0 11.426 17C16.16 17 20 13.194 20 8.5S16.162 0 11.424 0zm-1.037 5v4.524l3.904 2.298.66-1.1-3.192-1.877V5H10.39z"/></svg>

After

Width:  |  Height:  |  Size: 502 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L2 12h3v9h4v-4.6c0-1.47 1.31-2.66 3-2.66s3 1.19 3 2.66V21h4v-9h3L12 3z"/></svg>

After

Width:  |  Height:  |  Size: 215 B

View 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>
image
</title>
<path d="M2 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-.17 13l4.09-5.25 2.92 3.51L12.92 8l5.25 7z"/>
</svg>

After

Width:  |  Height:  |  Size: 284 B

View 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>
info
</title>
<path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zM9 5h2v2H9zm0 4h2v6H9z"/>
</svg>

After

Width:  |  Height:  |  Size: 263 B

View file

@ -0,0 +1,8 @@
<?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>
link
</title>
<path d="M4.83 15h2.91a4.88 4.88 0 0 1-1.55-2H5a3 3 0 1 1 0-6h3a3 3 0 0 1 2.82 4h2.1a4.82 4.82 0 0 0 .08-.83v-.34A4.83 4.83 0 0 0 8.17 5H4.83A4.83 4.83 0 0 0 0 9.83v.34A4.83 4.83 0 0 0 4.83 15z"/>
<path d="M15.17 5h-2.91a4.88 4.88 0 0 1 1.55 2H15a3 3 0 1 1 0 6h-3a3 3 0 0 1-2.82-4h-2.1a4.82 4.82 0 0 0-.08.83v.34A4.83 4.83 0 0 0 11.83 15h3.34A4.83 4.83 0 0 0 20 10.17v-.34A4.83 4.83 0 0 0 15.17 5z"/>
</svg>

After

Width:  |  Height:  |  Size: 559 B

View 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>
lock
</title>
<path d="M16.07 8H15V5s0-5-5-5-5 5-5 5v3H3.93A1.93 1.93 0 0 0 2 9.93v8.15A1.93 1.93 0 0 0 3.93 20h12.14A1.93 1.93 0 0 0 18 18.07V9.93A1.93 1.93 0 0 0 16.07 8zM10 16a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm3-8H7V5.5C7 4 7 2 10 2s3 2 3 3.5z"/>
</svg>

After

Width:  |  Height:  |  Size: 388 B

View file

@ -0,0 +1,8 @@
<?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>
log out
</title>
<path d="M3 3h8V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8v-2H3z"/>
<path d="M13 5v4H5v2h8v4l6-5z"/>
</svg>

After

Width:  |  Height:  |  Size: 256 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6h8V7l4.75 5L11 17v-4H3z"/></svg>

After

Width:  |  Height:  |  Size: 255 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" id="svg10"><title id="title2">ellipsis</title><circle cx="-10" cy="10" r="2" id="circle4" transform="rotate(-90)"/><circle cx="-17" cy="10" r="2" id="circle6" transform="rotate(-90)"/><circle cx="-3" cy="10" r="2" id="circle8" transform="rotate(-90)"/></svg>

After

Width:  |  Height:  |  Size: 395 B

View 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>
move
</title>
<path d="M19 10l-4-3v2h-4V5h2l-3-4-3 4h2v4H5V7l-4 3 4 3v-2h4v4H7l3 4 3-4h-2v-4h4v2z"/>
</svg>

After

Width:  |  Height:  |  Size: 244 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#54595d" d="M12 13c-5.9 0-8 3-8 5v3h16v-3c0-2-2.1-5-8-5z"/><circle fill="#54595d" cx="12" cy="7.5" r="4.5"/></svg>

After

Width:  |  Height:  |  Size: 247 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M17 9a2 2 0 1 1 .001-4.001A2 2 0 0 1 17 9m0 10a2 2 0 1 1 .001-4.001A2 2 0 0 1 17 19m-5-5a2 2 0 1 1 .001-4.001A2 2 0 0 1 12 14M7 9a2 2 0 1 1 .001-4.001A2 2 0 0 1 7 9m0 10a2 2 0 1 1 .001-4.001A2 2 0 0 1 7 19M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg>

After

Width:  |  Height:  |  Size: 436 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M24 11.779a2.654 2.654 0 0 0-4.497-1.899c-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058a2.17 2.17 0 0 0 2.174 2.163c1.198 0 2.172-.97 2.172-2.163a2.171 2.171 0 0 0-4.193-.785l-4.329-1.015a.37.37 0 0 0-.44.249L11.755 7.82c-2.838.034-5.409.798-7.3 2.025a2.643 2.643 0 0 0-1.799-.712A2.654 2.654 0 0 0 0 11.779c0 .97.533 1.811 1.317 2.271a4.716 4.716 0 0 0-.086.857C1.231 18.818 6.039 22 11.95 22s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81A2.633 2.633 0 0 0 24 11.779zM6.776 13.595c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179L12 19.44l-.013.003c-1.777 0-3.028-.386-3.824-1.179a.369.369 0 0 1 0-.523.372.372 0 0 1 .526 0c.65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962a.373.373 0 0 1 .526 0 .37.37 0 0 1 0 .524zm-.189-3.095a1.58 1.58 0 0 1-1.581-1.574c0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg>

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7M5.516 8.227a7.454 7.454 0 0 0-.769 1.856l-2.746.417v3l2.746.417c.174.658.434 1.281.77 1.856l-1.65 2.238 2.123 2.121 2.238-1.648a7.455 7.455 0 0 0 1.855.769L10.5 22h3l.417-2.747a7.455 7.455 0 0 0 1.855-.77l2.239 1.65 2.12-2.123-1.647-2.237a7.454 7.454 0 0 0 .769-1.856L22 13.5v-3l-2.747-.417a7.454 7.454 0 0 0-.77-1.856l1.65-2.238-2.123-2.121-2.238 1.648a7.455 7.455 0 0 0-1.855-.769L13.5 2h-3l-.417 2.747a7.455 7.455 0 0 0-1.855.77l-2.239-1.65L3.87 5.99l1.647 2.237z"/></svg>

After

Width:  |  Height:  |  Size: 671 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M5 0v2h11v14h2V2a2 2 0 0 0-2-2H5z"/><path d="M13 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2zm-6.5-3.5l.41-1.09L8 15l-1.09-.41-.41-1.09-.41 1.09L5 15l1.09.41.41 1.09zm2.982-.949l.952-2.561 2.53-.964-2.53-.964L9.482 8.5l-.952 2.562-2.53.964 2.53.964.952 2.561zM6 10.5l.547-1.453L8 8.5l-1.453-.547L6 6.5l-.547 1.453L4 8.5l1.453.547L6 10.5z"/></svg>

After

Width:  |  Height:  |  Size: 462 B

View 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>
un-lock
</title>
<path d="M15 8V5s0-5-5-5a4.63 4.63 0 0 0-4.88 4h2C7.31 2.93 8 2 10 2c3 0 3 2 3 3.5V8H3.93A1.93 1.93 0 0 0 2 9.93v8.15A1.93 1.93 0 0 0 3.93 20h12.14A1.93 1.93 0 0 0 18 18.07V9.93A1.93 1.93 0 0 0 16.07 8zm-5 8a2 2 0 1 1 2-2 2 2 0 0 1-2 2z"/>
</svg>

After

Width:  |  Height:  |  Size: 400 B

View file

@ -0,0 +1,8 @@
<?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>
upload
</title>
<path d="M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z"/>
<path d="M10 1L5 7h4v8h2V7h4z"/>
</svg>

After

Width:  |  Height:  |  Size: 258 B

View file

@ -0,0 +1,8 @@
<?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>
user avatar
</title>
<path d="M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z"/>
<circle cx="10" cy="5.5" r="4.5"/>
</svg>

After

Width:  |  Height:  |  Size: 259 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="271.5 72.8 16 16"><path d="M273.59 72.8c-2.03 0-2.09 1.907-2.09 2.032V88.8h13.91c2.03 0 2.09-1.907 2.09-2.032V72.8h-13.91z"/><g fill="#fff" transform="matrix(.042 0 0 .042 259.047 68.752)"><circle cx="437" cy="234.1" r="28"/><circle cx="553.5" cy="234.1" r="28"/></g><path fill="#fff" d="M279.88 85.338c-1.8 0-3.533-.617-4.583-1.61-.248-.247-.248-.68 0-.927s.68-.243.928 0c.806.81 2.167 1.24 3.654 1.24 1.42 0 2.784-.43 3.59-1.24.244-.243.68-.243.924 0s.248.68 0 .93c-1.113.99-2.722 1.61-4.52 1.61z"/></svg>

After

Width:  |  Height:  |  Size: 595 B

View 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>
user talk
</title>
<path d="M18 0H2a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm-4 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 14 4zM6 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 6 4zm4 8c-2.61 0-4.83-.67-5.65-3h11.3c-.82 2.33-3.04 3-5.65 3z"/>
</svg>

After

Width:  |  Height:  |  Size: 387 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Visual Edit</title><path d="M19.5,9.8l2.2-2.2a1.2149,1.2149,0,0,0,0-1.6L18,2.3a1.2149,1.2149,0,0,0-1.6,0L14.2,4.5ZM13.1,5.7,2,16.7V22H7.3L18.4,10.9C18.3,10.9,13.1,5.7,13.1,5.7Z"/><path d="M18,21a1.8,1.8,0,1,1,1.8-1.8A1.8,1.8,0,0,1,18,21Zm0-4.6c-2.8,0-4,2.8-4,2.8S15.2,22,18,22s4-2.8,4-2.8S20.8,16.4,18,16.4Z"/><circle cx="18" cy="19.2" r="1"/></svg>

After

Width:  |  Height:  |  Size: 416 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path fill="#4a4f53" d="M1.092 73.695l38.906-67.39 38.91 67.39z"/><path fill="#fff" d="M43.528 57.71v7.104h-6.83V57.71h6.83zm-2.03-5.908h-3.275L36.47 39.55v-7.86h6.827v7.858l-1.8 12.254z"/></svg>

After

Width:  |  Height:  |  Size: 316 B

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 18.27L18.18 22l-1.64-7.03L22 10.24l-7.19-.61L12 3 9.19 9.63 2 10.24l5.46 4.73L5.82 22z"/></svg>

After

Width:  |  Height:  |  Size: 250 B

View 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>
what links here
</title>
<path d="M5 1a2 2 0 0 0-2 2v1c0 5 2 8 7 8V9l5 4-5 4v-3c-3.18 0-5.51-.85-7-2.68V17a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"/>
</svg>

After

Width:  |  Height:  |  Size: 301 B

1
resources/main.js Normal file
View file

@ -0,0 +1 @@
/* JavaScript for the Example skin */

154
resources/mixins.less Normal file
View file

@ -0,0 +1,154 @@
/*
* Citizen - Mixins
* https://starcitizen.tools
*/
// To hide objects, but keep them accessible for screen-readers
.hidden() {
position: absolute;
top: -9999px;
}
// Set content to be at the center
.content-center() {
max-width: @page-width;
margin-left: auto;
margin-right: auto;
}
// Prepare for RL icons
.resource-loader-icon-link() {
width: @icon-box-size;
height: @icon-box-size;
display: block;
}
.resource-loader-icon-link-small() {
width: @icon-size;
height: @icon-size;
display: block;
}
.resource-loader-icon() {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-repeat: no-repeat;
background-position: center;
}
.resource-loader-menu-icon() {
content: "";
position: absolute;
width: @icon-box-size;
height: @icon-box-size;
background-repeat: no-repeat;
background-position: center;
}
.resource-loader-list-icon() {
content: "";
position: relative;
flex-shrink: 0;
align-self: center;
width: @icon-size;
height: @icon-size;
background-repeat: no-repeat;
background-position: center;
}
// Material-like menu
.menu-container() {
padding: 8px 0;
background-color: @menu-background;
display: block;
}
.menu-item-link() {
display: flex;
color: @color-item-text!important;
transition: @transition-background-quick, @transition-color-quick;
}
.menu-item-link-hover() {
color: @color-item-text-hover!important;
background-color: @menu-item-link-hover;
}
.menu-item-link-active() {
color: @color-item-text-hover!important;
background-color: @menu-item-link-active;
}
.menu-item-link-focus() {
color: @color-item-text-hover!important;
background-color: @menu-item-link-hover;
}
// Button Styles
.button-blue() {
background-color: @accent-50;
color: @base-80!important;
transition: @transition-background-quick, @transition-color-quick;
}
.button-blue-active() {
background-color: @accent-10;
color: @base-100!important;
}
.button-red() {
background-color: @red-50;
color: @base-80!important;
transition: @transition-background-quick, @transition-color-quick;
}
.button-red-active() {
background-color: @red-30;
color: @base-100!important;
}
// Link styles
.link-content-text(@color) {
background-image: linear-gradient(to right, @color 0, @color 100%);
background-repeat: no-repeat;
background-size: 0 100%;
transition: @transition-background-quick, @transition-color-quick;
&:hover, &:active, &:focus {
outline: none;
color: white!important;
background-size: 100% 100%!important;
}
}
// Gradient overflow
.gradient-overflow(@position) {
content: "";
position: fixed;
z-index: 3;
width: 100%;
height: @margin-side * 2;
background: @position;
}
// Box-shadow
// https://codepen.io/sdthornton/pen/wBZdXq
.boxshadow(@level: 1){
& when (@level = 1) {
box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.06); // Cards
}
& when (@level = 2) {
box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575);
}
& when (@level = 3) {
box-shadow: 0 10px 20px rgba(0,0,0,0.0475), 0 6px 6px rgba(0,0,0,0.0575); // Drawer
}
& when (@level = 4) {
box-shadow: 0 14px 28px rgba(0,0,0,0.0625), 0 10px 10px rgba(0,0,0,0.055); // FAB, floating elements
}
& when (@level = 5) {
box-shadow: 0 19px 38px rgba(0,0,0,0.075), 0 15px 12px rgba(0,0,0,0.055); // Dialogs
}
}

9
resources/print.less Normal file
View file

@ -0,0 +1,9 @@
/* Styles for print view and printing */
/* Hide some extra stuff from print view (some of the navigation is already hidden automatically, but not all) */
.mw-indicators,
#p-logo,
#catlinks,
#mw-footer {
display: none;
}

11
resources/screen.less Normal file
View file

@ -0,0 +1,11 @@
/* Citizen */
@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';

View file

@ -0,0 +1,42 @@
/*
* Scroll up Header
* Modified from https://codepen.io/sajjad/pen/vgEZNy
*/
// Hide header on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.mw-header-container').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If scrolled down and past the navbar, add class .nav-up.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}

0
resources/scripts/ToC.js Normal file
View file

169
resources/variables.less Normal file
View file

@ -0,0 +1,169 @@
/*
* Citizen - Navigation Styles
* https://starcitizen.tools
*/
// Import MediaWiki-supplied mixins
@import "mediawiki.mixins";
/*
* Framework
*/
@html-font-size: 100%;
@margin-side: 20px;
@page-width: 860px;
@footer-width: 1290px;
@icon-size: 18px;
@icon-box-size: @icon-size + @icon-margin * 2;
@icon-margin: 3px;
@icon-padding: 15px;
@header-height: 56px;
@sidebar-sitename-height: 69px;
@drawer-width: 300px;
@padding-menu-item: 10px 15px;
@padding-menu-item-big: 10px 20px;
@negative-margin: (@footer-width - @page-width) / -2;
/*
* Colors
*/
// Wikimedia colors
@base-0: #000;
@base-10: #222;
@base-20: #54595d;
@base-30: #72777d;
@base-50: #a2a9b1;
@base-80: #eaecf0;
@base-90: #f8f9fa;
@base-100: #fff;
@accent-10: #2a4b8d;
@accent-50: #36c;
@red-30: #b32424;
@red-50: #d33;
@red-90: #fee7e6;
@green-30: #14866d;
@green-50: #00af89;
@green-90: #d5fdf4;
@yellow-30: #ac6600;
@yellow-50: #fc3;
@yellow-90: #fef6e7;
@menu-background: @base-100;
@opacity-icon: 0.3;
@opacity-icon-active: 0.5;
@color-item-text: @base-30;
@color-item-text-hover: @base-20;
@color-item-header: @base-10;
@menu-item-link-hover: @base-90;
@menu-item-link-active: @base-80;
@color-content-text: @base-20;
@color-content-header: @base-10;
@color-content-caption: @base-30;
@color-link: #3366cc;
@color-link-active: #5b84d6;
@color-link-new: #dd3333;
@color-link-new-active: #e35b5b;
@color-link-visited: #6b4ba1;
@color-link-visited-active: #886eb3;
// Citizen colors
@color-footer-background-40: #0f1418;
@color-footer-background-50: #131a21;
@color-footer-background-60: #1a252d;
@color-footer-text: #979c9f;
@color-footer-link: #cfdee8;
@color-footer-link-active: @base-80;
/*
/*
* Transitions
*/
@transition-color-quick: color 0.2s ease;
@transition-transform: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
@transition-transform-quick: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0);
@transition-width: width 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
@transition-height: height 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
@transition-background-quick: background 0.2s ease;
@transition-background: background 0.55s ease;
@transition-opacity: opacity 0.55s ease;
@transition-opacity-quick: opacity 0.2s ease;
@transition-border: border 0.55s ease;
@transition-border-quick: border 0.2s ease;
@transition-box-shadow: box-shadow 0.55s ease;
@transition-box-shadow-quick: box-shadow 0.2s ease;
@transition-border-color: border-color 0.55s ease;
/*
* Fonts
*/
/**
* System font stack for sans-serif fonts
*
* `Roboto` Default font, Android 4.0+ system font, OFL licensed
* `-apple-system` ('San Francisco' font) Support Safari 9+ macOS and iOS, Firefox macOS
* `BlinkMacSystemFont` ('San Francisco' font) Chrome 48+ macOS and iOS
* `Segoe UI` Windows Vista & newer
* `Oxygen` - Linux, KDE
* `Ubuntu` - Linux, Ubuntu
* `Cantarell` - Linux, GNOME
* `Helvetica, Arial, sans-serif` (Generic) Web fallback
* Note that standard `system-ui` value has resulted in unresolved side-effects in certain OS/language combinations as of now and is therefore not included.
*/
@fonts: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
/**
* Citizen font stack
*
* `Titillium Web` Futuristic, Closet to Univia Pro, OFL licensed
* `Univia Pro` - Fallback font if Univia Pro is present
* 'Monoid' - Code font, OFL licensed
* Fallback using primary fonts
*/
@fonts-secondary: 'Titillium Web', 'Univia Pro', @fonts;
/**
* System font stack for monospace fonts
*
* `Menlo` macOS 10.6+
* `Roboto Mono` - Android 4.0+
* `Consolas` Windows Vista & newer
* `Liberation Mono` Fedora, Ubuntu, … OFL licensed
* `'Courier New', monospace` (Generic) web font fallback
*/
@fonts-monospace: 'Menlo', 'Roboto Mono', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
/*
* Text hierarchy
*/
// Scaling for content text
@content-scaling: 0.625;
@toc-scaling: 0.75;
// Wikimedia scale - https://design.wikimedia.org/style-guide/visual-style_typography.html
@content-h1-size: 3.2rem * @content-scaling;
@content-h2-size: 2.4rem * @content-scaling;
@content-h3-size: 2.0rem * @content-scaling;
@content-h4-size: 1.8rem * @content-scaling;
@content-h5-size: 1.6rem * @content-scaling;
@content-h6-size: 1.6rem * @content-scaling;
@content-body-size: 1.6rem * @content-scaling;
@content-lead-paragraph-size: 1.8rem * @content-scaling;
@content-quote-primary-size: 2.0rem * @content-scaling;
@content-quote-secondary-size: 1.4rem * @content-scaling;
@content-caption-size: 1.3rem * @content-scaling;
@content-small-text-size: 1.3rem * @content-scaling;
@content-monospace-size: 1.4rem * @content-scaling;
@content-line-height: 1.6;
@content-margin-top: 0.8rem;
@ui-menu-text: 14px;
@ui-menu-text-big: 15px;
@ui-menu-header: 16px;
@footer-line-height: 1.4;

181
skin.json Normal file
View file

@ -0,0 +1,181 @@
{
"name": "Citizen",
"namemsg": "skinname-citizen",
"author": "alistair3149",
"url": "https://starcitizen.tools",
"descriptionmsg": "citizen-desc",
"namemsg": "skinname-citizen",
"license-name": "CC-BY-SA-4.0",
"type": "skin",
"requires": {
"MediaWiki": ">= 1.31.0"
},
"ValidSkinNames": {
"citizen": "Citizen"
},
"MessagesDirs": {
"Citizen": [
"i18n"
]
},
"ResourceModules": {
"skins.citizen": {
"class": "ResourceLoaderSkinModule",
"styles": {
"resources/screen.less": {
"media": "screen"
},
"resources/print.less": {
"media": "print"
},
"resources/font-face.less": {}
}
},
"skins.citizen.js": {
"scripts": [
"resources/main.js",
"resources/scripts/Header.js"
]
},
"skins.citizen.icons": {
"class": "ResourceLoaderImageModule",
"selector": "#citizen-ui-{name} > *:after",
"defaultColor": "#000",
"useDataURI": false,
"images": {
"discord": "resources/images/icons/discord.svg"
}
},
"skins.citizen.icons.ca": {
"class": "ResourceLoaderImageModule",
"selector": "#ca-{name} > *:after",
"defaultColor": "#000",
"useDataURI": false,
"images": {
"view": "resources/images/icons/article.svg",
"ve-edit": "resources/images/icons/ve-edit.svg",
"edit": "resources/images/icons/edit.svg",
"history": "resources/images/icons/history.svg",
"delete": "resources/images/icons/delete.svg",
"move": "resources/images/icons/move.svg",
"protect": "resources/images/icons/lock.svg",
"unprotect": "resources/images/icons/unLock.svg",
"watch": "resources/images/icons/eye.svg",
"unwatch": "resources/images/icons/eyeClosed.svg",
"talk": "resources/images/icons/discussion.svg",
"nstab-main": "resources/images/icons/article.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",
"defaultColor": "#000",
"useDataURI": false,
"images": {
"": "resources/images/icons/edit.svg",
".mw-editsection-visualeditor": "resources/images/icons/ve-edit.svg"
}
},
"skins.citizen.icons.n": {
"class": "ResourceLoaderImageModule",
"selector": "#n-{name} > *:after",
"defaultColor": "#000",
"useDataURI": false,
"images": {
"mainpage-description": "resources/images/icons/home.svg",
"recentchanges": "resources/images/icons/history.svg",
"randompage": "resources/images/icons/random.svg"
}
},
"skins.citizen.icons.t": {
"class": "ResourceLoaderImageModule",
"selector": "#t-{name} > *:after",
"defaultColor": "#000",
"useDataURI": false,
"images": {
"whatlinkshere": "resources/images/icons/whatlinkshere.svg",
"recentchangeslinked": "resources/images/icons/history.svg",
"upload": "resources/images/icons/upload.svg",
"specialpages": "resources/images/icons/specialpages.svg",
"print": "resources/images/icons/download.svg",
"permalink": "resources/images/icons/link.svg",
"info": "resources/images/icons/info.svg"
}
},
"skins.citizen.icons.pt": {
"class": "ResourceLoaderImageModule",
"selector": "#pt-{name} > *:after",
"defaultColor": "#000",
"useDataURI": false,
"images": {
"userpage": "resources/images/icons/userNormal.svg",
"mytalk": "resources/images/icons/userTalk.svg",
"preferences": "resources/images/icons/settings.svg",
"betafeatures": "resources/images/icons/beta.svg",
"watchlist": "resources/images/icons/watchlist.svg",
"mycontris": "resources/images/icons/contributions.svg",
"logout": "resources/images/icons/logOut.svg",
"createaccount": "resources/images/icons/userAvatar.svg",
"login": "resources/images/icons/logOut.svg"
}
},
"skins.citizen.icons.footer": {
"class": "ResourceLoaderImageModule",
"selector": "#footer #{name}:before",
"defaultColor": "#fff",
"useDataURI": false,
"images": {
"lastmod": "resources/images/icons/history_white.svg"
}
},
"skins.citizen.icons.badges": {
"class": "ResourceLoaderImageModule",
"selector": "#footer-{name}ico a:before",
"defaultColor": "#fff",
"useDataURI": false,
"images": {
"copyright": "resources/images/badges/CCBYSA4.svg",
"poweredby": "resources/images/badges/PoweredByMediawiki.svg",
"monitoredby": "resources/images/badges/MonitoredByWikiApiary.svg",
"gdprcompliance": "resources/images/badges/GDPR.svg",
"madeby": "resources/images/badges/MadeByTheCommunity.svg"
}
}
},
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteSkinPath": "Citizen"
},
"ResourceModuleSkinStyles": {
"citizen": {
"+ext.echo.styles.badge": "skinStyles/echo.styles.badge.less",
"+ext.relatedArticles.cards": "skinStyles/ext.relatedArticles.cards.less",
"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less",
"+ext.uls.pt": "skinStyles/ext.uls.pt.less",
"+ext.visualEditor.core": "skinStyles/ext.visualEditor.core.less"
}
},
"AutoloadClasses": {
"SkinCitizen": "includes/SkinCitizen.php",
"CitizenTemplate": "includes/CitizenTemplate.php"
},
"manifest_version": 1
}

View file

@ -0,0 +1,58 @@
/*
* Citizen - Echo Styles
* https://starcitizen.tools
*/
@import '../resources/variables.less';
// Styles for echo badges
#pt-notifications {
&-alert,
&-notice {
.mw-echo-notifications-badge {
top: -1000px; // Default was -1005px for some reason
margin: 0;
width: @icon-box-size + @icon-padding;
height: @header-height;
&:hover,
&:focus,
&:active {
&:before {
opacity: 0.6!important; // override all styles
}
}
// Icon tweaks
&:before {
opacity: 0.4;
background-position: center;
transition: @transition-opacity, @transition-transform;
}
// Badge tweaks
&:after {
background-color: @red-50;
font-size: 11px;
}
&.mw-echo-notifications-badge-all-read {
opacity: 0.75; // 0.75 * 0.4 = 0.3
}
}
}
// Rotate bell
&-alert {
.mw-echo-notifications-badge {
&:hover,
&:focus,
&:active {
&:before {
transform: rotateZ(20deg);
}
}
}
}
}

View file

@ -0,0 +1,28 @@
/*
* Citizen - Related Articles Styles
* https://starcitizen.tools
*/
@import '../resources/variables.less';
@import '../resources/mixins.less';
.ext-related-articles-card-list {
margin-top: 0;
padding-top: @content-margin-top; // Give room for shadows and translate
.ext-related-articles-card {
border: 0!important;
border-radius: 0!important;
.boxshadow(1);
transition: @transition-transform-quick;
&:hover {
.boxshadow(2);
transform:translateY(-2px);
}
> a:hover {
box-shadow: none;
}
}
}

View file

@ -0,0 +1,21 @@
/*
* Citizen - Related Articles Styles
* https://starcitizen.tools
*/
@import '../resources/variables.less';
.read-more-container {
margin: 0 auto;
max-width: @footer-width;
}
.ra-read-more {
padding: @margin-side;
h2 {
margin: 0;
padding: 0;
font-size: @content-caption-size; // In line with other styles
}
}

View file

@ -0,0 +1,25 @@
/*
* Citizen - ULS toggle Styles
* https://starcitizen.tools
*/
@import '../resources/variables.less';
// Styles for ULS icon
#pt-uls a.uls-trigger {
padding: 0;
display: block;
width: @icon-box-size + @icon-padding;
height: @header-height;
color: transparent; // Hide text
opacity: 0.6; // Replicate color of other icons
background-size: @icon-box-size;
background-position: center;
transition: @transition-opacity;
&:hover,
&:focus,
&:active {
opacity: 0.8;
}
}

View file

@ -0,0 +1,53 @@
/*
* Citizen - Visual Editor Styles
* https://starcitizen.tools
*/
@import '../resources/variables.less';
.ve-activated {
#mw-sidebar-sitename {
top: @sidebar-sitename-height + @header-height * 2 + @margin-side;
}
#page-tools {
z-index: 1; // Fix collision
pointer-events: auto;
opacity: 1;
}
}
// Fix weird compressed text bug
.ve-init-mw-tempWikitextEditorWidget {
width: 100%!important;
}
// Match animation
.ve-init-mw-desktopArticleTarget-toolbar-open > .oo-ui-toolbar-bar {
transition: @transition-transform!important;
}
// Make toolbar more mobile friendly, well at least I did by best
.ve-init-mw-desktopArticleTarget-toolbar {
margin: -20px -20px 20px -20px!important; // Bypass @media screen styles
}
// Stick with the header
.nav-down ~ .mw-body {
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
transform: translateY( @header-height );
}
}
.ve-ui-surface-placeholder, .ve-ui-surface .ve-ce-documentNode {
padding: 0;
}
.ve-init-mw-desktopArticleTarget .CodeMirror {
padding: 0;
line-height: @content-line-height; // Lining up syntax highlighter
}
.ve-init-mw-desktopArticleTarget .CodeMirror-code *, .ve-init-mw-desktopArticleTarget .ve-ui-mwWikitextSurface .ve-ce-paragraphNode {
line-height: @content-line-height; // Lining up syntax highlighter
}