123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372 |
- /*! Jcrop.css v2.0.4 - build: 20151117
- * Copyright 2008-2015 Tapmodo Interactive LLC
- * Free software under MIT License
- **/
- /*
- The outer-most container in a typical Jcrop instance
- If you are having difficulty with formatting related to styles
- on a parent element, place any fixes here or in a like selector
- You can also style this element if you want to add a border, etc
- A better method for styling can be seen below with .jcrop-light
- (Add a class to the holder and style elements for that extended class)
- */
- .jcrop-active {
- direction: ltr;
- text-align: left;
- box-sizing: border-box;
- /* IE10 touch compatibility */
- -ms-touch-action: none;
- }
- .jcrop-dragging {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .jcrop-selection {
- z-index: 2;
- }
- .jcrop-selection.jcrop-current {
- z-index: 4;
- }
- /* Selection Borders */
- .jcrop-border {
- background: #ffffff url("Jcrop.gif");
- line-height: 1px !important;
- font-size: 0 !important;
- overflow: hidden;
- position: absolute;
- filter: alpha(opacity=50) !important;
- opacity: 0.5 !important;
- }
- .jcrop-border.ord-w,
- .jcrop-border.ord-e,
- .jcrop-border.ord-n {
- top: 0px;
- }
- .jcrop-border.ord-n,
- .jcrop-border.ord-s {
- width: 100%;
- height: 1px !important;
- }
- .jcrop-border.ord-w,
- .jcrop-border.ord-e {
- height: 100%;
- width: 1px !important;
- }
- .jcrop-border.ord-e {
- right: -1px;
- }
- .jcrop-border.ord-n {
- top: -1px;
- }
- .jcrop-border.ord-w {
- left: -1px;
- }
- .jcrop-border.ord-s {
- bottom: -1px;
- }
- .jcrop-selection {
- position: absolute;
- }
- .jcrop-box {
- z-index: 2;
- display: block;
- background: none;
- border: none;
- padding: 0;
- margin: 0;
- font-size: 0;
- }
- .jcrop-box:hover {
- background: none;
- }
- .jcrop-box:active {
- background: none;
- }
- .jcrop-box:focus {
- outline: 1px rgba(128, 128, 128, 0.65) dotted;
- }
- .jcrop-active,
- .jcrop-box {
- position: relative;
- }
- .jcrop-box {
- width: 100%;
- height: 100%;
- cursor: move;
- }
- /* Selection Handles */
- .jcrop-handle {
- z-index: 4;
- background-color: rgba(49, 28, 28, 0.58);
- border: 1px #eeeeee solid;
- width: 9px;
- height: 9px;
- font-size: 0;
- position: absolute;
- filter: alpha(opacity=80) !important;
- opacity: 0.8 !important;
- }
- .jcrop-handle.ord-n {
- left: 50%;
- margin-left: -5px;
- margin-top: -5px;
- top: 0;
- cursor: n-resize;
- }
- .jcrop-handle.ord-s {
- bottom: 0;
- left: 50%;
- margin-bottom: -5px;
- margin-left: -5px;
- cursor: s-resize;
- }
- .jcrop-handle.ord-e {
- margin-right: -5px;
- margin-top: -5px;
- right: 0;
- top: 50%;
- cursor: e-resize;
- }
- .jcrop-handle.ord-w {
- left: 0;
- margin-left: -5px;
- margin-top: -5px;
- top: 50%;
- cursor: w-resize;
- }
- .jcrop-handle.ord-nw {
- left: 0;
- margin-left: -5px;
- margin-top: -5px;
- top: 0;
- cursor: nw-resize;
- }
- .jcrop-handle.ord-ne {
- margin-right: -5px;
- margin-top: -5px;
- right: 0;
- top: 0;
- cursor: ne-resize;
- }
- .jcrop-handle.ord-se {
- bottom: 0;
- margin-bottom: -5px;
- margin-right: -5px;
- right: 0;
- cursor: se-resize;
- }
- .jcrop-handle.ord-sw {
- bottom: 0;
- left: 0;
- margin-bottom: -5px;
- margin-left: -5px;
- cursor: sw-resize;
- }
- /* Larger Selection Handles for Touch */
- .jcrop-touch .jcrop-handle {
- z-index: 4;
- background-color: rgba(49, 28, 28, 0.58);
- border: 1px #eeeeee solid;
- width: 18px;
- height: 18px;
- font-size: 0;
- position: absolute;
- filter: alpha(opacity=80) !important;
- opacity: 0.8 !important;
- }
- .jcrop-touch .jcrop-handle.ord-n {
- left: 50%;
- margin-left: -10px;
- margin-top: -10px;
- top: 0;
- cursor: n-resize;
- }
- .jcrop-touch .jcrop-handle.ord-s {
- bottom: 0;
- left: 50%;
- margin-bottom: -10px;
- margin-left: -10px;
- cursor: s-resize;
- }
- .jcrop-touch .jcrop-handle.ord-e {
- margin-right: -10px;
- margin-top: -10px;
- right: 0;
- top: 50%;
- cursor: e-resize;
- }
- .jcrop-touch .jcrop-handle.ord-w {
- left: 0;
- margin-left: -10px;
- margin-top: -10px;
- top: 50%;
- cursor: w-resize;
- }
- .jcrop-touch .jcrop-handle.ord-nw {
- left: 0;
- margin-left: -10px;
- margin-top: -10px;
- top: 0;
- cursor: nw-resize;
- }
- .jcrop-touch .jcrop-handle.ord-ne {
- margin-right: -10px;
- margin-top: -10px;
- right: 0;
- top: 0;
- cursor: ne-resize;
- }
- .jcrop-touch .jcrop-handle.ord-se {
- bottom: 0;
- margin-bottom: -10px;
- margin-right: -10px;
- right: 0;
- cursor: se-resize;
- }
- .jcrop-touch .jcrop-handle.ord-sw {
- bottom: 0;
- left: 0;
- margin-bottom: -10px;
- margin-left: -10px;
- cursor: sw-resize;
- }
- /* Selection Dragbars */
- .jcrop-dragbar {
- font-size: 0;
- position: absolute;
- }
- .jcrop-dragbar.ord-n,
- .jcrop-dragbar.ord-s {
- height: 9px !important;
- width: 100%;
- }
- .jcrop-dragbar.ord-e,
- .jcrop-dragbar.ord-w {
- top: 0px;
- height: 100%;
- width: 9px !important;
- }
- .jcrop-dragbar.ord-n {
- margin-top: -5px;
- cursor: n-resize;
- top: 0px;
- }
- .jcrop-dragbar.ord-s {
- bottom: 0;
- margin-bottom: -5px;
- cursor: s-resize;
- }
- .jcrop-dragbar.ord-e {
- margin-right: -5px;
- right: 0;
- cursor: e-resize;
- }
- .jcrop-dragbar.ord-w {
- margin-left: -5px;
- cursor: w-resize;
- }
- /* Shading panels */
- .jcrop-shades {
- position: relative;
- top: 0;
- left: 0;
- }
- .jcrop-shades div {
- cursor: crosshair;
- }
- /* Various special states */
- .jcrop-noresize .jcrop-dragbar,
- .jcrop-noresize .jcrop-handle {
- display: none;
- }
- .jcrop-selection.jcrop-nodrag .jcrop-box,
- .jcrop-nodrag .jcrop-shades div {
- cursor: default;
- }
- /* The "jcrop-light" class/extension */
- .jcrop-light .jcrop-border {
- background: #ffffff;
- filter: alpha(opacity=70) !important;
- opacity: .70!important;
- }
- .jcrop-light .jcrop-handle {
- background-color: #000000;
- border-color: #ffffff;
- }
- /* The "jcrop-dark" class/extension */
- .jcrop-dark .jcrop-border {
- background: #000000;
- filter: alpha(opacity=70) !important;
- opacity: 0.7 !important;
- }
- .jcrop-dark .jcrop-handle {
- background-color: #ffffff;
- border-color: #000000;
- }
- /* Simple macro to turn off the antlines */
- .solid-line .jcrop-border {
- background: #ffffff;
- }
- .jcrop-thumb {
- position: absolute;
- overflow: hidden;
- z-index: 5;
- }
- /* Fix for twitter bootstrap et al. */
- .jcrop-active img,
- .jcrop-thumb img,
- .jcrop-thumb canvas {
- min-width: none;
- min-height: none;
- max-width: none;
- max-height: none;
- }
- /* Improved multiple selection styles - in progress */
- .jcrop-hl-active .jcrop-border {
- filter: alpha(opacity=20) !important;
- opacity: .20!important;
- }
- .jcrop-hl-active .jcrop-handle {
- filter: alpha(opacity=10) !important;
- opacity: .10!important;
- }
- .jcrop-hl-active .jcrop-selection:hover {
- /*
- .jcrop-handle {
- filter:Alpha(opacity=35)!important;
- opacity:.35!important;
- }
- */
- }
- .jcrop-hl-active .jcrop-selection:hover .jcrop-border {
- background-color: #ccc;
- filter: alpha(opacity=50) !important;
- opacity: .50!important;
- }
- .jcrop-hl-active .jcrop-selection.jcrop-current .jcrop-border {
- background: #808080 url('Jcrop.gif');
- opacity: .35!important;
- filter: alpha(opacity=35) !important;
- }
- .jcrop-hl-active .jcrop-selection.jcrop-current .jcrop-handle {
- filter: alpha(opacity=30) !important;
- opacity: .30!important;
- }
- .jcrop-hl-active .jcrop-selection.jcrop-focus .jcrop-border {
- background: url('Jcrop.gif');
- opacity: .65!important;
- filter: alpha(opacity=65) !important;
- }
- .jcrop-hl-active .jcrop-selection.jcrop-focus .jcrop-handle {
- filter: alpha(opacity=60) !important;
- opacity: .60!important;
- }
- /* Prevent background on button element */
- button.jcrop-box {
- background: none;
- }
|