keeweb/app/styles/areas/_open.scss

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

  &__icons {
    @include display(flex);
    @include align-items(stretch);
    @include flex-direction(row);
    .open--drag & { display: none; }
  }

  &__icon {
    text-align: center;
    cursor: pointer;
    margin: 20px;
    transition: color $base-duration $base-timing;
    &:hover { @include th { color: medium-color(); } }
    &-i { font-size: 4em; }
    &-text {
      @include th { color: muted-color(); }
      .open__icon:hover>& { @include th { color: medium-color(); } }
    }
  }

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

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

  &__settings {
    @include display(flex);
    @include flex-direction(row);
    @include justify-content(space-between);
    @include align-items(stretch);
    height: 2em;
    &-key-file {
      .open--file:not(.open--opening) & { cursor: pointer; }
      .open--key-file & { @include th { color: medium-color(); } }
      &-dropbox {
        visibility: hidden;
        &:hover {
          .open--file & { visibility: visible; }
        }
      }
      &-dropbox {
        .open--key-file, .open--opening & { display: none; }
      }
      &:hover .open__settings-key-file-dropbox {
        .open--file & { visibility: visible; }
      }
    }

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

  &__last {
    @include display(flex);
    @include flex-direction(column);
    @include justify-content(flex-start);
    @include align-items(stretch);
    margin-top: $base-spacing;
    &-item {
      @include display(flex);
      @include flex-direction(row);
      @include justify-content(flex-start);
      @include align-items(baseline);
      .open:not(.open--opening) & {
        @include area-selectable;
      }
      @include th { color: muted-color(); }
      padding: $base-padding-v 0;
      &-icon { width: 2em; }
      &-text { @include flex-grow(1); }
      &-icon-del {
        opacity: 0;
        .open__last-item:hover & {
          opacity: .3;
          cursor: pointer;
          margin-right: $base-padding-h;
        }
        @include th { color: muted-color(); }
        &:hover {
          .open__last-item:hover & { opacity: 1; }
          @include th { color: medium-color(); }
        }
      }
    }
  }

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