修改样式
This commit is contained in:
+102
-34
@@ -24,49 +24,112 @@ button, input, textarea, select { font: inherit; }
|
||||
button { cursor: pointer; }
|
||||
#app { min-height: 100vh; }
|
||||
|
||||
.shell { min-height: 100vh; display: grid; grid-template-columns: 256px 1fr; transition: grid-template-columns .2s ease; }
|
||||
.shell.is-collapsed { grid-template-columns: 72px 1fr; }
|
||||
.sidebar {
|
||||
position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 20; overflow: hidden;
|
||||
display: flex; flex-direction: column; color: #eef2ff;
|
||||
background:
|
||||
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
|
||||
var(--indigo-deep);
|
||||
background-size: 26px 26px;
|
||||
transition: width .2s ease, transform .25s ease;
|
||||
.shell { min-height: 100vh; }
|
||||
.app-header {
|
||||
position: sticky; top: 0; z-index: 20;
|
||||
box-shadow: 0 5px 18px rgba(19,34,73,.08);
|
||||
}
|
||||
.is-collapsed .sidebar { width: 72px; }
|
||||
.brand { height: 86px; padding: 0 24px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
|
||||
.is-collapsed .brand { padding: 0 17px; }
|
||||
.topbar {
|
||||
height: 70px; padding: 0 32px; display: flex; align-items: center; gap: 24px;
|
||||
color: white; background:
|
||||
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
|
||||
linear-gradient(112deg, #152550 0%, #1d326c 72%, #176a70 130%);
|
||||
background-size: 28px 28px, auto;
|
||||
}
|
||||
.brand {
|
||||
height: 70px; display: flex; align-items: center; gap: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.top-brand { min-width: 224px; padding-right: 28px; border-right: 1px solid rgba(255,255,255,.14); }
|
||||
.brand strong { display: block; font-family: "STZhongsong", "Songti SC", serif; font-size: 21px; letter-spacing: .12em; color: white; }
|
||||
.brand small { display: block; margin-top: 3px; font: 9px/1.2 Consolas, monospace; letter-spacing: .16em; color: #9faad1; }
|
||||
.brand-mark { flex: 0 0 auto; width: 31px; height: 31px; display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
|
||||
.brand-mark span { border: 1px solid #9eabd8; }
|
||||
.brand-mark span:nth-child(2), .brand-mark span:nth-child(5), .brand-mark span:nth-child(8) { background: #3ec1ae; border-color: #3ec1ae; }
|
||||
.brand-mark.large { width: 42px; height: 42px; gap: 4px; }
|
||||
.workspace-context { min-width: 180px; display: grid; gap: 4px; }
|
||||
.workspace-context span { color: #aeb9d8; font-size: 10px; letter-spacing: .08em; }
|
||||
.workspace-context b { font-size: 14px; font-weight: 550; letter-spacing: .04em; }
|
||||
.user-block { margin-left: auto; display: flex; align-items: center; gap: 11px; }
|
||||
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #123b3e; background: #59d3c1; font-weight: 750; }
|
||||
.user-copy b, .user-copy span { display: block; }
|
||||
.user-copy b { color: white; font-size: 13px; }
|
||||
.user-copy span { margin-top: 3px; color: #aeb9d8; font-size: 10px; }
|
||||
.topbar .user-block .el-button { color: #d4daf0; }
|
||||
.topbar .user-block .el-button:hover { color: white; background: rgba(255,255,255,.08); }
|
||||
.desktop-navigation {
|
||||
height: 51px; padding: 0 32px; display: flex; align-items: stretch;
|
||||
border-bottom: 1px solid var(--line); background: rgba(255,255,255,.98);
|
||||
}
|
||||
.horizontal-menu.el-menu {
|
||||
flex: 1; min-width: 0; height: 50px; border-bottom: none;
|
||||
background: transparent;
|
||||
}
|
||||
.horizontal-menu.el-menu--horizontal > .el-menu-item,
|
||||
.horizontal-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
|
||||
height: 50px; padding: 0 20px; border-bottom: 3px solid transparent;
|
||||
color: #333d50; font-size: 13px;
|
||||
}
|
||||
.horizontal-menu.el-menu--horizontal > .el-menu-item:hover,
|
||||
.horizontal-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
|
||||
color: var(--indigo); background: #f6f8fb;
|
||||
}
|
||||
.horizontal-menu.el-menu--horizontal > .el-menu-item.is-active,
|
||||
.horizontal-menu.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
|
||||
color: var(--indigo); border-bottom-color: var(--teal);
|
||||
background: linear-gradient(180deg, #fff, #f5faf9);
|
||||
font-weight: 650;
|
||||
}
|
||||
.horizontal-menu .el-sub-menu__icon-arrow { margin-left: 6px; }
|
||||
.navigation-status {
|
||||
flex: 0 0 auto; min-width: 152px; padding-left: 24px;
|
||||
display: grid; align-content: center; gap: 2px;
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
.navigation-status span { color: var(--teal); font: 700 8px/1.2 Consolas, monospace; letter-spacing: .13em; }
|
||||
.navigation-status b { color: #677083; font-size: 10px; font-weight: 500; }
|
||||
.mobile-navigation {
|
||||
position: fixed; inset: 0 auto 0 0; z-index: 30; width: 286px;
|
||||
display: flex; flex-direction: column; overflow-y: auto;
|
||||
color: #eef2ff; background:
|
||||
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
|
||||
var(--indigo-deep);
|
||||
background-size: 26px 26px;
|
||||
transform: translateX(-100%); transition: transform .25s ease;
|
||||
}
|
||||
.mobile-navigation.is-mobile-open { transform: translateX(0); }
|
||||
.mobile-navigation-head {
|
||||
min-height: 70px; padding: 0 18px 0 20px; display: flex; align-items: center;
|
||||
justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
.mobile-navigation-head button {
|
||||
width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.17);
|
||||
border-radius: 6px; color: #cbd3ea; background: rgba(255,255,255,.05);
|
||||
font-size: 23px; line-height: 1;
|
||||
}
|
||||
.term-stamp { margin: 24px 20px 11px; padding: 13px 15px; border-left: 2px solid #d89b42; background: rgba(255,255,255,.06); }
|
||||
.term-stamp span { display: block; font-size: 11px; color: #aab3d4; }
|
||||
.term-stamp b { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; color: white; }
|
||||
.nav-menu.el-menu { border: none; background: transparent; padding: 8px 10px; }
|
||||
.nav-menu .el-menu-item { height: 48px; margin: 4px 0; border-radius: 7px; color: #bbc4e2; }
|
||||
.nav-menu .el-menu-item:hover { color: white; background: rgba(255,255,255,.07); }
|
||||
.nav-menu .el-menu-item.is-active { color: white; background: #2d478d; box-shadow: inset 3px 0 #46c6b5; }
|
||||
.nav-menu .el-icon { font-size: 18px; }
|
||||
.mobile-nav-menu.el-menu { border: none; background: transparent; padding: 8px 10px; }
|
||||
.mobile-nav-menu .el-menu-item,
|
||||
.mobile-nav-menu .el-sub-menu__title {
|
||||
height: 45px; margin: 2px 0; border-radius: 6px; color: #bbc4e2; background: transparent;
|
||||
}
|
||||
.mobile-nav-menu .el-menu-item:hover,
|
||||
.mobile-nav-menu .el-sub-menu__title:hover { color: white; background: rgba(255,255,255,.07); }
|
||||
.mobile-nav-menu .el-menu-item.is-active { color: white; background: #2d478d; box-shadow: inset 3px 0 #46c6b5; }
|
||||
.mobile-nav-menu .el-sub-menu .el-menu { background: rgba(0,0,0,.1); }
|
||||
.mobile-nav-menu .el-sub-menu .el-menu-item { min-width: 0; padding-left: 40px !important; font-size: 12px; }
|
||||
.phase-note { margin: auto 20px 24px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.12); }
|
||||
.phase-note span { color: #45c6b5; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
|
||||
.phase-note p { margin: 7px 0 0; color: #9faad0; font-size: 12px; line-height: 1.6; }
|
||||
|
||||
.main-area { grid-column: 2; min-width: 0; }
|
||||
.topbar { height: 86px; padding: 0 32px; display: flex; align-items: center; gap: 20px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); }
|
||||
.menu-toggle { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 7px; color: var(--indigo); background: white; }
|
||||
.page-heading span { display: block; color: #9aa1af; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
|
||||
.page-heading h1 { margin: 3px 0 0; font-size: 20px; font-weight: 650; letter-spacing: .04em; }
|
||||
.user-block { margin-left: auto; display: flex; align-items: center; gap: 11px; }
|
||||
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-weight: 700; }
|
||||
.user-copy b, .user-copy span { display: block; }
|
||||
.user-copy b { font-size: 13px; }
|
||||
.user-copy span { margin-top: 3px; color: var(--muted); font-size: 11px; }
|
||||
.main-area { min-width: 0; }
|
||||
.menu-toggle {
|
||||
width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18);
|
||||
border-radius: 7px; color: white; background: rgba(255,255,255,.07);
|
||||
}
|
||||
.content { padding: 28px 32px 48px; max-width: 1540px; margin: 0 auto; }
|
||||
.mobile-only { display: none; }
|
||||
|
||||
@@ -795,15 +858,20 @@ button { cursor: pointer; }
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.shell, .shell.is-collapsed { display: block; }
|
||||
.sidebar, .is-collapsed .sidebar { width: 256px; transform: translateX(-100%); }
|
||||
.sidebar.is-mobile-open { transform: translateX(0); }
|
||||
.app-header { box-shadow: 0 3px 14px rgba(19,34,73,.1); }
|
||||
.main-area { width: 100%; }
|
||||
.mobile-mask { position: fixed; inset: 0; z-index: 15; background: rgba(13,24,48,.45); }
|
||||
.mobile-mask { position: fixed; inset: 0; z-index: 25; background: rgba(13,24,48,.52); }
|
||||
.desktop-only { display: none; }
|
||||
.mobile-only { display: inline-grid; place-items: center; }
|
||||
.topbar { height: 72px; padding: 0 16px; }
|
||||
.topbar { height: 66px; padding: 0 16px; gap: 13px; }
|
||||
.top-brand { min-width: 0; padding-right: 0; border-right: none; }
|
||||
.top-brand .brand-mark { width: 27px; height: 27px; }
|
||||
.top-brand strong { font-size: 17px; }
|
||||
.top-brand small { display: none; }
|
||||
.workspace-context { display: none; }
|
||||
.user-copy { display: none; }
|
||||
.avatar { width: 32px; height: 32px; font-size: 12px; }
|
||||
.topbar .user-block { gap: 4px; }
|
||||
.content { padding: 18px 14px 35px; }
|
||||
.term-hero { min-height: 220px; padding: 25px; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
|
||||
.term-hero button { margin: 22px 0 0; width: 100%; }
|
||||
|
||||
Reference in New Issue
Block a user