110 lines
7.0 KiB
CSS
110 lines
7.0 KiB
CSS
html.body,div,header,nav,menu,main,article,aside,footer,ul,li,h1,h2,h3,h4,p,i,b,em,label,input,button,textarea{display:block;margin:0;padding:0;box-sizing:border-box}input[type=submit],input[type=reset],input[type=button],input{resize:none}img{width:auto\9;display:block;-ms-interpolation-mode:bicubic;border:0}button,select{cursor:pointer;transition:all .25s}em,i{font-style:normal}ul{list-style-type:none}html{background:#fff;font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}body{width:100%;margin:0 auto;font: 400 1.5rem/1.5 Montserrat,Arial,sans-serif;color: #4d5154;font-family: Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}a{text-decoration:none;transition:all .2s ease;color: #0fb276;}a:hover{color: #086;text-decoration:underline;}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%}input,button{font-family:microsoft yahei;border:0;outline:0}a:link,a:active,a:visited,a:hover{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}.clearfix:after,ul:after{content:".";display:block;height:0;visibility:hidden;clear:both}h1{font-size:3rem}h2{font-size:2rem}
|
|
textarea,input,button,select{outline:none;font-family:inherit}
|
|
textarea{resize:vertical;}
|
|
::-webkit-input-placeholder{color:#c8cbd0;font-size:2.2rem}:-ms-input-placeholder{color:#c8cbd0;font-size:2.2rem}
|
|
html{/* background: #f7f8fa; */background: #ffffff;}
|
|
table{border-collapse: collapse;}
|
|
li{list-style: none;}
|
|
.wrap{position: relative;width: 1080px;margin:0 auto;}
|
|
#header{height: 5.4rem;margin:0 0 2rem;background: #fafafa;line-height: 5.1rem;box-shadow: 0 1px 4px rgba(131, 134, 142, .4);}
|
|
.brand{float:left;margin:0 1rem 0 -.2rem;}
|
|
.brand a{display:block;height: 4.6rem;padding: 1rem 0 0;line-height: 4.2rem;}
|
|
.brand svg{width:3.7rem;height: 3.2rem;}
|
|
.brand path{fill-rule:evenodd;}
|
|
.brand .cls-1{fill: #0fb276;}
|
|
.brand .cls-2{fill:#fff;}
|
|
#header h1,#header h2{font-size:2.2rem;color:#3b3c40;font-weight: 400;}
|
|
/* .main{float:left;width: 730px;} */#header{padding-left: 50px;}.main{padding: 0 min(50px 10vw);}
|
|
/* @media (max-width:760px){ */@media (max-width:1160px){
|
|
.wrap{width:100%;padding:0 1.8rem}
|
|
.main{width:100%;float:none;}
|
|
}
|
|
|
|
#hexform{padding:1rem 0;}
|
|
.enter{position:relative;}
|
|
.enter label,.hex-res label{padding: 0 0 1rem;font-size: 1.5rem;}
|
|
.enter input,.hex-res textarea{width:100%;padding:1.6rem 2rem;background:#fff;border-radius: .4rem;font-size:2.2rem;border: 1px solid #c4c6c8;box-shadow: 0px 1px 2px rgba(188, 195, 195, 0.4);}
|
|
.enter input:hover{border-color:#757677}
|
|
.enter input:focus{border-color: #0fb276;box-shadow: 0 0 0 3px rgba(15, 178, 118, 0.2);}
|
|
|
|
|
|
.hex-oper {display:flex;padding: 2rem 0;line-height: 5rem;}
|
|
.hex-row{display:flex;width: 74%;}
|
|
.hex-select{position:relative;width: 34%;margin-right:2%;background: #fff;border: 1px solid #c4c6c8;border-radius: .4rem;}
|
|
.hex-select:hover{border-color:#0fb276;background:#e7f9f2}
|
|
.hex-select span{position:absolute;top: 1.75rem;left:2rem;width: 20%;font-weight: 700;line-height: 1.4rem;}
|
|
.hex-select select{border:0;width:100%;height: 5rem;padding: 0 2.5rem 0 5rem;font-size:1.5rem;text-align: center;background:transparent;border-radius: .4rem;}
|
|
|
|
.hex-oper button{height: 5.2rem;line-height:5rem;}
|
|
|
|
.btn-swap{width: 10%;margin-right:2%;background: #fff;font-size:2rem;border-radius: .4rem;border: 1px solid #c4c6c8;}
|
|
.btn-swap:hover{transform: scaleX(-1);color:#0fb276;}
|
|
.btn-success{width: 26%;background: #0fb276;color:#fff;border-radius: .4rem;font-size:2rem;font-weight: 700;}
|
|
.btn-success:hover { background: #16c384;box-shadow: 0 2px 8px rgba(15, 178, 118, 0.2);}
|
|
.hex-res{position:relative;}
|
|
.hex-res textarea{background: #f6f8f9;}
|
|
.btn-copy{position:absolute;right:0;bottom: 0;height: 3.4rem;padding: 0 1.6rem;border-radius: .4rem 0;background: #f9fbfc;border: 1px solid #c4c6c8;}
|
|
.btn-copy:hover{ background: #0fb276;border-color:#0fb276;color:#fff;}
|
|
@media (max-width:760px){
|
|
.hex-oper {display:block;padding: 2rem 0;line-height: 5rem;}
|
|
.hex-row{width:100%;}
|
|
.hex-select{width:40%;}
|
|
.to_hex.hex-select{margin-right:0;}
|
|
.btn-swap{width:16%;}
|
|
.btn-success{width:100%;margin-top: 2rem;}
|
|
}
|
|
|
|
#calgroup{background: #f3fff9;margin-top:2rem;padding: 2rem;border-radius: .4rem;border: 1px solid #0fb276;}
|
|
#calgroup h3{text-align:center;font-size:2rem;color: #182;}
|
|
#cal1+div{border-top: 1px dashed #0fb276;}
|
|
#calgroup p{padding:.5rem 0;}
|
|
#calgroup #cal div{padding:1rem 0;}
|
|
#calgroup div p:first-child{font-weight:700}
|
|
#calgroup table{min-width:60%;margin-top:1rem}
|
|
#calgroup table th{padding: 1rem;background: #d2f3e4;border-bottom: 1px dashed #0fb276;text-align: left;}
|
|
#calgroup table td{padding:1rem;border-bottom:1px dashed #89a58f}
|
|
p#cal2result{padding:1rem;font-weight:700;}
|
|
|
|
.about table{width:100%;margin:1rem 0;line-height:4.4rem}
|
|
.about table td{border: 1px solid #e5eaec;text-align:center;font-size:1.8rem;}
|
|
.about table tr:nth-child(odd){background: #f6f8f9;}
|
|
.about table tr:hover{background: #f7f8f9;color:#0fb276;font-weight:700}
|
|
.about table th{background: #0fb276;border: 1px solid #22a574;color:#fff;}
|
|
.table-row{display:flex;justify-content:space-between;}
|
|
.table-row table{width:49%}
|
|
@media (max-width:760px){
|
|
.table-row{display:block;}
|
|
.table-row table{width:100%}
|
|
}
|
|
.side{width: 300px;float:right;}
|
|
.note h2,.hex-list h3,.about h3,.side h3{padding: 1.5rem 0;font-size:1.7rem;font-weight:600;}
|
|
.side h3{font-weight:400;color: #737678;}
|
|
.note p{padding:1rem 0;}
|
|
.hex-list ul{margin: 0 -.5rem;padding:1rem 0;}
|
|
.hex-list li{float: left;width: 25%;padding:.5rem;text-align: center;line-height: 4.6rem;font-size: 1.5rem;}
|
|
.hex-list li a{display:block;border-radius: .3rem;/* color: #2A4; */border: 1px solid #0fb276;}
|
|
.side .hex-list li{width:50%;}
|
|
.post-list li{position:relative;padding-left:1.5rem;line-height:3.6rem;}
|
|
.post-list li::before {content: '';display: block;position:absolute;left:0;top: 50%;width: .4rem;height: .4rem;/* border-radius:100%; */background: #abacaf;margin-top: -.2rem;}
|
|
@media (max-width:760px){
|
|
.side{width: 100%;float:none;padding:1rem 0 0;}
|
|
.post-list{padding:2rem;margin-top:1rem;border:1px solid #e8e9ea;}
|
|
.post-list h3{padding: 0 0 1.2rem;}
|
|
.hex-list li{width: 50%;}
|
|
}
|
|
|
|
|
|
.post-item .item{border-bottom:1px dashed #e1e2e4;padding:1.5rem 0;}
|
|
.page-navigator{display:flex;justify-content:center;padding:2rem 0;}
|
|
.page-navigator li{padding:0 .4rem;}
|
|
.page-navigator a{display:block;padding:1rem 1.8rem;border:1px solid #2a4;border-radius:.4rem;}
|
|
.page-navigator a:hover,.page-navigator .current a{background:#2a4;color:#fff;}
|
|
.page-navigator .current a{font-weight:700;}
|
|
article h1{font-size:3rem;padding:1rem 0 2rem;border-bottom:1px solid #ebeced;}
|
|
article .content{font-size:1.7rem;line-height:1.8em;padding:1rem 0 2rem}
|
|
.content div,.content p{padding:1.5rem 0;}
|
|
.content ol{padding: 0 0 0 2rem;margin: 0;}
|
|
.content li{display:list-item;list-style: decimal;padding: 1rem .5rem;}
|
|
.post-near{color:#7d7e82;border-top:1px solid #ebeced;padding: 2rem 0;line-height:4rem;}
|
|
#footer{background: #f9fafa;margin:2rem 0 0;padding:4rem;text-align:center;font-size:1.4rem;color:#888;}
|
|
#footer a{color:#888} |