gallery.css

@charset 'UTF-8';

#galleryzer_gallery_frame {
  display: none;
  position: fixed;
  z-index: 99990;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  background: rgba(0, 0, 0, .25);
}

#galleryzer_close_button {
  position: absolute;
  top: -15px;
  right: -16px;
  padding: .5rem .625rem .4rem;
  border-radius: 4px !important;
  background: linear-gradient(to bottom, #777 0%,#555 100%);
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5);
  color: #ddd;
  font: normal 12pt/1 Helvetica, Arial !important;
}

  #galleryzer_close_button:hover {
    cursor: pointer;
    color: #eee;
    background: linear-gradient(to bottom, #888 0%,#666 100%);
  }

  .galleryzer_notification {
    z-index: 999999;
    margin: 1rem auto;
    width: 50%;
    padding: 1rem 2rem;
    background: #0dc5c1;
    color: white;
    font-family: Helvetica, Arial;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .75) !important;
    border-radius: 2px !important;
    transition: opacity 1s;
  }

  .galleryzer_notification_fade {
    opacity: 0;
  }

  #galleryzer_gallery_background {
    display:none;
    z-index: 99998;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, .75);
  }

    #galleryzer_forum_nav_wrapper {
      height: 30px;
      padding: 0 .5rem .5rem;
      box-sizing: border-box;
    }

      .galleryzer_forum_real_nav {
        margin: 0;
      }

        .galleryzer_forum_real_nav .pageNavHeader {
          margin-bottom: 0;
        }

    #galleryzer_forum_nav_wrapper + #galleryzer_gallery_wrapper {
      height: calc(100% - 30px);
    }

    #galleryzer_gallery_preview {
      display:none;
      position: absolute;
      z-index: 99999;
      overflow: auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      text-align: center;
      vertical-align: middle;
      background: #333;
      box-sizing: border-box;
      box-shadow: -5px 5px 10px rgba(0, 0, 0, .75) !important;
      border-radius: 2px !important;
    }

      #galleryzer_gallery_preview.loading {
        width: 250px;
        overflow: hidden;
      }

      #galleryzer_gallery_preview img {
        display:block;
        background-color: #111;
        max-width: calc(100vw - 40px);
        max-height: calc(100vh - 40px);
      }

        #galleryzer_gallery_preview #galleryzer_preview_spinner {
          position: relative;
          top: 109px;
          left: 109px;
        }

        #galleryzer_gallery_preview img:hover { 
          cursor: pointer; 
        }

        #galleryzer_preview_text {
          position: absolute;
          bottom: 20px;
          width: calc(100% - 40px);
          padding: 1rem;
          box-sizing: border-box;
          opacity: 0;
          background: #444;
          color: white;
          text-align: left;
          line-height: 1.15rem;
          transition: opacity 0.5s;
        }

      #galleryzer_gallery_preview:hover #galleryzer_preview_text {
        opacity: 0.75;
      }
        
    #galleryzer_gallery_container {
      position: relative;
      box-sizing: border-box;
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      margin: 20px;
      padding: 10px;
      background: #333;
      box-shadow: -5px 5px 10px rgba(0,0,0,0.75) !important;
      border-radius: 2px !important;
      color: #fff;
    }

        #galleryzer_gallery_container p {
          font: 1em Helvetica, Arial !important;
          color: #222 !important;
          margin: 0 5px 10px 5px !important;
          padding: 0 !important;
        }

        #galleryzer_gallery_wrapper {
          overflow: auto;
          width: 100%;
          height: 100%;
          padding: 10px;
          box-sizing: border-box;
        }
    
        #galleryzer_gallery_content {
          -webkit-column-count: 2;
          -webkit-column-gap: 5px;
          column-count: 2;
          column-gap: 5px;
          margin: 0;
          padding: 0;
        }

        @media only screen and (min-width: 900px) {
          #galleryzer_gallery_content {
            -webkit-column-count: 3;
            column-count: 3;
            
          }
        }

        @media only screen and (min-width: 1100px) {
          #galleryzer_gallery_content {
            -webkit-column-count: 4;
            column-count: 4;
          }
        }

          .galleryzer_gallery_image {
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            vertical-align: top;
            margin: 0 0 5px;
            padding: 5px;            
            background: #555;
            border-radius: 2px !important;
          }
            .galleryzer_gallery_image:hover { 
              cursor: pointer;
              background: #666;
            }
        
            .galleryzer_gallery_image img {
              display:block;
              background-color: #111;
              max-width: 100%;
              margin: 0;
              padding: 0;
              transition: opacity 800ms;
            }

  /* Loader */

  #galleryzer_gallery_frame .galleryzer_loader {
    font-size: 10px;
    margin: 50px auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50% !important;
    background: #0dc5c1;
    background: -moz-linear-gradient(left, #0dc5c1 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #0dc5c1 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #0dc5c1 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #0dc5c1 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #0dc5c1 10%, rgba(255, 255, 255, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }

  #galleryzer_gallery_frame .galleryzer_loader:before {
    width: 50%;
    height: 50%;
    background: #0dc5c1;
    border-radius: 100% 0 0 0 !important;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
  }

  #galleryzer_gallery_frame .galleryzer_loader:after {
    background: #333;
    width: 75%;
    height: 75%;
    border-radius: 50% !important;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  @-webkit-keyframes load3 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes load3 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

/* Light theme */

#galleryzer_gallery_frame.light #galleryzer_gallery_preview, 
#galleryzer_gallery_frame.light #galleryzer_gallery_container, 
#galleryzer_gallery_frame.light .galleryzer_loader:after {
  background: #ddd;
}

#galleryzer_gallery_frame.light #galleryzer_gallery_container {
  color: #222;
}
#galleryzer_gallery_frame.light #galleryzer_close_button {
  color: #222;
  background: linear-gradient(to bottom, #ddd 0%,#aaa 100%);
}

#galleryzer_gallery_frame.light #galleryzer_close_button:hover {
  color: #111;
  background: linear-gradient(to bottom, #ccc 0%,#999 100%);
}

#galleryzer_gallery_frame.light .galleryzer_gallery_image {
  background: #eee;
  border: 1px solid #ccc;
}

#galleryzer_gallery_frame.light .galleryzer_gallery_image img {
  background-color: #999;
  border: 1px solid #ccc; 
}

#galleryzer_gallery_frame.light #galleryzer_gallery_preview img {
  background-color: #999;
}