SWAMPy

✎ CARVE FLESH

EDITING: skin-delta.css

/*
 * Copyright (C) 2019 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
 * This file started as modified copy of skin.css generated by tinymce's skin tool
 * (see https://github.com/tinymce/oxide for details). Then I diffed it with
 * the tinymce/skins/ui/oxide/skin.css file and deleted anything that was unique
 * or that I though I might eventually have to change (mostly colors).
 * See ./skin.css for the full css file that's being kept for reference.
 *
 * Where the colors are left hard-coded, they are different from the default skin,
 * and are what came out of the skin builder when the canvas theme colors were used.
 * I didn't find any of those elements in the RCE, so I didn't want to guess what it
 * should look like.
 */
.root {
  background-color: var(--canvasBackgroundColor);
}

:global {
  /* not part of the skin, but necessary to properly size the RCE's textarea */
  .rce-wrapper textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: auto;
  }

.tox,
  .tox *:not(svg) {
    color: inherit;
    font-family: inherit;
  }

/* fix RTL. tinyMCE tries to do this in its default theme but it's base style is too specific so when it does it, it isn't specific enough to override the base */
  [dir='rtl'] .tox :not(svg) {
    direction: rtl;
  }

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    background-color: var(--canvasBackgroundColor);
  }

.tox.tox-tinymce .screenreader-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    transform: translatez(0);
  }

.tox-tinymce-aux {
    font-family: var(--canvasFontFamily);
  }
  /* z-index must be greater than the InstUI Modal/Tray ones */
  .tox.tox-tinymce-aux {
    z-index: 10000;
  }
  .tox .tox-button {
    background-color: var(--canvasPrimaryButtonHoverBackground);
    font-family: var(--canvasFontFamily);
    font-weight: var(--canvasButtonFontWeight);
    font-size: var(--canvasButtonFontSize);
    color: var(--canvasPrimaryButtonColor);
    border-color: var(--canvasPrimaryButtonBorderColor);
    line-height: calc(var(--canvasButtonLineHeight) - 2px);
    padding: var(--canvasButtonPadding);
  }
  .tox .tox-button[disabled] {
    opacity: 0.5;
    border-color: inherit;
    color: inherit;
  }
  .tox .tox-button:focus:not(:disabled) {
    background-color: var(--canvasPrimaryButtonBackground);
    color: var(--canvasPrimaryButtonColor);
    border-color: var(--canvasBackgroundColor);
    box-shadow: var(--canvasFocusBoxShadow);
  }
  .tox .tox-button:hover:not(:disabled) {
    background-color: var(--canvasPrimaryButtonHoverBackground);
    color: var(--canvasPrimaryButtonHoverColor);
  }
  .tox .tox-button:active:not(:disabled) {
    background-color: var(--canvasPrimaryButtonBackground);
    border-color: var(--canvasPrimaryButtonBorderColor);
    color: var(--canvasPrimaryButtonColor);
  }
  .tox .tox-button--secondary {
    background-color: var(--canvasSecondaryButtonBackground);
    border-color: var(--canvasSecondaryButtonBorderColor);
    color: var(--canvasSecondaryButtonColor);
  }
  .tox .tox-button--secondary[disabled] {
    background-color: inherit;
    border-color: var(--canvasSecondaryButtonBorderColor);
    color: inherit;
    opacity: 0.5;
  }
  .tox .tox-button--secondary:focus:not(:disabled) {
    background-color: inherit;
    border-color: var(--canvasFocusBorderColor);
    color: inherit;
  }
  .tox .tox-button--secondary:hover:not(:disabled) {
    background-color: var(--canvasSecondaryButtonHoverBackground);
    border-color: var(--canvasSecondaryButtonBorderColor);
    color: var(--canvasSecondaryButtonHoverColor);
  }
  .tox .tox-button--secondary:active:not(:disabled) {
    background-color: inherit;
    border-color: var(--canvasSecondaryButtonBorderColor);
    color: inherit;
  }
  .tox .tox-button-link {
    font-family: var(--canvasFontFamily);
  }
  .tox .tox-button--naked {
    background: var(--canvasButtonBackground);
    border-color: var(--canvasButtonBorderColor);
    color: var(--canvasButtonColor);
  }
  .tox .tox-button--naked:hover:not(:disabled) {
    background-color: var(--canvasButtonHoverBackground);
    border-color: var(--canvasButtonBorderColor);
    color: var(--canvasButtonHoverColor);
  }
  .tox .tox-button--naked:focus:not(:disabled) {
    background-color: var(--canvasButtonBackground);
    color: var(--canvasButtonColor);
    border-color: var(--canvasBackgroundColor);
    box-shadow: var(--canvasFocusBoxShadow);
  }
  .tox .tox-button--naked:active:not(:disabled) {
    background-color: inherit;
    color: inherit;
  }
  .tox .tox-button--naked.tox-button--icon {
    color: var(--canvasButtonColor);
  }
  .tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
    background: var(--canvasButtonHoverBackground);
    color: var(--canvasButtonHoverColor);
  }
  .tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
    fill: rgba(45, 59, 69, 0.3);
  }
  .tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
    fill: var(--canvasTextColor);
  }
  .tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
    fill: var(--canvasTextColor);
  }
  .tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
    box-shadow: var(--canvasFocusBoxShadow);
  }

.tox .tox-collection--list .tox-collection__group {
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-collection__group-heading {
    background-color: #e3e6e8;
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-collection__item {
    color: var(--canvasTextColor);
  }
  .tox .tox-collection__item--state-disabled {
    background-color: unset;
    opacity: 0.5;
    cursor: default;
  }
  .tox .tox-collection--list .tox-collection__item--enabled {
    color: contrast(inherit, var(--canvasTextColor), #fff);
  }
  .tox .tox-collection--list .tox-collection__item--active {
    background-color: var(--activeMenuItemBackground);
    color: var(--activeMenuItemLabelColor);
  }
  .tox
    .tox-collection--list
    .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
    background-color: var(--activeMenuItemBackground);
    color: var(--activeMenuItemLabelColor);
  }
  .tox .tox-collection--toolbar .tox-collection__item--enabled {
    background-color: #cbced1;
    color: var(--canvasTextColor);
  }
  .tox .tox-collection--toolbar .tox-collection__item--active {
    background-color: #e0e2e3;
    color: var(--canvasTextColor);
  }
  .tox .tox-collection--grid .tox-collection__item--enabled {
    background-color: #cbced1;
    color: var(--canvasTextColor);
  }
  .tox .tox-collection--grid .tox-collection__item--active {
    background-color: #e0e2e3;
    color: var(--canvasTextColor);
  }
  .tox .tox-collection--list .tox-collection__item-icon:first-child {
    margin-right: 8px;
  }
  .tox .tox-collection__item-accessory {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-sv-palette {
    border: 1px solid black;
    box-sizing: border-box;
  }
  .tox .tox-hue-slider {
    border: 1px solid black;
  }
  .tox .tox-rgb-form input.tox-invalid {
    /* Need !important to override Chrome's focus styling unfortunately */
    border-color: var(--canvasErrorColor) !important;
  }
  .tox .tox-rgb-form {
    padding: 2px; /* make room for the canvas focus ring on contained input elements */
  }
  .tox .tox-swatches__picker-btn:hover {
    background: #e0e2e3;
  }
  .tox .tox-comment-thread {
    background: var(--canvasBackgroundColor);
  }
  .tox .tox-comment {
    background: var(--canvasBackgroundColor);
    border-color: var(--canvasBorderColor);
    box-shadow: 0 4px 8px 0 rgba(45, 59, 69, 0.1);
  }
  .tox .tox-comment__header {
    color: var(--canvasTextColor);
  }
  .tox .tox-comment__date {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-comment__body {
    color: var(--canvasTextColor);
  }
  .tox .tox-comment__expander p {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-comment-thread__overlay::after {
    background: var(--canvasBackgroundColor);
  }
  .tox .tox-comment__overlay {
    background: var(--canvasBackgroundColor);
  }
  .tox .tox-comment__loading-text {
    color: var(--canvasTextColor);
  }
  .tox .tox-comment__overlaytext p {
    background-color: var(--canvasBackgroundColor);
    color: var(--canvasTextColor);
  }
  .tox .tox-comment__busy-spinner {
    background-color: var(--canvasBackgroundColor);
  }
  .tox .tox-user__avatar svg {
    fill: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-user__name {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-dialog-wrap__backdrop {
    background-color: rgba(255, 255, 255, 0.75);
  }
  .tox .tox-dialog {
    background-color: var(--canvasBackgroundColor);
    border-color: var(--canvasBorderColor);
    box-shadow: var(--canvasModalShadow);
  }
  .tox .tox-dialog__header {
    background-color: var(--canvasBackgroundColor);
    color: var(--canvasTextColor);
    border-bottom: 1px solid var(--canvasBorderColor);
    padding: var(--canvasModalHeadingPadding);
    margin: 0;
  }
  .tox .tox-dialog__title {
    font-family: var(--canvasFontFamily);
    font-size: var(--canvasModalHeadingFontSize);
    font-weight: var(--canvasModalHeadingFontWeight);
  }
  .tox .tox-dialog__body {
    color: var(--canvasTextColor);
    padding: var(--canvasModalBodyPadding);
  }
  .tox .tox-dialog__body-nav-item {
    color: rgba(45, 59, 69, 0.75);
    &:focus {
      box-shadow: var(--canvasFocusBoxShadow);
    }
  }
  .tox .tox-dialog__body-nav-item--active {
    border-bottom-color: var(--canvasBrandColor);
    color: var(--canvasBrandColor);
  }
  .tox .tox-dialog__footer {
    background-color: var(--canvasModalFooterBackground);
    border-top: 1px solid var(--canvasBorderColor);
    padding: var(--canvasModalFooterPadding);
    margin: 0;
  }
  .tox .tox-dialog__table tbody tr {
    border-bottom-color: var(--canvasBorderColor);
  }
  .tox .tox-dropzone {
    background: var(--canvasBackgroundColor);
    border: 2px dashed var(--canvasBorderColor);
  }
  .tox .tox-dropzone p {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-edit-area {
    border: 1px solid var(--canvasBorderColor);
    border-radius: 3px;
  }
  .tox .tox-edit-area__iframe {
    background-color: var(--canvasBackgroundColor);
    border: var(--canvasFocusBorderWidth) solid transparent;
  }
  .tox.tox-inline-edit-area {
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-form__group {
    padding: 2px;
  }
  .tox .tox-control-wrap .tox-textfield {
    padding-right: 32px;
  }
  .tox .tox-control-wrap__status-icon-invalid svg {
    fill: var(--canvasErrorColor);
  }
  .tox .tox-control-wrap__status-icon-unknown svg {
    fill: var(--canvasWarningColor);
  }
  .tox .tox-control-wrap__status-icon-valid svg {
    fill: var(--canvasSuccessColor);
  }
  .tox .tox-color-input span {
    border-color: rgba(45, 59, 69, 0.2);
  }
  .tox .tox-color-input span:focus {
    border-color: var(--canvasBrandColor);
  }
  .tox .tox-label,
  .tox .tox-toolbar-label {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-form__group {
    margin: var(--canvasFormElementMargin);
  }
  .tox .tox-form__group:last-child {
    margin: 0;
  }
  .tox .tox-form__group .tox-label {
    color: var(--canvasFormElementLabelColor);
    margin: var(--canvasFormElementLabelMargin);
    font-size: var(--canvasFormElementLabelFontSize);
    font-weight: var(--canvasFormElementLabelFontWeight);
  }
  .tox .tox-form__group--error {
    color: var(--canvasErrorColor);
  }
  .tox .tox-textfield,
  .tox .tox-selectfield select,
  .tox .tox-textarea,
  .tox .tox-toolbar-textfield {
    background-color: var(--canvasBackgroundColor);
    border-color: var(--canvasBorderColor);
    color: var(--canvasTextColor);
    font-family: var(--canvasFontFamily);
  }
  .tox .tox-textfield:focus,
  .tox .tox-selectfield select:focus,
  .tox .tox-textarea:focus {
    /*border-color: var(--canvasFocusBorderColor);*/
    border-color: var(--canvasBorderColor);
    box-shadow: var(--canvasFocusBoxShadow);
  }
  .tox .tox-naked-btn {
    color: var(--canvasButtonColor);
  }
  .tox .tox-naked-btn svg {
    fill: var(--canvasButtonColor);
  }
  .tox .tox-insert-table-picker > div {
    border-color: #cccccc;
  }
  .tox .tox-insert-table-picker .tox-insert-table-picker__selected {
    background-color: var(--tableSelectorHighlightColor);
    border-color: var(--tableSelectorHighlightColor);
  }
  .tox-selected-menu .tox-insert-table-picker {
    background-color: var(--canvasBackgroundColor);
  }
  .tox .tox-insert-table-picker__label {
    color: var(--canvasTextColor);
  }
  .tox .tox-menu {
    background-color: var(--canvasBackgroundColor);
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-menubar {
    background-color: var(--canvasBackgroundColor);
  }
  .tox .tox-mbtn {
    color: var(--canvasButtonColor);
  }
  .tox .tox-mbtn[disabled] {
    opacity: 0.5;
  }
  .tox .tox-mbtn:hover:not(:disabled) {
    background: var(--toolbarButtonHoverBackground);
    color: var(--canvasButtonColor);
  }
  .tox .tox-mbtn:focus:not(:disabled) {
    background-color: transparent;
    color: var(--canvasButtonColor);
    border-color: var(--canvasBackgroundColor);
    box-shadow: var(--canvasFocusBoxShadow);
  }
  .tox .tox-mbtn--active {
    background: var(--toolbarButtonHoverBackground);
    color: var(--canvasButtonColor);
  }
  .tox .tox-notification {
    background-color: var(--canvasBackgroundColor);
    border-color: #c5c5c5;
  }
  .tox .tox-notification--success {
    background-color: #dff0d8;
    border-color: var(--canvasSuccessColor);
  }
  .tox .tox-notification--error {
    background-color: #f2dede;
    border-color: var(--canvasErrorColor);
  }
  .tox .tox-notification--warn {
    background-color: #fcf8e3;
    border-color: var(--canvasWarningColor);
  }
  .tox .tox-notification--info {
    background-color: #d9edf7;
    border-color: var(--canvasInfoColor);
  }
  .tox .tox-notification__body {
    color: var(--canvasTextColor);
  }
  .tox .tox-pop__dialog {
    background-color: var(--canvasBackgroundColor);
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-pop.tox-pop--bottom::before {
    border-color: var(--canvasBorderColor) transparent transparent transparent;
  }
  .tox .tox-pop.tox-pop--top::before {
    border-color: transparent transparent var(--canvasBorderColor) transparent;
  }
  .tox .tox-pop.tox-pop--left::before {
    border-color: transparent var(--canvasBorderColor) transparent transparent;
  }
  .tox .tox-pop.tox-pop--right::before {
    border-color: transparent transparent transparent var(--canvasBorderColor);
  }
  .tox .tox-slider {
    width: 100%;
  }
  .tox .tox-slider__rail {
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-slider__handle {
    background-color: var(--canvasBrandColor);
  }
  .tox .tox-spinner > div {
    background-color: rgba(45, 59, 69, 0.6);
  }
  /* deleted all the .tox-statusbar rules, since we use our own custom statusbar */
  .tox .tox-tbtn {
    border-style: none;
    color: var(--canvasButtonColor);
    position: relative;
  }

.tox .tox-tbtn svg {
    fill: var(--canvasButtonColor);
  }

.tox .tox-tbtn.tox-tbtn--enabled {
    background: inherit;
  }

.tox .tox-tbtn:focus,
  .tox .tox-split-button:focus {
    background: var(--canvasBackgroundColor);
    color: var(--canvasButtonColor);
    box-shadow: var(--canvasFocusBoxShadow);
  }

.tox .tox-tbtn:hover,
  .tox .tox-split-button:hover,
  .tox .tox-tbtn.tox-tbtn--enabled:hover,
  .tox .tox-split-button .tox-tbtn.tox-split-button__chevron:hover {
    background: var(--toolbarButtonHoverBackground);
    color: var(--canvasButtonColor);
  }

.tox-tbtn.tox-split-button__chevron {
    position: relative;
  }

/* styling lifted from instui Tabs */
  .tox .tox-tbtn.tox-tbtn--enabled::after {
    position: absolute;
    top: -3px;
    content: '\\25BC';
    text-align: center;
    height: 8px;
    font-size: 8px;
    width: 100%;
    color: var(--canvasEnabledColor);
  }

/* place the chevron above the icon for buttons with dropdowns */
  .tox .tox-tbtn.tox-tbtn--enabled.tox-tbtn--select::after {
    text-align: left;
    padding-left: 18px;
  }

/* the split button is not enabled and the chevron has been clicked to open the popup
   * hide the enabled bar that's under just the chevron
   */
  .tox-tbtn.tox-split-button__chevron.tox-tbtn--enabled::after {
    display: none;
  }

.tox .tox-tbtn--disabled,
  .tox .tox-tbtn--disabled:hover,
  .tox .tox-tbtn:disabled,
  .tox .tox-tbtn:disabled:hover {
    opacity: 0.5;
  }
  .tox .tox-tbtn--disabled svg,
  .tox .tox-tbtn--disabled:hover svg,
  .tox .tox-tbtn:disabled svg,
  .tox .tox-tbtn:disabled:hover svg {
    /* stylelint-disable-line no-descending-specificity */
    opacity: 0.5;
  }
  .tox .tox-tbtn__select-chevron svg {
    fill: var(--canvasButtonColor);
    width: 10px;
    height: 10px;
  }

.tox .tox-split-button__chevron svg {
    fill: var(--canvasButtonColor);
    width: 10px;
    height: 10px;
  }
  .tox .tox-split-button.tox-tbtn--disabled:hover,
  .tox .tox-split-button.tox-tbtn--disabled:focus,
  .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
  .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
    opacity: 0.5;
  }
  .tox .tox-toolbar {
    background-color: var(--canvasBackgroundColor);
    border-top: 1px solid var(--canvasBorderColor);
  }
  .tox .tox-toolbar__group:not(:last-of-type) {
    border-right: 1px solid var(--canvasBorderColor);
  }
  .tox .tox-tooltip__body {
    background-color: var(--canvasTextColor);
    box-shadow: 0 2px 4px rgba(45, 59, 69, 0.3);
    color: rgba(255, 255, 255, 0.75);
  }
  .tox .tox-tooltip--down .tox-tooltip__arrow {
    border-top-color: var(--canvasTextColor);
  }
  .tox .tox-tooltip--up .tox-tooltip__arrow {
    border-bottom-color: var(--canvasTextColor);
  }
  .tox .tox-tooltip--right .tox-tooltip__arrow {
    border-left-color: var(--canvasTextColor);
  }
  .tox .tox-tooltip--left .tox-tooltip__arrow {
    border-right-color: var(--canvasTextColor);
  }
  .tox .tox-well {
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-custom-editor {
    border-color: var(--canvasBorderColor);
  }
  .tox a {
    color: var(--canvasLinkColor);
  }
  .tox.tox-tinymce {
    border-style: none;
  }
  /*
  * .tox-toolbar is the regular wrapping toolbar
  * .tox-toolbar-overlord and .tox-toolbar__primary crop up when toolbar_drawer: 'floating'
  *
  * These rules create the short separater between toolbar sections
  */
  .tox-editor-container .tox-toolbar,
  .tox-editor-container .tox-toolbar-overlord {
    background-image: none;
    margin-bottom: 5px;
  }
  .tox-editor-container .tox-toolbar__primary {
    background-image: none;
  }

/* tinymce 5.3 picked up a border since 5.0 */
  .tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
    border-style: none;
  }

.tox .tox-toolbar .tox-toolbar__group,
  .tox .tox-toolbar-overlord .tox-toolbar__group,
  .tox-toolbar__overflow .tox-toolbar__group,
  .tox:not([dir='rtl']) .tox-toolbar__group:not(:last-of-type),
  .tox[dir='rtl'] .tox-toolbar__group:not(:last-of-type) {
    border-style: none;
  }
  .tox-toolbar .tox-toolbar__group::after, /* regular toolbar */
  .tox-toolbar-overlord .tox-toolbar__group::after, /* wrapping toolbar */
  .tox-toolbar__overflow .tox-toolbar__group::after, /* overflow toolbar */
  .tox-tinymce-aux .tox-toolbar .tox-toolbar__group::after {
    /* popup toolbar */
    content: '';
    display: inline-block;
    box-sizing: border-box;
    border-inline-end: 1px solid var(--canvasBorderColor);
    width: 8px;
    height: 24px;
  }
  .tox-toolbar .tox-toolbar__group:last-child::after,
  .tox-toolbar-overlord .tox-toolbar__group:last-child::after,
  .tox-toolbar__overflow .tox-toolbar__group:last-child::after,
  .tox-tinymce-aux .tox-toolbar .tox-toolbar__group:last-child::after {
    border-inline-end-width: 0;
    padding-inline-start: 0;
    width: 0;
  }

.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
    width: auto;
    padding-inline-end: 0;
  }

.tox .tox-tbtn {
    box-sizing: border-box;
  }

.tox .tox-tbtn,
  .tox .tox-split-button,
  .tox .tox-tbtn--select {
    border-style: none;
    margin: 2px 2px 3px;
  }

.tox .tox-split-button .tox-tbtn {
    margin-inline-end: 0;
  }
  .tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
    margin-inline-start: 0;
  }

.tox .tox-edit-area.active,
  .tox .tox-edit-area.active iframe {
    border-color: var(--canvasFocusBorderColor);
  }

.tox .tox-split-button .tox-tbtn {
    margin-inline-end: 0;
  }
  .tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
    margin-inline-start: -6px;
    background-color: var(--canvasBackgroundColor);

/* Increases touch-target width of split-button dropdowns for MAT-602 */
    width: 30px;
  }

.tox .tox-split-button:hover {
    box-shadow: none;
  }

.tox .tox-split-button:hover .tox-split-button__chevron {
    background: var(--canvasBackgroundColor);
    color: var(--canvasButtonColor);
    box-shadow: none;
  }

.tox .tox-tbtn:hover.tox-split-button__chevron,
  .tox .tox-tbtn:focus.tox-split-button__chevron {
    box-shadow: none;
  }

.tox .tox-toolbar__primary {
    border-width: 0;
  }

.tox-tbtn.tox-tbtn--select .tox-icon.tox-tbtn__icon-wrap {
    margin-inline-end: 4px;
  }

/* MAKE INSTUI ICONS THE SAME SIZE AS THE DEFAULT TINYMCE ONES */
  /* this is because instUI icons don't have a "height" attribute like tinymce ones do, so this will make them consistent */
  .tox .tox-icon svg:not([height]),
  .tox .tox-collection__item-icon svg:not([height]) {
    height: 16px;
  }

/* the default icon size for tinymce's large toolbar groups is 24px, so since we shrink all icons to 16px, we also need
     to shrink the padding around these large groups */
  .tox .tox-collection--toolbar-lg .tox-collection__item-icon {
    height: 30px;
    width: 30px;
  }

.tox-selectfield__icon-js svg {
    width: 10px;
    height: 10px;
  }

/* not part of tinymce, but a convenient place to add a style I need */
  [data-canvascontenttray-content]:focus {
    outline-color: var(--canvasFocusBorderColor);
  }

.tox .tox-toolbar-overlord .tox-toolbar__overflow {
    /* Remove the errant gray line below the expanded toolbar in "sliding" mode */
    background: none;
  }
}

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 skin-delta.css	CSS	22.5 KB	2023-09-24 03:39	EDIT
📄 skin.css	CSS	56.2 KB	2023-09-24 03:39	EDIT
📄 theme.js	JS	5.4 KB	2023-09-24 03:39	EDIT