diff options
author | Mario <mario@mariovavti.com> | 2018-03-09 11:12:18 +0100 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2018-03-09 11:12:18 +0100 |
commit | 4baf5eab16d809977a44e7911ddcab0ff8383897 (patch) | |
tree | 393f618c4cfc20f53264ecd8a26a08de0823d35d /library/cropperjs/src/css | |
parent | 577da0eb9eb1f90a4cf7a70cfb3582cfb49007ac (diff) | |
parent | 7361af85b5488fc8bd1744389a3a332dc74276b0 (diff) | |
download | volse-hubzilla-3.2.tar.gz volse-hubzilla-3.2.tar.bz2 volse-hubzilla-3.2.zip |
Merge branch '3.2RC'3.2
Diffstat (limited to 'library/cropperjs/src/css')
-rw-r--r-- | library/cropperjs/src/css/cropper.css | 290 |
1 files changed, 290 insertions, 0 deletions
diff --git a/library/cropperjs/src/css/cropper.css b/library/cropperjs/src/css/cropper.css new file mode 100644 index 000000000..d09c4f182 --- /dev/null +++ b/library/cropperjs/src/css/cropper.css @@ -0,0 +1,290 @@ +:root { + --blue: #39f; +} + +.cropper-container { + direction: ltr; + font-size: 0; + line-height: 0; + position: relative; + touch-action: none; + user-select: none; + + & img { + /* Avoid margin top issue (Occur only when margin-top <= -height) */ + 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: .5; +} + +.cropper-view-box { + display: block; + height: 100%; + outline-color: color(var(--blue) alpha(75%)); + outline: 1px solid var(--blue); + overflow: hidden; + width: 100%; +} + +.cropper-dashed { + border: 0 dashed #eee; + display: block; + opacity: .5; + position: absolute; + + &.dashed-h { + border-bottom-width: 1px; + border-top-width: 1px; + height: calc(100 / 3)%; + left: 0; + top: calc(100 / 3)%; + width: 100%; + } + + &.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: .75; + position: absolute; + top: 50%; + width: 0; + + &:before, + &:after { + background-color: #eee; + content: ' '; + display: block; + position: absolute; + } + + &:before { + height: 1px; + left: -3px; + top: 0; + width: 7px; + } + + &:after { + height: 7px; + left: 0; + top: -3px; + width: 1px; + } +} + +.cropper-face, +.cropper-line, +.cropper-point { + display: block; + height: 100%; + opacity: .1; + position: absolute; + width: 100%; +} + +.cropper-face { + background-color: #fff; + left: 0; + top: 0; +} + +.cropper-line { + background-color: var(--blue); + + &.line-e { + cursor: ew-resize; + right: -3px; + top: 0; + width: 5px; + } + + &.line-n { + cursor: ns-resize; + height: 5px; + left: 0; + top: -3px; + } + + &.line-w { + cursor: ew-resize; + left: -3px; + top: 0; + width: 5px; + } + + &.line-s { + bottom: -3px; + cursor: ns-resize; + height: 5px; + left: 0; + } +} + +.cropper-point { + background-color: var(--blue); + height: 5px; + opacity: .75; + width: 5px; + + &.point-e { + cursor: ew-resize; + margin-top: -3px; + right: -3px; + top: 50%; + } + + &.point-n { + cursor: ns-resize; + left: 50%; + margin-left: -3px; + top: -3px; + } + + &.point-w { + cursor: ew-resize; + left: -3px; + margin-top: -3px; + top: 50%; + } + + &.point-s { + bottom: -3px; + cursor: s-resize; + left: 50%; + margin-left: -3px; + } + + &.point-ne { + cursor: nesw-resize; + right: -3px; + top: -3px; + } + + &.point-nw { + cursor: nwse-resize; + left: -3px; + top: -3px; + } + + &.point-sw { + bottom: -3px; + cursor: nesw-resize; + left: -3px; + } + + &.point-se { + bottom: -3px; + cursor: nwse-resize; + height: 20px; + opacity: 1; + right: -3px; + width: 20px; + + @media (min-width: 768px) { + height: 15px; + width: 15px; + } + + @media (min-width: 992px) { + height: 10px; + width: 10px; + } + + @media (min-width: 1200px) { + height: 5px; + opacity: .75; + width: 5px; + } + } + + &.point-se:before { + background-color: var(--blue); + bottom: -50%; + content: ' '; + display: block; + height: 200%; + opacity: 0; + position: absolute; + right: -50%; + width: 200%; + } +} + +.cropper-invisible { + opacity: 0; +} + +.cropper-bg { + background-image: url('../images/bg.png'); +} + +.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; +} + |