keeweb/app/styles/areas/_settings.scss

.settings {
    flex: 1;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
    @include scrollbar-on-hover;
    overflow: hidden;
    position: relative;

    &__content {
        margin: $base-padding;
    }

    > .scroller {
        flex: 1 0 0;
    }

    h2,
    h3 {
        margin-top: 20px;
    }

    .shortcut {
        border: 1px solid var(--muted-color);
        display: inline-block;
        border-radius: $base-border-radius;
        width: 8em;
        text-align: center;
        padding: $base-padding;
        margin: 0 $base-padding-h $base-padding-v $base-padding-h;
        line-height: 1.5em;
        min-width: unset;
        box-sizing: border-box;
        vertical-align: baseline;
        &-large {
            width: 12em;
        }
        &:first-of-type {
            margin-left: 0;
        }
        &__editor {
            margin-bottom: $base-padding-v;
            &-input {
                text-align: center;
                margin: $base-padding-v 0 $medium-padding-v;
                width: 15em;
                &--large {
                    width: 30em;
                }
            }
        }
    }

    &__back-button {
        &-pre,
        &-post {
            display: none;
        }
        cursor: pointer;
        @include mobile {
            line-height: $mobile-back-button-height;
            height: $mobile-back-button-height;
            padding: $base-padding;
            font-size: 1.2em;
            > i {
                margin-right: 0.3em;
                font-size: 1.2em;
                vertical-align: text-bottom;
            }
            &-pre {
                display: inline;
            }
        }
        @include nomobile {
            position: absolute;
            top: 0;
            right: $base-padding-h;
            padding: $base-padding-v * 2 0 1px 0;
            z-index: 1;
            background: var(--background-color);
            box-shadow: 0 0 5px 5px var(--background-color);
            &-post {
                display: inline;
            }
        }
    }

    &__select,
    &__input {
        height: 2em;
    }

    &__row {
        display: flex;
        justify-content: space-between;
        @extend .input-size-base;
    }

    &__col-small {
        width: 30%;
        position: relative;
        > .settings__input {
            width: 100%;
        }
    }

    &__col-small-label {
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
    }

    &__pre {
        user-select: text;
        white-space: pre-wrap;
    }

    &__select-no-margin {
        margin-bottom: $base-padding-v;
    }

    #settings__file-master-pass,
    #settings__file-confirm-master-pass {
        font-family: $monospace-font-family;
    }

    #settings__file-confirm-master-pass-group {
        display: none;
    }

    &__file-master-pass-warning,
    &__file-confirm-master-pass-warning {
        font-weight: normal;
        float: right;
        display: none;
    }

    &__file-save-to {
        cursor: pointer;
        display: inline-block;
        margin-right: $base-padding-h;
        text-align: center;
        > i,
        > svg {
            display: block;
            font-size: 3em;
            padding: $base-padding-px;
            margin: auto;
        }
        > svg {
            @include size(1em);
        }
        &:hover {
            transition: color $base-duration $base-timing;
            color: var(--medium-color);
        }
    }

    &__general-update-buttons {
        margin-top: $base-spacing;
    }
    &__general-update-btn {
        width: 15em;
        margin-right: $small-spacing;
    }
    &__general-storage-header {
        margin-bottom: 0;
    }
    &__general-prv {
        margin-bottom: $base-padding-v;
    }
    &__general-prv-logout {
        margin-bottom: $base-padding-v;
    }
    &__logs {
        user-select: text;
        margin-top: $base-padding-v;
        word-break: break-all;
        &-log {
            margin: 0;
            white-space: pre-wrap;
            &--debug {
                opacity: 0.8;
            }
            &--info {
            }
            &--warn {
                color: $yellow;
            }
            &--error {
                color: $red;
            }
        }
    }
    &__plugins {
        &-install-error {
            margin-top: $base-padding-v;
        }
        &-plugin-files {
            margin-top: $base-padding-v;
            margin-bottom: $base-padding-v;
        }
        &-plugin-file {
            padding-left: $base-padding-h;
        }
        &-plugin-desc {
            margin-bottom: $base-padding-v;
        }
        &-plugin-updates {
            > label {
                font-weight: normal;
            }
        }
        &-gallery {
            margin-top: $base-spacing;
            display: flex;
            flex-wrap: wrap;
        }
        &-gallery-load-btn {
            margin-top: $base-padding-h;
        }
        &-gallery-plugin {
            position: relative;
            width: calc(50% - 40px);
            border-radius: $base-border-radius;
            border: light-border();
            padding: $medium-padding;
            box-sizing: border-box;
            margin: 0 $base-padding-v $base-padding-h 0;
            vertical-align: top;
            @include mobile {
                width: 100%;
                margin-right: 0;
            }
            &-install-btn {
                position: absolute;
                right: 0;
                bottom: 0;
            }
            &-country-flag {
                position: absolute;
                right: 10px;
                top: 6px;
                font-size: 1.5em;
            }
            &-title-link {
                border-bottom: 0;
                &:hover,
                &:visited,
                &:hover,
                &:active,
                &:focus {
                    border-bottom: 0;
                }
            }
        }
        &-gallery-search {
            margin-top: $medium-padding-v;
            @include nomobile {
                width: calc(100% - 74px);
            }
            @include mobile {
                width: 100%;
            }
        }
    }
    &__donate-btn {
        background: #fff;
        border: 2px solid #89abed;
        border-radius: 2.8rem;
        text-align: center;
        display: inline-block;
        text-decoration: none;
        padding: 0.2rem 2.4rem 0.1rem;
        line-height: 1.4;
        height: 2.8rem;
        margin-bottom: $base-padding-v * 2;

        &-top,
        &-bottom {
            pointer-events: none;
            display: block;
        }
        &-top {
            color: #606a79;
        }
        &-bottom {
            color: #89abed;
            font-weight: bold;
        }
    }

    &__head-icon {
        margin-right: 0.2em;
    }
}