app/assets/stylesheets/plugins/image_manager.css in wysiwyg-rails-2.9.8 vs app/assets/stylesheets/plugins/image_manager.css in wysiwyg-rails-3.0.0.pre.beta.1
- old
+ new
@@ -1,268 +1,229 @@
-/*!
- * froala_editor v2.9.8 (https://www.froala.com/wysiwyg-editor)
- * License https://froala.com/wysiwyg-editor/terms/
- * Copyright 2014-2020 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-head .fr-modal-head-line::after {
- clear: both;
- display: block;
- content: "";
- height: 0;
-}
-.fr-modal-head .fr-modal-head-line i.fr-modal-more,
-.fr-modal-head .fr-modal-head-line svg.fr-modal-more {
- float: left;
- opacity: 1;
- -webkit-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
- -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,
-.fr-modal-head .fr-modal-head-line svg.fr-modal-more.fr-not-available {
- opacity: 0;
- width: 0;
- padding: 12px 0;
-}
-.fr-modal-head .fr-modal-tags {
- display: none;
- text-align: left;
-}
-.fr-modal-head .fr-modal-tags a {
- display: inline-block;
- opacity: 0;
- padding: 6px 8px;
- margin: 8px 0 8px 8px;
- text-decoration: none;
- border-radius: 2px;
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- -moz-background-clip: padding;
- -webkit-background-clip: padding-box;
- background-clip: padding-box;
- color: #1e88e5;
- -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;
-}
-.fr-modal-head .fr-modal-tags a:focus {
- outline: none;
-}
-.fr-modal-head .fr-modal-tags a.fr-selected-tag {
- background: #d6d6d6;
-}
-div.fr-modal-body .fr-preloader {
- display: block;
- margin: 50px auto;
-}
-div.fr-modal-body div.fr-image-list {
- text-align: center;
- margin: 0 10px;
- padding: 0;
-}
-div.fr-modal-body div.fr-image-list::after {
- clear: both;
- display: block;
- content: "";
- height: 0;
-}
-div.fr-modal-body div.fr-image-list .fr-list-column {
- float: left;
- width: calc((100% - 10px) / 2);
-}
-@media (min-width: 768px) and (max-width: 1199px) {
- div.fr-modal-body div.fr-image-list .fr-list-column {
- width: calc((100% - 20px) / 3);
- }
-}
-@media (min-width: 1200px) {
- div.fr-modal-body div.fr-image-list .fr-list-column {
- width: calc((100% - 30px) / 4);
- }
-}
-div.fr-modal-body div.fr-image-list .fr-list-column + .fr-list-column {
- margin-left: 10px;
-}
-div.fr-modal-body div.fr-image-list div.fr-image-container {
- position: relative;
- width: 100%;
- display: block;
- -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);
- 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: 10px;
-}
-div.fr-modal-body div.fr-image-list div.fr-image-container + div {
- margin-top: 10px;
-}
-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: #000000;
- 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: #ffffff;
- 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-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);
- position: absolute;
- cursor: pointer;
- margin: 0;
- width: 36px;
- height: 36px;
- line-height: 36px;
- text-decoration: none;
- z-index: 3;
-}
-div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
- background: #b8312f;
- color: #ffffff;
- 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: #ffffff;
- color: #1e88e5;
- 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 .fr-modal-head .fr-modal-tags a:hover {
- background: #ebebeb;
-}
-.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a.fr-selected-tag {
- background: #d6d6d6;
-}
-.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;
-}
-.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
- background: #bf4644;
- color: #ffffff;
-}
-.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;
+ 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: 24px;
+ height: 24px; }
+.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; }
+
+/*# sourceMappingURL=image_manager.css.map */