1581 lines
30 KiB
CSS
1581 lines
30 KiB
CSS
|
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;
|
||
|
|
}
|