<div class="mdui-row mdui-row-gapless">
    <div class="mdui-col-xs-3">{{adminList}}</div>
    <div class="mdui-col-xs-1"></div>
    <div class="mdui-col-xs-7">
        <div class="mdui-typo-headline">样式</div><br><br>
        <form action="/adminwait/style" method="POST">
            <div class="mdui-textfield"><i class="mdui-icon material-icons">style</i><label
                    class="mdui-textfield-label">主题色</label>
                <!--<script>document.getElementById('sel-primary')['blue'].selected=true;</script><select class="mdui-select"name="sel-primary"id="sel-primary"><option value="blue"selected=false>Blue</option><option value="red"selected=false>Red</option><option value="orange"selected=false>Orange</option><option value="green"selected=false>Green</option><option value="yellow"selected=false>Yellow</option><option value="lime"selected=false>Lime</option><option value="teal"selected=false>Teal</option><option value="brown"selected=false>Brown</option><option value="grey"selected=false>Grey</option><option value="pink"selected=false>Pink</option><option value="indigo"selected=false>Indigo</option><option value="purple"selected=false>Purple</option><option value="amber"selected=false>Amber</option><option value="light-green"selected=false>Light-green</option><option value="light-blue"selected=false>Light-blue</option><option value="deep-purple"selected=false>Deep-purple</option><option value="deep-orange"selected=false>Deep-orange</option><option value="blue-grey">Blue-grey</option></select>--><input
                    name="colorPrimary" value="{{ serverconf['colorPrimary'] }}" type="text"
                    class="mdui-textfield-input" placeholder="论坛的主题色" /></div><br><button type="submit"
                class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">保存并应用</button>
            <div class="mdui-typo">
                <h4 class="doc-article-title">主色<a class="doc-anchor" id="color-primary"></a></h4>
                <p>主色共有19种颜色，包括：</p>
                <div class="mdui-row-xs-2 mdui-row-sm-3 mdui-row-md-4 mdui-row-lg-6">
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-red mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-red">red</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-pink mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-pink">pink</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-purple mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-purple">purple</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-deep-purple mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-deep-purple">deep-purple</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-indigo mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-indigo">indigo</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-blue mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-blue">blue</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-light-blue mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-light-blue">light-blue</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-cyan mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-cyan">cyan</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-teal mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-teal">teal</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-green mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-green">green</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-light-green mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-light-green">light-green</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-lime mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-lime">lime</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-yellow mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-yellow">yellow</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-amber mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-amber">amber</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-orange mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-orange">orange</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-deep-orange mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-deep-orange">deep-orange</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-brown mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-brown">brown</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-grey mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-grey">grey</a></div>
                    <div class="mdui-col"><span class="doc-color-circle mdui-color-blue-grey mdui-m-r-1"></span><a
                            data-scroll="" href="#primary-color-blue-grey">blue-grey</a></div>
                </div>
                <p></p><br>
                <div class="mdui-textfield"><i class="mdui-icon material-icons">short_text</i><label
                        class="mdui-textfield-label">Robots.txt</label><textarea name="robotstxt"
                        class="mdui-textfield-input" placeholder="爬虫限制"
                        maxlength="2000">{{serverconf['robots.txt']}}</textarea></div><button type="submit"
                    class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">保存并应用</button>
                <div class="mdui-textfield"><i class="mdui-icon material-icons">web</i><label
                        class="mdui-textfield-label">插入JavaScript</label><textarea name="js"
                        class="mdui-textfield-input" placeholder="插入JavaScript"
                        maxlength="2000">{{serverconf['js']}}</textarea></div><button type="submit"
                    class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">保存并应用</button><br><br><br>
        </form>
    </div>
</div>
</div>
</div><br><br><br>
<style>
    .doc-container {
        padding-top: 40px;
        padding-bottom: 40px;
        position: relative
    }

    @media(min-width:480px) {
        .doc-container {
            padding-top: 60px;
            padding-bottom: 70px
        }
    }

    @media(min-width:840px) {
        .doc-container {
            padding-top: 80px;
            padding-bottom: 100px
        }
    }

    h1.doc-title {
        font-size: 24px;
        line-height: 32px;
        font-weight: 400;
        margin: 0 0 20px 0
    }

    @media(min-width:480px) {
        h1.doc-title {
            font-size: 28px;
            line-height: 36px;
            margin: 0 0 25px 0
        }
    }

    @media(min-width:840px) {
        h1.doc-title {
            font-size: 34px;
            line-height: 40px;
            margin: 0 400px 30px 0
        }
    }

    .doc-intro {
        font-size: 16px;
        margin-bottom: 0;
        padding: 0 0 48px 0
    }

    @media(min-width:480px) {
        .doc-intro {
            padding: 0 0 54px 0
        }
    }

    @media(min-width:840px) {
        .doc-intro {
            padding: 0 0 60px 0;
            margin-right: 400px
        }
    }

    .doc-no-cover.doc-intro {
        margin-right: 0
    }

    .doc-intro p:last-child {
        margin-bottom: 0
    }

    .doc-intro-module {
        font-size: 14px;
        margin-top: 40px
    }

    .doc-intro-module h3 {
        font-size: 14px;
        font-weight: bold;
        margin: 0 0 20px 0
    }

    .doc-intro-module p {
        margin-bottom: 1em
    }

    .doc-toc {
        margin: 0;
        font-size: 16px;
        position: relative;
        border-left: 3px solid
    }

    .doc-toc a {
        text-decoration: none;
        color: inherit
    }

    .doc-toc:before {
        content: 'Contents';
        font-size: 15px;
        line-height: 16px;
        font-weight: 400;
        color: #757575
    }

    .doc-toc ul,
    .doc-toc:before {
        padding-left: 16px
    }

    .doc-toc ul {
        list-style: none;
        margin: 0
    }

    .doc-toc ul li {
        margin: 1em 0
    }

    .doc-toc ul li:first-child {
        margin-top: 0
    }

    .doc-toc ul li:last-child {
        margin-bottom: 0
    }

    .doc-toc ul li ul {
        margin: 1em 0;
        font-size: 0.83em
    }

    .doc-toc>ul {
        margin-top: 1em
    }

    @media(min-width:480px) {
        .doc-toc {
            font-size: 17px;
            border-left-width: 4px
        }

        .doc-toc ul,
        .doc-toc:before {
            padding-left: 18px
        }
    }

    @media(min-width:840px) {
        .doc-toc {
            font-size: 18px;
            border-left-width: 5px;
            margin-right: 400px
        }

        .doc-toc ul,
        .doc-toc:before {
            padding-left: 20px
        }
    }

    .doc-no-cover.doc-toc {
        margin-right: 0
    }

    .doc-cover {
        display: none
    }

    @media(min-width:840px) {
        .doc-cover {
            display: block;
            position: absolute;
            right: 8px;
            top: 80px
        }

        .doc-cover img {
            width: 360px;
            height: 360px
        }
    }

    .doc-chapter {
        margin: 20px 0 0 0;
        padding: 0 0 80px 0
    }

    .doc-chapter-title {
        margin-top: 2em !important;
        position: relative;
        padding: 80px 0 0 0;
        border-top: 1px solid rgba(0, 0, 0, 0.12)
    }

    .mdui-theme-layout-dark.doc-chapter-title {
        border-top: 1px solid rgba(255, 255, 255, 0.12)
    }

    .doc-chapter-title.doc-anchor {
        position: absolute;
        top: -40px
    }

    .doc-chapter-title-first {
        border-top: none !important;
        margin-top: 0 !important
    }

    .doc-article-title {
        position: relative;
        margin: 84px 0 30px 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important
    }

    .doc-article-title.doc-anchor {
        position: absolute;
        top: -100px
    }

    .doc-footer-nav {
        height: 96px
    }

    .doc-footer-nav-left,
    .doc-footer-nav-right {
        height: 96px
    }

    .doc-footer-nav-left {
        text-align: left
    }

    .doc-footer-nav-right {
        text-align: right
    }

    .doc-footer-nav-text {
        box-sizing: border-box;
        display: inline-block;
        font-size: 20px;
        font-weight: 500;
        -webkit-font-smoothing: antialiased;
        height: 100%;
        line-height: 24px;
        padding-top: 24px;
        width: 100%
    }

    .doc-footer-nav-text.mdui-icon {
        padding-top: 23px;
        width: 24px
    }

    .doc-footer-nav-text.doc-footer-nav-direction {
        font-size: 15px;
        line-height: 18px;
        margin-bottom: 1px;
        opacity: 0.55
    }

    .doc-footer-nav-left.mdui-icon {
        float: left;
        margin-right: 10px
    }

    .doc-footer-nav-right.mdui-icon {
        float: right;
        margin-left: 10px
    }

    .doc-footer-nav-left.doc-footer-nav-chapter {
        margin-left: 34px
    }

    .doc-footer-nav-right.doc-footer-nav-chapter {
        margin-right: 34px
    }

    .mdui-theme-layout-dark.doc-footer-nav {
        background-color: #212121 !important
    }

    .mdui-theme-layout-dark.doc-footer-nav-left,
    .mdui-theme-layout-dark.doc-footer-nav-right {
        background-color: #212121 !important
    }

    .mdui-theme-layout-dark.doc-footer-nav-text {
        color: #fff
    }

    .doc-example {
        position: relative;
        margin-bottom: 2.6em
    }

    .doc-example-demo {
        padding: 0;
        -webkit-transition: padding.3s;
        -moz-transition: padding.3s;
        -ms-transition: padding.3s;
        -o-transition: padding.3s;
        transition: padding.3s
    }

    .doc-example-demo:after {
        clear: both;
        display: table;
        content: ' '
    }

    .doc-example-demo-label {
        display: none;
        box-sizing: border-box;
        width: 100%;
        line-height: 1;
        padding: 9px 14px;
        color: rgba(0, 0, 0, 0.38);
        font-weight: 700;
        font-size: 12px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 3px 3px 0 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .mdui-theme-layout-dark.doc-example-demo-label {
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.5)
    }

    .doc-example-code {
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-top: none;
        border-radius: 0 0 3px 3px;
        padding: 14px !important;
        margin: 0;
        display: none
    }

    .mdui-theme-layout-dark.doc-example-code {
        border: 1px solid rgba(255, 255, 255, 0.12)
    }

    .doc-example-code code {
        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
        line-height: 1.7;
        padding: 0
    }

    .doc-example-code-required {
        padding: 2px;
        background-color: #E8EAF6
    }

    .doc-example-code-required* {
        color: #FF4081
    }

    .doc-example-code a {
        text-decoration: none
    }

    .doc-example-tools {
        position: absolute;
        right: 0;
        top: -20px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: top.3s;
        -moz-transition: top.3s;
        -ms-transition: top.3s;
        -o-transition: top.3s;
        transition: top.3s
    }

    .doc-example-tools a {
        color: rgba(0, 0, 0, 0.54);
        margin: 0 8px
    }

    .doc-example-tools a:hover {
        color: rgba(0, 0, 0, 0.87)
    }

    .mdui-theme-layout-dark.doc-example-tools a {
        color: rgba(255, 255, 255, 0.7)
    }

    .mdui-theme-layout-dark.doc-example-tools a:hover {
        color: #ffffff
    }

    .doc-example-showcode.doc-example-demo {
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-top: none;
        padding: 14px
    }

    .mdui-theme-layout-dark.doc-example-showcode.doc-example-demo {
        border: 1px solid rgba(255, 255, 255, 0.12)
    }

    .doc-example-showcode.doc-example-demo-label {
        display: block
    }

    .doc-example-showcode.doc-example-code {
        display: block
    }

    .doc-example-showcode.doc-example-tools {
        top: 4px
    }

    .doc-color-circle {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%
    }
</style>