@ckeditor/ckeditor5-link
Version:
Link feature for CKEditor 5.
240 lines (199 loc) • 7.04 kB
CSS
/**
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
.ck .ck-link_selected {
background: var(--ck-color-link-selected-background);
& span.image-inline {
outline: var(--ck-widget-outline-thickness) solid var(--ck-color-link-selected-background);
}
}
.ck .ck-fake-link-selection {
background: var(--ck-color-link-fake-selection);
}
.ck .ck-fake-link-selection_collapsed {
border-right: 1px solid var(--ck-color-base-text);
outline: var(--ck-outline-fake-caret);
height: 100%;
margin-right: -1px;
}
:root, :host {
--ck-link-bookmark-icon-size: calc(var(--ck-icon-size) * .7);
}
.ck.ck-toolbar.ck-link-toolbar {
& > .ck-toolbar__items {
flex-wrap: nowrap;
}
}
a.ck.ck-button.ck-link-toolbar__preview {
padding: 0 var(--ck-spacing-medium, var(--ck-spacing-base));
color: var(--ck-color-link-default);
cursor: pointer;
flex-direction: row;
justify-content: center;
align-items: center;
display: flex;
& .ck.ck-button__label {
text-overflow: ellipsis;
max-width: var(--ck-input-width);
}
&, &:hover, &:focus, &:active {
background: none;
}
&:active {
box-shadow: none;
}
&:hover, &:focus {
text-decoration: underline;
}
&.ck-button_with-text .ck.ck-icon.ck-button__icon {
width: var(--ck-link-bookmark-icon-size);
height: var(--ck-link-bookmark-icon-size);
[dir="ltr"] & {
margin-right: var(--ck-spacing-tiny, var(--ck-spacing-xs));
margin-left: var(--ck-spacing-small, var(--ck-spacing-sm));
}
[dir="rtl"] & {
margin-left: var(--ck-spacing-tiny, var(--ck-spacing-xs));
margin-right: var(--ck-spacing-small, var(--ck-spacing-sm));
}
}
&:has(.ck-icon) {
padding-left: var(--ck-spacing-extra-tiny, var(--ck-spacing-2xs));
}
}
.ck.ck-link-toolbar__preview {
display: inline-block;
& .ck-button__label {
overflow: hidden;
}
}
:root, :host {
--ck-link-image-indicator-icon-size: 20;
--ck-link-image-indicator-icon-is-visible: clamp(0px, 100% - 50px, 1px);
}
.ck.ck-editor__editable {
& figure.image > a, & a span.image-inline {
&:after {
content: "";
top: min(var(--ck-spacing-medium, var(--ck-spacing-base)), 6%);
right: min(var(--ck-spacing-medium, var(--ck-spacing-base)), 6%);
width: calc(var(--ck-link-image-indicator-icon-is-visible) * var(--ck-link-image-indicator-icon-size));
height: calc(var(--ck-link-image-indicator-icon-is-visible) * var(--ck-link-image-indicator-icon-size));
background-color: #0006;
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTExLjA3NyAxNSAuOTkxLTEuNDE2YS43NS43NSAwIDEgMSAxLjIyOS44NmwtMS4xNDggMS42NGEuNzQ4Ljc0OCAwIDAgMS0uMjE3LjIwNiA1LjI1MSA1LjI1MSAwIDAgMS04LjUwMy01Ljk1NS43NDEuNzQxIDAgMCAxIC4xMi0uMjc0bDEuMTQ3LTEuNjM5YS43NS43NSAwIDEgMSAxLjIyOC44Nkw0LjkzMyAxMC43bC4wMDYuMDAzYTMuNzUgMy43NSAwIDAgMCA2LjEzMiA0LjI5NGwuMDA2LjAwNHptNS40OTQtNS4zMzVhLjc0OC43NDggMCAwIDEtLjEyLjI3NGwtMS4xNDcgMS42MzlhLjc1Ljc1IDAgMSAxLTEuMjI4LS44NmwuODYtMS4yM2EzLjc1IDMuNzUgMCAwIDAtNi4xNDQtNC4zMDFsLS44NiAxLjIyOWEuNzUuNzUgMCAwIDEtMS4yMjktLjg2bDEuMTQ4LTEuNjRhLjc0OC43NDggMCAwIDEgLjIxNy0uMjA2IDUuMjUxIDUuMjUxIDAgMCAxIDguNTAzIDUuOTU1em0tNC41NjMtMi41MzJhLjc1Ljc1IDAgMCAxIC4xODQgMS4wNDVsLTMuMTU1IDQuNTA1YS43NS43NSAwIDEgMS0xLjIyOS0uODZsMy4xNTUtNC41MDZhLjc1Ljc1IDAgMCAxIDEuMDQ1LS4xODR6Ii8+PC9zdmc+");
background-position: center;
background-repeat: no-repeat;
background-size: 14px;
border-radius: 100%;
display: block;
position: absolute;
overflow: hidden;
}
}
}
:root, :host {
--ck-link-panel-width: var(--ck-width-balloon-form);
--ck-link-provider-list-item-text-height: calc(var(--ck-line-height-base) * var(--ck-font-size-normal, var(--ck-font-size-base)));
--ck-link-provider-list-item-height: calc(var(--ck-link-provider-list-item-text-height) + var(--ck-spacing-small, var(--ck-spacing-sm)) + var(--ck-spacing-small, var(--ck-spacing-sm)));
--ck-link-provider-list-padding-bottom: var(--ck-spacing-padding-compact);
}
.ck.ck-form.ck-link-form {
width: var(--ck-link-panel-width);
padding-bottom: 0;
&.ck-responsive-form {
@media screen and (width <= 600px) {
& .ck-labeled-field-view {
flex-basis: 0;
margin: 0;
}
& .ck.ck-form__row.ck-form__row_with-submit {
align-items: flex-start;
gap: var(--ck-spacing-gap-comfortable) var(--ck-spacing-padding);
padding: var(--ck-form-row-padding);
padding-bottom: var(--ck-spacing-padding-comfortable);
flex-flow: wrap;
& > .ck {
margin: 0;
}
& > .ck-button-action {
flex-basis: 100%;
}
}
}
}
& .ck-link-form__providers-list {
padding-bottom: var(--ck-link-provider-list-padding-bottom);
flex-direction: column;
display: flex;
position: relative;
&:before {
content: "";
border-top: var(--ck-border-divider);
height: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
}
&:has(.ck-list__item:nth-child(n+5)) {
max-height: calc(var(--ck-link-provider-list-item-height) * 4 + var(--ck-spacing-large, var(--ck-spacing-lg)) + 1px);
overflow: auto;
}
& .ck-link__button {
padding: var(--ck-spacing-small, var(--ck-spacing-sm)) var(--ck-spacing-large, var(--ck-spacing-lg));
border-radius: var(--ck-button-border-radius);
& > .ck-button__label {
text-overflow: ellipsis;
flex-grow: 1;
overflow: hidden;
}
}
}
}
.ck.ck-link-form {
& .ck-link__items:empty {
display: none;
}
}
:root, :host {
--ck-link-properties-width: var(--ck-width-balloon-form);
}
.ck.ck-link-properties {
width: var(--ck-link-properties-width);
}
:root, :host {
--ck-link-providers-width: var(--ck-width-balloon-form);
--ck-link-list-view-max-height: 240px;
--ck-link-list-view-icon-size: calc(var(--ck-icon-size) * .8);
}
.ck.ck-link-providers {
width: var(--ck-link-providers-width);
& .ck-form__header__label {
text-overflow: ellipsis;
overflow: hidden;
}
& > .ck-link-providers__list {
max-height: min(var(--ck-link-list-view-max-height), 40vh);
overflow: hidden auto;
& .ck-button {
& > .ck-icon {
width: var(--ck-link-list-view-icon-size);
height: var(--ck-link-list-view-icon-size);
flex-shrink: 0;
}
& > .ck-button__label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
overscroll-behavior: contain;
}
& .ck-link__empty-list-info {
padding: calc(2 * var(--ck-spacing-large, var(--ck-spacing-lg))) var(--ck-spacing-medium, var(--ck-spacing-base));
text-align: center;
font-style: italic;
}
}
/*# sourceMappingURL=index.css.map */