はじまりの大地

lib/tpl/sprintdoc/css/area_content.less

@@ -0,0 +1,63 @@
+/**
+ * This file provides the design styles for the page content.
+ */
+
+.content .row {
+    > .col-xs-12 {
+        box-shadow: @box-shadow;
+
+        #dokuwiki__content {
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                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;
+
+                .msg-area + * {
+                    clear: both;
+                    padding-top: 1em; // as h1
+                }
+            }
+        }
+    }
+}
+
+.main-content > .level2,
+.main-content > .level1,
+.main-content > .level3,
+.main-content > .level4,
+.main-content > .level5,
+.main-content > .level6 {
+    > p,
+    > ul > li .li {
+        a {
+            font-size: inherit;
+        }
+    }
+}
+
+.level1,
+.level2,
+.level3,
+.level4,
+.level5,
+.level6 {
+    line-height: @line-height-default;
+
+    div, p, th, td, textarea,
+    h1, h2, h3, h4, h5, h6,
+    dl, dt, dd, ol, ul, li {
+        line-height: @line-height-default;
+    }
+}

lib/tpl/sprintdoc/css/area_footer.less

@@ -0,0 +1,129 @@
+/**
+ * This file provides the design styles for the page footer
+ */
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* no print */
+@media screen {
+    .page-footer {
+        min-height: @page-header_height;
+        background-color: @ini_background_page_header;
+        border-top: 1px solid @ini_border_light;
+        border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
+        color: @ini_background_page_footer;
+        font-size: @font-size-default;
+        text-align: right;
+        padding: @margin-small @margin-default;
+
+        *,
+        a:link,
+        a:visited {
+            color: inherit;
+        }
+
+        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;
+            box-sizing: border-box;
+            background-color: @ini_background_site;
+            margin-top: 5px; // for box-shadow of content
+            text-align: center;
+        }
+
+        p {
+            color: @ini_text_webframe;
+            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 {
+            float: right;
+            width: 100%;
+        }
+
+        .main-footer {
+            padding: @margin-default 0;
+        }
+    }
+
+    .showSidebar {
+        #dokuwiki__footer {
+            .col-xs-12 {
+                width: @ini_site_width;
+            }
+        }
+    }
+
+    .wide-content {
+        &.showSidebar {
+            #dokuwiki__footer {
+                .col-xs-12 {
+                    width: 100%;
+                    padding-left: @toggle-showsidebar_width;
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1023px */
+@media @screen_max-md {
+    #dokuwiki__footer {
+        .main-footer {
+            margin-top: .5rem;
+            padding: (@margin-default - .5) 0 @margin-default;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 768px */
+@media @screen_max-xs {
+    .page-footer {
+        padding-left: @margin-small;
+        padding-right: @margin-small;
+    }
+
+    #dokuwiki__footer {
+        .main-footer {
+            > * {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 480px */
+@media @screen_max-xxs {
+    #dokuwiki__footer {
+        .main-footer {
+            > * {
+                padding-left: @margin-small;
+                padding-right: @margin-small;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/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;
+}

lib/tpl/sprintdoc/css/area_forms.less

@@ -0,0 +1,302 @@
+/**
+ * This file provides the design styles for forms.
+ */
+
+/* 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;
+
+        @media @screen_min-lg {
+            width: 48.8%;
+        }
+
+        @media @screen_max-lg {
+            width: 48.5%;
+        }
+    }
+}
+
+fieldset {
+    font-size: @font-size-default;
+    line-height: 140%;
+    border: 1px solid @ini_text_alt;
+    padding: .7rem 1rem;
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+
+    + p {
+        padding-top: 1rem;
+    }
+}
+
+legend {
+    margin: 0;
+    padding: 0 .1em;
+}
+
+label {
+    vertical-align: baseline;
+    cursor: pointer;
+}
+
+input,
+textarea,
+button,
+select,
+optgroup,
+option,
+keygen,
+output,
+meter,
+progress {
+    font: inherit;
+    font-weight: normal;
+    color: #333;
+    background-color: #fff;
+    line-height: normal;
+    margin: 0;
+    vertical-align: middle;
+    box-sizing: border-box;
+}
+
+select {
+    max-width: 100%;
+}
+
+textarea.edit {
+    font-size: @font-size-default;
+}
+
+optgroup {
+    font-style: italic;
+    font-weight: bold;
+}
+
+option {
+    font-style: normal;
+    font-weight: normal;
+}
+
+input,
+textarea,
+select,
+keygen {
+    min-height: @formfield_min-height;
+    border: 1px solid @ini_border;
+    box-shadow: inset 0 0 1px #eee;
+    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,
+textarea:focus,
+select:active,
+select:focus,
+keygen:active,
+keygen:focus {
+    border-color: #999;
+}
+
+input[type="file"] {
+    padding-top: .1rem;
+    padding-bottom: .1rem;
+}
+
+/* + + + + +  buttons  + + + + + */
+button {
+    background-color: #eee;
+    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%);
+    border: 1px solid #ccc;
+    border-radius: @fix_border-radius;
+    color: #333;
+    padding: .1em .5em;
+    cursor: pointer;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: #ddd;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
+        background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
+        border-color: #999;
+    }
+}
+
+/* + + +  all types of submit-buttons  + + + */
+form input[type=submit], // heredity 'adnewpage'
+a.button,
+input[type=submit],
+input[type=reset],
+button[type=submit],
+.qq-upload-button {
+    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;
+    vertical-align: top;
+    padding: .3em @grid;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: @ini_button_color;
+        color: @ini_button_background;
+    }
+}
+
+button[type='reset'] {
+    min-height: @formfield_min-height;
+    vertical-align: middle;
+    padding: .3em 1rem;
+}
+
+input[type=submit],
+button[type=submit] {
+    min-height: @formfield_min-height;
+    vertical-align: middle;
+
+    &[disabled] {
+        cursor: default;
+
+        &:hover,
+        &:active,
+        &:focus {
+            box-shadow: none;
+            background-image: none;
+            background-color: @ini_button_background;
+            color: @ini_button_color;
+            border-color: @ini_button_background;
+        }
+    }
+
+    + span {
+        display: block;
+        margin-top: @grid;
+    }
+}
+
+/* + + +  all types of buttons not being submit-buttons  + + + */
+input.button,
+input[type=button] {
+    cursor: pointer;
+    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;
+    border: 1px solid #ccc;
+    border-radius: @fix_border-radius;
+    color: #333;
+    padding: .1em .5em;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: #ddd;
+        border-color: #999;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
+        background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
+    }
+}
+
+/* + + +  all disabled buttons  + + + */
+input[disabled],
+button[disabled],
+select[disabled],
+textarea[disabled],
+option[disabled],
+input[readonly],
+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;
+    opacity: .5;
+    border: 1px solid @ini_border;
+    border-radius: @fix_border-radius;
+    color: #333;
+    font-weight: normal;
+    padding: .3em @grid;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: #ddd;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
+        background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
+        border-color: #999;
+        color: #333;
+    }
+}
+
+input::-moz-focus-inner,
+button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries - Styles for auth forms */
+@media @screen_max-xs {
+    .tpl_sprintdoc {
+        #dw__login,
+        #dw__register,
+        #dw__resendpwd {
+            fieldset {
+                width: 100%;
+
+                label.block {
+                    text-align: left;
+
+                    > span:first-child {
+                        width: 100%;
+                    }
+
+                    input.edit {
+                        width: 100%;
+                        margin-top: .5rem;
+                    }
+                }
+            }
+        }
+
+        #dw__login {
+            label[for="remember__me"] {
+                width: 100%;
+                margin-left: 0;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_header.less

@@ -0,0 +1,277 @@
+/**
+ * This file provides the design styles for the page header.
+ */
+
+#dokuwiki__header {
+    @header-font-opacity: 1;
+
+    @media @screen_max-xs {
+        min-height: 120px;
+    }
+
+    /* + + +  wiki logo  + + + */
+    @media @screen_min-md {
+        .logo {
+            padding: 1rem 0 .3rem;
+
+            img {
+                height: 4.6rem;
+                width: auto;
+                border-style: solid;
+                border-color: transparent;
+                border-width: 2px 0;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                img {
+                    border-width: 0;
+                }
+            }
+        }
+    }
+
+    @media @screen_max-md {
+        .logo {
+            display: table-cell;
+
+            .mobile-only {
+                margin: .8rem 1rem .6rem 0;
+            }
+        }
+    }
+
+    /* + + + + +  DESKTOP  -  wiki title + claim  + + + + + */
+    .main-title.desktop-only {
+        @media @screen_min-md {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        @media @screen_max-md {
+            display: block;
+        }
+
+        p.title {
+            @media @screen_max-md {
+                display: none;
+            }
+        }
+
+        p.claim {
+            @media @screen_max-md {
+                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  + + + */
+    p.title {
+        background-color: @ini_background_site;
+        opacity: @header-font-opacity;
+        color: @ini_text_webframe;
+        line-height: @line-height-default;
+        margin-bottom: .5rem;
+
+        @media @screen_min-md {
+            font-size: @font-size-big;
+        }
+
+        @media @screen_max-md {
+            font-size: (@font-size-default + .25);
+            padding-top: .5rem;
+            padding-left: 1rem;
+        }
+    }
+
+    /* + + + + +  DESKTOP  -  wiki claim, logo, title wrapper  + + + + + */
+    @media @screen_min-md {
+        div.claim {
+            display: table-cell;
+            height: 100%;
+            vertical-align: middle;
+        }
+    }
+
+    /* + + +  wiki claim  + + + */
+    p.claim {
+        opacity: @header-font-opacity;
+        color: @ini_text_webframe;
+        font-size: @font-size-default;
+        margin-bottom: 0;
+
+        @media @screen_max-md {
+            padding-top: .5rem;
+        }
+    }
+
+    /* + + +  mobile nav togglelink  + + + */
+    .menu-togglelink {
+        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;
+            border: 1px solid @ini_border;
+            border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+            font-size: 1rem;
+            text-align: center;
+            text-decoration: none;
+            line-height: 1;
+
+            &::before {
+                font-size: 1.5rem;
+                margin: .1rem 0 0;
+            }
+        }
+    }
+
+    /* + + +  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;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_main-content-anchor.less

@@ -0,0 +1,22 @@
+#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: @ini_link;
+            }
+        }
+
+        &:hover {
+            a.anchor {
+                display: inline-block;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_main-content-secedit.less

@@ -0,0 +1,54 @@
+/**
+ * This styles the "section editing button" (if not added by data-plugin)
+ */
+
+#dokuwiki__content.main-content {
+    .secedit:not([class*="plugin"]):not([class*="table"]) {
+        position: relative;
+        top: 0;
+        float: right;
+        margin-top: 0; // for best position of edit-tab beneath table
+
+        form div.no {
+            button {
+                margin-top: -.4rem;
+                padding-right: 0;
+            }
+        }
+
+        // "section editing button"
+        button {
+            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;
+                width: 1em;
+                background-size: contain;
+                border: solid 2px transparent;
+                border-radius: @ini_default_border_radius;
+                margin-left: @small-spacing;
+                margin-top: -1px;
+            }
+
+            &: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");
+                    border-color: @ini_existing;
+                }
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_main-content.less

@@ -0,0 +1,50 @@
+/**
+ * This file provides the design styles for the main-content.
+ */
+
+#dokuwiki__content.main-content {
+    div[class^="level"] {
+        p a.media {
+            img {
+                border: 1px dotted @ini_background_site;
+
+            }
+            &:hover,
+            &:focus,
+            &:active {
+                img {
+                    border: 1px solid @ini_existing;
+                }
+            }
+        }
+    }
+
+    > div,
+    div[class^="level"] {
+        > ul,
+        > ol {
+            &:not([class="tabs"]) > li {
+                margin-bottom: @small-spacing;
+            }
+        }
+    }
+
+    .wikipagefooter {
+        > hr {
+            margin-top: 3em;
+            margin-bottom: .5em;
+            border-top: dashed @ini_border_light 2px;
+            border-bottom: none;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* min-width: 1440px */
+// @media @screen_min-xlg {
+// }
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1199px */
+// @media @screen_max-xlg {
+// }

lib/tpl/sprintdoc/css/area_main-sidebar-nav.less

@@ -0,0 +1,393 @@
+/**
+ * This file provides the design styles the navigational elements in the sidebar
+ */
+
+#dokuwiki__aside {
+    @icon-size: @font-size-big;
+    @menu-margin: @icon-size + @margin-small * 2;
+
+    @media @screen_md-lg {
+        margin-left: -1.25rem;
+    }
+
+    @media @screen_max-md {
+        display: none;
+    }
+
+    ul {
+        padding-left: 0;
+    }
+
+    nav {
+        &.nav-main {
+            margin-bottom: @nav-margin;
+        }
+
+        > p {
+            color: @ini_nav_menu_color;
+
+            &.noissue {
+                color: @ini_text_webframe;
+
+                * {
+                    color: inherit;
+                }
+            }
+        }
+
+        ul,
+        div.nav {
+            margin-bottom: 0;
+        }
+
+        li {
+            color: @ini_nav_menu_color;
+
+            > div {
+                color: @ini_text_webframe;
+            }
+
+            &.toggler {
+                list-style: none;
+                margin-left: 0;
+            }
+        }
+
+        li:not([class]),
+        .li {
+            padding: .15em 0;
+
+
+            /* + + + + +  active  + + + + + */
+            span.curid {
+                font-weight: bold;
+            }
+        }
+    }
+
+    a {
+        &:link,
+        &:visited {
+            opacity: .9;
+            color: @ini_nav_menu_color;
+        }
+
+        * {
+            color: inherit;
+        }
+    }
+
+    /* + + +  the wrapper around the toggle to reserve space  + + + */
+    div.nav {
+        min-height: @icon-size + @margin-small;
+        border: 1px solid transparent;
+
+        // the toggle element
+        a {
+            cursor: pointer;
+            display: table;
+            width: 100%;
+            min-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 @very-small-spacing;
+            padding-bottom: .4rem;
+            padding-top: .4rem;
+            transition: @transition color, @transition background-color, @transition border-color;
+
+            span {
+                display: inline-block;
+                vertical-align: middle;
+                color: inherit;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                position: relative; // always show label, even with collapsed sidebar
+                width: 100%;
+                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 {
+                    &:after {
+                        background-color: @ini_nav_menu_hover_color;
+                    }
+
+                    strong {
+                        border-color: inherit;
+                    }
+
+                    svg {
+                        path {
+                            fill: @ini_nav_menu_hover_color;
+                        }
+                    }
+                }
+            }
+
+            /* + + +  submenu entry is active  + + + */
+            &.is-active {
+                font-weight: bold;
+            }
+
+            /* + + +  toggle: open  + + + */
+            &.is-open {
+                background-color: @ini_nav_menu_hover_color;
+                border-color: @ini_nav_menu_hover_color;
+                color: @ini_nav_menu_hover_bg;
+
+                span.ico {
+                    &:after {
+                        background-color: @ini_nav_menu_hover_bg;
+                    }
+
+                    strong {
+                        border-color: @ini_nav_menu_hover_bg;
+                    }
+
+                    svg {
+                        path {
+                            fill: @ini_nav_menu_hover_bg;
+                        }
+                    }
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: @ini_nav_menu_hover_bg;
+                    border-color: @ini_nav_menu_hover_color;
+                    color: @ini_nav_menu_hover_color;
+
+                    span.ico {
+                        &:after {
+                            background-color: @ini_nav_menu_hover_color;
+                        }
+
+                        strong {
+                            border-color: inherit;
+                        }
+
+                        svg {
+                            path {
+                                fill: @ini_nav_menu_hover_color;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        span.ico {
+            position: relative;
+            display: table-cell;
+            width: (@menu-margin - .1);
+            min-width: (@menu-margin - .1);
+            height: @icon-size;
+            text-align: center;
+            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: @ini_nav_menu_color;
+                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;
+                width: @icon-size * 0.98;
+                height: @icon-size * 0.98;
+                border: 2px solid fade(@ini_nav_menu_color, 80%);
+                border-top-right-radius: 50%;
+                border-bottom-left-radius: 50%;
+                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
+            svg {
+                width: @icon-size;
+                height: @icon-size;
+
+                path {
+                    fill: @ini_nav_menu_color;
+                    transition: @transition all;
+                }
+            }
+        }
+
+        span.lbl {
+            display: table-cell;
+            font-size: inherit;
+            padding-left: .5rem;
+        }
+    }
+
+    /* + + + + +  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;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* min-width: 1440px */
+@media @screen_min-xlg {
+    #dokuwiki__aside {
+        nav {
+            li:not([class]),
+            .li {
+                font-size: @font-size-head6;
+
+                * {
+                    font-size: inherit;
+                    font-weight: inherit;
+                }
+
+                a {
+                    font-size: (@font-size-head6 - .05);
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1440px */
+@media @screen_max-xlg {
+    #dokuwiki__aside {
+        div.nav {
+            a {
+                margin-left: 1px;
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1023px */
+@media @screen_max-md {
+    #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: @ini_background_site;
+
+            > nav {
+                position: relative;
+
+                &:first-child {
+                    margin-top: 1.2rem;
+                }
+
+                a {
+                    font-size: @font-size-small;
+                }
+            }
+
+            a.nav {
+                border-radius: 0;
+                border-right-width: 0;
+                border-left-width: 0;
+            }
+
+            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: 480px */
+@media @screen_max-xxs {
+    body.show-mobile-sidebar {
+        #dokuwiki__aside {
+            left: 4px;
+            right: 4px;
+
+            > nav {
+                a {
+                    font-size: @font-size-default;
+                }
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/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"] {
+        .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 {
+                color: @quicksearch-button-color;
+                padding: 0.25rem 0.5rem
+            }
+
+            ul li {
+                color: @quicksearch-button-color;
+
+                a {
+                    display: block;
+                    padding: 0.25rem 0.5rem;
+                    overflow: hidden;
+                    color: inherit;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            ul li {
+                &:nth-child(odd) {
+                    background-color: @suggestion-zebra;
+                }
+            }
+        }
+    }
+
+    /* + + + + +  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 {
+        p.toggleSearch {
+            display: none !important;
+        }
+
+        .search.main-sidebar {
+            display: block !important;
+            position: relative;
+            margin-left: -1px;
+            margin-right: -1px;
+
+            form {
+                margin-bottom: 1rem;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/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 @ini_background_site;
+            font-weight: bold;
+        }
+    }
+}
+
+/* wide content view */
+.wide-content #dokuwiki__aside ul.sidebar-tabs {
+    visibility: hidden;
+}

lib/tpl/sprintdoc/css/area_msg.less

@@ -0,0 +1,46 @@
+/**
+ * This file provides the design styles for message block
+ */
+
+.msg-area {
+    clear: both;
+    padding-top: 1.6rem;
+
+    div {
+        line-height: 135%;
+    }
+
+    &:empty {
+        display: none;
+    }
+}
+
+/* short fix: SPR-891 - icons for notifications in message area are repeated */
+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: @fix_border-radius;
+
+    * {
+        color: inherit;
+    }
+
+    a {
+        text-decoration: underline;
+
+        &:hover,
+        &:focus,
+        &:active {
+            text-decoration: none;
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_nav-breadcrumb.less

@@ -0,0 +1,85 @@
+/**
+ * This file provides the design styles for the breadcrumb
+ */
+
+.breadcrumbs {
+    position: relative;
+    min-height: @page-header_height;
+    box-sizing: border-box;
+    background-color: @ini_background;
+    border-bottom: 1px solid @ini_border_light;
+    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;
+    }
+
+    > p {
+        font-size: @font-size-small;
+        margin: 0;
+
+        @media @screen_max-xs{
+            width: 1px;
+            position: relative;
+            overflow: hidden;
+            height: 1.6rem;
+        }
+
+        * {
+            font-size: @font-size-small;
+        }
+
+        .bchead {
+            .sr-only();
+        }
+
+        span.home {
+            margin-left: -.2rem; // reverse spacing in home icon --> content text and home icon aligned
+
+            .wide-content & {
+                margin-left: .4rem; //toggle link has position absolute, hover on home icon needs more space than left padding of breadcrumb
+            }
+
+            a {
+                .fontello();
+                .hide-text-show-before();
+                .icon-home();
+
+                min-height: 1.8em;
+                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
+                vertical-align: middle;
+                text-decoration: none;
+                margin-top: -.2em;
+                transition: @transition border-color;
+
+                &:before {
+                    font-size: @font-size-default + (@font-scale-factor * 2);
+                    margin-top: .17rem;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    border-color: @ini_existing;
+                }
+            }
+        }
+
+        bdi {
+            padding: .1em .1em 0;
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_nav-direct.less

@@ -0,0 +1,49 @@
+/**
+ * This file provides the design styles for the direct / menu jump links.
+ */
+
+.nav-direct {
+    background-color: @nav_direct_background;
+    margin-top: -1px;
+
+    p {
+        box-sizing: border-box;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        top: -1px;
+        width: 100%;
+        height: 1px;
+
+        a:link,
+        a:visited {
+            .sr-out();
+
+            box-shadow: @box-shadow;
+            display: block;
+            width: 100%;
+            background-color: @nav_direct_background;
+            border-bottom: 1px solid @ini_border_light;
+            color: @nav_direct_color;
+            line-height: @line-height-default;
+            text-decoration: none;
+            padding: 1em;
+            box-sizing: border-box;
+            border-radius: 0;
+        }
+
+        a:focus,
+        a:hover,
+        a:active {
+            top: 0;
+            left: 0;
+            text-decoration: underline;
+            min-height: 50px;
+        }
+
+        a:hover,
+        a:active {
+            text-decoration: none;
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_nav-metabox.less

@@ -0,0 +1,419 @@
+/**
+ * This file provides the design styles for the metatabbox
+ */
+
+#spr__meta-box {
+    .display-flex();
+    .flex-direction();
+    .justify-content(flex-end);
+
+    position: relative;
+    float: right;
+    max-width: 40%;
+    margin-top: -(@page_padding-top); // reverse padding-top of .page container
+    margin-right: -1px;
+
+    // >= 1024
+    @media @screen_min-md {
+        height: @page-header_height;
+        border: 1px solid transparent;
+    }
+
+    // < 1024
+    @media @screen_max-md {
+        position: relative;
+        top: .2rem;
+        right: auto;
+        float: none;
+        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: @ini_background_site;
+            border-bottom-color: @noopentasks-border;
+            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;
+
+        @media @screen_max-md {
+            display: block;
+            width: 100%;
+        }
+    }
+
+    .box-content {
+        position: relative;
+        height: 0;
+        overflow-y: visible;
+    }
+
+
+    /* + + + + +  tab controls  + + + + + */
+    ul.meta-tabs {
+        list-style: none;
+        line-height: 160%;
+        margin: 0;
+        padding: 0;
+
+        @media @screen_min-md {
+            white-space: nowrap;
+            text-align: right;
+        }
+
+        &::before,
+        &::after {
+            content: '';
+            clear: both;
+            display: table;
+            box-sizing: border-box;
+        }
+
+        > li:first-child {
+            > a {
+                margin-left: 0;
+            }
+        }
+
+        > li {
+            position: relative;
+            display: inline-block;
+            vertical-align: bottom;
+            margin: 0;
+
+            @media @screen_min-md {
+                margin-left: .3rem;
+            }
+
+            @media @screen_max-md {
+                margin-right: .4rem;
+                margin-bottom: .2rem;
+            }
+
+            > a {
+                cursor: pointer;
+                position: relative;
+                display: block;
+                font-size: @font-size-small;
+                transition: @transition background-color, @transition border-color, @transition color;
+
+                @media @screen_min-md {
+                    background-color: @ini_background_site;
+                    border: 1px solid @noopentasks-border;
+                    border-bottom-color: @ini_background_site;
+                    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;
+                }
+
+                @media @screen_max-md {
+                    background-color: @ini_background;
+                    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 {
+                    position: relative;
+                    color: inherit;
+                    font-size: @font-size-small;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    text-decoration: none;
+
+                    @media @screen_min-md {
+                        background-color: @ini_background;
+                        border-color: @ini_existing;
+                        color: @ini_existing;
+                    }
+
+                    @media @screen_max-md {
+                        background-color: @ini_existing;
+                        border-color: @ini_background;
+                        color: @ini_background;
+                    }
+                }
+            }
+
+            &.active {
+                > a {
+                    cursor: default;
+                    background-color: @ini_background;
+                    border-color: @ini_existing;
+                    border-bottom-color: @ini_background;
+                    color: @ini_existing;
+
+                    @media @screen_max-md {
+                        background-color: @ini_existing;
+                        border-bottom-color: @ini_existing;
+                        border-radius: 0;
+                        color: @ini_background;
+                    }
+                }
+            }
+        }
+    }
+
+    /* + + + + +  toggle content  + + + + + */
+    .meta-content {
+        margin-top: -1px;
+
+        @media @screen_max-md {
+            clear: both;
+            margin-top: 2px;
+        }
+
+        .tab-pane {
+            position: absolute;
+            top: 0;
+            right: 0;
+            display: none;
+            width: 100%;
+            background-color: @ini_background;
+            border: 1px solid @ini_existing;
+
+            @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
+            }
+
+            &.active {
+                display: block;
+            }
+
+            a {
+                color: @ini_existing;
+            }
+
+            > div {
+                font-size: @font-size-small;
+                padding: .8rem .5rem .5rem;
+
+                * {
+                    font-size: inherit;
+                }
+
+                p {
+                    padding-left: 1em;
+                }
+
+                ul {
+                    list-style: none;
+                    padding-left: 0;
+                }
+
+                li {
+                    list-style-image: none; // overwrite universally styles
+                    margin-left: 0;
+                    padding-left: 1em;
+                }
+            }
+
+            &#spr__tab-tags {
+                > div {
+                    ul {
+                        li {
+                            padding-left: 0;
+                        }
+                    }
+                }
+            }
+
+            #dw__toc {
+                width: auto;
+                float: none;
+                margin: 0;
+                padding: .6rem .5rem .5rem .8rem;
+                background: transparent;
+                border: 0 none;
+
+                h3 {
+                    display: none;
+                }
+
+                > div {
+                    padding: 0;
+                }
+
+                > div ul.toc {
+                    font-size: @font-size-small;
+                    padding-left: .5em;
+
+                    a {
+                        font-size: @font-size-small;
+                        display: inline-block;
+                        padding-left: 10px;
+                        position: relative;
+                    }
+
+                    div.li {
+                        position: relative;
+                        padding: .15em 0;
+
+                        &::before {
+                            content: '';
+                            position: absolute;
+                            top: .6em;
+                            left: 0;
+                            display: inline-block;
+                            width: 4px;
+                            height: 4px;
+                            overflow: hidden;
+                            background-color: @ini_existing;
+                        }
+                    }
+                }
+
+                > div > ul.toc {
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    /* + + + + +  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;
+                    }
+                }
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/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;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_nav-pagetools.less

@@ -0,0 +1,193 @@
+/**
+ * This file provides the design styles for the page specific tool bar.
+ */
+
+/*
+ FIXME
+.pagetools-item(edit, 1);
+.pagetools-item(create, 2);
+.pagetools-item(show, 4);
+.pagetools-item(source, 5);
+.pagetools-item(draft, 3);
+.pagetools-item(revs, 7, revisions);
+.pagetools-item(backlink, 8, backlink);
+.pagetools-item(top, 10);
+.pagetools-item(revert, 6, revert);
+.pagetools-item(subscribe, 9, subscribe);
+.pagetools-item(mediaManager, 11);
+.pagetools-item(back, 12);
+.pagetools-item(img_backto, 12);
+*/
+
+#dokuwiki__aside {
+    @media @screen_max-md {
+        display: none !important;
+    }
+}
+
+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;
+    position: absolute;
+
+    width: @item-width;
+
+    @media @screen_min-md {
+        right: -2.5rem;
+    }
+
+    @media @screen_max-md {
+        right: 8px;
+    }
+
+    @media @screen_max-xxs {
+        display: none;
+    }
+    div.tools {
+        position: fixed;
+        width: @item-width;
+    }
+
+    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 {
+                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;
+                line-height: 20px;
+                font-size: @font-size-default;
+                padding: 2px 0 2px 2px;
+
+                @media @screen_min-md {
+                    color: @ini_nav_menu_color;
+                }
+
+                @media @screen_max-md {
+                    color: @ini_existing;
+                }
+
+                &::before {
+                    display: none;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: transparent;
+                }
+
+                &:focus {
+                    box-shadow: @box-shadow;
+                    background-image: none;
+                    background-color: @ini_background;
+                    color: @ini_existing;
+
+                    span {
+                        position: relative;
+                        display: inline;
+                        width: auto;
+                        height: auto;
+                    }
+
+                    svg {
+                        fill: @ini_existing;
+                    }
+                }
+
+                span {
+                    .sr-only();
+
+                    padding-right: .5rem;
+                    padding-left: .3rem;
+                }
+
+                svg {
+                    display: inline-block;
+                    width: @page-tools_svg-size;
+                    height: @page-tools_svg-size;
+                    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;
+                    }
+                }
+
+                &.top {
+                    margin-top: 1em;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        ul {
+            box-shadow: @box-shadow; // @box-shadow-offset;
+            background-color: @ini_background;
+            border-color: @wikiicons-border;
+
+            li {
+                color: @ini_existing;
+
+                a {
+                    box-shadow: none;
+                    background-image: none;
+                    border-color: transparent;
+                    color: inherit;
+
+                    svg {
+                        border: solid 1px transparent;
+                        border-radius: @ini_default_border_radius;
+                        fill: @ini_existing;
+                        transition: @transition background-color, @transition border-color, @transition fill;
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        svg {
+                            background-color: @ini_existing;
+                            border-color: @ini_existing;
+                            fill: @ini_background;
+                        }
+                    }
+
+                    span {
+                        position: static;
+                        width: auto;
+                        height: auto;
+                        margin: auto;
+                    }
+                }
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_nav-usertools.less

@@ -0,0 +1,358 @@
+/**
+ * This file provides the design styles for the direct / menu jump links.
+ */
+
+#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;
+    }
+
+    &.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;
+
+            @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;
+                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                text-align: center;
+                margin: 0;
+
+                @media @screen_md-xlg {
+                    padding-top: .14rem;
+                }
+            }
+
+            /* !!! &.user-task FIND in plugins/do_tasks.less !!! */
+            &.user {
+                position: relative;
+                display: table-cell;
+                background-color: @ini_background_site;
+                border: solid 1px @wikiicons-border;
+                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                color: @ini_text_webframe;
+                padding-right: .3rem;
+
+                @media @screen_min-md {
+                    padding-top: .35rem;
+                }
+
+                @media @screen_max-md {
+                    min-height: @toggle-size;
+                    padding-top: .3rem;
+                }
+
+                @media @screen_max-sm {
+                    padding-top: .35rem;
+                }
+
+                @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;
+                    padding-top: .4rem;
+                }
+
+                @media @screen_max-xxs {
+                    left: -10px;
+                    right: 0;
+                    width: auto;
+                    padding-top: .35rem;
+                }
+
+                > a {
+                    .display-flex();
+                    .align-items();
+
+                    position: relative;
+                    height: 1rem; // for IE11
+                    overflow: visible;
+                    background: @ini_nav_menu_hover_bg; // for removing bg-image
+                    border: 0 none;
+                    color: @ini_nav_menu_hover_color;
+                    text-indent: 0;
+                    font-size: inherit;
+                    margin-right: -.3rem;
+                    padding: 0 .2em 0 0;
+
+                    @media @screen_min-xxlg {
+                        min-height: (@toggle-size - .1);
+                        margin-top: -.4rem;
+                    }
+
+                    @media @screen_max-xxlg {
+                        min-height: (@toggle-size - .15);
+                        margin-top: -.35rem;
+                    }
+
+                    @media @screen_max-md {
+                        min-height: (@toggle-size - .1);
+                        margin-top: -.35rem;
+                    }
+
+                    @media @screen_max-sm {
+                        margin-top: -.35rem;
+                    }
+
+                    @media @screen_max-xs {
+                        margin-top: -.4rem;
+                    }
+
+                    &::before {
+                        content: '';
+                        top: -1px;
+                        bottom: -1px;
+                        left: -1px;
+                        right: -1px;
+                        width: auto;
+                        opacity: 0;
+                        border: solid 1px @ini_nav_menu_hover_color;
+                        border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                        color: inherit;
+                        transform: none;
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background-color: @ini_nav_menu_hover_color;
+                        color: @ini_nav_menu_hover_bg;
+
+                        &::before {
+                            opacity: 1;
+                            border-color: @ini_nav_menu_hover_color;
+                        }
+
+                        bdi,
+                        bdi:first-of-type {
+                            color: @ini_nav_menu_hover_bg;
+                        }
+                    }
+                }
+
+                bdi {
+                    display: inline-block;
+                    color: inherit;
+                }
+
+                bdi:first-of-type {
+                    .fontello();
+                    .icon-user-circle();
+
+                    position: relative;
+                    margin: 0 0 0 .25rem;
+                    padding: 0 .1rem 0 1.3rem;
+
+                    &::before {
+                        position: absolute;
+                        left: -2px;
+                        font-size: 1.4rem;
+                        margin: 0;
+
+                        @media @screen_min-xxlg {
+                            top: -.25rem;
+                        }
+
+                        @media @screen_max-xxlg {
+                            top: -.2rem;
+                        }
+
+                        @media @screen_max-xs {
+                            top: -.25rem;
+
+                        }
+                    }
+                }
+            } // user
+        } // li
+
+        /* + + +  icons  + + + */
+        .menuitem, button {
+            padding: 2px 0 0 2px;
+            min-height: @toggle-size; // overrides button[type="submit"] styles
+            border: solid 1px @wikiicons-border; // overrides button[type="submit"] styles
+            .btn-hover();
+
+            &:hover svg, &:focus svg {
+                transition: @transition fill;
+                fill: @ini_nav_menu_hover_bg;
+            }
+
+            svg {
+                fill: @ini_nav_menu_hover_color;
+                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();
+
+            cursor: pointer;
+            position: relative;
+            line-height: 1;
+            text-decoration: none;
+
+            &::before {
+                .center-middle();
+
+                content: "?";
+                cursor: pointer;
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+                font-size: @font-size-default + (@font-scale-factor * 4);
+                line-height: 1;
+            }
+
+            /* icon register new user */
+            &.register {
+                .icon-user();
+            }
+
+            /* icon log-out */
+            &.logout {
+                .icon-logout();
+            }
+
+            /* icon log-in */
+            &.login {
+                .icon-login();
+            }
+
+            /* icon admin */
+            &.admin {
+                .icon-cog();
+
+                &::before {
+                    vertical-align: top;
+                }
+            }
+        } // 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: @ini_background_site;
+
+                    bdi {
+                        position: absolute;
+                        width: 0;
+                        padding: 0;
+                        text-indent: -10000px;
+
+                        &:before {
+                            transition: @transition background-color;
+                            background-color: @ini_background_site;
+                            color: @ini_nav_menu_color;
+                            text-indent: 0;
+                        }
+                    }
+
+                    > a {
+                        padding: 0 .2em;
+                        color: @ini_nav_menu_hover_bg;
+
+                        bdi {
+                            &:before {
+                                background-color: @ini_nav_menu_hover_bg;
+                                color: @ini_nav_menu_hover_color;
+                            }
+                        }
+
+                        &:hover {
+                            color: @ini_nav_menu_hover_color;
+
+                            bdi {
+                                &:before {
+                                    background-color: @ini_nav_menu_hover_color;
+                                    color: @ini_nav_menu_hover_bg;
+                                }
+                            }
+                        }
+                    }
+
+                    bdi + bdi {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        @media @screen_max-sm {
+            ul li {
+                position: static;
+                float: right;
+                top: 0; right: 0;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_recent.less

@@ -0,0 +1,159 @@
+/**
+ * This file provides the design styles for page revisions
+ */
+
+.dokuwiki {
+
+    /* + + + + +  list of changes  + + + + + */
+    form.changes {
+        li {
+            .sizechange {
+                color: @color-editBox;
+
+                &.positive {
+                    background-color: #cfc;
+                }
+
+                &.negative {
+                    background-color: #fdd;
+                }
+            }
+        }
+
+        > .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: @ini_background_site;
+            border: solid 1px @ini_background_site;
+            border-radius: @ini_default_border_radius;
+            color: @ini_nav_menu_color;
+            transition: @transition background-color, @transition color, @transition border-color;
+
+            &::before {
+                background-color: inherit;
+                border: 0 none;
+                color: inherit;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: @ini_nav_menu_color;
+                border: solid 1px @ini_nav_menu_color;
+                color: @ini_background_site;
+
+                &::before {
+                    background-color: inherit;
+                    color: inherit;
+                }
+            }
+        }
+    }
+
+    table.diff {
+        background-color: #fff;
+        border: solid 1px #fff;
+        border-top-width: 10px;
+        border-bottom-width: 10px;
+
+        &.diff_inline {
+            border-top-width: 0;
+
+            .diffnav {
+                padding-top: 10px;
+                padding-bottom: 10px;
+            }
+        }
+
+        th {
+            background-color: @ini_background;
+            color: @ini_text;
+            padding-top: 10px;
+            padding-bottom: 10px;
+
+            &.minor {
+                color: #999;
+            }
+        }
+
+        td {
+            &.diff-blockheader {
+                background-color: #cfc;
+                color: @color-editBox;
+            }
+
+            &.diff-context {
+                background-color: #eee;
+                color: @color-editBox;
+            }
+        }
+
+        .diff-addedline {
+            background-color: #cfc;
+            color: @color-editBox;
+
+            strong {
+                background-color: transparent;
+                color: #f00;
+            }
+        }
+
+        .diff-deletedline {
+            background-color: #fdd;
+            color: @color-editBox;
+
+            * {
+                color: inherit;
+            }
+
+            strong {
+                background-color: transparent;
+                color: #f00;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_search.less

@@ -0,0 +1,9 @@
+/**
+ * This file provides the design styles for the search results
+ */
+
+/* search hit in normal text */
+.dokuwiki .search_hit {
+    background-color: @ini_highlight;
+    color: @ini_highlight_text;
+}

lib/tpl/sprintdoc/css/area_tabs.less

@@ -0,0 +1,37 @@
+/**
+ * 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:hover,
+            a:focus,
+            a:active {
+                color: @ini_text;
+            }
+        }
+    }
+
+    .tabs > ul {
+        li:not([class~="active"]) {
+            a {
+                color: @ini_text_neu;
+                transition: @transition background-color, @transition color;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                color: @ini_text;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/area_togglelink.less

@@ -0,0 +1,105 @@
+/**
+ * This file provides the design styles for the sidebar (navmain).
+ */
+
+.togglelink {
+    &.page_main-content {
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        width: 2rem;
+        left: -(@margin-default);
+
+        @media @screen_max-md {
+            display: none;
+        }
+
+        a {
+            .fontello-double();
+            .icon-right-bold();
+            .icon-left-bold();
+
+            .display-flex();
+            .flex-direction();
+            .justify-content();
+
+            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;
+            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;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: @ini_button_color;
+                border-color: @ini_button_background;
+                color: @ini_button_background;
+                text-decoration: none;
+
+                * {
+                    color: inherit;
+                    text-decoration: none;
+                }
+
+                &::after {
+                    opacity: 0;
+                }
+            }
+        }
+
+        /* + + +  toggle out  + + + */
+        .wide-content & {
+            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
+
+                &::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;
+                    }
+                }
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/base.less

@@ -0,0 +1,434 @@
+/**
+ * This file provides the basic/reset styles.
+ */
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* global 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
+
+//@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;
+@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;
+
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* all media */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+html,
+body {
+    .reset();
+    font-size: 100.1%;
+}
+
+header,
+.nav-direct{
+    .elementsReset();
+}
+
+ol,
+ul {
+    list-style: none outside none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+acronym {
+    cursor: help;
+    border-bottom: dotted 1px @ini_text;
+}
+
+*:focus {
+    outline: 0;
+}
+
+table{
+    border-collapse: collapse;
+    border-spacing: 0;
+    empty-cells: show;
+    caption-side: top;
+}
+
+caption,
+th,
+td {
+    text-align: left;
+    vertical-align: top;
+}
+
+img {
+    display: block;
+    float: none;
+    border: none 0;
+    line-height: @line-height-default;
+}
+
+*,
+div,
+nav,
+header {
+    box-sizing: border-box;
+}
+
+header,
+footer,
+.container,
+.row, nav,
+nav > ul {
+    &::before,
+    &::after {
+        display: table;
+        content: ' ';
+        clear: both;
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* css behaviour */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+.sr-out {
+    .sr-out();
+}
+
+.sr-only {
+    .sr-only();
+}
+
+.clearer{
+    clear: both;
+}
+
+.structure,
+.none,
+.mobile-only {
+    display: none;
+}
+
+.mobile-only {
+    display: none;
+
+    @media @screen_max-md {
+        display: inline-block;
+    }
+}
+
+.mobile-hide {
+    display: inline-block;
+
+    @media @screen_max-md {
+        display: none;
+    }
+}
+
+.desktop-only {
+    display: none;
+    @media @screen_min-md {
+        display: inline-block;
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* screen only */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+
+@media screen {
+    html {
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+    }
+
+    article, aside, details, figcaption, figure, footer, header,
+    main, menu, nav, section, summary {
+        display: block;
+    }
+
+    audio,
+    canvas,
+    progress,
+    video {
+        display: inline-block;
+        vertical-align: baseline;
+    }
+
+    audio:not([controls]) {
+        display: none;
+        height: 0;
+    }
+
+    [hidden],
+    template {
+        display: none;
+    }
+
+    a:active,
+    a:hover {
+        outline: 0;
+    }
+
+    abbr[title] {
+        border-bottom: 1px dotted;
+    }
+
+    small {
+        font-size: 80%;
+    }
+
+    svg:not(:root) {
+        overflow: hidden;
+    }
+
+    hr {
+        box-sizing: content-box;
+        height: 0;
+    }
+
+    pre {
+        overflow: auto;
+    }
+
+    code,
+    kbd,
+    pre,
+    samp {
+        font-family: monospace, monospace;
+        font-size: 1em;
+    }
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+        color: inherit;
+        font: inherit;
+        margin: 0;
+    }
+
+    button,
+    select {
+        text-transform: none;
+    }
+
+    button {
+        overflow: visible;
+    }
+
+    input {
+        &[type="checkbox"],
+        &[type="radio"] {
+            box-sizing: border-box;
+            padding: 0;
+        }
+
+        &[type="number"] {
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                height: auto;
+            }
+        }
+
+        &[type="search"] {
+            -webkit-appearance: textfield;
+            box-sizing: content-box;
+
+            &::-webkit-search-cancel-button,
+            &::-webkit-search-decoration {
+                -webkit-appearance: none;
+            }
+        }
+    }
+
+    legend {
+        border: 0;
+        padding: 0;
+    }
+
+    textarea {
+        overflow: auto;
+    }
+
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+
+    td,
+    th {
+        padding: 0;
+    }
+
+    html, body {
+        font-family: @font_family_screen;
+        color: @ini_text;
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* print only */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@media print {
+    body {
+        font-size: 12pt;
+    }
+}

lib/tpl/sprintdoc/css/base_design.less

@@ -0,0 +1,583 @@
+/**
+ * This file provides the main design styles
+ * across all template elements (typo, colors etc.)
+ */
+
+
+html, body {
+    background-color: @ini_background_site;
+}
+
+/* highlight selected tool */
+.mode_admin a.action.admin,
+.mode_login a.action.login,
+.mode_register a.action.register,
+.mode_profile a.action.profile,
+.mode_recent a.action.recent,
+.mode_index a.action.index,
+.mode_media a.action.media,
+.mode_revisions a.action.revs,
+.mode_backlink a.action.backlink,
+.mode_subscribe a.action.subscribe {
+    font-weight: bold;
+}
+
+.dokuwiki {
+    .page ol li,
+    .page ul li,
+    .aside ul li {
+        color: @ini_text;
+    }
+
+    .pageId {
+        float: right;
+        margin-right: -1em;
+        margin-bottom: -1px;
+        margin-top: -1.5em;
+        overflow: hidden;
+        padding: 0.5em 1em 0;
+
+        span {
+            font-size: @font-size-small;
+            border: solid @ini_background_alt;
+            border-width: 1px 1px 0;
+            background-color: @ini_background_site;
+            color: @ini_text_alt;
+            padding: .1em .35em;
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+            box-shadow: 0 0 .5em @ini_text_alt;
+            display: block;
+        }
+    }
+
+    div.page {
+        clear: both;
+        overflow: hidden;
+        word-wrap: break-word;
+        background: @ini_background;
+        color: inherit;
+        padding: @page_padding-top @margin-default @margin-default;
+
+        @media @screen_max-md {
+            padding-right: (@margin-default * 1.6);
+        }
+
+        @media @screen_max-xs {
+            padding-left: @margin-small;
+        }
+
+        @media @screen_max-xxs {
+            padding-right: @margin-small;
+        }
+    }
+
+    .content #dokuwiki__pagetools {
+        @media @screen_max-md {
+            top: 4rem;
+        }
+    }
+
+    .docInfo {
+        font-size: @font-size-small;
+        text-align: right;
+    }
+
+    /* license note under edit window */
+    div.license {
+        font-size: @font-size-small;
+        line-height: @line-height-default;
+        padding-top: 1rem;
+
+        @media @screen_max-lg {
+            font-size: @font-size-default;
+        }
+
+        @media @screen_max-md {
+            font-size: @font-size-small;
+        }
+
+        * {
+            font-size: inherit;
+        }
+    }
+
+    [dir=rtl] & .docInfo {
+        text-align: left;
+    }
+
+    [dir=rtl] & .pageId {
+        float: left;
+        margin-left: -1em;
+        margin-right: 0;
+    }
+}
+
+caption,
+figcaption,
+summary,
+legend {
+    padding: 0;
+    margin: 0 0 .35em;
+    line-height: 1.2;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: bold;
+    padding: 0;
+    line-height: 1.2;
+    clear: both;
+}
+
+[dir=rtl] h1,
+[dir=rtl] h2,
+[dir=rtl] h3,
+[dir=rtl] h4,
+[dir=rtl] h5,
+[dir=rtl] h6 {
+    clear: right;
+}
+
+h1 {
+    font-size: @font-size-head1;
+    margin: 0 0 @font-size-head1;
+    padding-top: 1em;
+}
+
+h2 {
+    font-size: @font-size-head2;
+    margin: 0 0 @font-size-head2;
+    padding-top: (@font-size-head2 / 2);
+}
+
+h3 {
+    font-size: @font-size-head3;
+    margin: 0 0 @font-size-head3;
+    padding-top: (@font-size-head3 / 2);
+}
+
+h4 {
+    font-size: @font-size-head4;
+    margin: 0 0 @font-size-head4;
+    padding-top: (@font-size-head4 / 2);
+}
+
+h5 {
+    font-size: @font-size-head5;
+    margin: 0 0 @font-size-head5;
+    padding-top: (@font-size-head5 / 2);
+}
+
+h6 {
+    font-size: @font-size-head6;
+    font-weight: @font-weight-bold;
+    margin: 0 0 @font-size-head6;
+    padding-top: (@font-size-head6 / 2);
+}
+
+p {
+    font-size: @font-size-default;
+    line-height: @line-height-big;
+
+    a,
+    span,
+    strong {
+        font-size: inherit;
+    }
+}
+
+label,
+legend,
+button {
+    font-size: @font-size-default;
+
+    a,
+    span,
+    strong {
+        font-size: inherit;
+    }
+}
+
+hr,
+figure,
+details,
+address {
+    font-size: @font-size-default;
+    line-height: 140%;
+}
+
+p,
+ul,
+ol,
+dl,
+pre,
+table,
+hr,
+blockquote,
+figure,
+details,
+fieldset,
+address {
+    margin: 0 0 1.4em; /* bottom margin = line-height */
+    padding: 0;
+}
+
+div,
+video,
+audio {
+    margin: 0;
+    padding: 0;
+}
+
+small,
+.code {
+    font-size: @font-size-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   + + + */
+ul,
+ol {
+    font-size: @font-size-default;
+    line-height: 140%;
+    padding: 0 0 0 1.5em;
+}
+
+[dir=rtl] ul,
+[dir=rtl] ol {
+    padding: 0 1.5em 0 0;
+}
+
+li,
+dd {
+    padding: 0;
+    margin: 0 0 0 1.5em;
+}
+
+[dir=rtl] li,
+[dir=rtl] dd {
+    margin: 0 1.5em 0 0;
+}
+
+dl {
+    font-size: @font-size-default;
+    line-height: 140%;
+}
+
+dt,
+dd {
+    line-height: inherit;
+}
+
+dt {
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+}
+
+li ul,
+li ol,
+li dl,
+dl ul,
+dl ol,
+dl dl {
+    margin-bottom: 0;
+    padding: 0;
+}
+
+li li {
+    font-size: 100%;
+}
+
+ul {
+    list-style: square outside;
+}
+
+ol {
+    list-style: decimal outside;
+}
+
+ol ol {
+    list-style-type: lower-alpha;
+}
+
+ol ol ol {
+    list-style-type: upper-roman;
+}
+
+ol ol ol ol {
+    list-style-type: upper-alpha;
+}
+
+ol ol ol ol ol {
+    list-style-type: lower-roman;
+}
+
+/* + + +  tables   + + + */
+.dokuwiki {
+    table.inline tr:hover {
+        th {
+            background-color: fade(@ini_background_alt, 50%);
+        }
+
+        td {
+            background-color: fade(@ini_background_alt, 80%);
+            color: @ini_text_alt;
+
+            *:not(button,a) {
+                color: @ini_text_alt;
+            }
+        }
+    }
+}
+
+table {
+    border-collapse: collapse;
+    empty-cells: show;
+    border-spacing: 0;
+    border: 1px solid @ini_border;
+    font-size: @font-size-default;
+    line-height: 140%;
+}
+
+caption {
+    caption-side: top;
+    text-align: left;
+}
+
+[dir=rtl] caption {
+    text-align: right;
+}
+
+th,
+td {
+    padding: .3em .5em;
+    margin: 0;
+    vertical-align: top;
+    border: 1px solid @ini_border;
+}
+
+th {
+    font-weight: bold;
+    background-color: @ini_background_alt;
+    color: @ini_text_alt;
+    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;
+    vertical-align: middle;
+    color: #666;
+    background-color: transparent;
+    font-style: italic;
+    height: auto;
+}
+
+img,
+object,
+embed,
+iframe,
+video,
+audio {
+    max-width: 100%;
+}
+
+button img {
+    max-width: none;
+}
+
+hr {
+    border-top: solid @ini_border;
+    border-bottom: solid @ini_background_site;
+    border-width: 1px 0;
+    height: 0;
+    text-align: center;
+    clear: both;
+}
+
+acronym,
+abbr {
+    cursor: help;
+    border-bottom: 1px dotted;
+    font-style: normal;
+}
+
+em acronym,
+em abbr {
+    font-style: italic;
+}
+
+mark {
+    background-color: @ini_highlight;
+    color: @ini_highlight_text;
+}
+
+pre,
+code,
+samp,
+kbd {
+    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", 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: @code-background;
+    color: @noopentasks-color;
+    box-shadow: inset 0 0 .3em @noopentasks-border;
+    border-radius: @fix_border-radius;
+    padding-left: @small-spacing;
+    padding-right: @small-spacing;
+
+    * {
+        font-family: inherit;
+        font-size: inherit;
+    }
+
+    span {
+        color: inherit;
+    }
+
+    a {
+        &:link,
+        &:visited {
+            color: inherit;
+            text-decoration: underline;
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+            text-decoration: none;
+        }
+    }
+}
+
+pre {
+    overflow: auto;
+    word-wrap: normal;
+    border: 1px solid @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;
+    font-size: @font-size-default;
+    line-height: 140%;
+    padding: 0 .5em;
+}
+
+[dir=rtl] blockquote {
+    border-width: 0 .25em 0 0;
+}
+
+q:before,
+q:after {
+    content: '';
+}
+
+sub,
+sup {
+    font-size: .8em;
+    line-height: 1;
+}
+
+sub {
+    vertical-align: sub;
+}
+
+sup {
+    vertical-align: super;
+}
+
+small {
+    font-size: .9em;
+}

lib/tpl/sprintdoc/css/base_fontello-icons.less

@@ -0,0 +1,141 @@
+/**
+ * This file provides styles for web fonts and icon fonts
+ * (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');
+
+.icon, [class^="icon-"], [class*=" icon-"]{
+    .fontello();
+}
+
+/* + + + + +  fontello codes  + + + + + */
+.icon-emo-happy          { &::before { content: '\e804'; } } /* '' */
+.icon-emo-wink           { &::before { content: '\e805'; } } /* '' */
+.icon-emo-unhappy        { &::before { content: '\e806'; } } /* '' */
+.icon-emo-sleep          { &::before { content: '\e807'; } } /* '' */
+.icon-emo-thumbsup       { &::before { content: '\e808'; } } /* '' */
+.icon-emo-grin           { &::before { content: '\e80c'; } } /* '' */
+.icon-emo-angry          { &::before { content: '\e80d'; } } /* '' */
+.icon-emo-cry            { &::before { content: '\e80f'; } } /* '' */
+.icon-emo-squint         { &::before { content: '\e811'; } } /* '' */
+.icon-emo-laugh          { &::before { content: '\e812'; } } /* '' */
+.icon-emo-wink2          { &::before { content: '\e813'; } } /* '' */
+
+.icon-up                 { &::before { content: '\e853'; } } /* '' */
+.icon-up-small           { &::before { content: '\e82f'; } } /* '' */
+.icon-up-thick           { &::before { content: '\e831'; } } /* '' */
+.icon-up-open-big        { &::before { content: '\e848'; } } /* '' */
+
+.icon-down               { &::before { content: '\e859'; } } /* '' */
+.icon-down-small         { &::before { content: '\e834'; } } /* '' */
+.icon-down-thick         { &::before { content: '\e835'; } } /* '' */
+.icon-down-bold          { &::before { content: '\e883'; } } /* '' */
+
+.icon-right-small        { &::before { content: '\e82d'; } } /* '' */
+.icon-right-thick        { &::before { content: '\e82e'; } } /* '' */
+
+.icon-left-small         { &::before { content: '\e836'; } } /* '' */
+.icon-left-thick         { &::before { content: '\e82c'; } } /* '' */
+.icon-left-bold          { &::before { content: '\e837'; } } /* '' */
+
+.icon-smile              { &::before { content: '\e85e'; } } /* '' */
+.icon-frown              { &::before { content: '\e84b'; } } /* '' */
+.icon-meh                { &::before { content: '\e85f'; } } /* '' */
+
+.icon-help               { &::before { content: '\e83c'; } } /* '' */
+.icon-menu               { &::before { content: '\e854'; } } /* '' */
+.icon-home               { &::before { content: '\e842'; } } /* '' */
+.icon-search             { &::before { content: '\e855'; } } /* '' */
+.icon-user               { &::before { content: '\e833'; } } /* '' */
+.icon-user-circle        { &::before { content: '\e86c'; } } /* '' */
+.icon-login              { &::before { content: '\e845'; } } /* '' */
+.icon-logout             { &::before { content: '\e847'; } } /* '' */
+
+.icon-dividers           { &::before { content: '\e801'; } } /* '' */
+.icon-cog                { &::before { content: '\e84e'; } } /* '' */
+.icon-cog-alt            { &::before { content: '\e818'; } } /* '' */
+.icon-attachment         { &::before { content: '\e832'; } } /* '' */
+.icon-revert-replay      { &::before { content: '\e839'; } } /* '' */
+.icon-bell               { &::before { content: '\e83a'; } } /* '' */
+.icon-bookmark-empty     { &::before { content: '\e83b'; } } /* '' */
+.icon-check              { &::before { content: '\e841'; } } /* '' */
+.icon-checkbox-marked    { &::before { content: '\e844'; } } /* '' */
+.icon-down-open-big      { &::before { content: '\e846'; } } /* '' */
+.icon-star               { &::before { content: '\e860'; } } /* '' */
+.icon-star-outline       { &::before { content: '\e84c'; } } /* '' */
+.icon-sitemap            { &::before { content: '\e84d'; } } /* '' */
+.icon-puzzle             { &::before { content: '\e84f'; } } /* '' */
+.icon-plus               { &::before { content: '\e850'; } } /* '' */
+.icon-minus              { &::before { content: '\e852'; } } /* '' */
+.icon-pencil-1           { &::before { content: '\e851'; } } /* '' */
+.icon-clipboard          { &::before { content: '\e857'; } } /* '' */
+.icon-clipboard-empty    { &::before { content: '\e856'; } } /* '' */
+.icon-clock              { &::before { content: '\e858'; } } /* '' */
+.icon-cloud              { &::before { content: '\e85a'; } } /* '' */
+.icon-mail               { &::before { content: '\e85d'; } } /* '' */
+
+.icon-folder-image       { &::before { content: '\e809'; } } /* '' */
+.icon-file-new           { &::before { content: '\e83d'; } } /* '' */
+.icon-file               { &::before { content: '\e83e'; } } /* '' */
+.icon-file-export        { &::before { content: '\e80a'; } } /* '' */
+.icon-files              { &::before { content: '\e849'; } } /* '' */
+
+.icon-comment-question   { &::before { content: '\e880'; } } /* '' */
+.icon-jira               { &::before { content: '\e881'; } } /* '' */
+
+
+/* + + + + +  additional "after" for nav-pagetools  + + + + + */
+.icon-pencil {
+    &::before,
+    &::after { content: '\e840'; }
+}
+.icon-pencil-add {
+    &::before,
+    &::after { content: '\e800'; }
+}
+.icon-revisions-history {
+    &::before,
+    &::after { content: '\e803'; }
+}
+.icon-link {
+    &::before,
+    &::after { content: '\e843'; }
+}
+.icon-file-pdf {
+    &::before,
+    &::after { content: '\e838'; }
+}
+.icon-file-xml {
+    &::before,
+    &::after { content: '\e802'; }
+}
+.icon-up-bold {
+    &::before,
+    &::after { content: '\e830'; }
+}
+.icon-disk {
+    &::before,
+    &::after{ content: '\e85c'; }
+}
+.icon-file-text {
+    &::before,
+    &::after{ content: '\e84a'; }
+}
+.icon-book-open {
+    &::before,
+    &::after { content: '\e83f'; }
+}
+.icon-code-braces {
+    &::before,
+    &::after { content: '\e85b'; }
+}
+.icon-code {
+    &::before,
+    &::after { content: '\e861'; }
+}
+.icon-right-bold {
+    &::before,
+    &::after { content: '\e882'; }
+}

lib/tpl/sprintdoc/css/base_mixins.less

@@ -0,0 +1,363 @@
+/**
+ * This file provides less mixins for all other style modules
+ */
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Fonts */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+.setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename) {
+    @font-face {
+        font-family: @fontFamily;
+        font-style: normal;
+        font-weight: @fontWeight;
+        src: ~"local('@{localFontName}'), local('@{localFontNameVar}'), url(fonts/@{filename}.eot)";
+        src: ~"url(fonts/@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/@{filename}.woff) format('woff')";
+    }
+}
+
+.setIconFontFace(@fontFamily,@filename) {
+    @font-face {
+        font-family: @fontFamily;
+        src: ~"url('fonts/icons/@{filename}.eot?6762325')";
+        src: ~"url('fonts/icons/@{filename}.eot?6762325#iefix') format('embedded-opentype'), url('fonts/icons/@{filename}.woff2?6762325') format('woff2'), url('fonts/icons/@{filename}.woff?6762325') format('woff'), url('fonts/icons/@{filename}.ttf?6762325') format('truetype'), url('fonts/icons/@{filename}.svg?6762325#fontello') format('svg')";
+        font-weight: normal;
+        font-style: normal;
+    }
+}
+
+.fontello() {
+    &::before {
+        font-family: "fontello";
+        font-style: normal;
+        font-weight: normal;
+        speak: none;
+
+        display: inline-block;
+        text-decoration: inherit;
+        width: 1em;
+        margin-right: .2em;
+        text-align: center;
+
+        /* For safety - reset parent styles, that can break glyph codes*/
+        font-variant: normal;
+        text-transform: none;
+
+        /* fix buttons height, for twitter bootstrap */
+        line-height: 1em;
+
+        /* Animation center compensation - margins should be symmetric */
+        /* remove if not needed */
+        margin-left: .2em;
+
+        /* you can be more comfortable with increased icons size */
+        /* font-size: 120%; */
+
+        /* Font smoothing. That was taken from TWBS */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+
+        /* Uncomment for 3D effect */
+        /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+    }
+}
+
+.fontello-double() {
+    &::before,
+    &::after {
+        font-family: "fontello";
+        font-style: normal;
+        font-weight: normal;
+        speak: none;
+
+        display: inline-block;
+        text-decoration: inherit;
+        width: 1em;
+        margin-right: .2em;
+        text-align: center;
+
+        /* For safety - reset parent styles, that can break glyph codes*/
+        font-variant: normal;
+        text-transform: none;
+
+        /* fix buttons height, for twitter bootstrap */
+        line-height: 1em;
+
+        /* Animation center compensation - margins should be symmetric */
+        /* remove if not needed */
+        margin-left: .2em;
+
+        /* you can be more comfortable with increased icons size */
+        /* font-size: 120%; */
+
+        /* Font smoothing. That was taken from TWBS */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+
+        /* Uncomment for 3D effect */
+        /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Screenreader / Hide */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+.sr-out() {
+    display: block;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    top: -200000em;
+    left: -200000em;
+}
+
+.sr-only() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+}
+
+.sr-only-focusable() {
+    &:active,
+    &:focus {
+        position: static;
+        width: auto;
+        height: auto;
+        margin: 0;
+        overflow: visible;
+        clip: auto;
+    }
+}
+
+/* + + + + +  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;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: @ini_nav_menu_hover_color;
+        border-color: @ini_nav_menu_hover_color;
+        color: @ini_nav_menu_hover_bg;
+
+        .prefix {
+            color: inherit;
+        }
+    }
+}
+
+.btn-usertools-wrapper(@elem:@toggle-size) {
+    display: inline-block;
+    min-height: @elem;
+    min-width: @elem;
+    box-sizing: border-box;
+    color: @ini_text_webframe;
+    font-size: @font-size-small;
+    padding: 0;
+    margin: 0 .25rem;
+
+    * {
+        font-size: @font-size-small;
+    }
+}
+
+.btn-usertools-num() {
+    .num {
+        position: absolute;
+        right: -.4rem;
+        top: -.5em;
+        background-color: @ini_nav_menu_hover_color;
+        border-radius: 2px;
+        color: @ini_nav_menu_hover_bg;
+        font-size: @font-size-very-small;
+        font-weight: 400;
+        text-align: center;
+        line-height: 1;
+        padding: .1em @very-small-spacing;
+        transition: @transition color, @transition background-color;
+    }
+}
+
+.btn-prefix(@margin-top:.3rem) {
+    .fontello();
+    .hide-text-show-before();
+
+    color: inherit;
+    font-size: @font-size-default;
+
+    @media @screen_min-xxlg {
+        margin-top: .22rem;
+    }
+
+    @media @screen_max-xxlg {
+        margin-top: @margin-top;
+    }
+
+    @media @screen_max-md {
+        margin-top: .2rem;
+    }
+}
+
+.hide-text-show-before() {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-indent: -9999px;
+
+    &::before {
+        float: left;
+        width: 100%;
+        text-indent: 0;
+        margin: 0;
+    }
+
+    &::after {
+        float: left;
+        text-indent: 0;
+    }
+}
+
+.hide-text-show-after() {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-indent: -9999px;
+
+    &::before {
+        float: right;
+        text-indent: 0;
+    }
+
+    &::after {
+        float: right;
+        text-indent: 0;
+    }
+}
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* flex-box */
+
+.display-flex() {
+    display: flex;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+}
+
+.flex-direction(@elem:column) {
+    flex-direction: @elem;
+    -ms-flex-direction: @elem;
+    -webkit-flex-direction: @elem;
+}
+
+.justify-content(@elem:center) {
+    justify-content: @elem;
+    -ms-justify-content: @elem;
+    -webkit-justify-content: @elem;
+}
+
+.align-items(@elem:center) {
+    align-items: @elem;
+    -ms-align-items: @elem;
+    -webkit-align-items: @elem;
+}
+
+.flex(@elem:1 0 auto) {
+    flex: @elem;
+    -ms-flex: @elem;
+    -webkit-flex: @elem;
+}
+
+.flex-wrap() {
+    flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* positioning */
+.center-middle() {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translateX(-50%) translateY(-50%);
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Screenreader / Hide */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+.reset() {
+    background: transparent;
+    border: none 0; outline: 0; vertical-align: baseline;
+    font-style: normal;
+    margin: 0; padding: 0;
+}
+
+.elementsReset() {
+    div, span, object, iframe,
+    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 {
+        .reset();
+    }
+}
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Col Grid */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+.make-grid(@class) {
+    .float-grid-columns(@class);
+    .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 {
+        float: left;
+    }
+}
+
+// todo: no recusion - fix it !!!
+.grid-columns(@index, @class, @type) {
+    .calc-grid-column(@index, @class, @type);
+}
+
+.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
+    .col-@{class}-@{index} {
+        width: percentage((@index / @grid-columns));
+    }
+}

lib/tpl/sprintdoc/css/base_structure.less

@@ -0,0 +1,288 @@
+/**
+ * This file provides styles for the general layout structure.
+ */
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* col grid */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+.make-grid(xs);
+
+@media screen {
+    .container {
+        margin: 0 @margin-big;
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* font sizing */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@media @screen_min-xxs {
+    html {
+        font-size: 100%; //16px
+    }
+}
+
+@media @screen_min-xs {
+    html {
+        font-size: 100%; //16px
+    }
+}
+
+@media @screen_min-sm {
+    .make-grid(sm);
+    html {
+        font-size: 100%; //16px
+    }
+}
+
+@media @screen_min-md {
+    .make-grid(md);
+    html {
+        font-size: 87.5%; //14px
+    }
+}
+
+@media @screen_min-lg {
+    .make-grid(lg);
+    html {
+        font-size: 87.5%; //14px
+    }
+}
+
+@media @screen_min-xlg {
+    html {
+        font-size: 93.75%; //15px
+    }
+}
+
+@media @screen_min-xxlg {
+    html {
+        font-size: 100%; //16px
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* z-indices */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@media screen {
+    .nav-direct p {
+        z-index: 1000; // keyboard-navigation overlays always on top
+    }
+
+    .top-header {
+        z-index: 2; // put MagicMatcher-Dropdowns above .content and metabox-tabs
+    }
+
+    #dokuwiki__aside div.nav a {
+        &:hover, &:focus, &:active {
+            z-index: 100; // show label/link above content on hover etc.
+        }
+    }
+
+    .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 {
+        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;
+        right: 0;
+        width: 50%;
+    }
+
+    .header,
+    .tools {
+        .row {
+            position: relative;
+
+            > .col-xs-12 {
+                width: @ini_sidebar_width;
+                box-sizing: border-box;
+            }
+        }
+    }
+
+    .header {
+        .row > .col-xs-12 {
+            position: relative;
+            height: 150px;
+            min-height: 6rem;
+            display: table;
+
+            + .col-xs-12 {
+                float: right;
+                width: @ini_site_width;
+                box-sizing: border-box;
+            }
+        }
+    }
+
+    /* + + + + +  layout option compact  + + + + + */
+    .header-compact {
+        .header {
+            .row > .col-xs-12 {
+                height: auto;
+                min-height: auto;
+            }
+        }
+    }
+
+    .tools {
+        .row > .col-xs-12 {
+            position: absolute;
+        }
+    }
+
+    .content {
+        .row > .col-xs-12 {
+            position: relative;
+            width: 100%;
+            background-color: #fff;
+        }
+    }
+
+    .showSidebar {
+        .content {
+            .row > .col-xs-12 {
+                width: @ini_site_width;
+                float: right;
+            }
+        }
+    }
+
+    .wide-content {
+        .content {
+            .row > .col-xs-12 {
+                width: auto;
+                float: none;
+            }
+        }
+
+        &.showSidebar {
+            .content {
+                .row > .col-xs-12 {
+                    margin-left: @toggle-showsidebar_width;
+                }
+            }
+        }
+    }
+
+    .main-sidebar {
+        &.search {
+            > img {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+}
+
+// > 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;
+    }
+
+    .content {
+        position: relative;
+
+        #dokuwiki__pagetools {
+            top: 0;
+        }
+
+        .row > .col-xs-12 #dokuwiki__content::before {
+            display: none;
+        }
+    }
+
+    .tools {
+        .main-sidebar {
+            display: none;
+        }
+    }
+}
+
+@media @screen_max-xxs {
+    @mobileMargin: 4px;
+
+    .container {
+        margin: 0 @mobileMargin;
+    }
+
+    body.show-mobile-sidebar #dokuwiki__aside {
+        left: @mobileMargin;
+    }
+
+    #dokuwiki__footer {
+        .main-footer {
+            > * {
+                padding-left: 2rem;
+                padding-right: 2rem;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/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;

lib/tpl/sprintdoc/css/plugins/bureaucracy.less

@@ -0,0 +1,116 @@
+/**
+ * This file provides styles for bureaucracy plugin
+ */
+
+/* + + + + +  global  + + + + + */
+.dokuwiki form.bureaucracy__plugin {
+    fieldset {
+        width: 100%;
+        max-width: 800px;
+        box-sizing: border-box;
+        border: 0 none;
+        text-align: center;
+        margin-left: 0;
+        margin-bottom: (@grid * 2);
+        padding: @grid 0 0;
+
+        > *:not(button) {
+            text-align: left;
+        }
+    }
+
+    legend {
+        font-size: @font-size-small;
+        font-weight: bold;
+        text-align: left;
+    }
+
+    label {
+        clear: both;
+        padding-top: (@grid / 2);
+
+        &::after {
+            content: '';
+            clear: both;
+        }
+
+        sup {
+            float: right;
+            font-size: 1em;
+        }
+
+        input,
+        select {
+            float: left;
+            width: 50%;
+            text-align: left;
+            padding: .1em .2em;
+        }
+
+        input[type="checkbox"] {
+            width: 1.5rem;
+            height: 1.5rem;
+            background-image: none;
+        }
+
+        span {
+            float: left;
+            text-align: right;
+            line-height: @line-height-default;
+            padding-top: .2em;
+            padding-right: @grid;
+
+            &:not([class]) {
+                font-weight: bold;
+                margin-top: .5em;
+
+                + input,
+                + select {
+                    margin-top: .3em;
+                }
+
+                // checkboxes
+                + input + input {
+                    margin-top: .3em;
+                }
+            }
+
+            &.label {
+                text-align: right;
+                padding-top: .5em;
+            }
+
+            &.input {
+                width: 49%;
+                text-align: left;
+                padding-left: 0;
+            }
+        } // span
+    } // label
+
+    button[type="submit"] {
+        margin-top: (@grid * 2);
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* min-width: 1440px */
+@media @screen_min-xlg {
+    .dokuwiki form.bureaucracy__plugin {
+        p {
+            font-size: @font-size-default;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1439px */
+@media @screen_max-xlg {
+    .dokuwiki form.bureaucracy__plugin {
+        p,
+        label,
+        button[type="submit"] {
+            font-size: @font-size-default;
+        }
+    }
+}

lib/tpl/sprintdoc/css/plugins/configmanager.less

@@ -0,0 +1,156 @@
+/**
+ * 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: @background_darker;
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        .selectiondefault {
+            background-color: transparent;
+            color: inherit;
+        }
+
+        tr {
+            .input {
+                background-color: transparent;
+                color: inherit;
+            }
+
+            &:hover {
+                td {
+                    color: inherit;
+                }
+            }
+        }
+
+        tr.default {
+            .input {
+                background-color: transparent;
+            }
+        }
+
+        td.label {
+            padding: .8em 0 1.2em 1em;
+
+            span.outkey {
+                background-color: @ini_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%;
+                }
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/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: @ini_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: @ini_background;
+                }
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/plugins/do_tasks.less

@@ -0,0 +1,96 @@
+/**
+ * This file provides styles for do-task plugin
+ */
+
+
+/* + + + + +  usertool icon in header  + + + + + */
+#dokuwiki__usertools.nav-usertools {
+    ul {
+        li {
+            &.user-task {
+                .btn-usertools-wrapper();
+                .btn-usertools-num();
+
+                position: relative;
+
+                .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;
+
+                    &::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: @ini_background_site;
+                        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: #FFF;
+        margin-top: .5rem;
+
+        @media @screen_max-sm {
+            width: 100%;
+        }
+    }
+}

lib/tpl/sprintdoc/css/plugins/edit.less

@@ -0,0 +1,69 @@
+/**
+ * This file provides styles for the edit view (?do=edit), preview
+ * and "section edit button" and "editbutton_table edit button".
+ */
+
+/* + + + + +  edit view  + + + + + */
+#dokuwiki__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;
+    }
+
+    // "section edit button" and "editbutton_table edit button"
+    .secedit button {
+        clear: both;
+        font-size: 100%;
+        margin-top: .5rem;
+        margin-bottom: .5rem;
+    }
+
+    div.editBox {
+        background-color: #FFF;
+        border: solid 2px #FFF;
+
+        .editButtons {
+            display: inline-block;
+            padding-bottom: 1rem;
+        }
+
+        @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 {
+            display: block;
+            margin-bottom: 1.5rem;
+            clear: both;
+        }
+
+        #spr__meta-box {
+            display: none;
+        }
+    }
+}

lib/tpl/sprintdoc/css/plugins/edittable.less

@@ -0,0 +1,44 @@
+/**
+ * This file provides styles for "edittable plugin"
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__content.main-content {
+    div.editbutton_table {
+        position: relative; // for IE
+        float: left;
+        margin-top: -1.4em !important; // overwrite inline styles
+
+        form div.no {
+            button,
+            input.button {
+                min-height: 1rem;
+                background-color: @ini_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;
+                margin-top: -1px; // for best position of edit-tab beneath table
+                padding-right: .3em;
+                transition: @transition background-color, @transition border-color, @transition color;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: @ini_existing;
+                    border-color: @ini_existing;
+                    color: @ini_background;
+                }
+            }
+        }
+
+        + * {
+            clear: left;
+        }
+
+        + div.editbutton_table {
+            clear: none;
+        }
+    }
+}

lib/tpl/sprintdoc/css/plugins/extension__manager.less

@@ -0,0 +1,18 @@
+/**
+ * This file provides styles for extension manager
+ */
+
+/* + + + + +  global  + + + + + */
+.dokuwiki #extension__manager {
+    .actions {
+        font-size: 0;
+
+        > button {
+            font-size: .92rem;
+            margin-left: .3rem;
+            padding-left: .3rem;
+            padding-right: .3rem;
+        }
+    }
+}
+

lib/tpl/sprintdoc/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;
+}

lib/tpl/sprintdoc/css/plugins/folded.less

@@ -0,0 +1,33 @@
+/**
+ * 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;
+        color: @ini_existing;
+        padding-right: 20px;
+
+        &.open {
+            background-image: url("svg.php?svg=up.svg&f=existing");
+        }
+    }
+
+    div.folded {
+        box-shadow: @box-shadow-colored;
+        border: 1px solid fade(@ini_existing, 50%);
+        border-radius: 0;
+        margin-top: -.7rem;
+        margin-bottom: .7rem;
+        padding: .5em;
+
+        p {
+            margin: .5rem 0;
+        }
+    }
+
+    span.folded {
+        border: 1px dotted @ini_border;
+    }
+}

lib/tpl/sprintdoc/css/plugins/highlight_parent.less

@@ -0,0 +1,22 @@
+/**
+ * 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 {
+        clear: both;
+        margin-top: 1rem;
+    }
+}

lib/tpl/sprintdoc/css/plugins/magic-matcher.less

@@ -0,0 +1,215 @@
+/**
+ * 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;
+        top: 0;
+        border: 0;
+        border-bottom: 1px solid @ini_border;
+        border-left: 1px solid @ini_border;
+        color: @ini_nav_menu_color;
+        background: #fff;
+        border-radius: 0;
+        border-bottom-left-radius: 5px;
+
+        &:hover,
+        &:focus,
+        &:active {
+            border-color: @ini_button_background;
+            color: @ini_button_background;
+        }
+    }
+
+    #magicmatcher__context {
+        position: relative;
+        width: 100%;
+        min-height: @height-context-bar;
+        box-sizing: border-box;
+        box-shadow: @box-shadow;
+        background-color: @ini_background;
+        border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
+        font-size: @font-size-default;
+        padding: .8em 1em .5em;
+        margin-bottom: 0;
+
+        .chosen-container-single,
+        .chosen-container-single *,
+        #mm_issue_loading,
+        .mm__status,
+        .toggleSuggestions {
+            font-size: @font-size-default;
+        }
+
+        .chosen-container-single {
+            .chosen-single span {
+                line-height: @line-height-bigger;
+            }
+        }
+
+        @media @screen_max-md {
+            padding-top: @margin-default;
+
+            .chosen-container {
+                display: block;
+                min-width: 100%;
+                max-width: 100%;
+                margin-bottom: .5rem;
+            }
+        }
+    }
+}
+
+/* + + + + +  in content  + + + + + */
+a.jiralink {
+    font-size: @font-size-default;
+
+    img {
+        float: left;
+        display: inline-block;
+        margin-top: .13em;
+        margin-right: 3px;
+    }
+
+    span.mm__status {
+        display: inline-block;
+        font-size: @font-size-default;
+        margin-left: 5px;
+        padding: 1px 4px;
+    }
+}
+
+/* + + + + +  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 {
+    #spr__magic-matcher {
+        display: none;
+    }
+}
+
+.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 {
+            .chosen-container-single {
+                width: 20% !important;
+
+                + select + .chosen-container-single {
+                    width: 58% !important;
+                }
+            }
+        }
+    }
+}
+
+@media @screen_max-md {
+    #spr__magic-matcher {
+        display: none;
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* print */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@media print {
+    #spr__magic-matcher {
+        display: none;
+    }
+}

lib/tpl/sprintdoc/css/plugins/mediamanager.less

@@ -0,0 +1,35 @@
+/**
+ * This file provides styles for mediamanager
+ */
+
+/* + + + + +  global  + + + + + */
+#mediamanager__page {
+    .namespaces h2 {
+        bottom: 0;
+        line-height: 100%;
+        margin-bottom: -1px;
+    }
+
+    #media__tree ul li img {
+        padding-top: .3em;
+    }
+
+    ul.tabs li a {
+        border-bottom-color: transparent;
+    }
+
+    #page__revisions {
+        > .no > ul > li input[type="checkbox"] {
+            margin-left: 0;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries */
+@media @screen_max-md {
+    #mediamanager__page {
+        min-width: 100%;
+        max-width: 100%;
+    }
+}

lib/tpl/sprintdoc/css/plugins/move.less

@@ -0,0 +1,12 @@
+/**
+ * This file provides styles for move plugin
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__site > .plugin_move_dialog {
+    font-size: @font-size-default;
+
+    * {
+        font-size: @font-size-default;
+    }
+}

lib/tpl/sprintdoc/css/plugins/popupviewer.less

@@ -0,0 +1,26 @@
+/**
+ * This file provides styles for popupviewer plugin
+ */
+
+/* + + + + +  global  + + + + + */
+#popupviewer {
+    > .controls > .content {
+        padding: 1.5rem 1rem 1rem;
+
+        td,
+        th {
+            font-size: @font-size-default;
+            line-height: @line-height-default;
+            a{
+                font-size: @font-size-default;
+                line-height: @line-height-default;
+            }
+        }
+
+        .li,
+        li {
+            font-size: @font-size-default;
+            line-height: @line-height-default;
+        }
+    }
+}

lib/tpl/sprintdoc/css/plugins/qc.less

@@ -0,0 +1,103 @@
+/**
+ * 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
+
+    @media @screen_min-xxs {
+        margin-right: -(@margin-default);
+        margin-left: -(@margin-default);
+        padding-left: @margin-default;
+        padding-right: @margin-default;
+    }
+
+    @media @screen_min-md {
+        top: -(@margin-small);
+    }
+
+    @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;
+    }
+
+    @media @screen_max-xxs {
+        margin-left: -(@margin-small);
+        padding-left: @margin-small;
+        padding-right: @margin-default;
+    }
+
+    h1 {
+        @media @screen_min-md {
+            padding-top: 0;
+        }
+    }
+
+    h2 {
+        font-size: 1.3rem;
+    }
+
+    h3 {
+         font-size: 1.1rem;
+    }
+
+    h4,
+    h5,
+    h6 {
+        font-size: 1rem;
+    }
+
+    div,
+    p {
+        margin-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;
+            }
+        }
+    }
+
+    .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;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/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;
+}

lib/tpl/sprintdoc/css/plugins/starred.less

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

lib/tpl/sprintdoc/css/plugins/struct.less

@@ -0,0 +1,196 @@
+/**
+ * This file provides styles for struct plugin
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__content {
+    .structaggregation {
+        @link-height: 1.5rem;
+
+        position: relative;
+        padding-bottom: @link-height;
+        margin-bottom: @grid;
+
+        td,
+        th {
+            line-height: @line-height-default;
+
+            a {
+                //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) {
+                cursor: pointer;
+            }
+
+            &:focus {
+                width: 100%;
+                box-sizing: border-box;
+            }
+        }
+
+        .table {
+            margin-bottom: 0;
+        }
+
+        > a {
+            position: absolute;
+            bottom: 0;
+            height: @link-height;
+            margin-bottom: 0;
+
+            &.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;
+                margin-top: -1px;
+                padding-top: .4em;
+                transition: @transition background-color, @transition border-color, @transition color;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: @ini_existing;
+                    background-image: url("svg.php?svg=file-export.svg&f=background");
+                    border-color: @ini_existing;
+                    //color: @ini_background;
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    #plugin__struct_output {
+        margin-right: 0;
+
+        th {
+            background-color: @ini_background_alt;
+        }
+    }
+
+    .struct_entry_form {
+        margin-bottom: 2rem;
+
+        > fieldset {
+            margin-top: 1.5rem;
+        }
+    }
+
+    textarea + .struct_entry_form {
+        margin-top: -.5rem;
+    }
+
+    div.editBox {
+        .struct_entry_form {
+            label span.label {
+                color: @color-editBox;
+            }
+        }
+    }
+}
+
+/* + + + + +  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;
+            }
+        }
+    }
+}
+
+
+/* + + + + +  form - Struct Schema Editor  + + + + + */
+form {
+    &.doku_form.struct_newschema {
+        fieldset {
+            > label {
+                > span:first-child {
+                    display: inline-block;
+
+                    @media @screen_min-lg {
+                        width: 48.8%;
+                    }
+
+                    @media @screen_max-lg {
+                        width: 48.5%;
+                    }
+                }
+
+                > input[type="text"] {
+                    width: 50%;
+                }
+            }
+
+            button {
+                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;
+                vertical-align: top;
+                margin-top: .3em;
+                padding: .3em @grid;
+                transition: @transition background-color, @transition color;
+
+                &:hover,
+                &:active,
+                &:focus {
+                    background-color: @ini_button_color;
+                    color: @ini_button_background;
+                }
+
+                + p {
+                    padding-top: 1rem;
+                }
+            }
+        } // fieldset
+    }
+} // form

lib/tpl/sprintdoc/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;
+    }
+}

lib/tpl/sprintdoc/css/plugins/tabinclude.less

@@ -0,0 +1,57 @@
+/**
+ * This file provides styles for the tabinclude
+ */
+
+/* + + + + +  plugin tabinclude  + + + + + */
+div#dwpl-ti-container {
+    li.dwpl-ti-tab {
+        box-shadow: none;
+        background-color: @ini_background_page_header;
+        border-color: @ini_border;
+        border-radius: @fix_border-radius @fix_border-radius 0 0;
+        color: @ini_background_page_footer;
+        padding: 0;
+
+        &:hover {
+            background-color: @ini_background_page_header;
+            text-decoration: none;
+
+            div {
+                text-decoration: underline;
+
+                &.selected {
+                    color: @ini_text;
+                }
+            }
+        }
+
+        div {
+            border-radius: inherit;
+            color: inherit;
+            padding: .1em .35em;
+
+            &.selected {
+                position: relative;
+                background-color: @ini_background;
+                color: @ini_text;
+            }
+        }
+    }
+
+/* + + +  content box  + + + */
+    div.dwpl-ti-content-box {
+        position: relative;
+        overflow: auto;
+        box-shadow: @box-shadow;
+        background-color: @ini_background;
+        border: solid 1px @ini_border;
+        border-radius: 0;
+        margin-top: -1px;
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries */
+@media @screen_max-md {
+    div#dwpl-ti-container { }
+}

lib/tpl/sprintdoc/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: @ini_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;
+    }
+}

lib/tpl/sprintdoc/css/plugins/tagging.less

@@ -0,0 +1,123 @@
+/**
+ * This file provides styles for the form in tagcloud
+ */
+
+/* + + + + +  plugin tagging  + + + + + */
+#spr__meta-box {
+    ul.tagging_cloud {
+        width: 100%;
+        padding-right: 0;
+
+        li {
+            &.t0 a {
+                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;
+            }
+        }
+    }
+
+    form#tagging__edit {
+        width: 100%;
+
+        label {
+            display: block;
+        }
+
+        input.edit {
+            width: 100%;
+            margin-bottom: .5rem;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries */
+@media @screen_max-md {
+    #spr__meta-box {
+        form {
+            &#tagging__edit {
+                label {
+                    display: inline-block;
+                    min-width: 50%;
+                    vertical-align: top;
+                    margin-bottom: .5rem;
+                }
+
+                input.edit {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
+
+@media @screen_max-xs {
+    #spr__meta-box {
+        form {
+            div > button[type="submit"] {
+                width: 49%;
+                padding: 0;
+            }
+
+            &#tagging__edit {
+                &::after {
+                    content: '';
+                    clear: both;
+                    display: block;
+                }
+
+                label {
+                    display: block;
+                    width: 100%;
+                }
+
+                button[type="submit"] {
+                    float: right;
+
+                    &:first-of-type {
+                        float: left;
+                    }
+                }
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/plugins/tplinc.less

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

lib/tpl/sprintdoc/css/plugins/translation.less

@@ -0,0 +1,32 @@
+/**
+ * This file provides styles for the translation plugin
+ */
+
+
+.dokuwiki div.plugin_translation {
+    clear: none;
+    display: block;
+    position: relative;
+    float: none;
+
+    + * {
+        clear: both;
+        padding-top: 1em; // as h1
+    }
+
+    ul li {
+        a.wikilink1:link,
+        a.wikilink1:hover,
+        a.wikilink1:active,
+        a.wikilink1:visited {
+            background-color: @ini_link;
+        }
+    }
+}
+
+@media @screen_max-md {
+    .dokuwiki div.plugin_translation {
+        clear: both;
+        margin-top: 1rem;
+    }
+}

lib/tpl/sprintdoc/css/print.less

@@ -0,0 +1,517 @@
+/**
+ * This file provides the styles for printing.
+ */
+
+/* + + + + +  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;
+    }
+}

lib/tpl/sprintdoc/css/template_admin.less

@@ -0,0 +1,122 @@
+/**
+ * This file provides the design styles for the admin tools
+ */
+
+.do-admin {
+    #admin__version {
+        font-size: @font-size-default;
+    }
+
+    .main-content ul {
+        > li {
+            font-size: @font-size-default;
+
+            div.li {
+                font-size: @font-size-default;
+
+                a {
+                    font-size: @font-size-default;
+                    line-height: 125%;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    div.ui-admin {
+        ul.admin_tasks,
+        ul.admin_plugins {
+            padding: 0;
+
+            li {
+                background-size: auto 1rem;
+                margin: 0 0 .6em 0;
+
+                a {
+                    color: @ini_existing;
+                    font-weight: 400;
+
+                    * {
+                        color: inherit;
+                    }
+
+                    span.icon {
+                        width: 1.6em;
+                        min-height: 1.6em;
+                        margin-top: -.3rem;
+                        margin-bottom: .3rem;
+
+                        svg {
+                            width: 26px;
+                            height: 26px;
+                            border: solid 1px @ini_background;
+                            border-radius: @ini_default_border_radius;
+                            fill: @ini_existing;
+                            transition: @transition background-color, @transition border-color, @transition fill;
+
+                            path {
+                                fill: @ini_existing;
+                                transition: @transition fill;
+                            }
+                        }
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        span.icon {
+                            svg {
+                                background-color: @ini_existing;
+                                border-color: @ini_existing;
+                                fill: @ini_background;
+
+                                path {
+                                    fill: @ini_background;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* 1024px */
+@media @screen_max-md {
+    .do-admin {
+        div.ui-admin {
+            ul.admin_tasks {
+                width: 50%;
+                padding-top: 1rem;
+
+                li {
+                    white-space: normal;
+
+                    a {
+                        .display-flex(); // for better position with line breaks (white-space)
+
+                        span.icon {
+                            margin-top: -.3rem;
+                            margin-bottom: .3rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* 768px */
+@media @screen_max-xs {
+    .do-admin {
+        div.ui-admin {
+            ul.admin_tasks {
+                width: auto;
+                padding-top: 1rem;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/css/template_detail.less

@@ -0,0 +1,165 @@
+/**
+ * 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: @ini_button_color;
+                margin: 0 auto 1.4em;
+
+                &::before {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    display: block;
+                    width: 100%;
+                    box-sizing: border-box;
+                    background: @ini_button_background;
+                    line-height: @line-height-default;
+                    padding: @margin-small;
+                }
+
+                img {
+                    margin: 0;
+                    display: block;
+                    border: 1px dotted @ini_background_site;
+                    position: relative;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    text-decoration: none;
+
+                    &::before {
+                        content: attr(title);
+                    }
+
+                    img {
+                        border: 1px solid @ini_button_background;
+                    }
+                }
+            }
+        }
+    }
+
+
+    /* + + + + +  meta data  + + + + + */
+    div.img_detail {
+        @media screen {
+            /* vertical minus margin of .img-detail corresponds to the padding of .page */
+            background-color: @ini_background_page_header;
+            border: solid @ini_border_light;
+            border-width: 1px 0;
+            margin: @margin-default -(@margin-default);
+
+            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: @ini_highlight;
+                color: @ini_highlight_text;
+
+                @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;
+            }
+        }
+    }
+}

lib/tpl/sprintdoc/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: @ini_nav_menu_color;
+        margin-right: .2em;
+    }
+}