1006 lines
21 KiB
CSS
1006 lines
21 KiB
CSS
.page {
|
|
width: 100%;
|
|
height: calc(100vh - 60px);
|
|
padding: 16px;
|
|
gap: 12px;
|
|
background: #f7f8fa;
|
|
}
|
|
|
|
.panel {
|
|
border-color: #e5e6eb;
|
|
border-radius: 4px;
|
|
background: #ffffff;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.pageIntro {
|
|
gap: 4px;
|
|
}
|
|
|
|
.breadcrumb {
|
|
color: #86909c;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.breadcrumbLink {
|
|
border: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: #86909c;
|
|
font: inherit;
|
|
line-height: inherit;
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.breadcrumbLink:hover {
|
|
color: #1874ff;
|
|
}
|
|
|
|
.breadcrumbCurrent {
|
|
color: #4e5969;
|
|
}
|
|
|
|
.modalContent {
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.modalHeader {
|
|
padding: 16px 20px 0;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.modalTitle {
|
|
color: #1d2129;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.modalBody {
|
|
padding: 16px 20px 20px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.modalContent :global(.mantine-Button-root) {
|
|
min-height: 32px;
|
|
border-radius: 4px;
|
|
padding-inline: 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
box-shadow: none;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
border-color 0.2s ease,
|
|
color 0.2s ease;
|
|
}
|
|
|
|
.modalContent :global(.mantine-Button-root[data-variant="filled"]) {
|
|
--button-bg: #1874ff;
|
|
--button-hover: #0f6ae8;
|
|
--button-color: #ffffff;
|
|
--button-bd: transparent;
|
|
background: #1874ff !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.modalContent :global(.mantine-Button-root[data-variant="filled"]:hover) {
|
|
background: #0f6ae8 !important;
|
|
}
|
|
|
|
.modalContent :global(.mantine-Button-root[data-variant="default"]) {
|
|
border-color: #e5e6eb;
|
|
background: #ffffff;
|
|
color: #4e5969;
|
|
}
|
|
|
|
.modalContent :global(.mantine-Button-root[data-disabled]),
|
|
.modalContent :global(.mantine-Button-root:disabled) {
|
|
border-color: #e5e6eb !important;
|
|
background: #f2f3f5 !important;
|
|
color: #c9cdd4 !important;
|
|
cursor: not-allowed;
|
|
opacity: 1;
|
|
}
|
|
|
|
.modalContent :global(.mantine-Button-root[data-disabled]:hover),
|
|
.modalContent :global(.mantine-Button-root:disabled:hover) {
|
|
border-color: #e5e6eb !important;
|
|
background: #f2f3f5 !important;
|
|
color: #c9cdd4 !important;
|
|
}
|
|
|
|
.modalForm {
|
|
gap: 12px;
|
|
}
|
|
|
|
.modalMetaText {
|
|
color: #4e5969;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.modalActions {
|
|
gap: 12px;
|
|
}
|
|
|
|
.modalForm :global(.mantine-InputWrapper-label) {
|
|
color: #4e5969;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Switch-label),
|
|
.modalForm :global(.mantine-Checkbox-label) {
|
|
color: #4e5969;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Input-input),
|
|
.modalForm :global(.mantine-Select-input),
|
|
.modalForm :global(.mantine-DateInput-input),
|
|
.modalForm :global(.mantine-NumberInput-input),
|
|
.modalForm :global(.mantine-PillsInput-root),
|
|
.modalForm :global(.mantine-Textarea-input) {
|
|
min-height: 32px;
|
|
border-color: #e5e6eb;
|
|
border-radius: 4px;
|
|
background: #f7f8fa;
|
|
color: #1d2129;
|
|
font-size: 14px;
|
|
box-shadow: none;
|
|
transition:
|
|
border-color 0.2s ease,
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.modalForm :global(.mantine-PillsInput-root) {
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
.modalForm :global(.mantine-PillsInput-input) {
|
|
min-height: 30px;
|
|
background: transparent;
|
|
color: #1d2129;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Textarea-input) {
|
|
min-height: 96px;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Input-input::placeholder),
|
|
.modalForm :global(.mantine-Select-input::placeholder),
|
|
.modalForm :global(.mantine-DateInput-input::placeholder),
|
|
.modalForm :global(.mantine-NumberInput-input::placeholder),
|
|
.modalForm :global(.mantine-PillsInput-input::placeholder),
|
|
.modalForm :global(.mantine-Textarea-input::placeholder) {
|
|
color: #86909c;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Input-input:focus),
|
|
.modalForm :global(.mantine-Select-input:focus),
|
|
.modalForm :global(.mantine-DateInput-input:focus),
|
|
.modalForm :global(.mantine-NumberInput-input:focus),
|
|
.modalForm :global(.mantine-PillsInput-root:focus-within),
|
|
.modalForm :global(.mantine-Textarea-input:focus) {
|
|
border-color: #1874ff;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
|
|
}
|
|
|
|
.modalForm :global(.mantine-Input-input[readonly]),
|
|
.modalForm :global(.mantine-DateInput-input[readonly]),
|
|
.modalForm :global(.mantine-NumberInput-input[readonly]),
|
|
.modalForm :global(.mantine-Textarea-input[readonly]) {
|
|
background: #f7f8fa;
|
|
color: #86909c;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Input-section),
|
|
.modalForm :global(.mantine-Select-section),
|
|
.modalForm :global(.mantine-DateInput-section),
|
|
.modalForm :global(.mantine-NumberInput-section) {
|
|
color: #86909c;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Switch-root) {
|
|
--switch-height: 20px;
|
|
--switch-width: 34px;
|
|
--switch-thumb-size: 14px;
|
|
--switch-radius: 999px;
|
|
--switch-color: #1874ff;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Checkbox-root) {
|
|
--checkbox-color: #1874ff;
|
|
--checkbox-radius: 4px;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Checkbox-input) {
|
|
border-color: #c9cdd4;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Button-root) {
|
|
min-height: 32px;
|
|
border-radius: 4px;
|
|
padding-inline: 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
box-shadow: none;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
border-color 0.2s ease,
|
|
color 0.2s ease;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Button-root[data-variant="filled"]) {
|
|
--button-bg: #1874ff;
|
|
--button-hover: #0f6ae8;
|
|
--button-color: #ffffff;
|
|
--button-bd: transparent;
|
|
background: #1874ff !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Button-root[data-variant="filled"]:hover) {
|
|
background: #0f6ae8 !important;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Button-root[data-variant="default"]) {
|
|
border-color: #e5e6eb;
|
|
background: #ffffff;
|
|
color: #4e5969;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Button-root[data-disabled]),
|
|
.modalForm :global(.mantine-Button-root:disabled) {
|
|
border-color: #e5e6eb !important;
|
|
background: #f2f3f5 !important;
|
|
color: #c9cdd4 !important;
|
|
cursor: not-allowed;
|
|
opacity: 1;
|
|
}
|
|
|
|
.modalForm :global(.mantine-Button-root[data-disabled]:hover),
|
|
.modalForm :global(.mantine-Button-root:disabled:hover) {
|
|
border-color: #e5e6eb !important;
|
|
background: #f2f3f5 !important;
|
|
color: #c9cdd4 !important;
|
|
}
|
|
|
|
.filterPanel {
|
|
position: relative;
|
|
}
|
|
|
|
.detailContent {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.detailForm {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.detailIntroGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px 20px;
|
|
}
|
|
|
|
.detailSection {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.detailActionBar {
|
|
padding-top: 12px;
|
|
border-top: 1px solid #e5e6eb;
|
|
}
|
|
|
|
.detailScrollArea {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.readValue {
|
|
min-height: 32px;
|
|
border-color: #e5e6eb;
|
|
border-radius: 4px;
|
|
background: #f7f8fa;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.readValueText {
|
|
width: 100%;
|
|
color: #1d2129;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.detailForm :global(.mantine-InputWrapper-label) {
|
|
color: #4e5969;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Input-input),
|
|
.detailForm :global(.mantine-Select-input),
|
|
.detailForm :global(.mantine-ColorInput-input),
|
|
.detailForm :global(.mantine-NumberInput-input),
|
|
.detailForm :global(.mantine-PillsInput-root),
|
|
.detailForm :global(.mantine-Textarea-input) {
|
|
min-height: 32px;
|
|
border-color: #e5e6eb;
|
|
border-radius: 4px;
|
|
background: #f7f8fa;
|
|
color: #1d2129;
|
|
font-size: 14px;
|
|
box-shadow: none;
|
|
transition:
|
|
border-color 0.2s ease,
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.detailForm :global(.mantine-PillsInput-root) {
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
.detailForm :global(.mantine-PillsInput-input) {
|
|
min-height: 30px;
|
|
background: transparent;
|
|
color: #1d2129;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Textarea-input) {
|
|
min-height: 96px;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Input-input::placeholder),
|
|
.detailForm :global(.mantine-Select-input::placeholder),
|
|
.detailForm :global(.mantine-ColorInput-input::placeholder),
|
|
.detailForm :global(.mantine-NumberInput-input::placeholder),
|
|
.detailForm :global(.mantine-PillsInput-input::placeholder),
|
|
.detailForm :global(.mantine-Textarea-input::placeholder) {
|
|
color: #86909c;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Input-input:focus),
|
|
.detailForm :global(.mantine-Select-input:focus),
|
|
.detailForm :global(.mantine-ColorInput-input:focus),
|
|
.detailForm :global(.mantine-NumberInput-input:focus),
|
|
.detailForm :global(.mantine-PillsInput-root:focus-within),
|
|
.detailForm :global(.mantine-Textarea-input:focus) {
|
|
border-color: #1874ff;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
|
|
}
|
|
|
|
.detailForm :global(.mantine-Input-input[readonly]),
|
|
.detailForm :global(.mantine-ColorInput-input[readonly]),
|
|
.detailForm :global(.mantine-NumberInput-input[readonly]),
|
|
.detailForm :global(.mantine-Textarea-input[readonly]) {
|
|
background: #f7f8fa;
|
|
color: #86909c;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Input-section),
|
|
.detailForm :global(.mantine-Select-section),
|
|
.detailForm :global(.mantine-ColorInput-section),
|
|
.detailForm :global(.mantine-NumberInput-section) {
|
|
color: #86909c;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Pill-root) {
|
|
background: #e7efff;
|
|
color: #1874ff;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Button-root) {
|
|
min-height: 32px;
|
|
border-radius: 4px;
|
|
padding-inline: 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
box-shadow: none;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
border-color 0.2s ease,
|
|
color 0.2s ease;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Button-root[data-variant="filled"]) {
|
|
--button-bg: #1874ff;
|
|
--button-hover: #0f6ae8;
|
|
--button-color: #ffffff;
|
|
--button-bd: transparent;
|
|
background: #1874ff !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Button-root[data-variant="filled"]:hover) {
|
|
background: #0f6ae8 !important;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Button-root[data-variant="default"]),
|
|
.detailForm :global(.mantine-Button-root[data-variant="light"]) {
|
|
border-color: #e5e6eb;
|
|
background: #ffffff;
|
|
color: #4e5969;
|
|
}
|
|
|
|
.detailForm :global(.mantine-ActionIcon-root) {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 4px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Table-table) {
|
|
border-color: #e5e6eb;
|
|
background: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Table-th) {
|
|
background: #f7f8fa;
|
|
color: #4e5969;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Table-th),
|
|
.detailForm :global(.mantine-Table-td) {
|
|
border-color: #e5e6eb;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.detailForm :global(.mantine-Table-td) {
|
|
color: #1d2129;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.tableViewport {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.filterStack {
|
|
gap: 12px;
|
|
}
|
|
|
|
.filterTopRow {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.filterExpandedGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px 20px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #e5e6eb;
|
|
}
|
|
|
|
.filterField {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.filterLabel {
|
|
flex: 0 0 var(--setting-inline-filter-label-width, 80px);
|
|
color: #4e5969;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.filterControl {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.filterControl :global(.mantine-InputWrapper-root),
|
|
.filterControl :global(.mantine-PillsInput-root) {
|
|
width: 100%;
|
|
}
|
|
|
|
.filterControl :global(.mantine-InputWrapper-label) {
|
|
display: none;
|
|
}
|
|
|
|
.filterActionsAlignEnd {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-self: end;
|
|
grid-column: -2 / -1;
|
|
}
|
|
|
|
.collapseToggle {
|
|
min-width: auto;
|
|
padding-inline: 0;
|
|
align-self: center;
|
|
justify-self: start;
|
|
}
|
|
|
|
.operationGroup {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.operationLink {
|
|
border: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: #1874ff;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
transition:
|
|
color 0.2s ease,
|
|
opacity 0.2s ease;
|
|
}
|
|
|
|
.operationLinkDanger {
|
|
color: #f53f3f;
|
|
}
|
|
|
|
.operationLinkDisabled {
|
|
color: #c9cdd4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.operationDivider {
|
|
width: 1px;
|
|
height: 12px;
|
|
background: #e5e6eb;
|
|
}
|
|
|
|
.statusBadge {
|
|
min-height: 24px;
|
|
padding: 0 10px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.statusPositive {
|
|
background: #e8ffea;
|
|
color: #00b42a;
|
|
}
|
|
|
|
.statusNegative {
|
|
background: #ffece8;
|
|
color: #f53f3f;
|
|
}
|
|
|
|
.statusWarning {
|
|
background: #fff7e8;
|
|
color: #ff7d00;
|
|
}
|
|
|
|
.statusInfo {
|
|
background: #e8f3ff;
|
|
color: #1874ff;
|
|
}
|
|
|
|
.statusNeutral {
|
|
background: #f2f3f5;
|
|
color: #4e5969;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-InputWrapper-label) {
|
|
color: #4e5969;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Input-input),
|
|
.filterPanel :global(.mantine-Select-input),
|
|
.filterPanel :global(.mantine-DateInput-input),
|
|
.filterPanel :global(.mantine-NumberInput-input),
|
|
.filterPanel :global(.mantine-PillsInput-root),
|
|
.filterPanel :global(.mantine-Textarea-input) {
|
|
min-height: 32px;
|
|
border-color: #e5e6eb;
|
|
border-radius: 4px;
|
|
background: #f7f8fa;
|
|
color: #1d2129;
|
|
font-size: 14px;
|
|
box-shadow: none;
|
|
transition:
|
|
border-color 0.2s ease,
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-PillsInput-root) {
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-PillsInput-input) {
|
|
min-height: 30px;
|
|
background: transparent;
|
|
color: #1d2129;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Textarea-input) {
|
|
min-height: 96px;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Input-input::placeholder),
|
|
.filterPanel :global(.mantine-Select-input::placeholder),
|
|
.filterPanel :global(.mantine-DateInput-input::placeholder),
|
|
.filterPanel :global(.mantine-NumberInput-input::placeholder),
|
|
.filterPanel :global(.mantine-PillsInput-input::placeholder),
|
|
.filterPanel :global(.mantine-Textarea-input::placeholder) {
|
|
color: #86909c;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Input-input:focus),
|
|
.filterPanel :global(.mantine-Select-input:focus),
|
|
.filterPanel :global(.mantine-DateInput-input:focus),
|
|
.filterPanel :global(.mantine-NumberInput-input:focus),
|
|
.filterPanel :global(.mantine-PillsInput-root:focus-within),
|
|
.filterPanel :global(.mantine-Textarea-input:focus) {
|
|
border-color: #1874ff;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Button-root[data-variant="transparent"]) {
|
|
min-height: auto;
|
|
height: auto;
|
|
padding-inline: 0;
|
|
color: #1874ff;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Button-root),
|
|
.headerActions :global(.mantine-Button-root) {
|
|
min-height: 32px;
|
|
border-radius: 4px;
|
|
padding-inline: 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
box-shadow: none;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
border-color 0.2s ease,
|
|
color 0.2s ease;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Button-root[data-variant="filled"]),
|
|
.headerActions :global(.mantine-Button-root[data-variant="filled"]) {
|
|
--button-bg: #1874ff;
|
|
--button-hover: #0f6ae8;
|
|
--button-color: #ffffff;
|
|
--button-bd: transparent;
|
|
background: #1874ff !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Button-root[data-variant="filled"]:hover),
|
|
.headerActions :global(.mantine-Button-root[data-variant="filled"]:hover) {
|
|
background: #0f6ae8 !important;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Button-root[data-variant="default"]),
|
|
.headerActions :global(.mantine-Button-root[data-variant="default"]) {
|
|
border-color: #e5e6eb;
|
|
background: #ffffff;
|
|
color: #4e5969;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Button-root[data-disabled]),
|
|
.filterPanel :global(.mantine-Button-root:disabled),
|
|
.headerActions :global(.mantine-Button-root[data-disabled]),
|
|
.headerActions :global(.mantine-Button-root:disabled) {
|
|
border-color: #e5e6eb !important;
|
|
background: #f2f3f5 !important;
|
|
color: #c9cdd4 !important;
|
|
cursor: not-allowed;
|
|
opacity: 1;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Button-root[data-disabled]:hover),
|
|
.filterPanel :global(.mantine-Button-root:disabled:hover),
|
|
.headerActions :global(.mantine-Button-root[data-disabled]:hover),
|
|
.headerActions :global(.mantine-Button-root:disabled:hover) {
|
|
border-color: #e5e6eb !important;
|
|
background: #f2f3f5 !important;
|
|
color: #c9cdd4 !important;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-ActionIcon-root),
|
|
.headerActions :global(.mantine-ActionIcon-root) {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-Pill-root) {
|
|
background: #e7efff;
|
|
color: #1874ff;
|
|
}
|
|
|
|
.filterPanel :global(.mantine-PillsInput-field),
|
|
.filterPanel :global(.mantine-Select-section),
|
|
.filterPanel :global(.mantine-DateInput-section) {
|
|
color: #86909c;
|
|
}
|
|
|
|
.contentPanel {
|
|
border-color: #e5e6eb;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-datatable-pagination) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
padding: 12px 16px !important;
|
|
color: #4e5969;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-datatable-pagination-text),
|
|
.contentPanel :global(.mantine-datatable-pagination .mantine-Text-root) {
|
|
color: #4e5969;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.contentPanel
|
|
:global(.mantine-datatable-pagination button[data-variant="default"]),
|
|
.contentPanel
|
|
:global(.mantine-datatable-pagination button[data-variant="light"]) {
|
|
min-height: 28px !important;
|
|
height: 28px !important;
|
|
padding-inline: 10px !important;
|
|
border-radius: 4px !important;
|
|
border-color: #e5e6eb;
|
|
background: #ffffff;
|
|
color: #4e5969;
|
|
font-size: 12px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.contentPanel
|
|
:global(.mantine-datatable-pagination button[data-variant="default"]:hover),
|
|
.contentPanel
|
|
:global(.mantine-datatable-pagination button[data-variant="light"]:hover) {
|
|
background: #f7f8fa;
|
|
color: #1d2129;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-datatable-pagination-pages) {
|
|
--pagination-control-size: 28px;
|
|
--pagination-control-fz: 12px;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-datatable-pagination .mantine-Select-input) {
|
|
min-height: 28px;
|
|
height: 28px;
|
|
border-color: #e5e6eb;
|
|
border-radius: 4px;
|
|
background: #ffffff;
|
|
color: #4e5969;
|
|
font-size: 12px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-datatable-pagination .mantine-Select-section) {
|
|
color: #86909c;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-Pagination-dots) {
|
|
color: #86909c;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-Pagination-control),
|
|
.contentPanel :global(.mantine-datatable-pagination-pages-control) {
|
|
min-width: 28px !important;
|
|
height: 28px !important;
|
|
border: 0;
|
|
border-radius: 4px !important;
|
|
background: transparent;
|
|
color: #4e5969;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-Pagination-control:hover),
|
|
.contentPanel :global(.mantine-datatable-pagination-pages-control:hover) {
|
|
background: #f2f3f5;
|
|
color: #1d2129;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-Pagination-control[data-active]),
|
|
.contentPanel
|
|
:global(.mantine-datatable-pagination-pages-control[data-active]) {
|
|
background: #e7efff;
|
|
border-color: transparent;
|
|
color: #1874ff;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-Pagination-control[data-active]:hover),
|
|
.contentPanel
|
|
:global(.mantine-datatable-pagination-pages-control[data-active]:hover) {
|
|
background: #dbe8ff;
|
|
border-color: transparent;
|
|
color: #1874ff;
|
|
}
|
|
|
|
.contentPanel :global(.mantine-Pagination-control[data-disabled]),
|
|
.contentPanel
|
|
:global(.mantine-datatable-pagination-pages-control[data-disabled]) {
|
|
background: transparent;
|
|
color: #c9cdd4;
|
|
}
|
|
|
|
.filterActions,
|
|
.headerActions {
|
|
gap: 8px;
|
|
}
|
|
|
|
.listHeader {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.listHeaderTitle {
|
|
color: #1d2129;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.listHeaderCount {
|
|
color: #86909c;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.sectionHeader {
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #e5e6eb;
|
|
}
|
|
|
|
.sectionEyebrow {
|
|
color: #1874ff;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sectionTitle {
|
|
color: #1d2129;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.sectionDescription {
|
|
color: #86909c;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.settingTabsList {
|
|
padding: 4px;
|
|
border: 1px solid #e5e6eb;
|
|
border-radius: 4px;
|
|
background: #f7f8fa;
|
|
gap: 8px;
|
|
}
|
|
|
|
.settingTabsTab {
|
|
min-height: 32px;
|
|
border-radius: 4px;
|
|
padding: 0 12px;
|
|
color: #4e5969;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
color 0.2s ease;
|
|
}
|
|
|
|
.settingTabsTab[data-active],
|
|
.settingTabsTab[data-active]:hover {
|
|
background: #1874ff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.settingTabsTabLabel {
|
|
color: inherit;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.settingTabsTab[data-active] .settingTabsTabLabel,
|
|
.settingTabsTab[data-active]:hover .settingTabsTabLabel {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.settingTabsPanel {
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.filterTopRow,
|
|
.filterExpandedGrid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.filterActionsAlignEnd {
|
|
justify-self: stretch;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.detailIntroGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.filterTopRow,
|
|
.filterExpandedGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.filterField {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
|
|
.filterLabel {
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.filterActionsAlignEnd {
|
|
grid-column: auto;
|
|
}
|
|
}
|