comty/packages/app/src/theme/fixments.less

@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;
            }
        }
    }
}