@ckeditor/ckeditor5-theme-lark 0.0.0-internal-20241017.0

package/theme/ckeditor5-image/imageuploadicon.css

@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+: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;
+	}
+}

package/theme/ckeditor5-image/imageuploadloader.css

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-color-upload-placeholder-loader: hsl(0, 0%, 70%);
+	--ck-upload-placeholder-loader-size: 32px;
+	--ck-upload-placeholder-image-aspect-ratio: 2.8;
+}
+
+.ck .ck-image-upload-placeholder {
+	/* We need to control the full width of the SVG gray background. */
+	width: 100%;
+	margin: 0;
+
+	&.image-inline {
+		width: calc( 2 * var(--ck-upload-placeholder-loader-size) * var(--ck-upload-placeholder-image-aspect-ratio) );
+	}
+
+	& img {
+		/*
+		 * This is an arbitrary aspect for a 1x1 px GIF to display to the user. Not too tall, not too short.
+		 * There's nothing special about this number except that it should make the image placeholder look like
+		 * a real image during this short period after the upload started and before the image was read from the
+		 * file system (and a rich preview was loaded).
+		 */
+		aspect-ratio: var(--ck-upload-placeholder-image-aspect-ratio);
+	}
+}
+
+.ck .ck-upload-placeholder-loader {
+	width: 100%;
+	height: 100%;
+
+	&::before {
+		width: var(--ck-upload-placeholder-loader-size);
+		height: var(--ck-upload-placeholder-loader-size);
+		border-radius: 50%;
+		border-top: 3px solid var(--ck-color-upload-placeholder-loader);
+		border-right: 2px solid transparent;
+		animation: ck-upload-placeholder-loader 1s linear infinite;
+	}
+}
+
+@keyframes ck-upload-placeholder-loader {
+	to {
+		transform: rotate( 360deg );
+	}
+}

package/theme/ckeditor5-image/imageuploadprogress.css

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-editor__editable {
+	& .image,
+	& .image-inline {
+		/* Showing animation. */
+		&.ck-appear {
+			animation: fadeIn 700ms;
+
+			@media (prefers-reduced-motion: reduce) {
+				opacity: 1;
+				animation: none;
+			}
+		}
+	}
+
+	/* Upload progress bar. */
+	& .image .ck-progress-bar,
+	& .image-inline .ck-progress-bar {
+		height: 2px;
+		width: 0;
+		background: var(--ck-color-upload-bar-background);
+		transition: width 100ms;
+	}
+}
+
+@keyframes fadeIn {
+	from { opacity: 0; }
+	to   { opacity: 1; }
+}

package/theme/ckeditor5-link/link.css

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* Class added to span element surrounding currently selected link. */
+.ck .ck-link_selected {
+	background: var(--ck-color-link-selected-background);
+
+	/* Give linked inline images some outline to let the user know they are also part of the link. */
+	& span.image-inline {
+		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-link-selected-background);
+	}
+}
+
+/*
+ * Classes used by the "fake visual selection" displayed in the content when an input
+ * in the link UI has focus (the browser does not render the native selection in this state).
+ */
+.ck .ck-fake-link-selection {
+	background: var(--ck-color-link-fake-selection);
+}
+
+/* A collapsed fake visual selection. */
+.ck .ck-fake-link-selection_collapsed {
+	height: 100%;
+	border-right: 1px solid var(--ck-color-base-text);
+	margin-right: -1px;
+	outline: solid 1px hsla(0, 0%, 100%, .5);
+}

package/theme/ckeditor5-link/linkactions.css

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+@import "../mixins/_focus.css";
+@import "../mixins/_shadow.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+.ck.ck-link-actions {
+	& .ck-button.ck-link-actions__preview {
+		padding-left: 0;
+		padding-right: 0;
+
+		& .ck-button__label {
+			padding: 0 var(--ck-spacing-medium);
+			color: var(--ck-color-link-default);
+			text-overflow: ellipsis;
+			cursor: pointer;
+
+			/* Match the box model of the link editor form's input so the balloon
+			does not change width when moving between actions and the form. */
+			max-width: var(--ck-input-width);
+			min-width: 3em;
+			text-align: center;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+
+		&,
+		&:hover,
+		&:focus,
+		&:active {
+			background: none;
+		}
+
+		&:active {
+			box-shadow: none;
+		}
+
+		&:focus {
+			& .ck-button__label {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	@mixin ck-dir ltr {
+		& .ck-button:not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& .ck-button:not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-media-phone {
+		& .ck-button.ck-link-actions__preview {
+			margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
+
+			& .ck-button__label {
+				min-width: 0;
+				max-width: 100%;
+			}
+		}
+
+		& .ck-button:not(.ck-link-actions__preview) {
+			@mixin ck-dir ltr {
+				margin-left: 0;
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+			}
+		}
+	}
+}

package/theme/ckeditor5-link/linkform.css

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+/*
+ * Style link form differently when manual decorators are available.
+ * See: https://github.com/ckeditor/ckeditor5-link/issues/186.
+ */
+.ck.ck-link-form_layout-vertical {
+	padding: 0;
+	min-width: var(--ck-input-width);
+
+	& .ck-labeled-field-view {
+		margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small);
+
+		& .ck-input-text {
+			min-width: 0;
+			width: 100%;
+		}
+	}
+
+	& > .ck-button {
+		padding: var(--ck-spacing-standard);
+		margin: 0;
+		width: 50%;
+		border-radius: 0;
+
+		&:not(:focus) {
+			border-top: 1px solid var(--ck-color-base-border);
+		}
+
+		@mixin ck-dir ltr {
+			margin-left: 0;
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: 0;
+
+			&:last-of-type {
+				border-right: 1px solid var(--ck-color-base-border);
+			}
+		}
+	}
+
+	/* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
+	& .ck.ck-list {
+		margin: 0 var(--ck-spacing-large);
+
+		& .ck-button.ck-switchbutton {
+			padding: 0;
+			width: 100%;
+
+			&:hover {
+				background: none;
+			}
+		}
+	}
+}

package/theme/ckeditor5-link/linkimage.css

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	/* Match the icon size with the upload indicator brought by the image upload feature. */
+	--ck-link-image-indicator-icon-size: 20;
+	--ck-link-image-indicator-icon-is-visible: clamp(0px, 100% - 50px, 1px);
+}
+
+.ck.ck-editor__editable {
+	/* Linked image indicator */
+	& figure.image > a,
+	& a span.image-inline {
+		&::after {
+			content: "";
+
+			/*
+			 * Smaller images should have the icon closer to the border.
+			 * Match the icon position with the upload indicator brought by the image upload feature.
+			 */
+			top: min(var(--ck-spacing-medium), 6%);
+			right: min(var(--ck-spacing-medium), 6%);
+
+			background-color: hsla(0, 0%, 0%, .4);
+			background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTExLjA3NyAxNSAuOTkxLTEuNDE2YS43NS43NSAwIDEgMSAxLjIyOS44NmwtMS4xNDggMS42NGEuNzQ4Ljc0OCAwIDAgMS0uMjE3LjIwNiA1LjI1MSA1LjI1MSAwIDAgMS04LjUwMy01Ljk1NS43NDEuNzQxIDAgMCAxIC4xMi0uMjc0bDEuMTQ3LTEuNjM5YS43NS43NSAwIDEgMSAxLjIyOC44Nkw0LjkzMyAxMC43bC4wMDYuMDAzYTMuNzUgMy43NSAwIDAgMCA2LjEzMiA0LjI5NGwuMDA2LjAwNHptNS40OTQtNS4zMzVhLjc0OC43NDggMCAwIDEtLjEyLjI3NGwtMS4xNDcgMS42MzlhLjc1Ljc1IDAgMSAxLTEuMjI4LS44NmwuODYtMS4yM2EzLjc1IDMuNzUgMCAwIDAtNi4xNDQtNC4zMDFsLS44NiAxLjIyOWEuNzUuNzUgMCAwIDEtMS4yMjktLjg2bDEuMTQ4LTEuNjRhLjc0OC43NDggMCAwIDEgLjIxNy0uMjA2IDUuMjUxIDUuMjUxIDAgMCAxIDguNTAzIDUuOTU1em0tNC41NjMtMi41MzJhLjc1Ljc1IDAgMCAxIC4xODQgMS4wNDVsLTMuMTU1IDQuNTA1YS43NS43NSAwIDEgMS0xLjIyOS0uODZsMy4xNTUtNC41MDZhLjc1Ljc1IDAgMCAxIDEuMDQ1LS4xODR6Ii8+PC9zdmc+");
+			background-size: 14px;
+			background-repeat: no-repeat;
+			background-position: center;
+			border-radius: 100%;
+
+			/*
+			* 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-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));
+		}
+	}
+}
+

package/theme/ckeditor5-list/listproperties.css

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-list-properties {
+	/* When there are no list styles and there is no collapsible. */
+	&.ck-list-properties_without-styles {
+		padding: var(--ck-spacing-large);
+
+		& > * {
+			min-width: 14em;
+
+			& + * {
+				margin-top: var(--ck-spacing-standard);
+			}
+		}
+	}
+
+	/*
+	 * When the numbered list property fields (start at, reversed) should be displayed,
+	 * more horizontal space is needed. Reconfigure the style grid to create that space.
+	 */
+	&.ck-list-properties_with-numbered-properties {
+		& > .ck-list-styles-list {
+			grid-template-columns: repeat( 4, auto );
+		}
+
+		/* When list styles are rendered and property fields are in a collapsible. */
+		& > .ck-collapsible {
+			border-top: 1px solid var(--ck-color-base-border);
+
+			& > .ck-collapsible__children {
+				& > * {
+					width: 100%;
+
+					& + * {
+						margin-top: var(--ck-spacing-standard);
+					}
+				}
+			}
+		}
+	}
+
+	& .ck.ck-numbered-list-properties__start-index .ck-input {
+		min-width: auto;
+		width: 100%;
+	}
+
+	& .ck.ck-numbered-list-properties__reversed-order {
+		background: transparent;
+		padding-left: 0;
+		padding-right: 0;
+		margin-bottom: calc(-1 * var(--ck-spacing-tiny));
+
+		&:active, &:hover {
+			box-shadow: none;
+			border-color: transparent;
+			background: none;
+		}
+	}
+}

package/theme/ckeditor5-list/liststyles.css

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-list-style-button-size: 44px;
+}
+
+.ck.ck-list-styles-list {
+	grid-template-columns: repeat( 3, auto );
+	row-gap: var(--ck-spacing-medium);
+	column-gap: var(--ck-spacing-medium);
+	padding: var(--ck-spacing-large);
+
+	& .ck-button {
+		/* Make the button look like a thumbnail (the icon "takes it all"). */
+		width: var(--ck-list-style-button-size);
+		height: var(--ck-list-style-button-size);
+		padding: 0;
+
+		/*
+		 * Buttons are aligned by the grid so disable default button margins to not collide with the
+		 * gaps in the grid.
+		 */
+		margin: 0;
+
+		/*
+		 * Make sure the button border (which is displayed on focus, BTW) does not steal pixels
+		 * from the button dimensions and, as a result, decrease the size of the icon
+		 * (which becomes blurry as it scales down).
+		 */
+		box-sizing: content-box;
+
+		& .ck-icon {
+			width: var(--ck-list-style-button-size);
+			height: var(--ck-list-style-button-size);
+		}
+	}
+}

package/theme/ckeditor5-media-embed/mediaembedediting.css

@@ -0,0 +1,109 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-media-embed-placeholder-icon-size: 3em;
+
+	--ck-color-media-embed-placeholder-url-text: hsl(0, 0%, 46%);
+	--ck-color-media-embed-placeholder-url-text-hover: var(--ck-color-base-text);
+}
+
+.ck-media__wrapper {
+	margin: 0 auto;
+
+	& .ck-media__placeholder {
+		padding: calc( 3 * var(--ck-spacing-standard) );
+		background: var(--ck-color-base-foreground);
+
+		& .ck-media__placeholder__icon {
+			min-width: var(--ck-media-embed-placeholder-icon-size);
+			height: var(--ck-media-embed-placeholder-icon-size);
+			margin-bottom: var(--ck-spacing-large);
+			background-position: center;
+			background-size: cover;
+
+			& .ck-icon {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		& .ck-media__placeholder__url__text {
+			color: var(--ck-color-media-embed-placeholder-url-text);
+			white-space: nowrap;
+			text-align: center;
+			font-style: italic;
+			text-overflow: ellipsis;
+
+			&:hover {
+				color: var(--ck-color-media-embed-placeholder-url-text-hover);
+				cursor: pointer;
+				text-decoration: underline;
+			}
+		}
+	}
+
+	&[data-oembed-url*="open.spotify.com"] {
+		max-width: 300px;
+		max-height: 380px;
+	}
+
+	&[data-oembed-url*="google.com/maps"] .ck-media__placeholder__icon,
+	&[data-oembed-url*="goo.gl/maps"] .ck-media__placeholder__icon,
+	&[data-oembed-url*="maps.google.com"] .ck-media__placeholder__icon,
+	&[data-oembed-url*="maps.app.goo.gl"] .ck-media__placeholder__icon {
+		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAuMzc4IiBoZWlnaHQ9IjI1NC4xNjciIHZpZXdCb3g9IjAgMCA2Ni4yNDYgNjcuMjQ4Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcyLjUzMSAtMjE4LjQ1NSkgc2NhbGUoLjk4MDEyKSI+PHJlY3Qgcnk9IjUuMjM4IiByeD0iNS4yMzgiIHk9IjIzMS4zOTkiIHg9IjE3Ni4wMzEiIGhlaWdodD0iNjAuMDk5IiB3aWR0aD0iNjAuMDk5IiBmaWxsPSIjMzRhNjY4IiBwYWludC1vcmRlcj0ibWFya2VycyBzdHJva2UgZmlsbCIvPjxwYXRoIGQ9Ik0yMDYuNDc3IDI2MC45bC0yOC45ODcgMjguOTg3YTUuMjE4IDUuMjE4IDAgMCAwIDMuNzggMS42MWg0OS42MjFjMS42OTQgMCAzLjE5LS43OTggNC4xNDYtMi4wMzd6IiBmaWxsPSIjNWM4OGM1Ii8+PHBhdGggZD0iTTIyNi43NDIgMjIyLjk4OGMtOS4yNjYgMC0xNi43NzcgNy4xNy0xNi43NzcgMTYuMDE0LjAwNyAyLjc2Mi42NjMgNS40NzQgMi4wOTMgNy44NzUuNDMuNzAzLjgzIDEuNDA4IDEuMTkgMi4xMDcuMzMzLjUwMi42NSAxLjAwNS45NSAxLjUwOC4zNDMuNDc3LjY3My45NTcuOTg4IDEuNDQgMS4zMSAxLjc2OSAyLjUgMy41MDIgMy42MzcgNS4xNjguNzkzIDEuMjc1IDEuNjgzIDIuNjQgMi40NjYgMy45OSAyLjM2MyA0LjA5NCA0LjAwNyA4LjA5MiA0LjYgMTMuOTE0di4wMTJjLjE4Mi40MTIuNTE2LjY2Ni44NzkuNjY3LjQwMy0uMDAxLjc2OC0uMzE0LjkzLS43OTkuNjAzLTUuNzU2IDIuMjM4LTkuNzI5IDQuNTg1LTEzLjc5NC43ODItMS4zNSAxLjY3My0yLjcxNSAyLjQ2NS0zLjk5IDEuMTM3LTEuNjY2IDIuMzI4LTMuNCAzLjYzOC01LjE2OS4zMTUtLjQ4Mi42NDUtLjk2Mi45ODgtMS40MzkuMy0uNTAzLjYxNy0xLjAwNi45NS0xLjUwOC4zNTktLjcuNzYtMS40MDQgMS4xOS0yLjEwNyAxLjQyNi0yLjQwMiAyLTUuMTE0IDIuMDA0LTcuODc1IDAtOC44NDQtNy41MTEtMTYuMDE0LTE2Ljc3Ni0xNi4wMTR6IiBmaWxsPSIjZGQ0YjNlIiBwYWludC1vcmRlcj0ibWFya2VycyBzdHJva2UgZmlsbCIvPjxlbGxpcHNlIHJ5PSI1LjU2NCIgcng9IjUuODI4IiBjeT0iMjM5LjAwMiIgY3g9IjIyNi43NDIiIGZpbGw9IiM4MDJkMjciIHBhaW50LW9yZGVyPSJtYXJrZXJzIHN0cm9rZSBmaWxsIi8+PHBhdGggZD0iTTE5MC4zMDEgMjM3LjI4M2MtNC42NyAwLTguNDU3IDMuODUzLTguNDU3IDguNjA2czMuNzg2IDguNjA3IDguNDU3IDguNjA3YzMuMDQzIDAgNC44MDYtLjk1OCA2LjMzNy0yLjUxNiAxLjUzLTEuNTU3IDIuMDg3LTMuOTEzIDIuMDg3LTYuMjkgMC0uMzYyLS4wMjMtLjcyMi0uMDY0LTEuMDc5aC04LjI1N3YzLjA0M2g0Ljg1Yy0uMTk3Ljc1OS0uNTMxIDEuNDUtMS4wNTggMS45ODYtLjk0Mi45NTgtMi4wMjggMS41NDgtMy45MDEgMS41NDgtMi44NzYgMC01LjIwOC0yLjM3Mi01LjIwOC01LjI5OSAwLTIuOTI2IDIuMzMyLTUuMjk5IDUuMjA4LTUuMjk5IDEuMzk5IDAgMi42MTguNDA3IDMuNTg0IDEuMjkzbDIuMzgxLTIuMzhjMC0uMDAyLS4wMDMtLjAwNC0uMDA0LS4wMDUtMS41ODgtMS41MjQtMy42Mi0yLjIxNS01Ljk1NS0yLjIxNXptNC40MyA1LjY2bC4wMDMuMDA2di0uMDAzeiIgZmlsbD0iI2ZmZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJNMjE1LjE4NCAyNTEuOTI5bC03Ljk4IDcuOTc5IDI4LjQ3NyAyOC40NzVjLjI4Ny0uNjQ5LjQ0OS0xLjM2Ni40NDktMi4xMjN2LTMxLjE2NWMtLjQ2OS42NzUtLjkzNCAxLjM0OS0xLjM4MiAyLjAwNS0uNzkyIDEuMjc1LTEuNjgyIDIuNjQtMi40NjUgMy45OS0yLjM0NyA0LjA2NS0zLjk4MiA4LjAzOC00LjU4NSAxMy43OTQtLjE2Mi40ODUtLjUyNy43OTgtLjkzLjc5OS0uMzYzLS4wMDEtLjY5Ny0uMjU1LS44NzktLjY2N3YtLjAxMmMtLjU5My01LjgyMi0yLjIzNy05LjgyLTQuNi0xMy45MTQtLjc4My0xLjM1LTEuNjczLTIuNzE1LTIuNDY2LTMuOTktMS4xMzctMS42NjYtMi4zMjctMy40LTMuNjM3LTUuMTY5bC0uMDAyLS4wMDN6IiBmaWxsPSIjYzNjM2MzIi8+PHBhdGggZD0iTTIxMi45ODMgMjQ4LjQ5NWwtMzYuOTUyIDM2Ljk1M3YuODEyYTUuMjI3IDUuMjI3IDAgMCAwIDUuMjM4IDUuMjM4aDEuMDE1bDM1LjY2Ni0zNS42NjZhMTM2LjI3NSAxMzYuMjc1IDAgMCAwLTIuNzY0LTMuOSAzNy41NzUgMzcuNTc1IDAgMCAwLS45ODktMS40NGMtLjI5OS0uNTAzLS42MTYtMS4wMDYtLjk1LTEuNTA4LS4wODMtLjE2Mi0uMTc2LS4zMjYtLjI2NC0uNDg5eiIgZmlsbD0iI2ZkZGM0ZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJNMjExLjk5OCAyNjEuMDgzbC02LjE1MiA2LjE1MSAyNC4yNjQgMjQuMjY0aC43ODFhNS4yMjcgNS4yMjcgMCAwIDAgNS4yMzktNS4yMzh2LTEuMDQ1eiIgZmlsbD0iI2ZmZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48L2c+PC9zdmc+);
+	}
+
+	&[data-oembed-url*="facebook.com"] .ck-media__placeholder {
+		background: hsl(220, 46%, 48%);
+
+		& .ck-media__placeholder__icon {
+			background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMDI0cHgiIGhlaWdodD0iMTAyNHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPkZpbGwgMTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImZMb2dvX1doaXRlIiBmaWxsPSIjRkZGRkZFIj4gICAgICAgICAgICA8cGF0aCBkPSJNOTY3LjQ4NCwwIEw1Ni41MTcsMCBDMjUuMzA0LDAgMCwyNS4zMDQgMCw1Ni41MTcgTDAsOTY3LjQ4MyBDMCw5OTguNjk0IDI1LjI5NywxMDI0IDU2LjUyMiwxMDI0IEw1NDcsMTAyNCBMNTQ3LDYyOCBMNDE0LDYyOCBMNDE0LDQ3MyBMNTQ3LDQ3MyBMNTQ3LDM1OS4wMjkgQzU0NywyMjYuNzY3IDYyNy43NzMsMTU0Ljc0NyA3NDUuNzU2LDE1NC43NDcgQzgwMi4yNjksMTU0Ljc0NyA4NTAuODQyLDE1OC45NTUgODY1LDE2MC44MzYgTDg2NSwyOTkgTDc4My4zODQsMjk5LjAzNyBDNzE5LjM5MSwyOTkuMDM3IDcwNywzMjkuNTI5IDcwNywzNzQuMjczIEw3MDcsNDczIEw4NjAuNDg3LDQ3MyBMODQwLjUwMSw2MjggTDcwNyw2MjggTDcwNywxMDI0IEw5NjcuNDg0LDEwMjQgQzk5OC42OTcsMTAyNCAxMDI0LDk5OC42OTcgMTAyNCw5NjcuNDg0IEwxMDI0LDU2LjUxNSBDMTAyNCwyNS4zMDMgOTk4LjY5NywwIDk2Ny40ODQsMCIgaWQ9IkZpbGwtMSI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
+		}
+
+		& .ck-media__placeholder__url__text {
+			color: hsl(220, 100%, 90%);
+
+			&:hover {
+				color: hsl(0, 0%, 100%);
+			}
+		}
+	}
+
+	&[data-oembed-url*="instagram.com"] .ck-media__placeholder {
+		background: linear-gradient(-135deg,hsl(246, 100%, 39%),hsl(302, 100%, 36%),hsl(0, 100%, 48%));
+
+		& .ck-media__placeholder__icon {
+			background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MDRweCIgaGVpZ2h0PSI1MDRweCIgdmlld0JveD0iMCAwIDUwNCA1MDQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+Z2x5cGgtbG9nb19NYXkyMDE2PC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPiAgICAgICAgPHBvbHlnb24gaWQ9InBhdGgtMSIgcG9pbnRzPSIwIDAuMTU5IDUwMy44NDEgMC4xNTkgNTAzLjg0MSA1MDMuOTQgMCA1MDMuOTQiPjwvcG9seWdvbj4gICAgPC9kZWZzPiAgICA8ZyBpZD0iZ2x5cGgtbG9nb19NYXkyMDE2IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJHcm91cC0zIj4gICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+ICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+ICAgICAgICAgICAgPC9tYXNrPiAgICAgICAgICAgIDxnIGlkPSJDbGlwLTIiPjwvZz4gICAgICAgICAgICA8cGF0aCBkPSJNMjUxLjkyMSwwLjE1OSBDMTgzLjUwMywwLjE1OSAxNzQuOTI0LDAuNDQ5IDE0OC4wNTQsMS42NzUgQzEyMS4yNCwyLjg5OCAxMDIuOTI3LDcuMTU3IDg2LjkwMywxMy4zODUgQzcwLjMzNywxOS44MjIgNTYuMjg4LDI4LjQzNiA0Mi4yODIsNDIuNDQxIEMyOC4yNzcsNTYuNDQ3IDE5LjY2Myw3MC40OTYgMTMuMjI2LDg3LjA2MiBDNi45OTgsMTAzLjA4NiAyLjczOSwxMjEuMzk5IDEuNTE2LDE0OC4yMTMgQzAuMjksMTc1LjA4MyAwLDE4My42NjIgMCwyNTIuMDggQzAsMzIwLjQ5NyAwLjI5LDMyOS4wNzYgMS41MTYsMzU1Ljk0NiBDMi43MzksMzgyLjc2IDYuOTk4LDQwMS4wNzMgMTMuMjI2LDQxNy4wOTcgQzE5LjY2Myw0MzMuNjYzIDI4LjI3Nyw0NDcuNzEyIDQyLjI4Miw0NjEuNzE4IEM1Ni4yODgsNDc1LjcyMyA3MC4zMzcsNDg0LjMzNyA4Ni45MDMsNDkwLjc3NSBDMTAyLjkyNyw0OTcuMDAyIDEyMS4yNCw1MDEuMjYxIDE0OC4wNTQsNTAyLjQ4NCBDMTc0LjkyNCw1MDMuNzEgMTgzLjUwMyw1MDQgMjUxLjkyMSw1MDQgQzMyMC4zMzgsNTA0IDMyOC45MTcsNTAzLjcxIDM1NS43ODcsNTAyLjQ4NCBDMzgyLjYwMSw1MDEuMjYxIDQwMC45MTQsNDk3LjAwMiA0MTYuOTM4LDQ5MC43NzUgQzQzMy41MDQsNDg0LjMzNyA0NDcuNTUzLDQ3NS43MjMgNDYxLjU1OSw0NjEuNzE4IEM0NzUuNTY0LDQ0Ny43MTIgNDg0LjE3OCw0MzMuNjYzIDQ5MC42MTYsNDE3LjA5NyBDNDk2Ljg0Myw0MDEuMDczIDUwMS4xMDIsMzgyLjc2IDUwMi4zMjUsMzU1Ljk0NiBDNTAzLjU1MSwzMjkuMDc2IDUwMy44NDEsMzIwLjQ5NyA1MDMuODQxLDI1Mi4wOCBDNTAzLjg0MSwxODMuNjYyIDUwMy41NTEsMTc1LjA4MyA1MDIuMzI1LDE0OC4yMTMgQzUwMS4xMDIsMTIxLjM5OSA0OTYuODQzLDEwMy4wODYgNDkwLjYxNiw4Ny4wNjIgQzQ4NC4xNzgsNzAuNDk2IDQ3NS41NjQsNTYuNDQ3IDQ2MS41NTksNDIuNDQxIEM0NDcuNTUzLDI4LjQzNiA0MzMuNTA0LDE5LjgyMiA0MTYuOTM4LDEzLjM4NSBDNDAwLjkxNCw3LjE1NyAzODIuNjAxLDIuODk4IDM1NS43ODcsMS42NzUgQzMyOC45MTcsMC40NDkgMzIwLjMzOCwwLjE1OSAyNTEuOTIxLDAuMTU5IFogTTI1MS45MjEsNDUuNTUgQzMxOS4xODYsNDUuNTUgMzI3LjE1NCw0NS44MDcgMzUzLjcxOCw0Ny4wMTkgQzM3OC4yOCw0OC4xMzkgMzkxLjYxOSw1Mi4yNDMgNDAwLjQ5Niw1NS42OTMgQzQxMi4yNTUsNjAuMjYzIDQyMC42NDcsNjUuNzIyIDQyOS40NjIsNzQuNTM4IEM0MzguMjc4LDgzLjM1MyA0NDMuNzM3LDkxLjc0NSA0NDguMzA3LDEwMy41MDQgQzQ1MS43NTcsMTEyLjM4MSA0NTUuODYxLDEyNS43MiA0NTYuOTgxLDE1MC4yODIgQzQ1OC4xOTMsMTc2Ljg0NiA0NTguNDUsMTg0LjgxNCA0NTguNDUsMjUyLjA4IEM0NTguNDUsMzE5LjM0NSA0NTguMTkzLDMyNy4zMTMgNDU2Ljk4MSwzNTMuODc3IEM0NTUuODYxLDM3OC40MzkgNDUxLjc1NywzOTEuNzc4IDQ0OC4zMDcsNDAwLjY1NSBDNDQzLjczNyw0MTIuNDE0IDQzOC4yNzgsNDIwLjgwNiA0MjkuNDYyLDQyOS42MjEgQzQyMC42NDcsNDM4LjQzNyA0MTIuMjU1LDQ0My44OTYgNDAwLjQ5Niw0NDguNDY2IEMzOTEuNjE5LDQ1MS45MTYgMzc4LjI4LDQ1Ni4wMiAzNTMuNzE4LDQ1Ny4xNCBDMzI3LjE1OCw0NTguMzUyIDMxOS4xOTEsNDU4LjYwOSAyNTEuOTIxLDQ1OC42MDkgQzE4NC42NSw0NTguNjA5IDE3Ni42ODQsNDU4LjM1MiAxNTAuMTIzLDQ1Ny4xNCBDMTI1LjU2MSw0NTYuMDIgMTEyLjIyMiw0NTEuOTE2IDEwMy4zNDUsNDQ4LjQ2NiBDOTEuNTg2LDQ0My44OTYgODMuMTk0LDQzOC40MzcgNzQuMzc5LDQyOS42MjEgQzY1LjU2NCw0MjAuODA2IDYwLjEwNCw0MTIuNDE0IDU1LjUzNCw0MDAuNjU1IEM1Mi4wODQsMzkxLjc3OCA0Ny45OCwzNzguNDM5IDQ2Ljg2LDM1My44NzcgQzQ1LjY0OCwzMjcuMzEzIDQ1LjM5MSwzMTkuMzQ1IDQ1LjM5MSwyNTIuMDggQzQ1LjM5MSwxODQuODE0IDQ1LjY0OCwxNzYuODQ2IDQ2Ljg2LDE1MC4yODIgQzQ3Ljk4LDEyNS43MiA1Mi4wODQsMTEyLjM4MSA1NS41MzQsMTAzLjUwNCBDNjAuMTA0LDkxLjc0NSA2NS41NjMsODMuMzUzIDc0LjM3OSw3NC41MzggQzgzLjE5NCw2NS43MjIgOTEuNTg2LDYwLjI2MyAxMDMuMzQ1LDU1LjY5MyBDMTEyLjIyMiw1Mi4yNDMgMTI1LjU2MSw0OC4xMzkgMTUwLjEyMyw0Ny4wMTkgQzE3Ni42ODcsNDUuODA3IDE4NC42NTUsNDUuNTUgMjUxLjkyMSw0NS41NSBaIiBpZD0iRmlsbC0xIiBmaWxsPSIjRkZGRkZGIiBtYXNrPSJ1cmwoI21hc2stMikiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgICAgIDxwYXRoIGQ9Ik0yNTEuOTIxLDMzNi4wNTMgQzIwNS41NDMsMzM2LjA1MyAxNjcuOTQ3LDI5OC40NTcgMTY3Ljk0NywyNTIuMDggQzE2Ny45NDcsMjA1LjcwMiAyMDUuNTQzLDE2OC4xMDYgMjUxLjkyMSwxNjguMTA2IEMyOTguMjk4LDE2OC4xMDYgMzM1Ljg5NCwyMDUuNzAyIDMzNS44OTQsMjUyLjA4IEMzMzUuODk0LDI5OC40NTcgMjk4LjI5OCwzMzYuMDUzIDI1MS45MjEsMzM2LjA1MyBaIE0yNTEuOTIxLDEyMi43MTUgQzE4MC40NzQsMTIyLjcxNSAxMjIuNTU2LDE4MC42MzMgMTIyLjU1NiwyNTIuMDggQzEyMi41NTYsMzIzLjUyNiAxODAuNDc0LDM4MS40NDQgMjUxLjkyMSwzODEuNDQ0IEMzMjMuMzY3LDM4MS40NDQgMzgxLjI4NSwzMjMuNTI2IDM4MS4yODUsMjUyLjA4IEMzODEuMjg1LDE4MC42MzMgMzIzLjM2NywxMjIuNzE1IDI1MS45MjEsMTIyLjcxNSBaIiBpZD0iRmlsbC00IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgICAgICA8cGF0aCBkPSJNNDE2LjYyNywxMTcuNjA0IEM0MTYuNjI3LDEzNC4zIDQwMy4wOTIsMTQ3LjgzNCAzODYuMzk2LDE0Ny44MzQgQzM2OS43MDEsMTQ3LjgzNCAzNTYuMTY2LDEzNC4zIDM1Ni4xNjYsMTE3LjYwNCBDMzU2LjE2NiwxMDAuOTA4IDM2OS43MDEsODcuMzczIDM4Ni4zOTYsODcuMzczIEM0MDMuMDkyLDg3LjM3MyA0MTYuNjI3LDEwMC45MDggNDE2LjYyNywxMTcuNjA0IiBpZD0iRmlsbC01IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgIDwvZz48L3N2Zz4=);
+		}
+
+		/* stylelint-disable-next-line no-descending-specificity */
+		& .ck-media__placeholder__url__text {
+			color: hsl(302, 100%, 94%);
+
+			&:hover {
+				color: hsl(0, 0%, 100%);
+			}
+		}
+	}
+
+	&[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder {
+		/* Use gradient to contrast with focused widget (ckeditor/ckeditor5-media-embed#22). */
+		background: linear-gradient( to right, hsl(201, 85%, 70%), hsl(201, 85%, 35%) );
+
+		& .ck-media__placeholder__icon {
+			background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IldoaXRlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMCA0MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MDAsMjAwYzAsMTEwLjUtODkuNSwyMDAtMjAwLDIwMFMwLDMxMC41LDAsMjAwUzg5LjUsMCwyMDAsMFM0MDAsODkuNSw0MDAsMjAweiBNMTYzLjQsMzA1LjVjODguNywwLDEzNy4yLTczLjUsMTM3LjItMTM3LjJjMC0yLjEsMC00LjItMC4xLTYuMmM5LjQtNi44LDE3LjYtMTUuMywyNC4xLTI1Yy04LjYsMy44LTE3LjksNi40LTI3LjcsNy42YzEwLTYsMTcuNi0xNS40LDIxLjItMjYuN2MtOS4zLDUuNS0xOS42LDkuNS0zMC42LDExLjdjLTguOC05LjQtMjEuMy0xNS4yLTM1LjItMTUuMmMtMjYuNiwwLTQ4LjIsMjEuNi00OC4yLDQ4LjJjMCwzLjgsMC40LDcuNSwxLjMsMTFjLTQwLjEtMi03NS42LTIxLjItOTkuNC01MC40Yy00LjEsNy4xLTYuNSwxNS40LTYuNSwyNC4yYzAsMTYuNyw4LjUsMzEuNSwyMS41LDQwLjFjLTcuOS0wLjItMTUuMy0yLjQtMjEuOC02YzAsMC4yLDAsMC40LDAsMC42YzAsMjMuNCwxNi42LDQyLjgsMzguNyw0Ny4zYy00LDEuMS04LjMsMS43LTEyLjcsMS43Yy0zLjEsMC02LjEtMC4zLTkuMS0wLjljNi4xLDE5LjIsMjMuOSwzMy4xLDQ1LDMzLjVjLTE2LjUsMTIuOS0zNy4zLDIwLjYtNTkuOSwyMC42Yy0zLjksMC03LjctMC4yLTExLjUtMC43QzExMC44LDI5Ny41LDEzNi4yLDMwNS41LDE2My40LDMwNS41Ii8+PC9zdmc+);
+		}
+
+		& .ck-media__placeholder__url__text {
+			color: hsl(201, 100%, 86%);
+
+			&:hover {
+				color: hsl(0, 0%, 100%);
+			}
+		}
+	}
+}

package/theme/ckeditor5-mention/mention.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
+	--ck-color-mention-text: hsl(341, 100%, 30%);
+}
+
+.ck-content .mention {
+	background: var(--ck-color-mention-background);
+	color: var(--ck-color-mention-text);
+}