github.com/Azareal/Gosora@v0.0.0-20210729070923-553e66b59003/pubnot/trumbowyg/ui/trumbowyg.css (about)

     1  /**
     2   * Trumbowyg v2.8.1 - A lightweight WYSIWYG editor
     3   * Default stylesheet for Trumbowyg editor
     4   * ------------------------
     5   * @link http://alex-d.github.io/Trumbowyg
     6   * @license MIT
     7   * @author Alexandre Demode (Alex-D)
     8   *         Twitter : @AlexandreDemode
     9   *         Website : alex-d.fr
    10   */
    11  
    12  #trumbowyg-icons {
    13    overflow: hidden;
    14    visibility: hidden;
    15    height: 0;
    16    width: 0; }
    17    #trumbowyg-icons svg {
    18      height: 0;
    19      width: 0; }
    20  
    21  .trumbowyg-box *,
    22  .trumbowyg-box *::before,
    23  .trumbowyg-box *::after {
    24    box-sizing: border-box; }
    25  
    26  .trumbowyg-box svg {
    27    width: 17px;
    28    height: 100%;
    29    fill: #222; }
    30  
    31  .trumbowyg-box,
    32  .trumbowyg-editor {
    33    display: block;
    34    position: relative;
    35    border: 1px solid #DDD;
    36    width: 100%;
    37    min-height: 300px;
    38    margin: 17px auto; }
    39  
    40  .trumbowyg-box .trumbowyg-editor {
    41    margin: 0 auto; }
    42  
    43  .trumbowyg-box.trumbowyg-fullscreen {
    44    background: #FEFEFE;
    45    border: none !important; }
    46  
    47  .trumbowyg-editor,
    48  .trumbowyg-textarea {
    49    position: relative;
    50    box-sizing: border-box;
    51    padding: 20px;
    52    min-height: 300px;
    53    width: 100%;
    54    border-style: none;
    55    resize: none;
    56    outline: none;
    57    overflow: auto; }
    58    .trumbowyg-editor.trumbowyg-autogrow-on-enter,
    59    .trumbowyg-textarea.trumbowyg-autogrow-on-enter {
    60      transition: height 300ms ease-out; }
    61  
    62  .trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before {
    63    color: transparent !important;
    64    text-shadow: 0 0 7px #333; }
    65    @media screen and (min-width: 0 \0) {
    66      .trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before {
    67        color: rgba(200, 200, 200, 0.6) !important; } }
    68    @supports (-ms-accelerator: true) {
    69      .trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before {
    70        color: rgba(200, 200, 200, 0.6) !important; } }
    71  
    72  .trumbowyg-box-blur .trumbowyg-editor img,
    73  .trumbowyg-box-blur .trumbowyg-editor hr {
    74    opacity: 0.2; }
    75  
    76  .trumbowyg-textarea {
    77    position: relative;
    78    display: block;
    79    overflow: auto;
    80    border: none;
    81    white-space: normal;
    82    font-size: 14px;
    83    font-family: "Inconsolata", "Consolas", "Courier", "Courier New", sans-serif;
    84    line-height: 18px; }
    85  
    86  .trumbowyg-box.trumbowyg-editor-visible .trumbowyg-textarea {
    87    height: 1px !important;
    88    width: 25%;
    89    min-height: 0 !important;
    90    padding: 0 !important;
    91    background: none;
    92    opacity: 0 !important; }
    93  
    94  .trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-textarea {
    95    display: block; }
    96  
    97  .trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-editor {
    98    display: none; }
    99  
   100  .trumbowyg-box.trumbowyg-disabled .trumbowyg-textarea {
   101    opacity: 0.8;
   102    background: none; }
   103  
   104  .trumbowyg-editor[contenteditable=true]:empty:not(:focus)::before {
   105    content: attr(placeholder);
   106    color: #999;
   107    pointer-events: none; }
   108  
   109  .trumbowyg-button-pane {
   110    width: 100%;
   111    min-height: 36px;
   112    background: #ecf0f1;
   113    border-bottom: 1px solid #d7e0e2;
   114    margin: 0;
   115    padding: 0 5px;
   116    position: relative;
   117    list-style-type: none;
   118    line-height: 10px;
   119    -webkit-backface-visibility: hidden;
   120            backface-visibility: hidden;
   121    z-index: 11; }
   122    .trumbowyg-button-pane::after {
   123      content: " ";
   124      display: block;
   125      position: absolute;
   126      top: 36px;
   127      left: 0;
   128      right: 0;
   129      width: 100%;
   130      height: 1px;
   131      background: #d7e0e2; }
   132    .trumbowyg-button-pane .trumbowyg-button-group {
   133      display: inline-block; }
   134      .trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
   135        color: transparent; }
   136      .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) + .trumbowyg-button-group::before {
   137        content: " ";
   138        display: inline-block;
   139        width: 1px;
   140        background: #d7e0e2;
   141        margin: 0 5px;
   142        height: 35px;
   143        vertical-align: top; }
   144    .trumbowyg-button-pane button {
   145      display: inline-block;
   146      position: relative;
   147      width: 35px;
   148      height: 35px;
   149      padding: 1px 6px !important;
   150      margin-bottom: 1px;
   151      overflow: hidden;
   152      border: none;
   153      cursor: pointer;
   154      background: none;
   155      vertical-align: middle;
   156      transition: background-color 150ms, opacity 150ms; }
   157      .trumbowyg-button-pane button.trumbowyg-textual-button {
   158        width: auto;
   159        line-height: 35px;
   160        -webkit-user-select: none;
   161           -moz-user-select: none;
   162            -ms-user-select: none;
   163                user-select: none; }
   164    .trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active),
   165    .trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button) {
   166      opacity: 0.2;
   167      cursor: default; }
   168    .trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before,
   169    .trumbowyg-disabled .trumbowyg-button-pane .trumbowyg-button-group::before {
   170      background: #e3e9eb; }
   171    .trumbowyg-button-pane button:not(.trumbowyg-disable):hover,
   172    .trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
   173    .trumbowyg-button-pane button.trumbowyg-active {
   174      background-color: #FFF;
   175      outline: none; }
   176    .trumbowyg-button-pane .trumbowyg-open-dropdown::after {
   177      display: block;
   178      content: " ";
   179      position: absolute;
   180      top: 25px;
   181      right: 3px;
   182      height: 0;
   183      width: 0;
   184      border: 3px solid transparent;
   185      border-top-color: #555; }
   186    .trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button {
   187      padding-left: 10px !important;
   188      padding-right: 18px !important; }
   189      .trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button::after {
   190        top: 17px;
   191        right: 7px; }
   192    .trumbowyg-button-pane .trumbowyg-right {
   193      float: right; }
   194      .trumbowyg-button-pane .trumbowyg-right::before {
   195        display: none !important; }
   196  
   197  .trumbowyg-dropdown {
   198    width: 200px;
   199    border: 1px solid #ecf0f1;
   200    padding: 5px 0;
   201    border-top: none;
   202    background: #FFF;
   203    margin-left: -1px;
   204    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px;
   205    z-index: 11; }
   206    .trumbowyg-dropdown button {
   207      display: block;
   208      width: 100%;
   209      height: 35px;
   210      line-height: 35px;
   211      text-decoration: none;
   212      background: #FFF;
   213      padding: 0 10px;
   214      color: #333 !important;
   215      border: none;
   216      cursor: pointer;
   217      text-align: left;
   218      font-size: 15px;
   219      transition: all 150ms; }
   220      .trumbowyg-dropdown button:hover, .trumbowyg-dropdown button:focus {
   221        background: #ecf0f1; }
   222      .trumbowyg-dropdown button svg {
   223        float: left;
   224        margin-right: 14px; }
   225  
   226  /* Modal box */
   227  .trumbowyg-modal {
   228    position: absolute;
   229    top: 0;
   230    left: 50%;
   231    -webkit-transform: translateX(-50%);
   232            transform: translateX(-50%);
   233    max-width: 520px;
   234    width: 100%;
   235    height: 350px;
   236    z-index: 11;
   237    overflow: hidden;
   238    -webkit-backface-visibility: hidden;
   239            backface-visibility: hidden; }
   240  
   241  .trumbowyg-modal-box {
   242    position: absolute;
   243    top: 0;
   244    left: 50%;
   245    -webkit-transform: translateX(-50%);
   246            transform: translateX(-50%);
   247    max-width: 500px;
   248    width: calc(100% - 20px);
   249    padding-bottom: 45px;
   250    z-index: 1;
   251    background-color: #FFF;
   252    text-align: center;
   253    font-size: 14px;
   254    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;
   255    -webkit-backface-visibility: hidden;
   256            backface-visibility: hidden; }
   257    .trumbowyg-modal-box .trumbowyg-modal-title {
   258      font-size: 24px;
   259      font-weight: bold;
   260      margin: 0 0 20px;
   261      padding: 15px 0 13px;
   262      display: block;
   263      border-bottom: 1px solid #EEE;
   264      color: #333;
   265      background: #fbfcfc; }
   266    .trumbowyg-modal-box .trumbowyg-progress {
   267      width: 100%;
   268      height: 3px;
   269      position: absolute;
   270      top: 58px; }
   271      .trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar {
   272        background: #2BC06A;
   273        width: 0;
   274        height: 100%;
   275        transition: width 150ms linear; }
   276    .trumbowyg-modal-box label {
   277      display: block;
   278      position: relative;
   279      margin: 15px 12px;
   280      height: 29px;
   281      line-height: 29px;
   282      overflow: hidden; }
   283      .trumbowyg-modal-box label .trumbowyg-input-infos {
   284        display: block;
   285        text-align: left;
   286        height: 25px;
   287        line-height: 25px;
   288        transition: all 150ms; }
   289        .trumbowyg-modal-box label .trumbowyg-input-infos span {
   290          display: block;
   291          color: #69878f;
   292          background-color: #fbfcfc;
   293          border: 1px solid #DEDEDE;
   294          padding: 0 7px;
   295          width: 150px; }
   296        .trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error {
   297          color: #e74c3c; }
   298      .trumbowyg-modal-box label.trumbowyg-input-error input,
   299      .trumbowyg-modal-box label.trumbowyg-input-error textarea {
   300        border: 1px solid #e74c3c; }
   301      .trumbowyg-modal-box label.trumbowyg-input-error .trumbowyg-input-infos {
   302        margin-top: -27px; }
   303      .trumbowyg-modal-box label input {
   304        position: absolute;
   305        top: 0;
   306        right: 0;
   307        height: 27px;
   308        line-height: 27px;
   309        border: 1px solid #DEDEDE;
   310        background: #fff;
   311        font-size: 14px;
   312        max-width: 330px;
   313        width: 70%;
   314        padding: 0 7px;
   315        transition: all 150ms; }
   316        .trumbowyg-modal-box label input:hover, .trumbowyg-modal-box label input:focus {
   317          outline: none;
   318          border: 1px solid #95a5a6; }
   319        .trumbowyg-modal-box label input:focus {
   320          background: #fbfcfc; }
   321    .trumbowyg-modal-box .error {
   322      margin-top: 25px;
   323      display: block;
   324      color: red; }
   325    .trumbowyg-modal-box .trumbowyg-modal-button {
   326      position: absolute;
   327      bottom: 10px;
   328      right: 0;
   329      text-decoration: none;
   330      color: #FFF;
   331      display: block;
   332      width: 100px;
   333      height: 35px;
   334      line-height: 33px;
   335      margin: 0 10px;
   336      background-color: #333;
   337      border: none;
   338      cursor: pointer;
   339      font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif;
   340      font-size: 16px;
   341      transition: all 150ms; }
   342      .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit {
   343        right: 110px;
   344        background: #2bc06a; }
   345        .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus {
   346          background: #40d47e;
   347          outline: none; }
   348        .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active {
   349          background: #25a25a; }
   350      .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset {
   351        color: #555;
   352        background: #e6e6e6; }
   353        .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus {
   354          background: #fbfbfb;
   355          outline: none; }
   356        .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active {
   357          background: #d5d5d5; }
   358  
   359  .trumbowyg-overlay {
   360    position: absolute;
   361    background-color: rgba(255, 255, 255, 0.5);
   362    height: 100%;
   363    width: 100%;
   364    left: 0;
   365    display: none;
   366    top: 0;
   367    z-index: 10; }
   368  
   369  /**
   370   * Fullscreen
   371   */
   372  body.trumbowyg-body-fullscreen {
   373    overflow: hidden; }
   374  
   375  .trumbowyg-fullscreen {
   376    position: fixed;
   377    top: 0;
   378    left: 0;
   379    width: 100%;
   380    height: 100%;
   381    margin: 0;
   382    padding: 0;
   383    z-index: 99999; }
   384    .trumbowyg-fullscreen.trumbowyg-box,
   385    .trumbowyg-fullscreen .trumbowyg-editor {
   386      border: none; }
   387    .trumbowyg-fullscreen .trumbowyg-editor,
   388    .trumbowyg-fullscreen .trumbowyg-textarea {
   389      height: calc(100% - 37px) !important;
   390      overflow: auto; }
   391    .trumbowyg-fullscreen .trumbowyg-overlay {
   392      height: 100% !important; }
   393    .trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
   394      color: #222;
   395      fill: transparent; }
   396  
   397  .trumbowyg-editor {
   398    /*
   399       * lset for resetCss option
   400       */ }
   401    .trumbowyg-editor object,
   402    .trumbowyg-editor embed,
   403    .trumbowyg-editor video,
   404    .trumbowyg-editor img {
   405      max-width: 100%; }
   406    .trumbowyg-editor video,
   407    .trumbowyg-editor img {
   408      height: auto; }
   409    .trumbowyg-editor img {
   410      cursor: move; }
   411    .trumbowyg-editor.trumbowyg-reset-css {
   412      background: #FEFEFE !important;
   413      font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
   414      font-size: 14px !important;
   415      line-height: 1.45em !important;
   416      white-space: normal !important;
   417      color: #333; }
   418      .trumbowyg-editor.trumbowyg-reset-css a {
   419        color: #15c !important;
   420        text-decoration: underline !important; }
   421      .trumbowyg-editor.trumbowyg-reset-css div,
   422      .trumbowyg-editor.trumbowyg-reset-css p,
   423      .trumbowyg-editor.trumbowyg-reset-css ul,
   424      .trumbowyg-editor.trumbowyg-reset-css ol,
   425      .trumbowyg-editor.trumbowyg-reset-css blockquote {
   426        box-shadow: none !important;
   427        background: none !important;
   428        margin: 0 !important;
   429        margin-bottom: 15px !important;
   430        line-height: 1.4em !important;
   431        font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
   432        font-size: 14px !important;
   433        border: none; }
   434      .trumbowyg-editor.trumbowyg-reset-css iframe,
   435      .trumbowyg-editor.trumbowyg-reset-css object,
   436      .trumbowyg-editor.trumbowyg-reset-css hr {
   437        margin-bottom: 15px !important; }
   438      .trumbowyg-editor.trumbowyg-reset-css blockquote {
   439        margin-left: 32px !important;
   440        font-style: italic !important;
   441        color: #555; }
   442      .trumbowyg-editor.trumbowyg-reset-css ul,
   443      .trumbowyg-editor.trumbowyg-reset-css ol {
   444        padding-left: 20px !important; }
   445      .trumbowyg-editor.trumbowyg-reset-css ul ul,
   446      .trumbowyg-editor.trumbowyg-reset-css ol ol,
   447      .trumbowyg-editor.trumbowyg-reset-css ul ol,
   448      .trumbowyg-editor.trumbowyg-reset-css ol ul {
   449        border: none;
   450        margin: 2px !important;
   451        padding: 0 !important;
   452        padding-left: 24px !important; }
   453      .trumbowyg-editor.trumbowyg-reset-css hr {
   454        display: block;
   455        height: 1px;
   456        border: none;
   457        border-top: 1px solid #CCC; }
   458      .trumbowyg-editor.trumbowyg-reset-css h1,
   459      .trumbowyg-editor.trumbowyg-reset-css h2,
   460      .trumbowyg-editor.trumbowyg-reset-css h3,
   461      .trumbowyg-editor.trumbowyg-reset-css h4 {
   462        color: #111;
   463        background: none;
   464        margin: 0 !important;
   465        padding: 0 !important;
   466        font-weight: bold; }
   467      .trumbowyg-editor.trumbowyg-reset-css h1 {
   468        font-size: 32px !important;
   469        line-height: 38px !important;
   470        margin-bottom: 20px !important; }
   471      .trumbowyg-editor.trumbowyg-reset-css h2 {
   472        font-size: 26px !important;
   473        line-height: 34px !important;
   474        margin-bottom: 15px !important; }
   475      .trumbowyg-editor.trumbowyg-reset-css h3 {
   476        font-size: 22px !important;
   477        line-height: 28px !important;
   478        margin-bottom: 7px !important; }
   479      .trumbowyg-editor.trumbowyg-reset-css h4 {
   480        font-size: 16px !important;
   481        line-height: 22px !important;
   482        margin-bottom: 7px !important; }
   483  
   484  /*
   485   * Dark theme
   486   */
   487  .trumbowyg-dark .trumbowyg-textarea {
   488    background: #111;
   489    color: #ddd; }
   490  
   491  .trumbowyg-dark .trumbowyg-box {
   492    border: 1px solid #343434; }
   493    .trumbowyg-dark .trumbowyg-box.trumbowyg-fullscreen {
   494      background: #111; }
   495    .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before {
   496      text-shadow: 0 0 7px #ccc; }
   497      @media screen and (min-width: 0 \0 ) {
   498        .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before {
   499          color: rgba(20, 20, 20, 0.6) !important; } }
   500      @supports (-ms-accelerator: true) {
   501        .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before {
   502          color: rgba(20, 20, 20, 0.6) !important; } }
   503    .trumbowyg-dark .trumbowyg-box svg {
   504      fill: #ecf0f1;
   505      color: #ecf0f1; }
   506  
   507  .trumbowyg-dark .trumbowyg-button-pane {
   508    background-color: #222;
   509    border-bottom-color: #343434; }
   510    .trumbowyg-dark .trumbowyg-button-pane::after {
   511      background: #343434; }
   512    .trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)::before {
   513      background-color: #343434; }
   514    .trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg {
   515      color: transparent; }
   516    .trumbowyg-dark .trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before {
   517      background-color: #2a2a2a; }
   518    .trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):hover,
   519    .trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
   520    .trumbowyg-dark .trumbowyg-button-pane button.trumbowyg-active {
   521      background-color: #333; }
   522    .trumbowyg-dark .trumbowyg-button-pane .trumbowyg-open-dropdown::after {
   523      border-top-color: #fff; }
   524  
   525  .trumbowyg-dark .trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
   526    color: #ecf0f1;
   527    fill: transparent; }
   528  
   529  .trumbowyg-dark .trumbowyg-dropdown {
   530    border-color: #222;
   531    background: #333;
   532    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 3px; }
   533    .trumbowyg-dark .trumbowyg-dropdown button {
   534      background: #333;
   535      color: #fff !important; }
   536      .trumbowyg-dark .trumbowyg-dropdown button:hover, .trumbowyg-dark .trumbowyg-dropdown button:focus {
   537        background: #222; }
   538  
   539  .trumbowyg-dark .trumbowyg-modal-box {
   540    background-color: #222; }
   541    .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-title {
   542      border-bottom: 1px solid #555;
   543      color: #fff;
   544      background: #3c3c3c; }
   545    .trumbowyg-dark .trumbowyg-modal-box label {
   546      display: block;
   547      position: relative;
   548      margin: 15px 12px;
   549      height: 27px;
   550      line-height: 27px;
   551      overflow: hidden; }
   552      .trumbowyg-dark .trumbowyg-modal-box label .trumbowyg-input-infos span {
   553        color: #eee;
   554        background-color: #2f2f2f;
   555        border-color: #222; }
   556      .trumbowyg-dark .trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error {
   557        color: #e74c3c; }
   558      .trumbowyg-dark .trumbowyg-modal-box label.trumbowyg-input-error input,
   559      .trumbowyg-dark .trumbowyg-modal-box label.trumbowyg-input-error textarea {
   560        border-color: #e74c3c; }
   561      .trumbowyg-dark .trumbowyg-modal-box label input {
   562        border-color: #222;
   563        color: #eee;
   564        background: #333; }
   565        .trumbowyg-dark .trumbowyg-modal-box label input:hover, .trumbowyg-dark .trumbowyg-modal-box label input:focus {
   566          border-color: #626262; }
   567        .trumbowyg-dark .trumbowyg-modal-box label input:focus {
   568          background-color: #2f2f2f; }
   569    .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit {
   570      background: #1b7943; }
   571      .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus {
   572        background: #25a25a; }
   573      .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active {
   574        background: #176437; }
   575    .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset {
   576      background: #333;
   577      color: #ccc; }
   578      .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus {
   579        background: #444; }
   580      .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active {
   581        background: #111; }
   582  
   583  .trumbowyg-dark .trumbowyg-overlay {
   584    background-color: rgba(15, 15, 15, 0.6); }