Trying to split button bar from edit zone #1434

fabiodellpozzo · 2023-11-23T06:48:38Z

fabiodellpozzo
Nov 23, 2023

fabiodellpozzo · 2023-11-23T14:53:04Z

fabiodellpozzo
Nov 23, 2023
Author

Initially this is a test to verify the documentation recommendations, the next step being to include the skin, seeking to meet the recommendations so that it does not affect the plugins. Tks Alex-D

0 replies

Alex-D · 2023-11-26T11:10:11Z

Alex-D
Nov 26, 2023
Maintainer

Hi,
Can you group all of your posts in the same discussion and close others, please?
Also, can you explain your goal, maybe it can help someone else, or you could get some help from other people :)

Thank you.

2 replies

fabiodellpozzo Nov 26, 2023
Author

Ok tks, The idea is to think of a way to make the editing area independent of the panel buttons.
It is possible to have a more customized editing area, but this affects the dynamism of the panel buttons.

/** Trumbowyg v2.25.1 - A lightweight WYSIWYG editor - alex-d.github.io/Trumbowyg - License MIT - Author : Alexandre Demode (Alex-D) / alex-d.fr */

body{
margin: 0;
padding: 0;
background-color:#f9fbfd;
}

body::-webkit-scrollbar {
width: 14px; /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
background: #f9fbfd; /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
background-color: #DADCE0; /* color of the scroll thumb /
border-radius: 20px; / roundness of the scroll thumb /
border: 3px solid #f9fbfd; / creates padding around scroll thumb */
}

body::-webkit-scrollbar-thumb:hover {
background-color: #c7c7c7; /* color of the scroll thumb /
border-radius: 20px; / roundness of the scroll thumb /
border: 3px solid #c7c7c7; / creates padding around scroll thumb */

}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-editor,textarea[type="text"] {outline-color: rgb(17, 0, 255);outline-width: 0px;outline-style: solid;border-radius: 0px;border-style: inset;border-width: 0px;box-shadow: none;-webkit-focus-ring-color: 0px;}
*/
.trumbowyg-editor,textarea[type="text"]:focus {
outline-color: #c4c7c5;
outline-width: 0px;
outline-style: solid;
border-radius: 0px;
border-style: inset;
box-shadow: none;
-webkit-focus-ring-color: 0px;
}

/*original-----------------------------------------------------------------------------------------------####################
#trumbowyg-icons,#trumbowyg-icons svg{height:0;width:0}
*/
#trumbowyg-icons,#trumbowyg-icons svg{height:0; width:0;}

/*original-----------------------------------------------------------------------------------------------####################
#trumbowyg-icons{overflow:hidden;visibility:hidden}
*/
#trumbowyg-icons{overflow:hidden;visibility:hidden;}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-box svg,.trumbowyg-modal svg{
width:17px;
height:100%;
fill:#222
}
*/
.trumbowyg-box svg,.trumbowyg-modal svg{
width:17px;
height:100%;
fill:#222;
}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-box *,
.trumbowyg-box ::after,
.trumbowyg-box ::before,
.trumbowyg-modal ,
.trumbowyg-modal ::after,
.trumbowyg-modal ::before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
/
.trumbowyg-box ,
.trumbowyg-box ::after,
.trumbowyg-box ::before,
.trumbowyg-modal ,
.trumbowyg-modal ::after,
.trumbowyg-modal ::before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: transparent; / add /
margin-bottom: 0px;/ add /
padding-bottom: 0px;/ add */

}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-box,
.trumbowyg-editor{
display:block;
position:relative;
border:1px solid #DDD;
width:100%;
min-height:300px;
}
/
.trumbowyg-box,
.trumbowyg-editor{
display:block; / define o background do corpo do doc /
position:relative;
width:98%; / altera a largura do back do doc /
min-height:auto; / altera a altura do back do doc */

margin-left: 15px;/** add  start acrescentei margin-top: 20px; */

margin-top: 115px;/** add alterou a altura do pane completo */
padding-top: 94px;/** add alterou a altura do pane completo */
padding-bottom: 16px;/** 
                        add  alterou o paddin em relação a area editavel ao back do doc 
                        background:#f2f5fa; cor background google docs F9FBFD cor borda back google docs #c4c7c5 
                        comentário borda no corpo background do documentomove a distancia do topo do back e do corpo do doc*/

}

/*original-----------------------------------------------------------------------------------------------####################
*/

.trumbowyg-box,.trumbowyg-textarea,.trumbowyg-editor{

border-top:0px solid #c4c7c5;/* altera a borda do editavel */
                  border:1px solid #c4c7c5 ;/* altera a borda do back doc */
                  border-right:0 ;/* altera a borda do back doc*/
                  border-bottom:0;/* altera a borda back doc */
}

.trumbowyg-textarea:hover,.trumbowyg-editor:hover{
border:1px solid #bbbdbc;/* altera a borda do editavel */

/* teste de fixação back do doc <------ */ 
/* position:fixed ; */
/* background:#f9fbfd; */  /*
                            alterou a cor do back do doc 23:40 21/11/2023
                            e a cor do campo texto do doc. 
                        */

                        border-right:1px solid #148139 ;/* altera a borda do editavel */
                  
}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-box .trumbowyg-editor{
margin:0 auto;
}
*/
.trumbowyg-box .trumbowyg-editor{
margin:0 auto;

/** add */
width:65%;/* alterou a largura da area de escrita */
margin-top:-65px;/* alterou a altura da area de escrita */
background:#fff;
position:relative; 
min-height:1024px; /* altera a tamanho do back do doc */

border-bottom:1px solid #c4c7c5 ;/* altera a borda do editavel */
border-right:1px solid #c4c7c5 ;/* altera a borda do editavel */
/* comentário borda no corpo do documento */
/* border-radius: 17px; (tira o border radio do edit doc */

}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-editor,
.trumbowyg-textarea{
position:relative;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:20px;
min-height:300px;
width:100%;
border-style:none;
resize:none;
outline:0;
overflow:auto;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}
/
.trumbowyg-editor,
.trumbowyg-textarea{
position:relative;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:5px; / editado /
min-height:600px; / editado /
width:100%;
/ border-style:none; (neutralizado) /
/ resize:none; (neutralizado) /
/ outline:0; (neutralizado) */
overflow:auto;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;

/* add */
/* position:static; (neutralizado) */
/* background:#fff; */
border:1px solid #c4c7c5;/* altera a borda do editavel */
border-top:1px solid #c4c7c5;/* altera a borda do editavel */
padding-left: 0.94em;
margin-left: 0.94em;
 /* comments 
    define a area editavel do doc.
 */

}

/*original-----------------------------------------------------------------------------------------------####################

.trumbowyg-textarea{
position:relative;
display:block;
overflow:auto;
border:none;
font-size:14px;
font-family:Inconsolata,Consolas,Courier,"Courier New",sans-serif;
line-height:18px;
}
/
.trumbowyg-textarea{
/ position:relative; (neutralizado) /
position:fixed; / editado - mantem fixo a area back do doc */
display:block;
overflow:auto;
border:none;
font-size:14px;
font-family:Inconsolata,Consolas,Courier,"Courier New",sans-serif;
line-height:18px;

border-right: 0 ;/* #c4c7c5 altera a borda do editavel */

}

/*original-----------------------------------------------------------------------------------------------####################

.trumbowyg-editor.trumbowyg-autogrow-on-enter,
.trumbowyg-textarea.trumbowyg-autogrow-on-enter{
-webkit-transition:height .3s ease-out;
-o-transition:height .3s ease-out;
transition:height .3s ease-out;
}
*/
.trumbowyg-editor.trumbowyg-autogrow-on-enter,
.trumbowyg-textarea.trumbowyg-autogrow-on-enter{
-webkit-transition:height .3s ease-out;
-o-transition:height .3s ease-out;
transition:height .3s ease-out;
}

/*original-----------------------------------------------------------------------------------------------####################

.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-box-blur .trumbowyg-editor::before{
color:transparent!important;
text-shadow:0 0 7px #333;
}
*/
.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-box-blur .trumbowyg-editor::before{
color:transparent!important;
text-shadow:0 0 7px #333;

}

/*original-----------------------------------------------------------------------------------------------####################

.trumbowyg-editor[contenteditable=true]:empty:not(:focus)::before{
content:attr(placeholder);
color:#999;
pointer-events:none;
white-space:break-spaces;
}
*/
.trumbowyg-editor[contenteditable=true]:empty:not(:focus)::before{
content:attr(placeholder);
color:#999;
pointer-events:none;
white-space:break-spaces;

border:1px solid rgb(214, 216, 218);/* adicionado */
border-style: solid;/* adicionado */   

}

/original-----------------------------------------------------------------------------------------------####################
??????????/

.trumbowyg-editor[contenteditable=true]:focus{

/* background:#fff; */

border:1px solid #c4c7c5 ;/* #c4c7c5 altera a borda do editavel */

}

/*original-----------------------------------------------------------------------------------------------####################

@media screen and (min-width:0 \0){
.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-box-blur .trumbowyg-editor::before{
color:rgba(200,200,200,.6)!important
}
}
*/
@media screen and (min-width:0 \0){
.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-box-blur .trumbowyg-editor::before{
color:rgba(200,200,200,.6)!important;
}
}

/*original-----------------------------------------------------------------------------------------------####################

@supports (-ms-accelerator:true){
.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-box-blur .trumbowyg-editor::before{
color:rgba(200,200,200,.6)!important;
}
}
*/
@supports (-ms-accelerator:true){
.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-box-blur .trumbowyg-editor::before{
color:rgba(200,200,200,.6)!important;
}
}
/*original-----------------------------------------------------------------------------------------------####################

.trumbowyg-box-blur .trumbowyg-editor hr,
.trumbowyg-box-blur .trumbowyg-editor img{
opacity:.2;
}
*/
.trumbowyg-box-blur .trumbowyg-editor hr,
.trumbowyg-box-blur .trumbowyg-editor img{
opacity:.2;
}

/*original-----------------------------------------------------------------------------------------------####################

.trumbowyg-box.trumbowyg-editor-visible .trumbowyg-textarea{
height:1px!important;
width:25%;
min-height:0!important;
padding:0!important;
background:0 0;
opacity:0!important;
}
*/
.trumbowyg-box.trumbowyg-editor-visible .trumbowyg-textarea{
height:1px!important;
width:25%;
min-height:0!important;
padding:0!important;
background:0 0;
opacity:0!important;

}

/*original-----------------------------------------------------------------------------------------------####################

.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-textarea{
display:block;
margin-bottom:1px;
}
*/
.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-textarea{
display:block;

}

/*original-----------------------------------------------------------------------------------------------####################

.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-editor{
display:none;
}
*/
.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-editor{
display:none;
}

/*original-----------------------------------------------------------------------------------------------####################

.trumbowyg-box.trumbowyg-disabled .trumbowyg-textarea{
opacity:.8;
background:0 0;
}
*/
.trumbowyg-box.trumbowyg-disabled .trumbowyg-textarea{
opacity:.8;
background:0 0;
}

/** (origin)
.trumbowyg-box.trumbowyg-fullscreen{
background:#FEFEFE;
border:none!important;
}
*/.trumbowyg-box.trumbowyg-fullscreen{
background:#FEFEFE;
border:none!important;
}

/* ---------------------- PANE ###########################################################################################/
/ ---------------------- PANE ###########################################################################################*/

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane{
width:100%
;min-height:36px;
background:#ecf0f1;
border-bottom:1px solid #d7e0e2;
margin:0;
padding:0 5px;
position:relative;
list-style-type:none;
line-height:10px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
z-index:11;
}
*/
.trumbowyg-button-pane{

width:98%; /* altera a largura do pane */
min-height:70px; /* altera a altura da barra azun back do panel */
background:#f9fbfd;/*background:#f9fbfd; #f9fbfd (cor padrão) */
border-bottom:1px solid #c4c7c5;/*#c4c7c5 #f9fbfd (cor padrão) */

margin-left: -1px;/** add  start acrescentei margin-top: 20px; */
padding:0 0px;


position:fixed;

list-style-type:none;
line-height:10px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
z-index:1;
margin-top: -151px; /* add altura do panel button */


border-right:0px;/* adicionado */
border-left:0px;/* adicionado */

/* teste pane
        background:#105ba7;
        border-radius: 25px;
        acrescentei mudou a cor do background do pane 
*/

}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane button{
display:inline-block;
position:relative;
width:35px;
height:35px;
padding:1px 6px!important;
margin-bottom:1px;
overflow:hidden;
border:none;
cursor:pointer;
background:0 0;
vertical-align:middle;
-webkit-transition:background-color 150ms,opacity 150ms;
-o-transition:background-color 150ms,opacity 150ms;
transition:background-color 150ms,opacity 150ms
}
/
.trumbowyg-button-pane button{
display:inline-block;
position:relative;
width:32px;/ alterado o valor /
height:30px;/ alterado o valor /
padding:1px 6px!important;
margin-bottom:5px;/ alterado o valor /
overflow:hidden;
border:none;
cursor:pointer;
background:0 0;
vertical-align:middle;
-webkit-transition:background-color 150ms,opacity 150ms;
-o-transition:background-color 150ms,opacity 150ms;
transition:background-color 150ms,opacity 150ms;
padding-left:7px;/ add /
margin-left:4px;/ add /
margin-top:5px;/ add /
background: #edf2fa;/ background: #edf2fa; add altera a cor do funfo do botao pane /
border-radius: 5px;/ add */
}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane::after{
content:" ";
display:block;
position:absolute;
top:36px;
left:0;
right:0;
width:100%;
height:1px;
background:#d7e0e2;
}
*/
.trumbowyg-button-pane::after{

/* linha chata que virou o back base /
content:" ";
display:block;
position:fixed;
top:0px; / move a linha chata do pane 21/11/2023 23:23 /
width:98%; / altura tamanho linha chata 21/11/2023 23:23 /
/ left:0; (desabilitado) /
/ right:0; (desabilitado) /
/ height:1px; (desabilitado) /
background:#edf2fa; / background:#edf2fa; cor da linha chata do pane 21/11/2023 23:23 /
min-height:42px; / add /
padding-left: 0px; / add /
border-radius: 50px; / add /
z-index: -51320; / add */

margin-top: 64px;

}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane .trumbowyg-button-group{
display:inline-block;
}
/
.trumbowyg-button-pane .trumbowyg-button-group{
display:inline-block;
margin: 0px; / add /
padding: 0px; / add /
border-radius: 5px; / add /
padding-left: 0.10rem; / add */
margin-top: 6px;
}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-fullscreen-button svg{
color:transparent;
}
*/

.trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-fullscreen-button svg{
color:transparent;
border:0px; /* add */
}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane .trumbowyg-button-group::after{
content:" ";
display:inline-block;
width:1px;
background:#d7e0e2;
margin:0 5px;
height:35px;
vertical-align:top;
}
/
.trumbowyg-button-pane .trumbowyg-button-group::after{
content:" ";
display:inline-block;
width:1px; / alterou a largura dos separadores do pane /
background:#c7c7c7; / alterou a cor dos separadores do pane background:#c7c7c7; /
/ margin:0 5px; (desabilitado) /
height:18px; / alterado o valor /
margin-left: 5px; / add /
vertical-align:top;
margin-top: 12px;/ editando a altura do buton pane */
}
/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane .trumbowyg-button-group:last-child::after{
content:none;
}
/
.trumbowyg-button-pane .trumbowyg-button-group:last-child::after{
content:none;
border-radius: 5px; / add */
}

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane button.trumbowyg-textual-button{
width:auto;
line-height:35px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
*/
.trumbowyg-button-pane button.trumbowyg-textual-button{
width:auto;
line-height:35px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane button.trumbowyg-disable,
.trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active),
.trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button){
opacity:.2;
cursor:default;
pointer-events:none;
}
*/
.trumbowyg-button-pane button.trumbowyg-disable,
.trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active),
.trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button){
opacity:.2;
cursor:default;
pointer-events:none;
}
/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before,
.trumbowyg-disabled .trumbowyg-button-pane .trumbowyg-button-group::before{
background:#e3e9eb;
}
/
.trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before,
.trumbowyg-disabled .trumbowyg-button-pane .trumbowyg-button-group::before{
background:#e3e9eb;
border:1px;/ add /
border-color: #F9FBFD;/ add */
}
/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane button.trumbowyg-active,
.trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-button-pane button:not(.trumbowyg-disable):hover{
background-color:#FFF;
outline:0;
}
/
.trumbowyg-button-pane button.trumbowyg-active,
.trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-button-pane button:not(.trumbowyg-disable):hover{
background-color:#cccccc; / ??? analisar copy code gdoc e verificar as setagens de cores */
/*padding: 2px; (desabilitado) */
outline:0;
}
/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane .trumbowyg-open-dropdown::after{
display:block;
content:" ";
position:absolute;
top:25px;
right:3px;
height:0;
width:0;
border:3px solid transparent;
border-top-color:#555;
}
/
.trumbowyg-button-pane .trumbowyg-open-dropdown::after{
display:block;
content:" ";
position:absolute;
top:15px;
right:2px; / alterado /
height:2; / alterado /
width:1; / alterado /
margin-left: 122px; / add /
border:4px solid transparent;/ alterado altera os icones de dropdown /
border-top-color:#928e8e; / alterado */
}
/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane .trumbowyg-right{
float:right;
}
/
.trumbowyg-button-pane .trumbowyg-right{
float:right;
margin-right:15px;/ add */
}
/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button{
padding-left:10px!important;
padding-right:18px!important;
}
*/
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button{
padding-left:10px!important;
padding-right:18px!important;

}
/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button::after{
top:17px;
right:7px;
}
/
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button::after{
top:10px;/ alterado /
right:7px;
margin-left: 15px;/ add /
position:relative;/ add */
}

.trumbowyg-dropdown button:focus,.trumbowyg-dropdown button:hover{background:#ecf0f1}

.trumbowyg-dropdown button svg{float:left;margin-right:14px}

/* --------- DROPDOWN ###########################################################################################/
/ --------- DROPDOWN ###########################################################################################/
/ --------- DROPDOWN ###########################################################################################/
/ --------- DROPDOWN ###########################################################################################/
/ --------- DROPDOWN ###########################################################################################/
/ --------- DROPDOWN ###########################################################################################*/

/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-dropdown{
max-width:300px;
max-height:250px;
overflow-y:auto;
overflow-x:hidden;
white-space:nowrap;
border:1px solid #ecf0f1;
padding:5px 0;
border-top:none;
background:#FFF;
margin-left:-1px;
-webkit-box-shadow:rgba(0,0,0,.1) 0 2px 3px;
box-shadow:rgba(0,0,0,.1) 0 2px 3px;
z-index:12;
}
/
.trumbowyg-dropdown{
max-width:400px; / modified /
max-height:350px; / modified /
overflow-y:auto;
overflow-x:hidden;
white-space:nowrap;
border:1px solid #ecf0f1;
/ padding:5px 0; (disable) /
border-top:none;
background:#cbcecf;
margin-left:-1px;
-webkit-box-shadow:rgba(0,0,0,.1) 0 2px 3px;
box-shadow:rgba(0,0,0,.1) 0 2px 3px;
z-index:120;
display:inline-block; / add /
padding-top:-25px 0; / add /
margin-top:-25px; / add /
line-height:52px; / add /
position:fixed; / add /
letter-spacing:.25px; / add /
vertical-align:middle; / add */
}
/*original-----------------------------------------------------------------------------------------------####################
.trumbowyg-dropdown button{
display:block;
width:100%;
height:35px;
line-height:35px;
text-decoration:none;
background:#FFF;
padding:0 20px 0 10px;
color:#333!important;
border:none;
cursor:pointer;
text-align:left;
font-size:15px;
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
}
/
.trumbowyg-dropdown button{
display:block;
width:100%;
height:25px; / modified /
line-height:2px;/ modified /
text-decoration:none;
background:#cbcecf;
padding:0 0px 0 0px;/ modified /
color:#333!important;
border:none;
cursor:pointer;
text-align:left;
font-size:35px;/ modified /
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
position:fixed;/ add /
letter-spacing:.25px;/ add /
line-height:16px;/ add */
}
/*original-----------------------------------------------------------------------------------------------####################
*/
.trumbowyg-dropdown button:focus,
.trumbowyg-dropdown button:hover{
background:#cbcecf;

}

.trumbowyg-dropdown button svg{
float:left;
margin-right:14px;
z-index:120;
position:relative;
background:#cbcecf;
}

/* -------------------- MODAL ###########################################################################################/
/ -------------------- MODAL ###########################################################################################*/

.trumbowyg-modal{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);max-width:520px;width:100%;height:350px;z-index:12;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}

.trumbowyg-modal-box{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);max-width:500px;width:calc(100% - 20px);padding-bottom:45px;z-index:1;background-color:#FFF;text-align:center;font-size:14px;-webkit-box-shadow:rgba(0,0,0,.2) 0 2px 3px;box-shadow:rgba(0,0,0,.2) 0 2px 3px;-webkit-backface-visibility:hidden;backface-visibility:hidden}

.trumbowyg-modal-box .trumbowyg-modal-title{font-size:24px;font-weight:700;margin:0 0 20px;padding:15px 0 13px;display:block;border-bottom:1px solid #EEE;color:#333;background:#fbfcfc}

.trumbowyg-modal-box .trumbowyg-progress{width:100%;height:3px;position:absolute;top:58px}

.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar{background:#2BC06A;width:0;height:100%;-webkit-transition:width 150ms linear;-o-transition:width 150ms linear;transition:width 150ms linear}

.trumbowyg-modal-box .trumbowyg-input-row{position:relative;margin:15px 12px;border:1px solid #DEDEDE;overflow:hidden}

.trumbowyg-modal-box .trumbowyg-input-infos{text-align:left;-webkit-transition:all 150ms;-o-transition:all 150ms;transition:all 150ms;width:150px;border-right:1px solid #DEDEDE;padding:0 7px;background-color:#fbfcfc;position:absolute;left:0;top:0;bottom:0}

.trumbowyg-modal-box .trumbowyg-input-infos label{color:#69878f;overflow:hidden}

.trumbowyg-modal-box .trumbowyg-input-infos label,.trumbowyg-modal-box .trumbowyg-input-infos label span{display:block;height:27px;line-height:27px;-webkit-transition:all 150ms;-o-transition:all 150ms;transition:all 150ms}

.trumbowyg-modal-box .trumbowyg-input-infos .trumbowyg-msg-error{color:#e74c3c}.trumbowyg-modal-box .trumbowyg-input-html{padding:1px 1px 1px 152px}

.trumbowyg-modal-box .trumbowyg-input-html,.trumbowyg-modal-box .trumbowyg-input-html input,.trumbowyg-modal-box .trumbowyg-input-html select,.trumbowyg-modal-box .trumbowyg-input-html textarea{font-size:14px}

.trumbowyg-modal-box .trumbowyg-input-html input,.trumbowyg-modal-box .trumbowyg-input-html select,.trumbowyg-modal-box .trumbowyg-input-html textarea{-webkit-transition:all 150ms;-o-transition:all 150ms;transition:all 150ms;height:27px;line-height:27px;border:0;width:100%;padding:0 7px}

.trumbowyg-modal-box .trumbowyg-input-html input:focus,.trumbowyg-modal-box .trumbowyg-input-html input:hover,.trumbowyg-modal-box .trumbowyg-input-html select:focus,.trumbowyg-modal-box .trumbowyg-input-html select:hover,.trumbowyg-modal-box .trumbowyg-input-html textarea:focus,.trumbowyg-modal-box .trumbowyg-input-html textarea:hover{outline:#95a5a6 solid 1px}

.trumbowyg-modal-box .trumbowyg-input-html input:focus,.trumbowyg-modal-box .trumbowyg-input-html select:focus,.trumbowyg-modal-box .trumbowyg-input-html textarea:focus{background:#fbfcfc}

.trumbowyg-modal-box .trumbowyg-input-html input[type=checkbox]{width:16px;height:16px;padding:0}

.trumbowyg-modal-box .trumbowyg-input-html-with-checkbox{text-align:left;padding:3px 1px 1px 3px}

.trumbowyg-modal-box .trumbowyg-input-error input,.trumbowyg-modal-box .trumbowyg-input-error select,.trumbowyg-modal-box .trumbowyg-input-error textarea{outline:#e74c3c solid 1px}

.trumbowyg-modal-box .trumbowyg-input-error .trumbowyg-input-infos label span:first-child{margin-top:-27px}

.trumbowyg-modal-box .error{margin-top:25px;display:block;color:red}

.trumbowyg-modal-box .trumbowyg-modal-button{position:absolute;bottom:10px;right:0;text-decoration:none;color:#FFF;display:block;width:100px;height:35px;line-height:33px;margin:0 10px;background-color:#333;border:none;cursor:pointer;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif;font-size:16px;-webkit-transition:all 150ms;-o-transition:all 150ms;transition:all 150ms}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit{right:110px;background:#2bc06a}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus,.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover{background:#40d47e;outline:0}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active{background:#25a25a}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset{color:#555;background:#e6e6e6}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus,.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover{background:#fbfbfb;outline:0}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active{background:#d5d5d5}

.trumbowyg-overlay{position:absolute;background-color:rgba(255,255,255,.5);height:100%;width:100%;left:0;display:none;top:0;z-index:10}

body.trumbowyg-body-fullscreen{overflow:hidden}

.trumbowyg-fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;margin:0;padding:0;z-index:99999}
.trumbowyg-fullscreen .trumbowyg-editor,.trumbowyg-fullscreen.trumbowyg-box{border:none}
.trumbowyg-fullscreen .trumbowyg-editor,.trumbowyg-fullscreen .trumbowyg-textarea{height:calc(100% - 37px)!important;overflow:auto}
.trumbowyg-fullscreen .trumbowyg-overlay{height:100%!important}.trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg{color:#222;fill:transparent}
.trumbowyg-editor embed,.trumbowyg-editor img,.trumbowyg-editor object,.trumbowyg-editor video{max-width:100%}
.trumbowyg-editor img,.trumbowyg-editor video{height:auto}
.trumbowyg-editor img{cursor:move}
.trumbowyg-editor canvas:focus{outline:0}

.trumbowyg-modal{
position:absolute;
top:0;
left:50%;
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
max-width:520px;
width:100%;
height:350px;
z-index:12;
overflow:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

.trumbowyg-modal-box{
position:absolute;
top:0;
left:50%;
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
max-width:500px;
width:calc(100% - 20px);
padding-bottom:45px;
z-index:1;
background-color:#FFF;
text-align:center;
font-size:14px;
-webkit-box-shadow:rgba(0,0,0,.2) 0 2px 3px;
box-shadow:rgba(0,0,0,.2) 0 2px 3px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

.trumbowyg-modal-box .trumbowyg-modal-title{
font-size:24px;
font-weight:700;
margin:0 0 20px;
padding:15px 0 13px;
display:block;
border-bottom:1px solid #EEE;
color:#333;
background:#fbfcfc;
}

.trumbowyg-modal-box .trumbowyg-progress{
width:100%;
height:3px;
position:absolute;
top:58px;
}

.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar{
background:#2BC06A;
width:0;
height:100%;
-webkit-transition:width 150ms linear;
-o-transition:width 150ms linear;
transition:width 150ms linear;
}

.trumbowyg-modal-box .trumbowyg-input-row{
position:relative;
margin:15px 12px;
border:1px solid #DEDEDE;
overflow:hidden;
}

.trumbowyg-modal-box .trumbowyg-input-infos{
text-align:left;
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
width:150px;
border-right:1px solid #DEDEDE;
padding:0 7px;
background-color:#fbfcfc;
position:absolute;
left:0;
top:0;
bottom:0;
}

.trumbowyg-modal-box .trumbowyg-input-infos label{
color:#69878f;
overflow:hidden;
}

.trumbowyg-modal-box .trumbowyg-input-infos label,
.trumbowyg-modal-box .trumbowyg-input-infos label span{
display:block;
height:27px;
line-height:27px;
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
}

.trumbowyg-modal-box .trumbowyg-input-infos .trumbowyg-msg-error{
color:#e74c3c;
}

.trumbowyg-modal-box .trumbowyg-input-html{
padding:1px 1px 1px 152px;
}

.trumbowyg-modal-box .trumbowyg-input-html,
.trumbowyg-modal-box .trumbowyg-input-html input,
.trumbowyg-modal-box .trumbowyg-input-html select,
.trumbowyg-modal-box .trumbowyg-input-html textarea{
font-size:14px;
}

.trumbowyg-modal-box .trumbowyg-input-html input,
.trumbowyg-modal-box .trumbowyg-input-html select,
.trumbowyg-modal-box .trumbowyg-input-html textarea{
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
height:27px;
line-height:27px;
border:0;
width:100%;
padding:0 7px;
}

.trumbowyg-modal-box .trumbowyg-input-html input:focus,
.trumbowyg-modal-box .trumbowyg-input-html input:hover,
.trumbowyg-modal-box .trumbowyg-input-html select:focus,
.trumbowyg-modal-box .trumbowyg-input-html select:hover,
.trumbowyg-modal-box .trumbowyg-input-html textarea:focus,
.trumbowyg-modal-box .trumbowyg-input-html textarea:hover{
outline:#95a5a6 solid 1px;
}

.trumbowyg-modal-box .trumbowyg-input-html input:focus,
.trumbowyg-modal-box .trumbowyg-input-html select:focus,
.trumbowyg-modal-box .trumbowyg-input-html textarea:focus{
background:#fbfcfc;
}

.trumbowyg-modal-box .trumbowyg-input-html input[type=checkbox]{
width:16px;
height:16px;
padding:0;
}

.trumbowyg-modal-box .trumbowyg-input-html-with-checkbox{
text-align:left;
padding:3px 1px 1px 3px;
}

.trumbowyg-modal-box .trumbowyg-input-error input,
.trumbowyg-modal-box .trumbowyg-input-error select,
.trumbowyg-modal-box .trumbowyg-input-error textarea{
outline:#e74c3c solid 1px;
}

.trumbowyg-modal-box .trumbowyg-input-error .trumbowyg-input-infos label span:first-child{
margin-top:-27px;
}

.trumbowyg-modal-box .error{
margin-top:25px;
display:block;
color:red;
}

.trumbowyg-modal-box .trumbowyg-modal-button{
position:absolute;
bottom:10px;
right:0;
text-decoration:none;
color:#FFF;
display:block;
width:100px;
height:35px;
line-height:33px;
margin:0 10px;
background-color:#333;
border:none;
cursor:pointer;
font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif;
font-size:16px;
-webkit-transition:all 150ms;
-o-transition:all 150ms;
transition:all 150ms;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit{
right:110px;
background:#2bc06a;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus,
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover{
background:#40d47e;
outline:0;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active{
background:#25a25a;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset{
color:#555;
background:#e6e6e6;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus,
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover{
background:#fbfbfb;
outline:0;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active{
background:#d5d5d5;
}

.trumbowyg-overlay{
position:absolute;
background-color:rgba(255,255,255,.5);
height:100%;
width:100%;
left:0;
display:none;
top:0;
z-index:10;
}

/* FULLSCREEN ###############################################################################################################*/

body.trumbowyg-body-fullscreen{
overflow:hidden;
}

.trumbowyg-fullscreen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:99999;
}

.trumbowyg-fullscreen .trumbowyg-editor,
.trumbowyg-fullscreen.trumbowyg-box{
border:none;
}

.trumbowyg-fullscreen .trumbowyg-editor,
.trumbowyg-fullscreen .trumbowyg-textarea{
height:calc(100% - 37px)!important;
overflow:auto;
}

.trumbowyg-fullscreen .trumbowyg-overlay{
height:100%!important;
}

.trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg{
color:#222;
fill:transparent;
}

.trumbowyg-editor embed,
.trumbowyg-editor img,
.trumbowyg-editor object,
.trumbowyg-editor video{
max-width:100%;
}

.trumbowyg-editor img,
.trumbowyg-editor video{
height:auto;
}

.trumbowyg-editor img{
cursor:move;
}

.trumbowyg-editor canvas:focus{ outline:0; border:1px; border-color: #F9FBFD;}
/** .trumbowyg-editor canvas:focus{outline:0} (origin) */

/** ----------------------------- RESET #################################################################################/
/** ----------------------------- RESET #################################################################################/

.trumbowyg-editor.trumbowyg-reset-css{background:#FEFEFE!important;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif!important;font-size:14px!important;line-height:1.45em!important;color:#333}
.trumbowyg-editor.trumbowyg-reset-css a{color:#15c!important;text-decoration:underline!important}
.trumbowyg-editor.trumbowyg-reset-css blockquote,.trumbowyg-editor.trumbowyg-reset-css div,.trumbowyg-editor.trumbowyg-reset-css ol,.trumbowyg-editor.trumbowyg-reset-css p,.trumbowyg-editor.trumbowyg-reset-css ul{-webkit-box-shadow:none!important;box-shadow:none!important;background:0 0!important;margin:0 0 15px!important;line-height:1.4em!important;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif!important;font-size:14px!important;border:none}
.trumbowyg-editor.trumbowyg-reset-css hr,.trumbowyg-editor.trumbowyg-reset-css iframe,.trumbowyg-editor.trumbowyg-reset-css object{margin-bottom:15px!important}
.trumbowyg-editor.trumbowyg-reset-css blockquote{margin-left:32px!important;font-style:italic!important;color:#555}
.trumbowyg-editor.trumbowyg-reset-css ul{list-style:disc}.trumbowyg-editor.trumbowyg-reset-css ol{list-style:decimal}
.trumbowyg-editor.trumbowyg-reset-css ol,.trumbowyg-editor.trumbowyg-reset-css ul{padding-left:20px!important}
.trumbowyg-editor.trumbowyg-reset-css ol ol,.trumbowyg-editor.trumbowyg-reset-css ol ul,.trumbowyg-editor.trumbowyg-reset-css ul ol,.trumbowyg-editor.trumbowyg-reset-css ul ul{border:none;margin:2px!important;padding:0 0 0 24px!important}
.trumbowyg-editor.trumbowyg-reset-css hr{display:block;height:1px;border:none;border-top:1px solid #CCC}
.trumbowyg-editor.trumbowyg-reset-css h1,.trumbowyg-editor.trumbowyg-reset-css h2,.trumbowyg-editor.trumbowyg-reset-css h3,.trumbowyg-editor.trumbowyg-reset-css h4{color:#111;background:0 0;margin:0!important;padding:0!important;font-weight:700}
.trumbowyg-editor.trumbowyg-reset-css h1{font-size:32px!important;line-height:38px!important;margin-bottom:20px!important}
.trumbowyg-editor.trumbowyg-reset-css h2{font-size:26px!important;line-height:34px!important;margin-bottom:15px!important}
.trumbowyg-editor.trumbowyg-reset-css h3{font-size:22px!important;line-height:28px!important;margin-bottom:7px!important}
.trumbowyg-editor.trumbowyg-reset-css h4{font-size:16px!important;line-height:22px!important;margin-bottom:7px!important}
.trumbowyg-dark .trumbowyg-textarea{background:#111;color:#ddd}
.trumbowyg-dark .trumbowyg-box{border:1px solid #343434}.trumbowyg-dark .trumbowyg-box.trumbowyg-fullscreen{background:#111}
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{text-shadow:0 0 7px #ccc}

/** ----------DARK ############################################################################################################/
/** ----------DARK ############################################################################################################/

.trumbowyg-dark .trumbowyg-textarea{background:#111;color:#ddd}
.trumbowyg-dark .trumbowyg-box{border:1px solid #343434}
.trumbowyg-dark .trumbowyg-box.trumbowyg-fullscreen{background:#111}
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{text-shadow:0 0 7px #ccc}

/** (origin)
@media screen and (min-width:0 \0){.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(20,20,20,.6)!important}}
*/
@media screen and (min-width:0 \0){
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(20,20,20,.6)!important;}}

/** (origin)
@supports (-ms-accelerator:true){
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(20,20,20,.6)!important}}
*/
@supports (-ms-accelerator:true){
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before{color:rgba(20,20,20,.6)!important;}}

.trumbowyg-dark .trumbowyg-box svg{fill:#ecf0f1;color:#ecf0f1;}
.trumbowyg-dark .trumbowyg-button-pane{background-color:#222;border-bottom-color:#343434;}
.trumbowyg-dark .trumbowyg-button-pane::after{background:#343434;}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)::after{background-color:#343434;}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg{color:transparent;}
.trumbowyg-dark .trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::after{background-color:#2a2a2a;}
.trumbowyg-dark .trumbowyg-button-pane button.trumbowyg-active,
.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):hover{background-color:#333;}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-open-dropdown::after{border-top-color:#fff;}
.trumbowyg-dark .trumbowyg-fullscreen .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg{color:#ecf0f1;fill:transparent;}
.trumbowyg-dark .trumbowyg-dropdown{border-color:#222;background:#333;-webkit-box-shadow:rgba(0,0,0,.3) 0 2px 3px;box-shadow:rgba(0,0,0,.3) 0 2px 3px;}
.trumbowyg-dark .trumbowyg-dropdown button{background:#333;color:#fff!important;}
.trumbowyg-dark .trumbowyg-dropdown button:focus,
.trumbowyg-dark .trumbowyg-dropdown button:hover{background:#222;}
.trumbowyg-dark .trumbowyg-modal-box{background-color:#222;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-title{border-bottom:1px solid #555;color:#fff;background:#3c3c3c;}
.trumbowyg-dark .trumbowyg-modal-box label{display:block;position:relative;margin:15px 12px;height:27px;line-height:27px;overflow:hidden;}
.trumbowyg-dark .trumbowyg-modal-box label .trumbowyg-input-infos span{color:#eee;background-color:#2f2f2f;border-color:#222;}
.trumbowyg-dark .trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error{color:#e74c3c;}
.trumbowyg-dark .trumbowyg-modal-box label.trumbowyg-input-error input,
.trumbowyg-dark .trumbowyg-modal-box label.trumbowyg-input-error textarea{border-color:#e74c3c;}
.trumbowyg-dark .trumbowyg-modal-box label input{border-color:#222;color:#eee;background:#333;}
.trumbowyg-dark .trumbowyg-modal-box label input:focus,
.trumbowyg-dark .trumbowyg-modal-box label input:hover{border-color:#626262;}
.trumbowyg-dark .trumbowyg-modal-box label input:focus{background-color:#2f2f2f;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit{background:#1b7943;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus,
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover{background:#25a25a;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active{background:#176437;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset{background:#333;color:#ccc;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus,
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover{background:#444;}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active{background:#111;}
.trumbowyg-dark .trumbowyg-overlay{background-color:rgba(15,15,15,.6);}

Alex-D Nov 26, 2023
Maintainer

Thank you for the explanation and nice work :)

The screenshot looks good!

I hope that one day, I will have some time to work on v3 and allow this kind of layout to be done in a more easy way.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trying to split button bar from edit zone #1434

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Trying to split button bar from edit zone #1434

fabiodellpozzo Nov 23, 2023

Replies: 2 comments · 2 replies

fabiodellpozzo Nov 23, 2023 Author

Alex-D Nov 26, 2023 Maintainer

fabiodellpozzo Nov 26, 2023 Author

Alex-D Nov 26, 2023 Maintainer

fabiodellpozzo
Nov 23, 2023

Replies: 2 comments 2 replies

fabiodellpozzo
Nov 23, 2023
Author

Alex-D
Nov 26, 2023
Maintainer

fabiodellpozzo Nov 26, 2023
Author

Alex-D Nov 26, 2023
Maintainer