/* #card-newest-comments img {border-radius: 10px; /* 设置最新评论圆角半径为10px,可以根据需要调整} */ /* 侧边栏个人信息卡片动态渐变色 */ #aside-content>.card-widget.card-info { position: relative; z-index: 1; /* 确保原内容在上层显示 */ background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } #aside-content > .card-widget.card-info::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.7)), url('/config/img/dog.jpg'); /* 鼠标悬停时显示的背景图片 */ background-size: cover; background-repeat: no-repeat; opacity: 0.5; transition: opacity 0.8s; /* 过渡效果持续时间 */ z-index: -1; } [data-theme=dark] #aside-content > .card-widget.card-info::before { background: linear-gradient(to bottom, rgba(24, 40, 72, .1), rgba(35, 37, 58, .3), rgba(35, 37, 58, .6), rgba(24, 40, 72, .7)), url('/config/img/dog.jpg'); /* 鼠标悬停时显示的背景图片 */ background-size: cover; background-repeat: no-repeat; } #aside-content > .card-widget.card-info:hover::before { opacity: 1; } /* 卡片动态效果,好好看哈哈 */ #aside-content div.card-widget.card-info .avatar-img { transition: opacity 0.3s ease; /* 添加渐变效果 */ } #aside-content div.card-widget.card-info .avatar-img:hover { opacity: 0; /* 鼠标移上去时完全透明 */ } #card-info-btn:hover, #card-info-btn:hover .icon, #card-info-btn:hover span { transform: scale(1.1); /* 鼠标悬停时放大到110% */ } [data-theme=dark] #aside-content>.card-widget.card-info { background: linear-gradient(-45deg, rgba(24, 40, 72, .6), rgba(35, 37, 58, .5), rgba(35, 37, 58, .5), rgba(24, 40, 72, .6)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } /* 侧边栏公告栏卡片渐变色 */ #aside-content>.card-widget.card-announcement { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] #aside-content>.card-widget.card-announcement { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } /* 侧边栏目录最新文章卡片渐变色 */ #aside-content>.sticky_layout>.card-widget { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] #aside-content>.sticky_layout>.card-widget { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } /* 侧边栏欢迎卡片渐变色 */ #aside-content>.card-widget.welcomeBoxClass { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] #aside-content>.card-widget.welcomeBoxClass { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } /* 公告卡片渐变色 */ #recent-posts>#noticeList { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] #recent-posts>#noticeList { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } /* 个人信息Follow me按钮 */ #aside-content>.card-widget.card-info>#card-info-btn { background-color: #3eb8be; border-radius: 10px; } /* 古诗词卡片 */ #card-poem{ display: flex; flex-direction: column; padding: 0.5rem!important; min-height: 130px; background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7))!important; backdrop-filter: blur(10px); } [data-theme=dark] #card-poem{ display: flex; flex-direction: column; padding: 0.5rem!important; min-height: 130px; background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7))!important; backdrop-filter: blur(10px); } /*文章页面*/ .layout>#post { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] .layout>#post { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } /*分类条*/ #recent-posts>.category-bar { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7))!important; backdrop-filter: blur(10px)!important; /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] #recent-posts>.category-bar { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7))!important; backdrop-filter: blur(10px)!important; /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } /*主页文章预览页面*/ #recent-posts>.recent-post-items>.recent-post-item { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7))!important; backdrop-filter: blur(10px)!important; /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] #recent-posts>.recent-post-items>.recent-post-item { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7))!important; backdrop-filter: blur(10px)!important; /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } /*分类页面*/ .layout>#page { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px); 兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] .layout>#page { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px); 兼容性前缀,适用于一些旧版本的浏览器 */ } /*时间轴页面*/ .layout>#archive { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] .layout>#archive { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } /*分类点进去的页面*/ .layout>#category { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] .layout>#category { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } /*标签点进去的页面*/ .layout>#tag { background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } [data-theme=dark] .layout>#tag { background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)); backdrop-filter: blur(10px); /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */ } .layout.hide-aside { max-width: 1200px; } /* 设置黑夜的时候,社交按钮为白色 */ [data-theme=dark] .social-icon i { color: rgba(188, 188, 188) !important; /* 设置为白色 */ } .layout{ width: 100%; max-width:1400px; } /* 重新定义宽度 */ .layout > div:first-child { width: 100%; } #post { width: 78%; } .aside-content { max-width: 100%; min-width: 300px; } .layout.hide-aside { max-width: 1400px; } /* 定义是否侧边栏的宽度 */ #recent-posts > .recent-post-item { height: 19em; border: var(--style-border); } #recent-posts > .recent-post-item >.recent-post-info { padding: 0 56px; width: 64%; } @media screen and (max-width: 768px) { #recent-posts > .recent-post-item { height: auto; } #recent-posts > .recent-post-item >.recent-post-info { padding: 20px 20px 30px; width: 100%; text-align: center; } } /* 主页文章列表图片宽度 */ .loading-img { background: url(https://free.picui.cn/free/2025/08/10/689845496a283.png) no-repeat center center; background-size: cover; } #footer { background-color: rgba(0, 0, 0, 0); /* 修改透明色 */ color: #fff; padding: 0; } #footer .footer-other { padding: 0; } .footer-copyright{ padding: 0; } .my-footer-logo { color: white; } .my-footer-wave-svg { height: 50px; width: 100%; transform: scale(-1, -1) translateY(-10px); /*;*/ } .my-footer-wave-path { fill: #177ecd; } .my-footer-content { margin-left: auto; margin-right: auto; max-width: 1230px; padding: 40px 15px 450px; position: relative; } .my-footer-content-column { box-sizing: border-box; float: left; padding-left: 15px; padding-right: 15px; width: 100%; color: #fff; } .my-footer-content-column ul li a { color: #fff; text-decoration: none; } .my-footer-logo-link { display: inline-block; } .my-footer-menu { margin-top: 15px; } .my-footer-menu-name { color: #fffff2; font-size: 15px; font-weight: 900; letter-spacing: .1em; line-height: 18px; margin-bottom: 0; margin-top: 0; text-transform: uppercase; } .my-footer-menu-list { list-style: none; margin-bottom: 0; margin-top: 10px; padding-left: 0; } .my-footer-menu-list li { margin-top: 5px; } .my-footer-call-to-action-description { color: #fffff2; margin-top: 10px; margin-bottom: 20px; } .my-footer-call-to-action-button:hover { background-color: #fffff2; color: #00bef0; } .button:last-of-type { margin-right: 0; } .my-footer-call-to-action-button { background-color: #03708c; border-radius: 21px; color: #fffff2; display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .1em; line-height: 18px; padding: 12px 30px; margin: 0 10px 10px 0; text-decoration: none; text-transform: uppercase; transition: background-color .2s; cursor: pointer; position: relative; } .my-footer-call-to-action { margin-top: 17px; } .my-footer-call-to-action-title { color: #fffff2; font-size: 14px; font-weight: 900; letter-spacing: .1em; line-height: 18px; margin-bottom: 0; margin-top: 0; text-transform: uppercase; } .my-footer-call-to-action-link-wrapper { margin-bottom: 0; margin-top: 10px; color: #fff; text-decoration: none; } .my-footer-call-to-action-link-wrapper a { color: #fff; text-decoration: none; } .my-footer-social-links { bottom: -1px; height: 54px; position: absolute; right: 0; width: 236px; } .my-footer-social-amoeba-svg { height: 54px; left: 0; display: block; position: absolute; top: 0; width: 236px; } .my-footer-social-amoeba-path { fill: #03708c; } .my-footer-social-link.email { height: 41px; left: 5px; top: 14px; width: 41px; } .my-footer-social-link { display: block; padding: 10px; position: absolute; } .hidden-link-text { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; top: 50%; } .my-footer-social-icon-svg { display: block; } .my-footer-social-icon-path { fill: #fffff2; transition: fill .2s; } .my-footer-social-link.follow { height: 42px; left: 124px; top: 13px; width: 42px; } .my-footer-social-link.rss { height: 43px; left: 178px; top: 10px; width: 43px; } .my-footer-social-link.github { height: 62px; left: 54px; top: -4px; width: 62px; } .my-footer-copyright { background-color: #03708c; color: #fff; padding: 15px 30px; text-align: center; } .my-footer-copyright-wrapper { margin-left: auto; margin-right: auto; max-width: 1200px; } .my-footer-copyright-text { color: #fff; font-size: 13px; font-weight: 400; line-height: 18px; margin-bottom: 0; margin-top: 0; } .my-footer-copyright-link { color: #fff; text-decoration: none; } .my-footer-content-div { background: #177ecd } .my-footer-svg-div { width: 100%; max-height: 200px; } /* Media Query For different screens */ @media (min-width: 320px) and (max-width: 479px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ .my-footer-content { margin-left: auto; margin-right: auto; max-width: 1230px; padding: 40px 15px 649px; position: relative; } /* 不展示logo */ .my-footer-logo { display: none; } } @media (min-width: 480px) and (max-width: 599px) { /* smartphones, Android phones, landscape iPhone */ .my-footer-content { margin-left: auto; margin-right: auto; max-width: 1230px; padding: 40px 15px 738px; position: relative; } .my-footer-logo { padding-left: 177px; /* Qlogo 稍微偏移一点 */ padding-right: 170px; } } @media (min-width: 600px) and (max-width: 800px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ .my-footer-content { margin-left: auto; margin-right: auto; max-width: 1230px; padding: 40px 15px 758px; position: relative; } } @media (min-width: 801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } @media (min-width: 1025px) { /* big landscape tablets, laptops, and desktops */ } @media (min-width: 1281px) { /* hi-res laptops and desktops */ } @media (min-width: 760px) { .my-footer-content { margin-left: auto; margin-right: auto; max-width: 1230px; padding: 10px 15px 237px; position: relative; } .my-footer-content-column { /*五列的话 19.99 %*/ width: 24.99%; } } @media (min-width: 568px) { } @media (min-width: 600px) and (max-width: 760px) { /* 在这里编写适用于小屏幕的样式 */ .my-footer-logo { padding-left: 212px; /* Qlogo 稍微偏移一点 */ padding-right: 204px; } } /* 页脚波浪的颜色 */ [data-theme='dark'] .my-footer-wave-path { fill: #0f3858; } [data-theme='dark'] .my-footer-content-div { background-color: #0f3858; } /* 页脚海底的颜色 */ [data-theme='dark'] .my-footer-copyright { background-color: #2b3f49; } [data-theme='dark'] .my-footer-social-amoeba-path { fill: #2b3f49; }