815 lines
21 KiB
CSS
815 lines
21 KiB
CSS
.sidebar-contnet {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 4rem;
|
||
z-index: 40;
|
||
width: 98px;
|
||
height: calc(100vh - 4rem);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* `?hideHeader=1`: keep the menu rail, but let it occupy the Header's space. */
|
||
.sidebar-contnet--header-hidden {
|
||
top: 0;
|
||
height: 100vh;
|
||
}
|
||
|
||
.sidebar-contnet--header-hidden .item-nav-content {
|
||
height: calc(100vh - 20px);
|
||
min-height: calc(100vh - 20px);
|
||
}
|
||
|
||
.sidebar-contents {
|
||
width: 98px;
|
||
min-height: calc(100% - 20px);
|
||
background: rgba(3, 38, 80, 0.8);
|
||
border: 1px solid;
|
||
border-color: rgba(43, 143, 254, 0.6);
|
||
border-radius: 4px;
|
||
backdrop-filter: blur(2px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 12px 10px;
|
||
position: relative;
|
||
height: calc(100% - 20px);
|
||
box-sizing: border-box;
|
||
transform: translate(10px, 10px);
|
||
}
|
||
|
||
.item-nav-group {
|
||
width: 100%;
|
||
}
|
||
|
||
.item-nav-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.item-nav-group:first-child .item-nav {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.item-nav {
|
||
width: 100%;
|
||
height: 75px;
|
||
margin-top: 13px;
|
||
font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
background: #000c1c26;
|
||
border: 1px solid;
|
||
border-color: #55a6fe33;
|
||
box-shadow: 0 0 20px #00b9ff26 inset;
|
||
position: relative;
|
||
}
|
||
|
||
.item-nav:hover,
|
||
.item-nav-active,
|
||
.item-nav-hovered {
|
||
color: #ffffff;
|
||
background: linear-gradient(134.25deg,
|
||
rgba(0, 98, 217, 0.59) 2.28%,
|
||
rgba(0, 98, 217, 0.3) 99.59%) !important;
|
||
background-size: cover;
|
||
border: 1px solid;
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
position: relative;
|
||
}
|
||
|
||
.item-nav:hover::before,
|
||
.item-nav-active::before,
|
||
.item-nav-hovered::before {
|
||
content: '';
|
||
position: absolute;
|
||
right: -10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 8px solid transparent;
|
||
border-bottom: 8px solid transparent;
|
||
border-left: 10px solid rgba(0, 98, 217, 0.45);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.item-nav:hover::after,
|
||
.item-nav-active::after,
|
||
.item-nav-hovered::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 29px;
|
||
width: 77px;
|
||
height: 45px;
|
||
background: url('../assets/icon/nav-line-logo.svg') no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.item-nav__label {
|
||
display: block;
|
||
width: 3em;
|
||
margin: 0 auto;
|
||
padding-left: 6px;
|
||
box-sizing: border-box;
|
||
letter-spacing: 6px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.sidebar-contnet--top-submenu .sidebar-contents {
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.sidebar-contnet--top-submenu .item-nav {
|
||
height: auto;
|
||
min-height: 75px;
|
||
padding: 10px 2px;
|
||
font-size: 19px;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.sidebar-contnet--top-submenu .item-nav__label {
|
||
width: 3.1em;
|
||
max-width: 100%;
|
||
padding-left: 0;
|
||
letter-spacing: 0;
|
||
line-height: 1.35;
|
||
text-align: center;
|
||
word-break: normal;
|
||
overflow-wrap: normal;
|
||
white-space: normal;
|
||
}
|
||
|
||
.sidebar-contnet--top-submenu .item-nav__label--four-char {
|
||
width: 2.2em;
|
||
}
|
||
|
||
.sidebar-contnet--top-submenu .item-nav:hover::after,
|
||
.sidebar-contnet--top-submenu .item-nav-active::after,
|
||
.sidebar-contnet--top-submenu .item-nav-hovered::after {
|
||
top: auto;
|
||
bottom: 0;
|
||
}
|
||
|
||
.item-nav-content {
|
||
width: 155px;
|
||
height: calc(100vh - 4rem - 20px);
|
||
min-height: calc(100vh - 4rem - 20px);
|
||
background: rgba(3, 38, 80, 0.8);
|
||
border: 1px solid;
|
||
border-color: rgba(43, 143, 254, 0.6);
|
||
border-radius: 4px;
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
position: absolute;
|
||
left: 108px;
|
||
top: 0;
|
||
z-index: 1000;
|
||
padding: 14px 13px 18px 16px;
|
||
overflow-y: auto;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||
}
|
||
|
||
.item-nav-content::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -30px;
|
||
top: 0;
|
||
width: 30px;
|
||
height: 100%;
|
||
}
|
||
|
||
.item-nav-hover-bridge {
|
||
position: absolute;
|
||
right: -30px;
|
||
top: 0;
|
||
width: 30px;
|
||
height: 100%;
|
||
z-index: 999;
|
||
}
|
||
|
||
.item-nav-content--visible {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.sidebar-flyout-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
position: relative;
|
||
}
|
||
|
||
.sidebar-flyout-list--level-1,
|
||
.sidebar-flyout-list--level-2,
|
||
.sidebar-flyout-list--level-3 {
|
||
margin-left: 19px;
|
||
padding-left: 14px;
|
||
}
|
||
|
||
.sidebar-flyout-node {
|
||
position: relative;
|
||
}
|
||
|
||
.sidebar-flyout-node--has-children.sidebar-flyout-node--expanded>.sidebar-flyout-list::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 1px;
|
||
height: 100%;
|
||
background: rgba(43, 143, 254, 0.22);
|
||
}
|
||
|
||
.sidebar-flyout-item {
|
||
width: 100%;
|
||
min-height: 34px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 9px;
|
||
border: 0;
|
||
background: transparent;
|
||
padding: 3px 0;
|
||
font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
|
||
font-size: 18px;
|
||
line-height: 16px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: color 0.2s ease, text-shadow 0.2s ease;
|
||
}
|
||
|
||
.sidebar-flyout-item:hover,
|
||
.sidebar-flyout-item--active {
|
||
color: #48ddff;
|
||
text-shadow: 0 0 8px rgba(72, 221, 255, 0.25);
|
||
}
|
||
|
||
.sidebar-flyout-item--leaf {
|
||
justify-content: center;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.sidebar-flyout-list--level-1>.sidebar-flyout-node>.sidebar-flyout-item--leaf,
|
||
.sidebar-flyout-list--level-2>.sidebar-flyout-node>.sidebar-flyout-item--leaf,
|
||
.sidebar-flyout-list--level-3>.sidebar-flyout-node>.sidebar-flyout-item--leaf {
|
||
padding-left: 0;
|
||
}
|
||
|
||
.sidebar-flyout-arrow {
|
||
width: 9px;
|
||
height: 9px;
|
||
flex: 0 0 9px;
|
||
background: url('../assets/icon/down-logo.svg') center / contain no-repeat;
|
||
transform: rotate(-90deg);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.sidebar-flyout-node--expanded>.sidebar-flyout-item>.sidebar-flyout-arrow {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
.sidebar-flyout-label {
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sidebar-collapse-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sidebar-collapse-btn__icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
flex: 0 0 16px;
|
||
color: #80e9ff;
|
||
}
|
||
|
||
.sidebar-collapse-btn__label {
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sidebar-collapse-btn--inline {
|
||
width: calc(100% - 6px);
|
||
min-height: 58px;
|
||
margin-top: auto;
|
||
margin-bottom: 2px;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
border: 1px solid #55a6fe33;
|
||
background: #000c1c26;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
box-shadow: inset 0 0 16px #00b9ff1f;
|
||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
.sidebar-collapse-btn--inline .sidebar-collapse-btn__label {
|
||
font-size: 16px;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.sidebar-collapse-btn--inline:hover {
|
||
background: rgba(0, 98, 217, 0.3);
|
||
border-color: rgba(255, 255, 255, 0.25);
|
||
}
|
||
|
||
.sidebar-collapse-btn--floating {
|
||
position: fixed;
|
||
left: 10px;
|
||
bottom: 10px;
|
||
z-index: 60;
|
||
width: 36px;
|
||
height: 36px;
|
||
min-height: 36px;
|
||
padding: 0 10px;
|
||
border: 1px solid rgba(128, 233, 255, 0.35);
|
||
background: rgba(3, 38, 80, 0.82);
|
||
color: rgba(205, 245, 255, 0.95);
|
||
backdrop-filter: blur(2px);
|
||
transition: width 0.22s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar-collapse-btn--floating:hover {
|
||
width: 104px;
|
||
background: rgba(7, 52, 110, 0.9);
|
||
border-color: rgba(128, 233, 255, 0.65);
|
||
}
|
||
|
||
.sidebar-collapse-btn--floating .sidebar-collapse-btn__label {
|
||
max-width: 0;
|
||
opacity: 0;
|
||
transform: translateX(-4px);
|
||
transition: max-width 0.22s ease, opacity 0.16s ease, transform 0.22s ease;
|
||
}
|
||
|
||
.sidebar-collapse-btn--floating:hover .sidebar-collapse-btn__label {
|
||
max-width: 64px;
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.sidebar-contnet--top-submenu .item-nav:hover::before,
|
||
.sidebar-contnet--top-submenu .item-nav-active::before,
|
||
.sidebar-contnet--top-submenu .item-nav-hovered::before {
|
||
display: none;
|
||
}
|
||
|
||
.top-submenu-bar {
|
||
position: relative;
|
||
z-index: 35;
|
||
height: 64px;
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
align-self: stretch;
|
||
margin-left: 34px;
|
||
background: transparent;
|
||
border: 0;
|
||
box-shadow: none;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
}
|
||
|
||
/* 左右分组：不撑满、不裁切选中高光 */
|
||
.top-submenu-bar--group {
|
||
flex: 0 0 auto;
|
||
margin-left: 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
.top-submenu-list {
|
||
min-width: max-content;
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.top-submenu-item {
|
||
position: relative;
|
||
min-width: 122px;
|
||
height: 64px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 0;
|
||
padding: 0 18px;
|
||
background: transparent;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
overflow: visible;
|
||
transition: color 0.18s ease, text-shadow 0.18s ease;
|
||
}
|
||
|
||
.top-submenu-item:hover {
|
||
color: #9fe3ff;
|
||
text-shadow: 0 0 10px rgba(91, 210, 255, 0.4);
|
||
}
|
||
|
||
/* 选中态：设计稿提供的 nav-active.svg 发光高光 + 青色文字 */
|
||
.top-submenu-item--active {
|
||
color: #64cdf5;
|
||
text-shadow: 0 0 12px rgba(100, 205, 245, 0.5);
|
||
background-image: url("../assets/img/nav-active.svg");
|
||
background-repeat: no-repeat;
|
||
background-position: center calc(50% + 7px);
|
||
background-size: 152px 42px;
|
||
}
|
||
|
||
.third-submenu-bar {
|
||
position: relative;
|
||
z-index: 34;
|
||
height: 42px;
|
||
margin-left: 118px;
|
||
flex-shrink: 0;
|
||
background:
|
||
linear-gradient(180deg, rgba(4, 34, 78, 0.96) 0%, rgba(2, 24, 58, 0.96) 100%),
|
||
radial-gradient(ellipse at top left, rgba(45, 149, 255, 0.18) 0%, rgba(45, 149, 255, 0) 42%);
|
||
border-top: 1px solid rgba(79, 154, 255, 0.18);
|
||
border-bottom: 1px solid rgba(43, 143, 254, 0.26);
|
||
box-shadow: inset 0 1px 0 rgba(115, 194, 255, 0.08), inset 0 -10px 18px rgba(0, 26, 70, 0.22);
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
}
|
||
|
||
.third-submenu-list {
|
||
min-width: max-content;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.third-submenu-item {
|
||
position: relative;
|
||
height: 28px;
|
||
min-width: 86px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid rgba(90, 169, 255, 0.2);
|
||
border-radius: 2px;
|
||
padding: 0 16px;
|
||
background: rgba(2, 28, 65, 0.36);
|
||
color: rgba(221, 242, 255, 0.78);
|
||
font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
|
||
}
|
||
|
||
.third-submenu-item:hover,
|
||
.third-submenu-item--active {
|
||
color: #ffffff;
|
||
border-color: rgba(82, 205, 255, 0.55);
|
||
background: linear-gradient(180deg, rgba(14, 84, 165, 0.54) 0%, rgba(4, 45, 104, 0.58) 100%);
|
||
box-shadow: inset 0 0 12px rgba(0, 185, 255, 0.14), 0 0 10px rgba(35, 167, 255, 0.14);
|
||
text-shadow: 0 0 8px rgba(87, 215, 255, 0.34);
|
||
}
|
||
|
||
.third-submenu-item--active::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 12px;
|
||
right: 12px;
|
||
bottom: -1px;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, rgba(62, 178, 255, 0) 0%, #4ee6ff 50%, rgba(62, 178, 255, 0) 100%);
|
||
box-shadow: 0 0 10px rgba(78, 230, 255, 0.72);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════
|
||
浅色主题导航（红/蓝两套，颜色经 --brand-* 变量自动切换）
|
||
逻辑同深色：一级导航在顶栏、二级导航在侧边栏、三级导航在顶栏下方横条。
|
||
但一级导航不做深色那种围绕基座的特殊处理，正常横排即可。
|
||
══════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* ── 顶栏一级导航（白字落在 red/blue-header banner 上）──────────────────── */
|
||
.light-topnav {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 64px;
|
||
min-width: 0;
|
||
gap: 6px;
|
||
/* 整体往右移（用百分比，随容器宽度自适应；约等于宽屏下的 200px 量级） */
|
||
margin-left: 10%;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
}
|
||
|
||
.light-topnav-item {
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 60px;
|
||
padding: 0 18px;
|
||
border: 0;
|
||
background: transparent;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
/* 复用全局字体栈（与「多智能体会商」等页面一致）：Source Han Sans SC 在 Windows 上
|
||
常按字重分家族，放栈首会导致 font-weight 选不到粗体；用 --font-sans（Noto Sans SC
|
||
领先）才能正常加粗。 */
|
||
font-family: var(--font-sans);
|
||
font-size: 16px;
|
||
/* 普通项用 500（雅黑兜底下渲染为常规字面），选中项 700 才能看出粗体对比 */
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
transition: color 0.18s ease;
|
||
}
|
||
|
||
.light-topnav-item:hover {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* 选中态：不改背景，文字加粗变亮 + 贴近导航栏底部一条粗白线 */
|
||
.light-topnav-item--active,
|
||
.light-topnav-item--active:hover {
|
||
color: #ffffff;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.light-topnav-item--active::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 12px;
|
||
right: 12px;
|
||
bottom: 0;
|
||
height: 4px;
|
||
border-radius: 3px 3px 0 0;
|
||
background: #ffffff;
|
||
}
|
||
|
||
/* Ice blue has a deliberately light banner. Keep top-level navigation and
|
||
its active marker dark enough to remain readable against #9BCEF1. */
|
||
html.iceblue .light-topnav-item {
|
||
color: rgba(24, 50, 74, 0.78);
|
||
}
|
||
|
||
html.iceblue .light-topnav-item:hover,
|
||
html.iceblue .light-topnav-item--active,
|
||
html.iceblue .light-topnav-item--active:hover {
|
||
color: #18324a;
|
||
}
|
||
|
||
html.iceblue .light-topnav-item--active::after {
|
||
background: #3d6e96;
|
||
}
|
||
|
||
/* Pale yellow has the same light-banner contrast requirement as ice blue. */
|
||
html.lightyellow .light-topnav-item {
|
||
color: rgba(48, 61, 35, 0.78);
|
||
}
|
||
|
||
html.lightyellow .light-topnav-item:hover,
|
||
html.lightyellow .light-topnav-item--active,
|
||
html.lightyellow .light-topnav-item--active:hover {
|
||
color: #303d23;
|
||
}
|
||
|
||
html.lightyellow .light-topnav-item--active::after {
|
||
background: #4c6330;
|
||
}
|
||
|
||
/* ── 侧边栏：二级图标卡片列（96px）+ 右侧三级列（展开时整体变宽，带过渡）──────── */
|
||
/* Runtime themes use their configurable header gradient rather than the
|
||
red/blue banner artwork. Navigation copy follows an automatically chosen
|
||
contrasting foreground so both pale and deep brand colours remain legible. */
|
||
html[data-custom-theme="true"] .light-topnav-item,
|
||
html[data-custom-theme="true"] .top-submenu-item {
|
||
color: var(--navigation-foreground);
|
||
}
|
||
|
||
html[data-custom-theme="true"] .light-topnav-item:hover,
|
||
html[data-custom-theme="true"] .light-topnav-item--active,
|
||
html[data-custom-theme="true"] .light-topnav-item--active:hover,
|
||
html[data-custom-theme="true"] .top-submenu-item:hover,
|
||
html[data-custom-theme="true"] .top-submenu-item--active {
|
||
color: var(--navigation-foreground);
|
||
text-shadow: none;
|
||
}
|
||
|
||
html[data-custom-theme="true"] .light-topnav-item--active::after {
|
||
background: var(--navigation-foreground);
|
||
}
|
||
|
||
.light-sidebar {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 4rem;
|
||
z-index: 40;
|
||
width: 96px;
|
||
height: calc(100vh - 4rem);
|
||
display: flex;
|
||
flex-direction: row;
|
||
background: #ffffff;
|
||
border-right: 1px solid var(--border);
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
/* 展开三级列时整体变宽的过渡动画 */
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
/* 展开三级列：96(二级) + 140(三级) = 236px */
|
||
.light-sidebar--expanded {
|
||
width: 236px;
|
||
}
|
||
|
||
/* `?hideHeader=1`: preserve the light sidebar while removing only Header. */
|
||
.light-sidebar--header-hidden {
|
||
top: 0;
|
||
height: 100vh;
|
||
}
|
||
|
||
/* 二级列：固定 96px，竖排图标卡片 + 底部设置 */
|
||
.light-sidebar__primary {
|
||
flex: 0 0 96px;
|
||
width: 96px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* 横向 padding 置 0：让选中态浅红背景能铺满与列宽一致 */
|
||
padding: 10px 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 三级列：固定 140px，随侧边栏展开淡入 */
|
||
.light-sidebar__secondary {
|
||
flex: 0 0 140px;
|
||
width: 140px;
|
||
height: 100%;
|
||
border-left: 1px solid var(--border);
|
||
/* 横向 padding 置 0：让三级选中背景能铺满与列宽一致（文字内缩由 subitem 自身 padding 保证） */
|
||
padding: 12px 0;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
background: #ffffff;
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.light-sidebar--expanded .light-sidebar__secondary {
|
||
opacity: 1;
|
||
}
|
||
|
||
.light-sidebar__list {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.light-sidebar-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
padding: 14px 4px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
color: #222222;
|
||
/* 复用全局字体栈，确保加粗生效（详见 .light-topnav-item 注释） */
|
||
font-family: var(--font-sans);
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
line-height: 1.3;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
|
||
}
|
||
|
||
.light-sidebar-item__icon {
|
||
flex-shrink: 0;
|
||
/* 图标统一用主题色（红主题红、蓝主题蓝） */
|
||
color: var(--brand-900);
|
||
transition: color 0.18s ease, transform 0.18s ease;
|
||
}
|
||
|
||
.light-sidebar-item__label {
|
||
display: block;
|
||
width: 100%;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.light-sidebar-item:hover {
|
||
background: var(--brand-200);
|
||
}
|
||
|
||
.light-sidebar-item:hover .light-sidebar-item__icon {
|
||
color: var(--brand-900);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.light-sidebar-item--active {
|
||
background: var(--brand-200);
|
||
color: var(--brand-900);
|
||
font-weight: 600;
|
||
/* 选中态：去圆角去边框，浅红底铺满父元素宽度，右侧一条粗主题色边（用 inset 阴影避免挤压内容） */
|
||
box-shadow: inset -4px 0 0 0 var(--brand-900);
|
||
}
|
||
|
||
.light-sidebar-item--active .light-sidebar-item__icon {
|
||
color: var(--brand-900);
|
||
}
|
||
|
||
/* 侧边栏底部：设置入口（浅色模式不支持收起，故无收起按钮） */
|
||
.light-sidebar__footer {
|
||
margin-top: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding-top: 8px;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
/* ── 三级列条目（左对齐图标 + 文字，参考 xiugai-1.png）─────────────────────── */
|
||
.light-sidebar-subnav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.light-sidebar-subitem {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #222222;
|
||
font-family: var(--font-sans);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 1.3;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
|
||
}
|
||
|
||
.light-sidebar-subitem__icon {
|
||
flex-shrink: 0;
|
||
/* 图标用主题色（红主题红、蓝主题蓝） */
|
||
color: var(--brand-900);
|
||
}
|
||
|
||
.light-sidebar-subitem__label {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.light-sidebar-subitem:hover {
|
||
background: var(--brand-200);
|
||
}
|
||
|
||
.light-sidebar-subitem--active {
|
||
background: var(--brand-200);
|
||
color: var(--brand-900);
|
||
font-weight: 700;
|
||
box-shadow: inset -4px 0 0 0 var(--brand-900);
|
||
}
|