@tindtechnologies/universalviewer/dist/cjs/content-handlers/iiif/modules/uv-shared-module/css/thumbs-view.less

The Universal Viewer is a community-developed open source project on a mission to help you share your 📚📜📰📽️📻🗿 with the 🌎

@import "variables";
@import "mixins-extended";

.uv {
  .leftPanel {
    .views {
      .thumbsView {
        overflow: auto;
        height: 100%;
      }

      .thumbsView .thumbs {
        overflow: hidden;
        position: relative;
        width: 210px;
      }

      .thumbsView .thumbs .thumb {
        cursor: pointer;
        min-height: 100px;
      }

      .thumbsView .thumbs .thumb .wrap {
        box-sizing: border-box;
        border: 2px solid transparent;
        padding: 2px;
        overflow: hidden;
        text-align: center;
      }

      .thumbsView .thumbs .thumb .wrap.loadingFailed {
        /* background-image: data-uri("../img/error.png"); */
        background-repeat: no-repeat;
        background-position-x: 50%;
        background-position-y: 50%;
      }

      /* .thumbsView .thumbs .thumb .wrap.audio {
                background-image: data-uri("../img/audio.png");
            }
            .thumbsView .thumbs .thumb .wrap.video {
                background-image: data-uri("../img/video.png");
            } */
      .thumbsView .thumbs .thumb .wrap.hidden {
        /* background-image: data-uri("../img/hidden_thumb.png"); */
        background-repeat: no-repeat;
        background-position-x: 50%;
        background-position-y: 50%;
      }

      .thumbsView .thumbs .thumb .wrap img {
        display: block;
        max-width: 100%;
        max-height: 100%;
      }

      .thumbsView .thumbs .thumb.selected .wrap {
        border: 2px solid white;
      }

      .thumbsView .thumbs .thumb.searchpreview .wrap {
        border: 2px solid;
      }

      .thumbsView .thumbs .thumb .info {
        overflow: hidden;
      }

      .thumbsView .thumbs .thumb .info span {
        font-size: 0.75rem;
        display: block;
        padding: 2px 0 0;
      }

      .thumbsView .thumbs .thumb .info .index {
        float: left;
      }

      .thumbsView .thumbs.truncate-labels .thumb .info .label {
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
      }

      .thumbsView .thumbs .thumb:focus {
        outline: none;
      }

      .thumbsView .thumbs .thumb:focus-visible {
        border: 1px solid @link-color;
      }

      .thumbsView .thumbs .thumb .info .label {
        float: left;
        overflow-x: visible;
        text-overflow: nowrap;
        white-space: break-spaces;
        max-width: 100%;
      }

      .thumbsView .thumbs .thumb .info .searchResults {
        float: right;
        overflow-x: hidden;
        text-overflow: ellipsis;
        padding-left: 14px;

        /* styles copied from gallery component css */
        color: #14a4c3;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAMAAACecocUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjIyODM1RTJCMEI5MTFFNkI5M0NGM0Q4NzkzMjRGNkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjIyODM1RTNCMEI5MTFFNkI5M0NGM0Q4NzkzMjRGNkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMjI4MzVFMEIwQjkxMUU2QjkzQ0YzRDg3OTMyNEY2RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMjI4MzVFMUIwQjkxMUU2QjkzQ0YzRDg3OTMyNEY2RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmw6yDsAAAAtUExURRxicx5PXBp6kB82PBpyhxtqfReQqxaXsxiJoh1ZaBWduxmCmR9FTxSkwyEfH7Q9FxwAAAAPdFJOU///////////////////ANTcmKEAAABNSURBVHjaRM0LDsBABARQ+2mXZdz/uIs27SSShwTyPxQ1udvjsRGh8o3L28ZIg2MkmGUNN/TyjrVC0gTwAqxuSkizofePYX12Mz8CDABtXwWf4T3nAgAAAABJRU5ErkJggg==");
        background-repeat: no-repeat;
        background-position-x: 0;
        background-position-y: 4px;
      }

      .thumbsView .thumbs .thumb.placeholder .wrap {
        /* background-image: data-uri("../img/unavailable.png"); */
        background-repeat: no-repeat;
        background-position-x: 50%;
        background-position-y: 50%;
      }

      .thumbsView .thumbs .thumb.oneCol {
        display: grid;
        grid-template-columns: 93px 1fr;
        gap: 1px;
        align-items: start;
      }

      .thumbsView .thumbs .thumb.oneCol .label {
        width: 178px;
      }

      .thumbsView .thumbs .thumb.oneCol .wrap {
        float: left;
        width: 98px;
        max-height: 182px;
      }

      .thumbsView .thumbs .thumb.oneCol .info {
        width: 105px;
        float: left;
        margin: 0 0 0 7px;
        padding-top: 2px;
      }

      .thumbsView .thumbs .thumb.oneCol .info .searchResults {
        clear: left;
        float: left;
        margin: 7px 0 0;
      }

      .thumbsView .thumbs .thumb.twoCol .label {
        max-width: 98px !important;
      }

      .thumbsView .thumbs .thumb.twoCol .wrap {
        width: 98px;
        max-height: 182px;
        margin-bottom: -2px;
      }

      .thumbsView .thumbs .thumb.twoCol.selected .wrap {
        margin-bottom: 0;
      }

      .thumbsView .thumbs .thumb.twoCol .info {
        padding: 0 0 0 4px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 94px;
      }

      .thumbsView .thumbs .thumb.twoCol .info .searchResults {
        float: none;
      }

      .thumbsView .thumbs .separator {
        height: 1px;
        clear: both;
        border: none;
      }

      .thumbsView .thumbs.paged {
        display: grid;
        grid-template-columns: repeat(2, 98px);
        gap: 14px;
      }

      .thumbsView .thumbs.paged .thumb-container:nth-child(1) {
        grid-column: 2;
      }

      .thumbsView
        .thumbs.paged
        .thumb-container:nth-child(2n):not(:first-child) {
        grid-column: 1;
      }

      .thumbsView
        .thumbs.paged
        .thumb-container:nth-child(2n + 1):not(:first-child) {
        grid-column: 2;
      }

      .thumbsView .thumbs.paged.right-to-left {
        grid-auto-flow: dense;
      }

      .thumbsView .thumbs.paged.right-to-left .thumb-container:nth-child(1) {
        grid-column: 1 / span 2;
      }

      .thumbsView
        .thumbs.paged.right-to-left
        .thumb-container:nth-child(2n):not(:first-child) {
        grid-column: 2;
      }

      .thumbsView
        .thumbs.paged.right-to-left
        .thumb-container:nth-child(2n + 1):not(:first-child) {
        grid-column: 1;
      }
    }
  }
}