wysiwyg-rails 2.6.0 → 2.9.0

data/app/assets/stylesheets/froala_editor.pkgd.css

@@ -1,7 +1,7 @@
 /*!
- * froala_editor v2.5.1 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v2.9.0 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
- * Copyright 2014-2017 Froala Labs
+ * Copyright 2014-2018 Froala Labs
  */
 
 .clearfix::after {
@@ -26,12 +26,15 @@
 }
 .fr-box.fr-basic .fr-element {
   color: #000000;
-  padding: 10px;
+  padding: 16px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   overflow-x: auto;
-  min-height: 40px;
+  min-height: 52px;
+}
+.fr-box.fr-basic.fr-rtl .fr-element {
+  text-align: right;
 }
 .fr-element {
   background: transparent;
@@ -55,14 +58,6 @@
   -webkit-user-select: none;
   -ms-user-select: none;
 }
-.fr-element [contenteditable="false"] {
-  user-select: none;
-  -o-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
 .fr-element [contenteditable="true"] {
   outline: 0px solid transparent;
 }
@@ -106,7 +101,8 @@
   -o-transition: transform 0.2s ease 0s;
   fill: #1e88e5;
 }
-.fr-box a.fr-floating-btn i {
+.fr-box a.fr-floating-btn i,
+.fr-box a.fr-floating-btn svg {
   font-size: 14px;
   line-height: 32px;
 }
@@ -160,11 +156,11 @@ iframe.fr-iframe {
 .fr-wrapper.show-placeholder .fr-placeholder {
   display: block;
 }
-.fr-wrapper ::selection {
+.fr-wrapper ::-moz-selection {
   background: #b5d6fd;
   color: #000000;
 }
-.fr-wrapper ::-moz-selection {
+.fr-wrapper ::selection {
   background: #b5d6fd;
   color: #000000;
 }
@@ -199,6 +195,37 @@ iframe.fr-iframe {
   -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
   box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 1px 1px rgba(0, 0, 0, 0.16);
 }
+@media (min-width: 992px) {
+  .fr-box.fr-document {
+    min-width: 21cm;
+  }
+  .fr-box.fr-document .fr-wrapper {
+    text-align: center;
+    padding: 30px;
+    min-width: 21cm;
+    background: #EFEFEF;
+  }
+  .fr-box.fr-document .fr-wrapper .fr-element {
+    text-align: left;
+    background: #FFF;
+    width: 21cm;
+    margin: auto;
+    min-height: 26cm !important;
+    padding: 1cm 2cm;
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
+    overflow: visible;
+  }
+  .fr-box.fr-document .fr-wrapper .fr-element hr {
+    margin-left: -2cm;
+    margin-right: -2cm;
+    background: #EFEFEF;
+    height: 1cm;
+    outline: none;
+    border: none;
+  }
+}
 .fr-tooltip {
   position: absolute;
   top: 0;
@@ -233,7 +260,7 @@ iframe.fr-iframe {
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
-  z-index: 9997;
+  z-index: 2147483647;
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -244,6 +271,16 @@ iframe.fr-iframe {
   opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 }
+.fr-toolbar .fr-btn-wrap,
+.fr-popup .fr-btn-wrap {
+  float: left;
+  white-space: nowrap;
+  position: relative;
+}
+.fr-toolbar .fr-btn-wrap.fr-hidden,
+.fr-popup .fr-btn-wrap.fr-hidden {
+  display: none;
+}
 .fr-toolbar .fr-command.fr-btn,
 .fr-popup .fr-command.fr-btn {
   background: transparent;
@@ -292,7 +329,9 @@ iframe.fr-iframe {
   width: auto;
 }
 .fr-toolbar .fr-command.fr-btn i,
-.fr-popup .fr-command.fr-btn i {
+.fr-popup .fr-command.fr-btn i,
+.fr-toolbar .fr-command.fr-btn svg,
+.fr-popup .fr-command.fr-btn svg {
   display: block;
   font-size: 14px;
   width: 14px;
@@ -316,7 +355,7 @@ iframe.fr-iframe {
   font-size: 14px;
   display: block;
   line-height: 17px;
-  min-width: 38px;
+  min-width: 34px;
   float: left;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -348,7 +387,9 @@ iframe.fr-iframe {
 .fr-toolbar .fr-command.fr-btn.fr-dropdown span,
 .fr-popup .fr-command.fr-btn.fr-dropdown span,
 .fr-toolbar .fr-command.fr-btn.fr-dropdown img,
-.fr-popup .fr-command.fr-btn.fr-dropdown img {
+.fr-popup .fr-command.fr-btn.fr-dropdown img,
+.fr-toolbar .fr-command.fr-btn.fr-dropdown svg,
+.fr-popup .fr-command.fr-btn.fr-dropdown svg {
   margin-left: 8px;
   margin-right: 16px;
 }
@@ -411,20 +452,24 @@ iframe.fr-iframe {
 .fr-popup.fr-rtl .fr-command.fr-btn {
   float: right;
 }
-.fr-toolbar.fr-inline .fr-command.fr-btn {
+.fr-toolbar.fr-inline .fr-command.fr-btn:not(.fr-hidden) {
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
   float: none;
 }
 .fr-desktop .fr-command:hover,
-.fr-desktop .fr-command:focus {
+.fr-desktop .fr-command:focus,
+.fr-desktop .fr-command.fr-btn-hover,
+.fr-desktop .fr-command.fr-expanded {
   outline: 0;
   color: #222222;
   background: #ebebeb;
 }
 .fr-desktop .fr-command:hover::after,
-.fr-desktop .fr-command:focus::after {
+.fr-desktop .fr-command:focus::after,
+.fr-desktop .fr-command.fr-btn-hover::after,
+.fr-desktop .fr-command.fr-expanded::after {
   border-top-color: #222222 !important;
 }
 .fr-desktop .fr-command.fr-selected {
@@ -432,7 +477,9 @@ iframe.fr-iframe {
   background: #d6d6d6;
 }
 .fr-desktop .fr-command.fr-active:hover,
-.fr-desktop .fr-command.fr-active:focus {
+.fr-desktop .fr-command.fr-active:focus,
+.fr-desktop .fr-command.fr-active.fr-btn-hover,
+.fr-desktop .fr-command.fr-active.fr-expanded {
   color: #1e88e5;
   background: #ebebeb;
 }
@@ -454,6 +501,15 @@ iframe.fr-iframe {
 .fr-popup.fr-mobile .fr-command.fr-blink {
   background: transparent;
 }
+.fr-command.fr-btn.fr-options {
+  width: 16px;
+  margin-left: -5px;
+}
+.fr-command.fr-btn.fr-options.fr-btn-hover,
+.fr-command.fr-btn.fr-options:hover,
+.fr-command.fr-btn.fr-options:focus {
+  border-left: solid 1px #FAFAFA;
+}
 .fr-command.fr-btn + .fr-dropdown-menu {
   display: inline-block;
   position: absolute;
@@ -463,6 +519,7 @@ iframe.fr-iframe {
   z-index: 4;
   -webkit-overflow-scrolling: touch;
   overflow: hidden;
+  zoom: 1;
   border-radius: 0 0 2px 2px;
   -moz-border-radius: 0 0 2px 2px;
   -webkit-border-radius: 0 0 2px 2px;
@@ -470,6 +527,14 @@ iframe.fr-iframe {
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
 }
+.fr-command.fr-btn + .fr-dropdown-menu.test-height .fr-dropdown-wrapper {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -o-transition: none;
+  height: auto;
+  max-height: 275px;
+}
 .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper {
   background: #ffffff;
   padding: 0;
@@ -521,6 +586,9 @@ iframe.fr-iframe {
   color: #bdbdbd;
   cursor: default;
 }
+.fr-command.fr-btn:not(.fr-active) + .fr-dropdown-menu {
+  left: -3000px !important;
+}
 .fr-command.fr-btn.fr-active + .fr-dropdown-menu {
   display: inline-block;
   -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 2px 1px rgba(0, 0, 0, 0.14);
@@ -561,11 +629,25 @@ body.prevent-scroll.fr-mobile {
   bottom: 0;
   right: 0;
   width: 100%;
-  z-index: 9999;
+  z-index: 2147483640;
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
+  line-height: 1.2;
+}
+.fr-modal.fr-middle .fr-modal-wrapper {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  position: absolute;
 }
 .fr-modal .fr-modal-wrapper {
   border-radius: 2px;
@@ -585,7 +667,6 @@ body.prevent-scroll.fr-mobile {
   border-top: 5px solid #222222;
   overflow: hidden;
   width: 90%;
-  padding-bottom: 10px;
   position: relative;
 }
 @media (min-width: 768px) and (max-width: 991px) {
@@ -597,7 +678,7 @@ body.prevent-scroll.fr-mobile {
 @media (min-width: 992px) {
   .fr-modal .fr-modal-wrapper {
     margin: 50px auto;
-    width: 600px;
+    width: 960px;
   }
 }
 .fr-modal .fr-modal-wrapper .fr-modal-head {
@@ -616,7 +697,7 @@ body.prevent-scroll.fr-mobile {
   -ms-transition: height 0.2s ease 0s;
   -o-transition: height 0.2s ease 0s;
 }
-.fr-modal .fr-modal-wrapper .fr-modal-head i {
+.fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-close {
   padding: 12px;
   width: 20px;
   font-size: 16px;
@@ -626,8 +707,6 @@ body.prevent-scroll.fr-mobile {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
-}
-.fr-modal .fr-modal-wrapper .fr-modal-head i.fr-modal-close {
   position: absolute;
   top: 0;
   right: 0;
@@ -649,10 +728,48 @@ body.prevent-scroll.fr-mobile {
   height: 100%;
   min-height: 150px;
   overflow-y: scroll;
+  padding-bottom: 10px;
 }
 .fr-modal .fr-modal-wrapper div.fr-modal-body:focus {
   outline: 0;
 }
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command {
+  height: 36px;
+  line-height: 1;
+  color: #1e88e5;
+  padding: 10px;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background: none;
+  font-size: 16px;
+  outline: none;
+  -webkit-transition: background 0.2s ease 0s;
+  -moz-transition: background 0.2s ease 0s;
+  -ms-transition: background 0.2s ease 0s;
+  -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command + button {
+  margin-left: 24px;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover,
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus {
+  background: #ebebeb;
+  color: #1e88e5;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active {
+  background: #d6d6d6;
+  color: #1e88e5;
+}
+.fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner {
+  border: 0;
+}
 .fr-desktop .fr-modal-wrapper .fr-modal-head i:hover {
   background: #ebebeb;
 }
@@ -667,7 +784,7 @@ body.prevent-scroll.fr-mobile {
   -moz-opacity: 0.5;
   opacity: 0.5;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  z-index: 9998;
+  z-index: 2147483639;
 }
 .fr-popup {
   position: absolute;
@@ -694,13 +811,14 @@ body.prevent-scroll.fr-mobile {
   -webkit-user-select: none;
   -ms-user-select: none;
   margin-top: 10px;
-  z-index: 9995;
+  z-index: 2147483635;
   text-align: left;
   border: 0px;
   border-top: 5px solid #222222;
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  line-height: 1.2;
 }
 .fr-popup .fr-input-focus {
   background: #f5f5f5;
@@ -722,6 +840,9 @@ body.prevent-scroll.fr-mobile {
   opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 }
+.fr-popup.fr-empty {
+  display: none !important;
+}
 .fr-popup .fr-hs {
   display: block !important;
 }
@@ -858,6 +979,12 @@ body.prevent-scroll.fr-mobile {
   -moz-transition: background 0.2s ease 0s;
   -ms-transition: background 0.2s ease 0s;
   -o-transition: background 0.2s ease 0s;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
 }
 .fr-popup .fr-action-buttons button.fr-command + button {
   margin-left: 24px;
@@ -1020,6 +1147,7 @@ body.prevent-scroll.fr-mobile {
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  line-height: 1.2;
 }
 .fr-toolbar::after {
   clear: both;
@@ -1409,6 +1537,36 @@ textarea.fr-code {
   -ms-transform: translate3d(-100%, 0, 0);
   -o-transform: translate3d(-100%, 0, 0);
 }
+.fr-popup .fr-color-hex-layer {
+  width: 100%;
+  margin: 0px;
+  padding: 10px;
+}
+.fr-popup .fr-color-hex-layer .fr-input-line {
+  float: left;
+  width: calc(100% - 50px);
+  padding: 8px 0 0;
+}
+.fr-popup .fr-color-hex-layer .fr-action-buttons {
+  float: right;
+  width: 50px;
+}
+.fr-popup .fr-color-hex-layer .fr-action-buttons button {
+  background-color: #1e88e5;
+  color: #FFF;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-size: 13px;
+  height: 32px;
+}
+.fr-popup .fr-color-hex-layer .fr-action-buttons button:hover {
+  background-color: #166dba;
+  color: #FFF;
+}
 .fr-popup .fr-separator + .fr-colors-tabs {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
@@ -1430,7 +1588,8 @@ textarea.fr-code {
   position: relative;
   z-index: 1;
 }
-.fr-popup .fr-color-set > span > i {
+.fr-popup .fr-color-set > span > i,
+.fr-popup .fr-color-set > span > svg {
   text-align: center;
   line-height: 32px;
   height: 32px;
@@ -1492,7 +1651,7 @@ textarea.fr-code {
   opacity: 0.2;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   position: absolute;
-  z-index: 9999;
+  z-index: 2147483640;
   display: none;
 }
 .fr-drag-helper.fr-visible {
@@ -1558,7 +1717,7 @@ textarea.fr-code {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
-.fr-file-upload-layer {
+.fr-popup .fr-file-upload-layer {
   border: dashed 2px #bdbdbd;
   padding: 25px 0;
   position: relative;
@@ -1570,14 +1729,14 @@ textarea.fr-code {
   box-sizing: border-box;
   text-align: center;
 }
-.fr-file-upload-layer:hover {
+.fr-popup .fr-file-upload-layer:hover {
   background: #ebebeb;
 }
-.fr-file-upload-layer.fr-drop {
+.fr-popup .fr-file-upload-layer.fr-drop {
   background: #ebebeb;
   border-color: #1e88e5;
 }
-.fr-file-upload-layer .fr-form {
+.fr-popup .fr-file-upload-layer .fr-form {
   -webkit-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
@@ -1587,13 +1746,13 @@ textarea.fr-code {
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 9999;
+  z-index: 2147483640;
   overflow: hidden;
   margin: 0 !important;
   padding: 0 !important;
   width: 100% !important;
 }
-.fr-file-upload-layer .fr-form input {
+.fr-popup .fr-file-upload-layer .fr-form input {
   cursor: pointer;
   position: absolute;
   right: 0px;
@@ -1604,20 +1763,20 @@ textarea.fr-code {
   margin: 0px;
   font-size: 400px;
 }
-.fr-file-progress-bar-layer {
+.fr-popup .fr-file-progress-bar-layer {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
-.fr-file-progress-bar-layer > h3 {
+.fr-popup .fr-file-progress-bar-layer > h3 {
   font-size: 16px;
   margin: 10px 0;
   font-weight: normal;
 }
-.fr-file-progress-bar-layer > div.fr-action-buttons {
+.fr-popup .fr-file-progress-bar-layer > div.fr-action-buttons {
   display: none;
 }
-.fr-file-progress-bar-layer > div.fr-loader {
+.fr-popup .fr-file-progress-bar-layer > div.fr-loader {
   background: #bcdbf7;
   height: 10px;
   width: 100%;
@@ -1625,7 +1784,7 @@ textarea.fr-code {
   overflow: hidden;
   position: relative;
 }
-.fr-file-progress-bar-layer > div.fr-loader span {
+.fr-popup .fr-file-progress-bar-layer > div.fr-loader span {
   display: block;
   height: 100%;
   width: 0%;
@@ -1635,7 +1794,7 @@ textarea.fr-code {
   -ms-transition: width 0.2s ease 0s;
   -o-transition: width 0.2s ease 0s;
 }
-.fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+.fr-popup .fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span {
   width: 30% !important;
   position: absolute;
   top: 0;
@@ -1644,10 +1803,10 @@ textarea.fr-code {
   -o-animation: loading 2s linear infinite;
   animation: loading 2s linear infinite;
 }
-.fr-file-progress-bar-layer.fr-error > div.fr-loader {
+.fr-popup .fr-file-progress-bar-layer.fr-error > div.fr-loader {
   display: none;
 }
-.fr-file-progress-bar-layer.fr-error > div.fr-action-buttons {
+.fr-popup .fr-file-progress-bar-layer.fr-error > div.fr-action-buttons {
   display: block;
 }
 @keyframes loading {
@@ -1696,7 +1855,7 @@ body.fr-fullscreen {
   left: 0;
   bottom: 0;
   right: 0;
-  z-index: 9990 !important;
+  z-index: 2147483630 !important;
   width: auto !important;
 }
 .fr-box.fr-fullscreen .fr-toolbar.fr-top {
@@ -1785,6 +1944,7 @@ body.fr-fullscreen {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
+  z-index: 2;
 }
 .fr-image-resizer.fr-active {
   display: block;
@@ -1859,10 +2019,10 @@ body.fr-fullscreen {
   left: 0;
   bottom: 0;
   right: 0;
-  z-index: 9999;
+  z-index: 2147483640;
   display: none;
 }
-.fr-image-upload-layer {
+.fr-popup .fr-image-upload-layer {
   border: dashed 2px #bdbdbd;
   padding: 25px 0;
   position: relative;
@@ -1871,14 +2031,14 @@ body.fr-fullscreen {
   line-height: 140%;
   text-align: center;
 }
-.fr-image-upload-layer:hover {
+.fr-popup .fr-image-upload-layer:hover {
   background: #ebebeb;
 }
-.fr-image-upload-layer.fr-drop {
+.fr-popup .fr-image-upload-layer.fr-drop {
   background: #ebebeb;
   border-color: #1e88e5;
 }
-.fr-image-upload-layer .fr-form {
+.fr-popup .fr-image-upload-layer .fr-form {
   -webkit-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
@@ -1888,13 +2048,13 @@ body.fr-fullscreen {
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 9999;
+  z-index: 2147483640;
   overflow: hidden;
   margin: 0 !important;
   padding: 0 !important;
   width: 100% !important;
 }
-.fr-image-upload-layer .fr-form input {
+.fr-popup .fr-image-upload-layer .fr-form input {
   cursor: pointer;
   position: absolute;
   right: 0px;
@@ -1905,15 +2065,15 @@ body.fr-fullscreen {
   margin: 0px;
   font-size: 400px;
 }
-.fr-image-progress-bar-layer > h3 {
+.fr-popup .fr-image-progress-bar-layer > h3 {
   font-size: 16px;
   margin: 10px 0;
   font-weight: normal;
 }
-.fr-image-progress-bar-layer > div.fr-action-buttons {
+.fr-popup .fr-image-progress-bar-layer > div.fr-action-buttons {
   display: none;
 }
-.fr-image-progress-bar-layer > div.fr-loader {
+.fr-popup .fr-image-progress-bar-layer > div.fr-loader {
   background: #bcdbf7;
   height: 10px;
   width: 100%;
@@ -1921,7 +2081,7 @@ body.fr-fullscreen {
   overflow: hidden;
   position: relative;
 }
-.fr-image-progress-bar-layer > div.fr-loader span {
+.fr-popup .fr-image-progress-bar-layer > div.fr-loader span {
   display: block;
   height: 100%;
   width: 0%;
@@ -1931,7 +2091,7 @@ body.fr-fullscreen {
   -ms-transition: width 0.2s ease 0s;
   -o-transition: width 0.2s ease 0s;
 }
-.fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+.fr-popup .fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span {
   width: 30% !important;
   position: absolute;
   top: 0;
@@ -1940,10 +2100,10 @@ body.fr-fullscreen {
   -o-animation: loading 2s linear infinite;
   animation: loading 2s linear infinite;
 }
-.fr-image-progress-bar-layer.fr-error > div.fr-loader {
+.fr-popup .fr-image-progress-bar-layer.fr-error > div.fr-loader {
   display: none;
 }
-.fr-image-progress-bar-layer.fr-error > div.fr-action-buttons {
+.fr-popup .fr-image-progress-bar-layer.fr-error > div.fr-action-buttons {
   display: block;
 }
 .fr-image-size-layer .fr-image-group .fr-input-line {
@@ -2021,6 +2181,7 @@ body.fr-fullscreen {
   -moz-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
   -ms-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
   -o-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
+  padding: 12px;
 }
 .fr-modal-head .fr-modal-head-line i.fr-modal-more.fr-not-available {
   opacity: 0;
@@ -2029,6 +2190,7 @@ body.fr-fullscreen {
 }
 .fr-modal-head .fr-modal-tags {
   display: none;
+  text-align: left;
 }
 .fr-modal-head .fr-modal-tags a {
   display: inline-block;
@@ -2301,7 +2463,7 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
 }
 .fr-quick-insert {
   position: absolute;
-  z-index: 9998;
+  z-index: 2147483639;
   white-space: nowrap;
   padding-right: 5px;
   margin-left: -5px;
@@ -2321,7 +2483,7 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
 .fr-qi-helper {
   position: absolute;
   z-index: 3;
-  padding-left: 10px;
+  padding-left: 16px;
   white-space: nowrap;
 }
 .fr-qi-helper a.fr-btn.fr-floating-btn {
@@ -2442,7 +2604,7 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
 }
 .fr-table-resizer {
   cursor: col-resize;
-  position: fixed;
+  position: absolute;
   z-index: 3;
   display: none;
 }
@@ -2464,6 +2626,36 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
   -webkit-user-select: none;
   -ms-user-select: none;
 }
+.fr-popup .fr-table-colors-hex-layer {
+  width: 100%;
+  margin: 0px;
+  padding: 10px;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-input-line {
+  float: left;
+  width: calc(100% - 50px);
+  padding: 8px 0 0;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-action-buttons {
+  float: right;
+  width: 50px;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button {
+  background-color: #1e88e5;
+  color: #FFF;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-size: 13px;
+  height: 32px;
+}
+.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button:hover {
+  background-color: #166dba;
+  color: #FFF;
+}
 .fr-popup .fr-table-size .fr-table-size-info {
   text-align: center;
   font-size: 14px;
@@ -2535,7 +2727,7 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
   height: 12px;
 }
 .fr-insert-helper {
-  position: fixed;
+  position: absolute;
   z-index: 9999;
   white-space: nowrap;
 }
@@ -2665,14 +2857,14 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
     bottom: -5px;
   }
 }
-.fr-video-size-layer .fr-video-group .fr-input-line {
+.fr-popup .fr-video-size-layer .fr-video-group .fr-input-line {
   width: calc(50% - 5px);
   display: inline-block;
 }
-.fr-video-size-layer .fr-video-group .fr-input-line + .fr-input-line {
+.fr-popup .fr-video-size-layer .fr-video-group .fr-input-line + .fr-input-line {
   margin-left: 10px;
 }
-.fr-video-upload-layer {
+.fr-popup .fr-video-upload-layer {
   border: dashed 2px #bdbdbd;
   padding: 25px 0;
   position: relative;
@@ -2681,14 +2873,14 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
   line-height: 140%;
   text-align: center;
 }
-.fr-video-upload-layer:hover {
+.fr-popup .fr-video-upload-layer:hover {
   background: #ebebeb;
 }
-.fr-video-upload-layer.fr-drop {
+.fr-popup .fr-video-upload-layer.fr-drop {
   background: #ebebeb;
   border-color: #1e88e5;
 }
-.fr-video-upload-layer .fr-form {
+.fr-popup .fr-video-upload-layer .fr-form {
   -webkit-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
@@ -2698,13 +2890,13 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 9999;
+  z-index: 2147483640;
   overflow: hidden;
   margin: 0 !important;
   padding: 0 !important;
   width: 100% !important;
 }
-.fr-video-upload-layer .fr-form input {
+.fr-popup .fr-video-upload-layer .fr-form input {
   cursor: pointer;
   position: absolute;
   right: 0px;
@@ -2715,15 +2907,15 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
   margin: 0px;
   font-size: 400px;
 }
-.fr-video-progress-bar-layer > h3 {
+.fr-popup .fr-video-progress-bar-layer > h3 {
   font-size: 16px;
   margin: 10px 0;
   font-weight: normal;
 }
-.fr-video-progress-bar-layer > div.fr-action-buttons {
+.fr-popup .fr-video-progress-bar-layer > div.fr-action-buttons {
   display: none;
 }
-.fr-video-progress-bar-layer > div.fr-loader {
+.fr-popup .fr-video-progress-bar-layer > div.fr-loader {
   background: #bcdbf7;
   height: 10px;
   width: 100%;
@@ -2731,7 +2923,7 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
   overflow: hidden;
   position: relative;
 }
-.fr-video-progress-bar-layer > div.fr-loader span {
+.fr-popup .fr-video-progress-bar-layer > div.fr-loader span {
   display: block;
   height: 100%;
   width: 0%;
@@ -2741,7 +2933,7 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
   -ms-transition: width 0.2s ease 0s;
   -o-transition: width 0.2s ease 0s;
 }
-.fr-video-progress-bar-layer > div.fr-loader.fr-indeterminate span {
+.fr-popup .fr-video-progress-bar-layer > div.fr-loader.fr-indeterminate span {
   width: 30% !important;
   position: absolute;
   top: 0;
@@ -2750,10 +2942,10 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
   -o-animation: loading 2s linear infinite;
   animation: loading 2s linear infinite;
 }
-.fr-video-progress-bar-layer.fr-error > div.fr-loader {
+.fr-popup .fr-video-progress-bar-layer.fr-error > div.fr-loader {
   display: none;
 }
-.fr-video-progress-bar-layer.fr-error > div.fr-action-buttons {
+.fr-popup .fr-video-progress-bar-layer.fr-error > div.fr-action-buttons {
   display: block;
 }
 .fr-video-overlay {
@@ -2762,6 +2954,6 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
   left: 0;
   bottom: 0;
   right: 0;
-  z-index: 9999;
+  z-index: 2147483640;
   display: none;
 }