jb-image-input/lib/ib-image-input.css

image input web component

:host {
    width: var(--jb-image-input-width, 100%);
    height: var(--jb-image-input-height, 100%);
}

.jb-image-input-web-component {
    position: relative;
    background-color: var(--bg-color);
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    /* &.--has-error {
         border: solid 1px #ff1229;
         border-bottom: solid 3px #ff1229;
         background-color: #fdf1f1;
     }*/

    &[status="empty"] {
        .placeholder-wrapper {
            display: flex;
        }
    }

    .placeholder-wrapper {
        width: 100%;
        height: 100%;
        display: none;
        cursor: pointer;

        background-color: var(--jb-image-input-placeholder-bg-color, transparent);

        .default-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 0.25rem;
            padding: 0.5rem;

            .icon-wrapper {
                svg {
                    width: 64px;
                    height: 64px;
                    fill: var(--placeholder-neutral-color);

                    .cls-1 {
                        fill: var(--placeholder-primary-color);
                    }
                }
            }

            .placeholder-title {
                color: var(--placeholder-title-color);
                font-variation-settings: "wght" 600;
            }

            .message-box {
                font-size: var(--jb-image-input-message-font-size, 0.7rem);
                padding: 2px 8px;
                color: var(--message-color);
                display: var(--jb-image-input-message-box-display, block);

                &:empty {
                    padding: 0;
                }

                &.error {
                    color: var(--message-error-color);
                }
            }
        }


    }

    &[status="uploading"] {
        .upload-loading-wrapper {
            display: flex;
        }
    }

    .upload-loading-wrapper {
        display: none;
    }

    &[status="uploaded"] {
        .download-loading-wrapper {
            display: flex;
        }
    }

    .download-loading-wrapper {
        display: none;
    }

    &[status="downloaded"] {
        .image-wrapper {
            display: block;

            img {
                object-fit: contain;
                width: 100%;
                height: 100%;
            }
        }
    }

    .image-wrapper {
        position: relative;
        display: none;
        width: 100%;
        height: 100%;
        object-fit: contain;

        &:hover .image-overlay {
            opacity: 1;
        }

        .image-overlay {
            cursor: pointer;
            opacity: 0;
            transition: all 0.3s 0s ease;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--overlay-bg-color);
            backdrop-filter: blur(8px);
            z-index: 1;
            overflow: hidden;
            border-radius: var(--border-radius);

            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;

            .reselect-button {
                background-color: transparent;
                border-radius: 1rem;
                padding: 0.25rem 0.5rem;
                color: var(--reselect-button-color);
            }
        }
    }

    .error-overlay {
        display: none;
        transition: all 0.3s 0s ease;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--error-overlay-bg-color);
        backdrop-filter: blur(8px);
        z-index: 1;
        overflow: hidden;
        border-radius: var(--border-radius);
        /**/
        justify-content: center;
        align-items: center;

        .error-content {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;

            .error-icon {
                fill: var(--error-overlay-icon-color);
                width: 4rem;
                height: 4rem;
            }

            .error-message {
                color: var(--error-overlay-color);
                outline: var(--error-overlay-outline);
                font-size: 1.3rem;
            }
        }
    }

}