初始化
This commit is contained in:
@@ -0,0 +1,663 @@
|
||||
/** 全局样式及辅助类 */
|
||||
@import './themes/default.less';
|
||||
|
||||
html {
|
||||
overflow: auto;
|
||||
overflow: overlay;
|
||||
}
|
||||
|
||||
/* 辅助类 */
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
|
||||
&.ele-body-limit-width {
|
||||
min-width: @body-max-width;
|
||||
|
||||
.ant-form-item .ant-form-item-label {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
|
||||
& > label:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标题
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: (@font-size-lg + 2px);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: (@font-size-lg + 4px);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: (@font-size-lg + 6px);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: (@font-size-lg + 8px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: (@font-size-lg + 10px);
|
||||
}
|
||||
|
||||
// 文字
|
||||
.ele-text {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.ele-text-heading {
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
.ele-text-secondary {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
.ele-text-placeholder {
|
||||
color: @input-placeholder-color;
|
||||
}
|
||||
|
||||
a.ele-text,
|
||||
a.ele-text-heading,
|
||||
a.ele-text-secondary,
|
||||
a.ele-text-placeholder {
|
||||
&:hover {
|
||||
color: ~`colorPalette('@{primary-color}', 5) `;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-text-primary {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.ele-text-success,
|
||||
.ele-text-success:hover {
|
||||
color: @success-color;
|
||||
}
|
||||
|
||||
a.ele-text-success:hover {
|
||||
color: ~`colorPalette('@{success-color}', 5) `;
|
||||
}
|
||||
|
||||
a.ele-text-success:active {
|
||||
color: ~`colorPalette('@{success-color}', 7) `;
|
||||
}
|
||||
|
||||
.ele-text-warning,
|
||||
.ele-text-warning:hover {
|
||||
color: @warning-color;
|
||||
}
|
||||
|
||||
a.ele-text-warning:hover {
|
||||
color: ~`colorPalette('@{warning-color}', 5) `;
|
||||
}
|
||||
|
||||
a.ele-text-warning:active {
|
||||
color: ~`colorPalette('@{warning-color}', 7) `;
|
||||
}
|
||||
|
||||
.ele-text-danger,
|
||||
.ele-text-danger:hover {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
a.ele-text-danger:hover {
|
||||
color: ~`colorPalette('@{error-color}', 5) `;
|
||||
}
|
||||
|
||||
a.ele-text-danger:active {
|
||||
color: ~`colorPalette('@{error-color}', 7) `;
|
||||
}
|
||||
|
||||
.ele-text-info,
|
||||
a.ele-text-info:hover,
|
||||
a.ele-text-info:active {
|
||||
color: @normal-color;
|
||||
}
|
||||
|
||||
.ele-text-delete {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.ele-text-small {
|
||||
font-size: @font-size-sm !important;
|
||||
}
|
||||
|
||||
// 背景和边框
|
||||
.ele-bg-base {
|
||||
background-color: @layout-body-background !important;
|
||||
}
|
||||
|
||||
.ele-bg-primary {
|
||||
background-color: @primary-color !important;
|
||||
}
|
||||
|
||||
.ele-bg-success {
|
||||
background-color: @success-color !important;
|
||||
}
|
||||
|
||||
.ele-bg-warning {
|
||||
background-color: @warning-color !important;
|
||||
}
|
||||
|
||||
.ele-bg-danger {
|
||||
background-color: @error-color !important;
|
||||
}
|
||||
|
||||
.ele-bg-info {
|
||||
background-color: @normal-color !important;
|
||||
}
|
||||
|
||||
.ele-bg-white {
|
||||
background-color: @component-background !important;
|
||||
}
|
||||
|
||||
.ele-border-primary {
|
||||
border-color: @primary-color !important;
|
||||
}
|
||||
|
||||
.ele-border-success {
|
||||
border-color: @success-color !important;
|
||||
}
|
||||
|
||||
.ele-border-warning {
|
||||
border-color: @warning-color !important;
|
||||
}
|
||||
|
||||
.ele-border-danger {
|
||||
border-color: @error-color !important;
|
||||
}
|
||||
|
||||
.ele-border-info {
|
||||
border-color: @normal-color !important;
|
||||
}
|
||||
|
||||
.ele-border-base {
|
||||
border-color: @border-color-base !important;
|
||||
}
|
||||
|
||||
.ele-border-split {
|
||||
border-color: @border-color-split !important;
|
||||
}
|
||||
|
||||
// 浮动
|
||||
.ele-pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ele-pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ele-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.ele-clear-after:after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// 对齐方式
|
||||
.ele-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ele-text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ele-text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ele-fluid {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ele-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ele-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ele-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// 占位元素
|
||||
em:not([class]) {
|
||||
padding: 0 0.5em;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
s:not([class]) {
|
||||
padding: 0 0.125em;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* 文字省略 */
|
||||
.ele-elip {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 单元格 */
|
||||
.ele-cell {
|
||||
display: flex;
|
||||
|
||||
&:not(.ele-cell-align-top) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.ele-cell-align-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
& > .ele-cell-content {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& > * + .ele-cell-content {
|
||||
padding-left: @padding-sm;
|
||||
}
|
||||
|
||||
.ele-cell-title {
|
||||
color: @heading-color;
|
||||
font-size: @font-size-base + 1px;
|
||||
}
|
||||
|
||||
.ele-cell-desc {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base - 1px;
|
||||
margin-top: (@padding-xs / 2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面容器 */
|
||||
.ele-body {
|
||||
padding: @padding-md;
|
||||
|
||||
&.ele-body-card {
|
||||
padding-bottom: 0;
|
||||
|
||||
.ant-card {
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部工具栏 */
|
||||
.ele-bottom-tool {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: @shadow-1-up;
|
||||
padding: @padding-xs @padding-md;
|
||||
background: @component-background;
|
||||
transition: padding-left @sidebar-transition-anim;
|
||||
z-index: (@layout-z-index - 1);
|
||||
|
||||
.ele-bottom-tool-actions {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.ele-admin-sidebar + .ele-admin-body .ele-bottom-tool {
|
||||
padding-left: (@sidebar-width + @padding-md);
|
||||
}
|
||||
|
||||
.ele-layout-collapse .ele-admin-sidebar + .ele-admin-body .ele-bottom-tool {
|
||||
padding-left: (@sidebar-collapse-width + @padding-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* 静态表格 */
|
||||
.ele-table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
background: @component-background;
|
||||
|
||||
thead tr {
|
||||
th,
|
||||
td {
|
||||
background: @table-header-bg;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
th,
|
||||
td {
|
||||
background: @component-background;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr:hover,
|
||||
&.ele-table-stripe tr:nth-child(even) {
|
||||
th,
|
||||
td {
|
||||
background: @table-row-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr.ele-table-active {
|
||||
th,
|
||||
td {
|
||||
background: @table-selected-row-bg;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
font-weight: normal;
|
||||
line-height: 23px;
|
||||
padding: 12px 10px;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: @table-border-color;
|
||||
border-bottom-width: 1px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
color: @table-header-color;
|
||||
}
|
||||
|
||||
// 显示边框
|
||||
&.ele-table-border {
|
||||
th,
|
||||
td {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// 尺寸控制
|
||||
&.ele-table-medium {
|
||||
th,
|
||||
td {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ele-table-small {
|
||||
th,
|
||||
td {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ele-table-mini {
|
||||
th,
|
||||
td {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 表头分割线
|
||||
&:not(.ele-table-border) thead > tr > th {
|
||||
position: relative;
|
||||
|
||||
&:not(:last-child):before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 1.6em;
|
||||
background-color: @table-header-cell-split-color;
|
||||
transform: translateY(-50%);
|
||||
transition: background-color 0.3s;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* antd 组件样式调整 */
|
||||
body {
|
||||
// 分割线
|
||||
.ant-divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// modal 标题高度
|
||||
.ant-modal-header {
|
||||
padding: @modal-header-padding;
|
||||
|
||||
& > .ant-modal-title > div {
|
||||
padding-right: calc(@modal-close-x-width - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-close-x {
|
||||
width: @modal-close-x-width;
|
||||
height: @modal-close-x-height;
|
||||
line-height: @modal-close-x-height;
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮加图标减少间距
|
||||
.ele-btn-icon:not(.ant-btn-sm) {
|
||||
padding-left: (@padding-sm - 2px);
|
||||
padding-right: (@padding-sm - 2px);
|
||||
|
||||
& > .anticon + span {
|
||||
margin-left: @margin-xss;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单详情
|
||||
.ele-form-detail .ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.ele-form-detail .ant-form-item-label {
|
||||
line-height: @input-height-lg - 0.0001px;
|
||||
padding-bottom: 0;
|
||||
|
||||
& > label:after {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 级联选择器增加高度
|
||||
.ele-pop-wrap-higher .ant-cascader-menu {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
// message loading 带遮罩层
|
||||
.ele-message-loading .ant-message,
|
||||
.ele-message-loading-mask .ant-message {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ele-message-loading-mask .ant-message {
|
||||
background: @modal-mask-bg;
|
||||
}
|
||||
|
||||
body .ant-message {
|
||||
top: 0;
|
||||
padding-top: 16px;
|
||||
min-height: 100vh;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
// 虚拟滚动条样式优化
|
||||
.rc-virtual-list-scrollbar-thumb,
|
||||
.ant-select-tree-list-scrollbar-thumb {
|
||||
background: @scrollbar-thumb-color !important;
|
||||
|
||||
&:hover {
|
||||
background: @scrollbar-thumb-hover-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// table 有滚动条时加边框
|
||||
.ant-table-bordered div.ant-table-body {
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: @border-color-split;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:before {
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* echarts 提示框圆点 */
|
||||
.ele-chart-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 5px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
background: #5b8ff9;
|
||||
}
|
||||
|
||||
.echarts > div {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: @scrollbar-thumb-size;
|
||||
height: @scrollbar-thumb-size;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: (@scrollbar-thumb-size / 2);
|
||||
border: @scrollbar-thumb-border-size solid transparent;
|
||||
background-color: @scrollbar-thumb-color;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover {
|
||||
background-color: @scrollbar-thumb-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: @scrollbar-track-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 小型滚动条
|
||||
.ele-scrollbar-mini {
|
||||
&::-webkit-scrollbar {
|
||||
width: @scrollbar-mini-thumb-size;
|
||||
height: @scrollbar-mini-thumb-size;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: (@scrollbar-mini-thumb-size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏滚动条
|
||||
.ele-scrollbar-hide::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.ele-scrollbar-hide,
|
||||
.ele-scrollbar-hover {
|
||||
overflow: auto;
|
||||
overflow: overlay;
|
||||
}
|
||||
|
||||
// 鼠标滑入才显示滚动条
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.ele-scrollbar-hover {
|
||||
&::-webkit-scrollbar,
|
||||
&.ele-scrollbar-mini::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::-webkit-scrollbar {
|
||||
width: @scrollbar-thumb-size;
|
||||
height: @scrollbar-thumb-size;
|
||||
}
|
||||
|
||||
&.ele-scrollbar-mini::-webkit-scrollbar {
|
||||
width: @scrollbar-mini-thumb-size;
|
||||
height: @scrollbar-mini-thumb-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 小尺寸设备
|
||||
@media only screen and (max-width: 768px) {
|
||||
::-webkit-scrollbar,
|
||||
.ele-scrollbar-hover:hover::-webkit-scrollbar {
|
||||
width: @scrollbar-mini-thumb-size;
|
||||
height: @scrollbar-mini-thumb-size;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: (@scrollbar-mini-thumb-size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// 兼容火狐浏览器
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: @scrollbar-thumb-color transparent;
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
@import './default.less';
|
||||
|
||||
@theme: dark;
|
||||
// color palettes
|
||||
@blue-1: mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%);
|
||||
@blue-2: mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 25%);
|
||||
@blue-3: mix(@blue-base, @component-background, 30%);
|
||||
@blue-4: mix(@blue-base, @component-background, 45%);
|
||||
@blue-5: mix(@blue-base, @component-background, 65%);
|
||||
@blue-6: mix(@blue-base, @component-background, 85%);
|
||||
@blue-7: mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 90%);
|
||||
@blue-8: mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%);
|
||||
@blue-9: mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 97%);
|
||||
@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@purple-1: mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%);
|
||||
@purple-2: mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%);
|
||||
@purple-3: mix(@purple-base, @component-background, 30%);
|
||||
@purple-4: mix(@purple-base, @component-background, 45%);
|
||||
@purple-5: mix(@purple-base, @component-background, 65%);
|
||||
@purple-6: mix(@purple-base, @component-background, 85%);
|
||||
@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%);
|
||||
@purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%);
|
||||
@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%);
|
||||
@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@cyan-1: mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%);
|
||||
@cyan-2: mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%);
|
||||
@cyan-3: mix(@cyan-base, @component-background, 30%);
|
||||
@cyan-4: mix(@cyan-base, @component-background, 45%);
|
||||
@cyan-5: mix(@cyan-base, @component-background, 65%);
|
||||
@cyan-6: mix(@cyan-base, @component-background, 85%);
|
||||
@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 90%);
|
||||
@cyan-8: mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%);
|
||||
@cyan-9: mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 97%);
|
||||
@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@green-1: mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%);
|
||||
@green-2: mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%);
|
||||
@green-3: mix(@green-base, @component-background, 30%);
|
||||
@green-4: mix(@green-base, @component-background, 45%);
|
||||
@green-5: mix(@green-base, @component-background, 65%);
|
||||
@green-6: mix(@green-base, @component-background, 85%);
|
||||
@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%);
|
||||
@green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%);
|
||||
@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%);
|
||||
@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@magenta-1: mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%);
|
||||
@magenta-2: mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%);
|
||||
@magenta-3: mix(@magenta-base, @component-background, 30%);
|
||||
@magenta-4: mix(@magenta-base, @component-background, 45%);
|
||||
@magenta-5: mix(@magenta-base, @component-background, 65%);
|
||||
@magenta-6: mix(@magenta-base, @component-background, 85%);
|
||||
@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 90%);
|
||||
@magenta-8: mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%);
|
||||
@magenta-9: mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 97%);
|
||||
@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@pink-1: mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%);
|
||||
@pink-2: mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%);
|
||||
@pink-3: mix(@pink-base, @component-background, 30%);
|
||||
@pink-4: mix(@pink-base, @component-background, 45%);
|
||||
@pink-5: mix(@pink-base, @component-background, 65%);
|
||||
@pink-6: mix(@pink-base, @component-background, 85%);
|
||||
@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 90%);
|
||||
@pink-8: mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%);
|
||||
@pink-9: mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 97%);
|
||||
@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@red-1: mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%);
|
||||
@red-2: mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%);
|
||||
@red-3: mix(@red-base, @component-background, 30%);
|
||||
@red-4: mix(@red-base, @component-background, 45%);
|
||||
@red-5: mix(@red-base, @component-background, 65%);
|
||||
@red-6: mix(@red-base, @component-background, 85%);
|
||||
@red-7: mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 90%);
|
||||
@red-8: mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%);
|
||||
@red-9: mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 97%);
|
||||
@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@orange-1: mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%);
|
||||
@orange-2: mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%);
|
||||
@orange-3: mix(@orange-base, @component-background, 30%);
|
||||
@orange-4: mix(@orange-base, @component-background, 45%);
|
||||
@orange-5: mix(@orange-base, @component-background, 65%);
|
||||
@orange-6: mix(@orange-base, @component-background, 85%);
|
||||
@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 90%);
|
||||
@orange-8: mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%);
|
||||
@orange-9: mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 97%);
|
||||
@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@yellow-1: mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%);
|
||||
@yellow-2: mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%);
|
||||
@yellow-3: mix(@yellow-base, @component-background, 30%);
|
||||
@yellow-4: mix(@yellow-base, @component-background, 45%);
|
||||
@yellow-5: mix(@yellow-base, @component-background, 65%);
|
||||
@yellow-6: mix(@yellow-base, @component-background, 85%);
|
||||
@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 90%);
|
||||
@yellow-8: mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%);
|
||||
@yellow-9: mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 97%);
|
||||
@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@volcano-1: mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%);
|
||||
@volcano-2: mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%);
|
||||
@volcano-3: mix(@volcano-base, @component-background, 30%);
|
||||
@volcano-4: mix(@volcano-base, @component-background, 45%);
|
||||
@volcano-5: mix(@volcano-base, @component-background, 65%);
|
||||
@volcano-6: mix(@volcano-base, @component-background, 85%);
|
||||
@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 90%);
|
||||
@volcano-8: mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%);
|
||||
@volcano-9: mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 97%);
|
||||
@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@geekblue-1: mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%);
|
||||
@geekblue-2: mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%);
|
||||
@geekblue-3: mix(@geekblue-base, @component-background, 30%);
|
||||
@geekblue-4: mix(@geekblue-base, @component-background, 45%);
|
||||
@geekblue-5: mix(@geekblue-base, @component-background, 65%);
|
||||
@geekblue-6: mix(@geekblue-base, @component-background, 85%);
|
||||
@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 90%);
|
||||
@geekblue-8: mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%);
|
||||
@geekblue-9: mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 97%);
|
||||
@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@lime-1: mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%);
|
||||
@lime-2: mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%);
|
||||
@lime-3: mix(@lime-base, @component-background, 30%);
|
||||
@lime-4: mix(@lime-base, @component-background, 45%);
|
||||
@lime-5: mix(@lime-base, @component-background, 65%);
|
||||
@lime-6: mix(@lime-base, @component-background, 85%);
|
||||
@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 90%);
|
||||
@lime-8: mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%);
|
||||
@lime-9: mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 97%);
|
||||
@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@gold-1: mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%);
|
||||
@gold-2: mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%);
|
||||
@gold-3: mix(@gold-base, @component-background, 30%);
|
||||
@gold-4: mix(@gold-base, @component-background, 45%);
|
||||
@gold-5: mix(@gold-base, @component-background, 65%);
|
||||
@gold-6: mix(@gold-base, @component-background, 85%);
|
||||
@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 90%);
|
||||
@gold-8: mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%);
|
||||
@gold-9: mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 97%);
|
||||
@gold-10: mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 98%);
|
||||
|
||||
// Color used by default to control hover and active backgrounds and for
|
||||
// alert info backgrounds.
|
||||
@primary-1: mix(color(~`colorPalette('@{primary-color}', 8) `), @component-background, 15%);
|
||||
@primary-2: mix(color(~`colorPalette('@{primary-color}', 7) `), @component-background, 25%);
|
||||
@primary-3: mix(@primary-color, @component-background, 30%);
|
||||
@primary-4: mix(@primary-color, @component-background, 45%);
|
||||
@primary-5: mix(@primary-color, @component-background, 65%);
|
||||
@primary-6: @primary-color;
|
||||
@primary-7: mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 90%);
|
||||
@primary-8: mix(color(~`colorPalette('@{primary-color}', 4) `), @component-background, 95%);
|
||||
@primary-9: mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 97%);
|
||||
@primary-10: mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 98%);
|
||||
|
||||
// Layer background
|
||||
@popover-background: #1f1f1f;
|
||||
@popover-customize-border-color: #3a3a3a;
|
||||
@body-background: @black;
|
||||
@component-background: #141414;
|
||||
|
||||
@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%);
|
||||
|
||||
// The background colors for active and hover states for things like
|
||||
// list items or table cells.
|
||||
@item-active-bg: @primary-1;
|
||||
@item-hover-bg: fade(@white, 8%);
|
||||
|
||||
// Border color
|
||||
@border-color-base: #434343; // base border outline a component
|
||||
@border-color-split: #303030; // split border inside a component
|
||||
|
||||
@background-color-light: fade(@white, 4%); // background of header and selected item
|
||||
@background-color-base: fade(@white, 8%); // Default grey background color
|
||||
|
||||
// Disabled states
|
||||
@disabled-color: fade(@white, 30%);
|
||||
@disabled-bg: @background-color-base;
|
||||
@disabled-color-dark: fade(@white, 30%);
|
||||
|
||||
// Tree
|
||||
// ---
|
||||
@tree-bg: transparent;
|
||||
|
||||
// List
|
||||
// ---
|
||||
@list-customize-card-bg: transparent;
|
||||
|
||||
// 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);
|
||||
|
||||
// Checkbox
|
||||
// ---
|
||||
@checkbox-check-bg: transparent;
|
||||
|
||||
// Descriptions
|
||||
// ---
|
||||
@descriptions-bg: @background-color-light;
|
||||
|
||||
// Divider
|
||||
// ---
|
||||
@divider-color: rgba(255, 255, 255, 12%);
|
||||
|
||||
// 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;
|
||||
|
||||
// Radio
|
||||
// ---
|
||||
@radio-solid-checked-color: @white;
|
||||
@radio-dot-disabled-color: fade(@white, 20%);
|
||||
|
||||
// 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;
|
||||
|
||||
// Input
|
||||
// ---
|
||||
@input-bg: transparent;
|
||||
@input-placeholder-color: fade(@white, 30%);
|
||||
@input-icon-color: fade(@white, 30%);
|
||||
@input-number-handler-active-bg: @item-hover-bg;
|
||||
@input-icon-hover-color: fade(@white, 85%);
|
||||
|
||||
// Select
|
||||
// ---
|
||||
@select-background: transparent;
|
||||
@select-dropdown-bg: @popover-background;
|
||||
@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 background color
|
||||
@tooltip-bg: #434343;
|
||||
|
||||
// Menu
|
||||
// ---
|
||||
// dark theme
|
||||
@menu-dark-inline-submenu-bg: @component-background;
|
||||
@menu-dark-bg: @popover-background;
|
||||
@menu-popup-bg: @popover-background;
|
||||
|
||||
// Message
|
||||
// ---
|
||||
@message-notice-content-bg: @popover-background;
|
||||
|
||||
// Notification
|
||||
@notification-bg: @popover-background;
|
||||
|
||||
// LINK
|
||||
@link-hover-color: @primary-5;
|
||||
@link-active-color: @primary-7;
|
||||
|
||||
// Table
|
||||
// --
|
||||
@table-header-bg: #1d1d1d;
|
||||
@table-body-sort-bg: fade(@white, 1%);
|
||||
@table-row-hover-bg: #262626;
|
||||
@table-header-cell-split-color: fade(@white, 8%);
|
||||
@table-header-sort-bg: #262626;
|
||||
@table-header-filter-active-bg: #434343;
|
||||
@table-header-sort-active-bg: #303030;
|
||||
@table-fixed-header-sort-active-bg: #222;
|
||||
@table-filter-btns-bg: @popover-background;
|
||||
@table-expanded-row-bg: @table-header-bg;
|
||||
@table-filter-dropdown-bg: @popover-background;
|
||||
@table-expand-icon-bg: transparent;
|
||||
|
||||
// Tag
|
||||
// ---
|
||||
@info-color-deprecated-bg: @primary-1;
|
||||
@info-color-deprecated-border: @primary-3;
|
||||
@success-color-deprecated-bg: @green-1;
|
||||
@success-color-deprecated-border: @green-3;
|
||||
@warning-color-deprecated-bg: @orange-1;
|
||||
@warning-color-deprecated-border: @orange-3;
|
||||
@error-color-deprecated-bg: @red-1;
|
||||
@error-color-deprecated-border: @red-3;
|
||||
|
||||
// TimePicker
|
||||
// ---
|
||||
@picker-basic-cell-hover-with-range-color: darken(@primary-color, 35%);
|
||||
@picker-basic-cell-disabled-bg: #303030;
|
||||
@picker-border-color: @border-color-split;
|
||||
@picker-bg: transparent;
|
||||
@picker-date-hover-range-border-color: darken(@primary-color, 20%);
|
||||
|
||||
// Dropdown
|
||||
// ---
|
||||
@dropdown-menu-bg: @popover-background;
|
||||
@dropdown-menu-submenu-disabled-bg: transparent;
|
||||
|
||||
// Steps
|
||||
// ---
|
||||
@steps-nav-arrow-color: fade(@white, 20%);
|
||||
@steps-background: transparent;
|
||||
|
||||
// Avatar
|
||||
// ---
|
||||
@avatar-bg: fade(@white, 30%);
|
||||
|
||||
// Progress
|
||||
// ---
|
||||
@progress-steps-item-bg: fade(@white, 8%);
|
||||
|
||||
// Calendar
|
||||
// ---
|
||||
@calendar-bg: @popover-background;
|
||||
@calendar-input-bg: @calendar-bg;
|
||||
@calendar-border-color: transparent;
|
||||
@calendar-full-bg: @component-background;
|
||||
|
||||
// Badge
|
||||
// ---
|
||||
@badge-text-color: @white;
|
||||
|
||||
// Popover
|
||||
@popover-bg: @popover-background;
|
||||
|
||||
// Drawer
|
||||
@drawer-bg: @popover-background;
|
||||
|
||||
// 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);
|
||||
|
||||
// Transfer
|
||||
// ---
|
||||
@transfer-item-hover-bg: #262626;
|
||||
|
||||
// Comment
|
||||
// ---
|
||||
@comment-bg: transparent;
|
||||
@comment-author-time-color: fade(@white, 30%);
|
||||
@comment-action-hover-color: fade(@white, 65%);
|
||||
|
||||
// Rate
|
||||
// ---
|
||||
@rate-star-bg: fade(@white, 12%);
|
||||
|
||||
// Switch
|
||||
// ---
|
||||
@switch-bg: @white;
|
||||
|
||||
// Pagination
|
||||
// ---
|
||||
@pagination-item-bg: transparent;
|
||||
@pagination-item-bg-active: transparent;
|
||||
@pagination-item-link-bg: transparent;
|
||||
@pagination-item-disabled-bg-active: fade(@white, 25%);
|
||||
@pagination-item-disabled-color-active: @black;
|
||||
@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;
|
||||
|
||||
// Skeleton
|
||||
// ---
|
||||
@skeleton-to-color: fade(@white, 16%);
|
||||
|
||||
// Alert
|
||||
// ---
|
||||
@alert-success-border-color: @green-3;
|
||||
@alert-success-bg-color: @green-1;
|
||||
@alert-success-icon-color: @success-color;
|
||||
@alert-info-border-color: @primary-3;
|
||||
@alert-info-bg-color: @primary-1;
|
||||
@alert-info-icon-color: @info-color;
|
||||
@alert-warning-border-color: @gold-3;
|
||||
@alert-warning-bg-color: @gold-1;
|
||||
@alert-warning-icon-color: @warning-color;
|
||||
@alert-error-border-color: @red-3;
|
||||
@alert-error-bg-color: @red-1;
|
||||
@alert-error-icon-color: @error-color;
|
||||
|
||||
// Timeline
|
||||
// ---
|
||||
@timeline-color: @border-color-split;
|
||||
@timeline-dot-color: @primary-color;
|
||||
|
||||
// Mentions
|
||||
// ---
|
||||
@mentions-dropdown-bg: @popover-background;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,21 @@
|
||||
/** 暗黑主题 */
|
||||
@import './default.less';
|
||||
@import 'ant-design-vue/es/style/themes/dark.less';
|
||||
|
||||
// 滚动条
|
||||
@scrollbar-thumb-color: #484848;
|
||||
@scrollbar-thumb-hover-color: #5b5b5b;
|
||||
|
||||
// 侧栏
|
||||
@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);
|
||||
|
||||
// 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);
|
||||
@@ -0,0 +1,171 @@
|
||||
/** 默认主题 */
|
||||
@import './../es/default.less';
|
||||
|
||||
/* Menu */
|
||||
@menu-dark-color: fade(@white, 85%);
|
||||
|
||||
/* Modal */
|
||||
@modal-header-padding: 16px 24px;
|
||||
@modal-close-x-height: 54px;
|
||||
@modal-close-x-width: 54px;
|
||||
|
||||
/* 滚动条 */
|
||||
// 滑块颜色
|
||||
@scrollbar-thumb-color: #cfcfcf;
|
||||
// 滑块 hover 颜色
|
||||
@scrollbar-thumb-hover-color: #b6b6b6;
|
||||
// 滑块大小
|
||||
@scrollbar-thumb-size: 12px;
|
||||
// 滑块边框大小
|
||||
@scrollbar-thumb-border-size: 2px;
|
||||
// 小型滚动条滑块大小
|
||||
@scrollbar-mini-thumb-size: 8px;
|
||||
// 轨道颜色
|
||||
@scrollbar-track-color: transparent;
|
||||
|
||||
/* Layout */
|
||||
// 布局最小 z-index (页签栏[最小]->「顶栏|侧栏」[+2|+3|+1]->移动端遮罩层[+3])
|
||||
@layout-z-index: 99;
|
||||
// 主体内容定宽
|
||||
@body-limit-width: 1160px;
|
||||
// 关闭响应式布局后的最大宽度
|
||||
@body-max-width: 1400px;
|
||||
// 暗黑模式 class
|
||||
@dark-class: ele-admin-theme-dark;
|
||||
|
||||
/* 侧栏 */
|
||||
// 侧栏宽度
|
||||
@sidebar-width: 210px;
|
||||
// 侧栏折叠后宽度
|
||||
@sidebar-collapse-width: 48px;
|
||||
// 侧栏背景
|
||||
@sidebar-background: @layout-sider-background;
|
||||
// 侧栏亮色背景
|
||||
@sidebar-light-background: @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);
|
||||
// 侧栏过渡动画
|
||||
@sidebar-transition-anim: 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
|
||||
// 侧栏过渡效果
|
||||
@sidebar-transition: width @sidebar-transition-anim,
|
||||
left @sidebar-transition-anim, box-shadow @sidebar-transition-anim;
|
||||
// 双侧栏一级宽度
|
||||
@sidebar-nav-width: 80px;
|
||||
// 双侧栏一级内间距
|
||||
@sidebar-nav-padding: 0 @padding-xs;
|
||||
// 双侧栏一级折叠后内间距
|
||||
@sidebar-collapse-nav-padding: 0 @padding-xss;
|
||||
// 双侧栏一级 pop 菜单的左右 margin
|
||||
@sidebar-nav-pop-menu-margin: @padding-xs;
|
||||
// 双侧栏一级菜单字体大小
|
||||
@sidebar-nav-font-size: @font-size-sm;
|
||||
// 双侧栏一级菜单图标字体大小
|
||||
@sidebar-nav-icon-font-size: @font-size-lg;
|
||||
// 双侧栏一级菜单 item 内间距
|
||||
@sidebar-nav-item-padding: @padding-sm 0;
|
||||
// 双侧栏一级折叠后菜单 item 内间距
|
||||
@sidebar-collapse-nav-item-padding: @padding-sm 0;
|
||||
// 双侧栏一级菜单 item 标题外间距
|
||||
@sidebar-nav-item-title-margin: (@padding-sm / 2) 0 0 0;
|
||||
// 双侧栏一级菜单 item 外间距
|
||||
@sidebar-nav-item-margin: @padding-xss 0 @padding-xs 0;
|
||||
// 双侧栏一级折叠后菜单 item 外间距
|
||||
@sidebar-collapse-nav-item-margin: @padding-xss 0 @padding-xs 0;
|
||||
// 侧栏固定时的 z-index
|
||||
@sidebar-fixed-z-index: (@zindex-modal + 1001);
|
||||
// 侧栏滚动条滑块颜色
|
||||
@sidebar-scrollbar-thumb-color: tint(@layout-sider-background, 30%);
|
||||
// 侧栏滚动条滑块 hover 颜色
|
||||
@sidebar-scrollbar-thumb-hover-color: tint(@layout-sider-background, 30%);
|
||||
// 侧栏滚动条轨道颜色
|
||||
@sidebar-scrollbar-track-color: transparent;
|
||||
// 侧栏亮色滚动条滑块颜色
|
||||
@sidebar-light-scrollbar-thumb-color: @scrollbar-thumb-color;
|
||||
// 侧栏亮色滚动条滑块 hover 颜色
|
||||
@sidebar-light-scrollbar-thumb-hover-color: @scrollbar-thumb-hover-color;
|
||||
// 侧栏亮色滚动条轨道颜色
|
||||
@sidebar-light-scrollbar-track-color: transparent;
|
||||
// 侧栏彩色图标宽度
|
||||
@sidebar-colorful-icon-width: 26px;
|
||||
// 侧栏彩色图标字体大小
|
||||
@sidebar-colorful-icon-size: @font-size-base;
|
||||
// 侧栏彩色图标颜色行高
|
||||
@sidebar-colorful-line-height: calc(@sidebar-colorful-icon-width + 4px);
|
||||
// 侧栏彩色图标颜色
|
||||
@sidebar-colorful-font-color: @menu-dark-selected-item-text-color;
|
||||
// 侧栏彩色图标颜色
|
||||
@sidebar-colorful-color-1: #61b2fc;
|
||||
@sidebar-colorful-color-2: #7dd733;
|
||||
@sidebar-colorful-color-3: #32a2d4;
|
||||
@sidebar-colorful-color-4: #7383cf;
|
||||
@sidebar-colorful-color-5: #f5686f;
|
||||
@sidebar-colorful-color-6: #2bccce;
|
||||
@sidebar-colorful-color-7: #7dd733;
|
||||
@sidebar-colorful-color-8: #faad14;
|
||||
// 侧栏彩色图标圆点大小
|
||||
@sidebar-colorful-dot-size: 8px;
|
||||
// 侧栏彩色图标圆点外间距
|
||||
@sidebar-colorful-dot-margin: 0 @padding-xs;
|
||||
|
||||
/* 顶栏 */
|
||||
// 顶栏高度
|
||||
@header-height: 48px;
|
||||
// 顶栏背景
|
||||
@header-background: @layout-sider-background;
|
||||
// 顶栏亮色背景
|
||||
@header-light-background: @component-background;
|
||||
// 顶栏亮色阴影
|
||||
@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-avatar-size: 28px;
|
||||
// 顶栏工具按钮 hover 背景
|
||||
@header-tool-hover-bg: rgba(0, 0, 0, 0.025);
|
||||
// 顶栏暗色工具按钮 hover 背景
|
||||
@header-dark-tool-hover-bg: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* logo */
|
||||
// logo 大小
|
||||
@logo-size: 30px;
|
||||
// logo 文字大小
|
||||
@logo-font-size: @font-size-lg + 2px;
|
||||
// logo 字体粗度
|
||||
@logo-font-weight: 600;
|
||||
// logo 亮色文字颜色
|
||||
@logo-light-color: @heading-color;
|
||||
// logo 暗色文字颜色
|
||||
@logo-dark-color: @menu-dark-selected-item-text-color;
|
||||
// logo 亮色阴影
|
||||
@logo-light-shadow: 1px 2px 3px rgba(0, 21, 41, 0.08);
|
||||
// logo 暗色阴影
|
||||
@logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, 0.35);
|
||||
// logo 字体
|
||||
@logo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
/* 页签栏 */
|
||||
// 页签栏高度
|
||||
@tabs-height: 40px;
|
||||
// 页签栏卡片式间距
|
||||
@tabs-card-padding: @padding-xs;
|
||||
|
||||
/* 返回顶部位置 */
|
||||
@layout-back-top-right: 30px;
|
||||
@layout-back-top-bottom: 60px;
|
||||
|
||||
/* FileList */
|
||||
@file-list-selector-z-index: 999;
|
||||
@file-list-selector-border-color: #0078d7;
|
||||
@file-list-selector-background: rgba(0, 120, 215, 0.2);
|
||||
@file-list-item-active-border-color: @primary-3;
|
||||
@file-list-item-active-background: @item-active-bg;
|
||||
@file-list-table-sort-color: hsla(0, 0%, 60%, 0.6);
|
||||
@file-list-table-sort-active-color: @primary-color;
|
||||
|
||||
/* Table Tool */
|
||||
@table-tool-column-width: 220px;
|
||||
@table-tool-column-max-height: 480px;
|
||||
@@ -0,0 +1,384 @@
|
||||
@import './default.less';
|
||||
|
||||
.@{dark-class} {
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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);
|
||||
--success-color-hover: var(--green-5);
|
||||
--success-color-active: var(--green-7);
|
||||
--success-color-outline: var(--green-2);
|
||||
|
||||
--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);
|
||||
|
||||
--highlight-color: var(--red-5);
|
||||
--processing-color: var(--blue-6);
|
||||
|
||||
--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;
|
||||
|
||||
//
|
||||
--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;
|
||||
|
||||
// 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-fixed-header-sort-active-bg: #222;
|
||||
--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;
|
||||
|
||||
// Image
|
||||
--image-preview-operation-disabled-color: rgba(255, 255, 255, 0.45);
|
||||
|
||||
//
|
||||
--gradient-min: fade(#303030, 20%);
|
||||
--gradient-max: fade(#303030, 40%);
|
||||
|
||||
// 滚动条
|
||||
--scrollbar-thumb-color: #484848;
|
||||
--scrollbar-thumb-hover-color: #5b5b5b;
|
||||
--scrollbar-track-color: transparent;
|
||||
|
||||
// 侧栏
|
||||
--sidebar-background: @layout-sider-background;
|
||||
--sidebar-light-background: @component-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);
|
||||
--sidebar-scrollbar-thumb-color: tint(#1f1f1f, 30%);
|
||||
--sidebar-scrollbar-thumb-hover-color: tint(#1f1f1f, 40%);
|
||||
--sidebar-scrollbar-track-color: transparent;
|
||||
--sidebar-light-scrollbar-thumb-color: @scrollbar-thumb-color;
|
||||
--sidebar-light-scrollbar-thumb-hover-color: @scrollbar-thumb-hover-color;
|
||||
--sidebar-light-scrollbar-track-color: transparent;
|
||||
|
||||
// 顶栏
|
||||
--header-background: @layout-sider-background;
|
||||
--header-light-background: @component-background;
|
||||
--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);
|
||||
|
||||
// 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);
|
||||
}
|
||||
@@ -0,0 +1,386 @@
|
||||
@import './default.less';
|
||||
|
||||
:root {
|
||||
--blue-1: #e6f7ff;
|
||||
--blue-2: #bae7ff;
|
||||
--blue-3: #91d5ff;
|
||||
--blue-4: #69c0ff;
|
||||
--blue-5: #40a9ff;
|
||||
--blue-6: #1890ff;
|
||||
--blue-7: #096dd9;
|
||||
--blue-8: #0050b3;
|
||||
--blue-9: #003a8c;
|
||||
--blue-10: #002766;
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
|
||||
--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);
|
||||
--success-color-hover: var(--green-5);
|
||||
--success-color-active: var(--green-7);
|
||||
--success-color-outline: var(--green-2);
|
||||
|
||||
--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);
|
||||
|
||||
--highlight-color: var(--red-5);
|
||||
--processing-color: var(--blue-6);
|
||||
|
||||
--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%);
|
||||
|
||||
//
|
||||
--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(0, 0, 0, 0.15);
|
||||
--shadow-color-inverse: @component-background;
|
||||
--box-shadow-base: @shadow-2;
|
||||
--shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08),
|
||||
0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
|
||||
--shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
|
||||
0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
|
||||
--shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08),
|
||||
-9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);
|
||||
--shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08),
|
||||
9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);
|
||||
--shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
// 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: @disabled-active-bg;
|
||||
--radio-disabled-button-checked-color: @disabled-color;
|
||||
|
||||
// Layout
|
||||
--layout-body-background: #f0f2f5;
|
||||
--layout-header-background: #001529;
|
||||
--layout-trigger-background: #002140;
|
||||
|
||||
// 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-fixed-header-sort-active-bg: hsv(0, 0, 96%);
|
||||
--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: @disabled-active-bg;
|
||||
--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: shade(@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;
|
||||
|
||||
// Steps
|
||||
--steps-nav-arrow-color: fade(@black, 25%);
|
||||
--steps-background: @component-background;
|
||||
|
||||
// Notification
|
||||
--notification-bg: @component-background;
|
||||
|
||||
// Image
|
||||
--image-preview-operation-disabled-color: rgba(255, 255, 255, 0.45);
|
||||
|
||||
//
|
||||
--gradient-min: fade(#cfd8dc, 20%);
|
||||
--gradient-max: fade(#cfd8dc, 40%);
|
||||
|
||||
// 滚动条
|
||||
--scrollbar-thumb-color: #cfcfcf;
|
||||
--scrollbar-thumb-hover-color: #b6b6b6;
|
||||
--scrollbar-track-color: transparent;
|
||||
|
||||
// 侧栏
|
||||
--sidebar-background: @layout-sider-background;
|
||||
--sidebar-light-background: @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);
|
||||
--sidebar-scrollbar-thumb-color: tint(#001529, 30%);
|
||||
--sidebar-scrollbar-thumb-hover-color: tint(#001529, 40%);
|
||||
--sidebar-scrollbar-track-color: transparent;
|
||||
--sidebar-light-scrollbar-thumb-color: @scrollbar-thumb-color;
|
||||
--sidebar-light-scrollbar-thumb-hover-color: @scrollbar-thumb-hover-color;
|
||||
--sidebar-light-scrollbar-track-color: transparent;
|
||||
|
||||
// 顶栏
|
||||
--header-background: @layout-sider-background;
|
||||
--header-light-background: @component-background;
|
||||
--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);
|
||||
|
||||
// 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);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
/** 动态主题 */
|
||||
@import './default.less';
|
||||
@import './dynamic-default.less';
|
||||
@import './dynamic-dark.less';
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 738 B |
Binary file not shown.
|
After Width: | Height: | Size: 703 B |
Binary file not shown.
|
After Width: | Height: | Size: 787 B |
Binary file not shown.
|
After Width: | Height: | Size: 767 B |
Binary file not shown.
|
After Width: | Height: | Size: 993 B |
Binary file not shown.
|
After Width: | Height: | Size: 944 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 824 B |
Binary file not shown.
|
After Width: | Height: | Size: 790 B |
Binary file not shown.
|
After Width: | Height: | Size: 964 B |
Binary file not shown.
|
After Width: | Height: | Size: 927 B |
Reference in New Issue
Block a user