编辑文件 style.css

html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0}
h1{font-size:2em;margin:.67em 0}
hr{box-sizing:content-box;height:0;overflow:visible}
pre{font-family:monospace,monospace;font-size:1em}
a{background-color:transparent}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
img{border-style:none}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,input{overflow:visible}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:.35em .75em .625em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
details{display:block}
summary{display:list-item}
template{display:none}
[hidden]{display:none}

body { color: #1b1b1b; font-family: "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "WenQuanYi Micro Hei","Microsoft Yahei", serif; font-size: 14px; background: #EFF1F5; padding: 25px; }
a { color: #1b1b1b; text-decoration: none; }
a:hover, a:active { color: #333; }
pre, code { background: #F3F3F3; font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace; font-size: 1em; }
code { padding: 2px 4px; color: #B94A48; }
pre { padding: 8px; overflow: auto; position: relative;}
pre > code { padding: 0; color: #1b1b1b;  }
pre:has(code) {background-color: #ededed;border-left: 5px solid #adacac;border-radius: 5px; margin: 20px 0}
pre .copy-btn{position:absolute;top:2px;right:2px;padding:5px 10px;font-size:12px;background-color:#2ea7e0;color:white;border:none;border-radius:3px;cursor:pointer;display:none;}
pre:hover .copy-btn{display:inline-block;}
pre .copied{background-color:#6bc30d;}
pre .copy-btn:hover::after{display:block;}
blockquote { margin: 1em 0; padding-left: 1.5em; border-left: 4px solid #eee; color: #1b1b1b; }
table { border: 1px solid #ddd; width: 100%; }
table th, table td { padding: 5px 10px; border: 1px solid #eee; }
table th { background: #f3f3f3; }
h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei","Microsoft Yahei", sans-serif; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea { padding: 5px; border: 1px solid #999999; width: 100%; border-radius: 4px; box-sizing: border-box; }
textarea { resize: vertical; }
.fl { float: left; } .fr { float: right; }
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.wrap { box-shadow: 0 0 5px 1px #a8a8a8; background: #fff; max-width: 1600px; margin: auto; border-radius: 8px; }
.container { width: 100%; }
.post-meta a, .post-content a, .widget a, .comment-content a { border-bottom-color: transparent; }
.post-meta a:hover, .post-content a:hover, .widget a:hover, .comment-content a:hover { border-bottom: 1px solid #5e5e5e; }
#header { display: block; position: relative;overflow:hidden;z-index:1; }
#header::after{content:"";position:absolute;width:210px;height:210px;background-color:#eee;border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%;z-index:-1;top:-85px;right:-95px;}
#header::before{content:"";position:absolute;z-index:-1;width:210px;height:210px;background-color:#eee;border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%;top:-125px;right:-15px;opacity:0.5;}
#logo{display:flex;justify-content:space-between;margin-top: 30px;padding:0 15px}
.logo{ color: #1b1b1b; font-size: 2.5em; display:flex;align-items:center;white-space:nowrap;font-weight:500; }
.logo img { max-height: 42px;width:160px; }
.description { margin: 15px; color: #1b1b1b; }
.navMenu { display: flex; justify-content: space-between; align-items: center; background-color: #1b1b1b; margin: 20px 0 10px; box-shadow: 0 0 5px 1px #a8a8a8; border-bottom:2px solid #D40036 }
#nav-menu { padding: 0; background: #1b1b1b; display: flex; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#nav-menu a { display: block; margin-right: 0; padding: 12px 10px; color: #fff; font-weight: 800; font-size: 15px;transition:background .6s ease-out }
#nav-menu a:hover, #nav-menu .current { color: #fff; background-color:#D40036}
#search { position: relative; min-width: 300px; margin-left: 5px; margin-right: 5px; }
#search input { padding: 5px; border: 2px solid #1b1b1b; width: 100%; border-radius: 5px; }
#search button { position: absolute; right: 5px; top: 4px; width: 25px; height: 25px; background: transparent url(img/icon-search.png) no-repeat center center;border:none;text-indent:-99999px; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #search button { background-image: url(img/icon-search@2x.png); background-size: 24px 24px; } }
#body { margin: 0; overflow: hidden; }
#main { padding: 0 15px; width: calc(100% - 360px); min-width: 360px; }
.post { padding: 22px 0; border-bottom: 1px solid #EEE; display: block; overflow: hidden; }
.post:hover{border-color:#ccc;border-radius:5px}
.post .fm { width: 140px; border-radius: 5px; overflow: hidden; aspect-ratio: 4 / 2.5; border: 1px solid #c1c1c1; margin-right: 15px; float: left; }
.post .fm img { object-fit: cover; width: 100%; height: 100%; }
.post-text .post-content{color:#5b5b5b}
.post-title { margin: 0 0 5px; font-size: 18px; font-weight: bold; line-height: 25px; }
h1.post-title { font-size: 22px; }
.post-title a { border-bottom-color: transparent; }
.post-title a:hover { border-bottom: 1px solid #D40036; color: #D40036; }
.post-meta { padding: 5px 0; color: #777; font-size: 13px; border-bottom: 1px solid #dcdcdc; margin: 0; }
.post-meta li { display: inline-block; margin: 0 8px 0 0; padding-left: 12px; border-left: 1px solid #EEE; }
.post-meta li:first-child { margin-left: 0; padding-left: 0; border: none; }
.post-meta a { color: #777; }
.post-content, .comment-content { line-height: 1.5; word-wrap: break-word; }
.post-content img, .comment-content img, .post-content video, .comment-content video { max-width: 100%; }
.post-content a img, .comment-content a img { background: #FFF; position: relative; bottom: -4px; }
.post-content hr, .comment-content hr { margin: 2em auto; width: 70%; min-width: 100px; border: 1px dashed #bf9f9f; }
.post-near { list-style: none; padding: 20px 0; padding: 0; color: #1b1b1b;border-left:2px solid #808080;border-radius:5px;padding-left:5px; }
.post-near li { margin: 10px 0; }
.archive-title { color: #bbb; font-size: 1em; }
.more { text-align: center; }
.more a { border: none; }
.protected .text { width: 50%; }
.relative { margin: 40px 0; }
.relative > .post:last-child{border-bottom:unset}
.page-navigator { list-style: none; margin: 25px 0; padding: 0; }
.page-navigator li { display: inline-block; margin: 0; background: #1b1b1b; }
.page-navigator a { display: inline-block; padding: 0 15px; height: 35px; line-height: 35px; font-weight: bold; color: #fff; font-family: Microsoft Yahei; }
.page-navigator a:hover { background: #5e5e5e; text-decoration: none; }
.page-navigator .current a { color: #fff; background: #5e5e5e; }
#comments { padding-top: 15px; }
.comment-list, .comment-list ol { list-style: none; margin: 0; padding: 0; }
.comment-list li { padding: 14px; margin-top: 10px; border: 1px solid #EEE; }
.comment-list li.comment-level-odd { background: #F6F6F3; }
.comment-list li.comment-level-even { background: #FFF; }
.comment-list li.comment-by-author { background: #FFF9E8; }
.comment-list li .comment-reply { text-align: right; font-size: .92857em; }
.comment-meta a { color: #1b1b1b; font-size: .92857em; }
.comment-author { display: block; margin-bottom: 3px; color: #1b1b1b; }
.comment-author .avatar { float: left; margin-right: 10px; }
.comment-author cite { font-weight: bold; font-style: normal; }
.comment-list .respond { margin-top: 15px; border-top: 1px solid #EEE; }
.respond .cancel-comment-reply { float: right; margin-top: 15px; font-size: .92857em; }
#comment-form label { display: block; margin-bottom: .5em; font-weight: bold; }
#comment-form .required:after { content: " *"; color: #C00; }
#secondary { padding: 15px; word-wrap: break-word; width: 300px; }
.widget { margin-bottom: 30px; }
.widget-title, .relative-title { text-transform: uppercase; position: relative; margin: 0; font-size: 18px; }
.widget-title:before, .relative-title:before { display: block; content: ''; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #ccc; z-index: 1; }
.widget-title span, .relative-title span { display: inline-block; padding:6px 10px; position: relative; z-index: 2; background: #1b1b1b;border-bottom:1px solid #D40036;font-size:12px;color:#fff;border-radius:5px; }
.widget-list { list-style: none; padding: 0; margin: 5px 0; }
.widget-list li { margin: 5px 0; line-height: 1.6; border-bottom: 1px solid #eee; padding: 5px 0; }
.widget-list li ul { margin-left: 15px; }
.widget-list.category > a:not(:last-child)::after{content:'/'; pointer-events: none;margin-left: 4px; display: inline-block;}
.widget-list.rank{counter-reset: section;}
.widget-list.rank > li::before{counter-increment:section;content:counter(section);display:inline-block;text-align:center;margin-right:5px;height:18px;width:18px;line-height:18px;background:#b8c2cc;color:#fff;border-radius:50% 0 50% 50%;font-size:12px}
.widget-list.rank > li:nth-child(1)::before,.widget-list.rank > li:nth-child(2)::before,.widget-list.rank > li:nth-child(3)::before{color: #fff;}
.widget-list.rank > li:nth-child(1)::before {background: #D40036;}
.widget-list.rank > li:nth-child(2)::before {background: #2ea7e0;}
.widget-list.rank > li:nth-child(3)::before {background: #6bc30d;}
.widget-list.new > li,.widget-list.rank > li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.widget-list.new > li:hover,.widget-list.rank > li:hover{white-space:normal}
.widget.sidecmt a, .widget.sidecate a { font-weight: bold; }
.copyright { padding: 8px 15px; background: #2a2a2a; border-top: 3px solid #999; color: #999; display: flex; justify-content: space-between; box-shadow: 0 0 5px 1px #a8a8a8; }
.copyright a { color: #999; }
.error-page { padding:50px;text-align:center}
.error-page svg{max-width:600px}
.hidden { display: none !important; visibility: hidden; }
.sr-only { border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.sr-only.focusable:active, .sr-only.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.titletext { font-size: 2.5em; line-height: 1.3em; margin-bottom: 1em; color: #1b1b1b; text-align: center; }
.subtext { font-size: 1.3em; line-height: 1.3em; font-style: italic; margin-bottom: 1.3em; color: #999; text-align: center; }
.subtext span { border-bottom: 1px dotted #999; }
.options { display: flex; }
.options > div { flex: 1; margin-top: 1.5em; padding: 1.5em; }
.options .block1 { color: #2b3929; background: #d8f2c9; }
.options .block2 { color: #35444d; background: #d6ebf4; }
.options .block3 { color: #35444d; background: #f7efdb; }
.notes { margin: 0; padding: 1.5em; border-top: 0.063em solid #dedede; background: #eee; clear: both; font-size: 12px; }
.notes li { margin-bottom: 0.733em; }
.notes > p { font-size: 14px; font-weight: 500; }
.notes blockquote { margin: 1em 0; padding: 1em 1em 0.125em; background: #f1f5f9; }
.tags a { margin: 2px; }
.tools { display: flex; gap: 20px; padding: 5px 10px; flex-wrap: wrap;}
.tools .tool { cursor: pointer; background-color: #f5f5f5; padding: 5px 5px 5px 60px; background-repeat: no-repeat; background-size: 40px 40px; background-position: 10px center; border-radius: 8px; flex-grow: 1; flex-basis: 220px; box-sizing: border-box; white-space: nowrap; }
.tools .tool.img2base { background-image: url('https://tool.lvtao.net/static/index/img2base.svg'); }
.tools .tool.csr { background-image: url('https://tool.lvtao.net/static/index/csr.svg'); }
.tools .tool.resize { background-image: url('https://tool.lvtao.net/static/index/resize.svg'); }
.tools .tool.pix { background-image: url('https://tool.lvtao.net/static/index/pix.svg'); }
.tools .tool.excel { background-image: url('https://tool.lvtao.net/static/index/excel.svg'); }
.tools .tool.email { background-image: url('https://tool.lvtao.net/static/index/email.svg'); }
.archives{position:relative}
.archives::before{width:2px;height:100%;background:#bbb;display:block;content:"";position:absolute;top:0;left:49px}
.archives .archives-item{position:relative}
.archives .archives-item h2{font-size:12px!important;background:#fcfcfc;width:84px;line-height:24px;text-align:center;border-radius:4px;position:relative;z-index:10;left:15px;cursor:pointer;border:1px solid #bbb}
.archives .archives-item ul{padding-left:0;list-style:none}
.archives .archives-item ul li{font-size:14px;display:flex;align-items:center;padding:6px 0}
.archives .archives-item ul li:hover .timeline{background:#ff4242}
.archives .archives-item ul li .day{display:block;width:36px;text-align:center;flex:none}
.archives .archives-item ul li .timeline{width:8px;height:8px;background:#bbb;border-radius:50%;margin:0 10px;flex:none}
.alert-expiration {color: #fff8dc;background-color: #b22222;border-color: #b8e3f2;padding:5px;margin-top:2px;}
@media (max-width: 768px) { 
body{padding:5px}
#main,#secondary { width:calc(100% - 30px); }
.navMenu{display:block;}
.options{display:unset}
.copyright .info{display:none}
}