popup.css

/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    font-family: Roboto, Arial, sans-serif;
    font-size: 16px;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.content {
    width: 100%;
    height: 100%;
    display: grid;
    padding: 20px;
    box-sizing: border-box;
    grid-template-areas:
        'header header'
        'navbar body  ';
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 10px;
    row-gap: 10px;
}

.content > .brand-name {
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    grid-area: header;
}

.content > .brand-name > img {
    width: 2em;
    height: 2em;
    vertical-align: middle;
}

.content > .brand-name > span {
    vertical-align: middle;
}

.content > .side-menu {
    width: 256px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    grid-area: navbar;
}

.content > .side-menu > a {
    width: 100%;
    padding: 15px;
    margin: 3px;
    box-sizing: border-box;
    border-radius: 99px;
    color: inherit;
    text-decoration: none;
}

.content > .side-menu > a:hover {
    background-color: rgba(128,128,128,0.1);
}

.content > .side-menu > a:focus {
    background-color: rgba(128,128,128,0.1);
}

.content > .side-menu > a[selected="true"] {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}

.content > .side-menu > a > i {
    margin-right: 8px;
}

.content > .body-content {
    grid-area: body;
    border-radius: 18px;
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--background-color-2);
    overflow: auto;
    height: 100%;
}

.content > .body-content > .inactive-page {
    display: none;
}

a.primary-button {
    padding-inline: 18px;
    padding-block: 15px;
    display: inline-block;
    background-color: var(--primary-color);
    border-radius: 18px;
    color: var(--primary-text-color);
    text-decoration: none;
}

.dropzone {
    border: 1px solid gray;
    padding: 30px;
    border-radius: 18px;
    transition: background-color 0.2s;
}

.dropzone[data-dropzone-status="file-dragover"] {
    background-color: rgba(128,128,128,0.1);
}

.dropzone > input {
    max-width: 100%;
}

iframe {
    width: 100%;
    border: 0;
}

.primary-zone {
    padding: 25px;
    border-radius: 18px;
    background-color: var(--background-color);
}