[BUGFIX] Fix CSS layout of cropper UI for Firefox 42/51842/3
authorRaphael Okon <raphael@okon.io>
Fri, 24 Feb 2017 15:59:17 +0000 (16:59 +0100)
committerHelmut Hummel <typo3@helhum.io>
Sat, 25 Feb 2017 09:45:59 +0000 (10:45 +0100)
The fix is to remove previously introduced CSS hacks
and provide a cleaner and leaner base

Resolves: #79998
Resolves: #79989
Releases: master
Change-Id: Ic63b3acaf46f50f92a3c44578c28748dfca74351
Reviewed-on: https://review.typo3.org/51842
Tested-by: Jasmina Ließmann <code@frauliessmann.de>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Jasmina Ließmann <code@frauliessmann.de>
Reviewed-by: Anders Kostending <aha@systime.dk>
Reviewed-by: Helmut Hummel <typo3@helhum.io>
Tested-by: Helmut Hummel <typo3@helhum.io>
Build/Resources/Public/Less/TYPO3/_element_cropper.less
Build/Resources/Public/Less/TYPO3/_element_modal.less
typo3/sysext/backend/Resources/Public/Css/backend.css
typo3/sysext/install/Resources/Public/Css/install.css

index 853a93b..5d945eb 100644 (file)
                outline: 1px dashed @color-orange;
        }
 
+       .cropper-modal {
+               background-color: transparent;
+       }
+
        .cropper-bg {
                background-image: data-uri("../Images/cropper-background.png");
        }
                [aria-expanded=true] {
                        border-left: 2px solid @color-orange;
                        position: relative;
-
-                       &:before {
-                               position: absolute;
-                               left: -10px;
-                               top: 50%;
-                               margin-top: -10px;
-                               content: " ";
-                               width: 0;
-                               height: 0;
-                               border-style: solid;
-                               border-width: 10px 10px 10px 0;
-                               border-color: transparent @color-orange transparent transparent;
-                       }
-
                        &[data-toggle=collapse] {
                                background-color: #333;
                        }
index c0c2066..f5ba154 100644 (file)
        height: 90vh;
        .modal-panel {
                display: flex;
-               max-height: 80vh;
+               height: 80vh;
                overflow: visible;
        }
        .modal-panel-body {
                justify-content: center;
        }
        .modal-panel .modal-panel-body {
-               max-height: 100%;
-               width: 100% !important;
+               height: 100%;
+               width: 78% ;
+               float: none;
+               overflow: hidden
        }
 
        .modal-panel .modal-panel-sidebar {
-               min-width: 300px;
+               width: 22%;
                max-height: 100%;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
 
        .modal-panel .modal-panel-sidebar-right {
                background-color: #212424;
+               float: none;
                position: relative;
        }
 
index 5464aa6..25abc92 100644 (file)
@@ -9715,6 +9715,9 @@ iframe,
 .cropper .cropper-view-box {
   outline: 1px dashed #ff8700;
 }
+.cropper .cropper-modal {
+  background-color: transparent;
+}
 .cropper .cropper-bg {
   background-image: url("../Images/cropper-background.png");
 }
@@ -9740,18 +9743,6 @@ iframe,
   border-left: 2px solid #ff8700;
   position: relative;
 }
-.cropper .panel-group [aria-expanded=true]:before {
-  position: absolute;
-  left: -10px;
-  top: 50%;
-  margin-top: -10px;
-  content: " ";
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 10px 10px 10px 0;
-  border-color: transparent #ff8700 transparent transparent;
-}
 .cropper .panel-group [aria-expanded=true][data-toggle=collapse] {
   background-color: #333;
 }
@@ -10497,7 +10488,7 @@ div#contentMenu1 {
 .modal-image-manipulation .modal-panel {
   display: -ms-flexbox;
   display: flex;
-  max-height: 80vh;
+  height: 80vh;
   overflow: visible;
 }
 .modal-image-manipulation .modal-panel-body {
@@ -10510,17 +10501,20 @@ div#contentMenu1 {
       justify-content: center;
 }
 .modal-image-manipulation .modal-panel .modal-panel-body {
-  max-height: 100%;
-  width: 100% !important;
+  height: 100%;
+  width: 78% ;
+  float: none;
+  overflow: hidden;
 }
 .modal-image-manipulation .modal-panel .modal-panel-sidebar {
-  min-width: 300px;
+  width: 22%;
   max-height: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 .modal-image-manipulation .modal-panel .modal-panel-sidebar-right {
   background-color: #212424;
+  float: none;
   position: relative;
 }
 .modal-image-manipulation .modal-panel .modal-footer {
index fb23cf7..8df8dab 100644 (file)
@@ -5921,7 +5921,7 @@ a.thumbnail.active {
   overflow: hidden;
   height: 18px;
   margin-bottom: 18px;
-  background-color: #f5f5f5;
+  background-color: #dedede;
   border-radius: 2px;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }