@ckeditor/ckeditor5-link
Version:
Link feature for CKEditor 5.
214 lines (175 loc) • 6.53 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);
}
.ck .ck-link_selected 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:1px solid #ffffff80;
height:100%;
margin-right:-1px;
}
:root{
--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);
color:var(--ck-color-link-default);
cursor:pointer;
justify-content:center;
}
a.ck.ck-button.ck-link-toolbar__preview .ck.ck-button__label{
text-overflow:ellipsis;
max-width:var(--ck-input-width);
}
a.ck.ck-button.ck-link-toolbar__preview, a.ck.ck-button.ck-link-toolbar__preview:hover, a.ck.ck-button.ck-link-toolbar__preview:focus, a.ck.ck-button.ck-link-toolbar__preview:active{
background:none;
}
a.ck.ck-button.ck-link-toolbar__preview:active{
box-shadow:none;
}
a.ck.ck-button.ck-link-toolbar__preview:hover, a.ck.ck-button.ck-link-toolbar__preview:focus{
text-decoration:underline;
}
a.ck.ck-button.ck-link-toolbar__preview.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"] :is(a.ck.ck-button.ck-link-toolbar__preview.ck-button_with-text .ck.ck-icon.ck-button__icon){
margin-right:var(--ck-spacing-tiny);
margin-left:var(--ck-spacing-small);
}
[dir="rtl"] :is(a.ck.ck-button.ck-link-toolbar__preview.ck-button_with-text .ck.ck-icon.ck-button__icon){
margin-left:var(--ck-spacing-tiny);
margin-right:var(--ck-spacing-small);
}
a.ck.ck-button.ck-link-toolbar__preview:has(.ck-icon){
padding-left:var(--ck-spacing-extra-tiny);
}
.ck.ck-link-toolbar__preview{
display:inline-block;
}
.ck.ck-link-toolbar__preview .ck-button__label{
overflow:hidden;
}
:root{
--ck-link-image-indicator-icon-size:20;
--ck-link-image-indicator-icon-is-visible:clamp(0px, 100% - 50px, 1px);
}
:is(.ck.ck-editor__editable figure.image > a, .ck.ck-editor__editable a span.image-inline):after{
content:"";
top:min(var(--ck-spacing-medium), 6%);
right:min(var(--ck-spacing-medium), 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{
--ck-link-panel-width:340px;
--ck-link-provider-list-item-text-height:calc(var(--ck-line-height-base) * 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-small));
}
@media screen and (width <= 600px){
:root{
--ck-link-panel-width:300px;
}
}
.ck.ck-form.ck-link-form{
width:var(--ck-link-panel-width);
padding-bottom:0;
}
@media screen and (width <= 600px){
.ck.ck-form.ck-link-form.ck-responsive-form .ck-labeled-field-view{
margin:0;
}
}
.ck.ck-form.ck-link-form .ck-link-form__providers-list{
border-top:1px solid var(--ck-color-base-border);
flex-direction:column;
display:flex;
}
.ck.ck-form.ck-link-form .ck-link-form__providers-list:has(.ck-list__item:nth-child(n+5)){
max-height:calc(var(--ck-link-provider-list-item-height) * 4 + var(--ck-spacing-large) + 1px);
overflow:auto;
}
.ck.ck-form.ck-link-form .ck-link-form__providers-list .ck-link__button{
padding:var(--ck-spacing-small) var(--ck-spacing-large);
border-radius:0;
}
.ck.ck-form.ck-link-form .ck-link-form__providers-list .ck-link__button > .ck-button__label{
text-overflow:ellipsis;
flex-grow:1;
overflow:hidden;
}
.ck.ck-link-form .ck-link__items:empty{
display:none;
}
:root{
--ck-link-properties-width:340px;
}
@media screen and (width <= 600px){
:root{
--ck-link-properties-width:300px;
}
}
.ck.ck-link-properties{
width:var(--ck-link-properties-width);
}
:root{
--ck-link-providers-width:340px;
--ck-link-list-view-max-height:240px;
--ck-link-list-view-icon-size:calc(var(--ck-icon-size) * .8);
}
@media screen and (width <= 600px){
:root{
--ck-link-providers-width:300px;
}
}
.ck.ck-link-providers{
width:var(--ck-link-providers-width);
}
.ck.ck-link-providers .ck-form__header__label{
text-overflow:ellipsis;
overflow:hidden;
}
.ck.ck-link-providers > .ck-link-providers__list{
max-height:min(var(--ck-link-list-view-max-height), 40vh);
overflow:hidden auto;
}
.ck.ck-link-providers > .ck-link-providers__list .ck-button > .ck-icon{
width:var(--ck-link-list-view-icon-size);
height:var(--ck-link-list-view-icon-size);
flex-shrink:0;
}
.ck.ck-link-providers > .ck-link-providers__list .ck-button > .ck-button__label{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
.ck.ck-link-providers > .ck-link-providers__list{
overscroll-behavior:contain;
}
.ck.ck-link-providers .ck-link__empty-list-info{
padding:calc(2 * var(--ck-spacing-large)) var(--ck-spacing-medium);
text-align:center;
font-style:italic;
}