/* =============================================== */
/* === 唯美中文字体 (移动端优化版) === */
/* =============================================== */
/*
* 注意：LXGWWenKaiScreen.woff2 字体文件高达 10MB，
* 在移动网络下加载非常慢，因此仅在桌面端加载。
* 移动端使用系统字体，显著提升加载速度。
*/
/* 仅在大屏幕设备 (桌面端) 加载中文字体 */
@media (min-width: 769px) {
@font-face {
font-family: 'LXGWWenKaiScreen';
src: url('/usr/themes/Brave/asset/Font/LXGWWenKaiScreen.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
}
/* 全局字体设置：优先使用系统美观字体 */
* {
font-family: 'LXGWWenKaiScreen', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}
/* ====== 防止页面晃动 - 强制显示滚动条 ====== */
html {
overflow-y: scroll; /* 始终显示垂直滚动条 */
scrollbar-gutter: stable; /* 现代浏览器：保持滚动条空间稳定 */
}
body {
overflow-x: hidden; /* 禁止水平滚动 */
min-height: 100vh;
}
a {
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
}
.page-navigator {
display: flex;
}
.page-navigator li {
margin: 0 10px;
}
ol,
p {
margin: 0;
}
ol {
list-style: none;
padding: 0;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-corner {
background: unset;
}
::-webkit-scrollbar-thumb {
background: hsla(0, 0%, 52.9%, .4);
border-radius: 6px;
}
::-webkit-scrollbar-track {
background: hsla(0, 0%, 52.9%, .1);
}
::-webkit-scrollbar-track {
background-color: #fff;
}
.avatar-img {
height: 150px;
width: 150px;
object-fit: cover;
border: rgba(255, 255, 255, 0.8) 4px solid;
box-shadow: 0 8px 30px rgba(255, 105, 180, 0.25);
transition: all 0.4s ease;
}
.avatar-img:hover {
transform: scale(1.05);
box-shadow: 0 12px 40px rgba(255, 105, 180, 0.35);
}
@keyframes heartbeat {
0% {
transform: scale(1) rotate(-45deg);
}
20% {
transform: scale(1.25) rotate(-45deg);
}
40% {
transform: scale(1.5) rotate(-45deg);
}
}
.lover-container {
max-width: 500px !important;
width: 500px;
height: 50vh;
}
.lover-background {
position: absolute;
width: 100%;
height: 420px;
left: 0;
top: 0;
z-index: -1;
object-fit: cover;
background-position-x: center;
background-position-y: center;
background-size: cover;
}
.lover-background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
}
.main-hero-header,
.main-hero-waves-area {
width: 100%;
position: absolute;
left: 0;
z-index: 0;
}
.main-hero-waves-area {
bottom: -5px;
}
.waves-area .waves-svg {
width: 100%;
height: 5rem
}
.waves-area .parallax>use {
-webkit-animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite
}
.waves-area .parallax>use:first-child {
-webkit-animation-delay: -2s;
animation-delay: -2s;
-webkit-animation-duration: 7s;
animation-duration: 7s;
fill: rgba(255, 200, 215, 0.7)
}
.waves-area .parallax>use:nth-child(2) {
-webkit-animation-delay: -3s;
animation-delay: -3s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
fill: rgba(255, 190, 210, 0.5)
}
.waves-area .parallax>use:nth-child(3) {
-webkit-animation-delay: -4s;
animation-delay: -4s;
-webkit-animation-duration: 13s;
animation-duration: 13s;
fill: rgba(255, 218, 233, 0.3)
}
.waves-area .parallax>use:nth-child(4) {
-webkit-animation-delay: -5s;
animation-delay: -5s;
-webkit-animation-duration: 20s;
animation-duration: 20s;
fill: #fff5f8
}
@-webkit-keyframes move-forever {
0% {
-webkit-transform: translate3d(-90px, 0, 0);
transform: translate3d(-90px, 0, 0)
}
to {
-webkit-transform: translate3d(85px, 0, 0);
transform: translate3d(85px, 0, 0)
}
}
@keyframes move-forever {
0% {
-webkit-transform: translate3d(-90px, 0, 0);
transform: translate3d(-90px, 0, 0)
}
to {
-webkit-transform: translate3d(85px, 0, 0);
transform: translate3d(85px, 0, 0)
}
}
.lover-card-title {
background: -webkit-linear-gradient(left, red, #00f);
background: -o-linear-gradient(right, red, #00f);
background: -moz-linear-gradient(right, red, #00f);
background: linear-gradient(to right, red, #00f);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.avatar-md img {
width: 65px;
height: 65px;
}
#loveList,
.list-content {
max-width: 650px;
width: 100%;
}
#loveList section {
display: block;
padding-top: 50%;
background-position: 50% 50%;
background-color: white;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.statusIcon {
width: 18px;
height: 18px;
margin-right: .8rem;
}
.indexPlate a:hover {
color: initial;
text-decoration: none;
}
.indexPlate a {
color: inherit;
}
textarea.form-control {
resize: vertical;
background-size: contain;
background-repeat: no-repeat;
background-position: right;
margin-bottom: 2px;
background-image: url(/usr/themes/Brave/asset/img/comments.png);
transition: all 0.25s ease-in-out 0s;
}
textarea.form-control:focus {
border: 1px solid #fedcc2;
box-shadow: 1px 1px 2px 1px #fff5ee;
background-position-y: 200px;
transition: all 0.25s ease-in-out 0s;
}
#qq.form-control:focus,
#mail.form-control:focus,
#author.form-control:focus,
#url.form-control:focus {
border: 1px solid #fedcc2;
box-shadow: 1px 1px 2px 1px #fff5ee;
}
#qq.form-control,
#url.form-control,
textarea.form-control,
#author.form-control,
#mail.form-control {
margin: 16px auto !important;
}
.btn-outline-danger {
color: #fa862b !important;
border-color: #fa862b !important;
}
.btn-outline-danger:hover {
background-color: #fb984b !important;
color: #fff !important;
}
.list-text {
line-height: 2.2;
text-align: center;
}
.bigfontNum {
font-size: 2rem;
}
.indexPlate .card {
margin-bottom: 1rem;
}
@media screen and (max-width: 600px) {
/* =================================================================== */
/* === 移动端全局优化 v2.0 === */
/* =================================================================== */
/*
* 主要修复：
* 1. 页面水平溢出导致的晃动
* 2. BGM 播放器溢出屏幕
* 3. 底部导航栏遮挡页脚
* 4. 计时器和恋爱时间布局
* 5. SVG 和装饰元素溢出
*/
/* --- A. 全局溢出控制 --- */
html,
body {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
position: relative !important;
}
/* 所有容器限制宽度 */
*,
*::before,
*::after {
max-width: 100vw !important;
box-sizing: border-box !important;
}
/* --- B. BGM 播放器移动端修复 --- */
#bgmplayer {
/* 移动端隐藏，或使用后台设置 */
/* 如果后台设置为显示，则限制宽度 */
max-width: 250px !important;
right: 0 !important;
transform: translateX(200px) !important;
}
#bgmplayer.bgmon {
transform: translateX(0) !important;
}
/* --- C. 底部导航栏和页脚修复 --- */
.mobile-navbar {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
padding: 8px 0 !important;
height: 60px !important;
}
/* 页脚底部留出空间，防止被导航栏遮挡 */
footer {
padding-bottom: 65px !important;
margin-bottom: 0 !important;
}
body {
padding-bottom: 0 !important;
min-height: auto !important;
}
/* --- D. 恋爱计时器和小手一牵优化 --- */
.runtime-counter,
#span_dt_dt,
#site_runtime {
font-size: 15px !important;
line-height: 1.8 !important;
text-align: center !important;
white-space: normal !important;
word-break: keep-all !important;
padding: 8px 12px !important;
}
/* 时间数字样式 */
.time-number {
display: inline-block !important;
font-size: 20px !important;
font-weight: bold !important;
color: #ff1493 !important;
min-width: auto !important;
padding: 3px 6px !important;
background: linear-gradient(135deg, rgba(255, 107, 136, 0.15), rgba(255, 182, 193, 0.2)) !important;
border-radius: 6px !important;
margin: 0 3px !important;
text-shadow: 0 1px 2px rgba(255, 20, 147, 0.2) !important;
}
/* 页脚容器 */
.footer-container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
padding: 10px !important;
}
/* 心形容器 */
.heart-container {
margin: 10px 0 !important;
}
.heart2 {
transform: scale(0.8) !important;
}
/* 页脚标题 */
.lover-card-title,
footer h6 {
font-size: 14px !important;
line-height: 1.8 !important;
text-align: center !important;
margin: 5px 0 !important;
}
/* === 恋爱计时器标题移动端优化 === */
.warm-text-glow {
font-size: 1.1rem !important;
}
.dynamic-time-display {
font-size: 1.1rem !important;
letter-spacing: 1px !important;
}
.dynamic-time-display .time-number {
font-size: 1.5rem !important;
padding: 0 3px !important;
}
/* --- E. 头像区域修复 --- */
.lover-container {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
min-height: 25vh;
padding: 15px 10px !important;
box-sizing: border-box;
}
.lover-box {
display: flex !important;
gap: 0.8rem !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
padding: 0 10px;
box-sizing: border-box;
}
.lover-avatar-wrapper {
flex-shrink: 0 !important;
text-align: center;
max-width: 120px;
}
.avatar-container {
width: 85px !important;
height: 85px !important;
position: relative !important;
display: inline-block !important;
margin: 0 auto !important;
}
.avatar-img {
width: 85px !important;
height: 85px !important;
object-fit: cover !important;
border: rgba(255, 255, 255, 0.7) 3px solid !important;
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3) !important;
border-radius: 50% !important;
}
.avatar-container .avatar-img {
width: 100% !important;
height: 100% !important;
}
.avatar-container .avatar-frame {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 110px !important;
height: 110px !important;
pointer-events: none !important;
z-index: 2 !important;
}
.lover-avatar-wrapper h4,
.lover-avatar-wrapper .text-white {
font-size: 13px !important;
margin-top: 8px !important;
white-space: nowrap;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
color: #fff !important;
font-weight: 500;
}
.lover-heartbeat {
width: 45px !important;
height: 45px !important;
filter: drop-shadow(0 0 8px rgba(255, 107, 136, 0.6));
}
.lover-heart-wrapper {
flex-shrink: 0 !important;
padding: 0 10px;
display: flex;
align-items: center;
}
/* --- F. SVG 和装饰元素溢出控制 --- */
svg {
max-width: 100% !important;
height: auto !important;
}
/* 隐藏可能造成溢出的装饰元素 */
.denglong,
.floating-decor,
.lantern__warpper,
.dream-orb,
.fireflies {
display: none !important;
}
/* 粒子效果限制 */
#particles-js,
.petals-container {
width: 100% !important;
max-width: 100vw !important;
overflow: hidden !important;
}
/* --- G. 其他元素修复 --- */
.waves-area .waves-svg {
width: 100%;
height: 3rem;
}
.bigfontNum {
font-size: 1.2rem;
}
.list-content {
max-width: 100%;
width: 95%;
padding: 0 10px;
box-sizing: border-box;
}
.indexPlate {
padding: 0 5px !important;
}
.indexPlate .card {
margin: 5px !important;
}
/* --- H. 侧边栏隐藏 --- */
.floating-sidebar {
display: none !important;
}
/* --- I. 加载动画优化 --- */
#loading-overlay {
background-size: contain !important;
}
}
#article img {
max-width: 100%;
}
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: linear-gradient(90deg, #ff8fab 0%, #ff6b8a 50%, #c9b8d9 100%);
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 3px;
box-shadow: 0 1px 6px rgba(255, 107, 138, 0.35);
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #ff6b8a, 0 0 5px #ff6b8a;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* 隐藏右上角 spinner，只保留顶部进度条 */
#nprogress .spinner {
display: none;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 全局声明 */
#article {
line-height: 1.6rem;
letter-spacing: .3px;
}
/* 标题 */
#article h1,
h2,
h3 {
color: #666;
font-weight: 700 !important;
}
#article h1:before {
display: block;
content: "";
margin-top: 30px
}
#article h1:nth-of-type(1)::before {
display: block;
margin-top: 10px;
}
#article h1 {
font-size: 28px !important;
color: #666;
line-height: 1.4;
margin: 2rem auto 1.4rem !important;
background: linear-gradient(to bottom, transparent 65%, rgba(152, 176, 141, .2) 0) no-repeat;
width: auto;
display: inline;
}
#article h1:after {
display: block;
content: "";
margin-bottom: 10px;
}
#article h2 {
font-size: 24px !important;
margin: 1.6rem auto 1.2rem !important;
border-left: 5px solid #98B08D;
padding: .1rem .3rem;
}
#article h3 {
margin: 1.4rem auto 1.2rem !important;
font-size: 21px !important;
font-weight: bold;
padding-bottom: 3px;
border-bottom: 1px solid rgba(233, 238, 231);
}
#article h4 {
margin: 1rem auto 1rem !important;
font-size: 19px !important;
}
#article h5 {
margin: 1rem auto 1rem !important;
font-size: 17px;
color: #98B08D;
}
#article h6 {
margin: 1rem auto 1rem !important;
font-size: 17px;
}
/* 段落 */
#article p {
font-size: 15px;
}
/* 引用 */
#article blockquote {
font-family: "Helvetica", Arial, "kaiti", "pingfangSC light", "microsoft yahei" !important;
margin: 1.6rem auto 1.2rem !important;
padding: 15px 15px 15px 15px;
line-height: 27px;
background-color: #F7F7F7;
border-left: 3px solid #98B08D;
color: #808080;
display: block;
}
/* 行内代码 */
#article li code,
p code {
color: #789769 !important;
background-color: rgba(233, 238, 231, 0.5);
font-family: "LM Mono 10", "microsoft yahei", "Times New Roman", Arial, simsun, "pingfangSC light", sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
margin: 0 4px;
padding: 1px 2px;
border-radius: 2px;
box-shadow: 0 0 .8px .8px rgba(129, 181, 103, .5);
}
/*列表*/
#article ol,
#article ul {
padding-left: 25px;
margin: .5rem 0;
}
#article ol>li,
#article ul>li {
color: #333;
}
#article li::marker {
color: #617a55;
}
#article ol {
margin: 1.2rem auto 1rem !important;
padding-left: 25px !important;
list-style-type: decimal !important;
}
#article ul {
list-style-type: circle;
}
#article ul ul,
#article ol ul {
list-style-type: disc;
}
#article ul ul ul,
#article ol ul ul,
#article ol ol ul,
#article ul ol ul {
list-style-type: square;
}
/*表格*/
#article table {
margin: 1.6rem auto !important;
width: 100%;
overflow: auto;
display: table;
font-size: 14px;
border-spacing: 0;
border-collapse: collapse;
word-break: normal;
word-wrap: normal;
border-radius: 3px;
box-shadow: 2px 2px 5px 1px #8c8c8c61;
}
#article table td,
table th {
border-radius: 3px;
padding: 6px 13px;
word-break: keep-all;
}
#article table th {
font-weight: 700;
color: #789769;
background-color: #f8f8f8;
}
#article table tr:nth-child(2n) {
background-color: #f8f8f8;
}
/* 分割线 */
#article hr {
margin: 2rem 0 !important;
border-top: 2px dotted #F2F2F2 !important;
}
#article pre {
margin: 1.2rem auto 1.6rem !important;
padding: 10px 15px;
background-color: #F2F2F2 !important;
border-radius: 5px;
}
/* 图片 */
#article img {
margin: 1rem auto;
border: 10px solid #ffffff !important;
outline: 1px solid #F2F2F2;
}
/* 文字加粗 */
#article strong {
color: #6FB147;
font-weight: bold;
}
#article strong::before {
content: '「';
}
#article strong::after {
content: '」';
}
/* 动态彩虹字 考虑到斜体用的比较少，将斜体语法改为显示动态彩虹字 */
#article em {
font-style: normal;
background-image: linear-gradient(to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered);
background-size: 110vw;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-animation: rainbow 60s linear infinite;
animation: rainbow 60s linear infinite;
}
@keyframes rainbow {
100% {
background-position: -2000vw;
}
}
button,
input,
optgroup,
select,
textarea {
margin: 1rem 0 1rem -15px !important;
}
/* 删除线 */
del {
padding: 1px 2px;
text-decoration: line-through #F87466;
color: #808080;
}
/* 文章最后加上THE STORY CONTINUES... */
#article:after {
content: 'THE STORY CONTINUES...';
font-size: 16px;
display: block;
text-align: center;
margin-top: 50px;
color: #999;
border-bottom: 1px solid #eee;
}
/*文字高亮*/
.highlight {
background-color: #9BE9B3;
padding: 2px 4px;
margin: 0 2px;
}
.card {
margin: 10px;
}
.cardshadow {
border: solid #87CEEB4D !important;
border-radius: 10px !important;
box-shadow: 4px 8px 8px rgba(135, 206, 235, 0.3) !important;
transition: 0.3s ease-in-out;
}
.cardshadow:hover {
box-shadow: 4px 8px 10px rgba(135, 206, 235, 0.5) !important;
}
.loveList-title {
background: -webkit-linear-gradient(left, red, orange);
background: -o-linear-gradient(right, red, orange);
background: -moz-linear-gradient(right, red, orange);
background: linear-gradient(to right, red, orange);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: block;
text-align: center;
margin-bottom: 30px;
}
/*祝福板昵称美化*/
.name {
font-size: 14px;
color: #00BF63;
font-weight: 500;
line-height: 1;
border-right: 1px solid #d8d8d8;
margin-right: 10px;
padding-right: 10px;
}
.name a {
color: #38B6FF;
}
.name a:hover {
color: #d05e05;
}
.name-author {
color: #FFFFFF;
background-color: pink;
border-radius: 50%;
}
/*祝福边框*/
.commentframe {
padding: 20px 25px 40px 25px;
background-color: white;
}
@keyframes light {
0% {
box-shadow: 0 0 4px #ff1354;
}
25% {
box-shadow: 0 0 16px #1ebbff;
}
50% {
box-shadow: 0 0 4px #0ed39f;
}
75% {
box-shadow: 0 0 16px #4fe7f4;
}
100% {
box-shadow: 0 0 4px #f35444;
}
}
/* 彩色滚动条样式 */
::-webkit-scrollbar {
width: 4px;
height: 1px;
}
::-webkit-scrollbar-thumb {
background-color: #12b7f5;
background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #f6f6f6;
}
/* 适配移动端 */
.pcbdmap {
display: block;
}
@media (max-width: 998px) {
.pcbdmap {
display: none;
}
}
.grayscale-filter {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
/* OwO表情 */
.OwO-item {
background-color: #fff !important;
}
/* 表情选择器层级抬高，避免被评论卡片/回复按钮遮挡 */
.OwO .OwO-body {
z-index: 99999 !important;
max-width: 90vw;
box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
}
/* OwO 容器在打开时提升层级，确保面板盖过下方评论列表 */
.OwO.OwO-open {
z-index: 99998;
position: relative;
}
/* 表情面板内容区可滚动 */
.OwO .OwO-body .OwO-items {
overflow-y: auto !important;
overflow-x: hidden !important;
max-height: 220px !important;
-webkit-overflow-scrolling: touch;
}
/* tab 栏不要出现滚动条 */
.OwO .OwO-bar {
overflow: visible !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap;
}
/* 表情图片统一尺寸，去掉 OwO.json 里写死的 36px 造成的溢出 */
.OwO .OwO-items-image .OwO-item img {
width: 28px !important;
height: 28px !important;
max-width: 28px !important;
object-fit: contain;
}
/* 手机端OwO表情 */
@media screen and (max-width: 840px) {
.OwO .OwO-body .OwO-items {
max-height: 180px !important;
}
.OwO-items .OwO-item {
padding: 3px !important;
}
.OwO .OwO-body .OwO-bar {
height: auto !important;
}
.OwO-bar {
overflow-y: hidden !important;
}
.OwO-packages li {
font-size: 13px !important;
padding: 0 5px !important;
line-height: 30px !important;
}
}
/*情话框*/
.lovecontent {
border: none;
background: linear-gradient(to right, white, pink);
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
height: auto;
width: 95%;
background-color: #FFFFFF;
border-radius: 10px;
box-shadow: 1px 4px 15px rgb(125 147 178 / 30%);
}
/* logo扫光特效 */
.navbar-brand {
position: relative;
overflow: hidden;
margin: 0px 0 0 0px;
}
.navbar-brand:before {
content: "";
position: absolute;
left: -665px;
top: -460px;
width: 200px;
height: 15px;
background-color: rgba(255, 255, 255, .5);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: searchLights 6s ease-in 0s infinite;
-o-animation: searchLights 6s ease-in 0s infinite;
animation: searchLights 6s ease-in 0s infinite;
}
@-moz-keyframes searchLights {
50% {
left: -100px;
top: 0;
}
65% {
left: 120px;
top: 100px;
}
}
@keyframes searchLights {
40% {
left: -100px;
top: 0;
}
60% {
left: 120px;
top: 100px;
}
80% {
left: -100px;
top: 0px;
}
}
.graHover {
position: relative;
overflow: hidden;
}
/*淡入效果*/
.fade-in-1 {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
.fade-in-2 {
opacity: 0;
transform: translateY(-30px);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
/*下雪特效*/
.xiaxue {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 100001;
}
/* 弹窗背景渐变和阴影 */
.modal-content {
background: linear-gradient(to right, pink, white) !important;
border-radius: 15px !important;
box-shadow: 1px 4px 15px rgb(125 147 178 / 30%) !important;
}
/* 弹窗按钮样式 */
.btn-custom {
background-color: pink !important;
color: white !important;
border-radius: 30px !important;
padding: 10px 20px !important;
font-weight: bold !important;
transition: background-color 0.5s ease !important;
}
.btn-custom:hover {
background-color: #ff3e6c !important;
}
/* 弹窗标题样式 */
.modal-title {
font-size: 1.5rem !important;
font-weight: bold !important;
color: #333 !important;
}
.modal-body {
font-size: 1rem !important;
color: #555 !important;
}
/* 设置弹窗按钮 */
.btn-close {
filter: invert(0) !important;
color: black !important;
}
/* 爱心容器 */
.heart-container {
display: flex;
justify-content: center;
margin: 10px 0;
}
.heart2 {
position: relative;
display: flex;
height: 20px;
justify-content: center;
}
.heart2 span {
width: 4px;
height: 4px;
border-radius: 50%;
margin: 0 3px;
}
.heart2 span:nth-child(1) {
background-color: red;
animation: love1 3.2s 0s infinite;
}
.heart2 span:nth-child(2) {
background-color: darkturquoise;
animation: love2 3.2s 0.2s infinite;
}
.heart2 span:nth-child(3) {
background-color: darksalmon;
animation: love3 3.2s 0.4s infinite;
}
.heart2 span:nth-child(4) {
background-color: deeppink;
animation: love4 3.2s 0.6s infinite;
}
.heart2 span:nth-child(5) {
background-color: yellow;
animation: love5 3.2s 0.8s infinite;
}
.heart2 span:nth-child(6) {
background-color: deeppink;
animation: love4 3.2s 1s infinite;
}
.heart2 span:nth-child(7) {
background-color: darksalmon;
animation: love3 3.2s 1.2s infinite;
}
.heart2 span:nth-child(8) {
background-color: darkturquoise;
animation: love2 3.2s 1.4s infinite;
}
.heart2 span:nth-child(9) {
background-color: red;
animation: love1 3.2s 1.6s infinite;
}
@keyframes love1 {
30%,
50% {
height: 8px;
transform: translateY(-4px);
}
70%,
100% {
height: 4px;
transform: translateY(0);
}
}
@keyframes love2 {
30%,
50% {
height: 16px;
transform: translateY(-8px);
}
70%,
100% {
height: 4px;
transform: translateY(0);
}
}
@keyframes love3 {
30%,
50% {
height: 20px;
transform: translateY(-10px);
}
70%,
100% {
height: 4px;
transform: translateY(0);
}
}
@keyframes love4 {
30%,
50% {
height: 24px;
transform: translateY(-8px);
}
70%,
100% {
height: 4px;
transform: translateY(0);
}
}
@keyframes love5 {
30%,
50% {
height: 26px;
transform: translateY(-6px);
}
70%,
100% {
height: 4px;
transform: translateY(0);
}
}
/* 运行时间样式 */
.runtime-counter {
margin: 10px 0;
font-family: 'Microsoft YaHei', 'Arial', sans-serif;
font-size: 14px;
text-align: center;
color: #666;
padding: 8px 0;
line-height: 1.5;
}
.runtime-counter .time-number {
color: #FF1493;
font-weight: bold;
font-size: 15px;
margin: 0 2px;
min-width: 18px;
display: inline-block;
text-align: center;
}
/* --- 恋爱清单增强样式 - 开始 --- */
/* 进度条容器 */
.love-list-progress-container {
max-width: 650px;
width: 100%;
margin: 20px auto;
padding: 20px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(135, 206, 235, 0.2);
text-align: center;
}
.love-list-progress-container h5 {
margin-bottom: 15px;
color: #ff69b4;
/* 浪漫的粉色 */
font-weight: bold;
}
/* 进度条背景 */
.progress-bar-bg {
width: 100%;
height: 12px;
background-color: #e9ecef;
border-radius: 6px;
overflow: hidden;
}
/* 进度条内芯 */
.progress-bar-inner {
height: 100%;
background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
border-radius: 6px;
transition: width 1.5s ease-in-out;
}
/* 进度文本 */
.progress-text {
margin-top: 10px;
font-size: 14px;
color: #6c757d;
}
/* 清单项统一样式调整 */
.love-list-item {
margin-bottom: 1rem !important;
border: none !important;
border-radius: 10px !important;
overflow: hidden;
/* 保证圆角生效 */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.love-list-item:hover {
transform: translateY(-5px);
box-shadow: 4px 12px 20px rgba(135, 206, 235, 0.5) !important;
}
/* 折叠按钮样式 */
.love-list-item .accordion-button {
align-items: center;
font-size: 1.1rem;
font-weight: 500;
}
.love-list-item .accordion-button:focus {
box-shadow: none;
}
.love-list-item .accordion-button:not(.collapsed) {
color: #fff;
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}
.love-list-item .accordion-button::after {
/* 替换默认的箭头图标 */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fd7e14'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* “待办”事项样式 */
.love-list-item.status-todo .accordion-button {
background-color: #ffffff;
color: #333;
}
/* “已完成”事项样式 */
.love-list-item.status-completed {
opacity: 0.85;
/* 完成的稍微暗一点 */
}
.love-list-item.status-completed .accordion-button {
background-color: #f8f9fa;
/* 灰色背景 */
color: #6c757d;
}
/* 划线动画的核心 */
.love-list-item.status-completed .item-title {
position: relative;
color: #888;
}
.love-list-item.status-completed .item-title::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #ff8a00, transparent);
transform-origin: left;
animation: strike-through 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
@keyframes strike-through {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* 折叠内容区域样式 */
.love-list-item .accordion-body {
padding: 0;
background: #fff;
}
.love-list-item .completion-time {
padding: 10px 15px;
font-size: 0.9em;
border-bottom: 1px solid #f0f0f0;
}
.love-list-item .item-image {
display: block;
padding-top: 50%;
/* 保持16:9的比例 */
background-position: 50% 50%;
background-color: #f0f0f0;
background-repeat: no-repeat;
background-size: cover;
transition: transform 0.5s ease;
}
.love-list-item .item-image:hover {
transform: scale(1.05);
}
/* --- 恋爱清单增强样式 - 结束 --- */
/* --- 网站标题抖音爱心特效 - 开始 --- */
.tiktok-heart {
text-shadow: -2px 0 rgba(255, 105, 180, 0.7), 2px 0 rgba(255, 255, 105, 0.7);
animation: shake-heart 0.8s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
display: inline-block;
position: relative;
transition: all 0.3s;
}
@keyframes shake-heart {
0% {
text-shadow: 0 0 rgba(255, 105, 180, 0.7), 0 0 rgba(255, 255, 105, 0.7);
transform: scale(1);
}
25% {
text-shadow: -3px 0 rgba(255, 105, 180, 0.7), 3px 0 rgba(255, 255, 105, 0.7);
}
50% {
text-shadow: -5px 0 rgba(255, 20, 147, 0.8), 2px 0 rgba(255, 215, 0, 0.8);
transform: scale(1.05);
}
100% {
text-shadow: 4px 0 rgba(255, 0, 128, 0.9), -4px 0 rgba(255, 192, 203, 0.9);
}
}
.tiktok-heart:hover {
animation: shake-heart 0.3s linear infinite;
color: #fff !important;
text-shadow:
0 0 5px #ff69b4,
0 0 10px #ff1493,
0 0 15px #ff00ff;
}
/* --- 网站标题抖音爱心特效 - 结束 --- */
/* --- 头像间爱心跳动特效 - 开始 --- */
/* 1. 设置新爱心图片的基本样式 */
.lover-heartbeat {
width: 65px;
/* 你可以根据喜好调整大小 */
height: auto;
/* 应用动画，infinite表示无限循环播放 */
animation: heart-pulse 1.5s ease-in-out infinite;
}
/* 2. 定义关键帧动画 "heart-pulse" (心跳动画) */
@keyframes heart-pulse {
0% {
transform: scale(1);
filter: drop-shadow(0 0 2px rgba(255, 20, 147, 0.5));
}
50% {
transform: scale(1.15);
/* 在动画中间放大到115% */
filter: drop-shadow(0 0 10px rgba(255, 20, 147, 1));
}
100% {
transform: scale(1);
filter: drop-shadow(0 0 2px rgba(255, 20, 147, 0.5));
}
}
/* --- 头像间爱心跳动特效 - 结束 --- */
/* --- 头像布局修复与优化 --- */
.lover-box {
gap: 1rem;
/* 在头像和爱心之间设置一个最小间距 */
}
.lover-avatar-wrapper {
/* 限制头像容器的宽度，防止挤压爱心 */
flex-shrink: 0;
}
.lover-heart-wrapper {
flex-shrink: 0;
/* 防止爱心被压缩 */
}
/* 确保头像下的名字不会有额外的下边距，破坏对齐 */
.lover-avatar-wrapper h4 {
margin-bottom: 0;
}
/* ======================================================= */
/* === 全局评论区/祝福墙/说说 最终统一美化方案 v3 === */
/* ======================================================= */
/* --- 1. 桌面端默认样式 (也是移动端的基础) --- */
/* 整体内容区：限制最大宽度，并使用内边距控制留白 */
.list-content {
max-width: 700px;
/* PC端最大宽度 */
width: 100%;
/* 移动端占满，由padding控制 */
padding: 0 15px;
/* 移动端左右留白 */
box-sizing: border-box;
margin: 20px auto !important;
}
/* 评论/说说卡片 */
.comment-body {
margin-top: 15px;
}
.comment-main {
display: flex;
gap: 12px;
/* 头像与内容的间距 */
padding: 15px;
border-radius: 12px;
border: 1px solid #fde4e4;
background: #fff;
/* 简化背景，更干净 */
transition: box-shadow 0.3s ease;
}
.comment-main:hover {
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.1);
}
.comment-avatar .avatar {
width: 42px;
height: 42px;
border-radius: 50%;
}
.comment-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.comment-meta {
font-size: 13px;
color: #999;
margin-bottom: 8px;
}
.comment-author {
font-weight: bold;
color: #f06292;
margin-right: 8px;
}
.comment-text {
font-size: 15px;
line-height: 1.7;
color: #333;
word-break: break-word;
/* 确保长单词或链接能换行 */
}
.comment-text img {
/* 修复图片撑破布局的问题 */
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 8px 0;
}
.comment-text img[src*="/OwO/"],
.comment-text img.smilies {
/* 排除小表情（OwO 与 Smilies 插件统一尺寸） */
display: inline-block;
width: 20px;
height: 20px;
max-width: none;
margin: 0 2px;
vertical-align: -4px;
border-radius: 0;
}
/* =================================================== */
/* === 回复按钮最终美化方案 (右下角悬浮) === */
/* =================================================== */
/* 1. 让父容器可以定位 */
.comment-content {
position: relative;
padding-bottom: 30px;
/* 为按钮留出空间 */
}
/* 2. 回复链接的样式 (Typecho原生) */
.comment-reply a {
position: absolute;
/* 绝对定位 */
right: 0;
/* 定位到右下角 */
bottom: 10px;
/* 外观设计 */
display: inline-flex;
/* 使用flex布局让图标和文字居中 */
align-items: center;
gap: 4px;
background-color: rgba(255, 138, 128, 0.1);
color: #ff5252 !important;
font-size: 12px;
font-weight: bold;
padding: 4px 10px;
border-radius: 20px;
/* 胶囊形状 */
text-decoration: none !important;
border: 1px solid rgba(255, 138, 128, 0.2);
transition: all 0.3s ease;
opacity: 0;
/* 默认隐藏 */
}
/* 3. 添加一个SVG图标 */
.comment-reply a::before {
content: '';
display: block;
width: 14px;
height: 14px;
background-color: currentColor;
/* 颜色继承自标签 */
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'%3E%3C/polyline%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'%3E%3C/path%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'%3E%3C/polyline%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'%3E%3C/path%3E%3C/svg%3E");
mask-size: contain;
-webkit-mask-size: contain;
}
/* 4. 鼠标悬停效果 */
.comment-main:hover .comment-reply a {
opacity: 1;
/* 悬停在整个卡片上时显示按钮 */
}
.comment-reply a:hover {
background-color: #ff8a80;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(255, 82, 82, 0.2);
}
/* 嵌套回复 (楼中楼) */
/* =================================================== */
/* === 楼中楼/嵌套回复 最终布局优化 v4 === */
/* =================================================== */
/* 1. 改造子评论容器的基础布局 (PC端和移动端通用) */
.comment-children {
position: relative;
/* 开启相对定位，为伪元素做准备 */
margin-top: 15px;
padding-left: 20px;
/* 设置一个固定的内边距，作为连接线的空间 */
margin-left: 0;
/* 移除所有外边距缩进 */
border-left: none;
/* 移除之前丑陋的实线边框 */
}
/* 2. 使用伪元素创建优雅的垂直连接线 */
.comment-children::before {
content: '';
position: absolute;
left: 0;
top: -5px;
bottom: 0;
width: 2px;
background-color: #fce4ec;
/* 温馨的粉色 */
}
/* 3. 子评论卡片本身的样式调整 */
.comment-children .comment-main {
padding: 12px;
border-radius: 8px;
/* 子评论圆角可以小一点 */
background: #fff;
/* 子评论背景色简化，减少视觉噪音 */
}
.comment-children .comment-avatar .avatar {
width: 35px;
height: 35px;
}
.comment-children .comment-text {
font-size: 14px;
}
/* 4. 解决“回复 @xxx”的换行问题 */
.comment-reply-to {
display: block;
/* 让它单独占一行 */
margin-bottom: 5px;
}
/* =================================================== */
/* === 原生回复框美化 (移动表单方案) === */
/* =================================================== */
/* 当评论框被移动到评论下方时，给它一些样式 */
.comment-list .respond {
margin-top: 15px;
padding: 15px;
background-color: #fffafb;
border: 1px dashed #fce4ec;
border-radius: 12px;
}
.comment-list .respond .OwO-textarea {
min-height: 70px;
}
/* 取消回复链接的样式 */
.cancel-comment-reply a {
display: inline-block;
padding: 5px 15px;
background-color: #fff9c4;
color: #f57f17 !important;
border-radius: 20px;
font-size: 13px;
text-decoration: none !important;
font-weight: bold;
border: 1px solid #fff59d;
}
.cancel-comment-reply a:hover {
background-color: #fff176;
}
/* 按钮统一格式 */
#comment-form .btn-outline-danger,
.dynamic-reply-form .btn-submit-reply {
background: linear-gradient(135deg, #ff8a80, #ff5252);
color: white !important;
border-radius: 8px !important;
border: none !important;
padding: 10px 24px !important;
font-weight: bold;
transition: all 0.3s ease;
}
#comment-form .btn-outline-danger:hover,
.dynamic-reply-form .btn-submit-reply:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(255, 82, 82, 0.3);
}
/* 动态回复框 */
.dynamic-reply-form {
margin-top: 12px;
margin-left: 54px;
/* PC端缩进，与主评论内容对齐 */
}
.dynamic-reply-form .dynamic-reply-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 8px;
}
/* --- 3. 管理员登录提示 --- */
.admin-login-prompt {
background: #f5f7fa;
border: 1px solid #e0e6ed;
border-radius: 12px;
padding: 25px;
margin-top: 15px;
text-align: center;
}
.admin-login-prompt .lock-icon {
font-size: 30px;
}
.admin-login-prompt h4 {
font-size: 1.1rem;
}
.admin-login-prompt .btn-admin-login {
padding: 10px 25px;
}
/* --- 4. 仅在桌面宽屏上生效的左偏优化 --- */
@media (min-width: 1200px) {
.list-content {
margin-left: 25% !important;
/* 你可以调整这个值 */
margin-right: auto !important;
}
}
/* =================================================== */
/* === 头像呼吸光晕/旋转特效 (精准修复版) === */
/* =================================================== */
/* 1. 将效果直接应用在头像图片![]()
标签上 */
/* 我们使用属性选择器来选中所有作为头像的图片 */
img.avatar,
img.avatar-img {
border-radius: 50%;
/* 确保头像是圆的 */
animation: light 4s ease-in-out infinite;
/* 应用呼吸光晕动画 */
transition: transform 0.8s ease-in-out;
/* 定义旋转的过渡效果 */
}
/* 2. 定义鼠标悬停时的旋转效果 */
img.avatar:hover,
img.avatar-img:hover {
transform: rotate(360deg);
/* 悬停时旋转360度 */
}
/* 3. 光晕动画的关键帧 (这个应该不用动，但为了完整性放在这里) */
@keyframes light {
0% {
box-shadow: 0 0 4px #ff1354;
}
25% {
box-shadow: 0 0 16px #1ebbff;
}
50% {
box-shadow: 0 0 4px #0ed39f;
}
75% {
box-shadow: 0 0 16px #4fe7f4;
}
100% {
box-shadow: 0 0 4px #f35444;
}
}
/* =================================================== */
/* === 仅在移动端生效的终极优化 v5 === */
/* =================================================== */
@media (max-width: 768px) {
/* --- 核心修复：重置列表缩进，消除左侧空白 --- */
.comment-list,
div#comments .list-top>ol {
padding-left: 0 !important;
margin-left: 0 !important;
list-style: none;
}
.comment-body {
padding-left: 0;
margin-left: 0;
}
/* --------------------------------------------- */
.list-content {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.commentframe {
padding: 15px !important;
}
.comment-main {
padding: 12px;
gap: 10px;
}
.comment-avatar .avatar {
width: 40px;
height: 40px;
}
.comment-text {
font-size: 14px;
}
/* 楼中楼连接线式缩进 */
.comment-children {
position: relative;
margin-top: 15px;
padding-left: 20px;
margin-left: 0;
border-left: none;
}
.comment-children::before {
content: '';
position: absolute;
left: 0;
top: -5px;
bottom: 0;
width: 2px;
background-color: #fce4ec;
}
.comment-children .comment-main {
gap: 8px;
}
.comment-children .comment-avatar .avatar {
width: 32px;
height: 32px;
}
/* 回复框 */
.dynamic-reply-form {
margin-left: 0;
}
/* 按钮 */
#comment-form .btn-outline-danger {
width: 100%;
}
}
/* =================================================== */
/* === 动态回复框中 OwO 表情的样式微调 === */
/* =================================================== */
.OwO-for-reply {
margin-top: 8px;
/* 让表情面板和输入框之间有点间距 */
background-color: #fafafa;
border-radius: 6px;
}
.OwO-for-reply .OwO-body {
box-shadow: none;
/* 移除可能继承的阴影 */
}
/* ========================================================== */
/* ========================================================== */
/* === 用户头衔/身份标识 · 流光渐变特效 v7 (全新升级版) === */
/* ========================================================== */
/* --- 1. 基础容器和图标 --- */
.comment-author {
display: inline-flex;
align-items: center;
gap: 8px;
}
.author-icon {
font-size: 1.2em;
line-height: 1;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
/* --- 2. 昵称通用样式 --- */
.author-name {
font-weight: bold;
transition: all 0.3s ease;
}
/* --- 3. 徽章基础样式 (通用) --- */
.author-badge {
position: relative;
display: inline-block;
font-size: 12px;
color: #fff;
padding: 5px 12px;
border-radius: 20px;
/* 改为更柔和的胶囊形状 */
font-family: "Microsoft YaHei", "HarmonyOS_Sans", sans-serif;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
/* 关键：隐藏超出范围的流光背景 */
background-color: #333;
/* 提供一个基础底色 */
}
.author-badge:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
/* --- 4. 流光背景的通用动画容器 (核心) --- */
.author-badge::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
/* 放大背景，确保可以移动 */
height: 200%;
z-index: 0;
animation: aurora-flow 8s linear infinite;
/* 应用流动动画 */
}
/* 确保文字在流光背景之上 */
.author-badge span {
position: relative;
z-index: 1;
}
/* --- 5. 为不同身份定制颜色和光晕 --- */
/* [云中书] - 金色阳光主题 */
.author-level-writer .author-name {
color: #F8D568;
}
.author-level-writer .author-badge {
animation: pulse-glow-writer 4s infinite ease-in-out;
}
.author-level-writer .author-badge::before {
background: radial-gradient(circle at center,
rgba(255, 235, 179, 0.8),
/* 亮黄色核心 */
rgba(255, 204, 102, 0.7),
/* 橙黄色过渡 */
rgba(207, 108, 0, 0.6),
/* 暗金色边缘 */
transparent 70%);
}
/* [画眉人] - 粉紫星云主题 */
.author-level-painter .author-name {
color: #ff79c6;
}
.author-level-painter .author-badge {
animation: pulse-glow-painter 4s infinite ease-in-out;
}
.author-level-painter .author-badge::before {
background: radial-gradient(circle at center,
rgba(253, 173, 225, 0.8),
/* 亮粉色核心 */
rgba(216, 134, 255, 0.7),
/* 紫罗兰过渡 */
rgba(106, 27, 154, 0.6),
/* 深紫色边缘 */
transparent 70%);
}
/* [星尘访客] - 碧绿森林主题 */
.author-level-visitor .author-name {
color: #555;
}
.author-level-visitor .author-badge {
animation: pulse-glow-visitor 4s infinite ease-in-out;
}
.author-level-visitor .author-badge::before {
background: radial-gradient(circle at center,
rgba(121, 255, 234, 0.7),
/* 亮青色核心 */
rgba(72, 201, 176, 0.6),
/* 翠绿色过渡 */
rgba(0, 105, 92, 0.5),
/* 深绿色边缘 */
transparent 70%);
}
/* --- 6. 动画关键帧定义 --- */
/* 通用的流光背景移动动画 */
@keyframes aurora-flow {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* [云中书] 的呼吸光晕 */
@keyframes pulse-glow-writer {
0%,
100% {
box-shadow: 0 0 5px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2);
}
50% {
box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.4);
}
}
/* [画眉人] 的呼吸光晕 */
@keyframes pulse-glow-painter {
0%,
100% {
box-shadow: 0 0 5px rgba(255, 121, 198, 0.4), 0 0 10px rgba(255, 121, 198, 0.3);
}
50% {
box-shadow: 0 0 15px rgba(255, 121, 198, 0.8), 0 0 30px rgba(255, 121, 198, 0.6);
}
}
/* [星尘访客] 的呼吸光晕 */
@keyframes pulse-glow-visitor {
0%,
100% {
box-shadow: 0 0 5px rgba(72, 201, 176, 0.3), 0 0 10px rgba(72, 201, 176, 0.2);
}
50% {
box-shadow: 0 0 15px rgba(72, 201, 176, 0.7), 0 0 30px rgba(72, 201, 176, 0.5);
}
}
/* --- A. 详情页 & 通用样式 --- */
/* 详情页主体容器 */
#article-wrapper {
padding: 30px;
}
@media (max-width: 768px) {
#article-wrapper {
padding: 20px;
}
}
/* 详情页标题 */
.article-title {
font-family: 'LXGWWenKaiScreen', 'HarmonyOS_Sans', sans-serif;
font-size: 2.2rem;
margin-bottom: 15px;
}
/* 详情页 Meta 信息 */
.article-meta-info {
display: flex;
flex-wrap: wrap;
/* 移动端换行 */
gap: 10px 20px;
font-size: 0.85rem;
color: #999;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid #fce4ec;
}
/* --- B. 分类与标签的统一美化样式 (加框凸显) --- */
.post-card-category a,
.tag-link {
display: inline-block;
font-size: 0.75rem !important;
background-color: #f8f9fa;
color: #aaa !important;
padding: 4px 10px;
border-radius: 6px;
margin: 0 5px 5px 0;
text-decoration: none !important;
border: 1px solid #eee;
transition: all 0.3s ease;
white-space: nowrap;
/* 防止标签文字换行 */
}
.post-card-category a:hover,
.tag-link:hover {
background-color: #ffe8f0;
color: #ff69b4 !important;
border-color: #ffc0cb;
transform: translateY(-2px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
/* 详情页标签区域 */
.article-tags {
margin-top: 30px;
padding-top: 20px;
border-top: 1px dashed #f0f0f0;
}
.article-tags strong {
font-family: 'LXGWWenKaiScreen', 'HarmonyOS_Sans', sans-serif;
color: #ff69b4;
margin-right: 10px;
}
/* --- C. 文章列表页 - 网格布局样式 --- */
/* 网格容器 */
.post-list-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* 文章卡片 */
.post-card {
margin-bottom: 0;
background: #fff;
border-radius: 16px !important;
box-shadow: 0 8px 30px rgba(255, 182, 193, 0.1) !important;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.post-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(255, 138, 174, 0.2) !important;
}
/* 卡片缩略图 */
.post-card-thumbnail {
display: block;
position: relative;
padding-top: 75%;
overflow: hidden;
background-color: #f5f5f5;
}
.post-card-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.post-card:hover .post-card-thumbnail img {
transform: scale(1.08) rotate(2deg);
}
/* 卡片内容区 */
.post-card-content {
padding: 15px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* 卡片标题 */
.post-card-title {
font-family: 'LXGWWenKaiScreen', 'HarmonyOS_Sans', sans-serif;
font-size: 1.1rem;
font-weight: bold;
line-height: 1.4;
margin: 0 0 auto 0;
padding-bottom: 10px;
}
.post-card-title a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.post-card-title a:hover {
color: #ff69b4;
}
/* 卡片摘要 */
.post-card-excerpt {
font-size: 0.85rem;
line-height: 1.7;
color: #9a8a90;
margin: 0 0 auto 0;
padding-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
/* 卡片底部 Meta 信息 */
.post-card-footer {
padding-top: 10px;
border-top: 1px solid #fdf2f4;
}
.post-meta-info {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
font-size: 0.75rem;
color: #aaa;
}
.meta-item {
display: flex;
align-items: center;
}
.meta-item a {
color: #aaa;
text-decoration: none;
transition: color 0.3s;
}
.meta-item a:hover {
color: #ff69b4;
}
.meta-icon {
width: 14px;
height: 14px;
margin-right: 4px;
flex-shrink: 0;
color: #ff9ec4;
opacity: 0.9;
}
.meta-item a {
color: #b0a0a8;
text-decoration: none;
transition: color 0.3s;
}
.meta-item a:hover {
color: #ff69b4;
}
/* --- D. 分页导航样式 (关键修复) --- */
.pagination-container {
width: 100%;
margin-top: 30px;
}
ul.pagination {
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
/* 按钮间距 */
}
ul.pagination li a,
ul.pagination li span {
display: block;
padding: 8px 14px;
color: #ff69b4;
background-color: #fff;
border: 1px solid #ffe8f0;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
ul.pagination li a:hover {
background-color: #ff69b4;
color: #fff;
border-color: #ff69b4;
transform: translateY(-2px);
}
ul.pagination li.active a,
ul.pagination li.active span {
background-color: #ff69b4;
color: #fff;
border-color: #ff69b4;
cursor: default;
}
/* --- E. 响应式布局 --- */
@media (max-width: 768px) {
.post-list-container {
gap: 15px;
}
.post-card-content {
padding: 12px;
}
.post-card-title {
font-size: 1rem;
}
.post-meta-info {
font-size: 0.7rem;
}
}
/* =================================================== */
/* === 文章内容（点点滴滴）图片样式优化 === */
/* =================================================== */
/* 1. 核心规则：让文章内的所有图片自适应宽度 */
.article-content img {
max-width: 100%;
/* 关键！图片最大宽度为其父容器的100% */
height: auto;
/* 高度自动缩放，保持图片比例 */
display: block;
/* 块级元素，方便控制边距，并避免下方空隙 */
margin: 20px auto;
/* 上下20px间距，并水平居中 */
border-radius: 12px;
/* 给图片加上圆角，与主题风格统一 */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
/* 添加漂亮的阴影 */
}
/* 2. 如果图片被链接包裹，去掉链接的下划线和默认样式 */
.article-content a>img {
border: none;
/* 去掉可能的边框 */
}
/* =================================================== */
/* === 头像框挂件样式 (加强版) === */
/* =================================================== */
/* 1. 头像容器：作为定位的父级 */
.avatar-container {
position: relative !important;
display: inline-block !important;
width: 150px;
height: 150px;
/* 确保它不会被其他样式挤压 */
margin: 0 !important;
padding: 0 !important;
}
/* 2. 原始头像也需要明确尺寸 */
.avatar-container .avatar-img {
width: 100% !important;
height: 100% !important;
}
/* 3. 头像框图片：绝对定位，覆盖在头像之上 */
.avatar-container .avatar-frame {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
/* 使用固定像素值，桌面端头像框比头像大一点 */
width: 240px !important;
height: 240px !important;
max-width: none !important;
pointer-events: none !important;
z-index: 2 !important;
border: none !important;
box-shadow: none !important;
animation: none !important;
margin: 0 !important;
}
/* 4. 移动端适配 - 头像框使用固定像素值 */
@media (max-width: 600px) {
.avatar-container {
width: 85px !important;
height: 85px !important;
}
/* 移动端头像框 - 固定 110px，约为头像的 1.3 倍 */
.avatar-container .avatar-frame {
width: 130px !important;
height: 130px !important;
}
}
/* =================================================== */
/* === 头部视频背景样式 === */
/* =================================================== */
/* 定位视频，使其铺满整个容器 */
.lover-background .hero-video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 核心：裁剪视频以填充，不变形 */
z-index: -1;
/* 确保视频在背景层，并且在半透明遮罩之下 */
}
/* 确保半透明遮罩在视频之上 */
/* 这是对现有样式的补充，确保层级正确 */
.lover-background::before {
z-index: 0;
position: relative;
/* 激活z-index */
}
/* =================================================== */
/* === IP 归属地显示样式 === */
/* =================================================== */
.comment-location {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.68rem;
color: var(--text-3, #9a8a90);
background: linear-gradient(135deg, rgba(232, 180, 188, 0.1), rgba(201, 184, 217, 0.1));
padding: 3px 9px;
border-radius: 20px;
border: 1px solid rgba(232, 180, 188, 0.18);
transition: all 0.2s ease;
}
.comment-location:hover {
color: var(--accent, #c97a85);
border-color: rgba(232, 180, 188, 0.35);
background: linear-gradient(135deg, rgba(232, 180, 188, 0.18), rgba(201, 184, 217, 0.18));
}
.comment-location .loc-icon {
flex-shrink: 0;
width: 12px !important;
height: 12px !important;
opacity: 0.7;
}
/* 去掉旧的 📍 emoji 前缀图标 */
.comment-location::before {
content: none;
}
/* =================================================== */
/* === 甜蜜对话 (聊天记录跳转页) 样式 === */
/* =================================================== */
.chat-redirect-card {
border-radius: 20px !important;
background: #fff;
box-shadow: 0 10px 40px rgba(255, 182, 193, 0.2) !important;
}
.chat-title {
font-family: 'LXGWWenKaiScreen', 'HarmonyOS_Sans', sans-serif;
font-size: 2rem;
font-weight: bold;
color: #ff69b4;
/* 粉色标题 */
}
.chat-icon {
display: inline-block;
animation: chat-icon-bounce 2s ease-in-out infinite;
}
.chat-description {
font-size: 1rem;
line-height: 1.8;
}
.btn-chat-redirect {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
color: #fff !important;
border: none !important;
border-radius: 50px !important;
/* 胶囊按钮 */
padding: 12px 30px !important;
font-size: 1.1rem;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 154, 158, 0.4);
}
.btn-chat-redirect:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 8px 25px rgba(255, 154, 158, 0.6);
}
.btn-chat-redirect .btn-icon {
margin-right: 8px;
display: inline-block;
animation: btn-icon-beat 1.5s infinite;
}
.chat-tip {
color: #aaa;
}
/* 图标动画 */
@keyframes chat-icon-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@keyframes btn-icon-beat {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
/* =================================================== */
/* === 全局字体美化方案 (基于 HarmonyOS_Sans) === */
/* =================================================== */
/* --- 1. 基础设定：让正文更柔和、更易读 --- */
body,
html {
font-size: 16px;
/* 设定一个舒适的基础字号，16px是黄金标准 */
font-weight: 400;
/* 使用更细的字重，让文字看起来更轻盈、优雅。HarmonyOS字体支持多种字重 */
line-height: 1.8;
/* 增加行高，让段落之间呼吸感更强，阅读不累眼 */
letter-spacing: 0.5px;
/* 轻微增加字间距，提升精致感 */
color: #555;
/* 使用深灰色代替纯黑，视觉上更柔和 */
}
/* --- 2. 标题设定：让标题更有层次感和设计感 --- */
/* 所有标题的共同特征 */
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.post-card-title a {
font-weight: 500;
/* 标题使用中等粗细，与正文拉开差距 */
letter-spacing: 1px;
/* 标题的字间距可以更大一些，显得更大气 */
}
/* 最大的文章标题 (post.txt) */
.article-title {
font-size: 2.2rem;
/* 放大字号，更有冲击力 */
line-height: 1.4;
color: #333;
}
/* 页面大标题 (如祝福墙、点点滴滴) */
.list-text {
font-size: 2rem;
font-weight: 700;
/* 可以让这个标题最粗，作为视觉焦点 */
color: #ff69b4;
/* 给它一个浪漫的粉色 */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
/* 加一点轻微的阴影 */
}
/* 卡片和列表中的标题 (indexPage.txt, index.txt) */
.indexPlate .h5,
.post-card-title,
.lover-avatar-wrapper h4 {
font-size: 1.2rem;
font-weight: 500;
color: #444;
}
/* --- 3. 特殊元素微调 --- */
/* 评论/说说内容 */
.comment-text {
font-size: 15px;
/* 评论区的字号可以比正文稍小一点 */
line-height: 1.75;
color: #484848;
}
/* 首页小卡片的描述文字 */
.indexPlate .small.text-muted {
letter-spacing: 0.2px;
/* 描述文字不需要太大的间距 */
color: #999;
}
/* 代码块里的字体保持等宽，不受影响 */
code,
pre {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
/* =================================================== */
/* === 主题首页特效最终增强版 v3.0 === */
/* =================================================== */
/* --- 1. 粒子背景样式 --- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
/* 背景图由 PHP 在 head.php 中动态设置 */
background-size: cover;
background-position: center;
}
#particles-js::before {
/* 保留半透明遮罩 */
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
}
/* --- 2. 3D 卡片特效 --- */
.perspective-container {
perspective: 1000px;
/* 设定视距，这是3D效果的关键 */
margin-bottom: 1rem;
}
.indexPlate .card {
position: relative;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
background: rgba(255, 255, 255, 0.1) !important;
/* 半透明玻璃质感 */
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1) !important;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
will-change: transform, box-shadow;
/* 告诉浏览器这个元素会变化，优化性能 */
}
.perspective-container:hover .card {
box-shadow: 0 20px 40px rgba(255, 105, 180, 0.3) !important;
/* transform 属性将由 JS 控制 */
}
/* 悬浮标题提示 */
.perspective-container::after {
content: attr(data-title);
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
padding: 5px 15px;
background: #ff69b4;
color: white;
border-radius: 20px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s, bottom 0.3s;
pointer-events: none;
z-index: 10;
}
.perspective-container:hover::after {
opacity: 1;
bottom: -40px;
}
/* --- 3. 图标呼吸光晕与动画 --- */
.card-icon {
border-radius: 50%;
box-shadow: 0 0 0px rgba(255, 105, 180, 0.7);
animation: icon-pulse 2.5s infinite;
transform: translateZ(50px);
/* 让图标在3D空间中突出 */
}
@keyframes icon-pulse {
0% {
box-shadow: 0 0 0px rgba(255, 105, 180, 0.3);
}
50% {
box-shadow: 0 0 20px 5px rgba(255, 105, 180, 0.7);
}
100% {
box-shadow: 0 0 0px rgba(255, 105, 180, 0.3);
}
}
.perspective-container:hover .card-icon {
animation: none;
/* 悬停时停止呼吸，变为静态光晕 */
box-shadow: 0 0 30px 8px rgba(255, 105, 180, 1);
}
/* --- 4. 文字动画 --- */
.card-title-text,
.card-desc-text {
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transform: translateZ(30px);
/* 文字也稍微突出 */
}
.perspective-container:hover .card-title-text {
transform: translateZ(50px) translateY(-5px);
color: #ff69b4 !important;
}
.perspective-container:hover .card-desc-text {
transform: translateZ(40px) translateY(5px);
}
/* =============================================== */
/* === 网页加载动画样式 (高级双环光晕版) === */
/* =============================================== */
#loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #fdf2f6 0%, #f7ecf7 45%, #eef3fb 100%);
z-index: 99999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 26px;
transition: opacity 0.7s ease, visibility 0.7s ease;
opacity: 1;
visibility: visible;
}
#loading-overlay.loaded {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* 光晕容器 */
.loader-orb {
position: relative;
width: 96px;
height: 96px;
display: flex;
justify-content: center;
align-items: center;
}
/* 双层旋转光环 */
.loader-ring {
position: absolute;
border-radius: 50%;
border: 2px solid transparent;
}
.loader-ring--outer {
width: 96px;
height: 96px;
border-top-color: #ff8fab;
border-right-color: #ffb3c6;
animation: loader-spin 1.6s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
}
.loader-ring--inner {
width: 66px;
height: 66px;
border-bottom-color: #c9b8d9;
border-left-color: #e0cfe8;
animation: loader-spin-reverse 1.1s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
}
/* 中心柔和光点 */
.loader-core {
width: 18px;
height: 18px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #ffb3c6, #ff6b8a);
box-shadow: 0 0 20px rgba(255, 107, 138, 0.65), 0 0 42px rgba(255, 143, 171, 0.4);
animation: loader-pulse 1.4s ease-in-out infinite;
}
/* 环绕星光粒子 */
.loader-spark {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #ffd6e0;
box-shadow: 0 0 10px rgba(255, 143, 171, 0.8);
animation: loader-orbit 2.6s linear infinite;
}
.loader-spark--1 { animation-delay: 0s; }
.loader-spark--2 { animation-delay: 0.9s; }
.loader-spark--3 { animation-delay: 1.7s; }
/* 底部提示文字 */
.loader-text {
font-family: 'LXGWWenKaiScreen', 'HarmonyOS_Sans', sans-serif;
font-size: 0.9rem;
letter-spacing: 3px;
color: #d4708b;
animation: loader-fade 1.6s ease-in-out infinite;
}
@keyframes loader-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes loader-spin-reverse {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
@keyframes loader-pulse {
0%, 100% { transform: scale(0.82); opacity: 0.85; }
50% { transform: scale(1.18); opacity: 1; }
}
@keyframes loader-orbit {
0% { transform: rotate(0deg) translateX(46px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(46px) rotate(-360deg); }
}
@keyframes loader-fade {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
/* =================================================================== */
/* === YoduPlayer 插件完整修复样式 === */
/* =================================================================== */
/*
解决 YoduPlayer 与 Brave 主题的样式冲突：
- 修复容器尺寸和位置
- 添加背景和毛玻璃效果
- 修复播放列表样式
- 确保收缩/展开正常工作
*/
/* --- A. 播放器主容器修复 --- */
#bgmplayer {
position: fixed !important;
top: 65px !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
z-index: 99999 !important;
/* 关键：限制容器宽度和高度 */
width: auto !important;
max-width: 280px !important;
height: auto !important;
max-height: none !important;
/* 添加背景 */
background: linear-gradient(135deg, rgba(0, 150, 136, 0.95) 0%, rgba(0, 121, 107, 0.95)) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
/* 圆角和阴影 */
border-radius: 8px 0 0 8px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
/* 溢出处理 */
overflow: visible !important;
/* 颜色 */
color: white !important;
}
/* --- B. 播放器收缩状态 (默认) --- */
#bgmplayer.bgmplayer {
transform: translateX(218px) !important;
-webkit-transform: translateX(218px) !important;
}
/* --- C. 播放器展开状态 --- */
#bgmplayer.bgmon {
transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
}
/* --- D. 播放器面板 --- */
#bgmplayer #bgmpanel {
width: 240px !important;
height: 60px !important;
padding: 5px 0 !important;
box-sizing: border-box !important;
}
/* --- E. 展开按钮 --- */
#bgmplayer span.bgmbuttom {
cursor: pointer !important;
float: left !important;
padding: 25.5px 3px !important;
display: block !important;
}
/* --- F. 封面图片 --- */
#bgmplayer .bgmfm {
cursor: pointer !important;
float: left !important;
margin: 0 10px 0 5px !important;
}
#bgmplayer .bgmfm img {
width: 55px !important;
height: 55px !important;
border-radius: 50% !important;
border: 2px solid rgba(255, 255, 255, 0.5) !important;
object-fit: cover !important;
}
/* 封面旋转动画 */
#bgmplayer .bgmfm .Rotation {
animation: yodu-rotation 9.8s linear infinite !important;
}
#bgmplayer .bgmfm .Rotation.paused {
animation-play-state: paused !important;
}
@keyframes yodu-rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* --- G. 歌曲标题和时间 --- */
#bgmplayer .bgmtitle {
font-size: 15px !important;
padding: 5px 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-right: 5px !important;
color: white !important;
}
#bgmplayer .bgmtime {
float: left !important;
}
#bgmplayer .bgmtime span {
font-size: 15px !important;
margin: 0 5px 0 0 !important;
color: rgba(255, 255, 255, 0.8) !important;
}
/* --- H. 控制按钮 --- */
#bgmplayer .bgmbtn {
float: right !important;
}
#bgmplayer .bgmbtn span {
padding: 3px !important;
cursor: pointer !important;
display: inline-block !important;
}
#bgmplayer .bgmbtn span:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
}
/* --- I. 进度条 --- */
#bgmplayer #jindu {
width: 0% !important;
height: 3px !important;
background-color: rgba(255, 255, 255, 0.6) !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
}
/* --- J. 播放列表（关键修复） --- */
#bgmplayer #playlist {
border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
width: 240px !important;
/* 关键：限制高度并允许滚动 */
max-height: 130px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
font-size: 13px !important;
list-style: none !important;
background: transparent !important;
/* 过渡动画 */
transition: max-height 0.3s ease, margin 0.3s ease !important;
}
/* 播放列表收起状态 */
#bgmplayer #playlist.yhidden {
max-height: 0 !important;
margin: 0 !important;
overflow: hidden !important;
border: none !important;
}
/* --- K. 播放列表项目 --- */
#bgmplayer #playlist li,
#bgmplayer #playlist .yd-lib {
list-style: none !important;
border-left: 3px solid transparent !important;
line-height: 2 !important;
cursor: pointer !important;
padding: 1px 3px !important;
border-bottom: 1px dashed rgba(255, 255, 255, 0.2) !important;
margin: 0 !important;
color: rgba(255, 255, 255, 0.9) !important;
background: transparent !important;
/* 单行省略 */
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: block !important;
}
#bgmplayer #playlist li:last-child {
border-bottom: none !important;
}
#bgmplayer #playlist li:hover,
#bgmplayer #playlist .yd-lib:hover {
background-color: rgba(255, 255, 255, 0.15) !important;
}
/* 当前播放项 */
#bgmplayer #playlist .yd-playing {
border-left: 3px solid #fff !important;
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* --- L. 图标样式 --- */
#bgmplayer .ydicon {
width: 16px !important;
height: 16px !important;
display: inline-block !important;
vertical-align: middle !important;
fill: currentColor !important;
}
/* --- M. 背景模糊层 --- */
#bgmplayer .board {
position: absolute !important;
overflow: hidden !important;
top: 0 !important;
height: 100% !important;
width: 100% !important;
z-index: -1 !important;
border-radius: 8px 0 0 8px !important;
}
#bgmplayer .blurred {
position: absolute !important;
inset: 0 !important;
background-size: 20000% !important;
background-position: center 38% !important;
background-repeat: no-repeat !important;
filter: brightness(0.9) blur(5px) !important;
}
/* --- N. 滚动条美化 --- */
#bgmplayer ::-webkit-scrollbar {
width: 4px !important;
}
#bgmplayer ::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 2px !important;
}
#bgmplayer ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.4) !important;
border-radius: 2px !important;
}
#bgmplayer ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.6) !important;
}
/* --- 图标库基础样式（限制作用范围，不影响 YoduPlayer） --- */
/* 仅对非 YoduPlayer 的 .icon 类生效 */
:not(#bgmplayer)>.icon,
.floating-sidebar .icon,
.mobile-navbar .icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
/* =============================================== */
/* === Fancybox 图片灯箱插件美化 (新增代码) === */
/* =============================================== */
/* 设置灯箱背景为更柔和的半透明色 */
.fancybox__backdrop {
background-color: rgba(255, 235, 240, 0.85);
/* 淡粉色半透明背景 */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* 自定义关闭按钮样式 */
.fancybox__button--close {
background: #ff69b4 !important;
/* 粉色背景 */
color: white !important;
border-radius: 50% !important;
transition: transform 0.3s ease, background 0.3s ease !important;
}
.fancybox__button--close:hover {
background: #ff8ac0 !important;
transform: rotate(90deg) scale(1.1);
}
/* 图片标题样式 */
.fancybox__caption {
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
color: #fff;
font-size: 16px;
padding: 20px;
text-align: center;
}
/* 为可点击的图片添加鼠标指针 */
.article-content img,
.comment-text img {
cursor: zoom-in;
}
/* 排除掉小表情的指针（OwO 与 Smilies 插件统一） */
.comment-text img[src*="/OwO/"],
.comment-text img.smilies,
.article-content img.smilies {
cursor: default;
}
/* === 表情统一尺寸（OwO + Smilies 插件共用）===
* 所有评论/正文里的表情（含 :@(xxx) 与 :smile: 两种格式）
* 统一 20px 显示，防止 gif 原始尺寸撑破布局。
*/
.comment-text img.smilies,
.comment-text img[src*="/OwO/"],
.article-content img.smilies {
display: inline-block;
width: 20px;
height: 20px;
max-width: none;
margin: 0 2px;
vertical-align: -4px;
border-radius: 0;
}
/* =================================================== */
/* === 手机端首页及快捷导航重构优化 (新增代码) === */
/* =================================================== */
/* --- 1. 首页板块响应式显隐控制 --- */
@media (max-width: 768px) {
/* 在手机上，隐藏带有 .mobile-hidden 的板块 */
.indexPlate .mobile-hidden {
display: none !important;
}
/* 确保 .mobile-visible 板块正常显示 (即使它们可能被其他规则影响) */
.indexPlate .mobile-visible {
display: block !important;
flex: 0 0 100%;
/* 确保每个卡片占满一行 */
max-width: 100%;
}
/* 优化手机端首页卡片间距 */
.indexPlate .perspective-container {
margin-bottom: 20px;
}
/* 调整3D卡片在手机上的视距，效果更柔和 */
.perspective-container {
perspective: 1500px;
}
}
/* --- 2. 文章列表页快捷导航样式 --- */
.quick-nav-container {
display: flex;
justify-content: center;
gap: 20px;
/* 按钮间距 */
margin-bottom: 30px;
/* 和下方文章列表的间距 */
padding: 15px;
background-color: rgba(255, 245, 248, 0.7);
/* 淡粉色半透明背景 */
border-radius: 16px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.quick-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #ff69b4;
/* 粉色文字 */
font-weight: 500;
text-decoration: none !important;
transition: transform 0.3s ease;
}
.quick-nav-item:hover {
transform: scale(1.1);
color: #ff1493;
}
.quick-nav-icon {
width: 48px;
height: 48px;
object-fit: contain;
border-radius: 50%;
padding: 5px;
background-color: #fff;
box-shadow: 0 4px 10px rgba(255, 105, 180, 0.15);
}
/* =================================================== */
/* === 评论区 User Agent (OS & Browser) 图标样式 === */
/* =================================================== */
.comment-ua-info {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
vertical-align: middle;
}
.ua-icon {
display: inline-block;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
border-radius: 3px;
/* 平滑过渡效果 */
transition: transform 0.3s ease;
}
.ua-icon:hover {
transform: scale(1.2);
}
/* --- 浏览器图标 --- */
.browser-icon.chrome {
background-image: url('data:image/svg+xml;utf8,');
}
.browser-icon.edge {
background-image: url('data:image/svg+xml;utf8,');
}
.browser-icon.firefox {
background-image: url('data:image/svg+xml;utf8,');
}
.browser-icon.safari {
background-image: url('data:image/svg+xml;utf8,');
}
.browser-icon.opera {
background-image: url('data:image/svg+xml;utf8,');
}
.browser-icon.ie {
background-image: url('data:image/svg+xml;utf8,');
}
.browser-icon.wechat {
background-image: url('data:image/svg+xml;utf8,');
}
.browser-icon.default-browser,
.browser-icon.mobile {
background-image: url('data:image/svg+xml;utf8,');
}
/* --- 操作系统图标 --- */
.os-icon.windows {
background-image: url('data:image/svg+xml;utf8,');
}
.os-icon.macos {
background-image: url('data:image/svg+xml;utf8,');
}
.os-icon.linux {
background-image: url('data:image/svg+xml;utf8,');
}
.os-icon.ubuntu {
background-image: url('data:image/svg+xml;utf8,');
}
.os-icon.ios {
background-image: url('data:image/svg+xml;utf8,');
}
.os-icon.android {
background-image: url('data:image/svg+xml;utf8,');
}
.os-icon.harmonyos {
background-image: url('data:image/svg+xml;utf8,');
}
.os-icon.default-os {
background-image: url('data:image/svg+xml;utf8,');
}
/* =================================================== */
/* === 恋爱计时器 & 倒计时 温馨唯美特效 (新增) === */
/* =================================================== */
/* --- 1. 标题文字 "小手一牵..." 特效 --- */
.warm-text-glow {
/* 使用更柔和的粉色系流光渐变 */
background: linear-gradient(125deg,
#ff7e5f,
/* 珊瑚粉 */
#feb47b,
/* 蜜桃色 */
#ff7e5f
/* 循环回珊瑚粉 */
);
background-size: 200% 100%;
/* 背景放大，为动画做准备 */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* 应用动画：流光移动 + 呼吸文字阴影 */
animation: text-flow 5s ease-in-out infinite,
text-glow 3s ease-in-out infinite;
font-family: 'LXGWWenKaiScreen', 'HarmonyOS_Sans', sans-serif;
/* 建议使用更具艺术感的字体 */
font-weight: bold;
font-size: 1.3rem;
/* 稍微放大字体 */
}
/* 文字流光动画 */
@keyframes text-flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 文字呼吸光晕动画 */
@keyframes text-glow {
0%,
100% {
text-shadow: 0 0 5px rgba(255, 182, 193, 0.5), 0 0 10px rgba(255, 182, 193, 0.3);
}
50% {
text-shadow: 0 0 15px rgba(255, 182, 193, 0.9), 0 0 25px rgba(255, 182, 193, 0.7);
}
}
/* --- 2. 动态时间显示 "xx天xx时..." 特效 --- */
.dynamic-time-display {
color: #ff69b4;
/* 基础色调为浪漫粉 */
font-size: 1.5rem;
letter-spacing: 2px;
/* 增加数字和文字的间距 */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
padding: 10px 0;
transition: color 0.5s ease;
}
/* 时间中的数字部分（通过JS添加的 .time-number 类） */
.dynamic-time-display .time-number {
font-weight: bold;
font-size: 2.2rem;
/* 突出数字 */
padding: 0 5px;
color: #ff1493;
/* 更深的粉色，形成对比 */
display: inline-block;
/* 数字轻微上下浮动动画 */
animation: number-float 2s ease-in-out infinite alternate;
}
/* 为每个数字设置不同的动画延迟，产生错落感 */
.dynamic-time-display .time-number:nth-child(1) {
animation-delay: 0s;
}
.dynamic-time-display .time-number:nth-child(2) {
animation-delay: 0.2s;
}
.dynamic-time-display .time-number:nth-child(3) {
animation-delay: 0.4s;
}
.dynamic-time-display .time-number:nth-child(4) {
animation-delay: 0.6s;
}
/* 数字浮动动画 */
@keyframes number-float {
from {
transform: translateY(-3px);
}
to {
transform: translateY(3px);
}
}
/* =================================================== */
/* === 首页情侣昵称 · 月光呼吸特效 (新增) === */
/* =================================================== */
/* --- 1. 定位到昵称的 h4 标签 --- */
.lover-avatar-wrapper h4 {
/* 确保文字有足够的空间显示光晕 */
padding: 5px 0;
/* 使用柔和的渐变色代替纯白色 */
background: linear-gradient(135deg,
#f6d365,
/* 温柔的金色 */
#fda085,
/* 蜜桃色 */
#fbc2eb,
/* 淡雅的粉色 */
#a18cd1
/* 宁静的紫色 */
);
background-size: 400% 400%;
/* 放大渐变背景，为动画做准备 */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* 应用动画：背景流动 + 呼吸光晕 */
animation:
nickname-flow 10s ease infinite,
/* 背景流动动画 */
nickname-glow 4s ease-in-out infinite;
/* 呼吸光晕动画 */
font-family: 'LXGWWenKaiScreen', 'HarmonyOS_Sans', sans-serif;
/* 使用更具手写感的字体 */
font-size: 1.4rem;
/* 稍微放大字体，使其更醒目 */
}
/* --- 2. 动画关键帧定义 --- */
/* 昵称背景色彩流动动画 */
@keyframes nickname-flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 昵称呼吸光晕动画 */
@keyframes nickname-glow {
0%,
100% {
text-shadow:
0 0 5px #fff,
0 0 10px #ffc0cb,
/* 粉色光晕 */
0 0 15px rgba(255, 182, 193, 0.5);
}
50% {
text-shadow:
0 0 10px #fff,
0 0 20px #ffc0cb,
/* 增强的粉色光晕 */
0 0 30px rgba(255, 182, 193, 0.8);
}
}
/* =================================================== */
/* === 评论区 UA 显示 & 回复样式美化 (新增) === */
/* =================================================== */
/* UA 标签容器 */
.comment-ua,
.comment-ua-info {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 0.65rem;
color: var(--text-3, #999);
background: linear-gradient(135deg, rgba(232, 180, 188, 0.1), rgba(180, 200, 232, 0.1));
padding: 3px 8px;
border-radius: 20px;
border: 1px solid rgba(232, 180, 188, 0.15);
transition: all 0.2s ease;
flex-wrap: wrap;
margin-top: 0;
}
/* 祝福墙/评论区：标识标签统一排列的容器 */
.comment-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.comment-tags .comment-ua,
.comment-tags .comment-location {
margin: 0;
}
.comment-ua:hover,
.comment-ua-info:hover {
background: linear-gradient(135deg, rgba(232, 180, 188, 0.2), rgba(180, 200, 232, 0.2));
border-color: rgba(232, 180, 188, 0.3);
color: var(--accent, #ff69b4);
}
.ua-icon {
width: 14px !important;
height: 14px !important;
vertical-align: middle;
display: inline-block;
margin-right: 3px;
opacity: 0.9;
}
.reply-info {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
color: var(--text-3, #888);
background: linear-gradient(135deg, rgba(255, 182, 193, 0.15), rgba(255, 218, 185, 0.15));
padding: 4px 10px;
border-radius: 15px;
margin-bottom: 8px;
border: 1px dashed rgba(232, 180, 188, 0.3);
}
.reply-from {
font-weight: 500;
color: var(--accent, #ff8da1);
}
.reply-arrow {
color: var(--rose, #ff6b81);
font-size: 0.8rem;
line-height: 1;
margin: 0 2px;
}
.reply-to {
color: var(--text-2, #666);
text-decoration: none;
font-weight: 500;
}
.reply-to:hover {
color: var(--accent, #ff8da1);
text-decoration: underline;
}
/* ==========================================================================
全站特效添加 (用户定制 - 网格背景 & 彩虹条)
========================================================================== */
/* ==========================================================================
全站特效添加 (用户定制 - 2024/05/27 修复终版v3)
========================================================================== */
/* 1. 蓝色网格背景 + 繁星点点 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(to right, rgba(37, 82, 110, 0.12) 1px, rgba(0, 0, 0, 0) 1px),
linear-gradient(rgba(37, 82, 110, 0.12) 1px, rgba(0, 0, 0, 0) 1px),
/* 繁星 */
radial-gradient(1.5px 1.5px at 15% 15%, rgba(255, 255, 255, 0.9) 50%, transparent),
radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, 0.8) 50%, transparent),
radial-gradient(2px 2px at 55% 25%, rgba(255, 255, 255, 0.9) 50%, transparent),
radial-gradient(1.5px 1.5px at 75% 65%, rgba(255, 255, 255, 0.8) 50%, transparent),
radial-gradient(1px 1px at 85% 15%, rgba(255, 255, 255, 0.9) 50%, transparent),
radial-gradient(1.5px 1.5px at 10% 85%, rgba(255, 255, 255, 0.8) 50%, transparent);
background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
background-size: 30px 30px, 30px 30px, 500px 500px, 400px 400px, 350px 350px, 450px 450px, 550px 550px, 600px 600px;
pointer-events: none;
z-index: 0 !important;
/* 层级 0：位于最底层 */
}
/* 2. 顶部 & 底部 双重彩虹条特效 */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000),
linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000);
background-position: 0 0, 0 100%;
background-size: 200% 4px, 200% 4px;
background-repeat: no-repeat;
z-index: 99999;
pointer-events: none;
animation: rainbowMove 4s linear infinite;
}
/* 3. 头像框超级放大 (PC端) */
.avatar-frame {
width: 155% !important;
height: 155% !important;
top: -27.5% !important;
left: -27.5% !important;
max-width: none !important;
pointer-events: none;
z-index: 10;
}
.avatar-container {
overflow: visible !important;
}
/* 4. 层级与波浪修复 (关键修正：防止头图被遮挡) */
/* 头图区域：层级提升，确保在网格之上 */
.lover-background {
z-index: 2 !important;
/* 层级 2：盖过网格(0) */
/* 保持 position: absolute 不变，否则布局会乱 */
}
/* 头像内容区域：层级更高，确保文字和头像在背景之上 */
.lover-container {
position: relative !important;
z-index: 10 !important;
/* 层级 10：盖过背景 */
}
/* 波浪区域：动态波浪，位于头图之上 */
.main-hero-waves-area {
background: none !important;
height: auto !important;
bottom: -11px !important;
animation: none !important;
z-index: 5 !important;
/* 层级 5：盖过头图(2)和网格(0) */
/* 保持 position: absolute 不变 */
}
.waves-area .waves-svg {
display: block !important;
width: 100% !important;
height: 100px !important;
}
/* 波浪动画 */
.waves-area .parallax>use {
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.waves-area .parallax>use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
fill: rgba(255, 255, 255, 0.7);
}
.waves-area .parallax>use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
fill: rgba(255, 255, 255, 0.5);
}
.waves-area .parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
fill: rgba(255, 255, 255, 0.3);
}
.waves-area .parallax>use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
fill: #fff;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
/* 5. 移动端专属修复 (头像框居中 & 昵称图标排版) */
@media (max-width: 768px) {
/* 头像框绝对居中 */
.avatar-frame {
width: 170% !important;
height: 170% !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
max-width: none !important;
}
/* 修复昵称旁图标排版乱的问题 */
.comment-author,
.note-author,
.author-info {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 4px !important;
}
.comment-author img,
.note-author img,
.author-info img,
.comment-author .badge,
.note-author .badge {
vertical-align: middle !important;
margin: 0 !important;
}
}
/* =================================================================== */
/* === 2026年1月重大优化 - 页脚、计时器、背景过渡 === */
/* =================================================================== */
/* --- 1. 页脚主容器 - 减少多余空白 --- */
.footer-main-content {
background: linear-gradient(180deg, transparent 0%, rgba(255, 250, 252, 0.95) 20%, #fffafa 100%);
padding: 30px 15px 20px 15px;
margin-top: -30px;
/* 向上提升，减少空白 */
position: relative;
z-index: 10;
}
/* --- 2. 甜蜜相伴计时器 - 整齐布局防抖优化 --- */
.footer-timer-container {
margin: 15px 0;
text-align: center;
}
.sweet-timer {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: linear-gradient(135deg, rgba(255, 182, 193, 0.15), rgba(255, 218, 185, 0.15));
border-radius: 50px;
border: 1px solid rgba(255, 182, 193, 0.3);
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
}
.sweet-timer .timer-label {
font-size: 14px;
color: #ff69b4;
font-weight: 600;
}
.sweet-timer .timer-unit {
display: inline-flex;
align-items: baseline;
gap: 2px;
white-space: nowrap;
}
.sweet-timer .time-number {
display: inline-block;
min-width: 28px;
text-align: center;
font-size: 22px;
font-weight: bold;
color: #ff1493;
background: linear-gradient(135deg, rgba(255, 107, 136, 0.1), rgba(255, 182, 193, 0.15));
padding: 4px 8px;
border-radius: 8px;
text-shadow: 0 1px 2px rgba(255, 20, 147, 0.15);
/* 使用数字字体确保宽度一致，防止跳动 */
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
transition: transform 0.3s ease;
}
.sweet-timer .timer-text {
font-size: 13px;
color: #888;
font-weight: 500;
margin-left: 2px;
}
/* 添加轻微悬浮动画 */
.sweet-timer:hover .time-number {
transform: translateY(-2px);
}
/* --- 3. 减少页面底部空白 --- */
html,
body {
min-height: 100%;
}
/* 限制body的最小高度，防止无限延伸 */
body {
display: flex;
flex-direction: column;
}
#pjax-container {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
background: #fffafa;
}
/* --- 4. 优化背景图与内容区过渡 --- */
/* 让波浪过渡区更加自然柔和 */
.hero-transition-area {
background: linear-gradient(to bottom,
transparent 0%,
rgba(255, 250, 252, 0.2) 20%,
rgba(255, 245, 248, 0.5) 40%,
rgba(255, 250, 252, 0.8) 70%,
#fffafa 100%) !important;
}
/* 波浪SVG使用温暖的粉色调而非白色 */
.hero-transition-area svg path:first-child {
fill: rgba(255, 235, 240, 0.9) !important;
}
.hero-transition-area svg path:last-child {
fill: #fffafa !important;
}
/* 首页内容区添加上部渐变，与波浪融合 */
.love-container {
position: relative;
}
.love-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(to bottom, #fffafa 0%, transparent 100%);
pointer-events: none;
z-index: 0;
}
/* --- 5. 移动端计时器适配 --- */
@media (max-width: 768px) {
.sweet-timer {
gap: 6px;
padding: 10px 15px;
}
.sweet-timer .time-number {
min-width: 24px;
font-size: 18px;
padding: 3px 6px;
}
.sweet-timer .timer-label {
font-size: 12px;
}
.sweet-timer .timer-text {
font-size: 11px;
}
.footer-main-content {
padding: 20px 10px 75px 10px;
/* 底部留出给移动端导航栏的空间 */
}
}
/* --- 6. 内容区域背景优化 --- */
/* 让主内容区有轻微的背景色，与网格背景形成对比 */
/* 注意：commentframe 不设 z-index（保持 auto），否则会形成层叠上下文，
导致 OwO 表情面板（absolute 定位）无法盖过下方评论列表，底部被遮挡 */
.indexPlate,
.list-content,
.card {
position: relative;
z-index: 1;
}
.commentframe {
position: relative;
/* 不设 z-index，让 OwO 面板的 z-index 参与全局层叠 */
}
/* 移除首页卡片区底部多余空白 */
.love-container {
padding-bottom: 40px !important;
margin-bottom: 0 !important;
}
.footer-decoration {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* =================================================================== */
/* === 2026年1月 完整修复版 - 波浪全宽 + 计时器 + 移动端 === */
/* =================================================================== */
/* --- 1. 全宽波浪过渡区样式 (梦幻流体版) --- */
.full-width-waves {
position: relative;
width: 100%;
margin-top: -150px;
/* 向上提，覆盖头部背景图底部，消除横线 */
height: 150px;
/* 确保容器高度足够 */
z-index: 10;
pointer-events: none;
overflow: hidden;
}
.waves-svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 15vh;
/* 动态高度，适应屏幕 */
min-height: 100px;
max-height: 150px;
margin-bottom: -1px;
/* 消除底部微小缝隙 */
}
/* 波浪动画 */
.parallax>use {
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax>use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax>use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax>use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
/* 优化页脚紧凑度 */
.romantic-footer .footer-timer-container {
margin: 5px 0 0 0 !important;
}
.romantic-footer .heart-container {
margin: 5px 0 !important;
}
.romantic-footer .footer-info {
margin-top: 5px;
margin-bottom: 20px;
}
/* 内容区背景与波浪融合 */
/* 内容区背景与波浪融合 - 修改为透明显示背景图 */
#pjax-container {
position: relative;
z-index: 5;
background: transparent !important;
}
/* --- 2. 首页恋爱计时器样式 (多彩数字版) --- */
.love-timer-section {
padding: 8px 15px;
}
.love-timer {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.85);
border-radius: 30px;
border: 1px solid rgba(255, 182, 193, 0.4);
box-shadow: 0 4px 20px rgba(255, 182, 193, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.love-timer .timer-prefix {
font-size: 14px;
color: #e85a8a;
font-weight: 600;
margin-right: 6px;
}
/* 多彩数字 - 每个数字不同颜色 */
.love-timer .time-number {
display: inline-block;
min-width: 30px;
text-align: center;
font-size: 22px;
font-weight: bold;
padding: 4px 8px;
border-radius: 8px;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* 天数 - 红/粉色 */
.love-timer .time-number#love_days {
color: #ff4757;
background: rgba(255, 71, 87, 0.1);
}
/* 小时 - 橙色 */
.love-timer .time-number#love_hours {
color: #ff7f50;
background: rgba(255, 127, 80, 0.1);
}
/* 分钟 - 蓝色 */
.love-timer .time-number#love_mins {
color: #3742fa;
background: rgba(55, 66, 250, 0.1);
}
/* 秒数 - 绿色 */
.love-timer .time-number#love_secs {
color: #2ed573;
background: rgba(46, 213, 115, 0.1);
}
.love-timer .timer-text {
font-size: 13px;
color: #888;
font-weight: 500;
margin-left: 2px;
margin-right: 8px;
}
/* --- 3. 头像区域容器样式 (参考 love.lmb.blue) --- */
.lover-container-wrapper {
position: relative;
z-index: 5;
padding-bottom: 15px;
/* 给昵称留出空间 */
}
.lover-container {
padding: 0 !important;
min-height: 420px !important;
height: 420px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.lover-box {
gap: 120px !important;
/* 加大间距容纳中间心跳 */
flex-wrap: nowrap !important;
margin-top: 40px;
/* 略微下移 */
}
/* 头像包装器 */
.lover-avatar-wrapper {
text-align: center;
}
/* 头像容器 */
.avatar-container {
width: 120px;
height: 120px;
position: relative;
border-radius: 50%;
}
.avatar-img {
width: 120px !important;
height: 120px !important;
border: 4px solid rgba(255, 255, 255, 0.4) !important;
/* 半透明圆环 */
box-shadow: none !important;
/* 移除阴影 */
border-radius: 50%;
transition: all 0.5s ease;
position: relative;
z-index: 1;
}
.avatar-img:hover {
border-color: rgba(255, 255, 255, 0.9) !important;
transform: scale(1.05);
}
/* 恢复头像框并适配 120px 头像 */
.avatar-frame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 170px !important;
height: 170px !important;
max-width: none !important;
z-index: 2;
pointer-events: none;
display: block !important;
}
/* 昵称样式 - 简洁清晰版 */
.lover-name {
color: #fff !important;
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.7),
0 0 20px rgba(0, 0, 0, 0.5) !important;
font-size: 1.1rem;
font-weight: 600;
margin-top: 12px;
margin-bottom: 0;
padding: 0;
background: transparent;
display: block;
}
/* 爱心样式 - 参考love.lmb.blue */
.lover-heart-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 0 15px;
}
.lover-heartbeat {
width: 45px !important;
height: 45px !important;
filter: drop-shadow(0 3px 12px rgba(255, 107, 136, 0.6));
animation: heartPulse 1.2s ease-in-out infinite;
}
@keyframes heartPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
/* --- 4. 底部页脚美化样式 --- */
.romantic-footer {
background: linear-gradient(180deg,
transparent 0%,
rgba(255, 240, 245, 0.5) 20%,
rgba(255, 228, 235, 0.8) 100%);
margin-top: 0;
padding: 0;
padding-bottom: 0 !important;
}
.footer-main-content {
padding: 20px 15px 10px 15px !important;
margin: 0 !important;
}
.footer-info {
margin-bottom: 10px;
}
.footer-copyright {
font-size: 14px;
color: #d4619d;
margin-bottom: 4px;
font-weight: 500;
}
.footer-heart-icon {
margin-right: 5px;
animation: heartBeat 1.5s ease-in-out infinite;
}
@keyframes heartBeat {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
.footer-link {
color: #e85a8a;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.footer-link:hover {
color: #ff6b95;
text-shadow: 0 0 10px rgba(255, 107, 149, 0.4);
}
.footer-separator {
margin: 0 8px;
color: #dba8b8;
}
.footer-icp {
font-size: 12px;
margin-bottom: 0;
}
.footer-icp-link {
color: #b8829a;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-icp-link:hover {
color: #d4619d;
}
/* 页脚 QQ 登录入口：低调、规范（腾讯官方图标），满足审核要求又不破坏顶部美观 */
.footer-qq-login {
margin: 10px 0 0;
}
.footer-qq-btn {
display: inline-flex;
align-items: center;
opacity: 0.9;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-qq-btn img {
height: 24px;
width: auto;
display: block;
}
.footer-qq-btn:hover {
opacity: 1;
transform: translateY(-1px);
}
/* 愿时光温柔文字 */
.footer-wish {
font-size: 15px;
color: #c97a8f;
margin: 12px 0;
font-weight: 500;
letter-spacing: 2px;
}
.footer-timer-container {
margin: 10px 0;
}
/* 心跳容器去除下方空白 */
.heart-container {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* --- 5. IP图标大小修复 --- */
.ua-icon,
.os-icon,
.browser-icon,
.comment-ua-info .ua-icon,
svg.ua-icon,
img.ua-icon {
width: 14px !important;
height: 14px !important;
max-width: 14px !important;
max-height: 14px !important;
font-size: 14px !important;
display: inline-block !important;
vertical-align: middle !important;
}
/* 说说页面的位置图标 */
.note-location svg,
.note-location img {
width: 14px !important;
height: 14px !important;
}
/* --- 6. 移动端全局修复 --- */
@media (max-width: 768px) {
/* 全宽波浪在移动端的调整 */
/* 全宽波浪在移动端的调整 */
.full-width-waves {
margin-top: -80px !important;
height: 80px !important;
}
.waves-svg {
height: 80px !important;
min-height: 80px !important;
}
/* 恋爱计时器移动端样式 - 多彩版 */
.love-timer-section {
padding: 5px 8px;
}
.love-timer {
padding: 8px 12px;
gap: 3px;
border-radius: 25px;
}
.love-timer .timer-prefix {
font-size: 12px;
margin-right: 4px;
}
.love-timer .time-number {
min-width: 24px;
font-size: 16px;
padding: 3px 5px;
border-radius: 6px;
}
.love-timer .timer-text {
font-size: 11px;
margin-left: 1px;
margin-right: 5px;
}
/* 头像区域 - 移动端适配 */
.lover-container {
padding: 0 !important;
min-height: 250px !important;
height: 250px !important;
padding-top: 30px !important;
/* 移动端略微上移内容 */
}
.lover-box {
gap: 30px !important;
margin-top: 0 !important;
}
.lover-avatar-wrapper {
flex-shrink: 0;
}
.avatar-container {
width: 64px !important;
height: 64px !important;
}
.avatar-img {
width: 64px !important;
height: 64px !important;
border-width: 2px !important;
}
.avatar-frame {
width: 95px !important;
/* 适配移动端64px头像 */
height: 95px !important;
display: block !important;
/* 恢复显示 */
}
/* 统一所有板块图标大小 */
.premium-card .col-auto {
flex: 0 0 auto;
width: 60px;
/* 固定宽度 */
display: flex;
justify-content: center;
align-items: center;
}
.premium-card .avatar img {
width: 50px !important;
height: 50px !important;
object-fit: cover;
}
.premium-card .card-body {
padding: 15px 12px 15px 5px !important;
/* 调整内边距 */
}
/* 昵称移动端样式 */
.lover-name {
font-size: 0.95rem;
margin-top: 10px;
padding: 0;
background: transparent;
}
/* 爱心移动端大小 */
.lover-heartbeat {
width: 36px !important;
height: 36px !important;
}
.lover-heart-wrapper {
padding: 0 10px;
}
/* ★★★ 底部导航栏醒目优化 ★★★ */
.mobile-navbar {
height: 65px !important;
padding: 8px 0 !important;
background: rgba(255, 255, 255, 0.98) !important;
box-shadow: 0 -4px 20px rgba(255, 107, 136, 0.15) !important;
border-top: 2px solid rgba(255, 182, 193, 0.4) !important;
}
.mobile-navbar .nav-emoji {
font-size: 26px !important;
margin-bottom: 3px;
}
.mobile-navbar .nav-item a {
font-size: 11px !important;
color: #d4619d !important;
font-weight: 500;
padding: 8px 12px !important;
}
.mobile-navbar .nav-item a:active {
background: rgba(255, 182, 193, 0.3);
border-radius: 12px;
}
/* ★★★ 首页六个板块对齐修复 ★★★ */
.indexPlate {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
/* 等宽两列 */
gap: 10px !important;
padding: 0 10px !important;
}
.indexPlate .col-md-4 {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.premium-card {
margin-bottom: 10px !important;
}
.premium-card .card-body {
padding: 12px !important;
}
.premium-card .avatar img {
width: 45px !important;
height: 45px !important;
}
.premium-id {
font-size: 0.9rem !important;
}
.premium-desc {
font-size: 0.75rem !important;
}
/* 计时器 */
.sweet-timer {
padding: 8px 15px;
gap: 4px;
}
.sweet-timer .time-number {
font-size: 18px !important;
min-width: 26px;
padding: 3px 5px !important;
}
.sweet-timer .timer-text {
font-size: 11px !important;
}
.sweet-timer .timer-label {
font-size: 12px;
}
/* 页脚 */
.footer-main-content {
padding: 20px 15px 75px 15px !important;
}
/* 说说页面 */
.note-avatar,
.poetry-realm .avatar-img {
width: 45px !important;
height: 45px !important;
}
.note-body {
padding: 12px !important;
}
/* 评论区 */
.comment-main {
padding: 10px !important;
gap: 8px !important;
}
.comment-avatar .avatar {
width: 36px !important;
height: 36px !important;
}
.comment-text {
font-size: 14px !important;
}
/* IP图标移动端强制限制 */
.ua-icon,
.os-icon,
.browser-icon {
width: 12px !important;
height: 12px !important;
}
}
/* ============================================================ */
/* ========= 移动端优化（2026-10-10 追加，勿删） ================ */
/* ========= 作用：压缩头图/计时器占位，让首屏更快露出内容 ====== */
/* ============================================================ */
@media (max-width: 768px) {
/* --- 1. 头图 / 头像区更紧凑 --- */
/* 原规则把 hero 钉死 250px 高，手机上首屏几乎全是头图，这里放开 */
/* 头图背景同样限制高度，避免铺满全屏盖住白色背景 */
.lover-background {
height: 250px !important;
}
.lover-container {
height: auto !important;
min-height: 0 !important;
padding: 6px 8px !important;
/* 底部留白让昵称落在深色照片区内，不被浅色波浪盖住 */
padding-bottom: 50px !important;
}
.lover-box {
margin-top: 8px !important;
gap: 0.6rem !important;
}
.avatar-container,
.avatar-img {
width: 72px !important;
height: 72px !important;
}
.avatar-container .avatar-frame {
width: 96px !important;
height: 96px !important;
}
.lover-avatar-wrapper h4,
.lover-avatar-wrapper .text-white {
font-size: 12px !important;
margin-top: 4px !important;
}
/* 名字加深色描边阴影：落在浅色波浪上也清晰 */
.lover-name {
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.8),
0 0 5px rgba(0, 0, 0, 0.5) !important;
}
.lover-heartbeat {
width: 32px !important;
height: 32px !important;
}
.lover-heart-wrapper {
padding: 0 4px !important;
}
.lover-container-wrapper {
padding-bottom: 4px !important;
}
/* 波浪分隔压窄 */
.waves-area .waves-svg,
.full-width-waves .waves-svg {
height: 55px !important;
}
/* --- 2. 恋爱计时器更轻巧 --- */
.love-timer-section {
padding: 2px 10px !important;
margin-top: 4px !important;
margin-bottom: 8px !important;
}
.love-timer-section .card-title,
.love-timer-section h5 {
font-size: 0.88rem !important;
margin-bottom: 5px !important;
}
.love-timer {
padding: 6px 12px !important;
gap: 3px !important;
border-radius: 22px !important;
}
.love-timer .timer-prefix {
font-size: 12px !important;
margin-right: 3px !important;
}
.love-timer .time-number {
font-size: 16px !important;
min-width: 22px !important;
padding: 2px 5px !important;
border-radius: 6px !important;
}
.love-timer .timer-text {
font-size: 10.5px !important;
margin-right: 4px !important;
}
/* --- 3. 页脚「甜蜜相伴」计时器收紧 --- */
.romantic-footer .footer-timer-container {
margin-top: 10px !important;
}
.sweet-timer {
padding: 8px 12px !important;
gap: 4px !important;
}
.sweet-timer .time-number {
font-size: 17px !important;
}
.sweet-timer .timer-label {
font-size: 12px !important;
}
}
/* ==========================================================================
评论 / 祝福墙展示美化 2026-10-10
让回复卡片更有层次、meta 行更整齐、头像更精致
========================================================================== */
/* 1. 评论卡片：毛玻璃 + 渐变描边 + 柔和阴影 */
.comment-main {
position: relative;
border: 1px solid rgba(255, 182, 193, 0.22);
background: linear-gradient(135deg, #ffffff 0%, #fff7fa 100%);
border-radius: 16px;
padding: 18px;
box-shadow: 0 2px 12px rgba(255, 150, 180, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.comment-main:hover {
transform: translateY(-2px);
border-color: rgba(255, 150, 180, 0.45);
box-shadow: 0 8px 24px rgba(255, 120, 160, 0.14);
}
/* 2. 头像：加柔光圈 + 防止被 flex 压缩变形 */
.comment-avatar {
flex-shrink: 0;
display: flex;
align-items: flex-start;
padding-top: 2px;
}
.comment-avatar .avatar {
width: 46px;
height: 46px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 2px rgba(255, 182, 193, 0.35), 0 4px 10px rgba(255, 150, 180, 0.18);
transition: transform 0.3s ease;
object-fit: cover;
}
.comment-main:hover .comment-avatar .avatar {
transform: scale(1.06);
}
/* 3. meta 行：作者信息独立成行，时间/UA/位置右对齐成辅助行 */
.comment-meta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.comment-meta .comment-author {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
}
/* 作者身份标识容器：图标 + 昵称 + 头衔 横向对齐（之前缺失，导致东倒西歪） */
.author-identity {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
line-height: 1;
}
.author-identity .author-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 16px;
line-height: 1;
}
.author-identity .author-name {
flex-shrink: 0;
font-size: 14px;
line-height: 1.2;
white-space: nowrap;
}
/* 头衔徽章：文字浮在流光背景之上 */
.author-identity .author-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
padding: 4px 12px;
white-space: nowrap;
position: relative;
z-index: 0;
}
/* 徽章文字自身提到流光上层 */
.author-identity .author-badge {
isolation: isolate;
}
.author-identity .author-badge::before {
z-index: -1;
}
.author-identity .author-badge {
z-index: 0;
}
/* 时间胶囊 */
.comment-date {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
color: #c9a0b0;
background: rgba(255, 182, 193, 0.1);
padding: 2px 9px;
border-radius: 12px;
}
/* 4. 回复信息胶囊更柔和 */
.reply-info {
border-radius: 12px;
padding: 3px 10px;
}
/* 5. 正文行距更舒适 */
.comment-text {
font-size: 15px;
line-height: 1.8;
color: #4a3a42;
}
/* 6. 子评论卡片微调，与父评论层次区分 */
.comment-children .comment-main {
background: linear-gradient(135deg, #fffdfe 0%, #fff5f8 100%);
border-radius: 12px;
padding: 14px;
}
/* 7. 发表框 & 祝福墙标题区 */
.list-content .list-text {
font-weight: 600;
letter-spacing: 2px;
}
.commentframe {
border-radius: 18px;
background: linear-gradient(160deg, #fffdfe 0%, #fff6f9 100%);
border: 1px solid rgba(255, 182, 193, 0.25);
}
/* 8. 移动端评论卡片 */
@media (max-width: 768px) {
.comment-main {
padding: 13px;
border-radius: 14px;
}
.comment-avatar .avatar {
width: 40px;
height: 40px;
}
.comment-text {
font-size: 14px;
line-height: 1.7;
}
.comment-meta {
gap: 4px;
}
.comment-date {
font-size: 0.66rem;
}
}
/* 9. 发表框表单美化 */
#comment-form .form-control,
#comment-form .OwO-textarea {
border: 1px solid rgba(255, 182, 193, 0.3);
border-radius: 10px;
background: #fff;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#comment-form .form-control:focus,
#comment-form .OwO-textarea:focus {
border-color: rgba(255, 138, 180, 0.6);
box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.18);
outline: none;
}
#comment-form .btn-outline-danger {
background: linear-gradient(135deg, #ff8da1 0%, #ff6b8a 50%, #f06292 100%) !important;
border-radius: 999px !important;
padding: 10px 28px !important;
font-weight: bold;
letter-spacing: 2px;
box-shadow: 0 4px 14px rgba(255, 107, 138, 0.3);
}
#comment-form .btn-outline-danger:hover {
box-shadow: 0 6px 20px rgba(255, 107, 138, 0.45);
transform: translateY(-2px);
}
/* 快捷插入按钮 */
.comment-quick-actions .btn-outline-secondary {
border-radius: 999px;
font-size: 0.8rem;
padding: 4px 14px;
border-color: rgba(255, 182, 193, 0.35);
color: #d4708b;
}
.comment-quick-actions .btn-outline-secondary:hover {
background: rgba(255, 182, 193, 0.12);
border-color: rgba(255, 150, 180, 0.55);
color: #e85a71;
}
/* ==========================================================================
视觉统一优化层 2026-10-11（手机端优先 + 整体美化）
放在文件末尾，用更高优先级覆盖前面冲突的定义
========================================================================== */
/* --- 1. 主页男女主头像区：统一间距，消除「离得太近」 --- */
.lover-box {
gap: 60px !important; /* 桌面端头像↔爱心间距，平衡不挤不散 */
align-items: center !important;
}
.lover-heart-wrapper {
padding: 0 6px !important;
flex-shrink: 0 !important;
}
.lover-name {
font-size: 1.05rem !important;
letter-spacing: 1px;
}
/* --- 2. 祝福墙 / 评论文字：更舒适的阅读体验 --- */
.comment-text {
font-size: 15px !important;
line-height: 1.9 !important;
color: #4a3a42 !important;
letter-spacing: 0.2px;
}
.comment-meta {
row-gap: 6px;
}
.comment-content {
min-width: 0; /* 防止长内容撑破 flex */
}
/* --- 3. 移动端专项优化 --- */
@media (max-width: 768px) {
/* 头像：加大间距，头像更小更精致，昵称清晰 */
.lover-container {
min-height: 220px !important;
height: 220px !important;
}
.lover-box {
gap: 26px !important; /* 手机端头像↔爱心舒适间距 */
}
.avatar-container,
.avatar-img {
width: 68px !important;
height: 68px !important;
}
.lover-name {
font-size: 0.9rem !important;
margin-top: 8px !important;
}
.lover-heartbeat {
width: 32px !important;
height: 32px !important;
}
/* 祝福墙文字：手机端字号略降、行距舒适 */
.comment-text {
font-size: 14.5px !important;
line-height: 1.8 !important;
}
.comment-main {
padding: 14px !important;
gap: 10px !important;
}
.comment-avatar .avatar {
width: 40px !important;
height: 40px !important;
}
/* 作者身份标识：手机端换行更自然 */
.author-identity {
flex-wrap: wrap;
row-gap: 4px;
}
}
/* ==========================================================================
视觉优化第二阶段 2026-10-17（头像/字体加大 + 发表框点击弹出）
========================================================================== */
/* --- 1. 祝福墙头像加大：桌面 40 → 56px，更醒目 --- */
.comment-avatar .avatar,
.comment-avatar .avatar-96 {
width: 56px !important;
height: 56px !important;
}
/* --- 2. 祝福墙作者昵称加大 --- */
.comment-author .author-name {
font-size: 1.05rem !important;
}
/* --- 3. 发表框默认隐藏（配合 JS 点击弹出）--- */
.respond.respond-hidden,
.poetry-editor.respond-hidden {
display: none !important;
}
/* --- 4. 「送上祝福 / 发表说说」召唤按钮 --- */
.reveal-respond-btn {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
justify-content: center;
padding: 14px 20px;
margin-bottom: 18px;
border: 2px dashed rgba(255, 138, 180, 0.5);
border-radius: 14px;
background: linear-gradient(135deg, rgba(255, 182, 193, 0.10), rgba(255, 138, 180, 0.06));
color: #d4708b;
font-size: 1rem;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.25s ease;
}
.reveal-respond-btn:hover {
background: linear-gradient(135deg, rgba(255, 182, 193, 0.18), rgba(255, 138, 180, 0.12));
border-color: rgba(255, 138, 180, 0.8);
color: #e85a71;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(255, 107, 138, 0.2);
}
/* --- 5. 移动端头像加大 --- */
@media (max-width: 768px) {
.comment-avatar .avatar,
.comment-avatar .avatar-96 {
width: 50px !important;
height: 50px !important;
}
.comment-author .author-name {
font-size: 1rem !important;
}
.reveal-respond-btn {
padding: 12px 16px;
font-size: 0.95rem;
}
}
/* ==========================================================================
首页板块对称对齐 + 美化（2026-10-11）
解决：卡片高度不齐 / 间距不一致 / 视觉不对称
========================================================================== */
/* 桌面端：3 列等宽等高 grid */
.indexPlate {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px 24px !important;
align-items: stretch !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 让每个 col-md-4 成为 flex 容器，卡片撑满整格，实现等高 */
.indexPlate .col-md-4 {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
flex: none !important;
}
/* 卡片撑满格子，去掉 margin-bottom（间距交给 grid gap） */
.indexPlate .premium-card {
width: 100% !important;
height: 100% !important;
margin-bottom: 0 !important;
display: flex !important;
flex-direction: column;
justify-content: center;
}
/* 卡片内容垂直居中 */
.indexPlate .premium-card .card-body {
width: 100%;
}
/* 图标 + 文字垂直居中、对齐规整 */
.indexPlate .premium-card .card-body .row {
align-items: center;
margin: 0;
}
/* 移动端：2 列等高，间距适中 */
@media (max-width: 768px) {
.indexPlate {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px 12px !important;
padding: 0 8px !important;
}
.indexPlate .premium-card {
border-radius: 16px !important;
}
}
/* 平板中间档：仍保持 3 列，但间距收窄 */
@media (min-width: 769px) and (max-width: 992px) {
.indexPlate {
gap: 16px 16px !important;
}
}
/* =================================================== */
/* === 点点滴滴页面（diary-list）专项视觉优化 === */
/* =================================================== */
/* --- 1. 容器加宽：2 列网格需要更宽的空间 --- */
.diary-list {
max-width: 900px !important;
}
/* --- 2. 页面标题装饰 --- */
.diary-list .list-text {
font-size: 2rem;
font-weight: 700;
color: #ff69b4;
text-align: center;
letter-spacing: 3px;
margin: 0 0 6px 0;
}
/* 标题下的装饰短线 */
.diary-list .list-text::after {
content: '';
display: block;
width: 64px;
height: 3px;
margin: 14px auto 0;
border-radius: 3px;
background: linear-gradient(90deg, transparent, #ff69b4, transparent);
}
/* --- 3. 快捷导航美化 --- */
.diary-list .quick-nav-container {
justify-content: center;
gap: 24px;
margin: 18px 0 32px;
padding: 18px;
background: linear-gradient(135deg, rgba(255, 245, 248, 0.9), rgba(255, 240, 245, 0.6));
border: 1px solid rgba(255, 182, 193, 0.3);
border-radius: 20px;
box-shadow: 0 6px 20px rgba(255, 138, 174, 0.08);
}
.diary-list .quick-nav-item {
gap: 10px;
padding: 8px 24px;
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 14px rgba(255, 105, 180, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.diary-list .quick-nav-item:hover {
transform: translateY(-4px) scale(1.03);
box-shadow: 0 8px 24px rgba(255, 105, 180, 0.2);
color: #ff1493;
}
.diary-list .quick-nav-icon {
width: 56px;
height: 56px;
padding: 4px;
background: linear-gradient(135deg, #fff0f5, #ffe8f0);
border: 2px solid #fff;
box-shadow: 0 4px 12px rgba(255, 105, 180, 0.18);
}
/* --- 4. 文章卡片精修 --- */
.diary-list .post-card {
border: 1px solid rgba(255, 182, 193, 0.15);
box-shadow: 0 8px 28px rgba(255, 182, 193, 0.12) !important;
}
.diary-list .post-card-content {
padding: 18px;
}
.diary-list .post-card-title {
font-size: 1.15rem;
}
/* --- 5. 移动端：网格改为单列，更清爽 --- */
@media (max-width: 768px) {
.diary-list {
max-width: 100% !important;
padding: 0 12px;
}
.diary-list .list-text {
font-size: 1.6rem;
}
.diary-list .post-list-container {
grid-template-columns: 1fr;
gap: 16px;
}
.diary-list .quick-nav-container {
gap: 16px;
padding: 14px;
flex-wrap: wrap;
}
.diary-list .quick-nav-item {
padding: 8px 18px;
}
.diary-list .quick-nav-icon {
width: 48px;
height: 48px;
}
.diary-list .post-card-content {
padding: 14px;
}
}
/* ============================================================ */
/* === 文章阅读页增强（进度条 / 目录 / 版权卡 / 上下篇 / 相关文章） === */
/* ============================================================ */
/* --- 顶部阅读进度条 --- */
.brave-reading-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 9999;
background: rgba(255, 214, 224, .35);
pointer-events: none;
}
.brave-reading-progress span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, #ffb3c6, #ff6b88);
border-radius: 0 3px 3px 0;
transition: width .08s linear;
}
/* --- 正文标题锚点偏移（避免被顶部元素遮住） --- */
.article-content h2,
.article-content h3,
.article-content h4 {
scroll-margin-top: 20px;
}
/* --- 浮动目录（仅宽屏显示） --- */
.brave-toc {
display: none;
}
@media (min-width: 1200px) {
.brave-toc.has-toc {
display: block;
position: fixed;
right: 24px;
top: 50%;
transform: translateY(-50%);
width: 220px;
max-height: 62vh;
overflow-y: auto;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(6px);
border: 1px solid #ffd6e0;
border-radius: 14px;
padding: 14px 12px;
box-shadow: 0 4px 18px rgba(255, 107, 136, .12);
z-index: 900;
}
}
.brave-toc-header {
font-size: .9rem;
font-weight: bold;
color: #ff6b88;
margin-bottom: 8px;
padding-left: 6px;
}
.brave-toc-list {
list-style: none;
margin: 0;
padding: 0;
}
.brave-toc-list li {
margin: 0;
}
.brave-toc-list a {
display: block;
padding: 5px 8px 5px 12px;
font-size: .8rem;
line-height: 1.45;
color: #8a7a80;
border-left: 2px solid #ffe3ea;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color .2s, border-color .2s;
}
.brave-toc-list a.toc-h3 {
padding-left: 26px;
font-size: .76rem;
}
.brave-toc-list a:hover {
color: #ff6b88;
border-left-color: #ffb3c6;
}
.brave-toc-list a.active {
color: #ff6b88;
font-weight: bold;
border-left-color: #ff6b88;
}
/* --- 版权署名卡片 --- */
.brave-copyright-card {
margin-top: 34px;
padding: 18px 22px;
background: linear-gradient(135deg, #fff5f7 0%, #ffeef3 100%);
border: 1px solid #ffd6e0;
border-radius: 14px;
font-size: .88rem;
line-height: 1.7;
}
.copyright-row {
display: flex;
gap: 12px;
padding: 4px 0;
}
.copyright-label {
flex: 0 0 84px;
color: #ff6b88;
font-weight: bold;
}
.copyright-value {
flex: 1;
color: #7a6a70;
word-break: break-all;
}
.copyright-link {
color: #e0567a;
}
.copyright-value a {
color: #e0567a;
text-decoration: underline;
}
/* --- 上一篇 / 下一篇 --- */
.brave-post-nav {
display: flex;
gap: 14px;
margin-top: 26px;
}
.brave-post-nav-item {
flex: 1;
min-width: 0;
padding: 14px 18px;
background: #fff;
border: 1px solid #ffe3ea;
border-radius: 12px;
transition: box-shadow .25s, border-color .25s, transform .25s;
}
.brave-post-nav-item:hover {
border-color: #ffb3c6;
box-shadow: 0 4px 14px rgba(255, 107, 136, .15);
transform: translateY(-2px);
}
.nav-next {
text-align: right;
}
.nav-direction {
display: block;
font-size: .78rem;
color: #ff8fa8;
margin-bottom: 4px;
}
.brave-post-nav-item a {
display: block;
font-size: .92rem;
color: #5a4a50;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brave-post-nav-item a:hover {
color: #ff6b88;
}
.nav-none {
font-size: .88rem;
color: #c9b8bd;
}
@media (max-width: 600px) {
.brave-post-nav {
flex-direction: column;
}
.nav-next {
text-align: left;
}
}
/* --- 相关文章 --- */
.brave-related-posts {
margin-top: 30px;
padding-top: 22px;
border-top: 1px dashed #ffd6e0;
}
.related-title {
font-size: 1.05rem;
color: #ff6b88;
margin: 0 0 14px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 600px) {
.related-grid {
grid-template-columns: 1fr;
}
}
.related-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
background: #fff;
border: 1px solid #ffe3ea;
border-radius: 12px;
overflow: hidden;
transition: box-shadow .25s, border-color .25s, transform .25s;
}
.related-card:hover {
border-color: #ffb3c6;
box-shadow: 0 4px 14px rgba(255, 107, 136, .15);
transform: translateY(-2px);
}
.related-thumb {
flex: 0 0 68px;
height: 68px;
border-radius: 9px;
overflow: hidden;
background: #ffeef3;
}
.related-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.related-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.related-name {
font-size: .9rem;
color: #5a4a50;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.related-card:hover .related-name {
color: #ff6b88;
}
.related-date {
font-size: .75rem;
color: #c9b8bd;
}
/* ============================================================ */
/* === Hero 玻璃横条与渐变遮罩（nav.php 全站通用） === */
/* ============================================================ */
/* 大图渐变遮罩：向上渐隐，衔接波浪，避免"大图被白块拦腰截断"的生硬感 */
.hero-shade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg,
rgba(20, 12, 26, .18) 0%,
rgba(20, 12, 26, 0) 34%,
rgba(255, 214, 226, .25) 72%,
rgba(255, 240, 245, .92) 100%);
pointer-events: none;
}
/* 玻璃横条：承载"在一起天数"，让 Hero 与下方内容自然过渡 */
.lover-glass-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 22px auto 0;
padding: 12px 26px;
width: fit-content;
max-width: 92%;
background: rgba(255, 255, 255, .42);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 999px;
box-shadow: 0 8px 30px rgba(180, 90, 120, .18);
color: #7c4a5a;
font-size: .95rem;
letter-spacing: 1px;
position: relative;
z-index: 2;
}
.lover-glass-bar .glass-heart {
display: inline-flex;
width: 18px;
height: 18px;
color: #ff6b88;
animation: glassHeartBeat 1.6s ease-in-out infinite;
}
.lover-glass-bar .glass-heart svg {
width: 100%;
height: 100%;
}
@keyframes glassHeartBeat {
0%, 100% { transform: scale(1); }
15% { transform: scale(1.25); }
30% { transform: scale(1); }
45% { transform: scale(1.15); }
60% { transform: scale(1); }
}
.lover-glass-bar .glass-days strong {
color: #ff5d7e;
font-size: 1.25rem;
font-weight: 700;
margin: 0 2px;
font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
.lover-glass-bar {
padding: 9px 18px;
font-size: .8rem;
gap: 7px;
margin-top: 14px;
}
.lover-glass-bar .glass-days strong {
font-size: 1.05rem;
}
}
/* ============================================================ */
/* === 子页面渐变头部带 / 头像框圆形裁剪 / 移动端底部留白 === */
/* ============================================================ */
/* 子页面头部带：粉色渐变 + 圆角底边 + 漂浮爱心，替代原本的大图+头像 */
.page-head-band {
position: relative;
z-index: 1;
margin-top: -66px;
height: 120px;
background: linear-gradient(135deg, #ffb3c6 0%, #ff8fa8 48%, #f7789f 100%);
border-radius: 0 0 24px 24px;
overflow: hidden;
pointer-events: none;
}
.page-head-band::before {
content: '';
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, .38) 0%, transparent 68%);
top: -110px;
right: -60px;
}
.page-head-band::after {
content: '';
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, .25) 0%, transparent 70%);
bottom: -80px;
left: -40px;
}
/* 头部带内文字：标题 + 副标题居中，消除子页面顶部大片空白 */
.phb-content {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
padding: 0 20px;
}
.phb-title {
margin: 0;
font-size: 1.9rem;
font-weight: 700;
letter-spacing: 4px;
color: #fff;
text-shadow: 0 2px 14px rgba(160, 40, 80, .25);
}
.phb-sub {
margin: 0;
font-size: .82rem;
letter-spacing: 2px;
color: rgba(255, 255, 255, .92);
}
.phb-heart {
position: absolute;
color: rgba(255, 255, 255, .5);
}
.phb-heart svg {
width: 100%;
height: 100%;
display: block;
}
.phb-h1 {
width: 46px;
height: 46px;
right: 12%;
bottom: 26px;
transform: rotate(-12deg);
animation: phbFloat 5s ease-in-out infinite;
}
.phb-h2 {
width: 26px;
height: 26px;
right: 26%;
top: 34px;
transform: rotate(10deg);
opacity: .8;
animation: phbFloat 6s ease-in-out -2s infinite;
}
@keyframes phbFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
@media (max-width: 768px) {
.page-head-band {
margin-top: -56px;
height: 90px;
border-radius: 0 0 18px 18px;
}
.phb-title {
font-size: 1.4rem;
letter-spacing: 3px;
}
.phb-sub {
font-size: .72rem;
letter-spacing: 1.5px;
}
}
/* 头像框：保持原图完整显示（不做圆形裁剪，装饰图案如花瓣/光环才能完整露出） */
/* ============================================================ */
/* === 移动端专项修复 === */
/* ============================================================ */
@media (max-width: 768px) {
/* 1) 底部固定导航会盖住页面内容：给身体留出底栏高度 */
body {
padding-bottom: 78px;
}
/* 2) 大图遮罩减淡：让更多图片露出来，不再"被白块吃掉" */
.hero-shade {
background: linear-gradient(180deg,
rgba(20, 12, 26, .22) 0%,
rgba(20, 12, 26, .04) 38%,
rgba(255, 214, 226, .16) 70%,
rgba(255, 240, 245, .82) 100%) !important;
}
/* 3) 头像比例：frame 不应比头像大太多，否则白边糊成一片 */
.avatar-container,
.avatar-img {
width: 76px !important;
height: 76px !important;
}
.avatar-container .avatar-frame {
width: 96px !important;
height: 96px !important;
}
.lover-box {
margin-top: 18px !important;
}
/* 4) 玻璃横条更轻巧 */
.lover-glass-bar {
margin-top: 12px !important;
}
}
/* ============ QQ 互联登录按钮（腾讯官方标准图标） ============ */
.qq-login-bar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.qq-login-btn {
display: inline-flex;
align-items: center;
text-decoration: none;
line-height: 1;
cursor: pointer;
transition: transform 0.15s, opacity 0.2s;
}
.qq-login-btn:hover {
opacity: 0.85;
text-decoration: none;
}
.qq-login-btn:active {
transform: scale(0.96);
}
.qq-login-tip {
font-size: 13px;
color: #52c41a;
}
/* 导航栏右侧：QQ 登录按钮 + 诗文案，竖排不挤 */
.nav-right {
display: flex;
align-items: center;
gap: 16px;
}
.nav-qq-login {
display: inline-flex;
align-items: center;
flex-shrink: 0;
transition: opacity 0.2s, transform 0.15s;
}
.nav-qq-login img {
height: 26px;
width: auto;
display: block;
}
.nav-qq-login:hover {
opacity: 0.85;
}
.nav-qq-login:active {
transform: scale(0.95);
}
/* 手机端适配 */
@media (max-width: 991px) {
.nav-right {
width: 100%;
justify-content: flex-end;
padding-top: 8px;
}
.navsay-text {
display: none; /* 手机端隐藏那句诗，只留 QQ 登录按钮，更清爽 */
}
.nav-qq-login img {
height: 22px;
}
}