/* 调整一下左侧树的样式 */ body{font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;} #main {padding-bottom: 100px;} #main h2 {font-size: 1.6rem;} #main h3 {font-size: 1.25rem;} .main-box .markdown-section{ /* padding: 38px 20px; */ max-width: 100%; /* margin-left: 12%; */} .main-box .markdown-section h4{font-size: 1rem;} /* ------- 多设备适配 start ------- */ .sub-nav-draw-box{ display: none; } body{ --doc-left-width: 300px; --doc-context-width: 1000px; --doc-right-width: 300px; } /* 大于 1100px,就显示左中右结构 */ @media screen and (min-width: 1100px) { .doc-right-bj-box{ display: block; } .main-box .content{left: 0;} .main-box .markdown-section{width: var(--doc-context-width); padding: 38px 20px; border: 0px green solid;} .main-box .doc-right-bj-box{left: calc(50% + (var(--doc-context-width) / 2) + 10px);} .main-box .sidebar-nav>ul>li>ul>li>.app-sub-sidebar{ position: fixed; top: 120px; left: calc(50% + (var(--doc-context-width) / 2) + 10px); width: var(--doc-right-width) !important; border: 0px #000 solid; line-height: 1.4em; width: calc(300px - 25px); max-height: 50vh; overflow: auto; } .main-box .sidebar{width: var(--doc-left-width);} .main-box .sidebar-nav>ul>li>ul>li>.app-sub-sidebar::-webkit-scrollbar{ width: 0px; } .main-box .sidebar-nav>ul>li>ul>li>.app-sub-sidebar li.active a{ color: #42B983; } .main-box .sidebar-nav>ul>li>ul>li>.app-sub-sidebar li a{ font-size: 12px; color: #888; } /* .main-box .app-sub-sidebar{display: none;} */ } /* 小于 1100px时 */ @media screen and (max-width: 1100px) { .doc-right-bj-box{ display: none; } } /* 大于 1600px */ @media screen and (min-width: 1600px) { body{ --doc-left-width: 300px; --doc-context-width: 1000px; --doc-right-width: 300px; } } /* 小于 1100px - 1600px 之间 */ @media screen and (max-width: 1600px) { body{ --doc-left-width: 200px; --doc-context-width: calc( 100vw - 400px - 50px); --doc-right-width: calc(200px - 20px); } } /* 小于 1100px时 */ @media screen and (max-width: 1100px) { .doc-right-bj-box{ display: none; } } /* 小于 800px时 */ /* @media screen and (max-width: 800px) { .doc-right-bj-box{ display: none; } } */ /* 媒体查询 */ @media screen and (max-width: 800px) { .nav-left .logo-box .logo-text, .nav-left .logo-box sub{display: none;} /* .main-box .markdown-section{max-width: 1000px; margin-left: auto; margin-top: 40px;} */ } /* 手机端不显示广告,和一些其它东西 */ @media (max-width: 576px) {.wwads-cn,.p-none{display:none!important}} /* ------- 多设备适配 end ------- */ /* 右侧盒子 */ .doc-right-bj-box{ width: var(--doc-right-width); padding: 10px; position: fixed; margin-top: 10px; top: 60px; border: 0px #000 solid; font-size: 12px; } .doc-right-bj-box-title{ font-size: 14px; color: #888; padding-bottom: 8px; border-bottom: 1px #aaa solid; } .doc-right-more-item{ position: absolute; border: 0px #000 solid; color: #000; width: 100%;} /* ------- 头部样式 ------- */ .doc-header{position: fixed; top: 0; z-index: 1000; width: 100%; height: 60px; line-height: 60px;} .doc-header{/* background-color: hsla(0,0%,100%,0.97); */ background-color: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 3px rgba(26,26,26,0.1);} /* 左边导航 */ .nav-left{display: inline-block; float: left;} .logo-box {display: inline-block; cursor: pointer; color: #000; padding-left: 24px; height: 60px; line-height: 60px;} .logo-box img {width: 50px; height: 50px; vertical-align: middle; position: relative; top: -1px; margin-right: 5px;} .logo-box .logo-text {display: inline-block; margin: 0; padding: 0; color: #000; vertical-align: middle; font-size: 26px;font-weight: 500;} .logo-box sub{margin-left: 5px; color: #666;} /* 右边导航 */ .doc-header .nav-right{margin: 0; float: right; padding-right: 3em; margin-right: 20px !important;} .doc-header .nav-right>*{padding: 0px; margin: 0 10px;} .doc-header .nav-right>*:last-child{position: relative; z-index: 1002;} .doc-header .nav-right>select{border-color: #999; color: #666; outline: 0; cursor: pointer; transition: all 0.2s; background-color: #FFF; border-width: 1px; outline: 0;} .doc-header .nav-right>select:hover{box-shadow: 0 0 10px #aaa;} .github-corner{z-index: 1001 !important;} .doc-header .nav-right .wzi{font-size: 14px; line-height: 61px; transition: color 0.2s; padding-bottom: 4px;} .doc-header .nav-right .wzi:hover{border-bottom: 2px var(--a-color) solid;} .nav-right a{color: #34495E;} /* 搜索框 */ .sear-box{display: inline-block; width: 180px; margin-right: 20px; line-height: 26px; text-align: left;} .sear-box{/* position: fixed; */ } .sear-box .search{margin-bottom: 0px; padding: 0; border: 0;} .results-panel{border: 1px #aaa solid; border-radius: 2px; padding: 10px; max-height: 60vh; overflow: auto; position: absolute; background-color: #FFF; width: 266px;width: 316px;} .sear-box .search input{border: 1px solid #e3e3e3; color: #345; border-radius: 15px; line-height: 30px; padding-left: 30px; transition: all 0.2s;} .sear-box .search input{background: #fff url(./search-icon.svg) 10px 8px no-repeat; background-size: 14px;} .clear-button{display: none !important;} /* 工具栏超链接 展开、收缩div */ .zk-box{display: inline-block;} /* 外层盒 */ .zk-box .zk-context{max-height: 0px; position: absolute; overflow: hidden;} .zk-box:hover .zk-context{max-height: 300px;} /* 内层盒 */ .zk-context>div{padding: 1em 0.5em 1em 1em; border: 1px #ccc solid; border-radius: 2px; background-color: #FFF; font-size: 12px; transition: all 0.2s; opacity: 0;} .zk-box:hover .zk-context>div{opacity: 1;} /* 小链接 */ .zk-box .zk-context a{font-size: 14px; display: block; line-height: 32px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .zk-box .zk-context a{text-align: left; padding: 0 1.5em 0 1em;} .zk-box .zk-context .zk-fengexian{border-bottom: 1px #d9d9d9 solid; margin: 10px 0;} /* 下三角小图标 */ .zk-icon{display: inline-block; width: 0px; height: 0px; position: relative;top: 3px; margin-left: 4px;} .zk-icon{border-style: solid; border-width: 5px; border-color: #aaa transparent transparent transparent; } /* 版本选择按钮 */ .select-version{background-color: transparent !important;} /* ------- 调整一下左侧树的字体样式 ------- */ .main-box .sidebar{padding-top: 25px; margin-top: 60px;} .sidebar .sidebar-nav>ul>li>p{/* font-size: 1.2em; */ margin-top: 10px;} .sidebar .sidebar-nav>ul>li> strong{/* font-size: 1.2em; */ margin-top: 10px;} /* .sidebar ul li a{color: #222;} */ .sidebar .sidebar-nav>ul>li>ul>li>a{/* color: #222; */font-size: 14px; /* font-weight: 700; */} .main-box .sidebar-nav ul li{margin-top: 0; margin-bottom: 0;} .main-box .sidebar ul li a{color: #00323c;} /* 做到悬浮出现下划线的效果 */ .main-box .sidebar>.sidebar-nav>ul{padding-left: 6px;} .main-box .sidebar li a:hover{color: #42b983;} /* .main-box .sidebar li{white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 5px 0;} .main-box .sidebar li a{display: inline; line-height: 30px; padding: 5px 0 2px;} .main-box .sidebar li a:hover{text-decoration: none; color: #42b983; border-bottom: 1px #42b983 solid;} .main-box .sidebar li.active>a{border: 0px;} .main-box .sidebar li.active>a:after{content: ''; position: absolute; height: 30px; right: 0; border-right: 3px #42b983 solid;} */ .sidebar .sidebar-nav>ul>li>ul>li.active-rep>a{ color: #42B983; font-weight: 700; } /* .main-box .sidebar .app-sub-sidebar li:before{float: none;} */ /* ============== code代码样式优化 ================ */ .main-box .markdown-section code, .main-box .markdown-section pre{background-color: rgba(0, 0, 0, 0.04);} /* 背景变黑 */ .main-box [data-lang]{padding: 0px !important; border-radius: 2px;overflow-x: auto; overflow-y: hidden;} .main-box [v-pre] code{border: 0px red solid; border-radius: 0px; /* background-color: #282828; */ background-color: #191919; color: #FFF;} .main-box [v-pre] code{padding: 1.5em 1.3em; margin-left: 40px !important;} /* .main-box h2{margin-top: 70px;} */ /* 代码行号盒子样式 */ .code-line-box {list-style-type: none; border-right: 1px solid #000; position: absolute; top: 0; left: 0; width: 40px; user-select: none;} .code-line-box {padding: calc(1.5em + 1px) 0px !important; padding-bottom: calc(1.5em + 20px) !important; margin: 0px !important;} .code-line-box {line-height: inherit !important; background-color: #191919; color: #aaa;font-weight: 400;font-size: 0.85em;text-align: center;} /* xml语言样式优化 */ /* .lang-xml .token.comment{color: #CDAB53;} */ .lang-xml .token.tag *{color: #db2d20;} .lang-xml .token.attr-value{color: #A6E22E;} /* html语言样式优化 */ .lang-html .token.comment{color: #CDAB53;} .lang-html .token.tag *{color: #db2d20;} .lang-html .token.tag .attr-name, .lang-html .token.tag .attr-name *{color: #A6E22E; opacity: 0.9;} .lang-html .token.tag .attr-value, .lang-html .token.tag .attr-value *{color: #E6DB74; opacity: 0.9;} /* java语言样式优化 */ .main-box .lang-java{color: #01a252 !important;; opacity: 1;} .lang-java .token.keyword{color: #db2d20;} .lang-java .token.namespace,.lang-java .token.namespace *{color: #01A252; opacity: 1;} .lang-java .token.class-name,.lang-java .cm-variable{color: #55b5db; opacity: 1;} /* .lang-java .token.comment{color: #CDAB53;} */ .lang-java .token.annotation.punctuation{color: #ddd;} .lang-java .token.punctuation{color: #ddd;} /* cmd语言样式优化 */ .main-box .lang-cmd{color: #01A252 !important; opacity: 1;} /* url语言样式优化 */ .main-box .lang-url{color: #E96917 !important; opacity: 1;} /* js语言样式优化 */ .main-box .lang-js{color: #01a252 !important;} /* .lang-js .token.comment{color: #CDAB53;} */ /* .lang-js .token.string{color: #fded02;} */ .lang-js .token.string{color: #ddd;} .lang-js .token.punctuation{color: #ddd;} /* yaml 和 properties 语言优化 */ .lang-yaml .token.punctuation{color: #eee;} .lang-properties .token.attr-name{color: #22a2c9;} /* ------- markdown 内容样式优化 ------- */ /* GitHub折线图最大宽度 */ [alt=github-chart]{max-width: 897px;} /* 大屏幕时,某些图片限制一下宽度 */ @media screen and (min-width: 800px) { [title=s-w],[title=s-w-sh]{max-width: 80%;} } [title=s-w-sh]{display: inline-block; border: 1px #eee solid;} /* 公众号table */ .gzh-table{ /* table-layout:fixed !important; */} /* .gzh-table,.gzh-table tr,.gzh-table td{display: block !important;} */ /* .gzh-table tbody{display: block !important; width: 100% !important;} */ #main .gzh-table tr{background-color: #FFF;} .gzh-table td{padding: 20px !important; width: 20%; border: 0;} .gzh-table td b{display: block; margin-bottom: 10px; } /* tab选项卡优化 */ /* .docsify-tabs--classic{background-color: rgba(255, 255, 255, 0.2);} */ .docsify-tabs__tab{outline: 0; cursor: pointer;} .docsify-tabs--classic .docsify-tabs__tab--active{box-shadow: 0 0 0;} /* tab卡片插件样式优化 */ .main-box{ --docsifytabs-border-color: #ddd; --docsifytabs-tab-color: #777; } /* 调整表格的响应式 */ #main table{margin-left: 0px;} @media screen and (min-width: 800px) { #main table tr th{min-width: 100px;} } /* 提示框加上灰色背景 */ .main-box .markdown-section blockquote{padding: 1px 24px 1px 30px; background-color: #f8f8f8;} /* 行级代码样式 */ blockquote code {font-weight: 400;} /* 赞助列表 */ .zanzhu-box{margin-top: -10px;} .zanzhu-box table tr td:nth-child(2){color: red;} #main .zanzhu-box table tr td:first-child a{border-color: rgba(0,0,0,0); color: inherit;} #main .zanzhu-box table tr td:first-child a:hover{border-color: var(--a-hover-color); color: var(--a-hover-color);} /* 展开和收起 */ #main .zanzhu-box{/* height: 500px; */ overflow-y: hidden; transition: all 1.5s;} #main .zanzhu-box table{display: table;} .zhankai-btn-box{margin-top: 10px;} .zk-btn--1,.zk-btn--2{cursor: pointer;} .zk-btn--2{display: none;} /* 角标位置修复 */ .badge-box a:nth-child(-n+2) img{position: relative; top: 1px;} body { --a-color: #01a252; --a-hover-color: #0969da; } /* 超链接样式 */ #main *:not(h1,h2,h3,h4,h5,h6) a{font-weight: 400; text-decoration: none; font-family: "思源黑体";} #main *:not(h1,h2,h3,h4,h5,h6) a{color: var(--a-color); border-bottom: 1px var(--a-color) solid;} #main *:not(h1,h2,h3,h4,h5,h6) a:hover{color: var(--a-hover-color); border-bottom: 1px var(--a-hover-color) solid;} #main .un-dec-a-pre+p a, #main p[align=center] a{border-bottom:0px;} /* toc目录树 */ .toc-box>li{margin-bottom: 15px;} .toc-box .toc-h2{list-style-type: none; font-size: 18px; margin-top: 20px;} .toc-box .toc-h3,.toc-box .toc-h4{margin-left: 1em;} .toc-box .toc-h5,.toc-box .toc-h6{margin-left: 2em;} #main .toc-box .toc-h2 a span{color: #34495e;} #main .toc-box a{border-color: rgba(0,0,0,0); transition: 0s;} #main .toc-box a span{color: inherit;} /* 加载图片的按钮 */ .show-img{ background-color: #FFF; padding: 8px 15px; border: 1px #42b983 solid; color: #42b983; cursor: pointer; border-radius: 2px; transition: all 0.2s; } .show-img:hover{ background-color: #eaf6eb; } .show-to-img{cursor: pointer;} /* 导航栏悬浮时出现下滑条条 */ /* .doc-header .nav-right .wzi::after { content: ''; width: 0%; float: left; display: inline-block; text-align: center; margin-top: -15px; border-bottom: 2px var(--a-color) solid; transition: all 0.2s; } .doc-header .nav-right .wzi:hover::after {width: 100%;} */ /* 保证点开图片时在最上面 */ .medium-zoom-image.medium-zoom-image--opened{ z-index: 10000; } /* ------------- 答题按钮 ------------- */ #main .dt-btn,#main .case-btn{ background-color: #e7ecf3; color: #385481; display: inline-block; border: 1px #d7dce3 solid !important; border-radius: 1px; /* border-bottom-width: 0px !important; */ margin-top: 10px; width: 100%; padding: 8px 14px; font-size: 14px; transition: all 0.15s; text-decoration: none !important; font-weight: 400; /* 背景 */ background-image: url(icon/dati.svg); background-repeat: no-repeat; background-size: 20px 20px; background-position: 1em 12px; text-indent: 2em; } /* 代码示例按钮 */ #main .case-btn{ background-color: #feedeb; color: #dd4949; border: 1px #decdcb solid !important; background-size: 18px 18px; background-image: url(icon/code.svg); } #main .case-btn.case-btn-video{ background-color: #ECF5FF; color: #1979DA; border: 1px #49A9DA solid !important; background-image: url(icon/video.svg); } #main .dt-btn{display: none;} /* ------------- 背景色相关 ------------- */ /* 侧边栏需要透明 */ .sidebar-toggle{background-color: transparent !important;} .sidebar{background-color: transparent !important;} /* 变色的动画 */ .doc-header,body{transition: all 0.5s !important;} /* 调色按钮 */ .theme-btn{width: 25px; height: 25px; line-height: 60px; vertical-align: middle; position: relative; top: -1px;} .theme-box{width: 156px; text-align: left; line-height: 20px; margin-top: -20px;} .theme-box span{ display: inline-block; width: 20px; height: 20px; margin: 1px 2px; border: 1px #ccc solid; cursor: pointer; border-radius: 1px; } /* ------------- details标签 ------------- */ .main-box details{ border: 1px #42B983 solid; background-color: #f4fdef; overflow: hidden; max-height: 44px; margin-bottom: 1em; /* transition: all 1s; */ } .main-box details[open]{ /* max-height: 1000px; */ overflow: auto; animation: slideDown 0.6s linear both;} @keyframes slideDown { 0% { max-height: 44px; overflow: hidden; } 99% { max-height: 1500px; overflow: hidden; } 100% { max-height: 1500px; overflow: auto; } } .main-box details summary{ padding: 11px 14px; background-color: #f4fdef; color: #01a252; cursor: pointer; } .main-box details pre{ margin-left: 1em; margin-right: 1em; } .main-box details table{margin-left: 1em !important; margin-right: 1em; width: auto;} .main-box details p{padding: 0 14px;} /* 广告盒子 */ .ad-title{ font-size: 14px; color: #aaa; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px #aaa solid; } .ad-tips{margin-bottom: 5px;} .ad-close{float: right;} .ad-close:hover{cursor: pointer; text-decoration: underline; color: red;} .main-box .top-ad-box{font-size: 12px;} .main-box .top-ad-box a{border-bottom: 0px;} .main-box .top-ad-box a:hover{border-bottom: 0px;} .main-box .top-ad-box a img{border: 0px #ddd solid; width: 100%; /* max-height: 80px; */ border-radius: 2px; transition: all 0.2s;} .main-box .top-ad-box a img:hover{box-shadow: 0 0 20px #ddd;} /* 帮助按钮 */ .help-btn{transition: all 0.5s; text-align: center; border: 1px #42b983 solid; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; font-size: 13px; color: #42b983; line-height: 40px;} .help-btn:hover{box-shadow: 0 0 20px #D1EEE1 !important;} .xiaozhushou-intro p{line-height: 16px;} /* ew-wa */ .ew-wa{ margin-top: 14px; line-height: 18px; color: #aaa; } /* 按钮发光动画 */ /* .help-btn{animation: helpbtnanimation 3s infinite;} @keyframes helpbtnanimation{ 0%{box-shadow: 0 0 1px #42B983;} 50%{box-shadow: 0 0 20px #42B983;} 100%{box-shadow: 0 0 20px #FFF;} } */ /* ********** 赞助者名单 ******** */ .zanzhu-table{text-align: left;} /* 赞助排序盒子 */ .zanzhu-sort-box{font-size: 14px; margin-bottom: 10px;} .zanzhu-sort-box .zanzhu-sort-btn{text-decoration: none; color: #999; cursor: pointer;} .zanzhu-sort-box .zanzhu-sort-btn:hover{text-decoration: underline; color: #557;} .zanzhu-sort-box .zanzhu-sort-btn.zz-sort-native{text-decoration: underline; color: #557;} /* 底部按钮盒子 */ .zz-btn-box{color: #666; font-size: 14px;} .zz-btn-box button{padding: 5px 10px; cursor: pointer; border: 1px #ccc solid; color: #999; background-color: #FFF;} .zz-btn-box button:hover{box-shadow: 0 0 10px #ddd;} .syzz-show-btn{border: 1px #ccc solid; padding: 5px 10px; background-color: #FFF; color: #666; cursor: pointer;} .syzz-show-btn:hover{box-shadow: 0 0 10px #ddd;} /* ajax加载时的转圈圈样式 */ .ajax-layer-load.layui-layer-dialog{min-width: 0px !important; background-color: rgba(0,0,0,0.85);} .ajax-layer-load.layui-layer-dialog .layui-layer-content{padding: 10px 20px 10px 40px; color: #FFF;} .ajax-layer-load.layui-layer-dialog .layui-layer-content .layui-layer-ico{width: 20px; height: 20px; background-size: 20px 20px; top: 12px; } /* 万维广告 */ .wwads-cn{margin-top: 0px !important;} .wwads-cn>a>img{width: 80px !important;} /* 提示框 */ .main-box .alert{ border-radius: 0px !important; } /* .main-box .alert ul,.main-box .alert ol{ margin-top: -5px; margin-bottom: -10px; } */ .main-box .alert.tip .title .icon.icon-tip{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%2301354d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E"); } .main-box .alert.flat.note{background-color: #E8F4FF;} .main-box .alert.flat.tip{background-color: #F0F9EB;} .main-box .alert.flat.warning{background-color: #FDF6EC;}