some changes

css/_admin.less

@@ -34,10 +34,10 @@
                         svg {
                             width: 1.5em;
                             height: 1.5em;
-                            fill: @ini_link;
+                            fill: var(--ini-link);
                             display: inline-block;
                             path {
-                                fill: @ini_link;
+                                fill: var(--ini-link);
                             }
                         }
                     }
@@ -54,7 +54,7 @@
     #admin__version {
         clear: left;
         float: right;
-        color: @ini_text_neu;
+        color: var(--ini-text-neu);
         background-color: inherit;
     }
     [dir=rtl] & #admin__version {

css/_diff.css

@@ -9,11 +9,28 @@
     font-stretch: normal;
     src: url("lib/tpl/mytemplate/css/roboto.ttf") format("truetype");
 }
-/*Меняет шрифт всего вики*/
-body {
-    /*"Comic Sans MS", "Open Sans",*/
-    font-family:  "Roboto" !important;
+
+:root {
+    --ini-text: #333;
+    --ini-background: #fff;
+    --ini-text-alt: #999;
+    --ini-background-alt: #eee;
+    --ini-text-neu: #666;
+    --ini-background-neu: #ddd;
+    --ini-border: #1C3031;
+    --ini-highlight: #F2C94C;
+    --ini-link: #1C3031;
+    --ini-background-site: #fbfaf9;
+    --ini-existing: #27AE60;
+    --ini-missing: #EE1010;
+    --ini-site-width: 75em;
+    --ini-sidebar-width: 16em;
+    --ini-tablet-width: 800px;
+    --ini-phone-width: 480px;
+    --ini-theme-color: #008800;
 }
+
+
 .dokuwiki table.diff {
     width: 100%;
     border-width: 0;
@@ -30,7 +47,7 @@ body {
 
 /* table header */
 .dokuwiki table.diff th {
-    border-bottom: 1px solid @ini_border;
+    border-bottom: 1px solid var(--ini-border);
     font-size: 110%;
     font-weight: normal;
 }
@@ -69,17 +86,17 @@ body {
 .dokuwiki table.diff .diff-addedline {
     background-color: #cfc;
     color: inherit;
-    width: ~"calc(50% - .7em)";
+    width: calc(50% - .7em);
 }
 .dokuwiki table.diff .diff-deletedline {
     background-color: #fdd;
     color: inherit;
-    width: ~"calc(50% - .7em)";
+    width: calc(50% - .7em);
 }
 .dokuwiki table.diff td.diff-context {
     background-color: #eee;
     color: inherit;
-    width: ~"calc(50% - .7em)";
+    width: calc(50% - .7em);
 }
 .dokuwiki table.diff td.diff-addedline strong,
 .dokuwiki table.diff td.diff-deletedline strong {
@@ -113,7 +130,7 @@ body {
 .dokuwiki .diffnav a:hover,
 .dokuwiki .diffnav a:active,
 .dokuwiki .diffnav a:focus {
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
     text-decoration: none;
 }
 
@@ -121,9 +138,9 @@ body {
     display: inline-block;
     line-height: 1;
     padding: .2em .4em;
-    border: 1px solid @ini_border;
+    border: 1px solid var(--ini-border);
     border-radius: 2px;
-    color: @ini_text;
+    color: var(--ini-text);
 }
 
 .dokuwiki .diffnav a.diffprevrev:before {

css/_edit.css

@@ -17,7 +17,7 @@
 }
 #draft__status {
     float: right;
-    color: @ini_text_alt;
+    color: var(--ini-text-alt);
     background-color: inherit;
 }
 [dir=rtl] #draft__status {
@@ -32,13 +32,12 @@
 
 /* buttons inside of toolbar */
 .dokuwiki div.toolbar button.toolbutton {
-    background-color: transparent !important;
 }
 /* picker popups (outside of .dokuwiki) */
 div.picker {
     width: 300px;
-    border: 1px solid @ini_border;
-    background-color: @ini_background_alt;
+    border: 1px solid var(--ini-border);
+    background-color: var(--ini-background-alt);
     color: inherit;
 }
 /* picker for headlines */
@@ -49,6 +48,7 @@ div.picker.pk_hl {
 /* buttons inside of picker */
 div.picker button.pickerbutton,
 div.picker button.toolbutton {
+    color: black;
     padding: .1em .35em;
     border-width: 0;
     background-color: transparent !important;
@@ -107,7 +107,7 @@ div.picker button.toolbutton {
 }
 /* change background colour if summary is missing */
 .dokuwiki .editBar .summary input.missing {
-    color: @ini_text;
+    color: var(--ini-text);
     background-color: #ffcccc;
 }
 
@@ -115,7 +115,7 @@ div.picker button.toolbutton {
 ********************************************************************/
 
 .dokuwiki div.preview {
-    border: dotted @ini_border;
+    border: dotted var(--ini-border);
     border-width: .2em 0;
     padding: 1.4em 0;
     margin-bottom: 1.4em;
@@ -139,6 +139,6 @@ div.picker button.toolbutton {
 .dokuwiki div.section_highlight {
     margin: 0 -1em; /* negative side margin = side padding + side border */
     padding: 0 .5em;
-    border: solid @ini_background_alt;
+    border: solid var(--ini-background-alt);
     border-width: 0 .5em;
 }

css/_fileuploader.css

@@ -37,8 +37,8 @@
     height: 100%;
     min-height: 70px;
     z-index: 2;
-    background: @ini_background_neu;
-    color: @ini_text;
+    background: var(--ini-background-neu);
+    color: var(--ini-text);
     text-align: center;
 }
 
@@ -52,7 +52,7 @@
 }
 
 .qq-upload-drop-area-active {
-    background: @ini_background_alt;
+    background: var(--ini-background-alt);
 }
 
 /* list of files to upload */
@@ -65,7 +65,7 @@ div.qq-uploader ul {
 
 .qq-uploader li {
     margin: 0 0 5px;
-    color: @ini_text;
+    color: var(--ini-text);
 }
 
 .qq-uploader li span,

css/_footnotes.css

@@ -16,7 +16,7 @@ div.insitu-footnote {
 /*____________ footnotes at the bottom of the page ____________*/
 
 .dokuwiki div.footnotes {
-    border-top: 1px solid @ini_border;
+    border-top: 1px solid var(--ini-border);
     padding: .5em 0 0 0;
     margin: 1em 0 0 0;
     clear: both;

css/_forms.css

@@ -47,7 +47,7 @@
 .dokuwiki fieldset {
   width: 400px;
   text-align: center;
-  border: 1px solid @ini_border;
+  border: 1px solid var(--ini-border);
   padding: 0.5em;
   margin: auto;
 }

css/_media_fullscreen.css

@@ -49,7 +49,7 @@
 }
 
 #mediamanager__page .panelHeader {
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
     margin: 0 10px 10px 0;
     padding: 10px 10px 8px;
     text-align: left;
@@ -87,7 +87,7 @@
     background: transparent url(../../images/resizecol.png) center center no-repeat;
 }
 #mediamanager__page .ui-resizable-e:hover {
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
 }
 [dir=rtl] #mediamanager__page .ui-resizable-w {
     width: 6px;
@@ -95,7 +95,7 @@
     background: transparent url(../../images/resizecol.png) center center no-repeat;
 }
 [dir=rtl] #mediamanager__page .ui-resizable-w:hover {
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
 }
 
 
@@ -129,10 +129,10 @@
     margin: 0 0 0 .3em;
     border-radius: .5em .5em 0 0;
     font-weight: normal;
-    background-color: @ini_background_alt;
-    color: @ini_text;
-    border: 1px solid @ini_border;
-    border-bottom-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
+    color: var(--ini-text);
+    border: 1px solid var(--ini-border);
+    border-bottom-color: var(--ini-background-alt);
     line-height: 1.4em;
     position: relative;
     bottom: -1px;
@@ -144,7 +144,7 @@
     right: 10px;
 }
 #mediamanager__page .namespaces .panelHeader {
-    border-top: 1px solid @ini_border;
+    border-top: 1px solid var(--ini-border);
     z-index: 1;
 }
 
@@ -192,7 +192,7 @@
     padding: 0;
 }
 #mediamanager__page .panelHeader ul li {
-    color: @ini_text;
+    color: var(--ini-text);
     float: left;
     line-height: 1;
     padding-left: 3px;
@@ -240,7 +240,7 @@
     margin: 0;
 }
 #mediamanager__page .filelist .panelContent ul li:hover {
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
 }
 
 #mediamanager__page .filelist li dt a {
@@ -257,8 +257,8 @@
     display: inline-block;
     /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */
     margin: 0 6px 10px 0;
-    background-color: @ini_background_neu;
-    color: @ini_text;
+    background-color: var(--ini-background-neu);
+    color: var(--ini-text);
     padding: 5px;
     vertical-align: top;
     text-align: center;
@@ -307,13 +307,13 @@
     position: relative;
     max-height: 50px;
     margin: 0 0 3px 0;
-    background-color: @ini_background;
-    color: @ini_text;
+    background-color: var(--ini-background);
+    color: var(--ini-text);
     overflow: hidden;
 }
 
 #mediamanager__page .filelist .rows li:nth-child(2n+1) {
-    background-color: @ini_background_neu;
+    background-color: var(--ini-background-neu);
 }
 
 #mediamanager__page .filelist .rows li dt {
@@ -402,11 +402,11 @@
 #mediamanager__page .file dl dt {
     font-weight: bold;
     display: block;
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
 }
 #mediamanager__page .file dl dd {
     display: block;
-    background-color: @ini_background_neu;
+    background-color: var(--ini-background-neu);
 }
 
 
@@ -449,7 +449,7 @@
 
 #mediamanager__page form.changes ul li div.li div {
     font-size: 90%;
-    color: @ini_text_neu;
+    color: var(--ini-text-neu);
     padding-left: 18px;
 }
 [dir=rtl] #mediamanager__page form.changes ul li div.li div {
@@ -475,7 +475,7 @@
     padding: 0;
     vertical-align: top;
     text-align: left;
-    border-color: @ini_background;
+    border-color: var(--ini-background);
 }
 [dir=rtl] #mediamanager__diff td,
 [dir=rtl] #mediamanager__diff th {
@@ -485,7 +485,7 @@
 
 #mediamanager__diff th {
     font-weight: normal;
-    background-color: @ini_background;
+    background-color: var(--ini-background);
     line-height: 1.2;
 }
 #mediamanager__diff th a {
@@ -497,7 +497,7 @@
 
 #mediamanager__diff dl dd strong{
     background-color: __highlight__;
-    color: @ini_text;
+    color: var(--ini-text);
     font-weight: normal;
 }
 

css/_media_popup.css

@@ -20,13 +20,13 @@ html.popup {
     overflow: auto;
     position: absolute;
     left: 0;
-    border-right: 1px solid @ini_border;
+    border-right: 1px solid var(--ini-border);
 }
 [dir=rtl] #mediamgr__aside {
     left: auto;
     right: 0;
     border-right-width: 0;
-    border-left: 1px solid @ini_border;
+    border-left: 1px solid var(--ini-border);
 }
 #mediamgr__aside .pad {
     padding: .5em;
@@ -52,7 +52,7 @@ html.popup {
     font-size: 1.5em;
     margin-bottom: .5em;
     padding-bottom: .2em;
-    border-bottom: 1px solid @ini_border;
+    border-bottom: 1px solid var(--ini-border);
 }
 
 /* left side
@@ -141,13 +141,13 @@ html.popup {
     padding: .5em;
 }
 #media__content .odd {
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
 }
 #media__content .even {
 }
 /* highlight newly uploaded or edited file */
 #media__content #scroll__here {
-    border: 1px dashed @ini_border;
+    border: 1px dashed var(--ini-border);
 }
 
 /* link which inserts media file */
@@ -168,7 +168,7 @@ html.popup {
 
 /* info how to insert media, if JS disabled */
 #media__content div.example {
-    color: @ini_text_neu;
+    color: var(--ini-text-neu);
     margin-left: 1em;
 }
 

css/_modal.css

@@ -18,11 +18,11 @@
 }
 
 #link__wiz_result {
-    background-color: @ini_background;
+    background-color: var(--ini-background);
     width:  293px;
     height: 193px;
     overflow: auto;
-    border: 1px solid @ini_border;
+    border: 1px solid var(--ini-border);
     margin: 3px auto;
     text-align: left;
     line-height: 1;
@@ -57,16 +57,16 @@
 }
 
 #link__wiz_result div.even {
-    background-color: @ini_background_neu;
+    background-color: var(--ini-background-neu);
 }
 
 #link__wiz_result div.selected {
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
 }
 
 #link__wiz_result span {
     display: block;
-    color: @ini_text_neu;
+    color: var(--ini-text-neu);
     margin-left: 22px;
 }
 

css/_search.less

@@ -8,7 +8,7 @@
 
 /* search hit in normal text */
 .dokuwiki .search_hit {
-    color: @ini_text;
+    color: var(--ini-text);
     background-color: __highlight__;
 }
 
@@ -54,7 +54,7 @@
                 &::after {
                     content: '▼';
                     font-size: smaller;
-                    color: @ini_text_alt;
+                    color: var(--ini-text-alt);
                 }
             }
             div.changed {
@@ -63,8 +63,8 @@
             ul {
                 display: none;
                 position: absolute;
-                border: 1px solid @ini_border;
-                background-color: @ini_background;
+                border: 1px solid var(--ini-border);
+                background-color: var(--ini-background);
                 padding: 0.25em 0.5em;
                 text-align: left;
                 min-width: 10em;
@@ -141,7 +141,7 @@
 
     /* search snippet */
     dd.snippet {
-        color: @ini_text_alt;
+        color: var(--ini-text-alt);
         background-color: inherit;
         margin: 0 0 1.2em 0;
 
@@ -153,7 +153,7 @@
 
         /* ellipsis separating snippets */
         .search_sep {
-            color: @ini_text;
+            color: var(--ini-text);
             background-color: inherit;
         }
     }

css/_tabs.css

@@ -17,7 +17,7 @@
     width: 100%;
     bottom: 0;
     left: 0;
-    border-bottom: 1px solid @ini_border;
+    border-bottom: 1px solid var(--ini-border);
 }
 
 .dokuwiki .tabs > ul li,
@@ -38,9 +38,9 @@
     display: inline-block;
     padding: .3em .8em;
     margin: 0 0 0 .3em;
-    background-color: @ini_background_neu;
-    color: @ini_text;
-    border: 1px solid @ini_border;
+    background-color: var(--ini-background-neu);
+    color: var(--ini-text);
+    border: 1px solid var(--ini-border);
     border-radius: .5em .5em 0 0;
     position: relative;
     z-index: 0;
@@ -68,8 +68,8 @@
 .dokuwiki ul.tabs li a:focus,
 .dokuwiki ul.tabs li.active a,
 .dokuwiki ul.tabs li strong {
-    background-color: @ini_background_alt;
-    color: @ini_text;
+    background-color: var(--ini-background-alt);
+    color: var(--ini-text);
     text-decoration: none;
     font-weight: normal;
 }
@@ -80,5 +80,5 @@
 .dokuwiki ul.tabs li.active a,
 .dokuwiki ul.tabs li strong {
     z-index: 2;
-    border-bottom-color: @ini_background_alt;
+    border-bottom-color: var(--ini-background-alt);
 }

css/_toc.css

@@ -11,7 +11,7 @@
     float: right;
     margin: 0 0 1.4em 1.4em;
     width: 12em;
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
     color: inherit;
 }
 [dir=rtl] #dw__toc {

css/basic.less

@@ -15,8 +15,8 @@ html {
 }
 html,
 body {
-    color: @ini_text;
-    background: @ini_background_site url(images/page-gradient.png) top left repeat-x;
+    color: var(--ini-text);
+    background: var(--ini-background-site) url(images/page-gradient.png) top left repeat-x;
     background:#F6F6F6;
     margin: 0;
     padding: 0;
@@ -164,7 +164,7 @@ table {
     border-collapse: collapse;
     empty-cells: show;
     border-spacing: 0;
-    border: 1px solid @ini_border;
+    border: 1px solid var(--ini-border);
 }
 
 caption {
@@ -180,11 +180,11 @@ td {
     padding: .3em .5em;
     margin: 0;
     vertical-align: top;
-    border: 1px solid @ini_border;
+    border: 1px solid var(--ini-border);
 }
 th {
     font-weight: bold;
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
     text-align: left;
 }
 [dir=rtl] th {
@@ -200,7 +200,7 @@ a {
 a:link,
 a:visited {
     text-decoration: none;
-    color: @ini_link;
+    color: var(--ini-link);
 }
 a:link:hover,
 a:visited:hover,
@@ -241,8 +241,8 @@ table img {
 }
 
 hr {
-    border-top: solid @ini_border;
-    border-bottom: solid @ini_background;
+    border-top: solid var(--ini-border);
+    border-bottom: solid var(--ini-background);
     border-width: 1px 0;
     height: 0;
     text-align: center;
@@ -262,7 +262,7 @@ em abbr {
 }
 
 mark {
-    background-color: @ini_highlight;
+    background-color: var(--ini-highlight);
     color: inherit;
 }
 
@@ -275,23 +275,23 @@ kbd {
     font-size: 1em;
     direction: ltr;
     text-align: left;
-    background-color: @ini_background_site;
-    color: @ini_text;
-    //box-shadow: inset 0 0 .3em @ini_border;
+    background-color: var(--ini-background-site);
+    color: var(--ini-text);
+    //box-shadow: inset 0 0 .3em var(--ini-border);
     border-radius: 2px;
 }
 pre {
     overflow: auto;
     word-wrap: normal;
-    border: 1px solid @ini_border;
+    border: 1px solid var(--ini-border);
     border-radius: 2px;
-    //box-shadow: inset 0 0 .5em @ini_border;
+    //box-shadow: inset 0 0 .5em var(--ini-border);
     padding: .7em 1em;
 }
 
 blockquote {
     padding: 0 .5em;
-    border: solid @ini_border;
+    border: solid var(--ini-border);
     border-width: 0 0 0 .25em;
 }
 [dir=rtl] blockquote {
@@ -334,7 +334,7 @@ form {
 fieldset {
     padding: .7em 1em 0;
     padding: .7rem 1rem; /* for those browsers understanding :last-child */
-    border: 1px solid @ini_text_alt;
+    border: 1px solid var(--ini-text-alt);
 }
 fieldset > :last-child {
     margin-bottom: 0;
@@ -384,7 +384,7 @@ input,
 textarea,
 select,
 keygen {
-    border: 1px solid #1C3031;
+    border: 1px solid var(--ini-border);
     //box-shadow: inset 0 0 1px #eee;
     border-radius: 5px;
 }
@@ -396,7 +396,7 @@ select:active,
 select:focus,
 keygen:active,
 keygen:focus {
-    border: 1.5px solid #1C3031;
+    border: 1.5px solid var(--ini-border);
     outline: none;
 }
 input[type=radio],
@@ -416,12 +416,11 @@ a.button,
 button,
 .qq-upload-button {
     color: #FFFFFF;
-    background-color: #1C3031;
+    background-color: var(--ini-border);
     border: 0px solid #ccc;
     border-radius: 5px;
     margin: 5px;
-    padding: .3em .9em;
-    font-size: 12px !important;
+    padding: 4px 20px 3.5px 20px;
     text-transform: uppercase !important;
     cursor: pointer;
 }

css/content.less

@@ -39,13 +39,13 @@
 
 
 .dokuwiki a.wikilink1 {
-    color: @ini_existing;
+    color: var(--ini-existing);
     background-color: inherit;
 }
 
 /* not existing wikipage */
 .dokuwiki a.wikilink2 {
-    color: @ini_missing;
+    color: var(--ini-missing);
     background-color: inherit;
 }
 
@@ -73,15 +73,15 @@
 .dokuwiki .page,
 .dokuwiki .aside {
     ul li {
-        color: @ini_text_alt;
+        color: var(--ini-text-alt);
     }
 
     ol li {
-        color: @ini_text_neu;
+        color: var(--ini-text-neu);
     }
 
     li .li {
-        color: @ini_text;
+        color: var(--ini-text);
     }
 }
 
@@ -103,11 +103,11 @@
 }
 
 .dokuwiki table.inline tr:hover td {
-    background-color: @ini_background_alt;
+    background-color: var(--ini-background-alt);
 }
 
 .dokuwiki table.inline tr:hover th {
-    background-color: @ini_border;
+    background-color: var(--ini-border);
 }
 
 /*____________ code ____________*/
@@ -121,11 +121,11 @@
 .dokuwiki dl.code,
 .dokuwiki dl.file {
     dt {
-        background-color: @ini_background_site;
-        background: linear-gradient(to bottom, @ini_background_alt 0%, @ini_background_site 100%);
+        background-color: var(--ini-background-site);
+        background: linear-gradient(to bottom, var(--ini-background-alt) 0%, var(--ini-background-site) 100%);
         color: inherit;
-        border: 1px solid @ini_border;
-        border-bottom-color: @ini_background_site;
+        border: 1px solid var(--ini-border);
+        border-bottom-color: var(--ini-background-site);
         border-top-left-radius: .3em;
         border-top-right-radius: .3em;
         padding: .3em .6em .1em;
@@ -147,7 +147,7 @@
     }
 
     pre {
-        box-shadow: inset -4px -4px .5em -.3em @ini_border;
+        box-shadow: inset -4px -4px .5em -.3em var(--ini-border);
     }
 }
 
@@ -176,10 +176,10 @@
 /*____________ JS popup ____________*/
 
 .JSpopup {
-    background-color: @ini_background;
-    color: @ini_text;
-    border: 1px solid @ini_border;
-    //box-shadow: .1em .1em .1em @ini_border;
+    background-color: var(--ini-background);
+    color: var(--ini-text);
+    border: 1px solid var(--ini-border);
+    //box-shadow: .1em .1em .1em var(--ini-border);
     border-radius: 2px;
     padding: .3em .5em;
     font-size: .9em;
@@ -220,27 +220,23 @@
 
 .dokuwiki div.toolbar {
     button.toolbutton {
+        border-radius: 0;
+        border-left-width: 0;
+        padding: .1em .35em;
         background-color: transparent !important;
-        border: 1px solid #11344C;
+        border: 1px solid var(--ini-border);
         border-radius: 5px;
-        padding: .1em .35em;
     }
 
     button.toolbutton:first-child {
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
         border-left-width: 1px;
-        background-color: transparent !important;
-        border: 1px solid #11344C;
-        border-radius: 5px;
     }
 
     button.toolbutton:last-child {
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
-        background-color: transparent !important;
-        border: 1px solid #11344C;
-        border-radius: 5px;
     }
 }
 
@@ -251,9 +247,6 @@
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
         border-left-width: 1px;
-        background-color: transparent !important;
-        border: 1px solid #11344C;
-        border-radius: 5px;
     }
 
     button.toolbutton:first-child {
@@ -263,9 +256,6 @@
         border-bottom-right-radius: 4px;
         border-left-width: 0;
         border-right-width: 1px;
-        background-color: transparent !important;
-        border: 1px solid #11344C;
-        border-radius: 5px;
     }
 }
 
@@ -285,12 +275,12 @@
 }
 
 .dokuwiki.hasSidebar div.preview {
-    border-right: @ini_sidebar_width solid @ini_background_alt;
+    border-right: var(--ini-sidebar-width) solid var(--ini-background-alt);
 }
 
 [dir=rtl] .dokuwiki.hasSidebar div.preview {
     border-right-width: 0;
-    border-left: @ini_sidebar_width solid @ini_background_alt;
+    border-left: var(--ini-sidebar-width) solid var(--ini-background-alt);
 }
 
 .dokuwiki div.preview div.pad {
@@ -301,16 +291,16 @@
 
 #dw__toc {
     margin: -1.556em -2em .5em 1.4em;
-    width: @ini_sidebar_width;
-    border-left: 1px solid @ini_border;
-    background: @ini_background;
+    width: var(--ini-sidebar-width);
+    border-left: 1px solid var(--ini-border);
+    background: var(--ini-background);
     color: inherit;
 }
 
 [dir=rtl] #dw__toc {
     margin: -1.556em 1.4em .5em -2em;
     border-left-width: 0;
-    border-right: 1px solid @ini_border;
+    border-right: 1px solid var(--ini-border);
 }
 
 .dokuwiki.export #dw__toc {

css/design.less

@@ -8,7 +8,7 @@
  */
 
 .dokuwiki.export {
-    background-color: @ini_background;
+    background-color: var(--ini-background);
 }
 
 /* header
@@ -44,7 +44,7 @@
 
         a {
             text-decoration: none;
-            color: @ini_text;
+            color: var(--ini-text);
             background-color: inherit;
         }
     }
@@ -56,7 +56,7 @@
 
     /* make all links in header (including breadcrumb and interwiki) same colour as the rest */
     a {
-        color: @ini_link;
+        color: var(--ini-link);
         background-color: inherit;
     }
 }
@@ -167,8 +167,8 @@ form.search {
 /*____________ breadcrumbs ____________*/
 
 .dokuwiki div.breadcrumbs {
-    border-top: 1px solid @ini_border;
-    border-bottom: 1px solid @ini_background;
+    border-top: 1px solid var(--ini-border);
+    border-bottom: 1px solid var(--ini-background);
     margin-bottom: .5em;
     font-size: 0.875em;
     clear: both;
@@ -178,16 +178,16 @@ form.search {
     }
 
     div:only-child {
-        border-top: 1px solid @ini_background;
-        border-bottom: 1px solid @ini_border;
+        border-top: 1px solid var(--ini-background);
+        border-bottom: 1px solid var(--ini-border);
     }
 
     div:first-child {
-        border-top: 1px solid @ini_background;
+        border-top: 1px solid var(--ini-background);
     }
 
     div:last-child {
-        border-bottom: 1px solid @ini_border;
+        border-bottom: 1px solid var(--ini-border);
     }
 
     .bcsep {
@@ -252,7 +252,7 @@ form.search {
 
     a:link,
     a:visited {
-        color: @ini_link;
+        color: var(--ini-link);
         background-color: inherit;
     }
 }
@@ -275,24 +275,24 @@ form.search {
 
     span {
         font-size: 0.875em;
-        border: solid @ini_background_alt;
+        border: solid var(--ini-background-alt);
         border-width: 1px 1px 0;
-        background-color: @ini_background;
-        color: @ini_text_alt;
+        background-color: var(--ini-background);
+        color: var(--ini-text-alt);
         padding: .1em .35em;
         border-top-left-radius: 2px;
         border-top-right-radius: 2px;
-        //box-shadow: 0 0 .5em @ini_text_alt;
+        //box-shadow: 0 0 .5em var(--ini-text-alt);
         display: block;
     }
 }
 
 .dokuwiki div.page {
     clear: both;
-    background: @ini_background;
+    background: var(--ini-background);
     color: inherit;
-    border: 1px solid @ini_background_alt;
-    //box-shadow: 0 0 .5em @ini_text_alt;
+    border: 1px solid var(--ini-background-alt);
+    //box-shadow: 0 0 .5em var(--ini-text-alt);
     border-radius: 5px;
     padding: 1.556em 2em 2em;
     margin-bottom: .5em;

css/mobile.less

@@ -13,7 +13,7 @@
 
 /* for screen widths in the tablet range
 ********************************************************************/
-@media only screen and (max-width: @ini_tablet_width) {
+@media only screen and (max-width: var(--ini-tablet-width)) {
 
 #screen__mode {
     z-index: 1; /* for detecting media queries in JavaScript (see script.js) */
@@ -30,10 +30,10 @@
 [dir=rtl] #dokuwiki__aside > .pad {
     margin: 0 0 .5em;
     /* style like .page */
-    background: @ini_background;
+    background: var(--ini-background);
     color: inherit;
     border: 1px solid #eee;
-    box-shadow: 0 0 .5em @ini_text_alt;
+    box-shadow: 0 0 .5em var(--ini-text-alt);
     border-radius: 2px;
     padding: 1em;
     margin-bottom: .5em;
@@ -47,7 +47,7 @@
         padding-bottom: 0;
     }
     &.open {
-        border-bottom: 1px solid @ini_border;
+        border-bottom: 1px solid var(--ini-border);
     }
 }
 
@@ -81,7 +81,7 @@
     margin: 0 0 1em 0;
     width: auto;
     border-left-width: 0;
-    border-bottom: 1px solid @ini_border;
+    border-bottom: 1px solid var(--ini-border);
 }
 [dir=rtl] #dw__toc {
     float: none;
@@ -140,7 +140,7 @@
 
 /* for screen widths in the smartphone range
 ********************************************************************/
-@media only screen and (max-width: @ini_phone_width) {
+@media only screen and (max-width: var(--ini-phone-width)) {
 
 #screen__mode {
     z-index: 2; /* for detecting media queries in JavaScript (see script.js) */

css/pagetools.less

@@ -73,7 +73,7 @@
                         margin: 0 @ico-margin;
                         display: inline-block;
                         vertical-align: middle;
-                        fill: @ini_border;
+                        fill: var(--ini-border);
                     }
                 }
 
@@ -81,14 +81,14 @@
                 a:active,
                 a:focus,
                 a:hover {
-                    background-color: @ini_background_alt;
+                    background-color: var(--ini-background-alt);
 
                     span {
                         display: inline-block;
                     }
 
                     svg {
-                        fill: @ini_link;
+                        fill: var(--ini-link);
                     }
                 }
             }
@@ -112,10 +112,10 @@
 // on hover or focus show all items
 #dokuwiki__pagetools:hover, #dokuwiki__pagetools:focus-within {
     div.tools ul {
-        background-color: @ini_background;
-        border-color: @ini_border;
+        background-color: var(--ini-background);
+        border-color: var(--ini-border);
         border-radius: 2px;
-        box-shadow: 2px 2px 2px @ini_text_alt;
+        box-shadow: 2px 2px 2px var(--ini-text-alt);
 
         li a span {
             display: inline-block;

css/structure.less

@@ -9,7 +9,7 @@ body {
 
 #dokuwiki__site {
     margin: 0 auto;
-    max-width: @ini_site_width;
+    max-width: var(--ini-site-width);
 }
 
 #dokuwiki__site > .site {
@@ -46,7 +46,7 @@ body {
 }
 
 #dokuwiki__aside {
-    width: @ini_sidebar_width;
+    width: var(--ini-sidebar-width);
     float: left;
     position: relative;
     display: block;
@@ -65,22 +65,22 @@ body {
 
 .showSidebar #dokuwiki__content {
     float: right;
-    margin-left: (-1 * @ini_sidebar_width);
+    margin-left: (-1 * var(--ini-sidebar-width));
     width: 100%;
 
     > .pad {
-        margin-left: @ini_sidebar_width;
+        margin-left: var(--ini-sidebar-width);
     }
 }
 
 [dir=rtl] .showSidebar #dokuwiki__content {
     float: left;
     margin-left: 0;
-    margin-right: (-1 * @ini_sidebar_width);
+    margin-right: (-1 * var(--ini-sidebar-width));
 
     > .pad {
         margin-left: 0;
-        margin-right: @ini_sidebar_width;
+        margin-right: var(--ini-sidebar-width);
     }
 }
 

css/usertools.less

@@ -8,7 +8,7 @@
     ul {
         margin: 0 auto;
         padding: 0;
-        max-width: @ini_site_width;
+        max-width: var(--ini-site-width);
     }
 
     li.action a {
@@ -20,7 +20,7 @@
             height: 1.4em;
             width: 1.4em;
             vertical-align: middle;
-            fill: @ini_border;
+            fill: var(--ini-border);
             margin-right: 0.2em;
         }
     }
@@ -28,7 +28,7 @@
     li.action a:hover,
     li.action a:active {
         svg {
-            fill: @ini_link;
+            fill: var(--ini-link);
         }
     }
 

main.php

@@ -22,10 +22,10 @@ $showSidebar = $hasSidebar && ($ACT=='show');
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
     <?php tpl_includeFile('meta.html') ?>
-    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>
 </head>
 
-<body style="font-family: Roboto;">
+<body style="font-family: Roboto !important;">
     <div id="dokuwiki__site"><div id="dokuwiki__top" class="site <?php echo tpl_classes(); ?> <?php
         echo ($showSidebar) ? 'showSidebar' : ''; ?> <?php echo ($hasSidebar) ? 'hasSidebar' : ''; ?>">
 

style.ini

@@ -54,36 +54,36 @@ css/print.css             = print
 ;------ guaranteed dokuwiki color placeholders that every plugin can use
 
 ; main text and background colors
-__text__            = "#333"            ; @ini_text
-__background__      = "#fff"            ; @ini_background
+__text__            = "#333"            ; var(--ini-text)
+__background__      = "#fff"            ; var(--ini-background)
 ; alternative text and background colors
-__text_alt__        = "#999"            ; @ini_text_alt
-__background_alt__  = "#eee"            ; @ini_background_alt
+__text_alt__        = "#999"            ; var(--ini-text-alt)
+__background_alt__  = "#eee"            ; var(--ini-background-alt)
 ; neutral text and background colors
-__text_neu__        = "#666"            ; @ini_text_neu
-__background_neu__  = "#ddd"            ; @ini_background_neu
+__text_neu__        = "#666"            ; var(--ini-text-neu)
+__background_neu__  = "#ddd"            ; var(--ini-background-neu)
 ; border color
-__border__          = "#ccc"            ; @ini_border
+__border__          = "#ccc"            ; var(--ini-border)
 
 ; highlighted text (e.g. search snippets)
-__highlight__       = "#ff9"            ; @ini_highlight
+__highlight__       = "#ff9"            ; var(--ini-highlight)
 
 ; default link color
-__link__            = "#2b73b7"         ; @ini_link
+__link__            = "#2b73b7"         ; var(--ini-link)
 
 ;--------------------------------------------------------------------------
 
-__background_site__ = "#fbfaf9"         ; @ini_background_site
+__background_site__ = "#fbfaf9"         ; var(--ini-background-site)
 
 ; these are used for wiki links
-__existing__        = "#080"            ; @ini_existing
-__missing__         = "#d30"            ; @ini_missing
+__existing__        = "#080"            ; var(--ini-existing)
+__missing__         = "#d30"            ; var(--ini-missing)
 
 ; site and sidebar widths
-__site_width__      = "75em"            ; @ini_site_width
-__sidebar_width__   = "16em"            ; @ini_sidebar_width
+__site_width__      = "75em"            ; var(--ini-site-width)
+__sidebar_width__   = "16em"            ; var(--ini-sidebar-width)
 ; cut off points for mobile devices
-__tablet_width__    = "800px"           ; @ini_tablet_width
-__phone_width__     = "480px"           ; @ini_phone_width
+__tablet_width__    = "800px"           ; var(--ini-tablet-width)
+__phone_width__     = "480px"           ; var(--ini-phone-width)
 
-__theme_color__     = "#008800"         ; @_ini_theme_color: theme_color of the web app
+__theme_color__     = "#008800"         ; var(--ini-theme-color): theme_color of the web app