416 lines
9.9 KiB
SCSS
416 lines
9.9 KiB
SCSS
/*-- scss:defaults --*/
|
|
|
|
$theme: "drwater" !default;
|
|
|
|
//
|
|
// Color system
|
|
//
|
|
|
|
$white: #ffffff !default;
|
|
$gray-100: #f8f9fa !default;
|
|
$gray-200: #e9ecef !default;
|
|
$gray-300: #dee2e6 !default;
|
|
$gray-400: #ced4da !default;
|
|
$gray-500: #adb5bd !default;
|
|
$gray-600: #868e96 !default;
|
|
$gray-700: #495057 !default;
|
|
$gray-800: #373a3c !default;
|
|
$gray-900: #212529 !default;
|
|
$black: #000000 !default;
|
|
|
|
$blue: #2780e3 !default;
|
|
$indigo: #6610f2 !default;
|
|
$purple: #170c3a !default;
|
|
$pink: #a52c60 !default;
|
|
$red: #cf4446 !default;
|
|
$orange: #ee6a24 !default;
|
|
$light-orange: #fb9e07 !default;
|
|
$yellow: #f6d645 !default;
|
|
$green: #118230 !default;
|
|
$teal: #20c997 !default;
|
|
$cyan: #3093cf !default;
|
|
|
|
$primary: $pink !default;
|
|
$secondary: $gray-700 !default;
|
|
$success: $green !default;
|
|
$info: $cyan !default;
|
|
$warning: $orange !default;
|
|
$danger: $red !default;
|
|
$light: $gray-400 !default;
|
|
$dark: $black !default;
|
|
|
|
// Fonts
|
|
|
|
$font-family-sans-serif: "Libre Franklin" !default;
|
|
|
|
$headings-font-family: "Jost" !default;
|
|
$headings-font-weight: 600 !default;
|
|
|
|
$navbar-font-family: "Jost" !default;
|
|
$toc-font-family: "Jost" !default;
|
|
$footer-font-family: "Jost" !default;
|
|
|
|
// Body
|
|
$body-color: $gray-900 !default;
|
|
|
|
// Links
|
|
$link-color: $orange !default;
|
|
$link-decoration: none !default;
|
|
$link-hover-color: $red !default;
|
|
$link-hover-decoration: underline !default;
|
|
|
|
// Inline code
|
|
$code-bg: $gray-200 !default;
|
|
$code-color: $gray-900 !default;
|
|
|
|
// Code copy
|
|
$btn-code-copy-color-active: $orange !default;
|
|
|
|
// TOC
|
|
$toc-color: $orange;
|
|
$toc-font-size: 1em;
|
|
|
|
// Navbar
|
|
$navbar-bg: $purple !default;
|
|
$navbar-fg: $white !default;
|
|
$navbar-hl: $light-orange !default;
|
|
|
|
// Footer
|
|
$footer-bg: $gray-900 !default;
|
|
$footer-fg: $gray-300 !default;
|
|
|
|
/*-- scss:rules --*/
|
|
|
|
$web-font-path: "https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap" !default;
|
|
|
|
@if $web-font-path {
|
|
@import url($web-font-path);
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Logo 悬停效果 */
|
|
.navbar-brand img {
|
|
transition: all 0.3s ease;
|
|
filter: brightness(0) invert(1);
|
|
|
|
&:hover {
|
|
filter: brightness(0) invert(0.55) sepia(1) saturate(2000%) hue-rotate(-8deg) brightness(1.05) contrast(1.2);
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
// =============================================
|
|
// 桌面端样式 - 使用悬停展开下拉菜单
|
|
// =============================================
|
|
@media (min-width: 992px) {
|
|
/* 导航栏主菜单项样式 */
|
|
.navbar-nav .nav-item {
|
|
position: relative;
|
|
margin: 0 0.2rem;
|
|
|
|
.nav-link {
|
|
position: relative;
|
|
color: $navbar-fg !important;
|
|
font-weight: 500;
|
|
padding: 0.75rem 1rem !important;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
z-index: 1;
|
|
|
|
/* 玻璃效果背景 */
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba($white, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 8px;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
z-index: -1;
|
|
border: 1px solid rgba($white, 0.2);
|
|
}
|
|
|
|
&:hover {
|
|
color: $light-orange !important;
|
|
transform: translateY(-2px);
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
background: rgba($white, 0.15);
|
|
backdrop-filter: blur(15px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
/* 激活状态 */
|
|
&.active {
|
|
color: $light-orange !important;
|
|
font-weight: 600;
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
background: rgba($light-orange, 0.2);
|
|
backdrop-filter: blur(15px);
|
|
border: 1px solid rgba($light-orange, 0.3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 有下拉菜单的主菜单项特殊样式 */
|
|
.navbar-nav .nav-item.dropdown {
|
|
.nav-link {
|
|
padding-right: 2rem !important;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
|
|
&:hover .nav-link::before {
|
|
opacity: 1;
|
|
background: rgba($white, 0.2);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
&:hover .nav-link::after {
|
|
transform: translateY(-50%) rotate(-180deg);
|
|
border-top-color: $light-orange;
|
|
}
|
|
}
|
|
|
|
/* 桌面端下拉菜单悬停效果 */
|
|
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
transform: translateY(0) !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
display: block;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-10px);
|
|
transition: all 0.3s ease;
|
|
background: rgba($purple, 0.98) !important;
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba($white, 0.1);
|
|
border-top: none;
|
|
border-radius: 0 0 8px 8px;
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
|
|
margin-top: -1px;
|
|
padding: 0.5rem 0;
|
|
|
|
&.show {
|
|
display: block;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.dropdown-item {
|
|
color: $white !important;
|
|
font-family: $navbar-font-family;
|
|
padding: 0.75rem 1.5rem;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
|
|
/* 下拉菜单项的玻璃效果 */
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba($white, 0.05);
|
|
border-radius: 4px;
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
z-index: -1;
|
|
}
|
|
|
|
&:hover, &:focus {
|
|
color: $light-orange !important;
|
|
transform: translateX(5px);
|
|
background: transparent !important;
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
background: rgba($white, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 确保下拉菜单与主菜单视觉上连接 */
|
|
.navbar-nav .nav-item.dropdown:hover .nav-link {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
// =============================================
|
|
// 移动端样式 - 使用点击展开下拉菜单
|
|
// =============================================
|
|
@media (max-width: 991.98px) {
|
|
/* 完全重置移动端导航样式，使用 Bootstrap 默认行为 */
|
|
.navbar-collapse {
|
|
background: rgba($purple, 0.98);
|
|
backdrop-filter: blur(10px);
|
|
border-top: 1px solid rgba($white, 0.1);
|
|
margin-top: 0.5rem;
|
|
padding: 0.5rem 0;
|
|
|
|
.navbar-nav {
|
|
.nav-item {
|
|
margin: 0;
|
|
|
|
.nav-link {
|
|
color: $navbar-fg !important;
|
|
padding: 1rem 1.5rem !important;
|
|
border-radius: 0;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
color: $light-orange !important;
|
|
background: rgba($white, 0.1);
|
|
}
|
|
|
|
&.active {
|
|
color: $light-orange !important;
|
|
background: rgba($light-orange, 0.1);
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
/* 下拉菜单项样式 */
|
|
&.dropdown {
|
|
.dropdown-toggle::after {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
&.show {
|
|
.dropdown-toggle {
|
|
color: $light-orange !important;
|
|
background: rgba($white, 0.15);
|
|
|
|
&::after {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
background: rgba(darken($purple, 5%), 0.95) !important;
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
position: static;
|
|
float: none;
|
|
display: none;
|
|
|
|
&.show {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 移动端下拉菜单项 */
|
|
.dropdown-item {
|
|
color: $navbar-fg !important;
|
|
padding: 0.875rem 1.5rem 0.875rem 2.5rem !important;
|
|
border-radius: 0;
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover, &:focus {
|
|
color: $light-orange !important;
|
|
background: rgba($white, 0.1) !important;
|
|
transform: none;
|
|
}
|
|
|
|
&.active {
|
|
color: $light-orange !important;
|
|
background: rgba($light-orange, 0.1) !important;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
/* 移动端导航栏折叠按钮 */
|
|
.navbar-toggler {
|
|
border: 1px solid rgba($white, 0.2);
|
|
padding: 0.5rem 0.75rem;
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba($light-orange, 0.25);
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
|
}
|
|
}
|
|
|
|
/* 禁用桌面端的悬停效果 */
|
|
.navbar-nav .nav-item .nav-link::before {
|
|
display: none;
|
|
}
|
|
|
|
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// =============================================
|
|
// 通用样式
|
|
// =============================================
|
|
|
|
/* 导航栏整体样式 */
|
|
.navbar {
|
|
backdrop-filter: blur(10px);
|
|
background: rgba($purple, 0.95) !important;
|
|
border-bottom: 1px solid rgba($white, 0.1);
|
|
}
|
|
|
|
/* 为有下拉菜单的导航项添加视觉指示 */
|
|
.navbar-nav .nav-item.dropdown > .nav-link::after {
|
|
display: inline-block;
|
|
margin-left: 0.255em;
|
|
vertical-align: 0.255em;
|
|
content: "";
|
|
border-top: 0.3em solid;
|
|
border-right: 0.3em solid transparent;
|
|
border-bottom: 0;
|
|
border-left: 0.3em solid transparent;
|
|
}
|
|
|
|
/* 确保 Bootstrap 的 JavaScript 交互正常工作 */
|
|
.navbar-nav .dropdown-toggle::after {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
/* 修复移动端点击事件 */
|
|
.navbar-nav .nav-item.dropdown .nav-link {
|
|
cursor: pointer;
|
|
}
|