update Argon Glow to v0.010

replaces pr #38

.gitattributes

@@ -0,0 +1,2 @@
+/.* export-ignore
+/_test export-ignore

.github/auto-comment.yml

@@ -0,0 +1,9 @@
+# auto replies used by probot/auto-comment
+
+issuesOpened: >
+  Thank you for opening this issue.
+
+  [CosmoCode](https://www.cosmocode.de) is a software company in Berlin providing services for wiki, app and web development. As such we can't guarantee quick responses for issues opened on our Open Source projects.
+
+  If you require certain features or bugs fixed, you can always hire us. Feel free to contact us at dokuwiki@cosmocode.de for an offer.
+

.gitlab-ci.yml

@@ -1,18 +0,0 @@
-sprintdoc-farm:
-  environment: sprintdoc-farm
-  tags:
-    - locally
-  only:
-    - live
-  script:
-    - fab deploy
-    
-
-cosmocode-farm:
-  environment: cosmocode-farm
-  tags:
-    - locally
-  only:
-    - live
-  script:
-    - fab deploy

LICENSE

@@ -0,0 +1,339 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Lesser General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                    GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+                            NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License along
+    with this program; if not, write to the Free Software Foundation, Inc.,
+    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) year name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  <signature of Ty Coon>, 1 April 1989
+  Ty Coon, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.

README

@@ -1,7 +1,27 @@
-sprintDoc Template (FIXME URL)
-for DokuWiki [https://www.dokuwiki.org]
-by Jana Deutschlaender <deutschlaender@cosmocode.de>
+sprintdoc template for DokuWiki
 
+modern, responsive template that integrates multiple plugins
 
-Version: see template.info.txt
-License: GPL2, see COPYING
+All documentation for this template can be found at
+https://www.dokuwiki.org/template:sprintdoc
+
+If you install this template manually, make sure it is installed in
+lib/tpl/sprintdoc/ - if the folder is called different it
+will not work!
+
+Please refer to http://www.dokuwiki.org/extensions for additional info
+on how to install extensions in DokuWiki.
+
+----
+Copyright (C) Jana Deutschlaender <dokuwiki@cosmocode.de>
+
+This program is free software; you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation; version 2 of the License
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+See the LICENSING file for details

README.md

@@ -1 +0,0 @@
-# sprintDoc Template for dokuwiki

Template.php

@@ -11,15 +11,19 @@ namespace dokuwiki\template\sprintdoc;
  */
 class Template {
 
-    /**
-     * @var array loaded plugins
-     */
+    /** @var array loaded plugins */
     protected $plugins = array(
         'sqlite' => null,
         'tagging' => null,
         'magicmatcher' => null,
+        'tplinc' => null,
+        'sitemapnavi' => null,
     );
 
+    /** @var string the type of special navigation to use */
+    protected $nav = '';
+
+
     /**
      * Get the singleton instance
      *
@@ -36,12 +40,26 @@ class Template {
      */
     protected function __construct() {
         $this->initializePlugins();
+        $this->initNavigationCookie();
 
         /** @var \Doku_Event_Handler */
         global $EVENT_HANDLER;
         $EVENT_HANDLER->register_hook('PLUGIN_TPLINC_LOCATIONS_SET', 'BEFORE', $this, 'registerIncludes');
     }
 
+    /**
+     * Load all the plugins we support directly
+     */
+    protected function initializePlugins() {
+        $this->plugins['sqlite'] = plugin_load('helper', 'sqlite');
+        if($this->plugins['sqlite']) {
+            $this->plugins['tagging'] = plugin_load('helper', 'tagging');
+            $this->plugins['magicmatcher'] = plugin_load('syntax', 'magicmatcher_issuelist');
+        }
+        $this->plugins['tplinc'] = plugin_load('helper', 'tplinc');
+        $this->plugins['sitemapnavi'] = plugin_load('helper', 'sitemapnavi');
+    }
+
     /**
      * Makes include position info available to the tplinc plugin
      *
@@ -51,6 +69,8 @@ class Template {
         $event->data['footer'] = 'Footer below the page content';
         $event->data['sidebarfooter'] = 'Footer below the sidebar';
         $event->data['sidebarheader'] = 'Header above the sidebar';
+        $event->data['navtop'] = 'Additional navigation items at the top';
+        $event->data['navbottom'] = 'Additional navigation items at the bottom';
     }
 
     /**
@@ -71,15 +91,81 @@ class Template {
     }
 
     /**
-     * Load all the plugins we support directly
+     * Sets a cookie to remember the requested special navigation
      */
-    protected function initializePlugins() {
-        $this->plugins['sqlite'] = plugin_load('helper', 'sqlite');
-        if($this->plugins['sqlite']) {
-            $this->plugins['tagging'] = plugin_load('helper', 'tagging');
-            $this->plugins['magicmatcher'] = plugin_load('syntax', 'magicmatcher_issuelist');
+    protected function initNavigationCookie() {
+        if ($this->plugins['sitemapnavi'] === null) return;
+        global $INPUT;
+
+        $nav = $INPUT->str('nav');
+        if($nav) {
+            set_doku_pref('nav', $nav);
+            $this->nav = $INPUT->str('nav');
+        } else {
+            $this->nav = get_doku_pref('nav', 'sidebar');
         }
-        $this->plugins['tplinc'] = plugin_load('helper', 'tplinc');
+    }
+
+    /**
+     * Return the navigation for the sidebar
+     *
+     * Defaults to the standard sidebar mechanism, but supports also the sitemapnavi plugin
+     *
+     * @return string
+     */
+    public function getNavigation() {
+        global $ID;
+        global $conf;
+
+        // id of the current sidebar, each sidebar must have its own state
+        $header = sprintf('<div id="sidebarId" class="%s"></div>', md5(page_findnearest($conf['sidebar'])));
+        // add tabs if multiple navigation types available
+        if ($this->plugins['sitemapnavi'] !== null) {
+            $header .= '<ul class="sidebar-tabs">';
+            $header .= '<li class="' . ($this->nav === 'sidebar' ? 'active' : '') . '">' .
+                '<a href="' . wl($ID, ['nav' => 'sidebar']) . '">'.tpl_getLang('nav_sidebar').'</a></li>';
+            $header .= '<li class="' . ($this->nav === 'sitemap' ? 'active' : '') . '">' .
+                '<a href="' . wl($ID, ['nav' => 'sitemap']) . '">'.tpl_getLang('nav_sitemap').'</a></li>';
+            $header .= '</ul>';
+        }
+
+        // decide what to show
+        if ($this->nav === 'sitemap') {
+            // site tree created by sitemapnavi plugin
+            $nav = '<nav class="nav-sitemapnavi" id="plugin__sitemapnavi">';
+            $nav .= $this->plugins['sitemapnavi']->getSiteMap(':');
+            $nav .= '</nav>';
+        } else {
+            // main navigation, loaded from standard sidebar, fixed up by javascript
+            $nav = '<nav class="nav-main">';
+            // immeadiately hide the navigation (if javascript available)
+            // it will be restyled and made visible again by our script later
+            $nav .= '<script type="application/javascript">
+                        document.getElementsByClassName("nav-main")[0].style.visibility = "hidden";
+                     </script>';
+
+            $nav .= $this->getInclude('navtop');
+            $nav .= tpl_include_page($conf['sidebar'], false, true);
+            $nav .= $this->getInclude('navbottom');
+            $nav .= '</nav>';
+        }
+
+        return $header . $nav;
+    }
+
+    /**
+     * Default class defining is the sidebar should collapse
+     *
+     * @return string
+     */
+    public function fullWidthClass() {
+        global $ACT;
+        // no auto collapsing? empty class
+        if (!tpl_getConf('autocollapse')) return '';
+        // mode show? empty class
+        if ($ACT === "show") return '';
+        // anything else? wide content
+        return 'wide-content ';
     }
 
     /**
@@ -88,7 +174,7 @@ class Template {
      * @return array
      */
     public function getMetaBoxTabs() {
-        global $lang;
+        global $lang, $INFO;
         $tabs = array();
 
         $toc = tpl_toc(true);
@@ -106,7 +192,7 @@ class Template {
                 'id' => 'spr__tab-tags',
                 'label' => tpl_getLang('tab_tags'),
                 'tab' => $this->plugins['tagging']->tpl_tags(false),
-                'count' => null, // FIXME
+                'count' => count($this->plugins['tagging']->findItems(array('pid' => $INFO['id']), 'tag')),
             );
         }
 
@@ -129,9 +215,10 @@ class Template {
      * @param array $attributes
      * @param int $w
      * @param int $h
+     * @param bool $crop
      * @return string
      */
-    public static function getResizedImgTag($tag, $attributes, $w, $h) {
+    public static function getResizedImgTag($tag, $attributes, $w, $h, $crop = true) {
         $attr = '';
         $medias = array();
 
@@ -154,7 +241,7 @@ class Template {
         if($media === '') return '';
 
         // replace the array
-        $media = ml($media, array('w' => $w, 'h' => $h, 'crop' => 1), true, '&');
+        $media = ml($media, array('w' => $w, 'h' => $h, 'crop' => (int) $crop), true, '&');
         $attributes[$attr] = $media;
 
         // return the full tag
@@ -177,32 +264,62 @@ class Template {
             $title = tpl_getLang('adjunct_start_logo_text') . $conf['title'];
         }
 
-        $desktop = self::getResizedImgTag(
-            'img',
-            array(
-                'class' => 'mobile-hide',
-                'src' => array(tpl_getConf('logo'), 'wiki:logo-wide.png', 'wiki:logo.png'),
-                'alt' => $title,
-            ),
-            0, 0
-        );
-        $mobile = self::getResizedImgTag(
-            'img',
-            array(
-                'class' => 'mobile-only',
-                'src' => array('wiki:logo-32x32.png', 'wiki:favicon.png', 'wiki:logo-square.png', 'wiki:logo.png', tpl_getConf('logo')),
-                'alt' => $title,
-            ),
-            32, 32
-        );
+        $logo = <<<HTML
+<img class="mobile-hide dark-only" src="/_media/wiki:logo-on.svg" alt="EH22 DEMO">
+<img class="mobile-hide light-only" src="/_media/wiki:logo-off.svg" alt="EH22 DEMO">
+HTML;
 
         // homepage logo should not link to itself (BITV accessibility requirement)
         if($linkit) {
-            tpl_link(wl(), $desktop, 'accesskey="h" title="[H]"');
-            tpl_link(wl(), $mobile, 'accesskey="h" title="[H]"');
+            tpl_link(wl(), $logo, 'accesskey="h" title="[H]"');
         } else {
-            echo $desktop;
-            echo $mobile;
+            echo $logo;
         }
     }
+
+    /**
+     * Add the current mode information to the hierarchical breadcrumbs
+     */
+    public function breadcrumbSuffix() {
+        global $ACT;
+        global $lang;
+        global $INPUT;
+        global $ID;
+        global $conf;
+        global $IMG;
+        if($ACT == 'show') return;
+
+        // find an apropriate label for the current mode
+        if($ACT) {
+            $label = tpl_getLang('mode_' . $ACT);
+            if(!$label) {
+                if(isset($lang['btn_' . $ACT])) {
+                    $label = $lang['btn_' . $ACT];
+                } else {
+                    $label = $ACT;
+                }
+            }
+        } else {
+            // actually we would need to create a proper namespace breadcrumb path here,
+            // but this is the most simplest thing we can do for now
+            if(defined('DOKU_MEDIADETAIL')) {
+                $label = hsc(noNS($IMG));
+            } else {
+                return;
+            }
+        }
+
+        if($ACT == 'admin' && $INPUT->has('page')) {
+            $link = wl($ID, array('do' => 'admin'));
+            echo '<bdi> : <a href="' . $link . '"><strong>' . $label . '</strong></a></bdi>';
+
+            /** @var \DokuWiki_Admin_Plugin $plugin */
+            $plugin = plugin_load('admin', $INPUT->str('page'));
+            if(!$plugin) return;
+
+            $label = $plugin->getMenuText($conf['lang']);
+        }
+
+        echo '<bdi><span class="curid"> : <strong>' . $label . '</strong></span></bdi>';
+    }
 }

conf/default.php

@@ -4,13 +4,8 @@
  *
  */
 
-$conf['logo']             = 'wiki:logo.png';
-$conf['mobile_logo']      = 'images/fav/favicon-32x32.png';
-
-$conf['logo_spacer']      = 'logo_spacer.png';
-
-$conf['discussionPage']   = 'discussion:@ID@';
-$conf['userPage']         = 'user:@USER@:';
-$conf['user_ns']          = 'user';
-$conf['hideTools']        = 0;
-$conf['tasks_page']       = 'dashboard';
+$conf['sidebar_sections'] = 'h1,h2,h3,h4,h5';
+$conf['header_layout'] = 'header-default';
+$conf['autocollapse'] = 1;
+$conf['closedwiki'] = 0;
+$conf['copyright'] = '';

conf/metadata.php

@@ -1,14 +1,23 @@
 <?php
-/*
- * configuration metadata
- *
- */
 
-$meta['logo']             = array('string');
-$conf['logo_spacer']      = array('string');
+$meta['sidebar_sections'] = array(
+                                'multichoice',
+                                '_choices' => array(
+                                    'h1',
+                                    'h1,h2',
+                                    'h1,h2,h3,h4,h5',
+                                    'li.level1 > .li',
+                                ),
+                            );
 
-$meta['discussionPage']   = array('string');
-$meta['userPage']         = array('string');
-$conf['user_ns']          = array('string');
-$meta['hideTools']        = array('onoff');
-$meta['tasks_page']       = array('string');
+$meta['header_layout'] = array(
+                            'multichoice',
+                            '_choices' => array(
+                                'header-default',
+                                'header-compact',
+                            ),
+                        );
+
+$meta['autocollapse'] = array('onoff');
+$meta['closedwiki'] = array('onoff');
+$meta['copyright'] = array('');

css/area_content.less

@@ -1,54 +1,53 @@
 /**
  * This file provides the design styles for the page content.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
+.picker {
+    z-index: 2; // position over .content
+}
+
 .content .row {
     > .col-xs-12 {
-        box-shadow: @box-shadow;
+        z-index: 1;
+
+        background-color: var(--color-background);
+
 
         #dokuwiki__content {
             position: relative;
-            z-index: 10;
 
-            &::before {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                z-index: -1;
-                height: @page-header_height;
-                box-sizing: border-box;
-                width: 100%;
-                background-color: @ini_background_page_header;
-                border-bottom: 1px solid @ini_border_light;
-            }
+            .page-content {
+                padding-top: @page-header_height;
 
-            #plugin__highlightparent {
-                display: block;
+                .msg-area + * {
+                    clear: both;
+                    padding-top: 1em; // as h1
+                }
             }
         }
     }
+    @media @screen_min-md {
+        > .col-xs-12 {
+            border-left: dashed 0.25em var(--color-shade-4);
+            border-radius: 0;
+        }
+    }
 }
 
-
 .main-content > .level2,
 .main-content > .level1,
 .main-content > .level3,
 .main-content > .level4,
 .main-content > .level5,
 .main-content > .level6 {
-    //padding-bottom: 1rem;
-
-    > p, > ul > li .li {
+    > p,
+    > ul > li .li {
         a {
             font-size: inherit;
         }
     }
 }
 
-
 .level1,
 .level2,
 .level3,

css/area_footer.less

@@ -1,20 +1,16 @@
 /**
  * This file provides the design styles for the page footer
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* no print */
-
 @media screen {
     .page-footer {
         min-height: @page-header_height;
-        background-color: @ini_background_page_header;
-        border-top: 1px solid @ini_border_light;
+        background-color: var(--color-background);
+        border-top: 1px solid var(--color-shade-4);
         border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
-        color: @ini_background_page_footer;
+        color: var(--color-shade-4);
         font-size: @font-size-default;
         text-align: right;
         padding: @margin-small @margin-default;
@@ -26,34 +22,34 @@
         }
 
         bdi {
+            display: inline-block;
+            max-width: 100%;
+            overflow-x: auto;
+            overflow-y: hidden;
             font-weight: bold;
+            vertical-align: bottom;
         }
     }
 
     #dokuwiki__footer {
         .main-footer {
             position: relative;
-            z-index: 2;
             box-sizing: border-box;
-            background-color: @ini_background;
+            background-color: var(--color-background);
+            margin-top: 5px; // for box-shadow of content
+            text-align: center;
         }
 
         p {
-            color: @ini_text_webframe;
+            color: var(--color-shade-4);
             font-size: @font-size-default;
             margin: 0;
         }
-
-        a {
-            color: @ini_nav_menu_color;
-        }
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1024px */
-
 @media @screen_min-md {
     #dokuwiki__footer {
         .col-xs-12 {
@@ -78,17 +74,16 @@
         &.showSidebar {
             #dokuwiki__footer {
                 .col-xs-12 {
-                    margin-left: @toggle-showsidebar_width;
+                    width: 100%;
+                    padding-left: @toggle-showsidebar_width;
                 }
             }
         }
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1023px */
-
 @media @screen_max-md {
     #dokuwiki__footer {
         .main-footer {
@@ -98,10 +93,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 768px */
-
 @media @screen_max-xs {
     .page-footer {
         padding-left: @margin-small;
@@ -118,10 +111,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 480px */
-
 @media @screen_max-xxs {
     #dokuwiki__footer {
         .main-footer {

css/area_footnotes.less

@@ -0,0 +1,55 @@
+/**
+ * This file provides the design styles for the footnotes.
+ */
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* footnotes section  */
+.dokuwiki div.footnotes {
+  div.fn {
+    margin-bottom: .2rem;
+    display: table;
+    vertical-align: top;
+
+    > sup,
+    .content {
+      display: table-cell;
+    }
+
+    > sup {
+      vertical-align: top;
+
+      // footnote anchor
+      a.fn_bot {
+        font-size: .86em;
+        padding-right: .2em;
+      }
+    }
+
+    .content {
+      vertical-align: top;
+      line-height: 135%;
+    }
+
+    // footnote text
+    div.content {
+      line-height: 135%;
+    }
+  }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* footnotes in content  */
+.main-content sup,
+.main-content > div > p sup,
+.main-content > div > ul > li .li sup {
+  a.fn_top {
+    font-size: .7rem;
+    font-weight: bold;
+    padding-right: .2em;
+  }
+}
+
+.insitu-footnote {
+  line-height: 130%;
+  z-index: 100;
+}

css/area_forms.less

@@ -1,18 +1,13 @@
 /**
  * This file provides the design styles for forms.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 /* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */
-
 form {
     display: inline;
     margin: 0;
     padding: 0;
 
-
     // multiline label
     fieldset > label.block > span:first-child {
         display: inline-block;
@@ -25,34 +20,6 @@ form {
             width: 48.5%;
         }
     }
-
-
-    // older version (history)
-    .dokuwiki & > .no > ul > li {
-        min-height: 2rem;
-        vertical-align: baseline;
-
-        a,
-        span,
-        img {
-            vertical-align: baseline;
-        }
-
-        img {
-            margin-left: 4px;
-            margin-right: 4px;
-        }
-
-        input[type="checkbox"] {
-            margin-bottom: .2rem;
-        }
-
-        span.user bdi {
-            a {
-                vertical-align: baseline;
-            }
-        }
-    }
 }
 
 fieldset {
@@ -92,8 +59,8 @@ meter,
 progress {
     font: inherit;
     font-weight: normal;
-    color: #333;
-    background-color: #fff;
+    color: var(--color-foreground);
+    background-color: var(--color-background);
     line-height: normal;
     margin: 0;
     vertical-align: middle;
@@ -123,13 +90,25 @@ textarea,
 select,
 keygen {
     min-height: @formfield_min-height;
-    border: 1px solid @ini_border;
-    box-shadow: inset 0 0 1px #eee;
+    border: 1px solid var(--color-shade-4);
     border-radius: @fix_border-radius;
     padding-left: .3rem;
     padding-right: .3rem;
 }
 
+input[type="radio"],
+input[type="checkbox"] {
+    min-height: 1rem;
+}
+
+input[type="radio"],
+input[type="checkbox"],
+input[type="image"] {
+    padding: 0;
+    border-style: none;
+    //box-shadow: none; :in ie picture and checkbox disappear
+}
+
 input:active,
 input:focus,
 textarea:active,
@@ -138,15 +117,7 @@ select:active,
 select:focus,
 keygen:active,
 keygen:focus {
-    border-color: #999;
-}
-
-input[type="radio"],
-input[type="checkbox"],
-input[type="image"] {
-    padding: 0;
-    border-style: none;
-    box-shadow: none;
+    border-color: var(--color-shade-4);
 }
 
 input[type="file"] {
@@ -154,7 +125,6 @@ input[type="file"] {
     padding-bottom: .1rem;
 }
 
-
 /* + + + + +  buttons  + + + + + */
 button {
     background-color: #eee;
@@ -177,7 +147,6 @@ button {
     }
 }
 
-
 /* + + +  all types of submit-buttons  + + + */
 form input[type=submit], // heredity 'adnewpage'
 a.button,
@@ -188,31 +157,33 @@ button[type=submit],
     cursor: pointer;
     box-shadow: none;
     background-image: none;
-    background-color: @ini_button_background;
-    border: 1px solid @ini_button_background;
-    border-radius: @fix_border-radius;
-    color: @ini_button_color;
+    background-color: var(--color-shade-1);
+    border: solid 0.1rem var(--color-shade-2);
+    border-radius: 0.5rem;
+    color: var(--color-foreground);
     vertical-align: top;
     padding: .3em @grid;
-    transition: @transition background-color, @transition color;
 
     &:hover,
     &:active,
     &:focus {
-        background-color: @ini_button_color;
-        color: @ini_button_background;
+        background-color: transparent;
+        color: var(--color-glow-primary);
+        border-color: var(--color-glow-primary);
+        transition: var(--transition-glow);
+        filter: var(--filter-glow-primary);
     }
 }
 
 button[type='reset'] {
-    min-height: 2rem;
+    min-height: @formfield_min-height;
     vertical-align: middle;
     padding: .3em 1rem;
 }
 
 input[type=submit],
 button[type=submit] {
-    min-height: 2rem;
+    min-height: @formfield_min-height;
     vertical-align: middle;
 
     &[disabled] {
@@ -235,7 +206,6 @@ button[type=submit] {
     }
 }
 
-
 /* + + +  all types of buttons not being submit-buttons  + + + */
 input.button,
 input[type=button] {
@@ -259,7 +229,6 @@ input[type=button] {
     }
 }
 
-
 /* + + +  all disabled buttons  + + + */
 input[disabled],
 button[disabled],
@@ -271,13 +240,11 @@ button[readonly],
 select[readonly],
 textarea[readonly] {
     cursor: auto;
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
-    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
-    background-color: #eee;
+    background-color: var(--color-background);
     opacity: .5;
     border: 1px solid @ini_border;
     border-radius: @fix_border-radius;
-    color: #333;
+    color: var(--color-shade-4);
     font-weight: normal;
     padding: .3em @grid;
     transition: @transition background-color, @transition color;
@@ -299,10 +266,8 @@ button::-moz-focus-inner {
     padding: 0;
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* media queries - Styles for auth forms */
-
 @media @screen_max-xs {
     .tpl_sprintdoc {
         #dw__login,

css/area_header.less

@@ -1,37 +1,31 @@
 /**
  * This file provides the design styles for the page header.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 #dokuwiki__header {
     @header-font-opacity: 1;
 
-/* + + +  wiki logo  + + + */
-    @media @screen_min-md {
-        div.claim {
-            display: table-cell;
-            height: 100%;
-            vertical-align: middle;
-        }
+    @media @screen_max-xs {
+        min-height: 120px;
+    }
 
+    /* + + +  wiki logo  + + + */
+    @media @screen_min-md {
         .logo {
             padding: 1rem 0 .3rem;
+            text-align: center;
 
             img {
-                height: 4.6rem;
+                height: 200px;
                 width: auto;
-                border-style: solid;
-                border-color: transparent;
-                border-width: 2px 0;
+                transition: transform 200ms ease-in-out;
             }
 
             a:hover,
             a:focus,
             a:active {
                 img {
-                    border-width: 0;
+                    transform: scale(1.05);
                 }
             }
         }
@@ -39,7 +33,13 @@
 
     @media @screen_max-md {
         .logo {
-            display: table-cell;
+            //display: table-cell;
+            text-align: center;
+            width: 100%;
+
+            img {
+                max-height: 200px;
+            }
 
             .mobile-only {
                 margin: .8rem 1rem .6rem 0;
@@ -47,8 +47,7 @@
         }
     }
 
-
-/* + + +  wiki title + claim  + + + */
+    /* + + + + +  DESKTOP  -  wiki title + claim  + + + + + */
     .main-title.desktop-only {
         @media @screen_min-md {
             display: table-cell;
@@ -70,20 +69,28 @@
                 display: block;
                 padding-bottom: 1rem;
             }
+
+            @media @screen_max-xs {
+                padding-right: (@toggle-size + @headericons-margin-xxs);
+            }
         }
     }
 
+    /* + + + + +  MOBILE  -  wiki title wrapper  + + + + + */
     .main-title:not([class*="desktop-only"]) {
         @media @screen_max-md {
             display: table-cell;
             vertical-align: middle;
         }
+
+        @media @screen_max-xs {
+            padding-right: (@toggle-size + @headericons-margin-xxs);
+        }
     }
 
-
-/* + + +  wiki title  + + + */
+    /* + + +  wiki title  + + + */
     p.title {
-        background-color: @ini_background;
+        background-color: var(--color-background);
         opacity: @header-font-opacity;
         color: @ini_text_webframe;
         line-height: @line-height-default;
@@ -100,8 +107,16 @@
         }
     }
 
+    /* + + + + +  DESKTOP  -  wiki claim, logo, title wrapper  + + + + + */
+    @media @screen_min-md {
+        div.claim {
+            display: table-cell;
+            height: 100%;
+            vertical-align: middle;
+        }
+    }
 
-/* + + +  wiki claim  + + + */
+    /* + + +  wiki claim  + + + */
     p.claim {
         opacity: @header-font-opacity;
         color: @ini_text_webframe;
@@ -113,40 +128,154 @@
         }
     }
 
-
-/* + + +  mobile nav togglelink  + + + */
+    /* + + +  mobile nav togglelink  + + + */
     .menu-togglelink {
-        margin: .45rem -(@very-small-spacing) 0 0;
+        position: relative;
+        margin: @headericons-margin-xxs -(@very-small-spacing) 0 0;
 
         a {
             .fontello();
             .icon-menu();
+            .btn-hover();
 
             display: block;
             min-height: @toggle-size;
             min-width: @toggle-size;
             box-sizing: border-box;
-            background-color: #fff;
             border: 1px solid @ini_border;
             border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-            color: @ini_nav_menu_color;
             font-size: 1rem;
             text-align: center;
             text-decoration: none;
             line-height: 1;
-            transition: @transition color, @transition background-color, @transition border-color;
 
             &::before {
                 font-size: 1.5rem;
                 margin: .1rem 0 0;
             }
+        }
+    }
 
-            &:hover,
-            &:active,
-            &:focus {
-                background-color: @ini_nav_menu_hover_bg;
-                border-color: @ini_nav_menu_hover_color;
-                color: @ini_nav_menu_hover_color;
+    /* + + +  mobile select for doku wiki tools   + + + */
+    .menu-tool-select {
+        position: relative;
+        z-index: 1000;
+        display: none;
+        @media @screen_max-xxs {
+            display: block;
+        }
+
+        select {
+            display:  block;
+            width:100%;
+        }
+    }
+
+    /* + + + + +  with magic matcher  + + + + + */
+    &.has-magicmatcher {
+        .logo {
+            @media @screen_min-md {
+                padding-top: 3rem;
+            }
+        }
+
+        .main-title.desktop-only {
+            @media @screen_min-md {
+                vertical-align: bottom;
+                padding-top: @height-context-bar;
+                padding-bottom: 1rem;
+            }
+
+            p.title {
+                @media @screen_min-md {
+                    margin-right: 16rem;
+                }
+            }
+
+            p.claim {
+                @media @screen_max-md {
+                    display: block;
+                    padding-bottom: 1rem;
+                }
+            }
+        }
+    }
+}
+
+/* + + + + +  layout option compact  + + + + + */
+.header-compact {
+    #dokuwiki__header {
+        min-height: 2.7rem;
+        margin-bottom: 0.5rem;
+
+        .main-title.desktop-only p.claim,
+        p.claim {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            max-width: 35em;
+        }
+
+        // desktop
+        @media @screen_min-md {
+            div.claim {
+                vertical-align: top;
+            }
+
+            .main-title.desktop-only {
+                vertical-align: top;
+            }
+
+            .main-title.desktop-only,
+            .logo {
+                padding-top: 0.4rem;
+            }
+
+            .logo img {
+                height: 3.6rem;
+            }
+        }
+
+        // mobile middle
+        @media @screen_max-md {
+
+            .main-title.desktop-only p.claim,
+            p.claim {
+                display: none;
+            }
+
+            .logo {
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 3rem;
+
+                .mobile-only {
+                    margin: .4rem;
+                    height: 1.75rem;
+                }
+            }
+
+            .main-title:not([class*="desktop-only"]) {
+                display: inline-block;
+                vertical-align: top;
+                padding-left: 1.75rem;
+            }
+
+            p.title {
+                font-size: 1rem;
+            }
+        }
+        
+        @media @screen_max-xxs {
+            min-height: 70px; // needed for menu select toolbar
+
+            .logo {
+                left: 2rem;
+            }
+
+            .menu-tool-select {
+                padding-top: .3rem;
             }
         }
     }

css/area_main-content-anchor.less

@@ -0,0 +1,36 @@
+#dokuwiki__content.main-content {
+    h1, h2, h3, h4, h5 {
+        a.anchor {
+            vertical-align: middle;
+            margin-left: 0.25em;
+            display: none;
+            position: absolute;
+
+            svg {
+                width: 1em;
+                height: 1em;
+                fill: var(--color-foreground);
+            }
+        }
+
+        &:hover {
+            a.anchor {
+                display: inline-block;
+                transition-property: filter, border-color;
+                transition-duration: 200ms;
+                transition-timing-function: ease-out;
+
+                &:hover {
+                    color: var(--color-glow-primary);
+                    filter: var(--filter-glow-primary);
+                    transition: var(--transition-glow);
+
+                    svg {
+                        fill: var(--color-glow-primary);
+                    }
+                }
+
+            }
+        }
+    }
+}

css/area_main-content-secedit.less

@@ -1,42 +1,32 @@
 /**
- * This styles the section editing buttons and highlighting
+ * This styles the "section editing button" (if not added by data-plugin)
  */
 
-
 #dokuwiki__content.main-content {
-    div.section_highlight {
-        clear: right;
-        background: repeating-linear-gradient(
-            -45deg,
-            @highlight-odd-ini_text,
-            @highlight-odd-ini_text 10px,
-            @highlight-even-ini_text 10px,
-            @highlight-even-ini_text 20px,
-        );
-        border-color: @ini_background_page_header;
-    }
-
-    .editbutton_section {
+    .secedit:not([class*="plugin"]):not([class*="table"]) {
         position: relative;
-        z-index: 2;
         top: 0;
         float: right;
-        margin-top: 0;
+        margin-top: 0; // for best position of edit-tab beneath table
 
         form div.no {
             button {
-                padding-right: 0;
+                margin-top: -.4rem;
+                margin-right: -0.4rem;
+                padding: 0.2rem 0.4rem;
             }
         }
 
+        // "section editing button"
         button {
+            display: flex;
+            align-items: center;
             background-color: transparent;
             color: transparent;
             border-color: transparent;
 
             &::after {
                 content: '';
-                float: right;
                 display: inline-block;
                 background: transparent url("svg.php?svg=pencil.svg&f=existing") center center no-repeat;
                 height: 1em;
@@ -46,20 +36,20 @@
                 border-radius: @ini_default_border_radius;
                 margin-left: @small-spacing;
                 margin-top: -1px;
+
+                color: var(--color-foreground);
+                mask-size: contain;
+                mask-position: center;
+                mask-repeat: no-repeat;
+                background: currentColor !important;
+
+                mask-image: url('img/pencil.svg');
             }
 
             &:hover,
             &:active,
             &:focus {
-                //background-color: @ini_existing;
-                color: @ini_existing;
-                //border-color: @ini_existing;
-
-                &::after {
-                    background-color: @ini_existing;
-                    background-image: url("svg.php?svg=pencil.svg&f=background_content");
-                    border-color: @ini_existing;
-                }
+                .fnActiveButton();
             }
         }
     }

css/area_main-content.less

@@ -1,15 +1,12 @@
 /**
  * This file provides the design styles for the main-content.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 #dokuwiki__content.main-content {
-    .level2 {
+    div[class^="level"] {
         p a.media {
             img {
-                border: 1px dotted @ini_background;
+                border: 1px dotted var(--color-background);
 
             }
             &:hover,
@@ -23,7 +20,7 @@
     }
 
     > div,
-    .section_highlight > div {
+    div[class^="level"] {
         > ul,
         > ol {
             &:not([class="tabs"]) > li {
@@ -42,16 +39,12 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */
-
-@media @screen_min-xlg {
-}
-
+// @media @screen_min-xlg {
+// }
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1199px */
-
-@media @screen_max-xlg {
-}
+// @media @screen_max-xlg {
+// }

css/area_main-sidebar-content.less

@@ -1,61 +0,0 @@
-/**
- * This file provides the design styles the non-navigational elements in the sidebar
- */
-
-
-#dokuwiki__aside {
-
-    // do not indent the first level of lists
-    // and use less indention in deeper levels
-    ul,
-    ol {
-        padding-left: 0;
-
-        ul,
-        ol {
-            padding-left: @margin-small;
-
-            li {
-                margin-left: 0;
-            }
-        }
-    }
-}
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* max-width: 1023px */
-
-@media @screen_max-md {
-    #dokuwiki__aside {
-        display: none;
-    }
-
-    body.show-mobile-sidebar {
-        #dokuwiki__aside {
-            display: block !important;
-            position: absolute;
-            left: 1.25rem; //left margin of content container
-            z-index: 200; // above all
-            box-shadow: @box-shadow-right-bottom;
-            min-width: 45%;
-            max-width: 90%;
-            height: auto;
-
-            &:after {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                width: 100%;
-                height: 100%;
-                background: @ini_background;
-                background: -webkit-linear-gradient(left, @ini_background, @ini_background_content);
-                background: linear-gradient(left, @ini_background, @ini_background_content);
-                z-index: 0;
-            }
-        }
-    }
-}

css/area_main-sidebar-nav.less

@@ -1,134 +1,250 @@
 /**
  * This file provides the design styles the navigational elements in the sidebar
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
- * @author Andreas Gohr <gohr@cosmocode.de>
  */
 
-
 #dokuwiki__aside {
     @icon-size: @font-size-big;
-    @menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
+    @menu-margin: @icon-size + @margin-small * 2;
 
-    nav > p,
-    .mmissuelist li,
-    .mmissuelist div {
-        color: @ini_nav_menu_color;
+    @media @screen_md-lg {
+        margin-left: -1.25rem;
+    }
 
-        &.noissue {
-            color: @ini_text_webframe;
+    @media @screen_max-md {
+        display: none;
+    }
 
-            * {
-                color: inherit;
-            }
-        }
+    ul {
+        padding-left: 0;
     }
 
     nav {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+
+        &.nav-main {
+            margin-bottom: @nav-margin;
+        }
+
+        > p {
+            color: var(--color-foreground);
+
+            &.noissue {
+                color: @ini_text_webframe;
+
+                * {
+                    color: inherit;
+                }
+            }
+        }
+
+        ul,
+        div.nav {
+            margin-bottom: 0;
+        }
+
         li {
-            color: @ini_nav_menu_color;
+            color: var(--color-foreground);
 
             > div {
                 color: @ini_text_webframe;
             }
-        }
-    }
 
-
-    /* jira itemlist */
-    .mmissuelist {
-        li {
-            &.noissue {
-                list-style-type: none;
+            &.toggler {
+                list-style: none;
                 margin-left: 0;
             }
+        }
 
-            a {
-                display: inline-block;
+        li:not([class]),
+        .li {
+            padding: .15em 0;
+
+
+            /* + + + + +  active  + + + + + */
+
+            span.curid {
+                font-weight: bold;
             }
         }
-
-        img {
-            vertical-align: bottom;
-            margin-right: .3rem;
-        }
-
-        .mm__status {
-            padding-left: .3rem;
-            padding-right: .3rem;
-        }
-
-        form {
-            vertical-align: text-top;
-        }
     }
 
-    > * {
-        margin-left: @menu-margin; // moves *all* sidebar content to the right
-    }
-
-    a {
+    a, label {
         &:link,
         &:visited {
             opacity: .9;
-            color: @ini_nav_menu_color;
+            color: var(--color-foreground);
         }
 
         * {
-            color: inherit;
+            color: var(--color-foreground);
         }
     }
 
-    // the toggle element
-    a.nav {
-        .display-flex();
-        .align-items();
+    /* + + +  the wrapper around the toggle to reserve space  + + + */
 
-        cursor: pointer;
-        height: @icon-size + @margin-small;
-        opacity: 1;
-        border: 1px solid transparent;
-        border-radius: @fix_border-radius;
-        color: @ini_nav_menu_color;
-        font-size: @font-size-head6;
-        font-weight: normal;
-        margin: -1px 0 (@font-size-head6 / 2) (@menu-margin * -1); // moves the toggles back to the left
-        transition: @transition color, @transition background-color, @transition border-color;
+    div.nav {
+        min-height: @icon-size + @margin-small;
+        background-color: var(--color-background);
+        border-radius: 0.5rem;
 
-        span {
-            display: inline-block;
-            vertical-align: middle;
-            color: inherit;
+        &.themeToggle input {
+            width: 0;
+            height: 0;
+            margin: 0;
+            padding: 0;
+            display: block;
+            opacity: 0;
         }
 
-        span.lbl {
-            flex-grow: 1;
+        // the toggle element
+        a, label {
+            border-radius: 0.5rem;
+            background-color: var(--color-shade-1);
+            transition: background-color 150ms;
+            color: var(--color-foreground);
+            font-size: 1.2em;
+            border: solid 0.1em var(--color-shade-1);
+            transition-property: filter, border-color;
+            transition-duration: 200ms;
+            transition-timing-function: ease-out;
+
+
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            opacity: 1;
+            font-weight: normal;
+            margin: 0 0 @very-small-spacing;
+            padding: 0.4rem 0.1rem;
+            text-decoration: none;
+
+            span {
+                display: inline-block;
+                vertical-align: middle;
+                color: inherit;
+            }
+
+            span.ico {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                i[data-icon] {
+                    font-size: 1.5rem;
+                }
+            }
+
+
+            /* + + +  submenu entry is active  + + + */
+            /* + + +  toggle: open  + + + */
+
+            &.is-active, &.is-open {
+                background-color: var(--color-shade-2);
+                border-color: var(--color-shade-4);
+                color: var(--color-foreground);
+
+                span.ico {
+                    &:after {
+                        background-color: currentColor;
+                    }
+
+                    strong {
+                        border-color: currentColor;
+                    }
+
+                    svg {
+                        path {
+                            fill: currentColor;
+                        }
+                    }
+                }
+            }
+        }
+
+        &:hover,
+        &:focus-within {
+            position: relative; // always show label, even with collapsed sidebar
+            z-index: 100;
+
+            a, label {
+
+                width: 100%;
+                background-color: transparent;
+                border: solid 0.1em var(--color-glow-primary);
+                text-decoration: none;
+                color: var(--color-glow-primary);
+                filter: var(--filter-glow-primary);
+                transition: var(--transition-glow);
+
+
+                span.ico {
+                    &:after {
+                        background-color: currentColor;
+                    }
+
+                    strong {
+                        border-color: inherit;
+                    }
+
+                    svg {
+                        path {
+                            fill: currentColor;
+                        }
+                    }
+                }
+            }
+
         }
 
         span.ico {
-            width: @menu-margin;
+            position: relative;
+            display: table-cell;
+            width: (@menu-margin - .1);
+            min-width: (@menu-margin - .1);
             height: @icon-size;
-            flex-grow: 0;
-            border-right: 1px solid @ini_nav_menu_color;
             text-align: center;
-            margin-right: @margin-small;
+            vertical-align: middle;
             color: inherit;
 
+            &::after {
+                @border-height: 1.5rem;
+
+                content: '';
+                position: absolute;
+                right: 0;
+                top: 50%;
+                bottom: auto;
+                height: @border-height;
+                width: 1px;
+                background-color: currentColor;
+                margin-top: -(@border-height / 2);
+
+                // wordbreak too late in IE 10
+                @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+                    top: 0;
+                    bottom: .5rem;
+                    height: 100%;
+                    margin: 0;
+                }
+            }
+
             // simple fake icon
             strong {
                 display: inline-block;
-                font-size: @icon-size * 0.5;
-                width: @icon-size * 0.9;
-                height: @icon-size * 0.9;
-                line-height: @icon-size * 0.9;
-                margin: @icon-size * 0.05;
-                vertical-align: baseline;
-                text-align: center;
-                color: inherit;
-                border: 2px solid @ini_nav_menu_color;
+                width: @icon-size * 0.98;
+                height: @icon-size * 0.98;
+                border: 2px solid currentColor;
                 border-top-right-radius: 50%;
                 border-bottom-left-radius: 50%;
-                transition: @transition border-color;
+                color: inherit;
+                font-size: @icon-size * 0.5;
+                line-height: @icon-size * 0.9;
+                vertical-align: baseline;
+                text-align: center;
+                margin: @icon-size * 0.05;
+                padding: 0 .05em .05em;
             }
 
             // real icon
@@ -137,90 +253,49 @@
                 height: @icon-size;
 
                 path {
-                    fill: @ini_nav_menu_color;
+                    fill: currentColor;
                     transition: @transition all;
                 }
             }
         }
 
-        &:hover,
-        &:focus,
-        &:active {
-            background-color: @ini_nav_menu_hover_bg;
-            border-color: @ini_nav_menu_hover_color;
-            color: @ini_nav_menu_hover_color;
-            text-decoration: none;
-
-            span.ico {
-                border-color: inherit;
-
-                strong {
-                    border-color: inherit;
-                }
-
-                svg {
-                    path {
-                        fill: @ini_nav_menu_hover_color;
-                    }
-                }
-            }
+        span.lbl {
+            display: table-cell;
+            font-size: inherit;
+            padding-left: .5rem;
         }
     }
 
-    // the panel (hidden by default)
+    /* + + + + +  the panel (hidden by default)  + + + + + */
+
     div.nav-panel {
         display: none;
         margin-top: .5rem;
+        margin-left: @margin-small;
 
         ul {
             margin-bottom: 1rem;
 
             ul {
                 margin-bottom: 0;
+                margin-left: 16px;
             }
         }
+
+        ul.toollist li {
+            margin-left: 0;
+        }
     }
 }
 
-
-/* + + + + + +  wide page content  border-bottom between a.nav (short width)  + + + + +
-.wide-content {
-    #dokuwiki__aside {
-        a.nav {
-            position: relative;
-
-            &::after {
-                content: '';
-                position: absolute;
-                bottom: -1px;
-                left: 0;
-                width: 100%;
-                height: 1px;
-                border-bottom: solid 1px @ini_border;
-            }
-
-            &:hover,
-            &:focus,
-            &:active {
-                &::after {
-                    display: none;
-                }
-            }
-        }
-    }
-} */
-
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */
-
 @media @screen_min-xlg {
     #dokuwiki__aside {
         nav {
             li:not([class]),
             .li {
                 font-size: @font-size-head6;
-                padding: .15em 0;
 
                 * {
                     font-size: inherit;
@@ -235,34 +310,51 @@
     }
 }
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1440px */
+@media @screen_max-xlg {
+    #dokuwiki__aside {
+        div.nav {
+            a {
+                margin-left: 0;
+            }
+        }
+    }
+}
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1023px */
-
 @media @screen_max-md {
-    // show when toggled
-    body.show-mobile-sidebar {
-        .search.main-sidebar {
-            display: block !important;
-            position: relative;
-
-            form {
-                margin-bottom: 1rem;
-
-                .no {
-                    display: block;
-                }
+    #dokuwiki__aside {
+        div.nav {
+            a {
+                margin-left: 0;
             }
         }
+    }
 
+    body.show-mobile-sidebar {
         #dokuwiki__aside {
+            display: block !important;
+            position: absolute;
+            left: 1.25rem; // left margin of content container
+            box-shadow: @box-shadow-right-bottom;
+            min-width: 45%;
+            max-width: 90%;
+            height: auto;
+            background: var(--color-background);
+
             > nav {
                 position: relative;
-                z-index: 2;
 
                 &:first-child {
                     margin-top: 1.2rem;
                 }
+
+                a,
+                label {
+                    font-size: @font-size-small;
+                }
             }
 
             a.nav {
@@ -271,29 +363,44 @@
                 border-left-width: 0;
             }
 
-            .nav-panel,
+            div.nav-panel,
             a.nav {
+                margin-top: 0;
                 padding-right: .8em;
             }
         }
     }
 }
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 768px */
+@media @screen_max-xs {
+    body.show-mobile-sidebar {
+        .page-wrapper > .tools {
+            top: 2.5rem;
+        }
+
+        #dokuwiki__aside {
+            left: 1.25rem;
+            right: 1.25rem;
+            width: auto;
+            max-width: 100%;
+            margin-top: -1rem;
+        }
+    }
+}
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* max-width: 1439px */
+/* max-width: 480px */
+@media @screen_max-xxs {
+    body.show-mobile-sidebar {
+        #dokuwiki__aside {
+            left: 4px;
+            right: 4px;
 
-@media @screen_max-xlg {
-    #dokuwiki__aside {
-        nav {
-            li:not([class]),
-            .li {
-                font-size: @font-size-default;
-                padding: .15em 0 .15em .25rem;
-
-                * {
-                    font-size: inherit;
-                    font-weight: inherit;
+            > nav {
+                a {
+                    font-size: @font-size-default;
                 }
             }
         }

css/area_main-sidebar-search.less

@@ -0,0 +1,241 @@
+/**
+ * This file provides the design styles for the quick search.
+ */
+
+.search.main-sidebar {
+    @main-ico-dummy: @font-size-big + @margin-small*2; //FIXME copied from area_main-sidebar-nav
+    @icon-size: @page-header_height;
+    @icon-search_font-size: @font-size-big;
+
+    @media @screen_md-lg {
+        margin-left: -(@menu-margin-lg);
+    }
+
+    p.toggleSearch a,
+    button[type="submit"] {
+        .hide-text-show-before();
+
+        position: relative;
+        width: @icon-size;
+        min-height: @icon-size;
+        overflow: visible;
+        background-image: none;
+        background-color: transparent; // fix
+        border: solid 1px transparent;
+        padding: 0;
+        transition: @transition color, @transition background-color, @transition border-color;
+        display: flex;
+        align-items: center;
+
+        &:hover,
+        &:focus,
+        &:active {
+            .fnActiveButton();
+
+            &::after{
+                background-color: var(--color-glow-primary);
+            }
+        }
+
+        &::before {
+            width: @icon-size;
+            height: 0.8em;
+            font-size: @icon-search_font-size;
+            text-align: center;
+            margin: 0;
+            color: var(--color-foreground);
+            content: '';
+            display: block;
+            mask-size: contain;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            background-color: currentColor;
+
+
+            mask-image: url('img/search.svg');
+        }
+    }
+
+    p.toggleSearch {
+        display: none;
+        padding: 0;
+
+        a {
+            min-width: (@toggle-showsidebar_width + 0.1); /* must be a bit a wider than @toggle-showsidebar_width to hide right border */
+            width: @main-ico-dummy;
+            border-radius: 0.5rem 0 0 0.5rem;
+            border-right: none;
+            background-color: var(--color-shade-1);
+            color: var(--color-foreground);
+            text-decoration: none;
+            box-sizing: border-box;
+
+            &::before {
+                width: 100%;
+                color: inherit;
+                text-align: center;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                border-right: none;
+                background-color: transparent;
+                border-color: var(--color-glow-primary);
+                color: var(--color-glow-primary);
+            }
+        }
+    }
+
+    button[type="submit"] {
+        position: absolute;
+        top: 1px;
+        bottom: 1px;
+        right: 0;
+        height: auto;
+        min-height: (@icon-size - .2);
+        color: @quicksearch-button-color;
+    }
+
+    /* + + +  form  + + + */
+    form {
+        position: relative;
+        display: block;
+        margin: 0 0 @margin-default;
+
+        .no {
+            display: block;
+
+            #qsearch__in {
+                width: 100%;
+                padding-left: 10px;
+                padding-right: @icon-size;
+            }
+        }
+
+        input {
+            min-height: @icon-size;
+            box-sizing: border-box;
+        }
+
+        button[type="submit"] {
+            border: solid 1px transparent;
+            margin-left: -(@icon-size);
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 15%;
+                bottom: 15%;
+                width: 1px;
+                left: -1px;
+                background-color: var(--color-shade-4);
+                transition: @transition background-color;
+            }
+        }
+
+        div.ajax_qsearch {
+            box-shadow: none;
+            background-color: var(--color-shade-1);
+            padding: 0;
+            z-index: 300; // otherwise hidden behind sidebar in mobile view
+            border: solid 0.1em var(--color-shade-4);
+            border-radius: 0.5rem;
+
+            > strong {
+                color: var(--color-foreground);
+                padding: 0.25rem 0.5rem;
+                border-bottom: solid 0.1em var(--color-shade-4);
+            }
+
+            ul li {
+                color: var(--color-foreground);
+
+                a {
+                    display: block;
+                    padding: 0.25rem 0.5rem;
+                    overflow: hidden;
+                    color: inherit;
+                    text-overflow: ellipsis;
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background-color: var(--color-shade-2);
+                    }
+                }
+            }
+        }
+    }
+
+    /* + + + + +  suggestionlist  + + + + + */
+    #qsearch__out {
+        left: auto;
+        top: auto;
+        width: 100%;
+        min-width: 20rem;
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* min-width: 1024px */
+@media @screen_min-md {
+
+    // wide page content
+    .wide-content {
+        .search.main-sidebar {
+            p.toggleSearch {
+                position: relative;
+                display: block;
+                float: left;
+                width: auto;
+            }
+
+            form {
+                input {
+                    border: 0 none;
+                }
+
+                .no {
+                    #qsearch__in {
+                        width: 0;
+                        padding: 0;
+                        margin: 0;
+                    }
+
+                    button[type="submit"] {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1023px */
+@media @screen_max-md {
+
+    // show when toggled
+    body.show-mobile-sidebar {
+        #dokuwiki__aside {
+            padding: 0 1rem;
+            border-radius: 0.5rem;
+        }
+
+        p.toggleSearch {
+            display: none !important;
+        }
+
+        .search.main-sidebar {
+            display: block !important;
+            position: relative;
+            margin-left: -1px;
+            margin-right: -1px;
+
+            form {
+                margin-bottom: 1rem;
+            }
+        }
+    }
+}

css/area_main-sidebar-tabs.less

@@ -0,0 +1,33 @@
+/**
+ * This file provides the design styles for tab list in sidebar
+ */
+
+/* default view */
+#dokuwiki__aside ul.sidebar-tabs {
+    margin-top: 0;
+    margin-bottom: @nav-margin;
+
+    border-bottom: 1px solid @ini_nav_menu_color;
+
+    white-space: nowrap;
+
+    li {
+        display: inline-block;
+        border: 1px solid @ini_nav_menu_color;
+        padding: 0.25em 0.5em;
+        margin-bottom: -1px;
+        margin-left: 0.5em;
+        border-top-right-radius: @fix_border-radius;
+        border-top-left-radius: @fix_border-radius;
+
+        &.active {
+            border-bottom: 1px solid var(--color-background);
+            font-weight: bold;
+        }
+    }
+}
+
+/* wide content view */
+.wide-content #dokuwiki__aside ul.sidebar-tabs {
+    visibility: hidden;
+}

css/area_msg.less

@@ -1,3 +1,7 @@
+/**
+ * This file provides the design styles for message block
+ */
+
 .msg-area {
     clear: both;
     padding-top: 1.6rem;
@@ -11,20 +15,65 @@
     }
 }
 
-/* short fix: SPR-891 - Icons für Notifications in Message Area werden gekachelt */
-div.success, div.error, div.info, div.notify {
-    background-repeat: no-repeat;
-    background-position: 8px 50%;
-    border: 1px solid #eeb;
-    font-size: 90%;
-    margin: 0 0 .5em;
-    padding: .4em;
-    padding-left: 32px;
-    overflow: hidden;
-    border-radius: 5px;
+div.success,
+div.error,
+div.info,
+div.notify {
+    display: block;
+    border: none;
+    border-left: solid 0.5rem var(--color-shade-4);
+    border-radius: 0.5rem;
+    padding: 1em;
+    background-image: none;
+    background-color: var(--color-shade-1);
 
-    * {
-        color: inherit;
+    &::before {
+        display: inline-block;
+        content: "";
+        margin: 0.3em 0.2em 0 0;
+        width: 1em;
+        height: 1em;
+        mask-size: contain;
+        mask-position: center top;
+        mask-repeat: no-repeat;
+        background-color: currentColor;
+        vertical-align: top;
+    }
+
+    &.success {
+        color: var(--color-success);
+
+        &::before {
+            mask-image: url(img/tick_small.svg);
+        }
+    }
+
+    &.error {
+        border-left-color: var(--color-error);
+        color: var(--color-foreground);
+
+        &::before {
+            background-color: var(--color-error);
+            mask-image: url(img/power.svg);
+        }
+    }
+
+    &.info {
+        color: var(--color-foreground);
+
+        &::before {
+            mask-image: url(img/info.svg);
+        }
+    }
+
+    &.notify {
+        border-left-color: var(--color-warning);
+        color: var(--color-foreground);
+
+        &::before {
+            background-color: var(--color-warning);
+            mask-image: url(img/warning.svg);
+        }
     }
 
     a {

css/area_nav-breadcrumb.less

@@ -1,37 +1,26 @@
 /**
  * This file provides the design styles for the breadcrumb
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 .breadcrumbs {
     position: relative;
     min-height: @page-header_height;
     box-sizing: border-box;
-    background-color: @ini_background_content;
-    border-bottom: 1px solid @ini_border_light;
+    background-color: var(--color-background);
+    border-bottom: 1px solid var(--color-shade-4);
     padding: 1rem 1.8rem .2rem;
 
-    @media @screen_max-md {
-        background-color: @ini_background_page_header;
-    }
-
     @media @screen_max-xs {
         padding-left: @margin-small;
         padding-right: .75rem;
     }
 
-    @media @screen_xs-lg {
-        background-color: @ini_background_content;
-    }
-
     > p {
         font-size: @font-size-small;
         margin: 0;
 
         @media @screen_max-xs{
-            width: 1px;
+            width: 0;
             position: relative;
             overflow: hidden;
             height: 1.6rem;
@@ -61,14 +50,16 @@
                 min-width: 1.9em;
                 width: auto;
                 box-sizing: border-box;
-                border: solid 1px transparent;
-                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                background-color: var(--color-shade-1);
+                border: solid .1em transparent;
+                border-radius: 0.5rem;
                 vertical-align: middle;
                 text-decoration: none;
                 margin-top: -.2em;
-                transition: @transition border-color;
+                transition: var(--transition-glow);
 
                 &:before {
+                    color: var(--color-foreground);
                     font-size: @font-size-default + (@font-scale-factor * 2);
                     margin-top: .17rem;
                 }
@@ -76,7 +67,14 @@
                 &:hover,
                 &:focus,
                 &:active {
-                    border-color: @ini_existing;
+                    &:before {
+                        color: var(--color-glow-primary);
+                    }
+
+                    background-color: transparent;
+                    border-color: var(--color-glow-primary);
+                    color: var(--color-glow-primary);
+                    filter: var(--filter-glow-primary);
                 }
             }
         }
@@ -85,54 +83,4 @@
             padding: .1em .1em 0;
         }
     }
-
-
-/* + + + + +  icon list  + + + + + */
-    .page-attributes {
-        list-style: none;
-        float: right;
-        display: inline-block;
-        max-width: 30%;
-        margin: -.45em 0 0;
-        padding: 0;
-
-        @media @screen_max-xs{
-            max-width: 90%;
-        }
-
-        > li {
-            .btn-usertools-wrapper(); // uniform li
-            .btn-usertools-num();
-
-            float: left;
-
-            > strong,
-            > a {
-                display: block;
-                width: auto;
-                min-height: @toggle-size;
-                border: 1px solid @wikiicons-border;
-                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-                text-align: center;
-                margin: 0;
-            }
-
-            .prefix {
-                .btn-prefix ();
-                .icon-clipboard();
-
-                display: block;
-                font-size: 1.2rem;
-                line-height: 1;
-            }
-        } // li
-
-        a {
-            .btn-hover();
-
-            &[aria-expanded="false"] + #plugin__qc__wrapper {
-                display: none;
-            }
-        }
-    }
 }

css/area_nav-direct.less

@@ -1,10 +1,7 @@
 /**
  * This file provides the design styles for the direct / menu jump links.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 .nav-direct {
     background-color: @nav_direct_background;
     margin-top: -1px;

css/area_nav-metabox.less

@@ -1,26 +1,28 @@
 /**
  * This file provides the design styles for the metatabbox
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 #spr__meta-box {
     .display-flex();
     .flex-direction();
     .justify-content(flex-end);
 
+    clear: none;
+    display: block;
     position: relative;
-    z-index: 10;
     float: right;
+
+    box-sizing: border-box;
     max-width: 40%;
-    margin-top: -(@page_padding-top); // reverse padding-top of .page container
-    margin-right: -1px;
+    padding-bottom: 0.5rem;
+    height: 4rem !important;
+
+    color: var(--color-foreground);
 
     // >= 1024
     @media @screen_min-md {
         height: @page-header_height;
-        border: 1px solid transparent;
+        border: 0 none;
     }
 
     // < 1024
@@ -29,13 +31,34 @@
         top: .2rem;
         right: auto;
         float: none;
-        display: block;
         max-width: 100%;
         min-height: @page-header_height;
         height: auto;
         border: 0 none;
     }
 
+    &.sticky {
+        position: fixed;
+        top: 0;
+
+        ul.meta-tabs > li > a {
+            border-top-color: var(--color-background);
+            border-bottom-color: var(--color-shade-4);
+            border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
+
+        }
+
+        .meta-content .tab-pane.active {
+            max-height: 80vh;
+            overflow: auto;
+        }
+    }
+
+    + .msg-area + a {
+        clear: right;
+        margin-top: 20px;
+    }
+
     .tab-container {
         display: table;
 
@@ -52,7 +75,7 @@
     }
 
 
-/* + + + + +  tab controlls  + + + + + */
+    /* + + + + +  tab controls  + + + + + */
     ul.meta-tabs {
         list-style: none;
         line-height: 160%;
@@ -98,31 +121,23 @@
                 position: relative;
                 display: block;
                 font-size: @font-size-small;
-                line-height: 1.42857143;
-                transition: @transition background-color, @transition border-color, @transition color;
-
-                @media @screen_min-md {
-                    background-color: @ini_background;
-                    border: 1px solid @noopentasks-border;
-                    border-bottom-color: @ini_background;
-                    border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius
-                    color: @ini_nav_menu_color;
-                    margin-left: 4px;
-                    padding: .3em 1rem .1em;
-                }
+                transition: var(--transition-glow);
+                background-color: var(--color-shade-1);
+                border: solid 0.1em transparent;
+                border-radius: 0.5rem;
+                color: var(--color-foreground);
+                padding: .25em;
+                margin-left: 0;
 
                 @media @screen_max-md {
                     top: 0;
-                    border: 1px solid @ini_existing;
-                    color: @ini_existing;
                     margin-top: .2rem;
-                    margin-left: 0;
-                    padding: .2em .3rem;
                 }
 
                 * {
                     cursor: pointer;
                     color: inherit;
+                    font-size: inherit;
                 }
 
                 .prefix {
@@ -135,44 +150,22 @@
                 &:focus,
                 &:active {
                     text-decoration: none;
-
-                    @media @screen_min-md {
-                        background-color: @ini_background_content;
-                        border-color: @ini_existing;
-                        color: @ini_existing;
-                    }
-
-                    @media @screen_max-md {
-                        background-color: @ini_existing;
-                        border-color: @ini_background_content;
-                        color: @ini_background_content;
-                    }
+                    background-color: transparent;
+                    border-color: var(--color-glow-secondary);
+                    color: var(--color-glow-secondary);
+                    filter: var(--filter-glow-secondary);
                 }
             }
 
             &.active {
-                z-index: 1;
-
                 > a {
                     cursor: default;
-                    background-color: @ini_background_content;
-                    border-color: @ini_existing;
-                    border-bottom-color: @ini_background_content;
-                    color: @ini_existing;
-
-                    @media @screen_max-md {
-                        background-color: @ini_existing;
-                        border-bottom-color: @ini_existing;
-                        border-radius: 0;
-                        color: @ini_background_content;
-                    }
                 }
             }
         }
     }
 
-
-/* + + + + +  toggle content  + + + + + */
+    /* + + + + +  toggle content  + + + + + */
     .meta-content {
         margin-top: -1px;
 
@@ -187,24 +180,24 @@
             right: 0;
             display: none;
             width: 100%;
-            background-color: @ini_background_content;
-            border: 1px solid @ini_existing;
+            background-color: var(--color-shade-1);
+            border: solid .1em transparent;
+            border-radius: 0.5rem;
 
             @media @screen_min-xs {
                 min-width: 20em;
             }
 
             @media @screen_min-md {
-                border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
+                margin-top: 0.5rem;
             }
 
             &.active {
                 display: block;
-                overflow: hidden;
             }
 
             a {
-                color: @ini_existing;
+                color: var(--color-foreground);
             }
 
             > div {
@@ -222,11 +215,12 @@
                 ul {
                     list-style: none;
                     padding-left: 0;
+                }
 
-                    li {
-                        margin-left: 0;
-                        padding-left: 1em;
-                    }
+                li {
+                    list-style-image: none; // overwrite universally styles
+                    margin-left: 0;
+                    padding-left: 1em;
                 }
             }
 
@@ -245,8 +239,10 @@
                 float: none;
                 margin: 0;
                 padding: .6rem .5rem .5rem .8rem;
-                background: transparent;
-                border: 0 none;
+                background-color: transparent;
+                color: var(--color-foreground);
+                border: solid .1em var(--color-shade-4);
+                border-radius: 0.5rem;
 
                 h3 {
                     display: none;
@@ -280,7 +276,7 @@
                             width: 4px;
                             height: 4px;
                             overflow: hidden;
-                            background-color: @ini_existing;
+                            background-color: var(--color-shade-4);
                         }
                     }
                 }
@@ -292,8 +288,113 @@
         }
     }
 
-    + .msg-area + a {
-        clear: right;
-        margin-top: 20px;
+    /* + + + + +  tab issues  + + + + + */
+    #spr__tab-issues {
+        ul.mmissuelist {
+            padding-left: 0;
+            margin-top: 1rem;
+
+            li {
+                &.noissue {
+                    font-size: @font-size-small;
+                    list-style-type: none;
+                    margin-left: 0;
+
+                    .li {
+                        font-size: @font-size-small;
+                        margin-left: .5rem;
+                    }
+                }
+
+                a {
+                    display: inline-block;
+                }
+            }
+
+            img {
+                vertical-align: bottom;
+                margin-right: .3rem;
+            }
+
+            .mm__status {
+                padding-left: .3rem;
+                padding-right: .3rem;
+            }
+
+            form {
+                vertical-align: text-top;
+            }
+        }
+    }
+
+    /* + + + + +  tab issues  + + + + + */
+    /* see plugins/magic-matcher.less   */
+    #spr__tab-issues {
+        ul.mmissuelist {
+            padding-left: 0;
+            margin-top: .5rem;
+            margin-bottom: .6rem;
+
+            li {
+                list-style-type: none;
+                margin-top: .3rem;
+                margin-left: .5rem;
+
+                &.noissue {
+                    list-style-type: none;
+                    margin-left: 0;
+                }
+            }
+
+            a {
+                display: inline-block;
+                font-size: @font-size-small;
+
+                * {
+                    font-size: inherit;
+                }
+            }
+
+            img {
+                vertical-align: bottom;
+                margin-right: .3rem;
+            }
+
+            .mm__status {
+                display: inline-block;
+                text-decoration: none;
+                padding-left: .3rem;
+                padding-right: .3rem;
+            }
+
+            form {
+                vertical-align: text-top;
+
+                button {
+                    background: @ini_button_background;
+                    border-color: @ini_button_background;
+                    color: @ini_button_color;
+                    font-size: @font-size-small;
+                    padding: .2em .3em;
+
+                    &[name="removeIssue"] {
+                        min-width: 20px;
+                        font-size: .94rem;
+                        font-weight: bold;
+                        line-height: 95%;
+                        text-align: center;
+                        padding: 0 .1rem .1rem;
+                        margin-left: .5rem;
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background: @ini_button_color;
+                        color: @ini_button_background;
+                    }
+                }
+            }
+        }
     }
 }

css/area_nav-page-attributes.less

@@ -0,0 +1,54 @@
+/**
+ * Page Attribute Icons in the breadcrumb bar
+ */
+.page-attributes {
+    list-style: none;
+    float: right;
+    margin: -.45em 0 0; // FIXME sourrounding CSS should be fixed so negative margin is not needed
+    padding: 0;
+    display: flex;
+    gap: 0.5rem;
+
+    > li {
+        margin: 0;
+        padding: 0;
+        border: 1px solid @wikiicons-border;
+        border-radius: @ini_default_border_radius;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: @transition background-color, @transition border-color, @transition color;
+
+        // override any plugin element styles
+        * {
+            margin: 0;
+            padding: 0;
+            line-height: normal;
+            display: block;
+        }
+
+        // number badge
+        .btn-usertools-num();
+
+        // icon
+        svg {
+            height: 1.5em;
+            width: 1.5em;
+
+            path {
+                fill: @ini_nav_menu_color;
+            }
+        }
+
+        // adjust colors on hover
+        &:hover {
+            background-color: @ini_nav_menu_hover_color;
+            border-color: @ini_nav_menu_hover_color;
+
+            svg path {
+                fill: @ini_nav_menu_hover_bg;
+            }
+        }
+    }
+}

css/area_nav-pagetools.less

@@ -1,7 +1,5 @@
 /**
  * This file provides the design styles for the page specific tool bar.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
 /*
@@ -30,8 +28,15 @@
 nav#dokuwiki__pagetools {
     @toolbox-size: 30px;
 
+    @page-tools_svg-size: 25px;
+    @page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2;
+    @item-width: (@page-tools_svg-size + @page-tools_svg-space + @page-tools_svg-space);
+    @item-height: (@page-tools_svg-size + @page-tools_svg-space);
+
     top: 3.05rem;
-    z-index: 100;
+    position: absolute;
+
+    width: @item-width;
 
     @media @screen_min-md {
         right: -2.5rem;
@@ -41,24 +46,40 @@ nav#dokuwiki__pagetools {
         right: 8px;
     }
 
-    ul {
-        li {
-            @page-tools_svg-size: 25px;
-            @page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2;
+    @media @screen_max-xxs {
+        display: none;
+    }
+    div.tools {
+        position: fixed;
+        width: @item-width;
+    }
 
-            * {
-                font-size: @font-size-default;
-            }
+    ul {
+        position: absolute;
+        right: 0;
+        text-align: right;
+        margin: 0;
+        padding: 0;
+        /* add transparent border to prevent jumping when proper border is added on hover */
+        border: 1px solid transparent;
+
+        li {
+            padding: 0;
+            margin: 0;
+            list-style: none;
 
             a {
-                .fontello-double();
+                display: inline-table;
+                /* add transparent border to prevent jumping when proper border is added on focus */
+                border: 1px solid transparent;
+                white-space: nowrap;
+                vertical-align: middle;
+                height: @item-height;
 
                 position: relative;
-                height: auto;
-                min-height: @toolbox-size; // for nav:hover
-                width: @toolbox-size; // for nav:hover
+                line-height: 20px;
                 font-size: @font-size-default;
-                padding: 2px @toolbox-size 2px 2px;
+                padding: 2px 0 2px 2px;
 
                 @media @screen_min-md {
                     color: @ini_nav_menu_color;
@@ -68,10 +89,6 @@ nav#dokuwiki__pagetools {
                     color: @ini_existing;
                 }
 
-                * {
-                    color: inherit;
-                }
-
                 &::before {
                     display: none;
                 }
@@ -82,6 +99,25 @@ nav#dokuwiki__pagetools {
                     background-color: transparent;
                 }
 
+                &:focus {
+                    box-shadow: none;
+                    background-image: none;
+                    color: var(--color-glow-primary);
+                    transition: var(--transition-glow);
+                    filter: var(--filter-glow-primary);
+
+                    span {
+                        position: relative;
+                        display: inline;
+                        width: auto;
+                        height: auto;
+                    }
+
+                    svg {
+                        fill: var(--color-glow-primary);
+                    }
+                }
+
                 span {
                     .sr-only();
 
@@ -96,14 +132,7 @@ nav#dokuwiki__pagetools {
                     vertical-align: middle;
                     border: solid 1px transparent;
                     margin: @page-tools_svg-space;
-
-                    @media @screen_min-md {
-                        fill: @ini_nav_menu_color;
-                    }
-
-                    @media @screen_max-md {
-                        fill: @ini_existing;
-                    }
+                    fill: var(--color-foreground);
                 }
 
                 &.top {
@@ -116,33 +145,37 @@ nav#dokuwiki__pagetools {
     &:hover {
         ul {
             box-shadow: @box-shadow; // @box-shadow-offset;
-            background-color: @ini_background_content;
-            border-color: @wikiicons-border;
+            background-color: var(--color-shade-1);
+            border-color: var(--color-shade-4);
+            border-radius: 0.5rem;
 
             li {
-                color: @ini_existing;
+                color: var(--color-foreground);
 
                 a {
                     box-shadow: none;
                     background-image: none;
                     border-color: transparent;
                     color: inherit;
-                    padding: 2px 0 2px 2px;
 
                     svg {
                         border: solid 1px transparent;
                         border-radius: @ini_default_border_radius;
-                        fill: @ini_existing;
+                        fill: var(--color-foreground);
                         transition: @transition background-color, @transition border-color, @transition fill;
                     }
 
                     &:hover,
                     &:focus,
                     &:active {
+                        color: var(--color-glow-primary);
+                        transition: var(--transition-glow);
+                        filter: var(--filter-glow-primary);
+
                         svg {
-                            background-color: @ini_existing;
-                            border-color: @ini_existing;
-                            fill: @ini_background_content;
+                            background-color: transparent;
+                            border: none;
+                            fill: var(--color-glow-primary);
                         }
                     }
 

css/area_nav-usertools.less

@@ -1,34 +1,65 @@
 /**
  * This file provides the design styles for the direct / menu jump links.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
-.nav-usertools {
-    &.has-bar {
-        margin-top: @height-context-bar;
-        padding-top: .5em;
+#dokuwiki__usertools.nav-usertools {
+    @media @screen_min-md {
+        right: 1.25rem;
     }
 
+    @media @screen_max-md {
+        position: absolute;
+        top: 0;
+        left: (@toggle-size + 1.25); // margin-left content
+        right: @headericons-margin-xxs;
+        margin-top: 0;
+        margin-right: 0;
+    }
 
-/* + + + + +  icon list  + + + + + */
+    &.has-bar {
+        @media @screen_min-md {
+            margin-top: @height-context-bar;
+            padding-top: .5em;
+        }
+    }
+
+    /* + + + + +  icon list  + + + + + */
     ul {
         float: right;
         padding: 0;
         margin: (@very-small-spacing * 2) -.25rem 0 0;
 
+        @media @screen_max-md {
+            margin-right: .5rem;
+        }
+
+        @media @screen_max-xxs {
+            margin-right: -.3rem;
+        }
+
         li {
             .btn-usertools-wrapper(); // uniform li
             .btn-usertools-num();
 
             float: right;
-            min-height: 28px;
 
-            > strong,
+            @media @screen_max-xs {
+                display: block;
+                float: none;
+
+                margin-bottom: @headericons-margin-xxs;
+            }
+
+            @media @screen_max-xxs {
+                margin-bottom: (@headericons-margin-xxs - .2);
+                display: none;
+            }
+
+            > span,
             > a {
                 display: block;
                 width: auto;
+                min-width: (@toggle-size + .25);
                 min-height: @toggle-size;
                 overflow: hidden;
                 border: 1px solid @wikiicons-border;
@@ -36,48 +67,38 @@
                 text-align: center;
                 margin: 0;
 
-                @media @screen_only-lg {
+                @media @screen_md-xlg {
                     padding-top: .14rem;
                 }
-
-                @media @screen_max-xxlg {
-                    min-height: 28px;
-                }
-
-                @media @screen_max-md {
-                    min-height: @toggle-size;
-                }
             }
 
+            /* !!! &.user-task FIND in plugins/do_tasks.less !!! */
             &.user {
-                @space-min-xxlg: .35rem;
-                @space-max-xxlg: .4rem;
-                @space-max-xlg: .5rem;
-                @space-max-md: .35rem;
-
                 position: relative;
                 display: table-cell;
-                background-color: @ini_background;
-                border: solid 1px @noopentasks-border;//@ini_border_light;
+                background-color: var(--color-shade-1);
+                border: solid 1px var(--color-shade-2);
                 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-                color: @ini_text_webframe;
+                color: var(--color-foreground);
                 padding-right: .3rem;
 
-                @media @screen_min-xxlg {
-                    padding-top: @space-min-xxlg;
-                }
-
-                @media @screen_max-xxlg {
-                    padding-top: @space-max-xxlg;
-                }
-
-                @media @screen_max-xlg {
-                    padding-top: @space-max-xlg;
-                }
-
                 @media @screen_max-md {
                     min-height: @toggle-size;
-                    padding-top: @space-max-md;
+                }
+
+                @media @screen_max-xs {
+                    position: absolute;
+                    top: @headericons-margin-xxs;
+                    right: (@toggle-size + @headericons-margin-xxs + 1); // 1.75rem + 1 + (button login/out margin-right)
+                    overflow: hidden;
+                    white-space: nowrap;
+                    margin: -1px 0 0;
+                }
+
+                @media @screen_max-xxs {
+                    left: -10px;
+                    right: 0;
+                    width: auto;
                 }
 
                 > a {
@@ -85,31 +106,37 @@
                     .align-items();
 
                     position: relative;
-                    min-height: 26px;
+                    height: 1rem; // for IE11
                     overflow: visible;
-                    background: @ini_nav_menu_hover_bg; // for removing bg-image
+                    background: var(--color-shade-1); // for removing bg-image
                     border: 0 none;
-                    color: @ini_nav_menu_hover_color;
+                    color: var(--color-foreground);
                     text-indent: 0;
                     font-size: inherit;
                     margin-right: -.3rem;
                     padding: 0 .2em 0 0;
 
                     @media @screen_min-xxlg {
-                        margin-top: -(@space-min-xxlg);
+                        min-height: (@toggle-size - .1);
+                        margin-top: -.4rem;
                     }
 
                     @media @screen_max-xxlg {
-                        margin-top: -(@space-max-xxlg);
-                    }
-
-                    @media @screen_max-xlg {
-                        margin-top: -(@space-max-xlg);
+                        min-height: (@toggle-size - .15);
+                        margin-top: -.35rem;
                     }
 
                     @media @screen_max-md {
                         min-height: (@toggle-size - .1);
-                        margin-top: -(@space-max-md);
+                        margin-top: -.35rem;
+                    }
+
+                    @media @screen_max-sm {
+                        margin-top: -.35rem;
+                    }
+
+                    @media @screen_max-xs {
+                        margin-top: -.4rem;
                     }
 
                     &::before {
@@ -120,31 +147,29 @@
                         right: -1px;
                         width: auto;
                         opacity: 0;
-                        border: solid 1px @ini_nav_menu_hover_color;
+                        border: solid 1px var(--color-shade-2);
                         border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
                         color: inherit;
                         transform: none;
-                        //transition: @transition opacity;
                     }
 
                     &:hover,
                     &:focus,
                     &:active {
-                        background-color: @ini_nav_menu_hover_color;
-                        border-color: @ini_nav_menu_hover_color;
-                        color: @ini_nav_menu_hover_bg;
+                        background-color: transparent;
+                        color: var(--color-glow-secondary);
+                        filter: var(--filter-glow-secondary);
+                        transition: var(--transition-glow);
 
                         &::before {
                             opacity: 1;
+                            filter: var(--filter-glow-secondary);
+                            border-color: var(--color-glow-secondary);
                         }
 
                         bdi,
                         bdi:first-of-type {
                             color: @ini_nav_menu_hover_bg;
-
-                            //&::before {
-                            //    color: inherit;
-                            //}
                         }
                     }
                 }
@@ -152,7 +177,6 @@
                 bdi {
                     display: inline-block;
                     color: inherit;
-                    transition: @transition color;
                 }
 
                 bdi:first-of-type {
@@ -165,84 +189,61 @@
 
                     &::before {
                         position: absolute;
+                        top: 2px;
                         left: -2px;
-                        font-size: 1.4rem;
+                        font-size: @font-size-default + (@font-scale-factor * 4);
                         margin: 0;
-                        transition: @transition color;
-
-                        @media @screen_min-xxlg {
-                            top: -.25rem;
-                        }
-
-                        @media @screen_max-xxlg {
-                            top: -.2rem;
-                        }
-
-                        @media @screen_max-xxs {
-                            top: -.25rem;
-
-                        }
                     }
                 }
             } // user
-
-            &.user-task {
-                position: relative;
-
-                a {
-                    position: relative;
-                    overflow: visible;
-                    white-space: normal;
-                    text-indent: 0;
-
-                    &::before {
-                        content: '';
-                        position: absolute;
-                    }
-                }
-
-                .prefix {
-                    .btn-prefix();
-                    .icon-clipboard();
-
-                    display: block;
-                    font-size: 1.2rem;
-                    text-align: center;
-                    margin-bottom: -1px;
-                }
-            } // user-task
-
-            &.noopentasks {
-                strong {
-                    background-color: @ini_background;
-                    border-color: @noopentasks-border;
-                    color: @ini_text_webframe;
-                }
-
-                .num {
-                    background-color: @noopentasks-border; // fix
-                    color: @noopentasks-color; // fix
-                    margin-top: 1px;
-                }
-            }
         } // li
 
+        /* + + +  icons  + + + */
+        .menuitem, button {
+            padding: 2px 0 0 2px;
+            min-height: @toggle-size; // overrides button[type="submit"] styles
+            background-color: var(--color-shade-1);
+            color: var(--color-foreground);
+            border: solid 1px var(--color-shade-2); // overrides button[type="submit"] styles
+            .btn-hover();
 
-/* + + +  icons  + + + */
-        a {
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: transparent;
+                border-color: var(--color-glow-secondary);
+                color: var(--color-glow-secondary);
+                filter: var(--filter-glow-secondary);
+            }
+
+            &:hover svg,
+            &:active svg,
+            &:focus svg {
+                transition: @transition fill;
+                fill: var(--color-glow-secondary);
+            }
+
+            svg {
+                fill: var(--color-shade-1);
+                height: @font-size-default + (@font-scale-factor * 4);
+            }
+
+            span {
+                display: none;
+            }
+        }
+
+        a { // Pre-Greebo backwards compatibility, remove after transitioning to Greebo
             .fontello();
             .hide-text-show-before();
             .btn-hover();
 
+            background-color: var(--color-shade-1);
             cursor: pointer;
             position: relative;
             line-height: 1;
             text-decoration: none;
 
-            @media @screen_only-lg {
-                min-width: 2rem;
-            }
-
             &::before {
                 .center-middle();
 
@@ -281,3 +282,71 @@
         } // a
     } // ul
 } // nav-usertools
+
+/* + + + + +  layout option compact  + + + + + */
+.header-compact {
+    #dokuwiki__usertools.nav-usertools {
+
+        // mobile
+        @media @screen_max-md {
+            left: 6rem;
+
+            ul {
+                overflow: hidden;
+
+                li.user {
+                    color: var(--color-background);
+
+                    bdi {
+                        position: absolute;
+                        width: 0;
+                        padding: 0;
+                        text-indent: -10000px;
+
+                        &:before {
+                            transition: @transition background-color;
+                            background-color: var(--color-shade-1);
+                            color: var(--color-foreground);
+                            text-indent: 0;
+                        }
+                    }
+
+                    > a {
+                        padding: 0 .2em;
+                        color: @ini_nav_menu_hover_bg;
+
+                        bdi {
+                            &:before {
+                                background-color: var(--color-shade-1);
+                                color: var(--color-foreground);
+                            }
+                        }
+
+                        &:hover {
+                            color: var(--color-glow-secondary);
+
+                            bdi {
+                                &:before {
+                                    background-color: transparent;
+                                    color: var(--color-glow-secondary);
+                                }
+                            }
+                        }
+                    }
+
+                    bdi + bdi {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        @media @screen_max-sm {
+            ul li {
+                position: static;
+                float: right;
+                top: 0; right: 0;
+            }
+        }
+    }
+}

css/area_recent.less

@@ -0,0 +1,167 @@
+/**
+ * This file provides the design styles for page revisions
+ */
+
+.dokuwiki {
+
+    /* + + + + +  list of changes  + + + + + */
+    form.changes {
+        li {
+            .sizechange {
+                color: @color-editBox;
+
+                &.positive {
+                    background-color: var(--color-success);
+                    color: var(--color-background);
+                }
+
+                &.negative {
+                    background-color: var(--color-error);
+                    color: var(--color-foreground);
+                }
+            }
+        }
+
+        > .no > ul > li {
+            min-height: @formfield_min-height;
+            vertical-align: baseline;
+            margin-bottom: @small-spacing;
+
+            .li {
+                line-height: 150%;
+
+                > * {
+                    min-height: 10px;
+                }
+            }
+
+            a,
+            span,
+            img {
+                vertical-align: baseline;
+            }
+
+            img {
+                margin-left: @small-spacing;
+                margin-right: @small-spacing;
+            }
+
+            input[type="checkbox"] {
+                margin: 0 .5rem .2rem -1.5rem;
+            }
+
+            span.user bdi {
+                a {
+                    vertical-align: baseline;
+                }
+            }
+        }
+    }
+
+    /* + + + + +  view of differents  + + + + + */
+    a.difflink {
+        color: @ini_existing;
+
+        * {
+            color: inherit;
+        }
+    }
+
+    .diffnav {
+        a {
+            background-color: var(--color-background);
+            border: solid 1px var(--color-background);
+            border-radius: 0.5rem;
+            color: var(--color-foreground);
+
+            &::before {
+                background-color: inherit;
+                border: 0 none;
+                color: inherit;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: transparent;
+                border-color: var(--color-glow-primary);
+                color: var(--color-glow-primary);
+                transition: var(--transition-glow);
+                filter: var(--filter-glow-primary);
+
+                &::before {
+                    background-color: inherit;
+                    color: inherit;
+                }
+            }
+        }
+    }
+
+    table.diff {
+        background-color: var(--color-background);
+        border: none;
+
+        &.diff_inline {
+            border-top-width: 0;
+
+            .diffnav {
+                padding-top: 10px;
+                padding-bottom: 10px;
+            }
+        }
+
+        th {
+            background-color: var(--color-background);
+            color: var(--color-foreground);
+            padding-top: 10px;
+            padding-bottom: 10px;
+
+            &.minor {
+                color: #999;
+            }
+        }
+
+        td {
+            background-color: transparent;
+            color: var(--color-text-1);
+
+            &.diff-blockheader {
+                background-color: transparent;
+                color: var(--color-foreground);
+            }
+
+            &.diff-context {
+                background-color: transparent;
+                color: var(--color-text-1);
+            }
+        }
+
+        .diff-addedline {
+            background-color: var(--color-success-highlight);
+            color: var(--color-foreground);
+
+            strong {
+                background-color: transparent;
+                color: var(--color-success) !important;
+            }
+        }
+
+        .diff-deletedline {
+            background-color: var(--color-error-highlight);
+            color: var(--color-foreground);
+
+            * {
+                color: inherit;
+            }
+
+            strong {
+                background-color: transparent;
+                color: var(--color-error) !important;
+            }
+        }
+
+        .diff-lineheader {
+            background-color: transparent;
+        }
+    }
+}

css/area_search.less

@@ -1,10 +1,7 @@
 /**
  * This file provides the design styles for the search results
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 /* search hit in normal text */
 .dokuwiki .search_hit {
     background-color: @ini_highlight;

css/area_sidebar-search.less

@@ -1,205 +0,0 @@
-/**
- * This file provides the design styles for the quick search.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
- */
-
-.search.main-sidebar {
-    @main-ico-dummy: @font-size-big + @margin-small*2; //FIXME copied from area_main-sidebar-nav
-    @icon-size: @page-header_height;
-    @icon-search_font-size: @font-size-big;
-
-    p.toggleSearch a,
-    button[type="submit"] {
-        .fontello();
-        .hide-text-show-before();
-        .icon-search();
-
-        position: relative;
-        width: @icon-size;
-        min-height: @icon-size;
-        overflow: visible;
-        background-image: none;
-        background-color: transparent; // fix
-        border: solid 1px transparent;
-        padding: 0;
-        transition: @transition color, @transition background-color, @transition border-color;
-
-        &:hover,
-        &:focus,
-        &:active {
-            min-height: @icon-size;
-            background-color: @ini_button_color;
-            border: solid 1px @ini_button_background;
-
-            &::after {
-                background-color: @ini_button_background;
-            }
-        }
-
-        &::before {
-            width: 100%;
-            color: inherit;
-            font-size: @icon-search_font-size;
-            text-align: center;
-            margin: 0;
-        }
-    }
-
-    p.toggleSearch {
-        display: none;
-        margin: -2px 0 0; // reverse transparent border and box-sizing of a child
-        padding: 0;
-
-        @media @screen_max-xxlg {
-            margin-top: -1px;
-        }
-
-        a {
-            min-width: (@toggle-showsidebar_width + 0.1); /* must be a bit a wider than @toggle-showsidebar_width to hide right border */
-            width: @main-ico-dummy;
-            border-radius: @fix_border-radius;
-            color: @ini_nav_menu_color;
-            text-decoration: none;
-            box-sizing: border-box;
-
-            &::before {
-                position: absolute;
-                top: 50%;
-                left: 0;
-                color: inherit;
-                text-align: center;
-                margin-top: -(@icon-search_font-size / 2);
-            }
-
-            &:hover,
-            &:focus,
-            &:active {
-                background-color: @ini_nav_menu_hover_bg;
-                border-color: @ini_nav_menu_hover_color;
-                color: @ini_nav_menu_hover_color;
-            }
-        }
-    }
-
-    button[type="submit"] {
-        position: absolute;
-        top: 1px;
-        bottom: 1px;
-        right: 0;
-        height: auto;
-        min-height: (@icon-size - .2);
-        color: @quicksearch-button-color;
-
-        &:hover,
-        &:focus,
-        &:active {
-            top: 0;
-            bottom: 0;
-            min-height: @icon-size;
-            background-color: @ini_button_color;
-            border: solid 1px @ini_button_background;
-            color: @ini_button_background;
-        }
-    }
-
-
-/* + + +  form  + + + */
-    form {
-        position: relative;
-        display: block;
-        margin: 0 0 @margin-default;
-
-        .no {
-            display: block;
-
-            #qsearch__in {
-                width: 100%;
-                padding-left: 10px;
-                padding-right: @icon-size;
-            }
-        }
-
-        input {
-            min-height: @icon-size;
-            box-sizing: border-box;
-        }
-
-        button[type="submit"] {
-            border: solid 1px transparent;
-            border-right-color: @ini_border;
-            margin-left: -(@icon-size);
-
-            &::after {
-                content: '';
-                position: absolute;
-                top: 15%;
-                bottom: 15%;
-                width: 1px;
-                left: -1px;
-                background-color: @ini_border;
-                transition: @transition background-color;
-            }
-        }
-
-        div.ajax_qsearch {
-            box-shadow: none;
-            background-color: #FFF;
-            padding: 0;
-
-            strong,
-            ul li {
-                color: @quicksearch-button-color;
-                padding: .25rem .5rem;
-
-                * {
-                    color: inherit;
-                }
-            }
-
-            ul li {
-                &:nth-child(odd) {
-                    background-color: @suggestion-zebra;
-                }
-            }
-        }
-    }
-
-    #qsearch__out {
-        left: auto;
-        top: auto;
-        width: 100%;
-    }
-}
-
-
-/* + + + + +  wide page content  + + + + + */
-.wide-content {
-    .search.main-sidebar {
-        p.toggleSearch {
-            position: relative;
-            z-index: 1;
-            display: block;
-            float: left;
-            width: 100%;
-        }
-
-        form {
-            input {
-                border: 0 none;
-            }
-
-            .no {
-                #qsearch__in {
-                    width: 0;
-                    padding: 0;
-                    margin: 0;
-                }
-
-                button[type="submit"] {
-                    display: none;
-                }
-            }
-        }
-    }
-}

css/area_tabs.less

@@ -2,22 +2,28 @@
  * This file provides styles for tab boxes
  */
 
-
 /* + + + + +  tabs  + + + + + */
-
 #dokuwiki__content {
     ul.tabs {
         li:not([class~="active"]) {
             strong,
             a {
-                color: @ini_text_neu;
                 transition: @transition background-color, @transition color;
             }
 
+            a {
+                background-color: var(--color-shade-2);
+                color: var(--color-accent-1);
+            }
+            strong {
+                background-color: var(--color-shade-3);
+                color: inherit;
+            }
+
             a:hover,
             a:focus,
             a:active {
-                color: @ini_text;
+                color: var(--color-accent-3);
             }
         }
     }

css/area_togglelink.less

@@ -1,63 +1,51 @@
 /**
  * This file provides the design styles for the sidebar (navmain).
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 .togglelink {
     &.page_main-content {
         position: absolute;
         top: 0;
         bottom: -1px;
         width: 2rem;
-        left: -(@margin-default);
-        z-index: 1;
+        left: -(@margin-default + 0.25rem);
 
         @media @screen_max-md {
             display: none;
         }
 
         a {
-            .fontello-double();
-            .icon-right-bold();
-            .icon-left-bold();
-
-            .display-flex();
-            .flex-direction();
-            .justify-content();
+            position: absolute;
+            inset: 0;
 
             width: @margin-default;
             height: 100%;
-            background-color: @ini_button_background;
-            border: solid 1px @ini_button_background;
-            border-radius: @ini_default_border_radius 0 0 @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-            color: @ini_button_color;
+            background-color: transparent;
+            border: solid 1px var(--color-shade-4);
+            border-right-style: none;
+            border-radius: 0.5rem 0 0 0.5rem;
+            color: var(--color-shade-4);
             text-decoration: none;
             transition: @transition color, @transition background-color, @transition border-color;
 
-            &::before,
-            &::after {
-                width: 100%;
-                opacity: .6;
-                font-size: 1rem;
-                line-height: 1;
-                text-align: center;
-                margin: 0;
-                transition: @transition opacity;
-            }
-
             &::before {
-                opacity: 1;
-                font-size: 1.25rem;
+                content: '';
+                display: block;
+                position: absolute;
+                inset: 0.3rem;
+                mask-size: contain;
+                mask-position: center;
+                mask-repeat: no-repeat;
+                background-color: currentColor;
+                mask-image: url('img/arrow_left.svg');
+
             }
 
             &:hover,
             &:focus,
             &:active {
-                background-color: @ini_button_color;
-                border-color: @ini_button_background;
-                color: @ini_button_background;
+                border-color: var(--color-glow-primary);
+                color: var(--color-glow-primary);
                 text-decoration: none;
 
                 * {
@@ -65,43 +53,24 @@
                     text-decoration: none;
                 }
 
-                &::after {
-                    opacity: 0;
-                }
+                filter: var(--filter-glow-primary);
+                transition: var(--transition-glow);
+
             }
         }
 
-/* + + +  toggle out  + + + */
+        /* + + +  toggle out  + + + */
+
         .wide-content & {
-            left: -1px;
+            left: 0;
 
             a {
-                background-color: @ini_button_background;
-                border-color: @ini_button_background;
-                border-radius: 0 @ini_default_border_radius @ini_default_border_radius 0; // @ini_default_border_radius vs. @fix_border-radius
+                border-radius: 0 0.5rem 0.5rem 0;
+                border-style: solid;
+                border-left-style: none;
 
                 &::before {
-                    opacity: .6;
-                    font-size: 1rem;
-                }
-
-                &::after {
-                    opacity: 1;
-                    font-size: 1.25rem;
-                }
-
-                &:hover,
-                &:focus,
-                &:active {
-                    background-color: @ini_button_color;
-
-                    &::before {
-                        opacity: 0;
-                    }
-
-                    &::after {
-                        opacity: 1;
-                    }
+                    mask-image: url('img/arrow_right.svg');
                 }
             }
         }

css/base.less

@@ -1,20 +1,17 @@
 /**
- * This file provides the basic vars and reset styles.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ * This file provides the basic/reset styles.
  */
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* global vars */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@font_family_screen:       "Athiti", ui-sans, sans-serif;
+@font_family_print:        "Athiti", ui-sans, sans-serif;
 
-@font_family_screen:       arial, sans-serif;
-@font_family_print:        "Times New Roman", serif;
-
-@nav_direct_background:    @ini_background_content;
+@nav_direct_background:     var(--color-background);
 @nav_direct_color:         @ini_existing;
 
+@background_darker:        rgba(230,230,230, .2);
 @ini_sidebar_width:        (100 - @ini_site_width) - 4;
 
 @height-context-bar:       50px;
@@ -22,6 +19,7 @@
 @margin-small:             1rem;
 @margin-default:           2rem;
 @margin-big:               3.07rem;
+@nav-margin:               1.3rem;
 
 @small-spacing:            .3rem;
 @very-small-spacing:       .2rem;
@@ -31,18 +29,18 @@
 
 @transition:               ease-out .30s;
 
-@box-shadow-offset:        .1em .1em .1em rgba(153,153,153,.5); // pagetools, tabinclude
-@box-shadow:               0 0 .5em rgba(153,153,153,.5);
+@box-shadow-offset:        .1em .1em .1em rgba(153,153,153,.5); // tabinclude
+@box-shadow:               0 0 .5em rgba(153,153,153,.5); // pagetoolbox hover
 @box-shadow-colored:       0 0 .5em fade(@ini_existing, 50%);
-@box-shadow-right-bottom:  0.1em 0.3rem 0.5em rgba(153,153,153,.5);
-@box-shadow-bottom:        0 .1em .5em rgba(153,153,153,.5); // qc-wrapper - breadcrumb
-
+@box-shadow-right-bottom:  .1em .3rem .5em rgba(153,153,153,.5);
+@box-shadow-bottom:        0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor
 
 /* + + +  for programmers customizing  + + + */
+@fix_border-radius:        0.5rem; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
 
-@fix_border-radius:        3px;
+@toggle-showsidebar_width: 3.47rem;       // shown sidebar after toggle
 
-@toggle-showsidebar_width: 3.07rem;       // shown sidebar after toggle
+@headericons-margin-xxs:  .45rem;         // screen xxs margin-top for header icons
 
 @page_padding-top:         @margin-small; // padding-top for 'dokuwiki__content'
 @page-header_height:       2.8rem;        // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
@@ -51,34 +49,31 @@
 
 @formfield_min-height:     2rem;          // min-height for input, textarea, select, keygen
 
-//@metanav-ini_background:   rgba(0, 0, 0, .1);
-
+@code-background:          #F6F6F6; /* code, pre, samp, kbd */
 
 /* icons */
-@noopentasks-background:   #ECECEC; /* metabox tabs + num in icons + tabinclude + code, pre, samp, kbd */
+@noopentasks-background:   #ECECEC; /* metabox tabs + num in icons + tabinclude */
 @noopentasks-border:       #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */
 @noopentasks-color:        #666; /* metabox tabs + num in icons + code, pre, samp, kbd */
 @wikiicons-border:         #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
 
-
 /* navigation left */
+@menu-margin-lg: 1.3rem;
+
 @quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */
 @suggestion-zebra:         #EEE;
 
-
 /* edit mode */
-@highlight-odd-ini_text:  fade(@ini_background_content, 95%);
+@highlight-odd-ini_text:  fade(@ini_background, 95%);
 @highlight-even-ini_text: fade(@ini_text, 5%);
-@color-editBox:           #252525; // editmode for tables
+@color-editBox:           var(--color-foreground); // editmode for tables, revision states
 
-
-//@nolinkedicon-ini_background: fade(@ini_background, 10%);
+//@nolinkedicon-ini_background: fade(@ini_background_site, 10%);
 //@opacity-ini_nav_menu_color:  fade(@ini_nav_menu_color, 40%);
 
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* fonts */
-
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @font-size-very-small:     .73rem;
 @font-size-small:          .88rem;
 @font-size-default:        1rem;
@@ -101,10 +96,9 @@
 @font-size-head2: @font-size-default + (@font-scale-factor * 7);
 @font-size-head1: @font-size-default + (@font-scale-factor * 9);
 
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* breakpoints */
-
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @break-min-xxs: 480;
 @break-max-xxs: (@break-min-xxs - 1);
 
@@ -126,10 +120,9 @@
 @break-min-xxlg: 1600;
 @break-max-xxlg: (@break-min-xxlg - 1);
 
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* media queries for breakpoints */
-
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
 @screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
 
@@ -152,13 +145,14 @@
 @screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
 
 @screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
-@screen_only-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
+@screen_only-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px) and (max-width: " ~"@{break-max-xxlg}px)";
+@screen_md-xlg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
+@screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)";
 @screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)";
 
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* col width */
-
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @c12:               100%;
 @c11:               91.66666667%;
 @c10:               83.33333333%;
@@ -175,10 +169,104 @@
 @grid-columns:      12;
 
 
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* fonts */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 700;
+    src: url("fonts/athiti/Athiti-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 600;
+    src: url("fonts/athiti/Athiti-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 500;
+    src: url("fonts/athiti/Athiti-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 400;
+    src: url("fonts/athiti/Athiti-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 300;
+    src: url("fonts/athiti/Athiti-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 200;
+    src: url("fonts/athiti/Athiti-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Departure Mono";
+    src: url("fonts/departuremono/DepartureMono-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 100;
+    src: url("fonts/argonglow/ArgonGlow-Thin.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 200;
+    src: url("fonts/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 300;
+    src: url("fonts/argonglow/ArgonGlow-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 400;
+    src: url("fonts/argonglow/ArgonGlow-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 500;
+    src: url("fonts/argonglow/ArgonGlow-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 600;
+    src: url("fonts/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 700;
+    src: url("fonts/argonglow/ArgonGlow-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    src: url("fonts/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
+    font-weight: 100 900;
+}
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* all media */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 html,
 body {
     .reset();
@@ -190,18 +278,6 @@ header,
     .elementsReset();
 }
 
-div, span, object,
-h1, h2, h3, h4, h5, h6, p, blockquote,
-a, abbr, em,acronym, img, strong,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-input, select, option, textarea, button {
-    font-size: 1rem;
-    line-height: 100%;
-}
-
-
 ol,
 ul {
     list-style: none outside none;
@@ -262,10 +338,9 @@ nav > ul {
     }
 }
 
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* css behaviour */
-
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 .sr-out {
     .sr-out();
 }
@@ -307,12 +382,303 @@ nav > ul {
     }
 }
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* variables */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+
+:root {
+    --color-neutral-50: #F2F0F5;
+    --color-neutral-100: #D1C6E0;
+    --color-neutral-200: #B2A0CB;
+    --color-neutral-300: #957EB5;
+    --color-neutral-400: #7A60A0;
+    --color-neutral-500: #61468B;
+    --color-neutral-600: #4B3176;
+    --color-neutral-700: #371F60;
+    --color-neutral-800: #26114B;
+    --color-neutral-900: #180736;
+    --color-neutral-950: #0C011F;
+    --color-argon-50: #E1ABC9;
+    --color-argon-100: #DA87B5;
+    --color-argon-200: #D464A1;
+    --color-argon-300: #CD448F;
+    --color-argon-400: #C6257D;
+    --color-argon-500: #B0166F;
+    --color-argon-600: #9A0A61;
+    --color-argon-700: #830755;
+    --color-argon-800: #6D0449;
+    --color-argon-900: #56023C;
+    --color-argon-950: #3F012D;
+    --color-krypton-50: #B2D9EA;
+    --color-krypton-100: #8CC9E4;
+    --color-krypton-200: #69BADE;
+    --color-krypton-300: #4BADD8;
+    --color-krypton-400: #2493C2;
+    --color-krypton-500: #167FAC;
+    --color-krypton-600: #0A6C96;
+    --color-krypton-700: #075C81;
+    --color-krypton-800: #044C6B;
+    --color-krypton-900: #023C55;
+    --color-krypton-950: #012C3F;
+    --color-green-50: #C0F49A;
+    --color-green-100: #A7E57A;
+    --color-green-200: #8FD75D;
+    --color-green-300: #7AC843;
+    --color-green-400: #66B92D;
+    --color-green-500: #54AA18;
+    --color-green-600: #47990F;
+    --color-green-700: #397E0A;
+    --color-green-800: #2B6206;
+    --color-green-900: #1F4703;
+    --color-green-950: #122B01;
+    --color-red-50: #E6AFAF;
+    --color-red-100: #DD9090;
+    --color-red-200: #D57272;
+    --color-red-300: #CC5757;
+    --color-red-400: #C33D3D;
+    --color-red-500: #BB2626;
+    --color-red-600: #B21010;
+    --color-red-700: #950808;
+    --color-red-800: #780404;
+    --color-red-900: #5C0202;
+    --color-red-950: #3F0101;
+
+    --color-white: #FFFFFF;
+
+    --color-dark-foreground: var(--color-neutral-50);
+    --color-dark-background: var(--color-neutral-950);
+    --color-dark-shade-1: var(--color-neutral-900);
+    --color-dark-shade-2: var(--color-neutral-800);
+    --color-dark-shade-3: var(--color-neutral-700);
+    --color-dark-shade-4: var(--color-neutral-600);
+    --color-dark-text-1: var(--color-neutral-200);
+    --color-dark-text-2: var(--color-neutral-300);
+    --color-dark-text-3: var(--color-neutral-400);
+    --color-dark-text-4: var(--color-neutral-500);
+    --color-dark-primary: var(--color-argon-400);
+    --color-dark-secondary: var(--color-krypton-300);
+    --color-dark-error: var(--color-red-500);
+    --color-dark-error-highlight: var(--color-red-950);
+    --color-dark-success: var(--color-green-500);
+    --color-dark-success-highlight: var(--color-green-950);
+    --color-dark-warning: #efb100;
+    --color-dark-highlight: #efb10060;
+    --color-dark-accent-1: #60a5f9;
+    --color-dark-accent-2: #d381f7;
+    --color-dark-accent-3: #ff7975;
+
+    --color-light-foreground: var(--color-neutral-950);
+    --color-light-background: var(--color-neutral-50);
+    --color-light-shade-1: var(--color-neutral-100);
+    --color-light-shade-2: var(--color-neutral-200);
+    --color-light-shade-3: var(--color-neutral-300);
+    --color-light-shade-4: var(--color-neutral-400);
+    --color-light-text-1: var(--color-neutral-800);
+    --color-light-text-2: var(--color-neutral-700);
+    --color-light-text-3: var(--color-neutral-600);
+    --color-light-text-4: var(--color-neutral-500);
+    --color-light-primary: var(--color-argon-600);
+    --color-light-secondary: var(--color-krypton-500);
+    --color-light-error: var(--color-red-600);
+    --color-light-error-highlight: var(--color-red-50);
+    --color-light-success: var(--color-green-600);
+    --color-light-success-highlight: var(--color-green-50);
+    --color-light-warning: #d08700;
+    --color-light-highlight: #d0870060;
+    --color-light-accent-1: #303EC0;
+    --color-light-accent-2: #6c366c;
+    --color-light-accent-3: #932f0a;
+
+    --color-cmyk-primary: var(--color-dark-primary);
+    --color-cmyk-secondary: var(--color-dark-secondary);
+
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+    --text-5xl: 3rem;
+
+    --container-3xs: 16rem;
+    --container-2xs: 18rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
+}
+
+.fnButton {
+    border-radius: 0.5rem;
+    background-color: var(--color-shade-1);
+    transition: background-color 150ms;
+    color: var(--color-foreground);
+    font-size: 1.2em;
+    border: solid 0.1em var(--color-shade-1);
+    transition-property: filter, border-color;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
+
+    &:hover, &.active{
+        .fnActiveButton();
+    }
+}
+
+.fnButtonSecondary {
+    &:hover, &.active{
+        .fnActiveButtonSecondary();
+    }
+}
+
+.fnActiveButton {
+    background-color: transparent;
+    border: solid 0.1em var(--color-glow-primary);
+    text-decoration: none;
+    color: var(--color-glow-primary);
+    filter: var(--filter-glow-primary);
+    transition: var(--transition-glow);
+}
+
+.fnActiveButtonSecondary {
+    background-color: transparent;
+    border: solid 0.1em var(--color-glow-secondary);
+    text-decoration: none;
+    color: var(--color-glow-secondary);
+    filter: var(--filter-glow-secondary);
+    transition: var(--transition-glow);
+}
+
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* screen only */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 
 @media screen {
+
+    .dark {
+
+        --color-foreground: var(--color-dark-foreground);
+        --color-background: var(--color-dark-background);
+        --color-shade-1: var(--color-dark-shade-1);
+        --color-shade-2: var(--color-dark-shade-2);
+        --color-shade-3: var(--color-dark-shade-3);
+        --color-shade-4: var(--color-dark-shade-4);
+        --color-text-1: var(--color-dark-text-1);
+        --color-text-2: var(--color-dark-text-2);
+        --color-text-3: var(--color-dark-text-3);
+        --color-text-4: var(--color-dark-text-4);
+        --color-primary: var(--color-dark-primary);
+        --color-secondary: var(--color-dark-secondary);
+        --color-error: var(--color-dark-error);
+        --color-error-highlight: var(--color-dark-error-highlight);
+        --color-success: var(--color-dark-success);
+        --color-success-highlight: var(--color-dark-success-highlight);
+        --color-warning: var(--color-dark-warning);
+        --color-highlight: var(--color-dark-highlight);
+        --color-accent-1: var(--color-dark-accent-1);
+        --color-accent-2: var(--color-dark-accent-2);
+        --color-accent-3: var(--color-dark-accent-3);
+
+        --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+        --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
+        --color-glow-primary: var(--color-white);
+        --color-glow-secondary: var(--color-white);
+        --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
+        border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
+
+        @media (prefers-reduced-motion) {
+            --transition-glow: filter 150ms, border-color 150ms;
+        }
+
+        .light-only {
+            display: none;
+        }
+
+        .dark-only {
+            display: initial;
+        }
+    }
+
+    .light {
+        --color-foreground: var(--color-light-foreground);
+        --color-background: var(--color-light-background);
+        --color-shade-1: var(--color-light-shade-1);
+        --color-shade-2: var(--color-light-shade-2);
+        --color-shade-3: var(--color-light-shade-3);
+        --color-shade-4: var(--color-light-shade-4);
+        --color-text-1: var(--color-light-text-1);
+        --color-text-2: var(--color-light-text-2);
+        --color-text-3: var(--color-light-text-3);
+        --color-text-4: var(--color-light-text-4);
+        --color-primary: var(--color-light-primary);
+        --color-secondary: var(--color-light-secondary);
+        --color-error: var(--color-light-error);
+        --color-error-highlight: var(--color-light-error-highlight);
+        --color-success: var(--color-light-success);
+        --color-success-highlight: var(--color-light-success-highlight);
+        --color-warning: var(--color-light-warning);
+        --color-highlight: var(--color-light-highlight);
+        --color-accent-1: var(--color-light-accent-1);
+        --color-accent-2: var(--color-light-accent-2);
+        --color-accent-3: var(--color-light-accent-3);
+
+        --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
+        --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
+        --color-glow-primary: var(--color-argon-950);
+        --color-glow-secondary: var(--color-krypton-950);
+        --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+        border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
+
+        @media (prefers-reduced-motion) {
+            --transition-glow: filter 150ms, border-color 150ms;
+        }
+
+        .light-only {
+            display: initial;
+        }
+
+        .dark-only {
+            display: none;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        html {
+            .dark();
+
+            &:has(#themeLight:checked) {
+                .light();
+            }
+        }
+        #themeToggleDark {
+            display: none !important;
+        }
+    }
+
+    @media (prefers-color-scheme: light) {
+        html {
+            .light();
+
+            &:has(#themeDark:checked) {
+                .dark();
+            }
+        }
+        #themeToggleLight {
+            display: none !important;
+        }
+    }
+
+
+
     html {
         -ms-text-size-adjust: 100%;
         -webkit-text-size-adjust: 100%;
@@ -341,9 +707,28 @@ nav > ul {
         display: none;
     }
 
-    a:active,
-    a:hover {
-        outline: 0;
+    a {
+        color: var(--color-accent-1);
+        text-decoration: underline;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color: var(--color-accent-3);
+            text-decoration: none;
+        }
+
+        &:visited {
+            color: var(--color-accent-2);
+            text-decoration: underline;
+
+            &:hover,
+            &:active,
+            &:focus {
+                color: var(--color-accent-3);
+                text-decoration: none;
+            }
+        }
     }
 
     abbr[title] {
@@ -354,22 +739,6 @@ nav > ul {
         font-size: 80%;
     }
 
-    sub,
-    sup {
-        font-size: 75%;
-        line-height: 0;
-        position: relative;
-        vertical-align: baseline;
-    }
-
-    sup {
-        top: -0.5em;
-    }
-
-    sub {
-        bottom: -0.25em;
-    }
-
     svg:not(:root) {
         overflow: hidden;
     }
@@ -387,7 +756,7 @@ nav > ul {
     kbd,
     pre,
     samp {
-        font-family: monospace, monospace;
+        font-family: "Departure Mono", ui-monospace, monospace;
         font-size: 1em;
     }
 
@@ -454,28 +823,15 @@ nav > ul {
         padding: 0;
     }
 
-    html, body, div, span, applet, object, iframe,
-    h1, h2, h3, h4, h5, h6, p, blockquote,
-    a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
-    small, strike, strong, sub, sup, tt, var,
-    b, u, i, center,
-    dl, dt, dd, ol, ul, li,
-    fieldset, form, label, legend,
-    table, caption, tbody, tfoot, thead, tr, th, td,
-    article, aside, canvas, details, embed,
-    figure, figcaption, footer, header,
-    menu, nav, output, ruby, section, summary,
-    time, mark, audio, video {
+    html, body {
         font-family: @font_family_screen;
-        color: @ini_text;
+        color: var(--color-foreground);
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* print only */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 @media print {
     body {
         font-size: 12pt;

css/base_design.less

@@ -1,18 +1,14 @@
 /**
  * This file provides the main design styles
  * across all template elements (typo, colors etc.)
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
 
 html, body {
-    background-color: @ini_background;
+    background-color: var(--color-background);
 }
 
-
 /* highlight selected tool */
-
 .mode_admin a.action.admin,
 .mode_login a.action.login,
 .mode_register a.action.register,
@@ -27,10 +23,23 @@ html, body {
 }
 
 .dokuwiki {
+    .tabs > ul li a,
+    ul.tabs li strong,
+    ul.tabs li a {
+        border-color: var(--color-shade-4);
+    }
+    ul.tabs::after {
+        border-color: var(--color-shade-4);
+    }
+
     .page ol li,
     .page ul li,
     .aside ul li {
-        color: @ini_text;
+        color: var(--color-foreground);
+
+        .li {
+            color: var(--color-foreground);
+        }
     }
 
     .pageId {
@@ -45,7 +54,7 @@ html, body {
             font-size: @font-size-small;
             border: solid @ini_background_alt;
             border-width: 1px 1px 0;
-            background-color: @ini_background;
+            background-color: var(--color-background);
             color: @ini_text_alt;
             padding: .1em .35em;
             border-top-left-radius: 2px;
@@ -59,7 +68,7 @@ html, body {
         clear: both;
         overflow: hidden;
         word-wrap: break-word;
-        background: @ini_background_content;
+        background: var(--color-background);
         color: inherit;
         padding: @page_padding-top @margin-default @margin-default;
 
@@ -70,6 +79,10 @@ html, body {
         @media @screen_max-xs {
             padding-left: @margin-small;
         }
+
+        @media @screen_max-xxs {
+            padding-right: @margin-small;
+        }
     }
 
     .content #dokuwiki__pagetools {
@@ -84,6 +97,7 @@ html, body {
     }
 
     /* license note under edit window */
+
     div.license {
         font-size: @font-size-small;
         line-height: @line-height-default;
@@ -153,60 +167,24 @@ h2 {
     font-size: @font-size-head2;
     margin: 0 0 @font-size-head2;
     padding-top: (@font-size-head2 / 2);
-
-    .secedit + &,
-    .section_highlight &:first-child {
-        padding-top: 0;
-    }
-
-    .section_highlight + & {
-        padding-top: (@font-size-head2 / 2);
-    }
 }
 
 h3 {
     font-size: @font-size-head3;
     margin: 0 0 @font-size-head3;
     padding-top: (@font-size-head3 / 2);
-
-    .secedit + &,
-    .section_highlight &:first-child {
-        padding-top: 0;
-    }
-
-    .section_highlight + & {
-        padding-top: (@font-size-head3 / 2);
-    }
 }
 
 h4 {
     font-size: @font-size-head4;
     margin: 0 0 @font-size-head4;
     padding-top: (@font-size-head4 / 2);
-
-    .secedit + &,
-    .section_highlight &:first-child {
-        padding-top: 0;
-    }
-
-    .section_highlight + & {
-        padding-top: (@font-size-head4 / 2);
-    }
 }
 
 h5 {
     font-size: @font-size-head5;
     margin: 0 0 @font-size-head5;
     padding-top: (@font-size-head5 / 2);
-
-    .secedit + &,
-    .section_highlight &:first-child {
-        padding-top: 0;
-    }
-
-    .section_highlight + & {
-        padding-top: (@font-size-head5 / 2);
-    }
 }
 
 h6 {
@@ -214,20 +192,11 @@ h6 {
     font-weight: @font-weight-bold;
     margin: 0 0 @font-size-head6;
     padding-top: (@font-size-head6 / 2);
-
-    .secedit + &,
-    .section_highlight &:first-child {
-        padding-top: 0;
-    }
-
-    .section_highlight + & {
-        padding-top: (@font-size-head6 / 2);
-    }
 }
 
 p {
     font-size: @font-size-default;
-    line-height: 135%;
+    line-height: @line-height-big;
 
     a,
     span,
@@ -286,11 +255,58 @@ small,
 
 .code {
     margin-top: @grid;
+
+    // SPR-926: darker colors for accessibility
+    .es6 {
+        color: #00832B;
+    }
+
+    .kw5 {
+        color: #005D00;
+    }
+
+    .kw6 {
+        color: #DC0075;
+    }
+
+    .nu0 {
+        color: #A74DA7;
+    }
+
+    .re3 {
+        color: #DE1B1B;
+    }
+
+    .re4 {
+        color: #007F6F;
+    }
+
+    .br0, .sy0 {
+        color: #248124;
+    }
+
+    .co1, .coMULTI, .sc-1 {
+        color: #707070;
+    }
+
+    .co2, .sy1 {
+        color: #108400;
+    }
+
+    .co3, .sy4 {
+        color: #008070;
+    }
+
+    .kw1, .kw8 {
+        color: #747400;
+    }
+
+    .re1, .st0, .st_h {
+        color: #DD0000;
+    }
 }
 
-
-/*____________ lists ____________*/
-
+/* + + +  lists   + + + */
 ul,
 ol {
     font-size: @font-size-default;
@@ -319,6 +335,11 @@ dl {
     line-height: 140%;
 }
 
+dt,
+dd {
+    line-height: inherit;
+}
+
 dt {
     font-weight: bold;
     margin: 0;
@@ -363,22 +384,15 @@ ol ol ol ol ol {
     list-style-type: lower-roman;
 }
 
-
-/*____________ tables ____________*/
-
+/* + + +  tables   + + + */
 .dokuwiki {
     table.inline tr:hover {
         th {
-            background-color: fade(@ini_background_alt, 50%);
+            background-color: var(--color-shade-3);
         }
 
         td {
-            background-color: fade(@ini_background_alt, 80%);
-            color: @ini_text_alt;
-
-            *:not(button,a) {
-                color: @ini_text_alt;
-            }
+            background-color: var(--color-shade-2);
         }
     }
 }
@@ -387,7 +401,7 @@ table {
     border-collapse: collapse;
     empty-cells: show;
     border-spacing: 0;
-    border: 1px solid @ini_border;
+    border: 1px solid var(--color-shade-4);
     font-size: @font-size-default;
     line-height: 140%;
 }
@@ -406,36 +420,24 @@ td {
     padding: .3em .5em;
     margin: 0;
     vertical-align: top;
-    border: 1px solid @ini_border;
+    border: 1px solid var(--color-shade-4);
 }
 
 th {
     font-weight: bold;
-    background-color: @ini_background_alt;
-    color: @ini_text_alt;
+    background-color: var(--color-shade-1);
+    color: var(--color-foreground);
     text-align: left;
+
+    a {
+        color: @ini_link_alt;
+    }
 }
 
 [dir=rtl] th {
     text-align: right;
 }
 
-a {
-    outline: none;
-
-    &:link,
-    &:visited {
-        text-decoration: none;
-        color: @ini_link; // links to non wikipages (external links)
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-        text-decoration: underline;
-    }
-}
-
 img {
     display: inline-block;
     border-width: 0;
@@ -461,7 +463,7 @@ button img {
 
 hr {
     border-top: solid @ini_border;
-    border-bottom: solid @ini_background;
+    border-bottom: solid var(--color-background);
     border-width: 1px 0;
     height: 0;
     text-align: center;
@@ -489,31 +491,39 @@ pre,
 code,
 samp,
 kbd {
-    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
+    font-family: "Departure Mono", ui-monospace, monospace;
     /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
     font-size: @font-size-default;
     direction: ltr;
     text-align: left;
-    background-color: @noopentasks-background;
-    color: @noopentasks-color;
-    box-shadow: inset 0 0 .3em @noopentasks-border;
+    background-color: var(--color-shade-1);
+    color: var(--color-foreground);
     border-radius: @fix_border-radius;
     padding-left: @small-spacing;
     padding-right: @small-spacing;
+
+    * {
+        font-family: inherit;
+        font-size: inherit;
+    }
+
+    span {
+        color: inherit;
+    }
 }
 
 pre {
     overflow: auto;
     word-wrap: normal;
-    background-color: @noopentasks-background;
-    border: 1px solid @noopentasks-border;
-    border-radius: @fix_border-radius;
-    box-shadow: inset 0 0 .5em @noopentasks-border;
     font-size: @font-size-default;
     line-height: 140%;
     padding: .7em 1em;
 }
 
+code:not([class]) {
+    display: inline-block;
+}
+
 blockquote {
     border: solid @ini_border;
     border-width: 0 0 0 .25em;

css/base_fontello-icons.less

@@ -1,10 +1,8 @@
 /**
  * This file provides styles for web fonts and icon fonts
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ * (If you add new icons in the fontello set you have to add the icon class and associated character encoding here)
  */
 
-
 /* icon font */
 .setIconFontFace('fontello','fontello');
 
@@ -12,12 +10,7 @@
     .fontello();
 }
 
-
 /* + + + + +  fontello codes  + + + + + */
-/**
- * If in the Fontello-Packet an icon is added, the code should be supplemented here:
-*/
-
 .icon-emo-happy          { &::before { content: '\e804'; } } /* '' */
 .icon-emo-wink           { &::before { content: '\e805'; } } /* '' */
 .icon-emo-unhappy        { &::before { content: '\e806'; } } /* '' */
@@ -94,7 +87,6 @@
 
 
 /* + + + + +  additional "after" for nav-pagetools  + + + + + */
-
 .icon-pencil {
     &::before,
     &::after { content: '\e840'; }

css/base_mixins.less

@@ -1,14 +1,10 @@
 /**
  * This file provides less mixins for all other style modules
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Fonts */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 .setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename) {
     @font-face {
         font-family: @fontFamily;
@@ -102,11 +98,9 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Screenreader / Hide */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 .sr-out() {
     display: block;
     width: 1px;
@@ -140,19 +134,20 @@
     }
 }
 
-
 /* + + + + +  small icon-buttons (breadcrumb, page-header)  + + + + + */
 .btn-hover {
-    background-color: @ini_nav_menu_hover_bg;
-    color: @ini_nav_menu_hover_color;
-    transition: @transition color, @transition background-color, @transition border-color;
+    background-color: var(--color-shade-1);
+    border-color: var(--color-shade-2);
+    color: var(--color-foreground);
+    transition: var(--transition-glow);
 
     &:hover,
     &:active,
     &:focus {
-        background-color: @ini_nav_menu_hover_color;
-        border-color: @ini_nav_menu_hover_color;
-        color: @ini_nav_menu_hover_bg;
+        background-color: transparent;
+        border-color: var(--color-glow-secondary);
+        color: var(--color-glow-secondary);
+        filter: var(--filter-glow-secondary);
 
         .prefix {
             color: inherit;
@@ -175,7 +170,7 @@
     }
 }
 
-.btn-usertools-num () {
+.btn-usertools-num() {
     .num {
         position: absolute;
         right: -.4rem;
@@ -192,7 +187,7 @@
     }
 }
 
-.btn-prefix () {
+.btn-prefix(@margin-top:.3rem) {
     .fontello();
     .hide-text-show-before();
 
@@ -200,15 +195,15 @@
     font-size: @font-size-default;
 
     @media @screen_min-xxlg {
-        margin-top: .25rem;
+        margin-top: .22rem;
     }
 
     @media @screen_max-xxlg {
-        margin-top: .3rem;
+        margin-top: @margin-top;
     }
 
     @media @screen_max-md {
-        margin-top: .25rem;
+        margin-top: .2rem;
     }
 }
 
@@ -282,10 +277,14 @@
     -webkit-flex: @elem;
 }
 
+.flex-wrap() {
+    flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+}
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* positioning */
-
 .center-middle() {
     position: absolute;
     top: 50%;
@@ -295,11 +294,9 @@
     -webkit-transform: translateX(-50%) translateY(-50%);
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Screenreader / Hide */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 .reset() {
     background: transparent;
     border: none 0; outline: 0; vertical-align: baseline;
@@ -323,22 +320,42 @@
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Col Grid */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 .make-grid(@class) {
     .float-grid-columns(@class);
-    .loop-grid-columns(@grid-columns, @class, width);
+    .grid-columns(1, @class, width);
+    .grid-columns(2, @class, width);
+    .grid-columns(3, @class, width);
+    .grid-columns(4, @class, width);
+    .grid-columns(5, @class, width);
+    .grid-columns(6, @class, width);
+    .grid-columns(7, @class, width);
+    .grid-columns(8, @class, width);
+    .grid-columns(9, @class, width);
+    .grid-columns(10, @class, width);
+    .grid-columns(11, @class, width);
+    .grid-columns(12, @class, width);
 }
 
 .float-grid-columns(@class) {
-    .col-@{class}-1, .col-@{class}-2, .col-@{class}-3, .col-@{class}-4, .col-@{class}-5, .col-@{class}-6, .col-@{class}-7, .col-@{class}-8, .col-@{class}-9, .col-@{class}-10, .col-@{class}-11, .col-@{class}-12 {
+    .col-@{class}-1,
+    .col-@{class}-2,
+    .col-@{class}-3,
+    .col-@{class}-4,
+    .col-@{class}-5,
+    .col-@{class}-6,
+    .col-@{class}-7,
+    .col-@{class}-8,
+    .col-@{class}-9,
+    .col-@{class}-10,
+    .col-@{class}-11,
+    .col-@{class}-12 {
         float: left;
     }
 }
 
-.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
+// todo: no recusion - fix it !!!
+.grid-columns(@index, @class, @type) {
     .calc-grid-column(@index, @class, @type);
-    // next iteration
-    .loop-grid-columns((@index - 1), @class, @type);
 }
 
 .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {

css/base_structure.less

@@ -1,14 +1,10 @@
 /**
  * This file provides styles for the general layout structure.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* Col Grid */
+/* col grid */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 .make-grid(xs);
 
 @media screen {
@@ -17,15 +13,18 @@
     }
 }
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* font sizing */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @media @screen_min-xxs {
     html {
-        font-size: 114%; //16px
+        font-size: 100%; //16px
     }
 }
 
 @media @screen_min-xs {
     html {
-        font-size: 114%; //16px
+        font-size: 100%; //16px
     }
 }
 
@@ -40,7 +39,6 @@
     .make-grid(md);
     html {
         font-size: 87.5%; //14px
-        //font-size: 81.25%; //13px
     }
 }
 
@@ -63,34 +61,87 @@
     }
 }
 
-/* + + + + +  z-indeces  + + + + + */
-@media @screen_min-md {
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* z-indices */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@media screen {
     .nav-direct p {
-        z-index: 1000;
+        z-index: 1000; // keyboard-navigation overlays always on top
     }
 
     .top-header {
-        z-index: 900;
+        z-index: 2; // put MagicMatcher-Dropdowns above .content and metabox-tabs
     }
 
-    .tools .row > .col-xs-12 {
-        z-index: 1;
+    #dokuwiki__aside div.nav a {
+        &:hover, &:focus, &:active {
+            z-index: 100; // show label/link above content on hover etc.
+        }
     }
 
-    .header .row > .col-xs-12 {
-        z-index: 2;
+    .qc-output {
+        z-index: 1; // put qc-output above meta-box
     }
 
+    #spr__meta-box {
+        z-index: 10; // put meta-box above positioned content-elements such as aggregations, edit-buttons
+        ul.meta-tabs > li.active {
+            z-index: 1; // put the active tab above the meta-content in .tab-pane.active
+        }
+    }
+
+    nav#dokuwiki__pagetools {
+        z-index: 100; // put labels of the pagetools above content on hover etc.
+    }
+
+    #dokuwiki__detail .img-link a::before {
+        z-index: 2; // put 'view original file'-overlay above image
+    }
+
+    /* plug-in do_tasks */
+    .plugin__do_usertasks_list {
+        z-index: 200; // put tasks-list above pagetools
+    }
+
+    /* plug-in editable */
+    #dokuwiki__content.main-content div.editbutton_table {
+        z-index: 1; // for IE
+    }
+
+    /* plug-in tabinclude */
+    div#dwpl-ti-container li.dwpl-ti-tab div.selected {
+        z-index: 1; // put .slected tab above div.dwpl-ti-content-box
+    }
+}
+
+@media @screen_min-md {
+    .wide-content .search.main-sidebar p.toggleSearch {
+        z-index: 1; // put search-toggle-button above #dw__search
+    }
+}
+
+@media @screen_max-md {
+    body.show-mobile-sidebar #dokuwiki__aside {
+            z-index: 200; // mobile sidebar above all except nav-direct
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* screen sizing */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+
+// >= 1024
+@media @screen_min-md {
+
     .content .row > .col-xs-12 {
-        z-index: 3;
         border-radius: 0 @ini_default_border_radius @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
     }
 
     .top-header {
         position: absolute;
         top: 0;
-        left: 0;
-        width: 100%;
+        right: 0;
+        width: 50%;
     }
 
     .header,
@@ -120,6 +171,16 @@
         }
     }
 
+    /* + + + + +  layout option compact  + + + + + */
+    .header-compact {
+        .header {
+            .row > .col-xs-12 {
+                height: auto;
+                min-height: auto;
+            }
+        }
+    }
+
     .tools {
         .row > .col-xs-12 {
             position: absolute;
@@ -170,20 +231,22 @@
     }
 }
 
+// > 1024
+@media @screen_md-lg {
+    .wide-content.showSidebar {
+        .content {
+            .row > .col-xs-12 {
+                margin-left: 2.3rem;
+            }
+        }
+    }
+}
+
 @media @screen_max-md {
     .container {
         margin: 0 1.25rem;
     }
 
-    #dokuwiki__usertools {
-        margin-top: 0;
-        max-width: 75%;
-        position: absolute;
-        top: 0;
-        margin-right: 0;
-        right: 1.25rem;
-    }
-
     .content {
         position: relative;
 
@@ -214,10 +277,6 @@
         left: @mobileMargin;
     }
 
-    #dokuwiki__usertools {
-        right: @mobileMargin;
-    }
-
     #dokuwiki__footer {
         .main-footer {
             > * {

css/base_vars.less

@@ -0,0 +1,165 @@
+/**
+ * This file provides the basic vars
+ */
+
+@font_family_screen:       arial, sans-serif;
+@font_family_print:        "Times New Roman", serif;
+
+@nav_direct_background:    @ini_background;
+@nav_direct_color:         @ini_existing;
+
+@background_darker:        rgba(230,230,230, .2);
+@ini_sidebar_width:        (100 - @ini_site_width) - 4;
+
+@height-context-bar:       50px;
+
+@margin-small:             1rem;
+@margin-default:           2rem;
+@margin-big:               3.07rem;
+@nav-margin:               1.3rem;
+
+@small-spacing:            .3rem;
+@very-small-spacing:       .2rem;
+
+@grid:                     @margin-small;
+@toggle-size:              1.75rem;
+
+@transition:               ease-out .30s;
+
+@box-shadow-offset:        .1em .1em .1em rgba(153,153,153,.5); // tabinclude
+@box-shadow:               0 0 .5em rgba(153,153,153,.5); // pagetoolbox hover
+@box-shadow-colored:       0 0 .5em fade(@ini_existing, 50%);
+@box-shadow-right-bottom:  .1em .3rem .5em rgba(153,153,153,.5);
+@box-shadow-bottom:        0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* for programmers customizing */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@fix_border-radius:        3px;           // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
+
+@toggle-showsidebar_width: 3.47rem;       // shown sidebar after toggle
+
+@headericons-margin-xxs:  .45rem;         // screen xxs margin-top for header icons
+
+@page_padding-top:         @margin-small; // padding-top for 'dokuwiki__content'
+@page-header_height:       2.8rem;        // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
+@meta-box_height:          (@page-header_height - @page_padding-top);
+@breadcrumb_height:        @page-header_height;
+
+@formfield_min-height:     2rem;          // min-height for input, textarea, select, keygen
+
+@code-background:          #F6F6F6; /* code, pre, samp, kbd */
+
+/* icons */
+@noopentasks-background:   #ECECEC; /* metabox tabs + num in icons + tabinclude */
+@noopentasks-border:       #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */
+@noopentasks-color:        #666; /* metabox tabs + num in icons + code, pre, samp, kbd */
+@wikiicons-border:         #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
+
+/* navigation left */
+@menu-margin-lg: 1.3rem;
+
+@quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */
+@suggestion-zebra:         #EEE;
+
+/* edit mode */
+@highlight-odd-ini_text:  fade(@ini_background, 95%);
+@highlight-even-ini_text: fade(@ini_text, 5%);
+@color-editBox:           #252525; // editmode for tables, revision states
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* fonts */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@font-size-very-small:     .73rem;
+@font-size-small:          .88rem;
+@font-size-default:        1rem;
+@font-size-big:            1.5rem;
+@font-size-bigger:         1.75rem;
+
+@line-height-default:      125%;
+@line-height-big:          135%;
+@line-height-bigger:       140%;
+
+@font-weight-bold:         800;
+@font-weight-normal:       400;
+
+@font-scale-factor:        .0769;
+
+@font-size-head6: @font-size-default;
+@font-size-head5: @font-size-default + @font-scale-factor;
+@font-size-head4: @font-size-default + (@font-scale-factor * 3);
+@font-size-head3: @font-size-default + (@font-scale-factor * 5);
+@font-size-head2: @font-size-default + (@font-scale-factor * 7);
+@font-size-head1: @font-size-default + (@font-scale-factor * 9);
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* breakpoints */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@break-min-xxs: 480;
+@break-max-xxs: (@break-min-xxs - 1);
+
+@break-min-xs: 768;
+@break-max-xs: (@break-min-xs - 1);
+
+@break-min-sm: 992;
+@break-max-sm: (@break-min-sm - 1);
+
+@break-min-md: 1024;
+@break-max-md: (@break-min-md - 1);
+
+@break-min-lg: 1200;
+@break-max-lg: (@break-min-lg - 1);
+
+@break-min-xlg: 1440;
+@break-max-xlg: (@break-min-xlg - 1);
+
+@break-min-xxlg: 1600;
+@break-max-xxlg: (@break-min-xxlg - 1);
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries for breakpoints */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
+@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
+
+@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
+@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
+
+@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
+@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
+
+@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
+@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
+
+@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
+@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
+
+@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
+@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
+
+@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
+@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
+
+@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
+@screen_only-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px) and (max-width: " ~"@{break-max-xxlg}px)";
+@screen_md-xlg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
+@screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)";
+@screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)";
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* col width */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@c12:               100%;
+@c11:               91.66666667%;
+@c10:               83.33333333%;
+@c9:                75%;
+@c8:                66.66666667%;
+@c7:                58.33333333%;
+@c6:                50%;
+@c5:                41.66666667%;
+@c4:                33.33333333%;
+@c3:                25%;
+@c2:                16.66666667%;
+@c1:                8.33333333%;
+
+@grid-columns:      12;

css/icons.less

@@ -0,0 +1,60 @@
+
+i[data-icon] {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    position: relative;
+    box-sizing: content-box;
+
+    &::before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        mask-size: contain;
+        mask-position: center;
+        mask-repeat: no-repeat;
+        background-color: currentColor;
+    }
+
+    &[data-icon='arrow-left']::before {
+        mask-image: url('img/arrow_left.svg');
+    }
+
+    &[data-icon='arrow-up']::before {
+        mask-image: url('img/arrow_up.svg');
+    }
+
+    &[data-icon='arrow-right']::before {
+        mask-image: url('img/arrow_right.svg');
+    }
+
+    &[data-icon='arrow-down']::before {
+        mask-image: url('img/arrow_down.svg');
+    }
+
+    &[data-icon='info']::before {
+        mask-image: url('img/info.svg');
+    }
+
+    &[data-icon='home']::before {
+        mask-image: url('img/home.svg');
+    }
+
+    &[data-icon='menu-small']::before {
+        mask-image: url('img/menu_small.svg');
+    }
+
+    &[data-icon='light']::before {
+        mask-image: url('img/lightbulb.svg');
+    }
+
+    &[data-icon='warning']::before {
+        mask-image: url('img/warning.svg');
+    }
+
+    &[data-icon='creature']::before {
+        mask-image: url('img/creature.svg');
+    }
+}

css/plugins/bureaucracy.less

@@ -2,9 +2,7 @@
  * This file provides styles for bureaucracy plugin
  */
 
-
 /* + + + + +  global  + + + + + */
-
 .dokuwiki form.bureaucracy__plugin {
     fieldset {
         width: 100%;
@@ -57,7 +55,6 @@
 
         span {
             float: left;
-            width: 50%;
             text-align: right;
             line-height: @line-height-default;
             padding-top: .2em;
@@ -96,10 +93,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */
-
 @media @screen_min-xlg {
     .dokuwiki form.bureaucracy__plugin {
         p {
@@ -108,10 +103,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1439px */
-
 @media @screen_max-xlg {
     .dokuwiki form.bureaucracy__plugin {
         p,
@@ -121,4 +114,3 @@
         }
     }
 }
-

css/plugins/configmanager.less

@@ -2,26 +2,173 @@
  * This file provides styles for config manager
  */
 
-
 /* + + + + +  config__manager  + + + + + */
-
 #dokuwiki__content {
     #config__manager {
+        fieldset {
+            min-width: 100%;
+            overflow-x: auto;
+            box-sizing: border-box;
+            background-color: var(--color-background);
+            margin-left: 0;
+            margin-right: 0;
+            color: var(--color-foreground)
+        }
+
         .selectiondefault {
             background-color: transparent;
+            color: inherit;
         }
 
         tr {
+            a {
+                color: var(--color-shade-4);
+            }
+
             .input {
                 background-color: transparent;
                 color: inherit;
             }
+
+            input, select, textarea {
+                background-color: var(--color-background);
+                color: var(--color-foreground);
+            }
+
+            select.edit {
+                padding: 0 0.3em;
+            }
+
+            &:hover {
+                td {
+                    color: inherit;
+                }
+            }
         }
 
         tr.default {
             .input {
                 background-color: transparent;
             }
+
+            input, select, textarea {
+                background-color: var(--color-shade-1);
+            }
+        }
+
+        td.label {
+            padding: .8em 0 1.2em 1em;
+
+            span.outkey {
+                background-color: var(--color-background);
+                color: inherit;
+                font-size: (@font-size-small - .06);
+                font-weight: bold;
+                padding: 0 @very-small-spacing;
+
+                a {
+                    font-size: inherit;
+                }
+            }
+
+            label {
+                line-height: @line-height-big;
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1024px */
+@media @screen_max-md {
+    #dokuwiki__content {
+        #config__manager {
+            td {
+                &.label {
+                    label,
+                    span {
+                        font-size: @font-size-small;
+                    }
+                }
+
+                &.label + td {
+                    font-size: @font-size-small;
+
+                    span {
+                        font-size: inherit;
+                    }
+                }
+
+                select,
+                input.edit {
+                    font-size: @font-size-small;
+                }
+            }
+
+            .selectiondefault {
+                label {
+                    font-size: @font-size-small;
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 768px */
+@media @screen_max-sm {
+    #dokuwiki__content {
+        #config__manager {
+            table {
+                border-top: 0 none;
+            }
+
+            td {
+                padding-top: 0;
+
+                &.label {
+                    display: block;
+                    width: 100%;
+                    border: 0 none;
+                    border-top: 1px solid @ini_border;
+                    border-bottom: 0 none;
+                    padding: .8em .5em .3em;
+
+
+                    span.outkey {
+                        margin-left: 0;
+                    }
+                }
+
+                .input {
+                    width: 100%;
+                }
+
+
+                &.value,
+                &.label + td {
+                    display: block;
+                    width: 100%;
+                    border: 0 none;
+                    margin-bottom: 1.2rem;
+                }
+
+                select,
+                input.edit {
+                    width: 100%;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            .selectiondefault {
+                float: none;
+                max-width: 100%;
+                width: auto;
+
+                label {
+                    width: 90%;
+                }
+            }
         }
     }
 }

css/plugins/data.less

@@ -0,0 +1,48 @@
+/**
+ * This file provides styles for "data plugin"
+ * after importing struct data this can be deleted
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__content {
+    .dataplugin_entry {
+        dl {
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+
+    .editbutton_plugin_data {
+        position: relative;
+        top: -1em; // as margin after DL
+        float: left;
+        font-size: @font-size-small; // for right position
+        margin-top: 0;
+
+        form {
+            button {
+                min-height: 1rem;
+                height: 1.8em;
+                background-color: var(--color-background);
+                border-top: solid 1px @ini_button_background;
+                border-color: @ini_border;
+                border-radius: 0 0 @fix_border-radius @fix_border-radius;
+                color: @ini_existing;
+                font-size: @font-size-small;
+                line-height: 1.8em;
+                margin-top: -1px; // for right position
+                margin-left: .6em;
+                padding: 0 .3em;
+                transition: @transition background-color, @transition border-color, @transition color;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: @ini_existing;
+                    border-color: @ini_existing;
+                    color: var(--color-background);
+                }
+            }
+        }
+    }
+}

css/plugins/do_tasks.less

@@ -3,26 +3,94 @@
  */
 
 
-/* + + + + +  global  + + + + + */
+/* + + + + +  usertool icon in header  + + + + + */
+#dokuwiki__usertools.nav-usertools {
+    ul {
+        li {
+            &.user-task {
+                .btn-usertools-wrapper();
+                .btn-usertools-num();
 
-ul.page-attributes {
-    .plugin__do_pagetasks {
-        &.do_none {
-            position: relative;
-            border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                position: relative;
 
-            strong {
-                overflow: hidden;
-                background-color: @ini_background;
-                border-color: @noopentasks-border;
-                color: @ini_text_webframe;
-            }
+                .plugin__do_usertasks {
+                    width: 100%;
+                    min-width: (@toggle-size + .25);
+                    min-height: @toggle-size;
+                    border-radius: @ini_default_border_radius;
+                    border: 1px solid @wikiicons-border;
+                    padding: .14rem 0 0 0;
 
-            .num {
-                margin-top: 1px;
-                background-color: @noopentasks-border; // fix
-                color: @noopentasks-color; // fix
-            }
+                    &::before {
+                        content: ''; // remove when fontello is removed from usertools
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background-color: @ini_nav_menu_hover_color;
+                        border: none;
+
+                        svg path {
+                            fill: @ini_nav_menu_hover_bg;
+                        }
+                    }
+                }
+
+                button {
+                    background-color: @ini_nav_menu_hover_bg;
+                }
+
+                svg {
+                    width: 1.2rem;
+                    height: 1.2rem; // for IE 11
+                    margin-bottom: 2px;
+
+                    path {
+                        fill: @ini_nav_menu_hover_color;
+                    }
+                }
+
+                .noopentasks {
+                    span {
+                        background-color: var(--color-background);
+                        border-color: @noopentasks-border;
+                        color: @ini_text_webframe;
+                    }
+
+                    svg path {
+                        fill: @ini_text_webframe;
+                    }
+
+                    .num {
+                        background-color: @noopentasks-border; // fix
+                        color: @noopentasks-color; // fix
+                        margin-top: 1px;
+                    }
+                }
+
+                @media @screen_max-xs {
+                    display: none;
+                }
+            } // user-task
+        } // li
+    } // ul
+}
+
+.plugin__do_usertasks_list {
+    background-color: transparent;
+
+    @media @screen_max-sm {
+        right: 1.25rem !important;
+        left: 1.25rem !important;
+    }
+
+    table.inline {
+        background-color: var(--color-background);
+        margin-top: .5rem;
+
+        @media @screen_max-sm {
+            width: 100%;
         }
     }
 }

css/plugins/edit.less

@@ -1,43 +1,71 @@
 /**
  * This file provides styles for the edit view (?do=edit), preview
- * and section edit buttons.
+ * and "section edit button" and "editbutton_table edit button".
  */
 
-
 /* + + + + +  edit view  + + + + + */
-
 #dokuwiki__content {
     div.section_highlight {
         clear: right;
+        background: repeating-linear-gradient(-45deg,
+        var(--color-shade-1),
+        var(--color-shade-1) 10px,
+        var(--color-background) 10px,
+        var(--color-background) 20px,);
+        border-color: var(--color-background);
     }
 
+    // "section edit button" and "editbutton_table edit button"
     .secedit button {
         clear: both;
         font-size: 100%;
         margin-top: .5rem;
         margin-bottom: .5rem;
+
+        &::after {
+
+        }
+
+        &:hover {
+            &::after {
+                border: none;
+            }
+        }
     }
 
     div.editBox {
-        background-color: #FFF;
-        border: solid 2px #FFF;
-        border-radius: @ini_default_border_radius;
+        background-color: var(--color-background);
+        border: solid 2px var(--color-shade-4);
+        border-radius: @fix_border-radius;
+        padding: 0.5rem;
 
         .editButtons {
             display: inline-block;
             padding-bottom: 1rem;
         }
 
-        * {
-            &:not(button) {
-                color: @color-editBox;
+        @media @screen_max-xs {
+            div.summary {
+                label[for=edit__summary] {
+                    white-space: normal;
+                    display: block;
+                    width: 100%;
+
+                    span {
+                        display: inline-block;
+                        padding-bottom: .4rem;
+                    }
+
+                    input#edit__summary {
+                        max-width: 100%;
+                        box-sizing: border-box;
+                    }
+                }
             }
         }
     }
-
 }
 
-
 .mode_edit {
     .content {
         .msg-area {

css/plugins/edittable.less

@@ -1,36 +1,59 @@
 /**
- * This file provides styles for qc edittable plugin
+ * This file provides styles for "edittable plugin"
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #dokuwiki__content.main-content {
+    #edittable__editor {
+        th,
+        .handsontable th {
+            border-color: var(--color-shade-4);
+            background-color: var(--color-shade-1);
+            color: var(--color-foreground);
+
+            &.ht__highlight {
+                background-color: var(--color-shade-2);
+            }
+        }
+
+        td {
+            border-color: var(--color-shade-4);
+            background-color: var(--color-background);
+            color: var(--color-foreground);
+
+            &.current {
+                background-color: var(--color-shade-1);
+            }
+        }
+    }
+
     div.editbutton_table {
         position: relative; // for IE
-        z-index: 1; // for IE
         float: left;
-        margin-top: -1.46rem !important; // overwrite inline stales
+        margin-top: -1.4em !important; // overwrite inline styles
 
         form div.no {
             button,
             input.button {
                 min-height: 1rem;
-                background-color: @ini_background_content;
-                border-top: solid 1px @ini_button_background;
-                border-color: @ini_border;
-                color: @ini_existing;
+                background-color: var(--color-shade-1);
+                border: solid 0.1em var(--color-shade-2);
+                border-radius: 0.5rem;
+                color: var(--color-foreground);
                 font-size: @font-size-small;
-                margin-top: 0;
-                padding-right: .3em;
-                transition: @transition background-color, @transition border-color, @transition color;
+                margin: 0;
+                margin-top: 0.5rem;
+                padding: 0.2rem 0.4rem;
+                height: auto;
 
                 &:hover,
                 &:focus,
                 &:active {
-                    background-color: @ini_existing;
-                    border-color: @ini_existing;
-                    color: @ini_background_content;
+                    background-color: transparent;
+                    color: var(--color-glow-primary);
+                    border-color: var(--color-glow-primary);
+                    transition: var(--transition-glow);
+                    filter: var(--filter-glow-primary);
                 }
             }
         }

css/plugins/extension__manager.less

@@ -2,18 +2,65 @@
  * This file provides styles for extension manager
  */
 
-
 /* + + + + +  global  + + + + + */
+.dokuwiki {
+    #extension__manager {
+        .actions {
+            font-size: 0;
 
-.dokuwiki #extension__manager {
-    .actions {
-        font-size: 0;
+            > button {
+                font-size: .92rem;
+                margin-left: .3rem;
+                padding-left: .3rem;
+                padding-right: .3rem;
+            }
 
-        > button {
-            font-size: .92rem;
-            margin-left: .3rem;
-            padding-left: .3rem;
-            padding-right: .3rem;
+            p.permerror {
+                @media @screen_max-md {
+                    flex-direction: column;
+                }
+
+                display: flex;
+                align-items: start;
+                gap: 0.5rem;
+                background: none;
+
+                &::before {
+                    content: "";
+                    flex-shrink: 0;
+                    margin-top: 0.3em;
+                    width: 1em;
+                    height: 1em;
+                    mask-size: contain;
+                    mask-position: center top;
+                    mask-repeat: no-repeat;
+                    mask-image: url(img/warning.svg);
+                    background-color: var(--color-warning);
+                }
+            }
+        }
+
+        ul.tabs {
+            li.active {
+                a {
+                    background-color: var(--color-shade-3);
+                    color: var(--color-foreground);
+                    border-color: var(--color-shade-4);
+                }
+            }
+        }
+
+        .panelHeader {
+            background-color: var(--color-shade-2);
+        }
+    }
+
+    #extension__list {
+        .extensionList {
+
+            li {
+                color: var(--color-foreground);
+            }
         }
     }
 }

css/plugins/fastwiki.less

@@ -0,0 +1,7 @@
+/**
+ * This file provides styles for "fastwiki" plugin
+ */
+
+.mode_edit .content .row > .col-xs-12 #dokuwiki__content::before {
+    display: none;
+}

css/plugins/folded.less

@@ -2,9 +2,7 @@
  * This file provides styles for the toggle "folded"
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #dokuwiki__content {
     a.folder {
         background: transparent url("svg.php?svg=down.svg&f=existing") right center no-repeat;

css/plugins/highlight_parent.less

@@ -2,8 +2,17 @@
  * This file provides styles for highlight plugin
  */
 
-
 /* + + + + +  global  + + + + + */
+#plugin__highlightparent {
+    clear: none;
+    display: block;
+    position: relative;
+
+    + * {
+        clear: both;
+        padding-top: 1em; // as h1
+    }
+}
 
 @media @screen_max-md {
     #plugin__highlightparent {

css/plugins/include.less

@@ -1,33 +0,0 @@
-/**
- * This file provides the main design styles
- * across all template elements (typo, colors etc.)
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
- */
-
-#dokuwiki__content .plugin_include_content {
-    > h1,
-    > .section_highlight h1 {
-        padding-top: @font-size-head1;
-    }
-    > h2,
-    > .section_highlight h2 {
-        padding-top: @font-size-head2;
-    }
-    > h3,
-    > .section_highlight h3 {
-        padding-top: @font-size-head3;
-    }
-    > h4,
-    > .section_highlight h4 {
-        padding-top: @font-size-head4;
-    }
-    > h5,
-    > .section_highlight h5 {
-        padding-top: @font-size-head5;
-    }
-    > h6,
-    > .section_highlight h6 {
-        padding-top: @font-size-head6;
-    }
-}

css/plugins/magic-matcher.less

@@ -2,20 +2,28 @@
  * This file provides styles for magic matcher plugin
  */
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + */
 /* magic matcher bar with form on top of page */
-
 #spr__magic-matcher {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
 
+    .container {
+        @media @screen_md-lg {
+            margin-left: 1.8rem;
+        }
+    }
+
     #mm__issueselect_chosen {
         max-width: 50%;
     }
 
+    select[name="mmissues"] + div.chosen-container {
+        max-width: 67%;
+    }
+
     button[name="toggleSuggestions"] {
         position: absolute;
         right: 0;
@@ -38,12 +46,11 @@
 
     #magicmatcher__context {
         position: relative;
-        z-index: 100;
         width: 100%;
         min-height: @height-context-bar;
         box-sizing: border-box;
         box-shadow: @box-shadow;
-        background-color: @ini_background_content;
+        background-color: var(--color-background);
         border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
         font-size: @font-size-default;
         padding: .8em 1em .5em;
@@ -76,16 +83,6 @@
     }
 }
 
-
-/* + + + + +  in meta box  + + + + + */
-#spr__tab-issues {
-     ul.mmissuelist {
-         padding-left: 0;
-         margin-top: 1rem;
-     }
-}
-
-
 /* + + + + +  in content  + + + + + */
 a.jiralink {
     font-size: @font-size-default;
@@ -105,6 +102,58 @@ a.jiralink {
     }
 }
 
+/* + + + + +  tooltip in metabox  + + + + + */
+.dokuwiki {
+    .serverToolTip {
+        box-shadow: @box-shadow;
+        border-radius: @fix_border-radius;
+        font-size: @font-size-default;
+
+        h1.issueTitle {
+            font-size: @font-size-default;
+        }
+
+        h2 {
+            font-size: @font-size-small;
+        }
+
+        ul {
+            margin-top: @small-spacing;
+        }
+
+        p,
+        li {
+            font-size: (@font-size-small - .06);
+
+            * {
+                font-size: inherit;
+            }
+        }
+
+        p {
+            margin-top: @small-spacing;
+            margin-bottom: @small-spacing;
+        }
+
+        .components {
+            .component {
+                font-size: (@font-size-small - .06);
+            }
+        }
+
+        .labels {
+            .label {
+                font-size: (@font-size-small - .06);
+            }
+        }
+
+        .descriptionTeaser {
+            font-size: (@font-size-small - .06);
+            margin-top: (@small-spacing * 2);
+            margin-bottom: (@small-spacing * 2);
+        }
+    }
+}
 
 /* + + + + +  no js version  + + + + + */
 .no-js {
@@ -113,10 +162,29 @@ a.jiralink {
     }
 }
 
+.do-admin #dokuwiki__content {
+    #magicmatcher__repoadmin,
+    #magicmatcher_adminimport {
+        .tabs li {
+            a {
+                cursor: pointer;
+            }
+            &.active {
+                a {
+                    cursor: default;
+                }
+            }
+        }
+
+        .service_wrapper > a{
+            display: inline-block;
+            margin-top: 20px;
+        }
+    }
+}
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1023px */
-
 @media @screen_max-lg {
     #spr__magic-matcher {
         #magicmatcher__context {
@@ -133,27 +201,15 @@ a.jiralink {
 
 @media @screen_max-md {
     #spr__magic-matcher {
-        position: relative;
-
-        .container {
-            margin: .8rem 0 -5px;
-        }
-
-        #magicmatcher__context {
-            border-radius: 0;
-        }
+        display: none;
     }
 }
 
-
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* print */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 @media print {
     #spr__magic-matcher {
         display: none;
     }
 }
-

css/plugins/mediamanager.less

@@ -2,14 +2,20 @@
  * This file provides styles for mediamanager
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #mediamanager__page {
-    .namespaces h2 {
-        bottom: 0;
-        line-height: 100%;
-        margin-bottom: -1px;
+    .namespaces{
+        h2 {
+            bottom: 0;
+            line-height: 100%;
+            margin-bottom: -1px;
+            background-color: var(--color-shade-3);
+            color: var(--color-foreground);
+            border-color: var(--color-shade-4);
+        }
+        .panelHeader {
+            border-color: var(--color-shade-4);
+        }
     }
 
     #media__tree ul li img {
@@ -19,12 +25,42 @@
     ul.tabs li a {
         border-bottom-color: transparent;
     }
-}
 
+    #page__revisions {
+        > .no > ul > li input[type="checkbox"] {
+            margin-left: 0;
+        }
+    }
+
+    .panelHeader {
+        background-color: var(--color-shade-2);
+    }
+
+    .filelist .panelContent ul li{
+        background-color: var(--color-shade-2);
+        color: var(--color-foreground);
+
+        &:hover {
+            background-color: var(--color-shade-4);
+            border: none;
+        }
+    }
+
+    .file dl {
+        dt{
+            background-color: var(--color-shade-2);
+            padding: 0.2em;
+        }
+
+        dd{
+            background-color: var(--color-shade-1);
+            padding: 0.2em;
+        }
+    }
+}
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* media queries */
-
 @media @screen_max-md {
     #mediamanager__page {
         min-width: 100%;

css/plugins/move.less

@@ -2,9 +2,7 @@
  * This file provides styles for move plugin
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #dokuwiki__site > .plugin_move_dialog {
     font-size: @font-size-default;
 

css/plugins/popupviewer.less

@@ -2,12 +2,9 @@
  * This file provides styles for popupviewer plugin
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #popupviewer {
     > .controls > .content {
-
         padding: 1.5rem 1rem 1rem;
 
         td,
@@ -19,6 +16,7 @@
                 line-height: @line-height-default;
             }
         }
+
         .li,
         li {
             font-size: @font-size-default;

css/plugins/qc.less

@@ -1,79 +1,103 @@
 /**
- * This file provides styles for qc plugin
+ * Styles for the QC plugin
  */
 
+/* + + + + +  slideout output  + + + + + */
+.qc-output {
+    position: relative;
+    min-width: 100%;
+    width: auto;
+    background-color: @ini_background !important;
+    font-size: 90%;
+    box-shadow: @box-shadow-bottom;
+    border-bottom: solid 1px @ini_border_light;
+    margin-bottom: 0;
+    padding-top: 0 !important; // for JS overwrite
 
-/* + + + + +  global  + + + + + */
-
-#dokuwiki__site {
-    .plugin__qc {
-        display: inline-block;
-        overflow: visible;
-        position: static;
+    @media @screen_min-xxs {
+        margin-right: -(@margin-default);
+        margin-left: -(@margin-default);
+        padding-left: @margin-default;
+        padding-right: @margin-default;
     }
 
-    #plugin__qc__icon {
-        display: none;
+    @media @screen_min-md {
+        top: -(@margin-small);
     }
 
-    #plugin__qc__link {
-        position: relative;
+    @media @screen_max-md {
+        top: 0;
+        margin-top: -(@page_padding-top + 2);
+        margin-right: -(@margin-default * 1.6);
+        margin-left: -(@margin-default);
+        padding-top: @margin-default;
+    }
 
-        .prefix {
-            .icon-emo-happy();
+    @media @screen_max-xxs {
+        margin-left: -(@margin-small);
+        padding-left: @margin-small;
+        padding-right: @margin-default;
+    }
 
-            width: 100%;
-            font-size: @font-size-default;
-
-            &::before {
-                width: 100%;
-                margin: 0;
-            }
+    h1 {
+        @media @screen_min-md {
+            padding-top: 0;
         }
     }
 
-    #plugin__qc__wrapper {
-        position: absolute;
-        right: 0;
-        z-index: 2000;
-        width: auto;
-        box-shadow: @box-shadow-bottom;
-        background: @ini_background_page_header;
-        background: -webkit-linear-gradient(top, @ini_background_page_header, @ini_background_content);
-        background: linear-gradient(top, @ini_background_page_header, @ini_background_content);
-        border: 0 none;
-        font-size: @font-size-default;
+    h2 {
+        font-size: 1.3rem;
+    }
 
-        p {
-            font-size: @font-size-default;
-        }
+    h3 {
+         font-size: 1.1rem;
+    }
 
-        #plugin__qc__out {
-            h1 {
-                font-size: @font-size-head3;
-            }
+    h4,
+    h5,
+    h6 {
+        font-size: 1rem;
+    }
 
-            h2 {
-                margin-top: 1.6em;
-                font-size: @font-size-head5;
-            }
-            > h1,
-            > h2,
-            > p,
-            > dl,
-            > div {
-                padding-left: 1rem;
-                margin-left: 0;
-            }
+    div,
+    p {
+        margin-left: 0;
+    }
 
-            > div p {
-                padding-left: 0;
+    dl {
+        dt,
+        dd {
+            padding-bottom: @small-spacing;
+
+            @media @screen_max-xxs {
+                float: none;
+                display: inline-block;
+                width: 49%;
+                max-width: 10em;
+                vertical-align: top;
                 margin-left: 0;
             }
         }
+    }
 
-        &[aria-hidden="false"] {
-            margin-top: .5rem;
+    .qc_icon {
+        background-color: #fff;
+        border-radius: @fix_border-radius;
+        vertical-align: top;
+        padding: .1rem;
+    }
+}
+
+/* + + + + +  admin settings  + + + + + */
+.do-admin #dokuwiki__content {
+    #plugin__qc_admin {
+        table .centeralign {
+            .qc_icon svg + span {
+                min-width: 2em;
+                padding-left: .2em;
+                text-align: left;
+                display: inline-block;
+            }
         }
     }
 }

css/plugins/sitemapnavi.less

@@ -0,0 +1,25 @@
+/**
+ * This file provides styles for the sitemapnavi plugin
+ */
+
+#plugin__sitemapnavi {
+    padding-bottom: @nav-margin;
+    margin-bottom: @nav-margin;
+    border-bottom: 1px solid @ini_nav_menu_color;
+
+    label {
+        padding-left: 0.5em;
+    }
+
+    li {
+        line-height: @line-height-bigger;
+
+        li {
+            margin-left: 0.75em;
+        }
+    }
+}
+
+.wide-content #plugin__sitemapnavi {
+    display: none;
+}

css/plugins/starred.less

@@ -1,10 +1,17 @@
 /**
  * This file provides styles for starred plugin
  */
+nav.nav-starred {
+    ul {
+        list-style: none;
 
+        li {
+            margin-left: 0;
 
-/* + + + + +  global  + + + + + */
-
-#dokuwiki__site {
-
+            svg {
+                vertical-align: text-top;
+                fill: @ini_nav_menu_color;
+            }
+        }
+    }
 }

css/plugins/struct.less

@@ -2,9 +2,7 @@
  * This file provides styles for struct plugin
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #dokuwiki__content {
     .structaggregation {
         @link-height: 1.5rem;
@@ -18,11 +16,17 @@
             line-height: @line-height-default;
 
             a {
-                color: @ini_existing;
+                //color: @ini_existing;
                 line-height: @line-height-default;
             }
         }
 
+        th {
+            a {
+                color: @ini_link_alt;
+            }
+        }
+
         // search button in table (f.i. "All products")
         table th input {
             &:not(:focus) {
@@ -47,9 +51,11 @@
 
             &.export {
                 bottom: 1px;
+                overflow-x: hidden;
                 background: transparent url("svg.php?svg=file-export.svg&f=existing") left center no-repeat;
                 background-size: auto 20px;
                 border: solid 1px @ini_border;
+                border-radius: 0 0 @fix_border-radius @fix_border-radius;
                 color: @ini_existing;
                 font-size: @font-size-small;
                 line-height: 1;
@@ -61,17 +67,21 @@
                 &:focus,
                 &:active {
                     background-color: @ini_existing;
-                    background-image: url("svg.php?svg=file-export.svg&f=background_content");
+                    background-image: url("svg.php?svg=file-export.svg&f=background");
                     border-color: @ini_existing;
-                    color: @ini_background_content;
+                    //color: var(--color-background);
                     text-decoration: none;
                 }
             }
         }
     }
 
-    #plugin__struct_output{
+    #plugin__struct_output {
         margin-right: 0;
+
+        th {
+            background-color: @ini_background_alt;
+        }
     }
 
     .struct_entry_form {
@@ -95,8 +105,43 @@
     }
 }
 
-.dokuwiki .struct_inlineditor {
-    z-index: 3;
+/* + + + + +  struct inline-editor  + + + + + */
+.dokuwiki {
+    .struct_inlineditor {
+        box-shadow: @box-shadow-bottom;
+
+        p.hint {
+            margin-top: @small-spacing;
+            margin-bottom: @margin-small;
+        }
+
+        button[type="submit"] + button {
+            min-height: @formfield_min-height;
+            vertical-align: middle;
+            margin-left: @small-spacing;
+        }
+    }
+
+    /* struct fields for bureaucracy forms */
+    .bureaucracy__plugin {
+        .field {
+            clear: both;
+
+            label {
+                padding: 0;
+
+                .label {
+                    text-align: right;
+                    font-weight: bold;
+                    padding: 0;
+                }
+            }
+
+            .input {
+                line-height: 2.5em;
+            }
+        }
+    }
 }
 
 
@@ -146,6 +191,6 @@ form {
                     padding-top: 1rem;
                 }
             }
-        }
+        } // fieldset
     }
-}
+} // form

css/plugins/structstatus.less

@@ -0,0 +1,12 @@
+/**
+ * This file provides styles for structstatus plugin
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__content {
+    .struct_status {
+        border-color: @ini_border;
+        border-radius: @fix_border-radius;
+        font-size: @font-size-small;
+    }
+}

css/plugins/tabinclude.less

@@ -2,9 +2,7 @@
  * This file provides styles for the tabinclude
  */
 
-
 /* + + + + +  plugin tabinclude  + + + + + */
-
 div#dwpl-ti-container {
     li.dwpl-ti-tab {
         box-shadow: none;
@@ -34,31 +32,26 @@ div#dwpl-ti-container {
 
             &.selected {
                 position: relative;
-                z-index: 1;
-                background-color: @ini_background_content;
+                background-color: var(--color-background);
                 color: @ini_text;
             }
         }
     }
 
-
 /* + + +  content box  + + + */
     div.dwpl-ti-content-box {
         position: relative;
-        z-index: 0;
         overflow: auto;
         box-shadow: @box-shadow;
-        background-color: @ini_background_content;
+        background-color: var(--color-background);
         border: solid 1px @ini_border;
         border-radius: 0;
         margin-top: -1px;
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* media queries */
-
 @media @screen_max-md {
     div#dwpl-ti-container { }
 }

css/plugins/tablelayout.less

@@ -0,0 +1,19 @@
+/**
+ * This file provides styles for "tablelayout plugin"
+ */
+
+
+/* + + + + +  global  + + + + + */
+
+#dokuwiki__content.main-content .secedit.editbutton_table{
+    a.button.print {
+        min-height: 1rem;
+        background-color: var(--color-background);
+        border-radius: 0 @ini_default_border_radius;
+        border-top: solid 1px;
+        border-color: @ini_border;
+        font-size: .88rem;
+        margin-top: -1px;
+        padding-right: .3em;
+    }
+}

css/plugins/tagging.less

@@ -2,9 +2,7 @@
  * This file provides styles for the form in tagcloud
  */
 
-
 /* + + + + +  plugin tagging  + + + + + */
-
 #spr__meta-box {
     ul.tagging_cloud {
         width: 100%;
@@ -12,35 +10,45 @@
 
         li {
             &.t0 a {
-                font-size: .9rem;
+                font-size: .88rem;
             }
+
             &.t1 a {
                 font-size: 1rem;
             }
+
             &.t2 a {
                 font-size: 1.1rem;
             }
+
             &.t3 a {
                 font-size: 1.2rem;
             }
+
             &.t4 a {
                 font-size: 1.3rem;
             }
+
             &.t5 a {
                 font-size: 1.4rem;
             }
+
             &.t6 a {
                 font-size: 1.5rem;
             }
+
             &.t7 a {
                 font-size: 1.6rem;
             }
+
             &.t8 a {
                 font-size: 1.7rem;
             }
+
             &.t9 a {
                 font-size: 1.8rem;
             }
+
             &.t10 a {
                 font-size: 1.9rem;
             }
@@ -61,10 +69,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* media queries */
-
 @media @screen_max-md {
     #spr__meta-box {
         form {

css/plugins/tplinc.less

@@ -0,0 +1,6 @@
+.wide-content {
+    .sidebarheader,
+    .sidebarfooter {
+        visibility: hidden;
+    }
+}

css/plugins/translation.less

@@ -0,0 +1,57 @@
+/**
+ * This file provides styles for the translation plugin
+ */
+@import "../base";
+
+
+.dokuwiki div.plugin_translation {
+    clear: none;
+    display: block;
+    position: relative;
+    float: none;
+
+    box-sizing: border-box;
+    width: 100%;
+    padding-bottom: 0.5rem;
+    height: 4rem;
+
+    + * {
+        clear: both;
+        padding-top: 1em; // as h1
+    }
+
+    ul li {
+        margin-top: 0;
+
+        // active language
+        span.wikilink1 {
+            .fnButton();
+            .fnActiveButton();
+            cursor: default;
+        }
+
+        a.wikilink1{
+            .fnButton();
+        }
+
+        span.wikilink2{
+            .fnButton();
+            .fnButtonSecondary();
+            .fnActiveButtonSecondary()
+        }
+
+        a.wikilink2,
+        a.wikilink2:visited{
+            .fnButton();
+            .fnButtonSecondary();
+            background-color: var(--color-shade-4);
+        }
+    }
+}
+
+@media @screen_max-md {
+    .dokuwiki div.plugin_translation {
+        clear: both;
+        margin-top: 1rem;
+    }
+}

css/plugins/wrap.less

@@ -0,0 +1,119 @@
+.dokuwiki {
+  span.wrap_em {
+    color: var(--color-error);
+  }
+
+  span.wrap_hi {
+    background-color: var(--color-highlight);
+    color: var(--color-foreground);
+  }
+
+  span.wrap_lo {
+    color: var(--color-text-2);
+  }
+
+  div.plugin_wrap {
+    &.wrap_box {
+      background-color: var(--color-shade-1);
+      color: var(--color-foreground);
+    }
+
+    &.wrap_info,
+    &.wrap_tip,
+    &.wrap_important,
+    &.wrap_alert,
+    &.wrap_help,
+    &.wrap_download,
+    &.wrap_todo {
+      @media @screen_max-md {
+        flex-direction: column;
+      }
+
+      display: flex;
+      align-items: start;
+      gap: 1rem;
+      border: none;
+      border-left: solid 0.5rem var(--color-shade-4);
+      border-radius: 0.5rem;
+      padding: 1em;
+      background-image: none;
+      background-color: var(--color-shade-1);
+
+      &::before {
+        content: "";
+        flex-shrink: 0;
+        margin-top: 0.3em;
+        width: 2em;
+        height: 2em;
+        mask-size: contain;
+        mask-position: center top;
+        mask-repeat: no-repeat;
+        background-color: currentColor;
+      }
+    }
+
+    &.wrap_info {
+      color: var(--color-foreground);
+
+      &::before {
+        mask-image: url(img/info.svg);
+      }
+    }
+
+    &.wrap_tip {
+      color: var(--color-foreground);
+
+      &::before {
+        mask-image: url(img/lightbulb.svg);
+      }
+    }
+
+    &.wrap_important {
+      border-left-color: var(--color-warning);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-warning);
+        mask-image: url(img/warning.svg);
+      }
+    }
+
+    &.wrap_alert {
+      border-left-color: var(--color-error);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-error);
+        mask-image: url(img/power.svg);
+      }
+    }
+
+    &.wrap_help {
+      border-left-color: var(--color-accent-1);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-accent-1);
+        mask-image: url(img/question.svg);
+      }
+    }
+
+    &.wrap_download {
+      border-left-color: var(--color-success);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-success);
+        mask-image: url(img/arrow_down.svg);
+      }
+    }
+
+    &.wrap_todo {
+      color: var(--color-foreground);
+
+      &::before {
+        mask-image: url(img/tick_small.svg);
+      }
+    }
+  }
+}

css/print.less

@@ -1,6 +1,517 @@
 /**
  * This file provides the styles for printing.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
+/* + + + + +  variables  + + + + + */
+@color-print: #000;
+@background-print: transparent;
+@border-color-print: #ccc;
+@border-dark-print: #777;
+
+/*  + + + + + print styles  + + + + + */
+html,
+body {
+    background: @background-print;
+}
+
+a:link,
+a:visited {
+    background: @background-print !important;
+    color: @color-print !important;
+    text-decoration: underline;
+}
+
+/* lightbox is shown: */ #dokuwiki__top[style="overflow: hidden;"] .page-wrapper,
+#spr__direct,
+.top-header,
+.main-footer,
+.menu-togglelink,
+.main-title.desktop-only,
+#spr__meta-box,
+.content .row > .col-xs-12 #dokuwiki__content::before,
+.page-wrapper > .tools,
+.breadcrumbs,
+.wikilink1[href*="id=pagefooter"],
+.structaggregation > a.export,
+#dokuwiki__content .structaggregation > a,
+#dokuwiki__content a.folder {
+    display: none !important;
+}
+
+.content .row > .col-xs-12 {
+    box-shadow: none;
+}
+
+.dokuwiki div.page,
+.main-sidebar.claim,
+.page-footer {
+    padding: 20pt 20pt 0;
+}
+
+#dokuwiki__header .logo img {
+    height: 4rem;
+    width: auto;
+}
+
+
+/* + + + + + + + + + + + + + + */
+/* + + + + +  admin  + + + + + */
+
+/* + + +  acl_manager  + + + */
+#acl__tree {
+    display: none;
+}
+
+#acl__detail {
+    .aclpage {
+        display: block;
+        font-size: 110%;
+        margin-top: 13pt;
+        padding-bottom: 13pt;
+    }
+}
+
+/* + + +  Extension Manager  + + + */
+#extension__manager {
+    form.search {
+        display: inline-block;
+        margin-bottom: 20pt;
+    }
+    form.install {
+        display: none;
+    }
+    ul.tabs {
+        li.active {
+            a {
+                font-weight: bold;
+                text-decoration: none;
+            }
+        }
+    }
+}
+
+#extension__list {
+    .extensionList {
+        border-bottom: 1pt solid @border-color-print;
+        padding: 0;
+
+        li {
+            list-style-type: none;
+            border-top: 1pt solid @border-color-print;
+            margin-left: 0;
+
+            &::after {
+                content: '';
+                clear: both;
+                display: table;
+                height: 10pt;
+            }
+
+            a.info,
+            .actions.col {
+                display: none;
+            }
+
+            .screenshot {
+                float: left;
+                border: 1pt solid @border-color-print;
+                margin: 0 10pt 5pt 0;
+            }
+
+            h2, h2 * {
+                font-size: 100%;
+            }
+        }
+    }
+}
+
+#user__manager {
+    table input,
+    .import_users input{
+        display: none !important;
+    }
+}
+#acl__detail #acl__user {
+    display: none;
+}
+
+.do-admin #dokuwiki__content {
+
+    #confmanager {
+        .popup,
+        .confmanager_singleLine#local,
+        button,
+        .button.saveButton {
+            display: none !important;
+        }
+
+        .confmanager_singleLine {
+            div.defaultValue {
+                word-break: break-all;
+            }
+        }
+
+    }
+
+    > form > fieldset {
+
+        border-color: @border-color-print;
+
+        > textarea.edit[readonly] {
+            border: 0 none;
+            min-height: 2250pt;
+            overflow:visible;
+            display: block;
+            page-break-inside: auto;
+
+            + br + label[for="autosubmit"] {
+                margin-top: 20pt;
+
+                input {
+                    margin-right: 5pt;
+                }
+            }
+        }
+    }
+
+    #magicmatcher__repoadmin {
+
+        button {
+            display: none;
+        }
+        .service-wrapper {
+            padding-top: 1rem;
+        }
+    }
+
+    .plugin_move_form {
+        legend {
+            display: none;
+        }
+    }
+
+    #plugin__qc_admin {
+        table .centeralign {
+            .qc_icon svg + span {
+                vertical-align: top;
+            }
+        }
+    }
+
+    .doku_form.struct_newschema {
+        button {
+            display: none;
+        }
+    }
+    form.plugin_tagging {
+        display: none;
+    }
+
+    #plugin__upgrade_meter {
+        ol li .stage {
+            padding-left: .4em;
+        }
+    }
+
+    #plugin__upgrade {
+        code {
+            word-break: break-all;
+            font-size: .82rem;
+        }
+    }
+}
+
+/* + + +  Configuration Settings  + + + */
+#dokuwiki__content #config__manager {
+    fieldset {
+        padding: 0;
+
+        legend {
+            padding: 0 .5em;
+            text-align: center;
+            background-color: #fff;
+        }
+         > .table > table {
+             border: 0 solid @border-color-print;
+             width: 100%;
+             tr {
+                 border-top: 1pt solid @border-color-print;
+
+                 &:first-child {
+                     border-top-width: 0;
+                 }
+                 td {
+                     border-width: 0;
+                 }
+             }
+         }
+    }
+    td.value,
+    td.label {
+        font-size: 100%;
+        padding: .6em 0 .8em 1em;
+    }
+    td.label {
+        width: 35%;
+        span.outkey, span.outkey * {
+            font-size: 100%;
+        }
+        label {
+            display: block;
+        }
+        span.outkey, label {
+            padding-left: .2rem;
+        }
+    }
+
+    td.value {
+        input[type="text"] {
+            border: 0 none;
+        }
+
+        select {
+            max-width: 80%;
+            box-sizing: border-box;
+            border: 1px solid transparent;
+            background: transparent;
+        }
+        .selectiondefault {
+            position: relative;
+
+            input.checkbox {
+                position: absolute;
+                top:0;
+                left: 0;
+            }
+
+            label, input[type="text"] {
+                position: relative;
+                top:0;
+                left: 0;
+                margin-left: 20pt;
+                margin-top: .5em;
+                padding-left: 0;
+                background-color: transparent;
+            }
+        }
+    }
+
+}
+
+.do-admin div.ui-admin ul.admin_tasks,
+.do-admin div.ui-admin ul.admin_plugins {
+    li {
+        list-style-type: none;
+        min-height: 2em;
+
+        a {
+            span.icon {
+                float: left;
+                clear: left;
+                display: inline-block;
+                width: 22pt;
+                height: 22pt;
+                border: 1pt solid @border-color-print;
+                margin: 0 10pt 0 0;
+
+                &:empty {
+                    &::before {
+                        content: "?";
+                        display: inline-block;
+                        padding-top: 1pt;
+                    }
+                }
+
+                svg {
+                    width: 20pt;
+                    height: 20pt;
+
+                    path {
+                        fill: @color-print;
+                    }
+                }
+            }
+
+            span.prompt {
+                min-height: 26pt;
+                display: inline-block;
+                margin: 0;
+                padding-top: 4pt;
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + */
+/* + + + + +  Template Style Settings  + + + + + */
+.page-footer {
+    border-top: 1pt solid @border-color-print;
+    margin-top: 13pt;
+}
+
+#dokuwiki__content #plugin__styling {
+
+    button {
+        display: none !important;
+    }
+
+    .styling input[type="text"] {
+        border: 0 none;
+    }
+}
+
+/* + + +  data plugin  + + + */
+.dataplugin_entry dl {
+    border: 1pt solid @border-color-print;
+    padding: 7pt;
+    margin: 7pt 0;
+
+    dt {
+        clear: left;
+        float: left;
+        width: 22%;
+        font-weight: bold;
+        text-align: right;
+        margin-right: 5pt;
+    }
+}
+
+#dokuwiki__detail {
+    div.img_detail dl {
+        dt {
+            display: inline-block;
+            width: 20%;
+            background-color: transparent;
+        }
+        dd {
+            display: inline-block;
+            width: 75%;
+        }
+    }
+}
+
+/* + + +  tabbox  + + + */
+div#dwpl-ti-container .dwpl-ti,
+.dwpl-ti-permalink-header,
+.dwpl-ti-permalink-footer {
+    display: none !important;
+}
+
+div#dwpl-ti-container div.dwpl-ti-content-box {
+    box-shadow: none;
+    border: 0 none;
+}
+
+/* + + +  media nmanager  + + + */
+#mediamanager__page {
+    .namespaces,
+    .filelist .tabs,
+    .panelHeader form {
+        display: none;
+    }
+
+    ul.rows {
+        width: auto;
+        padding: 0;
+    }
+
+    .filelist li {
+        clear: both;
+        list-style-type: none;
+        margin: 7pt 0 0;
+
+        dl {
+            position: relative;
+            display: table;
+            border-top: solid 1pt @border-color-print;
+            padding-top: 2rem;
+        }
+
+        dt {
+            display: table-cell;
+            width: 10%;
+            height: 40px;
+
+            .size,
+            .filesize {
+                width: 15%;
+            }
+
+            .date {
+                width: 20%;
+            }
+        }
+
+        dd {
+            display: table-cell;
+
+            &.name {
+                position: absolute;
+                top: .5rem;
+                left: 0;
+                display: block;
+                font-weight: bold;
+                margin: 0;
+            }
+        }
+    }
+}
+
+/* + + +  forms  + + + */
+form {
+    button {
+        &[type="submit"],
+        &[type="reset"] {
+            display: none;
+        }
+    }
+
+    fieldset {
+        label,
+        label.block {
+            display: block;
+            text-align: left;
+        }
+
+        br + br {
+            display: none;
+        }
+
+        label {
+            clear: both;
+
+            > input {
+                &:first-child {
+                    float: left;
+                }
+
+                + span {
+                    float: left;
+                    display: inline-block;
+                    padding-left: 7pt;
+                    padding-bottom: 13pt;
+                }
+            }
+        }
+
+        label.block {
+            display: block;
+            text-align: left;
+
+            > span {
+                float: none;
+                padding-bottom: 0;
+
+                &:first-child {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    input,
+    textarea,
+    select {
+        border: 1pt solid @border-dark-print;
+    }
+}

css/template_admin.less

@@ -1,10 +1,7 @@
 /**
  * This file provides the design styles for the admin tools
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 .do-admin {
     #admin__version {
         font-size: @font-size-default;
@@ -52,7 +49,7 @@
                         svg {
                             width: 26px;
                             height: 26px;
-                            border: solid 1px @ini_background_content;
+                            border: solid 1px var(--color-background);
                             border-radius: @ini_default_border_radius;
                             fill: @ini_existing;
                             transition: @transition background-color, @transition border-color, @transition fill;
@@ -71,10 +68,10 @@
                             svg {
                                 background-color: @ini_existing;
                                 border-color: @ini_existing;
-                                fill: @ini_background_content;
+                                fill: var(--color-background);
 
                                 path {
-                                    fill: @ini_background_content;
+                                    fill: var(--color-background);
                                 }
                             }
                         }
@@ -85,10 +82,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* 1024px */
-
 @media @screen_max-md {
     .do-admin {
         div.ui-admin {
@@ -113,10 +108,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* 768px */
-
 @media @screen_max-xs {
     .do-admin {
         div.ui-admin {

css/template_detail.less

@@ -0,0 +1,168 @@
+/**
+ * This file provides the design styles for the the detail template
+ * (media details)
+ */
+
+#dokuwiki__detail {
+
+    /* + + + + +  linked image  + + + + + */
+    @media screen {
+        .img-link {
+            text-align: center;
+
+            a {
+                position: relative;
+                left: 0;
+                display: inline-block;
+                max-width: 100%;
+                color: var(--color-foreground);
+                margin: 0 auto 1.4em;
+
+                &::before {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    display: block;
+                    width: 100%;
+                    box-sizing: border-box;
+                    background: var(--color-background);
+                    line-height: @line-height-default;
+                    padding: @margin-small;
+                }
+
+                img {
+                    margin: 0;
+                    display: block;
+                    border: solid 0.1rem transparent;
+                    position: relative;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    text-decoration: none;
+
+                    &::before {
+                        content: attr(title);
+                        border: solid 0.1rem var(--color-glow-primary);
+                        transition: var(--transition-glow);
+                        filter: var(--filter-glow-primary);
+                    }
+
+                    img {
+                        border: solid 0.1rem var(--color-shade-4);
+                    }
+                }
+            }
+        }
+    }
+
+
+    /* + + + + +  meta data  + + + + + */
+    div.img_detail {
+        @media screen {
+            /* vertical minus margin of .img-detail corresponds to the padding of .page */
+            background-color: var(--color-shade-1);
+            border: solid 0.1em var(--color-shade-4);
+            margin: @margin-default -(@margin-default);
+            color: var(--color-foreground);
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6,
+            p {
+                padding-left: @margin-default;
+                padding-right: @margin-default;
+            }
+
+            > h4 {
+                padding-top: (@margin-default / 2);
+            }
+        }
+
+        dl {
+            @media screen {
+                .display-flex();
+                .flex-wrap();
+
+                width: 100%;
+
+                dt,
+                dd {
+                    box-sizing: border-box;
+                    margin: .2em 0;
+                    padding: (@small-spacing * 2) @small-spacing;
+                }
+            }
+
+            dt {
+                background-color: none;
+                color: var(--color-foreground);
+
+                @media @screen_min-xs {
+                    width: 33.3%;
+                }
+
+                @media @screen_max-xs {
+                    width: 40%;
+                }
+            }
+
+            dd {
+                padding-left: (@small-spacing * 2);
+
+                @media @screen_min-xs {
+                    width: 66.6%;
+                }
+
+                @media @screen_max-xs {
+                    width: 59.9%;
+                }
+            }
+        }
+
+        .os-map {
+            p {
+                text-align: right;
+            }
+
+            iframe {
+                border: solid @ini_button_background;
+                border-width: 1px 0;
+                margin: 0;
+                padding: 0;
+            }
+        }
+
+        @media @screen_max-md {
+            margin-right: -(@margin-default * 1.6);
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6,
+            p {
+                padding-right: (@margin-default * 1.6);
+            }
+        }
+
+        @media @screen_max-xs {
+            margin-left: -(@margin-small);
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6,
+            p {
+                padding-left: @margin-small;
+            }
+        }
+    }
+}

css/toollist.less

@@ -0,0 +1,29 @@
+/**
+ * Styles for site tools and user tools in sidebar
+ * Using BEM methodology as far as possible
+ */
+
+//.toollist {
+//}
+
+.toollist__listitem {
+    list-style: none;
+
+    a {
+        display: inline-flex;
+        flex-direction: row-reverse;
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+
+    span {
+        font-size: @font-size-default;
+    }
+
+    svg {
+        width: @font-size-default;
+        vertical-align: middle;
+        fill: var(--color-foreground);
+        margin-right: .2em;
+    }
+}

deleted.files

@@ -0,0 +1,102 @@
+# This is a list of files that were present in previous releases
+# but were removed later. They should not exist in your installation.
+.gitlab-ci.yml
+css/area_main-sidebar-content.less
+css/area_main-sidebar.less
+css/area_sidebar-search.less
+css/area_sidetools.less
+css/base_fonts.less
+css/basic.css
+css/content.css
+css/design.css
+css/includes.css
+css/mobile.css
+css/plugins/hightlight_parent.less
+css/print.css
+css/structure.css
+fabfile.py
+fonts/Google Android License.txt
+fonts/icons/fontello-1a5d199c.zip
+fonts/icons/svg/index.css
+fonts/roboto-black.eot
+fonts/roboto-black.svg
+fonts/roboto-black.ttf
+fonts/roboto-black.woff
+fonts/roboto-blackItalic.eot
+fonts/roboto-blackItalic.svg
+fonts/roboto-blackItalic.ttf
+fonts/roboto-blackItalic.woff
+fonts/roboto-bold.eot
+fonts/roboto-bold.svg
+fonts/roboto-bold.ttf
+fonts/roboto-bold.woff
+fonts/roboto-boldcondensed.eot
+fonts/roboto-boldcondensed.svg
+fonts/roboto-boldcondensed.ttf
+fonts/roboto-boldcondensed.woff
+fonts/roboto-boldcondenseditalic.eot
+fonts/roboto-boldcondenseditalic.svg
+fonts/roboto-boldcondenseditalic.ttf
+fonts/roboto-boldcondenseditalic.woff
+fonts/roboto-bolditalic.eot
+fonts/roboto-bolditalic.svg
+fonts/roboto-bolditalic.ttf
+fonts/roboto-bolditalic.woff
+fonts/roboto-condensed.eot
+fonts/roboto-condensed.svg
+fonts/roboto-condensed.ttf
+fonts/roboto-condensed.woff
+fonts/roboto-condenseditalic.eot
+fonts/roboto-condenseditalic.svg
+fonts/roboto-condenseditalic.ttf
+fonts/roboto-condenseditalic.woff
+fonts/roboto-italic.eot
+fonts/roboto-italic.svg
+fonts/roboto-italic.ttf
+fonts/roboto-italic.woff.textClipping
+fonts/roboto-italic2.woff
+fonts/roboto-light.eot
+fonts/roboto-light.svg
+fonts/roboto-light.ttf
+fonts/roboto-light.woff
+fonts/roboto-lightItalic.eot
+fonts/roboto-lightItalic.svg
+fonts/roboto-lightItalic.ttf
+fonts/roboto-lightItalic.woff
+fonts/roboto-medium.eot
+fonts/roboto-medium.svg
+fonts/roboto-medium.ttf
+fonts/roboto-medium.woff
+fonts/roboto-mediumItalic.eot
+fonts/roboto-mediumItalic.svg
+fonts/roboto-mediumItalic.ttf
+fonts/roboto-mediumItalic.woff
+fonts/roboto-regular.eot
+fonts/roboto-regular.svg
+fonts/roboto-regular.ttf
+fonts/roboto-regular.woff
+fonts/roboto-thin.eot
+fonts/roboto-thin.svg
+fonts/roboto-thin.ttf
+fonts/roboto-thin.woff
+fonts/roboto-thinItalic.eot
+fonts/roboto-thinItalic.svg
+fonts/roboto-thinItalic.ttf
+fonts/roboto-thinItalic.woff
+images/apple-touch-icon.png
+images/logo.png
+js/base/helper.js
+js/base/rem.min.js
+js/base/spc.js
+js/base/velocity.min.js
+js/legacy/html5shiv.js
+js/legacy/respond.min.js
+js/breadcrumb.js
+js/sidebar-menu.js
+tpl/nav-main.php
+tpl/nav-page-quality-tasks.php
+tpl/nav-sitetools.php
+tpl/nav-trace.php
+tpl/nav-usermenu.php
+tpl/nav-usertools.php
+tpl_functions.php

detail.php

@@ -1,93 +1,405 @@
-<!DOCTYPE html>
 <?php
 /**
- * DokuWiki Image Detail Page
+ * DokuWiki sprintDoc Detail Template
  *
- * @author   Andreas Gohr <andi@splitbrain.org>
- * @author   Anika Henke <anika@selfthinker.org>
+ * @link     FIXME
+ * @author   Jana Deutschlaender <deutschlaender@cosmocode.de>
+ * @author   Michael Grosse <grosse@cosmocode.de>
  * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
  */
+use dokuwiki\template\sprintdoc\Template;
 
-// must be run from within DokuWiki
-if (!defined('DOKU_INC')) die();
+if (!defined('DOKU_INC')) die();                        /* must be run from within DokuWiki */
 header('X-UA-Compatible: IE=edge,chrome=1');
 
+global $JSINFO;
+if (empty($JSINFO['template'])) {
+    $JSINFO['template'] = array();
+}
+$JSINFO['template']['sprintdoc'] = array('sidebar_toggle_elements' => tpl_getConf('sidebar_sections'));
+
+$showTools = true;
+$showSidebar =  true;
+
 ?>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang']?>"
- lang="<?php echo $conf['lang']?>" dir="<?php echo $lang['direction'] ?>" class="no-js">
+<!DOCTYPE html>
+<html class="edge no-js" lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>">
 <head>
-    <meta charset="UTF-8" />
-    <title>
-        <?php echo hsc(tpl_img_getTag('IPTC.Headline',$IMG))?>
-        [<?php echo strip_tags($conf['title'])?>]
-    </title>
-    <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
-    <?php tpl_metaheaders()?>
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
-    <?php tpl_includeFile('meta.html') ?>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* meta and link relations */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<?php tpl_metaheaders() ?>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* page title */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<title><?php echo hsc(tpl_img_getTag('IPTC.Headline', $IMG)) ?> [<?php echo strip_tags($conf['title']) ?>]</title>
+
+<script type="text/javascript">(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* favicons */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<?php
+include('tpl/favicon_tiles.php');
+?>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: meta.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<?php tpl_includeFile('meta.html') ?>
 </head>
 
-<body>
-    <div id="dokuwiki__detail" class="<?php echo tpl_classes(); ?>">
-        <?php html_msgarea() ?>
+<body id="dokuwiki__top" class="<?php echo tpl_classes(); ?> wide-content showSidebar <?php echo tpl_getConf('header_layout'); ?>">
+<div id="dokuwiki__site">
+    <?php
 
-        <?php if($ERROR): print $ERROR; ?>
-        <?php else: ?>
 
-            <?php if($REV) echo p_locale_xhtml('showrev');?>
-            <h1><?php echo hsc(tpl_img_getTag('IPTC.Headline', $IMG))?></h1>
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* template Include: tpl/nav-direct */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+    ?>
+    <?php include('tpl/nav-direct.php') ?>
+
+
+    <div class="page-wrapper <?php echo ($showSidebar) ? 'hasSidebar' : ''; ?>">
+        <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: header.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+            tpl_includeFile('header.html');
+        ?>
+
+        <div id="dokuwiki__header" class="header no-print">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-12">
+                        <div class="claim main-sidebar">
+                            <div class="menu-togglelink mobile-only">
+                                <a href="#">
+                                    <span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle'); ?></span>
+                                </a>
+                            </div>
+
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Logo */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* upload your logo into the data/media folder (root of the media manager) and replace 'logo.png' in der template config accordingly: */
+                                include('tpl/main-sidebar-logo.php');
+                            ?>
+                            <div class="main-title">
+                                <?php if ($conf['title']):
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Title Mobile */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                    <p class="title mobile-only"><?php echo $conf['title'] ?></p>
+                                <?php endif ?>
+                            </div><!-- .main-title -->
+
+                            <div class="menu-tool-select">
+                                <h5 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_tool-select') ?></h5>
+                                <?php tpl_actiondropdown($lang['tools'], "test"); ?>
+                            </div><!-- .menu-tool-select -->
+                        </div><!-- .headings -->
+                    </div><!-- .col -->
+
+
+                    <div class="col-xs-12">
+                        <div class="main-title desktop-only">
+                            <?php if ($conf['title']):
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Title Desktop */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                <p class="title"><?php echo $conf['title'] ?></p>
+                            <?php endif ?>
+                            <?php if ($conf['tagline']):
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Tagline Desktop */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                <p class="claim"><?php echo $conf['tagline'] ?></p>
+                            <?php endif ?>
+                        </div><!-- .main-title -->
+                    </div><!-- .col -->
+
+                </div><!-- .row -->
+            </div><!-- .container -->
+        </div><!-- .header -->
+        <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* headline menu area (Accessibility ) */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+        ?>
+
+        <div class="sr-only nav-area-head">
+            <h5 class="sr-only" aria-level="1"><?php echo tpl_getLang('nav-area-head') ?></h5>
+        </div><!-- .nav-area-head -->
+
+        <div class="tools">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-12">
+                        <div class="search main-sidebar">
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* search form */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                include('tpl/main-sidebar-search.php');
+                            ?>
+                        </div><!-- .search -->
+
+                        <div class="sidebarheader main-sidebar">
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: sidebarheader.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                tpl_includeFile('sidebarheader.html')
+                            ?>
+                        </div><!-- .sidebarheader -->
+
+                        <div id="dokuwiki__aside">
+
+                            <?php
+                            echo Template::getInstance()->getInclude(
+                                'sidebarheader',
+                                '<div class="sidebarheader">',
+                                '<div class="clearer"></div></div>'
+                            );
+                            ?>
+
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* sidebar */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                include('tpl/main-sidebar-nav.php');
+                            ?>
+
+                            <?php
+                            echo Template::getInstance()->getInclude(
+                                'sidebarfooter',
+                                '<div class="sidebarfooter">',
+                                '<div class="clearer"></div></div>'
+                            );
+                            ?>
+                        </div><!-- .aside -->
+
+                    </div><!-- .col -->
+                </div><!-- .row -->
+            </div><!-- .container -->
+        </div><!-- .tools -->
+
+
+        <div class="top-header">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-12">
+
+                        <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* User Tools but no MagicMatcher Bar */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                        $showTools = true;
+                        include('tpl/nav-usertools-buttons.php');
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: header.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                        tpl_includeFile('header.html');
+                        ?>
+
+                    </div><!-- .col -->
+                </div><!-- .row -->
+            </div><!-- .container -->
+        </div><!-- /top-header -->
+
+
+        <div id="dokuwiki__detail">
+
+            <?php tpl_flush(); /* flush the output buffer */ ?>
 
             <div class="content group">
-                <?php tpl_img(900, 700); /* the image; parameters: maximum width, maximum height (and more) */ ?>
+                <div class="container">
+                    <div class="row">
+                        <div class="col-xs-12">
+                            <div class="breadcrumbs" data-do="<?php echo tpl_getLang('image_detail') ?>">
 
-                <div class="img_detail">
-                    <h2><?php print nl2br(hsc(tpl_img_getTag('simple.title'))); ?></h2>
+                                <div class="togglelink page_main-content">
+                                    <a id="spr__toggle-content" href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle') ?></span></a>
+                                </div>
 
-                    <?php if(function_exists('tpl_img_meta')): ?>
-                        <?php tpl_img_meta(); ?>
-                    <?php else: /* deprecated since Release 2014-05-05 */ ?>
-                        <dl>
-                            <?php
-                                $config_files = getConfigFiles('mediameta');
-                                foreach ($config_files as $config_file) {
-                                    if(@file_exists($config_file)) {
-                                        include($config_file);
-                                    }
-                                }
+                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_status') ?></h6>
 
-                                foreach($fields as $key => $tag){
-                                    $t = array();
-                                    if (!empty($tag[0])) {
-                                        $t = array($tag[0]);
-                                    }
-                                    if(is_array($tag[3])) {
-                                        $t = array_merge($t,$tag[3]);
-                                    }
-                                    $value = tpl_img_getTag($t);
-                                    if ($value) {
-                                        echo '<dt>'.$lang[$tag[1]].':</dt><dd>';
-                                        if ($tag[2] == 'date') {
-                                            echo dformat($value);
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* breadcrumb */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                include('tpl/nav-breadcrumb.php');
+                                ?>
+
+                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['page_tools'] ?></h6>
+
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* page tools */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                ?>
+                                <nav id="dokuwiki__pagetools">
+                                    <div class="tools">
+                                        <ul>
+                                            <?php
+                                            echo '<li>' . dokuwiki\template\sprintdoc\tpl::pageToolAction('mediaManager') . '</li>';
+                                            echo '<li>' . dokuwiki\template\sprintdoc\tpl::pageToolAction('img_backto') . '</li>';
+                                            ?>
+                                        </ul>
+                                    </div>
+                                </nav>
+
+                            </div>
+                            <div id="dokuwiki__content" class="page main-content">
+
+                                <div id="spr__meta-box"></div>
+                                <div class="msg-area"><?php html_msgarea();/*msg('Information.', 0);msg('Success', 1);msg('Notification', 2);msg('Fehler', -1);*/ ?></div>
+
+
+                                <?php if ($ERROR): print $ERROR; ?>
+                                <?php else: ?>
+
+                                <?php if ($REV) {
+                                    echo p_locale_xhtml('showrev');
+                                } ?>
+
+                                <h1><?php echo hsc(tpl_img_getTag('IPTC.Headline', $IMG)) ?></h1>
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* image */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                ?>
+                                <div class="img-link">
+                                    <?php tpl_img(900, 700); /* the image; parameters: maximum width, maximum height (and more) */ ?>
+                                </div>
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* meta data of image */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                ?>
+                                <div class="img_detail">
+                                    <?php
+                                        $simple_title = hsc(tpl_img_getTag('simple.title'));
+                                        if(strlen($simple_title) > 0) {
+                                    ?>
+                                    <h4><?php print nl2br(hsc(tpl_img_getTag('simple.title'))); ?></h4>
+                                    <?php
                                         } else {
-                                            echo hsc($value);
+                                            echo '<h4>' . tpl_getLang('meta_data') . '</h4>';
+                                        }
+                                    ?>
+
+                                    <?php
+                                    tpl_img_meta();
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* open street maps if geo data is available */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                    /** @var \helper_plugin_spatialhelper_index $spatial */
+                                    $spatial = plugin_load('helper', 'spatialhelper_index');
+                                    if ($spatial && plugin_load('helper', 'geophp')) {
+                                        global $IMG;
+                                        $point = $spatial->getCoordsFromExif($IMG);
+                                        if ($point) {
+                                            $long = $point->getX();
+                                            $lat = $point->getY();
+                                            $latShort = round($lat, 3);
+                                            $longShort = round($long, 3);
+
+                                            $hrefOSM = "https://www.openstreetmap.org/?mlat=$lat&mlon=$long#map=18/$lat/$long";
+                                            $srcOSM = 'https://www.openstreetmap.org/export/embed.html?bbox=' . ($long - 0.004) . ',' . ($lat - 0.002) . ',' . ($long + 0.004) . ',' . ($lat + 0.002) . '&layer=mapnik&marker=' . $lat . ',' . $long;
+                                            echo '<div class="os-map">';
+                                            echo '<h4 lang="en">OSM (Open Street Maps):</h4>';
+                                            echo '<iframe width="100%" height="350" frameborder="0" src="' . $srcOSM . '"></iframe><br/><p><a class="button" target="_blank" title="' . tpl_getLang('osm_zoom_link_title') . '" href="' . $hrefOSM . '">' . tpl_getLang('osm_zoom_link_text') . '</a></p>';
+                                            echo '</div>';
                                         }
-                                        echo '</dd>';
                                     }
-                                }
-                            ?>
-                        </dl>
-                    <?php endif; ?>
-                    <?php //Comment in for Debug// dbg(tpl_img_getTag('Simple.Raw')); ?>
-                </div>
+                                    ?>
+                                    <?php //Comment in for Debug// dbg(tpl_img_getTag('Simple.Raw')); ?>
+                                </div>
+                            </div><!-- .main-content -->
+                        </div><!-- .col -->
+                    </div><!-- .row -->
+                </div><!-- .container -->
             </div><!-- /.content -->
 
-            <p class="back">
-                <?php tpl_action('mediaManager', 1) ?><br />
-                &larr; <?php tpl_action('img_backto', 1) ?>
-            </p>
 
         <?php endif; ?>
-    </div>
+        </div>
+    </div><!-- /wrapper -->
+
+
+    <!-- ********** FOOTER ********** -->
+
+    <div id="dokuwiki__footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-xs-12">
+
+                    <div class="main-footer">
+                        <?php include 'tpl/main-footer.php'; ?>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div><!-- /footer -->
+
+
+    <?php tpl_includeFile('footer.html') ?>
+</div><!-- .dokuwiki__site -->
+
+<div class="no"><?php tpl_indexerWebBug() /* provide DokuWiki housekeeping, required in all templates */ ?></div>
+
 </body>
 </html>

fabfile.py

@@ -1,61 +0,0 @@
-import os
-import sys
-import json
-from fabric.api import run, env, cd
-
-config = {
-    'TARGET_PORT': 6589,
-    'TARGET_USER': 'www-data',
-}
-
-try:
-    TARGET_CONF = json.loads(os.getenv('TARGET_CONF'))
-except (SyntaxError, ValueError) as e:
-    print 'Could not parse configuration: %s' % e
-    sys.exit(1)
-
-BUILD_JOB_NAME = os.getenv('CI_BUILD_NAME')
-
-if BUILD_JOB_NAME not in TARGET_CONF:
-    print 'Could not find job configuration for %s' % BUILD_JOB_NAME
-    sys.exit(1)
-else:
-    config.update(TARGET_CONF[BUILD_JOB_NAME])
-
-BRANCH = os.getenv('CI_BUILD_REF_NAME')
-
-if not BRANCH:
-    print 'Could not get branch name from configuration: Please specify CI_BUILD_REF_NAME env var'
-    sys.exit(1)
-
-for option in ['TARGET_HOST', 'TARGET_PATH']:
-    if not config.get(option):
-        print 'Could not get %s from configuration!' % option
-        sys.exit(1)
-
-env.hosts = [config.get('TARGET_HOST')]
-env.port = config.get('TARGET_PORT')
-env.user = config.get('TARGET_USER')
-
-
-def pre():
-    if config.get('PRE_CMDS'):
-        [run(cmd) for cmd in config.get('PRE_CMDS')]
-
-
-def git_pull():
-    run('git fetch --all')
-    run('git checkout --force %s' % BRANCH)
-    run('git reset --hard origin/%s' % BRANCH)
-
-
-def post():
-    if config.get('POST_CMDS'):
-        [run(cmd) for cmd in config.get('POST_CMDS')]
-
-
-def deploy():
-    with cd(config.get('TARGET_PATH')):
-        pre()
-        git_pull()
-        post()

fonts/argonglow/OFL

@@ -0,0 +1,96 @@
+Copyright (c) 2025, The Argon Glow Project Authors (https://codeberg.org/kritzl/argon-glow),
+Copyright (c) 2025, kritzl (kritzl@kritzl.dev),
+Copyright (c) 2025, traumweh (traumweh@lyx.sh),
+with Reserved Font Name "Argon Glow".
+
+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:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+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.

fonts/athiti/OFL

@@ -0,0 +1,93 @@
+Copyright (c) 2015, Cadson Demak (info@cadsondemak.com)
+
+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.

fonts/departuremono/LICENSE

@@ -0,0 +1,93 @@
+Copyright 2022–2024 Helena Zhang (helenazhang.com).
+
+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:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+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.

img/LICENSE

@@ -0,0 +1,427 @@
+Attribution-ShareAlike 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+     Considerations for licensors: Our public licenses are
+     intended for use by those authorized to give the public
+     permission to use material in ways otherwise restricted by
+     copyright and certain other rights. Our licenses are
+     irrevocable. Licensors should read and understand the terms
+     and conditions of the license they choose before applying it.
+     Licensors should also secure all rights necessary before
+     applying our licenses so that the public can reuse the
+     material as expected. Licensors should clearly mark any
+     material not subject to the license. This includes other CC-
+     licensed material, or material used under an exception or
+     limitation to copyright. More considerations for licensors:
+    wiki.creativecommons.org/Considerations_for_licensors
+
+     Considerations for the public: By using one of our public
+     licenses, a licensor grants the public permission to use the
+     licensed material under specified terms and conditions. If
+     the licensor's permission is not necessary for any reason--for
+     example, because of any applicable exception or limitation to
+     copyright--then that use is not regulated by the license. Our
+     licenses grant only permissions under copyright and certain
+     other rights that a licensor has authority to grant. Use of
+     the licensed material may still be restricted for other
+     reasons, including because others have copyright or other
+     rights in the material. A licensor may make special requests,
+     such as asking that all changes be marked or described.
+     Although not required by our licenses, you are encouraged to
+     respect those requests where reasonable. More considerations
+     for the public:
+    wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution-ShareAlike 4.0 International Public
+License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution-ShareAlike 4.0 International Public License ("Public
+License"). To the extent this Public License may be interpreted as a
+contract, You are granted the Licensed Rights in consideration of Your
+acceptance of these terms and conditions, and the Licensor grants You
+such rights in consideration of benefits the Licensor receives from
+making the Licensed Material available under these terms and
+conditions.
+
+
+Section 1 -- Definitions.
+
+  a. Adapted Material means material subject to Copyright and Similar
+     Rights that is derived from or based upon the Licensed Material
+     and in which the Licensed Material is translated, altered,
+     arranged, transformed, or otherwise modified in a manner requiring
+     permission under the Copyright and Similar Rights held by the
+     Licensor. For purposes of this Public License, where the Licensed
+     Material is a musical work, performance, or sound recording,
+     Adapted Material is always produced where the Licensed Material is
+     synched in timed relation with a moving image.
+
+  b. Adapter's License means the license You apply to Your Copyright
+     and Similar Rights in Your contributions to Adapted Material in
+     accordance with the terms and conditions of this Public License.
+
+  c. BY-SA Compatible License means a license listed at
+     creativecommons.org/compatiblelicenses, approved by Creative
+     Commons as essentially the equivalent of this Public License.
+
+  d. Copyright and Similar Rights means copyright and/or similar rights
+     closely related to copyright including, without limitation,
+     performance, broadcast, sound recording, and Sui Generis Database
+     Rights, without regard to how the rights are labeled or
+     categorized. For purposes of this Public License, the rights
+     specified in Section 2(b)(1)-(2) are not Copyright and Similar
+     Rights.
+
+  e. Effective Technological Measures means those measures that, in the
+     absence of proper authority, may not be circumvented under laws
+     fulfilling obligations under Article 11 of the WIPO Copyright
+     Treaty adopted on December 20, 1996, and/or similar international
+     agreements.
+
+  f. Exceptions and Limitations means fair use, fair dealing, and/or
+     any other exception or limitation to Copyright and Similar Rights
+     that applies to Your use of the Licensed Material.
+
+  g. License Elements means the license attributes listed in the name
+     of a Creative Commons Public License. The License Elements of this
+     Public License are Attribution and ShareAlike.
+
+  h. Licensed Material means the artistic or literary work, database,
+     or other material to which the Licensor applied this Public
+     License.
+
+  i. Licensed Rights means the rights granted to You subject to the
+     terms and conditions of this Public License, which are limited to
+     all Copyright and Similar Rights that apply to Your use of the
+     Licensed Material and that the Licensor has authority to license.
+
+  j. Licensor means the individual(s) or entity(ies) granting rights
+     under this Public License.
+
+  k. Share means to provide material to the public by any means or
+     process that requires permission under the Licensed Rights, such
+     as reproduction, public display, public performance, distribution,
+     dissemination, communication, or importation, and to make material
+     available to the public including in ways that members of the
+     public may access the material from a place and at a time
+     individually chosen by them.
+
+  l. Sui Generis Database Rights means rights other than copyright
+     resulting from Directive 96/9/EC of the European Parliament and of
+     the Council of 11 March 1996 on the legal protection of databases,
+     as amended and/or succeeded, as well as other essentially
+     equivalent rights anywhere in the world.
+
+  m. You means the individual or entity exercising the Licensed Rights
+     under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+  a. License grant.
+
+       1. Subject to the terms and conditions of this Public License,
+          the Licensor hereby grants You a worldwide, royalty-free,
+          non-sublicensable, non-exclusive, irrevocable license to
+          exercise the Licensed Rights in the Licensed Material to:
+
+            a. reproduce and Share the Licensed Material, in whole or
+               in part; and
+
+            b. produce, reproduce, and Share Adapted Material.
+
+       2. Exceptions and Limitations. For the avoidance of doubt, where
+          Exceptions and Limitations apply to Your use, this Public
+          License does not apply, and You do not need to comply with
+          its terms and conditions.
+
+       3. Term. The term of this Public License is specified in Section
+          6(a).
+
+       4. Media and formats; technical modifications allowed. The
+          Licensor authorizes You to exercise the Licensed Rights in
+          all media and formats whether now known or hereafter created,
+          and to make technical modifications necessary to do so. The
+          Licensor waives and/or agrees not to assert any right or
+          authority to forbid You from making technical modifications
+          necessary to exercise the Licensed Rights, including
+          technical modifications necessary to circumvent Effective
+          Technological Measures. For purposes of this Public License,
+          simply making modifications authorized by this Section 2(a)
+          (4) never produces Adapted Material.
+
+       5. Downstream recipients.
+
+            a. Offer from the Licensor -- Licensed Material. Every
+               recipient of the Licensed Material automatically
+               receives an offer from the Licensor to exercise the
+               Licensed Rights under the terms and conditions of this
+               Public License.
+
+            b. Additional offer from the Licensor -- Adapted Material.
+               Every recipient of Adapted Material from You
+               automatically receives an offer from the Licensor to
+               exercise the Licensed Rights in the Adapted Material
+               under the conditions of the Adapter's License You apply.
+
+            c. No downstream restrictions. You may not offer or impose
+               any additional or different terms or conditions on, or
+               apply any Effective Technological Measures to, the
+               Licensed Material if doing so restricts exercise of the
+               Licensed Rights by any recipient of the Licensed
+               Material.
+
+       6. No endorsement. Nothing in this Public License constitutes or
+          may be construed as permission to assert or imply that You
+          are, or that Your use of the Licensed Material is, connected
+          with, or sponsored, endorsed, or granted official status by,
+          the Licensor or others designated to receive attribution as
+          provided in Section 3(a)(1)(A)(i).
+
+  b. Other rights.
+
+       1. Moral rights, such as the right of integrity, are not
+          licensed under this Public License, nor are publicity,
+          privacy, and/or other similar personality rights; however, to
+          the extent possible, the Licensor waives and/or agrees not to
+          assert any such rights held by the Licensor to the limited
+          extent necessary to allow You to exercise the Licensed
+          Rights, but not otherwise.
+
+       2. Patent and trademark rights are not licensed under this
+          Public License.
+
+       3. To the extent possible, the Licensor waives any right to
+          collect royalties from You for the exercise of the Licensed
+          Rights, whether directly or through a collecting society
+          under any voluntary or waivable statutory or compulsory
+          licensing scheme. In all other cases the Licensor expressly
+          reserves any right to collect such royalties.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+  a. Attribution.
+
+       1. If You Share the Licensed Material (including in modified
+          form), You must:
+
+            a. retain the following if it is supplied by the Licensor
+               with the Licensed Material:
+
+                 i. identification of the creator(s) of the Licensed
+                    Material and any others designated to receive
+                    attribution, in any reasonable manner requested by
+                    the Licensor (including by pseudonym if
+                    designated);
+
+                ii. a copyright notice;
+
+               iii. a notice that refers to this Public License;
+
+                iv. a notice that refers to the disclaimer of
+                    warranties;
+
+                 v. a URI or hyperlink to the Licensed Material to the
+                    extent reasonably practicable;
+
+            b. indicate if You modified the Licensed Material and
+               retain an indication of any previous modifications; and
+
+            c. indicate the Licensed Material is licensed under this
+               Public License, and include the text of, or the URI or
+               hyperlink to, this Public License.
+
+       2. You may satisfy the conditions in Section 3(a)(1) in any
+          reasonable manner based on the medium, means, and context in
+          which You Share the Licensed Material. For example, it may be
+          reasonable to satisfy the conditions by providing a URI or
+          hyperlink to a resource that includes the required
+          information.
+
+       3. If requested by the Licensor, You must remove any of the
+          information required by Section 3(a)(1)(A) to the extent
+          reasonably practicable.
+
+  b. ShareAlike.
+
+     In addition to the conditions in Section 3(a), if You Share
+     Adapted Material You produce, the following conditions also apply.
+
+       1. The Adapter's License You apply must be a Creative Commons
+          license with the same License Elements, this version or
+          later, or a BY-SA Compatible License.
+
+       2. You must include the text of, or the URI or hyperlink to, the
+          Adapter's License You apply. You may satisfy this condition
+          in any reasonable manner based on the medium, means, and
+          context in which You Share Adapted Material.
+
+       3. You may not offer or impose any additional or different terms
+          or conditions on, or apply any Effective Technological
+          Measures to, Adapted Material that restrict exercise of the
+          rights granted under the Adapter's License You apply.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+     to extract, reuse, reproduce, and Share all or a substantial
+     portion of the contents of the database;
+
+  b. if You include all or a substantial portion of the database
+     contents in a database in which You have Sui Generis Database
+     Rights, then the database in which You have Sui Generis Database
+     Rights (but not its individual contents) is Adapted Material,
+     including for purposes of Section 3(b); and
+
+  c. You must comply with the conditions in Section 3(a) if You Share
+     all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+  c. The disclaimer of warranties and limitation of liability provided
+     above shall be interpreted in a manner that, to the extent
+     possible, most closely approximates an absolute disclaimer and
+     waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+  a. This Public License applies for the term of the Copyright and
+     Similar Rights licensed here. However, if You fail to comply with
+     this Public License, then Your rights under this Public License
+     terminate automatically.
+
+  b. Where Your right to use the Licensed Material has terminated under
+     Section 6(a), it reinstates:
+
+       1. automatically as of the date the violation is cured, provided
+          it is cured within 30 days of Your discovery of the
+          violation; or
+
+       2. upon express reinstatement by the Licensor.
+
+     For the avoidance of doubt, this Section 6(b) does not affect any
+     right the Licensor may have to seek remedies for Your violations
+     of this Public License.
+
+  c. For the avoidance of doubt, the Licensor may also offer the
+     Licensed Material under separate terms or conditions or stop
+     distributing the Licensed Material at any time; however, doing so
+     will not terminate this Public License.
+
+  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+     License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+  a. The Licensor shall not be bound by any additional or different
+     terms or conditions communicated by You unless expressly agreed.
+
+  b. Any arrangements, understandings, or agreements regarding the
+     Licensed Material not stated herein are separate from and
+     independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+  a. For the avoidance of doubt, this Public License does not, and
+     shall not be interpreted to, reduce, limit, restrict, or impose
+     conditions on any use of the Licensed Material that could lawfully
+     be made without permission under this Public License.
+
+  b. To the extent possible, if any provision of this Public License is
+     deemed unenforceable, it shall be automatically reformed to the
+     minimum extent necessary to make it enforceable. If the provision
+     cannot be reformed, it shall be severed from this Public License
+     without affecting the enforceability of the remaining terms and
+     conditions.
+
+  c. No term or condition of this Public License will be waived and no
+     failure to comply consented to unless expressly agreed to by the
+     Licensor.
+
+  d. Nothing in this Public License constitutes or may be interpreted
+     as a limitation upon, or waiver of, any privileges and immunities
+     that apply to the Licensor or You, including from the legal
+     processes of any jurisdiction or authority.
+
+
+=======================================================================
+
+Creative Commons is not a party to its public
+licenses. Notwithstanding, Creative Commons may elect to apply one of
+its public licenses to material it publishes and in those instances
+will be considered the “Licensor.” The text of the Creative Commons
+public licenses is dedicated to the public domain under the CC0 Public
+Domain Dedication. Except for the limited purpose of indicating that
+material is shared under a Creative Commons public license or as
+otherwise permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the
+public licenses.
+
+Creative Commons may be contacted at creativecommons.org.

img/arrow_down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M299.996 0a25 25 0 0 0-24.998 24.998v389.803c0 23.914 15.39 43.832 34.613 51.795 19.223 7.962 44.194 4.759 61.104-12.15L485.617 339.54c5.091-5.09 12.583-5.09 17.674 0s5.097 12.589.006 17.68L317.682 542.836c-9.973 9.972-25.387 9.972-35.36 0L105.543 366.059a25 25 0 0 0-35.348 0 25 25 0 0 0-.005 35.353L246.969 578.19c29.08 29.08 76.986 29.08 106.066 0L538.65 392.574c24.199-24.198 24.199-64.192 0-88.39-24.198-24.199-64.188-24.195-88.386.004L335.359 419.092c-2.66 2.66-4.216 2.309-6.617 1.314-2.4-.994-3.742-1.838-3.742-5.601V25.002A25 25 0 0 0 299.996 0" style="stroke-width:3.77953"/>
+</svg>

img/arrow_down_left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M501.832 73.168a25 25 0 0 0-17.676 7.32L208.523 356.121c-16.91 16.91-20.118 41.877-12.156 61.1 7.963 19.223 27.883 34.613 51.797 34.613H410.67c7.2 0 12.498 5.298 12.498 12.498s-5.298 12.498-12.498 12.498h-262.5c-14.103 0-25.002-10.893-25.002-24.996V201.832a25 25 0 0 0-25.004-25.002 25 25 0 0 0-24.994 25.002v250.002c0 41.125 33.875 75 75 75h262.5c34.222 0 62.494-28.28 62.494-62.502s-28.272-62.502-62.494-62.502H248.164c-3.763 0-4.607-1.343-5.601-3.744-.995-2.401-1.347-3.945 1.314-6.606l275.63-275.632a25 25 0 0 0 0-35.36 25 25 0 0 0-17.675-7.32" style="stroke-width:3.77953"/>
+</svg>

img/arrow_down_right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M98.168 73.168a25 25 0 0 0-17.68 7.324 25 25 0 0 0 0 35.352l275.633 275.633c16.91 16.91 41.877 20.118 61.1 12.156 19.223-7.963 34.613-27.883 34.613-51.797V189.33c0-7.2 5.298-12.498 12.498-12.498s12.498 5.298 12.498 12.498v262.5c0 14.103-10.893 25.002-24.996 25.002H201.832a25 25 0 0 0-25.002 25.004 25 25 0 0 0 25.002 24.994h250.002c41.125 0 75-33.875 75-75v-262.5c0-34.222-28.28-62.494-62.502-62.494s-62.502 28.272-62.502 62.494v162.506c0 3.763-1.343 4.607-3.744 5.601-2.401.995-3.945 1.347-6.606-1.314L115.848 80.493a25 25 0 0 0-17.68-7.325" style="stroke-width:3.77953"/>
+</svg>

img/arrow_left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M216.264 62.867a25 25 0 0 0-17.676 7.324L21.81 246.971c-29.08 29.08-29.08 76.984 0 106.064l185.615 185.617c24.198 24.199 64.188 24.193 88.387-.006 24.198-24.198 24.204-64.188.006-88.386l-114.91-114.908c-2.662-2.661-2.31-4.209-1.315-6.61.994-2.4 1.838-3.742 5.601-3.742h389.803A25 25 0 0 0 600 299.998 25 25 0 0 0 575.002 275H185.199c-23.914 0-43.838 15.384-51.8 34.607-7.963 19.223-4.758 44.194 12.152 61.104l114.908 114.908c5.09 5.091 5.09 12.583 0 17.674s-12.583 5.09-17.674 0L57.168 317.678c-9.973-9.973-9.976-25.381-.004-35.354l176.777-176.78a25 25 0 0 0 0-35.358 25 25 0 0 0-17.677-7.319" style="stroke-width:3.77953"/>
+</svg>

img/arrow_right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M348.379 43.203c-16.048 0-32.096 6.05-44.195 18.149-24.199 24.198-24.195 64.188.004 88.386l114.904 114.903c2.66 2.66 2.309 4.218 1.314 6.619-.994 2.4-1.842 3.738-5.605 3.738l-389.799.004A25 25 0 0 0 .006 300a25 25 0 0 0 24.996 24.998l389.799.004c23.914 0 43.832-15.388 51.795-34.611 7.962-19.223 4.759-44.194-12.15-61.104L339.54 114.385c-5.09-5.091-5.09-12.583 0-17.674s12.589-5.097 17.68-.006L542.836 282.32c9.972 9.973 9.972 25.387 0 35.36L366.059 494.457a25 25 0 0 0 0 35.35 25 25 0 0 0 35.353.004L578.19 353.033c29.08-29.08 29.08-76.986 0-106.066L392.574 61.352c-12.099-12.1-28.147-18.149-44.195-18.149" style="stroke-width:3.77953"/>
+</svg>

img/arrow_up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M300.002 0c-19.247 0-38.493 7.27-53.033 21.81L61.354 207.427c-24.199 24.198-24.199 64.194 0 88.392 24.198 24.199 64.188 24.193 88.386-.006l114.903-114.904c2.66-2.66 4.206-2.309 6.607-1.314 2.4.994 3.748 1.842 3.748 5.605v389.803A25 25 0 0 0 299.996 600a25 25 0 0 0 25.002-25.002V185.195c0-23.913-15.388-43.834-34.611-51.797s-44.188-4.753-61.098 12.157L114.387 260.459c-5.091 5.09-12.585 5.09-17.676 0s-5.095-12.589-.004-17.68L282.322 57.164c9.973-9.972 25.387-9.972 35.36 0l176.777 176.777a25 25 0 0 0 35.348 0 25 25 0 0 0 .006-35.353L353.035 21.81C338.495 7.27 319.248 0 300.002 0" style="stroke-width:3.77953"/>
+</svg>

img/arrow_up_left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M148.166 73.17c-41.125 0-75 33.875-75 75v262.5c0 34.222 28.28 62.494 62.502 62.494s62.502-28.272 62.502-62.494V248.164c0-3.763 1.343-4.607 3.744-5.601 2.401-.995 3.945-1.347 6.606 1.314l275.632 275.63a25 25 0 0 0 35.36 0 25 25 0 0 0 0-35.35L243.879 208.522c-16.91-16.91-41.877-20.118-61.1-12.156-19.223 7.963-34.613 27.883-34.613 51.797V410.67c0 7.2-5.298 12.498-12.498 12.498s-12.498-5.298-12.498-12.498v-262.5c0-14.103 10.893-25.002 24.996-25.002h250.002a25 25 0 0 0 25.002-25.004 25 25 0 0 0-25.002-24.994Z" style="stroke-width:3.77953"/>
+</svg>

img/arrow_up_right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M188.83 73.164c-34.222 0-62.494 28.282-62.494 62.504s28.272 62.502 62.494 62.502h162.506c3.763 0 4.607 1.341 5.602 3.742.994 2.401 1.348 3.947-1.313 6.608L79.992 484.152a25 25 0 0 0 0 35.36 25 25 0 0 0 35.352 0l275.633-275.633c16.91-16.91 20.12-41.877 12.158-61.1s-27.885-34.615-51.8-34.615H188.83c-7.2 0-12.498-5.296-12.498-12.496s5.298-12.498 12.498-12.498h262.5c14.103 0 25.002 10.89 25.002 24.994v250.004a25 25 0 0 0 25.004 25.002 25 25 0 0 0 24.994-25.002V148.164c0-41.125-33.875-75-75-75z" style="stroke-width:3.77953"/>
+</svg>