7x31
/
cmdb
mirror of https://github.com/veops/cmdb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style:update global.less (#426)

This commit is contained in:
dagongren 2024-03-19 10:01:38 +08:00 committed by GitHub
parent c0fe99b8c7
commit 2a8f1ab9a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 85 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
cmdb-ui/src/style/global.less
View File

@ -32,10 +32,25 @@ body {
&.userLayout { &.userLayout {
overflow: auto; overflow: auto;
} }
.text-color-1 {
color: @text-color_1;
}
.text-color-2 {
color: @text-color_2;
}
.text-color-3 {
color: @text-color_3;
}
.text-color-4 {
color: @text-color_4;
}
.border-radius-box {
border-radius: @border-radius-box;
}
} }
.ant-layout { .ant-layout {
background-color: #custom_colors() [color_2]; background-color: #f7f8fa;
} }
.layout.ant-layout { .layout.ant-layout {
@ -352,19 +367,8 @@ body {
} }
// 内容区 // 内容区
// .layout-content {
// margin: 24px 24px 0px;
// height: 100%;
// height: 64px;
// padding: 0 12px 0 0;
// }
.ant-layout-content { .ant-layout-content {
padding: 0 24px; padding: 0 24px;
// background: @layout-background-color-light;
//按钮样式
.ant-btn {
// border-radius: 2px;
}
} }
// footer // footer
@ -504,12 +508,7 @@ body {
transition: none; transition: none;
} }
.ops-side-bar.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { .ops-side-bar.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
// background-image: url('../assets/sidebar_selected.png') !important;
// background-repeat: no-repeat !important;
background: @layout-sidebar-selected-color; background: @layout-sidebar-selected-color;
// background-size: 228px 38px;
// background-position-x: -10px;
// background-position-y: center;
transition: none; transition: none;
} }
.ops-side-bar.ant-menu .ant-menu-submenu .ant-menu-item.ant-menu-item-selected { .ops-side-bar.ant-menu .ant-menu-submenu .ant-menu-item.ant-menu-item-selected {
@ -518,24 +517,16 @@ body {
@keyframes wordsLoop { @keyframes wordsLoop {
0% { 0% {
// transform: translateX(100%);
// -webkit-transform: translateX(100%);
margin-left: 0; margin-left: 0;
} }
100% { 100% {
// transform: translateX(-100%);
// -webkit-transform: translateX(-100%);
margin-left: -300%; margin-left: -300%;
} }
} }
.ops-side-bar.ant-menu-light { .ops-side-bar.ant-menu-light {
border-right-color: transparent; border-right-color: transparent;
// background: @layout-background-light-color;
// background: url('../assets/sidebar_background.png');
background: @layout-sidebar-color; background: @layout-sidebar-color;
// background-position-x: center;
// background-position-y: center;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: cover; background-size: cover;
.ant-menu-inline.ant-menu-sub { .ant-menu-inline.ant-menu-sub {
@ -543,14 +534,12 @@ body {
} }
.ant-menu-submenu-content .ant-menu-item, .ant-menu-submenu-content .ant-menu-item,
.ant-menu-item { .ant-menu-item {
// margin: 0;
> a { > a {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: @layout-sidebar-font-color; color: @layout-sidebar-font-color;
} }
&:hover { &:hover {
// background: #0000000a;
.scroll { .scroll {
animation: 5s wordsLoop linear infinite normal; animation: 5s wordsLoop linear infinite normal;
} }
@ -828,13 +817,13 @@ body {
.el-button.is-plain:hover, .el-button.is-plain:hover,
.el-input.is-active .el-input__inner, .el-input.is-active .el-input__inner,
.el-input__inner:focus { .el-input__inner:focus {
border-color: #custom_colors() [color_1] !important; border-color: @primary-color !important;
} }
.el-button--text, .el-button--text,
.el-select-dropdown__item.selected, .el-select-dropdown__item.selected,
.el-button.is-plain:focus, .el-button.is-plain:focus,
.el-button.is-plain:hover { .el-button.is-plain:hover {
color: #custom_colors() [color_1] !important; color: @primary-color !important;
} }
.ant-tabs-nav .ant-tabs-tab { .ant-tabs-nav .ant-tabs-tab {
@ -863,7 +852,7 @@ body {
.ant-layout-sider { .ant-layout-sider {
box-shadow: none; box-shadow: none;
.ant-layout-sider-children { .ant-layout-sider-children {
background: #custom_colors[color_2]; background: @primary-color_5;
.ant-menu { .ant-menu {
display: none; display: none;
} }
@ -894,7 +883,7 @@ body {
} }
} }
.custom-vue-treeselect__control(@bgColor:#custom_colors()[color_2],@border:none) { .custom-vue-treeselect__control(@bgColor:@primary-color_5,@border:none) {
background-color: @bgColor; background-color: @bgColor;
border: @border; border: @border;
} }
@ -913,6 +902,9 @@ body {
border: none; border: none;
box-shadow: 0px 4px 6px rgba(78, 94, 160, 0.25) !important; box-shadow: 0px 4px 6px rgba(78, 94, 160, 0.25) !important;
} }
.vue-treeselect__limit-tip-text {
margin: 0;
}
} }
// 自定义背景颜色和border // 自定义背景颜色和border
@ -934,30 +926,30 @@ body {
} }
.vue-treeselect__option--highlight, .vue-treeselect__option--highlight,
.vue-treeselect__option--selected { .vue-treeselect__option--selected {
color: #custom_colors[color_1]; color: @primary-color;
background-color: #custom_colors() [color_2] !important; background-color: @primary-color_5 !important;
} }
.vue-treeselect__checkbox--checked, .vue-treeselect__checkbox--checked,
.vue-treeselect__checkbox--indeterminate { .vue-treeselect__checkbox--indeterminate {
border-color: #custom_colors() [color_1] !important; border-color: @primary-color !important;
background: #custom_colors() [color_1] !important; background: @primary-color !important;
} }
.vue-treeselect__label-container:hover { .vue-treeselect__label-container:hover {
.vue-treeselect__checkbox--checked, .vue-treeselect__checkbox--checked,
.vue-treeselect__checkbox--indeterminate { .vue-treeselect__checkbox--indeterminate {
border-color: #custom_colors() [color_1] !important; border-color: @primary-color !important;
background: #custom_colors() [color_1] !important; background: @primary-color !important;
} }
} }
.vue-treeselect__multi-value-item { .vue-treeselect__multi-value-item {
background: #custom_colors() [color_2] !important; background: @primary-color_5 !important;
color: #custom_colors() [color_1] !important; color: @primary-color !important;
} }
.vue-treeselect__value-remove { .vue-treeselect__value-remove {
color: #custom_colors() [color_1] !important; color: @primary-color !important;
} }
.vue-treeselect__label-container:hover .vue-treeselect__checkbox--unchecked { .vue-treeselect__label-container:hover .vue-treeselect__checkbox--unchecked {
border-color: #custom_colors() [color_1] !important; border-color: @primary-color !important;
} }
//表格样式 //表格样式
@ -967,7 +959,7 @@ body {
border: none !important; border: none !important;
} }
.vxe-table--header-wrapper { .vxe-table--header-wrapper {
background-color: #custom_colors() [color_2] !important; background-color: @primary-color_5 !important;
} }
.vxe-header--row .vxe-header--column:hover { .vxe-header--row .vxe-header--column:hover {
background: #2f54eb1f !important; background: #2f54eb1f !important;
@ -991,7 +983,7 @@ body {
border: none !important; border: none !important;
} }
.vxe-table--header-wrapper { .vxe-table--header-wrapper {
background-color: #custom_colors() [color_2] !important; background-color: @primary-color_5 !important;
} }
// .vxe-table--header-wrapper.body--wrapper { // .vxe-table--header-wrapper.body--wrapper {
// border-radius: 8px !important; // border-radius: 8px !important;
@ -1025,12 +1017,12 @@ body {
.ops-input { .ops-input {
.ant-input, .ant-input,
.ant-time-picker-input { .ant-time-picker-input {
background-color: #custom_colors[color_2]; background-color: @primary-color_5;
border: none; border: none;
} }
} }
.ops-input.ant-input { .ops-input.ant-input {
background-color: #custom_colors[color_2]; background-color: @primary-color_5;
border: none; border: none;
} }
.ops-input.ant-input[disabled] { .ops-input.ant-input[disabled] {
@ -1101,7 +1093,7 @@ body {
.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):focus, .vxe-pager .vxe-pager--prev-btn:not(.is--disabled):focus,
.vxe-button.type--text:not(.is--disabled):hover, .vxe-button.type--text:not(.is--disabled):hover,
.vxe-table--filter-footer > button:hover { .vxe-table--filter-footer > button:hover {
color: #custom_colors() [color_1] !important; color: @primary-color !important;
} }
.vxe-cell .vxe-default-input:focus, .vxe-cell .vxe-default-input:focus,
@ -1112,13 +1104,13 @@ body {
.vxe-table--filter-wrapper .vxe-default-textarea:focus, .vxe-table--filter-wrapper .vxe-default-textarea:focus,
.vxe-select.is--active:not(.is--filter) > .vxe-input .vxe-input--inner, .vxe-select.is--active:not(.is--filter) > .vxe-input .vxe-input--inner,
.vxe-input:not(.is--disabled).is--active .vxe-input--inner { .vxe-input:not(.is--disabled).is--active .vxe-input--inner {
border-color: #custom_colors() [color_1] !important; border-color: @primary-color !important;
} }
//批量操作 //批量操作
.ops-list-batch-action { .ops-list-batch-action {
display: inline-block; display: inline-block;
background-color: #custom_colors[color_2]; background-color: @primary-color_5;
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.55); color: rgba(0, 0, 0, 0.55);
> span { > span {
@ -1126,11 +1118,11 @@ body {
padding: 4px 8px; padding: 4px 8px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #custom_colors[color_1]; color: @primary-color;
} }
} }
> span:last-child { > span:last-child {
color: #custom_colors[color_1]; color: @primary-color;
cursor: default; cursor: default;
} }
} }
@ -1139,17 +1131,17 @@ body {
.ops-tab.ant-tabs.ant-tabs-card { .ops-tab.ant-tabs.ant-tabs-card {
.ant-tabs-card-bar { .ant-tabs-card-bar {
margin: 0; margin: 0;
border-bottom: none;
.ant-tabs-nav-container { .ant-tabs-nav-container {
background-color: #fff;
.ant-tabs-tab { .ant-tabs-tab {
border: none; border: none;
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
background: rgba(255, 255, 255, 0.5); background: @primary-color_6;
margin-right: 5px; margin-right: 5px;
} }
.ant-tabs-tab-active { .ant-tabs-tab-active {
background: #custom_colors[color_2]; background: #fff;
} }
} }
} }
@ -1157,9 +1149,10 @@ body {
//button //button
.ops-button-primary { .ops-button-primary {
background-color: #custom_colors[color_2]; background-color: @primary-color_4;
border-color: #custom_colors[color_2]; border-color: @primary-color_4;
color: #custom_colors[color_1]; color: @primary-color;
box-shadow: none;
} }
//select //select
@ -1181,8 +1174,8 @@ body {
} }
} }
.ant-select-selection { .ant-select-selection {
background-color: #custom_colors[color_2]; background-color: @primary-color_5;
border-color: #custom_colors[color_2]; border-color: @primary-color_5;
} }
} }
@ -1190,8 +1183,8 @@ body {
.ops-dropdown { .ops-dropdown {
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover { .ant-dropdown-menu-submenu-title:hover {
background-color: #custom_colors[color_2]; background-color: @primary-color_5;
color: #custom_colors[color_1]; color: @primary-color;
} }
} }
@ -1203,7 +1196,7 @@ body {
border-bottom: none; border-bottom: none;
.ant-modal-title { .ant-modal-title {
padding-left: 10px; padding-left: 10px;
border-left: 4px solid #custom_colors[color_1]; border-left: 4px solid @primary-color;
} }
} }
.ant-modal-footer { .ant-modal-footer {
@ -1216,7 +1209,7 @@ body {
width: 276px; width: 276px;
} }
.ant-tooltip-inner { .ant-tooltip-inner {
background-color: #custom_colors[color_3]; background-color: @primary-color_3;
border-radius: '4px'; border-radius: '4px';
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -1231,7 +1224,7 @@ body {
.ant-tooltip-arrow::before { .ant-tooltip-arrow::before {
width: 7px; width: 7px;
height: 7px; height: 7px;
background-color: #custom_colors[color_3]; background-color: @primary-color_3;
} }
} }
@ -1241,7 +1234,7 @@ body {
.el-tabs__header { .el-tabs__header {
border-bottom: none; border-bottom: none;
background-color: #custom_colors[color_2]; background-color: @primary-color_5;
border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px;
} }
@ -1252,7 +1245,7 @@ body {
.el-tabs__header .el-tabs__item.is-active { .el-tabs__header .el-tabs__item.is-active {
background-color: white; background-color: white;
color: #custom_colors[color_1]; color: @primary-color;
} }
.el-tabs__header .el-tabs__item:first-child.is-active { .el-tabs__header .el-tabs__item:first-child.is-active {
border-top-left-radius: 8px; border-top-left-radius: 8px;
@ -1263,12 +1256,12 @@ body {
} }
.el-radio__input.is-checked .el-radio__inner { .el-radio__input.is-checked .el-radio__inner {
background-color: #custom_colors[color_1]; background-color: @primary-color;
border-color: #custom_colors[color_1]; border-color: @primary-color;
} }
.el-radio__input.is-checked + .el-radio__label { .el-radio__input.is-checked + .el-radio__label {
color: #custom_colors[color_1]; color: @primary-color;
} }
.el-tab-pane { .el-tab-pane {
@ -1306,14 +1299,14 @@ body {
// a-drop-down // a-drop-down
.ant-dropdown-menu-item-active { .ant-dropdown-menu-item-active {
color: #custom_colors[color_1]; color: @primary-color;
} }
.ant-tag { .ant-tag {
&.ops-perm-tag { &.ops-perm-tag {
border: none; border: none;
background-color: #custom_colors[color_2]; background-color: @primary-color_5;
color: #custom_colors[color_1]; color: @primary-color;
} }
} }
@ -1332,7 +1325,7 @@ body {
border: none; border: none;
} }
div.jsoneditor-menu { div.jsoneditor-menu {
border-bottom-color: #custom_colors[color_1]; border-bottom-color: @primary-color;
} }
} }
// .ant-menu.ant-menu-light { // .ant-menu.ant-menu-light {

25
cmdb-ui/src/style/static.less
View File

@ -1,5 +1,20 @@
@border-radius-base: 2px; // 组件/浮层圆角 @border-radius-base: 2px; // 组件/浮层圆角
@primary-color: #2f54eb; // 全局主色 @border-radius-box: 4px; // big box radius
@primary-color: #2f54eb; // 全局主色 六大品牌色
@primary-color_2: #7f97fa;
@primary-color_3: #d3e3fd;
@primary-color_4: #e1efff;
@primary-color_5: #f0f5ff;
@primary-color_6: #f9fbff;
@text-color_1: #1d2119;
@text-color_2: #4e5969;
@text-color_3: #86909c;
@text-color_4: #a5a9bc;
@border-color: #e4e7ed;
@scrollbar-color: rgba(47, 122, 235, 0.2); @scrollbar-color: rgba(47, 122, 235, 0.2);
@layout-header-background: #fff; @layout-header-background: #fff;
@ -28,7 +43,7 @@
color_3: #d2e2ff; color_3: #d2e2ff;
} }
.ops_display_wrapper(@backgroundColor:#custom_colors()[color_2]) { .ops_display_wrapper(@backgroundColor:@primary-color_5) {
cursor: pointer; cursor: pointer;
padding: 5px 8px; padding: 5px 8px;
background-color: @backgroundColor; background-color: @backgroundColor;
@ -42,10 +57,10 @@
cursor: pointer; cursor: pointer;
padding: 5px 10px; padding: 5px 10px;
&:hover { &:hover {
background-color: #custom_colors[color_2]; background-color: @primary-color_5;
} }
} }
.ops_popover_item_selected() { .ops_popover_item_selected() {
background-color: #custom_colors[color_2]; background-color: @primary-color_5;
color: #custom_colors[color_1]; color: @primary-color;
} }