From 5aae2dfb63761a08ee16a340e41e43ce15cd9856 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Tue, 25 Jun 2024 08:36:17 -0400 Subject: [PATCH] feat(styles): added prefix uc- --- blocks/CameraSource/CameraSource.js | 14 +- blocks/CameraSource/camera-source.css | 20 +- .../src/CloudImageEditorBlock.js | 8 +- blocks/CloudImageEditor/src/CropFrame.js | 24 +- .../src/EditorButtonControl.js | 6 +- .../src/EditorFilterControl.js | 4 +- .../src/EditorImageCropper.js | 14 +- .../CloudImageEditor/src/EditorImageFader.js | 29 +- blocks/CloudImageEditor/src/EditorToolbar.js | 72 +++-- blocks/CloudImageEditor/src/css/common.css | 279 +++++++++++------- .../src/elements/button/LrBtnUi.js | 14 +- .../src/elements/line-loader/LineLoaderUi.js | 4 +- .../presence-toggle/PresenceToggle.js | 10 +- .../src/elements/slider/SliderUi.js | 6 +- blocks/CloudImageEditor/src/template.js | 28 +- blocks/Copyright/Copyright.js | 2 +- blocks/Copyright/copyright.css | 6 +- blocks/DropArea/DropArea.js | 6 +- blocks/DropArea/drop-area.css | 46 +-- blocks/ExternalSource/ExternalSource.js | 16 +- blocks/ExternalSource/external-source.css | 10 +- blocks/FileItem/FileItem.js | 27 +- blocks/FileItem/file-item.css | 38 +-- blocks/Modal/modal.css | 6 +- blocks/ProgressBar/ProgressBar.js | 4 +- blocks/ProgressBar/progress-bar.css | 4 +- blocks/Range/Range.js | 8 +- blocks/Range/range.css | 10 +- blocks/SimpleBtn/SimpleBtn.js | 2 +- blocks/SimpleBtn/simple-btn.css | 10 +- blocks/SourceBtn/SourceBtn.js | 2 +- blocks/SourceBtn/source-btn.css | 2 +- blocks/StartFrom/StartFrom.js | 2 +- blocks/StartFrom/start-from.css | 2 +- blocks/UploadList/UploadList.js | 22 +- blocks/UploadList/upload-list.css | 14 +- blocks/UrlSource/UrlSource.js | 10 +- blocks/UrlSource/url-source.css | 4 +- blocks/themes/lr-basic/common.css | 14 +- .../inline/FileUploaderInline.js | 2 +- solutions/file-uploader/inline/index.css | 10 +- solutions/file-uploader/minimal/index.css | 30 +- .../regular/FileUploaderRegular.js | 2 +- 43 files changed, 458 insertions(+), 385 deletions(-) diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js index a47be2ad3..5ce68f2e3 100644 --- a/blocks/CameraSource/CameraSource.js +++ b/blocks/CameraSource/CameraSource.js @@ -66,7 +66,7 @@ export class CameraSource extends UploaderBlock { * @param {'granted' | 'denied' | 'prompt'} state */ _setPermissionsState = debounce((state) => { - this.classList.toggle('initialized', state === 'granted'); + this.classList.toggle('uc-initialized', state === 'granted'); if (state === 'granted') { this.set$({ @@ -215,7 +215,7 @@ export class CameraSource extends UploaderBlock { CameraSource.template = /* HTML */ ` -
@@ -223,22 +223,22 @@ CameraSource.template = /* HTML */ `
- -
+
-
+
-
diff --git a/blocks/CameraSource/camera-source.css b/blocks/CameraSource/camera-source.css index c2ad41e75..a8b3ddaaf 100644 --- a/blocks/CameraSource/camera-source.css +++ b/blocks/CameraSource/camera-source.css @@ -16,7 +16,7 @@ lr-camera-source { max-height: var(--modal-max-content-height); } -lr-camera-source.initialized { +lr-camera-source.uc-initialized { height: max-content; } @@ -37,7 +37,7 @@ lr-camera-source video { border-radius: var(--uc-radius); } -lr-camera-source .toolbar { +lr-camera-source .uc-toolbar { position: absolute; bottom: 0; display: flex; @@ -47,7 +47,7 @@ lr-camera-source .toolbar { background-color: var(--uc-background); } -lr-camera-source .content { +lr-camera-source .uc-content { display: flex; flex: 1; justify-content: center; @@ -57,7 +57,7 @@ lr-camera-source .content { overflow: hidden; } -lr-camera-source .message-box { +lr-camera-source .uc-message-box { display: flex; flex-direction: column; grid-gap: 40px; @@ -67,12 +67,12 @@ lr-camera-source .message-box { color: var(--uc-foreground); } -lr-camera-source .message-box button { +lr-camera-source .uc-message-box button { color: var(--uc-primary-foreground); background-color: var(--uc-primary); } -lr-camera-source .shot-btn { +lr-camera-source .uc-shot-btn { position: absolute; bottom: 20px; width: 58px; @@ -87,21 +87,21 @@ lr-camera-source .shot-btn { transform var(--uc-transition); } -lr-camera-source .shot-btn:hover { +lr-camera-source .uc-shot-btn:hover { transform: scale(1.05); opacity: 1; } -lr-camera-source .shot-btn:active { +lr-camera-source .uc-shot-btn:active { transform: scale(1); opacity: 1; } -lr-camera-source .shot-btn[disabled] { +lr-camera-source .uc-shot-btn[disabled] { bottom: -80px; } -lr-camera-source .shot-btn lr-icon svg { +lr-camera-source .uc-shot-btn lr-icon svg { width: 20px; height: 20px; } diff --git a/blocks/CloudImageEditor/src/CloudImageEditorBlock.js b/blocks/CloudImageEditor/src/CloudImageEditorBlock.js index d00c60c2f..5a492f07c 100644 --- a/blocks/CloudImageEditor/src/CloudImageEditorBlock.js +++ b/blocks/CloudImageEditor/src/CloudImageEditorBlock.js @@ -173,13 +173,13 @@ export class CloudImageEditorBlock extends Block { ); this.sub('*tabId', (tabId) => { - this.ref['img-el'].className = classNames('image', { - image_hidden_to_cropper: tabId === TabId.CROP, - image_hidden_effects: tabId !== TabId.CROP, + this.ref['img-el'].className = classNames('uc-image', { + 'uc-image_hidden_to_cropper': tabId === TabId.CROP, + 'uc-image_hidden_effects': tabId !== TabId.CROP, }); }); - this.classList.add('editor_ON'); + this.classList.add('uc-editor_ON'); this.sub('*networkProblems', (networkProblems) => { this.$['presence.networkProblems'] = networkProblems; diff --git a/blocks/CloudImageEditor/src/CropFrame.js b/blocks/CloudImageEditor/src/CropFrame.js index 8b1f79842..334afd647 100644 --- a/blocks/CloudImageEditor/src/CropFrame.js +++ b/blocks/CloudImageEditor/src/CropFrame.js @@ -187,9 +187,9 @@ export class CropFrame extends Block { let disableThumb = this._shouldThumbBeDisabled(direction); groupNode.setAttribute( 'class', - classNames('thumb', { - 'thumb--hidden': disableThumb, - 'thumb--visible': !disableThumb, + classNames('uc-thumb', { + 'uc-thumb--hidden': disableThumb, + 'uc-thumb--visible': !disableThumb, }), ); } @@ -220,7 +220,7 @@ export class CropFrame extends Block { for (let j = 0; j < 3; j++) { let direction = /** @type {import('./types.js').Direction} */ (`${['n', '', 's'][i]}${['w', '', 'e'][j]}`); let groupNode = createSvgNode('g'); - groupNode.classList.add('thumb'); + groupNode.classList.add('uc-thumb'); groupNode.setAttribute('with-effects', ''); let interactionNode = createSvgNode('rect', { fill: 'transparent', @@ -288,7 +288,7 @@ export class CropFrame extends Block { svg.appendChild(line); } - svg.classList.add('guides', 'guides--semi-hidden'); + svg.classList.add('uc-guides', 'uc-guides--semi-hidden'); return svg; } @@ -452,9 +452,9 @@ export class CropFrame extends Block { .forEach((groupNode) => { groupNode.setAttribute( 'class', - classNames('thumb', { - 'thumb--hidden': !visible, - 'thumb--visible': visible, + classNames('uc-thumb', { + 'uc-thumb--hidden': !visible, + 'uc-thumb--visible': visible, }), ); }); @@ -488,9 +488,9 @@ export class CropFrame extends Block { this._frameGuides.setAttribute( 'class', classNames({ - 'guides--hidden': this._guidesHidden, - 'guides--visible': !this._guidesHidden && dragging, - 'guides--semi-hidden': !this._guidesHidden && !dragging, + 'uc-guides--hidden': this._guidesHidden, + 'uc-guides--visible': !this._guidesHidden && dragging, + 'uc-guides--semi-hidden': !this._guidesHidden && !dragging, }), ); }); @@ -508,4 +508,4 @@ export class CropFrame extends Block { } } -CropFrame.template = /* HTML */ ` `; +CropFrame.template = /* HTML */ ` `; diff --git a/blocks/CloudImageEditor/src/EditorButtonControl.js b/blocks/CloudImageEditor/src/EditorButtonControl.js index 4cca4f732..82ecff6f5 100644 --- a/blocks/CloudImageEditor/src/EditorButtonControl.js +++ b/blocks/CloudImageEditor/src/EditorButtonControl.js @@ -25,8 +25,8 @@ export class EditorButtonControl extends Block { this.sub('active', (active) => { this.className = classNames({ - active: active, - not_active: !active, + 'uc-active': active, + 'uc-not_active': !active, }); }); @@ -39,6 +39,6 @@ export class EditorButtonControl extends Block { EditorButtonControl.template = /* HTML */ ` `; diff --git a/blocks/CloudImageEditor/src/EditorFilterControl.js b/blocks/CloudImageEditor/src/EditorFilterControl.js index b6f7fcab7..db7fdaa3f 100644 --- a/blocks/CloudImageEditor/src/EditorFilterControl.js +++ b/blocks/CloudImageEditor/src/EditorFilterControl.js @@ -100,7 +100,7 @@ export class EditorFilterControl extends EditorButtonControl { this._originalUrl = originalUrl; if (this.$.isOriginal) { - this.ref['icon-el'].classList.add('original-icon'); + this.ref['icon-el'].classList.add('uc-original-icon'); } else { this._observer.observe(this); } @@ -149,7 +149,7 @@ export class EditorFilterControl extends EditorButtonControl { EditorFilterControl.template = /* HTML */ ` `; diff --git a/blocks/CloudImageEditor/src/EditorImageCropper.js b/blocks/CloudImageEditor/src/EditorImageCropper.js index 37f4bad0a..ee5f0e1bf 100644 --- a/blocks/CloudImageEditor/src/EditorImageCropper.js +++ b/blocks/CloudImageEditor/src/EditorImageCropper.js @@ -258,9 +258,9 @@ export class EditorImageCropper extends Block { this._transitionToImage(); setTimeout(() => { this.className = classNames({ - active_from_viewer: fromViewer, - active_from_editor: !fromViewer, - inactive_to_editor: false, + 'uc-active_from_viewer': fromViewer, + 'uc-active_from_editor': !fromViewer, + 'uc-inactive_to_editor': false, }); }); } @@ -413,9 +413,9 @@ export class EditorImageCropper extends Block { this._transitionToCrop(); this.className = classNames({ - active_from_viewer: false, - active_from_editor: false, - inactive_to_editor: true, + 'uc-active_from_viewer': false, + 'uc-active_from_editor': false, + 'uc-inactive_to_editor': true, }); this.ref['frame-el'].toggleThumbs(false); @@ -546,6 +546,6 @@ export class EditorImageCropper extends Block { } EditorImageCropper.template = /* HTML */ ` - + `; diff --git a/blocks/CloudImageEditor/src/EditorImageFader.js b/blocks/CloudImageEditor/src/EditorImageFader.js index 4148169e7..25f4cd830 100644 --- a/blocks/CloudImageEditor/src/EditorImageFader.js +++ b/blocks/CloudImageEditor/src/EditorImageFader.js @@ -88,7 +88,7 @@ export class EditorImageFader extends Block { /** @private */ this._addKeypointDebounced = debounce(this._addKeypoint.bind(this), 600); - this.classList.add('inactive_to_cropper'); + this.classList.add('uc-inactive_to_cropper'); } /** @@ -201,7 +201,7 @@ export class EditorImageFader extends Block { image.addEventListener('load', stop, { once: true }); image.addEventListener('error', stop, { once: true }); keypoint.image = image; - image.classList.add('fader-image'); + image.classList.add('uc-fader-image'); image.addEventListener( 'load', @@ -264,7 +264,7 @@ export class EditorImageFader extends Block { /** @private */ _createPreviewImage() { let image = new Image(); - image.classList.add('fader-image', 'fader-image--preview'); + image.classList.add('uc-fader-image', 'uc-fader-image--preview'); image.style.opacity = '0'; return image; } @@ -298,7 +298,7 @@ export class EditorImageFader extends Block { this._container = container; this._keypoints.forEach((kp, idx) => { let kpImage = images[idx]; - kpImage.classList.add('fader-image'); + kpImage.classList.add('uc-fader-image'); kp.image = kpImage; this._container.appendChild(kpImage); }); @@ -354,10 +354,11 @@ export class EditorImageFader extends Block { if (image.src === src) { image.style.opacity = '1'; image.style.transform = 'scale(1)'; + this.className = classNames({ - active_from_viewer: this._fromViewer, - active_from_cropper: !this._fromViewer, - inactive_to_cropper: false, + 'uc-active_from_viewer': this._fromViewer, + 'uc-active_from_cropper': !this._fromViewer, + 'uc-inactive_to_cropper': false, }); return; } @@ -372,10 +373,11 @@ export class EditorImageFader extends Block { if (image) { image.style.opacity = '1'; image.style.transform = 'scale(1)'; + this.className = classNames({ - active_from_viewer: this._fromViewer, - active_from_cropper: !this._fromViewer, - inactive_to_cropper: false, + 'uc-active_from_viewer': this._fromViewer, + 'uc-active_from_cropper': !this._fromViewer, + 'uc-inactive_to_cropper': false, }); } }, @@ -432,10 +434,11 @@ export class EditorImageFader extends Block { if (this._previewImage) { this._previewImage.style.transform = 'scale(1)'; } + this.className = classNames({ - active_from_viewer: false, - active_from_cropper: false, - inactive_to_cropper: true, + 'uc-active_from_viewer': false, + 'uc-active_from_cropper': false, + 'uc-inactive_to_cropper': true, }); this.addEventListener( 'transitionend', diff --git a/blocks/CloudImageEditor/src/EditorToolbar.js b/blocks/CloudImageEditor/src/EditorToolbar.js index 6c946cb9c..bd36ac7f3 100644 --- a/blocks/CloudImageEditor/src/EditorToolbar.js +++ b/blocks/CloudImageEditor/src/EditorToolbar.js @@ -19,7 +19,10 @@ import { viewerImageSrc } from './util.js'; /** @param {String} id */ function renderTabToggle(id) { return /* HTML */ ` - + -
-
+
+
@@ -77,24 +85,24 @@ export class EditorToolbar extends Block { 'presence.tabToggle.tuning': true, 'presence.tabToggle.filters': true, 'presence.subTopToolbarStyles': { - hidden: 'sub-toolbar--top-hidden', - visible: 'sub-toolbar--visible', + hidden: 'uc-sub-toolbar--top-hidden', + visible: 'uc-sub-toolbar--visible', }, 'presence.subBottomToolbarStyles': { - hidden: 'sub-toolbar--bottom-hidden', - visible: 'sub-toolbar--visible', + hidden: 'uc-sub-toolbar--bottom-hidden', + visible: 'uc-sub-toolbar--visible', }, 'presence.tabContentStyles': { - hidden: 'tab-content--hidden', - visible: 'tab-content--visible', + hidden: 'uc-tab-content--hidden', + visible: 'uc-tab-content--visible', }, 'presence.tabToggleStyles': { - hidden: 'tab-toggle--hidden', - visible: 'tab-toggle--visible', + hidden: 'uc-tab-toggle--hidden', + visible: 'uc-tab-toggle--visible', }, 'presence.tabTogglesStyles': { - hidden: 'tab-toggles--hidden', - visible: 'tab-toggles--visible', + hidden: 'uc-tab-toggles--hidden', + visible: 'uc-tab-toggles--visible', }, 'on.cancel': () => { this._cancelPreload && this._cancelPreload(); @@ -133,7 +141,7 @@ export class EditorToolbar extends Block { _onSliderClose() { this.$['*showSlider'] = false; if (this.$['*tabId'] === TabId.TUNING) { - this.ref['tooltip-el'].classList.toggle('info-tooltip_visible', false); + this.ref['tooltip-el'].classList.toggle('uc-info-tooltip_visible', false); } } @@ -204,7 +212,7 @@ export class EditorToolbar extends Block { [...fr.children].forEach((el, idx) => { if (idx === fr.childNodes.length - 1) { - el.classList.add('controls-list_last-item'); + el.classList.add('uc-controls-list_last-item'); } }); @@ -307,7 +315,7 @@ export class EditorToolbar extends Block { if (visible) { this.$['*operationTooltip'] = text; } - this.ref['tooltip-el'].classList.toggle('info-tooltip_visible', visible); + this.ref['tooltip-el'].classList.toggle('uc-info-tooltip_visible', visible); }, 0); initCallback() { @@ -393,32 +401,38 @@ export class EditorToolbar extends Block { EditorToolbar.template = /* HTML */ ` -
-
-
{{*operationTooltip}}
+
+
+
{{*operationTooltip}}
-
+
-
${ALL_TABS.map(renderTabContent).join('')}
-
- -
+
${ALL_TABS.map(renderTabContent).join('')}
+
+ +
${ALL_TABS.map(renderTabToggle).join('')}
- -
+ +
-
+
diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css index 67d0e0ca6..c224c83c9 100644 --- a/blocks/CloudImageEditor/src/css/common.css +++ b/blocks/CloudImageEditor/src/css/common.css @@ -81,19 +81,19 @@ scrollbar-width: none; } -[lr-cloud-image-editor].editor_ON { +[lr-cloud-image-editor].uc-editor_ON { --modal-header-opacity: 0; --modal-header-height: 0px; --modal-toolbar-height: calc(var(--size-panel-heading) * 2); } -[lr-cloud-image-editor].editor_OFF { +[lr-cloud-image-editor].uc-editor_OFF { --modal-header-opacity: 1; --modal-header-height: var(--size-panel-heading); --modal-toolbar-height: var(--size-panel-heading); } -[lr-cloud-image-editor] > .wrapper { +[lr-cloud-image-editor] > .uc-wrapper { --l-min-img-height: var(--modal-toolbar-height); --l-max-img-height: 100%; --l-edit-button-width: 120px; @@ -108,20 +108,20 @@ } @media only screen and (max-width: 800px) { - [lr-cloud-image-editor] > .wrapper { + [lr-cloud-image-editor] > .uc-wrapper { --l-edit-button-width: 70px; --l-toolbar-horizontal-padding: var(--cldtr-gap-min); } } -[lr-cloud-image-editor] > .wrapper > .viewport { +[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport { display: flex; align-items: center; justify-content: center; overflow: hidden; } -[lr-cloud-image-editor] > .wrapper > .viewport > .image_container > .image { +[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image { --viewer-image-opacity: 1; position: absolute; @@ -140,13 +140,13 @@ pointer-events: auto; } -[lr-cloud-image-editor] > .wrapper > .viewport > .image_container > .image.image_visible_viewer { +[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_visible_viewer { transition: opacity var(--transition-duration-3) ease-in-out, transform var(--transition-duration-4); } -[lr-cloud-image-editor] > .wrapper > .viewport > .image_container > .image.image_hidden_to_cropper { +[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_hidden_to_cropper { --viewer-image-opacity: 0; background-image: var(--transparent-pixel); @@ -157,7 +157,7 @@ pointer-events: none; } -[lr-cloud-image-editor] > .wrapper > .viewport > .image_container > .image.image_hidden_effects { +[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_hidden_effects { --viewer-image-opacity: 0; transform: scale(1); @@ -167,7 +167,7 @@ pointer-events: none; } -[lr-cloud-image-editor] > .wrapper > .viewport > .image_container { +[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container { position: relative; display: block; width: 100%; @@ -176,12 +176,12 @@ transition: var(--transition-duration-3); } -[lr-cloud-image-editor] > .wrapper > .toolbar { +[lr-cloud-image-editor] > .uc-wrapper > .uc-toolbar { position: relative; transition: 0.3s; } -[lr-cloud-image-editor] > .wrapper > .toolbar > .toolbar_content { +[lr-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content { position: absolute; bottom: 0px; left: 0px; @@ -192,7 +192,7 @@ background-color: var(--color-fill-contrast); } -[lr-cloud-image-editor] > .wrapper > .toolbar > .toolbar_content.toolbar_content__viewer { +[lr-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__viewer { display: flex; align-items: center; justify-content: space-between; @@ -201,16 +201,16 @@ padding-left: var(--l-toolbar-horizontal-padding); } -[lr-cloud-image-editor] > .wrapper > .toolbar > .toolbar_content.toolbar_content__editor { +[lr-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__editor { display: flex; } -[lr-cloud-image-editor] > .wrapper > .viewport > .info_pan { +[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-info_pan { position: absolute; user-select: none; } -[lr-cloud-image-editor] > .wrapper > .viewport > .file_type_outer { +[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-file_type_outer { position: absolute; z-index: 2; display: flex; @@ -219,11 +219,11 @@ user-select: none; } -[lr-cloud-image-editor] > .wrapper > .viewport > .file_type_outer > .file_type { +[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-file_type_outer > .uc-file_type { padding: 4px 0.8em; } -[lr-cloud-image-editor] > .wrapper > .network_problems_splash { +[lr-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash { position: absolute; z-index: 4; display: flex; @@ -233,7 +233,7 @@ background-color: var(--color-fill-contrast); } -[lr-cloud-image-editor] > .wrapper > .network_problems_splash > .network_problems_content { +[lr-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_content { display: flex; flex: 1; flex-direction: column; @@ -241,7 +241,11 @@ justify-content: center; } -[lr-cloud-image-editor] > .wrapper > .network_problems_splash > .network_problems_content > .network_problems_icon { +[lr-cloud-image-editor] + > .uc-wrapper + > .uc-network_problems_splash + > .uc-network_problems_content + > .uc-network_problems_icon { display: flex; align-items: center; justify-content: center; @@ -252,20 +256,24 @@ border-radius: 50%; } -[lr-cloud-image-editor] > .wrapper > .network_problems_splash > .network_problems_content > .network_problems_text { +[lr-cloud-image-editor] + > .uc-wrapper + > .uc-network_problems_splash + > .uc-network_problems_content + > .uc-network_problems_text { margin-top: var(--cldtr-gap-max); font-size: var(--font-size-ui); color: var(--uc-foreground); } -[lr-cloud-image-editor] > .wrapper > .network_problems_splash > .network_problems_footer { +[lr-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_footer { display: flex; align-items: center; justify-content: center; height: var(--size-panel-heading); } -lr-crop-frame > .svg { +lr-crop-frame > .uc-svg { position: absolute; top: 0px; left: 0px; @@ -278,7 +286,7 @@ lr-crop-frame > .svg { transition: var(--transition-duration-3); } -lr-crop-frame > .thumb { +lr-crop-frame > .uc-thumb { --idle-color-rgb: var(--color-text-base); --hover-color-rgb: var(--color-primary-accent); --focus-color-rgb: var(--color-primary-accent); @@ -291,29 +299,29 @@ lr-crop-frame > .thumb { opacity var(--transition-duration-3); } -lr-crop-frame > .thumb--visible { +lr-crop-frame > .uc-thumb--visible { opacity: 1; pointer-events: auto; } -lr-crop-frame > .thumb--hidden { +lr-crop-frame > .uc-thumb--hidden { opacity: 0; pointer-events: none; } -lr-crop-frame > .guides { +lr-crop-frame > .uc-guides { transition: var(--transition-duration-3); } -lr-crop-frame > .guides--hidden { +lr-crop-frame > .uc-guides--hidden { opacity: 0; } -lr-crop-frame > .guides--semi-hidden { +lr-crop-frame > .uc-guides--semi-hidden { opacity: 0.2; } -lr-crop-frame > .guides--visible { +lr-crop-frame > .uc-guides--visible { opacity: 1; } @@ -367,15 +375,15 @@ lr-editor-operation-control > button { height: var(--size-icon); } -lr-editor-filter-control > lr-icon.original-icon > svg { +lr-editor-filter-control > lr-icon.uc-original-icon > svg { width: 100%; height: 100%; } -lr-editor-button-control.active, -lr-editor-operation-control.active, -lr-editor-crop-button-control.active, -lr-editor-filter-control.active { +lr-editor-button-control.uc-active, +lr-editor-operation-control.uc-active, +lr-editor-crop-button-control.uc-active, +lr-editor-filter-control.uc-active { --idle-color-rgb: var(--uc-primary); --idle-background: var(--uc-primary-transparent); --idle-opacity: 0.9; @@ -384,18 +392,18 @@ lr-editor-filter-control.active { --hover-opacity: 1; } -lr-editor-filter-control.not_active .preview[loaded] { +lr-editor-filter-control.uc-not_active .uc-preview[loaded] { opacity: 1; } -lr-editor-filter-control.active .preview { +lr-editor-filter-control.uc-active .uc-preview { opacity: 0; } -lr-editor-button-control.not_active, -lr-editor-operation-control.not_active, -lr-editor-crop-button-control.not_active, -lr-editor-filter-control.not_active { +lr-editor-button-control.uc-not_active, +lr-editor-operation-control.uc-not_active, +lr-editor-crop-button-control.uc-not_active, +lr-editor-filter-control.uc-not_active { --idle-color-rgb: var(--uc-secondary-foreground); } @@ -415,17 +423,17 @@ lr-editor-filter-control > button::before { transition: var(--transition-duration-3); } -lr-editor-button-control > button .title, -lr-editor-operation-control > button .title, -lr-editor-crop-button-control > button .title, -lr-editor-filter-control > button .title { +lr-editor-button-control > button .uc-title, +lr-editor-operation-control > button .uc-title, +lr-editor-crop-button-control > button .uc-title, +lr-editor-filter-control > button .uc-title { padding-right: var(--cldtr-gap-mid-1); font-size: 0.7em; letter-spacing: 1.004px; text-transform: uppercase; } -lr-editor-filter-control > button .preview { +lr-editor-filter-control > button .uc-preview { position: absolute; right: 0; left: 0; @@ -440,7 +448,7 @@ lr-editor-filter-control > button .preview { transition: var(--transition-duration-3); } -lr-editor-filter-control > .original-icon { +lr-editor-filter-control > .uc-original-icon { color: var(--color-effect); opacity: 0.3; } @@ -459,7 +467,7 @@ lr-editor-image-cropper { color: var(--color-crop-guides); } -lr-editor-image-cropper.active_from_editor { +lr-editor-image-cropper.uc-active_from_editor { transform: scale(1) translate(0px, 0px); opacity: 1; transition: @@ -468,7 +476,7 @@ lr-editor-image-cropper.active_from_editor { pointer-events: auto; } -lr-editor-image-cropper.active_from_viewer { +lr-editor-image-cropper.uc-active_from_viewer { transform: scale(1) translate(0px, 0px); opacity: 1; transition: @@ -477,7 +485,7 @@ lr-editor-image-cropper.active_from_viewer { pointer-events: auto; } -lr-editor-image-cropper.inactive_to_editor { +lr-editor-image-cropper.uc-inactive_to_editor { opacity: 0; transition: transform var(--transition-duration-4) cubic-bezier(0.37, 0, 0.63, 1), @@ -485,7 +493,7 @@ lr-editor-image-cropper.inactive_to_editor { pointer-events: none; } -lr-editor-image-cropper > .canvas { +lr-editor-image-cropper > .uc-canvas { position: absolute; top: 0px; left: 0px; @@ -504,7 +512,7 @@ lr-editor-image-fader { height: 100%; } -lr-editor-image-fader.active_from_viewer { +lr-editor-image-fader.uc-active_from_viewer { z-index: 3; transform: scale(1); opacity: 1; @@ -514,7 +522,7 @@ lr-editor-image-fader.active_from_viewer { pointer-events: auto; } -lr-editor-image-fader.active_from_cropper { +lr-editor-image-fader.uc-active_from_cropper { z-index: 3; transform: scale(1); opacity: 1; @@ -524,7 +532,7 @@ lr-editor-image-fader.active_from_cropper { pointer-events: auto; } -lr-editor-image-fader.inactive_to_cropper { +lr-editor-image-fader.uc-inactive_to_cropper { z-index: 3; transform: scale(1); opacity: 0; @@ -534,7 +542,7 @@ lr-editor-image-fader.inactive_to_cropper { pointer-events: none; } -lr-editor-image-fader .fader-image { +lr-editor-image-fader .uc-fader-image { position: absolute; top: 0px; left: 0px; @@ -547,7 +555,7 @@ lr-editor-image-fader .fader-image { content-visibility: auto; } -lr-editor-image-fader .fader-image--preview { +lr-editor-image-fader .uc-fader-image--preview { background-color: var(--color-image-background); border-top-left-radius: var(--border-radius-base); border-top-right-radius: var(--border-radius-base); @@ -594,14 +602,14 @@ lr-editor-toolbar { } } -lr-editor-toolbar > .toolbar-container { +lr-editor-toolbar > .uc-toolbar-container { position: relative; width: 100%; height: 100%; overflow: hidden; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar { +lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar { position: absolute; display: grid; grid-template-rows: 1fr 1fr; @@ -614,25 +622,25 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar { visibility var(--transition-duration-3) ease-in-out; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar.sub-toolbar--visible { +lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--visible { transform: translateY(0px); opacity: 1; pointer-events: auto; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar.sub-toolbar--top-hidden { +lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--top-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar.sub-toolbar--bottom-hidden { +lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--bottom-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row { +lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row { display: flex; align-items: center; justify-content: space-between; @@ -640,7 +648,7 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row { padding-left: var(--l-controls-padding); } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles { +lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles { position: relative; display: grid; grid-auto-flow: column; @@ -649,7 +657,12 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-tog height: 100%; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles > .tab-toggles_indicator { +lr-editor-toolbar + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-controls-row + > .uc-tab-toggles + > .uc-tab-toggles_indicator { position: absolute; bottom: 0px; left: 0px; @@ -660,11 +673,11 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-tog transition: transform var(--transition-duration-3); } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row { +lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row { position: relative; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-content { +lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content { position: absolute; top: 0px; left: 0px; @@ -676,38 +689,66 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab- content-visibility: auto; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-content.tab-content--visible { +lr-editor-toolbar + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-tab-content-row + > .uc-tab-content.uc-tab-content--visible { opacity: 1; pointer-events: auto; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-content.tab-content--hidden { +lr-editor-toolbar + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-tab-content-row + > .uc-tab-content.uc-tab-content--hidden { opacity: 0; pointer-events: none; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles > .tab-toggle.tab-toggle--visible { +lr-editor-toolbar + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-controls-row + > .uc-tab-toggles + > .uc-tab-toggle.uc-tab-toggle--visible { display: contents; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles > .tab-toggle.tab-toggle--hidden { +lr-editor-toolbar + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-controls-row + > .uc-tab-toggles + > .uc-tab-toggle.uc-tab-toggle--hidden { display: none; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles.tab-toggles--hidden { +lr-editor-toolbar + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-controls-row + > .uc-tab-toggles.uc-tab-toggles--hidden { display: none; } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles > .tab-toggle > lr-btn-ui { +lr-editor-toolbar + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-controls-row + > .uc-tab-toggles + > .uc-tab-toggle + > lr-btn-ui { width: var(--uc-button-size); } lr-editor-toolbar - > .toolbar-container - > .sub-toolbar - > .controls-row - > .tab-toggles - > .tab-toggle + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-controls-row + > .uc-tab-toggles + > .uc-tab-toggle > lr-btn-ui > lr-icon > svg { @@ -715,7 +756,12 @@ lr-editor-toolbar height: var(--size-icon); } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-content .controls-list_align { +lr-editor-toolbar + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-tab-content-row + > .uc-tab-content + .uc-controls-list_align { display: grid; grid-template-areas: '. inner .'; grid-template-columns: 1fr auto 1fr; @@ -724,7 +770,12 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab- padding-left: var(--uc-padding); } -lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-content .controls-list_inner { +lr-editor-toolbar + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-tab-content-row + > .uc-tab-content + .uc-controls-list_inner { display: grid; grid-area: inner; grid-auto-flow: column; @@ -732,19 +783,19 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab- } lr-editor-toolbar - > .toolbar-container - > .sub-toolbar - > .tab-content-row - > .tab-content - .controls-list_inner:last-child { + > .uc-toolbar-container + > .uc-sub-toolbar + > .uc-tab-content-row + > .uc-tab-content + .uc-controls-list_inner:last-child { padding-right: var(--uc-padding); } -lr-editor-toolbar .controls-list_last-item { +lr-editor-toolbar .uc-controls-list_last-item { margin-right: var(--cldtr-gap-max); } -lr-editor-toolbar .info-tooltip_container { +lr-editor-toolbar .uc-info-tooltip_container { position: absolute; display: flex; align-items: flex-start; @@ -753,7 +804,7 @@ lr-editor-toolbar .info-tooltip_container { height: 100%; } -lr-editor-toolbar .info-tooltip_wrapper { +lr-editor-toolbar .uc-info-tooltip_wrapper { position: absolute; top: calc(-100% - var(--cldtr-gap-mid-2)); display: flex; @@ -763,7 +814,7 @@ lr-editor-toolbar .info-tooltip_wrapper { pointer-events: none; } -lr-editor-toolbar .info-tooltip { +lr-editor-toolbar .uc-info-tooltip { z-index: 3; padding: 3px 6px; color: var(--color-text-base); @@ -777,12 +828,12 @@ lr-editor-toolbar .info-tooltip { transition: var(--transition-duration-3); } -lr-editor-toolbar .info-tooltip_visible { +lr-editor-toolbar .uc-info-tooltip_visible { transform: translateY(0px); opacity: 1; } -lr-editor-toolbar .slider { +lr-editor-toolbar .uc-slider { padding-right: var(--l-slider-padding); padding-left: var(--l-slider-padding); } @@ -818,11 +869,11 @@ lr-btn-ui > button { user-select: none; } -lr-btn-ui .text { +lr-btn-ui .uc-text { white-space: nowrap; } -lr-btn-ui .icon { +lr-btn-ui .uc-icon { display: flex; align-items: center; justify-content: center; @@ -831,27 +882,27 @@ lr-btn-ui .icon { transition: var(--l-transition-effect); } -lr-btn-ui .icon_left { +lr-btn-ui .uc-icon_left { margin-right: var(--cldtr-gap-mid-1); margin-left: 0px; } -lr-btn-ui .icon_right { +lr-btn-ui .uc-icon_right { margin-right: 0px; margin-left: var(--cldtr-gap-mid-1); } -lr-btn-ui .icon_single { +lr-btn-ui .uc-icon_single { margin-right: 0px; margin-left: 0px; } -lr-btn-ui .icon_hidden { +lr-btn-ui .uc-icon_hidden { display: none; margin: 0; } -lr-btn-ui.primary > button { +lr-btn-ui.uc-primary > button { --idle-color-rgb: var(--uc-primary-foreground); --idle-brightness: 1; --idle-opacity: 1; @@ -870,7 +921,7 @@ lr-btn-ui.primary > button { --active-background: var(--uc-primary); } -lr-btn-ui.primary-icon > button { +lr-btn-ui.uc-primary-icon > button { --idle-color-rgb: var(--uc-primary); --idle-brightness: 1; --idle-opacity: 1; @@ -892,7 +943,7 @@ lr-btn-ui.primary-icon > button { width: var(--uc-button-size); } -lr-btn-ui.secondary > button { +lr-btn-ui.uc-secondary > button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; @@ -911,7 +962,7 @@ lr-btn-ui.secondary > button { --active-background: transparent; } -lr-btn-ui.secondary-icon > button { +lr-btn-ui.uc-secondary-icon > button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; @@ -933,7 +984,7 @@ lr-btn-ui.secondary-icon > button { width: var(--uc-button-size); } -lr-btn-ui.tab > button { +lr-btn-ui.uc-tab > button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; @@ -955,7 +1006,7 @@ lr-btn-ui.tab > button { width: var(--uc-button-size); } -lr-btn-ui.default > button { +lr-btn-ui.uc-default > button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; @@ -984,13 +1035,13 @@ lr-line-loader-ui { opacity: 0.5; } -lr-line-loader-ui .inner { +lr-line-loader-ui .uc-inner { width: 25%; max-width: 200px; height: 100%; } -lr-line-loader-ui .line { +lr-line-loader-ui .uc-line { width: 100%; height: 100%; background-color: var(--uc-primary); @@ -1016,7 +1067,7 @@ lr-slider-ui { height: calc(var(--l-thumb-size) + (var(--l-zero-dot-size) + var(--l-zero-dot-offset)) * 2); } -lr-slider-ui .thumb { +lr-slider-ui .uc-thumb { position: absolute; left: 0px; width: var(--l-thumb-size); @@ -1030,7 +1081,7 @@ lr-slider-ui .thumb { background-color var(--transition-duration-2); } -lr-slider-ui .steps { +lr-slider-ui .uc-steps { position: absolute; display: flex; align-items: center; @@ -1042,7 +1093,7 @@ lr-slider-ui .steps { padding-left: calc(var(--l-thumb-size) / 2); } -lr-slider-ui .border-step { +lr-slider-ui .uc-border-step { width: 0px; height: 10px; border-right: 1px solid var(--l-color); @@ -1050,7 +1101,7 @@ lr-slider-ui .border-step { transition: border-color var(--transition-duration-2); } -lr-slider-ui .minor-step { +lr-slider-ui .uc-minor-step { width: 0px; height: 4px; border-right: 1px solid var(--l-color); @@ -1058,7 +1109,7 @@ lr-slider-ui .minor-step { transition: border-color var(--transition-duration-2); } -lr-slider-ui .zero-dot { +lr-slider-ui .uc-zero-dot { position: absolute; top: calc(100% - var(--l-zero-dot-offset) * 2); left: calc(var(--l-thumb-size) / 2 - var(--l-zero-dot-size) / 2); @@ -1070,7 +1121,7 @@ lr-slider-ui .zero-dot { transition: var(--transition-duration-3); } -lr-slider-ui .input { +lr-slider-ui .uc-input { position: absolute; width: calc(100% - 10px); height: 100%; @@ -1079,23 +1130,23 @@ lr-slider-ui .input { opacity: 0; } -lr-presence-toggle.transition { +lr-presence-toggle.uc-transition { transition: opacity var(--transition-duration-3), visibility var(--transition-duration-3); } -lr-presence-toggle.visible { +lr-presence-toggle.uc-visible { opacity: 1; pointer-events: inherit; } -lr-presence-toggle.hidden { +lr-presence-toggle.uc-hidden { opacity: 0; pointer-events: none; } -lr-presence-toggle.initial { +lr-presence-toggle.uc-initial { display: none !important; transition: none !important; } diff --git a/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js b/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js index a6cfdfbb9..ca09ce851 100644 --- a/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js +++ b/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js @@ -29,11 +29,11 @@ export class LrBtnUi extends Block { } _iconCss() { - return classNames('icon', { - icon_left: !this._iconReversed, - icon_right: this._iconReversed, - icon_hidden: this._iconHidden, - icon_single: this._iconSingle, + return classNames('uc-icon', { + 'uc-icon_left': !this._iconReversed, + 'uc-icon_right': this._iconReversed, + 'uc-icon_hidden': this._iconHidden, + 'uc-icon_single': this._iconSingle, }); } @@ -48,7 +48,7 @@ export class LrBtnUi extends Block { this.sub('theme', (theme) => { if (theme !== 'custom') { - this.className = theme; + this.className = `uc-${theme}`; } }); @@ -85,6 +85,6 @@ LrBtnUi.bindAttributes({ text: 'text', icon: 'icon', reverse: 'reverse', theme: LrBtnUi.template = /* HTML */ ` `; diff --git a/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.js b/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.js index e66cadfb3..6cb45e6d4 100644 --- a/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.js +++ b/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.js @@ -46,7 +46,7 @@ export class LineLoaderUi extends Block { } LineLoaderUi.template = /* HTML */ ` -
-
+
+
`; diff --git a/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js b/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js index 575aabe53..b53453378 100644 --- a/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js +++ b/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js @@ -10,9 +10,9 @@ import { Block } from '../../../../../abstract/Block.js'; /** @type {Style} */ const DEFAULT_STYLE = { - transition: 'transition', - visible: 'visible', - hidden: 'hidden', + transition: 'uc-transition', + visible: 'uc-visible', + hidden: 'uc-hidden', }; export class PresenceToggle extends Block { @@ -56,7 +56,7 @@ export class PresenceToggle extends Block { initCallback() { super.initCallback(); - this.classList.toggle('initial', true); + this.classList.toggle('uc-initial', true); if (!this._externalTransitions) { this.classList.add(DEFAULT_STYLE.transition); @@ -64,7 +64,7 @@ export class PresenceToggle extends Block { this._handleVisible(); setTimeout(() => { - this.classList.toggle('initial', false); + this.classList.toggle('uc-initial', false); }, 0); } } diff --git a/blocks/CloudImageEditor/src/elements/slider/SliderUi.js b/blocks/CloudImageEditor/src/elements/slider/SliderUi.js index daff4c273..4548c34b2 100644 --- a/blocks/CloudImageEditor/src/elements/slider/SliderUi.js +++ b/blocks/CloudImageEditor/src/elements/slider/SliderUi.js @@ -167,10 +167,10 @@ export class SliderUi extends Block { } } SliderUi.template = /* HTML */ ` -
-
+
+
- -
-
+
+ +
+
-
Network error
+
Network error
-
+
-
-
-
{{fileType}}
+
+
+
{{fileType}}
-
- +
+
-
{{msg}}
+
{{msg}}
-
+
-
+
diff --git a/blocks/Copyright/Copyright.js b/blocks/Copyright/Copyright.js index df14c0b2f..30db0a2de 100644 --- a/blocks/Copyright/Copyright.js +++ b/blocks/Copyright/Copyright.js @@ -17,7 +17,7 @@ export class Copyright extends Block { Powered by Uploadcare `; diff --git a/blocks/Copyright/copyright.css b/blocks/Copyright/copyright.css index 713c10171..3be4083f4 100644 --- a/blocks/Copyright/copyright.css +++ b/blocks/Copyright/copyright.css @@ -4,7 +4,7 @@ lr-copyright { justify-content: center; } -lr-copyright .credits { +lr-copyright .uc-credits { all: unset; position: absolute; bottom: 12px; @@ -21,11 +21,11 @@ lr-copyright .credits { background-color var(--uc-transition); } -lr-copyright .credits:focus-visible { +lr-copyright .uc-credits:focus-visible { outline: 1px auto -webkit-focus-ring-color; } -lr-copyright .credits:hover { +lr-copyright .uc-credits:hover { opacity: 1; background-color: var(--uc-muted); } diff --git a/blocks/DropArea/DropArea.js b/blocks/DropArea/DropArea.js index 20a2113a5..ebe5f600b 100644 --- a/blocks/DropArea/DropArea.js +++ b/blocks/DropArea/DropArea.js @@ -249,12 +249,12 @@ export class DropArea extends UploaderBlock { DropArea.template = /* HTML */ ` -
-
+
+
- {{text}} + {{text}}
`; diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index 2e44584be..dc30eaea0 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -9,7 +9,7 @@ } :where([lr-drop-area]), -:where([lr-drop-area]) .content-wrapper { +:where([lr-drop-area]) .uc-content-wrapper { display: flex; align-items: center; justify-content: center; @@ -17,7 +17,7 @@ height: 100%; } -:where([lr-drop-area]) .text { +:where([lr-drop-area]) .uc-text { position: relative; margin: var(--uc-padding); color: var(--uc-muted-foreground); @@ -33,8 +33,8 @@ } :where([lr-drop-area])[with-icon] - > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) - :is(.text, .icon-container) { + > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) + :is(.uc-text, .uc-icon-container) { color: var(--uc-primary); } @@ -57,18 +57,18 @@ min-height: 180px; } -:where([lr-drop-area])[with-icon] .content-wrapper { +:where([lr-drop-area])[with-icon] .uc-content-wrapper { display: flex; flex-direction: column; } -:where([lr-drop-area])[with-icon] .text { +:where([lr-drop-area])[with-icon] .uc-text { color: var(--uc-foreground); font-weight: 500; font-size: 1.1em; } -:where([lr-drop-area])[with-icon] .icon-container { +:where([lr-drop-area])[with-icon] .uc-icon-container { position: relative; width: 64px; height: 64px; @@ -95,45 +95,45 @@ transform: translateY(48px); } -:where([lr-drop-area])[with-icon]:hover .icon-container, -:where([lr-drop-area])[with-icon]:hover .text { +:where([lr-drop-area])[with-icon]:hover .uc-icon-container, +:where([lr-drop-area])[with-icon]:hover .uc-text { color: var(--uc-primary); } -:where([lr-drop-area])[with-icon]:hover .icon-container { +:where([lr-drop-area])[with-icon]:hover .uc-icon-container { background-color: var(--uc-primary-transparent); } :where([lr-drop-area])[with-icon] - > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) - .icon-container { + > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) + .uc-icon-container { color: var(--uc-primary-foreground); background-color: var(--uc-primary); } :where([lr-drop-area])[with-icon] - > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) - .text { + > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) + .uc-text { color: var(--uc-primary); } :where([lr-drop-area])[with-icon] - > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) + > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) lr-icon:first-child { transform: translateY(-48px); } :where([lr-drop-area])[with-icon] - > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) + > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) lr-icon:last-child { transform: translateY(0); } -:where([lr-drop-area])[with-icon] > .content-wrapper[drag-state='near'] lr-icon:last-child { +:where([lr-drop-area])[with-icon] > .uc-content-wrapper[drag-state='near'] lr-icon:last-child { transform: scale(1.3); } -:where([lr-drop-area])[with-icon] > .content-wrapper[drag-state='over'] lr-icon:last-child { +:where([lr-drop-area])[with-icon] > .uc-content-wrapper[drag-state='over'] lr-icon:last-child { transform: scale(1.5); } @@ -152,7 +152,7 @@ margin: var(--uc-padding); } -:where([lr-drop-area])[fullscreen] .content-wrapper { +:where([lr-drop-area])[fullscreen] .uc-content-wrapper { width: 100%; max-width: calc(var(--uc-dialog-width) * 0.8); height: 180px; @@ -168,18 +168,18 @@ transform var(--uc-transition); } -:where([lr-drop-area])[with-icon][fullscreen][drag-state='active'] > .content-wrapper, -:where([lr-drop-area])[with-icon][fullscreen][drag-state='near'] > .content-wrapper { +:where([lr-drop-area])[with-icon][fullscreen][drag-state='active'] > .uc-content-wrapper, +:where([lr-drop-area])[with-icon][fullscreen][drag-state='near'] > .uc-content-wrapper { transform: translateY(10px); opacity: 0; } -:where([lr-drop-area])[with-icon][fullscreen][drag-state='over'] > .content-wrapper { +:where([lr-drop-area])[with-icon][fullscreen][drag-state='over'] > .uc-content-wrapper { transform: translateY(0px); opacity: 1; } -:is(:where([lr-drop-area])[with-icon][fullscreen]) > .content-wrapper lr-icon:first-child { +:is(:where([lr-drop-area])[with-icon][fullscreen]) > .uc-content-wrapper lr-icon:first-child { transform: translateY(-48px); } diff --git a/blocks/ExternalSource/ExternalSource.js b/blocks/ExternalSource/ExternalSource.js index 87c7e417d..70e8225a9 100644 --- a/blocks/ExternalSource/ExternalSource.js +++ b/blocks/ExternalSource/ExternalSource.js @@ -240,26 +240,26 @@ export class ExternalSource extends UploaderBlock { ExternalSource.template = /* HTML */ ` -
{{activityCaption}}
- -
-
-
- +
+
+
+
-
{{counter}}
+
{{counter}}
diff --git a/blocks/ExternalSource/external-source.css b/blocks/ExternalSource/external-source.css index 53cec0065..694c3a469 100644 --- a/blocks/ExternalSource/external-source.css +++ b/blocks/ExternalSource/external-source.css @@ -16,7 +16,7 @@ lr-external-source { max-height: var(--modal-max-content-height); } -lr-external-source > .content { +lr-external-source > .uc-content { position: relative; display: grid; flex: 1; @@ -37,11 +37,11 @@ lr-external-source iframe { border: none; } -lr-external-source .iframe-wrapper { +lr-external-source .uc-iframe-wrapper { overflow: hidden; } -lr-external-source .toolbar { +lr-external-source .uc-toolbar { display: grid; grid-gap: var(--uc-padding); grid-template-columns: max-content 1fr max-content max-content; @@ -51,11 +51,11 @@ lr-external-source .toolbar { border-top: 1px solid var(--uc-border); } -lr-external-source .back-btn { +lr-external-source .uc-back-btn { padding-left: 0; } -lr-external-source .selected-counter { +lr-external-source .uc-selected-counter { display: flex; grid-gap: var(--uc-padding); align-items: center; diff --git a/blocks/FileItem/FileItem.js b/blocks/FileItem/FileItem.js index 9ff9f7a81..a1be9865e 100644 --- a/blocks/FileItem/FileItem.js +++ b/blocks/FileItem/FileItem.js @@ -423,33 +423,38 @@ export class FileItem extends UploaderBlock { } FileItem.template = /* HTML */ ` -
-
-
+
+
+
-
- {{itemName}} - {{errorText}} +
+ {{itemName}} + {{errorText}}
-
+
- -
- +
`; FileItem.activeInstances = new Set(); diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css index 43fd862d6..9f52c0907 100644 --- a/blocks/FileItem/file-item.css +++ b/blocks/FileItem/file-item.css @@ -11,7 +11,7 @@ lr-file-item:last-of-type { --uc-file-item-gap: 0; } -lr-file-item > .inner { +lr-file-item > .uc-inner { position: relative; display: grid; grid-template-columns: var(--uc-preview-size) 1fr max-content; @@ -26,19 +26,19 @@ lr-file-item > .inner { transition: background-color var(--uc-transition); } -lr-file-item > .inner[focused] { +lr-file-item > .uc-inner[focused] { background-color: transparent; } -lr-file-item > .inner[uploading] .edit-btn { +lr-file-item > .uc-inner[uploading] .uc-edit-btn { display: none; } -lr-file-item > :where(.inner[failed], .inner[limit-overflow]) { +lr-file-item > :where(.uc-inner[failed], .uc-inner[limit-overflow]) { background-color: var(--uc-destructive); } -lr-file-item .thumb { +lr-file-item .uc-thumb { position: relative; display: inline-flex; width: var(--uc-preview-size); @@ -49,7 +49,7 @@ lr-file-item .thumb { border-radius: var(--uc-radius); } -lr-file-item .file-name-wrapper { +lr-file-item .uc-file-name-wrapper { text-align: left; display: flex; flex-direction: column; @@ -62,21 +62,21 @@ lr-file-item .file-name-wrapper { color: var(--uc-muted-foreground); } -lr-file-item .file-name { +lr-file-item .uc-file-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } -lr-file-item .file-error { +lr-file-item .uc-file-error { display: none; color: var(--uc-destructive-foreground); font-size: 0.85em; } -lr-file-item button.remove-btn, -lr-file-item button.edit-btn { +lr-file-item button.uc-remove-btn, +lr-file-item button.uc-edit-btn { color: var(--uc-muted-foreground); } @@ -84,11 +84,11 @@ lr-file-item button svg { pointer-events: none; } -lr-file-item button.upload-btn { +lr-file-item button.uc-upload-btn { display: none; } -lr-file-item .badge { +lr-file-item .uc-badge { position: absolute; bottom: 2px; right: 2px; @@ -107,32 +107,32 @@ lr-file-item .badge { align-items: center; } -lr-file-item > .inner:where([failed], [limit-overflow], [finished]) .badge { +lr-file-item > .uc-inner:where([failed], [limit-overflow], [finished]) .uc-badge { transform: scale(1); opacity: 1; } -lr-file-item > .inner:where([failed], [limit-overflow]) .badge { +lr-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-badge { background-color: var(--uc-destructive-foreground); } -lr-file-item > .inner:where([failed], [limit-overflow]) .file-error { +lr-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-file-error { display: block; } -lr-file-item .badge lr-icon, -lr-file-item .badge lr-icon svg { +lr-file-item .uc-badge lr-icon, +lr-file-item .uc-badge lr-icon svg { width: 100%; height: 100%; } -lr-file-item .progress-bar { +lr-file-item .uc-progress-bar { opacity: 0.5; top: calc(100% - 2px); height: 2px; } -lr-file-item .file-actions { +lr-file-item .uc-file-actions { display: flex; gap: 2px; align-items: center; diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index ced041b1d..50491fb46 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -24,7 +24,7 @@ pointer-events: auto; } -:where([lr-modal])[dialog-fallback] dialog[open] + .backdrop { +:where([lr-modal])[dialog-fallback] dialog[open] + .uc-backdrop { position: fixed; top: 0px; left: 0px; @@ -37,7 +37,7 @@ pointer-events: auto; } -:where([lr-modal])[strokes][dialog-fallback] dialog[open] + .backdrop { +:where([lr-modal])[strokes][dialog-fallback] dialog[open] + .uc-backdrop { background-image: var(--modal-backdrop-background-image); } @@ -86,7 +86,7 @@ } @media only screen and (max-width: 430px), only screen and (max-height: 600px) { - :where([lr-modal]) > dialog > .content { + :where([lr-modal]) > dialog > .uc-content { height: var(--modal-max-content-height); } } diff --git a/blocks/ProgressBar/ProgressBar.js b/blocks/ProgressBar/ProgressBar.js index da09bfca3..a8e0f8688 100644 --- a/blocks/ProgressBar/ProgressBar.js +++ b/blocks/ProgressBar/ProgressBar.js @@ -30,9 +30,9 @@ export class ProgressBar extends Block { }); this.defineAccessor('visible', (visible) => { - this.ref.line.classList.toggle('progress--hidden', !visible); + this.ref.line.classList.toggle('uc-progress--hidden', !visible); }); } } -ProgressBar.template = /* HTML */ `
`; +ProgressBar.template = /* HTML */ `
`; diff --git a/blocks/ProgressBar/progress-bar.css b/blocks/ProgressBar/progress-bar.css index 7a82eaeb4..0e3d4bab3 100644 --- a/blocks/ProgressBar/progress-bar.css +++ b/blocks/ProgressBar/progress-bar.css @@ -9,7 +9,7 @@ lr-progress-bar { pointer-events: none; } -lr-progress-bar .progress { +lr-progress-bar .uc-progress { width: calc(var(--l-width) * 1%); height: 100%; background-color: var(--uc-primary); @@ -20,6 +20,6 @@ lr-progress-bar .progress { opacity 0.3s; } -lr-progress-bar .progress--hidden { +lr-progress-bar .uc-progress--hidden { opacity: 0; } diff --git a/blocks/Range/Range.js b/blocks/Range/Range.js index 3c89a4f07..5b51b33a1 100644 --- a/blocks/Range/Range.js +++ b/blocks/Range/Range.js @@ -34,10 +34,10 @@ export class Range extends BaseComponent { } Range.template = /* HTML */ ` -
-
-
-
+
+
+
+
diff --git a/blocks/Range/range.css b/blocks/Range/range.css index d190cd664..5c57b9a48 100644 --- a/blocks/Range/range.css +++ b/blocks/Range/range.css @@ -16,7 +16,7 @@ lr-range input { opacity: 0; } -lr-range .track-wrapper { +lr-range .uc-track-wrapper { position: absolute; right: 10px; left: 10px; @@ -28,7 +28,7 @@ lr-range .track-wrapper { pointer-events: none; } -lr-range .track { +lr-range .uc-track { position: absolute; right: 0; left: 0; @@ -41,7 +41,7 @@ lr-range .track { opacity: 0.5; } -lr-range .slider { +lr-range .uc-slider { position: absolute; width: 16px; height: 16px; @@ -50,7 +50,7 @@ lr-range .slider { transform: translateX(-50%); } -lr-range .bar { +lr-range .uc-bar { position: absolute; left: 0; height: 100%; @@ -58,7 +58,7 @@ lr-range .bar { border-radius: 2px; } -lr-range .caption { +lr-range .uc-caption { position: absolute; display: inline-flex; justify-content: center; diff --git a/blocks/SimpleBtn/SimpleBtn.js b/blocks/SimpleBtn/SimpleBtn.js index 828f7bb08..80cf5517f 100644 --- a/blocks/SimpleBtn/SimpleBtn.js +++ b/blocks/SimpleBtn/SimpleBtn.js @@ -43,7 +43,7 @@ SimpleBtn.template = /* HTML */ ` -
+
`; diff --git a/blocks/SimpleBtn/simple-btn.css b/blocks/SimpleBtn/simple-btn.css index 3173e637c..d8c01957e 100644 --- a/blocks/SimpleBtn/simple-btn.css +++ b/blocks/SimpleBtn/simple-btn.css @@ -31,7 +31,7 @@ display: contents; } -:where([lr-simple-btn]) .visual-drop-area { +:where([lr-simple-btn]) .uc-visual-drop-area { position: absolute; top: 0px; left: 0px; @@ -50,15 +50,15 @@ transition: opacity var(--uc-transition); } -:where([lr-simple-btn]) > lr-drop-area[drag-state='active'] .visual-drop-area { +:where([lr-simple-btn]) > lr-drop-area[drag-state='active'] .uc-visual-drop-area { opacity: 1; } -:where([lr-simple-btn]) > lr-drop-area[drag-state='inactive'] .visual-drop-area { +:where([lr-simple-btn]) > lr-drop-area[drag-state='inactive'] .uc-visual-drop-area { opacity: 0; } -:where([lr-simple-btn]) > lr-drop-area[drag-state='near'] .visual-drop-area { +:where([lr-simple-btn]) > lr-drop-area[drag-state='near'] .uc-visual-drop-area { opacity: 1; } -:where([lr-simple-btn]) > lr-drop-area[drag-state='over'] .visual-drop-area { +:where([lr-simple-btn]) > lr-drop-area[drag-state='over'] .uc-visual-drop-area { opacity: 1; } diff --git a/blocks/SourceBtn/SourceBtn.js b/blocks/SourceBtn/SourceBtn.js index cf15cee61..b0781df64 100644 --- a/blocks/SourceBtn/SourceBtn.js +++ b/blocks/SourceBtn/SourceBtn.js @@ -136,7 +136,7 @@ export class SourceBtn extends UploaderBlock { SourceBtn.template = /* HTML */ ` `; SourceBtn.bindAttributes({ diff --git a/blocks/SourceBtn/source-btn.css b/blocks/SourceBtn/source-btn.css index d208b300d..c956bdfbe 100644 --- a/blocks/SourceBtn/source-btn.css +++ b/blocks/SourceBtn/source-btn.css @@ -33,7 +33,7 @@ lr-source-btn lr-icon { opacity: 0.8; } -lr-source-btn .txt { +lr-source-btn .uc-txt { display: flex; align-items: center; box-sizing: border-box; diff --git a/blocks/StartFrom/StartFrom.js b/blocks/StartFrom/StartFrom.js index 18ac4a098..fa9900a77 100644 --- a/blocks/StartFrom/StartFrom.js +++ b/blocks/StartFrom/StartFrom.js @@ -11,4 +11,4 @@ export class StartFrom extends ActivityBlock { } } -StartFrom.template = /* HTML */ `
`; +StartFrom.template = /* HTML */ `
`; diff --git a/blocks/StartFrom/start-from.css b/blocks/StartFrom/start-from.css index 889319b44..9a350e1cc 100644 --- a/blocks/StartFrom/start-from.css +++ b/blocks/StartFrom/start-from.css @@ -3,7 +3,7 @@ lr-start-from { overflow-y: auto; } -lr-start-from .content { +lr-start-from .uc-content { display: grid; grid-auto-flow: row; gap: calc(var(--uc-padding) * 2); diff --git a/blocks/UploadList/UploadList.js b/blocks/UploadList/UploadList.js index 8813f81fe..58be9ee4f 100644 --- a/blocks/UploadList/UploadList.js +++ b/blocks/UploadList/UploadList.js @@ -195,39 +195,39 @@ export class UploadList extends UploaderBlock { UploadList.template = /* HTML */ ` - {{headerText}} - -
+
-
+
-
+
-
- -
+
+ +
diff --git a/blocks/UploadList/upload-list.css b/blocks/UploadList/upload-list.css index 01fba9992..e2b79bf5e 100644 --- a/blocks/UploadList/upload-list.css +++ b/blocks/UploadList/upload-list.css @@ -18,12 +18,12 @@ lr-upload-list { max-height: var(--modal-max-content-height); } -lr-upload-list .no-files { +lr-upload-list .uc-no-files { height: 32px; padding: 20px; } -lr-upload-list .files { +lr-upload-list .uc-files { display: block; flex: 1; min-height: 32px; @@ -31,7 +31,7 @@ lr-upload-list .files { overflow: auto; } -lr-upload-list .toolbar { +lr-upload-list .uc-toolbar { display: flex; gap: 4px; justify-content: space-between; @@ -39,7 +39,7 @@ lr-upload-list .toolbar { background-color: var(--uc-background); } -lr-upload-list .toolbar-spacer { +lr-upload-list .uc-toolbar-spacer { flex: 1; } @@ -53,11 +53,11 @@ lr-upload-list lr-drop-area { border-radius: var(--uc-radius); } -lr-upload-list lr-activity-header > .header-text { +lr-upload-list lr-activity-header > .uc-header-text { padding: 0 var(--uc-padding); } -lr-upload-list .common-error { +lr-upload-list .uc-common-error { border-radius: var(--uc-radius); color: var(--uc-destructive-foreground); background-color: var(--uc-destructive); @@ -69,6 +69,6 @@ lr-upload-list .common-error { font-size: 0.925em; } -lr-upload-list .add-more-btn lr-icon { +lr-upload-list .uc-add-more-btn lr-icon { display: none; } diff --git a/blocks/UrlSource/UrlSource.js b/blocks/UrlSource/UrlSource.js index 255a22ab9..b10554f98 100644 --- a/blocks/UrlSource/UrlSource.js +++ b/blocks/UrlSource/UrlSource.js @@ -38,22 +38,22 @@ export class UrlSource extends UploaderBlock { UrlSource.template = /* HTML */ ` -
- -
- + + diff --git a/blocks/UrlSource/url-source.css b/blocks/UrlSource/url-source.css index ba3e33b4d..9b854bdbd 100644 --- a/blocks/UrlSource/url-source.css +++ b/blocks/UrlSource/url-source.css @@ -11,7 +11,7 @@ lr-url-source { ); } -lr-url-source > .content { +lr-url-source > .uc-content { display: grid; grid-gap: 4px; grid-template-columns: 1fr min-content; @@ -19,6 +19,6 @@ lr-url-source > .content { padding-top: 0; } -lr-url-source .url-input { +lr-url-source .uc-url-input { display: flex; } diff --git a/blocks/themes/lr-basic/common.css b/blocks/themes/lr-basic/common.css index 748d2d343..74be65242 100644 --- a/blocks/themes/lr-basic/common.css +++ b/blocks/themes/lr-basic/common.css @@ -38,36 +38,36 @@ transition: background-color var(--uc-transition); } -:where([lr-wgt-common]) button.primary-btn { +:where([lr-wgt-common]) button.uc-primary-btn { color: var(--uc-primary-foreground); background-color: var(--uc-primary); } -:where([lr-wgt-common]) button.primary-btn:hover { +:where([lr-wgt-common]) button.uc-primary-btn:hover { background-color: var(--uc-primary-hover); } -:where([lr-wgt-common]) button.secondary-btn { +:where([lr-wgt-common]) button.uc-secondary-btn { color: var(--uc-secondary-foreground); background-color: var(--uc-secondary); } -:where([lr-wgt-common]) button.secondary-btn:hover { +:where([lr-wgt-common]) button.uc-secondary-btn:hover { background-color: var(--uc-secondary-hover); } -:where([lr-wgt-common]) button.mini-btn { +:where([lr-wgt-common]) button.uc-mini-btn { height: var(--uc-button-size); padding: 0; background-color: transparent; color: var(--uc-secondary-foreground); } -:where([lr-wgt-common]) button.mini-btn:hover { +:where([lr-wgt-common]) button.uc-mini-btn:hover { background-color: var(--uc-secondary); } -:where([lr-wgt-common]) :is(button[disabled], button.primary-btn[disabled], button.secondary-btn[disabled]) { +:where([lr-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) { opacity: 0.5; pointer-events: none; } diff --git a/solutions/file-uploader/inline/FileUploaderInline.js b/solutions/file-uploader/inline/FileUploaderInline.js index 655cf63b2..d337bd175 100644 --- a/solutions/file-uploader/inline/FileUploaderInline.js +++ b/solutions/file-uploader/inline/FileUploaderInline.js @@ -62,7 +62,7 @@ FileUploaderInline.template = /* HTML */ ` diff --git a/solutions/file-uploader/inline/index.css b/solutions/file-uploader/inline/index.css index ff3ebcf8d..cc7c30713 100644 --- a/solutions/file-uploader/inline/index.css +++ b/solutions/file-uploader/inline/index.css @@ -18,16 +18,16 @@ content: ''; } -[lr-file-uploader-inline] lr-activity-header .close-btn { +[lr-file-uploader-inline] lr-activity-header .uc-close-btn { display: none; } -[lr-file-uploader-inline] lr-copyright .credits { +[lr-file-uploader-inline] lr-copyright .uc-credits { position: static; } @container (min-width: 500px) { - [lr-file-uploader-inline] lr-start-from .content { + [lr-file-uploader-inline] lr-start-from .uc-content { grid-template-columns: 1fr max-content; height: 100%; } @@ -44,11 +44,11 @@ grid-row: span 2; } - [lr-file-uploader-inline] lr-start-from:has(.cancel-btn[hidden]) lr-drop-area { + [lr-file-uploader-inline] lr-start-from:has(.uc-cancel-btn[hidden]) lr-drop-area { grid-row: span 2; } - [lr-file-uploader-inline] lr-start-from:has(lr-copyright[hidden]):has(.cancel-btn[hidden]) lr-drop-area { + [lr-file-uploader-inline] lr-start-from:has(lr-copyright[hidden]):has(.uc-cancel-btn[hidden]) lr-drop-area { grid-row: span 1; } } diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css index 3a31992ed..98976ff5b 100644 --- a/solutions/file-uploader/minimal/index.css +++ b/solutions/file-uploader/minimal/index.css @@ -24,7 +24,7 @@ display: block; } -[lr-file-uploader-minimal] lr-start-from .content { +[lr-file-uploader-minimal] lr-start-from .uc-content { display: flex; flex-direction: column; gap: 4px; @@ -61,7 +61,7 @@ display: none; } -[lr-file-uploader-minimal] lr-upload-list > .toolbar { +[lr-file-uploader-minimal] lr-upload-list > .uc-toolbar { background-color: transparent; } @@ -74,40 +74,40 @@ border-radius: calc(var(--uc-radius) * 1.75); } -[lr-file-uploader-minimal] lr-upload-list .files { +[lr-file-uploader-minimal] lr-upload-list .uc-files { padding: 0; } -[lr-file-uploader-minimal] lr-upload-list .toolbar { +[lr-file-uploader-minimal] lr-upload-list .uc-toolbar { display: block; padding: 0; } -[lr-file-uploader-minimal] lr-upload-list .toolbar .cancel-btn, -[lr-file-uploader-minimal] lr-upload-list .toolbar .upload-btn, -[lr-file-uploader-minimal] lr-upload-list .toolbar .done-btn { +[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-cancel-btn, +[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-upload-btn, +[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-done-btn { display: none; } -[lr-file-uploader-minimal] lr-upload-list .toolbar .add-more-btn { +[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-add-more-btn { width: 100%; height: calc(var(--uc-preview-size) + var(--uc-padding) * 2); margin-top: 4px; } -[lr-file-uploader-minimal] lr-upload-list .toolbar .add-more-btn[disabled] { +[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-add-more-btn[disabled] { display: none; } -[lr-file-uploader-minimal] lr-upload-list .toolbar .add-more-btn > span { +[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-add-more-btn > span { display: none; } -[lr-file-uploader-minimal] lr-upload-list .toolbar .add-more-btn > lr-icon { +[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-add-more-btn > lr-icon { display: flex; } -[lr-file-uploader-minimal] lr-file-item .edit-btn { +[lr-file-uploader-minimal] lr-file-item .uc-edit-btn { display: none; } @@ -116,7 +116,7 @@ height: 100% !important; } -[lr-file-uploader-minimal] lr-file-item lr-progress-bar .progress { +[lr-file-uploader-minimal] lr-file-item lr-progress-bar .uc-progress { background-color: var(--uc-primary-transparent); border-radius: var(--uc-radius); } @@ -128,10 +128,10 @@ border-radius: calc(var(--uc-radius) * 1.75); } -[lr-file-uploader-minimal] lr-upload-list .common-error { +[lr-file-uploader-minimal] lr-upload-list .uc-common-error { margin: 4px 0 0; } -[lr-file-uploader-minimal] lr-copyright .credits { +[lr-file-uploader-minimal] lr-copyright .uc-credits { position: static; } diff --git a/solutions/file-uploader/regular/FileUploaderRegular.js b/solutions/file-uploader/regular/FileUploaderRegular.js index 5c15e67f7..7a010d0c4 100644 --- a/solutions/file-uploader/regular/FileUploaderRegular.js +++ b/solutions/file-uploader/regular/FileUploaderRegular.js @@ -47,7 +47,7 @@ FileUploaderRegular.template = /* HTML */ ` - +