Adds proper styling for new Admin UI

inc/Ui/Admin.php

@@ -21,14 +21,14 @@ class Admin extends Ui {
      */
     public function show() {
         $this->menu = $this->getPluginList();
-        dbg($this->menu);
-
+        echo '<div class="UI-admin">';
         echo p_locale_xhtml('admin');
         $this->showSecurityCheck();
         $this->showAdminMenu();
         $this->showManagerMenu();
         $this->showVersion();
         $this->showPluginMenu();
+        echo '</div>';
     }
 
     /**

lib/tpl/dokuwiki/css/_admin.less

@@ -0,0 +1,59 @@
+.dokuwiki div.UI-admin {
+
+    /* main task grouped in two columns */
+    ul.admin_tasks {
+        float: left;
+        width: 40%;
+        list-style-type: none;
+        font-size: 1.125em;
+    }
+    [dir=rtl] ul.admin_tasks {
+        float: right;
+    }
+
+    /* general menu item styling */
+    ul li {
+        margin: 0 0 1em 0;
+        font-weight: bold;
+        list-style-type: none;
+
+        div {
+            // flexbox takes care of RTL alignment
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: flex-start;
+            align-content: flex-start;
+            align-items: flex-start;
+
+            span {
+                width: 1.5em;
+                align-self: center;
+
+                svg {
+                    width: 1.5em;
+                    height: 1.5em;
+                    fill: @ini_link;
+                }
+            }
+
+            a {
+                flex-grow: 1;
+                align-self: center;
+                margin: 0 0.5em;
+            }
+        }
+    }
+
+    /* DokuWiki version */
+    #admin__version {
+        clear: left;
+        float: right;
+        color: @ini_text_neu;
+        background-color: inherit;
+    }
+    [dir=rtl] #admin__version {
+        clear: right;
+        float: left;
+    }
+}

lib/tpl/dokuwiki/style.ini

@@ -31,7 +31,7 @@ css/_diff.css             = screen
 css/_edit.css             = screen
 css/_modal.css            = screen
 css/_forms.css            = screen
-css/_admin.css            = screen
+css/_admin.less           = screen
 css/structure.less        = screen
 css/design.less           = screen
 css/pagetools.less        = screen