mirror of
https://git.beihong.wang/wangbeihong/blog-source.git
synced 2026-04-23 19:13:04 +08:00
191 lines
13 KiB
CSS
Executable File
191 lines
13 KiB
CSS
Executable File
@charset "UTF-8";
|
|
/* ------------------------------------ Harmony Hues主题 @author 星语社长 @link https://biibii.cn @update 2024-7-6 18:00:04 --------------------------------- */
|
|
:root[data-theme=light] { /* 侧边栏-一言顶部渐变色 */ --hotposts-h-bg: linear-gradient(to right, rgba(254, 125, 125, 0.5), transparent); --newreply-h-bg: linear-gradient(to right, rgba(125, 254, 147, 0.5), transparent); --atoc-h-bg: linear-gradient(to right, rgba(125, 125, 254, 0.5), transparent); }
|
|
|
|
.hh-widget { overflow: hidden; background-image: var(--widget-bg-gradient); }
|
|
|
|
.hh-widget:first-child { margin-top: 0 !important; }
|
|
|
|
/* 侧边栏-工具-标题-顶部-背景 */
|
|
.widget-title-top-bg { position: absolute; top: 0; left: 0; width: 100%; height: 3rem; opacity: 0.8; -webkit-mask: linear-gradient(var(--bg-color-main) -20%, transparent); mask: linear-gradient(var(--bg-color-main) -20%, transparent); z-index: -1; backdrop-filter: blur(5px); }
|
|
|
|
/* 侧边栏 - 博主信息 */
|
|
.author-content { cursor: default; }
|
|
|
|
.author-content .author-info-avatar { position: relative; width: 5rem; height: 5rem; margin: 0 auto; }
|
|
|
|
.author-content .author-info-avatar .avatar-img { width: 5rem; height: 5rem; border: var(--border-solid-main); border-radius: var(--border-radius-circle); transition: var(--transition-ease-all); overflow: hidden; }
|
|
|
|
.author-content .author-info-avatar .author-oneline { position: absolute; width: 1rem; height: 1rem; right: 5px; bottom: 5px; background-color: var(--success); border-radius: var(--border-radius-circle); border: var(--border-solid-main); }
|
|
|
|
.author-content .author-info-avatar .author-oneline.author-offline { background-color: var(--secondary); }
|
|
|
|
.author-content .author-info-avatar:hover .avatar-img { border-radius: var(--border-radius-base); }
|
|
|
|
.author-content .author-nickname { color: var(--font-color-main); font-size: 1.1rem; }
|
|
|
|
.author-content .author-text { font-size: 0.9rem; color: var(--font-color-main-light); }
|
|
|
|
.author-content .blog-count-box .blog-count-item { margin: 0.1rem; color: var(--font-color-main); font-weight: 500; font-size: 0.85rem; background-image: linear-gradient(to right, var(--overlay-color-dark-1), transparent); border-radius: var(--border-radius-base); overflow: hidden; }
|
|
|
|
@keyframes spin { from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); } }
|
|
|
|
/* 侧边栏 - 一言 */
|
|
.yiyan-widget { position: relative; }
|
|
|
|
.yiyan-widget .yiyan-date .yiyan-day { line-height: 1; font-weight: bold; font-size: 2.25rem; }
|
|
|
|
.yiyan-widget .yiyan-refresh-btn { position: absolute; top: 0.25rem; right: 0.25rem; color: var(--font-color-main-light); animation: spin 8s linear infinite; -webkit-animation: spin 8s linear infinite; }
|
|
|
|
.yiyan-widget .yiyan-refresh-btn:hover { cursor: pointer; color: var(--color-primary-light-1); }
|
|
|
|
.yiyan-widget .yiyan-content .yiyan-cover { position: relative; }
|
|
|
|
.yiyan-widget .yiyan-content .yiyan-cover img { width: 100%; height: 100%; max-height: 7rem; object-fit: cover; }
|
|
|
|
.yiyan-widget .yiyan-content .yiyan-cover::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); }
|
|
|
|
.yiyan-widget .yiyan-content .yiyan-text .yiyan-quote { font-size: 0.9rem; }
|
|
|
|
.yiyan-widget .yiyan-content .yiyan-text .yiyan-author { color: var(--font-color-main-light); font-size: 0.8rem; }
|
|
|
|
/* 侧边栏 - 恶魔之眼 */
|
|
.devil-widget { background-color: #0e0e0e; }
|
|
|
|
.devil-widget .devil-content { position: relative; height: 6rem; }
|
|
|
|
.devil-widget .devil-eye-left, .devil-widget .devil-eye-right { overflow: hidden; height: 2rem; width: 45%; background-color: var(--danger); border-top-left-radius: 10px; border-top-right-radius: 10px; animation: naturalBlink 3.5s infinite; -webkit-animation: naturalBlink 3.5s infinite; }
|
|
|
|
.devil-widget .devil-eye-left { border-bottom-right-radius: 30px; border-bottom-left-radius: 100%; }
|
|
|
|
.devil-widget .devil-eye-right { border-bottom-right-radius: 100%; border-bottom-left-radius: 30px; }
|
|
|
|
@keyframes naturalBlink { 0%, 5%, 30%, 37%, 100% { transform: scaleY(1); }
|
|
3%, 33% { transform: scaleY(0); } }
|
|
|
|
.devil-widget .devil-eye-o { width: 12px; height: 12px; background-color: #000; border-radius: 10px; animation: eyeMoveSmooth 5s ease-in-out infinite; -webkit-animation: eyeMoveSmooth 5s ease-in-out infinite; }
|
|
|
|
@keyframes eyeMoveSmooth { 0%, 100% { transform: translateX(70px); }
|
|
50% { transform: translateX(0px); } }
|
|
|
|
.devil-widget .devil-text { font-size: 0.75rem; color: #6c757d; }
|
|
|
|
/* 侧边栏 - 热门文章 */
|
|
.hotposts-widget .hotposts-item { font-size: 0.95rem; line-height: 2; /* 排名文字颜色背景 */ }
|
|
|
|
.hotposts-widget .hotposts-item .hotposts-number { font-size: 0.9rem; padding: 0 0.35rem; border-radius: var(--border-radius-small); color: var(--white); overflow: hidden; }
|
|
|
|
.hotposts-widget .hotposts-item:nth-child(1) .hotposts-number { background-color: #1a1a1a; }
|
|
|
|
.hotposts-widget .hotposts-item:nth-child(2) .hotposts-number { background-color: #333333; }
|
|
|
|
.hotposts-widget .hotposts-item:nth-child(3) .hotposts-number { background-color: #4d4d4d; }
|
|
|
|
.hotposts-widget .hotposts-item:nth-child(4) .hotposts-number { background-color: #666666; }
|
|
|
|
.hotposts-widget .hotposts-item:nth-child(5) .hotposts-number { background-color: #808080; }
|
|
|
|
.hotposts-widget .hotposts-item:nth-child(6) .hotposts-number { background-color: #999999; }
|
|
|
|
.hotposts-widget .hotposts-item .hotposts-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
|
|
|
|
/* 侧边栏 - 最新评论 */
|
|
.newreply-widget { font-size: 0.9rem; overflow: hidden; max-height: 15rem; -webkit-mask: linear-gradient(var(--bg-color-main) 80%, transparent); mask: linear-gradient(var(--bg-color-main) 80%, transparent); }
|
|
|
|
.newreply-widget:hover { overflow: auto; }
|
|
|
|
.newreply-widget .newreply-item:last-child { padding-bottom: 1rem; }
|
|
|
|
.newreply-widget .avatar-img { width: 2rem; height: 2rem; border-radius: var(--border-radius-circle); overflow: hidden; border: var(--border-solid-main); }
|
|
|
|
.newreply-widget .comment-content { position: relative; line-height: 1.5rem; background-color: var(--bg-color-primary); border-radius: var(--border-radius-small); word-break: break-all; }
|
|
|
|
.newreply-widget .comment-content::before { position: absolute; content: ""; width: 0.8rem; height: 0.8rem; background-color: var(--bg-color-primary); top: -2px; left: 5px; z-index: -1; transform: rotate(45deg); }
|
|
|
|
.newreply-widget .comment-content:hover { background-color: var(--overlay-color-light-8); }
|
|
|
|
.newreply-widget .comment-content:hover::before { background-color: var(--overlay-color-light-8); }
|
|
|
|
.newreply-widget .comment-content img { width: auto; height: 1.5rem; }
|
|
|
|
.newreply-widget .comment-content p { margin: 0; }
|
|
|
|
.newreply-widget .comment-content .comment-content-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
|
|
|
|
/* 文章页面侧边栏 - 目录导航 */
|
|
.atoc-content { font-size: 0.95rem; }
|
|
|
|
.atoc-content .atoc-item { position: relative; }
|
|
|
|
.atoc-content .atoc-item .atoc-link { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; transition: all 0.3s ease-in-out; }
|
|
|
|
.atoc-content .atoc-item .atoc-link.active { font-weight: bold; color: var(--color-primary-light-1); }
|
|
|
|
/* 首页侧边栏 - 博客路牌 */
|
|
.blogsignage-widget .blogsignage-head { background-color: var(--color-primary-dark-1); color: var(--white); height: 3.5rem; font-size: 1.15rem; letter-spacing: 0.15rem; }
|
|
|
|
.blogsignage-widget .blogsignage-foot { font-size: 0.9rem; }
|
|
|
|
.blogsignage-widget .blogsignage-foot .iconfont { font-size: 1rem; display: inline-block; }
|
|
|
|
.blogsignage-widget .blogsignage-foot .blogsignage-foot-west .iconfont { transform: rotate(90deg); }
|
|
|
|
.blogsignage-widget .blogsignage-foot .blogsignage-foot-east .iconfont { transform: rotate(-90deg); }
|
|
|
|
/* 首页底部 - 样式 */
|
|
.index-footer-widget { /* 首页底部-Hello */ /* 首页底部-时间之旅 */ }
|
|
|
|
.index-footer-widget .hello-widget { position: relative; height: 8rem; }
|
|
|
|
.index-footer-widget .hello-widget .hello-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-color-dark-2); mix-blend-mode: overlay; -webkit-backdrop-filter: saturate(50%) blur(4px); backdrop-filter: saturate(50%) blur(4px); }
|
|
|
|
.index-footer-widget .hello-widget .hello-content .hello-text { color: var(--bg-color-main); font-size: 2rem; font-weight: bold; }
|
|
|
|
.index-footer-widget .hello-widget .hello-btn-group { position: absolute; bottom: 0.75rem; right: 0.75rem; }
|
|
|
|
.index-footer-widget .hello-widget .hello-btn-group .hello-btn-item { font-size: 0.8rem; color: var(--color-primary-light-5); background-color: var(--overlay-color-light-1); border-radius: var(--border-radius-small); }
|
|
|
|
.index-footer-widget .timejourney-widget { position: relative; background-image: var(--gradient-45deg); z-index: 0; }
|
|
|
|
.index-footer-widget .timejourney-widget .timejourney-progress { position: absolute; width: 0%; height: 100%; color: var(--bg-color-body); font-weight: bold; background-color: var(--font-color-main); z-index: -1; }
|
|
|
|
@media (max-width: 767.98px) { .index-footer-widget .timejourney-widget .timejourney-progress { font-size: 0.85rem; } }
|
|
|
|
.index-footer-widget .timejourney-widget .timejourney-content { width: 100%; height: 100%; color: var(--bg-color-body); }
|
|
|
|
.index-footer-widget .timejourney-widget .timejourney-content .timejourney-day { font-size: 1.5rem; font-weight: bold; }
|
|
|
|
@media (max-width: 767.98px) { .index-footer-widget .timejourney-widget .timejourney-content .timejourney-day { font-size: 0.85rem; } }
|
|
|
|
.index-footer-widget .timejourney-widget .timejourney-content .timejourney-desc, .index-footer-widget .timejourney-widget .timejourney-content .timejourney-unit { font-size: 0.8rem; }
|
|
|
|
.index-footer-widget .timejourney-widget .timejourney-content .timejourney-desc { color: var(--white); mix-blend-mode: difference; }
|
|
|
|
/* 首页顶部 - 轮播图样式 */
|
|
.swiper-widget { overflow: hidden; }
|
|
|
|
.swiper-widget .swiper-container { position: relative; width: 100%; height: 15rem; overflow: hidden; }
|
|
|
|
@media (max-width: 767.98px) { .swiper-widget .swiper-container { height: 12rem !important; } }
|
|
|
|
@media (max-width: 575.98px) { .swiper-widget .swiper-container { height: 11rem !important; } }
|
|
|
|
.swiper-widget .swiper-container:hover .swiper-button-wrapper { opacity: 1; }
|
|
|
|
.swiper-widget .swiper-container .swiper-wrapper .swiper-slide-label { position: absolute; top: 0; right: 1rem; z-index: 1; font-size: 0.85rem; background-color: var(--bg-color-primary); border-bottom-right-radius: var(--border-radius-base); border-bottom-left-radius: var(--border-radius-base); overflow: hidden; border-bottom: var(--border-solid-main); border-inline: var(--border-solid-main); }
|
|
|
|
.swiper-widget .swiper-container .swiper-wrapper .swiper-slide-content { width: 100%; position: absolute; bottom: 0; color: var(--bg-color-main); background-image: linear-gradient(0deg, var(--overlay-color-dark-2) 15%, transparent 85%); }
|
|
|
|
.swiper-widget .swiper-container .swiper-wrapper .swiper-slide-content .swiper-slide-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; }
|
|
|
|
.swiper-widget .swiper-container .swiper-wrapper .swiper-slide-content .swiper-slide-description { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
|
|
|
|
.swiper-widget .swiper-container .swiper-button-wrapper { gap: 0.5rem; opacity: 0; position: absolute; bottom: 0; right: 0; z-index: 11; transition: opacity 0.5s ease-in-out; }
|
|
|
|
.swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-prev, .swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-next { width: 1.7rem; height: 1.7rem; background-color: var(--bg-color-body); mix-blend-mode: overlay; -webkit-backdrop-filter: saturate(50%) blur(10px); backdrop-filter: saturate(50%) blur(10px); border: var(--border-solid-small); border-radius: var(--border-radius-medium); }
|
|
|
|
.swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-prev:hover, .swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-next:hover { background-color: var(--bg-color-secondary); }
|
|
|
|
.swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-prev .iconfont, .swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-next .iconfont { font-size: 0.85rem; background-image: var(--widget-bg-gradient); border-radius: var(--border-radius-large); box-shadow: 2px 2px 15px 0 var(--overlay-color-dark-2); border: var(--border-solid-small); }
|