@charset "utf-8";
:root{
  --bgcolor:#f2f2f2;
  --txtcolor:#fff;
  --maincolor:#000;
  --highlight:#f20;
  --shadowcolor:rgba(0,0,0,.05); /* 阴影*/
  --bordercolor:rgba(0,0,0,.1); /* 边线 */
}
html,body{margin:0 auto; font:62.5% Arial,tahoma,sans-serif; outline:none;}
body{margin:0; padding:0; line-height:165%; min-width:30rem; font-size:1.4rem; background:var(--bgcolor); color:var(--maincolor); outline:none;}
form,ul,ol,li,dl,dt,dd,form,img,p{margin:0; padding:0; border:none; list-style-type:none; outline:none;/* line-height:135%;*/}
h1,h2,h3,h4,h5,h6{margin:0; padding:0; border:none; list-style-type:none; font-size:1.4rem; outline:none;/* line-height:135%;*/}
img{border:none; outline:none; max-width:100%;}

::-webkit-scrollbar {width:6px;}
::-webkit-scrollbar-track {border-radius:0; background:var(--bgcolor);}
::-webkit-scrollbar-thumb {border-radius:10; background:var(--maincolor);}
::selection{background: var(--maincolor); color: var(--txtcolor);}  /* 为所有选中的文本设置样式 */

select,button,input,textarea{font:1.4rem Arial,tahoma,sans-serif; box-sizing:border-box; border-radius:0; list-style:none; list-style-position:outside; outline:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent;}
blockquote,code,pre{font:1.4rem Arial,tahoma,sans-serif;}
table{empty-cells:show; border-collapse:collapse;}
input[type=number] {appearance:textfield; -moz-appearance:textfield; -webkit-appearance:textfield;}  
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;} 

a, a:link, a:visited{text-decoration:none; opacity:.8; text-decoration-style:wavy; text-decoration-thickness:0.05rem; text-underline-offset:0.4rem; outline:none; cursor:pointer;}
a:hover{text-decoration:none; opacity:1;}

.noData{text-align:center; height:50vh; line-height:50vh; opacity:.5;}

.btn, a.btn{text-decoration:none; display:block; width:100%; margin:0 auto; border:0; height:4rem; line-height:4rem; background:var(--maincolor); color:var(--txtcolor); opacity:.8; text-align:center; font-size:1.6rem; border-radius:10rem; cursor:pointer; overflow: hidden;}
.btn:hover, a.btn:hover{text-decoration:none; opacity:1;}
/* .btn-disabled{background:#dadada!important; color:#666!important; cursor:not-allowed; opacity:1;} */

.box{margin:2rem; padding:2rem; box-sizing: border-box; background: var(--txtcolor); box-shadow: 0 .2rem 1rem var(--shadowcolor); border-radius: 1rem; overflow: hidden;}

/* diy layui */
.layui-layer{border-radius:.6rem!important;}
.layui-layer-dialog{min-width:20rem!important;}
.layui-layer-dialog .layui-layer-content{text-align:center!important; padding:2rem 2rem 1rem 2rem!important; color:#333 !important;}
.layui-layer-btn{text-align:center!important; font-size:1.4rem; padding:0 2rem 2rem 2rem!important;}
.layui-layer-btn .layui-layer-btn0{background:#333!important; color:#fff!important; border:0!important; height:3.5rem!important; line-height:3.5rem!important; border-radius:.4rem!important;}
.layui-layer-btn .layui-layer-btn1{height:3.5rem!important; line-height:3.5rem!important; border-radius:.4rem!important;}
.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed>i{color:#f20;}
.layui-layer-photos .layui-layer-phimg img{border-radius:1rem!important;}
.layui-form-select dl{border-color:var(--bgcolor); background:var(--bgcolor); color:var(--maincolor); box-shadow:none;}
.layui-form-select dl dd:hover{color: var(--maincolor);}
.layui-form-select dl dd.layui-this{background-color:var(--maincolor); color: var(--txtcolor);}


header{display:flex; padding:0 2rem; align-items: center; gap:2rem; background:var(--txtcolor); position: relative;}
header a.logo{width:12rem; height:6rem; line-height:175rem; opacity:1; background:url(/static/images/logo.svg) no-repeat left center; overflow:hidden; }
/* header a.logo strong{display:block; margin:0; height:5rem; line-height:5rem; font-family: 'Arial', sans-serif; font-weight:900; font-size:4.1rem; }
header a.logo span{display:block; margin:-1rem 0 0 0; font-size:1.2rem; height:2.5rem; line-height:2.5rem; opacity:.5;} */
header a.post{position: absolute; right:1.25rem; width:auto; padding:0 2rem;}

.searchBox{width:48vw; position: relative;}
.searchBox .searchInput{display:block; width:100%; height:3.5rem; line-height:3.5rem; background:var(--bgcolor); color:var(--maincolor); border:0; border-radius:10rem; padding:0 1rem 0 4rem; box-sizing:border-box;}
.searchBox .layui-icon{position: absolute; width:4rem; height:4rem; line-height:4rem; top:0; left:0; text-align: center;}

.lightToggle{background:var(--bgcolor); color:var(--maincolor); /*position: absolute; top:2rem; left:20rem;*/ width:2.5rem; height:2.5rem; border-radius:50%; cursor:pointer; overflow: hidden;}
.lightToggle .layui-icon{display:block; margin:0 auto;width:2.5rem; height:2.5rem; line-height:2.5rem; font-size:1.4rem; text-align:center;}
.lightToggle .layui-icon-light{display:block;}
.lightToggle .layui-icon-moon{display:none;}

nav{background:var(--txtcolor); border-top:1px dotted var(--bordercolor); display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; box-shadow: 0 .2rem 1rem var(--shadowcolor);}
nav a:link, header nav a:visited{flex:1; height:4.5rem; line-height:4.5rem; text-align:center; border-right:1px dotted var(--bordercolor); position:relative; overflow:hidden;}
nav a:last-child{border:0;}
nav a.act{font-weight:bold;}
nav a.act::after{content:''; position: absolute; bottom:0; left:0; width:100%; height:.4rem; background:var(--maincolor);}

.axwooGrid{margin:2rem;	display:grid;	grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr));	grid-auto-rows:1px;	gap:2rem;}
.axwooGrid .item{margin:0; padding:0;}
.axwooGrid .item a{display:block; opacity:1;	break-inside:avoid;	margin:0;	padding:1rem; min-height:5rem;	overflow: hidden;	overflow-wrap: break-word;	word-break: break-all;}
.axwooGrid .item a time{display:block; margin:.5rem 0 0 0; font-size:1.2rem; opacity:.5; text-align: right;}
.axwooGrid .item a time::before{content: '发布于：';opacity:.5;}
.axwooGrid .item a:hover{text-decoration:underline;text-decoration-style:wavy; text-decoration-thickness:0.05rem; text-underline-offset:0.4rem;}

.webpages {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1rem; margin:2rem auto; width:100%; max-width:100%; box-sizing:border-box; padding:0 1rem;}
.webpages strong,.webpages a,.webpages span{display:inline-flex; align-items: center; justify-content: center; height:3.6rem; padding:0 1rem; border:1px solid var(--bordercolor); border-radius:50%; background:var(--txtcolor); color:var(--maincolor); text-decoration:none; white-space:nowrap; box-sizing:border-box;}
.webpages strong, .webpages a{width:3.6rem;}
.webpages a:hover {border-color: var(--maincolor); color:var(--maincolor); opacity:.4;}
.webpages strong {background:var(--maincolor); border-color:var(--maincolor); color:var(--txtcolor);}
.webpages span{border:none; background:transparent; opacity:.5; padding:0; margin-left:.5rem;}

.container{margin:2rem; display: grid; grid-template-columns: 1fr 40rem; grid-template-rows: 1fr; gap: 0 2rem; grid-template-areas:'articleBox asideRight';}

.webPath{margin:0 0 2rem 0; padding:0 0 2rem 0; border-bottom:1px dotted var(--bordercolor);}
.webPath a{margin:0 .5rem 0 0; display: inline-block;}
.webPath span{margin:0 .5rem; display: inline-block; opacity:.5;}
.webPath span.sep{opacity:.3;}

.articleBox{padding:2rem; border-radius: 1rem; background:var(--txtcolor); box-shadow: 0 .2rem 1rem var(--shadowcolor); overflow: hidden;}
.articleBox .intfContent{margin:0 0 2rem 0; font-size:1.6rem; line-height:185%; word-wrap:break-word; white-space:normal; word-break:break-all;}
.articleBox .intfContent p{margin:0 0 1em 0; line-height:185%; text-indent:2em;}

.articleBox .metaBox{margin:0; text-align: right; position: relative;}
.articleBox .metaBox span{margin:0 0 0 2rem; opacity:.25;}
.articleBox .metaBox time{opacity:.5;}
.articleBox .metaBox a.btn{margin:0 0 0 2rem; font-size:1.2rem; display:inline-block; width:auto; padding:0 2rem; height:2.7rem; line-height:2.7rem; overflow:visible;}

.disclaimerTip{margin:1rem 0 0 0; padding:1rem; font-size:1.2rem; background:var(--bgcolor);opacity:.8; border-radius:1rem;}

.asideRight{overflow: hidden;}
.asideRight .infoBox{margin:0 0 2rem 0;}
.asideRight .infoBox:last-child{margin:0;}
.asideRight .infoBox .titleBox{padding:0 0 1rem 0; border-bottom:1px dotted var(--bordercolor); font-weight:bold;}
.asideRight .infoBox ul{ padding:1rem 0 0 0;}
.asideRight .infoBox ul li{display:block; line-height:165%;}
.asideRight .infoBox ul a{display:block; padding:1rem 0; border-bottom:1px dotted var(--bordercolor); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
.asideRight .infoBox ul li:first-child a{padding:0 0 1rem 0;}
.asideRight .infoBox ul li:last-child a{padding:1rem 0 0 0; border-bottom:none;}
.asideRight .infoBox ul p{margin:0 0 1rem 0;}
.asideRight .infoBox ul p:last-child{margin:0;}

.postBox{margin:0;}
.postBox ul{margin:2rem 0; display: grid; grid-template-columns: 10rem 1fr; grid-template-rows: 1fr; gap:.1rem;}
.postBox ul span{text-align: right; line-height:38px;}
.postBox ul .btn{width:20rem; margin:1rem 0;}
.postBox ul .layui-input{background:var(--txtcolor); color:var(--maincolor); border:1px solid var(--bordercolor); border-radius:0.4rem; overflow: hidden;}

.postBox ul .trumbowyg-box{border:1px solid var(--bordercolor) !important; border-radius:0.4rem; overflow: hidden;}
.postBox ul .trumbowyg-button-pane{background:transparent !important; border-bottom:none; padding:0;}
.postBox ul .trumbowyg-button-pane::after, .postBox ul .trumbowyg-button-pane::before{background:var(--bordercolor) !important;}
.trumbowyg-button-pane button:hover{background:var(--bgcolor) !important;}
.trumbowyg-button-pane .trumbowyg-button-group::after{background:var(--bordercolor) !important; margin:0 !important;}
.postBox ul .trumbowyg-box svg, .postBox ul .trumbowyg-modal svg{color:var(--maincolor); fill:var(--maincolor);}
.trumbowyg-editor{font-size:1.4rem; line-height:165%;}
.trumbowyg-editor[contenteditable=true]:empty::before{content:attr(placeholder); color:#999;}
.trumbowyg-editor p{margin:0 0 1rem 0; text-indent:2em; line-height:165%;}

/* .postBox ul .tox-tinymce{border:1px solid var(--bordercolor); border-radius:1rem;}
.postBox ul .tox .tox-edit-area__iframe{background:transparent;}
.postBox ul .tox .tox-edit-area::before{border:1px solid var(--bordercolor);} */


footer{height:4rem; line-height:4rem; text-align:center; /*border-top:1px dotted var(--bordercolor);*/}
footer span, footer a, footer a:link, footer a:visited{margin:0 .3rem; opacity:.3; font-size:1.2rem;}
footer .layui-icon-top{position:fixed; z-index:999; bottom:2rem; right:2rem; width:3.5rem; height:3.5rem; line-height:3.5rem; margin:0; cursor:pointer; opacity:.8; background:var(--maincolor); color:var(--txtcolor); font-size:3rem; border:0; border-radius:50%;}

.errBox{margin:2rem auto; max-width:640px; padding:2rem;}
.errBox h3{margin:2rem 0; font-size:6rem; min-height:10rem; line-height:10rem; text-align:center;}
.errBox dl{margin:3rem 0;}
.errBox dl dt{font-size:1.6rem;}
.errBox dl li{padding:.5rem 0;}
.errBox dl li a{font-weight:bold; font-size:2rem; color:var(--highlight);}



/* 当body拥有.darkBody类名时，直接在body上重写这些变量 */
body.darkBody {
  --bgcolor:#3d3d3d;
  --txtcolor:#252525;
  --maincolor:#c7c7c7;
  --highlight:#f20;
  --shadowcolor:rgba(255,255,255,0.05); /* 阴影 */
  --bordercolor:rgba(255,255,255,.1); /* 边线 */
  color-scheme:dark; /* 额外:顺便把深色模式下的系统滚动条变暗 */
}
body.darkBody header a.logo{filter: invert(100%);}


body.darkBody a, body.darkBody a:link, body.darkBody a:visited{color:var(--maincolor);}
body.darkBody .btn, body.darkBody a.btn{background:var(--maincolor); color:var(--txtcolor);}
body.darkBody .lightToggle{background:var(--maincolor); color:var(--txtcolor);}
body.darkBody .lightToggle .layui-icon-light{display:none;}
body.darkBody .lightToggle .layui-icon-moon{display:block;}
/*
body.darkBody .tox-tinymce, body.darkBody .tox-dialog {
  --tox-bg-color: #000000 !important;
  --tox-panel-background-color: #000000 !important;
  --tox-pop-background-color: #000000 !important;
  --tox-menu-background-color: #000000 !important;
  
  --tox-toolbar-bg-color: #000000 !important;
  --tox-statusbar-bg-color: #000000 !important;
  --tox-menubar-bg-color: #000000 !important;

  --tox-border-color: #222222 !important;
}
body.darkBody .tox .tox-tbtn--xeon, body.darkBody .tox .tox-mbtn--select {background-color: #000000 !important;}
body.darkBody .tox .tox-tbtn:hover { background-color: #222222 !important;}

body.darkBody .tox .tox-tbtn{background:transparent;}
body.darkBody .tox:not(.tox-tinymce-inline) .tox-editor-header{background-color:transparent;}
body.darkBody  .tox .tox-toolbar-overlord{background-color:transparent;}
body.darkBody .tox .tox-toolbar, body.darkBody .tox .tox-toolbar__overflow, body.darkBody .tox .tox-toolbar__primary{background:transparent;}
body.darkBody .tox .tox-statusbar{background-color:transparent;}
*/

@media (max-width:1200px){
	.container{display: block;}
  .articleBox, .postBox{margin:0 0 2rem 0;}
}
@media (max-width:800px){
	.postBox ul{display: block;}

}
@media (max-width:640px){
  header{flex-wrap: wrap; gap:0; align-items:start; padding:1rem;}
  header a.logo{height:4rem;}
  header a.post{margin:0.25rem 0 0 0; height:3.5rem; line-height:3.5rem;}
  .lightToggle{margin:0.75rem 2rem 0 2rem;}
  .searchBox{flex-basis: 100%; margin:1rem 0 0 0;}


  nav{padding:0 1rem;}
  nav a:link, header nav a:visited{flex:auto}
  nav a.act::after{ height:.2rem;}

  .axwooGrid{margin:1rem; gap:1rem;}
  .container{margin:1rem;}
  .articleBox, .postBox{margin:0 0 1rem 0;}
  .asideRight .infoBox{margin:0 0 1rem 0;}
  footer span.layui-icon-top{bottom:1rem; right:1rem;}
}

@media (max-width:400px){
  body{font-size:1.3rem;}
  .axwooGrid{margin:1rem 0; gap:1rem 0;}
  .container{margin:1rem 0;}

  .box{margin:1rem 0; border-radius:0;}
  .articleBox{border-radius:0;}
  .articleBox .intfContent{font-size:110%;}

  .postBox ul .btn{width:100%;}
}