html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
:root {
font-size: 15px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: 500;
line-height: 1.25;
color: var(--title-color);
}
h2 {
font-size: 1.375rem;
margin-bottom: 0.5rem;
margin-top: 1.15rem;
}
h3 {
font-size: 1.2rem;
margin-bottom: 0.666666666666667rem;
margin-top: 1.333333333333333rem;
}
h4 {
font-size: 1.125rem;
margin-bottom: 0.8rem;
}
h5 {
font-size: 1rem;
margin-bottom: 0.888rem;
}
h6 {
font-size: 0.875rem;
color: var(--text-strong-color);
}
ul {
list-style: none;
}
button,
input,
select,
textarea {
margin: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
img {
border-style: none;
background-color: transparent;
}
img,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
td:not([align]),
th:not([align]) {
text-align: left;
}
a {
cursor: pointer;
color: var(--link-color);
text-decoration: none;
}
.post-content a:not([data-nolink]) {
font-weight: 500;
cursor: pointer;
color: var(--text-strong-color);
text-decoration: none;
border-bottom: 1px solid var(--post-link-color);
transition: border-bottom 0.1s;
}
.post-content a:not([data-nolink]):hover {
border-bottom: 2px solid var(--post-link-color);
}
div {
display: block;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100vh;
font-size: 15px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
color: var(--text-color);
background-color: var(--body-background-color);
box-sizing: border-box;
overflow-wrap: break-word;
}
ol ol,
ul ol,
ul ul {
margin-top: 0;
margin-bottom: 0;
}
ol ol,
ul ol {
list-style-type: lower-roman;
}
ol ol ol,
ol ul ol,
ul ol ol,
ul ul ol {
list-style-type: lower-alpha;
}
ol li,
ul li {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
li>p {
margin-top: 1rem;
}
li+li {
margin-top: 0.25rem;
}
code,
kbd {
font-size: 0.9rem;
color: var(--code-color);
background-color: var(--code-background-color);
padding: 0.25rem 0.4rem;
overflow-wrap: break-word;
word-wrap: break-word;
border-radius: 0.25rem;
vertical-align: 0.1rem;
}
code[class*=language-] {
margin: 0;
padding: 0;
border-radius: 0;
vertical-align: 0;
}
pre[class*=language-] {
border-radius: 0.3rem !important;
}
table {
display: block;
overflow: auto;
border-spacing: 0;
border-collapse: collapse;
}
tr {
background-color: var(--widget-background-color);
}
td,
th {
border: 0.08rem solid var(--border-color);
padding: 0.5rem 0.75rem;
}
th {
font-weight: 700;
color: var(--title-color);
}
tbody tr:nth-child(odd) {
background-color: var(--tbody-background-color);
}
pre {
overflow: auto;
overflow-wrap: normal;
padding: 1rem;
border-radius: 0.3rem !important;
}
::-webkit-scrollbar {
background-color: transparent;
width: 2px;
height: 3px;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb {
background-color: #e6e8ee;
border-radius: 0.3rem;
}
@media (max-width: 742px) {
#dark {
display: none;
}
#search {
display: none;
}
}
:root {
--text-color: #3c4858;
--text-strong-color: #2f3d4e;
--text-light-color: #60656a;
--text-white-color: #fff;
--divider-color: #e6e8ee;
--title-color: #475b6d;
--link-color: #3273dc;
--post-link-color: #d71a1b;
--link-hover-color: #6596e5;
--info-text-color: #60656a;
--widget-background-color: #fff;
--body-background-color: #f2f5f8;
--badge-background-color: #edeff3;
--badge-hover-background-color: #adb7d0;
--border-color: #e1e4e9;
--pre-color: #2d2d2d;
--tbody-background-color: #f4f5f7;
--code-color: #50687c;
--code-background-color: #e9eaf0;
--blue-tag-color: #3273dc;
--blockquote-color: #f9f8f7;
--note-primary-border-color: #428bca;
--note-primary-color: #daf3fc;
--note-success-border-color: #5cb85c;
--note-success-color: #ebfbe2;
--note-info-border-color: #5bc0de;
--note-info-color: #dffdfb;
--note-warning-border-color: #f0ad30;
--note-warning-color: #fef5d5;
--note-danger-border-color: #d9534f;
--note-danger-color: #fde8dc;
--highlight-comment-color: #999;
--highlight-tag-color: #e2777a;
--highlight-attr-color: #6196cc;
--highlight-literal-color: #f08d49;
--highlight-keyword-color: #cc99cd;
--highlight-string-color: #7ec699;
--highlight-builtin-color: #67cdcc;
--base-shadow-color: 0deg, 0%, 72%;
--around-shadow-style: 0.3px 0.2px 0.3px rgba(184,184,184,0.4), 0.7px 0.5px 0.8px -1.3px rgba(184,184,184,0.32), 1.9px 1.4px 2.1px -2.7px rgba(184,184,184,0.25), 5.2px 3.8px 5.8px -4px rgba(184,184,184,0.17);
--tag-shadow-style: 0 2px 4px 0 rgba(0,0,0,0.2);
--image-filter-style: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-user-color-scheme]) {
--text-color: #c4c6c9;
--text-strong-color: #fff;
--text-light-color: #909faf;
--text-white-color: #fff;
--divider-color: #a09c9c;
--title-color: #c4c6c9;
--link-color: #74a9ff;
--link-hover-color: #6596e5;
--post-link-color: #d71a1b;
--info-text-color: #909faf;
--widget-background-color: #1c1c1e;
--body-background-color: #0d0d0d;
--badge-background-color: #485061;
--badge-hover-background-color: #818CA0;
--border-color: #435266;
--pre-color: #3c495b;
--tbody-background-color: #3c495b;
--code-color: #c3c7cb;
--code-background-color: #3e4b5e;
--blue-tag-color: $dark-blue-tag-color;
--blockquote-color: #181c27;
--note-primary-border-color: #0c2760;
--note-primary-color: #456d92;
--note-success-border-color: #11582a;
--note-success-color: #549148;
--note-info-border-color: #113c6a;
--note-info-color: #2a6279;
--note-warning-border-color: #733f09;
--note-warning-color: #937c43;
--note-danger-border-color: #680f2a;
--note-danger-color: #925346;
--around-shadow-style: none;
--tag-shadow-style: none;
--image-filter-style: brightness(0.6) contrast(1.2);
}
}
[data-user-color-scheme='dark'] {
--text-color: #c4c6c9;
--text-strong-color: #fff;
--text-light-color: #909faf;
--text-white-color: #fff;
--divider-color: #a09c9c;
--title-color: #c4c6c9;
--link-color: #74a9ff;
--link-hover-color: #6596e5;
--post-link-color: #d71a1b;
--info-text-color: #909faf;
--widget-background-color: #1c1c1e;
--body-background-color: #0d0d0d;
--badge-background-color: #485061;
--badge-hover-background-color: #818CA0;
--border-color: #435266;
--pre-color: #3c495b;
--tbody-background-color: #3c495b;
--code-color: #c3c7cb;
--code-background-color: #3e4b5e;
--blue-tag-color: $dark-blue-tag-color;
--blockquote-color: #181c27;
--note-primary-border-color: #0c2760;
--note-primary-color: #456d92;
--note-success-border-color: #11582a;
--note-success-color: #549148;
--note-info-border-color: #113c6a;
--note-info-color: #2a6279;
--note-warning-border-color: #733f09;
--note-warning-color: #937c43;
--note-danger-border-color: #680f2a;
--note-danger-color: #925346;
--around-shadow-style: none;
--tag-shadow-style: none;
--image-filter-style: brightness(0.6) contrast(1.2);
}
code,
pre {
font-family: 'Fira Code', 'Consolas', monospace !important;
}
code[class*='hljs'],
pre[class*='highlight'],
code[class*='language'] {
color: #ccc;
background: none;
font-size: 1rem !important;
padding: 0;
margin-left: 0;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
overflow-x: auto;
}
pre[class*='highlight'] {
padding: 1em;
margin: 0.5em 0;
border-radius: 0.3rem;
overflow: auto;
white-space: pre;
overflow-wrap: normal;
}
pre[class*='highlight']::-webkit-scrollbar {
display: none;
}
:not(pre) > code[class*='hljs'],
pre[class*='highlight'] {
background: var(--pre-color);
}
:not(pre) > code[class*='hljs'] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.hljs-comment,
.hljs-block-comment,
.hljs-prolog,
.hljs-doctype,
.hljs-cdata {
color: var(--highlight-comment-color);
}
.hljs-tag {
color: var(--highlight-tag-color);
}
.hljs-title,
.hljs-attr {
color: var(--highlight-attr-color);
}
.hljs-boolean,
.hljs-number,
.hljs-literal {
color: var(--highlight-literal-color);
}
.hljs-selector,
.hljs-important,
.hljs-atrule,
.hljs-keyword {
color: var(--highlight-keyword-color);
}
.hljs-string,
.hljs-char,
.hljs-attr-value,
.hljs-regex,
.hljs-variable {
color: var(--highlight-string-color);
}
.hljs-operator,
.hljs-entity,
.hljs-url,
.hljs-built_in {
color: var(--highlight-builtin-color);
}
.archive-card {
width: 100%;
}
.archive-card-header {
margin-bottom: 6px;
font-size: 15px;
}
.archive-card-header .iconfont {
font-size: 15px;
}
.archive-card-list-item {
display: block;
color: var(--text-color);
font-size: 1rem;
padding: 6px 8px;
transition: background-color 0.4s;
border-radius: 0.3rem;
}
.archive-card-list-item:hover {
cursor: pointer;
background-color: var(--badge-background-color);
}
.archive-card-list-item + .archive-card-list-item {
margin-top: 3px;
}
.archive-card-list-item-badge {
float: right;
margin-right: 10px;
font-size: 0.8rem;
background-color: var(--badge-background-color);
transition: all 0.4s;
padding: 2px 7px;
text-align: center;
border-radius: 0.3rem;
}
@media (max-width: 862px) {
.archive-widget {
display: none;
}
}
.card-author {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
}
.author-img {
transition: all 0.5s;
}
.author-name {
margin-top: 0.7rem;
font-size: 1.5rem;
}
.author-description {
margin-top: 0.5rem;
font-size: 1rem;
}
.author-message {
margin-top: 1.2rem;
width: 100%;
display: flex;
justify-content: center;
flex-direction: row;
}
.author-message > a {
padding: 0 16px;
color: var(--text-color);
display: flex;
flex-direction: column;
align-items: center;
}
.author-message > a > span {
font-size: 1.3rem;
}
.author-message > a > span + span {
font-size: 0.9rem;
}
.author-card-society {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 1rem;
}
.author-card-society .author-card-society-icon {
padding: 0 7px;
}
.author-card-society .author-card-society-icon a {
color: var(--text-color);
}
.author-card-society .author-card-society-icon a:hover {
color: var(--link-hover-color);
}
.author-card-society .author-card-society-icon a .iconfont {
font-size: 1.3rem;
}
@media (max-width: 862px) {
.card-author {
display: none;
margin-bottom: 0.8rem;
}
}
.basebutton {
display: flex;
cursor: pointer;
position: fixed;
width: 44px;
height: 44px;
border-radius: 50%;
box-shadow: var(--around-shadow-style);
justify-content: center;
align-items: center;
background-color: var(--widget-background-color);
transition: all 0.3s;
}
#scrollbutton {
transform: rotate(90deg);
display: flex;
opacity: 0;
bottom: 32px;
right: 32px;
}
#scrollbutton .button-icon {
font-size: 1rem;
font-weight: bold;
}
#menubutton {
display: flex;
opacity: 0;
bottom: 32px;
right: 32px;
}
#menubutton .button-icon {
font-size: 1.15rem;
font-weight: bold;
}
#popbutton {
z-index: 10;
bottom: 32px;
right: 32px;
}
#popbutton .button-icon {
font-size: 0.9rem;
font-weight: bold;
}
#darkbutton {
display: flex;
opacity: 0;
bottom: 32px;
right: 32px;
}
#darkbutton .button-icon {
font-size: 1rem;
}
#searchbutton {
display: flex;
opacity: 0;
bottom: 32px;
right: 32px;
}
#searchbutton .button-icon {
font-size: 1rem;
}
.postbutton {
cursor: pointer;
background-color: var(--link-color);
border-radius: 4px;
font-size: 1rem;
padding: 4px 10px;
border: none;
color: #fff;
}
.postbutton:hover {
background-color: var(--link-hover-color);
}
.postbutton:focus {
outline: none;
}
.card {
border-radius: .5rem;
background-color: var(--widget-background-color);
max-width: 100%;
box-shadow: var(--around-shadow-style);
transition: background-color 0.3s;
}
.image-wrapper+.card {
border-radius: 0 0 .5rem .5rem;
}
.card +.card,
.card +.archive-timeline {
margin-top: 1.5rem;
}
.card-content,
.card-author {
background-color: var(--widget-background-color);
transition: background-color 0.3s;
padding: 1.5rem;
}
.post-title,
.card-excerpt {
margin-bottom: 0.8rem;
}
.post-title {
font-size: 1.4rem;
font-weight: 400;
padding-bottom: 0.4rem;
color: var(--title-color);
line-height: 1.125;
}
.card-post-footer {
display: flex;
justify-content: space-between;
padding: 0;
}
.card-post-footer a:hover {
color: var(--link-hover-color);
}
.post-meta,
.post-meta-link {
color: var(--text-light-color);
padding: 0 2px;
}
.dot::after {
content: 'ยท';
}
@media (max-width: 862px) {
.card +.card {
margin-top: 0.8rem;
}
}
.categories-card {
width: 100%;
}
.categories-header {
margin-bottom: 6px;
font-size: 15px;
}
.categories-header .iconfont {
font-size: 15px;
}
.categories-list-item {
color: var(--text-color);
padding: 6px 8px;
font-size: 1rem;
border-radius: .5rem;
transition: background-color 0.4s ease-in-out;
}
.categories-list-item:hover {
cursor: pointer;
background-color: var(--badge-background-color);
}
.categories-list-item + .categories-list-item {
margin-top: 3px;
}
.categories-list-item-badge {
float: right;
margin-right: 10px;
font-size: 0.8rem;
background-color: var(--badge-background-color);
padding: 2px 7px;
text-align: center;
border-radius: .2rem;
}
@media (max-width: 862px) {
.categories-widget {
display: none;
}
}
.image-wrapper {
overflow: hidden;
display: block;
width: 100%;
height: 0;
position: relative;
background-color: var(--widget-background-color);
border-radius: 0.5rem 0.5rem 0 0;
}
.image-wrapper .image {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
-webkit-filter: var(--image-filter-style);
filter: var(--image-filter-style);
position: absolute;
transition: -webkit-filter 0.4s ease 0s;
transition: filter 0.4s ease 0s;
transition: filter 0.4s ease 0s, -webkit-filter 0.4s ease 0s;
}
.image-wrapper .image:not(.loaded) {
-webkit-filter: blur(5px) var(--image-filter-style);
filter: blur(5px) var(--image-filter-style);
}
.post-image {
margin: auto;
-webkit-filter: var(--image-filter-style);
filter: var(--image-filter-style);
transition: -webkit-filter 0.4s ease 0s;
transition: filter 0.4s ease 0s;
transition: filter 0.4s ease 0s, -webkit-filter 0.4s ease 0s;
}
.post-image:not(.loaded) {
-webkit-filter: blur(5px);
filter: blur(5px);
}
@media screen and (min-width: 768px) {
.image-wrapper {
padding-bottom: 300px;
}
.image-wrapper .image {
height: 300px;
}
}
@media screen and (max-width: 767px) {
.image-wrapper {
height: 16.48rem;
}
.image-wrapper .image {
height: 16.48rem;
}
}
.columns,
.left-column,
.main-column,
.right-column {
display: block;
padding: 0.5rem 0.25rem;
}
.left-column .sticky-tablet > div {
margin-bottom: 0.8rem;
}
.main-column {
content-visibility: auto;
}
.right-column,
.left-column {
display: none;
}
@media screen and (min-width: 862px) {
.columns {
display: flex;
}
.left-column,
.right-column {
width: 33.33333333333333%;
}
.main-column {
width: 66.66666666666666%;
}
}
@media screen and (min-width: 1280px) {
.left-column .display-when-two-columns,
.widescreen-archive {
display: none;
}
.main-column {
width: 52%;
}
.left-column,
.right-column {
width: 24%;
}
.right-column,
.left-column {
display: block;
}
}
@media screen and (min-width: 1280px) {
.sticky-widescreen {
position: -webkit-sticky;
position: sticky;
top: 1.5rem;
}
}
@media screen and (min-width: 862px) {
.columns,
.left-column,
.main-column,
.right-column {
padding: 0.75rem;
}
.sticky-tablet {
position: -webkit-sticky;
position: sticky;
top: 1.5rem;
}
.left-column .sticky-tablet > div {
margin-bottom: 1.5rem;
}
}
.container,
.footer-container,
.navbar-container {
flex-grow: 1;
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 1088px) {
.footer-container {
max-width: 992px;
}
}
@media screen and (min-width: 1280px) {
.footer-container {
max-width: 1184px;
}
}
.footer {
font-size: 0.9rem;
background-color: var(--widget-background-color);
transition: background-color 0.3s;
width: 100%;
box-shadow: var(--around-shadow-style);
padding: 1.5rem 1rem 1.5rem;
bottom: 0;
}
.footer-container {
color: var(--info-text-color);
display: block;
justify-content: space-between;
}
.footer-container a {
color: var(--text-strong-color);
}
.footer-container a:hover {
color: var(--link-hover-color);
}
.footer-dsc {
margin-bottom: 6px;
display: flex;
justify-content: center;
align-items: center;
}
.BbeiAn-info {
display: flex;
justify-content: center;
}
.friend-card {
overflow: hidden;
}
.friend-links {
display: flex;
flex-wrap: wrap;
}
.friend-item {
width: 33.33333333333333%;
padding: 6px 12px;
margin: 8px 0;
border-radius: .5rem;
}
.friend-item:hover {
background-color: var(--badge-background-color);
transition: background-color 0.3s;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
.friend-item-card {
display: block;
width: 100%;
height: 100%;
}
.friend-item-content {
display: flex;
align-items: center;
}
.friend-text {
width: 56%;
display: flex;
flex-direction: column;
}
.friend-name {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-strong-color);
font-size: 1.15rem;
max-height: 24.8px;
}
.friend-dsc {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--info-text-color);
font-size: 0.9rem;
max-height: 19.2px;
}
.friend-avatar {
height: 44px;
width: 44px;
margin-right: 14px;
}
@media (max-width: 968px) {
.friend-item {
width: 50%;
}
}
@media (max-width: 742px) {
.friend-item {
width: 100%;
}
}
.navbar {
background-color: var(--widget-background-color);
transition: background-color 0.3s;
height: 3.5rem;
box-shadow: var(--around-shadow-style);
display: flex;
align-items: stretch;
}
.navbar-logo {
display: inline-block;
margin-left: 96px;
}
.navbar-logo-main {
display: inline-flex;
height: 100%;
align-items: center;
justify-content: space-around;
padding: 0.7rem 0.6rem;
color: var(--text-color);
}
.navbar-logo-dsc {
font-size: 1.3rem;
}
.navbar-logo-img {
margin-right: 10px;
}
.navbar-menu {
font-size: 1rem;
display: flex;
align-items: center;
}
.navbar-menu a {
display: inline-flex;
height: 100%;
align-items: center;
color: var(--text-color);
cursor: pointer;
padding: 0.7rem 0.6rem;
}
.navbar-menu a:hover {
color: var(--link-hover-color);
}
.navbar-menu-btn {
background: none;
border: none;
display: flex;
align-items: center;
color: var(--text-color);
}
.navbar-menu-btn:hover {
cursor: pointer;
}
@media (max-width: 1088px) {
.navbar {
min-height: 90px;
display: block;
}
.navbar-logo {
margin-left: 0;
display: block;
}
.navbar-logo-main {
display: flex;
justify-content: center;
}
.navbar-menu {
width: 100%;
display: flex;
margin-right: 0;
justify-content: center;
}
}
@media (max-width: 586px) {
.navbar-menu {
display: flex;
justify-content: space-evenly;
}
}
.nav {
display: flex;
flex-direction: row;
margin-top: 1.5rem;
}
.nav-item-prev,
.nav-item-next {
display: flex;
flex: 50%;
}
.nav-next-icon {
margin-left: 0.7rem;
}
.nav-prev-icon {
margin-right: 0.7rem;
}
.nav-item-prev {
justify-content: flex-start;
text-align: left;
}
.nav-item-next {
justify-content: flex-end;
text-align: right;
}
.nav-link {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 0.5rem;
}
.nav-prev-icon,
.nav-next-icon {
color: var(--text-light-color);
width: 0.65rem;
}
.nav-label {
font-size: 0.9rem;
font-weight: 500;
line-height: 1.6rem;
color: var(--text-light-color);
}
.nav-title {
font-size: 1rem;
font-weight: 500;
line-height: 1.2rem;
color: var(--text-color);
}
.post-show-meta {
margin-bottom: 1rem;
}
.post-content dl + *,
.post-content ol + *,
.post-content ul + *,
.post-content blockquote + *,
.post-content h6 + *,
.post-content figure + *,
.post-content pre + *,
.post-content p + *,
.post-content table + * {
margin-top: 1em;
}
.post-content p {
line-height: 1.8rem;
}
.post-content blockquote {
margin-top: 1rem;
padding: 1rem;
background-color: var(--blockquote-color);
transition: background-color 0.3s;
border-left: 0.25rem solid var(--border-color);
}
.post-content blockquote p {
margin-bottom: 0;
}
.post-content ul {
list-style: disc;
margin-left: 1.2em;
}
.post-content ol {
list-style-position: outside;
margin-left: 1.2em;
margin-top: 0;
}
.post-content ol:not([type]) {
list-style-type: decimal;
}
.post-content h1,
.post-content h2 {
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--border-color);
}
.katex-block {
overflow-x: auto;
}
mjx-container {
overflow-x: auto;
overflow-y: hidden;
}
mjx-container:focus,
mjx-container svg:focus {
outline: none;
}
.post-note {
margin-top: 1rem;
margin-bottom: 1rem;
padding: 1rem;
border-radius: 0.2rem;
border-left-width: 0.25rem;
border-left-style: solid;
}
.post-note p {
margin-bottom: 0;
}
.copyright a {
color: var(--text-color);
font-weight: bold;
}
.copyright p + p {
margin-top: 8px;
}
.note-default {
background-color: var(--blockquote-color);
border-left-color: var(--border-color);
transition: background-color 0.3s;
}
.note-primary {
border-left-color: var(--note-primary-border-color);
background-color: var(--note-primary-color);
transition: background-color 0.3s;
}
.note-success {
border-left-color: var(--note-success-border-color);
background-color: var(--note-success-color);
transition: background-color 0.3s;
}
.note-info {
border-left-color: var(--note-info-border-color);
background-color: var(--note-info-color);
transition: background-color 0.3s;
}
.note-warning {
border-left-color: var(--note-warning-border-color);
background-color: var(--note-warning-color);
transition: background-color 0.3s;
}
.note-danger {
border-left-color: var(--note-danger-border-color);
background-color: var(--note-danger-color);
transition: background-color 0.3s;
}
.image-wrapper {
overflow: hidden;
display: block;
width: 100%;
height: 0;
position: relative;
background-color: var(--widget-background-color);
border-radius: 0.5rem 0.5rem 0 0;
}
.image-wrapper .image {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
-webkit-filter: var(--image-filter-style);
filter: var(--image-filter-style);
position: absolute;
transition: -webkit-filter 0.4s ease 0s;
transition: filter 0.4s ease 0s;
transition: filter 0.4s ease 0s, -webkit-filter 0.4s ease 0s;
}
.image-wrapper .image:not(.loaded) {
-webkit-filter: blur(5px) var(--image-filter-style);
filter: blur(5px) var(--image-filter-style);
}
.post-image {
margin: auto;
-webkit-filter: var(--image-filter-style);
filter: var(--image-filter-style);
transition: -webkit-filter 0.4s ease 0s;
transition: filter 0.4s ease 0s;
transition: filter 0.4s ease 0s, -webkit-filter 0.4s ease 0s;
}
.post-image:not(.loaded) {
-webkit-filter: blur(5px);
filter: blur(5px);
}
@media screen and (min-width: 768px) {
.image-wrapper {
padding-bottom: 300px;
}
.image-wrapper .image {
height: 300px;
}
}
@media screen and (max-width: 767px) {
.image-wrapper {
height: 16.48rem;
}
.image-wrapper .image {
height: 16.48rem;
}
}
.recent-posts-header {
margin-bottom: 16px;
font-size: 15px;
}
.recent-posts-header .iconfont {
font-size: 15px;
}
.recent-posts-item {
padding-left: 6px;
}
.recent-posts-item:last-child .divider {
display: none;
}
.recent-posts-item + .recent-posts-item {
margin-top: 10px;
}
.recent-posts-item-title {
font-size: 0.9rem;
}
.recent-posts-item-content {
color: var(--text-color);
margin-top: 6px;
font-size: 1rem;
padding: 6px 0;
padding-left: 8px;
transition: background-color 0.4s ease-in-out;
border-radius: .5rem;
}
.recent-posts-item-content:hover {
cursor: pointer;
background-color: var(--badge-background-color);
}
#search {
font-weight: bold;
}
#search-input {
background-color: var(--widget-background-color);
margin-top: 12px;
z-index: 20;
position: fixed;
left: 10%;
width: 80%;
height: 44px;
padding: 8px 12px;
border-radius: .5rem;
border: 1px solid var(--divider-color);
color: var(--text-color);
font-size: 14px;
}
#search-input:focus {
outline: none;
}
#search-content {
max-height: 800px;
overflow: auto;
position: fixed;
z-index: 20;
margin-top: 64px;
left: 10%;
width: 80%;
}
#search-content .local-search-empty {
color: var(--info-text-color);
line-height: 44px;
text-align: center;
display: block;
}
#search-content ul {
overflow-y: auto;
border: 1px solid var(--divider-color);
padding: 10px 20px;
background: var(--widget-background-color);
box-shadow: 1px 2px 4px var(--divider-color);
}
#search-content ul li {
text-align: left;
border-bottom: 1px solid var(--divider-color);
padding-bottom: 20px;
margin-bottom: 20px;
line-height: 30px;
font-weight: normal;
}
#search-content ul li:last-child {
border-bottom: none;
margin-bottom: 0;
}
#search-content ul li a {
margin-top: 20px;
font-size: 1rem;
}
#search-content ul li p {
margin-top: 10px;
font-size: 14px;
max-height: 124px;
overflow: hidden;
}
#search-content ul li .search-keyword {
color: var(--note-danger-border-color);
font-style: normal;
}
.section-wrap {
display: flex;
justify-content: center;
padding: 1.3rem 1rem;
}
.wrapper {
min-height: 100%;
}
@media (max-width: 862px) {
.section-wrap {
padding: 0.8rem 0.4rem;
}
}
.categories-card {
width: 100%;
}
.tags-header {
margin-bottom: 12px;
font-size: 15px;
}
.tags-header .iconfont {
font-size: 15px;
}
.tags-list {
overflow: hidden;
}
.tags-list-item {
height: 28px;
display: flex;
flex-direction: row;
align-items: center;
color: var(--text-color);
float: left;
margin: 3px 6px;
font-size: 1rem;
background-color: var(--badge-background-color);
transition: background-color 0.3s;
padding: 3px 7px;
text-align: center;
border-radius: .5rem;
}
.tags-list-item:hover {
cursor: pointer;
background-color: var(--badge-hover-background-color);
transition: background-color 0.3s;
}
.tag-page-card {
margin-bottom: 24px;
}
@media (max-width: 862px) {
.tags-widget {
display: none;
}
}
.toc-card {
margin-bottom: 1.5rem;
}
.toc-header {
margin-bottom: 6px;
font-size: 15px;
}
.toc-header .iconfont {
font-size: 1.15rem;
}
.toc {
overflow: auto;
max-height: calc(100vh - 30rem);
padding-right: 1rem;
}
.toc ol,
.toc li {
list-style-type: none;
}
.toc a {
color: var(--text-color);
display: block;
padding: 0.3rem 0.65rem;
border-radius: .5rem;
}
.toc a:hover {
background-color: var(--badge-background-color);
transition: background-color 0.3s;
}
.toc-child {
margin-left: 0.8rem;
position: relative;
}
.toc-child::before {
content: '';
position: absolute;
top: 0;
width: 1px;
background-color: var(--badge-background-color);
transition: background-color 0.3s;
height: 100%;
}
.toc-child > li {
margin-left: 0.7rem;
}
.toc-item {
margin-bottom: 0;
margin-top: 0;
}
#mobiletoc {
display: none;
}
#mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000;
opacity: 0.6;
}
@media (max-width: 862px) {
.toc-card {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0.8rem 1.2rem;
z-index: 20;
}
}
.archive-timeline-tag {
box-shadow: var(--tag-shadow-style);
background-color: #3273dc;
transition: background-color 0.3s;
border-radius: 0.3rem;
max-width: 66px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
color: var(--text-white-color);
margin: 12px 0;
}
.archive-timeline-item {
position: relative;
margin-left: 12px;
}
.archive-timeline-post {
margin-left: 10px;
padding: 6px 6px;
}
.archive-timeline-post-content {
margin-top: 12px;
font-size: 1.15rem;
}
.archive-timeline-post-item {
color: var(--text-font-color);
}
@media (max-width: 862px) {
.archive-timeline-item {
margin-left: 18px;
}
.archive-timeline-post {
margin-left: 8px;
}
}
.categories-page-title {
font-size: 1.15rem;
}
.category-page-card {
margin-bottom: 24px;
}
.categories-page-card {
display: flex;
flex-wrap: wrap;
}
.categories-page-list-item {
width: 33.33333333333333%;
display: flex;
color: var(--text-color);
font-size: 1.15rem;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 20px;
}
.categories-page-list-item:hover {
cursor: pointer;
border-radius: 0.3rem;
background-color: var(--badge-background-color);
transition: background-color 0.3s;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
.categories-page-list-item + .categories-page-list-item {
margin-top: 0.4rem;
}
.categories-page-list-item-total {
font-size: 0.9rem;
}
@media (max-width: 968px) {
.categories-page-list-item {
width: 50%;
}
}
@media (max-width: 742px) {
.categories-page-list-item {
width: 100%;
flex-direction: row;
justify-content: space-between;
align-content: center;
}
}
.tags-page-title {
font-size: 1.3rem;
}
.about-card {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.about-card-avatar {
width: 150px;
height: 150px;
margin-right: 90px;
}
.about-card-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about-card-author {
margin-top: 12px;
font-size: 1.5rem;
}
.about-card-dsc {
margin-top: 6px;
color: var(--text-light-color);
}
.about-card-society {
margin-top: 8px;
display: flex;
flex-direction: row;
}
.about-card-society-icon {
padding: 0 5px;
}
.about-card-society-icon .society-icon {
font-size: 22px;
color: var(--text-strong-color);
}
@media (max-width: 862px) {
.about-card {
flex-direction: column;
}
.about-card-avatar {
margin-right: 0;
}
}
.comment-card-title {
font-size: 1.15rem;
margin-bottom: 16px;
}
.widget-title {
font-size: 1.3rem;
font-weight: bold;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
background: none !important;
}