cordis/client/webapp/styles/overlays.scss

@import "theme.scss";

/* Popup Image Overlay */

body > .overlay {
    /* Note: skip top 22px so we don't overlay on the title bar */
    position: absolute;
    width: 100vw;
    height: calc(100vh - 22px);
    top: 22px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $background-overlay;

    /* Popup Image */

    .content.popup-image {
        display: flex;
        flex-flow: column;
        align-items: center;

        > img {
            max-width: 70vw;
            max-height: 70vh;
        }

        .download {
            background-color: $background-primary;
            border-radius: 8px;
            padding: 8px;
            display: flex;
            align-items: center;
            margin-top: 8px;
            justify-content: space-between;
        }

        .download .info {
            margin-right: 8px;
        }

        .download .info .name {
            font-weight: 600;
            color: $text-normal;
        }

        .download .info .size {
            font-size: 12px;
            font-weight: 500;
            color: $text-sending;
        }
    }

    /* Drop Target Overlay */

    .content.drop-target {
        box-sizing: border-box;
        width: calc(100vw - 32px);
        height: calc(100vh - 22px - 32px);
        margin: 16px;
        border: 4px dashed $background-primary;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    
        * {
            pointer-events: none;
        }

        .message {
            border-radius: 8px;
            padding: 32px;
            background-color: $background-primary;
            color: $header-primary;
            font-size: 48px;
            font-weight: 600;
        }
    }

    /* Upload Overlay */

    .content.upload {
        background-color: $background-primary;
        width: 500px;
        border-radius: 12px;
        padding: 16px;

        .title {
            display: flex;
            align-items: flex-start;
            margin-bottom: 16px;
        }

        .title img {
            max-width: 128px;
            max-height: 128px;
            border-radius: 8px;
            margin-right: 16px;
        }

        .title .right > *:not(:last-child) {
            margin-bottom: 8px;
        }

        .title .right > * {
            color: $text-normal;
        }

        .title .right > .name {
            font-weight: 600;
            font-size: 1.25em;
            color: $header-primary;
        }

        .text-input {
            color: $text-normal;
            background-color: $channeltextarea-background;
            border-radius: 8px;
            max-height: 100px;
            overflow-y: scroll;
            padding: 14px 16px 14px 16px;
        }

        .text-input:focus {
            outline: none;
        }

        .lower {
            margin-top: 16px;
            display: flex;
            align-items: center;
        }

        .lower .error {
            flex: 1;
            color: $header-primary;
        }

        .buttons {
            display: flex;
            justify-content: flex-end;
        }
    }

    /* General Submit Dialog Overlays */

    .content.submit-dialog {
        background-color: $background-secondary;
        border-radius: 8px;

        .image-input {
            margin: 16px;
            display: flex;
            align-items: center;
        }

        .text-input {
            margin: 16px;
            color: $text-normal;
            background-color: $channeltextarea-background;
            border-radius: 8px;
            max-height: 100px;
            overflow-y: scroll;
            padding: 14px 16px;
        }

        .text-input:focus {
            outline: none;
        }

        .lower {
            padding: 16px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: $background-tertiary;
        }

        .error {
            color: $text-normal;
        }

        .buttons {
            margin-left: 16px;
            display: flex;
        }
    }

    /* Personalization Overlay */

    .content.personalize {
        min-width: 350px;

        .message {
            margin: 16px;
            padding: 0 4px;
        }
    }

    /* guild Settings Overlay */

    .content.guild-settings {
        min-width: 350px;

        .preview {
            display: flex;
            align-items: center;
            margin: 16px;
        }

        .preview .icon img {
            width: 48px;
            height: 48px;
            border-radius: 24px;
        }

        .preview .icon {
            margin-right: 16px;
        }

        .preview .name {
            color: $header-primary;
            font-weight: 500;
        }
    }

    /* Add guild Overlay */

    .content.add-guild {
        min-width: 350px;
        background-color: $background-secondary;
        border-radius: 12px;

        .divider {
            margin: 16px;
            height: 1px;
            background-color: $background-primary;
        }

        .preview {
            margin: 16px;
            display: flex;
            align-items: center;
        }

        .preview .icon {
            width: 64px;
            height: 64px;
            margin-right: 16px;
            border-radius: 16px;
        }

        .preview .name {
            color: $header-primary;
            font-size: 1.25em;
            font-weight: 600;
        }

        .preview .url {
            color: $text-normal;
        }

        .preview .expires {
            color: $text-muted;
            font-size: 12px;
            font-weight: 600;
        }

        .message {
            margin: 16px;
            padding: 0;
        }

        .avatar-input {
            margin: 16px;
            display: flex;
            align-items: center;
        }

        .display-name-input {
            margin: 16px;
            color: $text-normal;
            background-color: $channeltextarea-background;
            border-radius: 8px;
            max-height: 100px;
            overflow-y: scroll;
            padding: 14px 16px;
        }

        .display-name-input:focus {
            outline: none;
        }

        .lower {
            padding: 16px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: $background-tertiary;
        }

        .error {
            color: $text-normal;
        }

        .error::first-letter {
            text-transform: uppercase;
        }

        .buttons {
            margin-left: 16px;
            display: flex;
        }
    }

    /* Modify Channel Overlay */

    .content.modify-channel {
        min-width: 350px;
        max-width: calc(100vw - 80px);

        .preview.channel-title {
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            padding-right: 8px;
        }

        .text-input.channel-name {
            text-transform: lowercase;
        }
    }

    /* Error Message Overlay */

    .content.error-message {
        background-color: $background-secondary;
        padding: 16px;
        border-radius: 12px;

        .title {
            color: $header-primary;
            font-size: 1.25em;
            font-weight: 600;
            line-height: 1;
            margin-bottom: 12px;
        }

        .message {
            padding: 0;
            color: $text-normal;
        }
    }

    /* View Tokens Overlay */
    .content.token-log {
        background-color: $background-secondary;
        padding: 16px;
        border-radius: 12px;
        color: $text-normal;

        .tokens .token-display {
            border-radius: 8px;
            padding: 8px;
            display: flex;
            align-items: center;
        }

        .tokens .token-display:hover {
            background-color: $background-secondary-alt;
        }

        .tokens .token-display:last-child {
            margin-bottom: 0;
        }

        .tokens .instance {
            display: flex;
            justify-content: space-between;
            width: 400px;
            margin-right: 8px;
        }

        .tokens .instance .left {
            text-align: left;
        }

        .tokens .instance .right {
            text-align: right;
        }

        .tokens .instance .member {
            font-weight: 600;
            font-size: 16px;
        }

        .tokens .instance .token {
            font-size: 12px;
            color: $text-muted;
        }

        .tokens .instance .expires,
        .tokens .instance .created {
            font-size: 14px;
        }

        .tokens .buttons {
            display: flex;
        }

        .tokens .buttons .download {
            cursor: pointer;
            border-radius: 4px;
            padding: 8px;
            background-color: $away;
            margin-right: 8px;
        }

        .tokens .buttons .revoke {
            cursor: pointer;
            border-radius: 4px;
            padding: 8px;
            background-color: $busy
        }
    }
}