// 颜色 @mars-primary-color: rgba(0, 138, 255, 0.9); @mars-primary-color-half: rgba(0, 138, 255, 0.5); @mars-sub-color: #26ddff; @mars-danger-color: #f75165; @mars-warning-color: #ff8041; @mars-success-color: #18af92; @mars-base-color: #ffffff; @mars-content-color: #cdcdcd; @mars-hover-btn-bg: #3ea6ff; @mars-click-btn-bg: #015dab; @mars-disable-btn-bg: #cdcdcd; @mars-base-border: #ffffff; @mars-select-bg: rgba(0, 138, 255, 0.2); @mars-bg-base: rgba(23, 49, 71, 0.8); @mars-base-border-color: #d9d9d9; @mars-list-active: linear-gradient(90deg, rgba(0, 138, 255, 0) 0%, rgba(0, 138, 255, 0.58) 53%, rgba(0, 138, 255, 0.02) 100%); // 字体 // 提示组件背景 .mars-msg-bg { background-image: url(./assets/images/border-image-base.png); background-size: 100% 100%; } // 提示组件标题样式 .mars-msg-title { background-image: url(./assets/images/msg-title-bg.png); padding: 9px 14px; background-size: 100% 100%; font-size: 18px; color: #0089fe; } // 下拉样式 .mars-drop-bg { background-color: @mars-bg-base !important; background: #173147; box-shadow: 0px 4px 15px 1px rgba(2, 33, 59, 0.7); border-radius: 0px; background-image: url(./assets/images/selet-dropdown-border.png); background-repeat: no-repeat; background-size: 100% 100%; } .mars-main-view { color: @mars-base-color; // collapse 折叠面板相关样式 .ant-collapse, .ant-collapse-item, .ant-collapse-content { background: none !important; border: none; } .ant-collapse-content-box { padding: 5px 5px 10px 5px; } .ant-collapse-header { background-image: url(./assets/images/tab-title.png); margin-bottom: 10px; background-size: 100% 100%; background-repeat: no-repeat; font-size: 16px; padding: 5px 15px !important; color: #fff !important; } .ant-collapse-content { color: @mars-base-color !important; } .ant-collapse-extra { .mars-icon { font-size: 16px; line-height: 16px; vertical-align: middle; } } // 切换按钮 .ant-radio-button-wrapper { background: rgba(32, 160, 255, 0.2); color: @mars-base-color; box-shadow: none !important; } // 选中按钮 .ant-radio-button-checked { background-color: #1890ff; } // 表单元素 .ant-form { color: rgba(255, 255, 255, 0.925); .ant-form-item-extra { color: @mars-base-color; } } .ant-form-item { margin-bottom: 10px !important; color: @mars-base-color; .ant-form-item-label > label { color: @mars-base-color; } } .ant-form-item:nth-last-child(1) { margin-bottom: 0 !important; } /* 卡片 */ .mars-ant-card { background: none; border: 1px solid @mars-base-color; color: @mars-base-color; .ant-card-head { border-color: @mars-base-color; min-height: auto; padding: 0 10px; color: white; .ant-card-head-title { padding: 8px 0; } } .ant-card-body { padding: 10px; } } // 文件选择 .ant-upload { color: @mars-base-color; } // 多选 .ant-checkbox-wrapper { color: @mars-base-color; .ant-checkbox-inner { background-color: @mars-bg-base; border-color: @mars-base-border-color; } .ant-checkbox-checked { background: @mars-primary-color; .ant-checkbox-inner { background-color: @mars-primary-color; border-color: @mars-primary-color; } } } // 单选 .ant-radio-wrapper { color: @mars-base-color; .ant-radio-inner { background-color: @mars-bg-base; border-color: @mars-base-border-color; box-shadow: none !important; outline: none !important; } .ant-radio-checked { .ant-radio-inner { border-color: @mars-primary-color; } } .ant-radio-input { box-shadow: none !important; outline: none !important; } } // 表格 .ant-table, .ant-table-thead > tr > th { color: @mars-base-color; background: none !important; } .ant-table-sticky-holder { background: none; } .ant-table-row:nth-of-type(even) { background-color: @mars-bg-base; } .ant-table .ant-table-thead { background-color: @mars-select-bg; } .ant-table-tbody > tr.ant-table-placeholder > td { background: #141414; } .ant-table-row:hover > td, .ant-table-row-selected > td { background-color: transparent !important; } .ant-table-cell { border: none !important; background: transparent !important; } .ant-table-container { border: 1px solid @mars-primary-color !important; background: transparent !important; } .ant-table-placeholder > td { background: @mars-bg-base !important; } .ant-table-row:nth-last-child(1) .ant-table-cell { border-bottom: none; } .ant-cascader-dropdown { padding: 0 !important; .mars-drop-bg(); .ant-cascader-menu-item { &:hover { background: @mars-list-active; } } .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) { background: @mars-list-active; } .ant-cascader-menu-item-expand-icon { color: @mars-base-color; } } // 标签页的标签文字颜色 .ant-tabs-tab { color: @mars-base-color; } // 分页 .ant-pagination { * { color: @mars-base-color !important; } .ant-pagination-item, .ant-pagination-prev, .ant-pagination-next { background: none; background-color: transparent !important; } .ant-pagination-simple-pager { input { background: none; background-color: transparent !important; } } .ant-select { color: @mars-base-color; background-color: transparent !important; background: none; .ant-select-selector { border-color: @mars-base-border-color !important; background: none; background-color: transparent !important; &:hover, &:focus { border-color: #4db3ff !important; } } .ant-select-arrow { color: @mars-base-color !important; } } .ant-select-dropdown { background-color: red; padding: 0 !important; .mars-drop-bg(); .ant-select-item-option-active:not(.ant-select-item-option-disabled) { background: @mars-list-active; } .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { font-weight: 700; background: @mars-list-active; } .ant-select-item { transition: none; color: @mars-base-color !important; text-align: center; } } } // 列表 .ant-list-items { * { color: @mars-base-color; } .ant-list-item { border-bottom: 1px solid #303030; } .ant-list-item-meta-description { color: hsla(0, 0%, 100%, 0.45); } } // 分割线 .ant-divider-vertical { border-color: @mars-base-color; } //table表格滚动条 .ant-table-body { &::-webkit-scrollbar { //整体样式 height: 0; width: 0; } } } .mars-cascader-dropdown { padding: 0 !important; background-color: @mars-select-bg !important; .mars-drop-bg(); .ant-cascader-menu-item { &:hover { background: @mars-list-active; } } .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) { background: @mars-list-active; } .ant-cascader-menu-item-expand-icon { color: @mars-base-color; } } // 滚动条 ::-webkit-scrollbar-button { height: 0; width: 0; display: none; } ::-webkit-scrollbar-track { background: #173147; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border: 0; } ::-webkit-scrollbar { height: 10px; width: 4px; background: #134875; border-radius: 4px; } ::-webkit-scrollbar-thumb { padding-top: 100px; background-color: #134875; min-height: 28px; border-radius: 4px; background-clip: padding-box; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border: 0; } ::-webkit-scrollbar-thumb:hover { -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.4); } ::-webkit-scrollbar-thumb:active { -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35); background-color: rgba(0, 0, 0, 0.5); }