natenom-websites/scss/import/wiki.scss

// is located in dokuwiki/conf/userall.css

@media screen {
  html, body {
    background: var(--background);
    color: var(--text);
    #dokuwiki__site {
      .site {
        .topbar { // _old_ topbar (pre ~2015; plugin)
          left: 0;
          top: 0;
          width: 100%;
          position: absolute;
          ul {
            background-color: __background_alt__;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border-width: 0 1px 1px;
            border: solid __border__;
            box-shadow: none;
            list-style: none;
            margin: 0 auto;
            max-width: 530px; /* change accordingly */
            overflow: hidden;
            padding: 0;
            text-align: center;
            li {
              display: inline-block;
              font-size: 95%;
              margin: 0;
              padding: 0 2px;
              a {
                color: var(--text);
                display: inline-block;
                min-height: 22px; /* make sure icons are not cut off (most icons are 16x16) */
              }
            }
          }
        }
        #dokuwiki__header {
          padding-top: 3.5em;
          a {
            color: var(--text) !important;
            &:hover {
              text-decoration-style: dotted !important;
            }
          }
          .group {
            .headings h1 a {
              text-decoration-thickness: 1px !important;
              img {
                filter: var(--invert-light);
              }
            }
            .tools {
              #dokuwiki__usertools {
                top: 2em;
              }
              #dokuwiki__sitetools {
                .search {
                  input {
                    background: var(--background-contrast);
                    border: 0;
                    box-shadow: none;
                    color: var(--text);
                    padding: 10px;
                  }
                  button {
                    filter: var(--invert-dark);
                  }
                }
              }
            }
          }
          .breadcrumbs, .youarehere {
            border: none !important;
          }
        }
        .wrapper {
          #dokuwiki__aside {
            a {
              color: var(--text) !important;
            }
            .aside {
              background: var(--background);
              box-shadow: none;
              .content {
                .group {
                  .dtree {
                    //.clip {
                      .dTreeNode {
                        margin: 5px 0;
                        position: relative;
                        &:first-of-type {
                          a.navSel {
                            background: transparent;
                            border-color: transparent;
                            color: var(--nom-blue);
                          }
                        }
                        &:hover {
                          position: unset;
                        }
                        img {
                          z-index: 3;
                          position: relative;
                        }
                        a {
                          &.navSel {
                            background: var(--nom-blue);
                            border-color: var(--nom-blue-dark);
                            color: var(--nom-blue-text) !important;
                          }
                          &.navSel,
                          &.node,
                          &.nodeFdUrl,
                          &.nodeSel,
                          &.nodeUrl {
                            border: 1px solid transparent;
                            border-radius: 2px;
                            margin: -2px 0 0 -17px;
                            padding: 3px 3px 3px 17px;
                            position: absolute;
                            transition: background .1s, color .1s, border .1s;
                            &:focus,
                            &:hover { // ueberlange Menupunkte; Hoverefekt
                              background: var(--nom-blue-dark);
                              border-color: var(--nom-blue-dark);
                              color: var(--nom-blue-text) !important;
                              text-decoration: none;
                              z-index: 2;
                            }
                          }
                        }
                      }
                    //}
                  }
                }
              }
            }
          }
          #dokuwiki__content {
            a {
              color: var(--link) !important;
              text-underline-offset: 3px !important;
              &:hover {
                text-decoration-style: dotted !important;
              }
            }
            .pad {
              .pageId {
                span {
                  background-color: var(--background-contrast);
                  border: 0;
                  box-shadow: var(--box-shadow) !important;
                  color: var(--text);
                  padding: 0.5em 1em;
                }
              }
              .page {
                background: var(--background-contrast);
                border: 0;
                border-radius: 0;
                box-shadow: var(--box-shadow) !important;
                counter-reset: level1; // content only
                h1 {
                  counter-reset: level2;
                }
                h2 {
                  counter-reset: level3;
                  &:before {
                    content: counter(level2) " ";
                    counter-increment: level2;
                  }
                }
                h3 {
                  counter-reset: level4;
                  &:before {
                    content: counter(level2) "." counter(level3) " ";
                    counter-increment: level3;
                  }
                }
                h4 {
                  counter-reset: level5;
                  &:before {
                    content: counter(level2) "." counter(level3) "." counter(level4) " ";
                    counter-increment: level4;
                  }
                }
                h5 {
                  &:before {
                    content: counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) " ";
                    counter-increment: level5;
                  }
                }
                li {
                  .li {
                    color: var(--text);
                  }
                }
                #dw__toc { // Inhaltsverzeichnis
                  background: var(--background);
                  border: 0;
                  margin: 0 0 .5em 1.4em;
                  padding: 0.5em;
                  &:after,
                  &:before { // toc only; Vor und nach Inhaltsverzeichnis Counter reset machen
                    counter-reset: level1; content: "";
                  }
                  h3 {
                    &:before { // Inhaltsverzeichnis-Ueberschrift soll keine Nummer 0.1 haben.
                      content:""
                    }
                    strong { // Knopf zum öffnen / schließen des Inhaltsverzeichnisses
                      filter: var(--invert-dark);
                    }
                  }
                  div {
                    ul.toc {
                      padding: 0 0 0 0.5em;
                      a {
                        color: var(--text) !important;
                        text-decoration: none !important;
                        &:hover {
                          text-decoration: underline !important;
                          text-decoration-style: dotted !important;
                        }
                      }
                      li {
                        list-style-image: unset; // Punkte entfernt, da semantisch falsch
                        &.level1 {
                          counter-reset: level2;
                          a:before {
                            content: counter(level1) " ";
                            counter-increment: level1;
                          }
                        }
                        &.level2 {
                          counter-reset: level3;
                          a:before {
                            content: counter(level1) "." counter(level2) " ";
                            counter-increment: level2;
                          }
                        }
                        &.level3 {
                          counter-reset: level4;
                          a:before {
                            content: counter(level1) "." counter(level2) "." counter(level3) " ";
                            counter-increment: level3;
                          }
                        }
                        &.level4 {
                          counter-reset: level5;
                          a:before {
                            content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) " ";
                            counter-increment: level4;
                          }
                        }
                        &.level5 {
                          a:before {
                            content: counter(level1) "."   counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) " ";
                            counter-increment: level5;
                          }
                        }
                      }
                    }
                  }
                }
                div {
                  .wrap_tip { // Information / Hinweis
                    background-color: var(--yellow);
                    border-radius: 10px;
                    color: var(--text-dark);
                  }
                  .wrap_info {
                    background-color: var(--grey);
                    border-radius: 10px;
                    color: var(--text-dark);
                  }
                  .wrap_download {
                    background-color: var(--green);
                    border-radius: 10px;
                    color: var(--text-dark);
                  }
                  .wrap_important {
                    border-radius: 10px;
                    color: var(--text-dark);
                  }
                  .wrap_help {
                    border-radius: 10px;
                    color: var(--text-dark);
                  }
                  .wrap_alert {
                    border-radius: 10px;
                    color: var(--text-dark);
                  }
                  table.inline {
                    thead, tbody {
                      tr th {
                        color: var(--text-dark);
                      }
                    }
                  }
                  pre {
                    filter: var(--invert-dark);
                  }
                  .dokuteaser {
                    p {
                      .media {
                        .mediaright {
                          margin-top: 0;
                        }
                      }
                      .wikilink1 {
                        display: initial;
                        &:last-child {
                          display: block;
                        }
                      }
                    }
                  }
                }
              }
              .thumb2 { // Bild ohne Rahmen
                padding-bottom: 16px;
                .thumbinner {
                  background-color: transparent;
                  border: 0;
                  padding: 0;
                  .thumbcaption {
                    padding: 10px 0;
                  }
                }
              }
            }
          }
          #dokuwiki__pagetools {
            .tools ul {
              background-color: var(--background-contrast);
              border-color: transparent;
              box-shadow: var(--box-shadow);
              &:hover {
                border-color: var(--border);
              }
              li {
                a {
                  color: var(--text);
                  &:hover {
                    background-color: var(--background);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 480px) {
  body {
    #dokuwiki__site {
      .site {
        .topbar { // _old_ topbar (pre ~2015; plugin)
          position: static; // move topbar back to the bottom
        }
        #dokuwiki__header {
          padding-top: .5em;
        }
      }
    }
  }

}

@media print {
  body {
    #dokuwiki__site {
      .site {
        .topbar { // _old_ topbar (pre ~2015; plugin)
            display: none; // don't print the topbar
        }
      }
    }
  }
}