From bfa3829b8b404aa1da78acdd5449c364fb2805c5 Mon Sep 17 00:00:00 2001 From: giuliof Date: Sun, 16 Jan 2022 13:48:55 +0100 Subject: [PATCH] Estensione presa direttamente da ArchWiki --- ArchLinux.hooks.php | 40 ++++++++ ArchNavBar.php | 33 ++++++ extension.json | 61 +++++++++++ modules/arch_common.less | 156 +++++++++++++++++++++++++++++ modules/arch_definitions.less | 22 ++++ modules/archnavbar/archicon.svg | 1 + modules/archnavbar/archlogo.svg | 1 + modules/archnavbar/archnavbar.less | 31 ++++++ modules/archnavbar/responsive.less | 48 +++++++++ modules/favicon.ico | Bin 0 -> 501 bytes modules/skins/monobook.less | 54 ++++++++++ modules/skins/vector.less | 111 ++++++++++++++++++++ 12 files changed, 558 insertions(+) create mode 100644 ArchLinux.hooks.php create mode 100644 ArchNavBar.php create mode 100644 extension.json create mode 100644 modules/arch_common.less create mode 100644 modules/arch_definitions.less create mode 100644 modules/archnavbar/archicon.svg create mode 100644 modules/archnavbar/archlogo.svg create mode 100644 modules/archnavbar/archnavbar.less create mode 100644 modules/archnavbar/responsive.less create mode 100644 modules/favicon.ico create mode 100644 modules/skins/monobook.less create mode 100644 modules/skins/vector.less diff --git a/ArchLinux.hooks.php b/ArchLinux.hooks.php new file mode 100644 index 0000000..376b423 --- /dev/null +++ b/ArchLinux.hooks.php @@ -0,0 +1,40 @@ +addModuleStyles('zzz.ext.archLinux.styles'); + } + + public static function onAfterFinalPageOutput(\OutputPage $outputPage) + { + // Insert the navigation right after the element + $out = preg_replace( + '/(]*>)/s', + '$1' . self::geArchNavBar($outputPage->getTitle()), + ob_get_clean() + ); + + ob_start(); + echo $out; + return true; + } + + private static function geArchNavBar(string $title): string + { + $config = MediaWikiServices::getInstance()->getConfigFactory()->makeConfig('archlinux'); + $archNavBar = $config->get("ArchNavBar"); + $archHome = $config->get("ArchHome"); + $archNavBarSelected = $config->get("ArchNavBarSelected"); + $archNavBarSelectedDefault = $config->get("ArchNavBarSelectedDefault"); + + ob_start(); + include __DIR__ . '/ArchNavBar.php'; + return ob_get_clean(); + } +} diff --git a/ArchNavBar.php b/ArchNavBar.php new file mode 100644 index 0000000..7336501 --- /dev/null +++ b/ArchNavBar.php @@ -0,0 +1,33 @@ + +
+ +
+
    + $url) { + if (($title == $name && in_array($name, $archNavBarSelected)) + || (!(in_array($title, $archNavBarSelected)) && $name == $archNavBarSelectedDefault)) { + $anbClass = ' class="anb-selected"'; + } else { + $anbClass = ''; + } + ?> +
  • >
    • +
+
+
diff --git a/extension.json b/extension.json new file mode 100644 index 0000000..5dfca3f --- /dev/null +++ b/extension.json @@ -0,0 +1,61 @@ +{ + "name": "ArchLinux", + "author": [ + "Pierre Schmitz" + ], + "url": "https://www.archlinux.org", + "description": "Arch Linux navigation and styles", + "license-name": "GPL-2.0+", + "type": "skin", + "AutoloadClasses": { + "MediaWiki\\Extensions\\ArchLinux\\Hooks": "ArchLinux.hooks.php" + }, + "Hooks": { + "BeforePageDisplay": [ + "MediaWiki\\Extensions\\ArchLinux\\Hooks::onBeforePageDisplay" + ], + "AfterFinalPageOutput": [ + "MediaWiki\\Extensions\\ArchLinux\\Hooks::onAfterFinalPageOutput" + ] + }, + "ResourceModules": { + "zzz.ext.archLinux.styles": { + "targets": [ + "mobile", + "desktop" + ], + "styles": [ + "archnavbar/archnavbar.less", + "archnavbar/responsive.less", + "arch_common.less" + ], + "skinStyles": { + "vector": "skins/vector.less", + "monobook": "skins/monobook.less" + }, + "position": "top" + } + }, + "ResourceFileModulePaths": { + "localBasePath": "modules", + "remoteExtPath": "ArchLinux/modules" + }, + "ConfigRegistry": { + "archlinux": "GlobalVarConfig::newInstance" + }, + "config": { + "ArchNavBar": { + "value": [] + }, + "ArchHome": { + "value": "" + }, + "ArchNavBarSelected": { + "value": [] + }, + "ArchNavBarSelectedDefault": { + "value": "" + } + }, + "manifest_version": 2 +} diff --git a/modules/arch_common.less b/modules/arch_common.less new file mode 100644 index 0000000..2a6beba --- /dev/null +++ b/modules/arch_common.less @@ -0,0 +1,156 @@ +/* + * Common stylesheets applied to all skins. + */ + +@import 'arch_definitions'; + +/* general styling */ +body { + background: @body-background-color; +} + +#content { + background: @content-background-color; + border: @content-border-style; + + table, + h1, + h2, + h3, + h4, + h5, + pre, + code, + tt { + color: @text-color; + } + + ul { + list-style-image: none; + } + + table { + border-collapse: collapse; + padding: 2px; + } + + td { + padding: 2px; + } + + pre:not([class*="CodeMirror"]) { + border: @code-border-style; + overflow: auto; + word-break: break-all; + white-space: pre-wrap !important; + } + + pre:not([class*="CodeMirror"]), + code, + tt { + background-color: @code-background-color; + font-family: monospace; + } + + code, + tt { + /* Inline-block prevents code from wrapping when starting too close to the end of a line; it also lets select the entire code line with a triple click */ + display: inline-block; + padding: 0 0.3em; + /* A border would be inherited by the default style sheets, but we don't want it */ + border-width: 0; + border-radius: 0; + } +} + +/* + * Hide logos in the footer + * (they can be disabled in LocalSettings.php by setting $wgFooterIcons) + */ +#footer-icons { + display: none; +} + +#footer { + color: @footer-text-color; +} + +/* article Table of Contents */ +#toc, +.toc, +.mw-warning, +.toccolours { + background-color: @toc-background-color; + border: @toc-border-style; +} + +/* Make all links coming from the rendered wiki markup bold */ +#bodyContent > div.mw-content-ltr a, +#bodyContent > div.mw-content-rtl a, +#wikiPreview > div.mw-content-ltr a, +#wikiPreview > div.mw-content-rtl a { + font-weight: bold; +} +#bodyContent #toc a, +#bodyContent .special li > a, +#bodyContent .special li span a, +#bodyContent #pagehistory a { + font-weight: normal; +} + +/* Colors of links in the content, MediaWiki navigation and the footer */ +#content, +header.mw-header li:not(.new), // Vector +#mw-navigation li:not(.new), // Legacy Vector +#mw-panel li:not(.new), // Legacy Vector +#column-one li:not(.new), // MonoBook +#footer { + a:not(.new) { + text-decoration: none; + color: @link-color-normal !important; + } + + a:not(.new):hover { + text-decoration: underline; + background-color: transparent; + color: @link-color-hover !important; + } + + a:active, a:focus, + /* a:hover overrides a:active, which we don't want' */ + a:active:hover, a:focus:hover { + color: @link-color-active !important; + } +} + +/* Color of visited links for content and left column + * (not for MediaWiki navigation elements above the page) */ +#content, +#mw-panel li:not(.new), // Legacy Vector +#p-navigation li:not(.new), // MonoBook +#p-tb li:not(.new) // MonoBook +{ + a:not(.new):visited { + color: @link-color-visited !important; + } +} + +/* Color for links to inexistent pages */ +a.new, +a.new:visited, +#mw-navigation li.new a, // Vector +#mw-navigation li.new a:visited // Vector +{ + color: @link-color-new !important; +} + +/* + * Use the same icon for all external links + * The default MediaWiki style assigns icons only to external links and not interwiki links, + * so we use this to have an icon for all links pointing to external sites. + */ +.mw-body-content a.external, +.mw-body-content a.extiw { + background: url(../../../resources/src/mediawiki.skinning/images/external-ltr.svg) center right no-repeat; + padding-right: 13px; +} diff --git a/modules/arch_definitions.less b/modules/arch_definitions.less new file mode 100644 index 0000000..2219a87 --- /dev/null +++ b/modules/arch_definitions.less @@ -0,0 +1,22 @@ +/* + * This file should contain only common LESS definitions, which need to be + * imported in other .less files. Common stylesheets do not belong here, they + * should be added to files present in the "styles" array in extension.json. + */ + +@body-background-color: #f6f9fc; +@content-background-color: #fff; +@content-border-width: 1px; +@content-border-style: @content-border-width solid #ccc; +@text-color: #222; +@code-background-color: #ebf1f5; +@code-border-style: 1px solid #bcd; +@toc-background-color: #f9faff; +@toc-border-style: 1px solid #d7dfe3; +@footer-text-color: #333; + +@link-color-normal: #07b; +@link-color-hover: #999; +@link-color-active: #e90; +@link-color-visited: #666; +@link-color-new: #b00; diff --git a/modules/archnavbar/archicon.svg b/modules/archnavbar/archicon.svg new file mode 100644 index 0000000..62a35f2 --- /dev/null +++ b/modules/archnavbar/archicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/archnavbar/archlogo.svg b/modules/archnavbar/archlogo.svg new file mode 100644 index 0000000..957a6b8 --- /dev/null +++ b/modules/archnavbar/archlogo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/archnavbar/archnavbar.less b/modules/archnavbar/archnavbar.less new file mode 100644 index 0000000..8988520 --- /dev/null +++ b/modules/archnavbar/archnavbar.less @@ -0,0 +1,31 @@ +/* + * ARCH GLOBAL NAVBAR + * + * We're forcing all generic selectors with !important + * to help prevent other stylesheets from interfering. + * + */ + +/* container for the entire bar */ +#archnavbar { height: 40px !important; padding: 10px 15px !important; background: #333 !important; border-bottom: 5px #08c solid !important; } + +#archnavbarlogo { float: left !important; margin: 0 !important; padding: 0 !important; height: 40px !important; width: 190px !important; } +html > body #archnavbarlogo { background: url('archlogo.svg') no-repeat !important; background-size: 190px 40px !important;} + +/* move the heading/paragraph text offscreen */ +#archnavbarlogo p { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; } +#archnavbarlogo h1 { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; } + +/* make the link the same size as the logo */ +#archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; } + +/* display the list inline, float it to the right and style it */ +#archnavbar ul { display: inline !important; float: right !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } +#archnavbar ul li { float: left !important; font-size: 14px !important; font-family: sans-serif !important; line-height: 45px !important; padding-right: 15px !important; padding-left: 15px !important; } + +/* style the links */ +#archnavbar ul#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; } +#archnavbar ul li a:hover { color: white !important; text-decoration: underline !important; } + +/* highlight current website in the navbar */ +#archnavbar ul li.anb-selected a { color: white !important; } diff --git a/modules/archnavbar/responsive.less b/modules/archnavbar/responsive.less new file mode 100644 index 0000000..a18f0b2 --- /dev/null +++ b/modules/archnavbar/responsive.less @@ -0,0 +1,48 @@ +@media (max-width: 600px) { + #anb-wiki { + display: none; + } +} + +@media (max-width: 680px) { + html > body #archnavbarlogo { + width: 40px !important; + margin-right: 5px !important; + background: url('archicon.svg') no-repeat !important; + background-size: 40px 40px !important; + } + + #archnavbar ul { + display: flex !important; + justify-content: space-between; + flex-wrap: nowrap; + overflow: hidden; + float: none !important; + } + + #archnavbar ul li { + padding: 0 !important; + float: none !important; + } +} + +@media (max-width: 830px) { + #anb-home, + #anb-start { + display: none; + } + + html > body #archnavbarlogo { + padding-right: 15px !important; + } + + #archnavbar { + padding-left: 5px !important; + padding-right: 5px !important; + } + + #archnavbar ul li { + padding-left: 5px !important; + padding-right: 5px !important; + } +} diff --git a/modules/favicon.ico b/modules/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8ef6f130aed9314b3c0d84662ecbec841c58978e GIT binary patch literal 501 zcmVbTPLq#!qoGBJPL<}UCxU*y71`;n5{F-^Z_q~tb42&?wU{e^y`zH%hH5TSy z*gVR*{a5E4AtnH8fUptly0N-L2%1Gls@cGueSEy~d6ZAuk|&FD!BcV@7}ZI$^ERI~ zz*BO!rzD<|bkgkP*=Otie+L}8^WmuLh*z!>%bt?-wDFt2dW)mHTi#&bt@p*iQw?L7 zNsalD8GLPw@EqAH6=nJUvGVt^1c9gO69qZrDuFQsU7d;F+OVm!Qb(IhV+rPNzMI+; zxN95j)c@M*(bL0pt|MAgu2We(J@;)S!KTjYZ<4m(_}T3*KLGCb=Ur_|8=dsRNP;km zcLEJydp>)V)T&4F*=^ud-fsitq*hJ-CAd7W4DfKEewv>K_yW|2t`J6X892kRJ`L1w z`^10?+#3o2t^$R;UIVTH9|r=Oz;$39r~u1h6rTVP(@QIRf!Dwj;7U@fzGRHTC_V@* r0*8TlF}<{M5qO@|s@5MjCg{K)aVVSN{kRIe00000NkvXXu0mjfyiez> literal 0 HcmV?d00001 diff --git a/modules/skins/monobook.less b/modules/skins/monobook.less new file mode 100644 index 0000000..1c4a7f2 --- /dev/null +++ b/modules/skins/monobook.less @@ -0,0 +1,54 @@ +@import '../arch_definitions'; + +h1 { + font-weight: bold; +} + +/* bump down the personal toolbar (top menu) */ +#p-personal { + top: 5px; +} + +/* bump down the action tabs (page, discuss, edit, etc.) */ +#p-cactions { + top: 27px; +} + +/* bump down the main content to make room for navbar */ +#content { + top: 10px; +} + +/* use the same color for the border of all tabs */ +#p-cactions { + li, li.selected { + border: @content-border-style; + } +} + +/* shrink the content just enough to show off the borders */ +div#globalWrapper { + width: 99%; + background-image: none !important; +} + +/* disable default mediawiki logo and close the gap it leaves behind */ +#p-logo { + display: none !important; +} +div#column-one { + padding-top: 36px; +} + +/* clean up the footer */ +div#footer { + background-color: transparent; + border-top: none; + border-bottom: none; + /* bring footer text inline with content */ + margin-left: 12.2em; + padding: 0em 1em; + ul { + margin-left: 0; + } +} diff --git a/modules/skins/vector.less b/modules/skins/vector.less new file mode 100644 index 0000000..98ef580 --- /dev/null +++ b/modules/skins/vector.less @@ -0,0 +1,111 @@ +@import '../arch_definitions'; +@import 'mediawiki.ui/variables'; + +#p-logo, +.mw-logo { + display: none; +} + +.mw-body { + & h1, + &-content h1, + &-content h2 { + font-family: sans-serif; + } +} + +nav.vector-menu-tabs { + padding-left: 0; + + // remove background with color gradient + ul, ul li { + background: none; + } + + li.selected { + // border around the tab matches content, at the bottom we override the + // content border with the background color + border: @content-border-style; + border-bottom-color: @content-background-color; + // background of the selected tab should match the content + background-color: @content-background-color; + + // remove background with the vertical separator + a { + background: none !important; + } + } + + // invisible border to align well with the selected tab + ul li { + border: @content-border-width; + } +} + +// New Vector; see https://www.mediawiki.org/wiki/Skin:Vector#wgVectorResponsive +body.skin-vector.skin--responsive { + nav.vector-menu-tabs { + li.selected { + margin-top: -@content-border-width; + border-bottom: none; + } + } + + // Let the left border of the selected tab overlap with the vertical bar + // coming from the background image of the previous tab. + li:not(:first-child).selected { + margin-left: -1 * @content-border-width; + } + + // Set background color + div.mw-page-container { + background-color: @body-background-color; + } + + // Disable sidebar's gradient as it conflicts with the background color + div#mw-panel { + background-image: none; + } +} + +// Legacy Vector +body.skin-vector-legacy { + div#mw-head, + .mw-header { + top: 65px; + } + + div#mw-panel { + top: 65px; + margin-top: 1em; + } + + #mw-page-base { + background: none; + } + + // fix vertical position of tabs + nav.vector-menu-tabs, nav.vector-menu { + margin-top: -2 * @content-border-width; + } + + nav.vector-menu-tabs { + // Let the left border of the selected tab overlap with the vertical bar + // coming from the background image of the previous tab. + li:not(:first-child).selected { + margin-left: -2 * @content-border-width; + } + } + + @media screen and ( max-width: @width-breakpoint-tablet ) { + // fix position of personal navigation bar + div#p-personal { + top: unset; + } + + // remove useless blank space at the bottom + div#mw-panel { + padding-top: 0; + } + } +}