app/assets/stylesheets/plugins/image_manager.css in wysiwyg-rails-3.0.5 vs app/assets/stylesheets/plugins/image_manager.css in wysiwyg-rails-3.0.6
- old
+ new
@@ -1,236 +1,236 @@
/*!
- * froala_editor v3.0.5 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v3.0.6 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2019 Froala Labs
*/
-.clearfix::after {
- clear: both;
- display: block;
- content: "";
- height: 0; }
-
-.hide-by-clipping {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- border: 0; }
-
-.fr-modal .fr-modal-head .fr-modal-head-line::after {
- clear: both;
- display: block;
- content: "";
- height: 0; }
-.fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more {
- margin-top: 10px; }
- .fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more.fr-not-available {
- opacity: 0;
- width: 0;
- padding: 12px 0; }
-.fr-modal .fr-modal-head .fr-modal-tags {
- padding: 0 20px;
- display: none;
- text-align: left; }
- .fr-modal .fr-modal-head .fr-modal-tags a {
- display: inline-block;
- opacity: 0;
- padding: 6px 12px;
- margin: 8px 0 8px 8px;
- text-decoration: none;
- border-radius: 32px;
- -moz-border-radius: 32px;
- -webkit-border-radius: 32px;
- -moz-background-clip: padding;
- -webkit-background-clip: padding-box;
- background-clip: padding-box;
- -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
- -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
- -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
- -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
- cursor: pointer;
- background-color: #f5f5f5; }
- .fr-modal .fr-modal-head .fr-modal-tags a:focus {
- outline: none;
- background-color: #ebebeb; }
- .fr-modal .fr-modal-head .fr-modal-tags a:hover {
- background-color: #ebebeb; }
- .fr-modal .fr-modal-head .fr-modal-tags a:active {
- background-color: #d6d6d6; }
- .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag {
- background-color: #EcF5Ff;
- color: #0098f7; }
- .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:focus {
- outline: none;
- background-color: #ebebeb; }
- .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:hover {
- background-color: #ebebeb; }
- .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:active {
- background-color: #d6d6d6; }
-
-.fr-show-tags .fr-modal-more svg path {
- fill: #0098f7; }
-
-div.fr-modal-body {
- -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; }
- div.fr-modal-body .fr-preloader {
- display: block;
- margin: 50px auto; }
- div.fr-modal-body div.fr-image-list {
- text-align: center;
- margin: 0 20px;
- padding: 0; }
- div.fr-modal-body div.fr-image-list .fr-list-column {
- float: left;
- width: calc((100% - 20px) / 2); }
- @media (min-width: 768px) and (max-width: 1199px) {
- div.fr-modal-body div.fr-image-list .fr-list-column {
- width: calc((100% - 40px) / 3); } }
- @media (min-width: 1200px) {
- div.fr-modal-body div.fr-image-list .fr-list-column {
- width: calc((100% - 60px) / 4); } }
- div.fr-modal-body div.fr-image-list .fr-list-column + .fr-list-column {
- margin-left: 20px; }
- div.fr-modal-body div.fr-image-list div.fr-image-container {
- position: relative;
- width: 100%;
- display: block;
- border-radius: 2px;
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- -moz-background-clip: padding;
- -webkit-background-clip: padding-box;
- background-clip: padding-box;
- overflow: hidden; }
- div.fr-modal-body div.fr-image-list div.fr-image-container:first-child {
- margin-top: 20px; }
- div.fr-modal-body div.fr-image-list div.fr-image-container + div {
- margin-top: 20px; }
- div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after {
- position: absolute;
- -webkit-opacity: 0.5;
- -moz-opacity: 0.5;
- opacity: 0.5;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- -webkit-transition: opacity 0.2s ease 0s;
- -moz-transition: opacity 0.2s ease 0s;
- -ms-transition: opacity 0.2s ease 0s;
- -o-transition: opacity 0.2s ease 0s;
- background: #000;
- content: "";
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: 2; }
- div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before {
- content: attr(data-deleting);
- color: #FFF;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- margin: auto;
- position: absolute;
- z-index: 3;
- font-size: 15px;
- height: 20px; }
- div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty {
- height: 95px;
- background: #CCCCCC;
- z-index: 1; }
- div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after {
- position: absolute;
- margin: auto;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- content: attr(data-loading);
- display: inline-block;
- height: 20px; }
- div.fr-modal-body div.fr-image-list div.fr-image-container img {
- width: 100%;
- vertical-align: middle;
- position: relative;
- z-index: 2;
- -webkit-opacity: 1;
- -moz-opacity: 1;
- opacity: 1;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
- -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
- -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
- -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0); }
- div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected img {
- -webkit-opacity: 0.75;
- -moz-opacity: 0.75;
- opacity: 0.75;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
- div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-delete-img, div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-insert-img {
- display: inline-block; }
- div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img, div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
- display: none;
- top: 50%;
- border-radius: 100%;
- -moz-border-radius: 100%;
- -webkit-border-radius: 100%;
- -moz-background-clip: padding;
- -webkit-background-clip: padding-box;
- background-clip: padding-box;
- -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s;
- -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s;
- -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s;
- -o-transition: background 0.2s ease 0s, color 0.2s ease 0s;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: absolute;
- cursor: pointer;
- margin: 0;
- line-height: 40px;
- text-decoration: none;
- z-index: 3; }
- div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
- background: #B8312F;
- fill: #FFF;
- padding: 8px;
- left: 50%;
- -webkit-transform: translateY(-50%) translateX(25%);
- -moz-transform: translateY(-50%) translateX(25%);
- -ms-transform: translateY(-50%) translateX(25%);
- -o-transform: translateY(-50%) translateX(25%); }
- div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
- background: #FFF;
- fill: #0098f7;
- padding: 8px;
- left: 50%;
- -webkit-transform: translateY(-50%) translateX(-125%);
- -moz-transform: translateY(-50%) translateX(-125%);
- -ms-transform: translateY(-50%) translateX(-125%);
- -o-transform: translateY(-50%) translateX(-125%); }
-
-.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover img {
- -webkit-opacity: 0.75;
- -moz-opacity: 0.75;
- opacity: 0.75;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
-.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-delete-img, .fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-insert-img {
- display: inline-block;
- width: 40px;
- height: 40px; }
-.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
- background: #bf4644;
- color: #FFF; }
-.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover {
- background: #ebebeb; }
+.clearfix::after {
+ clear: both;
+ display: block;
+ content: "";
+ height: 0; }
+
+.hide-by-clipping {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0; }
+
+.fr-modal .fr-modal-head .fr-modal-head-line::after {
+ clear: both;
+ display: block;
+ content: "";
+ height: 0; }
+.fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more {
+ margin-top: 10px; }
+ .fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more.fr-not-available {
+ opacity: 0;
+ width: 0;
+ padding: 12px 0; }
+.fr-modal .fr-modal-head .fr-modal-tags {
+ padding: 0 20px;
+ display: none;
+ text-align: left; }
+ .fr-modal .fr-modal-head .fr-modal-tags a {
+ display: inline-block;
+ opacity: 0;
+ padding: 6px 12px;
+ margin: 8px 0 8px 8px;
+ text-decoration: none;
+ border-radius: 32px;
+ -moz-border-radius: 32px;
+ -webkit-border-radius: 32px;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+ -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+ -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+ -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
+ cursor: pointer;
+ background-color: #f5f5f5; }
+ .fr-modal .fr-modal-head .fr-modal-tags a:focus {
+ outline: none;
+ background-color: #ebebeb; }
+ .fr-modal .fr-modal-head .fr-modal-tags a:hover {
+ background-color: #ebebeb; }
+ .fr-modal .fr-modal-head .fr-modal-tags a:active {
+ background-color: #d6d6d6; }
+ .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag {
+ background-color: #EcF5Ff;
+ color: #0098f7; }
+ .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:focus {
+ outline: none;
+ background-color: #ebebeb; }
+ .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:hover {
+ background-color: #ebebeb; }
+ .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:active {
+ background-color: #d6d6d6; }
+
+.fr-show-tags .fr-modal-more svg path {
+ fill: #0098f7; }
+
+div.fr-modal-body {
+ -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; }
+ div.fr-modal-body .fr-preloader {
+ display: block;
+ margin: 50px auto; }
+ div.fr-modal-body div.fr-image-list {
+ text-align: center;
+ margin: 0 20px;
+ padding: 0; }
+ div.fr-modal-body div.fr-image-list .fr-list-column {
+ float: left;
+ width: calc((100% - 20px) / 2); }
+ @media (min-width: 768px) and (max-width: 1199px) {
+ div.fr-modal-body div.fr-image-list .fr-list-column {
+ width: calc((100% - 40px) / 3); } }
+ @media (min-width: 1200px) {
+ div.fr-modal-body div.fr-image-list .fr-list-column {
+ width: calc((100% - 60px) / 4); } }
+ div.fr-modal-body div.fr-image-list .fr-list-column + .fr-list-column {
+ margin-left: 20px; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container {
+ position: relative;
+ width: 100%;
+ display: block;
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ overflow: hidden; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container:first-child {
+ margin-top: 20px; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container + div {
+ margin-top: 20px; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after {
+ position: absolute;
+ -webkit-opacity: 0.5;
+ -moz-opacity: 0.5;
+ opacity: 0.5;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ -webkit-transition: opacity 0.2s ease 0s;
+ -moz-transition: opacity 0.2s ease 0s;
+ -ms-transition: opacity 0.2s ease 0s;
+ -o-transition: opacity 0.2s ease 0s;
+ background: #000;
+ content: "";
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 2; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before {
+ content: attr(data-deleting);
+ color: #FFF;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ position: absolute;
+ z-index: 3;
+ font-size: 15px;
+ height: 20px; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty {
+ height: 95px;
+ background: #CCCCCC;
+ z-index: 1; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after {
+ position: absolute;
+ margin: auto;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ content: attr(data-loading);
+ display: inline-block;
+ height: 20px; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container img {
+ width: 100%;
+ vertical-align: middle;
+ position: relative;
+ z-index: 2;
+ -webkit-opacity: 1;
+ -moz-opacity: 1;
+ opacity: 1;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+ -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+ -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+ -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
+ -webkit-transform: translateZ(0);
+ -moz-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ -o-transform: translateZ(0); }
+ div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected img {
+ -webkit-opacity: 0.75;
+ -moz-opacity: 0.75;
+ opacity: 0.75;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-delete-img, div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-insert-img {
+ display: inline-block; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img, div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+ display: none;
+ top: 50%;
+ border-radius: 100%;
+ -moz-border-radius: 100%;
+ -webkit-border-radius: 100%;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+ -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+ -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+ -o-transition: background 0.2s ease 0s, color 0.2s ease 0s;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ position: absolute;
+ cursor: pointer;
+ margin: 0;
+ line-height: 40px;
+ text-decoration: none;
+ z-index: 3; }
+ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
+ background: #B8312F;
+ fill: #FFF;
+ padding: 8px;
+ left: 50%;
+ -webkit-transform: translateY(-50%) translateX(25%);
+ -moz-transform: translateY(-50%) translateX(25%);
+ -ms-transform: translateY(-50%) translateX(25%);
+ -o-transform: translateY(-50%) translateX(25%); }
+ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
+ background: #FFF;
+ fill: #0098f7;
+ padding: 8px;
+ left: 50%;
+ -webkit-transform: translateY(-50%) translateX(-125%);
+ -moz-transform: translateY(-50%) translateX(-125%);
+ -ms-transform: translateY(-50%) translateX(-125%);
+ -o-transform: translateY(-50%) translateX(-125%); }
+
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover img {
+ -webkit-opacity: 0.75;
+ -moz-opacity: 0.75;
+ opacity: 0.75;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-delete-img, .fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-insert-img {
+ display: inline-block;
+ width: 40px;
+ height: 40px; }
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
+ background: #bf4644;
+ color: #FFF; }
+.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover {
+ background: #ebebeb; }