|
@@ -1,62 +1,113 @@
|
|
|
//通用样式
|
|
|
html {
|
|
|
- color: #333333;
|
|
|
- background-color: #F5F5F5;
|
|
|
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
|
|
|
--hc-body-bg-color: #F5F5F5;
|
|
|
--hc-bg-color: #ffffff;
|
|
|
--hc-text-color: #333333;
|
|
|
--hc-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
|
|
|
+ //左侧菜单
|
|
|
+ .hc-layout-box .hc-aside-box .hc-aside-logo-box .logo-img-1 {
|
|
|
+ &.white {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ &.dark {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//深色主题设置
|
|
|
html.dark {
|
|
|
- background-color: #101014;
|
|
|
- color: rgba(255, 255, 255, 0.82);
|
|
|
--hc-body-bg-color: #101014;
|
|
|
- --hc-bg-color: #18181c;
|
|
|
+ --hc-bg-color: #292929;
|
|
|
--hc-text-color: rgba(255, 255, 255, 0.82);
|
|
|
- --hc-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
|
|
|
- .n-layout .n-layout-scroll-container {
|
|
|
- background-color: inherit;
|
|
|
+ --hc-shadow: 4px 4px 8px 0 rgba(0,0,0,0.15), -4px -4px 8px 0 #3d3d3d;
|
|
|
+ --el-bg-color-overlay: #393939;
|
|
|
+ --hc-border-color: #474646;
|
|
|
+ --hc-label-color: #8f9eb2;
|
|
|
+ html, body, #app {
|
|
|
+ background: var(--el-bg-color-overlay);
|
|
|
}
|
|
|
- .n-card.hc-card-overflow-p-box .n-card__action,
|
|
|
- .n-card.hc-card-overflow-box .n-card__action {
|
|
|
- background-color: inherit;
|
|
|
+ //左侧菜单
|
|
|
+ .hc-layout-box .hc-aside-box {
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+ background: var(--el-bg-color-overlay);
|
|
|
+ box-shadow: initial;
|
|
|
+ border: 1px solid var(--hc-border-color);
|
|
|
+ border-left: 0;
|
|
|
+ border-bottom: 0;
|
|
|
+ .hc-aside-logo-box .logo-img-1 {
|
|
|
+ &.white {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &.dark {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //菜单
|
|
|
+ .el-menu-item, .el-sub-menu__title {
|
|
|
+ color: var(--hc-label-color);
|
|
|
+ }
|
|
|
+ .hc-aside-bar-box:before {
|
|
|
+ background-image: linear-gradient(90deg, rgba(102, 102, 102, 0) 11%, #474646 35%, #474646 64%, rgba(102, 102, 102, 0) 86%);
|
|
|
+ }
|
|
|
}
|
|
|
- .pover-menu-list .list-item:hover {
|
|
|
- background-color: #404041;
|
|
|
+ //卡片
|
|
|
+ .hc-card-box.el-card {
|
|
|
+ box-shadow: initial;
|
|
|
+ color: var(--hc-text-color);
|
|
|
+ border: 1px solid var(--hc-border-color);
|
|
|
+ .el-card__body .hc-card-action-box {
|
|
|
+ border-top: 1px solid var(--hc-border-color);
|
|
|
+ background-color: var(--el-bg-color-overlay);
|
|
|
+ }
|
|
|
}
|
|
|
- .data-fill-list-box .n-collapse .n-collapse-item {
|
|
|
- border: 1px solid #303030;
|
|
|
- background-color: #212121;
|
|
|
+ //设置里的副标题
|
|
|
+ .hc-screenshot-box .item .label {
|
|
|
+ color: var(--hc-label-color);
|
|
|
}
|
|
|
- .data-fill-list-box .n-collapse .n-collapse-item .n-collapse-item__header.n-collapse-item__header--active {
|
|
|
- background-color: #404041;
|
|
|
- border-bottom: 1px solid #303030;
|
|
|
+ //设置里的选择卡片
|
|
|
+ .hc-theme-box .item {
|
|
|
+ border: 1px solid var(--hc-border-color);
|
|
|
+ background-color: var(--el-bg-color-overlay);
|
|
|
+ &.active {
|
|
|
+ box-shadow: 4px 4px 8px 0 rgba(61,60,60,0.15), 0 0 8px 0 #1d1d1d;
|
|
|
+ }
|
|
|
+ .action {
|
|
|
+ background-color: var(--hc-bg-color);
|
|
|
+ border-top: 1px solid var(--hc-border-color);
|
|
|
+ }
|
|
|
}
|
|
|
- .data-fill-list-box .data-fill-list-item-content .data-fill-table-tip-box {
|
|
|
- border-left: 1px solid #303030;
|
|
|
+
|
|
|
+ //顶部项目合同下拉框
|
|
|
+ .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper {
|
|
|
+ background: #696969;
|
|
|
}
|
|
|
- .hc-layout-box .hc-layout-content-box .data-fill-foot-box {
|
|
|
- background-color: var(--hc-bg-color) !important;
|
|
|
- color: var(--hc-text-color) !important;
|
|
|
- border: 1px solid #303030;
|
|
|
+ .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input.is-focus .el-input__wrapper {
|
|
|
+ box-shadow: var(--hc-shadow);
|
|
|
}
|
|
|
- .hc-image-data-content-box .n-collapse .n-collapse-item {
|
|
|
- border: 1px solid #303030;
|
|
|
- background-color: #212121;
|
|
|
+ .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper .el-input__inner,
|
|
|
+ .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper .el-input__suffix {
|
|
|
+ color: var(--hc-text-color);
|
|
|
}
|
|
|
- .hc-image-data-content-box .n-collapse .n-collapse-item .n-collapse-item__header.n-collapse-item__header--active {
|
|
|
- color: var(--hc-primary);
|
|
|
- background-color: #404041;
|
|
|
+ //顶部图标按钮
|
|
|
+ .header-icon-bar {
|
|
|
+ background: #696969;
|
|
|
+ color: var(--hc-text-color);
|
|
|
}
|
|
|
- .hc-image-data-content-box .hc-collapse-list-box .item-box:hover {
|
|
|
- color: var(--hc-primary);
|
|
|
- background-color: #303030;
|
|
|
+ //顶部用户信息
|
|
|
+ .user-info-bar {
|
|
|
+ .user-name, .arrow-icon {
|
|
|
+ color: var(--hc-text-color);
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ border-left: 1px solid var(--hc-border-color);
|
|
|
+ }
|
|
|
}
|
|
|
- .hc-line-menu {
|
|
|
- background: var(--hc-bg-color);
|
|
|
- border-top: 1px solid #303030;
|
|
|
+
|
|
|
+ //按钮
|
|
|
+ .el-button[hc-btn] {
|
|
|
+ border: 1px solid var(--hc-border-color);
|
|
|
}
|
|
|
+
|
|
|
}
|