dokuwiki-template-sprintdoc-modified/css/area_nav-metabox.less

#meta-box {
    position: relative;
    z-index: 10;
    float: right;
    display: inline-block;
    max-width: 40%;
    margin-top: 2px;

    @media @screen_max-md {
        position: relative;
        top: -.5rem;
        right: auto;
        float: none;
        display: block;
        max-width: 100%;
    }


    .tab-container {
        @media @screen_max-md{
            width: 100%;
        }
    }

    .box-content {
        position: relative;
        height: 0;
        overflow-y: visible;
    }

    ul.meta-tabs {
        list-style: none;
        line-height: 160%;
        white-space: nowrap;
        margin: 0;
        padding: 0;

        @media @screen_max-md {
            background-color: #fff;
        }

        &::before,
        &::after {
            display: table;
            content: " ";
            box-sizing: border-box;
            clear: both;
        }

        > li:first-child {
            > a {
                margin-left: 0;
            }
        }

        > li {
            margin: 0 0 -1px;
            position: relative;
            display: inline-block;

            > a {
                cursor: pointer;
                position: relative;
                display: block;
                background-color: @color-site-bg;
                border: 1px solid @color-border;
                border-radius: @fix_border-radius @fix_border-radius 0 0;
                color: @color-nav;
                font-size: @font-size-small;
                line-height: 1.42857143;
                padding: .3em 1rem .1em;
                margin-left: 4px;
                transition: @transition color, @transition background-color, @transition border-color;

                @media @screen_max-md{
                    padding: .2em .3rem .1em;
                    margin-left: 0;
                }

                @media @screen_max-xs {
                    min-height: 30px;
                }

                * {
                    cursor: pointer;
                    color: inherit;
                }

                .prefix {
                    position: relative;
                    transition: @transition color;
                    font-size: @font-size-small;
                }

                &:hover,
                &:focus,
                &:active {
                    background-color: @color-content-bg;
                    border-color: @color-link;
                    color: @color-link;
                    text-decoration: none;

                    .prefix {
                        color: inherit;
                    }
                }
            }

            &.active {
                z-index: 1;

                > a {
                    cursor: default;
                    tab-index: -1;
                    background-color: @color-content-bg;
                    border-color: @color-link;
                    border-bottom-color: @color-content-bg;
                    color: @color-link;

                    @media @screen_max-md {
                        top: -1px;
                    }
                }
            }
        }
    }

    .meta-content {
        .tab-pane {
            position: absolute;
            display: none;
            width: 100%;
            background-color: @color-content-bg;
            border: 1px solid @color-link;
            border-radius: 0 0 @fix_border-radius @fix_border-radius;

            @media @screen_min-xxlg {
                top: -1px;
            }

            @media @screen_max-xxlg {
                top: 0;
            }

            @media @screen_max-xlg {
                top: 0;
            }

            @media @screen_max-lg {
                top: -1px;
            }

            @media @screen_max-md {
                top: -2px;
            }

            &.active {
                display: block;
            }

            > 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 {
                        margin-left: 0;
                        padding-left: 1em;
                    }
                }
            }

            #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 {
                            position: absolute;
                            top: .6em;
                            content: "";
                            display: inline-block;
                            width: 4px;
                            height: 4px;
                            background-color: #ccc;
                            overflow: hidden;
                            left: 0;
                        }
                    }
                }

                > div > ul.toc {
                    padding: 0;
                }
            }
        }
    }

    + .msg-area + a {
        clear: right;
        margin-top: 20px;
    }

    @media @screen_max-md {
        .tab-container {
            display: block;
        }

        ul.meta-tabs {
            > li > a {
                margin-left: 0;
            }
        }

        .meta-content {
            clear: both;
        }
    }
}