Files
blog/themes/butterfly/source/css/style.css
2026-02-08 19:03:16 +08:00

727 lines
18 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* #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;
}