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

// Fixments
.ant-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    user-select: none;
    --webkit-user-select: none;
}

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

// 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-primary2) !important;
        color: var(--text-color) !important;
    }
}

// fix buttons
.ant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    svg {
        margin: 0 10px 0 0 !important;
    }

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

.ant-btn-primary[disabled] {
    svg {
        color: unset !important;
    }

    span {
        color: unset !important;
        margin: 0;
    }
}

.ant-btn-default {
    &:not(.ant-btn-dangerous) {
        border-color: var(--background-color-primary2) !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-primary2);
    }

    &:active {
        color: var(--text-color);
        background: var(--background-color-primary2);
    }

    &:focus {
        color: var(--text-color);
        background: var(--background-color-primary2);
    }
}

.ant-btn-dangerous {
    span {
        color: var(--ant-error-color);
    }
}

// fix sliders colors
.ant-slider-rail {
    background-color: var(--background-color-primary2);

    &:hover {
        background-color: var(--background-color-primary);
    }
}

// fix menu colors
.ant-menu-item {
    color: var(--text-color);
    border-radius: 8px;
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    color: var(--text-color);
    background-color: var(--background-color-primary) !important;

    &::after {
        opacity: 0;
    }
}

.ant-menu-item:active {
    background-color: var(--background-color-primary2) !important;
}

// fix uploader drag
.ant-upload-drag {
    color: var(--text-color) !important;
    background: var(--background-color-primary) !important;
    border-color: var(--background-color-primary2) !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;
    }

    border-radius: 10px;
}

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