-
Notifications
You must be signed in to change notification settings - Fork 7
/
cropimage.min.css
9 lines (9 loc) · 4.01 KB
/
cropimage.min.css
1
2
3
4
5
6
7
8
9
/** ---------------------------------------------------------------------------
* CropImage Plugin stylesheet
* ---------------------------------------------------------------------------
* Version: 1.2.1
* Author: Fabrice K.E.M
* Created: 10/06/2018
* Updated: 27/06/2024
*/
.R-container canvas,.R-container div{position:absolute;margin:0;box-sizing:unset}.R-container{position:relative;margin:0 auto;width:100%;height:100%;overflow:hidden;background-image:url('./transgraphic.png');-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.R-container.custom{background:none}.R-container .R-error{position:absolute;z-index:3;width:100%;height:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;font-family:tahoma;text-align:center;color:rgb(230, 230, 230);background-color:black;font-size:1.1em}.R-container .R-adapter{overflow:hidden}.R-container .R-cover{z-index:1;left:0;right:0;top:0;bottom:0}.R-container .R-cropper{z-index:2;background:rgba(255, 255, 255, .9);border:none}.R-container .R-cropper .R-grid{width:100%;height:100%;overflow:hidden}.R-container .R-cropper.circle,.R-container .R-cropper.circle .R-grid,.R-container .R-cropper.circle canvas{border-radius:50%}.R-container .R-cropper.border{border:2px solid rgba(255, 255, 255, .9)}.R-col-1,.R-col-2,.R-col-3{z-index:2;width:33.33333%;height:100%}.R-raw-1,.R-raw-2,.R-raw-3{z-index:2;width:100%;height:33.33333%}.R-col-1{border-right:1px dashed rgba(255, 255, 255, .4)}.R-col-2{left:33.53333%;border-right:1px dashed rgba(255, 255, 255, .4)}.R-col-3{left:67.16666%}.R-raw-1{border-bottom:1px dashed rgba(255, 255, 255, .4)}.R-raw-2{top:33.53333%;border-bottom:1px dashed rgba(255, 255, 255, .4)}.R-raw-3{top:67.16666%}.R-corner-lb,.R-corner-lt,.R-corner-rb,.R-corner-rt{z-index:3;width:20px;height:20px;border:3px solid rgba(255, 255, 255, .5);transition:300ms;cursor:grab}.R-corner-lt{left:5px;top:5px;border-width:3px 0 0 3px}.R-corner-rt{right:5px;top:5px;border-width:3px 3px 0 0}.R-corner-rb{right:5px;bottom:5px;border-width:0 3px 3px 0}.R-corner-lb{left:5px;bottom:5px;border-width:0 0 3px 3px}.R-container .R-cropper.circle .R-corner-lt{left:18%;top:18%;border-width:3px 0 0 3px;border-radius:10px 0 0 0}.R-container .R-cropper.circle .R-corner-rt{right:18%;top:18%;border-width:3px 3px 0 0;border-radius:0 10px 0 0}.R-container .R-cropper.circle .R-corner-rb{right:18%;bottom:18%;border-width:0 3px 3px 0;border-radius:0 0 10px 0}.R-container .R-cropper.circle .R-corner-lb{left:18%;bottom:18%;border-width:0 0 3px 3px;border-radius:0 0 0 10px}.R-corner-lt:hover .R-corner-lt:active{border-width:3px 0 0 3px}.R-corner-rt:active,.R-corner-rt:hover{border-width:3px 3px 0 0}.R-corner-rb:active,.R-corner-rb:hover{border-width:0 3px 3px 0}.R-corner-lb:active,.R-corner-lb:hover{border-width:0 0 3px 3px}.R-corner-lb:active,.R-corner-lb:hover,.R-corner-lt:active,.R-corner-lt:hover,.R-corner-rb:active,.R-corner-rb:hover,.R-corner-rt:active,.R-corner-rt:hover{width:25px;height:25px}.R-side-bottom,.R-side-left,.R-side-right,.R-side-top{z-index:4;width:15px;height:15px;border:2px solid rgba(255, 255, 255, .9);background:rgb(220, 220, 220);border-radius:50%;transition:300ms;cursor:grab}.R-side-left{left:-10px;top:47%}.R-side-top{left:46.5%;top:-10px}.R-side-right{right:-10px;top:47%}.R-side-bottom{left:46.5%;bottom:-10px}.R-side-bottom:active,.R-side-bottom:hover,.R-side-left:active,.R-side-left:hover,.R-side-right:active,.R-side-right:hover,.R-side-top:active,.R-side-top:hover{width:20px;height:20px;box-shadow:0 0 0 10px rgba(230, 230, 230, .3)}.R-side-left:hover{left:-13px;top:46.5%}.R-side-top:hover{left:46%;top:-13px}.R-side-right:hover{right:-13px;top:46.5%}.R-side-bottom:hover{left:46%;bottom:-13px}.R-corner-lb:active,.R-corner-lt:active,.R-corner-rb:active,.R-corner-rt:active,.R-side-bottom:active,.R-side-left:active,.R-side-right:active,.R-side-top:active{cursor:grabbing}@media (max-width: 767px){}@media (min-width: 768px) and (max-width: 991px){}@media (min-width: 992px) and (max-width: 1199px){}@media (min-width: 1200px){}