@white: white; @black: black; @selectionBorderWidth: 1px; @selectionBackgroundImage: "Jcrop.gif"; @selectionBackgroundColor: @white; @selectionBackground: @selectionBackgroundColor url(@selectionBackgroundImage); // Setting some variables to // Used to set handle and dragbar size/width // To center on a 1px selection line, use an odd number @grabSize: 9px; // Used to offset handles and dragbar // Default value will center on 1px selection line @grabOffset: (floor(@grabSize/2)+1) * -1; @handleSize: @grabSize; @handleOffset: @grabOffset; @handleBorderWidth: 1px; @handleBorderColor: #eee; @handleBorderStyle: solid; @handleBackgroundColor: rgba(49,28,28,0.58); @handleOpacity: 0.8; @dragbarWidth: @grabSize; @dragbarOffset: @grabOffset; /* 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-current { z-index: 4; } } /* Selection Borders */ .jcrop-border { background: @selectionBackground; line-height: 1px !important; font-size: 0 !important; overflow: hidden; position: absolute; filter: Alpha(opacity=50) !important; opacity: 0.5 !important; &.ord-w, &.ord-e, &.ord-n { top: 0px; } &.ord-n, &.ord-s { width: 100%; height: @selectionBorderWidth !important; } &.ord-w, &.ord-e { height: 100%; width: @selectionBorderWidth !important; } &.ord-e { right: -@selectionBorderWidth; } &.ord-n { top: -@selectionBorderWidth; } &.ord-w { left: -@selectionBorderWidth; } &.ord-s { bottom: -@selectionBorderWidth; } } .jcrop-selection { position: absolute; } .jcrop-box { z-index: 2; display: block; background: none; border: none; padding: 0; margin: 0; font-size: 0; &:hover { background: none; } &:active { background: none; } &:focus { outline: 1px rgba(128,128,128,.65) dotted; } } .jcrop-active, .jcrop-box { position: relative; } .jcrop-box { width: 100%; height: 100%; cursor: move; } .handles (@handleSize;@handleOffset;@bgColor;@bgOpacity;@borderWidth;@borderColor;@borderStyle) { z-index: 4; @ieopacity: @bgOpacity * 100; font-size: 0; background-color: @bgColor; border: @borderWidth @borderColor @borderStyle; width: @handleSize; height: @handleSize; font-size: 0; position: absolute; filter: Alpha(opacity=@ieopacity) !important; opacity: @bgOpacity !important; &.ord-n {left:50%;margin-left:@handleOffset;margin-top:@handleOffset;top:0;cursor:n-resize;} &.ord-s {bottom:0;left:50%;margin-bottom:@handleOffset;margin-left:@handleOffset;cursor:s-resize;} &.ord-e {margin-right:@handleOffset;margin-top:@handleOffset;right:0;top:50%;cursor:e-resize;} &.ord-w {left:0;margin-left:@handleOffset;margin-top:@handleOffset;top:50%;cursor:w-resize;} &.ord-nw {left:0;margin-left:@handleOffset;margin-top:@handleOffset;top:0;cursor:nw-resize;} &.ord-ne {margin-right:@handleOffset;margin-top:@handleOffset;right:0;top:0;cursor:ne-resize;} &.ord-se {bottom:0;margin-bottom:@handleOffset;margin-right:@handleOffset;right:0;cursor:se-resize;} &.ord-sw {bottom:0;left:0;margin-bottom:@handleOffset;margin-left:@handleOffset;cursor:sw-resize;} } .standard-handles (@handleSize;@bgColor;@bgOpacity;@borderColor) { @handleOffset: (floor(@handleSize/2)+1) * -1; .handles(@handleSize;@handleOffset;@bgColor;@bgOpacity;@handleBorderWidth;@borderColor;@handleBorderStyle); } /* Selection Handles */ .jcrop-handle { .standard-handles(@handleSize;@handleBackgroundColor;@handleOpacity;@handleBorderColor); } /* Larger Selection Handles for Touch */ .jcrop-touch .jcrop-handle { .standard-handles(@handleSize * 2;@handleBackgroundColor;@handleOpacity;@handleBorderColor); } /* Selection Dragbars */ .jcrop-dragbar { font-size: 0; position: absolute; &.ord-n, &.ord-s {height:@dragbarWidth !important;width:100%;} &.ord-e, &.ord-w { top:0px; height:100%;width:@dragbarWidth !important;} &.ord-n {margin-top:@dragbarOffset;cursor:n-resize; top:0px; } &.ord-s {bottom:0;margin-bottom:@dragbarOffset;cursor:s-resize;} &.ord-e {margin-right:@dragbarOffset;right:0;cursor:e-resize;} &.ord-w {margin-left:@dragbarOffset;cursor:w-resize;} } /* Shading panels */ .jcrop-shades { position: relative; top: 0; left: 0; div { cursor: crosshair; } } /* Various special states */ .jcrop-noresize { .jcrop-dragbar, .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: @white; filter:Alpha(opacity=70)!important; opacity:.70!important; } .jcrop-handle { background-color: @black; border-color: @white; } } /* The "jcrop-dark" class/extension */ .jcrop-dark { .jcrop-border { background: @black; filter: Alpha(opacity=70) !important; opacity: 0.7 !important; } .jcrop-handle { background-color: @white; border-color: @black; } } /* Simple macro to turn off the antlines */ .solid-line { .jcrop-border { background: @selectionBackgroundColor; } } .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-handle { filter:Alpha(opacity=10)!important; opacity:.10!important; } .jcrop-selection:hover { .jcrop-border { background-color: #ccc; filter:Alpha(opacity=50)!important; opacity:.50!important; } /* .jcrop-handle { filter:Alpha(opacity=35)!important; opacity:.35!important; } */ } .jcrop-selection.jcrop-current { .jcrop-border { background: gray url('Jcrop.gif'); opacity:.35!important; filter:Alpha(opacity=35)!important; } .jcrop-handle { filter:Alpha(opacity=30)!important; opacity:.30!important; } } .jcrop-selection.jcrop-focus { .jcrop-border { background: url('Jcrop.gif'); opacity:.65!important; filter:Alpha(opacity=65)!important; } .jcrop-handle { filter:Alpha(opacity=60)!important; opacity:.60!important; } } } /* Prevent background on button element */ button.jcrop-box { background: none; }