rentgen/components/report-window/screenshot-generator.scss

@import './../../styles/colors.scss';

h1 {
    font-size: 1.1rem;
    margin-bottom: calc(24 / 16 * 1rem);
}

h2 {
    font-weight: 600;
    font-size: 0.875rem;
}

.images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    grid-gap: 1rem;
    margin: 2rem 0 1rem;
    max-height: 45vh;
    overflow-y: scroll;
    overflow-x: clip;
    z-index: 1;
    position: relative;
}

.generator-container {
    max-width: 100ex;
    margin: 0 auto;
    font-size: calc(14 / 16 * 1rem);

    a {
        color: $ultra-black-color;
    }
}

.buttons-container {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    padding: 1em 0;
}

.container {
    padding: 0.75rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 3px;
    box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px;
    background-color: #fff;
}

.browser {
    height: 8.667rem;
    font-weight: 800 !important;
    color: $disabled-grey !important;
    border: 1px solid $disabled-grey;
    background-image: linear-gradient(to bottom, $icd-rentgen-color 20%, #fff 20%, #fff 100%);
    animation: xray 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite;

    &--filled {
        background-size: 100%;
        background-position-y: 19px;
        animation: none;

        .browser__header {
            background-color: #fff;
        }
    }

    @keyframes xray {
        to {
            background-position-y: 11.1rem;
        }
    }

    &__header {
        height: 1.667rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 0 0.5rem;
        font-size: 1.25rem;
        border-bottom: 1px solid $disabled-grey;

        &--address-bar {
            border: 1px solid $disabled-grey;
            height: 1rem;
            width: 10rem;
            font-size: 0.667rem;
            font-weight: 400;
            padding-left: 0.25rem;
            color: #000;
            overflow: visible;
            word-break: break-all;
            inline-size: 10rem;
        }

        &--controls {
            padding-bottom: 0.25rem;
            font-weight: 900;
        }
    }

    &__content {
        height: 6.667rem;
    }
}