mirror of
https://git.beihong.wang/wangbeihong/blog-source.git
synced 2026-04-23 18:03:04 +08:00
1832 lines
38 KiB
SCSS
Executable File
1832 lines
38 KiB
SCSS
Executable File
/* ------------------------------------
|
||
* Harmony Hues主题
|
||
*
|
||
* @author 星语社长
|
||
* @link https://biibii.cn
|
||
* @update 2024-7-6 18:00:04
|
||
* --------------------------------- */
|
||
:root {
|
||
/*基础样式*/
|
||
font-synthesis: style;
|
||
-webkit-text-size-adjust: none;
|
||
-moz-text-size-adjust: none;
|
||
text-size-adjust: none;
|
||
word-wrap: break-word;
|
||
color: var(--font-color-main);
|
||
|
||
/* 色调 */
|
||
/* 主色调：现代蓝色 */
|
||
--color-primary: #165DFF;
|
||
/* 比主色调更深 */
|
||
--color-primary-dark-1: #0E42D2;
|
||
/* 更深的色调 */
|
||
--color-primary-dark-2: #072A8A;
|
||
/* 非常深的色调 */
|
||
--color-primary-dark-3: #041957;
|
||
/* 比主色调稍浅 */
|
||
--color-primary-light-1: #4080FF;
|
||
/* 浅一些的色调 */
|
||
--color-primary-light-2: #6AA1FF;
|
||
/* 较浅的色调 */
|
||
--color-primary-light-3: #94BFFF;
|
||
/* 更浅的色调 */
|
||
--color-primary-light-4: #BEDAFF;
|
||
/* 非常浅的色调 */
|
||
--color-primary-light-5: #E8F3FF;
|
||
/* 主背景色 */
|
||
--bg-color-main: #fff;
|
||
/* 主背景色-黑 */
|
||
--bg-color-main-dark: #000;
|
||
/* 页面背景色 */
|
||
--bg-color-body: #f6f7f9;
|
||
/* 遮罩层浅色1 */
|
||
--overlay-color-light-1: rgba(255, 255, 255, .1);
|
||
/* 遮罩层浅色2 */
|
||
--overlay-color-light-2: rgba(255, 255, 255, .2);
|
||
/* 遮罩层浅色3 */
|
||
--overlay-color-light-3: rgba(255, 255, 255, .3);
|
||
/* 遮罩层浅色4 */
|
||
--overlay-color-light-4: rgba(255, 255, 255, .4);
|
||
/* 遮罩层浅色5 */
|
||
--overlay-color-light-5: rgba(255, 255, 255, .5);
|
||
/* 遮罩层浅色8 */
|
||
--overlay-color-light-8: rgba(255, 255, 255, .8);
|
||
/* 黑遮罩层浅色1 */
|
||
--overlay-color-dark-1: rgba(0, 0, 0, .1);
|
||
/* 黑遮罩层浅色2 */
|
||
--overlay-color-dark-2: rgba(0, 0, 0, .2);
|
||
/* 黑遮罩层浅色3 */
|
||
--overlay-color-dark-3: rgba(0, 0, 0, .3);
|
||
/* 黑遮罩层浅色4 */
|
||
--overlay-color-dark-4: rgba(0, 0, 0, .4);
|
||
/* 黑遮罩层浅色5 */
|
||
--overlay-color-dark-5: rgba(0, 0, 0, .5);
|
||
/* 主字体颜色 */
|
||
--font-color-main: #333;
|
||
/* 主字体颜色（浅色） */
|
||
--font-color-main-light: #6c757d;
|
||
/* 主字体颜色（透明） */
|
||
--font-color-main-transparent: rgba(60, 60, 60, 0.7);
|
||
/* 字体颜色（muted） */
|
||
--font-color-muted: #b2b2b2;
|
||
/* 主边框颜色 */
|
||
--border-color-main: #e4e4e4;
|
||
/* 主要背景色 */
|
||
--bg-color-primary: #f2f2f2;
|
||
/* 次要背景色 */
|
||
--bg-color-secondary: #f5f5f5;
|
||
/* 基础圆角大小 */
|
||
--border-radius-base: 8px;
|
||
/* 小圆角大小 */
|
||
--border-radius-small: 5px;
|
||
/* 中等圆角大小 */
|
||
--border-radius-medium: calc(var(--border-radius-small) * 2);
|
||
/* 大圆角大小 */
|
||
--border-radius-large: calc(var(--border-radius-small) * 6);
|
||
/* 超大圆角大小 */
|
||
--border-radius-xlarge: calc(var(--border-radius-small) * 20);
|
||
/* 圆形圆角 */
|
||
--border-radius-circle: 50%;
|
||
/* 固定导航栏高度 */
|
||
--height-nav-fixed: 80px;
|
||
/* 页脚高度 */
|
||
--height-footer: 60px;
|
||
/* 主背景滤镜 */
|
||
--backdrop-filter-main: saturate(180%) blur(20px);
|
||
/* 主渐变透明背景 */
|
||
--gradient-primary-transparent: linear-gradient(0deg, var(--color-primary-light-4), transparent);
|
||
|
||
/* 主题样式 */
|
||
/* 中等蓝色灰色 */
|
||
--color-blue-gray-medium: var(--color-primary);
|
||
/* 浅色中等蓝色灰色 */
|
||
--color-blue-gray-medium-light: var(--color-primary-dark-3);
|
||
/* 主阴影 */
|
||
--shadow-box-main: 8px 8px 15px 0 rgba(55, 99, 170, .1), -8px -8px 15px 0 var(--bg-color-main), inset 0 4px 15px 0 var(--overlay-color-light-5);
|
||
/* 小阴影 */
|
||
--shadow-box-small: 5px 5px 12px 0 rgba(55, 99, 170, .1), -5px -5px 12px 0 var(--bg-color-main), inset 0 4px 10px 0 var(--overlay-color-light-5);
|
||
/* 悬停阴影 */
|
||
--shadow-box-hover: 8px 8px 15px 0 rgba(55, 99, 170, .2), -8px -8px 15px 0 var(--bg-color-main);
|
||
/* 0度渐变 */
|
||
--gradient-0deg: linear-gradient(0deg, var(--bg-color-body), #f8f8f8);
|
||
/* 45度渐变 */
|
||
--gradient-45deg: linear-gradient(45deg, var(--bg-color-body), #f8f8f8);
|
||
/* 工具背景渐变 */
|
||
--widget-bg-gradient: linear-gradient(-45deg, var(--bg-color-main), #f3f5f8);
|
||
/* 主边框 */
|
||
--border-solid-main: 2px solid var(--bg-color-main);
|
||
/* 小边框 */
|
||
--border-solid-small: 1px solid var(--bg-color-main);
|
||
/* 导航栏阴影 */
|
||
--shadow-nav: 0 5px 12px 0 rgba(50, 98, 170, .1);
|
||
/* 导航栏shadow */
|
||
--shadow-hover-nav: inset -8px -8px 16px var(--bg-color-body), inset 8px 8px 16px var(--bg-color-body), 8px 8px 16px rgba(0, 0, 0, 0.25);
|
||
/* 内嵌阴影 */
|
||
--shadow-inset-box: inset -4px -4px 12px #f1f1f1, inset 4px 4px 12px #e2e2e2;
|
||
/* 所有属性过渡效果 */
|
||
--transition-ease-all: all .3s ease 0s;
|
||
}
|
||
|
||
:root[data-theme=dark] {
|
||
--bg-color-main: #262626;
|
||
--bg-color-main-dark: #fff;
|
||
--bg-color-body: #222222;
|
||
--overlay-color-light-1: rgba(0, 0, 0, 0.5);
|
||
--overlay-color-light-2: #333333;
|
||
--overlay-color-light-3: #4d4d4d;
|
||
--overlay-color-light-4: #666666;
|
||
--overlay-color-light-5: #2a2a2a;
|
||
--overlay-color-light-8: #2e2e2e;
|
||
--overlay-color-dark-1: #4d4d4d;
|
||
--overlay-color-dark-2: rgba(255, 255, 255, .25);
|
||
--overlay-color-dark-3: #808080;
|
||
--overlay-color-dark-4: #999999;
|
||
--overlay-color-dark-5: #b3b3b3;
|
||
--font-color-main: #fff;
|
||
--font-color-main-light: #b3b3b3;
|
||
--font-color-main-transparent: rgba(220, 220, 220, 0.7);
|
||
--font-color-muted: #757575;
|
||
--border-color-main: #333;
|
||
--bg-color-primary: #2C2C2C;
|
||
--bg-color-secondary: #171717;
|
||
--gradient-primary-transparent: linear-gradient(0deg, #333, rgba(0, 0, 0, 0.3));
|
||
--color-blue-gray-medium: var(--color-primary);
|
||
--color-blue-gray-medium-light: var(--color-primary-dark-3);
|
||
--shadow-box-main: 8px 8px 15px 0 rgba(0, 0, 0, .3), -8px -8px 15px 0 var(--bg-color-main), inset 0 4px 15px 0 var(--bg-color-body);
|
||
--shadow-box-small: 5px 5px 12px 0 rgba(0, 0, 0, .3), -5px -5px 12px 0 var(--bg-color-main), inset 0 4px 10px 0 var(--bg-color-body);
|
||
--shadow-box-hover: 8px 8px 15px 0 rgba(0, 0, 0, .4), -8px -8px 15px 0 var(--bg-color-main);
|
||
--gradient-0deg: linear-gradient(0deg, var(--bg-color-body), var(--overlay-color-light-5));
|
||
--gradient-45deg: linear-gradient(45deg, var(--bg-color-body), var(--overlay-color-light-5));
|
||
--widget-bg-gradient: linear-gradient(-45deg, var(--bg-color-main), var(--bg-color-body));
|
||
--shadow-nav: 0 5px 12px 0 rgba(0, 0, 0, .3);
|
||
--shadow-inset-box: inset -4px -4px 12px #1a1a1a, inset 4px 4px 12px #1e1e1e;
|
||
}
|
||
|
||
// 建议的标准断点定义
|
||
$breakpoints: (
|
||
xs: 0,
|
||
sm: 576px,
|
||
md: 768px,
|
||
lg: 992px,
|
||
xl: 1200px
|
||
);
|
||
|
||
// min-width 查询
|
||
@mixin min-media-breakpoint($breakpoint-name) {
|
||
$min-width: map-get($breakpoints, $breakpoint-name);
|
||
|
||
@media (min-width: $min-width) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
// max-width 查询
|
||
@mixin max-media-breakpoint($breakpoint-name) {
|
||
$max-width: map-get($breakpoints, $breakpoint-name) - 0.02;
|
||
|
||
@media (max-width: $max-width) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
// 范围查询 (需要两个参数)
|
||
@mixin and-media-breakpoint($from, $to) {
|
||
$min: map-get($breakpoints, $from);
|
||
$max: map-get($breakpoints, $to) - 0.02;
|
||
|
||
@media (min-width: $min) and (max-width: $max) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
// 定义文本溢出省略号样式
|
||
@mixin ellipsis-style($line-clamp: 2) {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: $line-clamp;
|
||
-webkit-box-orient: vertical;
|
||
white-space: normal;
|
||
word-break: break-all;
|
||
}
|
||
|
||
// 毛玻璃样式
|
||
@mixin backdrop-filter($background: var(--bg-color-main), $filter: blur(10px)) {
|
||
background: $background;
|
||
-webkit-backdrop-filter: $filter;
|
||
backdrop-filter: $filter;
|
||
}
|
||
|
||
/* 全局样式 */
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg-color-body) !important;
|
||
}
|
||
|
||
ol,
|
||
ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
font: inherit;
|
||
color: inherit;
|
||
padding: 0;
|
||
margin: 0;
|
||
border: 0;
|
||
outline: 0;
|
||
vertical-align: baseline;
|
||
box-sizing: border-box;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
/* 去除a标签默认样式 */
|
||
a {
|
||
color: var(--font-color-main);
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
|
||
&:link,
|
||
&:visited,
|
||
&:hover,
|
||
&:active,
|
||
&:focus {
|
||
text-decoration: none;
|
||
}
|
||
|
||
&:hover {
|
||
color: var(--color-blue-gray-medium) !important;
|
||
}
|
||
}
|
||
|
||
/*--------浏览器滚动条---------*/
|
||
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
||
::-webkit-scrollbar {
|
||
-webkit-appearance: none;
|
||
width: 0.5rem;
|
||
height: 0.5rem;
|
||
}
|
||
|
||
/*定义滚动条轨道 内阴影+圆角*/
|
||
::-webkit-scrollbar-track {
|
||
background-color: #e4e4e4;
|
||
}
|
||
|
||
/*定义滑块 内阴影+圆角*/
|
||
::-webkit-scrollbar-thumb {
|
||
cursor: pointer;
|
||
border-radius: 10px;
|
||
background: #b2b2b2;
|
||
-webkit-transition: color .3s ease;
|
||
transition: color .3s ease;
|
||
}
|
||
|
||
/* 指定滚动样式 */
|
||
.scroll-cover {
|
||
overflow: auto;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 2px !important;
|
||
height: 2px !important;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
background-color: transparent;
|
||
}
|
||
|
||
}
|
||
|
||
/*--------浏览器滚动条---------*/
|
||
|
||
/*---输入公共样式---*/
|
||
input,
|
||
textarea,
|
||
select {
|
||
color: var(--font-color-main) !important;
|
||
box-shadow: var(--shadow-inset-box) !important;
|
||
background-color: transparent !important;
|
||
border-radius: var(--border-radius-base) !important;
|
||
border: var(--border-solid-small) !important;
|
||
|
||
@include max-media-breakpoint('md') {
|
||
border: var(--border-solid-small) !important;
|
||
}
|
||
}
|
||
|
||
input:-webkit-autofill {
|
||
transition: background-color 5000s ease-in-out 0s;
|
||
-webkit-text-fill-color: var(--font-color-main) !important;
|
||
}
|
||
|
||
button {
|
||
color: var(--font-color-main) !important;
|
||
|
||
&.btn:focus {
|
||
box-shadow: var(--shadow-inset-box);
|
||
}
|
||
}
|
||
|
||
img,
|
||
video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
:root[data-theme=dark] {
|
||
|
||
img,
|
||
video {
|
||
filter: brightness(.85);
|
||
}
|
||
}
|
||
|
||
/* 名字svg样式 */
|
||
.svg-name {
|
||
path {
|
||
fill: var(--font-color-main);
|
||
}
|
||
}
|
||
|
||
/* 文字边框 */
|
||
.title-text-stroke {
|
||
text-stroke: 1px var(--font-color-main);
|
||
-webkit-text-stroke: 1px var(--font-color-main);
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/* 文字阴影 */
|
||
.text-shadow-style {
|
||
position: relative;
|
||
--text-col: var(--bg-color-main);
|
||
--text-show-col: var(--font-color-main);
|
||
color: var(--text-col);
|
||
text-shadow: 3px 3px 0 var(--text-show-col), -1px -1px 0 var(--text-show-col), 1px -1px 0 var(--text-show-col), -1px 1px 0 var(--text-show-col), 1px 1px 0 var(--text-show-col);
|
||
}
|
||
|
||
.text-webkit-mask {
|
||
opacity: 0.5;
|
||
-webkit-mask: linear-gradient(var(--bg-color-main) 50%, transparent);
|
||
mask: linear-gradient(var(--bg-color-main) 50%, transparent);
|
||
}
|
||
|
||
/* 图标公共样式 */
|
||
.iconfont {
|
||
font-family: "iconfont" !important;
|
||
color: var(--font-color-main);
|
||
font-size: 1.5rem;
|
||
font-style: normal;
|
||
line-height: 1;
|
||
-webkit-font-smoothing: antialiased;
|
||
-webkit-text-stroke-width: 0.2px;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
|
||
&:hover {
|
||
color: var(--color-blue-gray-medium);
|
||
}
|
||
}
|
||
|
||
/* 公共动画 */
|
||
// 淡入
|
||
@keyframes fade-in-top {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(15px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes fade-in-top {
|
||
from {
|
||
opacity: 0;
|
||
-webkit-transform: translateY(15px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
-webkit-transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
// SVG动画
|
||
.animated-signature path {
|
||
stroke-dasharray: 2400;
|
||
stroke-dashoffset: 2400;
|
||
fill: transparent;
|
||
animation: drawSignature 8s linear infinite both;
|
||
-webkit-animation: drawSignature 8s linear infinite both;
|
||
stroke-width: 2px;
|
||
stroke: var(--font-color-main);
|
||
}
|
||
|
||
// 图片懒加载
|
||
img {
|
||
&.lazy {
|
||
background-color: var(--color-primary-light-5);
|
||
filter: blur(25px);
|
||
-webkit-transition: opacity 1s ease-in-out;
|
||
transition: opacity 1s ease-in-out;
|
||
}
|
||
|
||
&.loaded {
|
||
background-color: transparent;
|
||
filter: blur(0px);
|
||
-webkit-transition: filter 1s linear, -webkit-filter 1s linear;
|
||
transition: filter 1s linear, -webkit-filter 1s linear;
|
||
}
|
||
}
|
||
|
||
@keyframes drawSignature {
|
||
0% {
|
||
stroke-dashoffset: 2400;
|
||
}
|
||
|
||
15% {
|
||
fill: transparent;
|
||
}
|
||
|
||
35%,
|
||
75% {
|
||
stroke-dashoffset: 0;
|
||
fill: var(--font-color-main);
|
||
}
|
||
|
||
90%,
|
||
to {
|
||
stroke-dashoffset: 2400;
|
||
fill: transparent;
|
||
}
|
||
}
|
||
|
||
// 灯箱
|
||
.view-image-lead img {
|
||
width: auto;
|
||
height: auto;
|
||
}
|
||
|
||
/*---------- 导航栏样式st ----------*/
|
||
/* 导航栏样式 */
|
||
.navbar {
|
||
position: fixed;
|
||
z-index: 99;
|
||
width: 100%;
|
||
background-color: transparent;
|
||
transition: var(--transition-ease-all);
|
||
|
||
@mixin nav-bg($background: var(--bg-color-main), $filter: blur(10px)) {
|
||
background-image: radial-gradient(transparent 1px, var(--bg-color-main) 1px);
|
||
background-size: 4px 4px;
|
||
-webkit-backdrop-filter: saturate(50%) blur(5px);
|
||
backdrop-filter: saturate(50%) blur(5px);
|
||
-webkit-box-shadow: var(--shadow-nav) !important;
|
||
box-shadow: var(--shadow-nav) !important;
|
||
}
|
||
|
||
&.nav-ui-one {
|
||
@include nav-bg();
|
||
}
|
||
|
||
&.nav-ui-two {
|
||
.navbar-box {
|
||
@include nav-bg();
|
||
border: var(--border-solid-main);
|
||
border-radius: var(--border-radius-medium);
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
box-shadow: var(--shadow-nav) !important;
|
||
}
|
||
|
||
&.nav-hidden {
|
||
transform: translateY(-100%) !important;
|
||
opacity: 0 !important;
|
||
}
|
||
|
||
&.nav-visible {
|
||
transform: translateY(0) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
}
|
||
|
||
// LOGO样式
|
||
.navbar-logo {
|
||
span {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
img {
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
// -----》电脑导航栏菜单样式
|
||
.nav-inner {
|
||
position: relative;
|
||
|
||
.nav-icon {
|
||
display: inline-block;
|
||
margin-left: 0.1rem;
|
||
font-size: 0.8rem;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.nav-menu {
|
||
gap: 1rem;
|
||
}
|
||
|
||
.nav-item {
|
||
position: relative;
|
||
|
||
.nav-a.active {
|
||
color: var(--color-primary);
|
||
text-shadow: 0 0.15rem 1rem var(--color-primary-light-1);
|
||
|
||
.nav-icon {
|
||
color: var(--color-blue-gray-medium);
|
||
}
|
||
}
|
||
|
||
>.sub-menu {
|
||
position: absolute;
|
||
left: -15%;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
z-index: 9;
|
||
transform: translateY(-15px);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
&:hover {
|
||
.nav-a {
|
||
color: var(--color-blue-gray-medium);
|
||
}
|
||
|
||
>.sub-menu {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
pointer-events: auto;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.nav-icon {
|
||
color: var(--color-blue-gray-medium);
|
||
transform: rotate(-90deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.sub-menu {
|
||
white-space: nowrap;
|
||
|
||
ul {
|
||
background: var(--gradient-0deg);
|
||
border-radius: var(--border-radius-base);
|
||
white-space: nowrap;
|
||
border: var(--border-solid-main);
|
||
box-shadow: var(--shadow-hover-nav);
|
||
overflow: hidden;
|
||
|
||
li {
|
||
position: relative;
|
||
width: 100%;
|
||
transition: all .3s;
|
||
overflow: hidden;
|
||
|
||
&>a {
|
||
--nav-font-size: 20px;
|
||
display: inline-block;
|
||
transform: translateY(calc(-1 * var(--nav-font-size) * 1.5));
|
||
text-shadow: 0px calc(var(--nav-font-size) * 1.5) 0px var(--font-color-main);
|
||
transition: transform 0.3s cubic-bezier(0.15, 1, 0.35, 1);
|
||
}
|
||
|
||
&:hover {
|
||
&>a {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
&:hover,
|
||
&.active {
|
||
width: 100%;
|
||
background-color: var(--bg-color-main);
|
||
border-radius: var(--border-radius-medium);
|
||
box-shadow: var(--shadow-box-hover);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// ------》导航栏右侧图标样式
|
||
.navbar-icon {
|
||
gap: 1rem;
|
||
|
||
@include max-media-breakpoint('md') {
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 1.35rem;
|
||
}
|
||
}
|
||
|
||
/*滚动进度+回到顶部样式*/
|
||
.back-to-top {
|
||
display: flex;
|
||
overflow: hidden;
|
||
|
||
.nav-top-item {
|
||
text-align: center;
|
||
font-size: 0.8rem;
|
||
width: 1.6rem;
|
||
height: 1.6rem;
|
||
line-height: 1.6rem;
|
||
border-radius: var(--border-radius-xlarge);
|
||
background: var(--font-color-main);
|
||
color: var(--bg-color-main);
|
||
transition: width 0.3s, display 0.3s;
|
||
|
||
&.top-to-active {
|
||
width: 5rem;
|
||
}
|
||
}
|
||
|
||
.top-to-icon {
|
||
display: none;
|
||
}
|
||
|
||
&:hover {
|
||
.top-to-icon {
|
||
display: inline-block;
|
||
}
|
||
|
||
.top-to-text {
|
||
display: none;
|
||
}
|
||
|
||
.nav-top-item {
|
||
width: 5rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ----》手机导航栏菜单 */
|
||
#nav-components {
|
||
&.mobile-aside {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: fixed;
|
||
width: 100%;
|
||
max-height: 95vh;
|
||
min-height: 70vh;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
background-color: var(--bg-color-main);
|
||
bottom: 0;
|
||
z-index: 1000;
|
||
transform: translateY(100%);
|
||
transition: transform 1s cubic-bezier(0.3, 0.7, 0, 1), opacity 1s linear, visibility 1s linear;
|
||
border-top-left-radius: var(--border-radius-medium);
|
||
border-top-right-radius: var(--border-radius-medium);
|
||
box-shadow: 0 -0.15rem 1.5rem 0.25rem var(--overlay-color-dark-1);
|
||
|
||
&.open {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.back-box {
|
||
display: inline-block;
|
||
width: 3rem;
|
||
height: 4px;
|
||
border-radius: var(--border-radius-xlarge);
|
||
background-color: var(--overlay-color-dark-3);
|
||
}
|
||
|
||
.mobile-close-btn {
|
||
position: absolute;
|
||
display: flex;
|
||
right: 0;
|
||
top: 0;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
background-color: var(--bg-color-body);
|
||
border-radius: var(--border-radius-circle);
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.nav-menu {
|
||
>.nav-item {
|
||
font-size: 1rem;
|
||
color: var(--font-color-main);
|
||
}
|
||
|
||
.nav-a {
|
||
.iconfont {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.nav-icon {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.sub-menu {
|
||
background-color: var(--bg-color-body);
|
||
border-radius: var(--border-radius-medium);
|
||
border-top-left-radius: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 顶部站位样式
|
||
.nav-fixed {
|
||
padding-top: var(--height-nav-fixed);
|
||
|
||
@include max-media-breakpoint('md') {
|
||
padding-top: calc(var(--height-nav-fixed) - 1rem);
|
||
}
|
||
}
|
||
|
||
/*---------- 导航栏样式end ----------*/
|
||
|
||
/*---------- 文章分类样式st ----------*/
|
||
.category-box {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 12rem;
|
||
max-height: 100%;
|
||
overflow: hidden;
|
||
|
||
.category-item {
|
||
position: absolute;
|
||
color: var(--bg-color-main);
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: var(--overlay-color-dark-2);
|
||
|
||
.category-info {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.category-name {
|
||
display: block;
|
||
font-size: 1.15rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.category-desc {
|
||
display: block;
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
@include ellipsis-style(2);
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
/*---------- 文章分类样式end ----------*/
|
||
|
||
|
||
/*---------- 文章列表样式st ----------*/
|
||
.post-list {
|
||
$columns: 3; // 默认 3 列
|
||
|
||
&>div {
|
||
|
||
// 桌面端适配
|
||
@for $i from 0 through 8 {
|
||
&:nth-child(#{$i + 1}) .post-item {
|
||
animation-delay: 0.2s * (ceil(($i + 1)/$columns) + 1);
|
||
}
|
||
}
|
||
|
||
// 移动端适配
|
||
@include max-media-breakpoint("md") {
|
||
$columns: 2;
|
||
|
||
@for $i from 0 through 6 {
|
||
&:nth-child(#{$i + 1}) .post-item {
|
||
animation-delay: 0.2s * (ceil(($i + 1)/$columns) + 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.post-item {
|
||
position: relative;
|
||
min-width: 0;
|
||
word-wrap: break-word;
|
||
align-self: stretch;
|
||
flex: 1 1 auto;
|
||
overflow: hidden;
|
||
border-radius: var(--border-radius-medium);
|
||
border: var(--border-solid-main);
|
||
box-shadow: var(--shadow-box-main);
|
||
background: var(--gradient-0deg);
|
||
background-clip: padding-box;
|
||
opacity: 0;
|
||
animation: fade-in-top 0.5s 0.3s forwards;
|
||
-webkit-animation: fade-in-top 0.5s 0.3s forwards;
|
||
|
||
&:hover {
|
||
background: var(--bg-color-main) !important;
|
||
box-shadow: var(--shadow-box-hover);
|
||
|
||
.post-cover {
|
||
img {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
.post-head>a {
|
||
color: var(--color-blue-gray-medium) !important;
|
||
}
|
||
}
|
||
|
||
.post-cover {
|
||
position: relative;
|
||
display: block;
|
||
overflow: hidden;
|
||
padding: 0;
|
||
flex-shrink: 0;
|
||
|
||
&::after {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 60%;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
transition: transform .3s ease-in-out;
|
||
object-fit: cover;
|
||
}
|
||
|
||
a {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
border: 0;
|
||
border-radius: inherit;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
background-position: 50% 50%;
|
||
background-clip: padding-box;
|
||
}
|
||
}
|
||
|
||
.post-info {
|
||
height: 100%;
|
||
width: 100%;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
gap: 0.5rem;
|
||
|
||
.post-head>a {
|
||
margin-bottom: 0.25rem;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
line-height: 1.5;
|
||
color: var(--font-color-main);
|
||
transition: color .3s ease 0s;
|
||
@include ellipsis-style(1);
|
||
}
|
||
|
||
.post-meta-wrap {
|
||
--font-color-main: var(--font-color-main-light);
|
||
color: var(--font-color-main);
|
||
}
|
||
|
||
.post-description {
|
||
color: var(--font-color-main-transparent);
|
||
font-size: 14px;
|
||
@include ellipsis-style(2);
|
||
}
|
||
}
|
||
|
||
@include max-media-breakpoint('md') {
|
||
box-shadow: var(--shadow-box-small);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* -------------段落省略--------- */
|
||
.author-content .author-text {
|
||
@include ellipsis-style(2);
|
||
}
|
||
|
||
.post-meta-wrap {
|
||
|
||
.author-name,
|
||
.post-meta {
|
||
color: var(--font-color-main);
|
||
font-size: 0.85rem;
|
||
@include ellipsis-style(1);
|
||
}
|
||
|
||
@include max-media-breakpoint('md') {
|
||
|
||
.author-name,
|
||
.post-meta {
|
||
font-size: 0.8rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
/*---------- 文章列表样式end ----------*/
|
||
/*---------- 文章列表->分页str ----------*/
|
||
.pagination {
|
||
gap: 0.5rem;
|
||
opacity: 0;
|
||
animation: fade-in-top 0.5s 0.8s forwards;
|
||
-webkit-animation: fade-in-top 0.5s 0.8s forwards;
|
||
|
||
.page-item {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
|
||
.page-link {
|
||
color: var(--font-color-main);
|
||
background: var(--gradient-45deg);
|
||
background-clip: padding-box;
|
||
border: var(--border-solid-main);
|
||
box-shadow: var(--shadow-box-small);
|
||
}
|
||
|
||
&.prev,
|
||
&.next {
|
||
.iconfont {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
&.active,
|
||
&:hover {
|
||
.page-link {
|
||
font-weight: bold;
|
||
color: var(--color-primary-dark-1);
|
||
background: var(--bg-color-main) !important;
|
||
box-shadow: var(--shadow-box-main);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/*---------- 文章列表分页end ----------*/
|
||
|
||
/*---------- 侧边栏样式st ----------*/
|
||
.hh-widget,
|
||
.card {
|
||
width: 100%;
|
||
color: var(--font-color-main);
|
||
border: var(--border-solid-main);
|
||
border-radius: var(--border-radius-medium);
|
||
box-shadow: var(--shadow-box-main);
|
||
background: var(--gradient-45deg);
|
||
background-clip: padding-box;
|
||
|
||
&:not(.no-animation) {
|
||
opacity: 0;
|
||
animation: fade-in-top 0.5s 0.3s forwards;
|
||
-webkit-animation: fade-in-top 0.5s 0.3s forwards;
|
||
}
|
||
}
|
||
|
||
.main-sidebar {
|
||
.sidebar-sticky {
|
||
top: 88px;
|
||
z-index: 2 !important;
|
||
transition: top 0.3s ease;
|
||
|
||
&.visible-top {
|
||
top: 20px;
|
||
}
|
||
}
|
||
|
||
.widget-title {
|
||
display: inline-block;
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
|
||
&>.iconfont {
|
||
font-size: 1.1rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
/*----------侧边栏样式end ----------*/
|
||
|
||
/*----------底部样式st ----------*/
|
||
.footer {
|
||
color: var(--font-color-main);
|
||
background-color: var(--bg-color-main);
|
||
font-size: 14px;
|
||
min-height: var(--height-footer);
|
||
|
||
@include max-media-breakpoint('md') {
|
||
.container {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-left {
|
||
text-align: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
// 夜间模式
|
||
.theme-toggle {
|
||
margin: 0 auto;
|
||
gap: 0.15rem;
|
||
background: var(--bg-color-body);
|
||
border-radius: var(--border-radius-xlarge);
|
||
border: var(--border-solid-small);
|
||
|
||
button {
|
||
line-height: 1;
|
||
background: transparent;
|
||
border-radius: var(--border-radius-large);
|
||
|
||
&.active,
|
||
&:hover {
|
||
background: var(--bg-color-main);
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 0.85rem;
|
||
color: var(--font-color-main-light);
|
||
}
|
||
}
|
||
|
||
// 社交信息列表
|
||
.social-info-list {
|
||
a {
|
||
display: flex;
|
||
width: 1.75rem;
|
||
height: 1.75rem;
|
||
background-color: var(--bg-color-main-dark);
|
||
border-radius: var(--border-radius-circle);
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background-color 0.2s;
|
||
|
||
i {
|
||
color: var(--bg-color-main);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: var(--bg-color-body);
|
||
|
||
i {
|
||
color: var(--font-color-main);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
main>.container {
|
||
min-height: calc(100vh - 6rem - var(--height-footer));
|
||
}
|
||
|
||
/*---------- 底部样式end ----------*/
|
||
|
||
/*---------- 文章+页面-面包屑样式st ----------*/
|
||
.breadcrumb {
|
||
font-size: 0.85rem;
|
||
background: none !important;
|
||
opacity: 0;
|
||
animation: fade-in-top 0.3s 0.2s forwards;
|
||
-webkit-animation: fade-in-top 0.3s 0.2s forwards;
|
||
|
||
li {
|
||
|
||
a,
|
||
span {
|
||
color: var(--font-color-main-light);
|
||
font-size: 0.8rem;
|
||
line-height: 1;
|
||
padding: 0.2rem 0.5rem;
|
||
background: linear-gradient(to right, var(--bg-color-primary), var(--overlay-color-light-2));
|
||
border-radius: var(--border-radius-xlarge);
|
||
border: var(--border-solid-small);
|
||
border-bottom-left-radius: var(--border-radius-small);
|
||
box-shadow: var(--shadow-box-small);
|
||
}
|
||
|
||
span {
|
||
color: var(--font-color-main);
|
||
box-shadow: var(--shadow-inset-box);
|
||
}
|
||
|
||
&:hover {
|
||
a {
|
||
box-shadow: var(--shadow-inset-box);
|
||
}
|
||
}
|
||
}
|
||
|
||
>li+li:before {
|
||
opacity: .6;
|
||
padding: 0 0.35rem;
|
||
color: var(--font-color-main-transparent);
|
||
content: "\003e";
|
||
}
|
||
}
|
||
|
||
/*---------- 文章+页面-面包屑样式end ----------*/
|
||
|
||
/*---------- 文章内容样式end ----------*/
|
||
.post-header {
|
||
|
||
.author-left,
|
||
.author-right {
|
||
--font-color-main: var(--font-color-main-transparent);
|
||
color: var(--font-color-main) !important;
|
||
}
|
||
}
|
||
|
||
|
||
.post-head,
|
||
.post-content {
|
||
color: var(--font-color-main);
|
||
}
|
||
|
||
.post .iconfont {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* 文章内容样式 */
|
||
.post-content {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 文章版权样式 */
|
||
.post-copyright {
|
||
position: relative;
|
||
font-size: 0.9rem;
|
||
line-height: 1.8;
|
||
color: var(--font-color-main);
|
||
border-radius: var(--border-radius-medium);
|
||
box-shadow: var(--shadow-inset-box);
|
||
z-index: 1;
|
||
border: var(--border-solid-small);
|
||
}
|
||
|
||
.copyright-svgname {
|
||
position: absolute;
|
||
height: 3rem;
|
||
top: 30%;
|
||
right: 0;
|
||
opacity: 0.9;
|
||
z-index: -1;
|
||
}
|
||
|
||
/* 文章结束样式 */
|
||
.post-end {
|
||
color: var(--border-color-main);
|
||
|
||
&::after,
|
||
&::before {
|
||
content: '';
|
||
background: var(--border-color-main);
|
||
max-width: 50%;
|
||
height: 0.05rem;
|
||
margin: 0 1rem;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
|
||
/* 文章标签样式 */
|
||
.category-and-tags {
|
||
$gap-size: 0.5rem;
|
||
gap: $gap-size;
|
||
|
||
a {
|
||
font-size: 0.75rem;
|
||
color: var(--font-color-main-transparent);
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: var(--border-radius-large);
|
||
border: var(--border-solid-main);
|
||
background-color: var(--bg-color-secondary);
|
||
}
|
||
|
||
a:hover {
|
||
background: var(--border-color-main);
|
||
}
|
||
|
||
.post-tags {
|
||
gap: $gap-size;
|
||
|
||
a {
|
||
padding: 0.15rem 0.5rem 0.15rem 0.15rem;
|
||
}
|
||
|
||
a::before {
|
||
content: '#';
|
||
display: inline-flex;
|
||
margin-right: 0.25rem;
|
||
background-color: var(--bg-color-main);
|
||
width: 20px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
font-weight: 700;
|
||
justify-content: center;
|
||
border-radius: var(--border-radius-large);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 分享+赞赏 */
|
||
.post-tools {
|
||
gap: 1rem;
|
||
|
||
.post-tools-item {
|
||
gap: 0.35rem;
|
||
|
||
.post-tools-title {
|
||
color: var(--font-color-main-transparent);
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
button {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
background-image: var(--gradient-45deg);
|
||
box-shadow: var(--shadow-box-small);
|
||
border: var(--border-solid-main);
|
||
border-radius: var(--border-radius-xlarge);
|
||
|
||
.iconfont {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
&:hover {
|
||
box-shadow: var(--shadow-inset-box);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 下一篇、上一篇 */
|
||
.post-next-prev {
|
||
gap: 1rem;
|
||
line-height: 1.8;
|
||
|
||
.post-next,
|
||
.post-prev {
|
||
position: relative;
|
||
|
||
.next-prev-title {
|
||
cursor: default;
|
||
line-height: 1;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
&:hover {
|
||
.next-prev-title {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
}
|
||
|
||
a {
|
||
@include ellipsis-style(2);
|
||
}
|
||
}
|
||
|
||
/*---------- 文章内容样式end ----------*/
|
||
|
||
/*---------- 评论样式st ----------*/
|
||
#comments {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* 评论框 */
|
||
#comment-form {
|
||
.form-control {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.comment-form-info {
|
||
input:focus {
|
||
background-color: var(--overlay-color-light-5) !important;
|
||
}
|
||
|
||
textarea:focus {
|
||
background-color: var(--overlay-color-light-5) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.com-footer {
|
||
.com-tool-list {
|
||
.com-tool-item {
|
||
position: relative;
|
||
border-radius: var(--border-radius-base);
|
||
|
||
&:hover,
|
||
&.active {
|
||
background: var(--bg-color-main);
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.com-emoji {
|
||
position: relative;
|
||
|
||
.emoji-box {
|
||
display: none;
|
||
position: absolute;
|
||
top: 3rem;
|
||
left: -0.5rem;
|
||
z-index: 10;
|
||
background-image: var(--gradient-45deg);
|
||
border: var(--border-solid-main);
|
||
border-radius: var(--border-radius-base);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-box-small);
|
||
}
|
||
|
||
.emoji-dropdown {
|
||
max-width: 100%;
|
||
width: 22rem;
|
||
height: 15rem;
|
||
text-align: center;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
margin: 0;
|
||
}
|
||
|
||
.emoji-item {
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
|
||
.gif-img {
|
||
min-width: 4rem;
|
||
}
|
||
|
||
img {
|
||
width: 2rem;
|
||
height: auto;
|
||
max-height: 100%;
|
||
}
|
||
|
||
&:hover {
|
||
border-radius: var(--border-radius-medium);
|
||
background-color: var(--bg-color-main);
|
||
}
|
||
}
|
||
|
||
.emoji-bar {
|
||
background-color: var(--bg-color-main);
|
||
|
||
li {
|
||
cursor: pointer;
|
||
|
||
&:hover,
|
||
&.emoji-active {
|
||
background-color: var(--bg-color-secondary);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-card {
|
||
color: var(--font-color-main);
|
||
font-size: 0.85rem;
|
||
background-image: var(--gradient-45deg);
|
||
box-shadow: var(--shadow-box-main);
|
||
border: var(--border-solid-small);
|
||
border-radius: var(--border-radius-medium);
|
||
background-clip: padding-box;
|
||
|
||
&:hover {
|
||
box-shadow: var(--shadow-inset-box);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 评论列表 */
|
||
.comment-body {
|
||
position: relative;
|
||
font-size: 0.85rem;
|
||
gap: 0.5rem;
|
||
|
||
.comment-author {
|
||
position: relative;
|
||
gap: 0.5rem;
|
||
|
||
.comment-name {
|
||
.comment-author-ua {
|
||
font-size: 0.7rem;
|
||
background-color: var(--color-primary);
|
||
color: var(--bg-color-main);
|
||
padding: 0.1rem 0.25rem;
|
||
border-radius: var(--border-radius-small);
|
||
}
|
||
}
|
||
|
||
.comment-time,
|
||
.comment-ua {
|
||
margin-right: 0.15rem;
|
||
font-size: 0.8rem;
|
||
color: var(--font-color-main-transparent);
|
||
}
|
||
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--border-radius-circle);
|
||
border: var(--border-solid-main);
|
||
}
|
||
}
|
||
|
||
.comment-content {
|
||
word-break: break-all;
|
||
|
||
p {
|
||
display: inline-block;
|
||
margin: 0;
|
||
}
|
||
|
||
.emoji-image {
|
||
display: inline-block !important;
|
||
width: 2rem;
|
||
height: auto;
|
||
max-height: 100%;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
img {
|
||
display: block;
|
||
max-width: 100%;
|
||
width: auto;
|
||
height: 10rem;
|
||
margin: 0.5rem 0;
|
||
border-radius: var(--border-radius-small);
|
||
}
|
||
|
||
.repy-to-author {
|
||
a {
|
||
color: var(--red);
|
||
}
|
||
}
|
||
}
|
||
|
||
.comment-footer {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
color: var(--font-color-main-transparent);
|
||
font-size: 0.85rem;
|
||
|
||
.iconfont {
|
||
color: var(--border-color-main);
|
||
}
|
||
|
||
&:hover {
|
||
.iconfont {
|
||
color: var(--font-color-main) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
.comment-footer .iconfont {
|
||
color: var(--font-color-main-transparent);
|
||
}
|
||
}
|
||
}
|
||
|
||
.comment-parent {
|
||
border-radius: var(--border-radius-medium);
|
||
box-shadow: var(--shadow-inset-box);
|
||
border: var(--border-solid-small);
|
||
|
||
.comment-list {
|
||
border-radius: var(--border-radius-medium);
|
||
box-shadow: var(--shadow-inset-box);
|
||
border: var(--border-solid-small);
|
||
|
||
.comment-list .comment-child {
|
||
border-bottom: 1px dashed var(--overlay-color-dark-1);
|
||
|
||
&:last-child {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.repy-to-author+p {
|
||
display: contents;
|
||
}
|
||
}
|
||
}
|
||
|
||
.comment-child,
|
||
.comment-parent {
|
||
margin-bottom: 0.25rem;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
|
||
/*评论下一页、上一页*/
|
||
.comment-pagination {
|
||
ol {
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
a {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
display: flex;
|
||
background-image: var(--gradient-45deg);
|
||
border: var(--border-solid-small);
|
||
border-radius: var(--border-radius-medium);
|
||
box-shadow: var(--shadow-box-main);
|
||
background-clip: padding-box;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
li.current a {
|
||
font-weight: 700;
|
||
}
|
||
|
||
a:hover,
|
||
li.current a {
|
||
color: var(--color-primary);
|
||
box-shadow: var(--shadow-inset-box);
|
||
}
|
||
|
||
.com-next .iconfont,
|
||
.com-prev .iconfont {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
/*---------- 评论样式end ----------*/
|
||
|
||
/*---------- 弹窗工具：搜索+分享+赞赏按钮样式st ----------*/
|
||
.pop-tool-overlay-bg {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
position: fixed;
|
||
inset: 0;
|
||
@include backdrop-filter(var(--overlay-color-light-1), var(--backdrop-filter-main));
|
||
z-index: 997;
|
||
-webkit-transition: all 0.4s ease-out;
|
||
transition: all 0.4s ease-out;
|
||
transform: rotate(45deg) scale(0);
|
||
}
|
||
|
||
/* 应用Mixins */
|
||
.open {
|
||
.pop-tool-overlay-bg {
|
||
opacity: 1 !important;
|
||
visibility: visible !important;
|
||
transform: rotate(0) scale(1) !important;
|
||
}
|
||
|
||
.pop-tool-box {
|
||
opacity: 1 !important;
|
||
visibility: visible !important;
|
||
top: 45% !important;
|
||
transform: translate(-50%, -50%) scale(1) !important;
|
||
}
|
||
}
|
||
|
||
.pop-tool-box {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
position: fixed;
|
||
width: calc(-20px + 100vw);
|
||
max-height: calc(100vh - 6rem);
|
||
max-width: 50rem;
|
||
z-index: 998;
|
||
top: 35%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%) scale(0);
|
||
overflow: hidden;
|
||
-webkit-transition: all 0.3s ease-out;
|
||
transition: all 0.3s ease-out;
|
||
}
|
||
|
||
/* 海报生成 */
|
||
.main-poster {
|
||
.poster-box {
|
||
width: 400px;
|
||
max-width: calc(100vw - 1rem);
|
||
padding: 0 !important;
|
||
overflow: unset;
|
||
color: var(--font-color-main);
|
||
|
||
.poster-post-box {
|
||
--poster-text-color: var(--font-color-main-light);
|
||
position: relative;
|
||
background: var(--gradient-0deg);
|
||
width: 100%;
|
||
overflow: hidden;
|
||
border-radius: var(--border-radius-base);
|
||
}
|
||
|
||
.poster-cover {
|
||
height: 200px;
|
||
border-radius: var(--border-radius-small);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.poster-content {
|
||
gap: 1rem;
|
||
|
||
.poster-date {
|
||
height: 100%;
|
||
color: var(--gray-dark);
|
||
background-color: var(--white);
|
||
border-radius: var(--border-radius-medium);
|
||
}
|
||
|
||
.poster-post-content {
|
||
.poster-post-title {
|
||
@include ellipsis-style(2);
|
||
}
|
||
|
||
.poster-post-text {
|
||
font-size: 0.9rem;
|
||
color: var(--poster-text-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.poster-footer {
|
||
border: var(--border-solid-small);
|
||
}
|
||
|
||
.down-btn-box {
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: -4rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 赞赏独立样式 */
|
||
.main-reward {
|
||
.reward-box {
|
||
width: auto;
|
||
}
|
||
|
||
.reward-content {
|
||
gap: 1rem;
|
||
|
||
.reward-qr {
|
||
color: var(--font-color-muted);
|
||
box-shadow: var(--shadow-inset-box);
|
||
border-radius: var(--border-radius-base);
|
||
overflow: hidden;
|
||
padding: 0.25rem;
|
||
}
|
||
|
||
img {
|
||
width: 10rem;
|
||
border-radius: var(--border-radius-base);
|
||
|
||
@include max-media-breakpoint('md') {
|
||
width: 8rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 分享独立样式 */
|
||
.share-box {
|
||
top: 50%;
|
||
|
||
p {
|
||
text-align: center;
|
||
color: var(--font-color-main-transparent);
|
||
background-color: var(--bg-color-primary);
|
||
border-radius: var(--border-radius-base);
|
||
border: var(--border-solid-small);
|
||
|
||
&:hover {
|
||
color: var(--font-color-main);
|
||
background: var(--overlay-color-light-5);
|
||
}
|
||
}
|
||
|
||
.share-a {
|
||
gap: 20px;
|
||
|
||
.share-item {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
background-image: var(--gradient-0deg);
|
||
box-shadow: var(--shadow-box-main);
|
||
border: var(--border-solid-main);
|
||
background-clip: padding-box;
|
||
border-radius: var(--border-radius-circle);
|
||
|
||
&:hover {
|
||
box-shadow: var(--shadow-inset-box);
|
||
}
|
||
}
|
||
}
|
||
|
||
.wechat-qrcode,
|
||
.zdyqr-qrcode {
|
||
img {
|
||
width: 10rem;
|
||
height: 10rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
/* 搜索独立样式 */
|
||
.search-box {
|
||
.search-form {
|
||
position: relative;
|
||
}
|
||
|
||
.search-name {
|
||
h5 {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.form-control {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0.6rem 2rem 0.6rem 1rem;
|
||
font-size: 0.9rem;
|
||
border-radius: var(--border-radius-medium);
|
||
}
|
||
|
||
.site-search-btn {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 3rem;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
/* 关闭按钮样式 */
|
||
.close-btn {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
background: var(--font-color-main);
|
||
border-bottom-left-radius: var(--border-radius-medium);
|
||
|
||
i {
|
||
color: var(--bg-color-main);
|
||
}
|
||
}
|
||
|
||
/*---------- 搜索+分享+赞赏按钮样式end ----------*/ |