#pv-img-overlay { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background-color: rgba(0,0,0,0.5); .transition(background-color 0.3s ease-in-out); text-align: center; } #pv-img-content, #pv-spinner { position: fixed; } @check-white: #f8f8f8; @check-black: #e8e8e8; #pv-img-image { max-width: 100%; max-height: 100%; border: 2px solid #fff; .border-radius(4px); background-color: @check-white; background-image: -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black), -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black); background-size: 60px 60px; background-position: 0 0, 30px 30px } #pv-img-overlay.fullscreen { background-color: #111; #pv-img-image { border: 0; .border-radius(0); } } #pv-img-close { position: fixed; width: 100%; height: 100%; cursor: pointer; } #pv-img-prev { position: fixed; cursor: pointer; } #pv-img-next { position: fixed; cursor: pointer; } #pv-img-buttons, #pv-img-topbuttons { list-style: none; list-style-image: none; margin: 0; padding: 0; img { position: relative; top: -2px; width: 16px; height: 16px; } img + span, img + input { margin-left: 6px; } input { background-color: rgba(255,255,255,0.1); border: none; color: #ccc; } .bar-label { display: block; color: #ccc; height: 30px; line-height: 30px; padding: 0 10px; opacity: 0.7; .transition(all 0.2s ease-in-out); } .bar-highlight { background-color: rgba(255,255,255,0.1); opacity: 1.0; } @bar-sep-border: 1px solid rgba(255,255,255,0.08); .bar-button { .bar-label; cursor: pointer; &:hover, &.hover { .bar-highlight; } } .bar-left { float: left; border-right: @bar-sep-border; } .bar-right { float: right; border-left: @bar-sep-border; } } #pv-img-bottombar { position: fixed; z-index: 5; width: 100%; height: 32px; left: 0; bottom: 0; // .vert-gradient(rgb(27,27,27), rgb(14,14,14)); background-color: rgb(27,27,27); border-top: 1px solid rgb(45,45,45); }