#meta-box { .tab-container { display: table; } .box-content { position: relative; height: 0; overflow-y: visible; } ul.meta-tabs { //border-bottom: 1px solid @color-border; //background-color: @background_page-header; margin: 0; padding: 0; list-style: none; &::before, &::after { display: table; content: " "; box-sizing: border-box; clear: both; } > li:first-child { > a { margin-left: 0; } } > li:last-child { > a { margin-right: -1px; } } > 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: .78rem; line-height: 1.42857143; padding: .3em 1rem .1em; margin-left: 4px; transition: @transition color, @transition background-color, @transition border-color; * { cursor: pointer; } .prefix { font-size: .78rem; color: @color-nav; position: relative; transition: @transition color; } .num { position: absolute; right: -.8rem; top: -.2rem; background-color: @color-border; border-radius: @fix_border-radius; color: @color-nav; font-size: .56rem; font-weight: 400; text-align: center; line-height: 1; padding: .2em .2rem .1em; transition: @transition color, @transition background-color; } &:hover, &:focus, &:active { background-color: @color-content-bg; border-color: @color-link; color: @color-link; text-decoration: none; .prefix { color: inherit; } .num { 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; } } } } .meta-content { .tab-pane { position: absolute; top: 0; display: none; width: 100%; background-color: @color-content-bg; border: 1px solid @color-link; border-top-color: transparent; border-radius: 0 0 @fix_border-radius @fix_border-radius; &::before { content: ''; position: absolute; top: -1px; left: 0; z-index: 0; width: 100%; height: 1px; background-color: @color-link; } &.active { display: block; } > div { padding: .8rem .5rem .5rem; 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: .78rem; padding-left: .5em; a { font-size: .78rem; display: inline-block; padding-left: 10px; position: relative; } li { } div.li { position: relative; padding: .15em 0; &::before { position: absolute; top: .3em; 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; } }