swan-docs/themes/docs/source/css/article.css

智能小程序文档

.m-doc-content-layout {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 250px;
    top: 0;
    overflow: auto;
    background-color: #fafafa;
}

.m-doc-content-wrap {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 60px;
    left: 0;
    padding: 0 95px;
}

/* 右下菜单样式 */
.m-doc-menu-wrapper {
    position: fixed;
    right: 20px;
    bottom: 30px;
}

.m-doc-menu-wrapper a {
    display: block;
    width: 50px;
    height: 50px;
    background-size: 100%;
}

.m-doc-menu-wrapper .m-doc-menu-toc {
    background-image: url(../img/toc.png);
}

.m-doc-menu-wrapper .m-doc-menu-toc-close {
    background-image: url(../img/toc_close.png);
}

.m-doc-menu-wrapper .m-doc-menu-top {
    pointer-events: none;
    visibility: hidden;
    background-image: url(../img/back_top.png);
}

.m-doc-menu-wrapper .m-doc-menu-top-show {
    visibility: visible;
    pointer-events: auto;
}

/* 正文样式 */
article {
    max-width: 980px;
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 14px;
    line-height: 26px;
    background-color: #fafafa;
    /* overflow-y: auto; */
}

article * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

article img {
    max-width: 100%;
    max-height: 550px;
    margin-top: 22px;
    border: 1px solid #E6E6E6;
    box-sizing: border-box;
}

.article-title {
    position: relative;
}

.article-edit-link {
    position: absolute;
    top: 5px;
    right: 0;
}

.article-edit-link:link {
    text-decoration: none;
}

.article-meta {
    margin-bottom: 20px;
    color: #999;
    font-size: 12px;
}

.article-tags,
.article-meta time {
    margin-left: 20px;
}

.article-readmore {
    color: #fff;
    background: #80BBDD;
    border-radius: 16px;
    padding: 8px;
}

.article-readmore:hover {
    background: #398EBE;
    color: #fff;
}

.article-pagination {
    height: 30px;
}

.article-prev {
    float: left;
}

.article-next {
    float: right;
}

.article-license {
    text-align: center;
    margin: 20px;
}

article h1 {
    font-size: 28px;
    color: #000;
    line-height: 28px;
    padding: 8px 0 50px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px;
}

article h2 {
    font-size: 24px;
    margin: 40px 0 20px;
    color: #222;
    padding-bottom: 9px;
    margin: 40px 0 20px;
}

article h2 .m-doc-content-h2-toggle {
    width: 22px;
    height: 22px;
    background-image: url(../img/h2_arrow.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: 1px;
    background-size: 100%;
    transform: rotate(180deg);
    -webkite-transform: rotate(180deg);
}

.m-doc-content-hide {
    display: none !important;
}

article h2 .m-doc-content-h2-toggle-close {
    transform: rotate(0deg);
    -webkite-transform: rotate(0deg);
}

article h2 .m-doc-content-h2-toggle:hover {
    cursor: pointer;
}

article h3 {
    font-size: 20px;
}

article h4 {
    font-size: 16px;
}

article h5 {
    font-size: 14px;
}

article h6 {
    font-size: 14px;
}

article h1:first-child {
    margin-top: 0;
}

article h2:first-child {
    margin-top: 0;
}

article h3:first-child {
    margin-top: 0;
}

article h4:first-child {
    margin-top: 0;
}

article h5:first-child {
    margin-top: 0;
}

article h6:first-child {
    margin-top: 0;
}

article a {
    text-decoration: none;
    color: #38f;
}

article a:link,
article a:visited {
    color: #38f;
    text-decoration: none;
}

article a:link:hover {
    text-decoration: underline;
}

article h1:hover a.anchor,
article h2:hover a.anchor,
article h3:hover a.anchor,
article h4:hover a.anchor,
article h5:hover a.anchor,
article h6:hover a.anchor {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;
    text-decoration: none;
}

article ul {
    padding-left: 15px;
}

article p,
article blockquote,
article dl,
article ul,
article ol,
article table,
article pre {
    margin: 15px 0;
}

article p {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}

article ul :first-child,
article ol :first-child {
    margin-top: 0;
}

article dl {
    padding: 0;
}

article dl dt {
    font-size: 14px;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px;
}

article dl dt:first-child {
    padding: 0;
}

article dl dt > :first-child {
    margin-top: 0;
}

article dl dt > :last-child {
    margin-bottom: 0;
}

article dl dd {
    margin: 0 0 15px;
    padding: 0 15px;
}

article dl dd > :first-child {
    margin-top: 0;
}

article dl dd > :last-child {
    margin-bottom: 0;
}

article blockquote {
    color: #333;
}

article blockquote > :first-child {
    margin-top: 0;
}

article blockquote > :last-child {
    margin-bottom: 0;
}

article .figure {
    margin: 15px 0;
}

article .figure img {
    max-width: 100%;
    display: block;
}

article .caption {
    margin: 5px 0;
    padding: 0 10px;
    font-size: 12px;
    color: #777;
    background: -webkit-linear-gradient(left, #f1f1f1, #fff, #fff, #fff);
    background: linear-gradient(left, #f1f1f1, #fff, #fff, #fff);
}

article tt {
    margin: 0 2px;
    padding: 2px 4px;
    /* background-color: #f2f4f6; */
}

article code {
    margin: 0 2px;
    padding: 2px 7px;
}

article pre code {
    margin: 0;
    padding: 0;
    white-space: pre;
    border: none;
    background: transparent;
}

article pre {
    border: 1px solid #e4e4e4;
    font-size: 13px;
    line-height: 26px;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 3px;
}

article pre code,
article pre tt {
    background-color: transparent;
    border: none;
}

article sup {
    font-size: 8px;
    vertical-align: super;
    line-height: 0;
}

/* 表格样式 */
article table {
    width: 100%;
    padding: 0;
    border-collapse: collapse;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

article thead tr {
    background-color: #f0f1f2;
}

article tr {
    border-top: 1px solid #e6e6e6;
    margin: 0;
    padding: 0;
}

article table th {
    border: 1px solid #e6e6e6;
    margin: 0;
    padding: 6px 13px;
    white-space: nowrap;
}

article table td {
    border: 1px solid #e6e6e6;
    margin: 0;
    padding: 6px 13px;
}

article table th :first-child,
article table td :first-child {
    margin-top: 0;
}

article table th :last-child,
article table td :last-child {
    margin-bottom: 0;
}

@supports ( -webkit-text-emphasis: filled circle ) {
    article em {
        -webkit-text-emphasis: filled circle;
        -webkit-text-emphasis-position: under;
        font-style: normal;
    }
}

article hr {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
    border: 0 none;
    color: #ccc;
    height: 4px;
    padding: 0;
}

/* 页面目录样式 */
.toc-wrap {
    position: fixed;
    display: none;
    bottom: 150px;
    right: 23px;
    width: 230px;
    padding-right: 10px;
    font-size: 14px;
    line-height: 14px;
    background: #fff;
    z-index: 1000;
    overflow: auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}

.toc-wrap-show {
    display: block;
}

.toc-list-wrap {
    margin: 30px 0 30px 20px;
}

.toc a:link,
.toc a:visited {
    color: #333;
    box-sizing: border-box;
    display: block;
    text-decoration: none;
    transition-timing-function: ease;
    transition-duration: .2s;
    transition-property: color;
    cursor: pointer;
    height: 34px;
    line-height: 34px;
    border-left: 2px solid #EBF4FF;
}

.toc a:hover {
    color: #8aadff;
}

.toc-level-2 > a {
    padding-left: 15px;
}

.toc-level-2-on > a {
    color: #38f !important;
    border-left: 2px solid #38f !important;
}

.toc-level-3 > a {
    padding-left: 30px;
}

.toc-level-3-on > a {
    color: #38f !important;
    border-left: 2px solid #38f !important;
}

.toc-top {
    font-size: 12px;
    color: #38f;
    display: inline-block;
}

.toc-top:focus, .toc-top:hover {
    text-decoration: none;
    color: #38f;
}

.toc-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

article ul {
    list-style: disc;
}

article thead tr {
    background-color: #F0F1F2;
}

/* 底部链接 */
.m-doc-bottomPage-wrapper {
    border-top: 1px solid #ddd;
}

.m-doc-bottomPage-wrapper a {
    font-size: 20px;
    color: #666 !important;
    height: 20px;
    line-height: 20px;
    margin-top: 40px;
    background-repeat: no-repeat;
    background-size: 7px 13px;
}

.m-doc-bottomPage-wrapper a:hover {
    text-decoration: none !important;
}

.m-doc-bottomPage-wrapper .m-doc-bottomPage-left {
    float: left;
    background-image: url(../img/prev.png);
    background-position: 0 center;
    padding-left: 18px;
    background-size: 11px 15px;
}

.m-doc-bottomPage-wrapper .m-doc-bottomPage-left:hover {
    color: #8AADFF !important;
    background-image: url(../img/prev_hover.png);
}

.m-doc-bottomPage-wrapper .m-doc-bottomPage-right:hover {
    color: #8AADFF !important;
    background-image: url(../img/next_hover.png);
}

.m-doc-bottomPage-wrapper .m-doc-bottomPage-right {
    float: right;
    background-image: url(../img/next.png);
    background-position: right center;
    padding-right: 18px;
    background-size: 11px 15px;
}

/* article 移动端适配 */
@media only screen and (max-width: 768px) {
    .m-doc-menu-wrapper {
        display: none;
    }

    .m-doc-content-layout {
        position: absolute;
        padding-top: 60px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow-y: auto;
    }

    .m-doc-content-wrap {
        position: static;
        padding: 0 40px;
    }

    article table th {
        font-size: 10px;
        padding: 6px 5px;
        word-wrap: break-word;
        word-break: break-all;
    }

    article table td {
        font-size: 10px;
        padding: 6px 5px;
        word-wrap: break-word;
        word-break: break-all;
    }

    .toc-wrap {
        display: none;
    }
}

/* article 移动端适配 */
@media only screen and (min-width: 1590px) {
    .m-doc-menu-wrapper .m-doc-menu-toc {
        display: none;
    }

    .m-doc-content-wrap {
        max-width: 1195px;
        margin: 0 auto;
        padding: 0;
    }

    article {
        max-width: 900px;
    }

    .toc-wrap {
        position: absolute;
        right: 0;
        top: 50px;
        background: none;
        box-shadow: none;
        bottom: auto;
    }

    .top-wrap-fixed {
        position: fixed;
        top: 160px;
        display: block;
    }
}

.article-search-result {

}

.article-search-result ul, .article-search-result li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-search-result li {
    padding-top: 30px;
}

.article-search-result li .search-result {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.article-search-result {
    display: none;
}

.article-search-result h1 {
    padding-bottom: 20px;
    margin-bottom: 0;
    color: #333;
}

.article-search-result em {
    color: #38f;
    -webkit-text-emphasis: none;
}

.article-search-result h1 em {
    margin: 0 5px;
}

.article-search-result h1.empty-title {
    color: #999;
    border-bottom: none;
    padding-top: 200px;
    text-align: center;
}