@buttonsBorderRadius: 9px; :root { --adm-color-background: var(--background-color-primary); } // Fixments .ant-result-extra { display: flex; align-items: center; justify-content: center; } .ant-modal-confirm-btns { display: flex; } .ant-message { svg { margin: 0; } } .ant-avatar-square { border-radius: 12px; } // fix results .ant-result { .ant-result-content { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px; background-color: var(--background-color-accent); color: var(--background-color-primary); h1, h2, h3, h4, h5, p, span { margin: 0; } } } .ant-select { .ant-select-arrow { right: 0px; } } // fix colors for select & dropdown .ant-select:not(.ant-select-customize-input) .ant-select-selector { background-color: var(--background-color-primary); } .ant-select-dropdown { background-color: var(--background-color-primary) !important; color: var(--text-color) !important; .ant-select-item-option:not(.ant-select-item-option-disabled) { background-color: var(--background-color-primary) !important; color: var(--text-color) !important; } .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { background-color: var(--background-color-primary-2) !important; color: var(--text-color) !important; } } .ant-dropdown-menu { background-color: var(--background-color-primary) !important; } // fix buttons .ant-btn { display: inline-flex; align-items: center; justify-content: center; svg { margin: 0 !important; } gap: 10px; span { margin: 0; line-height: 1rem; } } .ant-btn-primary:not(.ant-btn-dangerous) { svg { color: var(--background-color-primary) !important; } span { color: var(--background-color-primary) !important; margin: 0; } background-color: var(--colorPrimary); &:hover { background-color: var(--colorPrimary); } } .ant-btn-primary[disabled] { opacity: 0.5 !important; svg { color: unset !important; } span { color: unset !important; margin: 0; } } .ant-btn[disabled] { opacity: 0.5 !important; } .ant-btn-default { &:not(.ant-btn-dangerous) { border-color: var(--background-color-primary-2) !important; &:hover { border-color: var(--background-color-primary) !important; } &:active { border-color: var(--background-color-primary) !important; } &:focus { border-color: var(--background-color-primary) !important; } } color: var(--text-color); background: var(--background-color-primary); &:hover { color: var(--text-color); background: var(--background-color-primary-2); } &:active { color: var(--text-color); background: var(--background-color-primary-2); } &:focus { color: var(--text-color); background: var(--background-color-primary-2); } } .ant-btn-dangerous { span { color: var(--ant-error-color); } } .ant-btn[disabled], .ant-btn[disabled]:hover, .ant-btn[disabled]:focus, .ant-btn[disabled]:active { background-color: var(--background-color-accent); } // fix sliders colors .ant-slider-rail { background-color: var(--background-color-primary-2); &:hover { background-color: var(--background-color-primary); } } // fix menu colors .ant-menu, .ant-menu ul { background: transparent !important; background-color: transparent !important; border-right: 0 !important; .ant-menu-item { display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; padding: 10px 10px 10px 25px !important; margin: 3px 0; color: var(--background-color-contrast); h1, h2, h3, h4, h5, h6, span, p { color: var(--background-color-contrast); } } } .ant-menu-sub { padding-left: 40px !important; } .ant-menu-submenu { .ant-menu-submenu-title { color: var(--background-color-contrast) !important; svg { color: var(--background-color-contrast); } .ant-menu-title-content { color: var(--background-color-contrast); } } } .ant-menu-item { color: var(--text-color); &:hover { color: var(--text-color); background-color: var(--background-color-primary-2); } } .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { color: var(--text-color); background-color: var(--background-color-accent) !important; &::after { opacity: 0; } } .ant-menu-item:active { background-color: var(--background-color-primary-2) !important; } // fix uploader drag .ant-upload-drag { color: var(--text-color) !important; background: var(--background-color-primary) !important; border-color: var(--background-color-primary-2) !important; } .ant-modal-content { background-color: var(--background-color-primary) !important; p, span, svg { color: var(--text-color) !important; } .ant-modal-confirm-content { color: var(--text-color) !important; } } .ant-notification-notice { background-color: var(--background-color-primary) !important; h1, h2, h3, h4, h5, h6, p, span { color: var(--text-color) !important; } .ant-notification-notice-message, .ant-notification-notice-description { color: var(--text-color) !important; } } .ant-message-notice-content { background-color: var(--background-color-primary) !important; h1, h2, h3, h4, h5, h6, p, span { color: var(--text-color) !important; } } .ant-message-error { svg { color: var(--ant-error-color) !important; } } .ant-message-info { svg { color: var(--ant-info-color) !important; } } .ant-message-warning { svg { color: var(--ant-warning-color) !important; } } .ant-message-success { svg { color: var(--ant-success-color) !important; } } // FIX TAGS COLORS .ant-tag-red { svg, span { color: #cf1322 !important; } } .ant-tag-volcano { svg, span { color: #d4380d !important; } } .ant-tag-orange { svg, span { color: #d46b08 !important; } } .ant-tag-gold { svg, span { color: #d48806 !important; } } .ant-tag-yellow { svg, span { color: #d4b106 !important; } } .ant-tag-lime { svg, span { color: #7cb305 !important; } } .ant-tag-green { svg, span { color: #389e0d !important; } } .ant-tag-cyan { svg, span { color: #08979c !important; } } .ant-tag-blue { svg, span { color: #096dd9 !important; } } .ant-tag-geekblue { svg, span { color: #1d39c4 !important; } } .ant-tag-purple { svg, span { color: #531dab !important; } } .ant-tag-magenta { svg, span { color: #c41d7f !important; } } // fix input .ant-input { background-color: var(--background-color-accent); color: var(--text-color); } .ant-input-affix-wrapper { background-color: var(--background-color-accent); color: var(--text-color); } .ant-input-affix-wrapper-status-error { background-color: var(--background-color-accent) !important; color: var(--text-color); } // fix adm cards .adm-card { background: var(--background-color-accent); color: var(--text-color); } .adm-floating-panel { .adm-floating-panel-header { border-top: 1px solid var(--border-color); } } .ant-result-title { color: var(--text-color); } .ant-result-subtitle { color: var(--text-color); } .ant-typography { color: var(--text-color); } .ant-slider-dot { background-color: transparent !important; border-width: 4px !important; } .drawer { z-index: 1000; } .ant-notification-notice { .ant-notification-notice-with-icon { .ant-notification-notice-message { margin-inline-start: 46px!important; } .ant-notification-notice-description { margin-inline-start: 46px!important; } .ant-notification-notice-icon { max-width: 40px; img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } } } }