You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
332 lines
6.6 KiB
332 lines
6.6 KiB
html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
|
|
|
|
body,html{height:100%;margin:0;padding:0;border:0;font-size:15px;}
|
|
|
|
/* 滚动条样式修改开始 */
|
|
html::-webkit-scrollbar {
|
|
width: 11px;
|
|
height: 8px;
|
|
}
|
|
html::-webkit-scrollbar-track {
|
|
background-color: rgba(73, 177, 245, 0.2);
|
|
border-radius: 2em;
|
|
}
|
|
html::-webkit-scrollbar-thumb {
|
|
background-color: #49b1f5;
|
|
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
|
|
border-radius: 2em;
|
|
}
|
|
html::-webkit-scrollbar-corner {
|
|
background-color: transparent;
|
|
}
|
|
html::-moz-selection {
|
|
color: #fff;
|
|
background-color: #49b1f5;
|
|
}
|
|
/* 滚动条样式修改结束 */
|
|
|
|
:root {
|
|
--layout-max-width: 1400px;
|
|
--base-font: var(--font-base-size) / var(--font-base-lh) 'Open Sans', sans-serif;
|
|
--soft-shadow: 3px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light){
|
|
:root {
|
|
--theme-bg-primary: #f5f8fa;
|
|
--theme-bg-high: #fff;
|
|
--theme-bg-shadow: #dddfe1;
|
|
--theme-bg-actvie1: #dddfe1;
|
|
--theme-bg-actvie2: #fff;
|
|
--theme-text-active: #f857a6;
|
|
--theme-text-light: #fff;
|
|
--theme-text-primary: #3e3e5f;
|
|
--theme-text-low: #aeacb1;
|
|
--theme-text-stress: #14281D;
|
|
--theme-border-primary: #e1e4e8;
|
|
--theme-border-secondary: #ebedef;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 768px){
|
|
:root {
|
|
--layout-max-width: 1400px;
|
|
--layout-padding-x: 20px;
|
|
--font-large-size: 30px;
|
|
--font-stress-size: 22px;
|
|
--font-common-size: 16px;
|
|
--font-base-size: 14px;
|
|
--font-base-lh: 1.8;
|
|
--content-large-padding: 20px 38px 23px;
|
|
--content-primary-padding: 13px;
|
|
--soft-large-radius: 14px;
|
|
--soft-primary-radius: 12px;
|
|
--soft-small-radius: 6px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.navbar-toggler-icon{
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
/* a{color:#282a2d;outline:0!important;text-decoration:none}
|
|
a:hover{text-decoration:none;color:#f1404b} */
|
|
|
|
/* p{color:#1d232b;margin:0;white-space:normal;word-break:break-all} */
|
|
/* .content p{
|
|
margin: 2rem 0;
|
|
text-align:justify;text-justify:auto;hyphens:auto
|
|
} */
|
|
a:-webkit-any-link {
|
|
/* color: -webkit-link; */
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.navbar-brand > span{
|
|
font-size: 1.9rem;
|
|
font-weight: 549;
|
|
color: #212121;
|
|
}
|
|
|
|
.content h1{
|
|
text-align: center;
|
|
padding-bottom: 15px;
|
|
border-bottom-width: 5px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: rgba(255,82,82,1);
|
|
display: block;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.content h1 a,
|
|
.content h1 a:focus,
|
|
.content h1 a:hover,
|
|
.content h1 a:visited{
|
|
color: inherit;
|
|
}
|
|
|
|
a.nav-link{
|
|
display: inline;
|
|
font-size: 1.6rem;
|
|
color: hsl(0, 5%, 20%);
|
|
}
|
|
a.nav-link:hover{text-decoration:none;color:#535deb}
|
|
|
|
.content h1 {
|
|
font-size: 2.6rem;
|
|
text-align: center;
|
|
padding-bottom: 15px;
|
|
border-bottom-width: 5px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: rgba(255,82,82,1);
|
|
display: block;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.content h2{
|
|
margin: 2rem 0;
|
|
text-align:justify;text-justify:auto;hyphens:auto
|
|
}
|
|
|
|
.logo-img{
|
|
display: inline-block;
|
|
max-height: 56px;
|
|
max-width: 225px;
|
|
/* padding: 8px 4px 8px 12px; */
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.site-title{
|
|
display: inline-block;
|
|
line-height: 1;
|
|
max-width: 380px;
|
|
outline: none;
|
|
overflow: hidden;
|
|
padding: 16px 5px;
|
|
text-decoration: none;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.headline-hash{
|
|
color: inherit !important;
|
|
}
|
|
|
|
.headline-icon {
|
|
font-size: 0.7em;
|
|
margin-left: 0.2em;
|
|
font-style: normal;
|
|
}
|
|
|
|
h2[id] {
|
|
border-left: 3px solid #FF515B;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
h3[id] {
|
|
border-left: 2px solid #FF515B;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* .btn a, a:focus, a:hover, a:visited{
|
|
text-decoration: none;
|
|
} */
|
|
|
|
.btn a{
|
|
color: #fcfbfb!important;
|
|
background-color: #cf2e2e;
|
|
font-size: 2em!important;
|
|
padding: .8em 1.2em;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
line-height: 1!important;
|
|
border: none;
|
|
box-shadow: none;
|
|
cursor: pointer;
|
|
word-break: break-word;
|
|
transition: .3s ease;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn a:hover{
|
|
box-shadow: inset 0 0 200px rgba(255,255,255,.15);
|
|
outline: 0;
|
|
}
|
|
|
|
.date{
|
|
text-align: right;
|
|
}
|
|
|
|
.toc hr{
|
|
margin-top: 4em;
|
|
}
|
|
|
|
table {
|
|
margin: auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.blog-content img {
|
|
max-width: 100%;
|
|
/* display: block;
|
|
margin-left: auto;
|
|
margin-right: auto; */
|
|
box-sizing: initial;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
border-style: none;
|
|
border-radius: var(--soft-small-radius);
|
|
background-color: var(--theme-bg-primary);
|
|
box-shadow: var(--soft-shadow) var(--soft-shadow) calc(var(--soft-shadow) * 2) var(--theme-bg-shadow),calc(-1 * var(--soft-shadow)) calc(-1 * var(--soft-shadow)) calc(var(--soft-shadow) * 2) var(--theme-bg-high);
|
|
}
|
|
|
|
|
|
.blog-content img[src*="center"]{
|
|
width: 100%;
|
|
}
|
|
|
|
.blog-content img[src*="cover"]{
|
|
width: 100%;
|
|
height:100%;
|
|
}
|
|
|
|
/** 进度比例和到顶部**/
|
|
.back-to-top {
|
|
box-sizing: border-box;
|
|
border-radius: 8px; /** 圆角**/
|
|
position: fixed;
|
|
right: 30px;
|
|
z-index: 1050;
|
|
padding: 0 6px;
|
|
width: initial;
|
|
background: #222;
|
|
font-size: 12px;
|
|
opacity: 0.6;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition-property: bottom;
|
|
transition-duration: 0.2s;
|
|
transition-timing-function: ease-in-out;
|
|
transition-delay: 0s;
|
|
bottom: -40px;
|
|
}
|
|
|
|
.back-top-active {
|
|
bottom: 30px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
.back-to-top {
|
|
right: 10px;
|
|
}
|
|
|
|
.back-top-active {
|
|
bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.rating {
|
|
position: relative;
|
|
width: 160px;
|
|
background: transparent;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
gap: .3em;
|
|
padding: 5px 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rating__result {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform: translateY(-10px) translateX(-5px);
|
|
z-index: -9;
|
|
font: 3em Arial, Helvetica, sans-serif;
|
|
color: #ffb900;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rating__star {
|
|
font-size: 1.3em;
|
|
cursor: pointer;
|
|
color: #ffb900;
|
|
transition: filter linear .3s;
|
|
}
|
|
|
|
.rating__star:hover {
|
|
filter: drop-shadow(1px 1px 4px gold);
|
|
}
|
|
|
|
.clear-block{
|
|
display: inline !important;
|
|
}
|
|
.star{
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
.rating__star {
|
|
cursor: pointer;
|
|
color: #ffb900;
|
|
}
|
|
|