index.pcss

/*
Copyright 2020-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* TODO: Match the user's theme: https://github.com/element-hq/element-web/issues/12794 */

@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
/* Path to `res` dir in the source tree */
$res: ../../../res;

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

$dark-fg: #edf3ff;
$dark-bg: #363c43;
$light-fg: #2e2f32;
$light-bg: #fff;
body {
    font-family: Nunito, Arial, Helvetica, sans-serif;
    background-color: $dark-bg;
    color: $dark-fg;
}

body.theme-light {
    background-color: $light-bg;
    color: $light-fg;
}

body,
html {
    padding: 0;
    margin: 0;
}

#jitsiContainer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#joinButtonContainer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;

    /* Hidden by default to avoid flashing the prejoin screen at the user when */
    /* we're supposed to skip it anyways */
    visibility: hidden;
}

.joinConferenceFloating {
    display: table-cell;
    vertical-align: middle;
}

.joinConferencePrompt {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    text-align: center;
}

#joinButton {
    /* Copy of Compound Button styles */
    border: 1px solid var(--cpd-color-bg-action-primary-rest);
    color: var(--cpd-color-text-on-solid-primary);
    background-color: var(--cpd-color-bg-action-primary-rest);
    padding-block: var(--cpd-space-2x);
    padding-inline: var(--cpd-space-8x);
    min-block-size: var(--cpd-space-12x);
    text-align: center;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: var(--cpd-font-body-lg-semibold);
    border: none;
    word-break: keep-all;
    cursor: pointer;
}

.icon {
    $icon-size: 42px;
    margin-top: -$icon-size; /* to visually center the form */

    &::before {
        content: "";
        background-size: contain;
        background-color: $dark-fg;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
        mask-size: $icon-size;
        display: block;
        width: $icon-size;
        height: $icon-size;
        margin: 0 auto; /* center */
    }
}

body.theme-light .icon::before {
    background-color: $light-fg;
}