|
|
|
|
@ -1,24 +1,28 @@
|
|
|
|
|
/* 暗色主题 */ |
|
|
|
|
$dark-logo: url("../../../../public/logo/logo-lang-light.svg"); |
|
|
|
|
$dark-logo: url('../../../../public/logo/logo-lang-light.svg'); |
|
|
|
|
$dark-bg: #1e1f22; //背景 |
|
|
|
|
$dark-bg-highlight: #333; //高亮块：背景 |
|
|
|
|
$dark-text: #ddd; //字体颜色 |
|
|
|
|
$dark-bd: #333; //边框和分隔线 |
|
|
|
|
$dark-btn: #444; //按钮：边框和背景颜色 |
|
|
|
|
$dark-input: #777; //输入框：背景色 |
|
|
|
|
.theme-dark{ |
|
|
|
|
.theme-dark { |
|
|
|
|
hr { |
|
|
|
|
border-color: $dark-bd; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 背景色和字体颜色 */ |
|
|
|
|
.ds_layout, .ant-layout, |
|
|
|
|
.ds-container, .ds-container .container-header, |
|
|
|
|
.ant-layout-footer{ |
|
|
|
|
.ds_layout, |
|
|
|
|
.ant-layout, |
|
|
|
|
.ds-container, |
|
|
|
|
.ds-container .container-header, |
|
|
|
|
.ant-layout-footer { |
|
|
|
|
background: $dark-bg; |
|
|
|
|
color: $dark-text; |
|
|
|
|
} |
|
|
|
|
div, span, label { |
|
|
|
|
div, |
|
|
|
|
span, |
|
|
|
|
label { |
|
|
|
|
color: $dark-text; |
|
|
|
|
} |
|
|
|
|
.form-help { |
|
|
|
|
@ -31,7 +35,7 @@ $dark-input: #777; //输入框：背景色
|
|
|
|
|
|
|
|
|
|
/* 高亮块：背景色和字体颜色 */ |
|
|
|
|
/* 警告类型 */ |
|
|
|
|
.ant-alert-warning{ |
|
|
|
|
.ant-alert-warning { |
|
|
|
|
background: $dark-bg-highlight; |
|
|
|
|
border-color: $dark-bg-highlight; |
|
|
|
|
color: $dark-text; |
|
|
|
|
@ -41,7 +45,7 @@ $dark-input: #777; //输入框：背景色
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/* 消息类型 */ |
|
|
|
|
.ant-alert-info{ |
|
|
|
|
.ant-alert-info { |
|
|
|
|
background: $dark-bg-highlight; |
|
|
|
|
border-color: $dark-bg-highlight; |
|
|
|
|
color: $dark-text; |
|
|
|
|
@ -55,7 +59,7 @@ $dark-input: #777; //输入框：背景色
|
|
|
|
|
.footer-bar, |
|
|
|
|
.ant-layout-footer, |
|
|
|
|
.ant-tabs .ant-tabs-left-bar, |
|
|
|
|
.ant-tabs .ant-tabs-left-content{ |
|
|
|
|
.ant-tabs .ant-tabs-left-content { |
|
|
|
|
border-color: $dark-bd; |
|
|
|
|
} |
|
|
|
|
.ant-radio-button-wrapper:not(:first-child)::before { |
|
|
|
|
@ -67,138 +71,146 @@ $dark-input: #777; //输入框：背景色
|
|
|
|
|
|
|
|
|
|
/* 左侧 */ |
|
|
|
|
/** 背景色 **/ |
|
|
|
|
.ant-layout-sider{ |
|
|
|
|
.ant-layout-sider { |
|
|
|
|
background: $dark-bg; |
|
|
|
|
} |
|
|
|
|
/** Logo **/ |
|
|
|
|
.logo{ |
|
|
|
|
.logo { |
|
|
|
|
background-image: $dark-logo; /* logo使用亮色的 */ |
|
|
|
|
} |
|
|
|
|
/** 菜单 **/ |
|
|
|
|
.ant-menu{ |
|
|
|
|
.ant-menu { |
|
|
|
|
background: $dark-bg; |
|
|
|
|
color: $dark-text; |
|
|
|
|
} |
|
|
|
|
/* 菜单选中时，或鼠标移到菜单上时的样式 */ |
|
|
|
|
.ant-menu-item:hover, |
|
|
|
|
.ant-menu-submenu .ant-menu-submenu-title:hover, |
|
|
|
|
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{ |
|
|
|
|
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { |
|
|
|
|
background: $dark-bg-highlight; |
|
|
|
|
color: #1890ff; |
|
|
|
|
span{ color: #1890ff; } |
|
|
|
|
span { |
|
|
|
|
color: #1890ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 输入框、下拉框 */ |
|
|
|
|
.ant-input, |
|
|
|
|
.ant-input-number-input, .ant-input-number, |
|
|
|
|
.ant-input-number-input, |
|
|
|
|
.ant-input-number, |
|
|
|
|
.ant-select-selection, |
|
|
|
|
.ant-input-group-addon{ |
|
|
|
|
.ant-input-group-addon { |
|
|
|
|
background: $dark-input; |
|
|
|
|
border-color: #aaa; |
|
|
|
|
color: $dark-text; |
|
|
|
|
&:hover, &:focus{ |
|
|
|
|
&:hover, |
|
|
|
|
&:focus { |
|
|
|
|
border-color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 卡片消息：IP测速 */ |
|
|
|
|
.ant-card{ |
|
|
|
|
.ant-card { |
|
|
|
|
background: $dark-input; |
|
|
|
|
border-color: $dark-input; |
|
|
|
|
.ant-card-head{ |
|
|
|
|
.ant-card-head { |
|
|
|
|
border-bottom-color: #929292; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 标签：未启用 */ |
|
|
|
|
.ant-tag-red{ |
|
|
|
|
.ant-tag-red { |
|
|
|
|
background: #4f4749; |
|
|
|
|
border-color: #4f4749; |
|
|
|
|
color: #bf8285; |
|
|
|
|
} |
|
|
|
|
/* 标签：已启用 */ |
|
|
|
|
.ant-tag-green{ |
|
|
|
|
.ant-tag-green { |
|
|
|
|
background: #505f5f; |
|
|
|
|
border-color: #505f5f; |
|
|
|
|
color: #90cb9f; |
|
|
|
|
} |
|
|
|
|
/* 标签：警告 */ |
|
|
|
|
.ant-tag-orange{ |
|
|
|
|
.ant-tag-orange { |
|
|
|
|
background: #5a5750; |
|
|
|
|
border-color: #5a5750; |
|
|
|
|
color: #cfa572; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 按钮 */ |
|
|
|
|
.ant-btn:not(.ant-btn-danger, .ant-btn-primary){ |
|
|
|
|
.ant-btn:not(.ant-btn-danger, .ant-btn-primary) { |
|
|
|
|
background: $dark-btn; |
|
|
|
|
border-color: $dark-btn; |
|
|
|
|
color: $dark-text; |
|
|
|
|
&:hover{ |
|
|
|
|
&:hover { |
|
|
|
|
opacity: 0.8; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 单选框：开关式 */ |
|
|
|
|
.ant-switch:not(.ant-switch-checked){ |
|
|
|
|
.ant-switch:not(.ant-switch-checked) { |
|
|
|
|
background: $dark-btn; |
|
|
|
|
border-color: $dark-btn; |
|
|
|
|
&:hover{ |
|
|
|
|
&:hover { |
|
|
|
|
opacity: 0.8; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/* 单选框：按钮式 */ |
|
|
|
|
.ant-radio-button-wrapper{ |
|
|
|
|
.ant-radio-button-wrapper { |
|
|
|
|
background: $dark-btn; |
|
|
|
|
border-color: $dark-btn; |
|
|
|
|
color: $dark-text; |
|
|
|
|
&:hover{ |
|
|
|
|
&:hover { |
|
|
|
|
opacity: 0.8; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* JSON编辑器：应用于拦截设置 */ |
|
|
|
|
.jsoneditor-vue{ |
|
|
|
|
.jsoneditor-vue { |
|
|
|
|
/*整个编辑框：背景色和边框*/ |
|
|
|
|
div.jsoneditor{ |
|
|
|
|
div.jsoneditor { |
|
|
|
|
background: $dark-bg-highlight; |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
/* 头部菜单栏：边框 */ |
|
|
|
|
div.jsoneditor-menu{ |
|
|
|
|
div.jsoneditor-menu { |
|
|
|
|
background: $dark-bg-highlight; |
|
|
|
|
border-color: $dark-bg-highlight; |
|
|
|
|
} |
|
|
|
|
/* 内容区域左边：行号 */ |
|
|
|
|
.ace_gutter{ |
|
|
|
|
.ace_gutter { |
|
|
|
|
background: #444; |
|
|
|
|
.ace_gutter-cell { color: #aaa; } |
|
|
|
|
.ace_gutter-cell { |
|
|
|
|
color: #aaa; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/* 内容区域右边：JSON内容 */ |
|
|
|
|
.ace_scroller{ |
|
|
|
|
.ace_scroller { |
|
|
|
|
background: #555; |
|
|
|
|
} |
|
|
|
|
/* key的颜色 */ |
|
|
|
|
.ace_variable, .ace_text-layer{ |
|
|
|
|
.ace_variable, |
|
|
|
|
.ace_text-layer { |
|
|
|
|
color: #eee; |
|
|
|
|
} |
|
|
|
|
/* 字符串值的颜色 */ |
|
|
|
|
.ace_string, .ace_cjk{ |
|
|
|
|
.ace_string, |
|
|
|
|
.ace_cjk { |
|
|
|
|
color: #a6eaa6; |
|
|
|
|
} |
|
|
|
|
.ace_constant{ |
|
|
|
|
.ace_constant { |
|
|
|
|
/* 数字的颜色 */ |
|
|
|
|
&.ace_numeric{ |
|
|
|
|
&.ace_numeric { |
|
|
|
|
color: #ec9999; |
|
|
|
|
} |
|
|
|
|
/* 布尔值的颜色 */ |
|
|
|
|
&.ace_language{ |
|
|
|
|
&.ace_language { |
|
|
|
|
color: #f4c995; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/* 当前行高亮样式 */ |
|
|
|
|
.ace_gutter-active-line, |
|
|
|
|
.ace_marker-layer .ace_active-line{ |
|
|
|
|
.ace_marker-layer .ace_active-line { |
|
|
|
|
background: #838774; |
|
|
|
|
} |
|
|
|
|
/* 选中行高亮样式 */ |
|
|
|
|
@ -213,7 +225,9 @@ $dark-input: #777; //输入框：背景色
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/* 搜索框 */ |
|
|
|
|
.ace_button, button, .ace_search_field { |
|
|
|
|
.ace_button, |
|
|
|
|
button, |
|
|
|
|
.ace_search_field { |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
/* 搜索结果 */ |
|
|
|
|
|
王良
3 days ago