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

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