mirror of
https://git.beihong.wang/wangbeihong/blog-source.git
synced 2026-04-23 18:03:04 +08:00
606 lines
12 KiB
SCSS
Executable File
606 lines
12 KiB
SCSS
Executable File
/* ------------------------------------
|
|
* 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);
|
|
}
|
|
|
|
// 建议的标准断点定义
|
|
$breakpoints: (
|
|
xs: 0,
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px
|
|
);
|
|
|
|
// max-width 查询
|
|
@mixin max-media-breakpoint($breakpoint-name) {
|
|
$max-width: map-get($breakpoints, $breakpoint-name) - 0.02;
|
|
|
|
@media (max-width: $max-width) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// 定义文本溢出省略号样式
|
|
@mixin text-ellipsis($line-clamp: 2) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: $line-clamp;
|
|
-webkit-box-orient: vertical;
|
|
white-space: normal;
|
|
}
|
|
|
|
.hh-widget {
|
|
overflow: hidden;
|
|
background-image: var(--widget-bg-gradient);
|
|
|
|
&: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-info-avatar {
|
|
position: relative;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
margin: 0 auto;
|
|
|
|
.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-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-offline {
|
|
background-color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
&:hover .avatar-img {
|
|
border-radius: var(--border-radius-base);
|
|
}
|
|
}
|
|
|
|
.author-nickname {
|
|
color: var(--font-color-main);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.author-text {
|
|
font-size: 0.9rem;
|
|
color: var(--font-color-main-light);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 旋转360度动画
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* 侧边栏 - 一言 */
|
|
.yiyan-widget {
|
|
position: relative;
|
|
|
|
.yiyan-date {
|
|
.yiyan-day {
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
font-size: 2.25rem;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: var(--color-primary-light-1);
|
|
}
|
|
}
|
|
|
|
.yiyan-content {
|
|
.yiyan-cover {
|
|
position: relative;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 7rem;
|
|
object-fit: cover;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
.yiyan-text {
|
|
.yiyan-quote {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.yiyan-author {
|
|
color: var(--font-color-main-light);
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 侧边栏 - 恶魔之眼 */
|
|
.devil-widget {
|
|
background-color: #0e0e0e;
|
|
|
|
.devil-content {
|
|
position: relative;
|
|
height: 6rem;
|
|
}
|
|
|
|
.devil-eye-left,
|
|
.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-eye-left {
|
|
border-bottom-right-radius: 30px;
|
|
border-bottom-left-radius: 100%;
|
|
}
|
|
|
|
.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-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-text {
|
|
font-size: 0.75rem;
|
|
color: #6c757d;
|
|
}
|
|
}
|
|
|
|
/* 侧边栏 - 热门文章 */
|
|
.hotposts-widget {
|
|
$rank-colors: (
|
|
1: #1a1a1a,
|
|
2: #333333,
|
|
3: #4d4d4d,
|
|
4: #666666,
|
|
5: #808080,
|
|
6: #999999
|
|
);
|
|
|
|
.hotposts-item {
|
|
font-size: 0.95rem;
|
|
line-height: 2;
|
|
|
|
.hotposts-number {
|
|
font-size: 0.9rem;
|
|
padding: 0 0.35rem;
|
|
border-radius: var(--border-radius-small);
|
|
color: var(--white);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 排名文字颜色背景 */
|
|
@each $rank, $color in $rank-colors {
|
|
&:nth-child(#{$rank}) .hotposts-number {
|
|
background-color: $color;
|
|
}
|
|
}
|
|
|
|
.hotposts-title {
|
|
@include text-ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 侧边栏 - 最新评论 */
|
|
.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);
|
|
|
|
&:hover {
|
|
overflow: auto;
|
|
}
|
|
|
|
.newreply-item:last-child {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: var(--border-radius-circle);
|
|
overflow: hidden;
|
|
border: var(--border-solid-main);
|
|
}
|
|
|
|
.comment-content {
|
|
position: relative;
|
|
line-height: 1.5rem;
|
|
background-color: var(--bg-color-primary);
|
|
border-radius: var(--border-radius-small);
|
|
word-break: break-all;
|
|
|
|
&::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);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--overlay-color-light-8);
|
|
|
|
&::before {
|
|
background-color: var(--overlay-color-light-8);
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: auto;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.comment-content-text {
|
|
@include text-ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 文章页面侧边栏 - 目录导航 */
|
|
.atoc-content {
|
|
font-size: 0.95rem;
|
|
|
|
.atoc-item {
|
|
position: relative;
|
|
|
|
.atoc-link {
|
|
@include text-ellipsis;
|
|
transition: all 0.3s ease-in-out;
|
|
|
|
&.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-foot {
|
|
font-size: 0.9rem;
|
|
|
|
.iconfont {
|
|
font-size: 1rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.blogsignage-foot-west {
|
|
.iconfont {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.blogsignage-foot-east {
|
|
.iconfont {
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 首页底部 - 样式 */
|
|
.index-footer-widget {
|
|
|
|
/* 首页底部-Hello */
|
|
.hello-widget {
|
|
position: relative;
|
|
height: 8rem;
|
|
|
|
.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);
|
|
|
|
.hello-text {
|
|
color: var(--bg-color-main);
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.hello-btn-group {
|
|
position: absolute;
|
|
bottom: 0.75rem;
|
|
right: 0.75rem;
|
|
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 首页底部-时间之旅 */
|
|
.timejourney-widget {
|
|
position: relative;
|
|
background-image: var(--gradient-45deg);
|
|
z-index: 0;
|
|
|
|
.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;
|
|
|
|
@include max-media-breakpoint('md') {
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
.timejourney-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--bg-color-body);
|
|
|
|
.timejourney-day {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
|
|
@include max-media-breakpoint('md') {
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
.timejourney-desc,
|
|
.timejourney-unit {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.timejourney-desc {
|
|
color: var(--white);
|
|
mix-blend-mode: difference;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 首页顶部 - 轮播图样式 */
|
|
.swiper-widget {
|
|
overflow: hidden;
|
|
|
|
.swiper-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 15rem;
|
|
overflow: hidden;
|
|
|
|
@include max-media-breakpoint('md') {
|
|
height: 12rem !important;
|
|
}
|
|
|
|
@include max-media-breakpoint('sm') {
|
|
height: 11rem !important;
|
|
}
|
|
|
|
&:hover {
|
|
.swiper-button-wrapper {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.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-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-slide-title {
|
|
@include text-ellipsis(1);
|
|
}
|
|
|
|
.swiper-slide-description {
|
|
font-size: 0.85rem;
|
|
@include text-ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-button-prev,
|
|
.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);
|
|
|
|
&:hover {
|
|
background-color: var(--bg-color-secondary);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |