img-viewer-react/style.css

image viewer for react

div{box-sizing:border-box}.container{position:relative;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;padding:10px 20px;background:#000}.container.active{flex-direction:column}.container .horv{position:absolute;top:20px;left:20px;z-index:10;display:flex;cursor:pointer}.container .horv.active{rotate:90deg}.container .horv .h,.container .horv .v{height:25px;width:5px;background:#999;border-radius:1px}.container .horv .v{width:20px;margin-right:3px}.container ::-webkit-scrollbar{width:0}.img-wraper{position:relative;height:50vh;flex:1;margin:auto 70px auto auto}.img-wraper.active{flex:none;margin-right:0;width:100%}.img-wraper .v-img{max-height:100%;width:auto;transition:transform .3s ease-out;transform-origin:50% 50%;cursor:grab;position:absolute;-webkit-user-drag:none;top:50%;left:50%;transform:translate(-50%) translateY(-50%);border-radius:5px}.img-wraper img:nth-child(2),.img-wraper img:nth-child(3){position:absolute;width:32px;height:32px;top:50%;transform:translateY(-50%);cursor:pointer}.img-wraper img:nth-child(2){left:0}.img-wraper img:nth-child(3){right:0}.rightSmall{display:flex;position:relative}.rightSmall.active{flex-direction:column}.rightSmall .toolbar{background:#fffc;border-radius:2px;display:flex;flex-direction:column;margin-right:10px;position:absolute;top:50%;left:-50px;transform:translateY(-50%)}.rightSmall .toolbar.active{display:flex;height:auto;flex-direction:row;top:-50px;left:50%;transform:translate(-50%) translateY(0);margin-bottom:10px;margin-right:0}.rightSmall .toolbar .tool-wrapper{display:flex;align-items:center;padding:2px 5px}.rightSmall .toolbar .tool-wrapper img{width:26px;cursor:pointer}.small-list{width:100%;-webkit-user-select:none;user-select:none;overflow:hidden}.small-list.active{width:100%}.small-list .img-list{display:flex;width:100px;flex-direction:column;align-items:center;cursor:grab}.small-list .img-list.active{width:100%;overflow:hidden;flex-direction:row;height:90px}.small-list .img-list img{height:72px;width:72px;object-fit:cover;flex-shrink:0;margin-bottom:10px;cursor:grab;border-radius:2px;-webkit-user-drag:none;transition:all .3s}.small-list .img-list img.active{margin-right:10px;margin-bottom:0}.small-list .img-list img.imgA{height:90px;width:90px;flex-shrink:0}