overleaf/services/web/frontend/stylesheets/app/project-list-react.less

.project-list-react {
  overflow-x: hidden;

  body > .content& {
    padding-top: @header-height;
    padding-bottom: 0;
    min-height: calc(~'100vh -' @header-height);
  }

  .container:before {
    content: '';
    display: block;
    float: left;
    height: 100%;
  }

  .fill {
    position: relative;

    &:after {
      content: '';
      display: block;
      clear: left;
    }
  }

  .project-list-row {
    height: 100%;
    min-height: calc(~'100vh -' @header-height);
  }

  .project-list-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .project-list-sidebar-wrapper {
    float: left;
    position: static;

    .project-list-sidebar {
      > .dropdown {
        width: 100%;
        .new-project-button {
          width: 100%;
        }
      }
    }
  }

  .project-list-main {
    position: static;
    overflow: auto;
  }

  ul.folders-menu {
    margin: @folders-menu-margin;
    .subdued {
      color: @gray-light;
    }
    > li {
      cursor: pointer;
      position: relative;
      > button {
        display: block;
        width: 100%;
        font-weight: normal;
        text-align: left;
        color: @sidebar-link-color;
        background-color: transparent;
        border-radius: unset;
        border: none;
        border-bottom: solid 1px transparent;
        padding: @folders-menu-item-v-padding @folders-menu-item-h-padding;
        &:hover {
          background-color: @sidebar-hover-bg;
          text-decoration: @sidebar-hover-text-decoration;
        }
        &:focus {
          text-decoration: none;
          outline: none;
        }
      }

      &.separator {
        padding: @folders-menu-item-v-padding @folders-menu-item-h-padding;
        cursor: auto;
      }
    }
    > li.active {
      border-radius: @sidebar-active-border-radius;
      > button {
        background-color: @sidebar-active-bg;
        font-weight: @sidebar-active-font-weight;
        color: @sidebar-active-color;
        .subdued {
          color: @sidebar-active-color;
        }
      }
    }
    h2 {
      margin-top: @folders-title-margin-top;
      margin-bottom: @folders-title-margin-bottom;
      font-size: @folders-title-font-size;
      color: @folders-title-color;
      text-transform: @folders-title-text-transform;
      padding: @folders-title-padding;
      font-weight: @folders-title-font-weight;
      font-family: @font-family-sans-serif;
    }
    > li.tag {
      &.active {
        .tag-menu > button {
          color: white;
          border-color: white;
          &:hover {
            background-color: @folders-tag-menu-active-hover;
          }
        }
      }
      &.untagged {
        button.tag-name {
          span.name {
            font-style: italic;
            padding-left: 0;
          }
        }
      }
      &:hover {
        &:not(.active) {
          background-color: @folders-tag-hover;
        }
        .tag-menu {
          display: block;
        }
      }
      &:not(.active) {
        .tag-menu > a:hover {
          background-color: @folders-tag-menu-hover;
        }
      }
      button.tag-name {
        position: relative;
        padding: @folders-tag-padding;
        display: @folders-tag-display;
        span.name {
          padding-left: 0.5em;
          line-height: @folders-tag-line-height;
        }
      }
    }
    .tag-menu {
      button.dropdown-toggle {
        border: 1px solid @folders-tag-border-color;
        border-radius: @border-radius-small;
        background-color: transparent;
        color: @folders-tag-menu-color;
        display: block;
        width: 16px;
        height: 16px;
        position: relative;
        .caret {
          position: absolute;
          top: 6px;
          left: 1px;
        }
      }
      display: none;
      width: auto;
      position: absolute;
      top: 50%;
      margin-top: -8px; // Half the element height.
      right: 4px;
      &.open {
        display: block;
      }
      button.tag-action {
        border-radius: unset;
        width: 100%;
        background-color: transparent;
        border-color: transparent;
        color: @gray-dark;
        text-align: left;
        font-weight: normal;

        &:hover {
          color: @white;
          background-color: @ol-green;
        }
        &:active {
          outline: none;
        }
      }
    }
  }

  .project-dash-table {
    width: 100%;
    table-layout: fixed;

    tr {
      border-bottom: 1px solid @structured-list-border-color;
    }

    th,
    td {
      padding: (@line-height-computed / 4) @line-height-computed / 2;
      vertical-align: top;
    }

    tr {
      th:first-child,
      td:first-child,
      th:last-child,
      td:last-child {
        padding-right: @line-height-computed - (@grid-gutter-width / 2);
      }

      &:hover {
        &:not(.no-projects) {
          background-color: @structured-list-hover-color;
        }
      }
    }

    thead {
      tr:hover {
        background-color: transparent;
      }
    }

    tbody {
      tr:last-child {
        border-bottom: 0 none;
      }
    }

    .table-header-sort-btn {
      border: 0;
      text-align: left;
      color: @ol-type-color;
      padding: 0;
      font-weight: bold;
      &:hover,
      &:focus {
        color: @ol-type-color;
        text-decoration: none;
      }
    }

    .dash-cell-checkbox {
      width: 5%;
      input[type='checkbox'] {
        margin-top: 5px;
      }
    }
    .dash-cell-name {
      width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dash-cell-owner {
      width: 20%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dash-cell-date {
      width: 25%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dash-cell-actions {
      display: none;
      text-align: right;
      white-space: nowrap;
    }

    @media (min-width: @screen-xs) {
      .dash-cell-checkbox {
        width: 4%;
      }
      .dash-cell-name {
        width: 50%;
      }
      .dash-cell-owner {
        width: 21%;
      }
      .dash-cell-date {
        width: 25%;
      }
      .dash-cell-actions {
        width: 0%;
      }
    }

    @media (min-width: @screen-sm) {
      .dash-cell-checkbox {
        width: 3%;
      }
      .dash-cell-name {
        width: 48%;
      }
      .dash-cell-owner {
        width: 13%;
      }
      .dash-cell-date {
        width: 15%;
      }
      .dash-cell-actions {
        display: table-cell;
        width: 21%;
      }
    }

    @media (min-width: @screen-md) {
      .dash-cell-checkbox {
        width: 3%;
      }
      .dash-cell-name {
        width: 50%;
      }
      .dash-cell-owner {
        width: 13%;
      }
      .dash-cell-date {
        width: 16%;
      }
      .dash-cell-actions {
        width: 18%;
      }
    }

    @media (min-width: @screen-lg) {
      .dash-cell-checkbox {
        width: 3%;
      }
      .dash-cell-name {
        width: 50%;
      }
      .dash-cell-owner {
        width: 15%;
      }
      .dash-cell-date {
        width: 19%;
      }
      .dash-cell-actions {
        width: 13%;
      }
    }

    @media (min-width: 1440px) {
      .dash-cell-checkbox {
        width: 2%;
      }
      .dash-cell-name {
        width: 50%;
      }
      .dash-cell-owner {
        width: 16%;
      }
      .dash-cell-date {
        width: 19%;
      }
      .dash-cell-actions {
        width: 13%;
      }
    }
  }

  .loading-container {
    display: flex;
    align-items: center;
    min-height: calc(~'100vh -' @header-height);

    .loading-screen-brand-container {
      margin: 0 auto;
    }
  }
}

.project-list-react.container,
.project-list-react .project-list-sidebar-wrapper,
.project-list-react .project-list-main {
  height: 100%;
}

.current-plan {
  vertical-align: middle;
  line-height: @line-height-base;
  a.current-plan-label {
    text-decoration: none;
    color: @text-color;
  }
}

.project-list-upload-project-modal-uppy-dashboard .uppy-Root {
  .uppy-Dashboard-AddFiles-title {
    display: flex;
    flex-direction: column;
    color: @ol-blue-gray-3;
    white-space: pre-line;

    button.uppy-Dashboard-browse {
      background-color: @ol-green;
      color: @white;
      margin-bottom: @margin-md;
      padding: 4px 16px 5px;
      height: 46px;
      border-radius: 23px;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: @font-size-large;
      font-family: @font-family-sans-serif;
    }
  }
}