studip-cke-ui.scss

@use '../mixins.scss' as *;

:root {
    --ck-color-base-foreground: var(--dark-gray-color-5);
    --ck-color-base-background: var(--white);
    --ck-color-base-border: var(--content-color-40);
    --ck-color-base-action: var(--green);
    --ck-color-base-focus: var(--base-color);
    --ck-color-base-text: #000;
    --ck-color-base-active: var(--base-color);
    --ck-color-base-active-focus: var(--base-color);
    --ck-color-base-error: var(--red);

    /* -- Buttons ------------------------------------------------------------------------------- */

    --ck-color-button-default-hover-background: var(--base-color);
    --ck-color-button-default-active-background: var(--base-color);
    --ck-color-button-default-active-shadow: transparent;
    --ck-color-button-on-background: var(--base-color);
    --ck-color-button-on-hover-background: var(--base-color);
    --ck-color-button-on-active-background: var(--base-color);
    --ck-color-button-on-active-shadow: transparent;
    --ck-color-button-action-background: var(--white);
    --ck-color-switch-button-on-background: var(--base-color);
    --ck-color-switch-button-on-hover-background: var(--base-color);
    --ck-color-split-button-hover-border: transparent;
    --ck-color-split-button-hover-background: transparent;

    /* -- Generic colors ------------------------------------------------------------------------ */

    --ck-color-focus-border: var(--base-color);
    --ck-color-text: var(--ck-color-base-text);


    /* -- Link -------------------------------------------------------------------------------- */

    --ck-color-link-default: var(--base-color);
    --ck-color-link-selected-background: var(--base-color);
    --ck-color-link-fake-selection: var(--base-color);

    /* disable border radius*/

    --ck-border-radius: 0;

    /* disable shadows */

    --ck-inner-shadow: unset;
    --ck-drop-shadow: unset;
    --ck-drop-shadow-active: unset;
    --ck-focus-outer-shadow-geometry: 0;

    /* fonts */

    --ck-font-size-base: 14px;
    --ck-font-face: "Lato", sans-serif;

    /* tooltip */
    --ck-tooltip-arrow-size: 8px;
    --ck-color-tooltip-background: var(--dark-gray-color-5);

    /* z-index */
    --ck-z-modal: 1003;

    /* tooltips */
    --ck-color-tooltip-text: var(--color-text);
}

.ck.ck-editor {
    margin-top: 0.5ex;
}
.ck.ck-icon, .ck.ck-icon * {
    color: var(--base-color);
}
.ck.ck-button.ck-on .ck.ck-icon,
.ck.ck-button.ck-on .ck.ck-icon *,
.ck.ck-button:not(.ck-dropdown__button.ck-button_with-text):not(.ck-disabled):hover .ck.ck-icon,
.ck.ck-button:not(.ck-dropdown__button.ck-button_with-text):not(.ck-disabled):hover .ck.ck-icon * {
    color: var(--white);
}

/* buttons */
.ck.ck-button, a.ck.ck-button {
    font-size: 12px;
    color: var(--base-color);
}

.ck.ck-button:hover {
    cursor: pointer;
}

.ck.ck-button.ck-off.ck-button-save {
    @include background-icon(accept, clickable, 24);
    background-position: center;
    background-repeat: no-repeat;
}

.ck.ck-button.ck-off.ck-button-cancel {
    @include background-icon(decline, clickable, 24);
    background-position: center;
    background-repeat: no-repeat;
}

.ck.ck-button.ck-off.ck-button_with-text:not(.ck-character-grid__tile):not(.ck-source-editing-button) {
    background-position: 5px 50%;
    border: solid thin var(--base-color);
}

.ck-list .ck.ck-button.ck-off.ck-button_with-text:not(.ck-character-grid__tile):not(.ck-source-editing-button) {
    border: none;
}

.ck.ck-button.ck-off.ck-button_with-text:hover {
    background-color: var(--base-color);
}
.ck.ck-button.ck-button_with-text.ck-dropdown__button:not(.ck-disabled):hover {
    background-color: var(--white);
    color: var(--base-color);
}


.ck.ck-button.ck-off.ck-button_with-text.ck-disabled:hover,
.ck.ck-button.ck-off.ck-button_with-text.ck-character-grid__tile:hover {
    background: transparent;
    color: var(--black);
}

.ck.ck-button.ck-off.ck-button_with-text:not(.ck-disabled) .ck.ck-button__label {
    color: var(--base-color);
}

.ck.ck-button.ck-on.ck-button_with-text:not(.ck-disabled):not(.ck-switchbutton):not(.ck-dropdown__button) .ck.ck-button__label,
.ck.ck-button.ck-off.ck-button_with-text:not(.ck-disabled):not(.ck-dropdown__button):not(.ck-character-grid__tile):hover .ck.ck-button__label {
    color: var(--white);
}

.ck.ck-button.ck-on.ck-button_with-text.ck-switchbutton {
    color: var(--base-color);
}
.ck.ck-button.ck-on.ck-button_with-text.ck-switchbutton:hover {
    color: var(--white);
}

.ck.ck-button.ck-off.ck-button-save:hover:not(.ck-disabled) {
    @include background-icon(accept, info_alt, 24);
}

.ck.ck-button.ck-off.ck-button-save.ck-disabled {
    @include background-icon(accept, inactive, 24);
}

.ck.ck-button.ck-off.ck-button-cancel:hover {
    @include background-icon(decline, info_alt, 24);
}

.ck.ck-button.ck-off.ck-button-save svg,
.ck.ck-button.ck-off.ck-button-cancel svg {
    display: none;
}

.ck.ck-button.ck-off.ck-button_with-text.ck-disabled:not(.ck-character-grid__tile):not(.ck-source-editing-button) {
    border: solid thin var(--dark-gray-color-20);
    cursor: default;
}

.ck.ck-collapsible.ck-collapsible_collapsed .ck.ck-button.ck-off.ck-button_with-text.ck-disabled:not(.ck-character-grid__tile):not(.ck-source-editing-button) {
    border: none;
}

.ck.ck-button.ck-button_with-text.ck-switchbutton {
    color: var(--base-color);
    background-color: var(--white);
}

.ck.ck-button.ck-button_with-text.ck-switchbutton,
.ck.ck-button.ck-numbered-list-properties__reversed-order.ck-button_with-text.ck-switchbutton {
    border: none !important;
}

.ck.ck-collapsible .ck.ck-button.ck-off.ck-button_with-text {
    border: none;
}

.ck.ck-collapsible.ck-collapsible_collapsed .ck.ck-button.ck-button_with-text:hover .ck.ck-button__label,
.ck.ck-collapsible .ck.ck-button.ck-on.ck-button_with-text:not(.ck-disabled):not(.ck-switchbutton):not(.ck-dropdown__button) .ck.ck-button__label {
    color: var(--base-color);
}

.ck.ck-collapsible.ck-collapsible_collapsed .ck.ck-button.ck-disabled.ck-button_with-text:hover .ck.ck-button__label {
    color: var(--black);
}

.ck.ck-collapsible .ck.ck-icon.ck-button__icon *,
.ck.ck-collapsible .ck.ck-button:hover .ck.ck-icon.ck-button__icon *,
.ck.ck-collapsible .ck.ck-button.ck-on .ck.ck-icon.ck-button__icon *  {
    color: var(--base-color);
}



.ck.ck-button.ck-button_with-text.ck-switchbutton.ck-on:hover,
.ck.ck-button.ck-button_with-text.ck-switchbutton:hover {
    background-color: var(--white);

}
.ck.ck-button.ck-button_with-text.ck-switchbutton.ck-on:hover span,
.ck.ck-button.ck-button_with-text.ck-switchbutton:hover span {
    color: var(--active-color) !important;
}

.ck.ck-button.ck-disabled .ck-button__icon, a.ck.ck-button.ck-disabled .ck-button__icon {
    opacity: unset;
    cursor: default;
    filter: hue-rotate(350deg) saturate(8.7%) brightness(177.3%);
}

.ck .ck-button .ck-disabled .ck-off .ck-button_with-text, .ck .ck-button .ck-disabled .ck-off .ck-button_with-text:hover {
    display: none;
}

.ck.ck-button.ck-source-editing-button .ck.ck-button__label {
    display: none;
}

/* links */
.ck .ck-fake-link-selection,
.ck .ck-link_selected {
    color: var(--white);
}

/* input */
.ck.ck-labeled-field-view.ck-labeled-field-view_focused .ck.ck-label {
    display: none;
}

.ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label {
    min-width: 250px;
    text-align: left;
}

/* math */
.ck.ck-math-form {
    padding: var(--ck-spacing-large);
}
.ck.ck-math-form .ck-button-display-toggle {
    display: none;
}

/* blockquote */
.ck-content blockquote {
    border-left: 3px solid var(--brand-color-lighter);
    padding: 5px 5px 5px 8px;
    margin: 8px 8px 8px 0;
    background-color: rgba(0, 0, 0, 0.05);
    font-style: unset;
}

/* hr */
.ck-content hr {
    margin: 7px 0;
    height: 0;
    background: initial;
    border: 1px solid var(--dark-gray-color-60);
}

/* table */
.ck-content .table {
    margin: 0.9em auto;
}
.ck-content .table {
    margin: 0.9em auto;

    &:not([style]) {
        margin-inline-start: 0;
    }
}

/* StudipWikiLink plugin */
.ck.ck-studip-wiki-link-form {
    max-width: 100%;
    width: 400px;
}

.ck.ck-studip-wiki-link-form fieldset {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: start;
    align-content: stretch;
    padding: var(--ck-spacing-large);
    border: 0;
    margin: 0;

}
.ck.ck-studip-wiki-link-form fieldset > * + * {
    margin-left: var(--ck-spacing-standard);
}

.ck.ck-studip-wiki-link-form fieldset .ck-button {
    flex: 0 0 auto;
    padding-left: var(--ck-spacing-large);
    padding-right: var(--ck-spacing-large);
}

.ck.ck-studip-wiki-link-form fieldset .ck-labeled-field-view {
    flex: 1 1 auto;
}

.ck.ck-studip-wiki-link-form fieldset .ck-labeled-field-view .ck-input {
    width: 100%;
    min-width: 50px;
}

/* table inserter */
.ck.ck-insert-table-dropdown-grid-box.ck-on {
    background: var(--base-color-20);
}

/* tooltips */

.ck.ck-balloon-panel.ck-tooltip {
    background-color: transparent;
}

.ck.ck-tooltip .ck.ck-tooltip__text {
    background-color: var(--dark-gray-color-5);
    border: 1px solid var(--dark-gray-color-30);
    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.5);
    font-size: 14px;
    margin-bottom: 8px;
    padding: 12px;
    text-align: left;
    text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
    white-space: normal;
    z-index: 10000;
    word-wrap: break-word;
    color: var(--black);
    top: 12px;
    position: relative;
}

.ck.ck-tooltip__text::after {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: 8px solid rgba(245,246,246,0);
    border-bottom-color: var(--dark-gray-color-5);
    bottom: 100%;
    right: 50%;
    margin-right: -8px;
    top: -16px;
}

.ck.ck-tooltip__text::before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: 9px solid rgba(197,199,202,0);
    border-bottom-color: var(--dark-gray-color-30);
    bottom: 100%;
    right: 50%;
    margin-right: -9px;
    top: -19px;
}

/* search and replace */
.ck.ck-find-and-replace-form fieldset .ck-labeled-field-view .ck-input {
    margin-top: 0 !important; /* overwrite form css in dialogs*/
    max-height: var(--ck-ui-component-min-height);
}

/* editor */
$editor-min-height: 8em;

.ck-source-editing-area {
    min-height: calc($editor-min-height + 2px);
}
.ck.ck-editor__editable_inline {
    border-color: var(--ck-color-base-border);
    cursor: text;
    min-height: $editor-min-height;
}

form.default label:not(.undecorated):not(.ck-voice-label) .ck-source-editing-area textarea {
    margin-top: 0;
}

form.default .ck-source-editing-area textarea {
    max-width: unset;
}

/* forum fixes */
#forum .ck-source-editing-area textarea {
    height: 100%;
}

#forum .ck form {
    display: inherit;
}
.ck.ck-toolbar {
    background-color: var(--dark-gray-color-5);
}

.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw {
    right: -5px;
    top: calc(100% + 4px);
}

/* toolbar fix for dialogs */
.studip-dialog {
    .ck-editor {
        .ck-editor__editable_inline {
            height: 200px;
            resize: vertical;
        }
    }
}

form.default textarea:not(.size-l) + .ck-editor {
    .ck-toolbar__grouped-dropdown {
        .ck-toolbar {
            max-width: calc(48em - 2px);
        }
    }
}

/* balloon editor button*/
.ck.ck-block-toolbar-button {
    background-color: var(--dark-gray-color-5);
    border: 1px solid var(--ck-color-base-border);
    z-index: var(--ck-z-modal);
}