<commit_before>// Imports
@import "lib.less";
@import "brand.less";

// Styles
body {
  .userSelect;
  background-color: @highlightColor;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  font-size: 100%;
  padding: 0;
  margin: 0;
  color: @textColor;
}

a {
  text-decoration: none;
  color: inherit;
}

// Needs to be early so splash version overrides
.login-logo {
  position: relative;
  top: 0;
  display: block;
  width: 120px;
  margin: 0 auto;
}

.preliminary {
  .twoStepLinearGradient(@loginOrange; @darkLoginOrange);
  .positionAbsolute;
  .scrollable;
  -webkit-transform: translate3d(0,-100%,0);
  z-index: 102;

  .login-logo {
    position: relative;
    top: 0;
    display: block;
    width: 180px;
    margin: 0 auto;
  }

  .need-cta {
    color: rgba(255, 255, 255, 0.8);
    font-size: 180%;
    text-align: center;
    width: 100%;

    small {
      display: block;
      margin: 20px 0;
    }

    a {
      
      &.active {
        color: #fff;
      }
    }
  }

  .button {
    color: shade(@darkLoginOrange, 75%);
  }

  .learn-more {
    display: block;
  }
}

.splash {
  .positionAbsolute;
  .twoStepLinearGradient(@loginOrange; @darkLoginOrange);
  z-index: 101;

  .login-logo {
    top: 20px;
  }
}

.app {
  .positionAbsolute(0,0,0,0);
  overflow: hidden;
  background-color: @appBackground;
}

.main {
  .positionAbsolute(0,0,0,0);
  overflow: hidden;
  background-color: @mainBackground;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.page {
  .translate3d;
  .positionAbsolute(44px,0,0,0);
  background-color: @pageBackground;

  > div {
    overflow: auto !important;
  }
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 44px;
  width: 270px;
  background-color: @appBackground;

  .icon-history,
  .icon-file-pdf,
  .icon-file-word,
  .icon-file-excel,
  .icon-file-zip,
  .icon-file-powerpoint,
  .icon-file-xml,
  .icon-file-css,
  .icon-film,
  .icon-music,
  .icon-star,
  .icon-star-2,
  .icon-clock,
  .icon-switch,
  .icon-tux,
  .icon-finder,
  .icon-windows,
  .icon-image,
  .icon-menu,
  .icon-arrow-left,
  .icon-exit,
  .icon-folder-open,
  .icon-folder,
  .icon-cloud-upload,
  .icon-remove,
  .icon-close,
  .icon-checkmark,
  .icon-loop,
  .icon-plus,
  .icon-minus,
  .icon-warning,
  .icon-eye,
  .icon-link,
  .icon-share,
  .icon-download,
  .icon-redo,
  .icon-cog,
  .icon-settings,
  .icon-file,
  .icon-info,
  .icon-checkbox-checked,
  .icon-checkbox-unchecked,
  .icon-file-openoffice,
  .icon-libreoffice,
  .icon-unlocked,
  .icon-lock {
    position: relative;
    font-size: 120%;
    top: 3px;
    margin-right: 10px;
  }

  .icon-hive-black {
    position: relative;
    font-size: 140%;
    top: 5px;
    margin-right: 5px;
  }

  .menu-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 40px;
  }

  .menu-label {
    position: absolute;
    top: 5px;
    left: 50px;
    line-height: 43px;
  }

  ul {
    li {
      background-color: @menuLiBackgroundColor;
      border-color: @menuLiBorderColor;

      a {
        height: 30px;

        &.active {
          background-color: @menuLiActiveBackgroundColor;
          color: @menuLiActiveTextColor;
        }
      }

      .sep {
        background-color: @menuSepBackgroundColor;
        color: @menuSepTextColor;
      }
    }
  }
}

.nav {
  color: @navTextColor;
}

.storagebar {
  color: @storageBarColor;
  border-top: 1px solid (@storageBarColor - #333);
  background-color: (@storageBarColor - #666);
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 260px;
  height: 30px;
  padding: 5px;

  .devices-info {
    font-size: 80%;
    padding: 3px 10px;
  }

  .bar-graph {
    width: 260px;
    height: 10px;
    background-color: (@storageBarColor - #ccc);

    .inner {
      background-color: (@storageBarColor - #333);
      width: 0;
      height: 10px;
    }
  }
}

.login {
  .positionAbsolute;
  .scrollable;
  .twoStepLinearGradient(@loginOrange; @darkLoginOrange);

  .menu-btn {
    .positionAbsolute(15px, auto, auto, 15px);
    color: rgba(255, 255, 255, 0.5);
    font-size: 150%;

    &.active {
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .cancel-btn {
    .positionAbsolute(15px, 15px, auto, auto);
    color: rgba(255, 255, 255, 0.5);
    font-size: 120%;

    &.active {
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .login-title {
    color: (@mainBackground + #111);
    font-weight: bold;
    font-variant: small-caps;
    text-align: center;
    margin-bottom: 10px;
    font-size: 140%;
  }

  .login-form {

    .logoutText {
      text-align: center;
      padding: 10px;
    }

    .button {
      color: shade(@darkLoginOrange, 75%);

      &.logout {
        margin-bottom: 20px;
      }
    }

    .stayloggedin {
      text-align: center;
      color: @loginTextColor;
      font-weight: bold;
      height: 44px;
      line-height: 44px;
      margin: 10px 0;

      .remember-me {
        display: inline-block;
      }

      #rememberme {
        .hidden;
      }

      .circle {
        color: fadeout(@darkLoginOrange, 80);
        display: inline-block;
        background-color: @loginTextColor;
        .uniformBorderRadius(50%);
        width: 28px;
        height: 28px;
        line-height: 30px;
        margin-right: 10px;

        &.on {
          color: darken(@loginOrange, 8.5%);
        }
      }
    }
  }
}

.spacer5 {
  height: 5px;
}

.advanced-login-settings,
.learn-more {
  .hidden;
  width: 90%;
  text-align: center;
  font-size: 80%;
  margin: 0 auto;
  padding: 10px;
  color: #fff;
}

.advanced-login-settings {
  margin: 0 auto;
}

.learn-about-spideroak,
.rememberme-warning,
.nonzk-warning,
.passcode-auth-entry {
  .positionAbsolute;
  overflow: auto;
  background-color: @mainBackground;
  z-index: 110;
}

.about-spideroak-content {
  padding: 10px;
  font-size: 90%;

  .email-link,
  .site-link {
    color: @linkColor;
  }
}

ul {
  margin: 0;
  padding: 0;
  border-width: 0 0 0 1px;

  li {
    .ellipsis;
    border-top: 1px solid @liBorderColor;
    list-style-type: none;
    margin: 0;
    padding: 10px;

    &:last-child {
      border-bottom: 1px solid @liBorderColor;
    }

    &:first-child {
      border-top: none;
    }

    &.small {
      font-size: 80%;
    }

    &.sep {
      font-size: 90%;
      padding: 2px 10px;
      background-color: @menuSepBackgroundColor;
      color: @menuSepTextColor;
      border: none;
    }

    a {
      .ellipsis;
      position: relative;
      display: block;
      padding: 10px;
      margin: -10px;
      height: 30px;

      &.active {
        background-image: none;
        background-color: @liActiveBackgroundColor;
      }

      .icon {
        .positionAbsolute(10px, auto, auto, 5px);
        width: 20px;
        height: 30px;
        padding: 5px;
        font-size: 120%;
        color: #333;  // @TODO: What should this be?
      }

      .rightButton {
        .positionAbsolute(0, 0, auto, auto);
        width: 20px;
        height: 100%;
        padding: 0 10px;
        font-size: 110%;
        background-size: 30px;
        color: @liButtonColor;

        &.removePublicShare {
          padding: 15px 10px;
        }
      }

      .filename {
        .positionAbsolute(5px, 40px, auto, 45px);
        .ellipsis;
      }

      .foldername {
        .positionAbsolute(17px, 40px, auto, 45px);
        .ellipsis;
      }

      .subtext {
        .positionAbsolute(30px, 40px, auto, 45px);
        .ellipsis;
        font-size: 70%;

        .file-modified {
          float: right;
        }

        .file-info {
          float: left;
        }
      }

      .hiddenItem {
        .hidden;
      }

      .hiddenItem:after {
        content: "Loading...";
      }
    }

    .label {
      .ellipsis;
      float: left;
      color: @liLabelColor;
      width: 33%;
    }

    .info {
      .ellipsis;
      float: right;
      text-align: right;
      width: 66%;
    }
  }
}

.folderViewLoading,
.mySharesViewLoading,
.versionsViewLoading,<commit_msg>Change 'content' string from Loading... to ...<commit_after>// Imports
@import "lib.less";
@import "brand.less";

// Styles
body {
  .userSelect;
  background-color: @highlightColor;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  font-size: 100%;
  padding: 0;
  margin: 0;
  color: @textColor;
}

a {
  text-decoration: none;
  color: inherit;
}

// Needs to be early so splash version overrides
.login-logo {
  position: relative;
  top: 0;
  display: block;
  width: 120px;
  margin: 0 auto;
}

.preliminary {
  .twoStepLinearGradient(@loginOrange; @darkLoginOrange);
  .positionAbsolute;
  .scrollable;
  -webkit-transform: translate3d(0,-100%,0);
  z-index: 102;

  .login-logo {
    position: relative;
    top: 0;
    display: block;
    width: 180px;
    margin: 0 auto;
  }

  .need-cta {
    color: rgba(255, 255, 255, 0.8);
    font-size: 180%;
    text-align: center;
    width: 100%;

    small {
      display: block;
      margin: 20px 0;
    }

    a {
      
      &.active {
        color: #fff;
      }
    }
  }

  .button {
    color: shade(@darkLoginOrange, 75%);
  }

  .learn-more {
    display: block;
  }
}

.splash {
  .positionAbsolute;
  .twoStepLinearGradient(@loginOrange; @darkLoginOrange);
  z-index: 101;

  .login-logo {
    top: 20px;
  }
}

.app {
  .positionAbsolute(0,0,0,0);
  overflow: hidden;
  background-color: @appBackground;
}

.main {
  .positionAbsolute(0,0,0,0);
  overflow: hidden;
  background-color: @mainBackground;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.page {
  .translate3d;
  .positionAbsolute(44px,0,0,0);
  background-color: @pageBackground;

  > div {
    overflow: auto !important;
  }
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 44px;
  width: 270px;
  background-color: @appBackground;

  .icon-history,
  .icon-file-pdf,
  .icon-file-word,
  .icon-file-excel,
  .icon-file-zip,
  .icon-file-powerpoint,
  .icon-file-xml,
  .icon-file-css,
  .icon-film,
  .icon-music,
  .icon-star,
  .icon-star-2,
  .icon-clock,
  .icon-switch,
  .icon-tux,
  .icon-finder,
  .icon-windows,
  .icon-image,
  .icon-menu,
  .icon-arrow-left,
  .icon-exit,
  .icon-folder-open,
  .icon-folder,
  .icon-cloud-upload,
  .icon-remove,
  .icon-close,
  .icon-checkmark,
  .icon-loop,
  .icon-plus,
  .icon-minus,
  .icon-warning,
  .icon-eye,
  .icon-link,
  .icon-share,
  .icon-download,
  .icon-redo,
  .icon-cog,
  .icon-settings,
  .icon-file,
  .icon-info,
  .icon-checkbox-checked,
  .icon-checkbox-unchecked,
  .icon-file-openoffice,
  .icon-libreoffice,
  .icon-unlocked,
  .icon-lock {
    position: relative;
    font-size: 120%;
    top: 3px;
    margin-right: 10px;
  }

  .icon-hive-black {
    position: relative;
    font-size: 140%;
    top: 5px;
    margin-right: 5px;
  }

  .menu-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 40px;
  }

  .menu-label {
    position: absolute;
    top: 5px;
    left: 50px;
    line-height: 43px;
  }

  ul {
    li {
      background-color: @menuLiBackgroundColor;
      border-color: @menuLiBorderColor;

      a {
        height: 30px;

        &.active {
          background-color: @menuLiActiveBackgroundColor;
          color: @menuLiActiveTextColor;
        }
      }

      .sep {
        background-color: @menuSepBackgroundColor;
        color: @menuSepTextColor;
      }
    }
  }
}

.nav {
  color: @navTextColor;
}

.storagebar {
  color: @storageBarColor;
  border-top: 1px solid (@storageBarColor - #333);
  background-color: (@storageBarColor - #666);
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 260px;
  height: 30px;
  padding: 5px;

  .devices-info {
    font-size: 80%;
    padding: 3px 10px;
  }

  .bar-graph {
    width: 260px;
    height: 10px;
    background-color: (@storageBarColor - #ccc);

    .inner {
      background-color: (@storageBarColor - #333);
      width: 0;
      height: 10px;
    }
  }
}

.login {
  .positionAbsolute;
  .scrollable;
  .twoStepLinearGradient(@loginOrange; @darkLoginOrange);

  .menu-btn {
    .positionAbsolute(15px, auto, auto, 15px);
    color: rgba(255, 255, 255, 0.5);
    font-size: 150%;

    &.active {
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .cancel-btn {
    .positionAbsolute(15px, 15px, auto, auto);
    color: rgba(255, 255, 255, 0.5);
    font-size: 120%;

    &.active {
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .login-title {
    color: (@mainBackground + #111);
    font-weight: bold;
    font-variant: small-caps;
    text-align: center;
    margin-bottom: 10px;
    font-size: 140%;
  }

  .login-form {

    .logoutText {
      text-align: center;
      padding: 10px;
    }

    .button {
      color: shade(@darkLoginOrange, 75%);

      &.logout {
        margin-bottom: 20px;
      }
    }

    .stayloggedin {
      text-align: center;
      color: @loginTextColor;
      font-weight: bold;
      height: 44px;
      line-height: 44px;
      margin: 10px 0;

      .remember-me {
        display: inline-block;
      }

      #rememberme {
        .hidden;
      }

      .circle {
        color: fadeout(@darkLoginOrange, 80);
        display: inline-block;
        background-color: @loginTextColor;
        .uniformBorderRadius(50%);
        width: 28px;
        height: 28px;
        line-height: 30px;
        margin-right: 10px;

        &.on {
          color: darken(@loginOrange, 8.5%);
        }
      }
    }
  }
}

.spacer5 {
  height: 5px;
}

.advanced-login-settings,
.learn-more {
  .hidden;
  width: 90%;
  text-align: center;
  font-size: 80%;
  margin: 0 auto;
  padding: 10px;
  color: #fff;
}

.advanced-login-settings {
  margin: 0 auto;
}

.learn-about-spideroak,
.rememberme-warning,
.nonzk-warning,
.passcode-auth-entry {
  .positionAbsolute;
  overflow: auto;
  background-color: @mainBackground;
  z-index: 110;
}

.about-spideroak-content {
  padding: 10px;
  font-size: 90%;

  .email-link,
  .site-link {
    color: @linkColor;
  }
}

ul {
  margin: 0;
  padding: 0;
  border-width: 0 0 0 1px;

  li {
    .ellipsis;
    border-top: 1px solid @liBorderColor;
    list-style-type: none;
    margin: 0;
    padding: 10px;

    &:last-child {
      border-bottom: 1px solid @liBorderColor;
    }

    &:first-child {
      border-top: none;
    }

    &.small {
      font-size: 80%;
    }

    &.sep {
      font-size: 90%;
      padding: 2px 10px;
      background-color: @menuSepBackgroundColor;
      color: @menuSepTextColor;
      border: none;
    }

    a {
      .ellipsis;
      position: relative;
      display: block;
      padding: 10px;
      margin: -10px;
      height: 30px;

      &.active {
        background-image: none;
        background-color: @liActiveBackgroundColor;
      }

      .icon {
        .positionAbsolute(10px, auto, auto, 5px);
        width: 20px;
        height: 30px;
        padding: 5px;
        font-size: 120%;
        color: #333;  // @TODO: What should this be?
      }

      .rightButton {
        .positionAbsolute(0, 0, auto, auto);
        width: 20px;
        height: 100%;
        padding: 0 10px;
        font-size: 110%;
        background-size: 30px;
        color: @liButtonColor;

        &.removePublicShare {
          padding: 15px 10px;
        }
      }

      .filename {
        .positionAbsolute(5px, 40px, auto, 45px);
        .ellipsis;
      }

      .foldername {
        .positionAbsolute(17px, 40px, auto, 45px);
        .ellipsis;
      }

      .subtext {
        .positionAbsolute(30px, 40px, auto, 45px);
        .ellipsis;
        font-size: 70%;

        .file-modified {
          float: right;
        }

        .file-info {
          float: left;
        }
      }

      .hiddenItem {
        .hidden;
      }

      .hiddenItem:after {
        content: "...";
      }
    }

    .label {
      .ellipsis;
      float: left;
      color: @liLabelColor;
      width: 33%;
    }

    .info {
      .ellipsis;
      float: right;
      text-align: right;
      width: 66%;
    }
  }
}

.folderViewLoading,
.mySharesViewLoading,
.versionsViewLoading,
{'fraction_non_alphanumeric': 0.14361505243676742, 'fraction_numerical': 0.04096236890808143, 'mean_word_length': 1.9882027649769585, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7448772', 'n_tokens_mistral': 6714, 'n_tokens_neox': 5966, 'n_words': 1214}