mirror of
https://github.com/StepanovPlaton/AboutMe.git
synced 2026-04-04 12:50:49 +04:00
Initial commit
This commit is contained in:
GitHub
269
src/styles/navbar.css
Normal file
269
src/styles/navbar.css
Normal file
@@ -0,0 +1,269 @@
|
||||
/*
|
||||
* 导航栏半透明效果样式
|
||||
* Navbar Translucent Effects Styles
|
||||
* 只有当页面启用banner时才应用半透明效果
|
||||
*/
|
||||
|
||||
|
||||
/* 导航区域基础布局样式（避免 flex 子项溢出） */
|
||||
.navbar-nav-links {
|
||||
min-width: 0;
|
||||
flex-shrink: 1;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, gap 0.3s ease;
|
||||
}
|
||||
|
||||
/* 导航链接样式 */
|
||||
.nav-link-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 小屏幕时只显示图标 */
|
||||
@media (max-width: 1279px) {
|
||||
.nav-link-item {
|
||||
width: 2.75rem; /* 11 * 0.25rem */
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-link-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕时显示图标+文字 */
|
||||
@media (min-width: 1280px) {
|
||||
.nav-link-item {
|
||||
padding-left: 0.75rem; /* 3 * 0.25rem */
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-link-text {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮区域基础布局样式（避免 flex 子项溢出） */
|
||||
.navbar-buttons {
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 无banner时使用原始card-base样式，不添加额外的透明效果 */
|
||||
/* 确保导航栏在没有banner时有基本的背景色和圆角（低优先级，不覆盖card-base） */
|
||||
#navbar > div {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--radius-large);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
|
||||
/* 半透明模式 - 在有banner时启用 */
|
||||
:is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #navbar[data-transparent-mode="semi"] > div {
|
||||
backdrop-filter: blur(20px) !important;
|
||||
background: rgba(255, 255, 255, 0.55) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.55) !important;
|
||||
border-radius: 0.75rem !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
/* 半透明模式 - 在有banner时启用 - 暗色主题 */
|
||||
:root.dark :is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #navbar[data-transparent-mode="semi"] > div {
|
||||
background: rgba(0, 0, 0, 0.55) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.55) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
/* 完全透明模式 - 在有banner时启用 */
|
||||
:is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #navbar[data-transparent-mode="full"] > div {
|
||||
backdrop-filter: none !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
/* 完全透明模式 - 在有banner时启用 - 暗色主题 */
|
||||
:root.dark :is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #navbar[data-transparent-mode="full"] > div {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
/* 半完全透明模式 - 在有banner时启用 - 默认状态：页面顶部时完全透明 */
|
||||
:is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #navbar[data-transparent-mode="semifull"] > div {
|
||||
backdrop-filter: none !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
/* 半完全透明模式 - 在有banner时启用 - 默认状态：页面顶部时完全透明 - 暗色主题 */
|
||||
:root.dark :is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #navbar[data-transparent-mode="semifull"] > div {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
/* 半完全透明模式 - 在有banner时启用 - 滚动状态：下滑后变为半透明圆角 */
|
||||
:is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #navbar[data-transparent-mode="semifull"].scrolled > div {
|
||||
backdrop-filter: blur(20px) !important;
|
||||
background: rgba(255, 255, 255, 0.55) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.55) !important;
|
||||
border-radius: 0.75rem !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
/* 半完全透明模式 - 在有banner时启用 - 滚动状态：下滑后变为半透明圆角 - 暗色主题 */
|
||||
:root.dark :is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #navbar[data-transparent-mode="semifull"].scrolled > div {
|
||||
background: rgba(0, 0, 0, 0.55) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.55) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
/* 二级菜单、主题色、夜间模式菜单、手机端导航在有banner时启用半透明效果 */
|
||||
:is(#banner-wrapper ~ *, body:has(#banner-wrapper)) .dropdown-content,
|
||||
:is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #display-setting,
|
||||
:is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #nav-menu-panel,
|
||||
:is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #translate-panel,
|
||||
:is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #search-panel {
|
||||
backdrop-filter: blur(20px) !important;
|
||||
background: rgba(255, 255, 255, 0.55) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.55) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
/* 二级菜单、主题色、夜间模式菜单、手机端导航在有banner时启用半透明效果 - 暗色主题 */
|
||||
:root.dark :is(#banner-wrapper ~ *, body:has(#banner-wrapper)) .dropdown-content,
|
||||
:root.dark :is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #display-setting,
|
||||
:root.dark :is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #nav-menu-panel,
|
||||
:root.dark :is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #translate-panel,
|
||||
:root.dark :is(#banner-wrapper ~ *, body:has(#banner-wrapper)) #search-panel {
|
||||
background: rgba(0, 0, 0, 0.55) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.55) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
/* 响应式优化 */
|
||||
|
||||
/* 桌面端&平板端布局 */
|
||||
@media (min-width: 768px) {
|
||||
/* 使用 Grid 布局确保中间区域在有空间时居中 */
|
||||
#navbar > div {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
/* 确保左侧 Home 按钮不拉伸并靠左 */
|
||||
#navbar > div > a:first-child {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
#navbar .navbar-nav-links {
|
||||
position: static;
|
||||
left: unset;
|
||||
translate: none;
|
||||
justify-self: center;
|
||||
gap: clamp(0.12rem, 1vw, 0.36rem);
|
||||
}
|
||||
|
||||
#navbar .navbar-buttons {
|
||||
justify-self: end;
|
||||
gap: clamp(0.12rem, 1vw, 0.36rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* 非大屏桌面端&平板端优化 */
|
||||
@media (min-width: 768px) and (max-width: 1279px) {
|
||||
#navbar .navbar-nav-links {
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
#navbar .navbar-buttons {
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
/* 搜索状态下的避让逻辑以防重叠 */
|
||||
#navbar.is-searching .navbar-nav-links {
|
||||
opacity: 0;
|
||||
scale: 0.9;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端导航栏 */
|
||||
@media (max-width: 768px) {
|
||||
#navbar > div {
|
||||
max-width: none !important;
|
||||
width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
/* 手机端导航栏 - 小屏 */
|
||||
@media (max-width: 512px) {
|
||||
#navbar > div {
|
||||
border-radius: 0.3rem !important;
|
||||
margin: 0 !important;
|
||||
padding-left: 0.6rem !important;
|
||||
padding-right: 0.6rem !important;
|
||||
max-width: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#navbar-buttons {
|
||||
gap: 0.123rem !important;
|
||||
}
|
||||
/* Only size the trigger buttons; do not affect nested buttons inside panels */
|
||||
#navbar-buttons button:not(.float-panel *) {
|
||||
width: 2.4rem !important;
|
||||
height: 2.4rem !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* home button */
|
||||
#navbar > div > a:first-child {
|
||||
width: 7.2rem !important;
|
||||
height: 2.4rem !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端导航栏 - 更小屏 */
|
||||
@media (min-width: 333px) and (max-width: 444px) {
|
||||
#navbar-buttons {
|
||||
gap: 0.111rem !important;
|
||||
}
|
||||
/* Only size the trigger buttons; do not affect nested buttons inside panels */
|
||||
#navbar-buttons button:not(.float-panel *) {
|
||||
width: 2.1rem !important;
|
||||
height: 2.1rem !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* home button */
|
||||
#navbar > div > a:first-child {
|
||||
width: 6.3rem !important;
|
||||
height: 2.1rem !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端导航栏按钮 -超小屏 */
|
||||
@media (max-width: 333px) {
|
||||
#navbar-buttons {
|
||||
gap: 0 !important;
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
/* Hide home button text (keep icon) */
|
||||
#navbar > div > a:first-child > div {
|
||||
font-size: 0 !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user