@robotical/sensors-dashboard/dist/screens/LandingPage/styles.module.css

A dashboard tool for depicting Marty data by Robotical

.mainContainer {
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin: 0 auto;
    padding: clamp(1.2rem, 2vw, 2.4rem);
    grid-template-areas: "header" "main-content";
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-color: var(--colour-BLUE_LIGHT_2) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    touch-action: pan-y;
    container-type: inline-size;
    background:
        radial-gradient(circle at 12% 8%, rgba(55, 171, 200, 0.13), transparent 26rem),
        linear-gradient(180deg, var(--colour-BLUE_LIGHT_1) 0%, var(--colour-TRUE_WHITE) 62%);
}

.mainContainerInModal {
    height: 100%;
    max-height: none;
}

.mainContainer:focus-visible {
    outline: 0.3rem solid var(--focus-ring);
    outline-offset: -0.3rem;
}

.scrollCue {
    position: sticky;
    top: 50%;
    right: 1.4rem;
    z-index: 20;
    width: 2rem;
    height: 0;
    align-self: flex-end;
    margin-right: 1.4rem;
    pointer-events: none;
    transform: translateY(-50%);
    opacity: 0.72;
}

.scrollCueControls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 2rem;
}

.scrollCueIcon {
    color: var(--colour-MAIN_BLUE);
    filter: drop-shadow(0 0.1rem 0.2rem rgba(38, 38, 38, 0.16));
    font-size: 1.2rem;
    transition: opacity 120ms ease;
}

.scrollCueIconMuted {
    opacity: 0.24;
}

.scrollCueTrack {
    position: relative;
    width: 0.3rem;
    height: 6.4rem;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(55, 171, 200, 0.08),
        rgba(55, 171, 200, 0.72),
        rgba(55, 171, 200, 0.08)
    );
}

.scrollCueThumb {
    position: absolute;
    top: 0.2rem;
    left: 50%;
    width: 0.8rem;
    height: 1.6rem;
    border: 0.1rem solid var(--colour-TRUE_WHITE);
    border-radius: 999px;
    background-color: var(--colour-MAIN_BLUE);
    box-shadow: 0 0.2rem 0.6rem rgba(38, 38, 38, 0.18);
    transform: translate(
        -50%,
        calc(var(--scroll-cue-progress, 0) * 4.4rem)
    );
    transition: transform 80ms linear;
}

.mainContainer::-webkit-scrollbar {
    width: 1rem;
}

.mainContainer::-webkit-scrollbar-track {
    background: transparent;
}

.mainContainer::-webkit-scrollbar-thumb {
    min-height: 4rem;
    border: 0.25rem solid transparent;
    border-radius: 999px;
    background-color: var(--colour-BLUE_LIGHT_2);
    background-clip: content-box;
}

.mainContainer::-webkit-scrollbar-thumb:hover {
    background-color: var(--colour-MAIN_BLUE);
}

@container (max-width: 520px) {
    .scrollCue {
        right: 0.8rem;
        margin-right: 0.8rem;
    }

    .scrollCueTrack {
        height: 5.2rem;
    }

    .scrollCueThumb {
        transform: translate(
            -50%,
            calc(var(--scroll-cue-progress, 0) * 3.2rem)
        );
    }
}

@media (max-width: 640px) {
    .mainContainer {
        gap: 1.2rem;
        padding: 1rem;
    }
}