From 2d0bd761c541b9128634bfaca31ab5efbf8ddf04 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Thu, 4 Jul 2024 17:37:23 -0400 Subject: [PATCH 1/8] feat: replaceAll from lr to uc --- abstract/Block.js | 2 +- abstract/SolutionBlock.js | 4 +- abstract/registerBlocks.js | 4 +- blocks/ActivityHeader/activity-header.css | 4 +- blocks/CameraSource/CameraSource.js | 16 +- blocks/CameraSource/camera-source.css | 28 +- .../src/CloudImageEditorBlock.js | 2 +- .../src/EditorButtonControl.js | 2 +- .../src/EditorFilterControl.js | 2 +- .../src/EditorImageCropper.js | 2 +- blocks/CloudImageEditor/src/EditorSlider.js | 4 +- blocks/CloudImageEditor/src/EditorToolbar.js | 40 +-- blocks/CloudImageEditor/src/css/common.css | 284 +++++++++--------- blocks/CloudImageEditor/src/css/icons.css | 4 +- .../src/elements/button/LrBtnUi.js | 2 +- .../src/elements/slider/test.htm | 2 +- blocks/CloudImageEditor/src/template.js | 16 +- blocks/CloudImageEditorActivity/index.css | 4 +- blocks/CloudImageEditorActivity/ref.htm | 16 +- blocks/Config/Config.js | 14 +- blocks/Config/config.css | 2 +- blocks/Copyright/copyright.css | 8 +- blocks/DropArea/DropArea.js | 8 +- blocks/DropArea/drop-area.css | 68 ++--- blocks/ExternalSource/ExternalSource.js | 10 +- blocks/ExternalSource/external-source.css | 18 +- blocks/FileItem/FileItem.js | 10 +- blocks/FileItem/file-item.css | 44 +-- blocks/Icon/icon.css | 4 +- blocks/Img/ImgConfig.js | 2 +- blocks/Img/configurations.js | 2 +- blocks/Img/test.css | 10 +- blocks/Modal/Modal.js | 2 +- blocks/Modal/modal.css | 30 +- blocks/ProgressBar/progress-bar.css | 6 +- blocks/ProgressBarCommon/ProgressBarCommon.js | 2 +- .../ProgressBarCommon/progress-bar-common.css | 4 +- blocks/Range/range.css | 16 +- blocks/Select/select.css | 4 +- blocks/SimpleBtn/SimpleBtn.js | 8 +- blocks/SimpleBtn/simple-btn.css | 22 +- blocks/SourceBtn/SourceBtn.js | 2 +- blocks/SourceBtn/source-btn.css | 10 +- blocks/SourceList/SourceList.js | 2 +- blocks/StartFrom/start-from.css | 10 +- blocks/UploadList/UploadList.js | 12 +- blocks/UploadList/upload-list.css | 20 +- blocks/UrlSource/UrlSource.js | 10 +- blocks/UrlSource/url-source.css | 8 +- .../themes/{lr-basic => uc-basic}/common.css | 38 +-- .../themes/{lr-basic => uc-basic}/config.css | 2 +- .../{lr-basic => uc-basic}/icons/about.svg | 0 .../{lr-basic => uc-basic}/icons/add.svg | 0 .../icons/arrow-down.svg | 0 .../{lr-basic => uc-basic}/icons/back.svg | 0 .../icons/badge-error.svg | 0 .../icons/badge-success.svg | 0 .../{lr-basic => uc-basic}/icons/box.svg | 0 .../{lr-basic => uc-basic}/icons/camera.svg | 0 .../{lr-basic => uc-basic}/icons/close.svg | 0 .../{lr-basic => uc-basic}/icons/collapse.svg | 0 .../{lr-basic => uc-basic}/icons/default.svg | 0 .../{lr-basic => uc-basic}/icons/dropbox.svg | 0 .../icons/edit-file.svg | 0 .../{lr-basic => uc-basic}/icons/error.svg | 0 .../{lr-basic => uc-basic}/icons/evernote.svg | 0 .../{lr-basic => uc-basic}/icons/expand.svg | 0 .../icons/external-source-placeholder.svg | 0 .../{lr-basic => uc-basic}/icons/facebook.svg | 0 .../{lr-basic => uc-basic}/icons/file.svg | 0 .../{lr-basic => uc-basic}/icons/flickr.svg | 0 .../{lr-basic => uc-basic}/icons/gdrive.svg | 0 .../{lr-basic => uc-basic}/icons/gphotos.svg | 0 .../{lr-basic => uc-basic}/icons/huddle.svg | 0 .../{lr-basic => uc-basic}/icons/info.svg | 0 .../icons/instagram.svg | 0 .../{lr-basic => uc-basic}/icons/local.svg | 0 .../{lr-basic => uc-basic}/icons/onedrive.svg | 0 .../icons/remove-file.svg | 0 .../{lr-basic => uc-basic}/icons/select.svg | 0 .../icons/upload-error.svg | 0 .../{lr-basic => uc-basic}/icons/upload.svg | 0 .../{lr-basic => uc-basic}/icons/url.svg | 0 .../{lr-basic => uc-basic}/icons/vk.svg | 0 .../themes/{lr-basic => uc-basic}/index.css | 0 .../{lr-basic => uc-basic}/svg-sprite.js | 0 .../themes/{lr-basic => uc-basic}/theme.css | 14 +- build-items.js | 28 +- build-svg-sprite.js | 4 +- demo/cloud-image-editor.html | 8 +- demo/form.html | 14 +- demo/icons.html | 10 +- demo/locales.html | 8 +- .../secure-delivery-proxy-url-resolver.html | 8 +- .../secure-delivery-proxy-url-template.html | 8 +- demo/raw-inline.html | 8 +- demo/raw-minimal.html | 4 +- demo/raw-regular.html | 8 +- demo/secure-uploads.html | 8 +- demo/validators.html | 8 +- solutions/adaptive-image/index.js | 2 +- .../cloud-image-editor/CloudImageEditor.js | 2 +- solutions/cloud-image-editor/index.css | 2 +- .../inline/FileUploaderInline.js | 24 +- solutions/file-uploader/inline/index.css | 24 +- .../minimal/FileUploaderMinimal.js | 12 +- solutions/file-uploader/minimal/index.css | 50 +-- .../regular/FileUploaderRegular.js | 30 +- solutions/file-uploader/regular/index.css | 2 +- types/jsx.d.ts | 74 ++--- types/test/lr-cloud-image-editor.test-d.tsx | 12 +- types/test/lr-config.test-d.tsx | 28 +- types/test/lr-form-input.test-d.tsx | 4 +- types/test/lr-upload-ctx-provider.test-d.tsx | 2 +- 114 files changed, 625 insertions(+), 627 deletions(-) rename blocks/themes/{lr-basic => uc-basic}/common.css (69%) rename blocks/themes/{lr-basic => uc-basic}/config.css (71%) rename blocks/themes/{lr-basic => uc-basic}/icons/about.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/add.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/arrow-down.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/back.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/badge-error.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/badge-success.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/box.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/camera.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/close.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/collapse.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/default.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/dropbox.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/edit-file.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/error.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/evernote.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/expand.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/external-source-placeholder.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/facebook.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/file.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/flickr.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/gdrive.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/gphotos.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/huddle.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/info.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/instagram.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/local.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/onedrive.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/remove-file.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/select.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/upload-error.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/upload.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/url.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/icons/vk.svg (100%) rename blocks/themes/{lr-basic => uc-basic}/index.css (100%) rename blocks/themes/{lr-basic => uc-basic}/svg-sprite.js (100%) rename blocks/themes/{lr-basic => uc-basic}/theme.css (98%) diff --git a/abstract/Block.js b/abstract/Block.js index 29df50e6b..80c118d73 100644 --- a/abstract/Block.js +++ b/abstract/Block.js @@ -14,7 +14,7 @@ import { l10nProcessor } from './l10nProcessor.js'; import { sharedConfigKey } from './sharedConfigKey.js'; import { A11y } from './a11y.js'; -const TAG_PREFIX = 'lr-'; +const TAG_PREFIX = 'uc-'; // @ts-ignore TODO: fix this export class Block extends BaseComponent { diff --git a/abstract/SolutionBlock.js b/abstract/SolutionBlock.js index 4f5e7eed7..4561bd1df 100644 --- a/abstract/SolutionBlock.js +++ b/abstract/SolutionBlock.js @@ -1,9 +1,9 @@ -import svgIconsSprite from '../blocks/themes/lr-basic/svg-sprite.js'; +import svgIconsSprite from '../blocks/themes/uc-basic/svg-sprite.js'; import { Block } from './Block.js'; import { uploaderBlockCtx } from './CTX.js'; export class SolutionBlock extends Block { - static styleAttrs = ['lr-wgt-common']; + static styleAttrs = ['uc-wgt-common']; requireCtxName = true; init$ = uploaderBlockCtx(this); _template = null; diff --git a/abstract/registerBlocks.js b/abstract/registerBlocks.js index 44d0cb2ac..06611fbe3 100644 --- a/abstract/registerBlocks.js +++ b/abstract/registerBlocks.js @@ -10,8 +10,8 @@ export function registerBlocks(blockExports) { if (tagName.startsWith('-')) { tagName = tagName.replace('-', ''); } - if (!tagName.startsWith('lr-')) { - tagName = 'lr-' + tagName; + if (!tagName.startsWith('uc-')) { + tagName = 'uc-' + tagName; } if (blockExports[blockName].reg) { blockExports[blockName].reg(tagName); diff --git a/blocks/ActivityHeader/activity-header.css b/blocks/ActivityHeader/activity-header.css index 94f19bf92..688485e63 100644 --- a/blocks/ActivityHeader/activity-header.css +++ b/blocks/ActivityHeader/activity-header.css @@ -1,4 +1,4 @@ -lr-activity-header { +uc-activity-header { display: flex; justify-content: space-between; gap: var(--uc-padding); @@ -8,7 +8,7 @@ lr-activity-header { font-size: 1em; } -lr-activity-header > * { +uc-activity-header > * { display: flex; align-items: center; } diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js index 5ce68f2e3..c3e8b025d 100644 --- a/blocks/CameraSource/CameraSource.js +++ b/blocks/CameraSource/CameraSource.js @@ -214,23 +214,23 @@ export class CameraSource extends UploaderBlock { } CameraSource.template = /* HTML */ ` - +
- +
- - + - +
`; diff --git a/blocks/CameraSource/camera-source.css b/blocks/CameraSource/camera-source.css index a8b3ddaaf..dde1fbef9 100644 --- a/blocks/CameraSource/camera-source.css +++ b/blocks/CameraSource/camera-source.css @@ -1,4 +1,4 @@ -lr-camera-source { +uc-camera-source { position: relative; display: flex; flex-direction: column; @@ -10,24 +10,24 @@ lr-camera-source { border-radius: var(--uc-radius); } -[lr-modal] lr-camera-source { +[uc-modal] uc-camera-source { width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2)); height: 100vh; max-height: var(--modal-max-content-height); } -lr-camera-source.uc-initialized { +uc-camera-source.uc-initialized { height: max-content; } @media only screen and (max-width: 430px) { - lr-camera-source { + uc-camera-source { width: calc(100vw - var(--uc-padding) * 2); height: var(--modal-content-height-fill, 100%); } } -lr-camera-source video { +uc-camera-source video { display: block; width: 100%; max-height: 100%; @@ -37,7 +37,7 @@ lr-camera-source video { border-radius: var(--uc-radius); } -lr-camera-source .uc-toolbar { +uc-camera-source .uc-toolbar { position: absolute; bottom: 0; display: flex; @@ -47,7 +47,7 @@ lr-camera-source .uc-toolbar { background-color: var(--uc-background); } -lr-camera-source .uc-content { +uc-camera-source .uc-content { display: flex; flex: 1; justify-content: center; @@ -57,7 +57,7 @@ lr-camera-source .uc-content { overflow: hidden; } -lr-camera-source .uc-message-box { +uc-camera-source .uc-message-box { display: flex; flex-direction: column; grid-gap: 40px; @@ -67,12 +67,12 @@ lr-camera-source .uc-message-box { color: var(--uc-foreground); } -lr-camera-source .uc-message-box button { +uc-camera-source .uc-message-box button { color: var(--uc-primary-foreground); background-color: var(--uc-primary); } -lr-camera-source .uc-shot-btn { +uc-camera-source .uc-shot-btn { position: absolute; bottom: 20px; width: 58px; @@ -87,21 +87,21 @@ lr-camera-source .uc-shot-btn { transform var(--uc-transition); } -lr-camera-source .uc-shot-btn:hover { +uc-camera-source .uc-shot-btn:hover { transform: scale(1.05); opacity: 1; } -lr-camera-source .uc-shot-btn:active { +uc-camera-source .uc-shot-btn:active { transform: scale(1); opacity: 1; } -lr-camera-source .uc-shot-btn[disabled] { +uc-camera-source .uc-shot-btn[disabled] { bottom: -80px; } -lr-camera-source .uc-shot-btn lr-icon svg { +uc-camera-source .uc-shot-btn uc-icon svg { width: 20px; height: 20px; } diff --git a/blocks/CloudImageEditor/src/CloudImageEditorBlock.js b/blocks/CloudImageEditor/src/CloudImageEditorBlock.js index 5a492f07c..f0ec65f6b 100644 --- a/blocks/CloudImageEditor/src/CloudImageEditorBlock.js +++ b/blocks/CloudImageEditor/src/CloudImageEditorBlock.js @@ -19,7 +19,7 @@ import { TabId } from './toolbar-constants.js'; export class CloudImageEditorBlock extends Block { ctxOwner = true; - static styleAttrs = ['lr-cloud-image-editor']; + static styleAttrs = ['uc-cloud-image-editor']; constructor() { super(); diff --git a/blocks/CloudImageEditor/src/EditorButtonControl.js b/blocks/CloudImageEditor/src/EditorButtonControl.js index 82ecff6f5..0a29bbcdf 100644 --- a/blocks/CloudImageEditor/src/EditorButtonControl.js +++ b/blocks/CloudImageEditor/src/EditorButtonControl.js @@ -38,7 +38,7 @@ export class EditorButtonControl extends Block { EditorButtonControl.template = /* HTML */ ` `; diff --git a/blocks/CloudImageEditor/src/EditorFilterControl.js b/blocks/CloudImageEditor/src/EditorFilterControl.js index db7fdaa3f..6e62dc84e 100644 --- a/blocks/CloudImageEditor/src/EditorFilterControl.js +++ b/blocks/CloudImageEditor/src/EditorFilterControl.js @@ -150,6 +150,6 @@ export class EditorFilterControl extends EditorButtonControl { EditorFilterControl.template = /* HTML */ ` `; diff --git a/blocks/CloudImageEditor/src/EditorImageCropper.js b/blocks/CloudImageEditor/src/EditorImageCropper.js index ee5f0e1bf..df2987360 100644 --- a/blocks/CloudImageEditor/src/EditorImageCropper.js +++ b/blocks/CloudImageEditor/src/EditorImageCropper.js @@ -547,5 +547,5 @@ export class EditorImageCropper extends Block { EditorImageCropper.template = /* HTML */ ` - + `; diff --git a/blocks/CloudImageEditor/src/EditorSlider.js b/blocks/CloudImageEditor/src/EditorSlider.js index 52c0dc2cc..9282d81ee 100644 --- a/blocks/CloudImageEditor/src/EditorSlider.js +++ b/blocks/CloudImageEditor/src/EditorSlider.js @@ -111,8 +111,8 @@ export class EditorSlider extends Block { } EditorSlider.template = /* HTML */ ` - + > `; diff --git a/blocks/CloudImageEditor/src/EditorToolbar.js b/blocks/CloudImageEditor/src/EditorToolbar.js index bd36ac7f3..2d95b64e4 100644 --- a/blocks/CloudImageEditor/src/EditorToolbar.js +++ b/blocks/CloudImageEditor/src/EditorToolbar.js @@ -19,31 +19,31 @@ import { viewerImageSrc } from './util.js'; /** @param {String} id */ function renderTabToggle(id) { return /* HTML */ ` - - - - + + `; } /** @param {String} id */ function renderTabContent(id) { return /* HTML */ ` - - +
- - + + `; } @@ -400,42 +400,42 @@ export class EditorToolbar extends Block { } EditorToolbar.template = /* HTML */ ` - +
{{*operationTooltip}}
-
${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 c224c83c9..de989c04d 100644 --- a/blocks/CloudImageEditor/src/css/common.css +++ b/blocks/CloudImageEditor/src/css/common.css @@ -1,6 +1,6 @@ /* TODO: we shuoud use basic theme there */ -[lr-cloud-image-editor] { +[uc-cloud-image-editor] { --color-primary-accent: var(--uc-primary); --color-text-base: var(--uc-foreground); --color-text-accent-contrast: var(--uc-background); @@ -46,11 +46,11 @@ max-height: 100%; } -[lr-cloud-image-editor] :is([can-handle-paste]:hover, [can-handle-paste]:focus) { +[uc-cloud-image-editor] :is([can-handle-paste]:hover, [can-handle-paste]:focus) { --can-handle-paste: 'true'; } -[lr-cloud-image-editor] +[uc-cloud-image-editor] :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover) { --filter-effect: var(--hover-filter) !important; --opacity-effect: var(--hover-opacity) !important; @@ -58,42 +58,42 @@ --background-effect: var(--hover-background) !important; } -[lr-cloud-image-editor] :is([tabindex]:active, [with-effects]:active) { +[uc-cloud-image-editor] :is([tabindex]:active, [with-effects]:active) { --filter-effect: var(--down-filter) !important; --opacity-effect: var(--down-opacity) !important; --color-effect: var(--down-color-rgb) !important; --background-effect: var(--down-background) !important; } -[lr-cloud-image-editor] :is([tabindex][active], [with-effects][active]) { +[uc-cloud-image-editor] :is([tabindex][active], [with-effects][active]) { --filter-effect: var(--active-filter) !important; --opacity-effect: var(--active-opacity) !important; --color-effect: var(--active-color-rgb) !important; --background-effect: var(--active-background) !important; } -[lr-cloud-image-editor] [hidden-scrollbar]::-webkit-scrollbar { +[uc-cloud-image-editor] [hidden-scrollbar]::-webkit-scrollbar { display: none; } -[lr-cloud-image-editor] [hidden-scrollbar] { +[uc-cloud-image-editor] [hidden-scrollbar] { -ms-overflow-style: none; scrollbar-width: none; } -[lr-cloud-image-editor].uc-editor_ON { +[uc-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].uc-editor_OFF { +[uc-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] > .uc-wrapper { +[uc-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] > .uc-wrapper { + [uc-cloud-image-editor] > .uc-wrapper { --l-edit-button-width: 70px; --l-toolbar-horizontal-padding: var(--cldtr-gap-min); } } -[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport { +[uc-cloud-image-editor] > .uc-wrapper > .uc-viewport { display: flex; align-items: center; justify-content: center; overflow: hidden; } -[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image { +[uc-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] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_visible_viewer { +[uc-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] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_hidden_to_cropper { +[uc-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] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_hidden_effects { +[uc-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] > .uc-wrapper > .uc-viewport > .uc-image_container { +[uc-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] > .uc-wrapper > .uc-toolbar { +[uc-cloud-image-editor] > .uc-wrapper > .uc-toolbar { position: relative; transition: 0.3s; } -[lr-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content { +[uc-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] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__viewer { +[uc-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] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__editor { +[uc-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__editor { display: flex; } -[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-info_pan { +[uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-info_pan { position: absolute; user-select: none; } -[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-file_type_outer { +[uc-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] > .uc-wrapper > .uc-viewport > .uc-file_type_outer > .uc-file_type { +[uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-file_type_outer > .uc-file_type { padding: 4px 0.8em; } -[lr-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash { +[uc-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] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_content { +[uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_content { display: flex; flex: 1; flex-direction: column; @@ -241,7 +241,7 @@ justify-content: center; } -[lr-cloud-image-editor] +[uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_content @@ -256,7 +256,7 @@ border-radius: 50%; } -[lr-cloud-image-editor] +[uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_content @@ -266,14 +266,14 @@ color: var(--uc-foreground); } -[lr-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_footer { +[uc-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 > .uc-svg { +uc-crop-frame > .uc-svg { position: absolute; top: 0px; left: 0px; @@ -286,7 +286,7 @@ lr-crop-frame > .uc-svg { transition: var(--transition-duration-3); } -lr-crop-frame > .uc-thumb { +uc-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); @@ -299,36 +299,36 @@ lr-crop-frame > .uc-thumb { opacity var(--transition-duration-3); } -lr-crop-frame > .uc-thumb--visible { +uc-crop-frame > .uc-thumb--visible { opacity: 1; pointer-events: auto; } -lr-crop-frame > .uc-thumb--hidden { +uc-crop-frame > .uc-thumb--hidden { opacity: 0; pointer-events: none; } -lr-crop-frame > .uc-guides { +uc-crop-frame > .uc-guides { transition: var(--transition-duration-3); } -lr-crop-frame > .uc-guides--hidden { +uc-crop-frame > .uc-guides--hidden { opacity: 0; } -lr-crop-frame > .uc-guides--semi-hidden { +uc-crop-frame > .uc-guides--semi-hidden { opacity: 0.2; } -lr-crop-frame > .uc-guides--visible { +uc-crop-frame > .uc-guides--visible { opacity: 1; } -lr-editor-button-control, -lr-editor-crop-button-control, -lr-editor-filter-control, -lr-editor-operation-control { +uc-editor-button-control, +uc-editor-crop-button-control, +uc-editor-filter-control, +uc-editor-operation-control { --l-base-min-width: var(--uc-button-size); --l-base-height: var(--uc-button-size); --opacity-effect: var(--idle-opacity); @@ -350,10 +350,10 @@ lr-editor-operation-control { --down-background: var(--uc-secondary); } -lr-editor-button-control > button, -lr-editor-crop-button-control > button, -lr-editor-filter-control > button, -lr-editor-operation-control > button { +uc-editor-button-control > button, +uc-editor-crop-button-control > button, +uc-editor-filter-control > button, +uc-editor-operation-control > button { all: unset; position: relative; display: grid; @@ -368,22 +368,22 @@ lr-editor-operation-control > button { transition: var(--l-width-transition); } -:where(lr-editor-button-control, lr-editor-crop-button-control, lr-editor-filter-control, lr-editor-operation-control) - > lr-icon +:where(uc-editor-button-control, uc-editor-crop-button-control, uc-editor-filter-control, uc-editor-operation-control) + > uc-icon > svg { width: var(--size-icon); height: var(--size-icon); } -lr-editor-filter-control > lr-icon.uc-original-icon > svg { +uc-editor-filter-control > uc-icon.uc-original-icon > svg { width: 100%; height: 100%; } -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 { +uc-editor-button-control.uc-active, +uc-editor-operation-control.uc-active, +uc-editor-crop-button-control.uc-active, +uc-editor-filter-control.uc-active { --idle-color-rgb: var(--uc-primary); --idle-background: var(--uc-primary-transparent); --idle-opacity: 0.9; @@ -392,25 +392,25 @@ lr-editor-filter-control.uc-active { --hover-opacity: 1; } -lr-editor-filter-control.uc-not_active .uc-preview[loaded] { +uc-editor-filter-control.uc-not_active .uc-preview[loaded] { opacity: 1; } -lr-editor-filter-control.uc-active .uc-preview { +uc-editor-filter-control.uc-active .uc-preview { opacity: 0; } -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 { +uc-editor-button-control.uc-not_active, +uc-editor-operation-control.uc-not_active, +uc-editor-crop-button-control.uc-not_active, +uc-editor-filter-control.uc-not_active { --idle-color-rgb: var(--uc-secondary-foreground); } -lr-editor-button-control > button::before, -lr-editor-operation-control > button::before, -lr-editor-crop-button-control > button::before, -lr-editor-filter-control > button::before { +uc-editor-button-control > button::before, +uc-editor-operation-control > button::before, +uc-editor-crop-button-control > button::before, +uc-editor-filter-control > button::before { position: absolute; content: ''; right: 0; @@ -423,17 +423,17 @@ lr-editor-filter-control > button::before { transition: var(--transition-duration-3); } -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 { +uc-editor-button-control > button .uc-title, +uc-editor-operation-control > button .uc-title, +uc-editor-crop-button-control > button .uc-title, +uc-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 .uc-preview { +uc-editor-filter-control > button .uc-preview { position: absolute; right: 0; left: 0; @@ -448,12 +448,12 @@ lr-editor-filter-control > button .uc-preview { transition: var(--transition-duration-3); } -lr-editor-filter-control > .uc-original-icon { +uc-editor-filter-control > .uc-original-icon { color: var(--color-effect); opacity: 0.3; } -lr-editor-image-cropper { +uc-editor-image-cropper { position: absolute; top: 0px; left: 0px; @@ -467,7 +467,7 @@ lr-editor-image-cropper { color: var(--color-crop-guides); } -lr-editor-image-cropper.uc-active_from_editor { +uc-editor-image-cropper.uc-active_from_editor { transform: scale(1) translate(0px, 0px); opacity: 1; transition: @@ -476,7 +476,7 @@ lr-editor-image-cropper.uc-active_from_editor { pointer-events: auto; } -lr-editor-image-cropper.uc-active_from_viewer { +uc-editor-image-cropper.uc-active_from_viewer { transform: scale(1) translate(0px, 0px); opacity: 1; transition: @@ -485,7 +485,7 @@ lr-editor-image-cropper.uc-active_from_viewer { pointer-events: auto; } -lr-editor-image-cropper.uc-inactive_to_editor { +uc-editor-image-cropper.uc-inactive_to_editor { opacity: 0; transition: transform var(--transition-duration-4) cubic-bezier(0.37, 0, 0.63, 1), @@ -493,7 +493,7 @@ lr-editor-image-cropper.uc-inactive_to_editor { pointer-events: none; } -lr-editor-image-cropper > .uc-canvas { +uc-editor-image-cropper > .uc-canvas { position: absolute; top: 0px; left: 0px; @@ -503,7 +503,7 @@ lr-editor-image-cropper > .uc-canvas { height: 100%; } -lr-editor-image-fader { +uc-editor-image-fader { position: absolute; top: 0px; left: 0px; @@ -512,7 +512,7 @@ lr-editor-image-fader { height: 100%; } -lr-editor-image-fader.uc-active_from_viewer { +uc-editor-image-fader.uc-active_from_viewer { z-index: 3; transform: scale(1); opacity: 1; @@ -522,7 +522,7 @@ lr-editor-image-fader.uc-active_from_viewer { pointer-events: auto; } -lr-editor-image-fader.uc-active_from_cropper { +uc-editor-image-fader.uc-active_from_cropper { z-index: 3; transform: scale(1); opacity: 1; @@ -532,7 +532,7 @@ lr-editor-image-fader.uc-active_from_cropper { pointer-events: auto; } -lr-editor-image-fader.uc-inactive_to_cropper { +uc-editor-image-fader.uc-inactive_to_cropper { z-index: 3; transform: scale(1); opacity: 0; @@ -542,7 +542,7 @@ lr-editor-image-fader.uc-inactive_to_cropper { pointer-events: none; } -lr-editor-image-fader .uc-fader-image { +uc-editor-image-fader .uc-fader-image { position: absolute; top: 0px; left: 0px; @@ -555,7 +555,7 @@ lr-editor-image-fader .uc-fader-image { content-visibility: auto; } -lr-editor-image-fader .uc-fader-image--preview { +uc-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); @@ -564,7 +564,7 @@ lr-editor-image-fader .uc-fader-image--preview { transition: var(--transition-duration-3); } -lr-editor-scroller { +uc-editor-scroller { display: flex; align-items: center; width: 100%; @@ -572,7 +572,7 @@ lr-editor-scroller { overflow-x: scroll; } -lr-editor-slider { +uc-editor-slider { display: flex; align-items: center; justify-content: center; @@ -580,14 +580,14 @@ lr-editor-slider { height: var(--size-panel-heading); } -lr-editor-toolbar { +uc-editor-toolbar { position: relative; width: 100%; height: 100%; } @media only screen and (max-width: 600px) { - lr-editor-toolbar { + uc-editor-toolbar { --l-tab-gap: var(--cldtr-gap-mid-1); --l-slider-padding: var(--uc-padding); --l-controls-padding: var(--uc-padding); @@ -595,21 +595,21 @@ lr-editor-toolbar { } @media only screen and (min-width: 601px) { - lr-editor-toolbar { + uc-editor-toolbar { --l-tab-gap: var(--cldtr-gap-max); --l-slider-padding: var(--uc-padding); --l-controls-padding: var(--uc-padding); } } -lr-editor-toolbar > .uc-toolbar-container { +uc-editor-toolbar > .uc-toolbar-container { position: relative; width: 100%; height: 100%; overflow: hidden; } -lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar { +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar { position: absolute; display: grid; grid-template-rows: 1fr 1fr; @@ -622,25 +622,25 @@ lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar { visibility var(--transition-duration-3) ease-in-out; } -lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--visible { +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--visible { transform: translateY(0px); opacity: 1; pointer-events: auto; } -lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--top-hidden { +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--top-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; } -lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--bottom-hidden { +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--bottom-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } -lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row { +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row { display: flex; align-items: center; justify-content: space-between; @@ -648,7 +648,7 @@ lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row { padding-left: var(--l-controls-padding); } -lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles { +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles { position: relative; display: grid; grid-auto-flow: column; @@ -657,7 +657,7 @@ lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > height: 100%; } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row @@ -673,11 +673,11 @@ lr-editor-toolbar transition: transform var(--transition-duration-3); } -lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row { +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row { position: relative; } -lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content { +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content { position: absolute; top: 0px; left: 0px; @@ -689,7 +689,7 @@ lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-ro content-visibility: auto; } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row @@ -698,7 +698,7 @@ lr-editor-toolbar pointer-events: auto; } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row @@ -707,7 +707,7 @@ lr-editor-toolbar pointer-events: none; } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row @@ -716,7 +716,7 @@ lr-editor-toolbar display: contents; } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row @@ -725,7 +725,7 @@ lr-editor-toolbar display: none; } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row @@ -733,30 +733,30 @@ lr-editor-toolbar display: none; } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles > .uc-tab-toggle - > lr-btn-ui { + > uc-btn-ui { width: var(--uc-button-size); } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles > .uc-tab-toggle - > lr-btn-ui - > lr-icon + > uc-btn-ui + > uc-icon > svg { width: var(--size-icon); height: var(--size-icon); } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row @@ -770,7 +770,7 @@ lr-editor-toolbar padding-left: var(--uc-padding); } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row @@ -782,7 +782,7 @@ lr-editor-toolbar gap: 6px; } -lr-editor-toolbar +uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row @@ -791,11 +791,11 @@ lr-editor-toolbar padding-right: var(--uc-padding); } -lr-editor-toolbar .uc-controls-list_last-item { +uc-editor-toolbar .uc-controls-list_last-item { margin-right: var(--cldtr-gap-max); } -lr-editor-toolbar .uc-info-tooltip_container { +uc-editor-toolbar .uc-info-tooltip_container { position: absolute; display: flex; align-items: flex-start; @@ -804,7 +804,7 @@ lr-editor-toolbar .uc-info-tooltip_container { height: 100%; } -lr-editor-toolbar .uc-info-tooltip_wrapper { +uc-editor-toolbar .uc-info-tooltip_wrapper { position: absolute; top: calc(-100% - var(--cldtr-gap-mid-2)); display: flex; @@ -814,7 +814,7 @@ lr-editor-toolbar .uc-info-tooltip_wrapper { pointer-events: none; } -lr-editor-toolbar .uc-info-tooltip { +uc-editor-toolbar .uc-info-tooltip { z-index: 3; padding: 3px 6px; color: var(--color-text-base); @@ -828,17 +828,17 @@ lr-editor-toolbar .uc-info-tooltip { transition: var(--transition-duration-3); } -lr-editor-toolbar .uc-info-tooltip_visible { +uc-editor-toolbar .uc-info-tooltip_visible { transform: translateY(0px); opacity: 1; } -lr-editor-toolbar .uc-slider { +uc-editor-toolbar .uc-slider { padding-right: var(--l-slider-padding); padding-left: var(--l-slider-padding); } -lr-btn-ui > button { +uc-btn-ui > button { --filter-effect: var(--idle-brightness); --opacity-effect: var(--idle-opacity); --color-effect: var(--idle-color-rgb); @@ -869,11 +869,11 @@ lr-btn-ui > button { user-select: none; } -lr-btn-ui .uc-text { +uc-btn-ui .uc-text { white-space: nowrap; } -lr-btn-ui .uc-icon { +uc-btn-ui .uc-icon { display: flex; align-items: center; justify-content: center; @@ -882,27 +882,27 @@ lr-btn-ui .uc-icon { transition: var(--l-transition-effect); } -lr-btn-ui .uc-icon_left { +uc-btn-ui .uc-icon_left { margin-right: var(--cldtr-gap-mid-1); margin-left: 0px; } -lr-btn-ui .uc-icon_right { +uc-btn-ui .uc-icon_right { margin-right: 0px; margin-left: var(--cldtr-gap-mid-1); } -lr-btn-ui .uc-icon_single { +uc-btn-ui .uc-icon_single { margin-right: 0px; margin-left: 0px; } -lr-btn-ui .uc-icon_hidden { +uc-btn-ui .uc-icon_hidden { display: none; margin: 0; } -lr-btn-ui.uc-primary > button { +uc-btn-ui.uc-primary > button { --idle-color-rgb: var(--uc-primary-foreground); --idle-brightness: 1; --idle-opacity: 1; @@ -921,7 +921,7 @@ lr-btn-ui.uc-primary > button { --active-background: var(--uc-primary); } -lr-btn-ui.uc-primary-icon > button { +uc-btn-ui.uc-primary-icon > button { --idle-color-rgb: var(--uc-primary); --idle-brightness: 1; --idle-opacity: 1; @@ -943,7 +943,7 @@ lr-btn-ui.uc-primary-icon > button { width: var(--uc-button-size); } -lr-btn-ui.uc-secondary > button { +uc-btn-ui.uc-secondary > button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; @@ -962,7 +962,7 @@ lr-btn-ui.uc-secondary > button { --active-background: transparent; } -lr-btn-ui.uc-secondary-icon > button { +uc-btn-ui.uc-secondary-icon > button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; @@ -984,7 +984,7 @@ lr-btn-ui.uc-secondary-icon > button { width: var(--uc-button-size); } -lr-btn-ui.uc-tab > button { +uc-btn-ui.uc-tab > button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; @@ -1006,7 +1006,7 @@ lr-btn-ui.uc-tab > button { width: var(--uc-button-size); } -lr-btn-ui.uc-default > button { +uc-btn-ui.uc-default > button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; @@ -1025,7 +1025,7 @@ lr-btn-ui.uc-default > button { --active-background: var(--uc-primary-transparent); } -lr-line-loader-ui { +uc-line-loader-ui { position: absolute; top: 0px; left: 0px; @@ -1035,13 +1035,13 @@ lr-line-loader-ui { opacity: 0.5; } -lr-line-loader-ui .uc-inner { +uc-line-loader-ui .uc-inner { width: 25%; max-width: 200px; height: 100%; } -lr-line-loader-ui .uc-line { +uc-line-loader-ui .uc-line { width: 100%; height: 100%; background-color: var(--uc-primary); @@ -1049,7 +1049,7 @@ lr-line-loader-ui .uc-line { transition: transform 1s; } -lr-slider-ui { +uc-slider-ui { --l-thumb-size: 24px; --l-zero-dot-size: 5px; --l-zero-dot-offset: 2px; @@ -1067,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 .uc-thumb { +uc-slider-ui .uc-thumb { position: absolute; left: 0px; width: var(--l-thumb-size); @@ -1081,7 +1081,7 @@ lr-slider-ui .uc-thumb { background-color var(--transition-duration-2); } -lr-slider-ui .uc-steps { +uc-slider-ui .uc-steps { position: absolute; display: flex; align-items: center; @@ -1093,7 +1093,7 @@ lr-slider-ui .uc-steps { padding-left: calc(var(--l-thumb-size) / 2); } -lr-slider-ui .uc-border-step { +uc-slider-ui .uc-border-step { width: 0px; height: 10px; border-right: 1px solid var(--l-color); @@ -1101,7 +1101,7 @@ lr-slider-ui .uc-border-step { transition: border-color var(--transition-duration-2); } -lr-slider-ui .uc-minor-step { +uc-slider-ui .uc-minor-step { width: 0px; height: 4px; border-right: 1px solid var(--l-color); @@ -1109,7 +1109,7 @@ lr-slider-ui .uc-minor-step { transition: border-color var(--transition-duration-2); } -lr-slider-ui .uc-zero-dot { +uc-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); @@ -1121,7 +1121,7 @@ lr-slider-ui .uc-zero-dot { transition: var(--transition-duration-3); } -lr-slider-ui .uc-input { +uc-slider-ui .uc-input { position: absolute; width: calc(100% - 10px); height: 100%; @@ -1130,28 +1130,28 @@ lr-slider-ui .uc-input { opacity: 0; } -lr-presence-toggle.uc-transition { +uc-presence-toggle.uc-transition { transition: opacity var(--transition-duration-3), visibility var(--transition-duration-3); } -lr-presence-toggle.uc-visible { +uc-presence-toggle.uc-visible { opacity: 1; pointer-events: inherit; } -lr-presence-toggle.uc-hidden { +uc-presence-toggle.uc-hidden { opacity: 0; pointer-events: none; } -lr-presence-toggle.uc-initial { +uc-presence-toggle.uc-initial { display: none !important; transition: none !important; } -[lr-cloud-image-editor] [role='button']:focus-visible, -[lr-cloud-image-editor] button:focus-visible { +[uc-cloud-image-editor] [role='button']:focus-visible, +[uc-cloud-image-editor] button:focus-visible { outline: 1px auto -webkit-focus-ring-color; } diff --git a/blocks/CloudImageEditor/src/css/icons.css b/blocks/CloudImageEditor/src/css/icons.css index 7fa07e5fa..29b49169d 100644 --- a/blocks/CloudImageEditor/src/css/icons.css +++ b/blocks/CloudImageEditor/src/css/icons.css @@ -1,4 +1,4 @@ -:where([lr-cloud-image-editor]) lr-icon { +:where([uc-cloud-image-editor]) uc-icon { display: flex; align-items: center; justify-content: center; @@ -6,7 +6,7 @@ height: 100%; } -:where([lr-cloud-image-editor]) lr-icon svg { +:where([uc-cloud-image-editor]) uc-icon svg { width: calc(var(--uc-button-size) / 2); height: calc(var(--uc-button-size) / 2); } diff --git a/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js b/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js index ca09ce851..b8d00f7ca 100644 --- a/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js +++ b/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js @@ -84,7 +84,7 @@ LrBtnUi.bindAttributes({ text: 'text', icon: 'icon', reverse: 'reverse', theme: LrBtnUi.template = /* HTML */ ` `; diff --git a/blocks/CloudImageEditor/src/elements/slider/test.htm b/blocks/CloudImageEditor/src/elements/slider/test.htm index 202526dfd..45c4a0bb7 100644 --- a/blocks/CloudImageEditor/src/elements/slider/test.htm +++ b/blocks/CloudImageEditor/src/elements/slider/test.htm @@ -7,6 +7,6 @@ - + diff --git a/blocks/CloudImageEditor/src/template.js b/blocks/CloudImageEditor/src/template.js index 6f3e042e5..61c2365db 100644 --- a/blocks/CloudImageEditor/src/template.js +++ b/blocks/CloudImageEditor/src/template.js @@ -4,32 +4,32 @@ import svgIconsSprite from './svg-sprite.js'; export const TEMPLATE = /* HTML */ ` ${svgIconsSprite}
- +
- +
Network error
- +
- +
{{fileType}}
- - + +
{{msg}}
- +
- +
diff --git a/blocks/CloudImageEditorActivity/index.css b/blocks/CloudImageEditorActivity/index.css index 8ad271e8d..2c0ed9144 100644 --- a/blocks/CloudImageEditorActivity/index.css +++ b/blocks/CloudImageEditorActivity/index.css @@ -1,4 +1,4 @@ -lr-cloud-image-editor-activity { +uc-cloud-image-editor-activity { position: relative; display: flex; width: 100%; @@ -7,7 +7,7 @@ lr-cloud-image-editor-activity { background-color: var(--uc-background); } -[lr-modal] lr-cloud-image-editor-activity { +[uc-modal] uc-cloud-image-editor-activity { width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2)); height: var(--modal-content-height-fill, 100%); } diff --git a/blocks/CloudImageEditorActivity/ref.htm b/blocks/CloudImageEditorActivity/ref.htm index 04a50d53c..754168f15 100644 --- a/blocks/CloudImageEditorActivity/ref.htm +++ b/blocks/CloudImageEditorActivity/ref.htm @@ -2,7 +2,7 @@

Cloud image editor

Load image by UUID

- + - - + +> diff --git a/demo/form.html b/demo/form.html index 15d42b2e1..6f3013a7d 100644 --- a/demo/form.html +++ b/demo/form.html @@ -3,7 +3,7 @@ - + - - - +> + + diff --git a/demo/locales.html b/demo/locales.html index 67c13cadf..81c109cd3 100644 --- a/demo/locales.html +++ b/demo/locales.html @@ -102,7 +102,7 @@ LR.registerBlocks(LR); - const config = document.querySelector('lr-config'); + const config = document.querySelector('uc-config'); document.querySelector('#locale-radio').innerHTML = `
@@ -131,10 +131,10 @@ const setMode = (mode) => { document.querySelector('#container').innerHTML = ` - + > `; }; @@ -163,7 +163,7 @@ setMode('regular'); - +
diff --git a/demo/preview-proxy/secure-delivery-proxy-url-resolver.html b/demo/preview-proxy/secure-delivery-proxy-url-resolver.html index 71a8fb2d2..4f8d82bcc 100644 --- a/demo/preview-proxy/secure-delivery-proxy-url-resolver.html +++ b/demo/preview-proxy/secure-delivery-proxy-url-resolver.html @@ -23,13 +23,13 @@ LR.registerBlocks(LR); - const config = document.querySelector('lr-config'); + const config = document.querySelector('uc-config'); config.secureDeliveryProxyUrlResolver = (previewUrl) => { return `http://localhost:3000/preview?url=${encodeURIComponent(previewUrl)}` }; - - - + + + diff --git a/demo/preview-proxy/secure-delivery-proxy-url-template.html b/demo/preview-proxy/secure-delivery-proxy-url-template.html index 1a9a42603..45d68bda1 100644 --- a/demo/preview-proxy/secure-delivery-proxy-url-template.html +++ b/demo/preview-proxy/secure-delivery-proxy-url-template.html @@ -25,10 +25,10 @@ - - + - +> + diff --git a/demo/raw-inline.html b/demo/raw-inline.html index 1c76c07ef..91c40fa10 100644 --- a/demo/raw-inline.html +++ b/demo/raw-inline.html @@ -33,13 +33,13 @@ - - + +> diff --git a/demo/raw-minimal.html b/demo/raw-minimal.html index 0d30c6652..eb6559614 100644 --- a/demo/raw-minimal.html +++ b/demo/raw-minimal.html @@ -33,5 +33,5 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/demo/raw-regular.html b/demo/raw-regular.html index cb6cc9539..c31d31819 100644 --- a/demo/raw-regular.html +++ b/demo/raw-regular.html @@ -33,8 +33,8 @@ - - - +> + + diff --git a/demo/secure-uploads.html b/demo/secure-uploads.html index 105e96d15..3356127aa 100644 --- a/demo/secure-uploads.html +++ b/demo/secure-uploads.html @@ -50,7 +50,7 @@ return { secureSignature, secureExpire: getSecureExpire(options) }; }; - const config = document.querySelector('lr-config'); + const config = document.querySelector('uc-config'); config.secureUploadsSignatureResolver = async () => { const token = await generateSecureSignature('', { lifetime: 60 * 1000 }); console.log('Generating secure signature...', token); @@ -59,6 +59,6 @@ - - - + + + diff --git a/demo/validators.html b/demo/validators.html index 5c1c297e1..31773796e 100644 --- a/demo/validators.html +++ b/demo/validators.html @@ -35,12 +35,12 @@ - - - + + + ``` @@ -96,9 +96,9 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int 2. Connect `Blocks` from your script file: ```js -import * as LR from '@uploadcare/blocks'; +import * as UC from '@uploadcare/blocks'; -LR.registerBlocks(LR); +UC.registerBlocks(UC); ``` 3. Start using Uploadcare Blocks in your application markup and replace `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package: diff --git a/abstract/Block.js b/abstract/Block.js index d2582859b..fd45874b7 100644 --- a/abstract/Block.js +++ b/abstract/Block.js @@ -337,11 +337,11 @@ export class Block extends BaseComponent { return; } if (name.startsWith(TAG_PREFIX)) { - super.reg(name.startsWith(TAG_PREFIX) ? name : TAG_PREFIX + name, isAlias); + super.reg(name, isAlias); } if (name.startsWith(LEGACY_TAG_PREFIX)) { - super.reg(name.startsWith(LEGACY_TAG_PREFIX) ? name : LEGACY_TAG_PREFIX + name, isAlias); + super.reg(name, isAlias); } } } diff --git a/abstract/connectBlocksFrom.js b/abstract/connectBlocksFrom.js index 43101596b..8e8f8b978 100644 --- a/abstract/connectBlocksFrom.js +++ b/abstract/connectBlocksFrom.js @@ -1,6 +1,6 @@ import { registerBlocks } from './registerBlocks.js'; -export const LR_WINDOW_KEY = 'LR'; +export const UC_WINDOW_KEY = 'UC'; /** * @param {String} url Blocks pack url @@ -13,8 +13,8 @@ export async function connectBlocksFrom(url, register = false) { resolve(null); return; } - if (typeof window === 'object' && window[LR_WINDOW_KEY]) { - resolve(window[LR_WINDOW_KEY]); + if (typeof window === 'object' && window[UC_WINDOW_KEY]) { + resolve(window[UC_WINDOW_KEY]); return; } let script = document.createElement('script'); @@ -25,7 +25,7 @@ export async function connectBlocksFrom(url, register = false) { }; script.onload = () => { /** @type {import('../index.js')} */ - let blocks = window[LR_WINDOW_KEY]; + let blocks = window[UC_WINDOW_KEY]; register && registerBlocks(blocks); resolve(blocks); }; diff --git a/build.js b/build.js index 3200297e9..48e4a27f6 100644 --- a/build.js +++ b/build.js @@ -27,7 +27,7 @@ function build(buildItem) { .build({ entryPoints: [buildItem.in], format: buildItem.iife ? 'iife' : 'esm', - globalName: buildItem.iife ? 'LR' : undefined, + globalName: buildItem.iife ? 'UC' : undefined, keepNames: buildItem.iife ? true : undefined, bundle: true, minify: buildItem.minify, diff --git a/demo/cloud-image-editor.html b/demo/cloud-image-editor.html index ba5a12482..e43591b8e 100644 --- a/demo/cloud-image-editor.html +++ b/demo/cloud-image-editor.html @@ -19,10 +19,10 @@ }