_browse_everything.scss

@import "jquery.treetable";
@import "jquery.treetable.theme.browse";

@mixin ev-link {
  cursor: pointer;
  a {
    color: inherit;
    background-color: inherit;
    text-decoration: none;
  }
}

#browse-everything {
  overflow-y: hidden;
  position: fixed !important;
  margin: 0 0 0 -37.5%;
  left: 50%;
  top: 10%;
  background-color: initial;
  width: 75%;

  div {
    background-color: white;
  }

  .modal-header {
    padding: 8px;
  }

  .modal-body {
    overflow: hidden;
  }

  .modal-footer {
    margin: 0px;
  }

  .row {
    margin: inherit;
  }

  .ev-files {
    position: relative;
    overflow-x: auto;
    overflow-y: auto;

    li {
      overflow: hidden;
      text-overflow: ellipsis;
      .ev-file-name {
        white-space: nowrap;
      }
      border-top: none;
    }

    &.detail {
    }

    &.list ul {
      @include content-columns(3);
    }
  }

  .ev-container li {
    cursor: pointer;
  }

  .ev-body {
    padding: 0;
  }

  .ev-providers {
    padding: 4px;
  }

  .ev-files {
    table {
      width: 100%;
      max-width: 100%;
      tr {
        width: 100%;
        max-width: 100%;
        td {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .ev-files {
    height: 50vh;
    li { @include ev-link; }
  }

  .ev-providers {
    select { width: 30% }
  }

  .loading {
    pointer-events: none;
    opacity: 0.2;
  }

  .loading-progress {
    position: absolute;
    top: 8em;
    left: 4em;
  }

  // Massively large text instead of something more artistic
  .loading-text {
    font-size: 4em;
  }
}