init: package name refactor
This commit is contained in:
399
nl-vue/src/style/default.less
Normal file
399
nl-vue/src/style/default.less
Normal file
@@ -0,0 +1,399 @@
|
||||
:root {
|
||||
--blue-1: #e6f7ff;
|
||||
--blue-2: #bae7ff;
|
||||
--blue-3: #91d5ff;
|
||||
--blue-4: #69c0ff;
|
||||
--blue-5: #40a9ff;
|
||||
--blue-6: #1677FF;
|
||||
--blue-7: #096dd9;
|
||||
--blue-8: #0050b3;
|
||||
--blue-9: #003a8c;
|
||||
--blue-10: #002766;
|
||||
|
||||
--green-1: #f6ffed;
|
||||
--green-2: #d9f7be;
|
||||
--green-3: #b7eb8f;
|
||||
--green-4: #95de64;
|
||||
--green-5: #73d13d;
|
||||
--green-6: #52c41a;
|
||||
--green-7: #389e0d;
|
||||
--green-8: #237804;
|
||||
--green-9: #135200;
|
||||
--green-10: #092b00;
|
||||
|
||||
--red-1: #fff1f0;
|
||||
--red-2: #ffccc7;
|
||||
--red-3: #ffa39e;
|
||||
--red-4: #ff7875;
|
||||
--red-5: #ff4d4f;
|
||||
--red-6: #f5222d;
|
||||
--red-7: #cf1322;
|
||||
--red-8: #a8071a;
|
||||
--red-9: #820014;
|
||||
--red-10: #5c0011;
|
||||
|
||||
--gold-1: #fffbe6;
|
||||
--gold-2: #fff1b8;
|
||||
--gold-3: #ffe58f;
|
||||
--gold-4: #ffd666;
|
||||
--gold-5: #ffc53d;
|
||||
--gold-6: #faad14;
|
||||
--gold-7: #d48806;
|
||||
--gold-8: #ad6800;
|
||||
--gold-9: #874d00;
|
||||
--gold-10: #613400;
|
||||
|
||||
--purple-1: #f9f0ff;
|
||||
--purple-2: #efdbff;
|
||||
--purple-3: #d3adf7;
|
||||
--purple-4: #b37feb;
|
||||
--purple-5: #9254de;
|
||||
--purple-6: #722ed1;
|
||||
--purple-7: #531dab;
|
||||
--purple-8: #391085;
|
||||
--purple-9: #22075e;
|
||||
--purple-10: #120338;
|
||||
|
||||
--cyan-1: #e6fffb;
|
||||
--cyan-2: #b5f5ec;
|
||||
--cyan-3: #87e8de;
|
||||
--cyan-4: #5cdbd3;
|
||||
--cyan-5: #36cfc9;
|
||||
--cyan-6: #13c2c2;
|
||||
--cyan-7: #08979c;
|
||||
--cyan-8: #006d75;
|
||||
--cyan-9: #00474f;
|
||||
--cyan-10: #002329;
|
||||
|
||||
--pink-1: #fff0f6;
|
||||
--pink-2: #ffd6e7;
|
||||
--pink-3: #ffadd2;
|
||||
--pink-4: #ff85c0;
|
||||
--pink-5: #f759ab;
|
||||
--pink-6: #eb2f96;
|
||||
--pink-7: #c41d7f;
|
||||
--pink-8: #9e1068;
|
||||
--pink-9: #780650;
|
||||
--pink-10: #520339;
|
||||
|
||||
--orange-1: #fff7e6;
|
||||
--orange-2: #ffe7ba;
|
||||
--orange-3: #ffd591;
|
||||
--orange-4: #ffc069;
|
||||
--orange-5: #ffa940;
|
||||
--orange-6: #fa8c16;
|
||||
--orange-7: #d46b08;
|
||||
--orange-8: #ad4e00;
|
||||
--orange-9: #873800;
|
||||
--orange-10: #612500;
|
||||
|
||||
--primary-radius: #fff;
|
||||
--primary-1: var(--blue-1);
|
||||
--primary-2: var(--blue-2);
|
||||
--primary-3: var(--blue-3);
|
||||
--primary-4: var(--blue-4);
|
||||
--primary-5: var(--blue-5);
|
||||
--primary-6: var(--blue-6);
|
||||
--primary-7: var(--blue-7);
|
||||
--primary-8: var(--blue-8);
|
||||
--primary-9: var(--blue-9);
|
||||
--primary-10: var(--blue-10);
|
||||
|
||||
--primary-color: var(--primary-6);
|
||||
--primary-color-hover: var(--primary-5);
|
||||
--primary-color-active: var(--primary-7);
|
||||
--primary-color-outline: var(--primary-2);
|
||||
|
||||
--info-color: var(--primary-color);
|
||||
--success-color: var(--green-6);
|
||||
--processing-color: var(--blue-6);
|
||||
--highlight-color: var(--red-5);
|
||||
|
||||
--warning-color: var(--gold-6);
|
||||
--warning-color-hover: var(--gold-5);
|
||||
--warning-color-active: var(--gold-7);
|
||||
--warning-color-outline: var(--gold-2);
|
||||
|
||||
--error-color: var(--red-5);
|
||||
--error-color-hover: var(--red-4);
|
||||
--error-color-active: var(--red-7);
|
||||
--error-color-outline: var(--red-2);
|
||||
|
||||
--body-background: #fff;
|
||||
--component-background: #fff;
|
||||
|
||||
--popover-background: @component-background;
|
||||
--popover-customize-border-color: @border-color-split;
|
||||
|
||||
--text-color: fade(@black, 85%);
|
||||
--text-color-secondary: fade(@black, 45%);
|
||||
--text-color-inverse: @white;
|
||||
--icon-color-hover: fade(@black, 75%);
|
||||
--heading-color: fade(@black, 85%);
|
||||
|
||||
--item-hover-bg: #f5f5f5;
|
||||
|
||||
// Border color
|
||||
--border-color-base: hsv(0, 0, 85%);
|
||||
--border-color-split: hsv(0, 0, 94%);
|
||||
//--border-color-inverse: @white;
|
||||
|
||||
//
|
||||
--background-color-light: hsv(0, 0, 98%);
|
||||
--background-color-base: hsv(0, 0, 96%);
|
||||
|
||||
// Disabled states
|
||||
--disabled-color: fade(#000, 25%);
|
||||
--disabled-bg: @background-color-base;
|
||||
--disabled-color-dark: fade(#fff, 35%);
|
||||
|
||||
// Shadow
|
||||
--shadow-color: rgba(195, 62, 62, 0.15);
|
||||
--shadow-color-inverse: @component-background;
|
||||
--box-shadow-base: @shadow-1-down;
|
||||
--shadow-1-up: 0 -2px 8px @shadow-color;
|
||||
--shadow-1-down: 0 2px 8px @shadow-color;
|
||||
--shadow-1-left: -2px 0 8px @shadow-color;
|
||||
--shadow-1-right: 2px 0 8px @shadow-color;
|
||||
--shadow-2: 0 4px 12px @shadow-color;
|
||||
|
||||
// Buttons
|
||||
--btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
|
||||
--btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
||||
--btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
--btn-default-bg: @component-background;
|
||||
|
||||
--btn-default-ghost-color: @component-background;
|
||||
--btn-default-ghost-border: @component-background;
|
||||
|
||||
--btn-text-hover-bg: rgba(0, 0, 0, 0.018);
|
||||
--btn-text-active-bg: rgba(0, 0, 0, 0.028);
|
||||
|
||||
// Checkbox
|
||||
--checkbox-check-bg: @checkbox-check-color;
|
||||
|
||||
// Descriptions
|
||||
--descriptions-bg: #fafafa;
|
||||
|
||||
// Divider
|
||||
--divider-color: rgba(0, 0, 0, 6%);
|
||||
|
||||
// Dropdown 有两个
|
||||
--dropdown-menu-submenu-disabled-bg: @component-background;
|
||||
|
||||
// Radio
|
||||
--radio-dot-disabled-color: fade(@black, 20%);
|
||||
--radio-solid-checked-color: @component-background;
|
||||
|
||||
// Radio buttons
|
||||
--radio-disabled-button-checked-bg: coverTintMixin(@black, 90%);
|
||||
--radio-disabled-button-checked-color: @disabled-color;
|
||||
|
||||
// Layout
|
||||
--layout-body-background: #f0f2f5;
|
||||
--layout-header-background: #001529;
|
||||
--layout-trigger-background: #002140;
|
||||
//--layout-sider-background-1: coverTintMixin(#001529, 10%);
|
||||
|
||||
// Dropdown 有两个
|
||||
--dropdown-menu-bg: @component-background;
|
||||
|
||||
// Input
|
||||
--input-placeholder-color: hsv(0, 0, 75%);
|
||||
--input-icon-color: @input-color;
|
||||
--input-bg: @component-background;
|
||||
--input-number-handler-active-bg: #f4f4f4;
|
||||
--input-icon-hover-color: fade(@black, 85%);
|
||||
|
||||
// Mentions
|
||||
--mentions-dropdown-bg: @component-background;
|
||||
|
||||
// Select
|
||||
--select-dropdown-bg: @component-background;
|
||||
--select-background: @component-background;
|
||||
--select-clear-background: @select-background;
|
||||
--select-selection-item-bg: @background-color-base;
|
||||
--select-selection-item-border-color: @border-color-split;
|
||||
--select-multiple-disabled-background: @input-disabled-bg;
|
||||
--select-multiple-item-disabled-color: #bfbfbf;
|
||||
--select-multiple-item-disabled-border-color: @select-border-color;
|
||||
|
||||
// Cascader
|
||||
--cascader-bg: @component-background;
|
||||
--cascader-menu-bg: @component-background;
|
||||
--cascader-menu-border-color-split: @border-color-split;
|
||||
|
||||
// Tooltip
|
||||
--tooltip-bg: rgba(0, 0, 0, 0.75);
|
||||
|
||||
// Popover
|
||||
--popover-bg: @component-background;
|
||||
|
||||
// Modal
|
||||
--modal-header-bg: @component-background;
|
||||
--modal-header-border-color-split: @border-color-split;
|
||||
--modal-content-bg: @component-background;
|
||||
--modal-footer-border-color-split: @border-color-split;
|
||||
|
||||
// Progress
|
||||
--progress-steps-item-bg: #f3f3f3;
|
||||
|
||||
// Menu
|
||||
--menu-popup-bg: @component-background;
|
||||
--menu-dark-bg: @layout-header-background;
|
||||
--menu-dark-inline-submenu-bg: #000c17;
|
||||
|
||||
// Table
|
||||
--table-header-bg: @background-color-light;
|
||||
--table-header-sort-bg: @background-color-base;
|
||||
--table-body-sort-bg: #fafafa;
|
||||
--table-row-hover-bg: @background-color-light;
|
||||
--table-expanded-row-bg: #fbfbfb;
|
||||
--table-header-cell-split-color: rgba(0, 0, 0, 0.06);
|
||||
--table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
|
||||
--table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
|
||||
--table-filter-btns-bg: inherit;
|
||||
--table-filter-dropdown-bg: @component-background;
|
||||
--table-expand-icon-bg: @component-background;
|
||||
|
||||
// TimePicker
|
||||
--picker-bg: @component-background;
|
||||
--picker-basic-cell-disabled-bg: @disabled-bg;
|
||||
--picker-border-color: @border-color-split;
|
||||
|
||||
// Calendar
|
||||
--calendar-bg: @component-background;
|
||||
--calendar-input-bg: @input-bg;
|
||||
--calendar-border-color: @border-color-inverse;
|
||||
--calendar-full-bg: @calendar-bg;
|
||||
|
||||
// Badge
|
||||
--badge-text-color: @component-background;
|
||||
|
||||
// Rate
|
||||
--rate-star-bg: @border-color-split;
|
||||
|
||||
// Card
|
||||
--card-actions-background: @component-background;
|
||||
--card-skeleton-bg: #cfd8dc;
|
||||
--card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
|
||||
0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
|
||||
|
||||
// Comment
|
||||
--comment-bg: inherit;
|
||||
--comment-author-time-color: #ccc;
|
||||
--comment-action-hover-color: #595959;
|
||||
|
||||
// BackTop
|
||||
--back-top-bg: @text-color-secondary;
|
||||
--back-top-hover-bg: @text-color;
|
||||
|
||||
// Avatar
|
||||
--avatar-bg: #ccc;
|
||||
|
||||
// Switch
|
||||
--switch-bg: @component-background;
|
||||
|
||||
// Pagination
|
||||
--pagination-item-bg: @component-background;
|
||||
--pagination-item-bg-active: @component-background;
|
||||
--pagination-item-link-bg: @component-background;
|
||||
--pagination-item-disabled-color-active: @white;
|
||||
--pagination-item-disabled-bg-active: darken(hsv(0, 0, 96%), 10%);
|
||||
--pagination-item-input-bg: @component-background;
|
||||
|
||||
// PageHeader
|
||||
--page-header-back-color: #000;
|
||||
--page-header-ghost-bg: inherit;
|
||||
|
||||
// Slider
|
||||
--slider-rail-background-color: @background-color-base;
|
||||
--slider-rail-background-color-hover: #e1e1e1;
|
||||
--slider-dot-border-color: @border-color-split;
|
||||
--slider-dot-border-color-active: @primary-4;
|
||||
|
||||
// Tree
|
||||
--tree-bg: @component-background;
|
||||
|
||||
// Skeleton
|
||||
--skeleton-to-color: coverShadeMixin(@skeleton-color, 5%);
|
||||
|
||||
// Transfer
|
||||
--transfer-item-hover-bg: @item-hover-bg;
|
||||
|
||||
// Message
|
||||
--message-notice-content-bg: @component-background;
|
||||
|
||||
// List
|
||||
--list-customize-card-bg: @component-background;
|
||||
|
||||
// Drawer
|
||||
--drawer-bg: @component-background;
|
||||
|
||||
// Timeline
|
||||
--timeline-color: @border-color-split;
|
||||
--timeline-dot-color: @primary-color;
|
||||
|
||||
// Image
|
||||
--image-preview-operation-disabled-color: rgba(255, 255, 255, 0.45);
|
||||
|
||||
// Steps
|
||||
--steps-nav-arrow-color: fade(@black, 25%);
|
||||
--steps-background: @component-background;
|
||||
|
||||
// Notification
|
||||
--notification-bg: @component-background;
|
||||
|
||||
// 侧边栏
|
||||
--sidebar-light-shadow: 1px 3px 3px rgba(0, 21, 41, 0.08);
|
||||
--sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
|
||||
|
||||
// 顶栏
|
||||
--header-light-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
--header-dark-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
--header-tool-hover-bg: rgba(0, 0, 0, 0.025);
|
||||
--header-dark-tool-hover-bg: rgba(255, 255, 255, 0.05);
|
||||
--header-color-split: rgba(0, 0, 0, 0.08);
|
||||
|
||||
// logo
|
||||
--logo-light-shadow: 1px 2px 3px rgba(0, 21, 41, 0.08);
|
||||
--logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, 0.35);
|
||||
|
||||
//
|
||||
--gradient-min: fade(#cfd8dc, 20%);
|
||||
--gradient-max: fade(#cfd8dc, 40%);
|
||||
|
||||
// font
|
||||
--font-color: rgba(0, 0, 0, 0.88);
|
||||
// header-bottom
|
||||
--header-bottom: rgba(246, 246, 246, 0.85);
|
||||
// breadcrumb-background
|
||||
--breadcrumb-background: rgba(253, 253, 253, 0.85);
|
||||
// background-color
|
||||
--snowy-background-color: #FFFFFF;
|
||||
// tag-background
|
||||
--tag-background: rgba(253, 253, 253);
|
||||
//
|
||||
--success-fade-20: fade(#52c41a, 20%);
|
||||
--error-fade-20: fade(#ff4d4f, 20%);
|
||||
--warning-fade-20: fade(#faad14, 20%);
|
||||
|
||||
//--primary-fade-20: fade(#1890ff, 20%);
|
||||
--primary-fade-20: var(--primary-2);
|
||||
//--primary-fade-8: fade(#1890ff, 8%);
|
||||
|
||||
--white--fade--65: rgba(255,255,255,.65);
|
||||
--menu-dark-highlight-color: #fff;
|
||||
--btn-primary-color: #fff;
|
||||
--tooltip-color: #fff;
|
||||
--card-above-color: #F0F0F0;
|
||||
--card-above-border-color: #CCCCCC;
|
||||
|
||||
// workfolw design
|
||||
--node-wrap-box-color: rgb(255, 255, 255);
|
||||
--node-wrap-box-before-color: #FFFFFF;
|
||||
--node-wrap-box-before-borde-color: rgb(202, 202, 202);
|
||||
--auto-judge-before-color: #FFF;
|
||||
--cover-line-before-color: #FFF;
|
||||
}
|
||||
528
nl-vue/src/style/index.less
Normal file
528
nl-vue/src/style/index.less
Normal file
@@ -0,0 +1,528 @@
|
||||
@import './realdark';
|
||||
@import './default';
|
||||
|
||||
.body, html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f6f8f9;
|
||||
}
|
||||
|
||||
a, button, input, textarea {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 大布局样式 */
|
||||
.admin-ui {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.admin-ui-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.admin-ui-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.main-content-wrapper{
|
||||
padding: 11px 11px 0px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.main-bottom-wrapper {
|
||||
height: 60px;
|
||||
margin-top: 25px;
|
||||
text-align: center;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
/* 双排菜单布局 */
|
||||
.snowy-doublerow-layout-menu {
|
||||
padding-right: 5px;
|
||||
line-height: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.snowy-doublerow-layout-menu-item-fort-div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.snowy-doublerow-layout-menu-item-fort-div-span {
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.snowy-title{
|
||||
color: var(--text-color);
|
||||
}
|
||||
.ant-layout-sider-collapsed{
|
||||
.logo-bar>span{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ant-layout-sider-dark{
|
||||
.snowy-header-logo{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 设置抽屉样式 */
|
||||
.layout-setting {
|
||||
position: fixed;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
bottom: 50%;
|
||||
right: 0px;
|
||||
z-index: 100;
|
||||
background: @primary-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layout-setting i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.snowy-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--header-bottom);
|
||||
box-shadow: 0 0.4px 0.5px rgb(0 21 41 / 12%);
|
||||
.ant-menu-item{
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
background: var(--snowy-background-color);
|
||||
}
|
||||
// 应用主题色
|
||||
.snowy-header-primary-color {
|
||||
color: white;
|
||||
background-color: var(--primary-color);
|
||||
.ant-badge{
|
||||
color: white;
|
||||
}
|
||||
.ant-breadcrumb-link {
|
||||
color: white;
|
||||
}
|
||||
.ant-breadcrumb-separator {
|
||||
color: white;
|
||||
}
|
||||
.ant-menu-light .ant-menu-item:hover{
|
||||
color: #ccc;
|
||||
background-color: var(--primary-7);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-layout-sider-dark {
|
||||
.snowy-title{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.snowy-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.snowy-header-left .menu-unfold-outlined {
|
||||
padding: 0 12px
|
||||
}
|
||||
|
||||
.snowy-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.snowy-header-logo {
|
||||
height: 49px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.snowy-header-logo-primary-color {
|
||||
color: white;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.snowy-header-logo .logo-bar {
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.snowy-header-logo .logo-bar .logo {
|
||||
margin-right: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.top-snowy-header {
|
||||
background: #001529;
|
||||
color: white;
|
||||
}
|
||||
.top-snowy-header-light {
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
.top-snowy-header-layout {
|
||||
background: var(--primary-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
.panel-item {
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/*color: var(--font-color);*/
|
||||
}
|
||||
.panel-item:hover {
|
||||
background: var(--header-color-split);
|
||||
}
|
||||
.contextmenu {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
margin:0;
|
||||
border-radius: 0px;
|
||||
background: @body-background;
|
||||
border: 1px solid var(--border-color-split);
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
z-index: 3000;
|
||||
list-style-type: none;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.contextmenu hr {
|
||||
margin:5px 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
font-size: 0px;
|
||||
background-color: var(--border-color-split)
|
||||
}
|
||||
.contextmenu li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin:0;
|
||||
cursor: pointer;
|
||||
line-height: 30px;
|
||||
padding: 0 17px;
|
||||
color: @text-color;
|
||||
}
|
||||
.contextmenu li i {
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.contextmenu li:hover {
|
||||
background-color: @component-background;
|
||||
color: #66b1ff;
|
||||
}
|
||||
.contextmenu li.disabled {
|
||||
cursor: not-allowed;
|
||||
color: #bbb;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*页面最大化*/
|
||||
.app-main.main-maximize {
|
||||
.main-maximize-exit {
|
||||
display: block;
|
||||
}
|
||||
.ant-layout-sider, .ant-layout-sider-dark, .layout-setting, .snowy-header, .admin-ui-breadcrumb, .snowy-tags {
|
||||
display: none;
|
||||
}
|
||||
.main-content-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 最大化后的退出按钮 */
|
||||
.main-maximize-exit {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
top: -20px;
|
||||
padding-top: 18px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-maximize-exit:hover {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.ant-layout-sider{
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 重写antdv的一些样式，定义到全局 */
|
||||
.ant-card-head-title {
|
||||
padding: 12px 0!important;
|
||||
}
|
||||
.ant-tabs-large > .ant-tabs-nav .ant-tabs-tab {
|
||||
padding: 12px 0!important;
|
||||
}
|
||||
.ant-card-extra {
|
||||
padding: 12px 0!important;
|
||||
}
|
||||
.ant-card-head {
|
||||
border-bottom: 0px !important;
|
||||
min-height: 50px !important;
|
||||
}
|
||||
|
||||
/* 重写antdv的表格滚动条 */
|
||||
.ant-table-body, .ant-table-content{
|
||||
&::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
|
||||
background: @border-color-split;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: 0;
|
||||
border-radius: 10px;
|
||||
background: @background-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
.left-span-label {
|
||||
border-left: 4px solid var(--primary-color);
|
||||
font-size: 15px;
|
||||
color: var(--font-color);
|
||||
font-weight: 600;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.left-tree-container {
|
||||
height: calc(100vh - 8rem);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// 滚动条，需要哪里，加哪个class
|
||||
body,
|
||||
.ant-scrolling-effect,
|
||||
.ant-drawer-wrapper-body,
|
||||
.ant-drawer-body,
|
||||
.admin-ui,
|
||||
.ant-modal-wrap,
|
||||
.ant-transfer-list-content,
|
||||
.ant-card,
|
||||
.ant-layout-sider,
|
||||
.CodeMirror-scroll,
|
||||
.main-content-wrapper,
|
||||
.xn-icon-select-list,
|
||||
.form-user-table,
|
||||
.scopeDefineOrgTreeDiv,
|
||||
.user-table,
|
||||
.role-table,
|
||||
.org-table,
|
||||
.pos-table,
|
||||
.poi-list,
|
||||
.snowy-orgpos-vis,
|
||||
.index-message-list,
|
||||
.ant-picker-time-panel-column,
|
||||
.timeline-div,
|
||||
.gen-preview-content,
|
||||
.ant-menu,
|
||||
.ant-tabs-dropdown-menu,
|
||||
.xn-table,
|
||||
.selector-table,
|
||||
.card-div,
|
||||
.ant-table-body,
|
||||
.left-tree-container,
|
||||
|
||||
.admin-ui-main{
|
||||
&::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width : 0; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 0;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius : 10px;
|
||||
background-color: @component-background; // skyblue
|
||||
background-image: -webkit-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.2) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
rgba(255, 255, 255, 0.2) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow : inset 0 0 2px rgba(0, 0, 0, 0.2);
|
||||
background : @component-background;
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.json-box-9136076486841527{
|
||||
overflow: hidden!important;;
|
||||
.CodeMirror-scrollbar-filler{
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
.ant-modal-close-x .anticon {
|
||||
padding: 2px !important;
|
||||
}
|
||||
.xn-mb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.xn-mt4 {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.xn-mg08 {
|
||||
margin: 0 8px;
|
||||
}
|
||||
.xn-fdr {
|
||||
float: right;
|
||||
}
|
||||
.xn-wd {
|
||||
width: 100%;
|
||||
}
|
||||
.xn-wd90 {
|
||||
width: 90px;
|
||||
}
|
||||
.xn-wdcalc-70 {
|
||||
width: calc(100% - 70px);
|
||||
}
|
||||
.xn-mr8 {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.xn-ht400 {
|
||||
height: 400px;
|
||||
}
|
||||
.xn-wh25 {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
.xn-ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.xn-pl0 {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.xn-pd8 {
|
||||
padding: 8px;
|
||||
}
|
||||
.xn-pb10 {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.xn-color-a0a0a0 {
|
||||
color: #a0a0a0;
|
||||
}
|
||||
.xn-color-d9d9d9 {
|
||||
color: #d9d9d9;
|
||||
}
|
||||
.xn-color-ff4d4f {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
.xn-color-00025 {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.xn-jk-line {
|
||||
width: 188px;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
.xn-findform-line {
|
||||
border: 1px solid var(--border-color-split);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.odd {
|
||||
background-color: var(--table-row-hover-bg);
|
||||
}
|
||||
.snowy-theme-dark .odd {
|
||||
background-color: #1d1d1d
|
||||
}
|
||||
// 解决浏览器F12爆红aria-hidden问题
|
||||
.ant-modal div[aria-hidden="true"] {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
// 以下是重写表单设计器的样式
|
||||
.list-main {
|
||||
background: var(--auto-judge-before-color) !important;
|
||||
}
|
||||
.drag-move-box:before {
|
||||
background: var(--primary-color) !important;
|
||||
}
|
||||
.drag-move-box>.delete {
|
||||
background: var(--primary-color) !important;
|
||||
}
|
||||
.drag-move-box>.copy {
|
||||
background: var(--primary-color) !important;
|
||||
}
|
||||
.drag-move-box .show-key-box {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
.left-ul-item:hover {
|
||||
color: var(--primary-color) !important;
|
||||
border: 1px solid var(--primary-color) !important;
|
||||
-webkit-box-shadow: 0 2px 6px var(--primary-color) !important;
|
||||
box-shadow: 0 2px 6px var(--primary-color) !important;
|
||||
}
|
||||
.list-main>.moving:before {
|
||||
background: var(--primary-color) !important;
|
||||
}
|
||||
.operating-area a:hover {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
.batch-box>.delete {
|
||||
background: var(--primary-color) !important;
|
||||
}
|
||||
.batch-box>.copy {
|
||||
background: var(--primary-color) !important;
|
||||
}
|
||||
.batch-box.active:before {
|
||||
background: var(--primary-color) !important;
|
||||
}
|
||||
7
nl-vue/src/style/readme.md
Normal file
7
nl-vue/src/style/readme.md
Normal file
@@ -0,0 +1,7 @@
|
||||
|
||||
适配暗黑模式的操作
|
||||
|
||||
直接 var(--primary-color)
|
||||
|
||||
例如：新建个变量，在default.less跟realdark.less中设定好，这个时候就会跟着颜色的主题变化
|
||||
|
||||
417
nl-vue/src/style/realdark.less
Normal file
417
nl-vue/src/style/realdark.less
Normal file
@@ -0,0 +1,417 @@
|
||||
[snowy-theme=realdark] {
|
||||
.ant-btn-primary{
|
||||
color: #fff;
|
||||
&:hover, &:focus{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.fade() {
|
||||
@functions: ~`(function() {
|
||||
this.fade = function(color, amount) {
|
||||
if (String(color).indexOf('var(') === 0) {
|
||||
if (color.indexOf('--primary-color') !== -1 ) {
|
||||
var m = amount > 10 ? amount/10 :amount
|
||||
return color.replace('-color)', '-' + m + ')')
|
||||
}
|
||||
return color.replace(')', '--fade--' + parseInt(amount) + ')')
|
||||
}
|
||||
return color
|
||||
}
|
||||
})()`;
|
||||
}
|
||||
.fade();
|
||||
|
||||
@import 'ant-design-vue/dist/reset.css';
|
||||
|
||||
.snowy-theme-dark {
|
||||
--blue-1: #111d2c;
|
||||
--blue-2: #112a45;
|
||||
--blue-3: #15395b;
|
||||
--blue-4: #164c7e;
|
||||
--blue-5: #1765ad;
|
||||
--blue-6: #177ddc;
|
||||
--blue-7: #3c9ae8;
|
||||
--blue-8: #65b7f3;
|
||||
--blue-9: #8dcff8;
|
||||
--blue-10: #b7e3fa;
|
||||
|
||||
--green-1: #162312;
|
||||
--green-2: #1d3712;
|
||||
--green-3: #274916;
|
||||
--green-4: #306317;
|
||||
--green-5: #3c8618;
|
||||
--green-6: #49aa19;
|
||||
--green-7: #6abe39;
|
||||
--green-8: #8fd460;
|
||||
--green-9: #b2e58b;
|
||||
--green-10: #d5f2bb;
|
||||
|
||||
--red-1: #2a1215;
|
||||
--red-2: #431418;
|
||||
--red-3: #58181c;
|
||||
--red-4: #791a1f;
|
||||
--red-5: #a61d24;
|
||||
--red-6: #f5222d;
|
||||
--red-7: #e84749;
|
||||
--red-8: #f37370;
|
||||
--red-9: #f89f9a;
|
||||
--red-10: #fac8c3;
|
||||
|
||||
--gold-1: #2b2111;
|
||||
--gold-2: #443111;
|
||||
--gold-3: #594214;
|
||||
--gold-4: #7c5914;
|
||||
--gold-5: #aa7714;
|
||||
--gold-6: #d89614;
|
||||
--gold-7: #e8b339;
|
||||
--gold-8: #f3cc62;
|
||||
--gold-9: #f8df8b;
|
||||
--gold-10: #faedb5;
|
||||
|
||||
--purple-1: #1a1325;
|
||||
--purple-2: #24163a;
|
||||
--purple-3: #301c4d;
|
||||
--purple-4: #3e2069;
|
||||
--purple-5: #51258f;
|
||||
--purple-6: #642ab5;
|
||||
--purple-7: #854eca;
|
||||
--purple-8: #ab7ae0;
|
||||
--purple-9: #cda8f0;
|
||||
--purple-10: #ebd7fa;
|
||||
|
||||
--cyan-1: #112123;
|
||||
--cyan-2: #113536;
|
||||
--cyan-3: #144848;
|
||||
--cyan-4: #146262;
|
||||
--cyan-5: #138585;
|
||||
--cyan-6: #13a8a8;
|
||||
--cyan-7: #33bcb7;
|
||||
--cyan-8: #58d1c9;
|
||||
--cyan-9: #84e2d8;
|
||||
--cyan-10: #b2f1e8;
|
||||
|
||||
--pink-1: #291321;
|
||||
--pink-2: #40162f;
|
||||
--pink-3: #551c3b;
|
||||
--pink-4: #75204f;
|
||||
--pink-5: #a02669;
|
||||
--pink-6: #cb2b83;
|
||||
--pink-7: #e0529c;
|
||||
--pink-8: #f37fb7;
|
||||
--pink-9: #f8a8cc;
|
||||
--pink-10: #fad2e3;
|
||||
|
||||
--orange-1: #2b1d11;
|
||||
--orange-2: #442a11;
|
||||
--orange-3: #593815;
|
||||
--orange-4: #7c4a15;
|
||||
--orange-5: #aa6215;
|
||||
--orange-6: #d87a16;
|
||||
--orange-7: #e89a3c;
|
||||
--orange-8: #f3b765;
|
||||
--orange-9: #f8cf8d;
|
||||
--orange-10: #fae3b7;
|
||||
|
||||
--primary-radius: #141414;
|
||||
--primary-1: var(--blue-1);
|
||||
--primary-2: var(--blue-2);
|
||||
--primary-3: var(--blue-3);
|
||||
--primary-4: var(--blue-4);
|
||||
--primary-5: var(--blue-5);
|
||||
--primary-6: var(--blue-6);
|
||||
--primary-7: var(--blue-7);
|
||||
--primary-8: var(--blue-8);
|
||||
--primary-9: var(--blue-9);
|
||||
--primary-10: var(--blue-10);
|
||||
|
||||
--primary-color: var(--primary-6);
|
||||
--primary-color-hover: var(--primary-5);
|
||||
--primary-color-active: var(--primary-7);
|
||||
--primary-color-outline: var(--primary-2);
|
||||
|
||||
--info-color: var(--primary-color);
|
||||
--success-color: var(--green-6);
|
||||
--processing-color: var(--blue-6);
|
||||
--highlight-color: var(--red-5);
|
||||
|
||||
--warning-color: var(--gold-6);
|
||||
--warning-color-hover: var(--gold-5);
|
||||
--warning-color-active: var(--gold-7);
|
||||
--warning-color-outline: var(--gold-2);
|
||||
|
||||
--error-color: var(--red-5);
|
||||
--error-color-hover: var(--red-4);
|
||||
--error-color-active: var(--red-7);
|
||||
--error-color-outline: var(--red-2);
|
||||
|
||||
--body-background: @black;
|
||||
--component-background: #141414;
|
||||
--popover-background: #1f1f1f;
|
||||
--popover-customize-border-color: #3a3a3a;
|
||||
|
||||
--text-color: fade(@white, 85%);
|
||||
--text-color-secondary: fade(@white, 45%);
|
||||
--text-color-inverse: @white;
|
||||
--icon-color-hover: fade(@white, 75%);
|
||||
--heading-color: fade(@white, 85%);
|
||||
|
||||
--item-hover-bg: fade(@white, 8%);
|
||||
|
||||
// Border color
|
||||
--border-color-base: #434343;
|
||||
--border-color-split: #303030;
|
||||
//--border-color-inverse: @black;
|
||||
|
||||
//
|
||||
--background-color-light: fade(@white, 4%);
|
||||
--background-color-base: fade(@white, 8%);
|
||||
|
||||
// Disabled states
|
||||
--disabled-color: fade(@white, 30%);
|
||||
--disabled-bg: @background-color-base;
|
||||
--disabled-color-dark: fade(@white, 30%);
|
||||
|
||||
// Shadow
|
||||
--shadow-color: rgba(0, 0, 0, 0.45);
|
||||
--shadow-color-inverse: @component-background;
|
||||
--box-shadow-base: @shadow-2;
|
||||
--shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.32),
|
||||
0 -9px 28px 0 rgba(0, 0, 0, 0.2), 0 -12px 48px 16px rgba(0, 0, 0, 0.12);
|
||||
--shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.32),
|
||||
0 9px 28px 0 rgba(0, 0, 0, 0.2), 0 12px 48px 16px rgba(0, 0, 0, 0.12);
|
||||
--shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.32),
|
||||
9px 0 28px 0 rgba(0, 0, 0, 0.2), 12px 0 48px 16px rgba(0, 0, 0, 0.12);
|
||||
--shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.48),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
|
||||
|
||||
// Buttons
|
||||
--btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
|
||||
--btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
||||
--btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
--btn-default-bg: transparent;
|
||||
|
||||
--btn-default-ghost-color: @text-color;
|
||||
--btn-default-ghost-border: fade(@white, 25%);
|
||||
|
||||
--btn-text-hover-bg: rgba(255, 255, 255, 0.03);
|
||||
--btn-text-active-bg: rgba(255, 255, 255, 0.04);
|
||||
|
||||
// Checkbox
|
||||
--checkbox-check-bg: transparent;
|
||||
|
||||
// Descriptions
|
||||
--descriptions-bg: @background-color-light;
|
||||
|
||||
// Divider
|
||||
--divider-color: rgba(255, 255, 255, 12%);
|
||||
|
||||
// Dropdown 有两个
|
||||
--dropdown-menu-submenu-disabled-bg: transparent;
|
||||
|
||||
// Radio
|
||||
--radio-dot-disabled-color: fade(@white, 20%);
|
||||
--radio-solid-checked-color: @white;
|
||||
|
||||
// Radio buttons
|
||||
--radio-disabled-button-checked-bg: fade(@white, 20%);
|
||||
--radio-disabled-button-checked-color: @disabled-color;
|
||||
|
||||
// Layout
|
||||
--layout-body-background: @body-background;
|
||||
--layout-header-background: @popover-background;
|
||||
--layout-trigger-background: #262626;
|
||||
//--layout-sider-background-1: tint(#1f1f1f, 10%);
|
||||
|
||||
// Dropdown 有两个
|
||||
--dropdown-menu-bg: @popover-background;
|
||||
|
||||
// Input
|
||||
--input-placeholder-color: fade(@white, 30%);
|
||||
--input-icon-color: fade(@white, 30%);
|
||||
--input-bg: transparent;
|
||||
--input-number-handler-active-bg: @item-hover-bg;
|
||||
--input-icon-hover-color: fade(@white, 85%);
|
||||
|
||||
// Mentions
|
||||
--mentions-dropdown-bg: @popover-background;
|
||||
|
||||
// Select
|
||||
--select-dropdown-bg: @popover-background;
|
||||
--select-background: transparent;
|
||||
--select-clear-background: @component-background;
|
||||
--select-selection-item-bg: fade(@white, 8);
|
||||
--select-selection-item-border-color: @border-color-split;
|
||||
--select-multiple-disabled-background: @component-background;
|
||||
--select-multiple-item-disabled-color: #595959;
|
||||
--select-multiple-item-disabled-border-color: @popover-background;
|
||||
|
||||
// Cascader
|
||||
--cascader-bg: transparent;
|
||||
--cascader-menu-bg: @popover-background;
|
||||
--cascader-menu-border-color-split: @border-color-split;
|
||||
|
||||
// Tooltip
|
||||
--tooltip-bg: #434343;
|
||||
|
||||
// Popover
|
||||
--popover-bg: @popover-background;
|
||||
|
||||
// Modal
|
||||
--modal-header-bg: @popover-background;
|
||||
--modal-header-border-color-split: @border-color-split;
|
||||
--modal-content-bg: @popover-background;
|
||||
--modal-footer-border-color-split: @border-color-split;
|
||||
|
||||
// Progress
|
||||
--progress-steps-item-bg: fade(@white, 8%);
|
||||
|
||||
// Menu
|
||||
--menu-popup-bg: @popover-background;
|
||||
--menu-dark-bg: @popover-background;
|
||||
--menu-dark-inline-submenu-bg: @component-background;
|
||||
|
||||
// Table
|
||||
--table-header-bg: #1d1d1d;
|
||||
--table-header-sort-bg: #262626;
|
||||
--table-body-sort-bg: fade(@white, 1%);
|
||||
--table-row-hover-bg: #262626;
|
||||
--table-expanded-row-bg: @table-header-bg;
|
||||
--table-header-cell-split-color: fade(@white, 8%);
|
||||
--table-header-sort-active-bg: #303030;
|
||||
--table-header-filter-active-bg: #434343;
|
||||
--table-filter-btns-bg: @popover-background;
|
||||
--table-filter-dropdown-bg: @popover-background;
|
||||
--table-expand-icon-bg: transparent;
|
||||
|
||||
// TimePicker
|
||||
--picker-bg: transparent;
|
||||
--picker-basic-cell-disabled-bg: #303030;
|
||||
--picker-border-color: @border-color-split;
|
||||
|
||||
// Calendar
|
||||
--calendar-bg: @popover-background;
|
||||
--calendar-input-bg: @calendar-bg;
|
||||
--calendar-border-color: transparent;
|
||||
--calendar-full-bg: @component-background;
|
||||
|
||||
// Badge
|
||||
--badge-text-color: @white;
|
||||
|
||||
// Rate
|
||||
--rate-star-bg: fade(@white, 12%);
|
||||
|
||||
// Card
|
||||
--card-actions-background: @component-background;
|
||||
--card-skeleton-bg: #303030;
|
||||
--card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.64),
|
||||
0 3px 6px 0 rgba(0, 0, 0, 0.48), 0 5px 12px 4px rgba(0, 0, 0, 0.36);
|
||||
|
||||
// Comment
|
||||
--comment-bg: transparent;
|
||||
--comment-author-time-color: fade(@white, 30%);
|
||||
--comment-action-hover-color: fade(@white, 65%);
|
||||
|
||||
// BackTop
|
||||
--back-top-bg: var(--tooltip-bg);
|
||||
--back-top-hover-bg: var(--border-color-split);
|
||||
|
||||
// Avatar
|
||||
--avatar-bg: fade(@white, 30%);
|
||||
|
||||
// Switch
|
||||
--switch-bg: @white;
|
||||
|
||||
// Pagination
|
||||
--pagination-item-bg: transparent;
|
||||
--pagination-item-bg-active: transparent;
|
||||
--pagination-item-link-bg: transparent;
|
||||
--pagination-item-disabled-color-active: @black;
|
||||
--pagination-item-disabled-bg-active: fade(@white, 25%);
|
||||
--pagination-item-input-bg: @pagination-item-bg;
|
||||
|
||||
// PageHeader
|
||||
--page-header-back-color: @icon-color;
|
||||
--page-header-ghost-bg: transparent;
|
||||
|
||||
// Slider
|
||||
--slider-rail-background-color: #262626;
|
||||
--slider-rail-background-color-hover: @border-color-base;
|
||||
--slider-dot-border-color: @border-color-split;
|
||||
--slider-dot-border-color-active: @primary-4;
|
||||
|
||||
// Tree
|
||||
--tree-bg: transparent;
|
||||
|
||||
// Skeleton
|
||||
--skeleton-to-color: fade(@white, 16%);
|
||||
|
||||
// Transfer
|
||||
--transfer-item-hover-bg: #262626;
|
||||
|
||||
// Message
|
||||
--message-notice-content-bg: @popover-background;
|
||||
|
||||
// List
|
||||
--list-customize-card-bg: transparent;
|
||||
|
||||
// Drawer
|
||||
--drawer-bg: @popover-background;
|
||||
|
||||
// Timeline
|
||||
--timeline-color: @border-color-split;
|
||||
--timeline-dot-color: @primary-color;
|
||||
|
||||
// Steps
|
||||
--steps-nav-arrow-color: fade(@white, 20%);
|
||||
--steps-background: transparent;
|
||||
|
||||
// Notification
|
||||
--notification-bg: @popover-background;
|
||||
|
||||
// 侧边栏
|
||||
--sidebar-light-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
|
||||
--sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
|
||||
|
||||
// 顶栏
|
||||
--header-light-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||||
--header-dark-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||||
--header-tool-hover-bg: rgba(255, 255, 255, 0.05);
|
||||
--header-dark-tool-hover-bg: rgba(255, 255, 255, 0.05);
|
||||
--header-color-split: rgba(255, 255, 255, 0.15);
|
||||
|
||||
// logo
|
||||
--logo-light-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
|
||||
--logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
|
||||
|
||||
//
|
||||
--gradient-min: fade(#303030, 20%);
|
||||
--gradient-max: fade(#303030, 40%);
|
||||
|
||||
// font
|
||||
--font-color: #FFFFFF;
|
||||
// header-bottom
|
||||
--header-bottom: rgba(54, 54, 54, 0.6);
|
||||
// breadcrumb-background
|
||||
--breadcrumb-background: rgba(54, 54, 54, 0.6);
|
||||
// background-color
|
||||
--snowy-background-color: #141414;
|
||||
// tag-background
|
||||
--tag-background: rgba(56, 56, 56);
|
||||
//
|
||||
--primary-fade-20: var(--primary-2);
|
||||
|
||||
--black--fade--85: rgba(255, 255, 255, 0.85);
|
||||
--switch-shadow-color: 0 2px 4px rgb(0 35 11 / 20%);
|
||||
--card-above-color: #303030;
|
||||
--card-above-border-color: #484848;
|
||||
|
||||
// workfolw design
|
||||
--node-wrap-box-color: #303030;
|
||||
--node-wrap-box-before-color: rgba(255, 255, 255, 0.09); // 箭头旁边
|
||||
--node-wrap-box-before-borde-color: rgba(255, 255, 255, 0.09); // 箭头
|
||||
--auto-judge-before-color: #141414; // 箭头背景
|
||||
--cover-line-before-color: #141414;
|
||||
}
|
||||
Reference in New Issue
Block a user