stremio-web/src/App/styles.less

@import (inline, once, css) 'stremio-colors.css';

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

:root {
    --scroll-bar-width: 8px;
    --landscape-shape-ratio: 0.5625;
    --poster-shape-ratio: 1.464;
    --window-min-width: 800px;
    --window-min-height: 600px;
    --focusable-border-size: 2px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    list-style: none;
    user-select: none;
    text-decoration: none;
    outline: none;
    appearance: none;
    background: none;
    box-shadow: none;
}

html, body, :global(#app) {
    position: relative;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    min-width: var(--window-min-width);
    min-height: var(--window-min-height);
    font-family: 'Roboto', 'sans-serif';
    line-height: 1;

    .router {
        width: 100%;
        height: 100%;
    }
}

:global {
    input {
        &::-moz-focus-inner {
            border: none;
        }

        &[type="email"], &[type="password"], &[type="text"] {
            user-select: text;
            font-size: inherit;
            line-height: inherit;
            font-family: inherit;
        }
    }

    ::-webkit-scrollbar {
        width: var(--scroll-bar-width);
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--color-secondarylighter80);
    }

    ::-webkit-scrollbar-track {
        background-color: var(--color-backgroundlight);
    }

    .focusable-with-border {
        position: relative;
        z-index: 0;

        &:focus, &:focus-within {
            &:not(:hover)::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1;
                display: block;
                pointer-events: none;
                border: var(--focusable-border-size) solid var(--color-surfacelighter);
                content: "";
            }
        }
    }
}