html, body {
height: 100%;
}
body {
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
background-color: #fcfcfc;
}
body.single-post {
background-color: #ededed;
}
button:focus {
outline: 0 !important;
}
a:visited { 
border-bottom-color:transparent;
}
pre, code {
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
border: none;
border-radius: 6px;
white-space: pre-wrap;
font-size: 13px;
}
code {
background-color: #e7e7e7;
color: #00193a;
padding: 3px 5px;
}
code.inline{
display:initial;
}
.blur-bg{
filter: blur(5px);
}
.hljs {
padding: 1.2em 1.4em 1.1em 1.4em;
}
kbd {
padding: .1em .6em;
border: 1px solid #CCC;
font-size: 11px;
font-family: Arial,Helvetica,sans-serif;
background-color: #F7F7F7;
font-weight:100;
color: #333;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),0 0 0 2px #FFF inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),0 0 0 2px #FFF inset;
border-radius: 3px;
display: inline-block;
margin: 0 .1em;
text-shadow: 0 1px 0 #FFF;
line-height: 1.4;
white-space: nowrap;
}
input[type=text], textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-control:focus {
border-color: #ccc;
box-shadow: inset 0 1px 1px #f5f5f5, 0 0 8px #ccc;
}
.mdc-list {
padding: 30px 0 30px 0;
}
.mdc-list a {
text-decoration: none;
}
.index-content {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
padding: 20px 0 0 0;
}
.index-content a h4 {
font-size: 16px;
color: #384550;
}
.index-content a p.post-date {
width: 95px;
color: #7b7b7b;
font-size: 13px;
}
.index-content a {
display: inline-block;
width: 80%;
margin-left: 10%;
margin-top: 5px;
margin-bottom: 5px;
padding: 10px 15px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.index-content a:hover {
text-decoration:none;
background-color: #ebedef;
color: #000;
}
.index-content a:hover h4 {
color: #000;
}
.stacked {
z-index: 9998;
}
#main {
margin-top: 40px;
margin-bottom: 30px;
}
#main, .pageSidebar {
background: #fff;
border-radius: 6px;
box-shadow: 0 10px 20px 0 rgba(236,236,236,0.86);
}
body.theme-night #main {
background-color: #18212d;
color: #F5F7FA;
}
body.theme-night #main h1 {
border-bottom: 2px solid #777;
}
.pageSidebar .post-cat-meta {
text-align: center;
}
#main .entry-content-page {
padding: 10px 30px;
}
#main .post-comment{
padding: 10px 20px;
}
#main .post-wrap {
font-size: 14px;
line-height: 20px;
text-align: justify;
}
#main .entry-content-page .post-wrap a {
border-radius: 3px;
padding: 2px 4px;
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
#main .entry-content-page .post-wrap a:hover {
text-decoration: none;
background-color: #787878;
color: #fff;
}
#main .entry-content-page ul, #main .entry-content-page ol {
padding: 10px 0 10px 30px;
}
#main .entry-content-page blockquote {
border-left: 5px solid #c9ddf0;
background-color: rgb(248, 248, 248);
}
#main .entry-content-page blockquote p {
text-indent: 0;
font-size: 14px
}
#main .entry-content-page .post-wrap img{
width: 80%;
margin-left: 10%;
height: auto;
}
#main .entry-content-page ul li{
font-size: 14px;
}
#main .entry-content-page h1 {
color: #1f1f1f;
font-size: 30px;
margin: 40px 0 0 0;
padding-bottom: 45px;
text-align: center;
letter-spacing: 0.02em;
}
#main .post-wrap h2 {
font-size: 24px;
margin-top: 15px;
margin-top: 22px;
margin-bottom: 22px;
line-height: 14px;
}
#main .post-wrap h3 {
font-size: 18px;
margin-top: 20px;
margin-bottom: 20px;
line-height: 14px;
display: inline-block;
}
#main .post-wrap h4 {
font-size: 16px;
content: "";
margin-right: 14px;
margin-top: 18px;
margin-bottom: 18px;
line-height: 26px;
padding-left: 8px;
border-left: 5px solid #FFC43F;
}
#main .post_meta {
padding: 10px;
background-color: #f8f8f8;
margin: 0 0 20px 0;
text-align: right;
border-radius: 5px;
}
#main .post_meta span{
font-size:12px;
color: #999;
margin-right: 15px;
}
#main .post_meta .back-span{
height: 22px;
line-height: 22px;
}
#main .post_meta span a{
color: #999;
text-decoration: none;
}
#main .post_meta span a.back:before{
content: "\f100";
font-family: "Font Awesome 5 Free";
display: inline-block;
padding-right: 4px;
font-weight: 900;
}
#main .post_meta span a:hover{
color: #3b83ee;
text-decoration: none;
}
#main .post_meta .avatar{
width: 20px;
margin-right: 15px;
border-radius: 50%;
}
#main .hot-posts {
border-top: 2px solid #efefef;
margin: 40px 0 20px 0;
padding: 10px;
}
#main, #footer {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
}
.pageSidebar{
padding: 20px 10px;
}
.pageSidebar h5{
margin: 0 0 20px 5px;
}
.pageSidebar .list{
padding: 0 0 0 5px;
list-style: none;
}
.section {
padding: 30px;
border-top: 2px solid #eceef1;
}
.met-online {
display: none;
position: fixed;
right: 20px;
bottom: 40px;
z-index: 9998;
overflow: hidden;
}
.met-online ul.blocks {
margin: 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
overflow: hidden;
}
.met-online ul.blocks.hidebacktop {
margin-bottom: -36px;
}
.met-online ul.blocks li {
clear: both;
margin-bottom: 5px;
}
.met-online ul.blocks li button{
border-radius: 6px;
border: 1px solid #f3f3f3;
color: #8590A6;
background-color: #fff;
padding: 0;
width: 35px;
height: 35px;
outline: none; }
.met-online ul.blocks li a{
color: #8590A6;
display: block;
width: 35px;
height: 35px;
}
.met-online ul.blocks li button:hover{
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
background-color: #d0d4dd;
}
footer {
padding: 30px 0;
line-height: 25px;
background-color: #1f2d3d;
}
footer p.copyright {
color: #c2c2c2;
} .comment-spinner{
border-top: 2px dashed #eee;
margin-top: 40px;
}
#commentform {
width: 480px;
margin-top: 40px;
color: #6f6f6f;
padding: 0 30px;
}
#commentform input {
border: 1px solid #f4f4f4 !important;
box-shadow: none !important;
background-color: #fafafa;
height: 46px;
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
#commentform textarea{
border: 1px solid #f4f4f4 !important;
box-shadow: none !important;
background-color: #fafafa;
resize: vertical;
width: 580px;
min-height: 160px;
max-height: 520px;
padding: 10px 12px;
font-weight: 500;
color: #464646;
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
#commentform input:active, #commentform input:focus, #commentform textarea:active, #commentform textarea:focus{
border: 1px solid #d8d8d8 !important;
background-color: #f4f4f4;
color: #111;
font-weight: 500;
}
#commentform .form-group{
margin-right: 0;
margin-left: 0;
}
#commentform h4{
font-size: 14px;
color: #9a9a9a;
}
#commentform .control-label {
font-weight: 400;
margin-bottom: 4px;
font-size: 12px;
color: #adadad;
}
#commentform .btn-primary {
height: 36px;
color: #676767 !important;
background-color: #f7f7f7;
border: 1px solid #d7d7d7 !important;
transition: all 0.15s;
-webkit-transition: all 0.15s;
}
#commentform .btn-primary:hover{
color: #252525 !important;
background-color: #e4e4e4;
border: 1px solid #252525 !important;
}
.avatar {
float: left
}
.avatar img {
width: 48px;
height: 48px;
margin: 5px 0 0 0;
padding: 0;
display: block;
border-radius: 6px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar img:hover{
border-radius: 50%;
}
.post-list {
padding-left: 0;
}
.post-list li{
list-style-type: none;
background-color: #f5f5f5;
border-radius: 8px;
padding: 20px;
margin-bottom: 10px;
transition: all 0.1s;
-webkit-transition: all 0.1s;
border: 1px solid #f9f9f9;
color: #474f56;
}
.post-list li:hover{
border: 1px solid #e6e6e6;
background-color: #f0f0f0;
color: #101a23;
}
.post-body .bullet {
padding: 0;
color: #c2c6cc;
line-height: 1.4;
}
.post-body .author{
font-size: 12px;
color: #656c7a;
font-weight: 700;
}
.post-body .author a{
color: #778899;
}
.comment-post-date{
font-weight: 500;
font-size: 12px;
color: #a1a1a1;
}
.comment__header, .post-message {
margin-left: 60px;
}
.post-message{
font-size:13px;
font-style:normal;
font-weight:400;
line-height:21px;
}
.performance-div{
padding: 20px 0 10px 30px;
font-size: 11px;
color: #bdbdbd;
}
@media (min-width: 320px) and (max-width: 480px) { .container {
padding-right: 0;
padding-left: 0;
}
.mdc-list {
padding: 30px 0;
}
#main {
margin-top: 20px;
margin-bottom: 20px;
}
#main .post_meta {
padding: 6px 0 6px 10px;
border-radius: 5px;
}
#main .post_meta span {
font-size: 11px;
}
.index-content{
padding: 20px 0 0 0;
}
.index-content a{
width: 100%;
margin: 0 0 10px 0;
}
.index-content h4{
font-size: 12px;
}
#main h1 {
font-size: 24px;
margin: 30px 0 0 0;
padding-bottom: 35px
}
#main .entry-content-page ul, #main .entry-content-page ol {
padding: 0;
}
.entry-content-page img {
width: 100%;
margin: 0;
}
#commentform {
width: 100%;
padding: 0;
}
.avatar img {
width: 48px;
height: 48px;
margin: 5px 0 0 0;
padding: 0;
display: block;
border-radius: 3px;
}
.post-list li{
padding: 10px;
}
.post-message {
font-size: 13px;
}
#commentform textarea{
width: 100%;
}
}
@media (min-width:480px) and (max-width: 960px) {
#commentform, #commentform textarea{
width: 100%;
}
}
@media (min-width:961px) and (max-width: 1100px) { .index-content .card p{
margin:20px;
opacity: 0.65;
height: 90px;
}
#commentform, #commentform textarea {
width: 100%;
}
}
@media (min-width: 1100px) and (max-width: 1400px) { .index-content .card p{
margin:20px;
opacity: 0.65;
height: 70px;
}
#commentform {
width: 100%;
}
.container {
width: 900px;
}
}
@media (min-width: 1200px) and (max-width: 2460px) { .container {
width: 900px;
}
}