kai-jacobsen/kontentblocks

body.wp-admin .kb-change-observer{
  left: auto;
  right: 0;
  padding: 8px 20px;
  width: auto;
}

.kb-change-observer{
  width: 400px;
  position: fixed;
  bottom: -80px;
  left: 0%;
  padding: 8px 8px 8px 60px;
  background-color: $lightwhite;
  z-index: 2950;
  @extend .base-box-shadow;
  visibility: hidden;
  transition: all .5s ease-in;
  border: 1px solid #ccc;
  font-size: 12px !important;

  &.show{
    visibility: visible;
    bottom: 0;
  }

  div{
    margin: 0;
    font-size: 12px !important;
    font-family: 'Open Sans', sans-serif !important;
    padding: 0;
  }

  .kb-button{
    font-size: 12px !important;
    font-family: 'Open Sans', sans-serif !important;
    display: inline-block;
    padding: 4px;
    margin: 0 8px;
    background-color: $lightblue;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
  }

}





#kb-toolbar {

  .mce-btn button{
    color: #fff !important;
  }

  position: fixed;
  top: 0px;
  width: 100%;
  left: 0;
  background-color: #222;
  z-index: 999999;
  height: 35px;

  #wp-fullscreen-buttons .mce-btn:hover,
  .mce-toolbar .mce-btn-group .mce-btn:hover,
  #wp-fullscreen-buttons .mce-btn:focus,
  .mce-toolbar .mce-btn-group .mce-btn:focus,
  .qt-fullscreen:hover,
  .qt-fullscreen:focus,
  button{
    background: transparent;
    box-shadow: none;
    border: none;
  }

  .mce-toolbar .mce-btn-group .mce-btn.mce-active{
    background: #333 !important;
    border-color: #444;
  }

  .mce-ico{
    color: #fff;
  }

  .mce-toolbar-grp{
    background-color: #333;
    min-width: 650px;
  }

  .mce-i-kbcancleinline{
    font-family: 'dashicons';

    &:before{
      content: "\f335";
      font-family: 'dashicons';
      width: 15px;
      height: 15px;
      font-size: 22px;
    }
  }

  .mce-menubtn{
    background: #222;
    border: transparent;
  }

  .mce-menubtn span{
    color: #fff;
  }

  .mce-panel{
    background: #222;
    color: #f2f2f2;

    .mce-menu-item{
      background: #222;
    }
  }

}

/*------------------------------------*\
    TinyMCE hard styles
\*------------------------------------*/

#onsite-form{
  .wp-editor-wrap * {
    box-sizing: content-box;
  }
  .mce-widget{
    text-transform: none !important;
    button:hover{
      background: transparent !important;
    }
  }
}

.kontentblocks-ready{
  div.mce-toolbar-grp{
    background: #fff !important;
  }

  .mce-tinymce-inline.mce-container.mce-panel.mce-floatpanel{
    @extend .base-box-shadow;
  }
}