785 lines
17 KiB
SCSS
785 lines
17 KiB
SCSS
@use 'asset/themes/theme' as *;
|
|
|
|
@include themed {
|
|
.ant-app {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ant-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font: 400 14px/22px Roboto;
|
|
vertical-align: top;
|
|
border-radius: 2px;
|
|
box-shadow: none !important;
|
|
|
|
&.ant-btn-lg {
|
|
padding-block: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&.ant-btn-default {
|
|
color: get-color(primary);
|
|
background-color: get-color(neutral1);
|
|
border-color: get-color(primary);
|
|
}
|
|
|
|
&.ant-btn-dashed {
|
|
font-weight: 500;
|
|
color: get-color(primary_text-active);
|
|
background-color: get-color(info_bg);
|
|
border-color: get-color(primary_border);
|
|
}
|
|
|
|
&.ant-btn-primary {
|
|
font-weight: 500;
|
|
color: get-color(text1-inverse);
|
|
background-color: get-color(primary);
|
|
border-color: get-color(primary);
|
|
}
|
|
|
|
&.warning {
|
|
font-weight: 500;
|
|
color: get-color(text1-inverse);
|
|
background-color: get-color(warning);
|
|
border-color: get-color(warning);
|
|
}
|
|
|
|
&.icon-btn {
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
&.ant-btn-sm {
|
|
padding: 0;
|
|
}
|
|
|
|
&.ant-btn-lg {
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-card {
|
|
background-color: get-color(sider_bg2);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px 0 get-color(shadow1);
|
|
|
|
& > .ant-card-head {
|
|
min-height: 48px;
|
|
padding: 14px 16px;
|
|
margin: 0;
|
|
font: 500 16px/20px Roboto;
|
|
color: get-color(text1);
|
|
background-color: get-color(fill1);
|
|
border: none;
|
|
}
|
|
|
|
& > .ant-card-body {
|
|
max-height: calc(100% - 48px);
|
|
padding: 16px;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
.ant-checkbox {
|
|
&::after {
|
|
display: none;
|
|
}
|
|
|
|
& > .ant-checkbox-inner {
|
|
background-color: get-color(neutral1);
|
|
border-color: get-color(neutral5);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&.ant-checkbox-checked:not(.ant-checkbox-disabled) > .ant-checkbox-inner {
|
|
background-color: get-color(primary);
|
|
border-color: get-color(primary);
|
|
|
|
&::after {
|
|
border-color: get-color(neutral1);
|
|
}
|
|
}
|
|
|
|
&.ant-checkbox-indeterminate:not(.ant-checkbox-disabled) > .ant-checkbox-inner {
|
|
&::after {
|
|
background-color: get-color(primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-checkbox-wrapper {
|
|
align-items: center;
|
|
font: 400 14px/22px Roboto;
|
|
color: get-color(text2);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.ant-collapse {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
|
|
& > .ant-collapse-item {
|
|
border: none;
|
|
|
|
& > .ant-collapse-header {
|
|
gap: 8px;
|
|
align-items: center;
|
|
height: 36px;
|
|
padding: 0;
|
|
font: 500 14px/22px Roboto;
|
|
color: get-color(text1);
|
|
border-radius: 2px;
|
|
|
|
& > .ant-collapse-header-text {
|
|
padding-inline: 8px;
|
|
}
|
|
|
|
& > .ant-collapse-expand-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
|
|
& > .ant-collapse-arrow {
|
|
font-size: 24px;
|
|
|
|
&.active {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .ant-collapse-content {
|
|
& > .ant-collapse-content-box {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ant-collapse-borderless > .ant-collapse-item {
|
|
& > .ant-collapse-header {
|
|
background: get-color(neutral3);
|
|
}
|
|
|
|
& + .ant-collapse-item {
|
|
margin-block-start: 24px;
|
|
}
|
|
}
|
|
|
|
&.ant-collapse-ghost > .ant-collapse-item {
|
|
& > .ant-collapse-header {
|
|
background: get-color(fill3);
|
|
}
|
|
|
|
& + .ant-collapse-item {
|
|
margin-block-start: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-divider {
|
|
border-color: get-color(border1);
|
|
|
|
&.ant-divider-vertical {
|
|
height: 1em;
|
|
}
|
|
}
|
|
|
|
.ant-dropdown-menu-root {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background-color: get-color(neutral9);
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 8px 0 get-color(shadow2);
|
|
|
|
& > .ant-dropdown-menu-item {
|
|
padding: 8px 16px;
|
|
font: 400 14px/16px Roboto;
|
|
color: get-color(text1-inverse);
|
|
border-radius: 0;
|
|
|
|
&:hover {
|
|
background-color: get-color(neutral8);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin: 0;
|
|
|
|
& > .ant-empty-image {
|
|
height: 40px;
|
|
margin: 0;
|
|
}
|
|
|
|
& > .ant-empty-description {
|
|
margin: 0;
|
|
font: 400 14px/22px Roboto;
|
|
color: get-color(text4);
|
|
}
|
|
}
|
|
|
|
.ant-flex {
|
|
& > * {
|
|
flex: none;
|
|
}
|
|
}
|
|
|
|
.ant-float-btn {
|
|
height: fit-content;
|
|
overflow: hidden;
|
|
background-color: transparent;
|
|
box-shadow: none !important;
|
|
|
|
&.ant-float-btn-square > .ant-badge > .ant-float-btn-body {
|
|
background-color: get-color(sider_bg2);
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 2px 0 get-color(shadow1);
|
|
|
|
& > .ant-float-btn-content {
|
|
padding: 0;
|
|
|
|
& > .ant-float-btn-icon {
|
|
width: auto;
|
|
height: auto;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover > .ant-badge > .ant-float-btn-body {
|
|
background-color: get-color(fill1);
|
|
}
|
|
}
|
|
|
|
.ant-form {
|
|
& > .ant-form-item {
|
|
margin-block-end: 8px;
|
|
|
|
& > .ant-form-item-row {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.ant-form-item-label {
|
|
font: 400 14px/22px Roboto;
|
|
color: get-color(text1);
|
|
|
|
& > .ant-form-item-required::before {
|
|
color: get-color(error);
|
|
}
|
|
}
|
|
|
|
.ant-form-item-control {
|
|
max-width: 292px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-input {
|
|
color: get-color(text1);
|
|
background-color: get-color(neutral1);
|
|
border-color: get-color(neutral5);
|
|
border-radius: 2px;
|
|
box-shadow: none !important;
|
|
|
|
&.ant-input-status-error {
|
|
border-color: get-color(error) !important;
|
|
outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: get-color(neutral3);
|
|
}
|
|
|
|
&:not(:disabled):focus {
|
|
border-color: get-color(primary);
|
|
outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
|
|
transition: none;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: get-color(text4);
|
|
}
|
|
}
|
|
|
|
.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-borderless) {
|
|
border-radius: 2px;
|
|
box-shadow: none !important;
|
|
|
|
&.ant-input-affix-wrapper-status-error {
|
|
border-color: get-color(error) !important;
|
|
outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
|
|
}
|
|
|
|
&:not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper-focused {
|
|
border-color: get-color(primary);
|
|
outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
|
|
transition: none;
|
|
}
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
|
|
& > .ant-input {
|
|
background-color: transparent;
|
|
outline: none;
|
|
}
|
|
|
|
& > .ant-input-suffix {
|
|
margin-inline-start: 12px;
|
|
font-size: 16px;
|
|
color: get-color(icon);
|
|
}
|
|
|
|
&.search {
|
|
padding-inline-start: 7px;
|
|
background-color: get-color(fill3);
|
|
border-color: get-color(border2);
|
|
|
|
& > .ant-input-suffix {
|
|
color: get-color(icon-disabled);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-input-number {
|
|
width: 100%;
|
|
color: get-color(text1);
|
|
background-color: get-color(neutral1);
|
|
border-color: get-color(neutral5);
|
|
border-radius: 2px;
|
|
box-shadow: none !important;
|
|
|
|
&.ant-input-number-status-error {
|
|
border-color: get-color(error) !important;
|
|
outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
|
|
}
|
|
|
|
&:not(:disabled).ant-input-number-focused {
|
|
border-color: get-color(primary);
|
|
outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.ant-input-number-group-wrapper {
|
|
width: 100%;
|
|
|
|
& > .ant-input-number-wrapper {
|
|
& > .ant-input-number {
|
|
border-radius: 2px 0 0 2px;
|
|
}
|
|
|
|
& > .ant-input-number-group-addon {
|
|
color: get-color(text1);
|
|
background-color: get-color(fill3);
|
|
border-color: get-color(neutral5);
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-layout {
|
|
background-color: get-color(page_bg);
|
|
|
|
& > .ant-layout-header {
|
|
z-index: 10;
|
|
line-height: unset;
|
|
background-color: get-color(sider_bg);
|
|
box-shadow: 0 2px 8px 0 get-color(shadow2);
|
|
}
|
|
|
|
& > .ant-layout-sider {
|
|
z-index: 20;
|
|
background-color: get-color(sider_bg2);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px 0 get-color(shadow1);
|
|
}
|
|
}
|
|
|
|
.ant-list-items {
|
|
& > .ant-list-item {
|
|
padding: 0;
|
|
border-color: get-color(item_bg-hover);
|
|
|
|
& > .ant-list-item-action {
|
|
visibility: hidden;
|
|
|
|
& > li {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: get-color(item_bg-hover);
|
|
|
|
& > .ant-list-item-action {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
background-color: get-color(primary_bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-list.block .ant-list-item {
|
|
gap: 8px;
|
|
padding: 12px;
|
|
background-color: get-color(fill4);
|
|
border: none;
|
|
border-radius: 4px;
|
|
|
|
&:not(:first-child) {
|
|
margin-block-start: 8px;
|
|
}
|
|
}
|
|
|
|
.ant-message-notice-content {
|
|
padding: 0;
|
|
background-color: none;
|
|
box-shadow: none !important;
|
|
|
|
& > .ant-message-error {
|
|
padding: 8px 15px;
|
|
font: 400 14px/22px Roboto;
|
|
color: get-color(text1);
|
|
background-color: get-color(error_bg);
|
|
border: 1px solid get-color(error_border);
|
|
border-radius: 2px;
|
|
|
|
& > .anticon {
|
|
margin-inline-end: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-modal.ant-modal-confirm .ant-modal-content {
|
|
padding: 32px 32px 24px;
|
|
background-color: get-color(popover);
|
|
border-radius: 2px;
|
|
box-shadow: none !important;
|
|
|
|
& > .ant-modal-body > .ant-modal-confirm-body-wrapper {
|
|
& > .ant-modal-confirm-body {
|
|
& > .anticon {
|
|
margin-inline-end: 16px;
|
|
color: get-color(warning);
|
|
}
|
|
|
|
& > .ant-modal-confirm-title {
|
|
font: 500 16px/24px Roboto;
|
|
color: get-color(text1);
|
|
}
|
|
|
|
& > .ant-modal-confirm-content {
|
|
margin: 0 0 0 38px;
|
|
font: 400 14px/22px Roboto;
|
|
color: get-color(text1);
|
|
}
|
|
}
|
|
|
|
& > .ant-modal-confirm-btns {
|
|
margin-block-start: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-modal:not(.ant-modal-confirm) .ant-modal-content {
|
|
padding: 0;
|
|
background-color: get-color(popover);
|
|
border-radius: 2px;
|
|
box-shadow: none !important;
|
|
|
|
& > .ant-modal-close {
|
|
inset: 17px 16px 17px auto;
|
|
width: 1em;
|
|
height: 1em;
|
|
font-size: 16px;
|
|
color: get-color(text3);
|
|
background-color: transparent;
|
|
|
|
& > .ant-modal-close-x {
|
|
width: 1em;
|
|
height: 1em;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
& > .ant-modal-header {
|
|
padding: 14px 16px;
|
|
margin: 0;
|
|
background-color: get-color(bg_layout);
|
|
border-radius: 2px 2px 0 0;
|
|
|
|
& > .ant-modal-title {
|
|
font: 500 16px/22px Roboto;
|
|
color: get-color(text1);
|
|
}
|
|
}
|
|
|
|
& > .ant-modal-body {
|
|
padding: 24px 16px;
|
|
}
|
|
|
|
& > .ant-modal-footer {
|
|
padding: 16px;
|
|
margin: 0;
|
|
border-block-start: 1px solid get-color(border2);
|
|
}
|
|
}
|
|
|
|
.ant-modal-mask {
|
|
background-color: get-color(mask);
|
|
}
|
|
|
|
.ant-select:not(.ant-select-borderless) {
|
|
width: 100%;
|
|
|
|
& > .ant-select-selector {
|
|
color: get-color(text1);
|
|
background-color: get-color(neutral1);
|
|
border-color: get-color(neutral5);
|
|
border-radius: 2px;
|
|
box-shadow: none !important;
|
|
|
|
& > .ant-select-selection-item {
|
|
color: inherit;
|
|
}
|
|
|
|
& > .ant-select-selection-placeholder {
|
|
color: get-color(text4);
|
|
}
|
|
}
|
|
|
|
&.ant-select-disabled > .ant-select-selector {
|
|
color: get-color(text4);
|
|
background-color: get-color(fill3);
|
|
}
|
|
|
|
&.ant-select-status-error > .ant-select-selector {
|
|
border-color: get-color(error) !important;
|
|
outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
|
|
}
|
|
|
|
&:not(.ant-select-disabled):hover > .ant-select-selector {
|
|
border-color: get-color(neutral5);
|
|
}
|
|
|
|
&:not(.ant-select-disabled).ant-select-focused > .ant-select-selector {
|
|
border-color: get-color(primary);
|
|
outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
|
|
transition: none;
|
|
}
|
|
|
|
& > .ant-select-arrow {
|
|
color: get-color(icon-disabled);
|
|
}
|
|
}
|
|
|
|
.ant-select-dropdown {
|
|
padding: 4px 0;
|
|
background-color: get-color(popover);
|
|
border-radius: 2px;
|
|
box-shadow: 0 0 4px 0 get-color(shadow1);
|
|
|
|
.ant-select-item {
|
|
font: 400 14px/22px Roboto;
|
|
color: get-color(text1);
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
|
|
&.ant-select-item-option-selected {
|
|
background-color: get-color(fill1);
|
|
}
|
|
|
|
&:not(.ant-select-item-option-disabled):hover {
|
|
background-color: get-color(item_bg-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-table.ant-table-bordered {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
|
|
& > .ant-table-container {
|
|
border-color: get-color(divider);
|
|
border-radius: 0;
|
|
|
|
& > .ant-table-header {
|
|
border-radius: 0;
|
|
|
|
& > table {
|
|
border-color: get-color(divider);
|
|
border-radius: 0;
|
|
|
|
& > .ant-table-thead > tr > .ant-table-cell {
|
|
padding: 9px 16px 8px;
|
|
font: 500 14px/22px Roboto;
|
|
color: get-color(text3);
|
|
background-color: get-color(neutral3);
|
|
border-color: get-color(divider);
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .ant-table-body {
|
|
& > table {
|
|
& > .ant-table-tbody > .ant-table-row > .ant-table-cell {
|
|
padding: 9px 16px 8px;
|
|
overflow: hidden;
|
|
font: 400 14px/22px Roboto;
|
|
color: get-color(text1);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
background-color: transparent;
|
|
border-color: get-color(divider);
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .ant-table-header > table > .ant-table-thead > tr > .ant-table-cell.ant-table-selection-column,
|
|
& > .ant-table-body > table > .ant-table-tbody > .ant-table-row > .ant-table-cell.ant-table-selection-column {
|
|
padding: 0;
|
|
}
|
|
|
|
& > .ant-table-body > table > .ant-table-tbody > .ant-table-placeholder > .ant-table-cell {
|
|
padding: 8px 0 0;
|
|
background-color: transparent;
|
|
border-color: get-color(divider);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-tabs {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
|
|
& > .ant-tabs-nav {
|
|
margin: 0;
|
|
background-color: get-color(fill1);
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
|
|
& > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
|
|
& > .ant-tabs-tab {
|
|
padding: 14px 32px;
|
|
margin: 0;
|
|
font: 400 16px/20px Roboto;
|
|
color: get-color(text3);
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
|
|
& > .ant-tabs-tab-btn {
|
|
color: inherit;
|
|
text-shadow: none;
|
|
}
|
|
|
|
&.ant-tabs-tab-active {
|
|
font-weight: 600;
|
|
color: get-color(primary);
|
|
background-color: get-color(sider_bg2);
|
|
}
|
|
}
|
|
|
|
& > .ant-tabs-ink-bar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
& > .ant-tabs-nav-operations {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
& > .ant-tabs-content-holder > .ant-tabs-content {
|
|
height: 100%;
|
|
padding: 16px;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
.ant-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3px 5px;
|
|
margin: 0;
|
|
font: 500 14px/22px Roboto;
|
|
color: get-color(text1);
|
|
vertical-align: top;
|
|
background-color: transparent;
|
|
border-color: get-color(border1);
|
|
border-radius: 4px;
|
|
box-shadow: none !important;
|
|
|
|
&.ant-tag-borderless {
|
|
padding: 4px 8px;
|
|
font: 400 14px/16px Roboto;
|
|
color: get-color(text2);
|
|
background-color: get-color(fill3);
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.ant-typography {
|
|
font: 500 16px/22px Roboto;
|
|
color: get-color(text1);
|
|
|
|
&.ant-typography-secondary {
|
|
font: 400 14px/22px Roboto;
|
|
color: get-color(text2);
|
|
}
|
|
|
|
&.ant-typography-disabled {
|
|
font: 400 14px/22px Roboto;
|
|
color: get-color(text4);
|
|
}
|
|
|
|
&.title {
|
|
font: 500 16px/22px SourceHanSansSC;
|
|
}
|
|
|
|
&.card-title {
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
& > strong {
|
|
font: 500 16px/22px Roboto;
|
|
}
|
|
|
|
& > code {
|
|
padding: 0;
|
|
margin: 0;
|
|
font: 400 14px/22px Roboto;
|
|
color: get-color(text3);
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.toolbar {
|
|
padding: 8px;
|
|
background-color: get-color(sider_bg);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px 0 get-color(shadow2);
|
|
}
|
|
}
|