@charset "utf-8";

* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
-webkit-tap-highlight-color: transparent;
scrollbar-width: thin;
}
:root {
--bg-page: #F7F4EE;
--bg-page-alt: #F2EEE8;
--bg-card: #FBFAF7;
--bg-soft: #F2EEE8;
--bg-float: #FBFAF7;
--text-primary: #3E3934;
--text-body: #4B463F;
--text-secondary: #8C857D;
--text-muted: #A49D95;
--line-primary: #DDD6CC;
--line-secondary: #E7E1D8;
--line-soft: #EEE9E2;
--ink-decor: #B8B1A8;
--accent-brown: #6E4F2F;
--accent-gold: #A78C63;
--accent-red: #9A5548;
--control-bg: #FBFAF7;
--control-text: #6F685F;
--control-border: #DDD6CC;
--control-shadow: 0 4px 12px rgba(62, 57, 52, 0.06);
--control-hover-bg: #F2EEE8;
--control-hover-text: #3E3934;
--control-hover-border: #CFC7BC;
--control-hover-shadow: 0 6px 16px rgba(62, 57, 52, 0.10);
--control-active-bg: #3E3934;
--control-active-text: #F7F4EE;
--control-active-border: #3E3934;
--control-active-shadow: 0 8px 18px rgba(62, 57, 52, 0.16);
--control-disabled-bg: #F7F4EE;
--control-disabled-text: #B8B1A8;
--control-disabled-border: #E7E0D7;
--control-disabled-shadow: none;
--float-bg: rgba(251, 250, 247, 0.88);
--float-icon: #6F685F;
--float-border: rgba(221, 214, 204, 0.9);
--float-shadow: 0 8px 20px rgba(62, 57, 52, 0.08);
--float-hover-bg: #F2EEE8;
--float-hover-icon: #3E3934;
--float-hover-border: #D2CABE;
--float-hover-shadow: 0 10px 24px rgba(62, 57, 52, 0.12);
--float-active-bg: #EAE4DA;
--float-active-icon: #2F2B27;
--float-active-border: #C8BFB2;
--float-active-shadow: 0 6px 16px rgba(62, 57, 52, 0.10);
--page-width: 800px;
--font-logo: "user_font", "汉仪尚巍手书", "HYShangWeiShouShuW", "STKaiti", "Kaiti SC", "Songti SC", serif;
--font-main: "user_font", "LXGW WenKai Screen", "霞鹜文楷 屏幕阅读版", "Noto Serif SC", "Songti SC", "Microsoft YaHei", sans-serif;
--tp-bg: url(//pwsz.com/wp-content/themes/diary-wordpress/static/images/home-bg.jpg);
--main: var(--text-primary);
--margin: 1.25rem;
--hover: var(--accent-brown);
--radius: 10px;
--bg-color: var(--accent-brown);
font-size: 16px;
background: var(--bg-page);
color: var(--text-primary);
}
:root[data-theme="dark"] {
--bg-page: #1E1E1E;
--bg-page-alt: #252525;
--bg-card: #2A2A2A;
--bg-soft: #333333;
--bg-float: #2A2A2A;
--text-primary: #EAEAEA;
--text-body: #CCCCCC;
--text-secondary: #999999;
--text-muted: #777777;
--line-primary: #3A3A3A;
--line-secondary: #444444;
--line-soft: #555555;
--ink-decor: #888888;
--accent-brown: #D7A46B;
--accent-gold: #FFC66B;
--accent-red: #E57C6A;
--control-bg: #2A2A2A;
--control-text: #EAEAEA;
--control-border: #444444;
--control-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
--control-hover-bg: #333333;
--control-hover-text: #FFFFFF;
--control-hover-border: #666666;
--control-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
--control-active-bg: #555555;
--control-active-text: #FFFFFF;
--control-active-border: #777777;
--control-active-shadow: 0 8px 18px rgba(0, 0, 0, 0.7);
--control-disabled-bg: #2A2A2A;
--control-disabled-text: #555555;
--control-disabled-border: #3A3A3A;
--float-bg: rgba(42, 42, 42, 0.88);
--float-icon: #CCCCCC;
--float-border: rgba(60, 60, 60, 0.9);
--float-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
--float-hover-bg: #333333;
--float-hover-icon: #FFFFFF;
--float-hover-border: #555555;
--float-hover-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
--float-active-bg: #555555;
--float-active-icon: #FFFFFF;
--float-active-border: #666666;
--float-active-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
--tp-bg: linear-gradient(rgba(30, 30, 30, .88), rgba(30, 30, 30, .88)), url(//pwsz.com/wp-content/themes/diary-wordpress/static/images/home-bg.jpg);
--main: var(--text-primary);
--hover: var(--accent-brown);
--bg-color: var(--accent-brown);
color-scheme: dark;
}
::placeholder {
color: var(--text-muted);
}
::-webkit-scrollbar {
width: 8px;
height: 8px
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
background-color: var(--ink-decor);
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(62, 57, 52, .08);
border-radius: 10px;
background-color: var(--bg-soft);
display: none;
}
::-webkit-scrollbar-track-piece {
display: none;
}
#site-search-container {
--ink-decor: #B8B1A8;
--bg-soft: #F2EEE8;
color-scheme: light;
scrollbar-color: #B8B1A8 #F2EEE8;
}
::-moz-selection {
color: #fff;
background: var(--bg-color);
}
::selection {
color: #fff;
background: var(--bg-color);
}
body {
font-family: var(--font-main);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-width: 0;
background: var(--bg-page);
color: var(--text-primary);
}
html,
body {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: var(--main);
}
a:hover {
color: var(--accent-brown);
text-shadow: none;
text-decoration: underline dotted;
text-underline-offset: 0.3em;
}
a.card:hover { }
li {
list-style: none;
}
input,
textarea,
select {
font-family: var(--font-main);
list-style: none;
font-size: 16px;
border: unset;
padding: 0.5rem;
height: auto;
line-height: 1.25rem;
color: var(--main);
background: unset;
width: 100%;
}
.title_block_title svg,
.cat_menu svg {
width: 1.15rem;
}
.ztj-leaf {
width: 31px;
height: 31px;
flex: 0 0 auto;
color: var(--accent-gold);
}
.ztj-rss-hero-main {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
.ztj-rss-hero-icon {
width: 25px;
height: 25px;
flex: 0 0 auto;
color: var(--accent-gold);
}
img {
max-width: 100%;
height: auto;
-webkit-transition: 0.5s;
transition: 0.5s;
}
video,
iframe,
embed,
object {
max-width: 100%;
}
img.lazyloading {
-webkit-filter: blur(2rem);
filter: blur(2rem);
opacity: 0;
}
img.lazyloaded {
filter: blur(0);
-webkit-filter: blur(0);
opacity: 1;
display: block;
}
h1 {
font-size: 1.75rem;
margin: 2rem 0;
}
.user {
display: flex;
align-items: center;
}
.avatar {
width: 2.75rem;
height: 2.75rem;
vertical-align: middle;
-o-object-fit: cover;
object-fit: cover;
}
.cat_menu {
position: sticky;
top: 0;
width: 100%;
z-index: 10;
display: flex;
gap: 1rem;
justify-content: space-between;
margin-bottom: 2rem;
margin-top: 1.75rem;
box-shadow: 5px 5px 0 -2px var(--ink-decor), 5px 5px var(--ink-decor) !important;
padding: 0.6em;
}
.cat_menu .left {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.cat_menu .left .description {
font-size: 14px;
line-height: 25px;
}
.cat_menu .right {
display: flex;
justify-content: center;
align-items: center;
gap: 0.4rem;
font-size: 1.1rem;
}
@media (min-width:768px) {
.cat_menu {
padding: 1.5em;
}
}
#search {
padding: 3rem 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: clamp(0.6rem, 2.4vw, 1rem);
border-top: 1px solid var(--main);
border-bottom: 1px solid var(--main);
margin: 20px 0;
}
@media (max-width: 650px) {
#search {
padding: 1.5rem 0;
}
#search button {
flex: 0 0 4.75rem;
width: 4.75rem;
}
}
#search input {
font-size: 1.1rem;
}
#search button {
width: 6rem;
background: unset;
cursor: pointer;
}
#search button:hover {
background: var(--bg-color);
color: #fff;
}
#search button svg {
width: 1.5rem;
color: black;
}
#search button:hover svg {
fill: #fff;
}
.footer {
width: 100%;
text-align: center;
padding-top: 20px;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
}
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
cursor: pointer;
}
@media (max-width: 360px) {
html {
--margin: 0.875rem;
}
}
*[cat_title]:hover {
overflow: visible;
cursor: pointer;
}
*[cat_title] {
overflow: hidden;
position: relative;
}
*[cat_title]:hover:before,
*[cat_title]:hover:after {
opacity: 1;
transform: translate3d(-50%, -3px, 0);
}
*[cat_title]:before,
*[cat_title]:after {
position: absolute;
z-index: 10;
opacity: 0;
transform: translate3d(-50%, 0, 0);
transition: 300ms ease;
}
*[cat_title]:before {
content: attr(cat_title);
top: calc(-1.5em - 6px - 5px);
left: 50%;
padding: 3px 6px;
line-height: 1.5;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 1rem;
white-space: nowrap;
box-sizing: content-box;
pointer-events: none;
letter-spacing: 0;
}
.float-right {
position: fixed;
right: max(18px, env(safe-area-inset-right));
bottom: max(22px, env(safe-area-inset-bottom));
z-index: 1500;
display: grid;
gap: 10px;
}
.operator-button {
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border: 1px solid var(--float-border);
border-radius: 50%;
background: var(--float-bg);
box-shadow: var(--float-shadow);
color: var(--float-icon);
cursor: pointer;
transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.operator-button:hover {
border-color: var(--float-hover-border);
background: var(--float-hover-bg);
box-shadow: var(--float-hover-shadow);
color: var(--float-hover-icon);
transform: translateY(-2px) scale(1);
}
#themeToggleBtn {
display: inline-flex;
}
#themeToggleBtn svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
#themeToggleBtn .tp-icon-moon {
fill: currentColor;
stroke: none;
}
#themeToggleBtn .tp-icon-sun {
display: none;
}
:root[data-theme="dark"] #themeToggleBtn .tp-icon-moon {
display: none;
}
:root[data-theme="dark"] #themeToggleBtn .tp-icon-sun {
display: block;
}
#postTocBtn.is-active {
border-color: var(--float-active-border);
background: var(--float-active-bg);
box-shadow: var(--float-active-shadow);
color: var(--float-active-icon);
transform: translateY(-2px) scale(1);
}
.post-toc-panel {
position: fixed;
right: max(76px, calc(env(safe-area-inset-right) + 76px));
bottom: max(22px, env(safe-area-inset-bottom));
z-index: 1400;
width: min(250px, calc(100vw - 112px));
max-height: min(320px, calc(100vh - 72px));
overflow: hidden;
border: 1px solid var(--line-primary);
border-radius: 12px;
background: var(--bg-card);
box-shadow: 0 18px 42px rgba(62, 57, 52, .14);
color: var(--text-body);
opacity: 0;
pointer-events: none;
transform: translateY(10px) scale(.98);
transform-origin: right bottom;
transition: opacity .2s ease, transform .2s ease;
}
.post-toc-panel.is-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.post-toc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid var(--line-secondary);
}
.post-toc-head strong {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-primary);
font-size: 14px;
font-weight: 600;
}
.post-toc-title-icon {
width: 17px;
height: 17px;
stroke-width: 1.9;
}
#postTocClose {
width: 26px;
height: 26px;
border: none;
border-radius: 50%;
background: var(--bg-soft);
color: var(--text-secondary);
cursor: pointer;
}
.post-toc-list {
display: grid;
gap: 1px;
max-height: 268px;
overflow-y: auto;
padding: 7px;
}
.post-toc-link {
position: relative;
display: block;
padding: 6px 9px;
padding-left: 20px;
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.45;
text-decoration: none;
}
.post-toc-link::before {
content: "";
position: absolute;
left: 9px;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: .55;
transform: translateY(-50%);
}
.post-toc-link:hover {
background: var(--bg-soft);
color: var(--accent-brown);
text-decoration: none;
}
.post-toc-link.level-h2 {
padding-left: 30px;
}
.post-toc-link.level-h2::before {
left: 19px;
}
.post-toc-link.level-h3 {
padding-left: 40px;
color: #8a7d70;
}
.post-toc-link.level-h3::before {
left: 29px;
}
@media (max-width: 640px) {
.post-toc-panel {
right: max(16px, env(safe-area-inset-right));
bottom: max(184px, calc(env(safe-area-inset-bottom) + 184px));
width: min(270px, calc(100vw - 32px));
max-height: min(310px, calc(100vh - 120px));
}
}
.qmsg.qmsg-wrapper {
top: 20px !important;
z-index: 10040 !important;
color: #6C5947 !important;
font-size: 17px !important;
}
.qmsg .qmsg-item {
padding: 0 8px 8px;
}
.qmsg .qmsg-item .qmsg-content {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
min-width: 0 !important;
max-width: min(420px, calc(100vw - 36px)) !important;
min-height: 0 !important;
padding: 12px 50px 12px 18px !important;
border: 1px solid rgba(194, 166, 132, .64) !important;
border-radius: 12px !important;
background: #F3ECE2 !important;
box-shadow: 0 8px 20px rgba(82, 60, 39, .12), inset 0 1px 0 rgba(255, 250, 242, .86) !important;
color: #6C5947 !important;
overflow: hidden !important;
}
.qmsg .qmsg-item .qmsg-content::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
width: 54px;
height: 36px;
background: url(//pwsz.com/wp-content/themes/diary-wordpress/static/images/dialog_bg.png) right center / contain no-repeat;
opacity: .16;
pointer-events: none;
transform: translateY(-50%);
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] {
position: relative;
z-index: 1;
display: inline-flex !important;
align-items: center !important;
min-width: 0;
min-height: 0;
color: #6C5947 !important;
font-size: 15px !important;
line-height: 1.65 !important;
letter-spacing: 0;
white-space: normal !important;
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-]>span {
display: inline-block;
min-width: 0;
max-width: min(330px, calc(100vw - 118px));
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon:first-child {
flex: 0 0 22px !important;
width: 22px !important;
height: 22px !important;
margin-right: 12px !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #8FA763 !important;
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon:first-child svg {
display: block;
width: 22px;
height: 22px;
margin: 0;
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon:first-child svg path,
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon:first-child svg circle {
stroke: currentColor;
}
.qmsg .qmsg-item .qmsg-content .qmsg-content-warning .qmsg-icon:first-child {
color: #B98750;
}
.qmsg .qmsg-item .qmsg-content .qmsg-content-error .qmsg-icon:first-child {
color: #B86A58;
}
.qmsg .qmsg-item .qmsg-content .qmsg-content-info .qmsg-icon:first-child,
.qmsg .qmsg-item .qmsg-content .qmsg-content-loading .qmsg-icon:first-child {
color: #8D9A8B;
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close {
position: absolute;
right: 12px;
top: 50%;
margin-left: 0;
color: #9B7654;
opacity: .74;
transform: translateY(-50%) scale(.9);
}
.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close:hover>svg path {
stroke: #7A5638;
}
:root[data-theme="dark"] .qmsg.qmsg-wrapper,
:root[data-theme="dark"] .qmsg .qmsg-item .qmsg-content,
:root[data-theme="dark"] .qmsg .qmsg-item .qmsg-content [class^=qmsg-content-],
:root[data-theme="dark"] .qmsg .qmsg-item .qmsg-content [class^=qmsg-content-]>span {
color: #F0E2D0 !important;
}
:root[data-theme="dark"] .qmsg .qmsg-item .qmsg-content {
border-color: rgba(215, 164, 107, .55) !important;
background: rgba(42, 42, 42, .96) !important;
box-shadow: 0 10px 26px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
:root[data-theme="dark"] .qmsg .qmsg-item .qmsg-content .qmsg-content-warning .qmsg-icon:first-child {
color: #F0A83A !important;
}
:root[data-theme="dark"] .qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close {
color: #D9B98F !important;
opacity: .86;
}
:root[data-theme="dark"] .qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close:hover>svg path {
stroke: #F0E2D0 !important;
}