@ckeditor/ckeditor5-theme-lark
Version:
A bright theme for CKEditor 5.
109 lines (90 loc) • 2.65 kB
CSS
/*
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
:root {
--ck-color-image-upload-icon: hsl(0, 0%, 100%);
--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
/* Match the icon size with the linked image indicator brought by the link image feature. */
--ck-image-upload-icon-size: 20;
--ck-image-upload-icon-width: 2px;
--ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px);
}
.ck-image-upload-complete-icon {
opacity: 0;
background: var(--ck-color-image-upload-icon-background);
animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
animation-fill-mode: forwards, forwards;
animation-duration: 500ms, 500ms;
/* To make animation scalable. */
font-size: calc(1px * var(--ck-image-upload-icon-size));
/* Hide completed upload icon after 3 seconds. */
animation-delay: 0ms, 3000ms;
/*
* Use CSS math to simulate container queries.
* https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/#what-about-showing-and-hiding-things
*/
overflow: hidden;
width: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
height: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
/* This is check icon element made from border-width mixed with animations. */
&::after {
/* Because of border transformation we need to "hard code" left position. */
left: 25%;
top: 50%;
opacity: 0;
height: 0;
width: 0;
transform: scaleX(-1) rotate(135deg);
transform-origin: left top;
border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
animation-name: ck-upload-complete-icon-check;
animation-duration: 500ms;
animation-delay: 500ms;
animation-fill-mode: forwards;
/* #1095. While reset is not providing proper box-sizing for pseudoelements, we need to handle it. */
box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
animation-duration: 0ms;
&::after {
animation: none;
opacity: 1;
width: 0.3em;
height: 0.45em;
}
}
}
@keyframes ck-upload-complete-icon-show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes ck-upload-complete-icon-hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes ck-upload-complete-icon-check {
0% {
opacity: 1;
width: 0;
height: 0;
}
33% {
width: 0.3em;
height: 0;
}
100% {
opacity: 1;
width: 0.3em;
height: 0.45em;
}
}