File: public/js/tinymce/src/skins/lightgray/src/main/less/desktop/TinyMCE.less

.@{prefix}-tinymce {
  // Avoid FOUC
  visibility: inherit !important;
  position: relative;
}

.@{prefix}-fullscreen {
  border: 0; padding: 0; margin: 0;
  overflow: hidden;
  height: 100%;
  z-index: 100;
}

div.@{prefix}-fullscreen {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: auto;
}

.@{prefix}-tinymce {
  display: block;
  .border-radius(2px);
  .box-shadow(@tinymce-box-shadow);
}

.@{prefix}-statusbar > .@{prefix}-container-body {
  display: flex;
  padding-right: 16px;

  .@{prefix}-path {
    flex: 1;
  }
}

.@{prefix}-wordcount {
  font-size: inherit;
  text-transform: uppercase;
  padding: 8px 0;
}

div.@{prefix}-edit-area {
  background: #FFF;
  filter: none;
}

.@{prefix}-statusbar {
  position: relative;
}

.@{prefix}-statusbar .@{prefix}-container-body {
  position: relative;
  font-size: 11px;
}

.@{prefix}-fullscreen .@{prefix}-resizehandle {
  display: none;
}

.@{prefix}-statusbar .@{prefix}-flow-layout-item {
  margin: 0;
}

// Charmap

.@{prefix}-charmap {
  border-collapse: collapse;
}

.@{prefix}-charmap td {
  cursor: default;
  border: 1px solid @panel-border;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  padding: 2px;
}

.@{prefix}-charmap td div {
  text-align: center;
}

.@{prefix}-charmap td:hover {
  background: @btn-bg-hover;
}

.@{prefix}-grid td.@{prefix}-grid-cell div {
  border: 1px solid @grid-border;
  width: 15px; height: 15px;
  margin: 0px;
  cursor: pointer;

  &:focus {
    border-color: @grid-border-active;
  }

  &[disabled] {
    cursor: not-allowed;
  }
}

.@{prefix}-grid {
  border-spacing: 2px;
  border-collapse: separate;

  a {
    display: block;
    border: 1px solid transparent;

    &:hover, &:focus {
      border-color: @grid-border-active;
    }
  }
}

.@{prefix}-grid-border {
  margin: 0 4px 0 4px;

  a {
    border-color: @grid-border;
    width: 13px; height: 13px;
  }

  a:hover, a.@{prefix}-active {
    border-color: @grid-border-active;
    background: @grid-bg-active;
  }
}

.@{prefix}-text-center {
  text-align: center;
}

div.@{prefix}-tinymce-inline {
  width: 100%;
}

.@{prefix}-colorbtn-trans div {
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 20px;
  line-height: 16px;
  color: mix(@text, #fff, 70%);
}

.@{prefix}-monospace {
  font-family: "Courier New", Courier, monospace;
}

// Reduce double margins between toolbar rows

.@{prefix}-toolbar-grp when (@has-button-borders = true) {
  padding-bottom: 2px;
}

.@{prefix}-toolbar-grp .@{prefix}-flow-layout-item {
  margin-bottom: 0;
}

// Styles for inline dialog elements

.@{prefix}-container b {
  font-weight: bold;
}

.@{prefix}-container p {
  margin-bottom: 5px;
}

.@{prefix}-container a {
  cursor: pointer;
  color: @text-link;
  &:hover {
    text-decoration: underline;
  }
}

.@{prefix}-container ul {
  margin-left: 15px;
}

.@{prefix}-container .@{prefix}-table-striped {
  border-collapse: collapse;
  margin: 10px;
  thead > tr {
    background-color: @table-row-even;
    th {
      font-weight: bold;
    }
  }
  td, th {
    padding: 5px;
  }
  tr:nth-child(even) {
    background-color: @table-row-even;
  }
  tbody > tr:hover {
    background-color: @table-row-hover;
  }
}

.@{prefix}-branding {
  font-size: inherit;
  text-transform: uppercase;
  white-space: pre;
  padding: 8px 0;

  a {
    font-size: inherit;
    color: inherit;
  }
}

.@{prefix}-top-part {
  position: relative;
}

.@{prefix}-top-part::before {
  //background-color: red;
  content: '';
  position: absolute;
  .box-shadow(@top-part-box-shadow);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

// RTL

.@{prefix}-rtl .@{prefix}-wordcount {
  left: 0;
  right: auto;
}

.@{prefix}-rtl {
  .@{prefix}-statusbar > .@{prefix}-container-body {
    > *:last-child {
      padding-right: 0;
      padding-left: 10px;
    }
  }

  .@{prefix}-path {
    text-align: right;
    padding-right: 16px;
  }
}