keeweb/app/styles/areas/_open.scss

.open {
    flex: 1;
    display: flex;
    align-self: stretch;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: var(--background-color);

    .mobile & {
        overflow-y: auto;
    }

    &__icons {
        display: flex;
        align-items: stretch;
        flex-direction: row;
        flex-shrink: 0;
        justify-content: center;
        flex-wrap: wrap;
        .open--drag & {
            display: none;
        }
    }

    &__icon {
        text-align: center;
        cursor: pointer;
        margin: 20px;
        transition: color $base-duration $base-timing;
        &:hover {
            color: var(--medium-color);
        }
        &:focus {
            .open--show-focus & {
                outline: focused-outline();
            }
        }
        &-i {
            font-size: 4em;
        }
        &-text {
            color: var(--muted-color);
            .open__icon:hover > & {
                color: var(--medium-color);
            }
        }
        @include mobile() {
            &-i {
                font-size: 4.6em;
            }
            &-text {
                font-size: 1.1em;
            }
            .open__icons--lower & {
                margin: 14px;
                &-i {
                    font-size: 4.2em;
                    margin-bottom: 0.1em;
                }
            }
        }
    }

    &__pass {
        &-area {
            display: flex;
            align-items: stretch;
            flex-direction: column;
            justify-content: flex-start;
            position: relative;
            .open--drag & {
                display: none;
            }
        }
        &-warn-wrap {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }
        &-field-wrap {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: stretch;
            flex-shrink: 0;
            margin-bottom: $base-padding-v;
        }
        &-enter-btn,
        &-opening-icon {
            padding: 0.6em $base-spacing;
            position: absolute;
            left: 100%;
            @include mobile {
                left: auto;
                right: 0;
            }
            color: var(--muted-color);
            line-height: 3em;
            height: 3em;
            > i {
                font-size: 3em;
                @include mobile {
                    line-height: 0.8;
                }
            }
        }
        .open--show-focus & {
            &-enter-btn:focus,
            &-opening-icon:focus {
                outline: focused-outline();
            }
        }
        &-enter-btn {
            .open--file & {
                cursor: pointer;
                &:hover {
                    color: var(--medium-color);
                }
            }
            .open--opening & {
                display: none;
            }
        }
        &-opening-icon {
            display: none;
            .open--opening & {
                display: block;
            }
        }
    }

    &__config {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
        @include nomobile {
            width: 30em;
        }
        .open--drag & {
            display: none;
        }
        &-buttons {
            align-self: flex-end;
        }
        &-header {
            > i {
                margin-right: 0.3em;
            }
        }
        &-field {
            width: 100%;
        }
        &-error {
            min-height: 1.7em;
        }
        &:not(.open__config--disabled) {
            .open__config-btn-ok-text {
                display: inline;
            }
            .open__config-btn-ok-spinner {
                display: none;
            }
        }
        &.open__config--disabled {
            .open__config-btn-ok-text {
                display: none;
            }
            .open__config-btn-ok-spinner {
                display: block;
            }
        }
    }

    input[type='password'].open__pass-input {
        font-size: $large-pass-font-size;
        margin-bottom: 0;
        &[readonly] {
            cursor: pointer;
        }
        width: 38vw;
        @media (max-width: 1000px) {
            width: 16em;
        }
        @include mobile {
            width: calc(100vw - 20px);
        }
    }

    &__settings {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        padding-left: $base-padding-h;
        height: 2em;
        &-key-file {
            .open--file:not(.open--opening) & {
                cursor: pointer;
            }
            .open--key-file & {
                color: var(--medium-color);
            }
            &-icon {
                width: 2em;
            }
            &-dropbox {
                visibility: hidden;
                margin-left: 0.3em;
                &:hover {
                    .open--file & {
                        visibility: visible;
                    }
                }
            }
            &-dropbox {
                .open--key-file,
                .open--opening & {
                    display: none;
                }
            }
            &:hover .open__settings-key-file-dropbox {
                .open--file & {
                    visibility: visible;
                }
            }
            &:focus {
                .open--show-focus & {
                    outline: focused-outline();
                }
            }
        }

        &-key-file,
        &-key-file-dropbox {
            color: var(--muted-color);
            &:hover {
                .open--file:not(.open--opening) & {
                    color: var(--medium-color);
                }
            }
        }

        &-yubikey {
            display: none;
            &--present,
            &--active {
                display: flex;
            }
            &__text {
                margin-right: 0.4em;
                display: none;
                .open__settings-yubikey--active & {
                    display: block;
                }
            }
            &-img {
                fill: var(--muted-color);
                width: 2em;
                position: relative;
                top: -0.25em;
                margin-right: $base-padding-h;
                cursor: pointer;
                &:hover {
                    fill: var(--text-color);
                }
                .open__settings-yubikey--active & {
                    fill: var(--text-color);
                }
            }
        }
    }

    &__last {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        margin-top: $base-spacing;
        &-item {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: baseline;
            flex-shrink: 0;
            .open:not(.open--opening) & {
                @include area-selectable;
            }
            color: var(--muted-color);
            padding: $base-padding;
            &:focus {
                .open--show-focus & {
                    outline: focused-outline();
                }
            }
            &-icon {
                width: 2em;
                position: relative;
                top: 0.1em;
            }
            &-text {
                flex-grow: 1;
            }
            &-icon-del {
                opacity: 0;
                .open__last-item:hover & {
                    opacity: 0.3;
                    cursor: pointer;
                }
                color: var(--muted-color);
                &:hover {
                    .open__last-item:hover & {
                        opacity: 1;
                    }
                    color: var(--medium-color);
                }
            }
        }
    }

    &__dropzone {
        display: none;
        .open--drag & {
            display: flex;
            flex-direction: column;
            flex: 1 0 auto;
            justify-content: center;
            align-self: center;
            align-items: center;
            text-align: center;
        }
        &-icon {
            font-size: 10em;
        }
        &-header {
            margin-top: 1em;
        }
    }
}

.open-list {
    &__content {
        margin: $base-padding-v 0 $base-padding-v (-$base-padding-h);
        max-height: calc(100vh - 22em);
        position: relative;
        overflow: hidden;
    }
    &__scrollable {
        max-height: calc(100vh - 22em);
        width: calc(100% + 50px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    &__files {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 50px);
    }
    &__file {
        cursor: pointer;
        padding: $base-padding;
        border-radius: $base-border-radius;
        box-sizing: border-box;
        flex-basis: 100%;
        @include nomobile {
            .open-list--density2 & {
                flex-basis: 50%;
            }
            .open-list--density3 & {
                flex-basis: 33.33333%;
            }
        }
        &:hover {
            background-color: var(--action-background-color-focus-tr);
        }
        &-icon {
            margin-right: 0.3em;
        }
        &--another {
            color: var(--medium-color);
        }
    }
    &__check-label {
        width: 100%;
        display: inline-block;
    }
}

.open-chal-resp {
    &__head {
        padding: $base-padding;
    }
    &__icon {
        margin-right: $small-spacing;
    }
    &__item {
        padding: $base-padding;
        cursor: pointer;
        &:hover {
            background-color: var(--action-background-color-focus-tr);
        }
    }
}