Build/Resources/Public/Less/TYPO3/_element_cropper.less

   1 .cropper {
   2         .cropper-line {
   3                 background-color: transparent;
   4         }
   5
   6         .cropper-dashed {
   7                 border: 1px dashed @color-orange;
   8         }
   9
  10         .cropper-point {
  11                 background-color: @color-orange;
  12
  13                 &.point-nw {
  14                         left: 0; /* 3 */
  15                         top: 0; /* 3 */
  16                 }
  17
  18                 &.point-w {
  19                         left: 0; /* 3 */
  20                 }
  21
  22                 &.point-sw {
  23                         left: 0; /* 3 */
  24                         bottom: 0; /* 3 */
  25                 }
  26
  27                 &.point-ne {
  28                         right: 0; /* 3 */
  29                         top: 0; /* 3 */
  30                 }
  31
  32                 &.point-e {
  33                         right: 0; /* 3 */
  34                 }
  35
  36                 &.point-se {
  37                         right: 0; /* 3 */
  38                         bottom: 0; /* 3 */
  39
  40                         &:before {
  41                                 background-color: @color-white;
  42                         }
  43                 }
  44
  45                 &.point-n {
  46                         top: 0; /* 3 */
  47                 }
  48
  49                 &.point-s {
  50                         bottom: 0; /* 3 */
  51                 }
  52         }
  53
  54         .cropper-view-box {
  55                 outline: 1px dashed @color-orange;
  56         }
  57
  58         .cropper-bg {
  59                 background-image: data-uri("../Images/cropper-background.png");
  60         }
  61
  62         .cropper-image-container {
  63                 height: 100% !important;
  64                 width: 100% !important;
  65                 max-width: 1000px !important;
  66         }
  67
  68         // Custom styles for cropper radio buttons
  69         .ratio-buttons {
  70                 margin-bottom: 10px;
  71
  72                 .btn {
  73                         &.btn-default {
  74                                 margin-bottom: 5px;
  75                         }
  76                         &:not(.active) .fa {
  77                                 display: none;
  78                         }
  79                 }
  80         }
  81
  82         // Cropper style tweaks for Bootstrap .panel
  83         .panel-group {
  84                 [aria-expanded=true] {
  85                         border-left: 2px solid @color-orange;
  86                         position: relative;
  87
  88                         &:before {
  89                                 position: absolute;
  90                                 left: -10px;
  91                                 top: 50%;
  92                                 margin-top: -10px;
  93                                 content: " ";
  94                                 width: 0;
  95                                 height: 0;
  96                                 border-style: solid;
  97                                 border-width: 10px 10px 10px 0;
  98                                 border-color: transparent @color-orange transparent transparent;
  99                         }
 100
 101                         &[data-toggle=collapse] {
 102                                 background-color: #333;
 103                         }
 104                 }
 105
 106                 [aria-expanded=false] {
 107                         border-left: 2px solid #444;
 108                         position: relative;
 109                 }
 110
 111                 table, label {
 112                         color: @color-white;
 113                 }
 114
 115                 position: relative;
 116                 margin: -15px;
 117         }
 118
 119         .panel-collapse.collapse {
 120                 background-color: #2c2c2c !important;
 121                 border-left: 2px solid @color-orange;
 122         }
 123
 124         .panel-heading {
 125                 padding: 0;
 126
 127                 .panel-title {
 128                         > [data-crop-variant] {
 129                                 display: flex;
 130                                 padding: 10px 15px;
 131                                 justify-content: space-between;
 132                         }
 133
 134                         > a {
 135                                 text-decoration: none !important;
 136                                 user-select: none;
 137                                 font-size: 13px;
 138                         }
 139                 }
 140         }
 141
 142         .panel-default > .panel-heading + .panel-collapse > .panel-body {
 143                 border-top-color: #333;
 144         }
 145
 146         .panel-group,
 147         .panel-default .panel-heading,
 148         .panel {
 149                 background: #222222;
 150                 border: none;
 151                 color: @color-white;
 152         }
 153
 154         .btn-secondary {
 155                 color: @color-white;
 156                 background-color: #777;
 157                 border-color: #555;
 158
 159                 &:hover,
 160                 &:focus,
 161                 &:active,
 162                 &.active {
 163                         color: @color-white;
 164                         background-color: #888;
 165                         border-color: #444;
 166                 }
 167         }
 168
 169         .open .dropdown-toggle.btn-secondary {
 170                 &:extend(.cropper .btn-secondary);
 171         }
 172
 173         /**
 174          * Style overrides for CropperJS CSS and additional styles to make cropper look like expected
 175          *
 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
 179          */
 180         .cropper-container.cropper-bg {
 181                 overflow: visible; /* 1 */
 182         }
 183
 184         .cropper-crop-box {
 185                 overflow: hidden; /* 2 */
 186
 187                 &:after {
 188                         background-color: @color-orange;
 189                         content: "Cropped area";
 190                         position: absolute;
 191                         left: 0;
 192                         top: 0;
 193                         font-size: 10px;
 194                         color: black;
 195                         height: 16px;
 196                         width: 100%;
 197                         max-width: 80px;
 198                         text-overflow: ellipsis;
 199                         white-space: nowrap;
 200                         padding: 0 4px;
 201                         pointer-events: none;
 202                         overflow: hidden;
 203                 }
 204         }
 205
 206
 207         .cropper-line {
 208                 &.line-w {
 209                         left: 0; /* 3 */
 210                 }
 211
 212                 &.line-e {
 213                         right: 0; /* 3 */
 214                 }
 215
 216                 &.line-n {
 217                         top: 0; /* 3 */
 218                 }
 219
 220                 &.line-s {
 221                         bottom: 0; /* 3 */
 222                 }
 223         }
 224
 225         // Style overrides for jQueryUI
 226         .ui-resizable-handle {
 227                 &.ui-resizable-n,
 228                 &.ui-resizable-s,
 229                 &.ui-resizable-e,
 230                 &.ui-resizable-w {
 231                         border-color: transparent;
 232                         transform: none;
 233                 }
 234
 235                 &.ui-resizable-e,
 236                 &.ui-resizable-w {
 237                         width: 6px;
 238                 }
 239
 240                 &.ui-resizable-n,
 241                 &.ui-resizable-s {
 242                         height: 6px;
 243                 }
 244
 245                 &.ui-resizable-e {
 246                         right: 0;
 247                 }
 248
 249                 &.ui-resizable-w {
 250                         left: 0;
 251                 }
 252
 253                 &.ui-resizable-n {
 254                         top: 0;
 255                 }
 256
 257                 &.ui-resizable-s {
 258                         bottom: 0;
 259                 }
 260
 261                 &.ui-resizable-sw,
 262                 &.ui-resizable-se,
 263                 &.ui-resizable-ne,
 264                 &.ui-resizable-nw {
 265                         transform: none;
 266                         background-color: #ccc;
 267                         height: 6px;
 268                         width: 6px;
 269                 }
 270
 271                 &.ui-resizable-nw {
 272                         top: 0;
 273                         left: 0;
 274                 }
 275
 276                 &.ui-resizable-ne {
 277                         top: 0;
 278                         right: 0;
 279                 }
 280
 281                 &.ui-resizable-se {
 282                         bottom: 0;
 283                         right: 0;
 284                 }
 285
 286                 &.ui-resizable-sw {
 287                         bottom: 0;
 288                         left: 0;
 289                 }
 290         }
 291
 292         // Cropper UI-specific styles
 293         .cropper-focus-area {
 294                 cursor: move;
 295                 height: 200px;
 296                 width: 200px;
 297                 background-color: rgba(215, 187, 0, .5);
 298                 position: absolute;
 299                 z-index: 999999;
 300                 opacity: 1;
 301                 overflow: hidden;
 302                 transition: background-color 300ms;
 303
 304                 &.has-nodrop,
 305                 &.has-nodrop:hover {
 306                         background-color: rgba(211, 35, 46, .6) !important;
 307                         transition: background-color 300ms;
 308                 }
 309
 310                 &:hover,
 311                 &:focus {
 312                         background-color: rgba(215, 187, 0, .7);
 313                 }
 314
 315                 &:after {
 316                         background-color: rgba(255, 255, 255, .95);
 317                         content: "Focus";
 318                         position: absolute;
 319                         left: 0;
 320                         top: 0;
 321                         font-size: 10px;
 322                         color: black;
 323                         height: 16px;
 324                         width: 100%;
 325                         max-width: 44px;
 326                         text-overflow: ellipsis;
 327                         white-space: nowrap;
 328                         padding: 0 4px 0 8px; /* Additional 4px on left due to resize handle on focus area */
 329                         pointer-events: none;
 330                         overflow: hidden;
 331                 }
 332         }
 333
 334         .cropper-cover-area {
 335                 background: url("../Images/cropper-background-cover-area.svg");
 336                 pointer-events: none;
 337                 cursor: not-allowed;
 338                 position: absolute;
 339                 opacity: 1;
 340                 z-index: 99999;
 341
 342                 &:after {
 343                         background-color: rgba(255, 255, 255, .95);
 344                         content: "Cover area";
 345                         position: absolute;
 346                         left: 0;
 347                         top: 0;
 348                         font-size: 10px;
 349                         color: black;
 350                         height: 16px;
 351                         width: 100%;
 352                         max-width: 80px;
 353                         text-overflow: ellipsis;
 354                         white-space: nowrap;
 355                         padding: 0 4px;
 356                         pointer-events: none;
 357                         overflow: hidden;
 358                 }
 359         }
 360
 361         .cropper-preview-thumbnail {
 362                 -webkit-user-select: none;
 363                 -moz-user-select: none;
 364                 -ms-user-select: none;
 365                 user-select: none;
 366                 position: relative;
 367                 max-width: 100px;
 368                 max-height: 100px;
 369                 overflow: hidden;
 370
 371                 &:after {
 372                         background-color: rgba(0, 0, 0, .5);
 373                         content: " ";
 374                         top: 0;
 375                         left: 0;
 376                         bottom: 0;
 377                         right: 0;
 378                         position: absolute;
 379                         z-index: 9;
 380                 }
 381
 382                 &.wide {
 383                         width: 100px;
 384                         height: auto;
 385                 }
 386
 387                 &.tall {
 388                         width: auto;
 389                         height: 80px;
 390                 }
 391         }
 392
 393         .cropper-preview-thumbnail-image {
 394                 left: 0;
 395                 top: 0;
 396         }
 397
 398         .wide .cropper-preview-thumbnail-image {
 399                 width: 100%;
 400                 height: auto;
 401         }
 402
 403         .tall .cropper-preview-thumbnail-image {
 404                 width: auto;
 405                 height: 100%;
 406         }
 407
 408         .cropper-preview-thumbnail-crop-area {
 409                 border: 1px solid @color-orange;
 410                 position: absolute;
 411                 z-index: 10;
 412                 overflow: hidden;
 413         }
 414
 415         .cropper-preview-thumbnail-focus-area {
 416                 background-color: rgba(215, 187, 0, .7);
 417                 position: absolute;
 418                 z-index: 11;
 419         }
 420 }
 421
 422 :root .cropper-preview-thumbnail-crop-image {
 423         image-orientation: 0deg;
 424         display: block;
 425         height: 100%;
 426         width: 100%;
 427         min-width: 0;
 428         max-width: none;
 429         min-height: 0;
 430         max-height: none;
 431 }
 432
 433 .cropper-preview-container {
 434         overflow: hidden;
 435         position: relative;
 436         img {
 437                 display: block;
 438                 position: absolute;
 439                 width: 100%;
 440                 min-width: 0 !important;
 441                 min-height: 0 !important;
 442                 max-width: none !important;
 443                 max-height: none !important;
 444         }
 445 }