diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 2e7d6293f..8e720009f 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -669,7 +669,7 @@ body.slim-container .layout.layout-container,body.slim-container .layout .layout .flex-layout-item.width-200{width:200px} .flex-layout-item.width-300{width:300px} body.mainmenu-open{overflow:hidden} -.mainmenu-tooltip .tooltip-inner{font-size:13px;padding:6px 16px;border-radius:0} +.mainmenu-tooltip .tooltip-inner{font-size:13px;padding:6px 16px} nav#layout-mainmenu{background-color:#000000;padding:0 0 0 20px;line-height:0;white-space:nowrap;vertical-align:top} nav#layout-mainmenu a{text-decoration:none} nav#layout-mainmenu a:focus{background:transparent} @@ -701,7 +701,7 @@ nav#layout-mainmenu ul li .mainmenu-accountmenu.active{display:block} nav#layout-mainmenu ul li .mainmenu-accountmenu:after{content:'';display:block;width:0;height:0;border-left:8.5px solid transparent;border-right:8.5px solid transparent;border-bottom:7px solid #f9f9f9;right:9px;top:-7px;position:absolute} nav#layout-mainmenu ul li .mainmenu-accountmenu ul{float:none;display:block;overflow:visible} nav#layout-mainmenu ul li .mainmenu-accountmenu li{padding:0;margin:0;font-weight:normal;text-align:left;display:block} -nav#layout-mainmenu ul li .mainmenu-accountmenu li a{display:block;padding:10px 30px;text-align:left;font-size:13px;color:#666666;text-shadow:none} +nav#layout-mainmenu ul li .mainmenu-accountmenu li a{display:block;padding:10px 30px;text-align:left;font-size:14px;color:#666666;text-shadow:none} nav#layout-mainmenu ul li .mainmenu-accountmenu li a:hover,nav#layout-mainmenu ul li .mainmenu-accountmenu li a:focus{background:#4ea5e0;color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.3)} nav#layout-mainmenu ul li .mainmenu-accountmenu li a:active{background:#3498db;color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.3)} nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:hover:after,nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:focus:after,nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:active:after{content:'';display:block;width:0;height:0;border-left:8.5px solid transparent;border-right:8.5px solid transparent;border-bottom:7px solid #4ea5e0;position:absolute;right:9px;top:-7px;z-index:102} @@ -966,9 +966,8 @@ body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizonta .fancy-layout .field-codeeditor{border:none !important;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0} .fancy-layout .field-codeeditor .editor-code{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0} .fancy-layout .field-richeditor{border:none;border-left:1px solid #d1d6d9 !important} -.fancy-layout .field-richeditor,.fancy-layout .field-richeditor .redactor_box,.fancy-layout .field-richeditor .redactor_toolbar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-top-right-radius:0;border-top-left-radius:0} -.fancy-layout .field-richeditor .redactor-box textarea{background:white;padding:20px !important;color:#333333;font-size:14px} -.fancy-layout .secondary-content-tabs .field-richeditor .redactor-box .redactor-toolbar{margin:20px 0 0 0!important;left:20px;right:20px;width:auto;-webkit-border-radius:3px !important;-moz-border-radius:3px !important;border-radius:3px !important} +.fancy-layout .field-richeditor,.fancy-layout .field-richeditor .fr-toolbar,.fancy-layout .field-richeditor .fr-wrapper{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-top-right-radius:0;border-top-left-radius:0} +.fancy-layout .secondary-content-tabs .field-richeditor .fr-toolbar{background:white} body.side-panel-not-fixed .fancy-layout .field-richeditor{border-left:none} html.cssanimations .fancy-layout .form-tabless-fields .loading-indicator-container .loading-indicator > span{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;background-image:url('../../../system/assets/ui/images/loader-white.svg');background-size:20px 20px} html.gecko .fancy-layout .control-tabs.secondary-tabs > div > ul.nav-tabs > li.active a{padding-top:13px} diff --git a/modules/backend/assets/less/layout/fancylayout.less b/modules/backend/assets/less/layout/fancylayout.less index a1e8fec03..2c3ff4d78 100644 --- a/modules/backend/assets/less/layout/fancylayout.less +++ b/modules/backend/assets/less/layout/fancylayout.less @@ -613,26 +613,15 @@ border: none; border-left: 1px solid @color-form-field-border !important; - &, .redactor_box, .redactor_toolbar { + &, .fr-toolbar, .fr-wrapper { .border-radius(0); .border-top-radius(0); } - - .redactor-box textarea { - background: white; - padding: 20px !important; - color: #333333; - font-size: 14px; - } } .secondary-content-tabs .field-richeditor { - .redactor-box .redactor-toolbar { - margin: 20px 0 0 0!important; - left: 20px; - right: 20px; - width: auto; - .border-radius(3px) !important; + .fr-toolbar { + background: white; } } } @@ -663,4 +652,4 @@ html.gecko { .fancy-layout .control-tabs.secondary-tabs > div > ul.nav-tabs > li.active a { padding-top: 13px; } -} \ No newline at end of file +} diff --git a/modules/backend/assets/less/layout/mainmenu.less b/modules/backend/assets/less/layout/mainmenu.less index 6e41834bc..495eaf33e 100644 --- a/modules/backend/assets/less/layout/mainmenu.less +++ b/modules/backend/assets/less/layout/mainmenu.less @@ -72,7 +72,6 @@ body.mainmenu-open { .tooltip-inner { font-size: @font-size-base - 1; padding: 6px 16px; - border-radius: 0; } } @@ -274,7 +273,7 @@ nav#layout-mainmenu ul li .mainmenu-accountmenu { display: block; padding: (@padding-standard * 0.5) (@padding-standard * 1.5); text-align: left; - font-size: @font-size-base - 1; + font-size: @font-size-base; color: @color-accountmenu-text; text-shadow: none; diff --git a/modules/backend/formwidgets/richeditor/assets/css/richeditor.css b/modules/backend/formwidgets/richeditor/assets/css/richeditor.css index cc6bdf3c2..12624908d 100755 --- a/modules/backend/formwidgets/richeditor/assets/css/richeditor.css +++ b/modules/backend/formwidgets/richeditor/assets/css/richeditor.css @@ -49,7 +49,7 @@ iframe.fr-iframe{width:100%;border:none;position:relative;display:block;z-index: .fr-rtl .fr-separator{float:right} .fr-toolbar.fr-inline .fr-separator.fr-hs{float:none} .fr-toolbar.fr-inline .fr-separator.fr-vs{float:none;display:inline-block} -.fr-toolbar .fr-command.fr-btn,.fr-popup .fr-command.fr-btn{background:transparent;color:rgba(64,82,97,0.6);-moz-outline:0;outline:0;border:0;line-height:1;cursor:pointer;text-align:left;margin:0px 2px;transition:background 0.2s ease 0s;-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:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;z-index:2;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;float:left;padding:0;width:38px;height:37px} +.fr-toolbar .fr-command.fr-btn,.fr-popup .fr-command.fr-btn{background:transparent;color:rgba(64,82,97,0.8);-moz-outline:0;outline:0;border:0;line-height:1;cursor:pointer;text-align:left;margin:0px 2px;transition:background 0.2s ease 0s;-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:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;z-index:2;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;float:left;padding:0;width:38px;height:37px} .fr-toolbar .fr-command.fr-btn i,.fr-popup .fr-command.fr-btn i{display:block;font-size:15px;width:15px;margin:11px 11.5px;text-align:center;float:none} .fr-toolbar .fr-command.fr-btn span,.fr-popup .fr-command.fr-btn span{font-size:14px;display:block;line-height:14px;min-width:38px;float:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;height:15px;font-weight:bold} .fr-toolbar .fr-command.fr-btn img,.fr-popup .fr-command.fr-btn img{margin:11px 11.5px;width:15px} @@ -57,10 +57,10 @@ iframe.fr-iframe{width:100%;border:none;position:relative;display:block;z-index: .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection{width:auto} .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection span{font-weight:normal} .fr-toolbar .fr-command.fr-btn.fr-dropdown i,.fr-popup .fr-command.fr-btn.fr-dropdown i,.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{margin-left:7.5px;margin-right:15.5px} -.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active{color:rgba(64,82,97,0.6);background:#d6d6d6} -.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus{background:#d6d6d6 !important;color:rgba(64,82,97,0.6) !important} -.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after{border-top-color:rgba(64,82,97,0.6) !important} -.fr-toolbar .fr-command.fr-btn.fr-dropdown::after,.fr-popup .fr-command.fr-btn.fr-dropdown::after{position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(64,82,97,0.6);right:3.75px;top:16.5px;content:""} +.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active{color:rgba(64,82,97,0.8);background:#d6d6d6} +.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus{background:#d6d6d6 !important;color:rgba(64,82,97,0.8) !important} +.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after{border-top-color:rgba(64,82,97,0.8) !important} +.fr-toolbar .fr-command.fr-btn.fr-dropdown::after,.fr-popup .fr-command.fr-btn.fr-dropdown::after{position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(64,82,97,0.8);right:3.75px;top:16.5px;content:""} .fr-toolbar .fr-command.fr-btn.fr-disabled,.fr-popup .fr-command.fr-btn.fr-disabled{color:#bdbdbd;cursor:default} .fr-toolbar .fr-command.fr-btn.fr-disabled::after,.fr-popup .fr-command.fr-btn.fr-disabled::after{border-top-color:#bdbdbd !important} .fr-toolbar .fr-command.fr-btn.fr-hidden,.fr-popup .fr-command.fr-btn.fr-hidden{display:none} @@ -70,7 +70,7 @@ iframe.fr-iframe{width:100%;border:none;position:relative;display:block;z-index: .fr-toolbar.fr-inline .fr-command.fr-btn{float:none} .fr-desktop .fr-command:hover,.fr-desktop .fr-command:focus{color:#222222;background:#ebebeb} .fr-desktop .fr-command:hover::after,.fr-desktop .fr-command:focus::after{border-top-color:#222222 !important} -.fr-desktop .fr-command.fr-selected{color:rgba(64,82,97,0.6);background:#d6d6d6} +.fr-desktop .fr-command.fr-selected{color:rgba(64,82,97,0.8);background:#d6d6d6} .fr-desktop .fr-command.fr-active:hover,.fr-desktop .fr-command.fr-active:focus{color:#1e88e5;background:#ebebeb} .fr-desktop .fr-command.fr-active.fr-selected{color:#1e88e5;background:#d6d6d6} .fr-desktop .fr-command.fr-disabled:hover,.fr-desktop .fr-command.fr-disabled:focus,.fr-desktop .fr-command.fr-disabled.fr-selected{background:transparent} @@ -99,7 +99,7 @@ iframe.fr-iframe{width:100%;border:none;position:relative;display:block;z-index: .fr-popup .fr-input-line input[type="text"]:focus,.fr-popup .fr-input-line textarea:focus{border-bottom:solid 2px #1e88e5;margin-bottom:0px} .fr-popup .fr-input-line input + span,.fr-popup .fr-input-line textarea + span{position:absolute;top:0;left:0;font-size:12px;color:rgba(0,0,0,0);transition:color 0.2s ease 0s;-webkit-transition:color 0.2s ease 0s;-moz-transition:color 0.2s ease 0s;-ms-transition:color 0.2s ease 0s;-o-transition:color 0.2s ease 0s;z-index:1} .fr-popup .fr-input-line input.fr-not-empty:focus + span,.fr-popup .fr-input-line textarea.fr-not-empty:focus + span{color:#1e88e5} -.fr-popup .fr-input-line input.fr-not-empty + span,.fr-popup .fr-input-line textarea.fr-not-empty + span{color:#808080} +.fr-popup .fr-input-line input.fr-not-empty + span,.fr-popup .fr-input-line textarea.fr-not-empty + span{color:#2a3e51} .fr-popup input,.fr-popup textarea{user-select:text;-o-user-select:text;-moz-user-select:text;-khtml-user-select:text;-webkit-user-select:text;-ms-user-select:text;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;outline:none} .fr-popup textarea{resize:none} .fr-popup .fr-buttons{-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);padding:0 2px;white-space:nowrap;line-height:0;border-bottom:0px} @@ -215,7 +215,7 @@ textarea.fr-code{display:none;width:100%;resize:none;-moz-resize:none;-webkit-re .fr-box.fr-code-view .fr-element,.fr-box.fr-code-view .fr-placeholder,.fr-box.fr-code-view .fr-iframe{display:none} .fr-box.fr-code-view .CodeMirror{display:block} .fr-box.fr-inline.fr-code-view .fr-command.fr-btn.html-switch{display:block} -.fr-box.fr-inline .fr-command.fr-btn.html-switch{position:absolute;top:0;right:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);display:none;background:#ffffff;color:rgba(64,82,97,0.6);-moz-outline:0;outline:0;border:0;line-height:1;cursor:pointer;text-align:left;padding:11px 11.5px;transition:background 0.2s ease 0s;-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:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none} +.fr-box.fr-inline .fr-command.fr-btn.html-switch{position:absolute;top:0;right:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);display:none;background:#ffffff;color:rgba(64,82,97,0.8);-moz-outline:0;outline:0;border:0;line-height:1;cursor:pointer;text-align:left;padding:11px 11.5px;transition:background 0.2s ease 0s;-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:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none} .fr-box.fr-inline .fr-command.fr-btn.html-switch i{font-size:15px;width:15px;text-align:center} .fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover{background:#ebebeb} .fr-file-upload-layer{border:dashed 2px #bdbdbd;padding:25px 0;position:relative;font-size:14px;letter-spacing:1px;line-height:140%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center} @@ -363,16 +363,35 @@ to{left:100%} .fr-drag-helper{background:#1e88e5;height:2px;margin-top:-1px;filter:alpha(opacity=20);-webkit-opacity:0.2;-moz-opacity:0.2;opacity:0.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";position:absolute;z-index:9999;display:none} .fr-drag-helper.fr-visible{display:block} .fr-dragging{filter:alpha(opacity=40);-webkit-opacity:0.4;-moz-opacity:0.4;opacity:0.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"} -.fr-box.fr-basic.fr-top .fr-wrapper,.fr-box.fr-basic.fr-bottom .fr-wrapper{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} -.fr-box .ace_editor{display:none} -.fr-box .ace_editor{position:absolute;top:0;bottom:0;left:0;right:0;margin:0} -.fr-box.fr-code-view .ace_editor{display:block} -.fr-command.fr-btn[data-cmd=fullscreen]{float:right} -.fr-toolbar{border-top-color:transparent;background:#f2f2f2} -.fr-popup.fr-desktop .fr-arrow,.fr-toolbar.fr-inline.fr-desktop .fr-arrow{top:-7px} -.fr-popup.fr-desktop.fr-above .fr-arrow,.fr-toolbar.fr-inline.fr-desktop.fr-above .fr-arrow{bottom:-7px} -.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active{color:#000000} -.fr-toolbar.fr-bottom,.fr-toolbar.fr-top{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-bottom:2px solid #d4d8da !important} +body .fr-box.fr-basic.fr-top .fr-wrapper,body .fr-box.fr-basic.fr-bottom .fr-wrapper{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} +body .fr-box .ace_editor{display:none} +body .fr-box .ace_editor{position:absolute;top:0;bottom:0;left:0;right:0;margin:0} +body .fr-box.fr-code-view .ace_editor{display:block} +body .fr-command.fr-btn[data-cmd=fullscreen]{float:right} +body .fr-toolbar{border-top-color:transparent;background:#f2f2f2} +body .fr-popup.fr-desktop .fr-arrow,body .fr-toolbar.fr-inline.fr-desktop .fr-arrow{top:-7px} +body .fr-popup.fr-desktop.fr-above .fr-arrow,body .fr-toolbar.fr-inline.fr-desktop.fr-above .fr-arrow{bottom:-7px} +body .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,body .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active{color:#000000} +body .fr-toolbar.fr-bottom,body .fr-toolbar.fr-top{border-bottom:2px solid #d4d8da;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} +body .fr-popup .fr-action-buttons button.fr-command{padding:5px 15px;font-size:12px;line-height:1.5;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;color:#ffffff;background-color:#656d79;border:none;text-shadow:0 -1px 0 rgba(0,0,0,0.4);background:#656d79;margin-top:6px;font-size:13px;text-align:left;height:auto;outline:none !important;-webkit-box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);-moz-box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)} +body .fr-popup .fr-action-buttons button.fr-command:hover,body .fr-popup .fr-action-buttons button.fr-command:focus,body .fr-popup .fr-action-buttons button.fr-command:active,body .fr-popup .fr-action-buttons button.fr-command.active,.open .dropdown-togglebody .fr-popup .fr-action-buttons button.fr-command{color:#ffffff;background:#1681ba;border-color:#1681ba} +body .fr-popup .fr-action-buttons button.fr-command:active,body .fr-popup .fr-action-buttons button.fr-command.active,.open .dropdown-togglebody .fr-popup .fr-action-buttons button.fr-command{background:#126896;border-color:#105b83;background-image:none} +body .fr-popup .fr-action-buttons button.fr-command.on{background:#494f58;border-color:#40454d;background-image:none} +body .fr-popup .fr-action-buttons button.fr-command.disabled,body .fr-popup .fr-action-buttons button.fr-command[disabled],body .fr-popup .fr-action-buttons button.fr-command.disabled:hover,body .fr-popup .fr-action-buttons button.fr-command[disabled]:hover,body .fr-popup .fr-action-buttons button.fr-command.disabled:focus,body .fr-popup .fr-action-buttons button.fr-command[disabled]:focus,body .fr-popup .fr-action-buttons button.fr-command.disabled:active,body .fr-popup .fr-action-buttons button.fr-command[disabled]:active,body .fr-popup .fr-action-buttons button.fr-command.disabled.active,body .fr-popup .fr-action-buttons button.fr-command[disabled].active{background:#656d79;border-color:#656d79} +body .fr-popup .fr-action-buttons button.fr-command .badge{color:#656d79;background:#ffffff} +body .fr-popup .fr-action-buttons button.fr-command[disabled]{color:rgba(255,255,255,0.6)} +body .fr-popup .fr-action-buttons button.fr-command.active,body .fr-popup .fr-action-buttons button.fr-command:active{-webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,0.3);-moz-box-shadow:inset 0 1px 0 rgba(0,0,0,0.3);box-shadow:inset 0 1px 0 rgba(0,0,0,0.3)} +body .fr-popup .fr-buttons{border-bottom:2px solid #d4d8da;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} +body .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li{font-size:14px} +body .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a{color:#666666} +body .fr-popup .fr-input-line input[type="text"],body .fr-popup .fr-input-line textarea{-webkit-appearance:none;border:1px solid #d1d6d9;background-color:#ffffff;color:#385487;margin-bottom:0;-webkit-box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);-moz-box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;transition:margin 0.2s ease 0s;-webkit-transition:margin 0.2s ease 0s;-moz-transition:margin 0.2s ease 0s;-ms-transition:margin 0.2s ease 0s;-o-transition:margin 0.2s ease 0s} +selectbody .fr-popup .fr-input-line input[type="text"],selectbody .fr-popup .fr-input-line textarea{height:30px;line-height:30px} +textareabody .fr-popup .fr-input-line input[type="text"],textareabody .fr-popup .fr-input-line textarea,select[multiple]body .fr-popup .fr-input-line input[type="text"],select[multiple]body .fr-popup .fr-input-line textarea{height:auto} +body .fr-popup .fr-input-line input[type="text"]:focus,body .fr-popup .fr-input-line textarea:focus{border:1px solid #d1d6d9} +body .fr-popup .fr-input-line input[type="text"].fr-not-empty,body .fr-popup .fr-input-line textarea.fr-not-empty{margin-top:12px} +body .fr-popup .fr-input-line textarea{height:auto} +body .fr-popup .fr-input-line input.fr-not-empty:focus + span,body .fr-popup .fr-input-line textarea.fr-not-empty:focus + span{color:#2a3e51} +body .fr-popup .fr-checkbox span{border-color:#d1d6d9} .field-flush .field-richeditor,.field-flush .field-richeditor.editor-focus{border:none} .field-richeditor{border:1px solid #d1d6d9;-webkit-box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);-moz-box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;-webkit-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;-moz-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;-ms-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;-o-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s} .field-richeditor > textarea{display:none} @@ -398,7 +417,7 @@ to{left:100%} .field-richeditor.stretch .fr-box:not(.fr-fullscreen) .fr-wrapper .fr-view{min-height:0} .field-richeditor.stretch .fr-box:not(.fr-fullscreen) .fr-view,.field-richeditor.stretch .fr-box:not(.fr-fullscreen) textarea{height:100%} .field-richeditor.stretch .fr-box:not(.fr-fullscreen) .fr-placeholder{top:20px;left:20px} -.control-richeditor figure[data-ui-block]{display:inline-block;margin:0 0 15px 0;padding:10px 10px 10px 36px;border:2px dotted #bdc3c7;background:white;position:relative;cursor:pointer;color:#6c7071;font:15px sans-serif;font-weight:500;line-height:150%;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box} +.control-richeditor figure[data-ui-block]{display:inline-block;width:100%;margin:0 0 15px 0;padding:10px 10px 10px 36px;border:2px dotted #bdc3c7;background:white;position:relative;cursor:pointer;color:#6c7071;font:15px sans-serif;font-weight:500;line-height:150%;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box} .control-richeditor figure[data-ui-block]:focus,.control-richeditor figure[data-ui-block].inspector-open{border-color:#2581b8;border-style:solid;outline:none} .control-richeditor figure[data-video],.control-richeditor figure[data-audio]{padding-left:13px} .control-richeditor figure[data-video]:after,.control-richeditor figure[data-audio]:after{content:attr(data-label)} diff --git a/modules/backend/formwidgets/richeditor/assets/js/build-min.js b/modules/backend/formwidgets/richeditor/assets/js/build-min.js index 33f6cb22a..862cc2e94 100755 --- a/modules/backend/formwidgets/richeditor/assets/js/build-min.js +++ b/modules/backend/formwidgets/richeditor/assets/js/build-min.js @@ -480,6 +480,7 @@ froalaOptions.htmlAllowedEmptyTags=['figure','textarea','a','iframe','object','v froalaOptions.htmlDoNotWrapTags=['figure','script','style'] froalaOptions.lineBreakerTags=['figure','table','hr','iframe','form','dl'] froalaOptions.shortcutsEnabled=['show','bold','italic','underline','indent','outdent','undo','redo'] +froalaOptions.linkInsertButtons=['linkBack','|'] var placeholder=this.$textarea.attr('placeholder') froalaOptions.placeholderText=placeholder?placeholder:'' froalaOptions.height=this.$el.hasClass('stretch')?Infinity:$('.height-indicator',this.$el).height() diff --git a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js index 0e0768367..c3d89de01 100755 --- a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js +++ b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js @@ -97,6 +97,7 @@ froalaOptions.htmlDoNotWrapTags = ['figure', 'script', 'style'] froalaOptions.lineBreakerTags = ['figure', 'table', 'hr', 'iframe', 'form', 'dl'] froalaOptions.shortcutsEnabled = ['show', 'bold', 'italic', 'underline', 'indent', 'outdent', 'undo', 'redo'] + froalaOptions.linkInsertButtons = ['linkBack', '|'] var placeholder = this.$textarea.attr('placeholder') froalaOptions.placeholderText = placeholder ? placeholder : '' diff --git a/modules/backend/formwidgets/richeditor/assets/less/_figures.less b/modules/backend/formwidgets/richeditor/assets/less/_figures.less deleted file mode 100644 index 1e7f9b00d..000000000 --- a/modules/backend/formwidgets/richeditor/assets/less/_figures.less +++ /dev/null @@ -1,315 +0,0 @@ -// -// Figures -// - -.redactor-editor { - - figure { - position: relative; - } - - figcaption { - text-align: center; - line-height: @line-height-computed; - font-size: @font-size-base; - } - - figure[data-type=table] { - clear: both; - } - - figure[data-type=video] { - position: relative; - margin-bottom: @line-height-computed; - text-align: center; - clear: both; - p { - margin: 0; - } - - &.oc-figure-full { - &:before { - position: relative; - padding-bottom: 51%; - width: 100%; - height: 0; - content: ""; - display: block; - } - iframe { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - } - } - } - - figure[data-type=image] { - position: relative; - margin-bottom: @line-height-computed; - .oc-figure-controls { - top: 0px; - } - img { - width: 100%; - } - &.oc-figure-large { - width: 100%; - clear: both; - } - &.oc-figure-medium { - width: 50%; - } - &.oc-figure-small { - width: 33%; - } - } - - figure[data-type=quote] { - font-family: Georgia, serif; - margin-bottom: @line-height-computed; - margin-left: @line-height-computed; - font-style: italic; - position: relative; - border-left: solid 4px @color-border; - padding-left: @line-height-computed; - figcaption { - font-weight: bold; - text-align: left; - } - .oc-figure-controls { - margin-left: -5px; - } - &.oc-figure-medium { - &, blockquote { font-size: 20px; } - } - &.oc-figure-large { - &, blockquote { font-size: 24px; } - } - &.oc-figure-right { - width: 33%; - } - &.oc-figure-left { - width: 33%; - border-left: none; - border-right: solid 4px @color-border; - padding-left: 0; - padding-right: @line-height-computed; - margin-left: 0; - margin-right: @line-height-computed; - .oc-figure-controls { - margin-left: 0; - margin-right: -5px; - } - } - cite { - display: block; - text-align: left; - font-weight: normal; - &:before { - content: "\2014\00a0"; - } - &:empty:before { - opacity: 0.4; - // @todo Convert to language value - content: "\2014 Type to add citation (optional)"; - } - } - } - -} - -.redactor-box { - - figcaption { - &:empty:before { - opacity: .4; - // @todo Convert to language value - content: "Type to add caption (optional)"; - } - } - - .oc-figure-controls { - background: #2b3e50 !important; - padding: 0; - .border-radius(4px); - position: absolute; - display: none; - // min-width: 100%; - white-space: nowrap; - left: 10px; - top: -50px; - margin: 0 auto; - font-family: @font-family-base; - line-height: @line-height-computed; - font-style: normal; - z-index: @richeditor-zindex + 500; - text-align: center; - - &:after { - content: ' '; - left: 0; - position: absolute; - display: block; - height: 10px; - background: rgba(0,0,0,0.1); - width: 100%; - bottom: -10px; - .opacity(0.1); - } - - &:before { - .triangle(down, 17px, 9px, #2b3e50); - position: absolute; - left: 14px; - bottom: -8px; - } - } - - figure:hover .oc-figure-controls { - display: block; - } - - .oc-figure-controls.bottom { - bottom: -50px; - top: auto; - - &:after { - bottom: auto; - top: -10px; - } - - &:before { - .triangle(up, 17px, 9px, #2b3e50)!important; - border-top: none; - top: -8px; - } - } - - .oc-figure-controls span { - display: inline-block; - border: none; - background: none; - color: #ffffff; - vertical-align: top; - font-size: 14px; - width: 40px; - height: 40px; - line-height: 40px; - text-align: center; - cursor: pointer; - &:before { - line-height: 24px; - } - &:hover { - color: #fff; - background: rgba(255, 255, 255, 0.1); - } - &.on { - background: #fff; - color: @gray; - background-color: #1f9e84; - color: white; - } - &:last-child { - .border-right-radius(4px); - } - &:first-child { - .border-right-radius(4px); - } - } - - .oc-figure-controls span { - &.oc-figure-controls-divider { - width: 1px; - background: @color-border; - padding: 0; - margin: 0 4px; - cursor: normal; - } - &.oc-figure-controls-small { - font-size: 7px; - } - &.oc-figure-controls-medium { - font-size: 10px; - } - &.oc-figure-controls-arrow-left:before { - .icon(@arrow-left); - } - &.oc-figure-controls-arrow-right:before { - .icon(@arrow-right); - } - &.oc-figure-controls-arrow-up:before { - .icon(@arrow-up); - } - &.oc-figure-controls-arrow-down:before { - .icon(@arrow-down); - } - &.oc-figure-controls-resize-full:before { - .icon(@expand); - } - &.oc-figure-controls-resize-small:before { - .icon(@compress); - } - &.oc-figure-controls-delete { - margin-left: @line-height-computed; - &:before { .icon(@trash-o); } - &:hover { background: @color-btn-danger; } - } - &.oc-figure-controls-table { - width: auto; - padding-left: @line-height-computed / 2; - padding-right: @line-height-computed / 2; - text-align: left; - &:before { .icon(@table); } - } - } - - .oc-figure-right { - float: right; - margin-left: @line-height-computed; - .oc-figure-controls { - right: 0; - } - } - - .oc-figure-left { - float: left; - margin-right: @line-height-computed; - } - - .oc-dropdown-menu { - &, ul { padding: 0 !important; } - - ul { - background-color: @dropdown-bg !important; - } - - a { - text-decoration: none; - padding: 0 15px !important; - color: @dropdown-link-color !important; - text-decoration: none !important; - line-height: 25px; - &:hover, - &:focus { - color: @color-dropdown-hover-text !important; - } - } - } - - @media (max-width: @menu-breakpoint-max) { - figure[data-type=image] { - width: 100% !important; - float: none !important; - margin-left: 0; - margin-right: 0; - } - figure[data-type=video] iframe { - width: 100% !important; - height: auto !important; - } - } -} \ No newline at end of file diff --git a/modules/backend/formwidgets/richeditor/assets/less/_froala.less b/modules/backend/formwidgets/richeditor/assets/less/_froala.less index 9ca52cc8d..9e3357166 100644 --- a/modules/backend/formwidgets/richeditor/assets/less/_froala.less +++ b/modules/backend/formwidgets/richeditor/assets/less/_froala.less @@ -2,79 +2,174 @@ // Mods to Froala Editor // -// -// Wrapper -// +// Give soft priority to all styles +body { -.fr-box.fr-basic.fr-top .fr-wrapper, -.fr-box.fr-basic.fr-bottom .fr-wrapper { - .box-shadow(none); -} + // + // Wrapper + // -// -// Code mode -// - -.fr-box { - .ace_editor { - display: none; - } - .ace_editor { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: 0; + .fr-box.fr-basic.fr-top .fr-wrapper, + .fr-box.fr-basic.fr-bottom .fr-wrapper { + .box-shadow(none); } - &.fr-code-view .ace_editor { - display: block; - } -} + // + // Code mode + // -// -// Full screen -// + .fr-box { + .ace_editor { + display: none; + } + .ace_editor { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: 0; + } -.fr-command.fr-btn[data-cmd=fullscreen] { - float: right; -} - -// -// Toolbar -// - -.fr-toolbar { - border-top-color: transparent; - background: #f2f2f2; -} - -.fr-popup.fr-desktop, -.fr-toolbar.fr-inline.fr-desktop { - .fr-arrow { - top: -@arrow-size; + &.fr-code-view .ace_editor { + display: block; + } } - &.fr-above { + // + // Full screen + // + + .fr-command.fr-btn[data-cmd=fullscreen] { + float: right; + } + + // + // Toolbar + // + + .fr-toolbar { + border-top-color: transparent; + background: #f2f2f2; + } + + .fr-popup.fr-desktop, + .fr-toolbar.fr-inline.fr-desktop { .fr-arrow { - bottom: -@arrow-size; + top: -@arrow-size; + } + + &.fr-above { + .fr-arrow { + bottom: -@arrow-size; + } } } -} -// Command button. -.fr-toolbar, .fr-popup { - .fr-command.fr-btn { - // Dropdown is visible. - &.fr-dropdown.fr-active { - color: @btn-active-text; + // Command button. + .fr-toolbar, .fr-popup { + .fr-command.fr-btn { + // Dropdown is visible. + &.fr-dropdown.fr-active { + color: @btn-active-text; + } + } + } + + .fr-toolbar.fr-bottom, + .fr-toolbar.fr-top { + border-bottom: 2px solid @color-list-border; + .box-shadow(none); + } + + // + // Popup Buttons + // + + .fr-popup .fr-action-buttons { + button.fr-command { + .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); + .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border; @btn-primary-bg; @btn-primary-bg); + + margin-top: 6px; + + font-size: @font-size-base - 1; + text-align: left; + height: auto; + outline: none !important; + .box-shadow(~"inset 0 -2px 0 rgba(0,0,0,.15)"); + + &[disabled] { + color: rgba(255,255,255,.6); + } + + &.active, + &:active { + .box-shadow(inset 0 1px 0 rgba(0,0,0,.3)); + } + } + } + + // + // Popup Toolbar + // + + .fr-popup .fr-buttons { + border-bottom: 2px solid @color-list-border; + .box-shadow(none); + } + + // + // Dropdown + // + + .fr-command.fr-btn + .fr-dropdown-menu { + .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li { + font-size: @font-size-base; + a { + color: #666666; + } + } + } + + // + // Inputs + // + + .fr-popup .fr-input-line { + + input[type="text"], textarea { + -webkit-appearance: none; + border: 1px solid @input-border; + background-color: @input-bg; + color: @input-color; + margin-bottom: 0; + .box-shadow(@input-box-shadow); + .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); + .transition(margin @transition-timing); + + &:focus { + border: 1px solid @input-border; + } + + &.fr-not-empty { + margin-top: 12px; + } + } + + textarea { + height: auto; + } + + input.fr-not-empty:focus + span, textarea.fr-not-empty:focus + span { + color: @color-label; + } + } + + .fr-popup .fr-checkbox { + span { + border-color: @input-border; } } -} -.fr-toolbar.fr-bottom, -.fr-toolbar.fr-top { - .box-shadow(none); - border-bottom: 2px solid @color-list-border !important; } diff --git a/modules/backend/formwidgets/richeditor/assets/less/richeditor.less b/modules/backend/formwidgets/richeditor/assets/less/richeditor.less index ed4bc45a3..743482b48 100755 --- a/modules/backend/formwidgets/richeditor/assets/less/richeditor.less +++ b/modules/backend/formwidgets/richeditor/assets/less/richeditor.less @@ -40,8 +40,9 @@ @ui-border-color: @input-border-color; @ui-border-top: 1px solid @ui-border-color; @editor-padding: 20px; -@btn-text: fade(@btn-secondary-color, 60%); +@btn-text: fade(@btn-secondary-color, 80%); @btn-active-text: #000; +@input-label-color: @color-label; // // Rich Editor @@ -137,6 +138,7 @@ .control-richeditor { .richeditor-snippet() { display: inline-block; + width: 100%; margin: 0 0 15px 0; padding: 10px 10px 10px 36px; border: 2px dotted #bdc3c7; diff --git a/modules/system/assets/ui/less/tooltip.less b/modules/system/assets/ui/less/tooltip.less index c777297b1..3318f7641 100644 --- a/modules/system/assets/ui/less/tooltip.less +++ b/modules/system/assets/ui/less/tooltip.less @@ -34,6 +34,7 @@ text-decoration: none; background-color: @tooltip-bg; .border-radius(@border-radius-base); + .box-shadow(@tooltip-box-shadow); } // Arrows diff --git a/modules/system/assets/ui/less/tooltip.variables.less b/modules/system/assets/ui/less/tooltip.variables.less index be8ad8aca..74d629431 100644 --- a/modules/system/assets/ui/less/tooltip.variables.less +++ b/modules/system/assets/ui/less/tooltip.variables.less @@ -9,3 +9,4 @@ @tooltip-arrow-width: 5px; @tooltip-arrow-color: @tooltip-bg; +@tooltip-box-shadow: ~"0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23)"; \ No newline at end of file diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index cd774a068..90352e1e7 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -664,7 +664,7 @@ input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button" .tooltip.right{margin-left:3px;padding:0 5px} .tooltip.bottom{margin-top:3px;padding:5px 0} .tooltip.left{margin-left:-3px;padding:0 5px} -.tooltip-inner{max-width:200px;padding:3px 8px;color:#ffffff;text-align:center;text-decoration:none;background-color:#34495e;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} +.tooltip-inner{max-width:200px;padding:3px 8px;color:#ffffff;text-align:center;text-decoration:none;background-color:#34495e;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 2px 4px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 2px 4px rgba(0,0,0,0.23)} .tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid} .tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#34495e} .tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-width:5px 5px 0;border-top-color:#34495e}