@ckeditor/ckeditor5-uploadcare 0.0.0-nightly-next-20260115.0 → 0.0.0-nightly-20260116.0

package/theme/uploadcare-form.css

@@ -0,0 +1,201 @@
+/*
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
+ *
+ * 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
+ */
+
+@import "@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/mixins/_button.css";
+
+:root {
+	--ck-uploadcare-form-view-width: 700px;
+	--ck-uploadcare-external-source-view-height: 350px;
+	--ck-uploadcare-color-image-background: oklch(0.97 0 0);
+	--ck-uploadcare-color-icon-error: hsl(15, 100%, 43%);
+	--ck-uploadcare-color-skeleton: hsl(0, 0%, 98%);
+}
+
+/* stylelint-disable no-descending-specificity */
+.ck .ck-uploadcare-form,
+.ck .ck-uploadcare-form:not(#\#) {
+	max-width: 100%;
+	width: var(--ck-uploadcare-form-view-width);
+
+	.ck-uploadcare-form__loading {
+		.ck-uploadcare-form__loading-spinner {
+			width: 100%;
+			height: var(--ck-uploadcare-external-source-view-height);
+			background-color: var(--ck-uploadcare-color-image-background);
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+
+			.ck-spinner-container {
+				margin-bottom: 10px;
+			}
+		}
+	}
+
+	.ck-uploadcare-form__error {
+		.ck-uploadcare-form__error-contents {
+			width: 100%;
+			height: var(--ck-uploadcare-external-source-view-height);
+			background-color: var(--ck-uploadcare-color-image-background);
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			gap: 5px;
+
+			h3 {
+				font-weight: 700;
+				padding: 0;
+				margin: 0;
+			}
+
+			.ck-icon {
+				color: var(--ck-uploadcare-color-icon-error);
+			}
+
+			.ck-button {
+				margin-top: 10px;
+			}
+		}
+	}
+
+	.ck-uploadcare-form__skeleton {
+		width: 100%;
+		height: 115px;
+
+		div {
+			height: 50%;
+			display: flex;
+			box-sizing: border-box;
+			min-width: 100%;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+
+			span {
+				display: block;
+				width: 32px;
+				height: 32px;
+				background-color: var(--ck-uploadcare-color-skeleton);
+			}
+		}
+
+		div + div {
+			gap: 20px;
+
+			span:first-child {
+				position: absolute;
+				left: 8px;
+				width: 80px;
+			}
+
+			span:last-child {
+				position: absolute;
+				right: 8px;
+				width: 80px;
+			}
+		}
+
+		div:first-child {
+			gap: 4px;
+		}
+	}
+
+	/* The following styles overrides the default Uploadcare styles */
+
+	/* stylelint-disable selector-type-no-unknown */
+	.mini-btn {
+		display: none;
+	}
+
+	.uc-viewport {
+		height: var(--ck-uploadcare-external-source-view-height);
+	}
+
+	uc-btn-ui button, .uc-primary-btn, .uc-secondary-btn {
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
+		min-width: var(--ck-ui-component-min-height);
+		min-height: var(--ck-ui-component-min-height);
+	}
+
+	.uc-primary-btn, uc-btn-ui.uc-primary button {
+		@mixin ck-button-colors --ck-color-button-action;
+	}
+
+	.uc-secondary-btn, uc-btn-ui.uc-secondary button {
+		@mixin ck-button-colors --ck-color-button-default;
+	}
+
+	uc-upload-list {
+		& .uc-toolbar {
+			gap: var(--ck-spacing-large);
+
+		}
+
+		& .uc-files {
+			padding-top: var(--ck-spacing-large);
+			max-height: var(--ck-uploadcare-external-source-view-height);
+			overflow-y: auto;
+		}
+	}
+
+	.uc-content {
+		padding: var(--ck-spacing-large);
+		gap: var(--ck-spacing-large);
+
+		& > .uc-iframe-wrapper {
+			height: var(--ck-uploadcare-external-source-view-height);
+		}
+
+		& > .uc-toolbar {
+			padding: var(--ck-spacing-large) 0 0;
+		}
+	}
+
+	uc-start-from {
+		& .uc-content {
+			gap: 0;
+		}
+	}
+
+	uc-file-item {
+		& > .uc-inner {
+			font-size: 1em;
+		}
+
+
+		& > .uc-inner:where([finished]) .uc-badge {
+			background: var(--ck-color-button-action-active-background);
+		}
+	}
+
+	uc-external-source .uc-cancel-btn {
+		visibility: hidden;
+		pointer-events: none;
+	}
+
+	uc-activity-header {
+		display: none;
+	}
+
+	uc-source-list {
+		display: none;
+	}
+
+	uc-cloud-image-editor-block {
+		[icon="closeMax"] .uc-icon_left {
+			transform: rotate(90deg);
+		}
+	}
+	/* stylelint-enable selector-type-no-unknown */
+}
+/* stylelint-enable no-descending-specificity */

package/theme/uploadcare-theme.css

@@ -0,0 +1,20 @@
+/*
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
+ *
+ * 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-uploadcare-theme {
+	--uc-font-size: 13px;								/* --ck-font-size-base */
+	--uc-radius: 2px;									/* --ck-border-radius */
+	--uc-padding: calc(0.6em * 1.5);					/* --ck-spacing-large */
+
+	--uc-primary-oklch-light: 54.45% 0.182 263.76;
+	--uc-foreground-light: hsl(0, 0%, 20%);				/* --ck-color-text */
+	--uc-secondary-foreground-light: hsl(0, 0%, 20%);	/* --ck-color-text */
+	--uc-muted-foreground-light: hsl(0, 0%, 20%);		/* --ck-color-text */
+	--uc-border-light: hsl(220, 6%, 81%); 				/* --ck-color-base-border */
+}

package/theme/uploadcareimageedit.css

@@ -0,0 +1,64 @@
+/*
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
+ *
+ * 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
+ */
+
+:root {
+	--ck-image-processing-highlight-color: hsl(220, 10%, 98%);
+	--ck-image-processing-background-color: hsl(220, 10%, 90%);
+}
+
+.ck.ck-editor__editable {
+	& .image, & .image-inline {
+		&.image-processing picture {
+			position: relative;
+			display: block;
+			width: 100%;
+			height: 100%;
+
+			&:before {
+				content: '';
+
+				position: absolute;
+				top: 0;
+				left: 0;
+				z-index: 1;
+
+				height: 100%;
+				width: 100%;
+
+				background: linear-gradient(
+					90deg,
+					var(--ck-image-processing-background-color),
+					var(--ck-image-processing-highlight-color),
+					var(--ck-image-processing-background-color)
+				);
+				background-size: 200% 100%;
+
+				animation: ck-image-processing-animation 2s linear infinite;
+			}
+
+			& img {
+				height: 100%;
+			}
+		}
+
+		&.image-processing-blur {
+			clip-path: inset(0);
+			filter: blur(1.6rem);
+		}
+	}
+}
+
+@keyframes ck-image-processing-animation {
+	0% {
+		background-position: 200% 0;
+	}
+	100% {
+		background-position: -200% 0;
+	}
+}