style(styles): 添加顶部导航栏和面包屑样式变量
- 为profession主题添加navbar、hamburger和breadcrumb相关样式变量 - 为technology4主题添加navbar、hamburger和breadcrumb相关样式变量 - 为technology5主题添加navbar、hamburger和breadcrumb相关样式变量 - 更新variables.scss引用从technology3切换到technology5 - 统一顶部导航栏背景渐变、阴影、悬停效果等样式定义 - 标准化面包屑导航文字颜色、链接颜色和悬停效果配置
This commit is contained in:
@@ -21,6 +21,71 @@ $subMenuHover: #2D5BA6;
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色）
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #1A3055;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(58, 113, 168, 0.2);
|
||||
$navbarShadowY: 2px;
|
||||
$navbarShadowBlur: 8px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(90, 155, 219, 0.3);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(90, 155, 219, 0.15);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: $menuText;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(90, 155, 219, 0.3);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(90, 155, 219, 0.3);
|
||||
$navbarAvatarHoverBorderColor: $light-blue;
|
||||
$navbarAvatarHoverGlow: rgba(90, 155, 219, 0.4);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: $menuText;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: $menuText;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 6px rgba(90, 155, 219, 0.3);
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #F0F4F8;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #F0F4F8;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: rgba(90, 155, 219, 0.2);
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $light-blue;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: 0 0 6px rgba(90, 155, 219, 0.3);
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(90, 155, 219, 0.4);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #F5F8FC;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
@@ -33,3 +98,4 @@ $sideBarWidth: 250px;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
@import 'variables.technology3';
|
||||
@import 'variables.technology5';
|
||||
|
||||
@@ -21,6 +21,71 @@ $subMenuHover: #1E3A8A;
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝紫色）
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #0D1422;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(79, 195, 247, 0.15);
|
||||
$navbarShadowY: 2px;
|
||||
$navbarShadowBlur: 8px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(79, 195, 247, 0.2);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(79, 195, 247, 0.1);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: $menuText;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(79, 195, 247, 0.3);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(79, 195, 247, 0.3);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(79, 195, 247, 0.4);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: $menuText;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: $menuText;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 6px $menuActiveText;
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: rgba(79, 195, 247, 0.2);
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: 0 0 6px rgba(79, 195, 247, 0.4);
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(79, 195, 247, 0.5);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #FFFFFF;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
@@ -33,3 +98,4 @@ $sideBarWidth: 250px;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
|
||||
|
||||
@@ -21,8 +21,73 @@ $subMenuHover: #393E7C;
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从侧边栏颜色过渡到深紫色）
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #141426;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(0, 229, 255, 0.15);
|
||||
$navbarShadowY: 2px;
|
||||
$navbarShadowBlur: 8px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(0, 229, 255, 0.2);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(0, 229, 255, 0.1);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: $menuText;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(0, 229, 255, 0.3);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(0, 229, 255, 0.3);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(0, 229, 255, 0.4);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: $menuText;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: $menuText;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 6px $menuActiveText;
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: rgba(0, 229, 255, 0.2);
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: 0 0 6px rgba(0, 229, 255, 0.4);
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(0, 229, 255, 0.5);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #FFFFFF;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
@@ -33,3 +98,4 @@ $sideBarWidth: 250px;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user