Global style sheet for IllumiDesk

illumidesk-global-style

@import "~antd/lib/style/color/colors.less";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;500;700;900&display=swap&css');

body{
    font-family: 'Inter', sans-serif;
}

:global(.site-layout) :global(.site-layout-background) {
    background: @white;
    position: relative;
}

header:global(.ant-layout-header) {
    padding: 0;
    width: 100%;
    position: fixed;
    background: @white;
    z-index: 1;
    display: flex;
    justify-content: space-between;
}

:global(.ant-layout-sider), :global(.site-layout) {
    padding-top: 64px;
}

:global(.ant-menu) > :global(.ant-menu-item:first-child) {
    margin-top: 0;
}

:global(.ant-layout-content) :global(.ant-page-header-heading-sub-title) {
    color: rgba(0, 0, 0);
}

:global(.ant-divider-horizontal.ant-divider-with-text){
    &::before, &::after {
        color: rgba(0, 0, 0, 0.15);
    }
}

:global(.success-text) {
    color: @info-color;
}

:global(.warning-text) {
    color: @warning-color;
}

:global(.error-text) {
    color: @error-color;
}

:global(.ant-menu-item.ant-menu-item-selected .ant-btn) {
    color: @green-10;
    font-weight: 600;
}

:global(.ant-btn-primary) {
    &:global(.red) {
        background-color: @red-5;
        border-color: @red-5;

        &:focus, &:hover {
            background-color: @red-4;
            border-color: @red-4;
        }
    }
}

:global(.anticon) {
    &:global(.green-icon) {
        color: @green-bright;
    }
}

:global(.ant-form-item-control-input-content) {
    > input:read-only {
        background-color: @green-1;
    }
}


.ant-notification{
    top: 64px !important;
    margin: 0px !important;
}

.ant-notification-notice {
    width: calc(100vw - 256px) !important;
    margin: 0px !important;
    font-weight: 500;
    font-size: 16px;
}

.ant-notification-notice-success {
    background: #ECFDF5 !important;
    color: #065F46;

    .anticon.ant-notification-notice-icon-info {
        color: #34D399;
    }

    .ant-notification-notice-close{
        color: #10B981;
    }
}

.ant-notification-notice-error {
    background: #FEF2F2 !important;
    color: #991B1B;

    .anticon.ant-notification-notice-icon-info {
        color: #F87171;
    }

    .ant-notification-notice-close{
        color: #EF4444;
    }
}

.loader-wrapper{
    padding: 12rem 2rem;

    @media only screen and (max-width: 1024px){
        padding: 1rem;
    }
}