Just after we first added the library in Odoo (in april 2018), the library was released in its last and deprecated version (4.0.0). At the same time, the author indeed split its 'cropper' library into 2 parts: 'cropperjs' which is the core of the original library without jquery and 'jquery-cropper' which is a jquery wrapper of the 'cropperjs' library. This commit updates our code to use the latest version of those two libraries. Note: the commit also removes the lazy loading of the library which is useless and maybe breaking since it comes with the editor assets which are themself lazy loaded. Note 2: we may want to remove the jquery wrapper in another update and simply use the standard JS library. Part of https://github.com/odoo/odoo/pull/36880 task-2059480 closes odoo/odoo#36880 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
305 lines
4.5 KiB
CSS
305 lines
4.5 KiB
CSS
/*!
|
|
* Cropper.js v1.5.5
|
|
* https://fengyuanchen.github.io/cropperjs
|
|
*
|
|
* Copyright 2015-present Chen Fengyuan
|
|
* Released under the MIT license
|
|
*
|
|
* Date: 2019-08-04T02:26:27.232Z
|
|
*/
|
|
|
|
.cropper-container {
|
|
direction: ltr;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
position: relative;
|
|
-ms-touch-action: none;
|
|
touch-action: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.cropper-container img {
|
|
display: block;
|
|
height: 100%;
|
|
image-orientation: 0deg;
|
|
max-height: none !important;
|
|
max-width: none !important;
|
|
min-height: 0 !important;
|
|
min-width: 0 !important;
|
|
width: 100%;
|
|
}
|
|
|
|
.cropper-wrap-box,
|
|
.cropper-canvas,
|
|
.cropper-drag-box,
|
|
.cropper-crop-box,
|
|
.cropper-modal {
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.cropper-wrap-box,
|
|
.cropper-canvas {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cropper-drag-box {
|
|
background-color: #fff;
|
|
opacity: 0;
|
|
}
|
|
|
|
.cropper-modal {
|
|
background-color: #000;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.cropper-view-box {
|
|
display: block;
|
|
height: 100%;
|
|
outline: 1px solid #39f;
|
|
outline-color: rgba(51, 153, 255, 0.75);
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.cropper-dashed {
|
|
border: 0 dashed #eee;
|
|
display: block;
|
|
opacity: 0.5;
|
|
position: absolute;
|
|
}
|
|
|
|
.cropper-dashed.dashed-h {
|
|
border-bottom-width: 1px;
|
|
border-top-width: 1px;
|
|
height: calc(100% / 3);
|
|
left: 0;
|
|
top: calc(100% / 3);
|
|
width: 100%;
|
|
}
|
|
|
|
.cropper-dashed.dashed-v {
|
|
border-left-width: 1px;
|
|
border-right-width: 1px;
|
|
height: 100%;
|
|
left: calc(100% / 3);
|
|
top: 0;
|
|
width: calc(100% / 3);
|
|
}
|
|
|
|
.cropper-center {
|
|
display: block;
|
|
height: 0;
|
|
left: 50%;
|
|
opacity: 0.75;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 0;
|
|
}
|
|
|
|
.cropper-center::before,
|
|
.cropper-center::after {
|
|
background-color: #eee;
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
|
|
.cropper-center::before {
|
|
height: 1px;
|
|
left: -3px;
|
|
top: 0;
|
|
width: 7px;
|
|
}
|
|
|
|
.cropper-center::after {
|
|
height: 7px;
|
|
left: 0;
|
|
top: -3px;
|
|
width: 1px;
|
|
}
|
|
|
|
.cropper-face,
|
|
.cropper-line,
|
|
.cropper-point {
|
|
display: block;
|
|
height: 100%;
|
|
opacity: 0.1;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.cropper-face {
|
|
background-color: #fff;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.cropper-line {
|
|
background-color: #39f;
|
|
}
|
|
|
|
.cropper-line.line-e {
|
|
cursor: ew-resize;
|
|
right: -3px;
|
|
top: 0;
|
|
width: 5px;
|
|
}
|
|
|
|
.cropper-line.line-n {
|
|
cursor: ns-resize;
|
|
height: 5px;
|
|
left: 0;
|
|
top: -3px;
|
|
}
|
|
|
|
.cropper-line.line-w {
|
|
cursor: ew-resize;
|
|
left: -3px;
|
|
top: 0;
|
|
width: 5px;
|
|
}
|
|
|
|
.cropper-line.line-s {
|
|
bottom: -3px;
|
|
cursor: ns-resize;
|
|
height: 5px;
|
|
left: 0;
|
|
}
|
|
|
|
.cropper-point {
|
|
background-color: #39f;
|
|
height: 5px;
|
|
opacity: 0.75;
|
|
width: 5px;
|
|
}
|
|
|
|
.cropper-point.point-e {
|
|
cursor: ew-resize;
|
|
margin-top: -3px;
|
|
right: -3px;
|
|
top: 50%;
|
|
}
|
|
|
|
.cropper-point.point-n {
|
|
cursor: ns-resize;
|
|
left: 50%;
|
|
margin-left: -3px;
|
|
top: -3px;
|
|
}
|
|
|
|
.cropper-point.point-w {
|
|
cursor: ew-resize;
|
|
left: -3px;
|
|
margin-top: -3px;
|
|
top: 50%;
|
|
}
|
|
|
|
.cropper-point.point-s {
|
|
bottom: -3px;
|
|
cursor: s-resize;
|
|
left: 50%;
|
|
margin-left: -3px;
|
|
}
|
|
|
|
.cropper-point.point-ne {
|
|
cursor: nesw-resize;
|
|
right: -3px;
|
|
top: -3px;
|
|
}
|
|
|
|
.cropper-point.point-nw {
|
|
cursor: nwse-resize;
|
|
left: -3px;
|
|
top: -3px;
|
|
}
|
|
|
|
.cropper-point.point-sw {
|
|
bottom: -3px;
|
|
cursor: nesw-resize;
|
|
left: -3px;
|
|
}
|
|
|
|
.cropper-point.point-se {
|
|
bottom: -3px;
|
|
cursor: nwse-resize;
|
|
height: 20px;
|
|
opacity: 1;
|
|
right: -3px;
|
|
width: 20px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.cropper-point.point-se {
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.cropper-point.point-se {
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.cropper-point.point-se {
|
|
height: 5px;
|
|
opacity: 0.75;
|
|
width: 5px;
|
|
}
|
|
}
|
|
|
|
.cropper-point.point-se::before {
|
|
background-color: #39f;
|
|
bottom: -50%;
|
|
content: ' ';
|
|
display: block;
|
|
height: 200%;
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: -50%;
|
|
width: 200%;
|
|
}
|
|
|
|
.cropper-invisible {
|
|
opacity: 0;
|
|
}
|
|
|
|
.cropper-bg {
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
|
|
}
|
|
|
|
.cropper-hide {
|
|
display: block;
|
|
height: 0;
|
|
position: absolute;
|
|
width: 0;
|
|
}
|
|
|
|
.cropper-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.cropper-move {
|
|
cursor: move;
|
|
}
|
|
|
|
.cropper-crop {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.cropper-disabled .cropper-drag-box,
|
|
.cropper-disabled .cropper-face,
|
|
.cropper-disabled .cropper-line,
|
|
.cropper-disabled .cropper-point {
|
|
cursor: not-allowed;
|
|
}
|