Tom Butcher dc237eecdd Implement Custom Spin Component and Update Loading States
- Introduced a new Spin component to standardize loading indicators across the application, enhancing visual consistency.
- Updated ObjectKanban, ObjectKanbanColumn, and ObjectTable components to utilize the new Spin component, simplifying loading state management.
- Refactored CSS styles in App.css to support the new Spin component, including responsive design adjustments for various loading sizes.
- Removed redundant loading indicators and streamlined loading behavior for improved user experience during data fetching.
2026-09-03 03:24:25 +01:00

3013 lines
59 KiB
CSS

.ant-typography,
.ant-descriptions-item-label,
.ant-descriptions-item-content,
.ant-menu-title-content,
.ant-tag,
.ant-card,
.ant-checkbox-label,
.ant-btn,
.ant-breadcrumb-link,
.ant-dropdown-menu-title-content,
.ant-notification-notice-message,
.ant-notification-notice-description,
.ant-message-custom-content,
.ant-modal-title,
.ant-modal-body,
.ant-table-column-title,
.ant-table-cell,
.ant-alert-message,
.ant-drawer-title,
.ant-tooltip-inner,
.ant-form-item-control-input-content,
.ant-form-item-control-input,
.ant-input,
.ant-input-number .ant-input-number-input,
.segmented-nav-item-label,
.ant-badge-status-text,
.ant-tree-title,
.ant-select,
.ant-progress,
.ant-collapse,
.ant-picker-dropdown,
.ant-radio-group,
.g2-tooltip-title,
.g2-tooltip-list-item,
.ant-picker-input,
.ant-picker-header-view button,
.ant-badge,
.ant-select-dropdown,
.ant-splitter,
.adaptive-splitter,
.ant-steps-item-title,
.ant-steps-icon,
.ant-color-picker-presets-label,
.ant-select-selection-item,
.ant-color-picker-trigger-text,
[class*=' ant-radio'] {
font-family: 'DM Sans';
}
:root {
--color-list-view-tabs-border: #8282822e;
--color-button-border: #8282822e;
--color-button-background: #8282822e;
}
.ant-dropdown {
z-index: 999;
}
.ant-typography code,
.ant-typography pre,
.ͼ1 .cm-scroller {
font-family: 'DM Mono';
}
.ant-steps .ant-steps-item-icon {
line-height: 30px;
font-weight: 600;
}
.ant-steps .ant-steps-item-icon .anticon.anticon-check.ant-steps-finish-icon {
line-height: 32px;
}
.ant-typography .id-text {
font-family: 'DM Mono';
font-size: 11.9px;
vertical-align: top !important;
}
.ant-typography-ellipsis-single-line {
vertical-align: middle !important;
}
.ant-typography-ellipsis-single-line > code {
vertical-align: top !important;
}
.ant-select-selection-item .country-display {
margin-left: 1px !important;
}
.object-display-tag,
.object-type-display-tag,
.country-display {
opacity: 1;
transition: opacity 0.15s ease-in-out;
}
.object-select.ant-select-focused .object-display-tag,
.ant-select-focused .object-type-display-tag,
.ant-select-focused .country-display {
opacity: 0.5;
}
.flag {
line-height: 0.7;
}
.electron-navigation-wrapper {
user-select: none;
--webkit-user-select: none;
}
.electron-body * {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.electron-body .ant-descriptions-item-content *,
.electron-body .ant-table-cell * {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
/* Native macOS vibrancy — transparent web content over NSVisualEffectView */
html.macos-vibrancy {
--macos-window-corner-radius: 15px; /* keep in sync with MAC_WINDOW_CORNER_RADIUS */
}
html.macos-vibrancy,
html.macos-vibrancy body,
html.macos-vibrancy #root {
background: transparent !important;
}
html.macos-vibrancy .ant-layout.ant-layout-has-sider,
html.macos-vibrancy .main-layout {
background: transparent !important;
}
html.macos-vibrancy .light-mode .ant-layout.main-content-layout {
background: rgba(255, 255, 255, 0.88) !important;
}
html.macos-vibrancy .dark-mode .ant-layout.main-content-layout {
background: rgba(0, 0, 0, 0.88) !important;
}
html.macos-vibrancy .light-mode .ant-layout-sider {
background: rgba(244, 244, 244, 0.82) !important;
}
html.macos-vibrancy .dark-mode .ant-layout-sider {
background: rgba(10, 10, 10, 0.82) !important;
}
html.macos-vibrancy .light-mode .ant-layout-content {
background: transparent !important;
}
html.macos-vibrancy .dark-mode .ant-layout-content {
background: transparent !important;
}
html.macos-vibrancy .ant-layout-sider-light,
html.macos-vibrancy .electron-sider .ant-menu-light {
background: transparent !important;
}
html.macos-vibrancy
.dark-mode
.electron-sider
.ant-menu-light
.ant-menu-item-selected {
background-color: color-mix(in srgb, var(--color-primary) 30%, #00000010);
color: color-mix(in srgb, var(--color-primary) 75%, #ffffff);
}
html.macos-vibrancy
.light-mode
.electron-sider
.ant-menu-light
.ant-menu-item-selected {
background-color: color-mix(in srgb, var(--color-primary) 80%, #ffffff3d);
color: #ffffff;
}
html.macos-vibrancy .dark-mode .electron-navigation-wrapper {
background: rgba(10, 10, 10, 0.9) !important;
}
html.macos-vibrancy .light-mode .electron-navigation-wrapper {
background: rgba(255, 255, 255, 0.9) !important;
}
html.macos-vibrancy .electron-navigation {
background: rgba(0, 0, 0, 0) !important;
}
html.macos-vibrancy .light-mode .ant-layout.main-content-layout .ant-card {
background: rgba(255, 255, 255, 0.5) !important;
}
html.macos-vibrancy .dark-mode .ant-layout.main-content-layout .ant-card {
background: rgba(31, 31, 31, 0.5) !important;
}
.redTrafficLight {
width: 12px;
height: 12px;
background-color: #fe5f57;
border-radius: 50%;
}
.yellowTrafficLight {
width: 12px;
height: 12px;
background-color: #febc2e;
border-radius: 50%;
}
.greenTrafficLight {
width: 12px;
height: 12px;
background-color: #28c840;
border-radius: 50%;
}
.electron-navigation {
line-height: 40px;
}
.electron-sidebar.ant-menu-inline .ant-menu-item,
.electron-sidebar.ant-menu-inline.ant-menu-root .ant-menu-submenu-title {
padding-left: 20px !important;
}
.electron-navigation .ant-menu-overflow-item-rest {
padding-inline: 10px;
}
.electron-navigation.ant-menu-horizontal .ant-menu-item {
padding-inline: 12px;
}
.electron-sidebar .ant-menu-item,
.electron-sidebar .ant-menu-submenu-title {
height: 32.5px !important;
line-height: 32.5px !important;
}
.electron-sider.ant-layout-sider-collapsed {
min-width: var(--dashboard-sidebar-collapsed-width, 55px) !important;
max-width: var(--dashboard-sidebar-collapsed-width, 55px) !important;
}
.loading-modal .ant-modal-footer {
display: none;
}
:root {
--unit-100vh: 100vh;
--scrollbox-vertical-right-padding: 16px;
--scrollbox-horizontal-bottom-padding: 16px;
}
@supports (height: 100dvh) {
:root {
--unit-100vh: 100dvh;
}
}
.dashboard-cards-header .ant-table-tbody {
display: none;
}
.ant-menu-overflow-item-rest::after {
border-bottom: none !important;
}
.ant-menu-overflow-item > div:hover {
background-color: transparent !important;
}
code {
margin: 0;
}
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #be871a;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.iddisplay .ant-popover-inner {
padding: 0 !important;
}
.iddisplay > *:first-child {
min-width: 0;
flex: 0 1 auto;
max-width: 100%;
overflow: hidden;
}
.iddisplay .ant-btn {
flex-shrink: 0;
}
.miscid > *:first-child {
min-width: 0;
flex: 0 1 auto;
max-width: 100%;
overflow: hidden;
}
.miscid .ant-btn {
flex-shrink: 0;
}
.ant-popover-inner:has(.spotlight-tooltip) {
padding: 0 !important;
}
.ant-popover:has(.spotlight-tooltip) {
z-index: 1051;
}
:root,
.light-mode,
html:has(.light-mode) {
--kbd-color: #363636;
--kbd-bg: #efefef;
--kbd-inset: #e8e8e8;
--kbd-edge: #c3c3c3;
--kbd-ridge: #c9c9c9;
--kbd-drop-shadow: rgb(51 51 51 / 40%);
--kbd-text-shadow: #f6f6f6;
}
.dark-mode,
html:has(.dark-mode) {
--kbd-color: #ececec;
--kbd-bg: #3a3a3a;
--kbd-inset: #323232;
--kbd-edge: #1c1c1c;
--kbd-ridge: #141414;
--kbd-drop-shadow: rgb(0 0 0 / 45%);
--kbd-text-shadow: #111111;
}
.keyboard-key {
display: inline-block;
color: var(--kbd-color);
text-decoration: none;
text-align: center;
background: var(--kbd-bg);
padding: 3px 7px;
margin: 5px 3px;
border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
box-shadow:
inset 0 0 25px var(--kbd-inset),
0 1px 0 var(--kbd-edge),
0 3px 0 var(--kbd-ridge),
0 4px 8px var(--kbd-drop-shadow);
text-shadow: 0 1px 0 var(--kbd-text-shadow);
}
.keyboard-key-md {
padding: 4.5px 10.5px;
margin: 7.5px 3.5px;
font-size: 110%;
border-radius: 10px;
box-shadow:
inset 0 0 37.5px var(--kbd-inset),
0 1.5px 0 var(--kbd-edge),
0 4.5px 0 var(--kbd-ridge),
0 6px 12px var(--kbd-drop-shadow);
text-shadow: 0 1.5px 0 var(--kbd-text-shadow);
}
.keyboard-key-lg {
padding: 6px 14px;
margin: 10px 6px;
font-size: 200%;
border-radius: 8px;
box-shadow:
inset 0 0 50px var(--kbd-inset),
0 2px 0 var(--kbd-edge),
0 6px 0 var(--kbd-ridge),
0 8px 16px var(--kbd-drop-shadow);
text-shadow: 0 2px 0 var(--kbd-text-shadow);
}
.keyboard-key-xl {
padding: 9px 21px;
margin: 15px 9px;
font-size: 300%;
border-radius: 12px;
box-shadow:
inset 0 0 75px var(--kbd-inset),
0 3px 0 var(--kbd-edge),
0 9px 0 var(--kbd-ridge),
0 12px 24px var(--kbd-drop-shadow);
text-shadow: 0 3px 0 var(--kbd-text-shadow);
}
.cursor-tooltip {
opacity: 0;
transition: opacity 0.25s ease;
}
.cursor-tooltip.is-visible {
opacity: 1;
transition: opacity 0.15s ease;
}
.cursor-tooltip .ant-card {
box-shadow:
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
/* --- Start of src/index.css --- */
body {
margin: 0;
overflow: hidden;
}
.ant-modal-mask,
.ant-drawer-mask {
backdrop-filter: blur(3px);
}
.ant-spin-blur {
filter: blur(3px);
}
.spin {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 20px;
line-height: 1;
}
.spin-nested {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
flex: 1;
}
.spin-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
flex: 1;
transition: opacity 0.3s;
}
.spin-content.is-spinning {
filter: blur(3px);
opacity: 0.5;
user-select: none;
pointer-events: none;
}
.spin-overlay {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 20px;
pointer-events: none;
}
.spin.spin-sm,
.spin-nested.spin-sm .spin-overlay {
font-size: 14px;
}
.spin.spin-lg,
.spin-nested.spin-lg .spin-overlay {
font-size: 32px;
}
/* --- End of src/index.css --- */
/* --- Start of src/components/Dashboard/Layout.css --- */
.no-padding-collapse .ant-collapse-header {
padding: 0 !important;
}
.no-padding-collapse .ant-collapse-content-box {
padding: 0 !important;
}
.no-h-padding-collapse .ant-collapse-header {
padding-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 4px !important;
}
.no-h-padding-collapse .ant-collapse-content-box {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
}
.no-padding-collapse .ant-collapse-item,
.no-v-padding-collapse .ant-collapse-item {
border: none !important;
}
/* --- End of src/components/Dashboard/Layout.css --- */
/* --- Start of src/components/Dashboard/common/DashboardSidebar.css --- */
.ant-layout-sider {
height: 100%;
}
.dashboard-sider.ant-layout-sider {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
flex: 0 0 100% !important;
transition:
all 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
background 0s;
}
.dashboard-sider.ant-layout-sider-collapsed {
width: var(--dashboard-sidebar-collapsed-width, 80px) !important;
min-width: var(--dashboard-sidebar-collapsed-width, 80px) !important;
max-width: var(--dashboard-sidebar-collapsed-width, 80px) !important;
flex: 0 0 var(--dashboard-sidebar-collapsed-width, 80px) !important;
}
/* --- End of src/components/Dashboard/common/DashboardSidebar.css --- */
.objectTableDescritions > .ant-descriptions-view > table {
table-layout: fixed !important;
}
.objectTableDescritions
> .ant-descriptions-view
.ant-descriptions-row
> .ant-descriptions-item-label {
width: 35%;
}
.farmcontrol-splitter > .ant-splitter-bar,
.farmcontrol-splitter > .adaptive-splitter-bar {
margin: 8px;
}
.farmcontrol-splitter.large > .ant-splitter-bar,
.farmcontrol-splitter.large > .adaptive-splitter-bar {
margin: 11px;
opacity: 0.6;
}
.dark-mode {
--sb-track-color: #1d1d1d;
--sb-thumb-color: #848484;
--sb-size: 8px;
}
.light-mode {
--sb-thumb-color: #87878718;
--sb-size: 8px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar:vertical {
width: 8px;
}
::-webkit-scrollbar:horizontal {
height: 8px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #8888881a;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
}
::-webkit-scrollbar-corner {
background: #00000000; /* The scroll corner color */
}
::-webkit-scrollbar-thumb:vertical {
border-left: none;
}
::-webkit-scrollbar-thumb:horizontal {
border-top: none;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #5555551f;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:vertical:hover {
border-left: none;
}
::-webkit-scrollbar-thumb:horizontal:hover {
border-top: none;
}
.ant-table-body {
scrollbar-color: auto;
}
.ant-select-selection-item .ant-tag {
margin-left: 1px !important;
}
.tags-input.ant-select-multiple .ant-select-selection-item,
.tags-input.ant-tree-select.ant-select-multiple .ant-select-selection-item {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin-inline-end: 0 !important;
height: auto !important;
line-height: normal !important;
}
.tags-input.ant-select-multiple .ant-select-selection-item-remove,
.tags-input.ant-tree-select.ant-select-multiple
.ant-select-selection-item-remove {
display: none;
}
.ant-badge.ant-badge-status {
line-height: 18.5px;
}
.simplebar-track.simplebar-vertical {
right: calc(-1 * var(--scrollbox-vertical-right-padding));
width: 8px !important;
}
.simplebar-track.simplebar-horizontal {
bottom: calc(-1 * var(--scrollbox-horizontal-bottom-padding));
height: 8px !important;
}
.scrollbox-inner .simplebar-track.simplebar-vertical {
right: var(--scrollbox-vertical-right-padding);
}
.scrollbox-inner .simplebar-track.simplebar-horizontal {
bottom: var(--scrollbox-horizontal-bottom-padding);
}
.scrollbox-inner-small-padding .simplebar-track.simplebar-vertical {
right: 8px;
bottom: 8px;
top: 8px;
}
.scrollbox-inner-small-padding .simplebar-track.simplebar-horizontal {
bottom: 8px;
}
.scrollbox-horizontal > [data-simplebar],
.scrollbox-horizontal .simplebar-wrapper {
width: 100%;
}
.simplebar-scrollbar:before {
background: #78787854 !important;
}
.printer-alerts-display-popover .ant-popover-inner {
padding: 0 !important;
margin: 0 24px !important;
}
.child-table-rollups *::-webkit-scrollbar:horizontal {
height: 0px;
}
.rollup-table .ant-table-container {
border-start-start-radius: 0px !important;
border-start-end-radius: 0px !important;
}
.rollup-table .ant-table {
border-radius: 0px !important;
}
.ant-select-selection-item .ant-tag.object-display-tag,
.ant-select-tree-title .ant-tag.object-display-tag,
.ant-select-dropdown .ant-tag.object-display-tag {
background: transparent !important;
border: none;
padding: 0;
margin-right: 1px !important;
}
.object-select .ant-select-selection-item .object-display-tag {
top: 1.5px;
}
.object-select .ant-select-selection-item .object-display-tag .iddisplay,
.ant-select-dropdown .object-display-tag .iddisplay {
margin-bottom: -1px;
}
.ant-select-tree-title .object-display-tag {
top: 0.5px;
}
.ant-select-outlined.ant-select-multiple
.ant-select-selection-item
.object-display-tag {
padding-top: 0px;
}
.ant-select-outlined.ant-select-multiple
.ant-select-selection-item
.object-display-tag
.ant-flex {
margin-top: 0;
}
.ant-select-tree-node-content-wrapper .object-display-tag > .ant-flex {
margin-top: 1px;
}
.object-info-descriptions table {
table-layout: fixed !important;
}
.ant-btn-variant-outlined.ant-btn.ant-btn-icon-only {
min-width: 32px;
}
.electron-spotlight-content .ant-input-outlined {
background-color: transparent !important;
border: 1px solid transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.ant-modal .ant-modal-content {
border-radius: 22px;
padding: 24px;
}
.ant-badge .ant-badge-count-sm {
font-size: 10px;
}
.input-number-cal {
position: relative;
}
.input-number-cal input {
padding: 4px 12px;
}
.input-number-cal-highlight {
position: absolute;
display: flex;
align-items: center;
overflow: hidden;
white-space: pre;
pointer-events: none;
z-index: 2;
color: color-mix(in srgb, var(--color-text) 85%, transparent);
}
.input-number-cal-operator {
color: var(--color-purple);
}
.input-number-cal-bracket {
color: var(--color-primary);
}
.input-number-cal-expr-input,
.input-number-cal-expr-input.ant-input-affix-wrapper {
position: relative;
z-index: 1;
}
.input-number-cal-expr-input.ant-input-affix-wrapper .ant-input,
.input-number-cal-expr-input.ant-input-outlined:not(.ant-input-affix-wrapper) {
color: transparent !important;
caret-color: var(--color-text);
}
.input-number-cal-expr-input.ant-input-affix-wrapper .ant-input {
background: transparent !important;
}
.input-number-cal .ant-input-suffix {
margin-right: 28px;
}
.input-number-cal .ant-input-outlined {
border-color: var(--color-purple);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-purple) 31%, transparent);
}
.input-number-cal .ant-input {
font-family: 'DM Sans';
font-weight: 400;
}
.input-number-cal-icon {
position: absolute;
right: 10px;
top: 0;
bottom: 1px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
/* --- Start of src/components/Dashboard/common/MarkdownInput.css --- */
.md-editor__content {
padding: 24px;
font-size: 14px;
line-height: 1.6;
color: var(--baseText);
white-space: pre-wrap;
outline: none;
}
.md-editor {
color: var(--baseText);
}
.md-editor .tiptap {
min-height: var(--md-editor-min-height);
}
.md-editor .tiptap p.is-editor-empty:first-child::before {
content: 'Enter text here...';
color: var(--baseBorderHover);
float: left;
height: 0;
pointer-events: none;
}
.markdown pre,
.markdown code,
.markdown blockquote {
background: var(--baseBgSubtle);
color: var(--baseTextContrast);
}
.markdown pre {
border-radius: 8px;
padding: 12px;
overflow-x: auto;
}
.markdown blockquote {
border-left: 3px solid var(--color-primary);
margin: 0;
padding: 8px 12px;
}
.markdown hr {
border: 0;
border-top: 1px solid #8484844d;
margin: 10px 0;
}
.markdown *:first-child {
margin-top: 0;
}
.markdown h1:first-child {
margin-top: -4px;
}
.markdown h2:first-child {
margin-top: -3px;
}
.markdown h3:first-child {
margin-top: -2px;
}
.markdown h4:first-child {
margin-top: -1px;
}
.markdown *:last-child {
margin-bottom: 0;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
margin-bottom: 10px;
line-height: 1;
}
.markdown p {
font-size: 14px;
margin: 10px 0;
line-height: 1.6;
}
.markdown h1 {
font-size: 32px;
}
.markdown h2 {
font-size: 26px;
}
.markdown h3 {
font-size: 20px;
}
.markdown h4 {
font-size: 16px;
}
.markdown {
width: 100%;
}
.property-changes .markdown {
width: unset;
}
.markdown ul,
.markdown ol {
padding-left: 20px;
margin: 10px 0;
}
.markdown li {
margin: 10px 0;
line-height: 1;
}
.markdown-code-editor {
padding: 18px;
}
.markdown-splitter > .ant-splitter-bar {
margin: 8px 0;
}
.markdown-code-editor .cm-editor {
background-color: transparent;
}
.markdown-code-editor .cm-editor.cm-focused {
outline: none;
}
.markdown-code-editor .cm-editor .cm-gutters {
background-color: transparent;
}
.h-100 {
height: 100%;
min-height: 0;
}
.ant-table.ant-table-middle .ant-table-filter-trigger {
height: 20px;
}
.ant-table-wrapper .ant-table-filter-column {
align-items: center;
}
span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
width: 50px;
min-width: 0;
height: 20px;
}
.sidebar-scroll .simplebar-track.simplebar-vertical {
top: 8px;
right: calc(-1 * var(--scrollbox-vertical-right-padding) - 0.5px);
width: 8px !important;
}
.sidebar-scroll
.simplebar-track.simplebar-vertical
.simplebar-scrollbar:before {
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
}
.ant-color-picker
.ant-color-picker-inner
.ant-color-picker-panel
.ant-color-picker-select
.ant-color-picker-palette {
border-radius: 8px;
}
.ant-color-picker
.ant-collapse
.ant-collapse-item:last-child
.ant-collapse-content-box {
padding-bottom: 0 !important;
}
.ant-color-picker .ant-collapse .ant-collapse-expand-icon {
height: 12px !important;
padding-inline-end: 8px !important;
}
.ant-color-picker .ant-color-picker-inner .ant-color-picker-presets-label {
line-height: 1 !important;
}
.ant-color-picker
.ant-collapse
.ant-collapse-item:first-child
.ant-collapse-header {
margin: 0 0 5.5px 0;
}
.ant-color-picker .ant-collapse .ant-collapse-item .ant-collapse-header {
margin: 5.5px 0;
}
.subSteps.ant-timeline .ant-timeline-item-last > .ant-timeline-item-content {
min-height: unset;
}
.subSteps.ant-timeline .ant-timeline-item-last {
padding-bottom: 6px;
}
.subSteps.ant-timeline {
margin-top: 16px;
}
.ant-steps.ant-steps-vertical
> .ant-steps-item
> .ant-steps-item-container
> .ant-steps-item-tail::after {
width: 1.5px;
}
.subSteps.ant-timeline .ant-timeline-item-head {
background-color: unset;
}
.subSteps.ant-timeline .subSteps-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.subSteps.ant-timeline .subSteps-dot svg path {
stroke: var(--layout-modal-bg);
stroke-width: 10px;
}
.subSteps.ant-timeline .subSteps-dot span {
width: 5px;
height: 5px;
margin-top: 0px;
margin-right: 0px;
}
.subSteps.ant-timeline .subSteps-dot.subSteps-dot-disabled {
background-color: var(--color-primary-disabled);
}
.subSteps.ant-timeline .subSteps-dot.subSteps-dot-disabled svg path {
stroke: var(--color-primary);
}
.ant-steps .ant-steps-item-finish .ant-steps-item-icon svg path {
stroke: var(--color-primary);
stroke-width: 3px;
}
.ant-descriptions .ant-descriptions-item-label::after {
top: 0;
}
.ant-descriptions-small .ant-descriptions-row > td {
padding-bottom: 6px;
}
.minimal-code-block-editor .ant-typography pre {
margin: 0;
}
.code-block-editor {
display: flex;
flex-direction: column;
min-height: 0;
}
.code-block-editor > div {
flex: 1 1 auto;
min-height: 0;
}
.ant-splitter-panel:not(:first-child) .info-collapse .info-collapse-label {
margin-left: 4px;
}
.farmcontrol-splitter .ant-splitter-panel,
.farmcontrol-splitter .adaptive-splitter-panel {
overflow: visible;
}
.farmcontrol-splitter.ant-splitter-horizontal .ant-splitter-panel,
.farmcontrol-splitter.adaptive-splitter-horizontal .adaptive-splitter-panel {
width: 100%;
min-width: 0;
}
.adaptive-splitter {
display: flex;
width: 100%;
height: 100%;
min-height: 0;
align-items: stretch;
position: relative;
}
.adaptive-splitter-vertical {
flex-direction: column;
}
.adaptive-splitter-panel {
min-width: 0;
min-height: 0;
}
.adaptive-splitter-bar {
flex: none;
position: relative;
z-index: 2;
user-select: none;
touch-action: none;
}
.adaptive-splitter-horizontal > .adaptive-splitter-bar {
width: 0;
}
.adaptive-splitter-vertical > .adaptive-splitter-bar {
height: 0;
}
.adaptive-splitter-bar-dragger {
position: absolute;
z-index: 1;
background: transparent;
}
.adaptive-splitter-horizontal
> .adaptive-splitter-bar
.adaptive-splitter-bar-dragger {
top: 0;
bottom: 0;
left: 50%;
width: 6px;
transform: translateX(-50%);
cursor: col-resize;
}
.adaptive-splitter-vertical
> .adaptive-splitter-bar
.adaptive-splitter-bar-dragger {
left: 0;
right: 0;
top: 50%;
height: 6px;
transform: translateY(-50%);
cursor: row-resize;
}
.adaptive-splitter-bar-dragger::before {
content: '';
position: absolute;
inset: 0;
margin: auto;
}
.adaptive-splitter-horizontal
> .adaptive-splitter-bar
.adaptive-splitter-bar-dragger::before {
width: 2px;
height: 100%;
background: var(--ant-color-split, rgba(5, 5, 5, 0.06));
}
.adaptive-splitter-vertical
> .adaptive-splitter-bar
.adaptive-splitter-bar-dragger::before {
height: 2px;
width: 100%;
background: var(--ant-color-split, rgba(5, 5, 5, 0.06));
}
.adaptive-splitter-bar-dragger::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
background: var(--ant-color-text-quaternary, rgba(0, 0, 0, 0.25));
opacity: 0.35;
}
.adaptive-splitter-horizontal
> .adaptive-splitter-bar
.adaptive-splitter-bar-dragger::after {
width: 2px;
height: 20px;
}
.adaptive-splitter-vertical
> .adaptive-splitter-bar
.adaptive-splitter-bar-dragger::after {
height: 2px;
width: 20px;
}
.adaptive-splitter-bar.is-active .adaptive-splitter-bar-dragger::before,
.adaptive-splitter-bar-dragger:hover::before {
background: var(--ant-color-primary-border-hover, #4096ff);
}
.adaptive-splitter-bar-collapse {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.45));
cursor: pointer;
}
.adaptive-splitter-horizontal
> .adaptive-splitter-bar
.adaptive-splitter-bar-collapse {
top: 50%;
transform: translateY(-50%);
}
.adaptive-splitter-horizontal
> .adaptive-splitter-bar
.adaptive-splitter-bar-collapse-start {
left: -18px;
}
.adaptive-splitter-horizontal
> .adaptive-splitter-bar
.adaptive-splitter-bar-collapse-end {
right: -18px;
}
.adaptive-splitter-bar-preview {
position: absolute;
z-index: 3;
pointer-events: none;
background: var(--ant-color-primary, #1677ff);
opacity: 0.45;
}
.adaptive-splitter-horizontal
> .adaptive-splitter-bar
.adaptive-splitter-bar-preview {
top: 0;
bottom: 0;
width: 2px;
}
.adaptive-splitter-vertical
> .adaptive-splitter-bar
.adaptive-splitter-bar-preview {
left: 0;
right: 0;
height: 2px;
}
.adaptive-splitter.is-dragging {
user-select: none;
}
.adaptive-splitter.is-dragging.adaptive-splitter-horizontal,
.adaptive-splitter.is-dragging.adaptive-splitter-horizontal * {
cursor: col-resize !important;
}
.adaptive-splitter.is-dragging.adaptive-splitter-vertical,
.adaptive-splitter.is-dragging.adaptive-splitter-vertical * {
cursor: row-resize !important;
}
.adaptive-splitter-mask {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
.adaptive-splitter.is-ready:not(.is-dragging) > .adaptive-splitter-panel,
.adaptive-splitter.is-size-transitioning > .adaptive-splitter-panel,
.farmcontrol-splitter.is-size-transitioning > .ant-splitter-panel,
.farmcontrol-splitter.is-size-transitioning > .adaptive-splitter-panel {
transition:
flex-basis var(--adaptive-splitter-size-transition, 0.3s)
cubic-bezier(0.2, 0, 0, 1),
width var(--adaptive-splitter-size-transition, 0.3s)
cubic-bezier(0.2, 0, 0, 1),
min-width var(--adaptive-splitter-size-transition, 0.3s)
cubic-bezier(0.2, 0, 0, 1),
max-width var(--adaptive-splitter-size-transition, 0.3s)
cubic-bezier(0.2, 0, 0, 1),
height var(--adaptive-splitter-size-transition, 0.3s)
cubic-bezier(0.2, 0, 0, 1),
min-height var(--adaptive-splitter-size-transition, 0.3s)
cubic-bezier(0.2, 0, 0, 1),
max-height var(--adaptive-splitter-size-transition, 0.3s)
cubic-bezier(0.2, 0, 0, 1);
}
.farmcontrol-splitter
.ant-splitter-panel:has(~ .ant-splitter-panel)
.info-collapse.ant-collapse.ant-collapse-icon-position-end
> .ant-collapse-item
> .ant-collapse-header
.ant-collapse-expand-icon {
padding-inline-end: 2px;
}
.objectTableCards {
overflow: hidden;
}
.objectTableCardsContainer {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.objectKanbanContainerWrapper {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.objectKanbanContainerSkeletons {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
min-height: 0;
}
.objectKanbanKanbanBody {
position: relative;
flex: 1;
min-width: 0;
min-height: 0;
}
.objectKanbanContainer {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
z-index: 1;
pointer-events: auto;
}
.objectKanbanWrap {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.objectKanbanScroll {
flex: 1;
width: 100%;
min-width: 0;
min-height: 0;
}
.objectKanbanScroll .simplebar-content-wrapper {
height: 100%;
}
.objectKanbanScroll .simplebar-content {
min-height: 100%;
}
.objectKanbanHeader {
flex-shrink: 0;
width: 100%;
min-width: 0;
overflow: hidden;
}
.objectKanbanHeaderTrack {
width: max-content;
min-width: 100%;
will-change: transform;
}
.objectKanbanHeaderRow {
width: max-content;
min-width: 100%;
align-items: flex-start;
}
.objectKanbanHeaderCell {
flex: 0 0 360px;
min-width: 360px;
flex-shrink: 0;
padding: 8px 8px;
border: 1px solid var(--ant-color-border-secondary);
border-bottom: 1px solid var(--color-descriptions-border);
border-radius: 12px 12px 0 0;
background-color: var(--layout-header-bg);
}
.objectKanban {
width: max-content;
min-width: 100%;
height: 100%;
min-height: 100%;
align-items: stretch;
padding-bottom: 4px;
}
.objectKanbanSkeletonColumns {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.objectKanbanSkeletonTrack {
width: max-content;
min-width: 100%;
height: 100%;
will-change: transform;
}
.objectKanbanSkeletonRow {
width: max-content;
min-width: 100%;
height: 100%;
align-items: stretch;
}
.objectKanbanColumn,
.objectKanbanColumnSkeleton {
flex: 0 0 360px;
min-width: 360px;
min-height: 0;
border-top: none;
border-radius: 0 0 12px 12px;
}
.objectKanbanColumnSkeleton {
border-radius: 0 0 12px 12px;
overflow: hidden;
}
.objectKanbanColumnCards {
flex: 1;
border-radius: 0 0 12px 12px;
height: 100%;
}
.objectKanbanColumnSkeleton .objectKanbanColumnCards {
background-color: var(--layout-header-bg);
}
.objectKanbanColumnCardsInner {
padding: 16px;
}
.electron-body .ant-modal-wrap,
.electron-body .ant-modal-mask,
.electron-body .ant-drawer {
top: 41px;
}
@keyframes h-progress-macos-wave {
0% {
transform: translateX(0);
}
100% {
/* One gradient period (40cqw of a 200cqw-wide element) for a seamless loop */
transform: translateX(20%);
}
}
.h-progress {
display: inline-block;
width: 100%;
font-size: 14px;
line-height: 1;
}
.h-progress-outer {
display: inline-flex;
align-items: center;
width: 100%;
}
.h-progress-inner {
position: relative;
display: inline-block;
width: 100%;
flex: 1;
overflow: hidden;
vertical-align: middle;
/* Lets the wave size itself against the full track via cqw units */
container-type: inline-size;
}
.h-progress-bg,
.h-progress-success-bg {
position: relative;
transition: all 0.1s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.h-progress-success-bg {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
}
/* Mask that clips the wave to the filled portion of the bar. Its width
tracks the fill, while the wave inside keeps a constant width so Safari
doesn't restart/freeze the animation when progress updates. */
.h-progress-bg-mask {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
overflow: hidden;
pointer-events: none;
transition: width 0.1s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.h-progress-bg-wave {
position: absolute;
inset-block: 0;
/* Constant width relative to the full track (.h-progress-inner),
independent of the mask's changing width. Starts one period early so
the pattern always covers the track while sliding right. */
inset-inline-start: -40cqw;
width: 200cqw;
background: repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.35) 20cqw,
rgba(255, 255, 255, 0) 40cqw
);
animation: h-progress-macos-wave 1s linear infinite;
}
.h-progress-text {
display: inline-block;
margin-inline-start: 8px;
line-height: 1;
width: 2em;
white-space: nowrap;
text-align: start;
vertical-align: middle;
word-break: normal;
}
.h-progress-text-start {
width: max-content;
margin-inline-start: 0;
margin-inline-end: 8px;
}
.h-progress-text-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin-inline-start: 0;
padding: 0 4px;
color: #fff;
}
.h-progress-layout-bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.h-progress-layout-bottom .h-progress-text {
width: max-content;
margin-inline-start: 0;
margin-top: 4px;
}
.simple-date-time-property-filter {
margin: -6px 0;
background-color: transparent;
}
.simple-date-time-property-filter.ant-tree .ant-tree-treenode {
margin-bottom: 0;
height: 40px;
align-items: center;
}
.simple-date-time-property-filter.ant-tree .ant-tree-switcher {
align-self: center;
}
.simple-date-time-property-filter.ant-tree .ant-tree-switcher-leaf-line:after {
height: 0;
top: -5px;
}
.simple-date-time-property-filter.ant-tree .ant-tree-switcher-leaf-line:before {
top: -16px !important;
bottom: -24px !important;
}
/* Size FilterSidebar field selects to the longest label (via labelRender sizer). */
.filter-sidebar-field-select.ant-select {
width: max-content;
}
.filter-sidebar-field-select .ant-select-selector {
width: max-content !important;
}
.elipsis-text-wrapper.ant-typography {
display: block;
min-width: 0;
max-width: 100%;
width: auto;
overflow-y: hidden;
overflow-x: visible;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.elipsis-text-wrapper.ant-typography .elipsis-text {
display: flex;
flex-direction: row;
align-items: baseline;
width: 100%;
max-width: 100%;
min-width: 0;
position: relative;
overflow: hidden;
white-space: pre;
}
.elipsis-text-wrapper.ant-typography code.elipsis-text-measure,
.elipsis-text-wrapper.ant-typography code.elipsis-text-full,
.elipsis-text-wrapper.ant-typography code.elipsis-text-truncated {
margin: 0;
box-sizing: border-box;
padding-inline: 0.5em;
padding-block: 0.1em 0.1em;
}
.elipsis-text-measure {
position: absolute;
visibility: hidden;
pointer-events: none;
white-space: pre;
}
.elipsis-text-full {
display: none;
position: absolute;
left: 0;
top: 0;
width: max-content;
max-width: 100%;
min-width: 0;
overflow: hidden;
white-space: pre;
}
.elipsis-text:not(.is-truncated) .elipsis-text-full {
display: inline-block;
}
.elipsis-text.is-truncated .elipsis-text-full {
display: none;
}
.elipsis-text:not(.is-truncated) .elipsis-text-truncated .elipsis-text-dots {
display: none;
}
.elipsis-text:not(.is-truncated) .elipsis-text-truncated {
visibility: hidden;
}
.elipsis-text-truncated {
display: flex;
flex: 1 1 0;
align-items: baseline;
min-width: 0;
width: 100%;
max-width: 100%;
overflow: hidden;
white-space: pre;
}
.elipsis-text-wrapper.ant-typography code.elipsis-text-truncated {
display: flex;
}
.elipsis-text-start,
.elipsis-text-end {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
white-space: pre;
}
.elipsis-text-start {
mask-image: linear-gradient(
to right,
#000 0%,
#000 calc(100% - 0.5em),
transparent 100%
);
-webkit-mask-image: linear-gradient(
to right,
#000 0%,
#000 calc(100% - 0.5em),
transparent 100%
);
}
.elipsis-text-end {
display: flex;
justify-content: flex-end;
mask-image: linear-gradient(
to left,
#000 0%,
#000 calc(100% - 0.5em),
transparent 100%
);
-webkit-mask-image: linear-gradient(
to left,
#000 0%,
#000 calc(100% - 0.5em),
transparent 100%
);
}
.elipsis-text-end-inner {
flex: 0 0 auto;
white-space: pre;
}
.elipsis-text-dots {
flex: 0 0 auto;
user-select: none;
}
.code-diff-viewer {
height: 70vh;
border: 1px solid #85858541;
}
.code-diff-viewer .cm-mergeView {
height: 100%;
overflow: auto;
}
.cm-editor {
width: fit-content;
}
.cm-errorLine {
background-color: color-mix(in srgb, var(--color-error) 15%, transparent);
}
.cm-gutters .cm-errorLine {
color: var(--color-error);
}
.diff-label-square {
width: 7px;
height: 7px;
background-color: #85858541;
border-radius: 2px;
}
.permissions-matrix-table .ant-table-tbody .ant-table-cell {
vertical-align: middle;
}
.permissions-matrix:hover .ant-table-tbody > tr > .ant-table-cell {
box-shadow: inset 0 0 0 100vmax
color-mix(
in srgb,
var(--color-text)
calc(
4% *
(
1 -
min(
1,
abs(
calc(
var(--permissions-col, 0) -
var(--permissions-hovered-col, -1)
)
)
)
)
),
transparent
);
}
.permissions-matrix-table .permissions-matrix-group-row > .ant-table-cell {
font-weight: 600;
background-color: color-mix(
in srgb,
var(--color-text) 6%,
var(--layout-header-bg)
);
}
.permissions-matrix-table
.permissions-matrix-group-row
> .ant-table-cell.ant-table-cell-row-hover {
background: color-mix(
in srgb,
var(--color-text) 10%,
var(--layout-header-bg)
);
}
.permissions-matrix-table .ant-table-row-expand-icon,
.permissions-matrix-table .ant-table-row-indent {
display: none;
}
.permissions-matrix-expand-button.ant-btn {
width: 22px;
min-width: 22px;
height: 22px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
}
.permissions-matrix-expand-button.ant-btn:hover,
.permissions-matrix-expand-button.ant-btn:focus,
.permissions-matrix-expand-button.ant-btn:focus-visible {
color: inherit;
}
.permissions-matrix-expand-spacer {
display: inline-block;
width: 18px;
height: 22px;
flex-shrink: 0;
}
.permissions-matrix-expand-icon {
font-size: 12px !important;
color: inherit;
transition: transform 0.2s ease;
}
.permissions-matrix-expand-icon-open {
transform: rotate(90deg);
}
.permissions-matrix-table .ant-table-thead > tr > th {
vertical-align: bottom;
padding-top: 12px;
padding-bottom: 12px;
}
.permissions-matrix-table .ant-table-thead .ant-table-column-title {
display: flex;
align-items: flex-end;
justify-content: center;
height: 100%;
}
.permissions-matrix-header {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
line-height: 1.2;
display: inline-block;
}
.permission-checkbox {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
margin: 0;
border: none;
background: transparent;
cursor: pointer;
vertical-align: middle;
flex-shrink: 0;
}
.permission-checkbox:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.permission-checkbox:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 50%;
}
.permission-checkbox-face {
position: absolute;
inset: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.permission-checkbox-inherit {
border: 1.5px solid;
background: transparent;
box-sizing: border-box;
}
.permission-checkbox[data-state='inherit'] .permission-checkbox-inherit,
.permission-checkbox[data-state='allow'] .permission-checkbox-allow,
.permission-checkbox[data-state='deny'] .permission-checkbox-deny,
.permission-checkbox[data-state='mixed'] .permission-checkbox-mixed {
opacity: 1;
}
.permission-checkbox-square {
width: 7px;
height: 7px;
background-color: #ffffff;
border-radius: 1px;
}
.permission-checkbox-face .anticon {
display: flex;
line-height: 0;
}
.permission-checkbox-face .anticon svg path {
stroke: currentColor;
stroke-width: 8px;
}
.dashboard-splitter.farmcontrol-splitter > .ant-splitter-bar,
.dashboard-splitter.farmcontrol-splitter > .adaptive-splitter-bar {
margin: 0;
}
.dashboard-splitter.farmcontrol-splitter > .ant-splitter-panel,
.dashboard-splitter.farmcontrol-splitter > .adaptive-splitter-panel {
padding: 0;
}
.dashboard-splitter.farmcontrol-splitter
> .ant-splitter-bar
.ant-splitter-bar-dragger::before,
.dashboard-splitter.farmcontrol-splitter
> .adaptive-splitter-bar
.adaptive-splitter-bar-dragger::before {
background: transparent;
}
.dashboard-splitter.farmcontrol-splitter
> .ant-splitter-bar
.ant-splitter-bar-dragger::after,
.dashboard-splitter.farmcontrol-splitter
> .adaptive-splitter-bar
.adaptive-splitter-bar-dragger::after {
content: none;
}
.object-display-tag
.elipsis-text-wrapper.ant-typography
code.elipsis-text-measure,
.object-display-tag .elipsis-text-wrapper.ant-typography code.elipsis-text-full,
.object-display-tag
.elipsis-text-wrapper.ant-typography
code.elipsis-text-truncated {
background-color: transparent !important;
border: 1px solid transparent !important;
max-width: calc(100%);
padding: 0;
margin: 0;
font-size: 95%;
}
.ant-tag.object-display-tag,
.object-select-multiple.ant-select-outlined.ant-select-multiple
.ant-select-selection-item {
border: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
}
.code-block-editor .simplebar-content-wrapper {
background-color: var(--layout-modal-bg);
}
.previewProgressOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
backdrop-filter: blur(8px);
background-color: color-mix(
in srgb,
var(--layout-header-bg) 20%,
transparent
);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
.previewProgressOverlay.visible {
opacity: 1;
pointer-events: auto;
}
.previewProgressOverlay.hidden {
opacity: 0;
pointer-events: none;
}
.react-pdf__Page {
border: 1px solid #000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.no-navigation-labels.ant-menu-horizontal .ant-menu-item {
padding: 0 5px;
}
.overview-drag-handle {
cursor: grab;
display: inline-flex;
align-items: center;
color: var(--color-text);
padding: 0 4px;
}
.overview-drag-handle svg path {
stroke: currentColor;
stroke-width: 3px;
}
.overview-drag-handle:active {
cursor: grabbing;
}
.overview-section-wrapper.overview-dragging,
.overview-flex-columns-item.overview-dragging,
.overview-stat-wrapper.overview-dragging {
opacity: 0.4;
}
.overview-stat-wrapper.overview-drag-over,
.overview-flex-columns-item.overview-drag-over {
outline: 2px dashed color-mix(in srgb, var(--color-primary) 50%, transparent);
outline-offset: 4px;
border-radius: 12px;
}
.overview-stats-display {
width: 100%;
}
.overview-stat-item {
flex: 1 1 var(--stat-min-width, 175px);
min-width: var(--stat-min-width, 175px);
}
.overview-stat-item .ant-card,
.overview-stat-item .ant-tag {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.overview-stat-item .ant-tag {
display: inline-flex;
}
.overview-section-wrapper {
position: relative;
}
.overview-flex-columns {
position: relative;
box-sizing: border-box;
width: 100%;
}
.overview-flex-columns.is-editing {
border: 2px dashed color-mix(in srgb, var(--color-text) 25%, transparent);
border-radius: 24px;
padding: 12px;
}
.overview-flex-columns.is-empty {
min-height: 72px;
}
.overview-flex-columns-actions.ant-card {
position: absolute;
top: 0;
left: 0px;
transform: translateY(-60%);
z-index: 4;
width: max-content;
}
.overview-flex-columns-actions.ant-card .ant-card-body {
line-height: 1;
}
.overview-flex-columns-actions .ant-btn {
height: auto;
width: auto;
padding: 0 2px;
}
.overview-flex-columns-row {
width: 100%;
}
.overview-flex-columns.is-vertical .overview-flex-columns-item {
flex: none;
width: 100%;
transition: none;
}
.overview-flex-columns-empty {
flex: 1;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.overview-flex-columns-item {
position: relative;
flex: 1 1 0;
min-width: 0;
overflow: visible;
transition: flex-grow 0.1s ease-in-out;
}
.overview-flex-columns.is-resizing,
.overview-flex-columns.is-resizing * {
cursor: col-resize !important;
user-select: none;
}
.overview-flex-columns-separator {
position: absolute;
top: 0;
bottom: 0;
left: 100%;
margin-left: calc(var(--ant-margin-lg, 24px) / 2);
transform: translateX(-50%);
width: 16px;
z-index: 3;
display: flex;
justify-content: center;
cursor: col-resize;
touch-action: none;
user-select: none;
}
.overview-flex-columns-separator-line {
width: 2px;
height: 100%;
box-sizing: border-box;
border-left: 2px solid color-mix(in srgb, var(--color-text) 8%, transparent);
pointer-events: none;
}
.overview-flex-columns-separator:hover .overview-flex-columns-separator-line,
.overview-flex-columns-separator.is-active
.overview-flex-columns-separator-line {
border-left: none;
background-color: #a3e3ff;
}
.dark-mode
.overview-flex-columns-separator:hover
.overview-flex-columns-separator-line,
.dark-mode
.overview-flex-columns-separator.is-active
.overview-flex-columns-separator-line {
background-color: #0e3a5b;
}
.overview-flex-columns-separator-handle {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background-color: color-mix(in srgb, var(--color-text) 18%, transparent);
pointer-events: none;
z-index: 4;
}
.overview-flex-columns-item > .ant-collapse {
width: 100%;
min-width: 0;
}
.overview-flex-columns.is-drag-over {
outline: 2px dashed color-mix(in srgb, var(--color-primary) 50%, transparent);
outline-offset: 2px;
}
.overview-section-wrapper.overview-insert-before::before,
.overview-section-wrapper.overview-insert-after::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 0;
border-top: 2px dashed
color-mix(in srgb, var(--color-primary) 50%, transparent);
pointer-events: none;
z-index: 2;
}
.overview-section-wrapper.overview-insert-before::before {
top: calc(var(--ant-margin-lg, 24px) / -2);
transform: translateY(-50%);
}
.overview-section-wrapper.overview-insert-after::after {
bottom: calc(var(--ant-margin-lg, 24px) / -2);
transform: translateY(50%);
}
.overview-stat-wrapper {
cursor: grab;
}
.overview-stat-wrapper:active {
cursor: grabbing;
}
.info-collapse-resize-handle {
display: flex;
position: absolute;
bottom: 0;
left: 0;
right: 0;
justify-content: center;
align-items: center;
height: 12px;
margin-top: -2px;
cursor: ns-resize;
touch-action: none;
user-select: none;
}
.info-collapse-resize-handle::after {
content: '';
width: 20px;
height: 2px;
border-radius: 1px;
background: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.file-gallery-list-preview {
position: relative;
width: 100%;
max-height: 600px;
overflow: hidden;
}
.file-gallery-list-scroll {
width: 100%;
}
.file-gallery-list-preview .simplebar-track.simplebar-vertical {
display: none;
}
.file-gallery-list-preview .simplebar-track.simplebar-horizontal {
display: none;
}
.file-gallery-list-preview .simplebar-content-wrapper {
scroll-snap-type: x mandatory;
scroll-padding-inline: 0;
}
.file-gallery-list-preview:not(.is-mobile) .simplebar-content-wrapper {
mask-image: linear-gradient(
to right,
transparent 0,
#000 var(--file-gallery-side-padding, 66px),
#000 calc(100% - var(--file-gallery-side-padding, 66px)),
transparent 100%
);
-webkit-mask-image: linear-gradient(
to right,
transparent 0,
#000 var(--file-gallery-side-padding, 66px),
#000 calc(100% - var(--file-gallery-side-padding, 66px)),
transparent 100%
);
}
.file-gallery-list-track {
display: flex;
align-items: center;
}
.file-gallery-list-slide {
box-sizing: border-box;
scroll-snap-align: center;
height: 100%;
min-width: 0;
display: flex;
justify-content: center;
align-items: center;
}
.file-gallery-list-preview-frame {
flex: 0 0 auto;
max-width: 100%;
max-height: 600px;
overflow: hidden;
border-radius: 8px;
}
.file-gallery-list-nav {
position: absolute;
top: 50%;
z-index: 2;
transform: translateY(-50%);
}
.file-gallery-list-nav-left {
left: 16px;
}
.file-gallery-list-nav-right {
right: 16px;
}
.file-gallery-footer {
padding: 0 24px;
}
.file-gallery-list-thumb-container {
height: 64px;
width: 64px;
}
.file-gallery-list-thumb {
position: relative;
flex: 0 0 auto;
cursor: pointer;
border-radius: 5px;
line-height: 0;
}
.file-gallery-list-thumb.is-active {
outline: 2px solid var(--color-primary);
outline-offset: 0;
}
.file-gallery-list-thumb-delete.ant-card {
position: absolute;
top: 0;
right: 0;
transform: translate(30%, -60%);
z-index: 4;
width: max-content;
}
.file-gallery-list-thumb-delete.ant-card .ant-card-body {
line-height: 1;
}
.file-gallery-list-thumb-delete .ant-btn {
height: auto;
width: auto;
padding: 0 2px;
}
.file-gallery-list-upload {
flex: 0 0 auto;
}
.file-gallery-list-dropzone.ant-upload.ant-upload-drag {
width: 64px;
height: 64px;
padding: 0;
border-radius: 5px;
border: 1px dashed color-mix(in srgb, var(--color-primary) 50%, transparent);
background: repeating-linear-gradient(
-45deg,
color-mix(in srgb, var(--color-primary) 12%, transparent),
color-mix(in srgb, var(--color-primary) 12%, transparent) 6px,
transparent 6px,
transparent 12px
);
}
.file-gallery-list-dropzone.ant-upload.ant-upload-drag
.ant-upload-drag-container {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 64px;
}
.file-gallery-list-dropzone.ant-upload.ant-upload-drag:hover,
.file-gallery-list-dropzone.ant-upload.ant-upload-drag.ant-upload-drag-hover {
border-color: var(--color-primary);
}
.file-gallery-list-dropzone .anticon {
font-size: 18px;
color: var(--color-primary);
}
.ant-table-wrapper .ant-table-cell,
.ant-table-wrapper .ant-table-thead > tr > th,
.ant-table-wrapper .ant-table-tbody > tr > th,
.ant-table-wrapper .ant-table-tbody > tr > td,
.ant-table-wrapper tfoot > tr > th,
.ant-table-wrapper tfoot > tr > td {
padding: 12px 8px;
}
/* FilterInput */
.filter-input-operand-icon {
font-size: 8px;
}
.filter-input-operand-icon--chevron {
font-size: 11px;
}
.filter-input-operand-icon--gt {
margin-left: 1px;
}
.filter-input-operand-icon--lt {
margin-right: 1px;
}
.filter-input-wildcard,
[data-wildcard] {
color: var(--color-primary);
}
.filter-input-operand-tag {
margin-inline-end: 0;
margin-right: 0;
height: 18px;
cursor: default;
padding: 0 4px;
margin-top: -2px;
line-height: 1.37;
user-select: none;
pointer-events: none;
flex-shrink: 0;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.filter-input-operand-chip {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin: 0 2px;
user-select: none;
flex-shrink: 0;
}
.filter-input-property-filter {
display: flex;
flex-direction: column;
max-width: 280px;
margin: 0;
vertical-align: top;
overflow: hidden;
--property-filter-panel-max-height: 220px;
}
.filter-input-property-filter-quick {
flex-shrink: 0;
}
.filter-input-property-filter-divider {
margin: 4px 0;
flex-shrink: 0;
}
.filter-input-property-filter
> .filter-input-property-filter-scroll.scrollbox-inner {
height: auto !important;
max-height: var(--property-filter-panel-max-height);
max-width: 280px;
flex-shrink: 1;
min-height: 0;
}
.filter-input-property-filter
> .filter-input-property-filter-scroll.scrollbox-inner
.simplebar-wrapper {
max-height: var(--property-filter-panel-max-height);
}
.filter-input-property-filter .simplebar-content-wrapper {
max-width: none;
}
.filter-input-property-filter .simplebar-content {
display: inline-block;
}
.filter-input-property-filter-body {
padding: 12px 26px 12px 16px;
max-width: 280px;
box-sizing: border-box;
}
.filter-input-property-filter-content {
width: max-content;
max-width: 100%;
}
.filter-input-affix {
width: 100%;
display: inline-flex;
position: relative;
}
.filter-input-affix:not(.filter-input-affix--disabled) {
cursor: text;
}
.filter-input-affix--disabled {
cursor: not-allowed;
}
.filter-input-affix--elevated {
z-index: 3 !important;
}
.filter-input-editor::-webkit-scrollbar {
display: none;
height: 0;
}
.filter-input-editor {
display: block;
padding: 0;
border: none;
border-radius: 0;
outline: none;
box-shadow: none;
background: transparent;
flex: auto;
min-width: 0;
width: 100%;
font-size: inherit;
line-height: inherit;
color: inherit;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
word-break: keep-all;
overflow-wrap: normal;
caret-color: var(--ant-color-text, inherit);
cursor: text;
}
.filter-input-affix--disabled .filter-input-editor {
cursor: not-allowed;
}
.filter-input-placeholder {
position: absolute;
inset-inline-start: var(--ant-input-padding-inline, 11px);
inset-inline-end: var(--ant-input-padding-inline, 11px);
top: 0;
bottom: 0;
display: flex;
align-items: center;
color: var(--ant-color-text-placeholder, rgba(0, 0, 0, 0.25));
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 1;
}
.filter-input-affix--has-clear .filter-input-placeholder {
inset-inline-end: calc(var(--ant-input-padding-inline, 11px) + 22px);
}
.filter-input-popover .ant-popover-inner {
padding: 4px;
}
.filter-input-popover-anchor {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
pointer-events: none;
}
.list-view-tabs {
flex: 1;
min-width: 0;
}
.list-view-tabs .ant-input-sm {
border-radius: 0;
}
.list-view-tabs-spin {
flex: 1;
min-width: 0;
}
.list-view-tabs-spin > .ant-spin-container {
display: flex;
flex: 1;
min-width: 0;
}
.list-view-tabs-segmented-wrap {
flex: 1;
min-width: 0;
}
.list-view-tabs-segmented-wrap .simplebar-track.simplebar-vertical {
display: none;
}
.list-view-tabs-segmented-inner {
width: max-content;
}
.segmented-nav {
display: inline-flex;
width: max-content;
flex-shrink: 0;
padding: 0;
}
.segmented-nav-group {
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.segmented-nav-thumb {
position: absolute;
top: 0;
left: 0;
z-index: 0;
border-radius: 12px;
background: var(--color-button-background);
pointer-events: none;
will-change: transform, width;
transition:
transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.segmented-nav-item {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border: 1px solid var(--color-list-view-tabs-border);
border-radius: 12px;
background: transparent;
cursor: pointer;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
box-shadow: none;
outline: none;
transition:
background 0.2s ease,
border 0.2s ease;
}
.segmented-nav-item-label {
position: relative;
z-index: 1;
display: flex;
align-items: center;
min-height: 30px;
line-height: 30px;
padding-inline: 12px;
}
.segmented-nav-item-icon {
padding-inline: 8px;
min-width: 32px;
}
.segmented-nav-item-icon-contents {
position: relative;
z-index: 1;
display: flex;
align-items: center;
min-height: 30px;
line-height: 30px;
}
.segmented-nav-item:focus-visible {
outline: 2px solid
color-mix(in srgb, var(--color-primary, #1677ff) 45%, transparent);
outline-offset: 2px;
}
.segmented-nav-item-selected,
.segmented-nav-item:not(.segmented-nav-item-disabled):hover {
background: var(--color-button-background);
border: 1px solid
color-mix(
in srgb,
var(--color-button-border) 40%,
var(--color-button-background)
);
}
.segmented-nav-item-disabled {
cursor: not-allowed;
opacity: 0.45;
}
.segmented-nav-disabled .segmented-nav-item {
cursor: not-allowed;
}
.list-view-tabs-label {
height: 30px;
}
.list-view-tabs-label-editing .ant-input {
font-size: inherit;
}
.list-view-tabs-label-editing {
margin: 0px -8px;
max-width: none;
min-width: 0;
}
.list-view-tabs-label-editing .list-view-tabs-name-input-wrap {
flex: 0 0 auto;
width: auto;
}
.list-view-tabs-name-input-wrap {
display: inline-block;
position: relative;
vertical-align: top;
min-width: 0;
}
.list-view-tabs-name-input-sizer {
visibility: hidden;
white-space: pre;
font-size: inherit;
line-height: inherit;
font-family: inherit;
min-height: 1em;
}
.list-view-tabs-label-editing .list-view-tabs-name-input {
position: absolute;
inset: 0;
width: 100%;
min-width: 0;
padding-inline: 0;
}
.list-view-tabs-color-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.list-view-tabs-editing
.segmented-nav-item
.ant-color-picker-trigger.ant-color-picker-sm {
border-radius: 8px;
}
.list-view-tabs-privacy-button,
.list-view-tabs-options-button {
padding-inline: 4px;
min-width: 20px;
}
.list-view-tabs-options-dropdown {
display: flex;
flex-direction: column;
}
.list-view-tabs-options-dropdown-privacy {
margin: 3px 12px 14px 16px;
}
.segmented-nav-drag-handle {
flex-shrink: 0;
}
.segmented-nav-item-dragging {
opacity: 0.4;
}
.segmented-nav-item-drop-before::before,
.segmented-nav-item-drop-after::after {
content: '';
position: absolute;
top: 4px;
bottom: 4px;
width: 2px;
border-radius: 1px;
background: var(--color-primary, #1677ff);
pointer-events: none;
}
.segmented-nav-item-drop-before::before {
left: -5px;
}
.segmented-nav-item-drop-after::after {
right: -5px;
}
.segmented-nav-reordering
.segmented-nav-item:not(.segmented-nav-item-dragging) {
cursor: default;
}
.list-view-tabs-add-button {
padding-inline: 4px;
min-width: 20px;
}
.state-tag-loading svg path {
stroke: currentColor;
stroke-width: 12px;
}