3 background-color: transparent;
7 border: 1px dashed @color-orange;
11 background-color: @color-orange;
41 background-color: @color-white;
55 outline: 1px dashed @color-orange;
59 background-image: data-uri("../Images/cropper-background.png");
62 .cropper-image-container {
63 height: 100% !important;
64 width: 100% !important;
65 max-width: 1000px !important;
68 // Custom styles for cropper radio buttons
82 // Cropper style tweaks for Bootstrap .panel
84 [aria-expanded=true] {
85 border-left: 2px solid @color-orange;
97 border-width: 10px 10px 10px 0;
98 border-color: transparent @color-orange transparent transparent;
101 &[data-toggle=collapse] {
102 background-color: #333;
106 [aria-expanded=false] {
107 border-left: 2px solid #444;
119 .panel-collapse.collapse {
120 background-color: #2c2c2c !important;
121 border-left: 2px solid @color-orange;
128 > [data-crop-variant] {
131 justify-content: space-between;
135 text-decoration: none !important;
142 .panel-default > .panel-heading + .panel-collapse > .panel-body {
143 border-top-color: #333;
147 .panel-default .panel-heading,
156 background-color: #777;
164 background-color: #888;
169 .open .dropdown-toggle.btn-secondary {
170 &:extend(.cropper .btn-secondary);
174 * Style overrides for CropperJS CSS and additional styles to make cropper look like expected
176 * 1. Fixes hidden drag/resize handles for cropper
177 * 2. Fixes containment on the jQuery UI resizeable
178 * 3. Offset cropper lines and handles to inside of container
180 .cropper-container.cropper-bg {
181 overflow: visible; /* 1 */
185 overflow: hidden; /* 2 */
188 background-color: @color-orange;
189 content: "Cropped area";
198 text-overflow: ellipsis;
201 pointer-events: none;
225 // Style overrides for jQueryUI
226 .ui-resizable-handle {
231 border-color: transparent;
266 background-color: #ccc;
292 // Cropper UI-specific styles
293 .cropper-focus-area {
297 background-color: rgba(215, 187, 0, .5);
302 transition: background-color 300ms;
306 background-color: rgba(211, 35, 46, .6) !important;
307 transition: background-color 300ms;
312 background-color: rgba(215, 187, 0, .7);
316 background-color: rgba(255, 255, 255, .95);
326 text-overflow: ellipsis;
328 padding: 0 4px 0 8px; /* Additional 4px on left due to resize handle on focus area */
329 pointer-events: none;
334 .cropper-cover-area {
335 background: url("../Images/cropper-background-cover-area.svg");
336 pointer-events: none;
343 background-color: rgba(255, 255, 255, .95);
344 content: "Cover area";
353 text-overflow: ellipsis;
356 pointer-events: none;
361 .cropper-preview-thumbnail {
362 -webkit-user-select: none;
363 -moz-user-select: none;
364 -ms-user-select: none;
372 background-color: rgba(0, 0, 0, .5);
393 .cropper-preview-thumbnail-image {
398 .wide .cropper-preview-thumbnail-image {
403 .tall .cropper-preview-thumbnail-image {
408 .cropper-preview-thumbnail-crop-area {
409 border: 1px solid @color-orange;
415 .cropper-preview-thumbnail-focus-area {
416 background-color: rgba(215, 187, 0, .7);
422 :root .cropper-preview-thumbnail-crop-image {
423 image-orientation: 0deg;
433 .cropper-preview-container {
440 min-width: 0 !important;
441 min-height: 0 !important;
442 max-width: none !important;
443 max-height: none !important;