From 11fb184c7a561b77ee44990493c9492bc7c32615 Mon Sep 17 00:00:00 2001 From: ice breaker <1324318532@qq.com> Date: Thu, 17 Sep 2026 09:35:25 +0800 Subject: [PATCH 1/9] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B7=A8=E7=AB=AF?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=9E=84=E5=BB=BA=E4=B8=8E=20HMR=20=E5=B9=B6?= =?UTF-8?q?=E5=8A=A0=E5=BC=BA=E9=AA=8C=E6=94=B6=E8=AF=81=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/wide-cobras-open.md | 22 + demo/issue-1144-uni-app-x-web/package.json | 2 +- demo/uni-app-vite-tailwindcss-v4/package.json | 40 +- .../src/components/TButton.vue | 15 + .../src/pages/index/index.vue | 1 + .../package.json | 2 +- .../package.json | 2 +- .../package.json | 2 +- .../lessons/local-full-run-contracts.md | 184 + .../apps-generator-mode/compare/report.json | 6 +- .../apps-generator-mode/compare/report.md | 6 +- .../compare/report.zh-CN.md | 6 +- .../uni-app-vite-tailwindcss-v4/README.md | 6 +- .../artifacts/app.css | 2606 +++++++++- .../artifacts/pages__index__index.css | 2 +- .../uni-app-vite-tailwindcss-v4/README.md | 6 +- .../artifacts/app.css | 2606 +++++++++- .../artifacts/pages__index__index.css | 2 +- .../uni-app-vite-tailwindcss-v4/README.md | 12 +- .../artifacts/main.wxss | 1 + .../pages-order__pages__home__home.wxss | 1 + .../pages-order__pages__user__user.wxss | 1 + .../sub-independent__pages__index.wxss | 1 + .../artifacts/sub-normal__pages__index.wxss | 1 + .../taro-vite-react-tailwindcss-v4/README.md | 8 +- .../artifacts/app-origin.wxss | 1 + .../sub-independent__pages__index.wxss | 1 + .../artifacts/sub-normal__pages__index.wxss | 1 + .../taro-vite-vue3-tailwindcss-v4/README.md | 8 +- .../artifacts/app-origin.wxss | 1 + .../sub-independent__pages__index.wxss | 1 + .../artifacts/sub-normal__pages__index.wxss | 1 + .../taro-vite-react-tailwindcss-v4/README.md | 10 +- .../artifacts/css__index.1.css | 12 +- .../artifacts/css__index.2.css | 86 +- .../artifacts/css__index.3.css | 51 +- .../artifacts/css__index.4.css | 6 +- .../taro-vite-vue3-tailwindcss-v4/README.md | 8 +- .../artifacts/css__index.1.css | 4 +- .../artifacts/css__index.2.css | 4 +- .../artifacts/css__index.3.css | 97 +- .../README.md | 4 +- .../artifacts/css__chunk.1.css | 4435 +++++++++++----- .../uni-app-vite-tailwindcss-v4/README.md | 12 +- .../artifacts/assets__index.1.css | 168 +- .../artifacts/assets__index.2.css | 92 +- .../artifacts/assets__index.3.css | 234 +- .../artifacts/assets__index.4.css | 234 +- .../artifacts/assets__index.5.css | 12 +- .../taro-vite-react-tailwindcss-v4/README.md | 10 +- .../artifacts/css__index.1.css | 7 +- .../artifacts/css__index.2.css | 53 +- .../artifacts/css__index.3.css | 26 +- .../artifacts/css__index.4.css | 5 +- .../taro-vite-vue3-tailwindcss-v4/README.md | 8 +- .../artifacts/css__index.1.css | 3 +- .../artifacts/css__index.2.css | 3 +- .../artifacts/css__index.3.css | 73 +- .../README.md | 4 +- .../artifacts/css__chunk.1.css | 4438 ++++++++++++----- .../web/uni-app-vite-tailwindcss-v4/README.md | 12 +- .../artifacts/assets__index.1.css | 1679 ++++++- .../artifacts/assets__index.2.css | 632 ++- .../artifacts/assets__index.3.css | 263 +- .../artifacts/assets__index.4.css | 263 +- .../artifacts/assets__index.5.css | 12 +- .../main.wxss | 1 + .../sub-independent/index.wxss | 1 + .../sub-normal/index.wxss | 1 + .../app-origin.wxss | 1 + .../sub-independent/pages/index.wxss | 1 + .../sub-normal/pages/index.wxss | 1 + .../app-origin.wxss | 1 + .../sub-independent/pages/index.wxss | 1 + .../sub-normal/pages/index.wxss | 1 + .../e2e/uni-app-vite-tailwindcss-v4/main.wxss | 1 + .../sub-independent/pages/index.wxss | 1 + .../sub-normal/pages/index.wxss | 1 + .../uni-app-x-vdom-tailwindcss-v4/app.wxss | 686 ++- .../uni-app-x-vdom-tailwindcss-v4/main.wxss | 10 +- e2e/app-marker-visual.test.ts | 43 + e2e/app-marker.test.ts | 39 + e2e/app-output.test.ts | 51 + e2e/app-visual-lifecycle.test.ts | 123 + e2e/demo-visual-live-evidence.test.ts | 61 + e2e/demo-visual-theme.test.ts | 42 +- .../issue-928-baselines/v4-compare.png | Bin 42657 -> 21222 bytes e2e/frameworkIdeHotUpdateArtifacts.test.ts | 58 + e2e/frameworkIdeHotUpdateArtifacts.ts | 20 +- e2e/frameworkIdeStyleHotUpdate.test.ts | 27 + e2e/frameworkIdeStyleHotUpdate.ts | 26 +- e2e/harmony-dom-layout.test.ts | 38 + e2e/harmony-dom-probe.test.ts | 100 + e2e/hbuilderx-hmr-lifecycle.test.ts | 24 +- e2e/hbuilderx-local/app-marker.ts | 35 + e2e/hbuilderx-local/app-output.ts | 36 + e2e/hbuilderx-local/harmony-dom-probe.ts | 158 + e2e/hbuilderx-local/harmony-runtime.ts | 9 +- e2e/hbuilderx-local/hmr-lifecycle.ts | 8 +- e2e/hbuilderx-local/native-log.ts | 25 + e2e/hbuilderx-local/runner.ts | 79 +- e2e/hbuilderx-local/styles.ts | 13 +- e2e/issue-1144-web.test.ts | 14 +- e2e/issue-909-ide.test.ts | 33 +- e2e/issues-977-978-regression.test.ts | 14 + e2e/lynx/run-native.ts | 57 +- e2e/mini-program-screenshot.test.ts | 89 + e2e/preflight-assertions.test.ts | 19 + e2e/preflight-assertions.ts | 23 + e2e/projectEntries.ts | 1 + e2e/react-native/process.ts | 38 + e2e/react-native/run-native.ts | 38 +- e2e/react-native/run-web.ts | 4 +- e2e/root-selector-ide.test.ts | 11 +- e2e/screenshot-color.test.ts | 34 + e2e/shared.ts | 2 + e2e/where-selector-ide.test.ts | 10 +- packages-runtime/ui/package.json | 5 +- packages-runtime/ui/src/index.css | 2 + packages-runtime/ui/test/atomic.test.ts | 37 +- packages-runtime/ui/vite.config.ts | 107 +- .../postcss/src/compat/author-selector.ts | 27 + .../compat/mini-program-css/class-presence.ts | 40 + .../compat/mini-program-css/content-init.ts | 25 + .../compat/mini-program-css/empty-blocks.ts | 8 +- .../src/compat/mini-program-css/index.ts | 1 + .../compat/tailwindcss-v4/author-functions.ts | 90 + packages/postcss/src/framework-pipeline.ts | 57 + .../src/generator-plugin/local-imports.ts | 12 +- packages/postcss/src/handler.ts | 13 +- packages/postcss/src/index.ts | 4 + packages/postcss/src/types.ts | 2 +- .../postcss/test/author-functions.test.ts | 29 + packages/postcss/test/author-selector.test.ts | 21 + packages/postcss/test/class-presence.test.ts | 23 + .../test/content-init-boundary.test.ts | 38 + .../postcss/test/framework-pipeline.test.ts | 90 + packages/postcss/test/handler.root.test.ts | 15 + packages/weapp-tailwindcss/package.json | 1 + .../file-transforms.ts | 9 +- .../src/bundlers/shared/framework-postcss.ts | 19 +- .../src/bundlers/shared/framework-user-css.ts | 4 +- .../bundlers/shared/generated-css-marker.ts | 6 + .../shared/generator-css/class-selectors.ts | 4 +- .../generation-helpers/results.ts | 6 +- .../shared/generator-css/legacy-compat.ts | 7 +- .../generator-css/output-import-shell.ts | 8 +- .../bundlers/shared/generator-css/pipeline.ts | 7 +- .../shared/generator-css/pipeline/context.ts | 6 +- .../generator-css/pipeline/deferred-output.ts | 10 +- .../generator-css/pipeline/execution.ts | 15 +- .../generator-css/pipeline/fallback-output.ts | 14 +- .../generator-css/pipeline/ordered-output.ts | 7 +- .../shared/generator-css/scoped-rules.ts | 7 +- .../source-resolver/apply-reference.ts | 4 +- .../source-resolver/resolve-source.ts | 2 +- .../bundlers/shared/generator-css/types.ts | 10 +- .../user-css/compile-functions.ts | 37 + .../generator-css/user-css/transform.ts | 9 +- .../bundlers/shared/style-handler-options.ts | 7 + .../src/bundlers/shared/v4-generation-core.ts | 19 +- .../css-finalizer/generic-web-fast-path.ts | 2 +- .../src/bundlers/vite/css-finalizer/plugin.ts | 3 +- .../src/bundlers/vite/css-handler-options.ts | 2 +- .../bundlers/vite/frameworks/generic/web.ts | 24 +- .../bundlers/vite/frameworks/taro/index.ts | 9 +- .../src/bundlers/vite/generate-bundle.ts | 12 +- .../vite/generate-bundle/css-assets.ts | 2 +- .../generate-bundle/css-entry-processing.ts | 19 +- .../css-transform-decision-plan.ts | 3 + .../generate-bundle/css-transform-task.ts | 13 +- .../vite/generate-bundle/finalize/bundle.ts | 82 +- .../finalize/sync-processed-css.ts | 82 + .../generate-bundle/framework-style-memory.ts | 56 + .../generate-bundle/remembered-css-replay.ts | 33 +- .../vite/generate-bundle/remembered-css.ts | 16 +- .../vite/generate-bundle/rollup-assets.ts | 2 +- .../generate-bundle/runtime-configured-css.ts | 2 +- .../bundlers/vite/generate-bundle/runtime.ts | 70 +- .../vite/generate-bundle/sfc-style-source.ts | 2 +- .../generate-bundle/temporary-css-assets.ts | 4 +- .../generate-bundle/transform-scheduling.ts | 6 +- .../bundlers/vite/generate-bundle/types.ts | 2 +- .../vite/generate-bundle/web-css-module.ts | 25 + .../src/bundlers/vite/hot-css-modules.ts | 2 +- .../src/bundlers/vite/index.ts | 6 +- .../src/bundlers/vite/plugin-hook.ts | 4 + .../vite/processed-css-assets/collector.ts | 15 +- .../vite/processed-css-assets/coverage.ts | 3 +- .../processed-css-assets/markers-imports.ts | 7 +- .../shared/create-css-only-plugins-runtime.ts | 5 +- .../create-framework-plugins-runtime.ts | 130 +- .../vite/shared/create-framework-plugins.ts | 12 +- .../shared/framework-module-candidates.ts | 3 +- .../shared/framework-runtime-configuration.ts | 45 + .../vite/shared/framework-runtime-options.ts | 12 + .../vite/shared/framework-runtime-utils.ts | 13 +- .../framework-source-candidates-plugin.ts | 5 +- .../shared/framework-source-scan-session.ts | 9 +- .../src/bundlers/vite/shared/hmr-source.ts | 11 + .../webpack/BaseUnifiedPlugin/v5-assets.ts | 2 +- .../v5-assets/finalize-assets.ts | 2 +- .../v5-assets/generated-css-task.ts | 6 +- .../v5-assets/pipeline-helpers/resources.ts | 2 +- .../v5-assets/processed-css-task.ts | 3 +- .../webpack/BaseUnifiedPlugin/v5-loaders.ts | 4 +- .../bundlers/webpack/BaseUnifiedPlugin/v5.ts | 2 +- .../weapp-tw-css-import-rewrite-loader.ts | 2 +- .../shared/create-framework-plugin/plugin.ts | 2 +- .../create-framework-plugin/watch-output.ts | 18 +- .../src/compiler/candidate-index.ts | 2 +- .../weapp-tailwindcss/src/compiler/index.ts | 2 + .../compiler/runtime-affecting-signature.ts | 18 +- .../weapp-tailwindcss/src/context/index.ts | 6 +- packages/weapp-tailwindcss/src/core.ts | 2 +- .../src/core/compiler/compiler.ts | 7 +- .../weapp-tailwindcss/src/css-macro/index.ts | 4 +- .../weapp-tailwindcss/src/framework/index.ts | 2 +- .../src/framework/platform.ts | 4 +- .../src/js/NodePathWalker.ts | 6 +- packages/weapp-tailwindcss/src/js/babel.ts | 4 +- .../src/js/module-graph/ignored-exports.ts | 2 +- .../js/node-path-walker/export-handlers.ts | 4 +- .../src/js/node-path-walker/import-tokens.ts | 2 +- .../src/presets/hbuilderx.ts | 2 +- packages/weapp-tailwindcss/src/shared/mpx.ts | 3 +- .../src/style-injector/internal.ts | 79 +- .../src/style-injector/options.ts | 34 +- .../src/style-injector/vite-web.ts | 22 +- .../src/tailwindcss/runtime-factory.ts | 8 +- .../src/tailwindcss/runtime-options.ts | 8 + .../src/tailwindcss/runtime.ts | 5 +- .../v4-engine/generator/scan-sources.ts | 2 +- .../v4-engine/generator/style-context.ts | 4 +- .../src/tailwindcss/v4-engine/miniprogram.ts | 2 +- packages/weapp-tailwindcss/src/types/index.ts | 5 +- .../src/uni-app-x/component-local-style.ts | 22 +- .../uni-app-x/style-asset/harmony-apply.ts | 4 +- .../uni-app-x/style-asset/harmony-global.ts | 2 +- .../src/uni-app-x/style-asset/style-value.ts | 8 +- .../src/uni-app-x/transform.ts | 18 +- .../weapp-tailwindcss/src/uni-app-x/vite.ts | 13 +- .../src/uni-app-x/vite/author-apply.ts | 5 +- .../src/uni-app-x/vite/harmony-apply.ts | 2 +- .../src/uni-app-x/vite/native-hmr.ts | 2 +- packages/weapp-tailwindcss/src/wxml/utils.ts | 8 +- .../src/wxml/utils/codegen/legacy-visitor.ts | 6 +- .../src/wxml/utils/custom-template.ts | 2 +- .../test-d/internal-context.test-d.ts | 14 + .../test/__snapshots__/js.test.ts.snap | 4 +- .../bundlers/author-function-context.test.ts | 44 + .../test/bundlers/css-imports.test.ts | 3 +- .../generator-author-functions.test.ts | 62 + .../test/bundlers/generator-css.unit.test.ts | 4 +- .../bundlers/generator-output-imports.test.ts | 42 + .../bundlers/style-injector-hooks.test.ts | 46 + .../vite-content-init-coverage.test.ts | 28 + .../bundlers/vite-css-cache-task.unit.test.ts | 42 + .../vite-css-marker-ownership.test.ts | 47 + .../vite-css-transform-task.unit.test.ts | 58 +- .../vite-framework-style-memory.test.ts | 56 + .../test/bundlers/vite-hmr-source.test.ts | 17 + .../vite-processed-css-replay-order.test.ts | 35 + ...embered-css-replay-root-shell.unit.test.ts | 31 +- .../bundlers/vite-web-layer-order.test.ts | 35 + .../test/compiler/compiler-mode.test.ts | 22 +- .../compiler/graph-generation-session.test.ts | 4 + .../tailwindcss/runtime-factory.unit.test.ts | 6 + .../test/uni-app-x/author-apply.test.ts | 15 + .../test/uni-app-x/index.test.ts | 15 + .../test/uni-app-x/vite.test.ts | 8 +- pnpm-lock.yaml | 1148 ++--- .../app-marker-visual.ts | 78 + scripts/demo-visual-e2e-report/app.ts | 144 +- scripts/demo-visual-e2e-report/cases.ts | 268 +- .../demo-visual-e2e-report/harmony-layout.ts | 28 + .../mini-program-screenshot.ts | 131 + .../screenshot-color.ts | 44 + .../demo-visual-e2e-report/theme-capture.ts | 93 + scripts/demo-visual-e2e-report/theme.ts | 47 +- scripts/demo-visual-e2e-report/types.ts | 6 + 281 files changed, 20127 insertions(+), 5114 deletions(-) create mode 100644 .changeset/wide-cobras-open.md create mode 100644 demo/uni-app-vite-tailwindcss-v4/src/components/TButton.vue create mode 100644 docs/engineering/lessons/local-full-run-contracts.md create mode 100644 e2e/app-marker-visual.test.ts create mode 100644 e2e/app-marker.test.ts create mode 100644 e2e/app-output.test.ts create mode 100644 e2e/app-visual-lifecycle.test.ts create mode 100644 e2e/demo-visual-live-evidence.test.ts create mode 100644 e2e/frameworkIdeHotUpdateArtifacts.test.ts create mode 100644 e2e/frameworkIdeStyleHotUpdate.test.ts create mode 100644 e2e/harmony-dom-layout.test.ts create mode 100644 e2e/harmony-dom-probe.test.ts create mode 100644 e2e/hbuilderx-local/app-marker.ts create mode 100644 e2e/hbuilderx-local/app-output.ts create mode 100644 e2e/hbuilderx-local/harmony-dom-probe.ts create mode 100644 e2e/hbuilderx-local/native-log.ts create mode 100644 e2e/mini-program-screenshot.test.ts create mode 100644 e2e/preflight-assertions.test.ts create mode 100644 e2e/preflight-assertions.ts create mode 100644 e2e/react-native/process.ts create mode 100644 e2e/screenshot-color.test.ts create mode 100644 packages/postcss/src/compat/author-selector.ts create mode 100644 packages/postcss/src/compat/mini-program-css/class-presence.ts create mode 100644 packages/postcss/src/compat/mini-program-css/content-init.ts create mode 100644 packages/postcss/src/compat/tailwindcss-v4/author-functions.ts create mode 100644 packages/postcss/src/framework-pipeline.ts create mode 100644 packages/postcss/test/author-functions.test.ts create mode 100644 packages/postcss/test/author-selector.test.ts create mode 100644 packages/postcss/test/class-presence.test.ts create mode 100644 packages/postcss/test/content-init-boundary.test.ts create mode 100644 packages/postcss/test/framework-pipeline.test.ts create mode 100644 packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/compile-functions.ts create mode 100644 packages/weapp-tailwindcss/src/bundlers/shared/style-handler-options.ts create mode 100644 packages/weapp-tailwindcss/src/bundlers/vite/generate-bundle/finalize/sync-processed-css.ts create mode 100644 packages/weapp-tailwindcss/src/bundlers/vite/generate-bundle/framework-style-memory.ts create mode 100644 packages/weapp-tailwindcss/src/bundlers/vite/generate-bundle/web-css-module.ts create mode 100644 packages/weapp-tailwindcss/src/bundlers/vite/plugin-hook.ts create mode 100644 packages/weapp-tailwindcss/src/bundlers/vite/shared/framework-runtime-configuration.ts create mode 100644 packages/weapp-tailwindcss/src/bundlers/vite/shared/hmr-source.ts create mode 100644 packages/weapp-tailwindcss/test-d/internal-context.test-d.ts create mode 100644 packages/weapp-tailwindcss/test/bundlers/author-function-context.test.ts create mode 100644 packages/weapp-tailwindcss/test/bundlers/generator-author-functions.test.ts create mode 100644 packages/weapp-tailwindcss/test/bundlers/generator-output-imports.test.ts create mode 100644 packages/weapp-tailwindcss/test/bundlers/style-injector-hooks.test.ts create mode 100644 packages/weapp-tailwindcss/test/bundlers/vite-content-init-coverage.test.ts create mode 100644 packages/weapp-tailwindcss/test/bundlers/vite-css-marker-ownership.test.ts create mode 100644 packages/weapp-tailwindcss/test/bundlers/vite-framework-style-memory.test.ts create mode 100644 packages/weapp-tailwindcss/test/bundlers/vite-hmr-source.test.ts create mode 100644 packages/weapp-tailwindcss/test/bundlers/vite-processed-css-replay-order.test.ts create mode 100644 packages/weapp-tailwindcss/test/bundlers/vite-web-layer-order.test.ts create mode 100644 packages/weapp-tailwindcss/test/uni-app-x/author-apply.test.ts create mode 100644 scripts/demo-visual-e2e-report/app-marker-visual.ts create mode 100644 scripts/demo-visual-e2e-report/mini-program-screenshot.ts create mode 100644 scripts/demo-visual-e2e-report/screenshot-color.ts create mode 100644 scripts/demo-visual-e2e-report/theme-capture.ts diff --git a/.changeset/wide-cobras-open.md b/.changeset/wide-cobras-open.md new file mode 100644 index 0000000000..47e1101b70 --- /dev/null +++ b/.changeset/wide-cobras-open.md @@ -0,0 +1,22 @@ +--- +"weapp-tailwindcss": patch +"@weapp-tailwindcss/postcss": patch +"@weapp-tailwindcss/ui": patch +--- + +修复 graph 生成结果在样式最终化后丢失编译 snapshot、组件样式去重后残留无消费者的 content 初始化（保留根样式与增量生成的默认初始化契约）、Vite 对象钩子及其上下文和构建参数未完整转发的问题。修复 Webpack 样式入口读取错误的运行时配置字段，以及 Tailwind v4 候选校验未使用裸任意值配置的问题。 + +统一内部处理器、只读生成结果和跨构建器类型契约，校验框架分包配置及单 Root AST 返回边界，保留同步与异步 HMR 源码读取能力；Uni App X 通过 Rollup 接受的 JSON source map 保留完整来源信息。 + +修复作者样式回填时 Tailwind 编译期函数未展开的问题：复用当前生成源的编译上下文处理函数值，保留重复声明、作用域与原有顺序，并拒绝配置上下文歧义，避免正确样式后面残留未编译声明。 + +修复 UI 样式测试加载构建配置时清空发布产物的问题：配置求值不再触发嵌套构建，样式由 weapp-tailwindcss 生成，JS 与声明文件由 tsdown 管理，测试使用内存产物并校验磁盘输出未变化；监听模式保留 CSS、JS 与声明的增量构建。 + +修复 Uni App X 小程序增量构建中源码样式与框架产物的映射遗漏，保留框架基础样式贡献，并将同目标入口重放与框架输出合并，避免热更新清空全局样式或覆盖页面布局规则。 + +小程序组件局部样式同时生成基础工具类与变体，保留原变体类身份；作者样式过滤按选择器结构保留包含 Vue 作用域的主题、媒体与伪类展开规则，避免局部背景覆盖主题状态。原生 App 保持现有变体路径。 + +区分小程序产物导入与 Tailwind 源码依赖，保留框架基础样式 import，避免样式隔离 2.0 编译解析失败；将已有类约束上的 class 属性存在选择器等价转成重复类，保留框架提权效果与小程序兼容性。 + +修复增量样式回滚时旧规则复活：框架贡献与入口重放不再复用混合产物缓存，最终注入前先更新本轮来源记录，并在原始框架样式转为生成产物时清理旧贡献。 +修复 Web 聚合样式替换越过 Tailwind 模块边界而丢失独立导入和组件普通样式的问题，缓存包含真实聚合内容；保留 Web layer 顺序并重放框架 PostCSS 的单位、选择器与前缀转换。插件解析支持相对源码上下文的 CJS/ESM 模块路径和 tuple 选项，保留旧式 transformer 与 Processor 组合，非法或缺失插件明确报错，避免静默省略框架处理。 diff --git a/demo/issue-1144-uni-app-x-web/package.json b/demo/issue-1144-uni-app-x-web/package.json index 84f6618896..2b4da68e15 100644 --- a/demo/issue-1144-uni-app-x-web/package.json +++ b/demo/issue-1144-uni-app-x-web/package.json @@ -24,5 +24,5 @@ "vite": "^5.4.21", "weapp-tailwindcss": "workspace:*" }, - "packageManager": "pnpm@11.25.0" + "packageManager": "pnpm@12.4.1" } diff --git a/demo/uni-app-vite-tailwindcss-v4/package.json b/demo/uni-app-vite-tailwindcss-v4/package.json index cd7891bfba..c0bcb604b7 100644 --- a/demo/uni-app-vite-tailwindcss-v4/package.json +++ b/demo/uni-app-vite-tailwindcss-v4/package.json @@ -82,33 +82,33 @@ "prebuild:quickapp-webview-union": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs" }, "dependencies": { - "@dcloudio/uni-app": "3.0.0-5010520260709002", - "@dcloudio/uni-app-harmony": "3.0.0-5010520260709002", - "@dcloudio/uni-app-plus": "3.0.0-5010520260709002", - "@dcloudio/uni-components": "3.0.0-5010520260709002", - "@dcloudio/uni-h5": "3.0.0-5010520260709002", - "@dcloudio/uni-mp-alipay": "3.0.0-5010520260709002", - "@dcloudio/uni-mp-baidu": "3.0.0-5010520260709002", - "@dcloudio/uni-mp-harmony": "3.0.0-5010520260709002", - "@dcloudio/uni-mp-jd": "3.0.0-5010520260709002", - "@dcloudio/uni-mp-kuaishou": "3.0.0-5010520260709002", - "@dcloudio/uni-mp-lark": "3.0.0-5010520260709002", - "@dcloudio/uni-mp-qq": "3.0.0-5010520260709002", - "@dcloudio/uni-mp-toutiao": "3.0.0-5010520260709002", + "@dcloudio/uni-app": "3.0.0-5020420260813001", + "@dcloudio/uni-app-harmony": "3.0.0-5020420260813001", + "@dcloudio/uni-app-plus": "3.0.0-5020420260813001", + "@dcloudio/uni-components": "3.0.0-5020420260813001", + "@dcloudio/uni-h5": "3.0.0-5020420260813001", + "@dcloudio/uni-mp-alipay": "3.0.0-5020420260813001", + "@dcloudio/uni-mp-baidu": "3.0.0-5020420260813001", + "@dcloudio/uni-mp-harmony": "3.0.0-5020420260813001", + "@dcloudio/uni-mp-jd": "3.0.0-5020420260813001", + "@dcloudio/uni-mp-kuaishou": "3.0.0-5020420260813001", + "@dcloudio/uni-mp-lark": "3.0.0-5020420260813001", + "@dcloudio/uni-mp-qq": "3.0.0-5020420260813001", + "@dcloudio/uni-mp-toutiao": "3.0.0-5020420260813001", "@dcloudio/uni-mp-vue": "3.0.0-5000320260312001", - "@dcloudio/uni-mp-weixin": "3.0.0-5010520260709002", - "@dcloudio/uni-mp-xhs": "3.0.0-5010520260709002", - "@dcloudio/uni-quickapp-webview": "3.0.0-5010520260709002", + "@dcloudio/uni-mp-weixin": "3.0.0-5020420260813001", + "@dcloudio/uni-mp-xhs": "3.0.0-5020420260813001", + "@dcloudio/uni-quickapp-webview": "3.0.0-5020420260813001", "tailwindcss-core-plugins-extractor": "workspace:*", "vue": "^3.5.41", "vue-i18n": "^9.1.9" }, "devDependencies": { "@dcloudio/types": "^3.4.8", - "@dcloudio/uni-automator": "3.0.0-5010520260709002", - "@dcloudio/uni-cli-shared": "3.0.0-5010520260709002", - "@dcloudio/uni-stacktracey": "3.0.0-5010520260709002", - "@dcloudio/vite-plugin-uni": "3.0.0-5010520260709002", + "@dcloudio/uni-automator": "3.0.0-5020420260813001", + "@dcloudio/uni-cli-shared": "3.0.0-5020420260813001", + "@dcloudio/uni-stacktracey": "3.0.0-5020420260813001", + "@dcloudio/vite-plugin-uni": "3.0.0-5020420260813001", "@egoist/tailwindcss-icons": "catalog:egoistTailwindcssIcons", "@iconify-json/lucide": "catalog:iconifyJson", "@iconify-json/mdi": "catalog:iconifyJson", diff --git a/demo/uni-app-vite-tailwindcss-v4/src/components/TButton.vue b/demo/uni-app-vite-tailwindcss-v4/src/components/TButton.vue new file mode 100644 index 0000000000..b52acb4271 --- /dev/null +++ b/demo/uni-app-vite-tailwindcss-v4/src/components/TButton.vue @@ -0,0 +1,15 @@ + + + diff --git a/demo/uni-app-vite-tailwindcss-v4/src/pages/index/index.vue b/demo/uni-app-vite-tailwindcss-v4/src/pages/index/index.vue index b078227471..ba56042bc7 100644 --- a/demo/uni-app-vite-tailwindcss-v4/src/pages/index/index.vue +++ b/demo/uni-app-vite-tailwindcss-v4/src/pages/index/index.vue @@ -133,6 +133,7 @@ import { twMerge } from '@weapp-tailwindcss/merge' import { weappTwIgnore } from "weapp-tailwindcss/escape" import HelloWorld from "@/components/HelloWorld.vue" +import TButton from "@/components/TButton.vue" import { onMounted, ref } from 'vue' interface WebviewInfoRow { diff --git a/demo/uni-app-vite-vue3-hbuilderx-tailwindcss-v4/package.json b/demo/uni-app-vite-vue3-hbuilderx-tailwindcss-v4/package.json index e2f891de95..fd61862223 100644 --- a/demo/uni-app-vite-vue3-hbuilderx-tailwindcss-v4/package.json +++ b/demo/uni-app-vite-vue3-hbuilderx-tailwindcss-v4/package.json @@ -52,5 +52,5 @@ "vite": "^5.4.21", "weapp-tailwindcss": "workspace:*" }, - "packageManager": "pnpm@11.25.0" + "packageManager": "pnpm@12.4.1" } diff --git a/demo/uni-app-x-vapor-tailwindcss-v4/package.json b/demo/uni-app-x-vapor-tailwindcss-v4/package.json index ce48a9f703..dc7476fbf0 100644 --- a/demo/uni-app-x-vapor-tailwindcss-v4/package.json +++ b/demo/uni-app-x-vapor-tailwindcss-v4/package.json @@ -31,5 +31,5 @@ "vite": "^5.4.21", "weapp-tailwindcss": "workspace:*" }, - "packageManager": "pnpm@11.25.0" + "packageManager": "pnpm@12.4.1" } diff --git a/demo/uni-app-x-vdom-tailwindcss-v4/package.json b/demo/uni-app-x-vdom-tailwindcss-v4/package.json index e3aefad677..aeff903775 100644 --- a/demo/uni-app-x-vdom-tailwindcss-v4/package.json +++ b/demo/uni-app-x-vdom-tailwindcss-v4/package.json @@ -39,5 +39,5 @@ "vite": "^5.4.21", "weapp-tailwindcss": "workspace:*" }, - "packageManager": "pnpm@11.25.0" + "packageManager": "pnpm@12.4.1" } diff --git a/docs/engineering/lessons/local-full-run-contracts.md b/docs/engineering/lessons/local-full-run-contracts.md new file mode 100644 index 0000000000..9525f6203a --- /dev/null +++ b/docs/engineering/lessons/local-full-run-contracts.md @@ -0,0 +1,184 @@ +--- +status: partial +issue: https://github.com/sonofmagic/weapp-tailwindcss/commit/abd00dcc6 +baseline: abd00dcc6f8c5dba8bd23ba88f771d43356ee897 +regressions: + - packages/weapp-tailwindcss/test/compiler/graph-generation-session.test.ts + - packages/weapp-tailwindcss/test/bundlers/style-injector-hooks.test.ts + - packages/weapp-tailwindcss/test/bundlers/vite-hmr-source.test.ts + - packages/weapp-tailwindcss/test/bundlers/vite-content-init-coverage.test.ts + - packages/weapp-tailwindcss/test/bundlers/css-imports.test.ts + - packages/weapp-tailwindcss/test/tailwindcss/runtime-factory.unit.test.ts + - packages/postcss/test/content-init-boundary.test.ts + - packages/postcss/test/handler.root.test.ts + - packages/postcss/test/author-functions.test.ts + - packages/weapp-tailwindcss/test/bundlers/generator-author-functions.test.ts + - packages-runtime/ui/test/atomic.test.ts + - e2e/mini-program-screenshot.test.ts + - e2e/demo-visual-live-evidence.test.ts + - e2e/demo-visual-theme.test.ts + - e2e/hbuilderx-hmr-lifecycle.test.ts + - packages/weapp-tailwindcss/test/bundlers/vite-css-transform-task.unit.test.ts + - packages/weapp-tailwindcss/test/bundlers/vite-css-cache-task.unit.test.ts + - packages/weapp-tailwindcss/test/bundlers/vite-web-layer-order.test.ts + - packages/postcss/test/framework-pipeline.test.ts +--- + +# 全端测试中的编译结果与内部类型契约 + +## 症状 + +严格类型检查最初有数百条诊断，涉及 Vite 钩子、Babel NodePath、可选字段、只读生成结果和 PostCSS AST。graph 管线最终化后丢失编译 snapshot；Uni 组件样式在去除根样式覆盖的工具类后仍携带全局 content 初始化。 + +## 根因与纠正 + +内部上下文改为复用真实 StyleHandler 和规范化属性匹配项；bundler 来源元数据保留在适配层。合并层接受只读结果，需要可变集合时显式复制。最终化保留当前 revision 的 snapshot，回归检查两次生成的凭据彼此独立。 + +Vite 委托需支持函数和对象两种钩子，并保留 this、真实构建参数和同步/异步 HMR read。框架分包配置在委托入口校验；未定义选项不显式传给外部的严格可选属性。主包显式声明 catalog Vite 开发依赖，不改变 demo 的 peer 版本。CSS 入口同步和平台选择从超长工厂抽出，配置优先级不变。 + +类型诊断还揭示了运行时错误：Webpack loader 使用了不存在的 tailwindRuntimeOptions，导致显式 CSS 入口失效；裸任意值配置从不包含该字段的 resolved source 读取，导致候选校验漏传选项。分别改为读取 tailwindcssRuntimeOptions 和真实运行时选项，回归均先复现失败再验证修复。 + +PostCSS 单 Root API 明确返回单 Root，拒绝插件将其替换为 Document，保持克隆与产物归属。Uni App X 向 Rollup 返回 JSON source map，保留 nullable sourcesContent，测试解码后验证原来源信息。模板处理器接受实际可选参数，不把调用方没有提供的字段声称为必填。 + +### 被全量回归推翻的清理假设 + +最初认为 preflight 不应为没有局部 content 消费者的 CSS 添加初始化，并排除了默认变量声明作为保留依据。这通过了局部测试，却使完整回归出现 11 项失败：根样式、增量产物和已有处理器快照要求保留默认初始化。 + +因此撤回 prune-generated.ts 与 variables.ts 的试验性改动，保留原有核心断言与快照。实际问题发生在组件输出去重阶段：消费者被根样式覆盖后，初始化留在组件中。最终修复仅在该阶段调用 PostCSS 清理函数；有残留消费者或作者类声明时保留内容。不能用局部通过替代全量契约，也不能为了匹配静态旧快照取消根产物职责。 + +## 验证 + +命令均在独立 worktree 执行；正常 Vitest 使用 CI=1 和 --update=none。 + +- pnpm typecheck、pnpm build:ci、pnpm build、pnpm tsd、pnpm lint、pnpm agents:check、pnpm agents:test、pnpm support-matrix:check 通过。 +- 初轮最终完整测试：5374 通过、11 失败、47 跳过；失败促使撤回过宽清理并拆分超长工厂。修正后同组 9 文件、77 项核心回归通过，未更新核心快照。 +- PostCSS 最新完整回归：74 文件通过，763 测试通过、3 跳过。 +- Uni scoped/layer 真实构建的 3 项断言通过；后续选中静态回归中再次通过。 +- 钩子、Webpack 配置、运行时裸任意值与 Uni App X 定向回归：4 文件、100 项通过。 +- E2E 覆盖矩阵 34 项、框架矩阵 12 项、多平台构建 52 项通过；最终静态复跑 369 通过 / 31 跳过，多平台 52 通过（其中 51 个真实构建案例）。 +- 静态基线按具体项目单独更新和审查。已检查的 Taro/Uni 差异为默认 content 初始化，Uni App X 另含无语义影响的选择器列表顺序和空白。该轮全量静态回归通过；跳过项目仍需独立激活验证。 + +## 适用边界 + +以上阶段性通过不代表全端验收完成。修正后的 test 与 coverage 均为 5380 通过 / 47 跳过，core 为 3583 通过 / 35 跳过；所有 demo、IDE、HMR 与设备截图仍需补齐证据。 + +旧 checkout 的覆盖率 Vite 超时在早期隔离核心回归中未复现，尚不能归因为具体生命周期缺陷。Harmony 曾首次启动成功，随后 HMR 失败，回退构建又遇包名/签名错误；回退错误不能证明首次 HMR 失败原因。VDOM 与 Vapor 需要独立运行时和截图证据。 + +## 规则评估 + +不新增规则。现有类型边界、独立 worktree、先复现后修复和真实端证据要求已经覆盖这些问题；本次以可执行回归和保留被推翻假设来纠正过程。 + +## Harmony Vapor 探针与更新边界 + +Vapor 页面实际显示了当前文字，但 UITest 与 ArkUI inspector 不提供文字字段。测试通过临时 UTS 探针调用 UniElement 的真实文本和布局 API，并用本轮 UUID 区分记录。DOM API 的逻辑像素按实际 pixelRatio 换算后比较行高；缺失、重复或零尺寸节点不能通过。探针日志协议避免使用会形成 Tailwind 任意属性候选的方括号加冒号结构。 + +系统日志刷屏会挤掉有界诊断缓冲中的早期证据。保留原有缓冲上限，另设逐行状态观察器与完整日志落盘；不能靠无限扩大内存窗口处理生命周期状态。结构与视觉测试共同使用单一受管 marker 的替换逻辑，避免旧视觉代码在已有 marker 旁再次插入节点并读取旧文字。 + +稳定版 5.24 的 Vapor 真实运行时已取得初始 marker、布局、模式日志和截图；Tailwind 与原生两行文字均高 52 逻辑像素。保存后 HBuilderX 重建并重新安装 .hap，进程变化，因此纯 HMR 未通过。不含 Tailwind 的原生最小项目仅修改文字，也从 PID 23132 变为 23212，复现同样行为。进一步检查 stable 与已安装 alpha 的 vite-plugin-uni/dist/cli/action.js：两者均明确禁用 Harmony bin 热更新，hasBinFiles 阻止增量文件列表输出。原生对照第二轮只改文字，GenPagesIndexIndexSharedData.bytes 的 SHA-256 发生变化、样式字节码保持不变，PID 从 13733 变为 13790。根因是安装版工具链的字节码热更新能力限制；未修改厂商文件或业务代码绕过。 + +## 测试调度纠正 + +框架包装命令中的 E2E_PROJECT_FILTER 只过滤注册项目，仍会执行 RN 等通用静态测试。独立 Expo 构建与内嵌兼容性导出重叠时，前者清理 react-native/dist，使后者的 Metro transformer 短暂缺失。这是本轮调度引入的失败，需保留原始错误并串行重跑；不改生产代码，也不把当轮框架命令写为通过。 + +## HBuilderX 样式导入图与作者样式回填 + +HBuilderX 小程序输出的 app.wxss 只是 main.wxss 的导入壳。原 IDE 测试只观察壳文件的修改时间，因此漏掉真实样式更新。测试现在沿实际 @import 图收集可达样式及修改时间，覆盖非微信后缀、循环引用和缺失文件。 + +修正观察后，产物中既有正确展开的 theme() 规则，也有后续回填的未编译重复规则。原断言只检查首个同名规则，无法识别该问题；现在对全部同名规则拒绝未展开的函数。根因是生成器与作者样式回填使用了不同处理阶段，后者仅做平台兼容处理，没有 Tailwind 编译上下文。 + +作者函数现在由本次解析的生成源和受管理的生成会话编译。语法和值处理归 PostCSS 包，核心仅编排编译；使用唯一内部选择器承载待编译值，通过明确身份取回结果，再写回原声明或媒体条件，保持原有顺序和作用域。不会用作者选择器/属性名猜测结果、删除未编译声明或后置读取源码。多个生成源给出不同值时明确报错，避免选择任意配置。内部探针不进入最终产物。 + +新增真实生成回归先复现两个失败，再验证普通回填和框架已处理回填；另覆盖主题修改、歧义配置、重复声明、媒体条件、字符串内容和缺失编译结果。生成与框架组合回归 179 项、语法层 3 项及 IDE 观察/断言 6 项通过；Lint、typecheck 和两包构建通过。真实 IDE 验收仍独立记录，不能由这些单元结果替代。 + + +## UI 构建与测试的产物所有权 + +非 CI 模式的 atomic 测试加载 Vite 配置时触发嵌套 CSS 构建，emptyOutDir 清空 dist，导致随后 tsd 缺少 variants.d.ts。CI 跳过该测试掩盖了污染。配置现在仅声明 CSS 构建，现有包级脚本随后由 tsdown 生成 JS 与类型；CSS/WXSS 镜像通过最终 generateBundle 产物生成，不从文件系统改写输出。使用仓库自己的样式生成器并显式登记组件和测试候选源。 + +测试使用 write:false 返回的内存产物，不再跳过 CI，并校验磁盘目录内容哈希不变及 CSS/WXSS 完全一致。62 项 UI 测试、完整 UI 构建和根 tsd 通过。监听由 tsdown 管理 JS/声明及 Vite 样式 watcher 的进程生命周期；实际 CSS 保存、TS 保存和回退均验证通过，不能仅凭首次构建判断监听有效。 + +## IDE 像素坐标与静态断言 + +preflight 检查不应要求规则在 padding 后立刻结束：压缩器可合法合并变量初始化。断言改为检查准确选择器集和全部必需声明，并拒绝后续覆盖。渐变非空 fallback 的逗号空白不改变语义，断言接受该等价空白；空 fallback 的必需空格仍严格检查。 + +DevTools 截图包含状态栏和导航栏，而节点 offset 属于页面窗口。直接以整屏高除页面高会使取色位置偏移，甚至在错误节点区域得到正数。共享截图入口根据真实 getWindowInfo 的屏幕比例、screenTop 与窗口大小裁剪，保存整屏原图及几何元数据，并拒绝比例不符和越界。单位回归覆盖不同缩放和自定义导航，实际 IDE 像素验收另行记录。 + + +## 视觉证据的失败边界 + +进一步检查发现旧视觉报告在截图失败后根据产物哈希生成彩色条纹，且运行时 marker 不可读时返回 artifact+visual；这些诊断结果可被汇总为通过。现移除合成图和运行时失败兜底，要求同一运行实例读到本轮 marker、取得真实截图。主题结构/截图失败不再被转换成 skipped 后继续通过，暗色目标也不能由页面其它黑色区域代替。新增失败回归验证截图异常不生成图片、旧 marker/缺失页面不通过、无关暗色像素不通过。 + +Issue 928 的旧比较基线裁到了标题且遗漏目标节点。修正截图坐标与长页面缩放后，只重新生成并人工核对 v4-compare.png，随后在关闭更新开关时两项真实 IDE 用例通过；where 与 root selector 的实际 IDE 用例也通过。正常运行不再自动创建缺失基线。 + +长页面的主题目标可能位于窗口外。主题截图需先用运行时 SelectorQuery 确认真实节点几何，必要时滚动至目标，待整个节点进入当前窗口后单独截图；不能用页面总高度压缩坐标。HMR 前后截图保持原位置，主题截图另行归档。 + +## Uni App X 增量产物与真实主题截图 + +源码生成标记需要在资源分类之前登记到源码/产物关系中，否则框架重命名后的样式会被重放到运行时未引用的虚拟输出。框架增量 bundle 省略的基础样式必须从前次真实输入保留，并响应明确的删除事件；同一目标的入口重放需要等待该轮框架贡献完成后合并，不能覆盖已经生成的布局规则。 + +小程序局部基础类和局部变体必须共享页面层叠。仅保留全局变体会与 scoped 基础类产生优先级差异；仅比较原作者选择器字符串又会误删主题展开后新增条件的规则。回归覆盖局部变体、Vue 作用域属性、无关生成类与后代类排除。 + +DevTools 的原始截图可能包含 ICC 屏幕色彩配置。直接用 PNG 像素重编码会丢失配置，导致像素断言把正确的 CSS 颜色判为失败。保留原始 full PNG，先通过支持 ICC 的解码器转换到 sRGB，再裁剪和比较；不得放宽颜色阈值。视觉用例失败不重新启动 DevTools 以代替当前运行实例。 + +### 小程序样式隔离 2.0 的产物边界 + +HBuilderX 会把框架样式 import 插入编译后的 SFC 样式。该 import 属于产物图，不能随 transient cssSources 交给 Tailwind 的源码解析器。编译输入移除产物 import，外层管线保留并重放原 import；微信、支付宝、抖音扩展名回归先红后绿。框架生成的 .a[class] 使用 .a.a 等价表达，保持匹配范围和优先级；不存在同复合选择器类约束、带属性值或命名空间的条件不能猜测改写。 + +### 框架增量样式回滚缓存与合并顺序 + +普通 HBuilderX Uni 的入口样式保存后可以生成新规则，但回滚会重新出现旧规则。诊断发现两条路径：入口重放误用已经混入框架贡献的最终产物缓存；最终合并先注入旧源码记录，再追加本轮无旧规则的结果。修复保持来源边界，从入口源码重建重放结果，在框架收集后、统一注入前替换本轮记录。vite-processed-css-replay-order.test.ts 覆盖 acss、ttss、css，修复前均失败；真实 HBuilderX 5.24 的新增与回滚短链路通过。vite-remembered-css-replay-root-shell.unit.test.ts 和 vite-framework-style-memory.test.ts 覆盖混合缓存与原始贡献失效。完整 IDE 回归仍需完成。 + +### App 视觉探针需匹配本轮步骤语义 + +失败截图中背景色相近的两个控件被合成一个全屏包围盒，导致标记文本判定错误；间距变化沿用同一颜色时，像素总量也不应要求增加。探针改为连通区域和声明几何定位，同色 HMR 比较标记区域背景像素变化，同时拒绝未变化和多候选歧义。视觉执行器补执行步骤声明的主题源码变更，并在结束恢复；后续仍必须取得新模拟器截图，旧失败截图只用于定位回归。 + +## Web 聚合资产的模块边界 + +Uni H5 的最终 CSS 资产包含 Tailwind 根模块、独立 UI import 和 App.vue 普通样式。重新生成 Tailwind 后替换整个资产会删除后两者。把这些样式移到 Tailwind 入口只能掩盖问题，已撤回该规避。生成阶段记录模块开始与结束标记，最终化只替换该模块区间，保留相邻内容；缓存键同时包含聚合资产内容，避免普通 CSS 改动而候选不变时复用旧资产。 + +Taro Web 的后置生成还需要重放框架 PostCSS，保留组件选择器、单位和前缀转换；Web 不应走小程序的 layer 清理。修复保持样式处理归 PostCSS 包，核心仅编排。模块区间、普通 CSS 往返更新、框架重放和 layer 顺序均有回归；Web 独立样式 E2E 六项通过。生成器基线按项目审查后更新，最终矩阵仍单独验收。 + +## 原生进程重启不能计作纯 HMR + +HBuilderX 5.24 的 Android Uni App X 六步保存均通过 marker、颜色、几何和截图检查，但每次保存后 App Launch 再次出现。logcat 同时记录 refreashType=restart、System.exit(0) 和 PID 更换。这是有序退出重启；不能仅凭系统随后写出的 crashed service 字样判断应用异常崩溃，也不能把页面恢复成功作为同实例 HMR。 + +原 runner 只为 Harmony 创建持续日志观察器，因此 Android/iOS 漏检重启。观察器现在覆盖全部原生目标；只有 Harmony 等待专用热更新完成消息，Android/iOS 继续依赖产物与运行时探针，并在探针之后和下一步开始前检查重启回退。新增测试覆盖传输完成后才出现 App Launch、初始启动排除及订阅清理。九项生命周期回归通过；实际原生结果须按新标准重跑。没有修改厂商文件、放宽阈值或把重启宣称为纯 HMR。 + +实际复验确认 Android 首轮保存被新检查判为 restarted。无 Tailwind 的独立原生项目仅替换一行文字，也取得新 marker、重新 App Launch，PID 从 14973 变为 15124；截图仍可见调试框架重新加载提示。由此可将当前安装版本的 Android 纯 HMR 归为工具链能力阻塞，而非 Tailwind 样式转换故障。iOS 日志/产物用例通过，但尚不足以单独证明 PID 连续性和完整视觉验收。 + +## 框架 PostCSS 插件必须实际执行 + +先前归一化过滤掉字符串插件路径，让构建在缺少 preset-env 转换时成功；对旧式 transformer 提前调用也违背 PostCSS 契约。现按来源上下文解析模块，动态加载 CJS/ESM、解包 default 并保留 tuple 选项；裸 transformer 和 Processor 组合交给 PostCSS 规范化，无法解析的启用插件明确失败。`packages/postcss/test/framework-pipeline.test.ts` 使用真实 preset-env 输出前缀证明插件执行，另覆盖旧式函数、组合、无效插件及带空格的绝对和相对模块路径。 + +旧实现在三个回归中失败；修复后框架与加载回归 15 项通过，完整构建 66/66 通过（0 缓存）。四个 Taro 项目原范围复验定位到 Vite Vue3 Web 基线；按源 CSS 和 AST 审查 inset 降级、等价颜色、暗色规则拆分及标记清理后，仅更新该项目 Web/web-compact 8 个文件，无更新复验 10/10 通过。单项目通过不能证明其它项目偶发波动，先前此项归因已撤回。完整框架与真实端验收仍独立执行。 + +视觉 runner 原先仍只对 Harmony 注册该观察器。新增 `e2e/app-visual-lifecycle.test.ts` 直接调用视觉入口，覆盖 Android/iOS 保存阶段重启、截图后重启和正常更新；旧实现把两个重启场景误报为通过，修复后组合生命周期 15 项通过。共用 helper 的回归不足以证明所有调用方已经接入，必须测试负责最终状态的入口；真实端视觉结果仍需独立复验。 + +## 提交时的验收状态（2026-09-17） + +本轮以草稿 PR 提交已实现的修复，完整全端验收尚未完成。没有修改仓库规则。 + +| 范围 | 本地结果 | 原始记录名 | +| --- | --- | --- | +| 完整单元 | 5440 通过、43 跳过 | final-current-unit | +| Lint、类型检查 | 通过 | final-current-lint、final-current-typecheck | +| 覆盖率 | 命令通过；语句 83.02%、分支 78.56%、函数 84.97%、行 83.17% | final-current-coverage | +| 完整构建 | 66/66，通过且无缓存命中 | build-real-framework-plugins | +| Uni、weapp-vite、H5 框架续跑 | 各子阶段通过；原完整 frameworks 命令仍保留失败 | frameworks-uni-after-reviewed-order、frameworks-weapp-after-reviewed-order、frameworks-h5-after-reviewed-order | +| 无过滤 static | 425 通过、32 跳过、1 失败 | static-current-all-projects | +| IDE 完整入口 | 框架阶段 11 通过、1 启动超时；后续阶段未执行 | ide-full-current | +| HBuilderX stable Issue1144 | Options/setup 各 16 次保存与刷新，2 项通过 | optin-issue1144-stable-current | +| Issue1170 | LF/CRLF 热更新和生产 CSS，3 项通过 | optin-issue1170-current | +| 其他显式启用回归 | 开发启动矩阵、Issue1164 Harmony/小程序及原生对照、Issue1160 小程序通过 | optin-dev-startup-current、optin-issue1164-harmony-mini-current、optin-issue1164-native-current、optin-issue1160-mini-current | +| 独立 Expo RN | Web/Android/iOS wrapper 12 项通过，含截图与两轮 HMR | rn-all-current-recorded | +| Issue951 | 11 个构建目标通过；RN bundle 与 Harmony hybrid 产物不代表设备运行 | issue951-scope-results | + +static 的失败位于 apps-generator-mode 汇总报告快照。项目 CSS 基线已在此前按项目审查更新，但完整汇总仍有字节数与选择器差异，尚未闭环；单项目通过不能替代此失败。正常回归未更新快照。 + +IDE 首次失败为 weapp-vite DevTools 启动超过 30 秒，日志同时显示基础库 3.17.3 下载；尚不能把该相关日志认定为唯一根因。已有 relaxed visibility 或 artifact 结果不等于真实页面视觉通过。 + +CLI Issue1144 Options 通过，新增 setup 场景在首次渲染失败。只保留 DCloud 插件并将运行时版本对齐到 3.0.0-alpha-5020220260725001 后，仍复现 UTSJSONObject 属性描述符错误和类型导入未消除；记录为 CLI 工具链阻塞。HBuilderX stable 5.24 的独立 setup 验证通过。Alpha 启动被已有 stable 实例接管，未取得 Alpha host，因此不计通过。 + +Android UniX 与 Harmony 的同实例 HMR 仍受工具链重启/重装限制，无 Tailwind 对照也复现；iOS 严格视觉、完整视觉/full profile、部分本地平台矩阵与 GUI attach 仍需验收。设备在线、初始截图、VDOM 或历史结果不能替代这些证据。 + +原始日志、覆盖率 HTML、截图及机器可读账本保留在本地 e2e/reports/local-full-run/2026-09-15T13-34-05-764Z/；该目录不随 PR 上传。记录名用于定位对应 JSON/日志。部分后续命令原先写在父级 local-full-run/，提交时已复制归档到同一轮目录。 diff --git a/e2e/__snapshots__/apps-generator-mode/compare/report.json b/e2e/__snapshots__/apps-generator-mode/compare/report.json index 7aab7a207e..8b087d0fd7 100644 --- a/e2e/__snapshots__/apps-generator-mode/compare/report.json +++ b/e2e/__snapshots__/apps-generator-mode/compare/report.json @@ -2626,7 +2626,7 @@ ], "status": "passed", "generator": { - "bytes": 428351, + "bytes": 428411, "selectors": [ ".-translate-y-1", "._b--watch-hmr-offset_c000089px_B", @@ -6682,7 +6682,7 @@ ], "status": "passed", "generator": { - "bytes": 338549, + "bytes": 338609, "selectors": [ ".before_ccontent-_b_aindependent_subpackage_taro-vite-vue3-tailwindcss-v4_a_B:before", ".before_ccontent-_b_anormal_subpackage_taro-vite-vue3-tailwindcss-v4_a_B:before", @@ -8424,7 +8424,7 @@ ], "status": "passed", "generator": { - "bytes": 53167, + "bytes": 53267, "selectors": [ "._ebg-_bgray_B", ".after_c_econtent-_b_agood_work_e_a_B:after", diff --git a/e2e/__snapshots__/apps-generator-mode/compare/report.md b/e2e/__snapshots__/apps-generator-mode/compare/report.md index 9d7a4a6be1..e6f122ba99 100644 --- a/e2e/__snapshots__/apps-generator-mode/compare/report.md +++ b/e2e/__snapshots__/apps-generator-mode/compare/report.md @@ -9,10 +9,10 @@ This report is generated by `pnpm e2e:apps-generator`. It builds each retained d | gulp-tailwindcss-v4 | demo | weapp | `weapp`, `tt` | passed | `gulp-tailwindcss-v4/dist/app.wxss` (+4) | 17828 | 84 | no | no | no | yes | yes | no | no | no | yes | | mpx-tailwindcss-v4 | demo | wx | `wx`, `ali`, `swan`, `tt`, `dd` | passed | `mpx-tailwindcss-v4/dist/wx/app.wxss` (+9) | 30217 | 183 | no | no | no | yes | yes | no | no | no | yes | | taro-webpack-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-react-tailwindcss-v4/dist/app.wxss` (+4) | 322016 | 2222 | no | no | no | yes | yes | no | no | no | yes | -| taro-vite-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-react-tailwindcss-v4/dist/app.wxss` (+6) | 428351 | 2256 | no | no | no | yes | yes | no | no | no | yes | +| taro-vite-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-react-tailwindcss-v4/dist/app.wxss` (+6) | 428411 | 2256 | no | no | no | yes | yes | no | no | no | yes | | taro-webpack-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-vue3-tailwindcss-v4/dist/app.wxss` (+3) | 239875 | 1723 | no | no | no | yes | yes | no | no | no | yes | -| taro-vite-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-vue3-tailwindcss-v4/dist/app.wxss` (+4) | 338549 | 1693 | no | no | no | yes | yes | no | no | no | yes | -| uni-app-vite-tailwindcss-v4 | demo | mp-weixin | `app-android`, `app-ios`, `h5`, `h5:ssr`, `mp-alipay`, `mp-baidu`, `mp-jd`, `mp-kuaishou`, `mp-lark`, `mp-qq`, `mp-toutiao`, `mp-weixin`, `mp-xhs`, `quickapp-webview`, `quickapp-webview-huawei`, `quickapp-webview-union` | passed | `uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss` (+7) | 53167 | 214 | no | no | no | yes | yes | no | no | no | yes | +| taro-vite-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-vue3-tailwindcss-v4/dist/app.wxss` (+4) | 338609 | 1693 | no | no | no | yes | yes | no | no | no | yes | +| uni-app-vite-tailwindcss-v4 | demo | mp-weixin | `app-android`, `app-ios`, `h5`, `h5:ssr`, `mp-alipay`, `mp-baidu`, `mp-jd`, `mp-kuaishou`, `mp-lark`, `mp-qq`, `mp-toutiao`, `mp-weixin`, `mp-xhs`, `quickapp-webview`, `quickapp-webview-huawei`, `quickapp-webview-union` | passed | `uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss` (+7) | 53267 | 214 | no | no | no | yes | yes | no | no | no | yes | | weapp-vite-tailwindcss-v4 | demo | weapp | `weapp` | passed | `weapp-vite-tailwindcss-v4/dist/app.wxss` (+3) | 20003 | 123 | no | no | no | yes | yes | no | no | no | yes | | taro-webpack-react-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 460183 | 2305 | yes | no | yes | yes | yes | no | no | yes | no | | taro-webpack-react-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 442372 | 2305 | yes | no | yes | yes | yes | no | no | yes | no | diff --git a/e2e/__snapshots__/apps-generator-mode/compare/report.zh-CN.md b/e2e/__snapshots__/apps-generator-mode/compare/report.zh-CN.md index bc9a1b9d2a..4a835be83d 100644 --- a/e2e/__snapshots__/apps-generator-mode/compare/report.zh-CN.md +++ b/e2e/__snapshots__/apps-generator-mode/compare/report.zh-CN.md @@ -9,10 +9,10 @@ | gulp-tailwindcss-v4 | demo | weapp | `weapp`, `tt` | 通过 | `gulp-tailwindcss-v4/dist/app.wxss` (+4) | 17828 | 84 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | | mpx-tailwindcss-v4 | demo | wx | `wx`, `ali`, `swan`, `tt`, `dd` | 通过 | `mpx-tailwindcss-v4/dist/wx/app.wxss` (+9) | 30217 | 183 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | | taro-webpack-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-react-tailwindcss-v4/dist/app.wxss` (+4) | 322016 | 2222 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | -| taro-vite-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-react-tailwindcss-v4/dist/app.wxss` (+6) | 428351 | 2256 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | +| taro-vite-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-react-tailwindcss-v4/dist/app.wxss` (+6) | 428411 | 2256 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | | taro-webpack-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-vue3-tailwindcss-v4/dist/app.wxss` (+3) | 239875 | 1723 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | -| taro-vite-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-vue3-tailwindcss-v4/dist/app.wxss` (+4) | 338549 | 1693 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | -| uni-app-vite-tailwindcss-v4 | demo | mp-weixin | `app-android`, `app-ios`, `h5`, `h5:ssr`, `mp-alipay`, `mp-baidu`, `mp-jd`, `mp-kuaishou`, `mp-lark`, `mp-qq`, `mp-toutiao`, `mp-weixin`, `mp-xhs`, `quickapp-webview`, `quickapp-webview-huawei`, `quickapp-webview-union` | 通过 | `uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss` (+7) | 53167 | 214 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | +| taro-vite-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-vue3-tailwindcss-v4/dist/app.wxss` (+4) | 338609 | 1693 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | +| uni-app-vite-tailwindcss-v4 | demo | mp-weixin | `app-android`, `app-ios`, `h5`, `h5:ssr`, `mp-alipay`, `mp-baidu`, `mp-jd`, `mp-kuaishou`, `mp-lark`, `mp-qq`, `mp-toutiao`, `mp-weixin`, `mp-xhs`, `quickapp-webview`, `quickapp-webview-huawei`, `quickapp-webview-union` | 通过 | `uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss` (+7) | 53267 | 214 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | | weapp-vite-tailwindcss-v4 | demo | weapp | `weapp` | 通过 | `weapp-vite-tailwindcss-v4/dist/app.wxss` (+3) | 20003 | 123 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | | taro-webpack-react-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 460183 | 2305 | 是 | 否 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | | taro-webpack-react-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 442372 | 2305 | 是 | 否 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/README.md index 515e146141..931c1337e7 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/app | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 36791 | 172 | true | true | true | true | true | false | true | +| 99890 | 628 | true | true | true | true | true | false | true | ## Generator CSS Files @@ -22,7 +22,7 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/app | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `app.css` | [artifacts/app.css](artifacts/app.css) | 31366 | 166 | true | true | true | true | true | false | true | +| `app.css` | [artifacts/app.css](artifacts/app.css) | 94253 | 622 | true | true | true | true | true | false | true | | `pages-order/pages/home/home.css` | [artifacts/pages-order__pages__home__home.css](artifacts/pages-order__pages__home__home.css) | 1851 | 4 | true | false | true | false | false | false | false | | `pages-order/pages/user/user.css` | [artifacts/pages-order__pages__user__user.css](artifacts/pages-order__pages__user__user.css) | 1851 | 4 | true | false | true | false | false | false | false | -| `pages/index/index.css` | [artifacts/pages__index__index.css](artifacts/pages__index__index.css) | 1723 | 6 | false | false | false | false | false | false | true | +| `pages/index/index.css` | [artifacts/pages__index__index.css](artifacts/pages__index__index.css) | 1935 | 6 | false | false | false | false | false | false | true | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/artifacts/app.css b/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/artifacts/app.css index db149b3757..350eb0cbab 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/artifacts/app.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/artifacts/app.css @@ -1,3 +1,2310 @@ +* { + margin: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; +} +html, +body { + -webkit-user-select: none; + user-select: none; + width: 100%; +} +html { + height: 100%; + height: 100vh; + width: 100%; + width: 100vw; +} +body { + overflow-x: hidden; + background-color: #fff; + height: 100%; + font-size: 16px; +} +#app { + height: 100%; +} +input[type='search']::-webkit-search-cancel-button { + display: none; +} +.uni-loading, +uni-button[loading]::before { + background: transparent + url(data:image/svg+xml;base64,\ PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) + no-repeat; +} +.uni-loading { + width: 20px; + height: 20px; + display: inline-block; + vertical-align: middle; + animation: uni-loading 1s steps(12, end) infinite; + background-size: 100%; +} +@keyframes uni-loading { + 0% { + transform: rotate3d(0, 0, 1, 0); + } + to { + transform: rotate3d(0, 0, 1, 360deg); + } +} +@media (prefers-color-scheme: dark) { + html { + --UI-BG-COLOR-ACTIVE: #373737; + --UI-BORDER-COLOR-1: #373737; + --UI-BG: #000; + --UI-BG-0: #191919; + --UI-BG-1: #1f1f1f; + --UI-BG-2: #232323; + --UI-BG-3: #2f2f2f; + --UI-BG-4: #606060; + --UI-BG-5: #2c2c2c; + --UI-FG: #fff; + --UI-FG-0: hsla(0, 0%, 100%, 0.8); + --UI-FG-HALF: hsla(0, 0%, 100%, 0.6); + --UI-FG-1: hsla(0, 0%, 100%, 0.5); + --UI-FG-2: hsla(0, 0%, 100%, 0.3); + --UI-FG-3: hsla(0, 0%, 100%, 0.05); + } + body { + background-color: var(--UI-BG-0); + color: var(--UI-FG-0); + } +} +[nvue] uni-view, +[nvue] uni-label, +[nvue] uni-swiper-item, +[nvue] uni-scroll-view { + display: flex; + flex-shrink: 0; + flex-grow: 0; + flex-basis: auto; + align-items: stretch; + align-content: flex-start; +} +[nvue] uni-button { + margin: 0; +} +[nvue-dir-row] uni-view, +[nvue-dir-row] uni-label, +[nvue-dir-row] uni-swiper-item { + flex-direction: row; +} +[nvue-dir-column] uni-view, +[nvue-dir-column] uni-label, +[nvue-dir-column] uni-swiper-item { + flex-direction: column; +} +[nvue-dir-row-reverse] uni-view, +[nvue-dir-row-reverse] uni-label, +[nvue-dir-row-reverse] uni-swiper-item { + flex-direction: row-reverse; +} +[nvue-dir-column-reverse] uni-view, +[nvue-dir-column-reverse] uni-label, +[nvue-dir-column-reverse] uni-swiper-item { + flex-direction: column-reverse; +} +[nvue] uni-view, +[nvue] uni-image, +[nvue] uni-input, +[nvue] uni-scroll-view, +[nvue] uni-swiper, +[nvue] uni-swiper-item, +[nvue] uni-text, +[nvue] uni-textarea, +[nvue] uni-video { + position: relative; + border: 0px solid #000000; + box-sizing: border-box; +} +[nvue] uni-swiper-item { + position: absolute; +} +@keyframes once-show { + 0% { + top: 0; + } +} +uni-resize-sensor, +uni-resize-sensor > div { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +uni-resize-sensor { + display: block; + z-index: -1; + visibility: hidden; + animation: once-show 1ms; +} +uni-resize-sensor > div > div { + position: absolute; + left: 0; + top: 0; +} +uni-resize-sensor > div:first-child > div { + width: 100000px; + height: 100000px; +} +uni-resize-sensor > div:last-child > div { + width: 200%; + height: 200%; +} +uni-text[selectable] { + cursor: auto; + -webkit-user-select: text; + user-select: text; +} +uni-text { + white-space: pre-line; +} +uni-view { + display: block; +} +uni-view[hidden] { + display: none; +} +uni-ad .uni-ad-container { + width: 100%; + height: 100%; + min-height: 1px; +} +uni-button { + position: relative; + display: block; + margin-left: auto; + margin-right: auto; + padding-left: 14px; + padding-right: 14px; + box-sizing: border-box; + font-size: 18px; + text-align: center; + text-decoration: none; + line-height: 2.55555556; + border-radius: 5px; + -webkit-tap-highlight-color: transparent; + overflow: hidden; + color: #000; + background-color: #f8f8f8; + cursor: pointer; +} +uni-button[hidden] { + display: none !important; +} +uni-button::after { + content: ' '; + width: 200%; + height: 200%; + position: absolute; + top: 0; + left: 0; + border: 1px solid rgba(0, 0, 0, 0.2); + transform: scale(0.5); + transform-origin: 0 0; + box-sizing: border-box; + border-radius: 10px; +} +uni-button[native] { + padding-left: 0; + padding-right: 0; +} +uni-button[native] .uni-button-cover-view-wrapper { + border: inherit; + border-color: inherit; + border-radius: inherit; + background-color: inherit; +} +uni-button[native] .uni-button-cover-view-inner { + padding-left: 14px; + padding-right: 14px; +} +uni-button uni-cover-view { + line-height: inherit; + white-space: inherit; +} +uni-button[type='default'] { + color: #000; + background-color: #f8f8f8; +} +uni-button[type='primary'] { + color: #fff; + background-color: #007aff; +} +uni-button[type='warn'] { + color: #fff; + background-color: #e64340; +} +uni-button[disabled] { + color: rgba(255, 255, 255, 0.6); + cursor: not-allowed; +} +uni-button[disabled][type='default'], +uni-button[disabled]:not([type]) { + color: rgba(0, 0, 0, 0.3); + background-color: #f7f7f7; +} +uni-button[disabled][type='primary'] { + background-color: rgba(0, 122, 255, 0.6); +} +uni-button[disabled][type='warn'] { + background-color: #ec8b89; +} +uni-button[type='primary'][plain] { + color: #007aff; + border: 1px solid #007aff; + background-color: transparent; +} +uni-button[type='primary'][plain][disabled] { + color: rgba(0, 0, 0, 0.2); + border-color: rgba(0, 0, 0, 0.2); +} +uni-button[type='primary'][plain]::after { + border-width: 0; +} +uni-button[type='default'][plain] { + color: #353535; + border: 1px solid #353535; + background-color: transparent; +} +uni-button[type='default'][plain][disabled] { + color: rgba(0, 0, 0, 0.2); + border-color: rgba(0, 0, 0, 0.2); +} +uni-button[type='default'][plain]::after { + border-width: 0; +} +uni-button[plain] { + color: #353535; + border: 1px solid #353535; + background-color: transparent; +} +uni-button[plain][disabled] { + color: rgba(0, 0, 0, 0.2); + border-color: rgba(0, 0, 0, 0.2); +} +uni-button[plain]::after { + border-width: 0; +} +uni-button[plain][native] .uni-button-cover-view-inner { + padding: 0; +} +uni-button[type='warn'][plain] { + color: #e64340; + border: 1px solid #e64340; + background-color: transparent; +} +uni-button[type='warn'][plain][disabled] { + color: rgba(0, 0, 0, 0.2); + border-color: rgba(0, 0, 0, 0.2); +} +uni-button[type='warn'][plain]::after { + border-width: 0; +} +uni-button[size='mini'] { + display: inline-block; + line-height: 2.3; + font-size: 13px; + padding: 0 1.34em; +} +uni-button[size='mini'][native] { + padding: 0; +} +uni-button[size='mini'][native] .uni-button-cover-view-inner { + padding: 0 1.34em; +} +uni-button[loading]:not([disabled]) { + cursor: progress; +} +uni-button[loading]::before { + content: ' '; + display: inline-block; + width: 18px; + height: 18px; + vertical-align: middle; + animation: uni-loading 1s steps(12, end) infinite; + background-size: 100%; +} +uni-button[loading][type='primary'] { + color: rgba(255, 255, 255, 0.6); + background-color: #0062cc; +} +uni-button[loading][type='primary'][plain] { + color: #007aff; + background-color: transparent; +} +uni-button[loading][type='default'] { + color: rgba(0, 0, 0, 0.6); + background-color: #dedede; +} +uni-button[loading][type='default'][plain] { + color: #353535; + background-color: transparent; +} +uni-button[loading][type='warn'] { + color: rgba(255, 255, 255, 0.6); + background-color: #ce3c39; +} +uni-button[loading][type='warn'][plain] { + color: #e64340; + background-color: transparent; +} +uni-button[loading][native]::before { + content: none; +} +.button-hover { + color: rgba(0, 0, 0, 0.6); + background-color: #dedede; +} +.button-hover[plain] { + color: rgba(53, 53, 53, 0.6); + border-color: rgba(53, 53, 53, 0.6); + background-color: transparent; +} +.button-hover[type='primary'] { + color: rgba(255, 255, 255, 0.6); + background-color: #0062cc; +} +.button-hover[type='primary'][plain] { + color: rgba(0, 122, 255, 0.6); + border-color: rgba(0, 122, 255, 0.6); + background-color: transparent; +} +.button-hover[type='default'] { + color: rgba(0, 0, 0, 0.6); + background-color: #dedede; +} +.button-hover[type='default'][plain] { + color: rgba(53, 53, 53, 0.6); + border-color: rgba(53, 53, 53, 0.6); + background-color: transparent; +} +.button-hover[type='warn'] { + color: rgba(255, 255, 255, 0.6); + background-color: #ce3c39; +} +.button-hover[type='warn'][plain] { + color: rgba(230, 67, 64, 0.6); + border-color: rgba(230, 67, 64, 0.6); + background-color: transparent; +} +@media (prefers-color-scheme: dark) { + uni-button, + uni-button[type='default'] { + color: #d6d6d6; + background-color: #343434; + } + .button-hover, + .button-hover[type='default'] { + color: #d6d6d6; + background-color: rgba(255, 255, 255, 0.1); + } + uni-button[disabled][type='default'], + uni-button[disabled]:not([type]) { + color: rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, 0.08); + } + uni-button[type='primary'][plain][disabled] { + color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.2); + } + uni-button[type='default'][plain] { + color: #d6d6d6; + border: 1px solid #d6d6d6; + } + .button-hover[type='default'][plain] { + color: rgba(150, 150, 150, 0.6); + border-color: rgba(150, 150, 150, 0.6); + background-color: rgba(50, 50, 50, 0.2); + } + uni-button[type='default'][plain][disabled] { + border-color: rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.2); + } +} +uni-canvas { + width: 300px; + height: 150px; + display: block; + position: relative; +} +uni-canvas > .uni-canvas-canvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +uni-checkbox { + -webkit-tap-highlight-color: transparent; + display: inline-block; + cursor: pointer; +} +uni-checkbox[hidden] { + display: none; +} +uni-checkbox[disabled] { + cursor: not-allowed; +} +.uni-checkbox-wrapper { + display: inline-flex; + align-items: center; + vertical-align: middle; +} +.uni-checkbox-input { + margin-right: 5px; + -webkit-appearance: none; + appearance: none; + outline: 0; + border: 1px solid #d1d1d1; + background-color: #fff; + border-radius: 3px; + width: 22px; + height: 22px; + position: relative; +} +.uni-checkbox-input svg { + color: #007aff; + font-size: 22px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -48%) scale(0.73); +} +@media (hover: hover) { + uni-checkbox:not([disabled]) .uni-checkbox-input:hover { + border-color: var(--HOVER-BD-COLOR, #007aff) !important; + } +} +uni-checkbox-group { + display: block; +} +uni-checkbox-group[hidden] { + display: none; +} +uni-cover-image { + display: block; + line-height: 1.2; + overflow: hidden; + height: 100%; + width: 100%; + pointer-events: auto; +} +uni-cover-image[hidden] { + display: none; +} +uni-cover-image .uni-cover-image { + width: 100%; + height: 100%; +} +uni-cover-view { + display: block; + line-height: 1.2; + overflow: hidden; + white-space: nowrap; + pointer-events: auto; +} +uni-cover-view[hidden] { + display: none; +} +uni-cover-view .uni-cover-view { + width: 100%; + height: 100%; + visibility: hidden; + text-overflow: inherit; + white-space: inherit; + align-items: inherit; + justify-content: inherit; + flex-direction: inherit; + flex-wrap: inherit; + display: inherit; + overflow: inherit; +} +.ql-container { + display: block; + position: relative; + box-sizing: border-box; + -webkit-user-select: text; + user-select: text; + outline: none; + overflow: hidden; + width: 100%; + height: 200px; + min-height: 200px; +} +.ql-container[hidden] { + display: none; +} +.ql-container .ql-editor { + position: relative; + font-size: inherit; + line-height: inherit; + font-family: inherit; + min-height: inherit; + width: 100%; + height: 100%; + padding: 0; + overflow-x: hidden; + overflow-y: auto; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + -webkit-overflow-scrolling: touch; +} +.ql-container .ql-editor::-webkit-scrollbar { + width: 0 !important; +} +.ql-container .ql-editor.scroll-disabled { + overflow: hidden; +} +.ql-container .ql-image-overlay { + display: flex; + position: absolute; + box-sizing: border-box; + border: 1px dashed #ccc; + justify-content: center; + align-items: center; + -webkit-user-select: none; + user-select: none; +} +.ql-container .ql-image-overlay .ql-image-size { + position: absolute; + padding: 4px 8px; + text-align: center; + background-color: #fff; + color: #888; + border: 1px solid #ccc; + box-sizing: border-box; + opacity: 0.8; + right: 4px; + top: 4px; + font-size: 12px; + display: inline-block; + width: auto; +} +.ql-container .ql-image-overlay .ql-image-toolbar { + position: relative; + text-align: center; + box-sizing: border-box; + background: #000; + border-radius: 5px; + color: #fff; + font-size: 0; + min-height: 24px; + z-index: 100; +} +.ql-container .ql-image-overlay .ql-image-toolbar span { + display: inline-block; + cursor: pointer; + padding: 5px; + font-size: 12px; + border-right: 1px solid #fff; +} +.ql-container .ql-image-overlay .ql-image-toolbar span:last-child { + border-right: 0; +} +.ql-container .ql-image-overlay .ql-image-toolbar span.triangle-up { + padding: 0; + position: absolute; + top: -12px; + left: 50%; + transform: translate(-50%); + width: 0; + height: 0; + border-width: 6px; + border-style: solid; + border-color: transparent transparent black transparent; +} +.ql-container .ql-image-overlay .ql-image-handle { + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + border: 1px solid #ccc; + box-sizing: border-box; + background: #fff; +} +.ql-container img { + display: inline-block; + max-width: 100%; +} +.ql-clipboard p { + margin: 0; + padding: 0; +} +.ql-editor { + box-sizing: border-box; + height: 100%; + outline: none; + overflow-y: auto; + tab-size: 4; + -moz-tab-size: 4; + text-align: left; + white-space: pre-wrap; + word-wrap: break-word; +} +.ql-editor > * { + cursor: text; +} +.ql-editor p, +.ql-editor ol, +.ql-editor ul, +.ql-editor pre, +.ql-editor blockquote, +.ql-editor h1, +.ql-editor h2, +.ql-editor h3, +.ql-editor h4, +.ql-editor h5, +.ql-editor h6 { + margin: 0; + padding: 0; + counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol > li, +.ql-editor ul > li { + list-style-type: none; +} +.ql-editor ul > li::before { + content: '•'; +} +.ql-editor ul[data-checked='true'], +.ql-editor ul[data-checked='false'] { + pointer-events: none; +} +.ql-editor ul[data-checked='true'] > li *, +.ql-editor ul[data-checked='false'] > li * { + pointer-events: all; +} +.ql-editor ul[data-checked='true'] > li::before, +.ql-editor ul[data-checked='false'] > li::before { + color: #777; + cursor: pointer; + pointer-events: all; +} +.ql-editor ul[data-checked='true'] > li::before { + content: '☑'; +} +.ql-editor ul[data-checked='false'] > li::before { + content: '☐'; +} +.ql-editor ol, +.ql-editor ul { + padding-left: 1.5em; +} +.ql-editor li:not(.ql-direction-rtl)::before { + margin-left: -1.5em; +} +.ql-editor li.ql-direction-rtl::before { + margin-right: -1.5em; +} +.ql-editor li::before { + display: inline-block; + white-space: nowrap; + width: 2em; +} +.ql-editor ol li { + counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + counter-increment: list-0; +} +.ql-editor ol li::before { + content: counter(list-0, decimal) '. '; +} +.ql-editor ol li.ql-indent-1 { + counter-increment: list-1; +} +.ql-editor ol li.ql-indent-1::before { + content: counter(list-1, lower-alpha) '. '; +} +.ql-editor ol li.ql-indent-1 { + counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-2 { + counter-increment: list-2; +} +.ql-editor ol li.ql-indent-2::before { + content: counter(list-2, lower-roman) '. '; +} +.ql-editor ol li.ql-indent-2 { + counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-3 { + counter-increment: list-3; +} +.ql-editor ol li.ql-indent-3::before { + content: counter(list-3, decimal) '. '; +} +.ql-editor ol li.ql-indent-3 { + counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-4 { + counter-increment: list-4; +} +.ql-editor ol li.ql-indent-4::before { + content: counter(list-4, lower-alpha) '. '; +} +.ql-editor ol li.ql-indent-4 { + counter-reset: list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-5 { + counter-increment: list-5; +} +.ql-editor ol li.ql-indent-5::before { + content: counter(list-5, lower-roman) '. '; +} +.ql-editor ol li.ql-indent-5 { + counter-reset: list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-6 { + counter-increment: list-6; +} +.ql-editor ol li.ql-indent-6::before { + content: counter(list-6, decimal) '. '; +} +.ql-editor ol li.ql-indent-6 { + counter-reset: list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-7 { + counter-increment: list-7; +} +.ql-editor ol li.ql-indent-7::before { + content: counter(list-7, lower-alpha) '. '; +} +.ql-editor ol li.ql-indent-7 { + counter-reset: list-8 list-9; +} +.ql-editor ol li.ql-indent-8 { + counter-increment: list-8; +} +.ql-editor ol li.ql-indent-8::before { + content: counter(list-8, lower-roman) '. '; +} +.ql-editor ol li.ql-indent-8 { + counter-reset: list-9; +} +.ql-editor ol li.ql-indent-9 { + counter-increment: list-9; +} +.ql-editor ol li.ql-indent-9::before { + content: counter(list-9, decimal) '. '; +} +.ql-editor .ql-indent-1:not(.ql-direction-rtl) { + padding-left: 2em; +} +.ql-editor li.ql-indent-1:not(.ql-direction-rtl) { + padding-left: 2em; +} +.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { + padding-right: 2em; +} +.ql-editor .ql-indent-2:not(.ql-direction-rtl) { + padding-left: 4em; +} +.ql-editor li.ql-indent-2:not(.ql-direction-rtl) { + padding-left: 4em; +} +.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { + padding-right: 4em; +} +.ql-editor .ql-indent-3:not(.ql-direction-rtl) { + padding-left: 6em; +} +.ql-editor li.ql-indent-3:not(.ql-direction-rtl) { + padding-left: 6em; +} +.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { + padding-right: 6em; +} +.ql-editor .ql-indent-4:not(.ql-direction-rtl) { + padding-left: 8em; +} +.ql-editor li.ql-indent-4:not(.ql-direction-rtl) { + padding-left: 8em; +} +.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { + padding-right: 8em; +} +.ql-editor .ql-indent-5:not(.ql-direction-rtl) { + padding-left: 10em; +} +.ql-editor li.ql-indent-5:not(.ql-direction-rtl) { + padding-left: 10em; +} +.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { + padding-right: 10em; +} +.ql-editor .ql-indent-6:not(.ql-direction-rtl) { + padding-left: 12em; +} +.ql-editor li.ql-indent-6:not(.ql-direction-rtl) { + padding-left: 12em; +} +.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { + padding-right: 12em; +} +.ql-editor .ql-indent-7:not(.ql-direction-rtl) { + padding-left: 14em; +} +.ql-editor li.ql-indent-7:not(.ql-direction-rtl) { + padding-left: 14em; +} +.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { + padding-right: 14em; +} +.ql-editor .ql-indent-8:not(.ql-direction-rtl) { + padding-left: 16em; +} +.ql-editor li.ql-indent-8:not(.ql-direction-rtl) { + padding-left: 16em; +} +.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { + padding-right: 16em; +} +.ql-editor .ql-indent-9:not(.ql-direction-rtl) { + padding-left: 18em; +} +.ql-editor li.ql-indent-9:not(.ql-direction-rtl) { + padding-left: 18em; +} +.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { + padding-right: 18em; +} +.ql-editor .ql-direction-rtl { + direction: rtl; + text-align: inherit; +} +.ql-editor .ql-align-center { + text-align: center; +} +.ql-editor .ql-align-justify { + text-align: justify; +} +.ql-editor .ql-align-right { + text-align: right; +} +.ql-editor.ql-blank::before { + color: rgba(0, 0, 0, 0.6); + content: attr(data-placeholder); + font-style: italic; + pointer-events: none; + position: absolute; +} +.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before { + pointer-events: none; +} +.ql-clipboard { + left: -100000px; + height: 1px; + overflow-y: hidden; + position: absolute; + top: 50%; +} +.ql-editor .mention { + display: inline-block; + background: #e6f3ff; + color: #1677ff; + border-radius: 4px; + white-space: nowrap; + user-select: all; + -webkit-user-select: all; + cursor: pointer; +} +.ql-editor .mention span { + display: inline-block; + padding: 2px 6px; +} +.ql-editor blockquote { + border-left: 4px solid #ccc; + margin-bottom: 5px; + margin-top: 5px; + padding-left: 16px; +} +.ql-editor pre.ql-syntax { + background-color: #23241f; + color: #f8f8f2; + overflow: scroll; + margin: 5px 0; + padding: 5px 10px; + border-radius: 3px; +} +pre code.hljs { + display: block; + overflow-x: auto; + padding: 1em; +} +code.hljs { + padding: 3px 5px; +} +.hljs { + color: #abb2bf; + background: #282c34; +} +.hljs-comment, +.hljs-quote { + color: #5c6370; + font-style: italic; +} +.hljs-doctag, +.hljs-formula, +.hljs-keyword { + color: #c678dd; +} +.hljs-deletion, +.hljs-name, +.hljs-section, +.hljs-selector-tag, +.hljs-subst { + color: #e06c75; +} +.hljs-literal { + color: #56b6c2; +} +.hljs-addition, +.hljs-attribute, +.hljs-meta .hljs-string, +.hljs-regexp, +.hljs-string { + color: #98c379; +} +.hljs-attr, +.hljs-number, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-selector-pseudo, +.hljs-template-variable, +.hljs-type, +.hljs-variable { + color: #d19a66; +} +.hljs-bullet, +.hljs-link, +.hljs-meta, +.hljs-selector-id, +.hljs-symbol, +.hljs-title { + color: #61aeee; +} +.hljs-built_in, +.hljs-class .hljs-title, +.hljs-title.class_ { + color: #e6c07b; +} +.hljs-emphasis { + font-style: italic; +} +.hljs-strong { + font-weight: 700; +} +.hljs-link { + text-decoration: underline; +} +uni-icon { + display: inline-block; + font-size: 0; + box-sizing: border-box; +} +uni-icon[hidden] { + display: none; +} +uni-image { + width: 320px; + height: 240px; + display: inline-block; + overflow: hidden; + position: relative; +} +uni-image[hidden] { + display: none; +} +uni-image > div { + width: 100%; + height: 100%; + background-repeat: no-repeat; +} +uni-image > img { + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; +} +uni-image > .uni-image-will-change { + will-change: transform; +} +uni-input { + display: block; + font-size: 16px; + line-height: 1.4em; + height: 1.4em; + min-height: 1.4em; + overflow: hidden; +} +uni-input[hidden] { + display: none; +} +.uni-input-wrapper, +.uni-input-placeholder, +.uni-input-form, +.uni-input-input { + outline: none; + border: none; + padding: 0; + margin: 0; + text-decoration: inherit; +} +.uni-input-wrapper, +.uni-input-form { + display: flex; + position: relative; + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; +} +.uni-input-placeholder, +.uni-input-input { + width: 100%; +} +.uni-input-placeholder { + position: absolute; + top: auto !important; + left: 0; + color: gray; + overflow: hidden; + text-overflow: clip; + white-space: pre; + word-break: keep-all; + pointer-events: none; + line-height: inherit; +} +.uni-input-input { + position: relative; + display: block; + height: 100%; + background: none; + color: inherit; + opacity: 1; + font: inherit; + line-height: inherit; + letter-spacing: inherit; + text-align: inherit; + text-indent: inherit; + text-transform: inherit; + text-shadow: inherit; +} +.uni-input-input[type='search']::-webkit-search-cancel-button, +.uni-input-input[type='search']::-webkit-search-decoration { + display: none; +} +.uni-input-input::-webkit-outer-spin-button, +.uni-input-input::-webkit-inner-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; +} +.uni-input-input[type='number'] { + -moz-appearance: textfield; +} +.uni-input-input:disabled { + -webkit-text-fill-color: currentcolor; +} +.uni-label-pointer { + cursor: pointer; +} +uni-live-pusher { + width: 320px; + height: 240px; + display: inline-block; + line-height: 0; + overflow: hidden; + position: relative; +} +uni-live-pusher[hidden] { + display: none; +} +.uni-live-pusher-container { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + background-color: #000; +} +.uni-live-pusher-slot { + position: absolute; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; +} +uni-map { + width: 300px; + height: 225px; + display: inline-block; + line-height: 0; + overflow: hidden; + position: relative; +} +uni-map[hidden] { + display: none; +} +.uni-map-container { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + background-color: transparent; +} +.uni-map-slot { + position: absolute; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; +} +uni-map.web { + position: relative; + width: 300px; + height: 150px; + display: block; +} +uni-map.web[hidden] { + display: none; +} +uni-map.web .amap-marker-label { + padding: 0; + border: none; + background-color: transparent; +} +uni-map.web .amap-marker > .amap-icon > img { + left: 0 !important; + top: 0 !important; +} +uni-map.web .uni-map-control { + position: absolute; + width: 0; + height: 0; + top: 0; + left: 0; + z-index: 999; +} +uni-map.web .uni-map-control-icon { + position: absolute; + max-width: initial; +} +.uni-system-choose-location { + display: block; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #f8f8f8; + z-index: 999; +} +.uni-system-choose-location .map { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 300px; +} +.uni-system-choose-location .map-location { + position: absolute; + left: 50%; + bottom: 50%; + width: 32px; + height: 52px; + margin-left: -16px; + cursor: pointer; + background-size: 100%; +} +.uni-system-choose-location .map-move { + position: absolute; + bottom: 50px; + right: 10px; + width: 40px; + height: 40px; + box-sizing: border-box; + line-height: 40px; + background-color: #fff; + border-radius: 50%; + pointer-events: auto; + cursor: pointer; + box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); +} +.uni-system-choose-location .map-move > svg { + display: block; + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 8px; +} +.uni-system-choose-location .nav { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: calc(44px + var(--status-bar-height)); + background-color: transparent; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); +} +.uni-system-choose-location .nav-btn { + position: absolute; + box-sizing: border-box; + top: var(--status-bar-height); + left: 0; + width: 60px; + height: 44px; + padding: 6px; + line-height: 32px; + font-size: 26px; + color: #fff; + text-align: center; + cursor: pointer; +} +.uni-system-choose-location .nav-btn.confirm { + left: auto; + right: 0; +} +.uni-system-choose-location .nav-btn.disable { + opacity: 0.4; +} +.uni-system-choose-location .nav-btn > svg { + display: block; + width: 100%; + height: 100%; + border-radius: 2px; + box-sizing: border-box; + padding: 3px; +} +.uni-system-choose-location .nav-btn.confirm > svg { + background-color: #007aff; + padding: 5px; +} +.uni-system-choose-location .menu { + position: absolute; + top: 300px; + left: 0; + width: 100%; + bottom: 0; + background-color: #fff; +} +.uni-system-choose-location .search { + display: flex; + flex-direction: row; + height: 50px; + padding: 8px; + line-height: 34px; + box-sizing: border-box; + background-color: #fff; +} +.uni-system-choose-location .search-input { + flex: 1; + height: 100%; + border-radius: 5px; + padding: 0 5px; + background: #ebebeb; +} +.uni-system-choose-location .search-btn { + margin-left: 5px; + color: #007aff; + font-size: 17px; + text-align: center; +} +.uni-system-choose-location .list { + position: absolute; + top: 50px; + left: 0; + width: 100%; + bottom: 0; + padding-bottom: 10px; +} +.uni-system-choose-location .list-loading { + display: flex; + height: 50px; + justify-content: center; + align-items: center; +} +.uni-system-choose-location .list-item { + position: relative; + padding: 10px 40px 10px 10px; + cursor: pointer; +} +.uni-system-choose-location .list-item > svg { + display: none; + position: absolute; + top: 50%; + right: 10px; + width: 30px; + height: 30px; + margin-top: -15px; + box-sizing: border-box; + padding: 5px; +} +.uni-system-choose-location .list-item.selected > svg { + display: block; +} +.uni-system-choose-location .list-item:not(:last-child)::after { + position: absolute; + content: ''; + height: 1px; + left: 10px; + bottom: 0; + width: 100%; + background-color: #d3d3d3; +} +.uni-system-choose-location .list-item-title { + font-size: 14px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.uni-system-choose-location .list-item-detail { + font-size: 12px; + color: gray; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +@media screen and (min-width: 800px) { + .uni-system-choose-location .map { + top: 0; + height: 100%; + } + .uni-system-choose-location .map-move { + bottom: 10px; + right: 320px; + } + .uni-system-choose-location .menu { + top: calc(54px + var(--status-bar-height)); + left: auto; + right: 10px; + width: 300px; + bottom: 10px; + max-height: 600px; + box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3); + } +} +.uni-system-open-location { + display: block; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #f8f8f8; + z-index: 999; +} +.uni-system-open-location .map { + position: absolute; + top: 0; + left: 0; + width: 100%; + bottom: 80px; + height: auto; +} + /*tokens: info <= src/pages/index/index.vue */ +.uni-system-open-location .info { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 80px; + background-color: #fff; + padding: 15px; + box-sizing: border-box; + line-height: 1.5; +} + /*tokens: info <= src/pages/index/index.vue | name <= src/pages/index/index.vue */ +.uni-system-open-location .info > .name { + font-size: 17px; + color: #111; + padding-right: 50px; +} + /*tokens: info <= src/pages/index/index.vue */ +.uni-system-open-location .info > .address { + font-size: 14px; + color: #666; +} + /*tokens: info <= src/pages/index/index.vue */ +.uni-system-open-location .info > .nav { + position: absolute; + top: 50%; + right: 15px; + width: 50px; + height: 50px; + border-radius: 50%; + margin-top: -25px; + background-color: #007aff; +} + /*tokens: info <= src/pages/index/index.vue */ +.uni-system-open-location .info > .nav > svg { + display: block; + width: 100%; + height: 100%; + padding: 10px; + box-sizing: border-box; +} +.uni-system-open-location .map-move { + position: absolute; + bottom: 50px; + right: 10px; + width: 40px; + height: 40px; + box-sizing: border-box; + line-height: 40px; + background-color: #fff; + border-radius: 50%; + pointer-events: auto; + cursor: pointer; + box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); +} +.uni-system-open-location .map-move > svg { + display: block; + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 8px; +} +.uni-system-open-location .nav-btn-back { + position: absolute; + box-sizing: border-box; + top: var(--status-bar-height); + left: 0; + width: 44px; + height: 44px; + padding: 6px; + cursor: pointer; +} +.uni-system-open-location .nav-btn-back > svg { + display: block; + width: 100%; + height: 100%; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.5); + padding: 3px; + box-sizing: border-box; +} +.uni-system-open-location .map-content { + position: absolute; + left: 0; + top: 0; + width: 100%; + bottom: 0; + overflow: hidden; +} +.uni-system-open-location .map-content.fix-position { + top: -74px; + bottom: -44px; +} +.uni-system-open-location .map-content > iframe { + width: 100%; + height: 100%; + border: none; +} +.uni-system-open-location .actTonav { + position: absolute; + right: 16px; + bottom: 56px; + width: 60px; + height: 60px; + border-radius: 60px; +} +.uni-system-open-location .nav-view { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} +.uni-system-open-location .nav-view-top-placeholder { + width: 100%; + height: var(--status-bar-height); + background-color: #fff; +} +.uni-system-open-location .nav-view-frame { + width: 100%; + flex: 1; +} +uni-movable-area { + display: block; + position: relative; + width: 10px; + height: 10px; +} +uni-movable-area[hidden] { + display: none; +} +uni-movable-view { + display: inline-block; + width: 10px; + height: 10px; + top: 0; + left: 0; + position: absolute; + cursor: grab; +} +uni-movable-view[hidden] { + display: none; +} +uni-navigator { + height: auto; + width: auto; + display: block; + cursor: pointer; +} +uni-navigator[hidden] { + display: none; +} +.navigator-hover { + background-color: rgba(0, 0, 0, 0.1); + opacity: 0.7; +} +.navigator-wrap, +.navigator-wrap:link, +.navigator-wrap:visited, +.navigator-wrap:hover, +.navigator-wrap:active { + text-decoration: none; + color: inherit; + cursor: pointer; +} +uni-picker-view { + display: block; +} +.uni-picker-view-wrapper { + display: flex; + position: relative; + overflow: hidden; + height: 100%; +} +uni-picker-view[hidden] { + display: none; +} +uni-picker-view-column { + flex: 1; + position: relative; + height: 100%; + overflow: hidden; +} +uni-picker-view-column[hidden] { + display: none; +} +.uni-picker-view-group { + height: 100%; + overflow: hidden; +} +.uni-picker-view-mask { + transform: translateZ(0); +} +.uni-picker-view-indicator, +.uni-picker-view-mask { + position: absolute; + left: 0; + width: 100%; + z-index: 3; + pointer-events: none; +} +.uni-picker-view-mask { + top: 0; + height: 100%; + margin: 0 auto; + background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); + background-position: top, bottom; + background-size: 100% 102px; + background-repeat: no-repeat; + transform: translateZ(0); +} +.uni-picker-view-indicator { + height: 34px; + top: 50%; + transform: translateY(-50%); +} +.uni-picker-view-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + will-change: transform; + padding: 102px 0; + cursor: pointer; +} +.uni-picker-view-content > * { + height: var(--picker-view-column-indicator-height); + overflow: hidden; +} +.uni-picker-view-indicator::before { + top: 0; + border-top: 1px solid #e5e5e5; + transform-origin: 0 0; + transform: scaleY(0.5); +} +.uni-picker-view-indicator::after { + bottom: 0; + border-bottom: 1px solid #e5e5e5; + transform-origin: 0 100%; + transform: scaleY(0.5); +} +.uni-picker-view-indicator::after, +.uni-picker-view-indicator::before { + content: ' '; + position: absolute; + left: 0; + right: 0; + height: 1px; + color: #e5e5e5; +} +@media (prefers-color-scheme: dark) { + .uni-picker-view-indicator::before { + border-top-color: var(--UI-FG-3); + } + .uni-picker-view-indicator::after { + border-bottom-color: var(--UI-FG-3); + } + .uni-picker-view-mask { + background-image: linear-gradient(180deg, rgba(35, 35, 35, 0.95), rgba(35, 35, 35, 0.6)), linear-gradient(0deg, rgba(35, 35, 35, 0.95), rgba(35, 35, 35, 0.6)); + } +} +uni-progress { + display: flex; + align-items: center; +} +uni-progress[hidden] { + display: none; +} +.uni-progress-bar { + flex: 1; +} +.uni-progress-inner-bar { + width: 0; + height: 100%; +} +.uni-progress-info { + margin-top: 0; + margin-bottom: 0; + min-width: 2em; + margin-left: 15px; + font-size: 16px; +} +uni-radio { + -webkit-tap-highlight-color: transparent; + display: inline-block; + cursor: pointer; +} +uni-radio[hidden] { + display: none; +} +uni-radio[disabled] { + cursor: not-allowed; +} +.uni-radio-wrapper { + display: inline-flex; + align-items: center; + vertical-align: middle; +} +.uni-radio-input { + -webkit-appearance: none; + appearance: none; + margin-right: 5px; + outline: 0; + border: 1px solid #d1d1d1; + background-color: #fff; + border-radius: 50%; + width: 22px; + height: 22px; + position: relative; +} +@media (hover: hover) { + uni-radio:not([disabled]) .uni-radio-input:hover { + border-color: var(--HOVER-BD-COLOR, #007aff) !important; + } +} +.uni-radio-input svg { + color: #fff; + font-size: 18px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -48%) scale(0.73); +} +.uni-radio-input.uni-radio-input-disabled { + background-color: #e1e1e1; + border-color: #d1d1d1; +} +.uni-radio-input.uni-radio-input-disabled svg { + color: #adadad; +} +uni-radio-group { + display: block; +} +uni-radio-group[hidden] { + display: none; +} +uni-scroll-view { + display: block; + width: 100%; +} +uni-scroll-view[hidden] { + display: none; +} +.uni-scroll-view { + position: relative; + -webkit-overflow-scrolling: touch; + width: 100%; + height: 100%; + max-height: inherit; +} +.uni-scroll-view-scrollbar-hidden::-webkit-scrollbar { + display: none; +} +.uni-scroll-view-scrollbar-hidden { + -moz-scrollbars: none; + scrollbar-width: none; +} +.uni-scroll-view-content { + width: 100%; + height: 100%; +} +.uni-scroll-view-refresher { + position: relative; + overflow: hidden; + flex-shrink: 0; +} +.uni-scroll-view-refresher-container { + position: absolute; + width: 100%; + bottom: 0; + display: flex; + flex-direction: column-reverse; +} +.uni-scroll-view-refresh { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} +.uni-scroll-view-refresh-inner { + display: flex; + align-items: center; + justify-content: center; + line-height: 0; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: #fff; + box-shadow: + 0 1px 6px rgba(0, 0, 0, 0.118), + 0 1px 4px rgba(0, 0, 0, 0.118); +} +.uni-scroll-view-refresh__spinner { + transform-origin: center center; + animation: uni-scroll-view-refresh-rotate 2s linear infinite; +} +.uni-scroll-view-refresh__spinner > circle { + stroke: currentColor; + stroke-linecap: round; + animation: uni-scroll-view-refresh-dash 2s linear infinite; +} +@keyframes uni-scroll-view-refresh-rotate { + 0% { + transform: rotate(0); + } + to { + transform: rotate(360deg); + } +} +@keyframes uni-scroll-view-refresh-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + to { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +uni-slider { + margin: 10px 18px; + padding: 0; + display: block; +} +uni-slider[hidden] { + display: none; +} +uni-slider .uni-slider-wrapper { + display: flex; + align-items: center; + min-height: 16px; +} +uni-slider .uni-slider-tap-area { + flex: 1; + padding: 8px 0; +} +uni-slider .uni-slider-handle-wrapper { + position: relative; + height: 2px; + border-radius: 5px; + background-color: #e9e9e9; + cursor: pointer; + transition: background-color 0.3s ease; + -webkit-tap-highlight-color: transparent; +} +uni-slider .uni-slider-track { + height: 100%; + border-radius: 6px; + background-color: #007aff; + transition: background-color 0.3s ease; +} +uni-slider .uni-slider-handle, +uni-slider .uni-slider-thumb { + position: absolute; + left: 50%; + top: 50%; + cursor: pointer; + border-radius: 50%; + transition: border-color 0.3s ease; +} +uni-slider .uni-slider-handle { + width: 28px; + height: 28px; + margin-top: -14px; + margin-left: -14px; + background-color: transparent; + z-index: 3; + cursor: grab; +} +uni-slider .uni-slider-thumb { + z-index: 2; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); +} +uni-slider .uni-slider-step { + position: absolute; + width: 100%; + height: 2px; + background: transparent; + z-index: 1; +} +uni-slider .uni-slider-value { + width: 3ch; + color: #888; + font-size: 14px; + margin-left: 1em; +} +uni-slider .uni-slider-disabled .uni-slider-track { + background-color: #ccc; +} +uni-slider .uni-slider-disabled .uni-slider-thumb { + background-color: #fff; + border-color: #ccc; +} +uni-swiper { + display: block; + height: 150px; +} +uni-swiper[hidden] { + display: none; +} +.uni-swiper-wrapper { + overflow: hidden; + position: relative; + width: 100%; + height: 100%; + transform: translateZ(0); +} +.uni-swiper-slides { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} +.uni-swiper-slide-frame { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + will-change: transform; +} +.uni-swiper-dots { + position: absolute; + font-size: 0; +} +.uni-swiper-dots-horizontal { + left: 50%; + bottom: 10px; + text-align: center; + white-space: nowrap; + transform: translate(-50%); +} +.uni-swiper-dots-horizontal .uni-swiper-dot { + margin-right: 8px; +} +.uni-swiper-dots-horizontal .uni-swiper-dot:last-child { + margin-right: 0; +} +.uni-swiper-dots-vertical { + right: 10px; + top: 50%; + text-align: right; + transform: translateY(-50%); +} +.uni-swiper-dots-vertical .uni-swiper-dot { + display: block; + margin-bottom: 9px; +} +.uni-swiper-dots-vertical .uni-swiper-dot:last-child { + margin-bottom: 0; +} +.uni-swiper-dot { + display: inline-block; + width: 8px; + height: 8px; + cursor: pointer; + transition-property: background-color; + transition-timing-function: ease; + background: rgba(0, 0, 0, 0.3); + border-radius: 50%; +} +.uni-swiper-dot-active { + background-color: #000; +} +.uni-swiper-navigation { + width: 26px; + height: 26px; + cursor: pointer; + position: absolute; + top: 50%; + margin-top: -13px; + display: flex; + align-items: center; + transition: all 0.2s; + border-radius: 50%; + opacity: 1; +} +.uni-swiper-navigation-disabled { + opacity: 0.35; + cursor: not-allowed; +} +.uni-swiper-navigation-hide { + opacity: 0; + cursor: auto; + pointer-events: none; +} +.uni-swiper-navigation-prev { + left: 10px; +} +.uni-swiper-navigation-prev svg { + margin-left: -1px; + left: 10px; +} +.uni-swiper-navigation-prev.uni-swiper-navigation-vertical { + top: 18px; + left: 50%; + margin-left: -13px; +} +.uni-swiper-navigation-prev.uni-swiper-navigation-vertical svg { + transform: rotate(90deg); + margin-left: auto; + margin-top: -2px; +} +.uni-swiper-navigation-next { + right: 10px; +} +.uni-swiper-navigation-next svg { + transform: rotate(180deg); +} +.uni-swiper-navigation-next.uni-swiper-navigation-vertical { + top: auto; + bottom: 5px; + left: 50%; + margin-left: -13px; +} +.uni-swiper-navigation-next.uni-swiper-navigation-vertical svg { + margin-top: 2px; + transform: rotate(270deg); +} +uni-swiper-item { + display: block; + overflow: hidden; + will-change: transform; + position: absolute; + width: 100%; + height: 100%; + cursor: grab; +} +uni-swiper-item[hidden] { + display: none; +} +uni-switch { + -webkit-tap-highlight-color: transparent; + display: inline-block; + cursor: pointer; +} +uni-switch[hidden] { + display: none; +} +uni-switch[disabled] { + cursor: not-allowed; +} +uni-switch[disabled] .uni-switch-input { + opacity: 0.7; +} +.uni-switch-wrapper { + display: inline-flex; + align-items: center; + vertical-align: middle; +} +.uni-switch-input { + -webkit-appearance: none; + appearance: none; + position: relative; + width: 52px; + height: 32px; + margin-right: 5px; + border: 1px solid #dfdfdf; + outline: 0; + border-radius: 16px; + box-sizing: border-box; + background-color: #dfdfdf; + transition: + background-color 0.1s, + border 0.1s; +} +.uni-switch-input::before { + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 50px; + height: 30px; + border-radius: 15px; + background-color: #fdfdfd; + transition: transform 0.3s; +} +.uni-switch-input::after { + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 30px; + height: 30px; + border-radius: 15px; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + transition: transform 0.3s; +} +.uni-switch-input.uni-switch-input-checked { + border-color: #007aff; + background-color: #007aff; +} +.uni-switch-input.uni-switch-input-checked::before { + transform: scale(0); +} +.uni-switch-input.uni-switch-input-checked::after { + transform: translate(20px); +} +uni-switch .uni-checkbox-input { + margin-right: 5px; + -webkit-appearance: none; + appearance: none; + outline: 0; + border: 1px solid #d1d1d1; + background-color: #fff; + border-radius: 3px; + width: 22px; + height: 22px; + position: relative; + color: #007aff; +} +uni-switch:not([disabled]) .uni-checkbox-input:hover { + border-color: #007aff; +} +uni-switch .uni-checkbox-input svg { + fill: #007aff; + font-size: 22px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -48%) scale(0.73); +} +.uni-checkbox-input.uni-checkbox-input-disabled { + background-color: #e1e1e1; +} +.uni-checkbox-input.uni-checkbox-input-disabled::before { + color: #adadad; +} +@media (prefers-color-scheme: dark) { + uni-switch .uni-switch-input { + border-color: #3b3b3f; + } + uni-switch .uni-switch-input, + uni-switch .uni-switch-input::before { + background-color: #3b3b3f; + } + uni-switch .uni-switch-input::after { + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + } + uni-switch .uni-checkbox-input { + background-color: #2c2c2c; + border: 1px solid #656565; + } +} +uni-textarea { + width: 300px; + height: 150px; + display: block; + position: relative; + font-size: 16px; + line-height: normal; + white-space: pre-wrap; + word-break: break-all; +} +uni-textarea[hidden] { + display: none; +} +uni-textarea[auto-height='true'] { + height: -webkit-fit-content !important; + height: fit-content !important; +} +.uni-textarea-wrapper, +.uni-textarea-placeholder, +.uni-textarea-line, +.uni-textarea-compute, +.uni-textarea-textarea { + outline: none; + border: none; + padding: 0; + margin: 0; + text-decoration: inherit; +} +.uni-textarea-wrapper { + display: block; + position: relative; + width: 100%; + height: 100%; + min-height: inherit; + overflow-y: hidden; +} +.uni-textarea-placeholder, +.uni-textarea-line, +.uni-textarea-compute, +.uni-textarea-textarea { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + white-space: inherit; + word-break: inherit; +} +.uni-textarea-placeholder { + color: gray; + overflow: hidden; +} +.uni-textarea-line, +.uni-textarea-compute { + visibility: hidden; + height: auto; +} +.uni-textarea-line { + width: 1em; +} +.uni-textarea-compute-auto-height { + overflow-wrap: break-word; +} +.uni-textarea-textarea { + resize: none; + background: none; + color: inherit; + opacity: 1; + font: inherit; + line-height: inherit; + letter-spacing: inherit; + text-align: inherit; + text-indent: inherit; + text-transform: inherit; + text-shadow: inherit; +} +.uni-textarea-textarea-fix-margin { + width: auto; + right: 0; + margin: 0 -3px; +} +.uni-textarea-textarea:disabled { + -webkit-text-fill-color: currentcolor; +} +uni-video { + width: 300px; + height: 225px; + display: inline-block; + line-height: 0; + overflow: hidden; + position: relative; +} +uni-video[hidden] { + display: none; +} +.uni-video-container { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + background-color: #000; +} +.uni-video-slot { + position: absolute; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; +} +uni-web-view { + display: inline-block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} *, ::before, ::after, @@ -102,6 +2409,8 @@ html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; tab-size: 4; font-family: var( --default-font-family, @@ -182,7 +2491,7 @@ table { :-moz-focusring:where(:not(iframe)) { outline: auto; } -progress { +uni-progress { vertical-align: baseline; } summary { @@ -195,9 +2504,9 @@ menu { } img, svg, -video, -canvas, -audio, +uni-video, +uni-canvas, +uni-audio, iframe, embed, object { @@ -205,15 +2514,15 @@ object { vertical-align: middle; } img, -video { +uni-video { max-width: 100%; height: auto; } -button, -input, +uni-button, +uni-input, select, optgroup, -textarea, +uni-textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; @@ -233,15 +2542,21 @@ textarea, ::file-selector-button { margin-inline-end: 4px; } +::-moz-placeholder { + opacity: 1; +} ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::-moz-placeholder { + color: currentcolor; + } ::placeholder { color: currentcolor; } } -textarea { +uni-textarea { resize: vertical; } ::-webkit-search-decoration { @@ -274,9 +2589,11 @@ textarea { :-moz-ui-invalid { box-shadow: none; } -button, -input:where([type='button'], [type='reset'], [type='submit']), +uni-button, +uni-input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { + -webkit-appearance: button; + -moz-appearance: button; appearance: button; } ::-webkit-inner-spin-button, @@ -286,7 +2603,7 @@ input:where([type='button'], [type='reset'], [type='submit']), [hidden]:where(:not([hidden='until-found'])) { display: none !important; } -button::after, +uni-button::after, wx-button::after { display: none; border: none; @@ -1015,6 +3332,271 @@ wx-button { abc { background: #222; } +.weapp-tw-user-ui-card { + display: inline-flex; + align-items: center; + gap: 0.25rem; + color: var(--weapp-tw-user-ui-color, #175e75); + animation: weappTwUserUiBreathe 1.2s ease-in-out infinite; +} +.weapp-tw-user-ui-loading { + display: inline-block; + width: 1rem; + height: 1rem; + animation: weappTwUserUiRotation 1s linear infinite; +} +@keyframes weappTwUserUiRotation { + to { + transform: rotate(360deg); + } +} +@keyframes weappTwUserUiBreathe { + 50% { + opacity: 0.65; + transform: scale(0.96); + } +} +@media (prefers-color-scheme: light) { + body, + .page { + --td-brand-color-1: #e4f9ec; + } +} +.reset-button { + display: block; +} +body { + --test-color: #006241; + --color-test: #006241; + --font-test: 'Issue 978', sans-serif; + --font-sans: 'inter', 'inter Fallback', system-ui; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: var(--font-plex-mono), monospace; + --color-red-50: #fef2f2; + --color-red-950: #460809; + --color-orange-500: #fe6e00; + --color-amber-500: #f99c00; + --color-yellow-500: #edb200; + --color-lime-500: #80cd00; + --color-teal-500: #00baa7; + --color-sky-500: #00a5ef; + --color-indigo-500: #625fff; + --color-violet-500: #8d54ff; + --color-purple-500: #ac4bff; + --color-pink-500: #f6339a; + --color-gray-900: #101828; + --color-neutral-900: #171717; + --color-stone-900: #1c1917; + --color-black: #000; + --spacing: 0.25rem; + --text-base: 1rem; + --font-weight-bold: 700; + --radius-lg: 0.5rem; + --default-font-family: var(--font-inter), system-ui; + --default-mono-font-family: var(--font-plex-mono), monospace; +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +progress { + vertical-align: baseline; +} +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + vertical-align: middle; +} +img, +video { + max-width: 100%; + height: auto; +} +button, +input, +select, +optgroup, +textarea, +::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; +} +textarea { + resize: vertical; +} +button, +input:where([type='button'], [type='reset'], [type='submit']), +::file-selector-button { + appearance: button; +} +button::after, +wx-button::after { + display: none; + border: none; + content: ''; +} + /*tokens: template-corpus-apply <= src/pages/index/index.vue */ + /*tokens: m-3 <= src/pages/index/index.vue */ + /*tokens: mt-1 <= src/pages/index/index.vue */ + /*tokens: mt-2 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: mt-3 <= src/pages/index/index.vue */ + /*tokens: mt-4 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: mt-6 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: mt-8 <= src/pages-order/pages/user/user.vue */ + /*tokens: ml-2 <= src/pages/index/index.vue */ + /*tokens: i-[mdi--github-circle] <= */ + /*tokens: i-[mdi--home] <= src/pages/index/index.vue */ + /*tokens: i-[mdi--star] <= */ + /*tokens: i-[svg-spinners--180-ring-with-bg] <= */ + /*tokens: block <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: flex <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: aspect-(--my-aspect-ratio) <= src/pages/index/index.vue */ + /*tokens: aspect-[calc(4*3+1)/3] <= src/pages/index/index.vue */ + /*tokens: h-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: h-16 <= src/pages/index/index.vue */ + /*tokens: h-20 <= src/pages/index/index.vue */ + /*tokens: h-[45px] <= src/pages/index/index.vue */ + /*tokens: min-h-screen <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + /*tokens: w-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: w-20 <= src/pages/index/index.vue */ + /*tokens: w-32 <= src/pages/index/index.vue */ + /*tokens: w-[323px] <= src/pages/index/index.vue */ + /*tokens: flex-1 <= src/pages-order/pages/user/user.vue */ + /*tokens: flex-col <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: flex-col-reverse <= src/pages/index/index.vue */ + /*tokens: flex-row-reverse <= src/pages/index/index.vue */ + /*tokens: items-center <= src/components/HelloWorld.vue, src/main.css, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: justify-between <= src/pages/index/index.vue */ + /*tokens: justify-center <= src/pages-order/pages/user/user.vue */ + /*tokens: gap-1 <= src/pages-order/pages/user/user.vue */ + /*tokens: gap-2 <= src/components/HelloWorld.vue, src/main.css, src/pages/index/index.vue */ + /*tokens: gap-3 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: space-y-2 <= src/pages/index/index.vue */ + /*tokens: space-y-4 <= src/pages/index/index.vue */ + /*tokens: space-y-reverse <= src/pages/index/index.vue */ + /*tokens: space-x-4 <= src/pages/index/index.vue */ + /*tokens: space-x-reverse <= src/pages/index/index.vue */ + /*tokens: divide-x-4 <= src/pages/index/index.vue */ + /*tokens: divide-y-4 <= src/pages/index/index.vue */ + /*tokens: divide-y-reverse <= src/pages/index/index.vue */ + /*tokens: divide-dotted <= src/pages/index/index.vue */ + /*tokens: divide-double <= src/pages/index/index.vue */ + /*tokens: divide-[#41eb04] <= src/pages/index/index.vue */ + /*tokens: divide-[#d80c0c] <= src/pages/index/index.vue */ + /*tokens: rounded <= src/pages/index/index.vue */ + /*tokens: rounded-[20rpx] <= src/components/HelloWorld.vue, src/main.css, src/pages/index/index.vue */ + /*tokens: rounded-[28rpx] <= src/pages/index/index.vue */ + /*tokens: rounded-full <= src/pages/index/index.vue */ + /*tokens: rounded-xl <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: border <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: border-t <= src/pages/index/index.vue */ + /*tokens: border-emerald-200 <= src/pages/index/index.vue */ + /*tokens: border-emerald-500 <= src/pages-order/pages/user/user.vue */ + /*tokens: border-slate-200 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: border-slate-200/80 <= src/pages/index/index.vue */ + /*tokens: border-slate-200/80 <= src/pages/index/index.vue */ + /*tokens: !bg-[gray] <= src/pages/index/index.vue */ + /*tokens: bg-[#0000ff] <= src/pages/index/index.vue */ + /*tokens: bg-[#68c828] <= src/pages/index/index.vue */ + /*tokens: bg-[#0977ee] <= src/pages/index/index.vue */ + /*tokens: bg-[#123498] <= src/pages/index/index.vue */ + /*tokens: bg-[#f8fafc] <= src/components/HelloWorld.vue */ + /*tokens: bg-emerald-50 <= src/pages/index/index.vue */ + /*tokens: bg-emerald-100 <= src/pages-order/pages/user/user.vue */ + /*tokens: bg-emerald-500 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: bg-emerald-600 <= src/pages/index/index.vue */ + /*tokens: bg-green-200/70 <= src/pages/index/index.vue */ + /*tokens: bg-green-200/70 <= src/pages/index/index.vue */ + /*tokens: bg-midnight <= src/pages/index/index.vue */ + /*tokens: bg-neutral-1B <= src/pages/index/index.vue */ + /*tokens: bg-red-300 <= src/pages/index/index.vue */ + /*tokens: bg-slate-50 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + /*tokens: bg-slate-900 <= src/pages/index/index.vue */ + /*tokens: bg-white <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: bg-white/70 <= src/pages/index/index.vue */ + /*tokens: bg-white/70 <= src/pages/index/index.vue */ + /*tokens: bg-gradient-to-br <= src/pages/index/index.vue */ + /*tokens: bg-[radial-gradient(circle_at_18%_20%,#e0f2fe,#fdf4ff_70%)] <= src/pages/index/index.vue */ + /*tokens: from-slate-900/95 <= src/pages/index/index.vue */ + /*tokens: from-slate-900/95 <= src/pages/index/index.vue */ + /*tokens: to-slate-700/95 <= src/pages/index/index.vue */ + /*tokens: to-slate-700/95 <= src/pages/index/index.vue */ + /*tokens: fill-bermuda <= src/pages/index/index.vue */ + /*tokens: p-2 <= src/pages/index/index.vue */ + /*tokens: p-4 <= src/pages/index/index.vue */ + /*tokens: p-5 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + /*tokens: px-3 <= src/pages/index/index.vue */ + /*tokens: px-4 <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: px-[29rpx] <= src/pages/index/index.vue */ + /*tokens: px-[48px] <= src/pages/index/index.vue */ + /*tokens: py-1 <= src/pages/index/index.vue */ + /*tokens: py-2 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: py-3 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ + /*tokens: py-6 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + /*tokens: py-[24rpx] <= src/pages/index/index.vue */ + /*tokens: pt-2 <= src/pages/index/index.vue */ + /*tokens: text-center <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: text-base <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-lg <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + /*tokens: text-sm <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-xl <= src/pages-order/pages/user/user.vue */ + /*tokens: text-xs <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-[24rpx] <= src/pages/index/index.vue */ + /*tokens: text-[26rpx] <= src/main.css, src/pages/index/index.vue */ + /*tokens: text-[31rpx] <= src/pages/index/index.vue */ + /*tokens: text-[45rpx] <= src/pages/index/index.vue */ + /*tokens: text-[100rpx] <= src/pages/index/index.vue */ + /*tokens: text-[102.43rpx] <= src/pages/index/index.vue */ + /*tokens: leading-5 <= src/pages/index/index.vue */ + /*tokens: leading-6 <= src/pages-order/pages/user/user.vue */ + /*tokens: font-bold <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: font-medium <= src/pages-order/pages/user/user.vue */ + /*tokens: font-semibold <= src/main.css, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: break-all <= src/pages/index/index.vue */ + /*tokens: text-[#00f285] <= src/pages/index/index.vue */ + /*tokens: text-[#123456] <= src/pages/index/index.vue */ + /*tokens: text-[#929292] <= src/pages-order/pages/home/home.vue */ + /*tokens: text-emerald-600 <= src/pages-order/pages/user/user.vue */ + /*tokens: text-emerald-700 <= src/pages/index/index.vue */ + /*tokens: text-neutral-66 <= src/pages/index/index.vue */ + /*tokens: text-slate-500 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-slate-700 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ + /*tokens: text-slate-800 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-slate-900 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-tahiti <= src/pages/index/index.vue */ + /*tokens: text-white <= src/main.css, src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: underline <= src/pages/index/index.vue */ + /*tokens: shadow <= src/pages-order/pages/home/home.vue */ + /*tokens: shadow-sm <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: shadow-xl <= src/pages/index/index.vue */ + /*tokens: divide-x-reverse <= src/pages/index/index.vue */ + /*tokens: before:content-['现在，让我们开始神奇的_tailwindcss_开发之旅吧！'] <= */ + /*tokens: before:content-['现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！'] <= */ + /*tokens: after:!content-['good_work!'] <= src/pages/index/index.vue */ + /*tokens: active:bg-emerald-50 <= src/pages-order/pages/user/user.vue */ + /*tokens: active:bg-emerald-600 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: active:bg-emerald-700 <= src/pages/index/index.vue */ + /*tokens: active:bg-slate-700 <= src/pages/index/index.vue */ + /*tokens: dark:bg-red-300 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-red-300 <= src/pages/index/index.vue */ + /*tokens: dark:bg-zinc-900 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-900 <= src/pages/index/index.vue */ + /*tokens: dark:bg-zinc-950 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-950 <= src/pages/index/index.vue */ + /*tokens: dark:text-zinc-50 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ + /*tokens: theme-dark <= src/pages/index/index.vue | dark:text-zinc-50 <= src/pages/index/index.vue */ + /*tokens: not-wx:bg-red-500 <= src/pages/index/index.vue */ +/* stylelint-disable custom-property-pattern */ +/* Core plugin extractor sources are intentionally not loaded here. */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ /*tokens: before:content-['independent_subpackage_uni-app-vite-tailwindcss-v4'] <= src/sub-independent/pages/index.vue */ .before_ccontent-_b_aindependent_subpackage_uni-app-vite-tailwindcss-v4_a_B::before { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/artifacts/pages__index__index.css b/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/artifacts/pages__index__index.css index e649ed8cb4..ce3e574a2e 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/artifacts/pages__index__index.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/app-android/uni-app-vite-tailwindcss-v4/artifacts/pages__index__index.css @@ -9,7 +9,7 @@ padding-inline: calc(var(--spacing, 0.25rem) * 4); padding-block: calc(var(--spacing, 0.25rem) * 3); color: var(--color-slate-700, rgb(49, 65, 88)); -} +} /*! weapp-tailwindcss vite-generated-css-end:%2FUsers%2Ficebreaker%2FProjects%2Fgithub%2Fweapp-tailwindcss-codex%2Flocal-full-run-fixes%2Fdemo%2Funi-app-vite-tailwindcss-v4%2Fsrc%2Fcomponents%2FHelloWorld.vue */ /*tokens: special-class-visual-probe <= src/pages/index/index.vue | dark <= src/pages/index/index.vue */ .special-class-visual-probe.dark [class~='dark:bg-red-300'] { background-color: #fca5a5; diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/README.md index 9a44dd172c..1064d49593 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/app | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 36791 | 172 | true | true | true | true | true | false | true | +| 99890 | 628 | true | true | true | true | true | false | true | ## Generator CSS Files @@ -22,7 +22,7 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/app | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `app.css` | [artifacts/app.css](artifacts/app.css) | 31366 | 166 | true | true | true | true | true | false | true | +| `app.css` | [artifacts/app.css](artifacts/app.css) | 94253 | 622 | true | true | true | true | true | false | true | | `pages-order/pages/home/home.css` | [artifacts/pages-order__pages__home__home.css](artifacts/pages-order__pages__home__home.css) | 1851 | 4 | true | false | true | false | false | false | false | | `pages-order/pages/user/user.css` | [artifacts/pages-order__pages__user__user.css](artifacts/pages-order__pages__user__user.css) | 1851 | 4 | true | false | true | false | false | false | false | -| `pages/index/index.css` | [artifacts/pages__index__index.css](artifacts/pages__index__index.css) | 1723 | 6 | false | false | false | false | false | false | true | +| `pages/index/index.css` | [artifacts/pages__index__index.css](artifacts/pages__index__index.css) | 1935 | 6 | false | false | false | false | false | false | true | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/artifacts/app.css b/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/artifacts/app.css index db149b3757..350eb0cbab 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/artifacts/app.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/artifacts/app.css @@ -1,3 +1,2310 @@ +* { + margin: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; +} +html, +body { + -webkit-user-select: none; + user-select: none; + width: 100%; +} +html { + height: 100%; + height: 100vh; + width: 100%; + width: 100vw; +} +body { + overflow-x: hidden; + background-color: #fff; + height: 100%; + font-size: 16px; +} +#app { + height: 100%; +} +input[type='search']::-webkit-search-cancel-button { + display: none; +} +.uni-loading, +uni-button[loading]::before { + background: transparent + url(data:image/svg+xml;base64,\ PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) + no-repeat; +} +.uni-loading { + width: 20px; + height: 20px; + display: inline-block; + vertical-align: middle; + animation: uni-loading 1s steps(12, end) infinite; + background-size: 100%; +} +@keyframes uni-loading { + 0% { + transform: rotate3d(0, 0, 1, 0); + } + to { + transform: rotate3d(0, 0, 1, 360deg); + } +} +@media (prefers-color-scheme: dark) { + html { + --UI-BG-COLOR-ACTIVE: #373737; + --UI-BORDER-COLOR-1: #373737; + --UI-BG: #000; + --UI-BG-0: #191919; + --UI-BG-1: #1f1f1f; + --UI-BG-2: #232323; + --UI-BG-3: #2f2f2f; + --UI-BG-4: #606060; + --UI-BG-5: #2c2c2c; + --UI-FG: #fff; + --UI-FG-0: hsla(0, 0%, 100%, 0.8); + --UI-FG-HALF: hsla(0, 0%, 100%, 0.6); + --UI-FG-1: hsla(0, 0%, 100%, 0.5); + --UI-FG-2: hsla(0, 0%, 100%, 0.3); + --UI-FG-3: hsla(0, 0%, 100%, 0.05); + } + body { + background-color: var(--UI-BG-0); + color: var(--UI-FG-0); + } +} +[nvue] uni-view, +[nvue] uni-label, +[nvue] uni-swiper-item, +[nvue] uni-scroll-view { + display: flex; + flex-shrink: 0; + flex-grow: 0; + flex-basis: auto; + align-items: stretch; + align-content: flex-start; +} +[nvue] uni-button { + margin: 0; +} +[nvue-dir-row] uni-view, +[nvue-dir-row] uni-label, +[nvue-dir-row] uni-swiper-item { + flex-direction: row; +} +[nvue-dir-column] uni-view, +[nvue-dir-column] uni-label, +[nvue-dir-column] uni-swiper-item { + flex-direction: column; +} +[nvue-dir-row-reverse] uni-view, +[nvue-dir-row-reverse] uni-label, +[nvue-dir-row-reverse] uni-swiper-item { + flex-direction: row-reverse; +} +[nvue-dir-column-reverse] uni-view, +[nvue-dir-column-reverse] uni-label, +[nvue-dir-column-reverse] uni-swiper-item { + flex-direction: column-reverse; +} +[nvue] uni-view, +[nvue] uni-image, +[nvue] uni-input, +[nvue] uni-scroll-view, +[nvue] uni-swiper, +[nvue] uni-swiper-item, +[nvue] uni-text, +[nvue] uni-textarea, +[nvue] uni-video { + position: relative; + border: 0px solid #000000; + box-sizing: border-box; +} +[nvue] uni-swiper-item { + position: absolute; +} +@keyframes once-show { + 0% { + top: 0; + } +} +uni-resize-sensor, +uni-resize-sensor > div { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +uni-resize-sensor { + display: block; + z-index: -1; + visibility: hidden; + animation: once-show 1ms; +} +uni-resize-sensor > div > div { + position: absolute; + left: 0; + top: 0; +} +uni-resize-sensor > div:first-child > div { + width: 100000px; + height: 100000px; +} +uni-resize-sensor > div:last-child > div { + width: 200%; + height: 200%; +} +uni-text[selectable] { + cursor: auto; + -webkit-user-select: text; + user-select: text; +} +uni-text { + white-space: pre-line; +} +uni-view { + display: block; +} +uni-view[hidden] { + display: none; +} +uni-ad .uni-ad-container { + width: 100%; + height: 100%; + min-height: 1px; +} +uni-button { + position: relative; + display: block; + margin-left: auto; + margin-right: auto; + padding-left: 14px; + padding-right: 14px; + box-sizing: border-box; + font-size: 18px; + text-align: center; + text-decoration: none; + line-height: 2.55555556; + border-radius: 5px; + -webkit-tap-highlight-color: transparent; + overflow: hidden; + color: #000; + background-color: #f8f8f8; + cursor: pointer; +} +uni-button[hidden] { + display: none !important; +} +uni-button::after { + content: ' '; + width: 200%; + height: 200%; + position: absolute; + top: 0; + left: 0; + border: 1px solid rgba(0, 0, 0, 0.2); + transform: scale(0.5); + transform-origin: 0 0; + box-sizing: border-box; + border-radius: 10px; +} +uni-button[native] { + padding-left: 0; + padding-right: 0; +} +uni-button[native] .uni-button-cover-view-wrapper { + border: inherit; + border-color: inherit; + border-radius: inherit; + background-color: inherit; +} +uni-button[native] .uni-button-cover-view-inner { + padding-left: 14px; + padding-right: 14px; +} +uni-button uni-cover-view { + line-height: inherit; + white-space: inherit; +} +uni-button[type='default'] { + color: #000; + background-color: #f8f8f8; +} +uni-button[type='primary'] { + color: #fff; + background-color: #007aff; +} +uni-button[type='warn'] { + color: #fff; + background-color: #e64340; +} +uni-button[disabled] { + color: rgba(255, 255, 255, 0.6); + cursor: not-allowed; +} +uni-button[disabled][type='default'], +uni-button[disabled]:not([type]) { + color: rgba(0, 0, 0, 0.3); + background-color: #f7f7f7; +} +uni-button[disabled][type='primary'] { + background-color: rgba(0, 122, 255, 0.6); +} +uni-button[disabled][type='warn'] { + background-color: #ec8b89; +} +uni-button[type='primary'][plain] { + color: #007aff; + border: 1px solid #007aff; + background-color: transparent; +} +uni-button[type='primary'][plain][disabled] { + color: rgba(0, 0, 0, 0.2); + border-color: rgba(0, 0, 0, 0.2); +} +uni-button[type='primary'][plain]::after { + border-width: 0; +} +uni-button[type='default'][plain] { + color: #353535; + border: 1px solid #353535; + background-color: transparent; +} +uni-button[type='default'][plain][disabled] { + color: rgba(0, 0, 0, 0.2); + border-color: rgba(0, 0, 0, 0.2); +} +uni-button[type='default'][plain]::after { + border-width: 0; +} +uni-button[plain] { + color: #353535; + border: 1px solid #353535; + background-color: transparent; +} +uni-button[plain][disabled] { + color: rgba(0, 0, 0, 0.2); + border-color: rgba(0, 0, 0, 0.2); +} +uni-button[plain]::after { + border-width: 0; +} +uni-button[plain][native] .uni-button-cover-view-inner { + padding: 0; +} +uni-button[type='warn'][plain] { + color: #e64340; + border: 1px solid #e64340; + background-color: transparent; +} +uni-button[type='warn'][plain][disabled] { + color: rgba(0, 0, 0, 0.2); + border-color: rgba(0, 0, 0, 0.2); +} +uni-button[type='warn'][plain]::after { + border-width: 0; +} +uni-button[size='mini'] { + display: inline-block; + line-height: 2.3; + font-size: 13px; + padding: 0 1.34em; +} +uni-button[size='mini'][native] { + padding: 0; +} +uni-button[size='mini'][native] .uni-button-cover-view-inner { + padding: 0 1.34em; +} +uni-button[loading]:not([disabled]) { + cursor: progress; +} +uni-button[loading]::before { + content: ' '; + display: inline-block; + width: 18px; + height: 18px; + vertical-align: middle; + animation: uni-loading 1s steps(12, end) infinite; + background-size: 100%; +} +uni-button[loading][type='primary'] { + color: rgba(255, 255, 255, 0.6); + background-color: #0062cc; +} +uni-button[loading][type='primary'][plain] { + color: #007aff; + background-color: transparent; +} +uni-button[loading][type='default'] { + color: rgba(0, 0, 0, 0.6); + background-color: #dedede; +} +uni-button[loading][type='default'][plain] { + color: #353535; + background-color: transparent; +} +uni-button[loading][type='warn'] { + color: rgba(255, 255, 255, 0.6); + background-color: #ce3c39; +} +uni-button[loading][type='warn'][plain] { + color: #e64340; + background-color: transparent; +} +uni-button[loading][native]::before { + content: none; +} +.button-hover { + color: rgba(0, 0, 0, 0.6); + background-color: #dedede; +} +.button-hover[plain] { + color: rgba(53, 53, 53, 0.6); + border-color: rgba(53, 53, 53, 0.6); + background-color: transparent; +} +.button-hover[type='primary'] { + color: rgba(255, 255, 255, 0.6); + background-color: #0062cc; +} +.button-hover[type='primary'][plain] { + color: rgba(0, 122, 255, 0.6); + border-color: rgba(0, 122, 255, 0.6); + background-color: transparent; +} +.button-hover[type='default'] { + color: rgba(0, 0, 0, 0.6); + background-color: #dedede; +} +.button-hover[type='default'][plain] { + color: rgba(53, 53, 53, 0.6); + border-color: rgba(53, 53, 53, 0.6); + background-color: transparent; +} +.button-hover[type='warn'] { + color: rgba(255, 255, 255, 0.6); + background-color: #ce3c39; +} +.button-hover[type='warn'][plain] { + color: rgba(230, 67, 64, 0.6); + border-color: rgba(230, 67, 64, 0.6); + background-color: transparent; +} +@media (prefers-color-scheme: dark) { + uni-button, + uni-button[type='default'] { + color: #d6d6d6; + background-color: #343434; + } + .button-hover, + .button-hover[type='default'] { + color: #d6d6d6; + background-color: rgba(255, 255, 255, 0.1); + } + uni-button[disabled][type='default'], + uni-button[disabled]:not([type]) { + color: rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, 0.08); + } + uni-button[type='primary'][plain][disabled] { + color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.2); + } + uni-button[type='default'][plain] { + color: #d6d6d6; + border: 1px solid #d6d6d6; + } + .button-hover[type='default'][plain] { + color: rgba(150, 150, 150, 0.6); + border-color: rgba(150, 150, 150, 0.6); + background-color: rgba(50, 50, 50, 0.2); + } + uni-button[type='default'][plain][disabled] { + border-color: rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.2); + } +} +uni-canvas { + width: 300px; + height: 150px; + display: block; + position: relative; +} +uni-canvas > .uni-canvas-canvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +uni-checkbox { + -webkit-tap-highlight-color: transparent; + display: inline-block; + cursor: pointer; +} +uni-checkbox[hidden] { + display: none; +} +uni-checkbox[disabled] { + cursor: not-allowed; +} +.uni-checkbox-wrapper { + display: inline-flex; + align-items: center; + vertical-align: middle; +} +.uni-checkbox-input { + margin-right: 5px; + -webkit-appearance: none; + appearance: none; + outline: 0; + border: 1px solid #d1d1d1; + background-color: #fff; + border-radius: 3px; + width: 22px; + height: 22px; + position: relative; +} +.uni-checkbox-input svg { + color: #007aff; + font-size: 22px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -48%) scale(0.73); +} +@media (hover: hover) { + uni-checkbox:not([disabled]) .uni-checkbox-input:hover { + border-color: var(--HOVER-BD-COLOR, #007aff) !important; + } +} +uni-checkbox-group { + display: block; +} +uni-checkbox-group[hidden] { + display: none; +} +uni-cover-image { + display: block; + line-height: 1.2; + overflow: hidden; + height: 100%; + width: 100%; + pointer-events: auto; +} +uni-cover-image[hidden] { + display: none; +} +uni-cover-image .uni-cover-image { + width: 100%; + height: 100%; +} +uni-cover-view { + display: block; + line-height: 1.2; + overflow: hidden; + white-space: nowrap; + pointer-events: auto; +} +uni-cover-view[hidden] { + display: none; +} +uni-cover-view .uni-cover-view { + width: 100%; + height: 100%; + visibility: hidden; + text-overflow: inherit; + white-space: inherit; + align-items: inherit; + justify-content: inherit; + flex-direction: inherit; + flex-wrap: inherit; + display: inherit; + overflow: inherit; +} +.ql-container { + display: block; + position: relative; + box-sizing: border-box; + -webkit-user-select: text; + user-select: text; + outline: none; + overflow: hidden; + width: 100%; + height: 200px; + min-height: 200px; +} +.ql-container[hidden] { + display: none; +} +.ql-container .ql-editor { + position: relative; + font-size: inherit; + line-height: inherit; + font-family: inherit; + min-height: inherit; + width: 100%; + height: 100%; + padding: 0; + overflow-x: hidden; + overflow-y: auto; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + -webkit-overflow-scrolling: touch; +} +.ql-container .ql-editor::-webkit-scrollbar { + width: 0 !important; +} +.ql-container .ql-editor.scroll-disabled { + overflow: hidden; +} +.ql-container .ql-image-overlay { + display: flex; + position: absolute; + box-sizing: border-box; + border: 1px dashed #ccc; + justify-content: center; + align-items: center; + -webkit-user-select: none; + user-select: none; +} +.ql-container .ql-image-overlay .ql-image-size { + position: absolute; + padding: 4px 8px; + text-align: center; + background-color: #fff; + color: #888; + border: 1px solid #ccc; + box-sizing: border-box; + opacity: 0.8; + right: 4px; + top: 4px; + font-size: 12px; + display: inline-block; + width: auto; +} +.ql-container .ql-image-overlay .ql-image-toolbar { + position: relative; + text-align: center; + box-sizing: border-box; + background: #000; + border-radius: 5px; + color: #fff; + font-size: 0; + min-height: 24px; + z-index: 100; +} +.ql-container .ql-image-overlay .ql-image-toolbar span { + display: inline-block; + cursor: pointer; + padding: 5px; + font-size: 12px; + border-right: 1px solid #fff; +} +.ql-container .ql-image-overlay .ql-image-toolbar span:last-child { + border-right: 0; +} +.ql-container .ql-image-overlay .ql-image-toolbar span.triangle-up { + padding: 0; + position: absolute; + top: -12px; + left: 50%; + transform: translate(-50%); + width: 0; + height: 0; + border-width: 6px; + border-style: solid; + border-color: transparent transparent black transparent; +} +.ql-container .ql-image-overlay .ql-image-handle { + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + border: 1px solid #ccc; + box-sizing: border-box; + background: #fff; +} +.ql-container img { + display: inline-block; + max-width: 100%; +} +.ql-clipboard p { + margin: 0; + padding: 0; +} +.ql-editor { + box-sizing: border-box; + height: 100%; + outline: none; + overflow-y: auto; + tab-size: 4; + -moz-tab-size: 4; + text-align: left; + white-space: pre-wrap; + word-wrap: break-word; +} +.ql-editor > * { + cursor: text; +} +.ql-editor p, +.ql-editor ol, +.ql-editor ul, +.ql-editor pre, +.ql-editor blockquote, +.ql-editor h1, +.ql-editor h2, +.ql-editor h3, +.ql-editor h4, +.ql-editor h5, +.ql-editor h6 { + margin: 0; + padding: 0; + counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol > li, +.ql-editor ul > li { + list-style-type: none; +} +.ql-editor ul > li::before { + content: '•'; +} +.ql-editor ul[data-checked='true'], +.ql-editor ul[data-checked='false'] { + pointer-events: none; +} +.ql-editor ul[data-checked='true'] > li *, +.ql-editor ul[data-checked='false'] > li * { + pointer-events: all; +} +.ql-editor ul[data-checked='true'] > li::before, +.ql-editor ul[data-checked='false'] > li::before { + color: #777; + cursor: pointer; + pointer-events: all; +} +.ql-editor ul[data-checked='true'] > li::before { + content: '☑'; +} +.ql-editor ul[data-checked='false'] > li::before { + content: '☐'; +} +.ql-editor ol, +.ql-editor ul { + padding-left: 1.5em; +} +.ql-editor li:not(.ql-direction-rtl)::before { + margin-left: -1.5em; +} +.ql-editor li.ql-direction-rtl::before { + margin-right: -1.5em; +} +.ql-editor li::before { + display: inline-block; + white-space: nowrap; + width: 2em; +} +.ql-editor ol li { + counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + counter-increment: list-0; +} +.ql-editor ol li::before { + content: counter(list-0, decimal) '. '; +} +.ql-editor ol li.ql-indent-1 { + counter-increment: list-1; +} +.ql-editor ol li.ql-indent-1::before { + content: counter(list-1, lower-alpha) '. '; +} +.ql-editor ol li.ql-indent-1 { + counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-2 { + counter-increment: list-2; +} +.ql-editor ol li.ql-indent-2::before { + content: counter(list-2, lower-roman) '. '; +} +.ql-editor ol li.ql-indent-2 { + counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-3 { + counter-increment: list-3; +} +.ql-editor ol li.ql-indent-3::before { + content: counter(list-3, decimal) '. '; +} +.ql-editor ol li.ql-indent-3 { + counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-4 { + counter-increment: list-4; +} +.ql-editor ol li.ql-indent-4::before { + content: counter(list-4, lower-alpha) '. '; +} +.ql-editor ol li.ql-indent-4 { + counter-reset: list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-5 { + counter-increment: list-5; +} +.ql-editor ol li.ql-indent-5::before { + content: counter(list-5, lower-roman) '. '; +} +.ql-editor ol li.ql-indent-5 { + counter-reset: list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-6 { + counter-increment: list-6; +} +.ql-editor ol li.ql-indent-6::before { + content: counter(list-6, decimal) '. '; +} +.ql-editor ol li.ql-indent-6 { + counter-reset: list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-7 { + counter-increment: list-7; +} +.ql-editor ol li.ql-indent-7::before { + content: counter(list-7, lower-alpha) '. '; +} +.ql-editor ol li.ql-indent-7 { + counter-reset: list-8 list-9; +} +.ql-editor ol li.ql-indent-8 { + counter-increment: list-8; +} +.ql-editor ol li.ql-indent-8::before { + content: counter(list-8, lower-roman) '. '; +} +.ql-editor ol li.ql-indent-8 { + counter-reset: list-9; +} +.ql-editor ol li.ql-indent-9 { + counter-increment: list-9; +} +.ql-editor ol li.ql-indent-9::before { + content: counter(list-9, decimal) '. '; +} +.ql-editor .ql-indent-1:not(.ql-direction-rtl) { + padding-left: 2em; +} +.ql-editor li.ql-indent-1:not(.ql-direction-rtl) { + padding-left: 2em; +} +.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { + padding-right: 2em; +} +.ql-editor .ql-indent-2:not(.ql-direction-rtl) { + padding-left: 4em; +} +.ql-editor li.ql-indent-2:not(.ql-direction-rtl) { + padding-left: 4em; +} +.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { + padding-right: 4em; +} +.ql-editor .ql-indent-3:not(.ql-direction-rtl) { + padding-left: 6em; +} +.ql-editor li.ql-indent-3:not(.ql-direction-rtl) { + padding-left: 6em; +} +.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { + padding-right: 6em; +} +.ql-editor .ql-indent-4:not(.ql-direction-rtl) { + padding-left: 8em; +} +.ql-editor li.ql-indent-4:not(.ql-direction-rtl) { + padding-left: 8em; +} +.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { + padding-right: 8em; +} +.ql-editor .ql-indent-5:not(.ql-direction-rtl) { + padding-left: 10em; +} +.ql-editor li.ql-indent-5:not(.ql-direction-rtl) { + padding-left: 10em; +} +.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { + padding-right: 10em; +} +.ql-editor .ql-indent-6:not(.ql-direction-rtl) { + padding-left: 12em; +} +.ql-editor li.ql-indent-6:not(.ql-direction-rtl) { + padding-left: 12em; +} +.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { + padding-right: 12em; +} +.ql-editor .ql-indent-7:not(.ql-direction-rtl) { + padding-left: 14em; +} +.ql-editor li.ql-indent-7:not(.ql-direction-rtl) { + padding-left: 14em; +} +.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { + padding-right: 14em; +} +.ql-editor .ql-indent-8:not(.ql-direction-rtl) { + padding-left: 16em; +} +.ql-editor li.ql-indent-8:not(.ql-direction-rtl) { + padding-left: 16em; +} +.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { + padding-right: 16em; +} +.ql-editor .ql-indent-9:not(.ql-direction-rtl) { + padding-left: 18em; +} +.ql-editor li.ql-indent-9:not(.ql-direction-rtl) { + padding-left: 18em; +} +.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right, +.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { + padding-right: 18em; +} +.ql-editor .ql-direction-rtl { + direction: rtl; + text-align: inherit; +} +.ql-editor .ql-align-center { + text-align: center; +} +.ql-editor .ql-align-justify { + text-align: justify; +} +.ql-editor .ql-align-right { + text-align: right; +} +.ql-editor.ql-blank::before { + color: rgba(0, 0, 0, 0.6); + content: attr(data-placeholder); + font-style: italic; + pointer-events: none; + position: absolute; +} +.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before { + pointer-events: none; +} +.ql-clipboard { + left: -100000px; + height: 1px; + overflow-y: hidden; + position: absolute; + top: 50%; +} +.ql-editor .mention { + display: inline-block; + background: #e6f3ff; + color: #1677ff; + border-radius: 4px; + white-space: nowrap; + user-select: all; + -webkit-user-select: all; + cursor: pointer; +} +.ql-editor .mention span { + display: inline-block; + padding: 2px 6px; +} +.ql-editor blockquote { + border-left: 4px solid #ccc; + margin-bottom: 5px; + margin-top: 5px; + padding-left: 16px; +} +.ql-editor pre.ql-syntax { + background-color: #23241f; + color: #f8f8f2; + overflow: scroll; + margin: 5px 0; + padding: 5px 10px; + border-radius: 3px; +} +pre code.hljs { + display: block; + overflow-x: auto; + padding: 1em; +} +code.hljs { + padding: 3px 5px; +} +.hljs { + color: #abb2bf; + background: #282c34; +} +.hljs-comment, +.hljs-quote { + color: #5c6370; + font-style: italic; +} +.hljs-doctag, +.hljs-formula, +.hljs-keyword { + color: #c678dd; +} +.hljs-deletion, +.hljs-name, +.hljs-section, +.hljs-selector-tag, +.hljs-subst { + color: #e06c75; +} +.hljs-literal { + color: #56b6c2; +} +.hljs-addition, +.hljs-attribute, +.hljs-meta .hljs-string, +.hljs-regexp, +.hljs-string { + color: #98c379; +} +.hljs-attr, +.hljs-number, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-selector-pseudo, +.hljs-template-variable, +.hljs-type, +.hljs-variable { + color: #d19a66; +} +.hljs-bullet, +.hljs-link, +.hljs-meta, +.hljs-selector-id, +.hljs-symbol, +.hljs-title { + color: #61aeee; +} +.hljs-built_in, +.hljs-class .hljs-title, +.hljs-title.class_ { + color: #e6c07b; +} +.hljs-emphasis { + font-style: italic; +} +.hljs-strong { + font-weight: 700; +} +.hljs-link { + text-decoration: underline; +} +uni-icon { + display: inline-block; + font-size: 0; + box-sizing: border-box; +} +uni-icon[hidden] { + display: none; +} +uni-image { + width: 320px; + height: 240px; + display: inline-block; + overflow: hidden; + position: relative; +} +uni-image[hidden] { + display: none; +} +uni-image > div { + width: 100%; + height: 100%; + background-repeat: no-repeat; +} +uni-image > img { + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; +} +uni-image > .uni-image-will-change { + will-change: transform; +} +uni-input { + display: block; + font-size: 16px; + line-height: 1.4em; + height: 1.4em; + min-height: 1.4em; + overflow: hidden; +} +uni-input[hidden] { + display: none; +} +.uni-input-wrapper, +.uni-input-placeholder, +.uni-input-form, +.uni-input-input { + outline: none; + border: none; + padding: 0; + margin: 0; + text-decoration: inherit; +} +.uni-input-wrapper, +.uni-input-form { + display: flex; + position: relative; + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; +} +.uni-input-placeholder, +.uni-input-input { + width: 100%; +} +.uni-input-placeholder { + position: absolute; + top: auto !important; + left: 0; + color: gray; + overflow: hidden; + text-overflow: clip; + white-space: pre; + word-break: keep-all; + pointer-events: none; + line-height: inherit; +} +.uni-input-input { + position: relative; + display: block; + height: 100%; + background: none; + color: inherit; + opacity: 1; + font: inherit; + line-height: inherit; + letter-spacing: inherit; + text-align: inherit; + text-indent: inherit; + text-transform: inherit; + text-shadow: inherit; +} +.uni-input-input[type='search']::-webkit-search-cancel-button, +.uni-input-input[type='search']::-webkit-search-decoration { + display: none; +} +.uni-input-input::-webkit-outer-spin-button, +.uni-input-input::-webkit-inner-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; +} +.uni-input-input[type='number'] { + -moz-appearance: textfield; +} +.uni-input-input:disabled { + -webkit-text-fill-color: currentcolor; +} +.uni-label-pointer { + cursor: pointer; +} +uni-live-pusher { + width: 320px; + height: 240px; + display: inline-block; + line-height: 0; + overflow: hidden; + position: relative; +} +uni-live-pusher[hidden] { + display: none; +} +.uni-live-pusher-container { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + background-color: #000; +} +.uni-live-pusher-slot { + position: absolute; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; +} +uni-map { + width: 300px; + height: 225px; + display: inline-block; + line-height: 0; + overflow: hidden; + position: relative; +} +uni-map[hidden] { + display: none; +} +.uni-map-container { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + background-color: transparent; +} +.uni-map-slot { + position: absolute; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; +} +uni-map.web { + position: relative; + width: 300px; + height: 150px; + display: block; +} +uni-map.web[hidden] { + display: none; +} +uni-map.web .amap-marker-label { + padding: 0; + border: none; + background-color: transparent; +} +uni-map.web .amap-marker > .amap-icon > img { + left: 0 !important; + top: 0 !important; +} +uni-map.web .uni-map-control { + position: absolute; + width: 0; + height: 0; + top: 0; + left: 0; + z-index: 999; +} +uni-map.web .uni-map-control-icon { + position: absolute; + max-width: initial; +} +.uni-system-choose-location { + display: block; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #f8f8f8; + z-index: 999; +} +.uni-system-choose-location .map { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 300px; +} +.uni-system-choose-location .map-location { + position: absolute; + left: 50%; + bottom: 50%; + width: 32px; + height: 52px; + margin-left: -16px; + cursor: pointer; + background-size: 100%; +} +.uni-system-choose-location .map-move { + position: absolute; + bottom: 50px; + right: 10px; + width: 40px; + height: 40px; + box-sizing: border-box; + line-height: 40px; + background-color: #fff; + border-radius: 50%; + pointer-events: auto; + cursor: pointer; + box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); +} +.uni-system-choose-location .map-move > svg { + display: block; + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 8px; +} +.uni-system-choose-location .nav { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: calc(44px + var(--status-bar-height)); + background-color: transparent; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); +} +.uni-system-choose-location .nav-btn { + position: absolute; + box-sizing: border-box; + top: var(--status-bar-height); + left: 0; + width: 60px; + height: 44px; + padding: 6px; + line-height: 32px; + font-size: 26px; + color: #fff; + text-align: center; + cursor: pointer; +} +.uni-system-choose-location .nav-btn.confirm { + left: auto; + right: 0; +} +.uni-system-choose-location .nav-btn.disable { + opacity: 0.4; +} +.uni-system-choose-location .nav-btn > svg { + display: block; + width: 100%; + height: 100%; + border-radius: 2px; + box-sizing: border-box; + padding: 3px; +} +.uni-system-choose-location .nav-btn.confirm > svg { + background-color: #007aff; + padding: 5px; +} +.uni-system-choose-location .menu { + position: absolute; + top: 300px; + left: 0; + width: 100%; + bottom: 0; + background-color: #fff; +} +.uni-system-choose-location .search { + display: flex; + flex-direction: row; + height: 50px; + padding: 8px; + line-height: 34px; + box-sizing: border-box; + background-color: #fff; +} +.uni-system-choose-location .search-input { + flex: 1; + height: 100%; + border-radius: 5px; + padding: 0 5px; + background: #ebebeb; +} +.uni-system-choose-location .search-btn { + margin-left: 5px; + color: #007aff; + font-size: 17px; + text-align: center; +} +.uni-system-choose-location .list { + position: absolute; + top: 50px; + left: 0; + width: 100%; + bottom: 0; + padding-bottom: 10px; +} +.uni-system-choose-location .list-loading { + display: flex; + height: 50px; + justify-content: center; + align-items: center; +} +.uni-system-choose-location .list-item { + position: relative; + padding: 10px 40px 10px 10px; + cursor: pointer; +} +.uni-system-choose-location .list-item > svg { + display: none; + position: absolute; + top: 50%; + right: 10px; + width: 30px; + height: 30px; + margin-top: -15px; + box-sizing: border-box; + padding: 5px; +} +.uni-system-choose-location .list-item.selected > svg { + display: block; +} +.uni-system-choose-location .list-item:not(:last-child)::after { + position: absolute; + content: ''; + height: 1px; + left: 10px; + bottom: 0; + width: 100%; + background-color: #d3d3d3; +} +.uni-system-choose-location .list-item-title { + font-size: 14px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.uni-system-choose-location .list-item-detail { + font-size: 12px; + color: gray; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +@media screen and (min-width: 800px) { + .uni-system-choose-location .map { + top: 0; + height: 100%; + } + .uni-system-choose-location .map-move { + bottom: 10px; + right: 320px; + } + .uni-system-choose-location .menu { + top: calc(54px + var(--status-bar-height)); + left: auto; + right: 10px; + width: 300px; + bottom: 10px; + max-height: 600px; + box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3); + } +} +.uni-system-open-location { + display: block; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #f8f8f8; + z-index: 999; +} +.uni-system-open-location .map { + position: absolute; + top: 0; + left: 0; + width: 100%; + bottom: 80px; + height: auto; +} + /*tokens: info <= src/pages/index/index.vue */ +.uni-system-open-location .info { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 80px; + background-color: #fff; + padding: 15px; + box-sizing: border-box; + line-height: 1.5; +} + /*tokens: info <= src/pages/index/index.vue | name <= src/pages/index/index.vue */ +.uni-system-open-location .info > .name { + font-size: 17px; + color: #111; + padding-right: 50px; +} + /*tokens: info <= src/pages/index/index.vue */ +.uni-system-open-location .info > .address { + font-size: 14px; + color: #666; +} + /*tokens: info <= src/pages/index/index.vue */ +.uni-system-open-location .info > .nav { + position: absolute; + top: 50%; + right: 15px; + width: 50px; + height: 50px; + border-radius: 50%; + margin-top: -25px; + background-color: #007aff; +} + /*tokens: info <= src/pages/index/index.vue */ +.uni-system-open-location .info > .nav > svg { + display: block; + width: 100%; + height: 100%; + padding: 10px; + box-sizing: border-box; +} +.uni-system-open-location .map-move { + position: absolute; + bottom: 50px; + right: 10px; + width: 40px; + height: 40px; + box-sizing: border-box; + line-height: 40px; + background-color: #fff; + border-radius: 50%; + pointer-events: auto; + cursor: pointer; + box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); +} +.uni-system-open-location .map-move > svg { + display: block; + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 8px; +} +.uni-system-open-location .nav-btn-back { + position: absolute; + box-sizing: border-box; + top: var(--status-bar-height); + left: 0; + width: 44px; + height: 44px; + padding: 6px; + cursor: pointer; +} +.uni-system-open-location .nav-btn-back > svg { + display: block; + width: 100%; + height: 100%; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.5); + padding: 3px; + box-sizing: border-box; +} +.uni-system-open-location .map-content { + position: absolute; + left: 0; + top: 0; + width: 100%; + bottom: 0; + overflow: hidden; +} +.uni-system-open-location .map-content.fix-position { + top: -74px; + bottom: -44px; +} +.uni-system-open-location .map-content > iframe { + width: 100%; + height: 100%; + border: none; +} +.uni-system-open-location .actTonav { + position: absolute; + right: 16px; + bottom: 56px; + width: 60px; + height: 60px; + border-radius: 60px; +} +.uni-system-open-location .nav-view { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} +.uni-system-open-location .nav-view-top-placeholder { + width: 100%; + height: var(--status-bar-height); + background-color: #fff; +} +.uni-system-open-location .nav-view-frame { + width: 100%; + flex: 1; +} +uni-movable-area { + display: block; + position: relative; + width: 10px; + height: 10px; +} +uni-movable-area[hidden] { + display: none; +} +uni-movable-view { + display: inline-block; + width: 10px; + height: 10px; + top: 0; + left: 0; + position: absolute; + cursor: grab; +} +uni-movable-view[hidden] { + display: none; +} +uni-navigator { + height: auto; + width: auto; + display: block; + cursor: pointer; +} +uni-navigator[hidden] { + display: none; +} +.navigator-hover { + background-color: rgba(0, 0, 0, 0.1); + opacity: 0.7; +} +.navigator-wrap, +.navigator-wrap:link, +.navigator-wrap:visited, +.navigator-wrap:hover, +.navigator-wrap:active { + text-decoration: none; + color: inherit; + cursor: pointer; +} +uni-picker-view { + display: block; +} +.uni-picker-view-wrapper { + display: flex; + position: relative; + overflow: hidden; + height: 100%; +} +uni-picker-view[hidden] { + display: none; +} +uni-picker-view-column { + flex: 1; + position: relative; + height: 100%; + overflow: hidden; +} +uni-picker-view-column[hidden] { + display: none; +} +.uni-picker-view-group { + height: 100%; + overflow: hidden; +} +.uni-picker-view-mask { + transform: translateZ(0); +} +.uni-picker-view-indicator, +.uni-picker-view-mask { + position: absolute; + left: 0; + width: 100%; + z-index: 3; + pointer-events: none; +} +.uni-picker-view-mask { + top: 0; + height: 100%; + margin: 0 auto; + background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); + background-position: top, bottom; + background-size: 100% 102px; + background-repeat: no-repeat; + transform: translateZ(0); +} +.uni-picker-view-indicator { + height: 34px; + top: 50%; + transform: translateY(-50%); +} +.uni-picker-view-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + will-change: transform; + padding: 102px 0; + cursor: pointer; +} +.uni-picker-view-content > * { + height: var(--picker-view-column-indicator-height); + overflow: hidden; +} +.uni-picker-view-indicator::before { + top: 0; + border-top: 1px solid #e5e5e5; + transform-origin: 0 0; + transform: scaleY(0.5); +} +.uni-picker-view-indicator::after { + bottom: 0; + border-bottom: 1px solid #e5e5e5; + transform-origin: 0 100%; + transform: scaleY(0.5); +} +.uni-picker-view-indicator::after, +.uni-picker-view-indicator::before { + content: ' '; + position: absolute; + left: 0; + right: 0; + height: 1px; + color: #e5e5e5; +} +@media (prefers-color-scheme: dark) { + .uni-picker-view-indicator::before { + border-top-color: var(--UI-FG-3); + } + .uni-picker-view-indicator::after { + border-bottom-color: var(--UI-FG-3); + } + .uni-picker-view-mask { + background-image: linear-gradient(180deg, rgba(35, 35, 35, 0.95), rgba(35, 35, 35, 0.6)), linear-gradient(0deg, rgba(35, 35, 35, 0.95), rgba(35, 35, 35, 0.6)); + } +} +uni-progress { + display: flex; + align-items: center; +} +uni-progress[hidden] { + display: none; +} +.uni-progress-bar { + flex: 1; +} +.uni-progress-inner-bar { + width: 0; + height: 100%; +} +.uni-progress-info { + margin-top: 0; + margin-bottom: 0; + min-width: 2em; + margin-left: 15px; + font-size: 16px; +} +uni-radio { + -webkit-tap-highlight-color: transparent; + display: inline-block; + cursor: pointer; +} +uni-radio[hidden] { + display: none; +} +uni-radio[disabled] { + cursor: not-allowed; +} +.uni-radio-wrapper { + display: inline-flex; + align-items: center; + vertical-align: middle; +} +.uni-radio-input { + -webkit-appearance: none; + appearance: none; + margin-right: 5px; + outline: 0; + border: 1px solid #d1d1d1; + background-color: #fff; + border-radius: 50%; + width: 22px; + height: 22px; + position: relative; +} +@media (hover: hover) { + uni-radio:not([disabled]) .uni-radio-input:hover { + border-color: var(--HOVER-BD-COLOR, #007aff) !important; + } +} +.uni-radio-input svg { + color: #fff; + font-size: 18px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -48%) scale(0.73); +} +.uni-radio-input.uni-radio-input-disabled { + background-color: #e1e1e1; + border-color: #d1d1d1; +} +.uni-radio-input.uni-radio-input-disabled svg { + color: #adadad; +} +uni-radio-group { + display: block; +} +uni-radio-group[hidden] { + display: none; +} +uni-scroll-view { + display: block; + width: 100%; +} +uni-scroll-view[hidden] { + display: none; +} +.uni-scroll-view { + position: relative; + -webkit-overflow-scrolling: touch; + width: 100%; + height: 100%; + max-height: inherit; +} +.uni-scroll-view-scrollbar-hidden::-webkit-scrollbar { + display: none; +} +.uni-scroll-view-scrollbar-hidden { + -moz-scrollbars: none; + scrollbar-width: none; +} +.uni-scroll-view-content { + width: 100%; + height: 100%; +} +.uni-scroll-view-refresher { + position: relative; + overflow: hidden; + flex-shrink: 0; +} +.uni-scroll-view-refresher-container { + position: absolute; + width: 100%; + bottom: 0; + display: flex; + flex-direction: column-reverse; +} +.uni-scroll-view-refresh { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} +.uni-scroll-view-refresh-inner { + display: flex; + align-items: center; + justify-content: center; + line-height: 0; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: #fff; + box-shadow: + 0 1px 6px rgba(0, 0, 0, 0.118), + 0 1px 4px rgba(0, 0, 0, 0.118); +} +.uni-scroll-view-refresh__spinner { + transform-origin: center center; + animation: uni-scroll-view-refresh-rotate 2s linear infinite; +} +.uni-scroll-view-refresh__spinner > circle { + stroke: currentColor; + stroke-linecap: round; + animation: uni-scroll-view-refresh-dash 2s linear infinite; +} +@keyframes uni-scroll-view-refresh-rotate { + 0% { + transform: rotate(0); + } + to { + transform: rotate(360deg); + } +} +@keyframes uni-scroll-view-refresh-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + to { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +uni-slider { + margin: 10px 18px; + padding: 0; + display: block; +} +uni-slider[hidden] { + display: none; +} +uni-slider .uni-slider-wrapper { + display: flex; + align-items: center; + min-height: 16px; +} +uni-slider .uni-slider-tap-area { + flex: 1; + padding: 8px 0; +} +uni-slider .uni-slider-handle-wrapper { + position: relative; + height: 2px; + border-radius: 5px; + background-color: #e9e9e9; + cursor: pointer; + transition: background-color 0.3s ease; + -webkit-tap-highlight-color: transparent; +} +uni-slider .uni-slider-track { + height: 100%; + border-radius: 6px; + background-color: #007aff; + transition: background-color 0.3s ease; +} +uni-slider .uni-slider-handle, +uni-slider .uni-slider-thumb { + position: absolute; + left: 50%; + top: 50%; + cursor: pointer; + border-radius: 50%; + transition: border-color 0.3s ease; +} +uni-slider .uni-slider-handle { + width: 28px; + height: 28px; + margin-top: -14px; + margin-left: -14px; + background-color: transparent; + z-index: 3; + cursor: grab; +} +uni-slider .uni-slider-thumb { + z-index: 2; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); +} +uni-slider .uni-slider-step { + position: absolute; + width: 100%; + height: 2px; + background: transparent; + z-index: 1; +} +uni-slider .uni-slider-value { + width: 3ch; + color: #888; + font-size: 14px; + margin-left: 1em; +} +uni-slider .uni-slider-disabled .uni-slider-track { + background-color: #ccc; +} +uni-slider .uni-slider-disabled .uni-slider-thumb { + background-color: #fff; + border-color: #ccc; +} +uni-swiper { + display: block; + height: 150px; +} +uni-swiper[hidden] { + display: none; +} +.uni-swiper-wrapper { + overflow: hidden; + position: relative; + width: 100%; + height: 100%; + transform: translateZ(0); +} +.uni-swiper-slides { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} +.uni-swiper-slide-frame { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + will-change: transform; +} +.uni-swiper-dots { + position: absolute; + font-size: 0; +} +.uni-swiper-dots-horizontal { + left: 50%; + bottom: 10px; + text-align: center; + white-space: nowrap; + transform: translate(-50%); +} +.uni-swiper-dots-horizontal .uni-swiper-dot { + margin-right: 8px; +} +.uni-swiper-dots-horizontal .uni-swiper-dot:last-child { + margin-right: 0; +} +.uni-swiper-dots-vertical { + right: 10px; + top: 50%; + text-align: right; + transform: translateY(-50%); +} +.uni-swiper-dots-vertical .uni-swiper-dot { + display: block; + margin-bottom: 9px; +} +.uni-swiper-dots-vertical .uni-swiper-dot:last-child { + margin-bottom: 0; +} +.uni-swiper-dot { + display: inline-block; + width: 8px; + height: 8px; + cursor: pointer; + transition-property: background-color; + transition-timing-function: ease; + background: rgba(0, 0, 0, 0.3); + border-radius: 50%; +} +.uni-swiper-dot-active { + background-color: #000; +} +.uni-swiper-navigation { + width: 26px; + height: 26px; + cursor: pointer; + position: absolute; + top: 50%; + margin-top: -13px; + display: flex; + align-items: center; + transition: all 0.2s; + border-radius: 50%; + opacity: 1; +} +.uni-swiper-navigation-disabled { + opacity: 0.35; + cursor: not-allowed; +} +.uni-swiper-navigation-hide { + opacity: 0; + cursor: auto; + pointer-events: none; +} +.uni-swiper-navigation-prev { + left: 10px; +} +.uni-swiper-navigation-prev svg { + margin-left: -1px; + left: 10px; +} +.uni-swiper-navigation-prev.uni-swiper-navigation-vertical { + top: 18px; + left: 50%; + margin-left: -13px; +} +.uni-swiper-navigation-prev.uni-swiper-navigation-vertical svg { + transform: rotate(90deg); + margin-left: auto; + margin-top: -2px; +} +.uni-swiper-navigation-next { + right: 10px; +} +.uni-swiper-navigation-next svg { + transform: rotate(180deg); +} +.uni-swiper-navigation-next.uni-swiper-navigation-vertical { + top: auto; + bottom: 5px; + left: 50%; + margin-left: -13px; +} +.uni-swiper-navigation-next.uni-swiper-navigation-vertical svg { + margin-top: 2px; + transform: rotate(270deg); +} +uni-swiper-item { + display: block; + overflow: hidden; + will-change: transform; + position: absolute; + width: 100%; + height: 100%; + cursor: grab; +} +uni-swiper-item[hidden] { + display: none; +} +uni-switch { + -webkit-tap-highlight-color: transparent; + display: inline-block; + cursor: pointer; +} +uni-switch[hidden] { + display: none; +} +uni-switch[disabled] { + cursor: not-allowed; +} +uni-switch[disabled] .uni-switch-input { + opacity: 0.7; +} +.uni-switch-wrapper { + display: inline-flex; + align-items: center; + vertical-align: middle; +} +.uni-switch-input { + -webkit-appearance: none; + appearance: none; + position: relative; + width: 52px; + height: 32px; + margin-right: 5px; + border: 1px solid #dfdfdf; + outline: 0; + border-radius: 16px; + box-sizing: border-box; + background-color: #dfdfdf; + transition: + background-color 0.1s, + border 0.1s; +} +.uni-switch-input::before { + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 50px; + height: 30px; + border-radius: 15px; + background-color: #fdfdfd; + transition: transform 0.3s; +} +.uni-switch-input::after { + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 30px; + height: 30px; + border-radius: 15px; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + transition: transform 0.3s; +} +.uni-switch-input.uni-switch-input-checked { + border-color: #007aff; + background-color: #007aff; +} +.uni-switch-input.uni-switch-input-checked::before { + transform: scale(0); +} +.uni-switch-input.uni-switch-input-checked::after { + transform: translate(20px); +} +uni-switch .uni-checkbox-input { + margin-right: 5px; + -webkit-appearance: none; + appearance: none; + outline: 0; + border: 1px solid #d1d1d1; + background-color: #fff; + border-radius: 3px; + width: 22px; + height: 22px; + position: relative; + color: #007aff; +} +uni-switch:not([disabled]) .uni-checkbox-input:hover { + border-color: #007aff; +} +uni-switch .uni-checkbox-input svg { + fill: #007aff; + font-size: 22px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -48%) scale(0.73); +} +.uni-checkbox-input.uni-checkbox-input-disabled { + background-color: #e1e1e1; +} +.uni-checkbox-input.uni-checkbox-input-disabled::before { + color: #adadad; +} +@media (prefers-color-scheme: dark) { + uni-switch .uni-switch-input { + border-color: #3b3b3f; + } + uni-switch .uni-switch-input, + uni-switch .uni-switch-input::before { + background-color: #3b3b3f; + } + uni-switch .uni-switch-input::after { + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + } + uni-switch .uni-checkbox-input { + background-color: #2c2c2c; + border: 1px solid #656565; + } +} +uni-textarea { + width: 300px; + height: 150px; + display: block; + position: relative; + font-size: 16px; + line-height: normal; + white-space: pre-wrap; + word-break: break-all; +} +uni-textarea[hidden] { + display: none; +} +uni-textarea[auto-height='true'] { + height: -webkit-fit-content !important; + height: fit-content !important; +} +.uni-textarea-wrapper, +.uni-textarea-placeholder, +.uni-textarea-line, +.uni-textarea-compute, +.uni-textarea-textarea { + outline: none; + border: none; + padding: 0; + margin: 0; + text-decoration: inherit; +} +.uni-textarea-wrapper { + display: block; + position: relative; + width: 100%; + height: 100%; + min-height: inherit; + overflow-y: hidden; +} +.uni-textarea-placeholder, +.uni-textarea-line, +.uni-textarea-compute, +.uni-textarea-textarea { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + white-space: inherit; + word-break: inherit; +} +.uni-textarea-placeholder { + color: gray; + overflow: hidden; +} +.uni-textarea-line, +.uni-textarea-compute { + visibility: hidden; + height: auto; +} +.uni-textarea-line { + width: 1em; +} +.uni-textarea-compute-auto-height { + overflow-wrap: break-word; +} +.uni-textarea-textarea { + resize: none; + background: none; + color: inherit; + opacity: 1; + font: inherit; + line-height: inherit; + letter-spacing: inherit; + text-align: inherit; + text-indent: inherit; + text-transform: inherit; + text-shadow: inherit; +} +.uni-textarea-textarea-fix-margin { + width: auto; + right: 0; + margin: 0 -3px; +} +.uni-textarea-textarea:disabled { + -webkit-text-fill-color: currentcolor; +} +uni-video { + width: 300px; + height: 225px; + display: inline-block; + line-height: 0; + overflow: hidden; + position: relative; +} +uni-video[hidden] { + display: none; +} +.uni-video-container { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + background-color: #000; +} +.uni-video-slot { + position: absolute; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; +} +uni-web-view { + display: inline-block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} *, ::before, ::after, @@ -102,6 +2409,8 @@ html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; tab-size: 4; font-family: var( --default-font-family, @@ -182,7 +2491,7 @@ table { :-moz-focusring:where(:not(iframe)) { outline: auto; } -progress { +uni-progress { vertical-align: baseline; } summary { @@ -195,9 +2504,9 @@ menu { } img, svg, -video, -canvas, -audio, +uni-video, +uni-canvas, +uni-audio, iframe, embed, object { @@ -205,15 +2514,15 @@ object { vertical-align: middle; } img, -video { +uni-video { max-width: 100%; height: auto; } -button, -input, +uni-button, +uni-input, select, optgroup, -textarea, +uni-textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; @@ -233,15 +2542,21 @@ textarea, ::file-selector-button { margin-inline-end: 4px; } +::-moz-placeholder { + opacity: 1; +} ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::-moz-placeholder { + color: currentcolor; + } ::placeholder { color: currentcolor; } } -textarea { +uni-textarea { resize: vertical; } ::-webkit-search-decoration { @@ -274,9 +2589,11 @@ textarea { :-moz-ui-invalid { box-shadow: none; } -button, -input:where([type='button'], [type='reset'], [type='submit']), +uni-button, +uni-input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { + -webkit-appearance: button; + -moz-appearance: button; appearance: button; } ::-webkit-inner-spin-button, @@ -286,7 +2603,7 @@ input:where([type='button'], [type='reset'], [type='submit']), [hidden]:where(:not([hidden='until-found'])) { display: none !important; } -button::after, +uni-button::after, wx-button::after { display: none; border: none; @@ -1015,6 +3332,271 @@ wx-button { abc { background: #222; } +.weapp-tw-user-ui-card { + display: inline-flex; + align-items: center; + gap: 0.25rem; + color: var(--weapp-tw-user-ui-color, #175e75); + animation: weappTwUserUiBreathe 1.2s ease-in-out infinite; +} +.weapp-tw-user-ui-loading { + display: inline-block; + width: 1rem; + height: 1rem; + animation: weappTwUserUiRotation 1s linear infinite; +} +@keyframes weappTwUserUiRotation { + to { + transform: rotate(360deg); + } +} +@keyframes weappTwUserUiBreathe { + 50% { + opacity: 0.65; + transform: scale(0.96); + } +} +@media (prefers-color-scheme: light) { + body, + .page { + --td-brand-color-1: #e4f9ec; + } +} +.reset-button { + display: block; +} +body { + --test-color: #006241; + --color-test: #006241; + --font-test: 'Issue 978', sans-serif; + --font-sans: 'inter', 'inter Fallback', system-ui; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: var(--font-plex-mono), monospace; + --color-red-50: #fef2f2; + --color-red-950: #460809; + --color-orange-500: #fe6e00; + --color-amber-500: #f99c00; + --color-yellow-500: #edb200; + --color-lime-500: #80cd00; + --color-teal-500: #00baa7; + --color-sky-500: #00a5ef; + --color-indigo-500: #625fff; + --color-violet-500: #8d54ff; + --color-purple-500: #ac4bff; + --color-pink-500: #f6339a; + --color-gray-900: #101828; + --color-neutral-900: #171717; + --color-stone-900: #1c1917; + --color-black: #000; + --spacing: 0.25rem; + --text-base: 1rem; + --font-weight-bold: 700; + --radius-lg: 0.5rem; + --default-font-family: var(--font-inter), system-ui; + --default-mono-font-family: var(--font-plex-mono), monospace; +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +progress { + vertical-align: baseline; +} +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + vertical-align: middle; +} +img, +video { + max-width: 100%; + height: auto; +} +button, +input, +select, +optgroup, +textarea, +::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; +} +textarea { + resize: vertical; +} +button, +input:where([type='button'], [type='reset'], [type='submit']), +::file-selector-button { + appearance: button; +} +button::after, +wx-button::after { + display: none; + border: none; + content: ''; +} + /*tokens: template-corpus-apply <= src/pages/index/index.vue */ + /*tokens: m-3 <= src/pages/index/index.vue */ + /*tokens: mt-1 <= src/pages/index/index.vue */ + /*tokens: mt-2 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: mt-3 <= src/pages/index/index.vue */ + /*tokens: mt-4 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: mt-6 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: mt-8 <= src/pages-order/pages/user/user.vue */ + /*tokens: ml-2 <= src/pages/index/index.vue */ + /*tokens: i-[mdi--github-circle] <= */ + /*tokens: i-[mdi--home] <= src/pages/index/index.vue */ + /*tokens: i-[mdi--star] <= */ + /*tokens: i-[svg-spinners--180-ring-with-bg] <= */ + /*tokens: block <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: flex <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: aspect-(--my-aspect-ratio) <= src/pages/index/index.vue */ + /*tokens: aspect-[calc(4*3+1)/3] <= src/pages/index/index.vue */ + /*tokens: h-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: h-16 <= src/pages/index/index.vue */ + /*tokens: h-20 <= src/pages/index/index.vue */ + /*tokens: h-[45px] <= src/pages/index/index.vue */ + /*tokens: min-h-screen <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + /*tokens: w-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: w-20 <= src/pages/index/index.vue */ + /*tokens: w-32 <= src/pages/index/index.vue */ + /*tokens: w-[323px] <= src/pages/index/index.vue */ + /*tokens: flex-1 <= src/pages-order/pages/user/user.vue */ + /*tokens: flex-col <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: flex-col-reverse <= src/pages/index/index.vue */ + /*tokens: flex-row-reverse <= src/pages/index/index.vue */ + /*tokens: items-center <= src/components/HelloWorld.vue, src/main.css, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: justify-between <= src/pages/index/index.vue */ + /*tokens: justify-center <= src/pages-order/pages/user/user.vue */ + /*tokens: gap-1 <= src/pages-order/pages/user/user.vue */ + /*tokens: gap-2 <= src/components/HelloWorld.vue, src/main.css, src/pages/index/index.vue */ + /*tokens: gap-3 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: space-y-2 <= src/pages/index/index.vue */ + /*tokens: space-y-4 <= src/pages/index/index.vue */ + /*tokens: space-y-reverse <= src/pages/index/index.vue */ + /*tokens: space-x-4 <= src/pages/index/index.vue */ + /*tokens: space-x-reverse <= src/pages/index/index.vue */ + /*tokens: divide-x-4 <= src/pages/index/index.vue */ + /*tokens: divide-y-4 <= src/pages/index/index.vue */ + /*tokens: divide-y-reverse <= src/pages/index/index.vue */ + /*tokens: divide-dotted <= src/pages/index/index.vue */ + /*tokens: divide-double <= src/pages/index/index.vue */ + /*tokens: divide-[#41eb04] <= src/pages/index/index.vue */ + /*tokens: divide-[#d80c0c] <= src/pages/index/index.vue */ + /*tokens: rounded <= src/pages/index/index.vue */ + /*tokens: rounded-[20rpx] <= src/components/HelloWorld.vue, src/main.css, src/pages/index/index.vue */ + /*tokens: rounded-[28rpx] <= src/pages/index/index.vue */ + /*tokens: rounded-full <= src/pages/index/index.vue */ + /*tokens: rounded-xl <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: border <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: border-t <= src/pages/index/index.vue */ + /*tokens: border-emerald-200 <= src/pages/index/index.vue */ + /*tokens: border-emerald-500 <= src/pages-order/pages/user/user.vue */ + /*tokens: border-slate-200 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: border-slate-200/80 <= src/pages/index/index.vue */ + /*tokens: border-slate-200/80 <= src/pages/index/index.vue */ + /*tokens: !bg-[gray] <= src/pages/index/index.vue */ + /*tokens: bg-[#0000ff] <= src/pages/index/index.vue */ + /*tokens: bg-[#68c828] <= src/pages/index/index.vue */ + /*tokens: bg-[#0977ee] <= src/pages/index/index.vue */ + /*tokens: bg-[#123498] <= src/pages/index/index.vue */ + /*tokens: bg-[#f8fafc] <= src/components/HelloWorld.vue */ + /*tokens: bg-emerald-50 <= src/pages/index/index.vue */ + /*tokens: bg-emerald-100 <= src/pages-order/pages/user/user.vue */ + /*tokens: bg-emerald-500 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: bg-emerald-600 <= src/pages/index/index.vue */ + /*tokens: bg-green-200/70 <= src/pages/index/index.vue */ + /*tokens: bg-green-200/70 <= src/pages/index/index.vue */ + /*tokens: bg-midnight <= src/pages/index/index.vue */ + /*tokens: bg-neutral-1B <= src/pages/index/index.vue */ + /*tokens: bg-red-300 <= src/pages/index/index.vue */ + /*tokens: bg-slate-50 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + /*tokens: bg-slate-900 <= src/pages/index/index.vue */ + /*tokens: bg-white <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: bg-white/70 <= src/pages/index/index.vue */ + /*tokens: bg-white/70 <= src/pages/index/index.vue */ + /*tokens: bg-gradient-to-br <= src/pages/index/index.vue */ + /*tokens: bg-[radial-gradient(circle_at_18%_20%,#e0f2fe,#fdf4ff_70%)] <= src/pages/index/index.vue */ + /*tokens: from-slate-900/95 <= src/pages/index/index.vue */ + /*tokens: from-slate-900/95 <= src/pages/index/index.vue */ + /*tokens: to-slate-700/95 <= src/pages/index/index.vue */ + /*tokens: to-slate-700/95 <= src/pages/index/index.vue */ + /*tokens: fill-bermuda <= src/pages/index/index.vue */ + /*tokens: p-2 <= src/pages/index/index.vue */ + /*tokens: p-4 <= src/pages/index/index.vue */ + /*tokens: p-5 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + /*tokens: px-3 <= src/pages/index/index.vue */ + /*tokens: px-4 <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: px-[29rpx] <= src/pages/index/index.vue */ + /*tokens: px-[48px] <= src/pages/index/index.vue */ + /*tokens: py-1 <= src/pages/index/index.vue */ + /*tokens: py-2 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: py-3 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ + /*tokens: py-6 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + /*tokens: py-[24rpx] <= src/pages/index/index.vue */ + /*tokens: pt-2 <= src/pages/index/index.vue */ + /*tokens: text-center <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: text-base <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-lg <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + /*tokens: text-sm <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-xl <= src/pages-order/pages/user/user.vue */ + /*tokens: text-xs <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-[24rpx] <= src/pages/index/index.vue */ + /*tokens: text-[26rpx] <= src/main.css, src/pages/index/index.vue */ + /*tokens: text-[31rpx] <= src/pages/index/index.vue */ + /*tokens: text-[45rpx] <= src/pages/index/index.vue */ + /*tokens: text-[100rpx] <= src/pages/index/index.vue */ + /*tokens: text-[102.43rpx] <= src/pages/index/index.vue */ + /*tokens: leading-5 <= src/pages/index/index.vue */ + /*tokens: leading-6 <= src/pages-order/pages/user/user.vue */ + /*tokens: font-bold <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: font-medium <= src/pages-order/pages/user/user.vue */ + /*tokens: font-semibold <= src/main.css, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: break-all <= src/pages/index/index.vue */ + /*tokens: text-[#00f285] <= src/pages/index/index.vue */ + /*tokens: text-[#123456] <= src/pages/index/index.vue */ + /*tokens: text-[#929292] <= src/pages-order/pages/home/home.vue */ + /*tokens: text-emerald-600 <= src/pages-order/pages/user/user.vue */ + /*tokens: text-emerald-700 <= src/pages/index/index.vue */ + /*tokens: text-neutral-66 <= src/pages/index/index.vue */ + /*tokens: text-slate-500 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-slate-700 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ + /*tokens: text-slate-800 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-slate-900 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-tahiti <= src/pages/index/index.vue */ + /*tokens: text-white <= src/main.css, src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: underline <= src/pages/index/index.vue */ + /*tokens: shadow <= src/pages-order/pages/home/home.vue */ + /*tokens: shadow-sm <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: shadow-xl <= src/pages/index/index.vue */ + /*tokens: divide-x-reverse <= src/pages/index/index.vue */ + /*tokens: before:content-['现在，让我们开始神奇的_tailwindcss_开发之旅吧！'] <= */ + /*tokens: before:content-['现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！'] <= */ + /*tokens: after:!content-['good_work!'] <= src/pages/index/index.vue */ + /*tokens: active:bg-emerald-50 <= src/pages-order/pages/user/user.vue */ + /*tokens: active:bg-emerald-600 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: active:bg-emerald-700 <= src/pages/index/index.vue */ + /*tokens: active:bg-slate-700 <= src/pages/index/index.vue */ + /*tokens: dark:bg-red-300 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-red-300 <= src/pages/index/index.vue */ + /*tokens: dark:bg-zinc-900 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-900 <= src/pages/index/index.vue */ + /*tokens: dark:bg-zinc-950 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-950 <= src/pages/index/index.vue */ + /*tokens: dark:text-zinc-50 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ + /*tokens: theme-dark <= src/pages/index/index.vue | dark:text-zinc-50 <= src/pages/index/index.vue */ + /*tokens: not-wx:bg-red-500 <= src/pages/index/index.vue */ +/* stylelint-disable custom-property-pattern */ +/* Core plugin extractor sources are intentionally not loaded here. */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ /*tokens: before:content-['independent_subpackage_uni-app-vite-tailwindcss-v4'] <= src/sub-independent/pages/index.vue */ .before_ccontent-_b_aindependent_subpackage_uni-app-vite-tailwindcss-v4_a_B::before { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/artifacts/pages__index__index.css b/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/artifacts/pages__index__index.css index e649ed8cb4..ce3e574a2e 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/artifacts/pages__index__index.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/app-ios/uni-app-vite-tailwindcss-v4/artifacts/pages__index__index.css @@ -9,7 +9,7 @@ padding-inline: calc(var(--spacing, 0.25rem) * 4); padding-block: calc(var(--spacing, 0.25rem) * 3); color: var(--color-slate-700, rgb(49, 65, 88)); -} +} /*! weapp-tailwindcss vite-generated-css-end:%2FUsers%2Ficebreaker%2FProjects%2Fgithub%2Fweapp-tailwindcss-codex%2Flocal-full-run-fixes%2Fdemo%2Funi-app-vite-tailwindcss-v4%2Fsrc%2Fcomponents%2FHelloWorld.vue */ /*tokens: special-class-visual-probe <= src/pages/index/index.vue | dark <= src/pages/index/index.vue */ .special-class-visual-probe.dark [class~='dark:bg-red-300'] { background-color: #fca5a5; diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/README.md index fff1ff715d..ab444f4c83 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 53167 | 214 | false | false | false | true | true | false | true | +| 53267 | 214 | false | false | false | true | true | false | true | ## Generator CSS Files @@ -27,10 +27,10 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | | `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 23 | 0 | false | false | false | false | false | false | false | -| `main.wxss` | [artifacts/main.wxss](artifacts/main.wxss) | 28800 | 187 | false | false | false | true | true | false | true | +| `main.wxss` | [artifacts/main.wxss](artifacts/main.wxss) | 28820 | 187 | false | false | false | true | true | false | true | | `components/HelloWorld.wxss` | [artifacts/components__HelloWorld.wxss](artifacts/components__HelloWorld.wxss) | 480 | 1 | false | false | false | false | false | false | false | -| `pages-order/pages/home/home.wxss` | [artifacts/pages-order__pages__home__home.wxss](artifacts/pages-order__pages__home__home.wxss) | 9398 | 51 | false | false | false | false | false | false | true | -| `pages-order/pages/user/user.wxss` | [artifacts/pages-order__pages__user__user.wxss](artifacts/pages-order__pages__user__user.wxss) | 9398 | 51 | false | false | false | false | false | false | true | +| `pages-order/pages/home/home.wxss` | [artifacts/pages-order__pages__home__home.wxss](artifacts/pages-order__pages__home__home.wxss) | 9418 | 51 | false | false | false | false | false | false | true | +| `pages-order/pages/user/user.wxss` | [artifacts/pages-order__pages__user__user.wxss](artifacts/pages-order__pages__user__user.wxss) | 9418 | 51 | false | false | false | false | false | false | true | | `pages/index/index.wxss` | [artifacts/pages__index__index.wxss](artifacts/pages__index__index.wxss) | 1231 | 5 | false | false | false | false | false | false | true | -| `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 1894 | 8 | false | false | false | false | false | false | true | -| `sub-normal/pages/index.wxss` | [artifacts/sub-normal__pages__index.wxss](artifacts/sub-normal__pages__index.wxss) | 1859 | 8 | false | false | false | false | false | false | true | +| `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 1914 | 8 | false | false | false | false | false | false | true | +| `sub-normal/pages/index.wxss` | [artifacts/sub-normal__pages__index.wxss](artifacts/sub-normal__pages__index.wxss) | 1879 | 8 | false | false | false | false | false | false | true | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/main.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/main.wxss index a849a79146..2793858d91 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/main.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/main.wxss @@ -35,6 +35,7 @@ text, --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/pages-order__pages__home__home.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/pages-order__pages__home__home.wxss index 08e72ff594..3f0e1eb297 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/pages-order__pages__home__home.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/pages-order__pages__home__home.wxss @@ -23,6 +23,7 @@ text, --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/pages-order__pages__user__user.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/pages-order__pages__user__user.wxss index 08e72ff594..3f0e1eb297 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/pages-order__pages__user__user.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/pages-order__pages__user__user.wxss @@ -23,6 +23,7 @@ text, --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss index 97cf8df9f8..f4d012b7a0 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss index 076f214ac6..4b41fb4ab6 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/README.md index a834802af5..04d5f77f56 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-vite-react-tailwindcss-v4/dist/app.wxss | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 428351 | 2256 | false | false | false | true | true | false | true | +| 428411 | 2256 | false | false | false | true | true | false | true | ## Generator CSS Files @@ -26,9 +26,9 @@ Entry: taro-vite-react-tailwindcss-v4/dist/app.wxss | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | | `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 29 | 0 | false | false | false | false | false | false | false | -| `app-origin.wxss` | [artifacts/app-origin.wxss](artifacts/app-origin.wxss) | 408452 | 2212 | false | false | false | true | true | false | true | +| `app-origin.wxss` | [artifacts/app-origin.wxss](artifacts/app-origin.wxss) | 408472 | 2212 | false | false | false | true | true | false | true | | `pages/index/index.wxss` | [artifacts/pages__index__index.wxss](artifacts/pages__index__index.wxss) | 50 | 1 | false | false | false | false | false | false | false | | `pages/issue-998/index.wxss` | [artifacts/pages__issue-998__index.wxss](artifacts/pages__issue-998__index.wxss) | 2409 | 11 | false | false | false | false | false | false | true | -| `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 2011 | 9 | false | false | false | false | false | false | true | -| `sub-normal/pages/index.wxss` | [artifacts/sub-normal__pages__index.wxss](artifacts/sub-normal__pages__index.wxss) | 5875 | 30 | false | false | false | false | false | false | true | +| `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 2031 | 9 | false | false | false | false | false | false | true | +| `sub-normal/pages/index.wxss` | [artifacts/sub-normal__pages__index.wxss](artifacts/sub-normal__pages__index.wxss) | 5895 | 30 | false | false | false | false | false | false | true | | `vendors.wxss` | [artifacts/vendors.wxss](artifacts/vendors.wxss) | 9525 | 36 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/app-origin.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/app-origin.wxss index 11d079cdd1..4d1a72d3c7 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/app-origin.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/app-origin.wxss @@ -32,6 +32,7 @@ text, --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss index bdbd61387c..83dbc56c8a 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss index db4b02640f..cdd3de1f9a 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss @@ -33,6 +33,7 @@ text, --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/README.md index fd476cc5ab..3424697f3a 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-vite-vue3-tailwindcss-v4/dist/app.wxss | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 338549 | 1693 | false | false | false | true | true | false | true | +| 338609 | 1693 | false | false | false | true | true | false | true | ## Generator CSS Files @@ -24,7 +24,7 @@ Entry: taro-vite-vue3-tailwindcss-v4/dist/app.wxss | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | | `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 29 | 0 | false | false | false | false | false | false | false | -| `app-origin.wxss` | [artifacts/app-origin.wxss](artifacts/app-origin.wxss) | 318942 | 1541 | false | false | false | true | true | false | true | -| `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 1900 | 8 | false | false | false | false | false | false | true | -| `sub-normal/pages/index.wxss` | [artifacts/sub-normal__pages__index.wxss](artifacts/sub-normal__pages__index.wxss) | 1865 | 8 | false | false | false | false | false | false | true | +| `app-origin.wxss` | [artifacts/app-origin.wxss](artifacts/app-origin.wxss) | 318962 | 1541 | false | false | false | true | true | false | true | +| `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 1920 | 8 | false | false | false | false | false | false | true | +| `sub-normal/pages/index.wxss` | [artifacts/sub-normal__pages__index.wxss](artifacts/sub-normal__pages__index.wxss) | 1885 | 8 | false | false | false | false | false | false | true | | `vendors.wxss` | [artifacts/vendors.wxss](artifacts/vendors.wxss) | 15813 | 161 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/app-origin.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/app-origin.wxss index 37761d3c63..7a118456ea 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/app-origin.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/app-origin.wxss @@ -14,6 +14,7 @@ text, --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss index 770d725d40..5869c9112f 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss index 0cfbfee90b..d34a35fe07 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/README.md index cd3697fec5..29fa0b70fa 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-vite-react-tailwindcss-v4/dist | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 434533 | 2299 | true | true | true | true | true | true | false | +| 435260 | 2299 | true | true | true | true | true | true | false | ## Generator CSS Files @@ -24,9 +24,9 @@ Entry: taro-vite-react-tailwindcss-v4/dist | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `css/index.1.css` | [artifacts/css__index.1.css](artifacts/css__index.1.css) | 12992 | 49 | true | false | true | false | false | true | false | -| `css/index.2.css` | [artifacts/css__index.2.css](artifacts/css__index.2.css) | 380819 | 2232 | true | true | true | true | true | true | false | -| `css/index.3.css` | [artifacts/css__index.3.css](artifacts/css__index.3.css) | 18967 | 88 | true | false | true | false | true | true | false | -| `css/index.4.css` | [artifacts/css__index.4.css](artifacts/css__index.4.css) | 7399 | 27 | true | false | true | false | false | true | false | +| `css/index.1.css` | [artifacts/css__index.1.css](artifacts/css__index.1.css) | 12853 | 49 | true | false | true | false | false | true | false | +| `css/index.2.css` | [artifacts/css__index.2.css](artifacts/css__index.2.css) | 381471 | 2232 | true | true | true | true | true | true | false | +| `css/index.3.css` | [artifacts/css__index.3.css](artifacts/css__index.3.css) | 19355 | 88 | true | false | true | false | true | true | false | +| `css/index.4.css` | [artifacts/css__index.4.css](artifacts/css__index.4.css) | 7225 | 27 | true | false | true | false | false | true | false | | `css/index.5.css` | [artifacts/css__index.5.css](artifacts/css__index.5.css) | 50 | 1 | false | false | false | false | false | false | false | | `css/vendors.css` | [artifacts/css__vendors.css](artifacts/css__vendors.css) | 14306 | 59 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.1.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.1.css index b7a4e04e9a..6451d0bef2 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.1.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.1.css @@ -1,4 +1,3 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-normal%2Fpages%2Findex.css */ ::-webkit-backdrop { --tw-translate-x: 0; --tw-translate-y: 0; @@ -49,7 +48,8 @@ --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-content: ''; -} /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { ::-webkit-backdrop { --tw-translate-x: 0; @@ -417,7 +417,7 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), background-color: #000089; } .bg-\[rgb\(12\,34\,56\)\] { - background-color: #0c2238; + background-color: rgb(12, 34, 56); } /*tokens: bg-normal-subpackage-marker <= src/sub-normal/pages/index.tsx */ .bg-normal-subpackage-marker { @@ -426,7 +426,7 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), .\[mask-type\:luminance\] { mask-type: luminance; } - /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.css, src/pages/issue-998/index.tsx */ + /*tokens: p-4 <= */ .p-4 { padding: calc(var(--spacing) * 4); } @@ -437,11 +437,11 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), font-size: 0.85rem; } .text-black\/\[0\.00\] { - color: #0000; + color: rgba(0, 0, 0, 0); } @supports (color: color-mix(in lch, red, blue)) { .text-black\/\[0\.00\] { - color: #0000; + color: rgba(0, 0, 0, 0); } } .ring-\[1\.9px\] { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.2.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.2.css index 7627e382e8..ef066fc78c 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.2.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.2.css @@ -1,4 +1,4 @@ -@charset "UTF-8"; /*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fapp.css */ +@charset "UTF-8"; ::-webkit-backdrop { --tw-space-y-reverse: 0; --tw-border-style: solid; @@ -61,7 +61,8 @@ --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-content: ''; -} /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { ::-webkit-backdrop { --tw-space-y-reverse: 0; @@ -539,12 +540,12 @@ wx-button { } /*tokens: border-slate-200/80 <= src/pages/index/index.tsx */ .border-slate-200\/80 { - border-color: #e2e8f0cc; + border-color: rgba(226, 232, 240, 0.8); } @supports (color: color-mix(in lch, red, blue)) { /*tokens: border-slate-200/80 <= src/pages/index/index.tsx */ .border-slate-200\/80 { - border-color: #e2e8f0cc; + border-color: rgba(226, 232, 240, 0.8); } } .\!bg-\[gray\] { @@ -564,17 +565,17 @@ wx-button { } /*tokens: bg-green-200/70 <= src/pages/index/index.tsx */ .bg-green-200\/70 { - background-color: #b9f8cfb3; + background-color: rgba(185, 248, 207, 0.7); } @supports (color: color-mix(in lch, red, blue)) { /*tokens: bg-green-200/70 <= src/pages/index/index.tsx */ .bg-green-200\/70 { - background-color: #b9f8cfb3; + background-color: rgba(185, 248, 207, 0.7); } } /*tokens: bg-purple-300 <= src/pages/index/index.tsx */ .bg-purple-300 { - background-color: #d8b4ff; + background-color: rgb(216, 180, 255); } /*tokens: bg-white <= src/pages/index/index.tsx */ .bg-white { @@ -582,12 +583,12 @@ wx-button { } /*tokens: bg-white/70 <= src/pages/index/index.tsx */ .bg-white\/70 { - background-color: #ffffffb3; + background-color: rgba(255, 255, 255, 0.7); } @supports (color: color-mix(in lch, red, blue)) { /*tokens: bg-white/70 <= src/pages/index/index.tsx */ .bg-white\/70 { - background-color: #ffffffb3; + background-color: rgba(255, 255, 255, 0.7); } } /*tokens: bg-linear-to-r <= src/pages/index/index.tsx */ @@ -602,7 +603,7 @@ wx-button { background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops)); } - /*tokens: bg-gradient-to-r <= src/app.css, src/pages/index/index.tsx */ + /*tokens: bg-gradient-to-r <= src/pages/index/index.tsx */ .bg-gradient-to-r { --tw-gradient-position: to right; background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); @@ -638,7 +639,7 @@ wx-button { --tw-gradient-from: rgba(15, 23, 43, 0.95); } } - /*tokens: to-blue-500 <= src/app.css, src/pages/index/index.tsx */ + /*tokens: to-blue-500 <= src/pages/index/index.tsx */ .to-blue-500 { --tw-gradient-to: rgb(50, 128, 255); --tw-gradient-stops: var( @@ -664,7 +665,7 @@ wx-button { --tw-gradient-to: rgba(49, 65, 88, 0.95); } } - /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.css, src/pages/issue-998/index.tsx */ + /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.tsx */ .p-4 { padding: calc(var(--spacing) * 4); } @@ -720,13 +721,13 @@ wx-button { } /*tokens: text-slate-700 <= src/pages/index/index.tsx */ .text-slate-700 { - color: #314158; + color: rgb(49, 65, 88); } /*tokens: text-slate-900 <= src/pages/index/index.tsx */ .text-slate-900 { - color: #0f172b; + color: rgb(15, 23, 43); } - /*tokens: text-white <= src/app.css, src/pages/index/index.tsx */ + /*tokens: text-white <= src/pages/index/index.tsx */ .text-white { color: #fff; } @@ -750,38 +751,47 @@ wx-button { content: var(--tw-content) !important; } /*tokens: dark:bg-zinc-900 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ -.dark\:bg-zinc-900.theme-dark, +.dark\:bg-zinc-900.theme-dark { + background-color: rgb(24, 24, 27); +} + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:bg-zinc-900 <= src/pages/index/index.tsx */ .theme-dark .dark\:bg-zinc-900 { - background-color: #18181b; + background-color: rgb(24, 24, 27); } /*tokens: dark:bg-zinc-950 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ -.dark\:bg-zinc-950.theme-dark, +.dark\:bg-zinc-950.theme-dark { + background-color: rgb(9, 9, 11); +} + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:bg-zinc-950 <= src/pages/index/index.tsx */ .theme-dark .dark\:bg-zinc-950 { - background-color: #09090b; + background-color: rgb(9, 9, 11); } /*tokens: dark:text-zinc-50 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ -.dark\:text-zinc-50.theme-dark, +.dark\:text-zinc-50.theme-dark { + color: rgb(250, 250, 250); +} + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:text-zinc-50 <= src/pages/index/index.tsx */ .theme-dark .dark\:text-zinc-50 { - color: #fafafa; + color: rgb(250, 250, 250); } @media (prefers-color-scheme: dark) { /*tokens: system-dark:bg-slate-900 <= src/pages/index/index.tsx */ .system-dark\:bg-slate-900 { - background-color: #0f172b; + background-color: rgb(15, 23, 43); } /*tokens: system-dark:text-slate-100 <= src/pages/index/index.tsx */ .system-dark\:text-slate-100 { - color: #f1f5f9; + color: rgb(241, 245, 249); } } /*tokens: not-wx:bg-red-500 <= src/pages/index/index.tsx */ .not-wx\:bg-red-500 { - background-color: #fb2c36; + background-color: rgb(251, 44, 54); } @media (any-hover: hover) { /*tokens: any-hover:bg-slate-800 <= src/pages/index/index.tsx */ .any-hover\:bg-slate-800:hover { - background-color: #1d293d; + background-color: rgb(29, 41, 61); } } @font-face { @@ -1026,6 +1036,7 @@ page { --nutui-radius-xxl: var(--nutui-radius-14); --nutui-radius-xxxl: var(--nutui-radius-16); } +@charset "UTF-8"; @-webkit-keyframes nutFadeIn { 0% { opacity: 0; @@ -1520,7 +1531,10 @@ page { .nut-watermark { position: absolute; z-index: var(--nutui-watermark-z-index, 1200); - inset: 0; + left: 0; + right: 0; + top: 0; + bottom: 0; pointer-events: none; background-repeat: repeat; } @@ -5595,7 +5609,10 @@ page { .nut-progress-outer .nut-progress-active::before { content: ''; position: absolute; - inset: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; border-radius: var(--nutui-progress-border-radius, 0.3rem); -webkit-animation: progressActive 2s ease-in-out infinite; animation: progressActive 2s ease-in-out infinite; @@ -6807,7 +6824,10 @@ page { } .nut-overlay { position: fixed; - inset: 0; + top: 0; + left: 0; + bottom: 0; + right: 0; width: 100%; height: 100%; background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); @@ -9760,7 +9780,10 @@ page { .nut-countdown-number-primary::after { content: ''; position: absolute; - inset: -50%; + top: -50%; + bottom: -50%; + left: -50%; + right: -50%; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); @@ -11835,7 +11858,10 @@ page { .nut-badge-icon::after { content: ''; position: absolute; - inset: -50%; + top: -50%; + bottom: -50%; + left: -50%; + right: -50%; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.3.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.3.css index 3b69450f0f..6eb69c8120 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.3.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.3.css @@ -1,4 +1,3 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fpages%2Fissue-998%2Findex.css */ ::-webkit-backdrop { --tw-space-y-reverse: 0; --tw-border-style: solid; @@ -61,7 +60,8 @@ --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-content: ''; -} /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { ::-webkit-backdrop { --tw-space-y-reverse: 0; @@ -489,12 +489,12 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), } /*tokens: border-slate-200/80 <= src/pages/index/index.tsx */ .border-slate-200\/80 { - border-color: #e2e8f0cc; + border-color: rgba(226, 232, 240, 0.8); } @supports (color: color-mix(in lch, red, blue)) { /*tokens: border-slate-200/80 <= src/pages/index/index.tsx */ .border-slate-200\/80 { - border-color: #e2e8f0cc; + border-color: rgba(226, 232, 240, 0.8); } } .\!bg-\[gray\] { @@ -514,17 +514,17 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), } /*tokens: bg-green-200/70 <= src/pages/index/index.tsx */ .bg-green-200\/70 { - background-color: #b9f8cfb3; + background-color: rgba(185, 248, 207, 0.7); } @supports (color: color-mix(in lch, red, blue)) { /*tokens: bg-green-200/70 <= src/pages/index/index.tsx */ .bg-green-200\/70 { - background-color: #b9f8cfb3; + background-color: rgba(185, 248, 207, 0.7); } } /*tokens: bg-purple-300 <= src/pages/index/index.tsx */ .bg-purple-300 { - background-color: #d8b4ff; + background-color: rgb(216, 180, 255); } /*tokens: bg-white <= src/pages/index/index.tsx */ .bg-white { @@ -532,12 +532,12 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), } /*tokens: bg-white/70 <= src/pages/index/index.tsx */ .bg-white\/70 { - background-color: #ffffffb3; + background-color: rgba(255, 255, 255, 0.7); } @supports (color: color-mix(in lch, red, blue)) { /*tokens: bg-white/70 <= src/pages/index/index.tsx */ .bg-white\/70 { - background-color: #ffffffb3; + background-color: rgba(255, 255, 255, 0.7); } } /*tokens: bg-linear-to-r <= src/pages/index/index.tsx */ @@ -552,7 +552,7 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops)); } - /*tokens: bg-gradient-to-r <= src/app.css, src/pages/index/index.tsx */ + /*tokens: bg-gradient-to-r <= src/pages/index/index.tsx */ .bg-gradient-to-r { --tw-gradient-position: to right; background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); @@ -588,7 +588,7 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), --tw-gradient-from: rgba(15, 23, 43, 0.95); } } - /*tokens: to-blue-500 <= src/app.css, src/pages/index/index.tsx */ + /*tokens: to-blue-500 <= src/pages/index/index.tsx */ .to-blue-500 { --tw-gradient-to: rgb(50, 128, 255); --tw-gradient-stops: var( @@ -614,7 +614,7 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), --tw-gradient-to: rgba(49, 65, 88, 0.95); } } - /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.css, src/pages/issue-998/index.tsx */ + /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.tsx */ .p-4 { padding: calc(var(--spacing) * 4); } @@ -670,13 +670,13 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), } /*tokens: text-slate-700 <= src/pages/index/index.tsx */ .text-slate-700 { - color: #314158; + color: rgb(49, 65, 88); } /*tokens: text-slate-900 <= src/pages/index/index.tsx */ .text-slate-900 { - color: #0f172b; + color: rgb(15, 23, 43); } - /*tokens: text-white <= src/app.css, src/pages/index/index.tsx */ + /*tokens: text-white <= src/pages/index/index.tsx */ .text-white { color: #fff; } @@ -700,19 +700,28 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), content: var(--tw-content) !important; } /*tokens: dark:bg-zinc-900 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ -.dark\:bg-zinc-900.theme-dark, +.dark\:bg-zinc-900.theme-dark { + background-color: rgb(24, 24, 27); +} + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:bg-zinc-900 <= src/pages/index/index.tsx */ .theme-dark .dark\:bg-zinc-900 { - background-color: #18181b; + background-color: rgb(24, 24, 27); } /*tokens: dark:bg-zinc-950 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ -.dark\:bg-zinc-950.theme-dark, +.dark\:bg-zinc-950.theme-dark { + background-color: rgb(9, 9, 11); +} + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:bg-zinc-950 <= src/pages/index/index.tsx */ .theme-dark .dark\:bg-zinc-950 { - background-color: #09090b; + background-color: rgb(9, 9, 11); } /*tokens: dark:text-zinc-50 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ -.dark\:text-zinc-50.theme-dark, +.dark\:text-zinc-50.theme-dark { + color: rgb(250, 250, 250); +} + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:text-zinc-50 <= src/pages/index/index.tsx */ .theme-dark .dark\:text-zinc-50 { - color: #fafafa; + color: rgb(250, 250, 250); } /*tokens: issue-998-page <= src/pages/issue-998/index.tsx */ .issue-998-page { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.4.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.4.css index 66482b10b1..92c8100e3a 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.4.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-react-tailwindcss-v4/artifacts/css__index.4.css @@ -1,4 +1,3 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-independent%2Fpages%2Findex.css */ ::-webkit-backdrop { --tw-content: ''; } @@ -10,7 +9,8 @@ ::after, ::backdrop { --tw-content: ''; -} /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { ::-webkit-backdrop { --tw-content: ''; @@ -311,7 +311,7 @@ taro-input-core:where([type='button'], [type='reset'], [type='submit']), .bg-independent-subpackage-marker { background-color: #dc2626; } - /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.css, src/pages/issue-998/index.tsx */ + /*tokens: p-4 <= */ .p-4 { padding: calc(var(--spacing) * 4); } diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/README.md index 4d55254c92..a6cca8e782 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-vite-vue3-tailwindcss-v4/dist | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 327702 | 1756 | true | true | true | true | true | true | false | +| 328462 | 1756 | true | true | true | true | true | true | false | ## Generator CSS Files @@ -22,7 +22,7 @@ Entry: taro-vite-vue3-tailwindcss-v4/dist | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `css/index.1.css` | [artifacts/css__index.1.css](artifacts/css__index.1.css) | 7220 | 26 | true | false | true | false | false | true | false | -| `css/index.2.css` | [artifacts/css__index.2.css](artifacts/css__index.2.css) | 7190 | 26 | true | false | true | false | false | true | false | -| `css/index.3.css` | [artifacts/css__index.3.css](artifacts/css__index.3.css) | 292736 | 1582 | true | true | true | true | true | true | false | +| `css/index.1.css` | [artifacts/css__index.1.css](artifacts/css__index.1.css) | 7113 | 26 | true | false | true | false | false | true | false | +| `css/index.2.css` | [artifacts/css__index.2.css](artifacts/css__index.2.css) | 7088 | 26 | true | false | true | false | false | true | false | +| `css/index.3.css` | [artifacts/css__index.3.css](artifacts/css__index.3.css) | 293705 | 1582 | true | true | true | true | true | true | false | | `css/vendors.css` | [artifacts/css__vendors.css](artifacts/css__vendors.css) | 20556 | 184 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.1.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.1.css index 0c687f7a0a..ed772203a1 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.1.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.1.css @@ -1,4 +1,3 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-independent%2Fpages%2Findex.css */ ::-webkit-backdrop { --tw-content: ''; } @@ -10,7 +9,8 @@ ::after, ::backdrop { --tw-content: ''; -} /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { ::-webkit-backdrop { --tw-content: ''; diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.2.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.2.css index 770eb86a8d..62e54445cd 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.2.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.2.css @@ -1,4 +1,3 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-normal%2Fpages%2Findex.css */ ::-webkit-backdrop { --tw-content: ''; } @@ -10,7 +9,8 @@ ::after, ::backdrop { --tw-content: ''; -} /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { ::-webkit-backdrop { --tw-content: ''; diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.3.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.3.css index 0b064fc408..c643d4e964 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.3.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.3.css @@ -1,4 +1,3 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fapp.css */ ::-webkit-backdrop { --tw-gradient-from: #0000; --tw-gradient-via: #0000; @@ -28,7 +27,8 @@ --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-content: ''; -} /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { ::-webkit-backdrop { --tw-gradient-from: #0000; @@ -420,14 +420,19 @@ wx-button { } /*tokens: bg-purple-300 <= src/pages/index/index.vue */ .bg-purple-300 { - background-color: #d8b4ff; + background-color: rgb(216, 180, 255); } /*tokens: bg-white <= src/pages/index/index.vue */ .bg-white { background-color: #fff; } - /*tokens: bg-linear-to-r <= src/pages/index/index.vue | bg-gradient-to-r <= src/pages/index/index.vue */ -.bg-linear-to-r, + /*tokens: bg-linear-to-r <= src/pages/index/index.vue */ +.bg-linear-to-r { + --tw-gradient-position: to right; + background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); + background-image: linear-gradient(var(--tw-gradient-stops)); +} + /*tokens: bg-gradient-to-r <= src/pages/index/index.vue */ .bg-gradient-to-r { --tw-gradient-position: to right; background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); @@ -486,7 +491,7 @@ wx-button { } /*tokens: text-slate-900 <= src/pages/index/index.vue */ .text-slate-900 { - color: #0f172b; + color: rgb(15, 23, 43); } .before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { --tw-content: '现在，让我们开始神奇的 tailwindcss 开发之旅吧！'; @@ -497,28 +502,37 @@ wx-button { content: var(--tw-content); } /*tokens: dark:bg-zinc-900 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:bg-zinc-900.theme-dark, +.dark\:bg-zinc-900.theme-dark { + background-color: rgb(24, 24, 27); +} + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-900 <= src/pages/index/index.vue */ .theme-dark .dark\:bg-zinc-900 { - background-color: #18181b; + background-color: rgb(24, 24, 27); } /*tokens: dark:bg-zinc-950 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:bg-zinc-950.theme-dark, +.dark\:bg-zinc-950.theme-dark { + background-color: rgb(9, 9, 11); +} + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-950 <= src/pages/index/index.vue */ .theme-dark .dark\:bg-zinc-950 { - background-color: #09090b; + background-color: rgb(9, 9, 11); } /*tokens: dark:text-zinc-50 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:text-zinc-50.theme-dark, +.dark\:text-zinc-50.theme-dark { + color: rgb(250, 250, 250); +} + /*tokens: theme-dark <= src/pages/index/index.vue | dark:text-zinc-50 <= src/pages/index/index.vue */ .theme-dark .dark\:text-zinc-50 { - color: #fafafa; + color: rgb(250, 250, 250); } @media (prefers-color-scheme: dark) { /*tokens: system-dark:bg-slate-900 <= src/pages/index/index.vue */ .system-dark\:bg-slate-900 { - background-color: #0f172b; + background-color: rgb(15, 23, 43); } /*tokens: system-dark:text-slate-100 <= src/pages/index/index.vue */ .system-dark\:text-slate-100 { - color: #f1f5f9; + color: rgb(241, 245, 249); } } .nut-theme-dark .nut-image .nut-img-loading, @@ -2579,7 +2593,10 @@ wx-button { } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day--choose::after { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; background-color: var(--nut-calendar-choose-color, var(--nut-primary-color, #fa2c19)); opacity: 0.09; content: ''; @@ -2776,7 +2793,10 @@ wx-button { } .nut-checkbox__button--active::after { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; height: 100%; background-color: var(--nut-checkbox-button-background-active, var(--nut-primary-color, #fa2c19)); @@ -3205,7 +3225,10 @@ taro-textarea-core { box-sizing: border-box; content: ' '; pointer-events: none; - inset: -50%; + top: -50%; + right: -50%; + bottom: -50%; + left: -50%; outline: 0.025rem solid #3a3a3c; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); @@ -4349,7 +4372,10 @@ taro-textarea-core { } .nut-range::before { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; height: 100%; background-color: var(--nut-range-bg-color, var(--nut-primary-color, #fa2c19)); @@ -4652,7 +4678,10 @@ taro-textarea-core { .nut-progress .nut-progress-outer .nut-active::before { content: ''; position: absolute; - inset: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; border-radius: var(--nut-progress-outer-border-radius, 0.3rem); -webkit-animation: progressActive 2s ease-in-out infinite; animation: progressActive 2s ease-in-out infinite; @@ -6677,7 +6706,10 @@ taro-textarea-core { .nut-watermark { position: absolute; z-index: var(--nut-watermark-z-index, 2000); - inset: 0; + left: 0; + right: 0; + top: 0; + bottom: 0; pointer-events: none; background-repeat: repeat; } @@ -7554,7 +7586,10 @@ taro-textarea-core { } .nut-time-detail__detail__list__item--curr::after { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; height: 100%; background-color: var(--nut-timeselect-timedetail-item-cur-bg-color, var(--nut-primary-color, #fa2c19)); @@ -7835,7 +7870,10 @@ taro-textarea-core { } .nut-sku-select-item-skus-sku.active::after { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; height: 100%; border-radius: 0.375rem; @@ -8446,7 +8484,10 @@ taro-textarea-core { .nut-address-list-swipe__mask, .nut-address-list-general__mask { position: absolute; - inset: 0; + top: 0; + left: 0; + bottom: 0; + right: 0; background-color: var(--nut-addresslist-mask-bg, rgba(0, 0, 0, 0.4)); display: -webkit-flex; display: -ms-flexbox; @@ -8567,7 +8608,10 @@ taro-textarea-core { } .nut-address-list .nut-address-list__mask-bottom { position: fixed; - inset: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; z-index: 2000; background-color: transparent; } @@ -9469,7 +9513,10 @@ taro-textarea-core { } .nut-radio__button--active::after { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; height: 100%; background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #fa2c19)); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/README.md index 26bf466383..00d2392734 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-webpack-vue3-tailwindcss-v4/dist | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 568017 | 1799 | true | true | true | true | true | true | false | +| 632576 | 1795 | true | true | true | true | true | true | false | ## Generator CSS Files @@ -23,6 +23,6 @@ Entry: taro-webpack-vue3-tailwindcss-v4/dist | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | | `css/app.css` | [artifacts/css__app.css](artifacts/css__app.css) | 315451 | 1792 | true | true | true | true | true | true | false | -| `css/chunk.1.css` | [artifacts/css__chunk.1.css](artifacts/css__chunk.1.css) | 239319 | 1602 | true | true | true | true | true | true | false | +| `css/chunk.1.css` | [artifacts/css__chunk.1.css](artifacts/css__chunk.1.css) | 303878 | 1628 | true | true | true | true | true | true | false | | `css/chunk.2.css` | [artifacts/css__chunk.2.css](artifacts/css__chunk.2.css) | 6636 | 18 | true | false | true | false | false | true | false | | `css/chunk.3.css` | [artifacts/css__chunk.3.css](artifacts/css__chunk.3.css) | 6611 | 18 | true | false | true | false | false | true | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/artifacts/css__chunk.1.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/artifacts/css__chunk.1.css index 9c7f6aa93e..230e5e49b2 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/artifacts/css__chunk.1.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/artifacts/css__chunk.1.css @@ -1,3 +1,43 @@ +::-webkit-backdrop { + --tw-space-y-reverse: 0; + --tw-border-style: solid; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-shadow: 0 0 #0000; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-alpha: 100%; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-offset-width: 0rem; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; +} +::-ms-backdrop { + --tw-space-y-reverse: 0; + --tw-border-style: solid; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-shadow: 0 0 #0000; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-alpha: 100%; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-offset-width: 0rem; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; +} *, ::before, ::after, @@ -16,13 +56,53 @@ --tw-inset-shadow-alpha: 100%; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-offset-width: 0px; + --tw-ring-offset-width: 0rem; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-content: ''; } /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + ::-webkit-backdrop { + --tw-space-y-reverse: 0; + --tw-border-style: solid; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-shadow: 0 0 #0000; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-alpha: 100%; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-offset-width: 0rem; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; + } + ::-ms-backdrop { + --tw-space-y-reverse: 0; + --tw-border-style: solid; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-shadow: 0 0 #0000; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-alpha: 100%; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-offset-width: 0rem; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; + } *, ::before, ::after, @@ -41,7 +121,7 @@ --tw-inset-shadow-alpha: 100%; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-offset-width: 0px; + --tw-ring-offset-width: 0rem; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-content: ''; @@ -63,11 +143,32 @@ --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } +::-webkit-backdrop { + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; +} +::-ms-backdrop { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; +} +::-webkit-file-upload-button { + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; +} *, ::after, ::before, ::backdrop, ::file-selector-button { + -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; @@ -77,6 +178,8 @@ html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; tab-size: 4; font-family: var( --default-font-family, @@ -93,6 +196,7 @@ html, 'Segoe UI Symbol', 'Noto Color Emoji' ); + -webkit-font-feature-settings: var(--default-font-feature-settings, normal); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; @@ -100,7 +204,7 @@ html, hr { height: 0; color: inherit; - border-top-width: 1px; + border-top-width: 0.025rem; } abbr:where([title]) { -webkit-text-decoration: underline dotted; @@ -129,6 +233,7 @@ kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + -webkit-font-feature-settings: var(--default-mono-font-feature-settings, normal); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; @@ -157,7 +262,7 @@ table { :-moz-focusring:where(:not(iframe)) { outline: auto; } -progress { +taro-progress-core { vertical-align: baseline; } summary { @@ -170,9 +275,9 @@ menu { } img, svg, -video, -canvas, -audio, +taro-video-core, +taro-canvas-core, +taro-audio-core, iframe, embed, object { @@ -180,17 +285,29 @@ object { vertical-align: middle; } img, -video { +taro-video-core { max-width: 100%; height: auto; } -button, -input, +::-webkit-file-upload-button { + font: inherit; + -webkit-font-feature-settings: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; +} +taro-button-core, +taro-input-core, select, optgroup, -textarea, +taro-textarea-core, ::file-selector-button { font: inherit; + -webkit-font-feature-settings: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; @@ -203,20 +320,50 @@ textarea, font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { - padding-inline-start: 20px; + -webkit-padding-start: 0.5rem; + padding-inline-start: 0.5rem; +} +::-webkit-file-upload-button { + -webkit-margin-end: 0.1rem; + margin-inline-end: 0.1rem; } ::file-selector-button { - margin-inline-end: 4px; + -webkit-margin-end: 0.1rem; + margin-inline-end: 0.1rem; +} +::-webkit-input-placeholder { + opacity: 1; +} +::-moz-placeholder { + opacity: 1; +} +:-ms-input-placeholder { + opacity: 1; +} +::-ms-input-placeholder { + opacity: 1; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::-webkit-input-placeholder { + color: currentcolor; + } + ::-moz-placeholder { + color: currentcolor; + } + :-ms-input-placeholder { + color: currentcolor; + } + ::-ms-input-placeholder { + color: currentcolor; + } ::placeholder { color: currentcolor; } } -textarea { +taro-textarea-core { resize: vertical; } ::-webkit-search-decoration { @@ -227,6 +374,7 @@ textarea { text-align: inherit; } ::-webkit-datetime-edit { + display: -webkit-inline-flex; display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { @@ -249,9 +397,15 @@ textarea { :-moz-ui-invalid { box-shadow: none; } -button, -input:where([type='button'], [type='reset'], [type='submit']), +::-webkit-file-upload-button { + -webkit-appearance: button; + appearance: button; +} +taro-button-core, +taro-input-core:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { + -webkit-appearance: button; + -moz-appearance: button; appearance: button; } ::-webkit-inner-spin-button, @@ -261,7 +415,7 @@ input:where([type='button'], [type='reset'], [type='submit']), [hidden]:where(:not([hidden='until-found'])) { display: none !important; } -button::after, +taro-button-core::after, wx-button::after { display: none; border: none; @@ -272,11 +426,16 @@ wx-button { } /*tokens: template-corpus-apply <= src/pages/index/index.vue */ .template-corpus-apply { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; gap: calc(var(--spacing) * 2); border-radius: 0.625rem; --tw-gradient-position: to right; + background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: #9e58e9; --tw-gradient-to: rgb(50, 128, 255); @@ -342,10 +501,14 @@ wx-button { } /*tokens: flex <= src/pages/index/index.vue */ .flex { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } /*tokens: inline-flex <= src/app.css */ .inline-flex { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; } /*tokens: h-14 <= src/pages/index/index.vue */ @@ -357,24 +520,30 @@ wx-button { height: calc(var(--spacing) * 16); } .h-\[45px\] { - height: 45px; + height: 1.125rem; } /*tokens: w-32 <= src/pages/index/index.vue */ .w-32 { width: calc(var(--spacing) * 32); } .w-\[323px\] { - width: 323px; + width: 8.075rem; } .transform { + -webkit-transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + -ms-transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } /*tokens: flex-col <= src/pages/index/index.vue */ .flex-col { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } /*tokens: items-center <= src/app.css */ .items-center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } /*tokens: gap-2 <= src/app.css */ @@ -388,7 +557,9 @@ wx-button { /*tokens: space-y-2 <= src/pages/index/index.vue */ :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; + -webkit-margin-before: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + -webkit-margin-after: calc(calc(var(--spacing) * 2) * (1 - var(--tw-space-y-reverse))); margin-block-end: calc(calc(var(--spacing) * 2) * (1 - var(--tw-space-y-reverse))); } /*tokens: rounded <= src/pages/index/index.vue */ @@ -407,7 +578,7 @@ wx-button { /*tokens: border <= src/pages/index/index.vue */ .border { border-style: var(--tw-border-style); - border-width: 1px; + border-width: 0.025rem; } /*tokens: border-slate-200/80 <= src/pages/index/index.vue */ .border-slate-200\/80 { @@ -465,14 +636,17 @@ wx-button { /*tokens: bg-gradient-to-br <= src/pages/index/index.vue */ .bg-gradient-to-br { --tw-gradient-position: to bottom right; + background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops)); } /*tokens: bg-gradient-to-r <= src/app.css, src/pages/index/index.vue */ .bg-gradient-to-r { --tw-gradient-position: to right; + background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-\[radial-gradient\(circle_at_18\%_20\%\,\#e0f2fe\,\#fdf4ff_70\%\)\] { + background-image: -webkit-radial-gradient(18% 20%, circle, #e0f2fe, #fdf4ff 70%); background-image: radial-gradient(circle at 18% 20%, #e0f2fe, #fdf4ff 70%); } .from-\[\#9e58e9\] { @@ -555,10 +729,10 @@ wx-button { padding-inline: 0.90625rem; } .px-\[32px\] { - padding-inline: 32px; + padding-inline: 0.8rem; } .px-\[48px\] { - padding-inline: 48px; + padding-inline: 1.2rem; } /*tokens: py-1 <= src/pages/index/index.vue */ .py-1 { @@ -576,7 +750,7 @@ wx-button { padding-block: 0.3125rem; } .py-\[18px\] { - padding-block: 18px; + padding-block: 0.45rem; } .py-\[24rpx\] { padding-block: 0.75rem; @@ -622,11 +796,13 @@ wx-button { } /*tokens: shadow-xl <= src/pages/index/index.vue */ .shadow-xl { - --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); + --tw-shadow: 0 0.5rem 0.625rem -0.125rem var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 0.2rem 0.25rem -0.15rem var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); + -webkit-box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ease-in-out { --tw-ease: var(--ease-in-out); + -webkit-transition-timing-function: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { @@ -710,14 +886,23 @@ wx-button { position: absolute; top: 0; left: 0; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; background: #f7f8fa; } .nut-col { float: left; + -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } @@ -882,6 +1067,8 @@ wx-button { content: ''; } .nut-row-flex { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-row-flex::after { @@ -891,63 +1078,93 @@ wx-button { float: none; } .nut-row-justify-center { + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-row-justify-end { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; } .nut-row-justify-space-between { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-row-justify-space-around { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; justify-content: space-around; } .nut-row-justify-space-evenly { + -webkit-justify-content: space-evenly; + -ms-flex-pack: space-evenly; justify-content: space-evenly; } .nut-row-align-flex-start { + -webkit-align-items: flex-start; + -ms-flex-align: start; align-items: flex-start; } .nut-row-align-center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-row-align-flex-end { + -webkit-align-items: flex-end; + -ms-flex-align: end; align-items: flex-end; } .nut-row-flex-wrap { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-row-flex-nowrap { + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .nut-row-flex-reverse { + -webkit-flex-wrap: wrap-reverse; + -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .nut-divider { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - font-size: var(--nut-divider-text-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-divider-text-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-divider-text-color, #909ca4); - margin: var(--nut-divider-margin, 16px 0); + margin: var(--nut-divider-margin, 0.4rem 0); } .nut-divider::before, .nut-divider::after { content: ''; - border: var(--nut-divider-line-height, 2px) solid currentColor; - border-width: var(--nut-divider-line-height, 2px) 0 0; - height: var(--nut-divider-line-height, 2px); + border: var(--nut-divider-line-height, 0.05rem) solid currentColor; + border-width: var(--nut-divider-line-height, 0.05rem) 0 0; + height: var(--nut-divider-line-height, 0.05rem); + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-divider.nut-divider-center::before, .nut-divider.nut-divider-left::before, .nut-divider.nut-divider-right::before { - margin-right: var(--nut-divider-before-margin-right, 16px); + margin-right: var(--nut-divider-before-margin-right, 0.4rem); } .nut-divider.nut-divider-center::after, .nut-divider.nut-divider-left::after, .nut-divider.nut-divider-right::after { - margin-left: var(--nut-divider-after-margin-left, 16px); + margin-left: var(--nut-divider-after-margin-left, 0.4rem); } .nut-divider.nut-divider-left::before { max-width: 10%; @@ -961,24 +1178,30 @@ wx-button { } .nut-divider.nut-divider-hairline::before, .nut-divider.nut-divider-hairline::after { + -webkit-transform: scaleY(0.5); + -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .nut-divider.nut-divider-vertical { position: relative; - top: var(--nut-divider-vertical-top, 2px); + top: var(--nut-divider-vertical-top, 0.05rem); display: inline-block; - height: var(--nut-divider-vertical-height, 12px); - border-left: 1px solid var(--nut-divider-vertical-border-left, rgba(0, 0, 0, 0.06)); - margin: var(--nut-divider-vertical-margin, 0 8px); + height: var(--nut-divider-vertical-height, 0.3rem); + border-left: 0.025rem solid var(--nut-divider-vertical-border-left, rgba(0, 0, 0, 0.06)); + margin: var(--nut-divider-vertical-margin, 0 0.2rem); } .nut-grid { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; border: 0 solid var(--nut-grid-border-color, #f5f6f7); } .nut-grid--border { - border-top-width: 1px; - border-left-width: 1px; + border-top-width: 0.025rem; + border-left-width: 0.025rem; } .nut-theme-dark .nut-grid-item__content { background: var(--nut-dark-background, #131313); @@ -989,34 +1212,44 @@ wx-button { } .nut-grid-item { position: relative; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-grid-item__text { color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666666)); - font-size: var(--nut-grid-item-text-font-size, var(--nut-font-size-1, 12px)); + font-size: var(--nut-grid-item-text-font-size, var(--nut-font-size-1, 0.3rem)); line-height: 1.5; word-break: break-all; - margin: var(--nut-grid-item-text-margin, 8px) 0 0 0; + margin: var(--nut-grid-item-text-margin, 0.2rem) 0 0 0; } .nut-grid-item__content { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; - padding: var(--nut-grid-item-content-padding, 16px 8px); + padding: var(--nut-grid-item-content-padding, 0.4rem 0.2rem); background: var(--nut-grid-item-content-bg-color, var(--nut-white, #fff)); border: 0 solid var(--nut-grid-border-color, #f5f6f7); } .nut-grid-item__content--border { - border-right-width: 1px; - border-bottom-width: 1px; + border-right-width: 0.025rem; + border-bottom-width: 0.025rem; } .nut-grid-item__content--surround { - border-top-width: 1px; - border-left-width: 1px; + border-top-width: 0.025rem; + border-left-width: 0.025rem; } .nut-grid-item__content--center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-grid-item__content--square { @@ -1026,22 +1259,28 @@ wx-button { left: 0; } .nut-grid-item__content--reverse { + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .nut-grid-item__content--reverse .nut-grid-item__text { - margin: 0 0 var(--nut-grid-item-text-margin, 8px); + margin: 0 0 var(--nut-grid-item-text-margin, 0.2rem); } .nut-grid-item__content--horizontal { + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; } .nut-grid-item__content--horizontal .nut-grid-item__text { - margin: 0 0 0 var(--nut-grid-item-text-margin, 8px); + margin: 0 0 0 var(--nut-grid-item-text-margin, 0.2rem); } .nut-grid-item__content--horizontal.nut-grid-item__content--reverse { + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .nut-grid-item__content--horizontal.nut-grid-item__content--reverse .nut-grid-item__text { - margin: 0 var(--nut-grid-item-text-margin, 8px) 0 0; + margin: 0 var(--nut-grid-item-text-margin, 0.2rem) 0 0; } .nut-grid-item__content--clickable { cursor: pointer; @@ -1056,6 +1295,8 @@ wx-button { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; @@ -1064,64 +1305,98 @@ wx-button { opacity: 0.1; } .nut-space { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; } .nut-space-item { + -webkit-flex: none; + -ms-flex: none; flex: none; } .nut-space-vertical { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-space-vertical > .nut-space-item:not(:last-child) { - margin-bottom: var(--nut-space-gap, 8px); + margin-bottom: var(--nut-space-gap, 0.2rem); } .nut-space-horizontal { + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; } .nut-space-horizontal > .nut-space-item:not(:last-child) { - margin-right: var(--nut-space-gap, 8px); + margin-right: var(--nut-space-gap, 0.2rem); } .nut-space-horizontal.nut-space-wrap { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; - margin-bottom: calc(var(--nut-space-gap, 8px) * -1); + margin-bottom: calc(var(--nut-space-gap, 0.2rem) * -1); } .nut-space-horizontal.nut-space-wrap > .nut-space-item { - padding-bottom: var(--nut-space-gap, 8px); + padding-bottom: var(--nut-space-gap, 0.2rem); } .nut-space-align-center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-space-align-start { + -webkit-align-items: flex-start; + -ms-flex-align: start; align-items: flex-start; } .nut-space-align-end { + -webkit-align-items: flex-end; + -ms-flex-align: end; align-items: flex-end; } .nut-space-align-baseline { + -webkit-align-items: baseline; + -ms-flex-align: baseline; align-items: baseline; } .nut-space-justify-center { + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-space-justify-start { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; justify-content: flex-start; } .nut-space-justify-end { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; } .nut-space-justify-between { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-space-justify-around { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; justify-content: space-around; } .nut-space-justify-evenly { + -webkit-justify-content: space-evenly; + -ms-flex-pack: space-evenly; justify-content: space-evenly; } .nut-space-justify-stretch { + -webkit-justify-content: stretch; + -ms-flex-pack: stretch; justify-content: stretch; } .nut-space-fill { + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; } @@ -1134,14 +1409,20 @@ wx-button { } .nut-navbar { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - height: var(--nut-navbar-height, 44px); + height: var(--nut-navbar-height, 1.1rem); + -webkit-box-sizing: border-box; box-sizing: border-box; - padding: var(--nut-navbar-padding, 0 16px); + padding: var(--nut-navbar-padding, 0 0.4rem); background: var(--nut-navbar-background, var(--nut-white, #fff)); - box-shadow: var(--nut-navbar-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241)); - font-size: var(--nut-navbar-title-base-font, var(--nut-font-size-2, 14px)); + -webkit-box-shadow: var(--nut-navbar-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); + box-shadow: var(--nut-navbar-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); + font-size: var(--nut-navbar-title-base-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-navbar-color, var(--nut-title-color2, #666666)); overflow: hidden; } @@ -1149,7 +1430,7 @@ wx-button { opacity: 0.1; } .nut-navbar--border { - border-bottom: 1px solid #eee; + border-bottom: 0.025rem solid #eee; } .nut-navbar--fixed { position: fixed; @@ -1166,8 +1447,8 @@ wx-button { padding-top: env(safe-area-inset-top); } .nut-navbar--fixed.nut-navbar--safe-area-inset-top { - height: calc(var(--nut-navbar-height, 44px) + constant(safe-area-inset-top)); - height: calc(var(--nut-navbar-height, 44px) + env(safe-area-inset-top)); + height: calc(var(--nut-navbar-height, 1.1rem) + constant(safe-area-inset-top)); + height: calc(var(--nut-navbar-height, 1.1rem) + env(safe-area-inset-top)); } .nut-navbar--clickable::before { position: absolute; @@ -1180,6 +1461,8 @@ wx-button { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } @@ -1190,13 +1473,19 @@ wx-button { max-width: 60%; margin: 0 auto; text-align: center; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-navbar__title .title { - min-width: var(--nut-navbar-title-width, 100px); - font-size: var(--nut-navbar-title-font, var(--nut-font-size-2, 14px)); + min-width: var(--nut-navbar-title-width, 2.5rem); + font-size: var(--nut-navbar-title-font, var(--nut-font-size-2, 0.35rem)); font-weight: var(--nut-navbar-title-font-weight, 0); color: var(--nut-navbar-title-font-color, var(--nut-navbar-color, var(--nut-title-color2, #666666))); display: -webkit-box; @@ -1205,7 +1494,7 @@ wx-button { overflow: hidden; } .nut-navbar__title.icon .icon { - margin: var(--nut-navbar-title-icon-margin, 0 0 0 13px); + margin: var(--nut-navbar-title-icon-margin, 0 0 0 0.325rem); } .nut-navbar__title .icon { font-size: 0; @@ -1214,7 +1503,7 @@ wx-button { display: inline; } .nut-navbar__title-desc { - font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 12px)); + font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 0.3rem)); } .nut-navbar__title .text__title { display: inline-block; @@ -1225,142 +1514,199 @@ wx-button { .nut-navbar__left { position: absolute; left: 0; - font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14px)); + font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; cursor: pointer; - padding: 0 16px; + padding: 0 0.4rem; } .nut-navbar__right { position: absolute; right: 0; - font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14px)); + font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: 0 16px; + padding: 0 0.4rem; cursor: pointer; } .nut-fixed-nav { position: fixed; z-index: var(--nut-fixednav-index, 201); display: inline-block; - height: 50px; + height: 1.25rem; right: 0; } .nut-fixed-nav.active .nut-icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-fixed-nav.active .nut-fixed-nav__list { + -webkit-transform: translate(0) !important; + -ms-transform: translate(0) !important; transform: translate(0) !important; } .nut-fixed-nav.active.left .nut-icon { + -webkit-transform: rotate(0) !important; + -ms-transform: rotate(0) !important; transform: rotate(0) !important; } .nut-fixed-nav__btn { + -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; right: 0; z-index: calc(var(--nut-fixednav-index, 201) + 1); - width: 80px; - padding-left: 12px; + width: 2rem; + padding-left: 0.3rem; height: 100%; background: var(--nut-fixednav-btn-bg, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); - border-radius: 45px 0 0 45px; - box-shadow: 0 2px 4px #0003; + border-radius: 1.125rem 0 0 1.125rem; + -webkit-box-shadow: 0 0.05rem 0.1rem #0003; + box-shadow: 0 0.05rem 0.1rem #0003; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-fixed-nav__btn > .text { - width: 24px; - line-height: 13px; - font-size: 10px; + width: 0.6rem; + line-height: 0.325rem; + font-size: 0.25rem; color: var(--nut-fixednav-bg-color, var(--nut-white, #fff)); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; } .nut-fixed-nav__btn .nut-icon { - margin-right: 5px; + margin-right: 0.125rem; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); transform: rotate(0); + -webkit-transition: all 0.3s; transition: all 0.3s; } .nut-fixed-nav__list { position: absolute; right: 0; + -webkit-transform: translate(100%); + -ms-transform: translate(100%); transform: translate(100%); + -webkit-transition: all 0.5s; transition: all 0.5s; + -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; z-index: var(--nut-fixednav-index, 201); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; height: 100%; background: var(--nut-fixednav-bg-color, var(--nut-white, #fff)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; - border-radius: 25px 0 0 25px; - box-shadow: 2px 2px 8px #0003; - padding: 0 80px 0 20px; + border-radius: 0.625rem 0 0 0.625rem; + -webkit-box-shadow: 0.05rem 0.05rem 0.2rem #0003; + box-shadow: 0.05rem 0.05rem 0.2rem #0003; + padding: 0 2rem 0 0.5rem; } .nut-fixed-nav__list-item { + -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; position: relative; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; height: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - min-width: 50px; + min-width: 1.25rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; } .nut-fixed-nav__list-item.active > .span { color: var(--nut-fixednav-item-active-color, var(--nut-primary-color, #fa2c19)); } .nut-fixed-nav__list-item > img { - width: 20px; - height: 20px; - margin-bottom: 2px; + width: 0.5rem; + height: 0.5rem; + margin-bottom: 0.05rem; } .nut-fixed-nav__list-item > .span { - font-size: 10px; + font-size: 0.25rem; color: var(--nut-fixednav-font-color, var(--nut-black, #000)); } .nut-fixed-nav__list-item > .b { position: absolute; right: 0; - top: 1px; - height: 14px; - line-height: 14px; - font-size: 10px; - padding: 0 3px; + top: 0.025rem; + height: 0.35rem; + line-height: 0.35rem; + font-size: 0.25rem; + padding: 0 0.075rem; color: #fff; background: var(--nut-primary-color, #fa2c19); - border-radius: 7px; + border-radius: 0.175rem; text-align: center; - min-width: 12px; + min-width: 0.3rem; } .nut-fixed-nav.left { right: auto; left: 0; } .nut-fixed-nav.left .nut-fixed-nav__btn { + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; flex-direction: row-reverse; right: auto; left: 0; - border-radius: 0 45px 45px 0; + border-radius: 0 1.125rem 1.125rem 0; } .nut-fixed-nav.left .nut-fixed-nav__btn .nut-icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-fixed-nav.left .nut-fixed-nav__list { + -webkit-transform: translate(-100%); + -ms-transform: translate(-100%); transform: translate(-100%); right: auto; - border-radius: 0 25px 25px 0; - padding-left: 80px; - padding-right: 20px; + border-radius: 0 0.625rem 0.625rem 0; + padding-left: 2rem; + padding-right: 0.5rem; } .nut-theme-dark .nut-menu .nut-menu__bar { background-color: var(--nut-dark-background, #131313); @@ -1376,18 +1722,23 @@ wx-button { } .nut-menu .nut-menu__bar { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - line-height: var(--nut-menu-bar-line-height, 48px); + line-height: var(--nut-menu-bar-line-height, 1.2rem); background-color: var(--nut-white, #fff); - box-shadow: var(--nut-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12)); + -webkit-box-shadow: var(--nut-menu-bar-box-shadow, 0 0.05rem 0.3rem rgba(89, 89, 89, 0.12)); + box-shadow: var(--nut-menu-bar-box-shadow, 0 0.05rem 0.3rem rgba(89, 89, 89, 0.12)); } .nut-menu .nut-menu__bar.opened { z-index: var(--nut-menu-bar-opened-z-index, 2001); } .nut-menu .nut-menu__bar .nut-menu__item { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; text-align: center; - font-size: var(--nut-menu-item-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-menu-item-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-menu-item-text-color, var(--nut-title-color, #1a1a1a)); min-width: 0; } @@ -1398,12 +1749,21 @@ wx-button { color: var(--nut-menu-item-disabled-color, #969799); } .nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title-icon { + -webkit-transition: all 0.2s linear; transition: all 0.2s linear; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; max-width: 100%; } @@ -1412,10 +1772,12 @@ wx-button { overflow: hidden; text-overflow: ellipsis; display: block; - padding-left: var(--nut-menu-title-text-padding-left, 8px); - padding-right: var(--nut-menu-title-text-padding-right, 8px); + padding-left: var(--nut-menu-title-text-padding-left, 0.2rem); + padding-right: var(--nut-menu-title-text-padding-right, 0.2rem); } .nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title.active .nut-menu__title-icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-theme-dark .nut-menu-item__content .nut-menu-item__option { @@ -1434,9 +1796,13 @@ wx-button { color: var(--nut-menu-item-active-text-color, var(--nut-primary-color, #fa2c19)) !important; } .nut-menu-item__content { - padding: var(--nut-menu-item-content-padding, 12px 24px); - max-height: var(--nut-menu-item-content-max-height, 214px); + padding: var(--nut-menu-item-content-padding, 0.3rem 0.6rem); + max-height: var(--nut-menu-item-content-max-height, 5.35rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-menu-item__content.nut-menu-item__overflow { @@ -1448,16 +1814,24 @@ wx-button { } .nut-menu-item__content .nut-menu-item__option { color: var(--nut-title-color, #1a1a1a); - font-size: var(--nut-font-size-2, 14px); - padding-top: var(--nut-menu-item-option-padding-top, 12px); - padding-bottom: var(--nut-menu-item-option-padding-bottom, 12px); + font-size: var(--nut-font-size-2, 0.35rem); + padding-top: var(--nut-menu-item-option-padding-top, 0.3rem); + padding-bottom: var(--nut-menu-item-option-padding-bottom, 0.3rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-menu-item__content .nut-menu-item__option .nut-menu-item__span { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-right: var(--nut-menu-item-option-i-margin-right, 6px); + margin-right: var(--nut-menu-item-option-i-margin-right, 0.15rem); } .nut-menu-item-placeholder-element { position: fixed; @@ -1470,16 +1844,22 @@ wx-button { background: var(--nut-dark-background, #131313); } .nut-tabbar { - border: 0px; + border: 0rem; + -webkit-box-shadow: var(--nut-tabbar-box-shadow, none); box-shadow: var(--nut-tabbar-box-shadow, none); - border-bottom: var(--nut-tabbar-border-bottom, 1px solid #eee); - border-top: var(--nut-tabbar-border-top, 1px solid #eee); + border-bottom: var(--nut-tabbar-border-bottom, 0.025rem solid #eee); + border-top: var(--nut-tabbar-border-top, 0.025rem solid #eee); width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-box-sizing: content-box; box-sizing: content-box; background: var(--nut-white, #fff); - height: var(--nut-tabbar-height, 50px); + height: var(--nut-tabbar-height, 1.25rem); } .nut-tabbar:last-child { border-right: 0; @@ -1498,13 +1878,21 @@ wx-button { color: var(--nut-dark-color-gray, var(--nut-text-color, #808080)); } .nut-tabbar-item { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; text-align: center; text-decoration: none; color: var(--nut-primary-color, #fa2c19); height: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-tabbar-item__icon--unactive { @@ -1513,26 +1901,33 @@ wx-button { .nut-tabbar-item_icon-box { padding: 0; line-height: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; position: relative; } .nut-tabbar-item_icon-box .nut-icon { - width: 20px; - height: 20px; - font-size: 20px; + width: 0.5rem; + height: 0.5rem; + font-size: 0.5rem; } .nut-tabbar-item_icon-box_tips { position: absolute; background: var(--nut-tabbar-active-color, var(--nut-primary-color, #fa2c19)); - border: 1px solid var(--nut-white, #fff); - border-radius: 7px; + border: 0.025rem solid var(--nut-white, #fff); + border-radius: 0.175rem; text-align: center; - top: -2px; - right: -7px; - box-shadow: 0 0 0 1px var(--nut-white, #fff); - font-size: var(--nut-font-size-1, 12px); + top: -0.05rem; + right: -0.175rem; + -webkit-box-shadow: 0 0 0 0.025rem var(--nut-white, #fff); + box-shadow: 0 0 0 0.025rem var(--nut-white, #fff); + font-size: var(--nut-font-size-1, 0.3rem); color: var(--nut-white, #fff); z-index: 1; } @@ -1542,17 +1937,17 @@ wx-button { background-position: center center; } .nut-tabbar-item_icon-box_icon img { - width: 20px; - height: 20px; + width: 0.5rem; + height: 0.5rem; } .nut-tabbar-item_icon-box_nav-word { - font-size: var(--nut-tabbar-item-text-font-size, var(--nut-font-size-0, 10px)); + font-size: var(--nut-tabbar-item-text-font-size, var(--nut-font-size-0, 0.25rem)); line-height: var(--nut-tabbar-item-text-line-height, initial); margin-top: var(--nut-tabbar-word-margin-top, auto); display: block; } .nut-tabbar-item_icon-box_big-word { - font-size: var(--nut-font-size-large, var(--nut-font-size-3, 16px)); + font-size: var(--nut-font-size-large, var(--nut-font-size-3, 0.4rem)); line-height: 1; } .nut-theme-dark .nut-pagination-prev, @@ -1571,32 +1966,45 @@ wx-button { background: var(--nut-dark-background, #131313); } .nut-pagination { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - font-size: var(--nut-pagination-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-pagination-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-pagination-color, var(--nut-primary-color, #fa2c19)); } .nut-pagination-contain { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-pagination-simple { - height: 39px; - width: 124px; - line-height: 39px; + height: 0.975rem; + width: 3.1rem; + line-height: 0.975rem; text-align: center; } .nut-pagination-prev, .nut-pagination-item, .nut-pagination-next { - height: 39px; - min-width: 39px; + height: 0.975rem; + min-width: 0.975rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; + -webkit-box-sizing: border-box; box-sizing: border-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; background: var(--nut-white, #fff); - border-radius: var(--nut-pagination-item-border-radius, 2px); - border: var(--nut-pagination-item-border-width, 1px) solid var(--nut-pagination-item-border-color, #e4e7eb); + border-radius: var(--nut-pagination-item-border-radius, 0.05rem); + border: var(--nut-pagination-item-border-width, 0.025rem) solid var(--nut-pagination-item-border-color, #e4e7eb); cursor: pointer; } .nut-pagination-prev, @@ -1605,10 +2013,10 @@ wx-button { } .nut-pagination-prev, .nut-pagination-next { - padding: var(--nut-pagination-prev-next-padding, 0 11px); + padding: var(--nut-pagination-prev-next-padding, 0 0.275rem); } .nut-pagination .simple-border { - border-right: var(--nut-pagination-item-border-width, 1px) solid var(--nut-pagination-item-border-color, #e4e7eb); + border-right: var(--nut-pagination-item-border-width, 0.025rem) solid var(--nut-pagination-item-border-color, #e4e7eb); } .nut-pagination .active { color: var(--nut-white, #fff); @@ -1635,7 +2043,7 @@ wx-button { } .nut-indicator--dot, .nut-indicator--number { - margin: 0 4px; + margin: 0 0.1rem; } .nut-indicator--dot:first-child, .nut-indicator--number:first-child { @@ -1648,25 +2056,26 @@ wx-button { .nut-indicator--dot { display: inline-block; vertical-align: middle; - width: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 18px) / 3)); - height: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 18px) / 3)); + width: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 0.45rem) / 3)); + height: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 0.45rem) / 3)); border-radius: 50%; background-color: var(--nut-indicator-dot-color, var(--nut-disable-color, #cccccc)); } .nut-indicator--number { display: inline-block; position: relative; - width: var(--nut-indicator-size, 18px); - height: var(--nut-indicator-size, 18px); + width: var(--nut-indicator-size, 0.45rem); + height: var(--nut-indicator-size, 0.45rem); text-align: center; - font-size: var(--nut-indicator-number-font-size, 10px); - line-height: var(--nut-indicator-size, 18px); + font-size: var(--nut-indicator-number-font-size, 0.25rem); + line-height: var(--nut-indicator-size, 0.45rem); color: var(--nut-indicator-color, var(--nut-white, #fff)); vertical-align: middle; - border: 1px solid var(--nut-indicator-color, var(--nut-white, #fff)); + border: 0.025rem solid var(--nut-indicator-color, var(--nut-white, #fff)); border-radius: 50%; background-color: var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); - box-shadow: 0 0 1px 1px var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); + -webkit-box-shadow: 0 0 0.025rem 0.025rem var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); + box-shadow: 0 0 0.025rem 0.025rem var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); } .nut-side-navbar { overflow: auto; @@ -1689,10 +2098,10 @@ wx-button { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-side-navbar-item { - height: var(--nut-sidenavbar-item-height, 40px); - line-height: var(--nut-sidenavbar-item-line-height, 40px); + height: var(--nut-sidenavbar-item-height, 1rem); + line-height: var(--nut-sidenavbar-item-line-height, 1rem); display: block; - font-size: var(--nut-sidenavbar-item-font-size, 16px); + font-size: var(--nut-sidenavbar-item-font-size, 0.4rem); background-color: var(--nut-sidenavbar-item-title-bg-color, var(--nut-white, #fff)); } .nut-side-navbar-item__title { @@ -1718,27 +2127,30 @@ wx-button { .nut-sub-side-navbar__title { display: block; width: var(--nut-sidenavbar-sub-title-width, 100%); - height: var(--nut-sidenavbar-sub-title-height, 40px); + height: var(--nut-sidenavbar-sub-title-height, 1rem); position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + -webkit-box-sizing: border-box; box-sizing: border-box; - border-bottom: 1px solid var(--nut-sidenavbar-sub-title-border-color, #f6f6f6); + border-bottom: 0.025rem solid var(--nut-sidenavbar-sub-title-border-color, #f6f6f6); color: var(--nut-sidenavbar-sub-title-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-sidenavbar-sub-title-font-size, var(--nut-font-size-large, var(--nut-font-size-3, 16px))); + font-size: var(--nut-sidenavbar-sub-title-font-size, var(--nut-font-size-large, var(--nut-font-size-3, 0.4rem))); background-color: var(--nut-sidenavbar-sub-title-bg-color, #f6f6f6); border-radius: var(--nut-sidenavbar-sub-title-radius, 0); border: var(--nut-sidenavbar-sub-title-border, 0); } .nut-sub-side-navbar__title__text { - line-height: var(--nut-sidenavbar-sub-title-text-line-height, 40px); + line-height: var(--nut-sidenavbar-sub-title-text-line-height, 1rem); color: var(--nut-sidenavbar-sub-title-text-color, var(--nut-title-color, #1a1a1a)); } .nut-sub-side-navbar__title__icon { position: absolute; top: 50%; - right: 20px; + right: 0.5rem; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-sub-side-navbar__list { @@ -1760,11 +2172,16 @@ wx-button { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-searchbar { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: var(--nut-searchbar-width, 100%); - padding: var(--nut-searchbar-padding, 9px 16px); + padding: var(--nut-searchbar-padding, 0.225rem 0.4rem); background: var(--nut-searchbar-background, var(--nut-white, #fff)); + -webkit-box-sizing: border-box; box-sizing: border-box; color: var(--nut-searchbar-input-bar-color, inherit); } @@ -1783,32 +2200,58 @@ wx-button { height: env(safe-area-inset-bottom); background: var(--nut-searchbar-background, var(--nut-white, #fff)); } +.nut-searchbar::-webkit-input-placeholder { + color: var(--nut-searchbar-input-bar-placeholder-color, inherit); +} +.nut-searchbar::-moz-placeholder { + color: var(--nut-searchbar-input-bar-placeholder-color, inherit); +} +.nut-searchbar:-ms-input-placeholder { + color: var(--nut-searchbar-input-bar-placeholder-color, inherit); +} +.nut-searchbar::-ms-input-placeholder { + color: var(--nut-searchbar-input-bar-placeholder-color, inherit); +} .nut-searchbar::placeholder { color: var(--nut-searchbar-input-bar-placeholder-color, inherit); } .nut-searchbar__search-label { - padding: 0 5px; + padding: 0 0.125rem; color: #323233; } .nut-searchbar__search-input { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: var(--nut-searchbar-input-width, 100%); - height: var(--nut-searchbar-input-height, 32px); + height: var(--nut-searchbar-input-height, 0.8rem); + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - padding: var(--nut-searchbar-input-padding, 0 0 0 13px); - border-radius: var(--nut-searchbar-input-border-radius, 16px); - box-shadow: var(--nut-searchbar-input-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.04)); + padding: var(--nut-searchbar-input-padding, 0 0 0 0.325rem); + border-radius: var(--nut-searchbar-input-border-radius, 0.4rem); + -webkit-box-shadow: var(--nut-searchbar-input-box-shadow, 0 0 0.2rem 0 rgba(0, 0, 0, 0.04)); + box-shadow: var(--nut-searchbar-input-box-shadow, 0 0 0.2rem 0 rgba(0, 0, 0, 0.04)); background: var(--nut-searchbar-input-background, #f7f7f7); + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-searchbar__search-input.square { border-radius: 0; } .nut-searchbar__search-input .nut-searchbar__input-inner { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: relative; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; overflow: hidden; } @@ -1816,24 +2259,30 @@ wx-button { width: 100%; } .nut-searchbar__search-input .nut-searchbar__input-inner .nut-searchbar__input-form { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; overflow: hidden; } -.nut-searchbar__search-input .nut-searchbar__input-inner input { +.nut-searchbar__search-input .nut-searchbar__input-inner taro-input-core { width: 100%; height: 100%; - padding-left: 4px; + padding-left: 0.1rem; } .nut-searchbar__search-input .nut-searchbar__input-inner-icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; position: relative; - padding: 0 7px; + padding: 0 0.175rem; } .nut-searchbar__search-input .nut-searchbar__input-clear { position: relative; z-index: 10; - padding: 0 5px; + padding: 0 0.125rem; } .nut-searchbar__search-input .nut-searchbar__input-clear .nut-searchbar__nut-icon-mask-close { color: #ccc; @@ -1845,45 +2294,54 @@ wx-button { .nut-searchbar__search-input .nut-searchbar__input-inner-icon-absolute .nut-searchbar__input-clear { position: absolute; z-index: 10; - left: -20px; + left: -0.5rem; } .nut-searchbar__search-input .nut-searchbar__iptleft-search-icon { - margin-right: 6px; - width: 14px; - height: 14px; + margin-right: 0.15rem; + width: 0.35rem; + height: 0.35rem; } .nut-searchbar__search-input .nut-searchbar__iptright-search-icon { - margin-left: 5px; + margin-left: 0.125rem; } .nut-searchbar__search-input .nut-searchbar__input-bar { width: 100%; - height: 36px; + height: 0.9rem; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; padding: 0; margin: 0; background-color: transparent; border-color: transparent; outline: none; - font-size: 14px; + font-size: 0.35rem; } .nut-searchbar__search-input .nut-searchbar__input-bar_clear { - max-width: 290px; + max-width: 7.25rem; } .nut-searchbar__search-input .nut-searchbar__input-inner-absolute .nut-searchbar__input-bar { + -webkit-box-sizing: border-box; box-sizing: border-box; - padding-right: 20px; + padding-right: 0.5rem; } .nut-searchbar__left-search-icon { - margin-right: 8px; + margin-right: 0.2rem; } .nut-searchbar__search-icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-searchbar__right-search-icon { - margin-left: 16px; - font-size: 14px; + margin-left: 0.4rem; + font-size: 0.35rem; color: var(--nut-searchbar-right-out-color, var(--nut-black, #000)); } .nut-theme-dark .nut-tabs__titles { @@ -1899,28 +2357,46 @@ wx-button { background-color: var(--nut-dark-background2, #1b1b1b); } .nut-tabs { + display: -webkit-flex; + display: -ms-flexbox; display: flex; overflow: hidden; } .nut-tabs .nut-tabs__titles { + display: -webkit-flex; + display: -ms-flexbox; display: flex; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; white-space: nowrap; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; background: var(--nut-tabs-titles-background-color, var(--nut-help-color, #f5f5f5)); border-radius: var(--nut-tabs-titles-border-radius, 0); } .nut-tabs .nut-tabs__titles .nut-tabs__list { width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; } .nut-tabs .nut-tabs__titles .nut-tabs__titles-item { position: relative; - font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 0.35rem)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; color: var(--nut-tabs-titles-item-color, var(--nut-title-color, #1a1a1a)); } @@ -1935,7 +2411,7 @@ wx-button { } .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon { position: absolute; - font-size: 12px; + font-size: 0.3rem; width: 100%; height: 100%; color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19)); @@ -1943,12 +2419,15 @@ wx-button { .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile, .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__line { position: absolute; + -webkit-transition: width 0.3s ease; transition: width 0.3s ease; width: 0; height: 0; content: ' '; bottom: 15%; left: 50%; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); overflow: hidden; border-radius: var(--nut-tabs-titles-item-line-border-radius, 0); @@ -1960,23 +2439,29 @@ wx-button { } .nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { content: ' '; - width: var(--nut-tabs-horizontal-titles-item-active-line-width, 40px); - height: 3px; + width: var(--nut-tabs-horizontal-titles-item-active-line-width, 1rem); + height: 0.075rem; background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); } .nut-tabs .nut-tabs__titles .nut-tabs__titles-item.disabled { color: var(--nut-disable-color, #cccccc); } .nut-tabs .nut-tabs__titles-left { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; justify-content: flex-start; } .nut-tabs.horizontal { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles, .nut-tabs.horizontal > .nut-tabs__titles { + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; - height: var(--nut-tabs-horizontal-titles-height, 46px); + height: var(--nut-tabs-horizontal-titles-height, 1.15rem); } .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__list, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__list { @@ -1989,33 +2474,43 @@ wx-button { } .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; flex: 1 0 auto; - min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px); + min-width: var(--nut-tabs-horizontal-titles-item-min-width, 1.25rem); width: 0; } .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon { position: absolute; - font-size: 12px; + font-size: 0.3rem; width: 100%; height: 100%; color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19)); } .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item-left, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item-left { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; flex: 0 0 auto; } .nut-tabs.vertical { + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; width: 100%; } .nut-tabs.vertical > .nut-tabs__titles { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; height: auto; - padding: 10px 0; - width: var(--nut-tabs-vertical-titles-width, 100px); + padding: 0.25rem 0; + width: var(--nut-tabs-vertical-titles-width, 2.5rem); } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__list { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-tabs.vertical > .nut-tabs__titles.scrollable { @@ -2024,17 +2519,22 @@ wx-button { height: auto; } .nut-tabs.vertical > .nut-tabs__titles.scrollable .nut-tabs__titles-placeholder { - height: 22px; + height: 0.55rem; } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item { - min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px); + min-width: var(--nut-tabs-horizontal-titles-item-min-width, 1.25rem); width: 100%; - height: var(--nut-tabs-vertical-titles-item-height, 40px); + height: var(--nut-tabs-vertical-titles-item-height, 1rem); + -webkit-flex: none; + -ms-flex: none; flex: none; } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item__line { bottom: none; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); + -webkit-transition: height 0.3s ease; transition: height 0.3s ease; width: 0; height: 0; @@ -2043,35 +2543,41 @@ wx-button { background-color: #fff; } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { - left: 10px; - width: 3px; + left: 0.25rem; + width: 0.075rem; background: var(--nut-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); - height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px); + height: var(--nut-tabs-vertical-titles-item-active-line-height, 0.35rem); } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__smile { position: absolute; - right: -8px; - bottom: 2px; + right: -0.2rem; + bottom: 0.05rem; left: auto; - width: 36px; + width: 0.9rem; + -webkit-transform: rotate(320deg); + -ms-transform: rotate(320deg); transform: rotate(320deg); - height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px); + height: var(--nut-tabs-vertical-titles-item-active-line-height, 0.35rem); } .nut-tabs.vertical .nut-tabs__content { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-tabs.vertical .nut-tabs__content .nut-tab-pane { height: 100%; } .nut-tabs__titles.large .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 16px)); + font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 0.4rem)); } .nut-tabs__titles.normal .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 0.35rem)); } .nut-tabs__titles.small .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 12px)); + font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 0.3rem)); } .nut-tabs__titles::-webkit-scrollbar { display: none; @@ -2082,31 +2588,37 @@ wx-button { display: none; } .nut-tabs__titles.smile .nut-tabs__titles-item.active .nut-tabs__titles-item__smile { - width: 36px; - height: 10px; + width: 0.9rem; + height: 0.25rem; display: block; } .nut-tabs__content { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-tabs .nut-tabs__titles-item .taro { - height: 46px; - line-height: 46px; + height: 1.15rem; + line-height: 1.15rem; } .nut-tabs .nut-tabs__titles-placeholder { width: auto; - min-width: 10px; + min-width: 0.25rem; } .nut-theme-dark .nut-tab-pane { background: var(--nut-dark-background2, #1b1b1b); } .nut-tab-pane { width: 100%; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; display: block; background-color: #fff; - padding: 24px 20px; + padding: 0.6rem 0.5rem; + -webkit-box-sizing: border-box; box-sizing: border-box; overflow: auto; height: 100%; @@ -2128,59 +2640,73 @@ wx-button { } .nut-cascader { width: 100%; - font-size: var(--nut-cascader-font-size, var(--nut-font-size-2, 14px)); - line-height: var(--nut-cascader-line-height, 22px); + font-size: var(--nut-cascader-font-size, var(--nut-font-size-2, 0.35rem)); + line-height: var(--nut-cascader-line-height, 0.55rem); } .nut-cascader .nut-tab-pane { padding: 0; } .nut-cascader.nut-tabs.horizontal .nut-tabs__titles .nut-tabs__titles-item { + -webkit-flex: initial; + -ms-flex: initial; flex: initial; - padding: var(--nut-cascader-tabs-item-padding, 0 10px); + padding: var(--nut-cascader-tabs-item-padding, 0 0.25rem); white-space: nowrap; } .nut-cascader .nut-tabs__titles { - padding: var(--nut-cascader-tabs-item-padding, 0 10px); + padding: var(--nut-cascader-tabs-item-padding, 0 0.25rem); background: #fff; } .nut-cascader__bar { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: var(--nut-cascader-bar-padding, 24px 20px 17px); + padding: var(--nut-cascader-bar-padding, 0.6rem 0.5rem 0.425rem); text-align: center; font-weight: 700; - line-height: var(--nut-cascader-bar-line-height, 20px); + line-height: var(--nut-cascader-bar-line-height, 0.5rem); color: var(--nut-cascader-bar-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-cascader-bar-font-size, var(--nut-font-size-4, 18px)); + font-size: var(--nut-cascader-bar-font-size, var(--nut-font-size-4, 0.45rem)); } .nut-cascader-pane { display: block; - padding: 10px 0 0; + padding: 0.25rem 0 0; margin: 0; width: 100%; - height: 342px; + height: 8.55rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nut-cascader-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: var(--nut-cascader-item-padding, 10px 20px); + padding: var(--nut-cascader-item-padding, 0.25rem 0.5rem); margin: 0; cursor: pointer; - font-size: var(--nut-cascader-item-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-cascader-item-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-cascader-item-color, var(--nut-title-color, #1a1a1a)); } .nut-cascader-item__title { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-cascader-item__icon-check { - margin-left: 10px; + margin-left: 0.25rem; visibility: hidden; } .nut-cascader-item__icon-loading { - margin-left: 10px; + margin-left: 0.25rem; } .nut-cascader-item.active:not(.disabled) { color: var(--nut-cascader-item-active-color, var(--nut-primary-color, #fa2c19)); @@ -2208,17 +2734,23 @@ wx-button { } .nut-calendar { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; color: #333; - font-size: 16px; + font-size: 0.4rem; background-color: var(--nut-white, #fff); overflow: hidden; height: 100%; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-calendar.nut-calendar--nopop .nut-calendar__header .nut-calendar__header-title { - font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 16px)); + font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 0.4rem)); } .nut-calendar .popup-box { height: 100%; @@ -2230,37 +2762,50 @@ wx-button { display: none; } .nut-calendar .nut-calendar__header { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; text-align: center; - padding-top: 1px; + padding-top: 0.025rem; background-color: var(--nut-white, #fff); } .nut-calendar .nut-calendar__header .nut-calendar__header-title { - font-size: var(--nut-calendar-title-font, var(--nut-font-size-4, 18px)); + font-size: var(--nut-calendar-title-font, var(--nut-font-size-4, 0.45rem)); font-weight: var(--nut-calendar-title-font-weight, 500); - line-height: 44px; + line-height: 1.1rem; } .nut-calendar .nut-calendar__header .nut-calendar__header-slot { - min-height: 24px; + min-height: 0.6rem; } .nut-calendar .nut-calendar__header .nut-calendar__header-subtitle { - padding: 7px 0; - line-height: 22px; - font-size: var(--nut-calendar-sub-title-font, var(--nut-font-size-2, 14px)); + padding: 0.175rem 0; + line-height: 0.55rem; + font-size: var(--nut-calendar-sub-title-font, var(--nut-font-size-2, 0.35rem)); } .nut-calendar .nut-calendar__header .nut-calendar__weekdays { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; justify-content: space-around; - height: 36px; - border-radius: 0 0 12px 12px; - box-shadow: 0 4px 10px #0000000f; + height: 0.9rem; + border-radius: 0 0 0.3rem 0.3rem; + -webkit-box-shadow: 0 0.1rem 0.25rem #0000000f; + box-shadow: 0 0.1rem 0.25rem #0000000f; } .nut-calendar .nut-calendar__header .nut-calendar__weekdays .nut-calendar__weekday.weekend { color: var(--nut-calendar-day67-font-color, var(--nut-primary-color, #fa2c19)); } .nut-calendar .nut-calendar__content { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; width: 100%; display: block; @@ -2270,13 +2815,18 @@ wx-button { width: 100%; height: auto; display: block; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__body { display: block; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__month { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; text-align: center; } @@ -2284,20 +2834,20 @@ wx-button { padding-top: 0; } .nut-calendar .nut-calendar__content .nut-calendar__panel .calendar-loading-tip { - height: 50px; - line-height: 50px; + height: 1.25rem; + line-height: 1.25rem; text-align: center; position: absolute; - top: -50px; + top: -1.25rem; left: 0; right: 0; - font-size: var(--nut-calendar-text-font, var(--nut-font-size-1, 12px)); + font-size: var(--nut-calendar-text-font, var(--nut-font-size-1, 0.3rem)); color: var(--nut-text-color, #808080); } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__month-title { - height: 23px; - line-height: 23px; - margin: 8px 0; + height: 0.575rem; + line-height: 0.575rem; + margin: 0.2rem 0; font-size: var(--nut-calendar-month-title-font-size, inherit); } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days { @@ -2306,11 +2856,19 @@ wx-button { .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day { float: left; width: 14.28%; - height: 64px; + height: 1.6rem; font-weight: var(--nut-calendar-day-font-weight, 500); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; position: relative; } @@ -2323,29 +2881,29 @@ wx-button { } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--curr { position: absolute; - bottom: 6px; + bottom: 0.15rem; width: 100%; - font-size: 12px; - line-height: 14px; + font-size: 0.3rem; + line-height: 0.35rem; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tip { position: absolute; - bottom: 6px; + bottom: 0.15rem; width: 100%; - font-size: 12px; - line-height: 14px; + font-size: 0.3rem; + line-height: 0.35rem; color: var(--nut-calendar-primary-color, var(--nut-primary-color, #fa2c19)); } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--top { - top: 6px; + top: 0.15rem; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--bottom { - bottom: 6px; + bottom: 0.15rem; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day--active { background-color: var(--nut-calendar-primary-color, var(--nut-primary-color, #fa2c19)); color: var(--nut-white, #fff) !important; - border-radius: var(--nut-calendar-day-active-border-radius, 0px); + border-radius: var(--nut-calendar-day-active-border-radius, 0rem); } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day--active .nut-calendar__day-tips, .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day--active .nut-calendar__day-tips--curr { @@ -2371,76 +2929,108 @@ wx-button { content: ''; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-value { - padding: 2px 0; - font-size: var(--nut-calendar-day-font, 16px); + padding: 0.05rem 0; + font-size: var(--nut-calendar-day-font, 0.4rem); } .nut-calendar .nut-calendar__footer { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - height: 62px; + height: 1.55rem; width: 100%; background-color: var(--nut-white, #fff); } .nut-calendar .nut-calendar__footer .nut-calendar__confirm { - height: 44px; + height: 1.1rem; width: 100%; - margin: 10px 18px; - border-radius: 22px; + margin: 0.25rem 0.45rem; + border-radius: 0.55rem; background: var( --nut-button-primary-background-color, linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) ); color: var(--nut-white, #fff); text-align: center; - line-height: 44px; + line-height: 1.1rem; } .nut-calendarcard { background: var(--nut-white, #fff); - border-radius: 12px; + border-radius: 0.3rem; overflow: hidden; - font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 16px)); + font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 0.4rem)); color: var(--nut-black, #000); } .nut-calendarcard-header { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; font-weight: 400; } .nut-calendarcard-header-left, .nut-calendarcard-header-right { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; cursor: pointer; - margin: 16px; + margin: 0.4rem; line-height: 1; } .nut-calendarcard-header-left .left, .nut-calendarcard-header-right .left { - margin-left: 8px; + margin-left: 0.2rem; } .nut-calendarcard-header-left .right, .nut-calendarcard-header-right .right { - margin-right: 8px; + margin-right: 0.2rem; } .nut-calendarcard-days { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-calendarcard-day { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; position: relative; width: 14.28%; - height: 48px; + height: 1.2rem; cursor: pointer; - margin-bottom: 4px; + margin-bottom: 0.1rem; text-align: center; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; } .nut-calendarcard-day.header { @@ -2449,9 +3039,9 @@ wx-button { .nut-calendarcard-day-top, .nut-calendarcard-day-bottom { width: 100%; - height: 12px; - font-size: 12px; - line-height: 12px; + height: 0.3rem; + font-size: 0.3rem; + line-height: 0.3rem; } .nut-calendarcard-day.weekend { color: var(--nut-calendar-choose-color, var(--nut-primary-color, #fa2c19)); @@ -2487,36 +3077,45 @@ wx-button { } .nut-theme-dark .nut-checkbox__button--disabled { color: var(--nut-checkbox-label-disable-color, #999); - border: 1px solid var(--nut-checkbox-label-disable-color, #999); + border: 0.025rem solid var(--nut-checkbox-label-disable-color, #999); } .nut-checkbox { display: var(--nut-checkbox-display, inline-flex); vertical-align: bottom; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-right: var(--nut-checkbox-margin-right, 20px); + margin-right: var(--nut-checkbox-margin-right, 0.5rem); } .nut-checkbox--reverse { + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .nut-checkbox--reverse .nut-checkbox__label { - margin-right: var(--nut-checkbox-label-margin-left, 15px); + margin-right: var(--nut-checkbox-label-margin-left, 0.375rem); margin-left: 0; } .nut-checkbox__button { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: var(--nut-checkbox-button-padding, 5px 18px); - font-size: var(--nut-checkbox-button-font-size, 12px); + padding: var(--nut-checkbox-button-padding, 0.125rem 0.45rem); + font-size: var(--nut-checkbox-button-font-size, 0.3rem); background: var(--nut-checkbox-button-background, #f6f7f9); - border-radius: var(--nut-checkbox-button-border-radius, 15px); + border-radius: var(--nut-checkbox-button-border-radius, 0.375rem); color: var(--nut-checkbox-label-color, #1d1e1e); + -webkit-box-sizing: border-box; box-sizing: border-box; - border: 1px solid var(--nut-checkbox-button-border-color, #f6f7f9); + border: 0.025rem solid var(--nut-checkbox-button-border-color, #f6f7f9); } .nut-checkbox__button--active { background: transparent; color: var(--nut-checkbox-button-font-color-active, var(--nut-primary-color, #fa2c19)); - border: 1px solid var(--nut-checkbox-button-border-color-active, var(--nut-primary-color, #fa2c19)); + border: 0.025rem solid var(--nut-checkbox-button-border-color-active, var(--nut-primary-color, #fa2c19)); position: relative; } .nut-checkbox__button--active::after { @@ -2536,9 +3135,11 @@ wx-button { border: none; } .nut-checkbox__label { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - margin-left: var(--nut-checkbox-label-margin-left, 15px); - font-size: var(--nut-checkbox-label-font-size, 14px); + margin-left: var(--nut-checkbox-label-margin-left, 0.375rem); + font-size: var(--nut-checkbox-label-font-size, 0.35rem); color: var(--nut-checkbox-label-color, #1d1e1e); } .nut-checkbox__label--disabled { @@ -2546,21 +3147,23 @@ wx-button { } .nut-checkbox__icon { color: var(--nut-primary-color, #fa2c19); - font-size: var(--nut-checkbox-icon-font-size, 18px); + font-size: var(--nut-checkbox-icon-font-size, 0.45rem); + -webkit-transition-duration: 0.3s; transition-duration: 0.3s; + -webkit-transition-property: color, border-color, background-color; transition-property: color, border-color, background-color; } .nut-checkbox__icon--unchecked { color: var(--nut-checkbox-icon-disable-color, #d6d6d6); - font-size: var(--nut-checkbox-icon-font-size, 18px); + font-size: var(--nut-checkbox-icon-font-size, 0.45rem); } .nut-checkbox__icon--indeterminate { color: var(--nut-primary-color, #fa2c19); - font-size: var(--nut-checkbox-icon-font-size, 18px); + font-size: var(--nut-checkbox-icon-font-size, 0.45rem); } .nut-checkbox__icon--disable { color: var(--nut-checkbox-icon-disable-color2, var(--nut-help-color, #f5f5f5)); - font-size: var(--nut-checkbox-icon-font-size, 18px); + font-size: var(--nut-checkbox-icon-font-size, 0.45rem); } .nut-theme-dark .nut-input { background: var(--nut-dark-background, #131313); @@ -2570,25 +3173,30 @@ wx-button { .nut-theme-dark .nut-input__text--readonly { color: var(--nut-dark-color, var(--nut-white, #fff)); } -input, -textarea { +taro-input-core, +taro-textarea-core { font: inherit; } .nut-input { position: relative; width: 100%; - padding: 10px 25px; + padding: 0.25rem 0.625rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - line-height: 20px; + line-height: 0.5rem; background: var(--nut-white, #fff); - font-size: var(--nut-input-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-input-font-size, var(--nut-font-size-2, 0.35rem)); + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-input.center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-input--border { - border-bottom: 1px solid var(--nut-input-border-bottom, #eaf0fb); + border-bottom: 0.025rem solid var(--nut-input-border-bottom, #eaf0fb); } .nut-input .input-text, .nut-input__text--readonly { @@ -2601,30 +3209,42 @@ textarea { text-decoration: none; background: transparent; resize: none; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-input .input-text { - font-size: var(--nut-input-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-input-font-size, var(--nut-font-size-2, 0.35rem)); } .nut-input__label { - width: 80px; + width: 2rem; overflow: hidden; - margin-right: 6px; + margin-right: 0.15rem; text-align: left; } .nut-input-value { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; vertical-align: middle; } .nut-input-inner { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-input-box { position: relative; width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-input-disabled-mask { @@ -2636,51 +3256,79 @@ textarea { z-index: 2; } .nut-input-word-limit { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; color: gray; - font-size: 12px; - padding: 0 10px; + font-size: 0.3rem; + padding: 0 0.25rem; } .nut-input-left-box, .nut-input-right-box { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-input-right-box { - margin-left: 4px; + margin-left: 0.1rem; } .nut-input-left-box { - margin-right: 4px; + margin-right: 0.1rem; } .nut-input-clear-box { height: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-input-clear { - width: 16px; - height: 16px; + width: 0.4rem; + height: 0.4rem; color: #c8c9cc; cursor: pointer; - margin: 0 4px; + margin: 0 0.1rem; } .nut-input--required::before { position: absolute; - left: 14px; + left: 0.35rem; color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); content: '*'; } .nut-input--disabled { color: var(--nut-input-disabled-color, #c8c9cc) !important; } -.nut-input--disabled input:disabled { +.nut-input--disabled taro-input-core:disabled { background: none; color: var(--nut-input-disabled-color, #c8c9cc); cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--nut-input-disabled-color, #c8c9cc); } +.nut-input--error::-webkit-input-placeholder { + color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); + -webkit-text-fill-color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); +} +.nut-input--error::-moz-placeholder { + color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); + -webkit-text-fill-color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); +} +.nut-input--error:-ms-input-placeholder { + color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); + -webkit-text-fill-color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); +} +.nut-input--error::-ms-input-placeholder { + color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); + -webkit-text-fill-color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); +} .nut-input--error, .nut-input--error::placeholder { color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); @@ -2697,6 +3345,12 @@ textarea { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-theme-dark .nut-picker-roller-mask { + background-image: + -webkit-gradient(linear, left top, left bottom, from(#1b1b1be6), to(#1b1b1b66)), + -webkit-gradient(linear, left bottom, left top, from(#1b1b1be6), to(#1b1b1b66)); + background-image: + -webkit-linear-gradient(top, #1b1b1be6, #1b1b1b66), + -webkit-linear-gradient(bottom, #1b1b1be6, #1b1b1b66); background-image: linear-gradient(180deg, #1b1b1be6, #1b1b1b66), linear-gradient(0deg, #1b1b1be6, #1b1b1b66); background-repeat: no-repeat; background-position: top, bottom; @@ -2709,37 +3363,57 @@ textarea { .nut-picker { position: relative; background: #fff; - border-radius: 5px; + border-radius: 0.125rem; } .nut-picker__bar { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - height: 46px; + height: 1.15rem; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-picker__left { cursor: pointer; - padding: var(--nut-picker-bar-button-padding, 0 15px); + padding: var(--nut-picker-bar-button-padding, 0 0.375rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - min-width: 50px; + min-width: 1.25rem; height: 100%; color: var(--nut-picker-cancel-color, #808080); - font-size: var(--nut-picker-bar-cancel-font-size, 14px); + font-size: var(--nut-picker-bar-cancel-font-size, 0.35rem); } .nut-picker__right { cursor: pointer; - padding: var(--nut-picker-bar-button-padding, 0 15px); + padding: var(--nut-picker-bar-button-padding, 0 0.375rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - min-width: 50px; + min-width: 1.25rem; height: 100%; color: var(--nut-picker-ok-color, var(--nut-primary-color, #fa2c19)); - font-size: var(--nut-picker-bar-ok-font-size, 14px); + font-size: var(--nut-picker-bar-ok-font-size, 0.35rem); } .nut-picker__column { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: relative; } @@ -2749,21 +3423,32 @@ textarea { top: 50%; height: var(--lineHeight); width: 100%; - border: var(--nut-picker-item-active-line-border, 1px solid #eae7e7); + border: var(--nut-picker-item-active-line-border, 0.025rem solid #eae7e7); border-left: 0; border-right: 0; + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); transform: scale(0.9); + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-picker__columnitem { width: 0; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; flex-grow: 1; height: 100%; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; + cursor: -webkit-grab; cursor: grab; } .nut-picker__title { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; width: 100%; overflow: hidden; @@ -2771,7 +3456,7 @@ textarea { white-space: nowrap; text-align: center; color: var(--nut-picker-bar-title-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-picker-bar-title-font-size, 16px); + font-size: var(--nut-picker-bar-title-font-size, 0.4rem); font-weight: var(--nut-picker-bar-title-font-weight, normal); } .nut-picker__wrapper { @@ -2793,7 +3478,10 @@ textarea { width: 100%; height: var(--lineHeight); z-index: 1; + -webkit-transform-style: preserve-3d; transform-style: preserve-3d; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-picker-roller-item { @@ -2804,10 +3492,10 @@ textarea { position: absolute; top: 0; width: 100%; - height: var(--nut-picker-item-height, 36px); - line-height: var(--nut-picker-item-height, 36px); + height: var(--nut-picker-item-height, 0.9rem); + line-height: var(--nut-picker-item-height, 0.9rem); color: var(--nut-picker-item-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-picker-item-text-font-size, 14px); + font-size: var(--nut-picker-item-text-font-size, 0.35rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -2822,7 +3510,7 @@ textarea { text-align: center; width: 100%; color: var(--nut-picker-item-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-picker-item-text-font-size, 14px); + font-size: var(--nut-picker-item-text-font-size, 0.35rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -2832,9 +3520,16 @@ textarea { width: 100%; display: block; height: 100%; + background-image: + -webkit-gradient(linear, left top, left bottom, from(#ffffffe6), to(#fff6)), + -webkit-gradient(linear, left bottom, left top, from(#ffffffe6), to(#fff6)); + background-image: + -webkit-linear-gradient(top, #ffffffe6, #fff6), + -webkit-linear-gradient(bottom, #ffffffe6, #fff6); background-image: linear-gradient(180deg, #ffffffe6, #fff6), linear-gradient(0deg, #ffffffe6, #fff6); background-repeat: no-repeat; background-position: top, bottom; + -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 1; } @@ -2853,6 +3548,7 @@ textarea { } .nut-theme-dark .nut-short-password-wrapper .nut-short-password__list .nut-short-password__item::after { position: absolute; + -webkit-box-sizing: border-box; box-sizing: border-box; content: ' '; pointer-events: none; @@ -2860,64 +3556,82 @@ textarea { right: -50%; bottom: -50%; left: -50%; - outline: 1px solid #3a3a3c; + outline: 0.025rem solid #3a3a3c; + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); transform: scale(0.5); } .nut-short-password-title { line-height: 1; - font-size: var(--nut-font-size-3, 16px); + font-size: var(--nut-font-size-3, 0.4rem); color: var(--nut-title-color, #1a1a1a); } .nut-short-password-subtitle { display: block; - margin-top: 12px; + margin-top: 0.3rem; line-height: 1; - font-size: var(--nut-font-size-1, 12px); + font-size: var(--nut-font-size-1, 0.3rem); color: var(--nut-text-color, #808080); } .nut-short-password-wrapper { - padding: 12px 0 10px; + padding: 0.3rem 0 0.25rem; text-align: center; position: relative; } .nut-short-password__list { width: 100%; - height: 41px; + height: 1.025rem; margin: 0 auto; background: var(--nut-shortpassword-background-color, rgb(245, 245, 245)); - border-radius: 4px; - border: 1px solid var(--nut-shortpassword-border-color, #ddd); + border-radius: 0.1rem; + border: 0.025rem solid var(--nut-shortpassword-border-color, #ddd); + display: -webkit-flex; + display: -ms-flexbox; display: flex; z-index: 10; } .nut-short-password__item { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-short-password__item-icon { - height: 6px; - width: 6px; + height: 0.15rem; + width: 0.15rem; border-radius: 50%; background: #000; display: inline-block; } .nut-short-password__message { - margin-top: 9px; + margin-top: 0.225rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; - width: 247px; + width: 6.175rem; } .nut-short-password__message .nut-short-password--error { line-height: 1; - font-size: var(--nut-font-size-0, 10px); + font-size: var(--nut-font-size-0, 0.25rem); color: var(--nut-shortpassword-error, var(--nut-primary-color, #fa2c19)); } .nut-short-password__message .nut-short-password--forget { line-height: 1; - font-size: var(--nut-font-size-1, 12px); + font-size: var(--nut-font-size-1, 0.3rem); color: var(--nut-shortpassword-forget, rgb(128, 128, 128)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-theme-dark .nut-textarea { @@ -2929,11 +3643,14 @@ textarea { .nut-textarea { position: relative; width: 100%; + -webkit-box-sizing: border-box; box-sizing: border-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; background: var(--nut-white, #fff); - font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14px)); - padding: 10px 25px; + font-size: var(--nut-textarea-font, var(--nut-font-size-2, 0.35rem)); + padding: 0.25rem 0.625rem; } .nut-textarea--disabled .nut-textarea__textarea, .nut-textarea--disabled .nut-textarea__limit { @@ -2942,42 +3659,43 @@ textarea { } .nut-textarea__limit { position: absolute; - right: 15px; - bottom: 12px; - font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14px)); + right: 0.375rem; + bottom: 0.3rem; + font-size: var(--nut-textarea-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-textarea-limit-color, var(--nut-text-color, #808080)); } .nut-textarea__textarea { outline: none; display: block; + -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0; - font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14px)); + font-size: var(--nut-textarea-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-textarea-text-color, var(--nut-title-color, #1a1a1a)); text-align: left; background-color: transparent; border: none; resize: none; - line-height: 20px; + line-height: 0.5rem; } .nut-textarea__textarea .taro-textarea { - font-size: 14px; + font-size: 0.35rem; resize: none; } .nut-textarea__textarea__readonly { - padding: 5px 10px; + padding: 0.125rem 0.25rem; } .nut-textarea__ali { - line-height: 17px; + line-height: 0.425rem; } .nut-textarea .nut-textarea__cpoyText { position: absolute; - top: -999999px; - left: -999999px; - font-size: 14px; + top: -24999.975rem; + left: -24999.975rem; + font-size: 0.35rem; line-height: 1.5; } .nut-theme-dark .nut-uploader__preview-list { @@ -2989,7 +3707,11 @@ textarea { } .nut-uploader { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-uploader__slot { @@ -2998,10 +3720,16 @@ textarea { .nut-uploader__upload { position: relative; background: var(--nut-uploader-background, #f7f8fa); - width: var(--nut-uploader-picture-width, 100px); - height: var(--nut-uploader-picture-height, 100px); + width: var(--nut-uploader-picture-width, 2.5rem); + height: var(--nut-uploader-picture-height, 2.5rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-uploader__input { @@ -3019,12 +3747,19 @@ textarea { cursor: not-allowed !important; } .nut-uploader__preview { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - margin-right: 10px; - margin-bottom: 10px; - box-shadow: 0 2px 10px #0000001a; + margin-right: 0.25rem; + margin-bottom: 0.25rem; + -webkit-box-shadow: 0 0.05rem 0.25rem #0000001a; + box-shadow: 0 0.05rem 0.25rem #0000001a; } .nut-uploader__preview__progress { position: absolute; @@ -3033,38 +3768,54 @@ textarea { width: 100%; height: 100%; background: #0009; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-uploader__preview__progress__msg { color: var(--nut-white, #fff); - font-size: 12px; - margin-top: 6px; + font-size: 0.3rem; + margin-top: 0.15rem; } .nut-uploader__preview.list { width: 100%; margin-right: 0; margin-bottom: 0; - margin-top: 10px; + margin-top: 0.25rem; } .nut-uploader__preview-list { width: 100%; - height: 32px; + height: 0.8rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; position: relative; } .nut-uploader__preview-list .nut-uploader__preview-img__file__name { - padding: 2px 4px; + padding: 0.05rem 0.1rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; height: 100%; } .nut-uploader__preview-list .nut-uploader__preview-img__file__name .file__name_tips { - margin-left: 4px; - padding: 0 20px; + margin-left: 0.1rem; + padding: 0 0.5rem; width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -3072,13 +3823,13 @@ textarea { } .nut-uploader__preview-list .nut-uploader__preview-img__file__del { position: absolute; - right: 6px; - top: 6px; + right: 0.15rem; + top: 0.15rem; } .nut-uploader__preview-list .nut-uploader__preview-img__file__link { position: absolute; - left: 6px; - top: 8px; + left: 0.15rem; + top: 0.2rem; } .nut-uploader__preview-list .nut-progress { position: absolute; @@ -3087,22 +3838,30 @@ textarea { bottom: 0; } .nut-uploader__preview-list .nut-progress .nut-progress-outer { - height: 2px !important; + height: 0.05rem !important; } .nut-uploader__preview-img { position: relative; - width: var(--nut-uploader-picture-width, 100px); - height: var(--nut-uploader-picture-height, 100px); + width: var(--nut-uploader-picture-width, 2.5rem); + height: var(--nut-uploader-picture-height, 2.5rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - border-radius: 6px; + border-radius: 0.15rem; } .nut-uploader__preview-img .close { position: absolute; right: 0; top: 0; color: #0009; + -webkit-transform: translate(50%, -50%); + -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } .nut-uploader__preview-img .tips { @@ -3111,12 +3870,19 @@ textarea { left: 0; right: 0; text-align: center; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - font-size: 12px; + font-size: 0.3rem; color: var(--nut-white, #fff); - height: 0px; + height: 0rem; + -webkit-transition: height 0.3s; transition: height 0.3s; background: #0000008a; width: 100%; @@ -3127,25 +3893,37 @@ textarea { .nut-uploader__preview-img__c { max-width: 100%; max-height: 100%; - border-radius: 6px; + border-radius: 0.15rem; } .nut-uploader__preview-img__file { height: 100%; width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-transition: all 0.3s; transition: all 0.3s; } .nut-uploader__preview-img__file__name { + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; - font-size: 12px; + font-size: 0.3rem; color: var(--nut-text-color, #808080); - padding: 10px; + padding: 0.25rem; height: 100%; overflow: hidden; + -webkit-box-sizing: border-box; box-sizing: border-box; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-uploader__preview-img__file__name.error { @@ -3163,21 +3941,30 @@ textarea { } .nut-number-keyboard { width: var(--nut-numberkeyboard-width, 100%); - padding: var(--nut-numberkeyboard-padding, 0 0 22px 0); + padding: var(--nut-numberkeyboard-padding, 0 0 0.55rem 0); background-color: var(--nut-numberkeyboard-background-color, #f2f3f5); -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; } .nut-number-keyboard .nut-number-keyboard__header { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-box-sizing: content-box; box-sizing: content-box; - height: var(--nut-numberkeyboard-header-height, 34px); - padding: var(--nut-numberkeyboard-header-padding, 6px 0 0 0); + height: var(--nut-numberkeyboard-header-height, 0.85rem); + padding: var(--nut-numberkeyboard-header-padding, 0.15rem 0 0 0); color: var(--nut-numberkeyboard-header-color, #646566); - font-size: var(--nut-numberkeyboard-header-font-size, 16px); + font-size: var(--nut-numberkeyboard-header-font-size, 0.4rem); } .nut-number-keyboard .nut-number-keyboard__header .nut-number-keyboard__title { display: inline-block; @@ -3186,37 +3973,51 @@ textarea { position: absolute; display: block; right: 0; - padding: var(--nut-numberkeyboard-header-close-padding, 0 16px); + padding: var(--nut-numberkeyboard-header-close-padding, 0 0.4rem); color: var(--nut-numberkeyboard-header-close-color, #576b95); - font-size: var(--nut-numberkeyboard-header-close-font-size, 14px); + font-size: var(--nut-numberkeyboard-header-close-font-size, 0.35rem); background-color: var(--nut-numberkeyboard-header-close-background-color, transparent); border: none; cursor: pointer; } .nut-number-keyboard .nut-number-keyboard__body { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - padding: 6px 0 0 6px; + padding: 0.15rem 0 0 0.15rem; } .nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__keys { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex: 3; + -ms-flex: 3; flex: 3; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar .nut-key__wrapper .nut-key { position: absolute; top: 0; - right: 6px; - bottom: 6px; + right: 0.15rem; + bottom: 0.15rem; left: 0; height: auto; } .nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar .nut-key__wrapper .nut-key--finish { - font-size: var(--nut-numberkeyboard-key-finish-font-size, 16px); + font-size: var(--nut-numberkeyboard-key-finish-font-size, 0.4rem); color: var(--nut-numberkeyboard-key-finish-font-size-color, #fff); background-color: var(--nut-numberkeyboard-key-finish-background-color, #1989fa); } @@ -3225,41 +4026,54 @@ textarea { } .nut-key__wrapper { position: relative; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + -webkit-flex-basis: 33%; + -ms-flex-preferred-size: 33%; flex-basis: 33%; + -webkit-box-sizing: border-box; box-sizing: border-box; - padding: 0 6px 6px 0; + padding: 0 0.15rem 0.15rem 0; } .nut-key__wrapper.nut-key__wrapper--wider { + -webkit-flex-basis: 66%; + -ms-flex-preferred-size: 66%; flex-basis: 66%; } .nut-key__wrapper .nut-key { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - height: var(--nut-numberkeyboard-key-height, 48px); - font-size: var(--nut-numberkeyboard-key-font-size, 28px); + height: var(--nut-numberkeyboard-key-height, 1.2rem); + font-size: var(--nut-numberkeyboard-key-font-size, 0.7rem); line-height: var(--nut-numberkeyboard-key-line-height, 1.5); background-color: var(--nut-numberkeyboard-key-background-color, #fff); color: var(--nut-numberkeyboard-key-font-size-color, #333); - border-radius: var(--nut-numberkeyboard-key-border-radius, 8px); + border-radius: var(--nut-numberkeyboard-key-border-radius, 0.2rem); cursor: pointer; } .nut-key__wrapper .nut-key--active { background-color: var(--nut-numberkeyboard-key-active-background-color, #ebedf0); } .nut-key__wrapper img { - width: 30px; - height: 24px; + width: 0.75rem; + height: 0.6rem; } .nut-number-keyboard-overlay { background-color: #0000 !important; } .nut-theme-dark .nut-action-sheet .nut-action-sheet__cancel { - border-top: 1px solid var(--nut-dark-background2, #1b1b1b); + border-top: 0.025rem solid var(--nut-dark-background2, #1b1b1b); } .nut-theme-dark .nut-action-sheet .nut-action-sheet__title { - border-bottom: 1px solid var(--nut-dark-background2, #1b1b1b); + border-bottom: 0.025rem solid var(--nut-dark-background2, #1b1b1b); } .nut-theme-dark .nut-action-sheet .nut-action-sheet__cancel, .nut-theme-dark .nut-action-sheet .nut-action-sheet__item, @@ -3272,12 +4086,12 @@ textarea { } .nut-action-sheet .nut-action-sheet__title { display: block; - padding: 10px; + padding: 0.25rem; margin: 0; text-align: center; background-color: var(--nut-white, #fff); - border-bottom: 1px solid var(--nut-actionsheet-light-color, #f6f6f6); - font-size: var(--nut-font-size-base, var(--nut-font-size-2, 14px)); + border-bottom: 0.025rem solid var(--nut-actionsheet-light-color, #f6f6f6); + font-size: var(--nut-font-size-base, var(--nut-font-size-2, 0.35rem)); color: var(--nut-title-color, #1a1a1a); } .nut-action-sheet .nut-action-sheet__menu { @@ -3289,9 +4103,9 @@ textarea { .nut-action-sheet .nut-action-sheet__cancel, .nut-action-sheet .nut-action-sheet__item { display: block; - padding: 10px; - line-height: var(--nut-actionsheet-item-line-height, 24px); - font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 14px)); + padding: 0.25rem; + line-height: var(--nut-actionsheet-item-line-height, 0.6rem); + font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-actionsheet-item-font-color, var(--nut-title-color, #1a1a1a)); text-align: center; background-color: #fff; @@ -3299,13 +4113,13 @@ textarea { cursor: pointer; } .nut-action-sheet .nut-action-sheet__desc { - font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 0.35rem)); color: #999; cursor: default; } .nut-action-sheet .nut-action-sheet__subdesc { display: block; - font-size: var(--nut-actionsheet-item-subdesc-font-size, var(--nut-font-size-1, 12px)); + font-size: var(--nut-actionsheet-item-subdesc-font-size, var(--nut-font-size-1, 0.3rem)); color: #999; } .nut-action-sheet .nut-action-sheet__item--disabled { @@ -3316,8 +4130,8 @@ textarea { cursor: default; } .nut-action-sheet .nut-action-sheet__cancel { - margin-top: 5px; - border-top: var(--nut-actionsheet-item-cancel-border-top, 1px solid var(--nut-actionsheet-light-color, #f6f6f6)); + margin-top: 0.125rem; + border-top: var(--nut-actionsheet-item-cancel-border-top, 0.025rem solid var(--nut-actionsheet-light-color, #f6f6f6)); } .nut-theme-dark .nut-backtop.show { background: var(--nut-dark-background, #131313); @@ -3328,26 +4142,37 @@ textarea { position: fixed; } .nut-backtop.show { - width: 40px; - height: 40px; + width: 1rem; + height: 1rem; background: var(--nut-white, #fff); - border: 1px solid var(--nut-backtop-border-color, #e0e0e0); + border: 0.025rem solid var(--nut-backtop-border-color, #e0e0e0); border-radius: 50%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-backtop.show :active { background: #0000001a; } .nut-backtop-main { + -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .nut-drag { position: fixed; display: inline-block; z-index: 9997 !important; + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; + height: -webkit-fit-content; + height: -moz-fit-content; height: fit-content; } .nut-drag .nut-fixed-nav { @@ -3356,26 +4181,37 @@ textarea { .nut-taro-drag { display: inline-block; z-index: 9997 !important; + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; + height: -webkit-fit-content; + height: -moz-fit-content; height: fit-content; } .nut-theme-dark .nut-dialog__header { color: var(--nut-dark-color3, rgba(232, 230, 227, 0.8)); } .nut-dialog { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - width: var(--nut-dialog-width, 296px); - min-height: 156px; - padding: 28px 24px 16px; + width: var(--nut-dialog-width, 7.4rem); + min-height: 3.9rem; + padding: 0.7rem 0.6rem 0.4rem; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-dialog__header { display: block; text-align: center; - height: 20px; - font-size: 16px; + height: 0.5rem; + font-size: 0.4rem; color: var(--nut-dialog-header-color, rgb(38, 38, 38)); font-weight: var(--nut-dialog-header-font-weight, normal); width: 100%; @@ -3386,23 +4222,33 @@ textarea { .nut-dialog__content { width: 100%; overflow: auto; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - margin: 20px 0; - max-height: 268px; - line-height: 16px; - font-size: 12px; + margin: 0.5rem 0; + max-height: 6.7rem; + line-height: 0.4rem; + font-size: 0.3rem; color: var(--nut-text-color, #808080); word-wrap: break-word; word-break: break-all; white-space: pre-wrap; } .nut-dialog__footer { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: 100%; + -webkit-justify-content: var(--nut-dialog-footer-justify-content, space-around); + -ms-flex-pack: var(--nut-dialog-footer-justify-content, space-around); justify-content: var(--nut-dialog-footer-justify-content, space-around); } .nut-dialog__footer.vertical { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-dialog__footer.vertical .nut-button { @@ -3413,14 +4259,14 @@ textarea { border: 0; } .nut-dialog__footer.vertical .nut-button.nut-dialog__footer-ok { - margin-top: 10px; + margin-top: 0.25rem; } .nut-dialog__footer .nut-button { - min-width: 100px; + min-width: 2.5rem; overflow: hidden; } .nut-dialog__footer-ok { - max-width: 128px; + max-width: 3.2rem; } .nut-theme-dark .nut-infinite-loading .nut-infinite__bottom, .nut-theme-dark .nut-infinite-loading .nut-infinite__bottom .bottom-text { @@ -3433,24 +4279,30 @@ textarea { .nut-infinite-loading .nut-infinite__bottom { display: block; width: 100%; - height: 50px; - line-height: 50px; - font-size: var(--nut-font-size-small, var(--nut-font-size-1, 12px)); + height: 1.25rem; + line-height: 1.25rem; + font-size: var(--nut-font-size-small, var(--nut-font-size-1, 0.3rem)); color: var(--nut-infiniteloading-bottom-color, #c8c8c8); text-align: center; } .nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box__img { - margin-right: 5px; - width: 15px; - height: 15px; + margin-right: 0.125rem; + width: 0.375rem; + height: 0.375rem; } .nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box__text { - font-size: 12px; + font-size: 0.3rem; color: var(--nut-text-color, #808080); } .nut-pull-refresh { @@ -3465,25 +4317,34 @@ textarea { position: absolute; left: 0; width: 100%; - height: 50px; + height: 1.25rem; + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); transform: translateY(-100%); text-align: center; - font-size: 14px; + font-size: 0.35rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-pull-refresh-container-topbox-icon { - margin-right: 4px; - width: 16px; - height: 16px; + margin-right: 0.1rem; + width: 0.4rem; + height: 0.4rem; } .nut-pull-refresh-container-topbox-text { - font-size: var(--nut-font-size-2, 14px); + font-size: var(--nut-font-size-2, 0.35rem); color: var(--nut-text-color, #808080); } .nut-fade-enter-active, .nut-fade-leave-active { + -webkit-transition: opacity 1s; transition: opacity 1s; } .nut-fade-enter-from, @@ -3493,14 +4354,15 @@ textarea { .nut-notify { display: block; width: 100%; + -webkit-box-sizing: border-box; box-sizing: border-box; - padding: var(--nut-notify-padding, 12px 0); + padding: var(--nut-notify-padding, 0.3rem 0); color: var(--nut-notify-text-color, var(--nut-white, #fff)); - font-size: var(--nut-notify-font-size, 14px); + font-size: var(--nut-notify-font-size, 0.35rem); white-space: pre-wrap; text-align: center; word-wrap: break-word; - height: var(--nut-notify-height, 44px); + height: var(--nut-notify-height, 1.1rem); line-height: var(--nut-notify-line-height, auto); } .nut-notify--base { @@ -3518,64 +4380,97 @@ textarea { .nut-notify--warning { background: var(--nut-notify-warning-background-color, linear-gradient(135deg, rgb(255, 93, 13) 0%, rgb(255, 154, 13) 100%)); } -.nut-notify view { +.nut-notify taro-view-core { width: 100%; text-align: center; } .nut-switch { cursor: pointer; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; background-color: var(--nut-primary-color, #fa2c19); - border-radius: var(--nut-switch-border-radius, 21px); + border-radius: var(--nut-switch-border-radius, 0.525rem); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; flex: 0 0 auto; } .nut-switch .nut-icon-loading1 { - width: 12px; - height: 12px; - font-size: 12px; + width: 0.3rem; + height: 0.3rem; + font-size: 0.3rem; } .nut-switch.nut-switch-close { background-color: var(--nut-switch-close-bg-color, #ebebeb); } .nut-switch .nut-switch-button { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; border-radius: 50%; background: var(--nut-white, #fff); + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; transition: transform 0.3s; + transition: + transform 0.3s, + -webkit-transform 0.3s; } .nut-switch .nut-switch-button .nut-switch-label { color: var(--nut-white, #fff); - font-size: var(--nut-font-size-1, 12px); + font-size: var(--nut-font-size-1, 0.3rem); } .nut-switch .nut-switch-button .nut-switch-label.open { - transform: translate(-16px); + -webkit-transform: translate(-0.4rem); + -ms-transform: translate(-0.4rem); + transform: translate(-0.4rem); } .nut-switch .nut-switch-button .nut-switch-label.close { - transform: translate(16px); + -webkit-transform: translate(0.4rem); + -ms-transform: translate(0.4rem); + transform: translate(0.4rem); } .nut-switch.nut-switch-disabled { opacity: 0.6; } .nut-switch.nut-switch-base { - min-width: var(--nut-switch-width, 36px); - height: var(--nut-switch-height, 21px); - line-height: var(--nut-switch-line-height, 21px); + min-width: var(--nut-switch-width, 0.9rem); + height: var(--nut-switch-height, 0.525rem); + line-height: var(--nut-switch-line-height, 0.525rem); overflow: hidden; } .nut-switch.nut-switch-base .nut-switch-button { - height: var(--nut-switch-inside-height, 13px); - width: var(--nut-switch-inside-width, 13px); + height: var(--nut-switch-inside-height, 0.325rem); + width: var(--nut-switch-inside-width, 0.325rem); + -webkit-transform: var(--nut-switch-inside-close-transform, translateX(30%)); + -ms-transform: var(--nut-switch-inside-close-transform, translateX(30%)); transform: var(--nut-switch-inside-close-transform, translateX(30%)); } .nut-switch.nut-switch-base.nut-switch-open .nut-switch-button { + -webkit-transform: var(--nut-switch-inside-open-transform, translateX(146%)); + -ms-transform: var(--nut-switch-inside-open-transform, translateX(146%)); transform: var(--nut-switch-inside-open-transform, translateX(146%)); } +@-webkit-keyframes rotation { + 0% { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + } +} @keyframes rotation { 0% { -webkit-transform: rotate(0deg); @@ -3587,7 +4482,7 @@ textarea { .nut-toast { position: fixed; left: 0; - bottom: 150px; + bottom: 3.75rem; width: 100%; text-align: center; pointer-events: none; @@ -3595,14 +4490,20 @@ textarea { font-family: var(--nut-font-family, PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif); } .nut-toast-small .nut-toast-inner { - font-size: var(--nut-font-size-small, var(--nut-font-size-1, 12px)); + font-size: var(--nut-font-size-small, var(--nut-font-size-1, 0.3rem)); } .nut-toast-large .nut-toast-inner { - font-size: var(--nut-font-size-large, var(--nut-font-size-3, 16px)); + font-size: var(--nut-font-size-large, var(--nut-font-size-3, 0.4rem)); } .nut-toast-cover { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; pointer-events: auto; height: 100%; @@ -3610,53 +4511,72 @@ textarea { } .nut-toast-inner { display: inline-block; - font-size: var(--nut-toast-text-font-size, 14px); + font-size: var(--nut-toast-text-font-size, 0.35rem); min-width: 40%; max-width: 65%; text-align: center; - padding: var(--nut-toast-inner-padding, 24px 30px); + padding: var(--nut-toast-inner-padding, 0.6rem 0.75rem); word-break: break-all; background: var(--nut-toast-inner-bg-color, rgba(0, 0, 0, 0.8)); - border-radius: var(--nut-toast-inner-border-radius, 12px); + border-radius: var(--nut-toast-inner-border-radius, 0.3rem); color: var(--nut-toast-font-color, var(--nut-white, #fff)); } .nut-toast-text { - font-size: var(--nut-toast-text-font-size, 14px); + font-size: var(--nut-toast-text-font-size, 0.35rem); } .nut-toast-text:empty { - margin-bottom: -8px; + margin-bottom: -0.2rem; } .nut-toast-title { - font-size: var(--nut-toast-title-font-size, 16px); + font-size: var(--nut-toast-title-font-size, 0.4rem); } .nut-toast-title:empty { - margin-bottom: -8px; + margin-bottom: -0.2rem; } .nut-toast-has-icon .nut-toast-icon-wrapper { width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - margin-bottom: 8px; + margin-bottom: 0.2rem; } .nut-toast-center { top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-toast-loading .nut-toast-inner { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-toast-loading .nut-toast-icon-wrapper { + -webkit-animation: rotation 2s linear infinite; animation: rotation 2s linear infinite; } .nut-toast-loading .nut-toast-icon-no-animation { + -webkit-animation: none; animation: none; } .toast-fade-enter-active, .toast-fade-leave-active { + -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .toast-fade-enter-from, @@ -3675,26 +4595,34 @@ textarea { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-range-container { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: relative; width: 100%; - height: 4px; + height: 0.1rem; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-range-container .nut-range-min, .nut-range-container .nut-range-max { - font-size: var(--nut-font-size-1, 12px); + font-size: var(--nut-font-size-1, 0.3rem); color: var(--nut-range-tip-font-color, #333333); -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; } .nut-range-container-vertical { height: 100%; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; - padding: 0 15px; + padding: 0 0.375rem; } .nut-range-container-vertical .nut-range { - width: 4px; + width: 0.1rem; height: 100%; } .nut-range-container-vertical .nut-range-button-wrapper, @@ -3704,41 +4632,48 @@ textarea { bottom: 0; left: 50%; right: initial; + -webkit-transform: translate3d(-50%, 50%, 0); transform: translate3d(-50%, 50%, 0); } .nut-range-container-vertical .nut-range-button-wrapper-left { top: 0; left: 50%; right: initial; + -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .nut-range-container-vertical .nut-range .number { + -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .nut-range-container-vertical .nut-range-vertical { - margin: 10px 0; + margin: 0.25rem 0; } .nut-range-container-vertical .nut-range-mark { position: absolute; width: 100%; right: 50%; overflow: visible; - font-size: 12px; + font-size: 0.3rem; height: 100%; top: initial; - width: 36px; + width: 0.9rem; padding: 0; } .nut-range-container-vertical .nut-range-mark-text { - width: 20px; + width: 0.5rem; position: absolute; display: inline-block; - line-height: 16px; + line-height: 0.4rem; color: #999; text-align: center; word-break: keep-all; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-range-container-vertical .nut-range-mark-text-active .nut-range-tick { @@ -3747,9 +4682,9 @@ textarea { .nut-range-container-vertical .nut-range-tick { position: absolute; top: 0; - left: 30px; - width: 11px; - height: 11px; + left: 0.75rem; + width: 0.275rem; + height: 0.275rem; margin-left: 0; border-radius: 50%; background-color: var(--nut-range-bg-color-tick, #fa958c); @@ -3758,8 +4693,8 @@ textarea { display: block; position: relative; width: 100%; - height: 4px; - border-radius: 2px; + height: 0.1rem; + border-radius: 0.05rem; cursor: pointer; } .nut-range::before { @@ -3781,16 +4716,18 @@ textarea { height: 100%; background: var(--nut-range-bar-bg-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); border-radius: inherit; + -webkit-transition: all 0.2s; transition: all 0.2s; } .nut-range-button { display: block; - width: var(--nut-range-bar-btn-width, 24px); - height: var(--nut-range-bar-btn-height, 24px); + width: var(--nut-range-bar-btn-width, 0.6rem); + height: var(--nut-range-bar-btn-height, 0.6rem); background-color: var(--nut-range-bar-btn-bg-color, var(--nut-white, #fff)); border-radius: 50%; - box-shadow: 0 1px 2px #00000026; - border: var(--nut-range-bar-btn-border, 1px solid var(--nut-primary-color, #fa2c19)); + -webkit-box-shadow: 0 0.025rem 0.05rem #00000026; + box-shadow: 0 0.025rem 0.05rem #00000026; + border: var(--nut-range-bar-btn-border, 0.025rem solid var(--nut-primary-color, #fa2c19)); outline: none; } .nut-range-button-wrapper, @@ -3798,7 +4735,9 @@ textarea { position: absolute; top: 50%; right: 0; + -webkit-transform: translate3d(50%, -50%, 0); transform: translate3d(50%, -50%, 0); + cursor: -webkit-grab; cursor: grab; outline: none; } @@ -3806,20 +4745,31 @@ textarea { position: absolute; top: 50%; left: 0; + -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); + cursor: -webkit-grab; cursor: grab; outline: none; } .nut-range-button .number { width: 100%; height: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; - font-size: var(--nut-font-size-1, 12px); + font-size: var(--nut-font-size-1, 0.3rem); color: var(--nut-range-tip-font-color, #333333); + -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .nut-range-disabled { @@ -3832,25 +4782,29 @@ textarea { cursor: not-allowed; } .nut-range-show-number { - margin: 0 15px; + margin: 0 0.375rem; } .nut-range-mark { position: absolute; width: 100%; overflow: visible; top: 50%; - font-size: 12px; - padding-top: 14px; + font-size: 0.3rem; + padding-top: 0.35rem; } .nut-range-mark-text { position: absolute; display: inline-block; - line-height: 16px; + line-height: 0.4rem; color: #999; text-align: center; word-break: keep-all; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); } .nut-range-mark-text-active .nut-range-tick { @@ -3858,9 +4812,9 @@ textarea { } .nut-range-tick { position: absolute; - top: -20px; - width: 11px; - height: 11px; + top: -0.5rem; + width: 0.275rem; + height: 0.275rem; left: 0; border-radius: 50%; background-color: var(--nut-range-bg-color-tick, #fa958c); @@ -3872,19 +4826,25 @@ textarea { padding: 0; } .nut-audio .nut-audio__progress { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: 100%; margin: 0 auto; - padding: 10px 0; + padding: 0.25rem 0; } .nut-audio .nut-audio__progress .nut-audio__bar { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - margin: 0 10px; + margin: 0 0.25rem; } .nut-audio .nut-audio__progress .nut-audio__time { - min-width: 50px; - font-size: 12px; + min-width: 1.25rem; + font-size: 0.3rem; text-align: center; } .nut-audio .nut-audio__icon { @@ -3892,59 +4852,82 @@ textarea { display: inline-block; } .nut-audio .nut-audio__icon .nut-audio__icon--box { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - width: 30px; - height: 30px; + width: 0.75rem; + height: 0.75rem; background: #fff; border-radius: 50%; - box-shadow: 0 0 8px #80808080; + -webkit-box-shadow: 0 0 0.2rem #80808080; + box-shadow: 0 0 0.2rem #80808080; } .nut-audio .nut-audio__icon .nut-audio__icon--box.nut-audio__icon--stop::after { position: absolute; left: 50%; top: 50%; - transform: translate(-15px); + -webkit-transform: translate(-0.375rem); + -ms-transform: translate(-0.375rem); + transform: translate(-0.375rem); content: ''; - height: 2px; - width: 30px; + height: 0.05rem; + width: 0.75rem; background: var(--nut-disable-color, #cccccc); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); transform: rotate(45deg); - transform-origin: 8px -18px; + -webkit-transform-origin: 0.2rem -0.45rem; + -ms-transform-origin: 0.2rem -0.45rem; + transform-origin: 0.2rem -0.45rem; } .nut-audio .audioMain { - margin-top: 30px; + margin-top: 0.75rem; } .nut-audio .nut-audio__button--custom { - width: 8px; - height: 8px; + width: 0.2rem; + height: 0.2rem; color: #fff; - font-size: 10px; - line-height: 18px; + font-size: 0.25rem; + line-height: 0.45rem; text-align: center; background-color: #ee0a24; - border-radius: 100px; + border-radius: 2.5rem; } .nut-audio-operate-group { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - margin-top: 10px; + margin-top: 0.25rem; } .nut-audio-operate-group .nut-audio-operate .nut-audio-operate-item { - margin: 0 5px; + margin: 0 0.125rem; } .nut-avatar-group { background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: relative; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; flex: 0 0 auto; } .nut-avatar-group .nut-avatar { - border: 1px solid #fff; + border: 0.025rem solid #fff; } .nut-list { width: 100%; @@ -3973,32 +4956,50 @@ textarea { .nut-progress { width: 100%; position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-progress .nut-progress-outer { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; background-color: var(--nut-progress-outer-background-color, #f3f3f3); - border-radius: var(--nut-progress-outer-border-radius, 12px); - height: 10px; + border-radius: var(--nut-progress-outer-border-radius, 0.3rem); + height: 0.25rem; } .nut-progress .nut-progress-outer .nut-progress-inner { width: 30%; height: 100%; - border-radius: var(--nut-progress-outer-border-radius, 12px); + border-radius: var(--nut-progress-outer-border-radius, 0.3rem); background: var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); -webkit-transition: all 0.4s; transition: all 0.4s; } .nut-progress .nut-progress-outer .nut-progress-text { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; color: #fff; } .nut-progress .nut-progress-outer .nut-progress-slot { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-progress .nut-progress-outer .nut-active::before { @@ -4008,9 +5009,24 @@ textarea { left: 0; right: 0; bottom: 0; - border-radius: var(--nut-progress-outer-border-radius, 12px); + border-radius: var(--nut-progress-outer-border-radius, 0.3rem); + -webkit-animation: progressActive 2s ease-in-out infinite; animation: progressActive 2s ease-in-out infinite; } +@-webkit-keyframes progressActive { + 0% { + background: #ffffff1a; + width: 0; + } + 20% { + background: #ffffff80; + width: 0; + } + to { + background: #fff0; + width: 100%; + } +} @keyframes progressActive { 0% { background: #ffffff1a; @@ -4026,59 +5042,64 @@ textarea { } } .nut-progress .nut-progress-outer.nut-progress-small { - height: var(--nut-progress-small-height, 5px); + height: var(--nut-progress-small-height, 0.125rem); } .nut-progress .nut-progress-outer.nut-progress-small .nut-progress-text { - font-size: var(--nut-progress-small-text-font-size, 7px); - line-height: var(--nut-progress-small-text-line-height, 10px); - padding: var(--nut-progress-small-text-padding, 2px 4px); + font-size: var(--nut-progress-small-text-font-size, 0.175rem); + line-height: var(--nut-progress-small-text-line-height, 0.25rem); + padding: var(--nut-progress-small-text-padding, 0.05rem 0.1rem); top: 50%; } .nut-progress .nut-progress-outer.nut-progress-base { - height: var(--nut-progress-base-height, 10px); + height: var(--nut-progress-base-height, 0.25rem); } .nut-progress .nut-progress-outer.nut-progress-base .nut-progress-text { - font-size: var(--nut-progress-base-text-font-size, 9px); - line-height: var(--nut-progress-base-text-line-height, 13px); - padding: var(--nut-progress-base-text-padding, var(--nut-progress-insidetext-padding, 3px 5px 3px 6px)); + font-size: var(--nut-progress-base-text-font-size, 0.225rem); + line-height: var(--nut-progress-base-text-line-height, 0.325rem); + padding: var(--nut-progress-base-text-padding, var(--nut-progress-insidetext-padding, 0.075rem 0.125rem 0.075rem 0.15rem)); top: 50%; } .nut-progress .nut-progress-outer.nut-progress-large { - height: var(--nut-progress-large-height, 15px); + height: var(--nut-progress-large-height, 0.375rem); } .nut-progress .nut-progress-outer.nut-progress-large .nut-progress-text { - font-size: var(--nut-progress-large-text-font-size, 13px); - line-height: var(--nut-progress-large-text-line-height, 18px); - padding: var(--nut-progress-large-text-padding, var(--nut-progress-insidetext-padding, 3px 5px 3px 6px)); + font-size: var(--nut-progress-large-text-font-size, 0.325rem); + line-height: var(--nut-progress-large-text-line-height, 0.45rem); + padding: var(--nut-progress-large-text-padding, var(--nut-progress-insidetext-padding, 0.075rem 0.125rem 0.075rem 0.15rem)); top: 50%; } .nut-progress .nut-progress-outer-part { width: 90%; } .nut-progress .nut-progress-text { - padding: 0 5px; - font-size: 13px; + padding: 0 0.125rem; + font-size: 0.325rem; line-height: 1; - min-width: 35px; + min-width: 0.875rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-progress .nut-progress-insidetext { - padding: var(--nut-progress-insidetext-padding, 3px 5px 3px 6px); + padding: var(--nut-progress-insidetext-padding, 0.075rem 0.125rem 0.075rem 0.15rem); background: var( --nut-progress-insidetext-background, var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)) ); - border-radius: var(--nut-progress-insidetext-border-radius, 5px); + border-radius: var(--nut-progress-insidetext-border-radius, 0.125rem); position: absolute; + -webkit-transition: all 0.4s; transition: all 0.4s; top: 50%; - min-width: 0px; + min-width: 0rem; } .nut-progress .nut-icon-success, .nut-progress .nut-icon-fail { - width: 10px; - height: 10px; + width: 0.25rem; + height: 0.25rem; display: inline-block; } .nut-theme-dark .nut-circle-progress__text { @@ -4089,6 +5110,9 @@ textarea { } .nut-circle-progress__hover { stroke: var(--nut-circleprogress-primary-color, var(--nut-primary-color, #fa2c19)); + -webkit-transition: + stroke-dasharray 0.6s ease 0s, + stroke 0.6s ease 0s; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s; @@ -4100,12 +5124,15 @@ textarea { position: absolute; top: 50%; left: 0; + -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; color: var(--nut-circleprogress-text-color, #000000); - font-size: var(--nut-circleprogress-text-size, var(--nut-font-size-3, 16px)); + font-size: var(--nut-circleprogress-text-size, var(--nut-font-size-3, 0.4rem)); } .nut-theme-dark .nut-noticebar__page { background: var(--nut-dark-background2, #1b1b1b); @@ -4115,18 +5142,22 @@ textarea { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-noticebar__page { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - padding: var(--nut-noticebar-box-padding, 0 16px); - height: var(--nut-noticebar-across-height, 40px); - font-size: var(--nut-noticebar-font-size, 14px); + padding: var(--nut-noticebar-box-padding, 0 0.4rem); + height: var(--nut-noticebar-across-height, 1rem); + font-size: var(--nut-noticebar-font-size, 0.35rem); position: relative; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; background: var(--nut-noticebar-background, rgb(251, 248, 220)); color: var(--nut-noticebar-color, #d9500b); } .nut-noticebar__page--wrapable { height: auto; - padding: var(--nut-noticebar-wrapable-padding, 16px); + padding: var(--nut-noticebar-wrapable-padding, 0.4rem); } .nut-noticebar__page--wrapable .nut-noticebar__page-wrap { height: auto !important; @@ -4138,25 +5169,39 @@ textarea { } .nut-noticebar__page .nut-noticebar__page--withicon { position: relative; - padding-right: 40px; + padding-right: 1rem; } .nut-noticebar__page .nut-noticebar__page-lefticon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin: var(--nut-noticebar-lefticon-margin, 0px 10px); + margin: var(--nut-noticebar-lefticon-margin, 0rem 0.25rem); background-size: 100% 100%; } .nut-noticebar__page .nut-noticebar__page-righticon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - margin: var(--nut-noticebar-righticon-margin, 0px 10px); + margin: var(--nut-noticebar-righticon-margin, 0rem 0.25rem); } .nut-noticebar__page .nut-noticebar__page-wrap { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - height: var(--nut-noticebar-across-line-height, 24px); - line-height: var(--nut-noticebar-across-line-height, 24px); + height: var(--nut-noticebar-across-line-height, 0.6rem); + line-height: var(--nut-noticebar-across-line-height, 0.6rem); overflow: hidden; position: relative; } @@ -4172,37 +5217,65 @@ textarea { text-overflow: ellipsis; } .nut-noticebar__page .play { + -webkit-animation: nut-notice-bar-play linear both running; animation: nut-notice-bar-play linear both running; } .nut-noticebar__page .play-infinite { + -webkit-animation: nut-notice-bar-play-infinite linear infinite both running; animation: nut-notice-bar-play-infinite linear infinite both running; } .nut-noticebar__page .play-vertical { + -webkit-animation: nut-notice-bar-play-vertical linear infinite both running; animation: nut-notice-bar-play-vertical linear infinite both running; } +@-webkit-keyframes nut-notice-bar-play { + to { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} @keyframes nut-notice-bar-play { to { + -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } +@-webkit-keyframes nut-notice-bar-play-infinite { + to { + -webkit-transform: translate(-100%); + transform: translate(-100%); + } +} @keyframes nut-notice-bar-play-infinite { to { + -webkit-transform: translate(-100%); transform: translate(-100%); } } +@-webkit-keyframes nut-notice-bar-play-vertical { + to { + -webkit-transform: translateY(var(--nut-noticebar-across-height, 1rem)); + transform: translateY(var(--nut-noticebar-across-height, 1rem)); + } +} @keyframes nut-notice-bar-play-vertical { to { - transform: translateY(var(--nut-noticebar-across-height, 40px)); + -webkit-transform: translateY(var(--nut-noticebar-across-height, 1rem)); + transform: translateY(var(--nut-noticebar-across-height, 1rem)); } } .nut-noticebar__vertical { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; - height: var(--nut-noticebar-across-height, 40px); - font-size: var(--nut-noticebar-font-size, 14px); + height: var(--nut-noticebar-across-height, 1rem); + font-size: var(--nut-noticebar-font-size, 0.35rem); overflow: hidden; - padding: var(--nut-noticebar-box-padding, 0 16px); + padding: var(--nut-noticebar-box-padding, 0 0.4rem); background: var(--nut-noticebar-background, rgb(251, 248, 220)); color: var(--nut-noticebar-color, #d9500b); } @@ -4211,11 +5284,13 @@ textarea { margin: 0; padding: 0; display: block; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; overflow: hidden; } .nut-noticebar__vertical .nut-noticebar__vertical-list .nut-noticebar__vertical-item { - height: var(--nut-noticebar-across-height, 40px); + height: var(--nut-noticebar-across-height, 1rem); width: 100%; text-overflow: ellipsis; white-space: nowrap; @@ -4223,63 +5298,76 @@ textarea { } .nut-noticebar__vertical .nut-noticebar-custom-item { position: absolute; - top: 999999px; + top: 24999.975rem; } .nut-noticebar__vertical .go { - margin: var(--nut-noticebar-righticon-margin, 0px 10px); + margin: var(--nut-noticebar-righticon-margin, 0rem 0.25rem); + -webkit-align-self: center; + -ms-flex-item-align: center; align-self: center; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-theme-dark .nut-empty { background: var(--nut-dark-background, #131313); } .nut-empty { + -webkit-box-sizing: border-box; box-sizing: border-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - padding: var(--nut-empty-padding, 32px 0); + padding: var(--nut-empty-padding, 0.8rem 0); } .nut-empty__box { - width: var(--nut-empty-image-size, 170px); - height: var(--nut-empty-image-size, 170px); + width: var(--nut-empty-image-size, 4.25rem); + height: var(--nut-empty-image-size, 4.25rem); } .nut-empty__box .img { width: 100%; height: 100%; } .nut-empty__box img, -.nut-empty__box image { +.nut-empty__box taro-image-core { width: 100%; height: 100%; } .nut-empty__description { - margin-top: var(--nut-empty-description-margin-top, 4px); - padding: var(--nut-empty-description-padding, 0 40px); + margin-top: var(--nut-empty-description-margin-top, 0.1rem); + padding: var(--nut-empty-description-padding, 0 1rem); color: var(--nut-empty-description-color, #666666); - font-size: var(--nut-empty-description-font-size, 14px); - line-height: var(--nut-empty-description-line-height, 20px); + font-size: var(--nut-empty-description-font-size, 0.35rem); + line-height: var(--nut-empty-description-line-height, 0.5rem); } .nut-video-play-btn::before { content: ''; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA+CAMAAABTPci/AAAAb1BMVEUAAAACAgL///////////////////////////////////+urq4uLi7+/v6zs7OLi4v9/f3Hx8dubm79/f39/f3z8/P5+fn9/f38/Pz4+Pipqans7Oz8/Pz29vbx8fHi4uLX19fq6urg4ODT09P5+flRzniSAAAAJXRSTlMAA6GcmZWlno+RjBYHixgNhRsJgn9PbYh7XhNBdFlHMyc6LCNmyQGEbAAAAdlJREFUSMe11tly4jAQRuHgDdnBYBazw8xk8v7POMI/1Jm0iORUKs31Vy0dMOWX78xk8nWi+SKZrVYzqfHo9Xo4nOZiY83yvW2a9vxnwRmTZta3fhq3O/xlWQodzwNqGre/HlmWuNFeyKtm+7aSSqNG4/x0/VJnTKENxtWOICkkI9YQJIEwdV2uFSSOjPEfBYkjh7kpP+3FBrEIMuzR7AmSRN5oivpdQeJI13mYsig6G8Qi1sgMU55/KUiI1uZCoCJ3BDGo9iYgQnm+IYhBWsN1MPm0VJAADYbBDGra9gQBsccYoSxXEIuCNRiPsqxUkE8Q5IGksvXpFgRkiRBkmCrf/vbLHqgryWYXyUhVrvfLLIobr7KL7/ERPT8axk/xBrImRNV9riBdKG1CNMJwvHlnjAimuiOFABURw6Ka5PNdYfc8JVO+3AEhMPZoO/2MQJE9d1Qc+MGCME9ItufRAMXv4/rXCQYkYvYQQMQi2wDVnRasAbVk+9+YADHEGhMgRKGxAUIkYp44AqSRDAE+RxAhAiQQhAARNDWpHX/DccSenAAR1HzIRoCxqCoJkEDZwxAghY6buyBAGs0uMgQYo5bnW4A1AcapfrvtCTD2FXuxEPm5l3nYyw/PP4V4LkWCqx4LAAAAAElFTkSuQmCC) no-repeat center; - width: 30px; - height: 30px; + width: 0.75rem; + height: 0.75rem; display: inline-block; background-size: contain; } .nut-video-controller .nut-video-controller__playbtn { - width: 18px; - height: 18px; + width: 0.45rem; + height: 0.45rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x ); background-repeat: no-repeat; background-position: center; - margin: 0 10px; + margin: 0 0.25rem; } .nut-video-controller .nut-video-controller__playbtn.puase { background-image: -webkit-image-set( @@ -4290,8 +5378,8 @@ textarea { background-position: center; } .nut-video-controller .nut-video-controller__full { - width: 40px; - height: 35px; + width: 1rem; + height: 0.875rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K) 1x @@ -4308,8 +5396,8 @@ textarea { background-position: center; } .nut-video-controller .nut-video-controller__volume { - width: 30px; - height: 30px; + width: 0.75rem; + height: 0.75rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x @@ -4326,57 +5414,83 @@ textarea { background-position: center; } .nut-steps { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-steps-vertical { height: 100%; + -webkit-flex-flow: column; + -ms-flex-flow: column; flex-flow: column; } .nut-step { + -webkit-flex-grow: 0; + -ms-flex-positive: 0; flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; text-align: center; font-size: 0; } .nut-step-head { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - margin-bottom: 12px; + margin-bottom: 0.3rem; } .nut-step-line { position: absolute; - top: 11px; + top: 0.275rem; left: 50%; right: -50%; display: inline-block; - height: 1px; + height: 0.025rem; background: var(--nut-steps-base-line-color, #909ca4); } .nut-step-icon { position: relative; - display: flex; - width: var(--nut-steps-base-icon-width, 25px); - height: var(--nut-steps-base-icon-height, 25px); - line-height: var(--nut-steps-base-icon-line-height, 25px); - font-size: var(--nut-steps-base-icon-font-size, 13px); - align-items: center; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: var(--nut-steps-base-icon-width, 0.625rem); + height: var(--nut-steps-base-icon-height, 0.625rem); + line-height: var(--nut-steps-base-icon-line-height, 0.625rem); + font-size: var(--nut-steps-base-icon-font-size, 0.325rem); + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; z-index: 1; } .nut-step-icon-inner { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-step-icon .nut-icon { - width: var(--nut-steps-base-icon-font-size, 13px); - height: var(--nut-steps-base-icon-font-size, 13px); + width: var(--nut-steps-base-icon-font-size, 0.325rem); + height: var(--nut-steps-base-icon-font-size, 0.325rem); } .nut-step-icon.is-icon { border-radius: 50%; - border-width: 1px; + border-width: 0.025rem; border-style: solid; } .nut-step-main { @@ -4387,13 +5501,13 @@ textarea { } .nut-step-title { display: block; - margin-bottom: var(--nut-steps-base-title-margin-bottom, 10px); - font-size: var(--nut-steps-base-title-font-size, 14px); + margin-bottom: var(--nut-steps-base-title-margin-bottom, 0.25rem); + font-size: var(--nut-steps-base-title-font-size, 0.35rem); color: var(--nut-steps-base-title-color, #909ca4); } .nut-step-content { display: block; - font-size: var(--nut-steps-base-content-font-size, 14px); + font-size: var(--nut-steps-base-content-font-size, 0.35rem); color: var(--nut-steps-base-content-color, #666); } .nut-step:last-child .nut-step-line { @@ -4437,7 +5551,7 @@ textarea { color: var(--nut-steps-wait-content-color, #909ca4); } .nut-steps-horizontal.nut-steps-dot .nut-step-head { - margin-top: 7px; + margin-top: 0.175rem; margin-bottom: 0; } .nut-steps-horizontal.nut-steps-dot .nut-step-line { @@ -4445,10 +5559,11 @@ textarea { bottom: -50%; } .nut-steps-horizontal.nut-steps-dot .nut-step-icon { - width: 8px; - height: 8px; + width: 0.2rem; + height: 0.2rem; background: var(--nut-primary-color, #fa2c19); border-radius: 50%; + -webkit-box-sizing: content-box; box-sizing: content-box; } .nut-steps-horizontal.nut-steps-dot .nut-step-wait .nut-step-icon { @@ -4470,22 +5585,24 @@ textarea { position: absolute; left: 50%; top: 50%; - margin-left: -7px; - margin-top: -7px; - width: 14px; - height: 14px; + margin-left: -0.175rem; + margin-top: -0.175rem; + width: 0.35rem; + height: 0.35rem; background-color: var(--nut-primary-color-end, #fa6419); border-radius: 50%; opacity: 0.23; } .nut-steps-vertical .nut-step { + display: -webkit-flex; + display: -ms-flexbox; display: flex; height: 33.34%; } .nut-steps-vertical .nut-step-line { position: absolute; display: inline-block; - width: 1px; + width: 0.025rem; height: 100%; background: #909ca4; } @@ -4495,19 +5612,20 @@ textarea { text-align: left; } .nut-steps-vertical.nut-steps-dot .nut-step-head { - margin-top: 7px; + margin-top: 0.175rem; margin-bottom: 0; } .nut-steps-vertical.nut-steps-dot .nut-step-line { - top: 7px; + top: 0.175rem; left: 50%; right: -50%; } .nut-steps-vertical.nut-steps-dot .nut-step-icon { - width: 8px; - height: 8px; + width: 0.2rem; + height: 0.2rem; background: var(--nut-primary-color, #fa2c19); border-radius: 50%; + -webkit-box-sizing: content-box; box-sizing: content-box; } .nut-steps-vertical.nut-steps-dot .nut-step-wait .nut-step-icon { @@ -4529,60 +5647,79 @@ textarea { position: absolute; left: 50%; top: 50%; - margin-left: -7px; - margin-top: -7px; - width: 14px; - height: 14px; + margin-left: -0.175rem; + margin-top: -0.175rem; + width: 0.35rem; + height: 0.35rem; background-color: var(--nut-primary-color-end, #fa6419); border-radius: 50%; opacity: 0.23; } .nut-swiper { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-transition-property: -webkit-transform; + transition-property: -webkit-transform; transition-property: transform; + transition-property: + transform, + -webkit-transform; + -webkit-box-sizing: content-box; box-sizing: content-box; overflow: hidden; + cursor: -webkit-grab; cursor: grab; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; } .nut-swiper-inner { + display: -webkit-flex; + display: -ms-flexbox; display: flex; height: 100%; } .nut-swiper-vertical { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-swiper-pagination { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: absolute; left: 50%; - bottom: 12px; + bottom: 0.3rem; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); } .nut-swiper-pagination i { - width: var(--nut-swiper-pagination-item-width, 8px); - height: var(--nut-swiper-pagination-item-height, 3px); - margin-right: var(--nut-swiper-pagination-item-margin-right, 7px); - border-radius: var(--nut-swiper-pagination-item-border-radius, 2px); + width: var(--nut-swiper-pagination-item-width, 0.2rem); + height: var(--nut-swiper-pagination-item-height, 0.075rem); + margin-right: var(--nut-swiper-pagination-item-margin-right, 0.175rem); + border-radius: var(--nut-swiper-pagination-item-border-radius, 0.05rem); } .nut-swiper-pagination i:last-child { margin-right: 0; } .nut-swiper-pagination-vertical { top: 50%; - left: 12px; + left: 0.3rem; bottom: auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-swiper-pagination-vertical i { - margin-bottom: 5px; + margin-bottom: 0.125rem; } .nut-swiper-item { height: 100%; @@ -4591,6 +5728,8 @@ textarea { width: 100%; height: 100%; position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-video-player { @@ -4606,26 +5745,37 @@ textarea { left: 0; top: 0; right: 0; - bottom: 60px; + bottom: 1.5rem; } .nut-video .nut-video-mask.custom-touch { bottom: 0; } -.nut-video video { +.nut-video taro-video-core { width: 100%; height: 100%; + -o-object-fit: fill; object-fit: fill; } .nut-video-play-btn { - width: 80px; - height: 50px; - margin-top: -25px; + width: 2rem; + height: 1.25rem; + margin-top: -0.625rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; border: 0; background-color: #00000073; color: #fff; + -webkit-transition: + border-color 0.4s, + outline 0.4s, + background-color 0.4s; transition: border-color 0.4s, outline 0.4s, @@ -4633,34 +5783,39 @@ textarea { position: absolute; top: 50%; left: 50%; - margin-left: -40px; + margin-left: -1rem; padding: 0; cursor: pointer; opacity: 1; background-color: #00000080; - font-size: 30px; + font-size: 0.75rem; border-radius: 20%; } .nut-video-play-btn::before { content: ''; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA+CAMAAABTPci/AAAAb1BMVEUAAAACAgL///////////////////////////////////+urq4uLi7+/v6zs7OLi4v9/f3Hx8dubm79/f39/f3z8/P5+fn9/f38/Pz4+Pipqans7Oz8/Pz29vbx8fHi4uLX19fq6urg4ODT09P5+flRzniSAAAAJXRSTlMAA6GcmZWlno+RjBYHixgNhRsJgn9PbYh7XhNBdFlHMyc6LCNmyQGEbAAAAdlJREFUSMe11tly4jAQRuHgDdnBYBazw8xk8v7POMI/1Jm0iORUKs31Vy0dMOWX78xk8nWi+SKZrVYzqfHo9Xo4nOZiY83yvW2a9vxnwRmTZta3fhq3O/xlWQodzwNqGre/HlmWuNFeyKtm+7aSSqNG4/x0/VJnTKENxtWOICkkI9YQJIEwdV2uFSSOjPEfBYkjh7kpP+3FBrEIMuzR7AmSRN5oivpdQeJI13mYsig6G8Qi1sgMU55/KUiI1uZCoCJ3BDGo9iYgQnm+IYhBWsN1MPm0VJAADYbBDGra9gQBsccYoSxXEIuCNRiPsqxUkE8Q5IGksvXpFgRkiRBkmCrf/vbLHqgryWYXyUhVrvfLLIobr7KL7/ERPT8axk/xBrImRNV9riBdKG1CNMJwvHlnjAimuiOFABURw6Ka5PNdYfc8JVO+3AEhMPZoO/2MQJE9d1Qc+MGCME9ItufRAMXv4/rXCQYkYvYQQMQi2wDVnRasAbVk+9+YADHEGhMgRKGxAUIkYp44AqSRDAE+RxAhAiQQhAARNDWpHX/DccSenAAR1HzIRoCxqCoJkEDZwxAghY6buyBAGs0uMgQYo5bnW4A1AcapfrvtCTD2FXuxEPm5l3nYyw/PP4V4LkWCqx4LAAAAAElFTkSuQmCC) no-repeat center; - width: 30px; - height: 30px; + width: 0.75rem; + height: 0.75rem; display: inline-block; background-size: contain; } .nut-video-controller { position: absolute; + display: -webkit-flex; + display: -ms-flexbox; display: flex; left: 0; bottom: 0; background-color: #00000080; - height: 35px; + height: 0.875rem; width: 100%; z-index: 11111111; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; opacity: 0; + -webkit-transition: all 1s; transition: all 1s; } .nut-video-controller.nut-video-controller--show { @@ -4670,15 +5825,15 @@ textarea { opacity: 0; } .nut-video-controller .nut-video-controller__playbtn { - width: 18px; - height: 18px; + width: 0.45rem; + height: 0.45rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x ); background-repeat: no-repeat; background-position: center; - margin: 0 10px; + margin: 0 0.25rem; } .nut-video-controller .nut-video-controller__playbtn.puase { background-image: -webkit-image-set( @@ -4691,53 +5846,57 @@ textarea { .nut-video-controller .nut-video-controller__total, .nut-video-controller .nut-video-controller__now { color: #fff; - padding: 0 5px; - font-size: 10px; + padding: 0 0.125rem; + font-size: 0.25rem; } .nut-video-controller .nut-video-controller__progress { position: relative; display: inline-block; height: 100%; width: 100%; - margin: 0 5px; + margin: 0 0.125rem; + -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-video-controller .nut-video-controller__progress .nut-video-controller__progress-value { position: absolute; top: 50%; width: 100%; - height: 2px; + height: 0.05rem; margin-top: -0.05rem; background: #ffffff80; } .nut-video-controller .nut-video-controller__progress .buffered { background: #fffc; - height: 2px; + height: 0.05rem; } .nut-video-controller .nut-video-controller__progress .nut-video-controller__ball { - width: 10px; - height: 10px; + width: 0.25rem; + height: 0.25rem; position: absolute; top: 50%; left: 0; border-radius: 50%; } .nut-video-controller .nut-video-controller__progress .nut-video-controller__ball div { - width: 10px; - height: 10px; + width: 0.25rem; + height: 0.25rem; background: #fff; - box-shadow: 0 0 2px #0003; - margin: 0 -5px; + -webkit-box-shadow: 0 0 0.05rem #0003; + box-shadow: 0 0 0.05rem #0003; + margin: 0 -0.125rem; border-radius: 50%; } .nut-video-controller .nut-video-controller__progress .nut-video-controller__ball:hover { - width: 15px; - height: 15px; + width: 0.375rem; + height: 0.375rem; } .nut-video-controller .nut-video-controller__full { - width: 40px; - height: 35px; + width: 1rem; + height: 0.875rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K) 1x @@ -4754,8 +5913,8 @@ textarea { background-position: center; } .nut-video-controller .nut-video-controller__volume { - width: 30px; - height: 30px; + width: 0.75rem; + height: 0.75rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x @@ -4795,12 +5954,13 @@ textarea { .nut-image-preview-img { width: 100%; height: 100%; + -o-object-fit: contain; object-fit: contain; } .nut-image-preview-index { position: fixed; z-index: 2002; - top: 50px; + top: 1.25rem; text-align: center; left: 0; right: 0; @@ -4809,20 +5969,22 @@ textarea { } .nut-image-preview-index .arrow { position: absolute; - left: 15px; + left: 0.375rem; + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-image-preview-close-icon { position: fixed; z-index: 2002; - top: 50px; - right: 15px; + top: 1.25rem; + right: 0.375rem; } .nut-image-preview-close-icon-right { - right: 10px; + right: 0.25rem; } .nut-image-preview-close-icon-left { - left: 10px; + left: 0.25rem; } .nut-image-preview .popup-bg { background: #000000e6; @@ -4835,30 +5997,42 @@ textarea { .nut-image-preview-custom-pop { height: 100%; background: transparent !important; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: 100%; } .nut-image-preview-swiper .nut-swiper-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; height: 100%; } .nut-image-preview-swiper .nut-swiper-item .nut-image-preview-box { width: 100%; } -.nut-image-preview-swiper .nut-swiper-item .nut-video video { +.nut-image-preview-swiper .nut-swiper-item .nut-video taro-video-core { + -o-object-fit: contain; object-fit: contain; } .nut-theme-dark .nut-countup { background: var(--nut-dark-background, #131313); color: var(--nut-dark-color, var(--nut-white, #fff)); + -webkit-box-shadow: none; box-shadow: none; } .nut-countup { display: block; - padding: 5px 20px; + padding: 0.125rem 0.5rem; color: #000; font-weight: 700; } @@ -4873,6 +6047,7 @@ textarea { } .nut-countup .nut-countup__number .nut-countup__number-item { position: absolute; + -webkit-transition: none; transition: none; list-style: none; } @@ -4900,6 +6075,7 @@ textarea { .nut-countup .nut-countup__numberimg .nut-countup__numberimg__item { position: absolute; display: block; + -webkit-transition: none; transition: none; display: inline-block; background-position: 0 0; @@ -4919,37 +6095,49 @@ textarea { display: inline-block; } .nut-badge .nut-badge__icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; line-height: normal; + -webkit-transform: var(--nut-badge-content-transform, translate(50%, -50%)); + -ms-transform: var(--nut-badge-content-transform, translate(50%, -50%)); transform: var(--nut-badge-content-transform, translate(50%, -50%)); position: absolute; background: var(--nut-badge-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); - padding: var(--nut-badge-icon-padding, 4px); + padding: var(--nut-badge-icon-padding, 0.1rem); text-align: center; - border-radius: var(--nut-badge-border-radius, 14px); + border-radius: var(--nut-badge-border-radius, 0.35rem); z-index: var(--nut-badge-z-index, 1); } .nut-badge .nut-badge__content { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-transform: var(--nut-badge-content-transform, translate(50%, -50%)); + -ms-transform: var(--nut-badge-content-transform, translate(50%, -50%)); transform: var(--nut-badge-content-transform, translate(50%, -50%)); } .nut-badge .nut-badge__content--sup { position: absolute; background: var(--nut-badge-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); - padding: var(--nut-badge-padding, 0 5px); + padding: var(--nut-badge-padding, 0 0.125rem); text-align: center; - border-radius: var(--nut-badge-border-radius, 14px); - font-size: var(--nut-badge-font-size, var(--nut-font-size-1, 12px)); + border-radius: var(--nut-badge-border-radius, 0.35rem); + font-size: var(--nut-badge-font-size, var(--nut-font-size-1, 0.3rem)); font-weight: 400; color: var(--nut-badge-color, #fff); } .nut-badge .nut-badge__content--dot { - width: var(--nut-badge-dot-width, 7px); - height: var(--nut-badge-dot-height, 7px); - border-radius: var(--nut-badge-dot-border-radius, 7px); - padding: var(--nut-badge-dot-padding, 0px); + width: var(--nut-badge-dot-width, 0.175rem); + height: var(--nut-badge-dot-height, 0.175rem); + border-radius: var(--nut-badge-dot-border-radius, 0.175rem); + padding: var(--nut-badge-dot-padding, 0rem); } .nut-badge .nut-badge__content--bubble { border-bottom-left-radius: 0; @@ -4960,6 +6148,8 @@ textarea { background-position: center center; display: inline-block; position: relative; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; flex: 0 0 auto; text-align: center; vertical-align: top; @@ -4974,29 +6164,31 @@ textarea { position: absolute; top: 50%; left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .nut-avatar-large { - width: var(--nut-avatar-large-width, 60px); - height: var(--nut-avatar-large-height, 60px); - line-height: var(--nut-avatar-large-height, 60px); + width: var(--nut-avatar-large-width, 1.5rem); + height: var(--nut-avatar-large-height, 1.5rem); + line-height: var(--nut-avatar-large-height, 1.5rem); } .nut-avatar-small { - width: var(--nut-avatar-small-width, 32px); - height: var(--nut-avatar-small-height, 32px); - line-height: var(--nut-avatar-small-height, 32px); + width: var(--nut-avatar-small-width, 0.8rem); + height: var(--nut-avatar-small-height, 0.8rem); + line-height: var(--nut-avatar-small-height, 0.8rem); } .nut-avatar-normal { - width: var(--nut-avatar-normal-width, 40px); - height: var(--nut-avatar-normal-height, 40px); - line-height: var(--nut-avatar-normal-height, 40px); + width: var(--nut-avatar-normal-width, 1rem); + height: var(--nut-avatar-normal-height, 1rem); + line-height: var(--nut-avatar-normal-height, 1rem); } .nut-avatar-round { border-radius: 50%; overflow: hidden; } .nut-avatar-square { - border-radius: var(--nut-avatar-square, 5px); + border-radius: var(--nut-avatar-square, 0.125rem); } .nut-skeleton { display: inline-block; @@ -5005,20 +6197,26 @@ textarea { vertical-align: middle; } .nut-skeleton .nut-skeleton-content { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-skeleton .nut-skeleton-content .avatarClass { - margin-right: 20px; + margin-right: 0.5rem; background-color: var(--nut-skeleton-content-avatar-background-color, #efefef); } .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle, .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockLine { width: 100%; - margin-bottom: 10px; + margin-bottom: 0.25rem; background-color: var(--nut-skeleton-content-line-background-color, #efefef); } .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle { @@ -5033,7 +6231,7 @@ textarea { } .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle--round, .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockLine--round { - border-radius: 10px; + border-radius: 0.25rem; } .nut-skeleton .nut-skeleton-animation { position: absolute; @@ -5044,19 +6242,29 @@ textarea { z-index: 1; background: var(--nut-skeleton-animation-background-color, linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%)); background-repeat: no-repeat; + -webkit-animation: backpos 2s ease-in-out 0s infinite; animation: backpos 2s ease-in-out 0s infinite; } +@-webkit-keyframes backpos { + 0% { + background-position-x: -12.5rem; + } + to { + background-position-x: calc(12.5rem + 100%); + } +} @keyframes backpos { 0% { - background-position-x: -500px; + background-position-x: -12.5rem; } to { - background-position-x: calc(500px + 100%); + background-position-x: calc(12.5rem + 100%); } } .nut-theme-dark .nut-collapse-item .nut-collapse-item__title { background: var(--nut-dark-background, #131313); color: var(--nut-dark-color, var(--nut-white, #fff)); + -webkit-box-shadow: none; box-shadow: none; } .nut-theme-dark .nut-collapse-item .nut-collapse__item-wrapper .collapse-content, @@ -5069,14 +6277,16 @@ textarea { } .nut-collapse-item__border .nut-collapse-item__title::after { position: absolute; + -webkit-box-sizing: border-box; box-sizing: border-box; content: ' '; pointer-events: none; - right: 16px; + right: 0.4rem; bottom: 0; - left: 16px; - border-bottom: 1px solid #ebedf0; + left: 0.4rem; + border-bottom: 0.025rem solid #ebedf0; -webkit-transform: scaleY(0.5); + -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .nut-collapse-item { @@ -5084,47 +6294,67 @@ textarea { } .nut-collapse-item .nut-collapse-item__title { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: 100%; overflow: hidden; - padding: var(--nut-collapse-item-padding, 13px 36px 13px 26px); + padding: var(--nut-collapse-item-padding, 0.325rem 0.9rem 0.325rem 0.65rem); color: var(--nut-collapse-item-color, #666666); - font-size: var(--nut-collapse-item-font-size, var(--nut-font-size-2, 14px)); - line-height: var(--nut-collapse-item-line-height, 24px); + font-size: var(--nut-collapse-item-font-size, var(--nut-font-size-2, 0.35rem)); + line-height: var(--nut-collapse-item-line-height, 0.6rem); background-color: #fff; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main-value { display: block; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main-value .nut-collapse-item__title-main-icon { - top: 2px; + top: 0.05rem; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; color: var(--nut-collapse-item-icon-color, #666666); + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; transition: transform 0.3s; + transition: + transform 0.3s, + -webkit-transform 0.3s; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon--expanded { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-sub { position: absolute; top: 50%; - right: 65px; - margin-top: -12px; + right: 1.625rem; + margin-top: -0.3rem; color: var(--nut-collapse-item-sub-title-color, #666666); } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-label { display: block; color: #969799; - font-size: 12px; + font-size: 0.3rem; } .nut-collapse-item .nut-collapse__item-wrapper, .nut-collapse-item .nut-collapse__item-extraWrapper { @@ -5132,6 +6362,7 @@ textarea { position: relative; height: 0; overflow: hidden; + -webkit-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out; } .nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content, @@ -5139,15 +6370,15 @@ textarea { .nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content, .nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-extraWrapper__extraRender { display: block; - padding: var(--nut-collapse-wrapper-content-padding, 12px 26px); + padding: var(--nut-collapse-wrapper-content-padding, 0.3rem 0.65rem); color: var(--nut-collapse-wrapper-content-color, #666666); - font-size: var(--nut-collapse-wrapper-content-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-collapse-wrapper-content-font-size, var(--nut-font-size-2, 0.35rem)); line-height: var(--nut-collapse-wrapper-content-line-height, 1.5); background-color: var(--nut-collapse-wrapper-content-background-color, var(--nut-white, #fff)); } .nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content--empty, .nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content--empty { - padding: var(--nut-collapse-wrapper-empty-content-padding, 0 26px); + padding: var(--nut-collapse-wrapper-empty-content-padding, 0 0.65rem); } .nut-collapse-item .nut-collapse__item-extraWrapper { height: auto; @@ -5197,10 +6428,14 @@ textarea { background-color: var(--nut-dark-background, #131313); } .nut-table { + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; - font-size: var(--nut-font-size-2, 14px); + font-size: var(--nut-font-size-2, 0.35rem); } .nut-table__main { display: table; @@ -5226,18 +6461,24 @@ textarea { .nut-table__main__head__tr__td, .nut-table__main__body__tr__td { display: table-cell; - padding: var(--nut-table-cols-padding, 10px); + padding: var(--nut-table-cols-padding, 0.25rem); } .nut-table__main__head__tr__td__nodata, .nut-table__main__body__tr__td__nodata { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - height: 50px; + height: 1.25rem; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-table__main__head__tr--border, .nut-table__main__body__tr--border { - border: 1px solid var(--nut-table-border-color, #ececec); + border: 0.025rem solid var(--nut-table-border-color, #ececec); } .nut-table__main__head__tr--alignleft, .nut-table__main__head__tr--align, @@ -5260,189 +6501,414 @@ textarea { display: table-row-group; } .nut-table__summary { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - height: 30px; - padding: var(--nut-table-cols-padding, 10px); + height: 0.75rem; + padding: var(--nut-table-cols-padding, 0.25rem); } .nut-table__nodata { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - height: 30px; - padding: var(--nut-table-cols-padding, 10px); + height: 0.75rem; + padding: var(--nut-table-cols-padding, 0.25rem); } .nut-animate .nut-animate__container { display: inline-block; } .nut-animate [class*='nut-animate-'] { + -webkit-animation-duration: 0.5s; animation-duration: 0.5s; + -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; + -webkit-animation-fill-mode: both; animation-fill-mode: both; } .nut-animate .nut-animate-shake { + -webkit-animation-name: shake; animation-name: shake; } .nut-animate .nut-animate-ripple { + -webkit-animation-name: ripple; animation-name: ripple; } .nut-animate .nut-animate-float { position: relative; + -webkit-animation-name: float-pop; animation-name: float-pop; } .nut-animate .nut-animate-breath { + -webkit-animation-name: breath; animation-name: breath; + -webkit-animation-duration: 2.7s; animation-duration: 2.7s; + -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; + -webkit-animation-direction: alternate; animation-direction: alternate; } .nut-animate .nut-animate-slide-right { + -webkit-animation-name: slide-right; animation-name: slide-right; } .nut-animate .nut-animate-slide-left { + -webkit-animation-name: slide-left; animation-name: slide-left; } .nut-animate .nut-animate-slide-top { + -webkit-animation-name: slide-top; animation-name: slide-top; } .nut-animate .nut-animate-slide-bottom { + -webkit-animation-name: slide-bottom; animation-name: slide-bottom; } .nut-animate .nut-animate-jump { + -webkit-transform-origin: center center; + -ms-transform-origin: center center; transform-origin: center center; + -webkit-animation: jump 0.7s linear; animation: jump 0.7s linear; } .nut-animate .loop { + -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } +@-webkit-keyframes shake { + 0%, + to { + -webkit-transform: translate(0); + transform: translate(0); + } + 10% { + -webkit-transform: translate(-0.225rem); + transform: translate(-0.225rem); + } + 20% { + -webkit-transform: translate(0.2rem); + transform: translate(0.2rem); + } + 30% { + -webkit-transform: translate(-0.175rem); + transform: translate(-0.175rem); + } + 40% { + -webkit-transform: translate(0.15rem); + transform: translate(0.15rem); + } + 50% { + -webkit-transform: translate(-0.125rem); + transform: translate(-0.125rem); + } + 60% { + -webkit-transform: translate(0.1rem); + transform: translate(0.1rem); + } + 70% { + -webkit-transform: translate(-0.075rem); + transform: translate(-0.075rem); + } + 80% { + -webkit-transform: translate(0.05rem); + transform: translate(0.05rem); + } + 90% { + -webkit-transform: translate(-0.025rem); + transform: translate(-0.025rem); + } +} @keyframes shake { 0%, to { + -webkit-transform: translate(0); transform: translate(0); } 10% { - transform: translate(-9px); + -webkit-transform: translate(-0.225rem); + transform: translate(-0.225rem); } 20% { - transform: translate(8px); + -webkit-transform: translate(0.2rem); + transform: translate(0.2rem); } 30% { - transform: translate(-7px); + -webkit-transform: translate(-0.175rem); + transform: translate(-0.175rem); } 40% { - transform: translate(6px); + -webkit-transform: translate(0.15rem); + transform: translate(0.15rem); } 50% { - transform: translate(-5px); + -webkit-transform: translate(-0.125rem); + transform: translate(-0.125rem); } 60% { - transform: translate(4px); + -webkit-transform: translate(0.1rem); + transform: translate(0.1rem); } 70% { - transform: translate(-3px); + -webkit-transform: translate(-0.075rem); + transform: translate(-0.075rem); } 80% { - transform: translate(2px); + -webkit-transform: translate(0.05rem); + transform: translate(0.05rem); } 90% { - transform: translate(-1px); + -webkit-transform: translate(-0.025rem); + transform: translate(-0.025rem); + } +} +@-webkit-keyframes ripple { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.1); + transform: scale(1.1); } } @keyframes ripple { 0% { + -webkit-transform: scale(1); transform: scale(1); } 50% { + -webkit-transform: scale(1.1); transform: scale(1.1); } } +@-webkit-keyframes breath { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + to { + -webkit-transform: scale(1); + transform: scale(1); + } +} @keyframes breath { 0% { + -webkit-transform: scale(1); transform: scale(1); } 50% { + -webkit-transform: scale(1.1); transform: scale(1.1); } to { + -webkit-transform: scale(1); transform: scale(1); } } +@-webkit-keyframes slide-right { + 0% { + opacity: 0; + -webkit-transform: translate(100%); + transform: translate(100%); + } + to { + opacity: 1; + -webkit-transform: translate(0); + transform: translate(0); + } +} @keyframes slide-right { 0% { opacity: 0; + -webkit-transform: translate(100%); transform: translate(100%); } to { opacity: 1; + -webkit-transform: translate(0); + transform: translate(0); + } +} +@-webkit-keyframes slide-left { + 0% { + opacity: 0; + -webkit-transform: translate(-100%); + transform: translate(-100%); + } + to { + opacity: 1; + -webkit-transform: translate(0); transform: translate(0); } } @keyframes slide-left { 0% { opacity: 0; + -webkit-transform: translate(-100%); transform: translate(-100%); } to { opacity: 1; + -webkit-transform: translate(0); transform: translate(0); } } +@-webkit-keyframes slide-top { + 0% { + opacity: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + to { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} @keyframes slide-top { 0% { opacity: 0; + -webkit-transform: translateY(-100%); transform: translateY(-100%); } to { opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes slide-bottom { + 0% { + opacity: 0; + -webkit-transform: translateY(100%); + transform: translateY(100%); + } + to { + opacity: 1; + -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slide-bottom { 0% { opacity: 0; + -webkit-transform: translateY(100%); transform: translateY(100%); } to { opacity: 1; + -webkit-transform: translateY(0); transform: translateY(0); } } +@-webkit-keyframes float-pop { + 0% { + top: 0; + } + 25% { + top: 0.025rem; + } + 50% { + top: 0.1rem; + } + 75% { + top: 0.025rem; + } + to { + top: 0; + } +} @keyframes float-pop { 0% { top: 0; } 25% { - top: 1px; + top: 0.025rem; } 50% { - top: 4px; + top: 0.1rem; } 75% { - top: 1px; + top: 0.025rem; } to { top: 0; } } +@-webkit-keyframes jump { + 0% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-transform: rotate(0) translateY(0); + transform: rotate(0) translateY(0); + } + 25% { + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-transform: rotate(10deg) translateY(0.5rem); + transform: rotate(10deg) translateY(0.5rem); + } + 50% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-transform: rotate(0) translateY(-0.25rem); + transform: rotate(0) translateY(-0.25rem); + } + 75% { + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-transform: rotate(-10deg) translateY(0.5rem); + transform: rotate(-10deg) translateY(0.5rem); + } + to { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-transform: rotate(0) translateY(0); + transform: rotate(0) translateY(0); + } +} @keyframes jump { 0% { + -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; + -webkit-transform: rotate(0) translateY(0); transform: rotate(0) translateY(0); } 25% { + -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; - transform: rotate(10deg) translateY(20px); + -webkit-transform: rotate(10deg) translateY(0.5rem); + transform: rotate(10deg) translateY(0.5rem); } 50% { + -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; - transform: rotate(0) translateY(-10px); + -webkit-transform: rotate(0) translateY(-0.25rem); + transform: rotate(0) translateY(-0.25rem); } 75% { + -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; - transform: rotate(-10deg) translateY(20px); + -webkit-transform: rotate(-10deg) translateY(0.5rem); + transform: rotate(-10deg) translateY(0.5rem); } to { + -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; + -webkit-transform: rotate(0) translateY(0); transform: rotate(0) translateY(0); } } @@ -5451,25 +6917,46 @@ textarea { } .nut-animate .nut-animate-twinkle::after, .nut-animate .nut-animate-twinkle::before { - width: 60px; - height: 60px; + width: 1.5rem; + height: 1.5rem; content: ''; + -webkit-box-sizing: border-box; box-sizing: border-box; - border: 4px solid rgba(255, 255, 255, 0.6); + border: 0.1rem solid rgba(255, 255, 255, 0.6); position: absolute; - border-radius: 30px; + border-radius: 0.75rem; right: 50%; - margin-top: -15px; - margin-right: -30px; + margin-top: -0.375rem; + margin-right: -0.75rem; z-index: 1; + -webkit-transform: scale(0); + -ms-transform: scale(0); transform: scale(0); + -webkit-animation: twinkle 2s ease-out infinite; animation: twinkle 2s ease-out infinite; } .nut-animate .nut-animate-twinkle::after { + -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } +@-webkit-keyframes twinkle { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + } + 20% { + opacity: 1; + } + 50%, + to { + -webkit-transform: scale(1.4); + transform: scale(1.4); + opacity: 0; + } +} @keyframes twinkle { 0% { + -webkit-transform: scale(0); transform: scale(0); } 20% { @@ -5477,6 +6964,7 @@ textarea { } 50%, to { + -webkit-transform: scale(1.4); transform: scale(1.4); opacity: 0; } @@ -5486,28 +6974,48 @@ textarea { overflow: hidden; } .nut-animate .nut-animate-flicker::after { - width: 100px; - height: 60px; + width: 2.5rem; + height: 1.5rem; position: absolute; left: 0; top: 0; opacity: 0.73; content: ''; + background-image: -webkit-linear-gradient(344deg, #e8e0ff00 24%, #e8e0ff 91%); background-image: linear-gradient(106deg, #e8e0ff00 24%, #e8e0ff 91%); + -webkit-animation: flicker 1.5s linear infinite; animation: flicker 1.5s linear infinite; + -webkit-transform: skew(-20deg); + -ms-transform: skew(-20deg); transform: skew(-20deg); - filter: blur(3px); + -webkit-filter: blur(0.075rem); + filter: blur(0.075rem); +} +@-webkit-keyframes flicker { + 0% { + -webkit-transform: translate(-2.5rem) skew(-20deg); + transform: translate(-2.5rem) skew(-20deg); + } + 40%, + to { + -webkit-transform: translate(3.75rem) skew(-20deg); + transform: translate(3.75rem) skew(-20deg); + } } @keyframes flicker { 0% { - transform: translate(-100px) skew(-20deg); + -webkit-transform: translate(-2.5rem) skew(-20deg); + transform: translate(-2.5rem) skew(-20deg); } 40%, to { - transform: translate(150px) skew(-20deg); + -webkit-transform: translate(3.75rem) skew(-20deg); + transform: translate(3.75rem) skew(-20deg); } } .nut-ellipsis { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-ellipsis .nut-ellipsis__text { @@ -5520,7 +7028,7 @@ textarea { } .nut-ellipsis__copy { position: absolute; - top: -999999px; + top: -24999.975rem; } .nut-watermark { position: absolute; @@ -5537,13 +7045,13 @@ textarea { } .nut-trend-arrow { display: inline-block; - font-size: var(--nut-trendarrow-font-size, 14px); + font-size: var(--nut-trendarrow-font-size, 0.35rem); } .nut-trend-arrow-icon-before { - margin-right: var(--nut-trendarrow-before-icon-margin, 4px); + margin-right: var(--nut-trendarrow-before-icon-margin, 0.1rem); } .nut-trend-arrow-icon-after { - margin-left: var(--nut-trendarrow-before-icon-margin, 4px); + margin-left: var(--nut-trendarrow-before-icon-margin, 0.1rem); } .nut-trend-arrow-rate { vertical-align: middle; @@ -5561,81 +7069,110 @@ textarea { position: absolute; width: 0; height: 0; - border: 8px solid transparent; + border: 0.2rem solid transparent; } .nut-popover .nut-popover-arrow-top { bottom: 0; border-top-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); border-bottom-width: 0; - margin-bottom: -8px; + margin-bottom: -0.2rem; } .nut-popover .nut-popover-arrow-bottom { top: 0; border-bottom-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); border-top-width: 0; - margin-top: -8px; + margin-top: -0.2rem; } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom { left: 50%; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom-start { - left: 16px; + left: 0.4rem; + -webkit-transform: translate(0); + -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom-end { - right: 16px; + right: 0.4rem; + -webkit-transform: translate(0); + -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-arrow-left { right: 0; border-left-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); border-right-width: 0; - margin-right: -8px; + margin-right: -0.2rem; } .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left { top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left-start { - top: 16px; + top: 0.4rem; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left-end { - bottom: 16px; + bottom: 0.4rem; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-arrow-right { left: 0; border-right-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); border-left-width: 0; - margin-left: -8px; + margin-left: -0.2rem; } .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right { top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right-start { - top: 16px; + top: 0.4rem; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right-end { - bottom: 16px; + bottom: 0.4rem; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-content { position: absolute; z-index: 9999; background: #fff; - border-radius: 5px; - font-size: 14px; + border-radius: 0.125rem; + font-size: 0.35rem; font-weight: 400; color: #333; - box-shadow: 0 2px 12px #3232331f; + -webkit-box-shadow: 0 0.05rem 0.3rem #3232331f; + box-shadow: 0 0.05rem 0.3rem #3232331f; opacity: 1; + -webkit-transition: + opacity 0.15s, + -webkit-transform 0.15s; + transition: + opacity 0.15s, + -webkit-transform 0.15s; transition: opacity 0.15s, transform 0.15s; + transition: + opacity 0.15s, + transform 0.15s, + -webkit-transform 0.15s; max-height: initial; overflow-y: initial; } @@ -5645,21 +7182,25 @@ textarea { width: 100%; } .nut-popover .nut-popover-content .nut-popover-menu-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: 8px; - border-bottom: 1px solid var(--nut-popover-border-bottom-color, rgb(229, 229, 229)); + padding: 0.2rem; + border-bottom: 0.025rem solid var(--nut-popover-border-bottom-color, rgb(229, 229, 229)); } .nut-popover .nut-popover-content .nut-popover-menu-item:first-child { - margin-top: 15px; + margin-top: 0.375rem; } .nut-popover .nut-popover-content .nut-popover-menu-item:last-child { - margin-bottom: 2px; + margin-bottom: 0.05rem; border-bottom: none; } .nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-item-img { vertical-align: top; - margin-right: 3px; + margin-right: 0.075rem; } .nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-menu-item-name { width: 100%; @@ -5672,20 +7213,26 @@ textarea { } .nut-popover .nut-popover-content--top .nut-popover-arrow--top { left: 50%; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); } .nut-popover .nut-popover-content--top-end { right: 0; } .nut-popover .nut-popover-content--top-end .nut-popover-arrow--top-end { - right: 16px; + right: 0.4rem; + -webkit-transform: translate(0); + -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-content--top-start { left: 0; } .nut-popover .nut-popover-content--top-start .nut-popover-arrow--top-start { - left: 16px; + left: 0.4rem; + -webkit-transform: translate(0); + -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-content--bottom-end { @@ -5729,13 +7276,17 @@ textarea { } .nut-popover-enter-from, .nut-popover-leave-active { + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; } .nut-popover-enter-active { + -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .nut-popover-leave-active { + -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } .nut-popover-content-bg { @@ -5752,13 +7303,15 @@ textarea { } .nut-tour-mask { position: fixed; - width: 100px; - height: 50px; + width: 2.5rem; + height: 1.25rem; + -webkit-box-shadow: 0 0 0 150vh #00000080; box-shadow: 0 0 0 150vh #00000080; - border-radius: 10px; + border-radius: 0.25rem; z-index: 1002; } .nut-tour-mask-none { + -webkit-box-shadow: none; box-shadow: none; } .nut-tour-mask-hidden { @@ -5766,40 +7319,48 @@ textarea { } .nut-tour-content { display: block; - padding: 10px 12px; - min-width: 200px; + padding: 0.25rem 0.3rem; + min-width: 5rem; } .nut-tour-content-top { display: block; text-align: right; } .nut-tour-content-top-close { - width: 10px; - height: 10px; + width: 0.25rem; + height: 0.25rem; } .nut-tour-content-inner { - margin: 10px 0; - font-size: 14px; + margin: 0.25rem 0; + font-size: 0.35rem; } .nut-tour-content-bottom { - margin-top: 10px; + margin-top: 0.25rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-tour-content-bottom-init { - margin-left: 10px; + margin-left: 0.25rem; } .nut-tour-content-bottom-operate { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; } .nut-tour-content-bottom-operate-btn { display: inline-block; - border: 1px solid var(--nut-disable-color, #cccccc); - margin-left: 4px; - padding: 2px 4px; - font-size: 12px; - border-radius: 4px; + border: 0.025rem solid var(--nut-disable-color, #cccccc); + margin-left: 0.1rem; + padding: 0.05rem 0.1rem; + font-size: 0.3rem; + border-radius: 0.1rem; color: var(--nut-text-color, #808080); } .nut-tour-content-bottom-operate-btn.active { @@ -5845,35 +7406,42 @@ textarea { } .nut-elevator__list__item { display: block; - font-size: var(--nut-elevator-list-item-font-size, 12px); + font-size: var(--nut-elevator-list-item-font-size, 0.3rem); color: var(--nut-elevator-list-item-font-color, #333333); } .nut-elevator__list__item__code { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: relative; - height: var(--nut-elevator-list-item-code-height, 35px); - line-height: var(--nut-elevator-list-item-code-line-height, 35px); - font-size: var(--nut-elevator-list-item-code-font-size, 14px); + height: var(--nut-elevator-list-item-code-height, 0.875rem); + line-height: var(--nut-elevator-list-item-code-line-height, 0.875rem); + font-size: var(--nut-elevator-list-item-code-font-size, 0.35rem); color: var(--nut-elevator-list-item-code-font-color, #1a1a1a); - padding: var(--nut-elevator-list-item-code-padding, 0 20px); + padding: var(--nut-elevator-list-item-code-padding, 0 0.5rem); font-weight: var(--nut-elevator-list-item-code-font-weight, 500); + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-elevator__list__item__code::after { content: ' '; width: var(--nut-elevator-list-item-code-after-width, 100%); - height: var(--nut-elevator-list-item-code-after-height, 1px); + height: var(--nut-elevator-list-item-code-after-height, 0.025rem); position: absolute; left: 0; bottom: 0; background-color: var(--nut-elevator-list-item-code-after-bg-color, #f5f5f5); } .nut-elevator__list__item__name { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: var(--nut-elevator-list-item-name-padding, 0 20px); - height: var(--nut-elevator-list-item-name-height, 30px); - line-height: var(--nut-elevator-list-item-name-line-height, 30px); + padding: var(--nut-elevator-list-item-name-padding, 0 0.5rem); + height: var(--nut-elevator-list-item-name-height, 0.75rem); + line-height: var(--nut-elevator-list-item-name-line-height, 0.75rem); } .nut-elevator__list__item__name--highcolor { color: var(--nut-elevator-list-item-highcolor, var(--nut-primary-color, #fa2c19)); @@ -5883,45 +7451,52 @@ textarea { position: absolute; top: 0; left: 0; - padding: var(--nut-elevator-list-item-code-padding, 0 20px); - height: var(--nut-elevator-list-item-code-height, 35px); - line-height: var(--nut-elevator-list-item-code-line-height, 35px); - font-size: var(--nut-elevator-list-item-code-font-size, 14px); + padding: var(--nut-elevator-list-item-code-padding, 0 0.5rem); + height: var(--nut-elevator-list-item-code-height, 0.875rem); + line-height: var(--nut-elevator-list-item-code-line-height, 0.875rem); + font-size: var(--nut-elevator-list-item-code-font-size, 0.35rem); color: var(--nut-elevator-list-fixed-color, var(--nut-primary-color, #fa2c19)); font-weight: var(--nut-elevator-list-item-code-font-weight, 500); background-color: var(--nut-elevator-list-fixed-bg-color, var(--nut-white, #fff)); + -webkit-box-sizing: border-box; box-sizing: border-box; - box-shadow: var(--nut-elevator-list-fixed-box-shadow, 0 0 10px #eee); + -webkit-box-shadow: var(--nut-elevator-list-fixed-box-shadow, 0 0 0.25rem #eee); + box-shadow: var(--nut-elevator-list-fixed-box-shadow, 0 0 0.25rem #eee); z-index: 1; } .nut-elevator__code--current { position: var(--nut-elevator-list-item-code-current-position, absolute); - right: var(--nut-elevator-list-item-code-current-right, 60px); + right: var(--nut-elevator-list-item-code-current-right, 1.5rem); top: var(--nut-elevator-list-item-code-current-top, 50%); + -webkit-transform: var(--nut-elevator-list-item-code-current-transform, translateY(-50%)); + -ms-transform: var(--nut-elevator-list-item-code-current-transform, translateY(-50%)); transform: var(--nut-elevator-list-item-code-current-transform, translateY(-50%)); - width: var(--nut-elevator-list-item-code-current-width, 45px); - height: var(--nut-elevator-list-item-code-current-height, 45px); - line-height: var(--nut-elevator-list-item-code-current-line-height, 45px); + width: var(--nut-elevator-list-item-code-current-width, 1.125rem); + height: var(--nut-elevator-list-item-code-current-height, 1.125rem); + line-height: var(--nut-elevator-list-item-code-current-line-height, 1.125rem); border-radius: var(--nut-elevator-list-item-code-current-border-radius, 50%); background: var(--nut-elevator-list-item-code-current-bg-color, #fff); - box-shadow: var(--nut-elevator-list-item-code-current-box-shadow, 0 3px 3px 1px rgb(240, 240, 240)); + -webkit-box-shadow: var(--nut-elevator-list-item-code-current-box-shadow, 0 0.075rem 0.075rem 0.025rem rgb(240, 240, 240)); + box-shadow: var(--nut-elevator-list-item-code-current-box-shadow, 0 0.075rem 0.075rem 0.025rem rgb(240, 240, 240)); text-align: var(--nut-elevator-list-item-code-current-text-align, center); } .nut-elevator__bars { position: var(--nut-elevator-list-item-bars-position, absolute); - right: var(--nut-elevator-list-item-bars-right, 8px); + right: var(--nut-elevator-list-item-bars-right, 0.2rem); top: var(--nut-elevator-list-item-bars-top, 50%); + -webkit-transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); + -ms-transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); - padding: var(--nut-elevator-list-item-bars-padding, 15px 0); + padding: var(--nut-elevator-list-item-bars-padding, 0.375rem 0); background-color: var(--nut-elevator-list-item-bars-background-color, #eeeff2); - border-radius: var(--nut-elevator-list-item-bars-border-radius, 6px); + border-radius: var(--nut-elevator-list-item-bars-border-radius, 0.15rem); text-align: var(--nut-elevator-list-item-bars-text-align, center); z-index: var(--nut-elevator-list-item-bars-z-index, 1); } .nut-elevator__bars__inner__item { display: block; - padding: var(--nut-elevator-list-item-bars-inner-item-padding, 3px); - font-size: var(--nut-elevator-list-item-bars-inner-item-font-size, 10px); + padding: var(--nut-elevator-list-item-bars-inner-item-padding, 0.075rem); + font-size: var(--nut-elevator-list-item-bars-inner-item-font-size, 0.25rem); } .nut-elevator__bars__inner__item.active { color: var(--nut-elevator-list-item-bars-inner-item-active-color, var(--nut-primary-color, #fa2c19)); @@ -5935,17 +7510,23 @@ textarea { } .nut-theme-dark .nut-address .nut-address__exist .nut-address__exist-choose, .nut-theme-dark .nut-address-custom-buttom { - border-top: 1px solid var(--nut-dark-background, #131313); + border-top: 0.025rem solid var(--nut-dark-background, #131313); } .nut-address { display: block; } .nut-address__header { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - height: 68px; - padding: 0 20px; + height: 1.7rem; + padding: 0 0.5rem; text-align: center; font-weight: 700; color: #333; @@ -5953,149 +7534,171 @@ textarea { .nut-address__header__title { display: block; color: var(--nut-address-header-title-color, #262626); - font-size: var(--nut-address-header-title-font-size, 18px); + font-size: var(--nut-address-header-title-font-size, 0.45rem); } .nut-address .nut-address__custom { display: block; } .nut-address .nut-address__custom .nut-address__region { position: relative; - padding: 0 20px; + padding: 0 0.5rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - font-size: var(--nut-address-region-tab-font-size, 13px); + font-size: var(--nut-address-region-tab-font-size, 0.325rem); color: var(--nut-address-region-tab-color, #1d1e1e); } .nut-address .nut-address__custom .nut-address__region .nut-address__region-item { position: relative; - min-width: 2px; - margin-right: 30px; + min-width: 0.05rem; + margin-right: 0.75rem; display: block; } .nut-address .nut-address__custom .nut-address__region .nut-address__region-item.active { font-weight: var(--nut-address-region-tab-active-item-font-weight, bold); } -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item view { +.nut-address .nut-address__custom .nut-address__region .nut-address__region-item taro-view-core { display: block; - max-width: 100px; + max-width: 2.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nut-address .nut-address__custom .nut-address__region .nut-address__region-item span { display: inline-block; - max-width: 100px; + max-width: 2.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nut-address .nut-address__custom .nut-address__region .nut-address__region-item .nut-address__region-line--mini { position: absolute; - bottom: -10px; + bottom: -0.25rem; left: 0; display: inline-block; - margin-top: 5px; + margin-top: 0.125rem; width: 0; - height: 3px; + height: 0.075rem; background: var(--nut-address-region-tab-line, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); + -webkit-transition: 0.2s all linear; transition: 0.2s all linear; } .nut-address .nut-address__custom .nut-address__region .nut-address__region-item .nut-address__region-line--mini.active { - width: 26px; + width: 0.65rem; } .nut-address .nut-address__custom .nut-address__region .nut-address__region-line { position: absolute; - bottom: -10px; - left: 20px; + bottom: -0.25rem; + left: 0.5rem; display: inline-block; - margin-top: 5px; - width: 26px; - height: 3px; + margin-top: 0.125rem; + width: 0.65rem; + height: 0.075rem; background: var(--nut-address-region-tab-line, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); + -webkit-transition: 0.2s all linear; transition: 0.2s all linear; border-radius: var(--nut-address-region-tab-line-border-radius, 0); opacity: var(--nut-address-region-tab-line-opacity, 1); } .nut-address .nut-address__custom .nut-address__detail { display: block; - margin: 20px 20px 0; + margin: 0.5rem 0.5rem 0; } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list { - height: 270px; + height: 6.75rem; + -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list .nut-address__detail-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - font-size: var(--nut-address-region-item-font-size, var(--nut-font-size-1, 12px)); + font-size: var(--nut-address-region-item-font-size, var(--nut-font-size-1, 0.3rem)); color: var(--nut-address-region-item-color, #333); } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list .nut-address__detail-item.active { font-weight: 700; } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list .nut-address__detail-item > div { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin: 10px 0; + margin: 0.25rem 0; } .nut-address .nut-address__custom .nut-address__elevator-group { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - margin-top: 20px; + margin-top: 0.5rem; } .nut-address .nut-address__exist { display: block; - margin-top: 15px; + margin-top: 0.375rem; } .nut-address .nut-address__exist .nut-address__exist-group { - padding: 15px 20px 0; - height: 279px; + padding: 0.375rem 0.5rem 0; + height: 6.975rem; overflow-y: scroll; } .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list { + -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-bottom: 20px; - font-size: var(--nut-font-size-1, 12px); - line-height: 14px; + margin-bottom: 0.5rem; + font-size: var(--nut-font-size-1, 0.3rem); + line-height: 0.35rem; color: #333; } .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item.active { font-weight: 700; } .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item .exist-item-icon { - margin-right: var(--nut-address-item-margin-right, 9px); + margin-right: var(--nut-address-item-margin-right, 0.225rem); color: var(--nut-address-icon-color, var(--nut-primary-color, #fa2c19)) !important; } .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item span { display: inline-block; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-address .nut-address__exist .nut-address__exist-choose { width: 100%; - height: 54px; - padding: 6px 0 0; - border-top: 1px solid #f2f2f2; + height: 1.35rem; + padding: 0.15rem 0 0; + border-top: 0.025rem solid #f2f2f2; } .nut-address .nut-address__exist .nut-address__exist-choose .nut-address__exist-choose-btn { width: 90%; - height: 42px; - line-height: 42px; + height: 1.05rem; + line-height: 1.05rem; margin: auto; text-align: center; background: var( --nut-button-primary-background-color, linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) ); - border-radius: 21px; - font-size: 15px; + border-radius: 0.525rem; + font-size: 0.375rem; color: var(--nut-white, #fff); } .nut-address-select-icon { - margin-right: var(--nut-address-item-margin-right, 9px); + margin-right: var(--nut-address-item-margin-right, 0.225rem); color: var(--nut-address-icon-color, var(--nut-primary-color, #fa2c19)) !important; } .nut-barrage { @@ -6105,33 +7708,43 @@ textarea { width: 100%; height: 100%; overflow: hidden; + -webkit-box-sizing: border-box; box-sizing: border-box; --move-distance: '300%'; } .nut-barrage__item { - width: 100px; + width: 2.5rem; display: block; position: absolute; right: 0; - padding: 3px 25px; - border-radius: 50px; - font-size: 12px; + padding: 0.075rem 0.625rem; + border-radius: 1.25rem; + font-size: 0.3rem; text-align: center; white-space: pre; + -webkit-transform: translate(100%); + -ms-transform: translate(100%); transform: translate(100%); + background: -webkit-gradient(linear, left top, right top, from(#00000026), to(#0000)); + background: -webkit-linear-gradient(left, #00000026, #0000); background: linear-gradient(to right, #00000026, #0000); } .nut-barrage__item.move { will-change: transform; + -webkit-animation-name: moving; animation-name: moving; + -webkit-animation-timing-function: linear; animation-timing-function: linear; + -webkit-animation-play-state: running; animation-play-state: running; } @keyframes moving { 0% { + -webkit-transform: translate(100%); transform: translate(100%); } to { + -webkit-transform: translate(var(--move-distance)); transform: translate(var(--move-distance)); } } @@ -6140,6 +7753,7 @@ textarea { -webkit-transform: translateX(100%); } to { + -webkit-transform: translate(var(--move-distance)); transform: translate(var(--move-distance)); } } @@ -6149,9 +7763,15 @@ textarea { .nut-signature .nut-signature-inner { height: 8rem; margin-bottom: 1rem; - border: 1px solid #dadada; + border: 0.025rem solid #dadada; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-signature .spcanvas_WEAPP { @@ -6162,7 +7782,7 @@ textarea { width: 100%; } .nut-signature .nut-signature-btn { - margin-right: 15px; + margin-right: 0.375rem; } .nut-theme-dark .nut-time-select { background-color: var(--nut-dark-background2, #1b1b1b); @@ -6185,32 +7805,36 @@ textarea { overflow: hidden; } .nut-time-select__title { + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: var(--nut-timeselect-title-width, 100%); - height: var(--nut-timeselect-title-height, 50px); - line-height: var(--nut-timeselect-title-line-height, 50px); - padding-bottom: 10px; - font-size: var(--nut-timeselect-title-font-size, var(--nut-font-size-2, 14px)); + height: var(--nut-timeselect-title-height, 1.25rem); + line-height: var(--nut-timeselect-title-line-height, 1.25rem); + padding-bottom: 0.25rem; + font-size: var(--nut-timeselect-title-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-timeselect-title-color, var(--nut-title-color, #1a1a1a)); text-align: center; } .nut-time-select__title__fixed { width: 100%; - height: 50px; + height: 1.25rem; } .nut-time-select__content { width: 100%; - height: calc(100% - var(--nut-timeselect-title-height, 50px) - 10px); + height: calc(100% - var(--nut-timeselect-title-height, 1.25rem) - 0.25rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-time-select__content__pannel { - width: 140px; + width: 3.5rem; height: 100%; overflow: auto; background-color: var(--nut-timeselect-pannel-bg-color, #f6f7f9); } .nut-time-select__content__detail { - width: calc(100% - 140px); + width: calc(100% - 3.5rem); height: 100%; overflow-y: auto; overflow-x: hidden; @@ -6224,14 +7848,21 @@ textarea { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-time-pannel { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - width: var(--nut-timeselect-timepannel-width, 140px); - height: var(--nut-timeselect-timepannel-height, 40px); - padding: var(--nut-timeselect-timepannel-padding, 15px); + width: var(--nut-timeselect-timepannel-width, 3.5rem); + height: var(--nut-timeselect-timepannel-height, 1rem); + padding: var(--nut-timeselect-timepannel-padding, 0.375rem); + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; color: var(--nut-timeselect-timepannel-text-color, var(--nut-title-color2, #666666)); - font-size: var(--nut-timeselect-timepannel-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-timeselect-timepannel-font-size, var(--nut-font-size-2, 0.35rem)); + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-time-pannel--curr { @@ -6250,31 +7881,33 @@ textarea { color: var(--nut-timeselect-timedetail-item-cur-text-color, var(--nut-primary-color, #fa2c19)); } .nut-time-detail { + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; - padding: var(--nut-timeselect-timedetail-padding, 0 5px 50px 13px); + padding: var(--nut-timeselect-timedetail-padding, 0 0.125rem 1.25rem 0.325rem); } .nut-time-detail__detail { width: 100%; } .nut-time-detail__detail__list__item { display: inline-block; - width: var(--nut-timeselect-timedetail-item-width, 100px); - height: var(--nut-timeselect-timedetail-item-height, 50px); - line-height: var(--nut-timeselect-timedetail-item-line-height, 50px); + width: var(--nut-timeselect-timedetail-item-width, 2.5rem); + height: var(--nut-timeselect-timedetail-item-height, 1.25rem); + line-height: var(--nut-timeselect-timedetail-item-line-height, 1.25rem); text-align: center; - margin-right: 10px; - margin-bottom: 10px; + margin-right: 0.25rem; + margin-bottom: 0.25rem; background-color: var(--nut-timeselect-timedetail-item-bg-color, #f6f7f9); - border-radius: var(--nut-timeselect-timedetail-item-border-radius, 5px); + border-radius: var(--nut-timeselect-timedetail-item-border-radius, 0.125rem); color: var(--nut-timeselect-timedetail-item-text-color, #333333); - font-size: var(--nut-timeselect-timedetail-item-text-font-size, var(--nut-font-size-2, 14px)); - border: 1px solid transparent; + font-size: var(--nut-timeselect-timedetail-item-text-font-size, var(--nut-font-size-2, 0.35rem)); + border: 0.025rem solid transparent; font-weight: 700; } .nut-time-detail__detail__list__item--curr { background-color: transparent; - border: 1px solid var(--nut-timeselect-timedetail-item-cur-border, var(--nut-primary-color, #fa2c19)); + border: 0.025rem solid var(--nut-timeselect-timedetail-item-cur-border, var(--nut-primary-color, #fa2c19)); color: var(--nut-timeselect-timedetail-item-cur-text-color, var(--nut-primary-color, #fa2c19)); position: relative; } @@ -6291,11 +7924,13 @@ textarea { content: ''; } .nut-time-detail__detail--afternoon { - margin-top: 30px; + margin-top: 0.75rem; } .overlay-fade-enter-active, .overlay-fade-leave-active { + -webkit-transition-property: opacity; transition-property: opacity; + -webkit-transition-timing-function: ease; transition-timing-function: ease; } .overlay-fade-enter-from, @@ -6321,7 +7956,9 @@ textarea { } .nut-popup-slide-center-enter-active, .nut-popup-slide-center-leave-active { + -webkit-transition-property: opacity; transition-property: opacity; + -webkit-transition-timing-function: ease; transition-timing-function: ease; } .nut-popup-slide-center-enter-from, @@ -6330,27 +7967,37 @@ textarea { } .nut-popup-slide-top-enter-from, .nut-popup-slide-top-leave-active { + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); transform: translateY(-100%); } .nut-popup-slide-right-enter-from, .nut-popup-slide-right-leave-active { + -webkit-transform: translate(100%); + -ms-transform: translate(100%); transform: translate(100%); } .nut-popup-slide-bottom-enter-from, .nut-popup-slide-bottom-leave-active { + -webkit-transform: translateY(100%); + -ms-transform: translateY(100%); transform: translateY(100%); } .nut-popup-slide-left-enter-from, .nut-popup-slide-left-leave-active { + -webkit-transform: translate(-100%); + -ms-transform: translate(-100%); transform: translate(-100%); } .nut-popup--center { top: 50%; left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .nut-popup--center.round { - border-radius: var(--nut-popup-border-radius, 20px); + border-radius: var(--nut-popup-border-radius, 0.5rem); } .nut-popup--bottom { bottom: 0; @@ -6358,7 +8005,7 @@ textarea { width: 100%; } .nut-popup--bottom.round { - border-radius: var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0 0; + border-radius: var(--nut-popup-border-radius, 0.5rem) var(--nut-popup-border-radius, 0.5rem) 0 0; } .nut-popup--bottom--safebottom { padding-bottom: constant(safe-area-inset-bottom); @@ -6369,14 +8016,14 @@ textarea { right: 0; } .nut-popup--right.round { - border-radius: var(--nut-popup-border-radius, 20px) 0 0 var(--nut-popup-border-radius, 20px); + border-radius: var(--nut-popup-border-radius, 0.5rem) 0 0 var(--nut-popup-border-radius, 0.5rem); } .nut-popup--left { top: 0; left: 0; } .nut-popup--left.round { - border-radius: 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0; + border-radius: 0 var(--nut-popup-border-radius, 0.5rem) var(--nut-popup-border-radius, 0.5rem) 0; } .nut-popup--top { top: 0; @@ -6384,7 +8031,7 @@ textarea { width: 100%; } .nut-popup--top.round { - border-radius: 0 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px); + border-radius: 0 0 var(--nut-popup-border-radius, 0.5rem) var(--nut-popup-border-radius, 0.5rem); } .nut-popup { position: fixed; @@ -6397,31 +8044,31 @@ textarea { position: absolute !important; z-index: 1; color: #969799; - font-size: 18px; + font-size: 0.45rem; cursor: pointer; - width: 30px; - height: 30px; - line-height: 30px; + width: 0.75rem; + height: 0.75rem; + line-height: 0.75rem; text-align: center; } .nut-popup__close-icon:active { opacity: 0.7; } .nut-popup__close-icon--top-left { - top: var(--nut-popup-close-icon-margin, 16px); - left: var(--nut-popup-close-icon-margin, 16px); + top: var(--nut-popup-close-icon-margin, 0.4rem); + left: var(--nut-popup-close-icon-margin, 0.4rem); } .nut-popup__close-icon--top-right { - top: var(--nut-popup-close-icon-margin, 16px); - right: var(--nut-popup-close-icon-margin, 16px); + top: var(--nut-popup-close-icon-margin, 0.4rem); + right: var(--nut-popup-close-icon-margin, 0.4rem); } .nut-popup__close-icon--bottom-left { - bottom: var(--nut-popup-close-icon-margin, 16px); - left: var(--nut-popup-close-icon-margin, 16px); + bottom: var(--nut-popup-close-icon-margin, 0.4rem); + left: var(--nut-popup-close-icon-margin, 0.4rem); } .nut-popup__close-icon--bottom-right { - right: var(--nut-popup-close-icon-margin, 16px); - bottom: var(--nut-popup-close-icon-margin, 16px); + right: var(--nut-popup-close-icon-margin, 0.4rem); + bottom: var(--nut-popup-close-icon-margin, 0.4rem); } .nut-theme-dark .nut-sku { background: var(--nut-dark-background, #131313); @@ -6445,76 +8092,106 @@ textarea { } .nut-sku { height: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; padding: 0; background: var(--nut-white, #fff); } .nut-sku-header { - height: 100px; + height: 2.5rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; - margin-top: 18px; - padding: 0 18px; + margin-top: 0.45rem; + padding: 0 0.45rem; } .nut-sku-header .nut-sku-header-img { - width: var(--nut-sku-product-img-width, 100px); - height: var(--nut-sku-product-img-height, var(--nut-sku-product-img-width, 100px)); + width: var(--nut-sku-product-img-width, 2.5rem); + height: var(--nut-sku-product-img-height, var(--nut-sku-product-img-width, 2.5rem)); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; - margin-right: 12px; + margin-right: 0.3rem; border-radius: var(--nut-sku-product-img-border-radius, 0); } .nut-sku-header-right { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; } .nut-sku-header-right-extra { - font-size: 12px; + font-size: 0.3rem; color: var(--nut-text-color, #808080); } .nut-sku-content { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; overflow-y: auto; overflow-x: hidden; - margin-top: 24px; - padding: 0 18px; + margin-top: 0.6rem; + padding: 0 0.45rem; } .nut-sku-content::-webkit-scrollbar { display: none; } .nut-sku-select-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-sku-select-item-title { - height: 13px; + height: 0.325rem; font-weight: var(--nut-sku-spec-title-font-weight, bold); - font-size: var(--nut-sku-spec-title-font-size, 13px); + font-size: var(--nut-sku-spec-title-font-size, 0.325rem); color: var(--nut-sku-spec-title-color, var(--nut-black, #000)); - margin-bottom: var(--nut-sku-spec-title-margin-bottom, 18px); + margin-bottom: var(--nut-sku-spec-title-margin-bottom, 0.45rem); } .nut-sku-select-item-skus { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-sku-select-item-skus-sku { - margin-right: var(--nut-sku-spec-margin-right, 12px); - height: var(--nut-sku-spec-height, 30px); - line-height: var(--nut-sku-spec-line-height, var(--nut-sku-spec-height, 30px)); - padding: var(--nut-sku-spec-padding, 0 18px); - border-radius: 15px; - font-size: var(--nut-sku-spec-font-size, 11px); + margin-right: var(--nut-sku-spec-margin-right, 0.3rem); + height: var(--nut-sku-spec-height, 0.75rem); + line-height: var(--nut-sku-spec-line-height, var(--nut-sku-spec-height, 0.75rem)); + padding: var(--nut-sku-spec-padding, 0 0.45rem); + border-radius: 0.375rem; + font-size: var(--nut-sku-spec-font-size, 0.275rem); color: var(--nut-sku-spec-color, var(--nut-black, #000)); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; - margin-bottom: 12px; + margin-bottom: 0.3rem; background: var(--nut-sku-spec-background, rgb(242, 242, 242)); - border: 1px solid rgb(242, 242, 242); + border: 0.025rem solid rgb(242, 242, 242); } .nut-sku-select-item-skus-sku.active { background: transparent; - border: var(--nut-sku-item-border, 1px solid var(--nut-primary-color, #fa2c19)); + border: var(--nut-sku-item-border, 0.025rem solid var(--nut-primary-color, #fa2c19)); color: var(--nut-primary-color, #fa2c19); position: relative; } @@ -6526,39 +8203,54 @@ textarea { left: 0; width: 100%; height: 100%; - border-radius: 15px; + border-radius: 0.375rem; background-color: var(--nut-sku-item-active-bg, var(--nut-primary-color, #fa2c19)); opacity: 0.15; content: ''; } .nut-sku-select-item-skus-sku.disable { color: var(--nut-text-color, #808080); + -webkit-text-decoration: var(--nut-sku-item-disable-line, line-through); text-decoration: var(--nut-sku-item-disable-line, line-through); } .nut-sku-stepper { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; - margin: 10px 0 30px; + margin: 0.25rem 0 0.75rem; } .nut-sku-stepper-title { font-weight: 700; - font-size: 13px; + font-size: 0.325rem; color: var(--nut-black, #000); - margin-right: 12px; + margin-right: 0.3rem; } .nut-sku-stepper-limit { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - font-size: 12px; + font-size: 0.3rem; color: var(--nut-text-color, #808080); } .nut-sku-stepper-count { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-sku-stepper-count-lowestBuy { - font-size: 12px; + font-size: 0.3rem; color: var(--nut-primary-color, #fa2c19); } .nut-sku-operate { @@ -6567,32 +8259,39 @@ textarea { .nut-sku-operate-desc { display: block; width: 100%; - padding: 10px 0; + padding: 0.25rem 0; text-align: center; background: #fbf9da; color: #de6a1c; - font-size: 12px; + font-size: 0.3rem; } .nut-sku-operate-btn { - height: var(--nut-sku-operate-btn-height, 54px); + height: var(--nut-sku-operate-btn-height, 1.35rem); width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; background: var(--nut-white, #fff); text-align: center; - padding: 0 18px; + padding: 0 0.45rem; + -webkit-box-sizing: border-box; box-sizing: border-box; border-top: var(--nut-sku-operate-btn-border-top, 0); } .nut-sku-operate-btn-item { width: 100%; - height: var(--nut-sku-operate-btn-item-height, 40px); - line-height: var(--nut-sku-operate-btn-item-line-height, var(--nut-sku-operate-btn-item-height, 40px)); - margin-right: 18px; + height: var(--nut-sku-operate-btn-item-height, 1rem); + line-height: var(--nut-sku-operate-btn-item-line-height, var(--nut-sku-operate-btn-item-height, 1rem)); + margin-right: 0.45rem; background: var(--nut-sku-opetate-bg-default, linear-gradient(90deg, var(--nut-primary-color, #fa2c19), var(--nut-primary-color-end, #fa6419) 100%)); - border-radius: 21px; - font-size: var(--nut-sku-operate-btn-item-font-size, 15px); + border-radius: 0.525rem; + font-size: var(--nut-sku-operate-btn-item-font-size, 0.375rem); font-weight: var(--nut-sku-operate-btn-item-font-weight, normal); color: var(--nut-white, #fff); } @@ -6612,106 +8311,110 @@ textarea { } .nut-price--symbol { display: inline-block; - font-size: var(--nut-font-size-3, 16px); + font-size: var(--nut-font-size-3, 0.4rem); } .nut-price--large, .nut-price--point { display: inline-block; - font-size: var(--nut-price-big-size, 24px); + font-size: var(--nut-price-big-size, 0.6rem); } .nut-price--decimal-large { display: inline-block; - font-size: var(--nut-price-decimal-big-size, 18px); + font-size: var(--nut-price-decimal-big-size, 0.45rem); } .nut-price--symbol-large { display: inline-block; - font-size: var(--nut-price-symbol-big-size, 18px); + font-size: var(--nut-price-symbol-big-size, 0.45rem); } .nut-price--normal { display: inline-block; - font-size: var(--nut-price-medium-size, 16px); + font-size: var(--nut-price-medium-size, 0.4rem); } .nut-price--decimal-normal { display: inline-block; - font-size: var(--nut-price-decimal-medium-size, 14px); + font-size: var(--nut-price-decimal-medium-size, 0.35rem); } .nut-price--symbol-normal { display: inline-block; - font-size: var(--nut-price-symbol-medium-size, 14px); + font-size: var(--nut-price-symbol-medium-size, 0.35rem); } .nut-price--small { display: inline-block; - font-size: var(--nut-price-small-size, 12px); + font-size: var(--nut-price-small-size, 0.3rem); } .nut-price--decimal-small { display: inline-block; - font-size: var(--nut-price-decimal-small-size, 10px); + font-size: var(--nut-price-decimal-small-size, 0.25rem); } .nut-price--symbol-small { display: inline-block; - font-size: var(--nut-price-symbol-small-size, 10px); + font-size: var(--nut-price-symbol-small-size, 0.25rem); } .nut-tag { - padding: 0 4px; + padding: 0 0.1rem; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - font-size: var(--nut-tag-font-size, 12px); - border-radius: var(--nut-tag-default-border-radius, 4px); + font-size: var(--nut-tag-font-size, 0.3rem); + border-radius: var(--nut-tag-default-border-radius, 0.1rem); height: var(--nut-tag-height, auto); } .nut-tag--default { color: var(--nut-tag-default-color, #ffffff); background: var(--nut-tag-default-background-color, #000000); - border: var(--nut-tag-border-width, 1px) solid transparent; + border: var(--nut-tag-border-width, 0.025rem) solid transparent; } .nut-tag--default.nut-tag--plain { color: var(--nut-tag-default-background-color, #000000); - border: var(--nut-tag-border-width, 1px) solid var(--nut-tag-default-background-color, #000000); + border: var(--nut-tag-border-width, 0.025rem) solid var(--nut-tag-default-background-color, #000000); } .nut-tag--primary { color: var(--nut-tag-default-color, #ffffff); background: var(--nut-tag-primary-background-color, #3460fa); - border: var(--nut-tag-border-width, 1px) solid transparent; + border: var(--nut-tag-border-width, 0.025rem) solid transparent; } .nut-tag--primary.nut-tag--plain { color: var(--nut-tag-primary-background-color, #3460fa); - border: var(--nut-tag-border-width, 1px) solid var(--nut-tag-primary-background-color, #3460fa); + border: var(--nut-tag-border-width, 0.025rem) solid var(--nut-tag-primary-background-color, #3460fa); } .nut-tag--success { color: var(--nut-tag-default-color, #ffffff); background: var(--nut-tag-success-background-color, #4fc08d); - border: var(--nut-tag-border-width, 1px) solid transparent; + border: var(--nut-tag-border-width, 0.025rem) solid transparent; } .nut-tag--success.nut-tag--plain { color: var(--nut-tag-success-background-color, #4fc08d); - border: var(--nut-tag-border-width, 1px) solid var(--nut-tag-success-background-color, #4fc08d); + border: var(--nut-tag-border-width, 0.025rem) solid var(--nut-tag-success-background-color, #4fc08d); } .nut-tag--danger { color: var(--nut-tag-default-color, #ffffff); background: var(--nut-tag-danger-background-color, linear-gradient(135deg, rgb(242, 20, 12) 0%, rgb(232, 34, 14) 70%, rgb(242, 77, 12) 100%)); - border: var(--nut-tag-border-width, 1px) solid transparent; + border: var(--nut-tag-border-width, 0.025rem) solid transparent; } .nut-tag--danger.nut-tag--plain { color: var(--nut-tag-danger-background-color-plain, #df3526); - border: var(--nut-tag-border-width, 1px) solid var(--nut-tag-danger-background-color-plain, #df3526); + border: var(--nut-tag-border-width, 0.025rem) solid var(--nut-tag-danger-background-color-plain, #df3526); } .nut-tag--warning { color: var(--nut-tag-default-color, #ffffff); background: var(--nut-tag-warning-background-color, #f3812e); - border: var(--nut-tag-border-width, 1px) solid transparent; + border: var(--nut-tag-border-width, 0.025rem) solid transparent; } .nut-tag--warning.nut-tag--plain { color: var(--nut-tag-warning-background-color, #f3812e); - border: var(--nut-tag-border-width, 1px) solid var(--nut-tag-warning-background-color, #f3812e); + border: var(--nut-tag-border-width, 0.025rem) solid var(--nut-tag-warning-background-color, #f3812e); } .nut-tag--round { - border-radius: var(--nut-tag-round-border-radius, 8px); + border-radius: var(--nut-tag-round-border-radius, 0.2rem); } .nut-tag--mark { - border-radius: 0 12px 12px 0; + border-radius: 0 0.3rem 0.3rem 0; } .nut-tag--close { - margin-left: 4px; + margin-left: 0.1rem; cursor: pointer; } .nut-theme-dark .nut-card .nut-card__right { @@ -6719,11 +8422,15 @@ textarea { } .nut-card { width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-card .nut-card__left { - width: 120px; - height: 120px; + width: 3rem; + height: 3rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; background-color: var(--nut-card-left-background-color, inherit); border-radius: var(--nut-card-left-border-radius, 0); @@ -6734,8 +8441,10 @@ textarea { height: 100%; } .nut-card .nut-card__right { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - padding: 0 10px 8px; + padding: 0 0.25rem 0.2rem; } .nut-card .nut-card__right .nut-card__right__title { display: -webkit-box; @@ -6744,54 +8453,68 @@ textarea { overflow: hidden; word-break: break-all; line-height: 1.5; - font-size: 14px; + font-size: 0.35rem; } .nut-card .nut-card__right .nut-card__right__price { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - height: 18px; - line-height: 18px; - margin-top: 9px; + height: 0.45rem; + line-height: 0.45rem; + margin-top: 0.225rem; } .nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--symbol-large { - font-size: 12px; + font-size: 0.3rem; } .nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--large { - font-size: 18px; + font-size: 0.45rem; } .nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--decimal-large { - font-size: 12px; + font-size: 0.3rem; } .nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price { - margin-left: 2px; + margin-left: 0.05rem; color: #d2a448; } .nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--symbol-large, .nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--large, .nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--decimal-large { - font-size: 12px; + font-size: 0.3rem; } .nut-card .nut-card__right .nut-card__right__other { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: 5px 0 2px; + padding: 0.125rem 0 0.05rem; } .nut-card .nut-card__right .nut-card__right__other .nut-tag { border: none; - padding: 0 2px; - margin-right: 5px; - font-size: var(--nut-card-font-size-0, var(--nut-font-size-0, 10px)); + padding: 0 0.05rem; + margin-right: 0.125rem; + font-size: var(--nut-card-font-size-0, var(--nut-font-size-0, 0.25rem)); } .nut-card .nut-card__right .nut-card__right__shop { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-top: 4px; + margin-top: 0.1rem; } .nut-card .nut-card__right .nut-card__right__shop .nut-card__right__shop__name { line-height: 1.5; color: #999; - font-size: 12px; + font-size: 0.3rem; } .nut-theme-dark .nut-input-number__icon { color: var(--nut-dark-color, var(--nut-white, #fff)); @@ -6799,65 +8522,78 @@ textarea { .nut-theme-dark .nut-input-number__icon--disabled { color: var(--nut-dark-color-gray, var(--nut-text-color, #808080)); } -.nut-theme-dark .nut-input-number input, +.nut-theme-dark .nut-input-number taro-input-core, .nut-theme-dark .nut-input-number__text--readonly { background-color: var(--nut-dark-background, #131313); color: var(--nut-dark-color, var(--nut-white, #fff)); - border: 1px solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); + border: 0.025rem solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); } -.nut-theme-dark .nut-input-number--disabled input { +.nut-theme-dark .nut-input-number--disabled taro-input-core { color: var(--nut-dark-color-gray, var(--nut-text-color, #808080)); } .nut-input-number { display: var(--nut-inputnumber-display, inline-flex); + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; border: var(--nut-inputnumber-border, 0); border-radius: var(--nut-inputnumber-border-radius, 0); height: var(--nut-inputnumber-height, auto); line-height: var(--nut-inputnumber-line-height, normal); + -webkit-box-sizing: var(--nut-inputnumber-border-box, content-box); box-sizing: var(--nut-inputnumber-border-box, content-box); } -.nut-input-number--disabled input { +.nut-input-number--disabled taro-input-core { color: var(--nut-inputnumber-icon-void-color, var(--nut-disable-color, #cccccc)); } .nut-input-number__icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; color: var(--nut-inputnumber-icon-color, var(--nut-title-color, #1a1a1a)); cursor: pointer; } .nut-input-number__icon .nut-icon { - width: var(--nut-inputnumber-icon-size, 20px); - height: var(--nut-inputnumber-icon-size, 20px); - font-size: var(--nut-inputnumber-icon-size, 20px); + width: var(--nut-inputnumber-icon-size, 0.5rem); + height: var(--nut-inputnumber-icon-size, 0.5rem); + font-size: var(--nut-inputnumber-icon-size, 0.5rem); } .nut-input-number__icon--disabled { color: var(--nut-inputnumber-icon-void-color, var(--nut-disable-color, #cccccc)); cursor: not-allowed; } -.nut-input-number input { +.nut-input-number taro-input-core { border-top: 0 !important; border-bottom: 0 !important; } -.nut-input-number input, +.nut-input-number taro-input-core, .nut-input-number__text--readonly, .nut-input-number__text--input { - width: var(--nut-inputnumber-input-width, 40px); + width: var(--nut-inputnumber-input-width, 1rem); height: 100%; text-align: center; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; outline: none; border: var(--nut-inputnumber-input-border, 0); - font-size: var(--nut-inputnumber-input-font-size, 12px); + font-size: var(--nut-inputnumber-input-font-size, 0.3rem); color: var(--nut-inputnumber-input-font-color, var(--nut-title-color, #1a1a1a)); - margin: var(--nut-inputnumber-input-margin, 0 6px); + margin: var(--nut-inputnumber-input-margin, 0 0.15rem); background-color: var(--nut-inputnumber-input-background-color, var(--nut-help-color, #f5f5f5)); - border-radius: var(--nut-inputnumber-input-border-radius, 4px); + border-radius: var(--nut-inputnumber-input-border-radius, 0.1rem); } -.nut-input-number input::-webkit-outer-spin-button, -.nut-input-number input::-webkit-inner-spin-button { +.nut-input-number taro-input-core::-webkit-outer-spin-button, +.nut-input-number taro-input-core::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -6865,6 +8601,18 @@ textarea { .nut-theme-dark .nut-ecard { color: var(--nut-dark-color3, rgba(232, 230, 227, 0.8)); } +.nut-theme-dark .nut-ecard ::-webkit-input-placeholder { + color: #1d1f20; +} +.nut-theme-dark .nut-ecard ::-moz-placeholder { + color: #1d1f20; +} +.nut-theme-dark .nut-ecard :-ms-input-placeholder { + color: #1d1f20; +} +.nut-theme-dark .nut-ecard ::-ms-input-placeholder { + color: #1d1f20; +} .nut-theme-dark .nut-ecard ::placeholder { color: #1d1f20; } @@ -6873,7 +8621,7 @@ textarea { } .nut-theme-dark .nut-ecard .nut-ecard__list__item.active { background: var(--nut-dark-background6, #380e08); - outline: 1px solid var(--nut-dark-color2, #f2270c); + outline: 0.025rem solid var(--nut-dark-color2, #f2270c); color: var(--nut-dark-color2, #f2270c); } .nut-theme-dark .nut-ecard .nut-ecard__list__input { @@ -6883,10 +8631,10 @@ textarea { .nut-theme-dark .nut-ecard .nut-ecard__list__input.active { background: var(--nut-dark-background7, #707070); } -.nut-theme-dark .nut-ecard .nut-ecard__list__input.active > view > input { +.nut-theme-dark .nut-ecard .nut-ecard__list__input.active > view > taro-input-core { background: var(--nut-dark-background7, #707070); } -.nut-theme-dark .nut-ecard .nut-ecard__list__input .nut-ecard__list__input--con > input { +.nut-theme-dark .nut-ecard .nut-ecard__list__input .nut-ecard__list__input--con > taro-input-core { background-color: transparent; color: var(--nut-dark-color3, rgba(232, 230, 227, 0.8)); } @@ -6895,77 +8643,107 @@ textarea { } .nut-ecard__title { line-height: 1; - font-size: 15px; + font-size: 0.375rem; font-weight: 400; } .nut-ecard__list { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; - margin-top: 15px; + margin-top: 0.375rem; } .nut-ecard__list__item { width: 48%; - height: 46px; + height: 1.15rem; background: var(--nut-ecard-bg-color, #f0f2f5); - border-radius: 4px; - margin-bottom: 12px; + border-radius: 0.1rem; + margin-bottom: 0.3rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-ecard__list__item.active { background: var(--nut-white, #fff); - outline: 1px solid var(--nut-primary-color, #fa2c19); - border-radius: 4px; + outline: 0.025rem solid var(--nut-primary-color, #fa2c19); + border-radius: 0.1rem; } .nut-ecard__list__input { width: 100%; - height: 46px; + height: 1.15rem; background: var(--nut-ecard-bg-color, #f0f2f5); color: #000c; - border-radius: 4px; - display: flex; - padding: 0 15px 0 20px; - font-size: 14px; + border-radius: 0.1rem; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0 0.375rem 0 0.5rem; + font-size: 0.35rem; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-ecard__list__input--con { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; } -.nut-ecard__list__input--con input, +.nut-ecard__list__input--con taro-input-core, .nut-ecard__list__input--con .nut-ecard-input { caret-color: var(--nut-primary-color, #fa2c19); text-align: right; background: transparent; - margin-right: 10px; + margin-right: 0.25rem; outline: 0 none; border: 0; text-decoration: none; } .nut-ecard__list__input.active { background: var(--nut-white, #fff); - outline: 1px solid var(--nut-primary-color, #fa2c19); + outline: 0.025rem solid var(--nut-primary-color, #fa2c19); } -.nut-ecard__list__input.active > view > input { +.nut-ecard__list__input.active > view > taro-input-core { background: var(--nut-white, #fff); } .nut-ecard__list__step { width: 100%; - margin-top: 17px; + margin-top: 0.425rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; - font-size: 20px; + font-size: 0.5rem; font-weight: 400; color: var(--nut-primary-color, #fa2c19); } .nut-swipe { position: relative; display: block; + cursor: -webkit-grab; cursor: grab; + -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); } .nut-swipe__left, @@ -6976,10 +8754,12 @@ textarea { } .nut-swipe__left { left: 0; + -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .nut-swipe__right { right: 0; + -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .nut-swipe__content { @@ -6988,7 +8768,7 @@ textarea { .nut-theme-dark .nut-address-list-swipe, .nut-theme-dark .nut-address-list-general { background-color: var(--nut-dark-background2, #1b1b1b); - border-bottom: 1px solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); + border-bottom: 0.025rem solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-theme-dark .nut-address-list-swipe__mask, @@ -7010,17 +8790,21 @@ textarea { overflow: hidden; } .nut-address-list:last-child { - padding-bottom: 84px; + padding-bottom: 2.1rem; } .nut-address-list-swipe, .nut-address-list-general { - min-height: 76px; - padding: 5px 10px; + min-height: 1.9rem; + padding: 0.125rem 0.25rem; background-color: var(--nut-addresslist-bg, #fff); - border-bottom: 1px solid var(--nut-addresslist-border, #f0f0f0); + border-bottom: 0.025rem solid var(--nut-addresslist-border, #f0f0f0); color: var(--nut-addresslist-font-color, #333333); - font-size: var(--nut-addresslist-font-size, 16px); + font-size: var(--nut-addresslist-font-size, 0.4rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; position: relative; } @@ -7032,10 +8816,16 @@ textarea { bottom: 0; right: 0; background-color: var(--nut-addresslist-mask-bg, rgba(0, 0, 0, 0.4)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; justify-content: space-around; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: 0 40px; + padding: 0 1rem; z-index: 2001; } .nut-address-list-swipe__mask-copy, @@ -7044,16 +8834,23 @@ textarea { .nut-address-list-general__mask-copy, .nut-address-list-general__mask-set, .nut-address-list-general__mask-del { - height: 55px; - width: 55px; - padding: 0 10px; + height: 1.375rem; + width: 1.375rem; + padding: 0 0.25rem; border-radius: 50%; text-align: center; background-color: var(--nut-white, #fff); - font-size: 14px; + font-size: 0.35rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-address-list-swipe__mask-set, @@ -7076,41 +8873,51 @@ textarea { width: 100%; } .nut-address-list-item__info { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-address-list-item__info-contact { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; justify-content: flex-start; font-weight: 700; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-address-list-item__info-contact-name { - max-width: 145px; + max-width: 3.625rem; word-wrap: break-word; } .nut-address-list-item__info-contact-tel { - margin-left: 8px; - max-width: 110px; + margin-left: 0.2rem; + max-width: 2.75rem; word-wrap: break-word; } .nut-address-list-item__info-contact-default { - margin-left: 5px; - padding: 0 6px; - height: 16px; - line-height: 16px; + margin-left: 0.125rem; + padding: 0 0.15rem; + height: 0.4rem; + line-height: 0.4rem; background: var(--nut-addresslist-contnts-contact-default, var(--nut-primary-color, #fa2c19)); - border-radius: 2px; - font-size: 12px; + border-radius: 0.05rem; + font-size: 0.3rem; color: var(--nut-addresslist-contnts-contact-color, var(--nut-white, #fff)); } .nut-address-list-item__info-handle-edit { - margin-left: 15px; + margin-left: 0.375rem; } .nut-address-list-item__addr { color: var(--nut-addresslist-addr-font-color, #666666); - font-size: var(--nut-addresslist-addr-font-size, 12px); - margin-top: 5px; + font-size: var(--nut-addresslist-addr-font-size, 0.3rem); + margin-top: 0.125rem; } .nut-address-list__bottom { position: fixed; @@ -7120,9 +8927,10 @@ textarea { bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); width: 100%; - padding: 12px 18px 24px; + padding: 0.3rem 0.45rem 0.6rem; z-index: 100000; background-color: var(--nut-addresslist-bg, #fff); + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-address-list .nut-address-list__mask-bottom { @@ -7151,6 +8959,8 @@ textarea { background: var(--nut-category-list-item-checked-img-bg-color, var(--nut-primary-color, #fa2c19)); } .nut-category__cateList { + display: -webkit-flex; + display: -ms-flexbox; display: flex; background: var(--nut-category-bg-color, rgb(255, 255, 255)); } @@ -7159,19 +8969,27 @@ textarea { } .nut-category__cateListItemChecked, .nut-category__cateListItem { - width: 100px; - height: 50px; - font-size: 13px; + width: 2.5rem; + height: 1.25rem; + font-size: 0.325rem; font-weight: 400; color: var(--nut-category-list-item-color, var(--nut-title-color, #1a1a1a)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-transition: all 0.3s; transition: all 0.3s; } .nut-category__cateListItemChecked { background: var(--nut-category-list-item-checked-color, rgb(255, 255, 255)); font-weight: 500; + -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; } @@ -7179,8 +8997,8 @@ textarea { position: absolute; content: ''; left: 0; - width: 5px; - height: 18px; + width: 0.125rem; + height: 0.45rem; background: var(--nut-category-list-item-checked-img-bg-color, var(--nut-primary-color, #fa2c19)); } .nut-theme-dark .nut-category-pane__childTitle { @@ -7190,75 +9008,97 @@ textarea { background: var(--nut-dark-background2, #1b1b1b); } .nut-category-pane__cateListRight { - padding-left: 15px; + padding-left: 0.375rem; background: var(--nut-category-bg-color, rgb(255, 255, 255)); } .nut-category-pane__childTitle { - margin-top: 15px; - margin-bottom: 15px; - font-size: 13px; + margin-top: 0.375rem; + margin-bottom: 0.375rem; + font-size: 0.325rem; font-weight: 500; color: var(--nut-category-pane-title-color, rgb(51, 51, 51)); } .nut-category-pane__childItemList { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-category-pane__childItem { - margin-right: 10px; + margin-right: 0.25rem; } .nut-category-pane__childImg { - width: 75px; - height: 75px; - border-radius: 5px; + width: 1.875rem; + height: 1.875rem; + border-radius: 0.125rem; } .nut-category-pane__skuName { - margin-left: 15px; - margin-top: 15px; - margin-right: 10px; - width: 75px; - height: 40px; - border: 1px solid var(--nut-category-pane-border-color, rgb(153, 153, 153)); - border-radius: 5px; - font-size: 12px; + margin-left: 0.375rem; + margin-top: 0.375rem; + margin-right: 0.25rem; + width: 1.875rem; + height: 1rem; + border: 0.025rem solid var(--nut-category-pane-border-color, rgb(153, 153, 153)); + border-radius: 0.125rem; + font-size: 0.3rem; font-weight: 400; color: var(--nut-category-pane-gray-color, #666); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-category-pane__skuName:nth-child(3n) { margin-right: 0; } .nut-category-pane__skuName:nth-child(n + 4) { - margin-top: 15px; + margin-top: 0.375rem; } .nut-category-pane__skuImg { - font-size: 12px; + font-size: 0.3rem; font-weight: 400; color: var(--nut-category-pane-gray-color, #666); - margin-top: 10px; - margin-bottom: 10px; + margin-top: 0.25rem; + margin-bottom: 0.25rem; text-align: center; } .nut-category-pane__selfItemList { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-rate { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; } .nut-rate-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; position: relative; - margin-right: 14px; + margin-right: 0.35rem; } .nut-rate-item:last-child { margin-right: 0; } .nut-rate-item__icon { color: var(--nut-rate-icon-color, var(--nut-primary-color, #fa2c19)); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; } @@ -7266,9 +9106,13 @@ textarea { color: var(--nut-rate-icon-void-color, var(--nut-disable-color, #cccccc)); } .nut-rate-item__icon--full { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-rate-item__icon--half { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: absolute; width: 50%; @@ -7284,107 +9128,131 @@ textarea { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-theme-dark .nut-comment .nut-comment-shop { - border-top: 1px solid var(--nut-dark-color, var(--nut-white, #fff)); + border-top: 0.025rem solid var(--nut-dark-color, var(--nut-white, #fff)); } .nut-comment { width: 100%; - font-size: 12px; + font-size: 0.3rem; } .nut-comment-header { - margin-bottom: 10px; + margin-bottom: 0.25rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-comment-header__user { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-comment-header__user-avter { - width: 20px; - height: 20px; + width: 0.5rem; + height: 0.5rem; border-radius: 50%; - margin-right: 10px; + margin-right: 0.25rem; overflow: hidden; } .nut-comment-header__user-avter img { - width: 20px; - height: 20px; + width: 0.5rem; + height: 0.5rem; } .nut-comment-header__user-name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - margin-right: 5px; - font-size: 12px; + margin-right: 0.125rem; + font-size: 0.3rem; color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); width: auto; - max-width: 80px; + max-width: 2rem; } .nut-comment-header__user-default { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-comment-header__user-default-name { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-bottom: 3px; + margin-bottom: 0.075rem; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 12px; + font-size: 0.3rem; color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); } .nut-comment-header__user-default-name > span { - margin-right: 8px; + margin-right: 0.2rem; } .nut-comment-header__user-complex { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); } .nut-comment-header__user-complex-name { - margin-right: 10px; + margin-right: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 80px; + max-width: 2rem; } -.nut-comment-header__user-complex image { - max-width: 50px; - height: 16px; +.nut-comment-header__user-complex taro-image-core { + max-width: 1.25rem; + height: 0.4rem; } .nut-comment-header__user-score .nut-rate-item { display: block !important; - line-height: 10px; + line-height: 0.25rem; } .nut-comment-header__user-score .nut-rate-item .nut-icon { - line-height: 10px; + line-height: 0.25rem; } .nut-comment-header__time { - width: 100px; + width: 2.5rem; text-align: right; - font-size: 12px; + font-size: 0.3rem; color: var(--nut-comment-header-time-color, rgb(153, 153, 153)); } .nut-comment-header__complex-score { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-bottom: 10px; + margin-bottom: 0.25rem; } .nut-comment-header__complex-score .nut-rate-item { display: block !important; - line-height: 12px; + line-height: 0.3rem; } .nut-comment-header__complex-score .nut-rate-item .nut-icon { - line-height: 12px; + line-height: 0.3rem; } .nut-comment-header__complex-score-i { - margin: 0 8px 0 6px; + margin: 0 0.2rem 0 0.15rem; display: inline-block; - width: 1px; - height: 6px; + width: 0.025rem; + height: 0.15rem; background: var(--nut-text-color, #808080); opacity: 0.4; font-style: inherit; @@ -7397,8 +9265,8 @@ textarea { } .nut-comment-header__labels--item { display: inline-block; - height: 16px; - margin-right: 4px; + height: 0.4rem; + margin-right: 0.1rem; } .nut-comment-header__labels--item:last-child { margin-right: 0; @@ -7411,63 +9279,79 @@ textarea { white-space: pre-wrap; } .nut-comment-images { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - margin: 10px 0 12px; + margin: 0.25rem 0 0.3rem; overflow-x: auto; overflow-y: hidden; } .nut-comment-images__item { position: relative; - width: 80px; - height: 80px; - margin-right: 5px; - border-radius: 6px; + width: 2rem; + height: 2rem; + margin-right: 0.125rem; + border-radius: 0.15rem; overflow: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; } .nut-comment-images__item img { - width: 80px; - height: 80px; + width: 2rem; + height: 2rem; } .nut-comment-images__item--video img { position: absolute; top: 50%; left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .nut-comment-images__mask { position: absolute; top: 0; left: 0; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; width: 100%; - height: 90px; - line-height: 90px; + height: 2.25rem; + line-height: 2.25rem; background: #00000080; - font-size: 12px; + font-size: 0.3rem; color: #fff; } .nut-comment-images--multi { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; overflow: hidden; width: 100%; - margin: 10px auto 15px; + margin: 0.25rem auto 0.375rem; } .nut-comment-images--multi .nut-comment-images__item { - margin: 8px 8px 0 0; - width: calc(34% - 8px); - height: 90px; + margin: 0.2rem 0.2rem 0 0; + width: calc(34% - 0.2rem); + height: 2.25rem; } .nut-comment-images--multi .nut-comment-images__item img { width: 100%; height: 100%; } .nut-comment-images--multi .nut-comment-images__item .svg-demo { - width: 40px; - height: 40px; + width: 1rem; + height: 1rem; } .nut-comment-images--multi .nut-comment-images__item:nth-child(3n) { margin-right: 0; @@ -7475,25 +9359,27 @@ textarea { .nut-comment-images--multi::after { content: ''; display: block; - width: 105px; + width: 2.625rem; } .nut-comment__follow-title { position: relative; - font-size: 14px; + font-size: 0.35rem; font-weight: 700; color: var(--nut-black, #000); - padding-left: 8px; + padding-left: 0.2rem; } .nut-comment__follow-title svg { position: absolute; left: 0; top: 13%; color: var(--nut-primary-color, #fa2c19); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0.4; } .nut-comment__follow-com { - margin: 8px 0 8px 8px; + margin: 0.2rem 0 0.2rem 0.2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; @@ -7501,84 +9387,111 @@ textarea { word-break: break-all; } .nut-comment__follow-img { - margin: 0 0 8px 8px; + margin: 0 0 0.2rem 0.2rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-comment-bottom { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; color: var(--nut-comment-bottom-label-color, rgb(153, 153, 153)); - margin-right: 5px; + margin-right: 0.125rem; } .nut-comment-bottom__lable { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - margin-right: 10px; + margin-right: 0.25rem; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nut-comment-bottom__cpx { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; color: var(--nut-black, #000); } .nut-comment-bottom__cpx-item { position: relative; - margin-right: 18px; + margin-right: 0.45rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-comment-bottom__cpx-item span { color: var(--nut-black, #000); - margin-right: 5px; + margin-right: 0.125rem; } .nut-comment-bottom__cpx-item:last-child { margin-right: 0; } .nut-comment-bottom__cpx-item-popover { position: absolute; - top: 35px; - right: 18px; + top: 0.875rem; + right: 0.45rem; + width: -webkit-max-content; + width: -moz-max-content; width: max-content; background: var(--nut-white, #fff); - padding: 10px; - box-shadow: 0 0 6px var(--nut-disable-color, #cccccc); - border-radius: 5px 0 5px 5px; + padding: 0.25rem; + -webkit-box-shadow: 0 0 0.15rem var(--nut-disable-color, #cccccc); + box-shadow: 0 0 0.15rem var(--nut-disable-color, #cccccc); + border-radius: 0.125rem 0 0.125rem 0.125rem; } .nut-comment-bottom__cpx-item-popover::after { content: ''; position: absolute; - top: -20px; + top: -0.5rem; right: 0; width: 0; height: 0; - border-left: 14px solid transparent; - border-right: 0px solid transparent; - border-top: 10px solid transparent; - border-bottom: 10px solid var(--nut-white, #fff); + border-left: 0.35rem solid transparent; + border-right: 0rem solid transparent; + border-top: 0.25rem solid transparent; + border-bottom: 0.25rem solid var(--nut-white, #fff); } .nut-comment-bottom__cpx-item-popover::before { content: ''; position: absolute; - top: -22px; - right: -1px; + top: -0.55rem; + right: -0.025rem; width: 0; height: 0; - border-left: 14px solid transparent; - border-right: 0px solid transparent; - border-top: 10px solid transparent; - border-bottom: 10px solid rgba(114, 113, 113, 0.1); + border-left: 0.35rem solid transparent; + border-right: 0rem solid transparent; + border-top: 0.25rem solid transparent; + border-bottom: 0.25rem solid rgba(114, 113, 113, 0.1); } .nut-comment-images__play { - width: 40px; - height: 40px; + width: 1rem; + height: 1rem; position: absolute; left: 50%; top: 50%; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #00000080; border-radius: 50%; @@ -7587,17 +9500,17 @@ textarea { display: block; content: ''; position: absolute; - left: 15px; - top: 11px; - border-top: 9px solid transparent; - border-bottom: 9px solid transparent; - border-left: 15px solid #fff; + left: 0.375rem; + top: 0.275rem; + border-top: 0.225rem solid transparent; + border-bottom: 0.225rem solid transparent; + border-left: 0.375rem solid #fff; } .nut-comment .nut-comment-shop { width: 100%; - margin-top: 20px; - padding-top: 10px; - border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 0.5rem; + padding-top: 0.25rem; + border-top: 0.025rem solid rgba(0, 0, 0, 0.1); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; @@ -7611,28 +9524,35 @@ textarea { position: relative; display: inline-block; width: auto; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; - height: var(--nut-button-default-height, 38px); + height: var(--nut-button-default-height, 0.95rem); + -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; - line-height: var(--nut-button-default-line-height, 36px); - font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14px)); + line-height: var(--nut-button-default-line-height, 0.9rem); + font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 0.35rem)); text-align: center; cursor: pointer; + -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; + -ms-touch-action: manipulation; touch-action: manipulation; vertical-align: bottom; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; } .nut-button .nut-button__text { - margin-left: 5px; + margin-left: 0.125rem; } .nut-button::before { position: absolute; @@ -7644,6 +9564,8 @@ textarea { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; @@ -7657,8 +9579,14 @@ textarea { .nut-button__wrap { height: 100%; width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-button--loading::before, @@ -7669,7 +9597,7 @@ textarea { color: var(--nut-button-default-color, rgb(102, 102, 102)); background: var(--nut-button-default-bg-color, var(--nut-white, #fff)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid var(--nut-button-default-border-color, rgb(204, 204, 204)); + border: var(--nut-button-border-width, 0.025rem) solid var(--nut-button-default-border-color, rgb(204, 204, 204)); } .nut-button--primary { color: var(--nut-button-primary-color, var(--nut-white, #fff)); @@ -7678,31 +9606,31 @@ textarea { linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) ); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--info { color: var(--nut-button-info-color, var(--nut-white, #fff)); background: var(--nut-button-info-background-color, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--success { color: var(--nut-button-success-color, var(--nut-white, #fff)); background: var(--nut-button-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--danger { color: var(--nut-button-danger-color, var(--nut-white, #fff)); background: var(--nut-button-danger-background-color, rgb(250, 44, 25)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--warning { color: var(--nut-button-warning-color, var(--nut-white, #fff)); background: var(--nut-button-warning-background-color, linear-gradient(135deg, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--plain { background: var(--nut-button-plain-background-color, var(--nut-white, #fff)); @@ -7730,28 +9658,28 @@ textarea { } .nut-button--large { width: 100%; - height: var(--nut-button-large-height, 48px); - line-height: var(--nut-button-large-line-height, 46px); - font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14px))); + height: var(--nut-button-large-height, 1.2rem); + line-height: var(--nut-button-large-line-height, 1.15rem); + font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 0.35rem))); } .nut-button--normal { - padding: var(--nut-button-default-padding, 0 18px); - font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14px)); + padding: var(--nut-button-default-padding, 0 0.45rem); + font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 0.35rem)); } .nut-button--small { - height: var(--nut-button-small-height, 28px); - line-height: var(--nut-button-small-line-height, 26px); - padding: var(--nut-button-small-padding, 0 12px); - font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 12px)); + height: var(--nut-button-small-height, 0.7rem); + line-height: var(--nut-button-small-line-height, 0.65rem); + padding: var(--nut-button-small-padding, 0 0.3rem); + font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 0.3rem)); } .nut-button--small.nut-button--round { - border-radius: var(--nut-button-small-round-border-radius, var(--nut-button-border-radius, 25px)); + border-radius: var(--nut-button-small-round-border-radius, var(--nut-button-border-radius, 0.625rem)); } .nut-button--mini { - height: var(--nut-button-mini-height, 24px); + height: var(--nut-button-mini-height, 0.6rem); line-height: var(--nut-button-mini-line-height, 1.2); - padding: var(--nut-button-mini-padding, 0 12px); - font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 12px)); + padding: var(--nut-button-mini-padding, 0 0.3rem); + font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 0.3rem)); } .nut-button--block { display: block; @@ -7766,7 +9694,7 @@ textarea { opacity: 0.9; } .nut-button--round { - border-radius: var(--nut-button-border-radius, 25px); + border-radius: var(--nut-button-border-radius, 0.625rem); } .nut-button--square { border-radius: 0; @@ -7775,7 +9703,7 @@ textarea { color: var(--nut-button-default-color, rgb(102, 102, 102)); background: var(--nut-button-default-bg-color, var(--nut-white, #fff)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid var(--nut-button-default-border-color, rgb(204, 204, 204)); + border: var(--nut-button-border-width, 0.025rem) solid var(--nut-button-default-border-color, rgb(204, 204, 204)); } .nut-button--primary:not([disabled]):active { color: var(--nut-button-primary-color, var(--nut-white, #fff)); @@ -7784,31 +9712,31 @@ textarea { linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) ); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--info:not([disabled]):active { color: var(--nut-button-info-color, var(--nut-white, #fff)); background: var(--nut-button-info-background-color, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--success:not([disabled]):active { color: var(--nut-button-success-color, var(--nut-white, #fff)); background: var(--nut-button-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--danger:not([disabled]):active { color: var(--nut-button-danger-color, var(--nut-white, #fff)); background: var(--nut-button-danger-background-color, rgb(250, 44, 25)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--warning:not([disabled]):active { color: var(--nut-button-warning-color, var(--nut-white, #fff)); background: var(--nut-button-warning-background-color, linear-gradient(135deg, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--plain:not([disabled]):active { background: var(--nut-button-plain-background-color, var(--nut-white, #fff)); @@ -7838,14 +9766,16 @@ textarea { display: inline-block; } .nut-radio-group .nut-radio { - margin-bottom: 5px; + margin-bottom: 0.125rem; } .nut-radio-group--horizontal .nut-radio { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; - margin-right: 10px; + margin-right: 0.25rem; } .nut-radio-group--horizontal .nut-radio--round .nut-radio__label { - margin: 0 6px; + margin: 0 0.15rem; } .nut-theme-dark .nut-radio__label { color: var(--nut-dark-color, var(--nut-white, #fff)); @@ -7859,11 +9789,17 @@ textarea { } .nut-theme-dark .nut-radio__button--disabled { color: var(--nut-radio-label-disable-color, #999); - border: 1px solid var(--nut-radio-label-disable-color, #999); + border: 0.025rem solid var(--nut-radio-label-disable-color, #999); } .nut-radio { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; } @@ -7872,27 +9808,34 @@ textarea { margin-right: 0 !important; } .nut-radio--reverse { + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .nut-radio--reverse .nut-radio__label { - margin-right: var(--nut-radio-label-margin-left, 15px); + margin-right: var(--nut-radio-label-margin-left, 0.375rem); margin-left: 0; } .nut-radio__button { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: var(--nut-radio-button-padding, 5px 18px); - font-size: var(--nut-radio-button-font-size, 12px); + padding: var(--nut-radio-button-padding, 0.125rem 0.45rem); + font-size: var(--nut-radio-button-font-size, 0.3rem); background: #f6f7f9; - border-radius: var(--nut-radio-button-border-radius, 15px); + border-radius: var(--nut-radio-button-border-radius, 0.375rem); color: var(--nut-radio-label-font-color, #1d1e1e); + -webkit-box-sizing: border-box; box-sizing: border-box; - border: 1px solid #f6f7f9; + border: 0.025rem solid #f6f7f9; } .nut-radio__button--active { background: transparent; color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #fa2c19)); - border: 1px solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #fa2c19)); + border: 0.025rem solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #fa2c19)); position: relative; } .nut-radio__button--active::after { @@ -7904,7 +9847,7 @@ textarea { width: 100%; height: 100%; background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #fa2c19)); - border-radius: var(--nut-radio-button-border-radius, 15px); + border-radius: var(--nut-radio-button-border-radius, 0.375rem); opacity: 0.05; content: ''; } @@ -7913,26 +9856,28 @@ textarea { border: none; } .nut-radio__button--large { - height: var(--nut-button-large-height, 48px); - line-height: var(--nut-button-large-line-height, 46px); - font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14px))); + height: var(--nut-button-large-height, 1.2rem); + line-height: var(--nut-button-large-line-height, 1.15rem); + font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 0.35rem))); } .nut-radio__button--small { - height: var(--nut-button-small-height, 28px); - line-height: var(--nut-button-small-line-height, 26px); - padding: var(--nut-button-small-padding, 0 12px); - font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 12px)); + height: var(--nut-button-small-height, 0.7rem); + line-height: var(--nut-button-small-line-height, 0.65rem); + padding: var(--nut-button-small-padding, 0 0.3rem); + font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 0.3rem)); } .nut-radio__button--mini { - height: var(--nut-button-mini-height, 24px); + height: var(--nut-button-mini-height, 0.6rem); line-height: var(--nut-button-mini-line-height, 1.2); - padding: var(--nut-button-mini-padding, 0 12px); - font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 12px)); + padding: var(--nut-button-mini-padding, 0 0.3rem); + font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 0.3rem)); } .nut-radio__label { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - margin-left: var(--nut-radio-label-margin-left, 15px); - font-size: var(--nut-radio-label-font-size, 14px); + margin-left: var(--nut-radio-label-margin-left, 0.375rem); + font-size: var(--nut-radio-label-font-size, 0.35rem); color: var(--nut-radio-label-font-color, #1d1e1e); } .nut-radio__label--disabled { @@ -7940,7 +9885,9 @@ textarea { } .nut-radio__icon { color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #fa2c19)); + -webkit-transition-duration: 0.3s; transition-duration: 0.3s; + -webkit-transition-property: color, border-color, background-color; transition-property: color, border-color, background-color; } .nut-radio__icon--unchecked { @@ -7954,78 +9901,90 @@ textarea { } .nut-cell-group__title { display: inherit; - padding: var(--nut-cell-group-title-padding, 0 10px); + padding: var(--nut-cell-group-title-padding, 0 0.25rem); color: var(--nut-cell-group-title-color, #909ca4); - font-size: var(--nut-cell-group-title-font-size, var(--nut-font-size-2, 14px)); - line-height: var(--nut-cell-group-title-line-height, 20px); - margin-top: 30px; - margin-bottom: 10px; + font-size: var(--nut-cell-group-title-font-size, var(--nut-font-size-2, 0.35rem)); + line-height: var(--nut-cell-group-title-line-height, 0.5rem); + margin-top: 0.75rem; + margin-bottom: 0.25rem; } .nut-cell-group__desc { display: inherit; - padding: var(--nut-cell-group-desc-padding, 0 10px); + padding: var(--nut-cell-group-desc-padding, 0 0.25rem); color: var(--nut-cell-group-desc-color, #909ca4); - font-size: var(--nut-cell-group-desc-font-size, var(--nut-font-size-1, 12px)); - line-height: var(--nut-cell-group-desc-line-height, 16px); - margin-top: 10px; - margin-bottom: 10px; + font-size: var(--nut-cell-group-desc-font-size, var(--nut-font-size-1, 0.3rem)); + line-height: var(--nut-cell-group-desc-line-height, 0.4rem); + margin-top: 0.25rem; + margin-bottom: 0.25rem; } .nut-cell-group__wrap { display: inherit; - border-radius: var(--nut-cell-border-radius, 6px); - box-shadow: var(--nut-cell-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241)); + border-radius: var(--nut-cell-border-radius, 0.15rem); + -webkit-box-shadow: var(--nut-cell-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); + box-shadow: var(--nut-cell-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); overflow: hidden; background-color: var(--nut-cell-group-background-color, var(--nut-white, #fff)); - margin: 10px 0; + margin: 0.25rem 0; } .nut-cell-group__wrap .nut-cell { margin: 0; + -webkit-box-shadow: none; box-shadow: none; border-radius: 0; } .nut-cell-group .nut-cell::after { - border-bottom: var(--nut-cell-after-border-bottom, 1px solid #f5f6f7); + border-bottom: var(--nut-cell-after-border-bottom, 0.025rem solid #f5f6f7); } .nut-theme-dark .nut-cell { background: var(--nut-dark-background2, #1b1b1b); color: var(--nut-dark-color, var(--nut-white, #fff)); + -webkit-box-shadow: none; box-shadow: none; } .nut-cell { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; - line-height: var(--nut-cell-line-height, 20px); - padding: var(--nut-cell-padding, 13px 16px); + line-height: var(--nut-cell-line-height, 0.5rem); + padding: var(--nut-cell-padding, 0.325rem 0.4rem); background: var(--nut-cell-background, var(--nut-white, #fff)); - border-radius: var(--nut-cell-border-radius, 6px); - box-shadow: var(--nut-cell-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241)); - font-size: var(--nut-cell-title-font, var(--nut-font-size-2, 14px)); + border-radius: var(--nut-cell-border-radius, 0.15rem); + -webkit-box-shadow: var(--nut-cell-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); + box-shadow: var(--nut-cell-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); + font-size: var(--nut-cell-title-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-cell-color, var(--nut-title-color2, #666666)); - margin: 10px 0; + margin: 0.25rem 0; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-cell--center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-cell--large { - font-size: var(--nut-cell-large-title-font, var(--nut-font-size-large, var(--nut-font-size-3, 16px))); - padding: var(--nut-cell-large-padding, 15px 16px); + font-size: var(--nut-cell-large-title-font, var(--nut-font-size-large, var(--nut-font-size-3, 0.4rem))); + padding: var(--nut-cell-large-padding, 0.375rem 0.4rem); } .nut-cell--large .nut-cell__title-desc { - font-size: var(--nut-cell-large-title-desc-font, var(--nut-font-size-base, var(--nut-font-size-2, 14px))); + font-size: var(--nut-cell-large-title-desc-font, var(--nut-font-size-base, var(--nut-font-size-2, 0.35rem))); } .nut-cell:last-child::after { border: 0 !important; } .nut-cell::after { position: absolute; + -webkit-box-sizing: border-box; box-sizing: border-box; content: ' '; pointer-events: none; - right: var(--nut-cell-after-right, 16px); + right: var(--nut-cell-after-right, 0.4rem); bottom: 0; - left: 16px; + left: 0.4rem; + -webkit-transform: scaleY(0.5); + -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .nut-cell:active::before { @@ -8044,30 +10003,46 @@ textarea { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; } .nut-cell__icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; - margin: var(--nut-cell-default-icon-margin, 0 4px 0 0px); + margin: var(--nut-cell-default-icon-margin, 0 0.1rem 0 0rem); + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-cell__title { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - min-width: 80px; + min-width: 2rem; } .nut-cell__title-desc { - font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 12px)); + font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 0.3rem)); } .nut-cell__value { display: inline-block; text-align: right; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14px)); + font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); } .nut-cell__value--alone { @@ -8075,34 +10050,50 @@ textarea { } .nut-cell__link { color: #979797; + -webkit-align-self: center; + -ms-flex-item-align: center; align-self: center; } .nut-theme-dark .nut-form-item__body__slots .nut-input-text { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-form-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-form-item::before { position: absolute; + -webkit-box-sizing: border-box; box-sizing: border-box; content: ' '; pointer-events: none; - right: 16px; + right: 0.4rem; bottom: 0; - left: 16px; + left: 0.4rem; + -webkit-transform: scaleX(0); + -ms-transform: scaleX(0); transform: scaleX(0); } .nut-form-item.error.line::before { - border-bottom: 1px solid var(--nut-form-item-error-line-color, var(--nut-required-color, #fa2c19)); + border-bottom: 0.025rem solid var(--nut-form-item-error-line-color, var(--nut-required-color, #fa2c19)); + -webkit-transform: scaleX(1); + -ms-transform: scaleX(1); transform: scaleX(1); + -webkit-transition: -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; + transition: -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; + transition: + transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, + -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; } .nut-form-item__label { - font-size: var(--nut-form-item-label-font-size, 14px); + font-size: var(--nut-form-item-label-font-size, 0.35rem); font-weight: 400; - width: var(--nut-form-item-label-width, 90px); - margin-right: var(--nut-form-item-label-margin-right, 10px); + width: var(--nut-form-item-label-width, 2.25rem); + margin-right: var(--nut-form-item-label-margin-right, 0.25rem); + -webkit-flex: none !important; + -ms-flex: none !important; flex: none !important; display: inline-block !important; word-wrap: break-word; @@ -8114,7 +10105,7 @@ textarea { .nut-form-item__label.required::before { content: '*'; color: var(--nut-form-item-required-color, var(--nut-required-color, #fa2c19)); - margin-right: var(--nut-form-item-required-margin-right, 4px); + margin-right: var(--nut-form-item-required-margin-right, 0.1rem); } .nut-form-item__label.required.nut-form-item__star-right::before { content: none; @@ -8122,18 +10113,24 @@ textarea { .nut-form-item__label.required.nut-form-item__star-right::after { content: '*'; color: var(--nut-form-item-required-color, var(--nut-required-color, #fa2c19)); - margin-left: var(--nut-form-item-required-margin-right, 4px); + margin-left: var(--nut-form-item-required-margin-right, 0.1rem); } .nut-form-item__body { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex !important; + display: -ms-flexbox !important; display: flex !important; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-form-item__body__slots { text-align: var(--nut-form-item-body-slots-text-align, left); } .nut-form-item__body__slots .nut-input { - font-size: var(--nut-form-item-body-font-size, 14px); + font-size: var(--nut-form-item-body-font-size, 0.35rem); text-align: var(--nut-form-item-body-input-text-align, left); color: var(--nut-black, #000); width: 100%; @@ -8143,7 +10140,7 @@ textarea { background: transparent; } .nut-form-item__body__slots .nut-range-container { - min-height: 24px; + min-height: 0.6rem; } .nut-form-item__body__slots .nut-textarea { padding: 0 !important; @@ -8153,21 +10150,24 @@ textarea { } .nut-form-item__body__tips { text-align: var(--nut-form-item-tip-text-align, left); - font-size: var(--nut-form-item-tip-font-size, 10px); + font-size: var(--nut-form-item-tip-font-size, 0.25rem); color: var(--nut-form-item-error-message-color, var(--nut-required-color, #fa2c19)); } .nut-form-item__right { --nut-form-item-label-text-align: right; } .nut-form-item__top { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-form-item__top .nut-form-item__label { - padding-bottom: 5px; + padding-bottom: 0.125rem; width: 100%; + -webkit-box-sizing: border-box; box-sizing: border-box; display: block; - padding-right: 24px; + padding-right: 0.6rem; } .nut-theme-dark .nut-invoice .nut-invoice__submit { background: var(--nut-dark-background2, #1b1b1b); @@ -8177,24 +10177,33 @@ textarea { position: relative; } .nut-invoice .nut-cell { + -webkit-align-items: baseline; + -ms-flex-align: baseline; align-items: baseline; } .nut-invoice__submit { position: fixed; bottom: 0; width: 100%; - padding: var(--nut-invoice-padding, 10px 10px 20px); + padding: var(--nut-invoice-padding, 0.25rem 0.25rem 0.5rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; background: #fff; + -webkit-box-sizing: border-box; box-sizing: border-box; bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); } .nut-invoice .nut-radio { display: inline-block; - margin-right: 6px; + margin-right: 0.15rem; margin-bottom: 0; } .nut-avatar-cropper { @@ -8211,8 +10220,14 @@ textarea { background-color: #0000004d; z-index: 1; color: #fff; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-avatar-cropper.taro::after { @@ -8266,14 +10281,22 @@ textarea { } .nut-cropper-popup__toolbar .flex-sb { width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-cropper-popup__toolbar-item { color: #fff; - padding: 15px; + padding: 0.375rem; cursor: pointer; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-cropper-popup__highlight { @@ -8287,14 +10310,17 @@ textarea { } .nut-cropper-popup__highlight .highlight { position: absolute; - width: 365px; - height: 365px; + width: 9.125rem; + height: 9.125rem; left: 50%; top: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; background-color: transparent; - box-shadow: 0 0 1000px 1000px #0009; + -webkit-box-shadow: 0 0 25rem 25rem #0009; + box-shadow: 0 0 25rem 25rem #0009; } .nut-cropper-popup__highlight .highlight__round { border-radius: 50%; @@ -8306,26 +10332,47 @@ abc { background: #222; } .weapp-tw-user-ui-card { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; gap: 0.25rem; color: var(--weapp-tw-user-ui-color, #175e75); + -webkit-animation: weappTwUserUiBreathe 1.2s ease-in-out infinite; animation: weappTwUserUiBreathe 1.2s ease-in-out infinite; } .weapp-tw-user-ui-loading { display: inline-block; width: 1rem; height: 1rem; + -webkit-animation: weappTwUserUiRotation 1s linear infinite; animation: weappTwUserUiRotation 1s linear infinite; } +@-webkit-keyframes weappTwUserUiRotation { + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} @keyframes weappTwUserUiRotation { to { + -webkit-transform: rotate(360deg); transform: rotate(360deg); } } +@-webkit-keyframes weappTwUserUiBreathe { + 50% { + opacity: 0.65; + -webkit-transform: scale(0.96); + transform: scale(0.96); + } +} @keyframes weappTwUserUiBreathe { 50% { opacity: 0.65; + -webkit-transform: scale(0.96); transform: scale(0.96); } } diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/README.md index 8a715887c5..e77c2d6a6c 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/h5 | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 71209 | 376 | true | true | true | true | true | true | true | +| 74238 | 324 | true | true | true | true | true | true | true | ## Generator CSS Files @@ -24,9 +24,9 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/h5 | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `assets/index.1.css` | [artifacts/assets__index.1.css](artifacts/assets__index.1.css) | 41135 | 233 | true | true | true | true | true | true | false | -| `assets/index.2.css` | [artifacts/assets__index.2.css](artifacts/assets__index.2.css) | 13460 | 66 | true | false | true | false | false | true | false | -| `assets/index.3.css` | [artifacts/assets__index.3.css](artifacts/assets__index.3.css) | 2838 | 28 | false | false | false | false | false | true | false | -| `assets/index.4.css` | [artifacts/assets__index.4.css](artifacts/assets__index.4.css) | 2808 | 28 | false | false | false | false | false | true | false | -| `assets/index.5.css` | [artifacts/assets__index.5.css](artifacts/assets__index.5.css) | 1808 | 6 | false | false | false | false | false | false | true | +| `assets/index.1.css` | [artifacts/assets__index.1.css](artifacts/assets__index.1.css) | 39417 | 233 | true | true | true | true | true | true | false | +| `assets/index.2.css` | [artifacts/assets__index.2.css](artifacts/assets__index.2.css) | 12846 | 66 | true | false | true | false | false | true | false | +| `assets/index.3.css` | [artifacts/assets__index.3.css](artifacts/assets__index.3.css) | 5410 | 21 | true | false | true | false | false | true | false | +| `assets/index.4.css` | [artifacts/assets__index.4.css](artifacts/assets__index.4.css) | 5385 | 21 | true | false | true | false | false | true | false | +| `assets/index.5.css` | [artifacts/assets__index.5.css](artifacts/assets__index.5.css) | 2020 | 6 | false | false | false | false | false | false | true | | `assets/uni.css` | [artifacts/assets__uni.css](artifacts/assets__uni.css) | 9160 | 86 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.1.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.1.css index c43292c457..e13f630429 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.1.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.1.css @@ -339,7 +339,7 @@ uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper { } .uni-page-head-shadow-yellow::after { background-image: url(https://cdn.dcloud.net.cn/img/shadow-yellow.png); -} /*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fmain.css */ +} *, ::before, ::after, @@ -365,7 +365,8 @@ uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper { --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-content: ''; -} /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, ::before, @@ -413,7 +414,7 @@ uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper { --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; - --text-base--line-height: 1.5; + --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; @@ -683,7 +684,7 @@ wx-button { .mt-1 { margin-top: var(--spacing); } - /*tokens: mt-2 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: mt-2 <= src/pages/index/index.vue */ .mt-2 { margin-top: calc(var(--spacing) * 2); } @@ -691,15 +692,14 @@ wx-button { .mt-3 { margin-top: calc(var(--spacing) * 3); } - /*tokens: mt-4 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: mt-4 <= src/pages/index/index.vue */ .mt-4 { margin-top: calc(var(--spacing) * 4); } - /*tokens: mt-6 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: mt-6 <= src/pages/index/index.vue */ .mt-6 { margin-top: calc(var(--spacing) * 6); } - /*tokens: mt-8 <= src/pages-order/pages/user/user.vue */ .mt-8 { margin-top: calc(var(--spacing) * 8); } @@ -759,11 +759,11 @@ wx-button { mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25'/%3E%3Cpath fill='black' d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E"); } - /*tokens: block <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: block <= src/pages/index/index.vue */ .block { display: block; } - /*tokens: flex <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: flex <= src/components/HelloWorld.vue, src/pages/index/index.vue */ .flex { display: flex; } @@ -771,9 +771,9 @@ wx-button { aspect-ratio: var(--my-aspect-ratio); } .aspect-\[calc\(4\*3\+1\)\/3\] { - aspect-ratio: 13 /3; + aspect-ratio: calc(4 * 3 + 1) / 3; } - /*tokens: h-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: h-12 <= src/pages/index/index.vue */ .h-12 { height: calc(var(--spacing) * 12); } @@ -788,11 +788,10 @@ wx-button { .h-\[45px\] { height: 45px; } - /*tokens: min-h-screen <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .min-h-screen { min-height: 100vh; } - /*tokens: w-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: w-12 <= src/pages/index/index.vue */ .w-12 { width: calc(var(--spacing) * 12); } @@ -807,11 +806,10 @@ wx-button { .w-\[323px\] { width: 323px; } - /*tokens: flex-1 <= src/pages-order/pages/user/user.vue */ .flex-1 { flex: 1; } - /*tokens: flex-col <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: flex-col <= src/pages/index/index.vue */ .flex-col { flex-direction: column; } @@ -823,7 +821,7 @@ wx-button { .flex-row-reverse { flex-direction: row-reverse; } - /*tokens: items-center <= src/components/HelloWorld.vue, src/main.css, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: items-center <= src/components/HelloWorld.vue, src/pages/index/index.vue */ .items-center { align-items: center; } @@ -831,19 +829,17 @@ wx-button { .justify-between { justify-content: space-between; } - /*tokens: justify-center <= src/pages-order/pages/user/user.vue */ .justify-center { justify-content: center; } - /*tokens: gap-1 <= src/pages-order/pages/user/user.vue */ .gap-1 { gap: var(--spacing); } - /*tokens: gap-2 <= src/components/HelloWorld.vue, src/main.css, src/pages/index/index.vue */ + /*tokens: gap-2 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ .gap-2 { gap: calc(var(--spacing) * 2); } - /*tokens: gap-3 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: gap-3 <= src/pages/index/index.vue */ .gap-3 { gap: calc(var(--spacing) * 3); } @@ -922,11 +918,11 @@ wx-button { .rounded-full { border-radius: 9999px; } - /*tokens: rounded-xl <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: rounded-xl <= src/pages/index/index.vue */ .rounded-xl { border-radius: 0.5rem; } - /*tokens: border <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: border <= src/pages/index/index.vue */ .border { border-style: var(--tw-border-style); border-width: 1px; @@ -938,15 +934,14 @@ wx-button { } /*tokens: border-emerald-200 <= src/pages/index/index.vue */ .border-emerald-200 { - border-color: #a4f4cf; + border-color: rgb(164, 244, 207); } - /*tokens: border-emerald-500 <= src/pages-order/pages/user/user.vue */ .border-emerald-500 { - border-color: #00b981; + border-color: rgb(0, 185, 129); } - /*tokens: border-slate-200 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: border-slate-200 <= src/pages/index/index.vue */ .border-slate-200 { - border-color: #e2e8f0; + border-color: rgb(226, 232, 240); } /*tokens: border-slate-200/80 <= src/pages/index/index.vue */ .border-slate-200\/80 { @@ -962,7 +957,7 @@ wx-button { background-color: gray !important; } .bg-\[\#0000ff\] { - background-color: #00f; + background-color: #0000ff; } .bg-\[\#68c828\] { background-color: #68c828; @@ -978,19 +973,18 @@ wx-button { } /*tokens: bg-emerald-50 <= src/pages/index/index.vue */ .bg-emerald-50 { - background-color: #ecfdf5; + background-color: rgb(236, 253, 245); } - /*tokens: bg-emerald-100 <= src/pages-order/pages/user/user.vue */ .bg-emerald-100 { - background-color: #d0fae5; + background-color: rgb(208, 250, 229); } - /*tokens: bg-emerald-500 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: bg-emerald-500 <= src/pages/index/index.vue */ .bg-emerald-500 { - background-color: #00b981; + background-color: rgb(0, 185, 129); } /*tokens: bg-emerald-600 <= src/pages/index/index.vue */ .bg-emerald-600 { - background-color: #009669; + background-color: rgb(0, 150, 105); } /*tokens: bg-green-200/70 <= src/pages/index/index.vue */ .bg-green-200\/70 { @@ -1012,17 +1006,16 @@ wx-button { } /*tokens: bg-red-300 <= src/pages/index/index.vue */ .bg-red-300 { - background-color: #ffa3a4; + background-color: rgb(255, 163, 164); } - /*tokens: bg-slate-50 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .bg-slate-50 { - background-color: #f8fafc; + background-color: rgb(248, 250, 252); } /*tokens: bg-slate-900 <= src/pages/index/index.vue */ .bg-slate-900 { - background-color: #0f172b; + background-color: rgb(15, 23, 43); } - /*tokens: bg-white <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: bg-white <= src/pages/index/index.vue */ .bg-white { background-color: #fff; } @@ -1088,7 +1081,6 @@ wx-button { .p-4 { padding: calc(var(--spacing) * 4); } - /*tokens: p-5 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .p-5 { padding: calc(var(--spacing) * 5); } @@ -1096,7 +1088,7 @@ wx-button { .px-3 { padding-inline: calc(var(--spacing) * 3); } - /*tokens: px-4 <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: px-4 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ .px-4 { padding-inline: calc(var(--spacing) * 4); } @@ -1110,7 +1102,7 @@ wx-button { .py-1 { padding-block: var(--spacing); } - /*tokens: py-2 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: py-2 <= src/pages/index/index.vue */ .py-2 { padding-block: calc(var(--spacing) * 2); } @@ -1118,7 +1110,6 @@ wx-button { .py-3 { padding-block: calc(var(--spacing) * 3); } - /*tokens: py-6 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .py-6 { padding-block: calc(var(--spacing) * 6); } @@ -1129,31 +1120,29 @@ wx-button { .pt-2 { padding-top: calc(var(--spacing) * 2); } - /*tokens: text-center <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: text-center <= src/pages/index/index.vue */ .text-center { text-align: center; } - /*tokens: text-base <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-base <= src/pages/index/index.vue */ .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } - /*tokens: text-lg <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } - /*tokens: text-sm <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-sm <= src/pages/index/index.vue */ .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } - /*tokens: text-xl <= src/pages-order/pages/user/user.vue */ .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } - /*tokens: text-xs <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-xs <= src/pages/index/index.vue */ .text-\[100rpx\] { font-size: 3.125rem; } @@ -1181,22 +1170,20 @@ wx-button { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } - /*tokens: leading-6 <= src/pages-order/pages/user/user.vue */ .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } - /*tokens: font-bold <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: font-bold <= src/pages/index/index.vue */ .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } - /*tokens: font-medium <= src/pages-order/pages/user/user.vue */ .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } - /*tokens: font-semibold <= src/main.css, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: font-semibold <= src/pages/index/index.vue */ .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); @@ -1214,39 +1201,38 @@ wx-button { .text-\[\#929292\] { color: #929292; } - /*tokens: text-emerald-600 <= src/pages-order/pages/user/user.vue */ .text-emerald-600 { - color: #009669; + color: rgb(0, 150, 105); } /*tokens: text-emerald-700 <= src/pages/index/index.vue */ .text-emerald-700 { - color: #007857; + color: rgb(0, 120, 87); } /*tokens: text-neutral-66 <= src/pages/index/index.vue */ .text-neutral-66 { color: #666; } - /*tokens: text-slate-500 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-slate-500 <= src/pages/index/index.vue */ .text-slate-500 { - color: #62748e; + color: rgb(98, 116, 142); } /*tokens: text-slate-700 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ .text-slate-700 { - color: #314158; + color: rgb(49, 65, 88); } - /*tokens: text-slate-800 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-slate-800 <= src/pages/index/index.vue */ .text-slate-800 { - color: #1d293d; + color: rgb(29, 41, 61); } - /*tokens: text-slate-900 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-slate-900 <= src/pages/index/index.vue */ .text-slate-900 { - color: #0f172b; + color: rgb(15, 23, 43); } /*tokens: text-tahiti <= src/pages/index/index.vue */ .text-tahiti { color: #3ab7bf; } - /*tokens: text-white <= src/main.css, src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: text-white <= src/pages/index/index.vue */ .text-white { color: #fff; } @@ -1254,8 +1240,11 @@ wx-button { .underline { text-decoration-line: underline; } - /*tokens: shadow <= src/pages-order/pages/home/home.vue | shadow-sm <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.shadow, +.shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + /*tokens: shadow-sm <= src/pages/index/index.vue */ .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -1282,60 +1271,71 @@ wx-button { --tw-content: 'good work!' !important; content: var(--tw-content) !important; } - /*tokens: active:bg-emerald-50 <= src/pages-order/pages/user/user.vue */ .active\:bg-emerald-50:active { - background-color: #ecfdf5; + background-color: rgb(236, 253, 245); } - /*tokens: active:bg-emerald-600 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: active:bg-emerald-600 <= src/pages/index/index.vue */ .active\:bg-emerald-600:active { - background-color: #009669; + background-color: rgb(0, 150, 105); } /*tokens: active:bg-emerald-700 <= src/pages/index/index.vue */ .active\:bg-emerald-700:active { - background-color: #007857; + background-color: rgb(0, 120, 87); } /*tokens: active:bg-slate-700 <= src/pages/index/index.vue */ .active\:bg-slate-700:active { - background-color: #314158; + background-color: rgb(49, 65, 88); } /*tokens: dark:bg-red-300 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:bg-red-300.theme-dark, +.dark\:bg-red-300.theme-dark { + background-color: rgb(255, 163, 164); +} + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-red-300 <= src/pages/index/index.vue */ .theme-dark .dark\:bg-red-300 { - background-color: #ffa3a4; + background-color: rgb(255, 163, 164); } /*tokens: dark:bg-zinc-900 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:bg-zinc-900.theme-dark, +.dark\:bg-zinc-900.theme-dark { + background-color: rgb(24, 24, 27); +} + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-900 <= src/pages/index/index.vue */ .theme-dark .dark\:bg-zinc-900 { - background-color: #18181b; + background-color: rgb(24, 24, 27); } /*tokens: dark:bg-zinc-950 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:bg-zinc-950.theme-dark, +.dark\:bg-zinc-950.theme-dark { + background-color: rgb(9, 9, 11); +} + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-950 <= src/pages/index/index.vue */ .theme-dark .dark\:bg-zinc-950 { - background-color: #09090b; + background-color: rgb(9, 9, 11); } /*tokens: dark:text-zinc-50 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:text-zinc-50.theme-dark, +.dark\:text-zinc-50.theme-dark { + color: rgb(250, 250, 250); +} + /*tokens: theme-dark <= src/pages/index/index.vue | dark:text-zinc-50 <= src/pages/index/index.vue */ .theme-dark .dark\:text-zinc-50 { - color: #fafafa; + color: rgb(250, 250, 250); } @media (prefers-color-scheme: dark) { /*tokens: system-dark:bg-slate-900 <= src/pages/index/index.vue */ .system-dark\:bg-slate-900 { - background-color: #0f172b; + background-color: rgb(15, 23, 43); } /*tokens: system-dark:text-slate-100 <= src/pages/index/index.vue */ .system-dark\:text-slate-100 { - color: #f1f5f9; + color: rgb(241, 245, 249); } } /*tokens: not-wx:bg-red-500 <= src/pages/index/index.vue */ .not-wx\:bg-red-500 { - background-color: #fb2c36; + background-color: rgb(251, 44, 54); } @media (any-hover: hover) { /*tokens: any-hover:bg-slate-800 <= src/pages/index/index.vue */ .any-hover\:bg-slate-800:hover { - background-color: #1d293d; + background-color: rgb(29, 41, 61); } } wx-button { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.2.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.2.css index 8f97c29a64..74b1acc528 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.2.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.2.css @@ -1,4 +1,3 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fpages-order%2Findex.css */ *, ::before, ::after, @@ -14,7 +13,8 @@ --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-content: ''; -} /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, ::before, @@ -45,7 +45,7 @@ --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; - --text-base--line-height: 1.5; + --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; @@ -264,15 +264,15 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), [hidden]:where(:not([hidden='until-found'])) { display: none !important; } - /*tokens: mt-2 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: mt-2 <= src/pages-order/pages/user/user.vue */ .mt-2 { margin-top: calc(var(--spacing) * 2); } - /*tokens: mt-4 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: mt-4 <= src/pages-order/pages/home/home.vue */ .mt-4 { margin-top: calc(var(--spacing) * 4); } - /*tokens: mt-6 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: mt-6 <= src/pages-order/pages/user/user.vue */ .mt-6 { margin-top: calc(var(--spacing) * 6); } @@ -280,15 +280,15 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), .mt-8 { margin-top: calc(var(--spacing) * 8); } - /*tokens: block <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: block <= src/pages-order/pages/user/user.vue */ .block { display: block; } - /*tokens: flex <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: flex <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .flex { display: flex; } - /*tokens: h-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: h-12 <= src/pages-order/pages/user/user.vue */ .h-12 { height: calc(var(--spacing) * 12); } @@ -296,7 +296,7 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), .min-h-screen { min-height: 100vh; } - /*tokens: w-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: w-12 <= src/pages-order/pages/user/user.vue */ .w-12 { width: calc(var(--spacing) * 12); } @@ -304,11 +304,11 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), .flex-1 { flex: 1; } - /*tokens: flex-col <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: flex-col <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .flex-col { flex-direction: column; } - /*tokens: items-center <= src/components/HelloWorld.vue, src/main.css, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: items-center <= src/pages-order/pages/user/user.vue */ .items-center { align-items: center; } @@ -320,40 +320,40 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), .gap-1 { gap: var(--spacing); } - /*tokens: gap-3 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: gap-3 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .gap-3 { gap: calc(var(--spacing) * 3); } - /*tokens: rounded-xl <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: rounded-xl <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .rounded-xl { border-radius: 0.5rem; } - /*tokens: border <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: border <= src/pages-order/pages/user/user.vue */ .border { border-style: var(--tw-border-style); border-width: 1px; } /*tokens: border-emerald-500 <= src/pages-order/pages/user/user.vue */ .border-emerald-500 { - border-color: #00b981; + border-color: rgb(0, 185, 129); } - /*tokens: border-slate-200 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: border-slate-200 <= src/pages-order/pages/user/user.vue */ .border-slate-200 { - border-color: #e2e8f0; + border-color: rgb(226, 232, 240); } /*tokens: bg-emerald-100 <= src/pages-order/pages/user/user.vue */ .bg-emerald-100 { - background-color: #d0fae5; + background-color: rgb(208, 250, 229); } - /*tokens: bg-emerald-500 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: bg-emerald-500 <= src/pages-order/pages/home/home.vue */ .bg-emerald-500 { - background-color: #00b981; + background-color: rgb(0, 185, 129); } /*tokens: bg-slate-50 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .bg-slate-50 { - background-color: #f8fafc; + background-color: rgb(248, 250, 252); } - /*tokens: bg-white <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: bg-white <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .bg-white { background-color: #fff; } @@ -361,11 +361,11 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), .p-5 { padding: calc(var(--spacing) * 5); } - /*tokens: px-4 <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: px-4 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .px-4 { padding-inline: calc(var(--spacing) * 4); } - /*tokens: py-2 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: py-2 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .py-2 { padding-block: calc(var(--spacing) * 2); } @@ -373,11 +373,11 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), .py-6 { padding-block: calc(var(--spacing) * 6); } - /*tokens: text-center <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: text-center <= src/pages-order/pages/home/home.vue */ .text-center { text-align: center; } - /*tokens: text-base <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-base <= src/pages-order/pages/user/user.vue */ .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); @@ -387,7 +387,7 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } - /*tokens: text-sm <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-sm <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); @@ -397,7 +397,7 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } - /*tokens: text-xs <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-xs <= src/pages-order/pages/user/user.vue */ .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); @@ -407,7 +407,7 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } - /*tokens: font-bold <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: font-bold <= src/pages-order/pages/user/user.vue */ .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); @@ -417,7 +417,7 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } - /*tokens: font-semibold <= src/main.css, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: font-semibold <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); @@ -427,26 +427,30 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), } /*tokens: text-emerald-600 <= src/pages-order/pages/user/user.vue */ .text-emerald-600 { - color: #009669; + color: rgb(0, 150, 105); } - /*tokens: text-slate-500 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-slate-500 <= src/pages-order/pages/user/user.vue */ .text-slate-500 { - color: #62748e; + color: rgb(98, 116, 142); } - /*tokens: text-slate-800 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-slate-800 <= src/pages-order/pages/user/user.vue */ .text-slate-800 { - color: #1d293d; + color: rgb(29, 41, 61); } - /*tokens: text-slate-900 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ + /*tokens: text-slate-900 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ .text-slate-900 { - color: #0f172b; + color: rgb(15, 23, 43); } - /*tokens: text-white <= src/main.css, src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: text-white <= src/pages-order/pages/home/home.vue */ .text-white { color: #fff; } - /*tokens: shadow <= src/pages-order/pages/home/home.vue | shadow-sm <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.shadow, + /*tokens: shadow <= src/pages-order/pages/home/home.vue */ +.shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + /*tokens: shadow-sm <= src/pages-order/pages/home/home.vue */ .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -461,9 +465,9 @@ uni-input:where([type='button'], [type='reset'], [type='submit']), } /*tokens: active:bg-emerald-50 <= src/pages-order/pages/user/user.vue */ .active\:bg-emerald-50:active { - background-color: #ecfdf5; + background-color: rgb(236, 253, 245); } - /*tokens: active:bg-emerald-600 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ + /*tokens: active:bg-emerald-600 <= src/pages-order/pages/home/home.vue */ .active\:bg-emerald-600:active { - background-color: #009669; + background-color: rgb(0, 150, 105); } diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.3.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.3.css index 2dea68641c..0518959ff2 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.3.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.3.css @@ -1,38 +1,156 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-independent%2Fpages%2Findex.css */ -code[data-v-b12531e8], -kbd[data-v-b12531e8], -samp[data-v-b12531e8], -pre[data-v-b12531e8] { +*, +::before, +::after, +::backdrop { + --tw-content: ''; +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, + ::before, + ::after, + ::backdrop { + --tw-content: ''; + } +} +:root, +:host { + --font-sans: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); +} +*, +::after, +::before, +::backdrop, +::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; +} +html, +:host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; +} +hr { + height: 0; + color: inherit; + border-top-width: 1px; +} +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} +a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; +} +b, +strong { + font-weight: bolder; +} +code, +kbd, +samp, +pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } -:-moz-focusring:where([data-v-b12531e8]:not(iframe)) { +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} +:-moz-focusring:where(:not(iframe)) { outline: auto; } -img[data-v-b12531e8], -svg[data-v-b12531e8], -uni-video[data-v-b12531e8], -uni-canvas[data-v-b12531e8], -uni-audio[data-v-b12531e8], -iframe[data-v-b12531e8], -embed[data-v-b12531e8], -object[data-v-b12531e8] { +uni-progress { + vertical-align: baseline; +} +summary { + display: list-item; +} +ol, +ul, +menu { + list-style: none; +} +img, +svg, +uni-video, +uni-canvas, +uni-audio, +iframe, +embed, +object { display: block; vertical-align: middle; } -img[data-v-b12531e8], -uni-video[data-v-b12531e8] { +img, +uni-video { max-width: 100%; height: auto; } -uni-button[data-v-b12531e8], -uni-input[data-v-b12531e8], -select[data-v-b12531e8], -optgroup[data-v-b12531e8], -uni-textarea[data-v-b12531e8], -[data-v-b12531e8]::file-selector-button { +uni-button, +uni-input, +select, +optgroup, +uni-textarea, +::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; @@ -42,41 +160,89 @@ uni-textarea[data-v-b12531e8], background-color: transparent; opacity: 1; } -:where(select:is([multiple], [size])) optgroup[data-v-b12531e8] { +:where(select:is([multiple], [size])) optgroup { font-weight: bolder; } -:where(select:is([multiple], [size])) optgroup option[data-v-b12531e8] { +:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } -uni-textarea[data-v-b12531e8] { +::file-selector-button { + margin-inline-end: 4px; +} +::-moz-placeholder { + opacity: 1; +} +::placeholder { + opacity: 1; +} +@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::-moz-placeholder { + color: currentcolor; + } + ::placeholder { + color: currentcolor; + } +} +uni-textarea { resize: vertical; } -[data-v-b12531e8]:-moz-ui-invalid { +::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; +} +::-webkit-datetime-edit { + display: inline-flex; +} +::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} +::-webkit-datetime-edit, +::-webkit-datetime-edit-year-field, +::-webkit-datetime-edit-month-field, +::-webkit-datetime-edit-day-field, +::-webkit-datetime-edit-hour-field, +::-webkit-datetime-edit-minute-field, +::-webkit-datetime-edit-second-field, +::-webkit-datetime-edit-millisecond-field, +::-webkit-datetime-edit-meridiem-field { + padding-block: 0; +} +::-webkit-calendar-picker-indicator { + line-height: 1; +} +:-moz-ui-invalid { box-shadow: none; } -uni-button[data-v-b12531e8], -uni-input:where([type='button'][data-v-b12531e8], [type='reset'][data-v-b12531e8], [type='submit'][data-v-b12531e8]), -[data-v-b12531e8]::file-selector-button { +uni-button, +uni-input:where([type='button'], [type='reset'], [type='submit']), +::file-selector-button { -webkit-appearance: button; -moz-appearance: button; appearance: button; } -[hidden]:where([data-v-b12531e8]:not([hidden='until-found'])) { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} +[hidden]:where(:not([hidden='until-found'])) { display: none !important; } /*tokens: bg-independent-subpackage-marker <= src/sub-independent/pages/index.vue */ -.bg-independent-subpackage-marker[data-v-b12531e8] { +.bg-independent-subpackage-marker { background-color: #dc2626; } -.before\:content-\[\'independent_subpackage_uni-app-vite-tailwindcss-v4\'\][data-v-b12531e8]::before { +.before\:content-\[\'independent_subpackage_uni-app-vite-tailwindcss-v4\'\]::before { --tw-content: 'independent subpackage uni-app-vite-tailwindcss-v4'; content: var(--tw-content); } -.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\][data-v-b12531e8]::before { +.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { --tw-content: '现在，让我们开始神奇的 tailwindcss 开发之旅吧！'; content: var(--tw-content); } -.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\][data-v-b12531e8]::before { +.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]::before { --tw-content: '现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！'; content: var(--tw-content); } diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.4.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.4.css index a2ec55e564..36b6205137 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.4.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.4.css @@ -1,38 +1,156 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-normal%2Fpages%2Findex.css */ -code[data-v-0a5a82ca], -kbd[data-v-0a5a82ca], -samp[data-v-0a5a82ca], -pre[data-v-0a5a82ca] { +*, +::before, +::after, +::backdrop { + --tw-content: ''; +} +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, + ::before, + ::after, + ::backdrop { + --tw-content: ''; + } +} +:root, +:host { + --font-sans: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); +} +*, +::after, +::before, +::backdrop, +::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; +} +html, +:host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; +} +hr { + height: 0; + color: inherit; + border-top-width: 1px; +} +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} +a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; +} +b, +strong { + font-weight: bolder; +} +code, +kbd, +samp, +pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } -:-moz-focusring:where([data-v-0a5a82ca]:not(iframe)) { +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} +:-moz-focusring:where(:not(iframe)) { outline: auto; } -img[data-v-0a5a82ca], -svg[data-v-0a5a82ca], -uni-video[data-v-0a5a82ca], -uni-canvas[data-v-0a5a82ca], -uni-audio[data-v-0a5a82ca], -iframe[data-v-0a5a82ca], -embed[data-v-0a5a82ca], -object[data-v-0a5a82ca] { +uni-progress { + vertical-align: baseline; +} +summary { + display: list-item; +} +ol, +ul, +menu { + list-style: none; +} +img, +svg, +uni-video, +uni-canvas, +uni-audio, +iframe, +embed, +object { display: block; vertical-align: middle; } -img[data-v-0a5a82ca], -uni-video[data-v-0a5a82ca] { +img, +uni-video { max-width: 100%; height: auto; } -uni-button[data-v-0a5a82ca], -uni-input[data-v-0a5a82ca], -select[data-v-0a5a82ca], -optgroup[data-v-0a5a82ca], -uni-textarea[data-v-0a5a82ca], -[data-v-0a5a82ca]::file-selector-button { +uni-button, +uni-input, +select, +optgroup, +uni-textarea, +::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; @@ -42,41 +160,89 @@ uni-textarea[data-v-0a5a82ca], background-color: transparent; opacity: 1; } -:where(select:is([multiple], [size])) optgroup[data-v-0a5a82ca] { +:where(select:is([multiple], [size])) optgroup { font-weight: bolder; } -:where(select:is([multiple], [size])) optgroup option[data-v-0a5a82ca] { +:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } -uni-textarea[data-v-0a5a82ca] { +::file-selector-button { + margin-inline-end: 4px; +} +::-moz-placeholder { + opacity: 1; +} +::placeholder { + opacity: 1; +} +@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::-moz-placeholder { + color: currentcolor; + } + ::placeholder { + color: currentcolor; + } +} +uni-textarea { resize: vertical; } -[data-v-0a5a82ca]:-moz-ui-invalid { +::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; +} +::-webkit-datetime-edit { + display: inline-flex; +} +::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} +::-webkit-datetime-edit, +::-webkit-datetime-edit-year-field, +::-webkit-datetime-edit-month-field, +::-webkit-datetime-edit-day-field, +::-webkit-datetime-edit-hour-field, +::-webkit-datetime-edit-minute-field, +::-webkit-datetime-edit-second-field, +::-webkit-datetime-edit-millisecond-field, +::-webkit-datetime-edit-meridiem-field { + padding-block: 0; +} +::-webkit-calendar-picker-indicator { + line-height: 1; +} +:-moz-ui-invalid { box-shadow: none; } -uni-button[data-v-0a5a82ca], -uni-input:where([type='button'][data-v-0a5a82ca], [type='reset'][data-v-0a5a82ca], [type='submit'][data-v-0a5a82ca]), -[data-v-0a5a82ca]::file-selector-button { +uni-button, +uni-input:where([type='button'], [type='reset'], [type='submit']), +::file-selector-button { -webkit-appearance: button; -moz-appearance: button; appearance: button; } -[hidden]:where([data-v-0a5a82ca]:not([hidden='until-found'])) { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} +[hidden]:where(:not([hidden='until-found'])) { display: none !important; } /*tokens: bg-normal-subpackage-marker <= src/sub-normal/pages/index.vue */ -.bg-normal-subpackage-marker[data-v-0a5a82ca] { +.bg-normal-subpackage-marker { background-color: #2563eb; } -.before\:content-\[\'normal_subpackage_uni-app-vite-tailwindcss-v4\'\][data-v-0a5a82ca]::before { +.before\:content-\[\'normal_subpackage_uni-app-vite-tailwindcss-v4\'\]::before { --tw-content: 'normal subpackage uni-app-vite-tailwindcss-v4'; content: var(--tw-content); } -.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\][data-v-0a5a82ca]::before { +.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { --tw-content: '现在，让我们开始神奇的 tailwindcss 开发之旅吧！'; content: var(--tw-content); } -.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\][data-v-0a5a82ca]::before { +.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]::before { --tw-content: '现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！'; content: var(--tw-content); } diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.5.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.5.css index 9d9e72e0a8..9df61ab8ee 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.5.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/uni-app-vite-tailwindcss-v4/artifacts/assets__index.5.css @@ -9,31 +9,31 @@ padding-inline: calc(var(--spacing, 0.25rem) * 4); padding-block: calc(var(--spacing, 0.25rem) * 3); color: var(--color-slate-700, rgb(49, 65, 88)); -} +} /*! weapp-tailwindcss vite-generated-css-end:%2FUsers%2Ficebreaker%2FProjects%2Fgithub%2Fweapp-tailwindcss-codex%2Flocal-full-run-fixes%2Fdemo%2Funi-app-vite-tailwindcss-v4%2Fsrc%2Fcomponents%2FHelloWorld.vue */ /*tokens: special-class-visual-probe <= src/pages/index/index.vue | dark <= src/pages/index/index.vue */ -.special-class-visual-probe.dark [class~='dark:bg-red-300'][data-v-6d488b3e] { +.special-class-visual-probe.dark [class~='dark:bg-red-300'][data-v-51823732] { background-color: #fca5a5; color: #7f1d1d; } /*tokens: special-class-visual-probe <= src/pages/index/index.vue */ -.special-class-visual-probe [class~='text-[45rpx]'][data-v-6d488b3e] { +.special-class-visual-probe [class~='text-[45rpx]'][data-v-51823732] { color: #0f172a; font-size: 45px; line-height: 1; } /*tokens: special-class-visual-probe <= src/pages/index/index.vue | dark <= src/pages/index/index.vue | dark:bg-red-300 <= src/pages/index/index.vue */ -.special-class-visual-probe.dark .dark_cbg-red-300[data-v-6d488b3e] { +.special-class-visual-probe.dark .dark_cbg-red-300[data-v-51823732] { background-color: #fca5a5; color: #7f1d1d; } /*tokens: special-class-visual-probe <= src/pages/index/index.vue | text-[45rpx] <= src/pages/index/index.vue */ -.special-class-visual-probe .text-_b45rpx_B[data-v-6d488b3e] { +.special-class-visual-probe .text-_b45rpx_B[data-v-51823732] { color: #0f172a; font-size: 45px; line-height: 1; } /*tokens: special-class-visual-probe <= src/pages/index/index.vue | css-variable-visual-probe <= src/pages/index/index.vue */ -.special-class-visual-probe .css-variable-visual-probe[data-v-6d488b3e] { +.special-class-visual-probe .css-variable-visual-probe[data-v-51823732] { --visual-probe-bg: rgb(16, 185, 129); --visual-probe-size: 45px; background-color: var(--visual-probe-bg); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/README.md index add015a82d..8ca8f4ee25 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-vite-react-tailwindcss-v4/dist | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 448889 | 2299 | true | true | true | true | true | true | false | +| 449144 | 2299 | true | true | true | true | true | true | false | ## Generator CSS Files @@ -24,9 +24,9 @@ Entry: taro-vite-react-tailwindcss-v4/dist | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `css/index.1.css` | [artifacts/css__index.1.css](artifacts/css__index.1.css) | 17262 | 49 | true | false | true | false | false | true | false | -| `css/index.2.css` | [artifacts/css__index.2.css](artifacts/css__index.2.css) | 385495 | 2232 | true | true | true | true | true | true | false | -| `css/index.3.css` | [artifacts/css__index.3.css](artifacts/css__index.3.css) | 23021 | 88 | true | false | true | false | true | true | false | -| `css/index.4.css` | [artifacts/css__index.4.css](artifacts/css__index.4.css) | 8755 | 27 | true | false | true | false | false | true | false | +| `css/index.1.css` | [artifacts/css__index.1.css](artifacts/css__index.1.css) | 17038 | 49 | true | false | false | false | false | true | false | +| `css/index.2.css` | [artifacts/css__index.2.css](artifacts/css__index.2.css) | 386000 | 2232 | true | true | true | true | true | true | false | +| `css/index.3.css` | [artifacts/css__index.3.css](artifacts/css__index.3.css) | 23232 | 88 | true | false | false | false | true | true | false | +| `css/index.4.css` | [artifacts/css__index.4.css](artifacts/css__index.4.css) | 8518 | 27 | true | false | false | false | false | true | false | | `css/index.5.css` | [artifacts/css__index.5.css](artifacts/css__index.5.css) | 50 | 1 | false | false | false | false | false | false | false | | `css/vendors.css` | [artifacts/css__vendors.css](artifacts/css__vendors.css) | 14306 | 59 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.1.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.1.css index e90501e6c9..95a925d1eb 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.1.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.1.css @@ -1,6 +1,5 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-normal%2Fpages%2Findex.css */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties; -@layer theme,base,components,utilities; +@layer theme, base, components, utilities; @layer theme { :root, :host { @@ -335,7 +334,7 @@ background-color: #000089; } .bg-\[rgb\(12\,34\,56\)\] { - background-color: #0c2238; + background-color: rgb(12, 34, 56); } /*tokens: bg-normal-subpackage-marker <= src/sub-normal/pages/index.tsx */ .bg-normal-subpackage-marker { @@ -344,7 +343,7 @@ .\[mask-type\:luminance\] { mask-type: luminance; } - /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.css, src/pages/issue-998/index.tsx */ + /*tokens: p-4 <= */ .p-4 { padding: calc(var(--spacing) * 4); } diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.2.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.2.css index c2486cbc62..156d534c44 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.2.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.2.css @@ -1,6 +1,6 @@ -@charset "UTF-8"; /*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fapp.css */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +@charset "UTF-8"; /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties; -@layer theme,base,components,utilities; +@layer theme, base, components, utilities; @layer theme { :root, :host { @@ -489,7 +489,7 @@ background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops)); } - /*tokens: bg-gradient-to-r <= src/app.css, src/pages/index/index.tsx */ + /*tokens: bg-gradient-to-r <= src/pages/index/index.tsx */ .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); @@ -522,7 +522,7 @@ var(--tw-gradient-to) var(--tw-gradient-to-position) ); } - /*tokens: to-blue-500 <= src/app.css, src/pages/index/index.tsx */ + /*tokens: to-blue-500 <= src/pages/index/index.tsx */ .to-blue-500 { --tw-gradient-to: var(--color-blue-500); --tw-gradient-stops: var( @@ -545,7 +545,7 @@ var(--tw-gradient-to) var(--tw-gradient-to-position) ); } - /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.css, src/pages/issue-998/index.tsx */ + /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.tsx */ .p-4 { padding: calc(var(--spacing) * 4); } @@ -607,7 +607,7 @@ .text-slate-900 { color: var(--color-slate-900); } - /*tokens: text-white <= src/app.css, src/pages/index/index.tsx */ + /*tokens: text-white <= src/pages/index/index.tsx */ .text-white { color: var(--color-white); } @@ -631,17 +631,26 @@ content: var(--tw-content) !important; } /*tokens: dark:bg-zinc-900 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ - .dark\:bg-zinc-900.theme-dark, + .dark\:bg-zinc-900.theme-dark { + background-color: var(--color-zinc-900); + } + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:bg-zinc-900 <= src/pages/index/index.tsx */ .theme-dark .dark\:bg-zinc-900 { background-color: var(--color-zinc-900); } /*tokens: dark:bg-zinc-950 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ - .dark\:bg-zinc-950.theme-dark, + .dark\:bg-zinc-950.theme-dark { + background-color: var(--color-zinc-950); + } + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:bg-zinc-950 <= src/pages/index/index.tsx */ .theme-dark .dark\:bg-zinc-950 { background-color: var(--color-zinc-950); } /*tokens: dark:text-zinc-50 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ - .dark\:text-zinc-50.theme-dark, + .dark\:text-zinc-50.theme-dark { + color: var(--color-zinc-50); + } + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:text-zinc-50 <= src/pages/index/index.tsx */ .theme-dark .dark\:text-zinc-50 { color: var(--color-zinc-50); } @@ -908,6 +917,7 @@ page { --nutui-radius-xxl: var(--nutui-radius-14); --nutui-radius-xxxl: var(--nutui-radius-16); } +@charset "UTF-8"; @-webkit-keyframes nutFadeIn { 0% { opacity: 0; @@ -1402,7 +1412,10 @@ page { .nut-watermark { position: absolute; z-index: var(--nutui-watermark-z-index, 1200); - inset: 0; + left: 0; + right: 0; + top: 0; + bottom: 0; pointer-events: none; background-repeat: repeat; } @@ -5477,7 +5490,10 @@ page { .nut-progress-outer .nut-progress-active::before { content: ''; position: absolute; - inset: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; border-radius: var(--nutui-progress-border-radius, 0.3rem); -webkit-animation: progressActive 2s ease-in-out infinite; animation: progressActive 2s ease-in-out infinite; @@ -6689,7 +6705,10 @@ page { } .nut-overlay { position: fixed; - inset: 0; + top: 0; + left: 0; + bottom: 0; + right: 0; width: 100%; height: 100%; background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); @@ -9642,7 +9661,10 @@ page { .nut-countdown-number-primary::after { content: ''; position: absolute; - inset: -50%; + top: -50%; + bottom: -50%; + left: -50%; + right: -50%; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); @@ -11717,7 +11739,10 @@ page { .nut-badge-icon::after { content: ''; position: absolute; - inset: -50%; + top: -50%; + bottom: -50%; + left: -50%; + right: -50%; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.3.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.3.css index 76a4c83db6..5720c09ad4 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.3.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.3.css @@ -1,6 +1,5 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fpages%2Fissue-998%2Findex.css */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties; -@layer theme,base,components,utilities; +@layer theme, base, components, utilities; @layer theme { :root, :host { @@ -446,7 +445,7 @@ background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops)); } - /*tokens: bg-gradient-to-r <= src/app.css, src/pages/index/index.tsx */ + /*tokens: bg-gradient-to-r <= src/pages/index/index.tsx */ .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); @@ -479,7 +478,7 @@ var(--tw-gradient-to) var(--tw-gradient-to-position) ); } - /*tokens: to-blue-500 <= src/app.css, src/pages/index/index.tsx */ + /*tokens: to-blue-500 <= src/pages/index/index.tsx */ .to-blue-500 { --tw-gradient-to: var(--color-blue-500); --tw-gradient-stops: var( @@ -502,7 +501,7 @@ var(--tw-gradient-to) var(--tw-gradient-to-position) ); } - /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.css, src/pages/issue-998/index.tsx */ + /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.tsx */ .p-4 { padding: calc(var(--spacing) * 4); } @@ -564,7 +563,7 @@ .text-slate-900 { color: var(--color-slate-900); } - /*tokens: text-white <= src/app.css, src/pages/index/index.tsx */ + /*tokens: text-white <= src/pages/index/index.tsx */ .text-white { color: var(--color-white); } @@ -588,17 +587,26 @@ content: var(--tw-content) !important; } /*tokens: dark:bg-zinc-900 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ - .dark\:bg-zinc-900.theme-dark, + .dark\:bg-zinc-900.theme-dark { + background-color: var(--color-zinc-900); + } + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:bg-zinc-900 <= src/pages/index/index.tsx */ .theme-dark .dark\:bg-zinc-900 { background-color: var(--color-zinc-900); } /*tokens: dark:bg-zinc-950 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ - .dark\:bg-zinc-950.theme-dark, + .dark\:bg-zinc-950.theme-dark { + background-color: var(--color-zinc-950); + } + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:bg-zinc-950 <= src/pages/index/index.tsx */ .theme-dark .dark\:bg-zinc-950 { background-color: var(--color-zinc-950); } /*tokens: dark:text-zinc-50 <= src/pages/index/index.tsx | theme-dark <= src/pages/index/index.tsx */ - .dark\:text-zinc-50.theme-dark, + .dark\:text-zinc-50.theme-dark { + color: var(--color-zinc-50); + } + /*tokens: theme-dark <= src/pages/index/index.tsx | dark:text-zinc-50 <= src/pages/index/index.tsx */ .theme-dark .dark\:text-zinc-50 { color: var(--color-zinc-50); } diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.4.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.4.css index 305b150c35..8cedb5f472 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.4.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-react-tailwindcss-v4/artifacts/css__index.4.css @@ -1,6 +1,5 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-independent%2Fpages%2Findex.css */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties; -@layer theme,base,components,utilities; +@layer theme, base, components, utilities; @layer theme { :root, :host { @@ -307,7 +306,7 @@ .bg-independent-subpackage-marker { background-color: #dc2626; } - /*tokens: p-4 <= src/pages/index/index.tsx, src/pages/issue-998/index.css, src/pages/issue-998/index.tsx */ + /*tokens: p-4 <= */ .p-4 { padding: calc(var(--spacing) * 4); } diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/README.md index d754dca05d..6344269634 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-vite-vue3-tailwindcss-v4/dist | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 333485 | 1756 | true | true | true | true | true | true | false | +| 333836 | 1756 | true | true | false | true | true | true | false | ## Generator CSS Files @@ -22,7 +22,7 @@ Entry: taro-vite-vue3-tailwindcss-v4/dist | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `css/index.1.css` | [artifacts/css__index.1.css](artifacts/css__index.1.css) | 8568 | 26 | true | false | true | false | false | true | false | -| `css/index.2.css` | [artifacts/css__index.2.css](artifacts/css__index.2.css) | 8538 | 26 | true | false | true | false | false | true | false | -| `css/index.3.css` | [artifacts/css__index.3.css](artifacts/css__index.3.css) | 295823 | 1582 | true | true | true | true | true | true | false | +| `css/index.1.css` | [artifacts/css__index.1.css](artifacts/css__index.1.css) | 8398 | 26 | true | false | false | false | false | true | false | +| `css/index.2.css` | [artifacts/css__index.2.css](artifacts/css__index.2.css) | 8373 | 26 | true | false | false | false | false | true | false | +| `css/index.3.css` | [artifacts/css__index.3.css](artifacts/css__index.3.css) | 296509 | 1582 | true | true | false | true | true | true | false | | `css/vendors.css` | [artifacts/css__vendors.css](artifacts/css__vendors.css) | 20556 | 184 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.1.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.1.css index c133d5e1b2..f66447fba5 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.1.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.1.css @@ -1,6 +1,5 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-independent%2Fpages%2Findex.css */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties; -@layer theme,base,components,utilities; +@layer theme, base, components, utilities; @layer theme { :root, :host { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.2.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.2.css index fde628aa84..b7a5d71c57 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.2.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.2.css @@ -1,6 +1,5 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-normal%2Fpages%2Findex.css */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties; -@layer theme,base,components,utilities; +@layer theme, base, components, utilities; @layer theme { :root, :host { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.3.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.3.css index c900f5f06f..f3d1821418 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.3.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-vite-vue3-tailwindcss-v4/artifacts/css__index.3.css @@ -1,6 +1,5 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fapp.css */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties; -@layer theme,base,components,utilities; +@layer theme, base, components, utilities; @layer theme { :root, :host { @@ -461,17 +460,26 @@ content: var(--tw-content); } /*tokens: dark:bg-zinc-900 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ - .dark\:bg-zinc-900.theme-dark, + .dark\:bg-zinc-900.theme-dark { + background-color: var(--color-zinc-900); + } + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-900 <= src/pages/index/index.vue */ .theme-dark .dark\:bg-zinc-900 { background-color: var(--color-zinc-900); } /*tokens: dark:bg-zinc-950 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ - .dark\:bg-zinc-950.theme-dark, + .dark\:bg-zinc-950.theme-dark { + background-color: var(--color-zinc-950); + } + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-950 <= src/pages/index/index.vue */ .theme-dark .dark\:bg-zinc-950 { background-color: var(--color-zinc-950); } /*tokens: dark:text-zinc-50 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ - .dark\:text-zinc-50.theme-dark, + .dark\:text-zinc-50.theme-dark { + color: var(--color-zinc-50); + } + /*tokens: theme-dark <= src/pages/index/index.vue | dark:text-zinc-50 <= src/pages/index/index.vue */ .theme-dark .dark\:text-zinc-50 { color: var(--color-zinc-50); } @@ -2544,7 +2552,10 @@ } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day--choose::after { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; background-color: var(--nut-calendar-choose-color, var(--nut-primary-color, #fa2c19)); opacity: 0.09; content: ''; @@ -2741,7 +2752,10 @@ } .nut-checkbox__button--active::after { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; height: 100%; background-color: var(--nut-checkbox-button-background-active, var(--nut-primary-color, #fa2c19)); @@ -3170,7 +3184,10 @@ taro-textarea-core { box-sizing: border-box; content: ' '; pointer-events: none; - inset: -50%; + top: -50%; + right: -50%; + bottom: -50%; + left: -50%; outline: 0.025rem solid #3a3a3c; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); @@ -4314,7 +4331,10 @@ taro-textarea-core { } .nut-range::before { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; height: 100%; background-color: var(--nut-range-bg-color, var(--nut-primary-color, #fa2c19)); @@ -4617,7 +4637,10 @@ taro-textarea-core { .nut-progress .nut-progress-outer .nut-active::before { content: ''; position: absolute; - inset: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; border-radius: var(--nut-progress-outer-border-radius, 0.3rem); -webkit-animation: progressActive 2s ease-in-out infinite; animation: progressActive 2s ease-in-out infinite; @@ -6642,7 +6665,10 @@ taro-textarea-core { .nut-watermark { position: absolute; z-index: var(--nut-watermark-z-index, 2000); - inset: 0; + left: 0; + right: 0; + top: 0; + bottom: 0; pointer-events: none; background-repeat: repeat; } @@ -7519,7 +7545,10 @@ taro-textarea-core { } .nut-time-detail__detail__list__item--curr::after { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; height: 100%; background-color: var(--nut-timeselect-timedetail-item-cur-bg-color, var(--nut-primary-color, #fa2c19)); @@ -7800,7 +7829,10 @@ taro-textarea-core { } .nut-sku-select-item-skus-sku.active::after { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; height: 100%; border-radius: 0.375rem; @@ -8411,7 +8443,10 @@ taro-textarea-core { .nut-address-list-swipe__mask, .nut-address-list-general__mask { position: absolute; - inset: 0; + top: 0; + left: 0; + bottom: 0; + right: 0; background-color: var(--nut-addresslist-mask-bg, rgba(0, 0, 0, 0.4)); display: -webkit-flex; display: -ms-flexbox; @@ -8532,7 +8567,10 @@ taro-textarea-core { } .nut-address-list .nut-address-list__mask-bottom { position: fixed; - inset: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; z-index: 2000; background-color: transparent; } @@ -9434,7 +9472,10 @@ taro-textarea-core { } .nut-radio__button--active::after { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; height: 100%; background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #fa2c19)); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/README.md index 16ef5e3737..41c35823cf 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-webpack-vue3-tailwindcss-v4/dist | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 584713 | 1799 | true | true | true | true | true | true | false | +| 649910 | 1795 | true | true | true | true | true | true | false | ## Generator CSS Files @@ -23,6 +23,6 @@ Entry: taro-webpack-vue3-tailwindcss-v4/dist | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | | `css/app.css` | [artifacts/css__app.css](artifacts/css__app.css) | 324339 | 1792 | true | true | true | true | true | true | false | -| `css/chunk.1.css` | [artifacts/css__chunk.1.css](artifacts/css__chunk.1.css) | 244077 | 1602 | true | true | false | true | true | true | false | +| `css/chunk.1.css` | [artifacts/css__chunk.1.css](artifacts/css__chunk.1.css) | 309340 | 1628 | true | true | true | true | true | true | false | | `css/chunk.2.css` | [artifacts/css__chunk.2.css](artifacts/css__chunk.2.css) | 8062 | 18 | true | false | true | false | false | true | false | | `css/chunk.3.css` | [artifacts/css__chunk.3.css](artifacts/css__chunk.3.css) | 8037 | 18 | true | false | true | false | false | true | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/artifacts/css__chunk.1.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/artifacts/css__chunk.1.css index caa29e2bd2..dc20518585 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/artifacts/css__chunk.1.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/artifacts/css__chunk.1.css @@ -1,5 +1,6 @@ @layer properties; @layer theme, base, components, utilities; +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer theme { :root, :host { @@ -28,11 +29,32 @@ } } @layer base { + ::-webkit-backdrop { + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + ::-ms-backdrop { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + ::-webkit-file-upload-button { + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } *, ::after, ::before, ::backdrop, ::file-selector-button { + -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; @@ -42,6 +64,8 @@ :host { line-height: 1.5; -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; tab-size: 4; font-family: var( --default-font-family, @@ -58,6 +82,7 @@ 'Segoe UI Symbol', 'Noto Color Emoji' ); + -webkit-font-feature-settings: var(--default-font-feature-settings, normal); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; @@ -65,7 +90,7 @@ hr { height: 0; color: inherit; - border-top-width: 1px; + border-top-width: 0.025rem; } abbr:where([title]) { -webkit-text-decoration: underline dotted; @@ -94,6 +119,7 @@ samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + -webkit-font-feature-settings: var(--default-mono-font-feature-settings, normal); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; @@ -122,7 +148,7 @@ :-moz-focusring:where(:not(iframe)) { outline: auto; } - progress { + taro-progress-core { vertical-align: baseline; } summary { @@ -135,9 +161,9 @@ } img, svg, - video, - canvas, - audio, + taro-video-core, + taro-canvas-core, + taro-audio-core, iframe, embed, object { @@ -145,17 +171,29 @@ vertical-align: middle; } img, - video { + taro-video-core { max-width: 100%; height: auto; } - button, - input, + ::-webkit-file-upload-button { + font: inherit; + -webkit-font-feature-settings: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + taro-button-core, + taro-input-core, select, optgroup, - textarea, + taro-textarea-core, ::file-selector-button { font: inherit; + -webkit-font-feature-settings: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; @@ -168,15 +206,57 @@ font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { - padding-inline-start: 20px; + -webkit-padding-start: 0.5rem; + padding-inline-start: 0.5rem; + } + ::-webkit-file-upload-button { + -webkit-margin-end: 0.1rem; + margin-inline-end: 0.1rem; } ::file-selector-button { - margin-inline-end: 4px; + -webkit-margin-end: 0.1rem; + margin-inline-end: 0.1rem; + } + ::-webkit-input-placeholder { + opacity: 1; + } + ::-moz-placeholder { + opacity: 1; + } + :-ms-input-placeholder { + opacity: 1; + } + ::-ms-input-placeholder { + opacity: 1; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::-webkit-input-placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + ::-moz-placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + :-ms-input-placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + ::-ms-input-placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { @@ -184,7 +264,7 @@ } } } - textarea { + taro-textarea-core { resize: vertical; } ::-webkit-search-decoration { @@ -195,6 +275,7 @@ text-align: inherit; } ::-webkit-datetime-edit { + display: -webkit-inline-flex; display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { @@ -217,9 +298,15 @@ :-moz-ui-invalid { box-shadow: none; } - button, - input:where([type='button'], [type='reset'], [type='submit']), + ::-webkit-file-upload-button { + -webkit-appearance: button; + appearance: button; + } + taro-button-core, + taro-input-core:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { + -webkit-appearance: button; + -moz-appearance: button; appearance: button; } ::-webkit-inner-spin-button, @@ -280,10 +367,14 @@ } /*tokens: flex <= src/pages/index/index.vue */ .flex { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } /*tokens: inline-flex <= src/app.css */ .inline-flex { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; } /*tokens: h-14 <= src/pages/index/index.vue */ @@ -295,24 +386,30 @@ height: calc(var(--spacing) * 16); } .h-\[45px\] { - height: 45px; + height: 1.125rem; } /*tokens: w-32 <= src/pages/index/index.vue */ .w-32 { width: calc(var(--spacing) * 32); } .w-\[323px\] { - width: 323px; + width: 8.075rem; } .transform { + -webkit-transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + -ms-transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } /*tokens: flex-col <= src/pages/index/index.vue */ .flex-col { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } /*tokens: items-center <= src/app.css */ .items-center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } /*tokens: gap-2 <= src/app.css */ @@ -326,7 +423,9 @@ /*tokens: space-y-2 <= src/pages/index/index.vue */ :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; + -webkit-margin-before: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + -webkit-margin-after: calc(calc(var(--spacing) * 2) * (1 - var(--tw-space-y-reverse))); margin-block-end: calc(calc(var(--spacing) * 2) * (1 - var(--tw-space-y-reverse))); } /*tokens: rounded <= src/pages/index/index.vue */ @@ -345,7 +444,7 @@ /*tokens: border <= src/pages/index/index.vue */ .border { border-style: var(--tw-border-style); - border-width: 1px; + border-width: 0.025rem; } /*tokens: border-slate-200/80 <= src/pages/index/index.vue */ .border-slate-200\/80 { @@ -394,14 +493,17 @@ /*tokens: bg-gradient-to-br <= src/pages/index/index.vue */ .bg-gradient-to-br { --tw-gradient-position: to bottom right in oklab; + background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops)); } /*tokens: bg-gradient-to-r <= src/app.css, src/pages/index/index.vue */ .bg-gradient-to-r { --tw-gradient-position: to right in oklab; + background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-\[radial-gradient\(circle_at_18\%_20\%\,\#e0f2fe\,\#fdf4ff_70\%\)\] { + background-image: -webkit-radial-gradient(18% 20%, circle, #e0f2fe, #fdf4ff 70%); background-image: radial-gradient(circle at 18% 20%, #e0f2fe, #fdf4ff 70%); } .from-\[\#9e58e9\] { @@ -478,10 +580,10 @@ padding-inline: 0.90625rem; } .px-\[32px\] { - padding-inline: 32px; + padding-inline: 0.8rem; } .px-\[48px\] { - padding-inline: 48px; + padding-inline: 1.2rem; } /*tokens: py-1 <= src/pages/index/index.vue */ .py-1 { @@ -499,7 +601,7 @@ padding-block: 0.3125rem; } .py-\[18px\] { - padding-block: 18px; + padding-block: 0.45rem; } .py-\[24rpx\] { padding-block: 0.75rem; @@ -545,11 +647,13 @@ } /*tokens: shadow-xl <= src/pages/index/index.vue */ .shadow-xl { - --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + --tw-shadow: 0 0.5rem 0.625rem -0.125rem var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 0.2rem 0.25rem -0.15rem var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + -webkit-box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ease-in-out { --tw-ease: var(--ease-in-out); + -webkit-transition-timing-function: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { @@ -634,14 +738,23 @@ position: absolute; top: 0; left: 0; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; background: #f7f8fa; } .nut-col { float: left; + -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } @@ -806,6 +919,8 @@ content: ''; } .nut-row-flex { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-row-flex::after { @@ -815,63 +930,93 @@ float: none; } .nut-row-justify-center { + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-row-justify-end { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; } .nut-row-justify-space-between { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-row-justify-space-around { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; justify-content: space-around; } .nut-row-justify-space-evenly { + -webkit-justify-content: space-evenly; + -ms-flex-pack: space-evenly; justify-content: space-evenly; } .nut-row-align-flex-start { + -webkit-align-items: flex-start; + -ms-flex-align: start; align-items: flex-start; } .nut-row-align-center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-row-align-flex-end { + -webkit-align-items: flex-end; + -ms-flex-align: end; align-items: flex-end; } .nut-row-flex-wrap { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-row-flex-nowrap { + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .nut-row-flex-reverse { + -webkit-flex-wrap: wrap-reverse; + -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .nut-divider { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - font-size: var(--nut-divider-text-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-divider-text-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-divider-text-color, #909ca4); - margin: var(--nut-divider-margin, 16px 0); + margin: var(--nut-divider-margin, 0.4rem 0); } .nut-divider::before, .nut-divider::after { content: ''; - border: var(--nut-divider-line-height, 2px) solid currentColor; - border-width: var(--nut-divider-line-height, 2px) 0 0; - height: var(--nut-divider-line-height, 2px); + border: var(--nut-divider-line-height, 0.05rem) solid currentColor; + border-width: var(--nut-divider-line-height, 0.05rem) 0 0; + height: var(--nut-divider-line-height, 0.05rem); + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-divider.nut-divider-center::before, .nut-divider.nut-divider-left::before, .nut-divider.nut-divider-right::before { - margin-right: var(--nut-divider-before-margin-right, 16px); + margin-right: var(--nut-divider-before-margin-right, 0.4rem); } .nut-divider.nut-divider-center::after, .nut-divider.nut-divider-left::after, .nut-divider.nut-divider-right::after { - margin-left: var(--nut-divider-after-margin-left, 16px); + margin-left: var(--nut-divider-after-margin-left, 0.4rem); } .nut-divider.nut-divider-left::before { max-width: 10%; @@ -885,24 +1030,30 @@ } .nut-divider.nut-divider-hairline::before, .nut-divider.nut-divider-hairline::after { + -webkit-transform: scaleY(0.5); + -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .nut-divider.nut-divider-vertical { position: relative; - top: var(--nut-divider-vertical-top, 2px); + top: var(--nut-divider-vertical-top, 0.05rem); display: inline-block; - height: var(--nut-divider-vertical-height, 12px); - border-left: 1px solid var(--nut-divider-vertical-border-left, rgba(0, 0, 0, 0.06)); - margin: var(--nut-divider-vertical-margin, 0 8px); + height: var(--nut-divider-vertical-height, 0.3rem); + border-left: 0.025rem solid var(--nut-divider-vertical-border-left, rgba(0, 0, 0, 0.06)); + margin: var(--nut-divider-vertical-margin, 0 0.2rem); } .nut-grid { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; border: 0 solid var(--nut-grid-border-color, #f5f6f7); } .nut-grid--border { - border-top-width: 1px; - border-left-width: 1px; + border-top-width: 0.025rem; + border-left-width: 0.025rem; } .nut-theme-dark .nut-grid-item__content { background: var(--nut-dark-background, #131313); @@ -913,34 +1064,44 @@ } .nut-grid-item { position: relative; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-grid-item__text { color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666666)); - font-size: var(--nut-grid-item-text-font-size, var(--nut-font-size-1, 12px)); + font-size: var(--nut-grid-item-text-font-size, var(--nut-font-size-1, 0.3rem)); line-height: 1.5; word-break: break-all; - margin: var(--nut-grid-item-text-margin, 8px) 0 0 0; + margin: var(--nut-grid-item-text-margin, 0.2rem) 0 0 0; } .nut-grid-item__content { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; - padding: var(--nut-grid-item-content-padding, 16px 8px); + padding: var(--nut-grid-item-content-padding, 0.4rem 0.2rem); background: var(--nut-grid-item-content-bg-color, var(--nut-white, #fff)); border: 0 solid var(--nut-grid-border-color, #f5f6f7); } .nut-grid-item__content--border { - border-right-width: 1px; - border-bottom-width: 1px; + border-right-width: 0.025rem; + border-bottom-width: 0.025rem; } .nut-grid-item__content--surround { - border-top-width: 1px; - border-left-width: 1px; + border-top-width: 0.025rem; + border-left-width: 0.025rem; } .nut-grid-item__content--center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-grid-item__content--square { @@ -950,22 +1111,28 @@ left: 0; } .nut-grid-item__content--reverse { + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .nut-grid-item__content--reverse .nut-grid-item__text { - margin: 0 0 var(--nut-grid-item-text-margin, 8px); + margin: 0 0 var(--nut-grid-item-text-margin, 0.2rem); } .nut-grid-item__content--horizontal { + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; } .nut-grid-item__content--horizontal .nut-grid-item__text { - margin: 0 0 0 var(--nut-grid-item-text-margin, 8px); + margin: 0 0 0 var(--nut-grid-item-text-margin, 0.2rem); } .nut-grid-item__content--horizontal.nut-grid-item__content--reverse { + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .nut-grid-item__content--horizontal.nut-grid-item__content--reverse .nut-grid-item__text { - margin: 0 var(--nut-grid-item-text-margin, 8px) 0 0; + margin: 0 var(--nut-grid-item-text-margin, 0.2rem) 0 0; } .nut-grid-item__content--clickable { cursor: pointer; @@ -980,6 +1147,8 @@ border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; @@ -988,64 +1157,98 @@ opacity: 0.1; } .nut-space { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; } .nut-space-item { + -webkit-flex: none; + -ms-flex: none; flex: none; } .nut-space-vertical { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-space-vertical > .nut-space-item:not(:last-child) { - margin-bottom: var(--nut-space-gap, 8px); + margin-bottom: var(--nut-space-gap, 0.2rem); } .nut-space-horizontal { + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; } .nut-space-horizontal > .nut-space-item:not(:last-child) { - margin-right: var(--nut-space-gap, 8px); + margin-right: var(--nut-space-gap, 0.2rem); } .nut-space-horizontal.nut-space-wrap { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; - margin-bottom: calc(var(--nut-space-gap, 8px) * -1); + margin-bottom: calc(var(--nut-space-gap, 0.2rem) * -1); } .nut-space-horizontal.nut-space-wrap > .nut-space-item { - padding-bottom: var(--nut-space-gap, 8px); + padding-bottom: var(--nut-space-gap, 0.2rem); } .nut-space-align-center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-space-align-start { + -webkit-align-items: flex-start; + -ms-flex-align: start; align-items: flex-start; } .nut-space-align-end { + -webkit-align-items: flex-end; + -ms-flex-align: end; align-items: flex-end; } .nut-space-align-baseline { + -webkit-align-items: baseline; + -ms-flex-align: baseline; align-items: baseline; } .nut-space-justify-center { + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-space-justify-start { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; justify-content: flex-start; } .nut-space-justify-end { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; } .nut-space-justify-between { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-space-justify-around { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; justify-content: space-around; } .nut-space-justify-evenly { + -webkit-justify-content: space-evenly; + -ms-flex-pack: space-evenly; justify-content: space-evenly; } .nut-space-justify-stretch { + -webkit-justify-content: stretch; + -ms-flex-pack: stretch; justify-content: stretch; } .nut-space-fill { + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; } @@ -1058,14 +1261,20 @@ } .nut-navbar { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - height: var(--nut-navbar-height, 44px); + height: var(--nut-navbar-height, 1.1rem); + -webkit-box-sizing: border-box; box-sizing: border-box; - padding: var(--nut-navbar-padding, 0 16px); + padding: var(--nut-navbar-padding, 0 0.4rem); background: var(--nut-navbar-background, var(--nut-white, #fff)); - box-shadow: var(--nut-navbar-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241)); - font-size: var(--nut-navbar-title-base-font, var(--nut-font-size-2, 14px)); + -webkit-box-shadow: var(--nut-navbar-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); + box-shadow: var(--nut-navbar-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); + font-size: var(--nut-navbar-title-base-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-navbar-color, var(--nut-title-color2, #666666)); overflow: hidden; } @@ -1073,7 +1282,7 @@ opacity: 0.1; } .nut-navbar--border { - border-bottom: 1px solid #eee; + border-bottom: 0.025rem solid #eee; } .nut-navbar--fixed { position: fixed; @@ -1090,8 +1299,8 @@ padding-top: env(safe-area-inset-top); } .nut-navbar--fixed.nut-navbar--safe-area-inset-top { - height: calc(var(--nut-navbar-height, 44px) + constant(safe-area-inset-top)); - height: calc(var(--nut-navbar-height, 44px) + env(safe-area-inset-top)); + height: calc(var(--nut-navbar-height, 1.1rem) + constant(safe-area-inset-top)); + height: calc(var(--nut-navbar-height, 1.1rem) + env(safe-area-inset-top)); } .nut-navbar--clickable::before { position: absolute; @@ -1104,6 +1313,8 @@ border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } @@ -1114,13 +1325,19 @@ max-width: 60%; margin: 0 auto; text-align: center; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-navbar__title .title { - min-width: var(--nut-navbar-title-width, 100px); - font-size: var(--nut-navbar-title-font, var(--nut-font-size-2, 14px)); + min-width: var(--nut-navbar-title-width, 2.5rem); + font-size: var(--nut-navbar-title-font, var(--nut-font-size-2, 0.35rem)); font-weight: var(--nut-navbar-title-font-weight, 0); color: var(--nut-navbar-title-font-color, var(--nut-navbar-color, var(--nut-title-color2, #666666))); display: -webkit-box; @@ -1129,7 +1346,7 @@ overflow: hidden; } .nut-navbar__title.icon .icon { - margin: var(--nut-navbar-title-icon-margin, 0 0 0 13px); + margin: var(--nut-navbar-title-icon-margin, 0 0 0 0.325rem); } .nut-navbar__title .icon { font-size: 0; @@ -1138,7 +1355,7 @@ display: inline; } .nut-navbar__title-desc { - font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 12px)); + font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 0.3rem)); } .nut-navbar__title .text__title { display: inline-block; @@ -1149,142 +1366,199 @@ .nut-navbar__left { position: absolute; left: 0; - font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14px)); + font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; cursor: pointer; - padding: 0 16px; + padding: 0 0.4rem; } .nut-navbar__right { position: absolute; right: 0; - font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14px)); + font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: 0 16px; + padding: 0 0.4rem; cursor: pointer; } .nut-fixed-nav { position: fixed; z-index: var(--nut-fixednav-index, 201); display: inline-block; - height: 50px; + height: 1.25rem; right: 0; } .nut-fixed-nav.active .nut-icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-fixed-nav.active .nut-fixed-nav__list { + -webkit-transform: translate(0) !important; + -ms-transform: translate(0) !important; transform: translate(0) !important; } .nut-fixed-nav.active.left .nut-icon { + -webkit-transform: rotate(0) !important; + -ms-transform: rotate(0) !important; transform: rotate(0) !important; } .nut-fixed-nav__btn { + -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; right: 0; z-index: calc(var(--nut-fixednav-index, 201) + 1); - width: 80px; - padding-left: 12px; + width: 2rem; + padding-left: 0.3rem; height: 100%; background: var(--nut-fixednav-btn-bg, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); - border-radius: 45px 0 0 45px; - box-shadow: 0 2px 4px #0003; + border-radius: 1.125rem 0 0 1.125rem; + -webkit-box-shadow: 0 0.05rem 0.1rem #0003; + box-shadow: 0 0.05rem 0.1rem #0003; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-fixed-nav__btn > .text { - width: 24px; - line-height: 13px; - font-size: 10px; + width: 0.6rem; + line-height: 0.325rem; + font-size: 0.25rem; color: var(--nut-fixednav-bg-color, var(--nut-white, #fff)); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; } .nut-fixed-nav__btn .nut-icon { - margin-right: 5px; + margin-right: 0.125rem; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); transform: rotate(0); + -webkit-transition: all 0.3s; transition: all 0.3s; } .nut-fixed-nav__list { position: absolute; right: 0; + -webkit-transform: translate(100%); + -ms-transform: translate(100%); transform: translate(100%); + -webkit-transition: all 0.5s; transition: all 0.5s; + -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; z-index: var(--nut-fixednav-index, 201); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; height: 100%; background: var(--nut-fixednav-bg-color, var(--nut-white, #fff)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; - border-radius: 25px 0 0 25px; - box-shadow: 2px 2px 8px #0003; - padding: 0 80px 0 20px; + border-radius: 0.625rem 0 0 0.625rem; + -webkit-box-shadow: 0.05rem 0.05rem 0.2rem #0003; + box-shadow: 0.05rem 0.05rem 0.2rem #0003; + padding: 0 2rem 0 0.5rem; } .nut-fixed-nav__list-item { + -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; position: relative; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; height: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - min-width: 50px; + min-width: 1.25rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; } .nut-fixed-nav__list-item.active > .span { color: var(--nut-fixednav-item-active-color, var(--nut-primary-color, #fa2c19)); } .nut-fixed-nav__list-item > img { - width: 20px; - height: 20px; - margin-bottom: 2px; + width: 0.5rem; + height: 0.5rem; + margin-bottom: 0.05rem; } .nut-fixed-nav__list-item > .span { - font-size: 10px; + font-size: 0.25rem; color: var(--nut-fixednav-font-color, var(--nut-black, #000)); } .nut-fixed-nav__list-item > .b { position: absolute; right: 0; - top: 1px; - height: 14px; - line-height: 14px; - font-size: 10px; - padding: 0 3px; + top: 0.025rem; + height: 0.35rem; + line-height: 0.35rem; + font-size: 0.25rem; + padding: 0 0.075rem; color: #fff; background: var(--nut-primary-color, #fa2c19); - border-radius: 7px; + border-radius: 0.175rem; text-align: center; - min-width: 12px; + min-width: 0.3rem; } .nut-fixed-nav.left { right: auto; left: 0; } .nut-fixed-nav.left .nut-fixed-nav__btn { + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; flex-direction: row-reverse; right: auto; left: 0; - border-radius: 0 45px 45px 0; + border-radius: 0 1.125rem 1.125rem 0; } .nut-fixed-nav.left .nut-fixed-nav__btn .nut-icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-fixed-nav.left .nut-fixed-nav__list { + -webkit-transform: translate(-100%); + -ms-transform: translate(-100%); transform: translate(-100%); right: auto; - border-radius: 0 25px 25px 0; - padding-left: 80px; - padding-right: 20px; + border-radius: 0 0.625rem 0.625rem 0; + padding-left: 2rem; + padding-right: 0.5rem; } .nut-theme-dark .nut-menu .nut-menu__bar { background-color: var(--nut-dark-background, #131313); @@ -1300,18 +1574,23 @@ } .nut-menu .nut-menu__bar { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - line-height: var(--nut-menu-bar-line-height, 48px); + line-height: var(--nut-menu-bar-line-height, 1.2rem); background-color: var(--nut-white, #fff); - box-shadow: var(--nut-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12)); + -webkit-box-shadow: var(--nut-menu-bar-box-shadow, 0 0.05rem 0.3rem rgba(89, 89, 89, 0.12)); + box-shadow: var(--nut-menu-bar-box-shadow, 0 0.05rem 0.3rem rgba(89, 89, 89, 0.12)); } .nut-menu .nut-menu__bar.opened { z-index: var(--nut-menu-bar-opened-z-index, 2001); } .nut-menu .nut-menu__bar .nut-menu__item { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; text-align: center; - font-size: var(--nut-menu-item-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-menu-item-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-menu-item-text-color, var(--nut-title-color, #1a1a1a)); min-width: 0; } @@ -1322,12 +1601,21 @@ color: var(--nut-menu-item-disabled-color, #969799); } .nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title-icon { + -webkit-transition: all 0.2s linear; transition: all 0.2s linear; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; max-width: 100%; } @@ -1336,10 +1624,12 @@ overflow: hidden; text-overflow: ellipsis; display: block; - padding-left: var(--nut-menu-title-text-padding-left, 8px); - padding-right: var(--nut-menu-title-text-padding-right, 8px); + padding-left: var(--nut-menu-title-text-padding-left, 0.2rem); + padding-right: var(--nut-menu-title-text-padding-right, 0.2rem); } .nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title.active .nut-menu__title-icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-theme-dark .nut-menu-item__content .nut-menu-item__option { @@ -1358,9 +1648,13 @@ color: var(--nut-menu-item-active-text-color, var(--nut-primary-color, #fa2c19)) !important; } .nut-menu-item__content { - padding: var(--nut-menu-item-content-padding, 12px 24px); - max-height: var(--nut-menu-item-content-max-height, 214px); + padding: var(--nut-menu-item-content-padding, 0.3rem 0.6rem); + max-height: var(--nut-menu-item-content-max-height, 5.35rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-menu-item__content.nut-menu-item__overflow { @@ -1372,16 +1666,24 @@ } .nut-menu-item__content .nut-menu-item__option { color: var(--nut-title-color, #1a1a1a); - font-size: var(--nut-font-size-2, 14px); - padding-top: var(--nut-menu-item-option-padding-top, 12px); - padding-bottom: var(--nut-menu-item-option-padding-bottom, 12px); + font-size: var(--nut-font-size-2, 0.35rem); + padding-top: var(--nut-menu-item-option-padding-top, 0.3rem); + padding-bottom: var(--nut-menu-item-option-padding-bottom, 0.3rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-menu-item__content .nut-menu-item__option .nut-menu-item__span { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-right: var(--nut-menu-item-option-i-margin-right, 6px); + margin-right: var(--nut-menu-item-option-i-margin-right, 0.15rem); } .nut-menu-item-placeholder-element { position: fixed; @@ -1394,16 +1696,22 @@ background: var(--nut-dark-background, #131313); } .nut-tabbar { - border: 0px; + border: 0rem; + -webkit-box-shadow: var(--nut-tabbar-box-shadow, none); box-shadow: var(--nut-tabbar-box-shadow, none); - border-bottom: var(--nut-tabbar-border-bottom, 1px solid #eee); - border-top: var(--nut-tabbar-border-top, 1px solid #eee); + border-bottom: var(--nut-tabbar-border-bottom, 0.025rem solid #eee); + border-top: var(--nut-tabbar-border-top, 0.025rem solid #eee); width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-box-sizing: content-box; box-sizing: content-box; background: var(--nut-white, #fff); - height: var(--nut-tabbar-height, 50px); + height: var(--nut-tabbar-height, 1.25rem); } .nut-tabbar:last-child { border-right: 0; @@ -1422,13 +1730,21 @@ color: var(--nut-dark-color-gray, var(--nut-text-color, #808080)); } .nut-tabbar-item { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; text-align: center; text-decoration: none; color: var(--nut-primary-color, #fa2c19); height: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-tabbar-item__icon--unactive { @@ -1437,26 +1753,33 @@ .nut-tabbar-item_icon-box { padding: 0; line-height: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; position: relative; } .nut-tabbar-item_icon-box .nut-icon { - width: 20px; - height: 20px; - font-size: 20px; + width: 0.5rem; + height: 0.5rem; + font-size: 0.5rem; } .nut-tabbar-item_icon-box_tips { position: absolute; background: var(--nut-tabbar-active-color, var(--nut-primary-color, #fa2c19)); - border: 1px solid var(--nut-white, #fff); - border-radius: 7px; + border: 0.025rem solid var(--nut-white, #fff); + border-radius: 0.175rem; text-align: center; - top: -2px; - right: -7px; - box-shadow: 0 0 0 1px var(--nut-white, #fff); - font-size: var(--nut-font-size-1, 12px); + top: -0.05rem; + right: -0.175rem; + -webkit-box-shadow: 0 0 0 0.025rem var(--nut-white, #fff); + box-shadow: 0 0 0 0.025rem var(--nut-white, #fff); + font-size: var(--nut-font-size-1, 0.3rem); color: var(--nut-white, #fff); z-index: 1; } @@ -1466,17 +1789,17 @@ background-position: center center; } .nut-tabbar-item_icon-box_icon img { - width: 20px; - height: 20px; + width: 0.5rem; + height: 0.5rem; } .nut-tabbar-item_icon-box_nav-word { - font-size: var(--nut-tabbar-item-text-font-size, var(--nut-font-size-0, 10px)); + font-size: var(--nut-tabbar-item-text-font-size, var(--nut-font-size-0, 0.25rem)); line-height: var(--nut-tabbar-item-text-line-height, initial); margin-top: var(--nut-tabbar-word-margin-top, auto); display: block; } .nut-tabbar-item_icon-box_big-word { - font-size: var(--nut-font-size-large, var(--nut-font-size-3, 16px)); + font-size: var(--nut-font-size-large, var(--nut-font-size-3, 0.4rem)); line-height: 1; } .nut-theme-dark .nut-pagination-prev, @@ -1495,32 +1818,45 @@ background: var(--nut-dark-background, #131313); } .nut-pagination { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - font-size: var(--nut-pagination-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-pagination-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-pagination-color, var(--nut-primary-color, #fa2c19)); } .nut-pagination-contain { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-pagination-simple { - height: 39px; - width: 124px; - line-height: 39px; + height: 0.975rem; + width: 3.1rem; + line-height: 0.975rem; text-align: center; } .nut-pagination-prev, .nut-pagination-item, .nut-pagination-next { - height: 39px; - min-width: 39px; + height: 0.975rem; + min-width: 0.975rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; + -webkit-box-sizing: border-box; box-sizing: border-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; background: var(--nut-white, #fff); - border-radius: var(--nut-pagination-item-border-radius, 2px); - border: var(--nut-pagination-item-border-width, 1px) solid var(--nut-pagination-item-border-color, #e4e7eb); + border-radius: var(--nut-pagination-item-border-radius, 0.05rem); + border: var(--nut-pagination-item-border-width, 0.025rem) solid var(--nut-pagination-item-border-color, #e4e7eb); cursor: pointer; } .nut-pagination-prev, @@ -1529,10 +1865,10 @@ } .nut-pagination-prev, .nut-pagination-next { - padding: var(--nut-pagination-prev-next-padding, 0 11px); + padding: var(--nut-pagination-prev-next-padding, 0 0.275rem); } .nut-pagination .simple-border { - border-right: var(--nut-pagination-item-border-width, 1px) solid var(--nut-pagination-item-border-color, #e4e7eb); + border-right: var(--nut-pagination-item-border-width, 0.025rem) solid var(--nut-pagination-item-border-color, #e4e7eb); } .nut-pagination .active { color: var(--nut-white, #fff); @@ -1559,7 +1895,7 @@ } .nut-indicator--dot, .nut-indicator--number { - margin: 0 4px; + margin: 0 0.1rem; } .nut-indicator--dot:first-child, .nut-indicator--number:first-child { @@ -1572,25 +1908,26 @@ .nut-indicator--dot { display: inline-block; vertical-align: middle; - width: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 18px) / 3)); - height: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 18px) / 3)); + width: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 0.45rem) / 3)); + height: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 0.45rem) / 3)); border-radius: 50%; background-color: var(--nut-indicator-dot-color, var(--nut-disable-color, #cccccc)); } .nut-indicator--number { display: inline-block; position: relative; - width: var(--nut-indicator-size, 18px); - height: var(--nut-indicator-size, 18px); + width: var(--nut-indicator-size, 0.45rem); + height: var(--nut-indicator-size, 0.45rem); text-align: center; - font-size: var(--nut-indicator-number-font-size, 10px); - line-height: var(--nut-indicator-size, 18px); + font-size: var(--nut-indicator-number-font-size, 0.25rem); + line-height: var(--nut-indicator-size, 0.45rem); color: var(--nut-indicator-color, var(--nut-white, #fff)); vertical-align: middle; - border: 1px solid var(--nut-indicator-color, var(--nut-white, #fff)); + border: 0.025rem solid var(--nut-indicator-color, var(--nut-white, #fff)); border-radius: 50%; background-color: var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); - box-shadow: 0 0 1px 1px var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); + -webkit-box-shadow: 0 0 0.025rem 0.025rem var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); + box-shadow: 0 0 0.025rem 0.025rem var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); } .nut-side-navbar { overflow: auto; @@ -1613,10 +1950,10 @@ color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-side-navbar-item { - height: var(--nut-sidenavbar-item-height, 40px); - line-height: var(--nut-sidenavbar-item-line-height, 40px); + height: var(--nut-sidenavbar-item-height, 1rem); + line-height: var(--nut-sidenavbar-item-line-height, 1rem); display: block; - font-size: var(--nut-sidenavbar-item-font-size, 16px); + font-size: var(--nut-sidenavbar-item-font-size, 0.4rem); background-color: var(--nut-sidenavbar-item-title-bg-color, var(--nut-white, #fff)); } .nut-side-navbar-item__title { @@ -1642,27 +1979,30 @@ .nut-sub-side-navbar__title { display: block; width: var(--nut-sidenavbar-sub-title-width, 100%); - height: var(--nut-sidenavbar-sub-title-height, 40px); + height: var(--nut-sidenavbar-sub-title-height, 1rem); position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + -webkit-box-sizing: border-box; box-sizing: border-box; - border-bottom: 1px solid var(--nut-sidenavbar-sub-title-border-color, #f6f6f6); + border-bottom: 0.025rem solid var(--nut-sidenavbar-sub-title-border-color, #f6f6f6); color: var(--nut-sidenavbar-sub-title-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-sidenavbar-sub-title-font-size, var(--nut-font-size-large, var(--nut-font-size-3, 16px))); + font-size: var(--nut-sidenavbar-sub-title-font-size, var(--nut-font-size-large, var(--nut-font-size-3, 0.4rem))); background-color: var(--nut-sidenavbar-sub-title-bg-color, #f6f6f6); border-radius: var(--nut-sidenavbar-sub-title-radius, 0); border: var(--nut-sidenavbar-sub-title-border, 0); } .nut-sub-side-navbar__title__text { - line-height: var(--nut-sidenavbar-sub-title-text-line-height, 40px); + line-height: var(--nut-sidenavbar-sub-title-text-line-height, 1rem); color: var(--nut-sidenavbar-sub-title-text-color, var(--nut-title-color, #1a1a1a)); } .nut-sub-side-navbar__title__icon { position: absolute; top: 50%; - right: 20px; + right: 0.5rem; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-sub-side-navbar__list { @@ -1684,11 +2024,16 @@ color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-searchbar { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: var(--nut-searchbar-width, 100%); - padding: var(--nut-searchbar-padding, 9px 16px); + padding: var(--nut-searchbar-padding, 0.225rem 0.4rem); background: var(--nut-searchbar-background, var(--nut-white, #fff)); + -webkit-box-sizing: border-box; box-sizing: border-box; color: var(--nut-searchbar-input-bar-color, inherit); } @@ -1707,32 +2052,58 @@ height: env(safe-area-inset-bottom); background: var(--nut-searchbar-background, var(--nut-white, #fff)); } +.nut-searchbar::-webkit-input-placeholder { + color: var(--nut-searchbar-input-bar-placeholder-color, inherit); +} +.nut-searchbar::-moz-placeholder { + color: var(--nut-searchbar-input-bar-placeholder-color, inherit); +} +.nut-searchbar:-ms-input-placeholder { + color: var(--nut-searchbar-input-bar-placeholder-color, inherit); +} +.nut-searchbar::-ms-input-placeholder { + color: var(--nut-searchbar-input-bar-placeholder-color, inherit); +} .nut-searchbar::placeholder { color: var(--nut-searchbar-input-bar-placeholder-color, inherit); } .nut-searchbar__search-label { - padding: 0 5px; + padding: 0 0.125rem; color: #323233; } .nut-searchbar__search-input { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: var(--nut-searchbar-input-width, 100%); - height: var(--nut-searchbar-input-height, 32px); + height: var(--nut-searchbar-input-height, 0.8rem); + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - padding: var(--nut-searchbar-input-padding, 0 0 0 13px); - border-radius: var(--nut-searchbar-input-border-radius, 16px); - box-shadow: var(--nut-searchbar-input-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.04)); + padding: var(--nut-searchbar-input-padding, 0 0 0 0.325rem); + border-radius: var(--nut-searchbar-input-border-radius, 0.4rem); + -webkit-box-shadow: var(--nut-searchbar-input-box-shadow, 0 0 0.2rem 0 rgba(0, 0, 0, 0.04)); + box-shadow: var(--nut-searchbar-input-box-shadow, 0 0 0.2rem 0 rgba(0, 0, 0, 0.04)); background: var(--nut-searchbar-input-background, #f7f7f7); + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-searchbar__search-input.square { border-radius: 0; } .nut-searchbar__search-input .nut-searchbar__input-inner { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: relative; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; overflow: hidden; } @@ -1740,24 +2111,30 @@ width: 100%; } .nut-searchbar__search-input .nut-searchbar__input-inner .nut-searchbar__input-form { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; overflow: hidden; } -.nut-searchbar__search-input .nut-searchbar__input-inner input { +.nut-searchbar__search-input .nut-searchbar__input-inner taro-input-core { width: 100%; height: 100%; - padding-left: 4px; + padding-left: 0.1rem; } .nut-searchbar__search-input .nut-searchbar__input-inner-icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; position: relative; - padding: 0 7px; + padding: 0 0.175rem; } .nut-searchbar__search-input .nut-searchbar__input-clear { position: relative; z-index: 10; - padding: 0 5px; + padding: 0 0.125rem; } .nut-searchbar__search-input .nut-searchbar__input-clear .nut-searchbar__nut-icon-mask-close { color: #ccc; @@ -1769,45 +2146,54 @@ .nut-searchbar__search-input .nut-searchbar__input-inner-icon-absolute .nut-searchbar__input-clear { position: absolute; z-index: 10; - left: -20px; + left: -0.5rem; } .nut-searchbar__search-input .nut-searchbar__iptleft-search-icon { - margin-right: 6px; - width: 14px; - height: 14px; + margin-right: 0.15rem; + width: 0.35rem; + height: 0.35rem; } .nut-searchbar__search-input .nut-searchbar__iptright-search-icon { - margin-left: 5px; + margin-left: 0.125rem; } .nut-searchbar__search-input .nut-searchbar__input-bar { width: 100%; - height: 36px; + height: 0.9rem; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; padding: 0; margin: 0; background-color: transparent; border-color: transparent; outline: none; - font-size: 14px; + font-size: 0.35rem; } .nut-searchbar__search-input .nut-searchbar__input-bar_clear { - max-width: 290px; + max-width: 7.25rem; } .nut-searchbar__search-input .nut-searchbar__input-inner-absolute .nut-searchbar__input-bar { + -webkit-box-sizing: border-box; box-sizing: border-box; - padding-right: 20px; + padding-right: 0.5rem; } .nut-searchbar__left-search-icon { - margin-right: 8px; + margin-right: 0.2rem; } .nut-searchbar__search-icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-searchbar__right-search-icon { - margin-left: 16px; - font-size: 14px; + margin-left: 0.4rem; + font-size: 0.35rem; color: var(--nut-searchbar-right-out-color, var(--nut-black, #000)); } .nut-theme-dark .nut-tabs__titles { @@ -1823,28 +2209,46 @@ background-color: var(--nut-dark-background2, #1b1b1b); } .nut-tabs { + display: -webkit-flex; + display: -ms-flexbox; display: flex; overflow: hidden; } .nut-tabs .nut-tabs__titles { + display: -webkit-flex; + display: -ms-flexbox; display: flex; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; white-space: nowrap; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; background: var(--nut-tabs-titles-background-color, var(--nut-help-color, #f5f5f5)); border-radius: var(--nut-tabs-titles-border-radius, 0); } .nut-tabs .nut-tabs__titles .nut-tabs__list { width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; } .nut-tabs .nut-tabs__titles .nut-tabs__titles-item { position: relative; - font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 0.35rem)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; color: var(--nut-tabs-titles-item-color, var(--nut-title-color, #1a1a1a)); } @@ -1859,7 +2263,7 @@ } .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon { position: absolute; - font-size: 12px; + font-size: 0.3rem; width: 100%; height: 100%; color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19)); @@ -1867,12 +2271,15 @@ .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile, .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__line { position: absolute; + -webkit-transition: width 0.3s ease; transition: width 0.3s ease; width: 0; height: 0; content: ' '; bottom: 15%; left: 50%; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); overflow: hidden; border-radius: var(--nut-tabs-titles-item-line-border-radius, 0); @@ -1884,23 +2291,29 @@ } .nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { content: ' '; - width: var(--nut-tabs-horizontal-titles-item-active-line-width, 40px); - height: 3px; + width: var(--nut-tabs-horizontal-titles-item-active-line-width, 1rem); + height: 0.075rem; background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); } .nut-tabs .nut-tabs__titles .nut-tabs__titles-item.disabled { color: var(--nut-disable-color, #cccccc); } .nut-tabs .nut-tabs__titles-left { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; justify-content: flex-start; } .nut-tabs.horizontal { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles, .nut-tabs.horizontal > .nut-tabs__titles { + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; - height: var(--nut-tabs-horizontal-titles-height, 46px); + height: var(--nut-tabs-horizontal-titles-height, 1.15rem); } .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__list, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__list { @@ -1913,33 +2326,43 @@ } .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; flex: 1 0 auto; - min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px); + min-width: var(--nut-tabs-horizontal-titles-item-min-width, 1.25rem); width: 0; } .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon { position: absolute; - font-size: 12px; + font-size: 0.3rem; width: 100%; height: 100%; color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19)); } .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item-left, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item-left { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; flex: 0 0 auto; } .nut-tabs.vertical { + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; width: 100%; } .nut-tabs.vertical > .nut-tabs__titles { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; height: auto; - padding: 10px 0; - width: var(--nut-tabs-vertical-titles-width, 100px); + padding: 0.25rem 0; + width: var(--nut-tabs-vertical-titles-width, 2.5rem); } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__list { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-tabs.vertical > .nut-tabs__titles.scrollable { @@ -1948,17 +2371,22 @@ height: auto; } .nut-tabs.vertical > .nut-tabs__titles.scrollable .nut-tabs__titles-placeholder { - height: 22px; + height: 0.55rem; } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item { - min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px); + min-width: var(--nut-tabs-horizontal-titles-item-min-width, 1.25rem); width: 100%; - height: var(--nut-tabs-vertical-titles-item-height, 40px); + height: var(--nut-tabs-vertical-titles-item-height, 1rem); + -webkit-flex: none; + -ms-flex: none; flex: none; } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item__line { bottom: none; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); + -webkit-transition: height 0.3s ease; transition: height 0.3s ease; width: 0; height: 0; @@ -1967,35 +2395,41 @@ background-color: #fff; } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { - left: 10px; - width: 3px; + left: 0.25rem; + width: 0.075rem; background: var(--nut-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); - height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px); + height: var(--nut-tabs-vertical-titles-item-active-line-height, 0.35rem); } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__smile { position: absolute; - right: -8px; - bottom: 2px; + right: -0.2rem; + bottom: 0.05rem; left: auto; - width: 36px; + width: 0.9rem; + -webkit-transform: rotate(320deg); + -ms-transform: rotate(320deg); transform: rotate(320deg); - height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px); + height: var(--nut-tabs-vertical-titles-item-active-line-height, 0.35rem); } .nut-tabs.vertical .nut-tabs__content { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-tabs.vertical .nut-tabs__content .nut-tab-pane { height: 100%; } .nut-tabs__titles.large .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 16px)); + font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 0.4rem)); } .nut-tabs__titles.normal .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 0.35rem)); } .nut-tabs__titles.small .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 12px)); + font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 0.3rem)); } .nut-tabs__titles::-webkit-scrollbar { display: none; @@ -2006,31 +2440,37 @@ display: none; } .nut-tabs__titles.smile .nut-tabs__titles-item.active .nut-tabs__titles-item__smile { - width: 36px; - height: 10px; + width: 0.9rem; + height: 0.25rem; display: block; } .nut-tabs__content { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-tabs .nut-tabs__titles-item .taro { - height: 46px; - line-height: 46px; + height: 1.15rem; + line-height: 1.15rem; } .nut-tabs .nut-tabs__titles-placeholder { width: auto; - min-width: 10px; + min-width: 0.25rem; } .nut-theme-dark .nut-tab-pane { background: var(--nut-dark-background2, #1b1b1b); } .nut-tab-pane { width: 100%; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; display: block; background-color: #fff; - padding: 24px 20px; + padding: 0.6rem 0.5rem; + -webkit-box-sizing: border-box; box-sizing: border-box; overflow: auto; height: 100%; @@ -2052,59 +2492,73 @@ } .nut-cascader { width: 100%; - font-size: var(--nut-cascader-font-size, var(--nut-font-size-2, 14px)); - line-height: var(--nut-cascader-line-height, 22px); + font-size: var(--nut-cascader-font-size, var(--nut-font-size-2, 0.35rem)); + line-height: var(--nut-cascader-line-height, 0.55rem); } .nut-cascader .nut-tab-pane { padding: 0; } .nut-cascader.nut-tabs.horizontal .nut-tabs__titles .nut-tabs__titles-item { + -webkit-flex: initial; + -ms-flex: initial; flex: initial; - padding: var(--nut-cascader-tabs-item-padding, 0 10px); + padding: var(--nut-cascader-tabs-item-padding, 0 0.25rem); white-space: nowrap; } .nut-cascader .nut-tabs__titles { - padding: var(--nut-cascader-tabs-item-padding, 0 10px); + padding: var(--nut-cascader-tabs-item-padding, 0 0.25rem); background: #fff; } .nut-cascader__bar { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: var(--nut-cascader-bar-padding, 24px 20px 17px); + padding: var(--nut-cascader-bar-padding, 0.6rem 0.5rem 0.425rem); text-align: center; font-weight: 700; - line-height: var(--nut-cascader-bar-line-height, 20px); + line-height: var(--nut-cascader-bar-line-height, 0.5rem); color: var(--nut-cascader-bar-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-cascader-bar-font-size, var(--nut-font-size-4, 18px)); + font-size: var(--nut-cascader-bar-font-size, var(--nut-font-size-4, 0.45rem)); } .nut-cascader-pane { display: block; - padding: 10px 0 0; + padding: 0.25rem 0 0; margin: 0; width: 100%; - height: 342px; + height: 8.55rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nut-cascader-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: var(--nut-cascader-item-padding, 10px 20px); + padding: var(--nut-cascader-item-padding, 0.25rem 0.5rem); margin: 0; cursor: pointer; - font-size: var(--nut-cascader-item-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-cascader-item-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-cascader-item-color, var(--nut-title-color, #1a1a1a)); } .nut-cascader-item__title { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-cascader-item__icon-check { - margin-left: 10px; + margin-left: 0.25rem; visibility: hidden; } .nut-cascader-item__icon-loading { - margin-left: 10px; + margin-left: 0.25rem; } .nut-cascader-item.active:not(.disabled) { color: var(--nut-cascader-item-active-color, var(--nut-primary-color, #fa2c19)); @@ -2132,17 +2586,23 @@ } .nut-calendar { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; color: #333; - font-size: 16px; + font-size: 0.4rem; background-color: var(--nut-white, #fff); overflow: hidden; height: 100%; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-calendar.nut-calendar--nopop .nut-calendar__header .nut-calendar__header-title { - font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 16px)); + font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 0.4rem)); } .nut-calendar .popup-box { height: 100%; @@ -2154,37 +2614,50 @@ display: none; } .nut-calendar .nut-calendar__header { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; text-align: center; - padding-top: 1px; + padding-top: 0.025rem; background-color: var(--nut-white, #fff); } .nut-calendar .nut-calendar__header .nut-calendar__header-title { - font-size: var(--nut-calendar-title-font, var(--nut-font-size-4, 18px)); + font-size: var(--nut-calendar-title-font, var(--nut-font-size-4, 0.45rem)); font-weight: var(--nut-calendar-title-font-weight, 500); - line-height: 44px; + line-height: 1.1rem; } .nut-calendar .nut-calendar__header .nut-calendar__header-slot { - min-height: 24px; + min-height: 0.6rem; } .nut-calendar .nut-calendar__header .nut-calendar__header-subtitle { - padding: 7px 0; - line-height: 22px; - font-size: var(--nut-calendar-sub-title-font, var(--nut-font-size-2, 14px)); + padding: 0.175rem 0; + line-height: 0.55rem; + font-size: var(--nut-calendar-sub-title-font, var(--nut-font-size-2, 0.35rem)); } .nut-calendar .nut-calendar__header .nut-calendar__weekdays { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; justify-content: space-around; - height: 36px; - border-radius: 0 0 12px 12px; - box-shadow: 0 4px 10px #0000000f; + height: 0.9rem; + border-radius: 0 0 0.3rem 0.3rem; + -webkit-box-shadow: 0 0.1rem 0.25rem #0000000f; + box-shadow: 0 0.1rem 0.25rem #0000000f; } .nut-calendar .nut-calendar__header .nut-calendar__weekdays .nut-calendar__weekday.weekend { color: var(--nut-calendar-day67-font-color, var(--nut-primary-color, #fa2c19)); } .nut-calendar .nut-calendar__content { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; width: 100%; display: block; @@ -2194,13 +2667,18 @@ width: 100%; height: auto; display: block; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__body { display: block; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__month { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; text-align: center; } @@ -2208,20 +2686,20 @@ padding-top: 0; } .nut-calendar .nut-calendar__content .nut-calendar__panel .calendar-loading-tip { - height: 50px; - line-height: 50px; + height: 1.25rem; + line-height: 1.25rem; text-align: center; position: absolute; - top: -50px; + top: -1.25rem; left: 0; right: 0; - font-size: var(--nut-calendar-text-font, var(--nut-font-size-1, 12px)); + font-size: var(--nut-calendar-text-font, var(--nut-font-size-1, 0.3rem)); color: var(--nut-text-color, #808080); } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__month-title { - height: 23px; - line-height: 23px; - margin: 8px 0; + height: 0.575rem; + line-height: 0.575rem; + margin: 0.2rem 0; font-size: var(--nut-calendar-month-title-font-size, inherit); } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days { @@ -2230,11 +2708,19 @@ .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day { float: left; width: 14.28%; - height: 64px; + height: 1.6rem; font-weight: var(--nut-calendar-day-font-weight, 500); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; position: relative; } @@ -2247,29 +2733,29 @@ } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--curr { position: absolute; - bottom: 6px; + bottom: 0.15rem; width: 100%; - font-size: 12px; - line-height: 14px; + font-size: 0.3rem; + line-height: 0.35rem; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tip { position: absolute; - bottom: 6px; + bottom: 0.15rem; width: 100%; - font-size: 12px; - line-height: 14px; + font-size: 0.3rem; + line-height: 0.35rem; color: var(--nut-calendar-primary-color, var(--nut-primary-color, #fa2c19)); } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--top { - top: 6px; + top: 0.15rem; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--bottom { - bottom: 6px; + bottom: 0.15rem; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day--active { background-color: var(--nut-calendar-primary-color, var(--nut-primary-color, #fa2c19)); color: var(--nut-white, #fff) !important; - border-radius: var(--nut-calendar-day-active-border-radius, 0px); + border-radius: var(--nut-calendar-day-active-border-radius, 0rem); } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day--active .nut-calendar__day-tips, .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day--active .nut-calendar__day-tips--curr { @@ -2295,76 +2781,108 @@ content: ''; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-value { - padding: 2px 0; - font-size: var(--nut-calendar-day-font, 16px); + padding: 0.05rem 0; + font-size: var(--nut-calendar-day-font, 0.4rem); } .nut-calendar .nut-calendar__footer { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - height: 62px; + height: 1.55rem; width: 100%; background-color: var(--nut-white, #fff); } .nut-calendar .nut-calendar__footer .nut-calendar__confirm { - height: 44px; + height: 1.1rem; width: 100%; - margin: 10px 18px; - border-radius: 22px; + margin: 0.25rem 0.45rem; + border-radius: 0.55rem; background: var( --nut-button-primary-background-color, linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) ); color: var(--nut-white, #fff); text-align: center; - line-height: 44px; + line-height: 1.1rem; } .nut-calendarcard { background: var(--nut-white, #fff); - border-radius: 12px; + border-radius: 0.3rem; overflow: hidden; - font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 16px)); + font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 0.4rem)); color: var(--nut-black, #000); } .nut-calendarcard-header { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; font-weight: 400; } .nut-calendarcard-header-left, .nut-calendarcard-header-right { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; cursor: pointer; - margin: 16px; + margin: 0.4rem; line-height: 1; } .nut-calendarcard-header-left .left, .nut-calendarcard-header-right .left { - margin-left: 8px; + margin-left: 0.2rem; } .nut-calendarcard-header-left .right, .nut-calendarcard-header-right .right { - margin-right: 8px; + margin-right: 0.2rem; } .nut-calendarcard-days { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-calendarcard-day { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; position: relative; width: 14.28%; - height: 48px; + height: 1.2rem; cursor: pointer; - margin-bottom: 4px; + margin-bottom: 0.1rem; text-align: center; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; } .nut-calendarcard-day.header { @@ -2373,9 +2891,9 @@ .nut-calendarcard-day-top, .nut-calendarcard-day-bottom { width: 100%; - height: 12px; - font-size: 12px; - line-height: 12px; + height: 0.3rem; + font-size: 0.3rem; + line-height: 0.3rem; } .nut-calendarcard-day.weekend { color: var(--nut-calendar-choose-color, var(--nut-primary-color, #fa2c19)); @@ -2411,36 +2929,45 @@ } .nut-theme-dark .nut-checkbox__button--disabled { color: var(--nut-checkbox-label-disable-color, #999); - border: 1px solid var(--nut-checkbox-label-disable-color, #999); + border: 0.025rem solid var(--nut-checkbox-label-disable-color, #999); } .nut-checkbox { display: var(--nut-checkbox-display, inline-flex); vertical-align: bottom; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-right: var(--nut-checkbox-margin-right, 20px); + margin-right: var(--nut-checkbox-margin-right, 0.5rem); } .nut-checkbox--reverse { + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .nut-checkbox--reverse .nut-checkbox__label { - margin-right: var(--nut-checkbox-label-margin-left, 15px); + margin-right: var(--nut-checkbox-label-margin-left, 0.375rem); margin-left: 0; } .nut-checkbox__button { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: var(--nut-checkbox-button-padding, 5px 18px); - font-size: var(--nut-checkbox-button-font-size, 12px); + padding: var(--nut-checkbox-button-padding, 0.125rem 0.45rem); + font-size: var(--nut-checkbox-button-font-size, 0.3rem); background: var(--nut-checkbox-button-background, #f6f7f9); - border-radius: var(--nut-checkbox-button-border-radius, 15px); + border-radius: var(--nut-checkbox-button-border-radius, 0.375rem); color: var(--nut-checkbox-label-color, #1d1e1e); + -webkit-box-sizing: border-box; box-sizing: border-box; - border: 1px solid var(--nut-checkbox-button-border-color, #f6f7f9); + border: 0.025rem solid var(--nut-checkbox-button-border-color, #f6f7f9); } .nut-checkbox__button--active { background: transparent; color: var(--nut-checkbox-button-font-color-active, var(--nut-primary-color, #fa2c19)); - border: 1px solid var(--nut-checkbox-button-border-color-active, var(--nut-primary-color, #fa2c19)); + border: 0.025rem solid var(--nut-checkbox-button-border-color-active, var(--nut-primary-color, #fa2c19)); position: relative; } .nut-checkbox__button--active::after { @@ -2460,9 +2987,11 @@ border: none; } .nut-checkbox__label { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - margin-left: var(--nut-checkbox-label-margin-left, 15px); - font-size: var(--nut-checkbox-label-font-size, 14px); + margin-left: var(--nut-checkbox-label-margin-left, 0.375rem); + font-size: var(--nut-checkbox-label-font-size, 0.35rem); color: var(--nut-checkbox-label-color, #1d1e1e); } .nut-checkbox__label--disabled { @@ -2470,21 +2999,23 @@ } .nut-checkbox__icon { color: var(--nut-primary-color, #fa2c19); - font-size: var(--nut-checkbox-icon-font-size, 18px); + font-size: var(--nut-checkbox-icon-font-size, 0.45rem); + -webkit-transition-duration: 0.3s; transition-duration: 0.3s; + -webkit-transition-property: color, border-color, background-color; transition-property: color, border-color, background-color; } .nut-checkbox__icon--unchecked { color: var(--nut-checkbox-icon-disable-color, #d6d6d6); - font-size: var(--nut-checkbox-icon-font-size, 18px); + font-size: var(--nut-checkbox-icon-font-size, 0.45rem); } .nut-checkbox__icon--indeterminate { color: var(--nut-primary-color, #fa2c19); - font-size: var(--nut-checkbox-icon-font-size, 18px); + font-size: var(--nut-checkbox-icon-font-size, 0.45rem); } .nut-checkbox__icon--disable { color: var(--nut-checkbox-icon-disable-color2, var(--nut-help-color, #f5f5f5)); - font-size: var(--nut-checkbox-icon-font-size, 18px); + font-size: var(--nut-checkbox-icon-font-size, 0.45rem); } .nut-theme-dark .nut-input { background: var(--nut-dark-background, #131313); @@ -2494,25 +3025,30 @@ .nut-theme-dark .nut-input__text--readonly { color: var(--nut-dark-color, var(--nut-white, #fff)); } -input, -textarea { +taro-input-core, +taro-textarea-core { font: inherit; } .nut-input { position: relative; width: 100%; - padding: 10px 25px; + padding: 0.25rem 0.625rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - line-height: 20px; + line-height: 0.5rem; background: var(--nut-white, #fff); - font-size: var(--nut-input-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-input-font-size, var(--nut-font-size-2, 0.35rem)); + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-input.center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-input--border { - border-bottom: 1px solid var(--nut-input-border-bottom, #eaf0fb); + border-bottom: 0.025rem solid var(--nut-input-border-bottom, #eaf0fb); } .nut-input .input-text, .nut-input__text--readonly { @@ -2525,30 +3061,42 @@ textarea { text-decoration: none; background: transparent; resize: none; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-input .input-text { - font-size: var(--nut-input-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-input-font-size, var(--nut-font-size-2, 0.35rem)); } .nut-input__label { - width: 80px; + width: 2rem; overflow: hidden; - margin-right: 6px; + margin-right: 0.15rem; text-align: left; } .nut-input-value { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; vertical-align: middle; } .nut-input-inner { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-input-box { position: relative; width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-input-disabled-mask { @@ -2560,51 +3108,79 @@ textarea { z-index: 2; } .nut-input-word-limit { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; color: gray; - font-size: 12px; - padding: 0 10px; + font-size: 0.3rem; + padding: 0 0.25rem; } .nut-input-left-box, .nut-input-right-box { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-input-right-box { - margin-left: 4px; + margin-left: 0.1rem; } .nut-input-left-box { - margin-right: 4px; + margin-right: 0.1rem; } .nut-input-clear-box { height: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-input-clear { - width: 16px; - height: 16px; + width: 0.4rem; + height: 0.4rem; color: #c8c9cc; cursor: pointer; - margin: 0 4px; + margin: 0 0.1rem; } .nut-input--required::before { position: absolute; - left: 14px; + left: 0.35rem; color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); content: '*'; } .nut-input--disabled { color: var(--nut-input-disabled-color, #c8c9cc) !important; } -.nut-input--disabled input:disabled { +.nut-input--disabled taro-input-core:disabled { background: none; color: var(--nut-input-disabled-color, #c8c9cc); cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--nut-input-disabled-color, #c8c9cc); } +.nut-input--error::-webkit-input-placeholder { + color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); + -webkit-text-fill-color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); +} +.nut-input--error::-moz-placeholder { + color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); + -webkit-text-fill-color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); +} +.nut-input--error:-ms-input-placeholder { + color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); + -webkit-text-fill-color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); +} +.nut-input--error::-ms-input-placeholder { + color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); + -webkit-text-fill-color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); +} .nut-input--error, .nut-input--error::placeholder { color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); @@ -2621,6 +3197,12 @@ textarea { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-theme-dark .nut-picker-roller-mask { + background-image: + -webkit-gradient(linear, left top, left bottom, from(#1b1b1be6), to(#1b1b1b66)), + -webkit-gradient(linear, left bottom, left top, from(#1b1b1be6), to(#1b1b1b66)); + background-image: + -webkit-linear-gradient(top, #1b1b1be6, #1b1b1b66), + -webkit-linear-gradient(bottom, #1b1b1be6, #1b1b1b66); background-image: linear-gradient(180deg, #1b1b1be6, #1b1b1b66), linear-gradient(0deg, #1b1b1be6, #1b1b1b66); background-repeat: no-repeat; background-position: top, bottom; @@ -2633,37 +3215,57 @@ textarea { .nut-picker { position: relative; background: #fff; - border-radius: 5px; + border-radius: 0.125rem; } .nut-picker__bar { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - height: 46px; + height: 1.15rem; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-picker__left { cursor: pointer; - padding: var(--nut-picker-bar-button-padding, 0 15px); + padding: var(--nut-picker-bar-button-padding, 0 0.375rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - min-width: 50px; + min-width: 1.25rem; height: 100%; color: var(--nut-picker-cancel-color, #808080); - font-size: var(--nut-picker-bar-cancel-font-size, 14px); + font-size: var(--nut-picker-bar-cancel-font-size, 0.35rem); } .nut-picker__right { cursor: pointer; - padding: var(--nut-picker-bar-button-padding, 0 15px); + padding: var(--nut-picker-bar-button-padding, 0 0.375rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - min-width: 50px; + min-width: 1.25rem; height: 100%; color: var(--nut-picker-ok-color, var(--nut-primary-color, #fa2c19)); - font-size: var(--nut-picker-bar-ok-font-size, 14px); + font-size: var(--nut-picker-bar-ok-font-size, 0.35rem); } .nut-picker__column { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: relative; } @@ -2673,21 +3275,32 @@ textarea { top: 50%; height: var(--lineHeight); width: 100%; - border: var(--nut-picker-item-active-line-border, 1px solid #eae7e7); + border: var(--nut-picker-item-active-line-border, 0.025rem solid #eae7e7); border-left: 0; border-right: 0; + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); transform: scale(0.9); + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-picker__columnitem { width: 0; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; flex-grow: 1; height: 100%; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; + cursor: -webkit-grab; cursor: grab; } .nut-picker__title { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; width: 100%; overflow: hidden; @@ -2695,7 +3308,7 @@ textarea { white-space: nowrap; text-align: center; color: var(--nut-picker-bar-title-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-picker-bar-title-font-size, 16px); + font-size: var(--nut-picker-bar-title-font-size, 0.4rem); font-weight: var(--nut-picker-bar-title-font-weight, normal); } .nut-picker__wrapper { @@ -2717,7 +3330,10 @@ textarea { width: 100%; height: var(--lineHeight); z-index: 1; + -webkit-transform-style: preserve-3d; transform-style: preserve-3d; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-picker-roller-item { @@ -2728,10 +3344,10 @@ textarea { position: absolute; top: 0; width: 100%; - height: var(--nut-picker-item-height, 36px); - line-height: var(--nut-picker-item-height, 36px); + height: var(--nut-picker-item-height, 0.9rem); + line-height: var(--nut-picker-item-height, 0.9rem); color: var(--nut-picker-item-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-picker-item-text-font-size, 14px); + font-size: var(--nut-picker-item-text-font-size, 0.35rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -2746,7 +3362,7 @@ textarea { text-align: center; width: 100%; color: var(--nut-picker-item-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-picker-item-text-font-size, 14px); + font-size: var(--nut-picker-item-text-font-size, 0.35rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -2756,9 +3372,16 @@ textarea { width: 100%; display: block; height: 100%; + background-image: + -webkit-gradient(linear, left top, left bottom, from(#ffffffe6), to(#fff6)), + -webkit-gradient(linear, left bottom, left top, from(#ffffffe6), to(#fff6)); + background-image: + -webkit-linear-gradient(top, #ffffffe6, #fff6), + -webkit-linear-gradient(bottom, #ffffffe6, #fff6); background-image: linear-gradient(180deg, #ffffffe6, #fff6), linear-gradient(0deg, #ffffffe6, #fff6); background-repeat: no-repeat; background-position: top, bottom; + -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 1; } @@ -2777,6 +3400,7 @@ textarea { } .nut-theme-dark .nut-short-password-wrapper .nut-short-password__list .nut-short-password__item::after { position: absolute; + -webkit-box-sizing: border-box; box-sizing: border-box; content: ' '; pointer-events: none; @@ -2784,64 +3408,82 @@ textarea { right: -50%; bottom: -50%; left: -50%; - outline: 1px solid #3a3a3c; + outline: 0.025rem solid #3a3a3c; + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); transform: scale(0.5); } .nut-short-password-title { line-height: 1; - font-size: var(--nut-font-size-3, 16px); + font-size: var(--nut-font-size-3, 0.4rem); color: var(--nut-title-color, #1a1a1a); } .nut-short-password-subtitle { display: block; - margin-top: 12px; + margin-top: 0.3rem; line-height: 1; - font-size: var(--nut-font-size-1, 12px); + font-size: var(--nut-font-size-1, 0.3rem); color: var(--nut-text-color, #808080); } .nut-short-password-wrapper { - padding: 12px 0 10px; + padding: 0.3rem 0 0.25rem; text-align: center; position: relative; } .nut-short-password__list { width: 100%; - height: 41px; + height: 1.025rem; margin: 0 auto; background: var(--nut-shortpassword-background-color, rgb(245, 245, 245)); - border-radius: 4px; - border: 1px solid var(--nut-shortpassword-border-color, #ddd); + border-radius: 0.1rem; + border: 0.025rem solid var(--nut-shortpassword-border-color, #ddd); + display: -webkit-flex; + display: -ms-flexbox; display: flex; z-index: 10; } .nut-short-password__item { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-short-password__item-icon { - height: 6px; - width: 6px; + height: 0.15rem; + width: 0.15rem; border-radius: 50%; background: #000; display: inline-block; } .nut-short-password__message { - margin-top: 9px; + margin-top: 0.225rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; - width: 247px; + width: 6.175rem; } .nut-short-password__message .nut-short-password--error { line-height: 1; - font-size: var(--nut-font-size-0, 10px); + font-size: var(--nut-font-size-0, 0.25rem); color: var(--nut-shortpassword-error, var(--nut-primary-color, #fa2c19)); } .nut-short-password__message .nut-short-password--forget { line-height: 1; - font-size: var(--nut-font-size-1, 12px); + font-size: var(--nut-font-size-1, 0.3rem); color: var(--nut-shortpassword-forget, rgb(128, 128, 128)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-theme-dark .nut-textarea { @@ -2853,11 +3495,14 @@ textarea { .nut-textarea { position: relative; width: 100%; + -webkit-box-sizing: border-box; box-sizing: border-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; background: var(--nut-white, #fff); - font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14px)); - padding: 10px 25px; + font-size: var(--nut-textarea-font, var(--nut-font-size-2, 0.35rem)); + padding: 0.25rem 0.625rem; } .nut-textarea--disabled .nut-textarea__textarea, .nut-textarea--disabled .nut-textarea__limit { @@ -2866,42 +3511,43 @@ textarea { } .nut-textarea__limit { position: absolute; - right: 15px; - bottom: 12px; - font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14px)); + right: 0.375rem; + bottom: 0.3rem; + font-size: var(--nut-textarea-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-textarea-limit-color, var(--nut-text-color, #808080)); } .nut-textarea__textarea { outline: none; display: block; + -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0; - font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14px)); + font-size: var(--nut-textarea-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-textarea-text-color, var(--nut-title-color, #1a1a1a)); text-align: left; background-color: transparent; border: none; resize: none; - line-height: 20px; + line-height: 0.5rem; } .nut-textarea__textarea .taro-textarea { - font-size: 14px; + font-size: 0.35rem; resize: none; } .nut-textarea__textarea__readonly { - padding: 5px 10px; + padding: 0.125rem 0.25rem; } .nut-textarea__ali { - line-height: 17px; + line-height: 0.425rem; } .nut-textarea .nut-textarea__cpoyText { position: absolute; - top: -999999px; - left: -999999px; - font-size: 14px; + top: -24999.975rem; + left: -24999.975rem; + font-size: 0.35rem; line-height: 1.5; } .nut-theme-dark .nut-uploader__preview-list { @@ -2913,7 +3559,11 @@ textarea { } .nut-uploader { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-uploader__slot { @@ -2922,10 +3572,16 @@ textarea { .nut-uploader__upload { position: relative; background: var(--nut-uploader-background, #f7f8fa); - width: var(--nut-uploader-picture-width, 100px); - height: var(--nut-uploader-picture-height, 100px); + width: var(--nut-uploader-picture-width, 2.5rem); + height: var(--nut-uploader-picture-height, 2.5rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-uploader__input { @@ -2943,12 +3599,19 @@ textarea { cursor: not-allowed !important; } .nut-uploader__preview { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - margin-right: 10px; - margin-bottom: 10px; - box-shadow: 0 2px 10px #0000001a; + margin-right: 0.25rem; + margin-bottom: 0.25rem; + -webkit-box-shadow: 0 0.05rem 0.25rem #0000001a; + box-shadow: 0 0.05rem 0.25rem #0000001a; } .nut-uploader__preview__progress { position: absolute; @@ -2957,38 +3620,54 @@ textarea { width: 100%; height: 100%; background: #0009; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-uploader__preview__progress__msg { color: var(--nut-white, #fff); - font-size: 12px; - margin-top: 6px; + font-size: 0.3rem; + margin-top: 0.15rem; } .nut-uploader__preview.list { width: 100%; margin-right: 0; margin-bottom: 0; - margin-top: 10px; + margin-top: 0.25rem; } .nut-uploader__preview-list { width: 100%; - height: 32px; + height: 0.8rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; position: relative; } .nut-uploader__preview-list .nut-uploader__preview-img__file__name { - padding: 2px 4px; + padding: 0.05rem 0.1rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; height: 100%; } .nut-uploader__preview-list .nut-uploader__preview-img__file__name .file__name_tips { - margin-left: 4px; - padding: 0 20px; + margin-left: 0.1rem; + padding: 0 0.5rem; width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -2996,13 +3675,13 @@ textarea { } .nut-uploader__preview-list .nut-uploader__preview-img__file__del { position: absolute; - right: 6px; - top: 6px; + right: 0.15rem; + top: 0.15rem; } .nut-uploader__preview-list .nut-uploader__preview-img__file__link { position: absolute; - left: 6px; - top: 8px; + left: 0.15rem; + top: 0.2rem; } .nut-uploader__preview-list .nut-progress { position: absolute; @@ -3011,22 +3690,30 @@ textarea { bottom: 0; } .nut-uploader__preview-list .nut-progress .nut-progress-outer { - height: 2px !important; + height: 0.05rem !important; } .nut-uploader__preview-img { position: relative; - width: var(--nut-uploader-picture-width, 100px); - height: var(--nut-uploader-picture-height, 100px); + width: var(--nut-uploader-picture-width, 2.5rem); + height: var(--nut-uploader-picture-height, 2.5rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - border-radius: 6px; + border-radius: 0.15rem; } .nut-uploader__preview-img .close { position: absolute; right: 0; top: 0; color: #0009; + -webkit-transform: translate(50%, -50%); + -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } .nut-uploader__preview-img .tips { @@ -3035,12 +3722,19 @@ textarea { left: 0; right: 0; text-align: center; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - font-size: 12px; + font-size: 0.3rem; color: var(--nut-white, #fff); - height: 0px; + height: 0rem; + -webkit-transition: height 0.3s; transition: height 0.3s; background: #0000008a; width: 100%; @@ -3051,25 +3745,37 @@ textarea { .nut-uploader__preview-img__c { max-width: 100%; max-height: 100%; - border-radius: 6px; + border-radius: 0.15rem; } .nut-uploader__preview-img__file { height: 100%; width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-transition: all 0.3s; transition: all 0.3s; } .nut-uploader__preview-img__file__name { + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; - font-size: 12px; + font-size: 0.3rem; color: var(--nut-text-color, #808080); - padding: 10px; + padding: 0.25rem; height: 100%; overflow: hidden; + -webkit-box-sizing: border-box; box-sizing: border-box; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-uploader__preview-img__file__name.error { @@ -3087,21 +3793,30 @@ textarea { } .nut-number-keyboard { width: var(--nut-numberkeyboard-width, 100%); - padding: var(--nut-numberkeyboard-padding, 0 0 22px 0); + padding: var(--nut-numberkeyboard-padding, 0 0 0.55rem 0); background-color: var(--nut-numberkeyboard-background-color, #f2f3f5); -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; } .nut-number-keyboard .nut-number-keyboard__header { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-box-sizing: content-box; box-sizing: content-box; - height: var(--nut-numberkeyboard-header-height, 34px); - padding: var(--nut-numberkeyboard-header-padding, 6px 0 0 0); + height: var(--nut-numberkeyboard-header-height, 0.85rem); + padding: var(--nut-numberkeyboard-header-padding, 0.15rem 0 0 0); color: var(--nut-numberkeyboard-header-color, #646566); - font-size: var(--nut-numberkeyboard-header-font-size, 16px); + font-size: var(--nut-numberkeyboard-header-font-size, 0.4rem); } .nut-number-keyboard .nut-number-keyboard__header .nut-number-keyboard__title { display: inline-block; @@ -3110,37 +3825,51 @@ textarea { position: absolute; display: block; right: 0; - padding: var(--nut-numberkeyboard-header-close-padding, 0 16px); + padding: var(--nut-numberkeyboard-header-close-padding, 0 0.4rem); color: var(--nut-numberkeyboard-header-close-color, #576b95); - font-size: var(--nut-numberkeyboard-header-close-font-size, 14px); + font-size: var(--nut-numberkeyboard-header-close-font-size, 0.35rem); background-color: var(--nut-numberkeyboard-header-close-background-color, transparent); border: none; cursor: pointer; } .nut-number-keyboard .nut-number-keyboard__body { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - padding: 6px 0 0 6px; + padding: 0.15rem 0 0 0.15rem; } .nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__keys { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex: 3; + -ms-flex: 3; flex: 3; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar .nut-key__wrapper .nut-key { position: absolute; top: 0; - right: 6px; - bottom: 6px; + right: 0.15rem; + bottom: 0.15rem; left: 0; height: auto; } .nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar .nut-key__wrapper .nut-key--finish { - font-size: var(--nut-numberkeyboard-key-finish-font-size, 16px); + font-size: var(--nut-numberkeyboard-key-finish-font-size, 0.4rem); color: var(--nut-numberkeyboard-key-finish-font-size-color, #fff); background-color: var(--nut-numberkeyboard-key-finish-background-color, #1989fa); } @@ -3149,41 +3878,54 @@ textarea { } .nut-key__wrapper { position: relative; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + -webkit-flex-basis: 33%; + -ms-flex-preferred-size: 33%; flex-basis: 33%; + -webkit-box-sizing: border-box; box-sizing: border-box; - padding: 0 6px 6px 0; + padding: 0 0.15rem 0.15rem 0; } .nut-key__wrapper.nut-key__wrapper--wider { + -webkit-flex-basis: 66%; + -ms-flex-preferred-size: 66%; flex-basis: 66%; } .nut-key__wrapper .nut-key { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - height: var(--nut-numberkeyboard-key-height, 48px); - font-size: var(--nut-numberkeyboard-key-font-size, 28px); + height: var(--nut-numberkeyboard-key-height, 1.2rem); + font-size: var(--nut-numberkeyboard-key-font-size, 0.7rem); line-height: var(--nut-numberkeyboard-key-line-height, 1.5); background-color: var(--nut-numberkeyboard-key-background-color, #fff); color: var(--nut-numberkeyboard-key-font-size-color, #333); - border-radius: var(--nut-numberkeyboard-key-border-radius, 8px); + border-radius: var(--nut-numberkeyboard-key-border-radius, 0.2rem); cursor: pointer; } .nut-key__wrapper .nut-key--active { background-color: var(--nut-numberkeyboard-key-active-background-color, #ebedf0); } .nut-key__wrapper img { - width: 30px; - height: 24px; + width: 0.75rem; + height: 0.6rem; } .nut-number-keyboard-overlay { background-color: #0000 !important; } .nut-theme-dark .nut-action-sheet .nut-action-sheet__cancel { - border-top: 1px solid var(--nut-dark-background2, #1b1b1b); + border-top: 0.025rem solid var(--nut-dark-background2, #1b1b1b); } .nut-theme-dark .nut-action-sheet .nut-action-sheet__title { - border-bottom: 1px solid var(--nut-dark-background2, #1b1b1b); + border-bottom: 0.025rem solid var(--nut-dark-background2, #1b1b1b); } .nut-theme-dark .nut-action-sheet .nut-action-sheet__cancel, .nut-theme-dark .nut-action-sheet .nut-action-sheet__item, @@ -3196,12 +3938,12 @@ textarea { } .nut-action-sheet .nut-action-sheet__title { display: block; - padding: 10px; + padding: 0.25rem; margin: 0; text-align: center; background-color: var(--nut-white, #fff); - border-bottom: 1px solid var(--nut-actionsheet-light-color, #f6f6f6); - font-size: var(--nut-font-size-base, var(--nut-font-size-2, 14px)); + border-bottom: 0.025rem solid var(--nut-actionsheet-light-color, #f6f6f6); + font-size: var(--nut-font-size-base, var(--nut-font-size-2, 0.35rem)); color: var(--nut-title-color, #1a1a1a); } .nut-action-sheet .nut-action-sheet__menu { @@ -3213,9 +3955,9 @@ textarea { .nut-action-sheet .nut-action-sheet__cancel, .nut-action-sheet .nut-action-sheet__item { display: block; - padding: 10px; - line-height: var(--nut-actionsheet-item-line-height, 24px); - font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 14px)); + padding: 0.25rem; + line-height: var(--nut-actionsheet-item-line-height, 0.6rem); + font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-actionsheet-item-font-color, var(--nut-title-color, #1a1a1a)); text-align: center; background-color: #fff; @@ -3223,13 +3965,13 @@ textarea { cursor: pointer; } .nut-action-sheet .nut-action-sheet__desc { - font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 0.35rem)); color: #999; cursor: default; } .nut-action-sheet .nut-action-sheet__subdesc { display: block; - font-size: var(--nut-actionsheet-item-subdesc-font-size, var(--nut-font-size-1, 12px)); + font-size: var(--nut-actionsheet-item-subdesc-font-size, var(--nut-font-size-1, 0.3rem)); color: #999; } .nut-action-sheet .nut-action-sheet__item--disabled { @@ -3240,8 +3982,8 @@ textarea { cursor: default; } .nut-action-sheet .nut-action-sheet__cancel { - margin-top: 5px; - border-top: var(--nut-actionsheet-item-cancel-border-top, 1px solid var(--nut-actionsheet-light-color, #f6f6f6)); + margin-top: 0.125rem; + border-top: var(--nut-actionsheet-item-cancel-border-top, 0.025rem solid var(--nut-actionsheet-light-color, #f6f6f6)); } .nut-theme-dark .nut-backtop.show { background: var(--nut-dark-background, #131313); @@ -3252,26 +3994,37 @@ textarea { position: fixed; } .nut-backtop.show { - width: 40px; - height: 40px; + width: 1rem; + height: 1rem; background: var(--nut-white, #fff); - border: 1px solid var(--nut-backtop-border-color, #e0e0e0); + border: 0.025rem solid var(--nut-backtop-border-color, #e0e0e0); border-radius: 50%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-backtop.show :active { background: #0000001a; } .nut-backtop-main { + -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .nut-drag { position: fixed; display: inline-block; z-index: 9997 !important; + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; + height: -webkit-fit-content; + height: -moz-fit-content; height: fit-content; } .nut-drag .nut-fixed-nav { @@ -3280,26 +4033,37 @@ textarea { .nut-taro-drag { display: inline-block; z-index: 9997 !important; + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; + height: -webkit-fit-content; + height: -moz-fit-content; height: fit-content; } .nut-theme-dark .nut-dialog__header { color: var(--nut-dark-color3, rgba(232, 230, 227, 0.8)); } .nut-dialog { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - width: var(--nut-dialog-width, 296px); - min-height: 156px; - padding: 28px 24px 16px; + width: var(--nut-dialog-width, 7.4rem); + min-height: 3.9rem; + padding: 0.7rem 0.6rem 0.4rem; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-dialog__header { display: block; text-align: center; - height: 20px; - font-size: 16px; + height: 0.5rem; + font-size: 0.4rem; color: var(--nut-dialog-header-color, rgb(38, 38, 38)); font-weight: var(--nut-dialog-header-font-weight, normal); width: 100%; @@ -3310,23 +4074,33 @@ textarea { .nut-dialog__content { width: 100%; overflow: auto; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - margin: 20px 0; - max-height: 268px; - line-height: 16px; - font-size: 12px; + margin: 0.5rem 0; + max-height: 6.7rem; + line-height: 0.4rem; + font-size: 0.3rem; color: var(--nut-text-color, #808080); word-wrap: break-word; word-break: break-all; white-space: pre-wrap; } .nut-dialog__footer { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: 100%; + -webkit-justify-content: var(--nut-dialog-footer-justify-content, space-around); + -ms-flex-pack: var(--nut-dialog-footer-justify-content, space-around); justify-content: var(--nut-dialog-footer-justify-content, space-around); } .nut-dialog__footer.vertical { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-dialog__footer.vertical .nut-button { @@ -3337,14 +4111,14 @@ textarea { border: 0; } .nut-dialog__footer.vertical .nut-button.nut-dialog__footer-ok { - margin-top: 10px; + margin-top: 0.25rem; } .nut-dialog__footer .nut-button { - min-width: 100px; + min-width: 2.5rem; overflow: hidden; } .nut-dialog__footer-ok { - max-width: 128px; + max-width: 3.2rem; } .nut-theme-dark .nut-infinite-loading .nut-infinite__bottom, .nut-theme-dark .nut-infinite-loading .nut-infinite__bottom .bottom-text { @@ -3357,24 +4131,30 @@ textarea { .nut-infinite-loading .nut-infinite__bottom { display: block; width: 100%; - height: 50px; - line-height: 50px; - font-size: var(--nut-font-size-small, var(--nut-font-size-1, 12px)); + height: 1.25rem; + line-height: 1.25rem; + font-size: var(--nut-font-size-small, var(--nut-font-size-1, 0.3rem)); color: var(--nut-infiniteloading-bottom-color, #c8c8c8); text-align: center; } .nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box__img { - margin-right: 5px; - width: 15px; - height: 15px; + margin-right: 0.125rem; + width: 0.375rem; + height: 0.375rem; } .nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box__text { - font-size: 12px; + font-size: 0.3rem; color: var(--nut-text-color, #808080); } .nut-pull-refresh { @@ -3389,25 +4169,34 @@ textarea { position: absolute; left: 0; width: 100%; - height: 50px; + height: 1.25rem; + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); transform: translateY(-100%); text-align: center; - font-size: 14px; + font-size: 0.35rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-pull-refresh-container-topbox-icon { - margin-right: 4px; - width: 16px; - height: 16px; + margin-right: 0.1rem; + width: 0.4rem; + height: 0.4rem; } .nut-pull-refresh-container-topbox-text { - font-size: var(--nut-font-size-2, 14px); + font-size: var(--nut-font-size-2, 0.35rem); color: var(--nut-text-color, #808080); } .nut-fade-enter-active, .nut-fade-leave-active { + -webkit-transition: opacity 1s; transition: opacity 1s; } .nut-fade-enter-from, @@ -3417,14 +4206,15 @@ textarea { .nut-notify { display: block; width: 100%; + -webkit-box-sizing: border-box; box-sizing: border-box; - padding: var(--nut-notify-padding, 12px 0); + padding: var(--nut-notify-padding, 0.3rem 0); color: var(--nut-notify-text-color, var(--nut-white, #fff)); - font-size: var(--nut-notify-font-size, 14px); + font-size: var(--nut-notify-font-size, 0.35rem); white-space: pre-wrap; text-align: center; word-wrap: break-word; - height: var(--nut-notify-height, 44px); + height: var(--nut-notify-height, 1.1rem); line-height: var(--nut-notify-line-height, auto); } .nut-notify--base { @@ -3442,64 +4232,97 @@ textarea { .nut-notify--warning { background: var(--nut-notify-warning-background-color, linear-gradient(135deg, rgb(255, 93, 13) 0%, rgb(255, 154, 13) 100%)); } -.nut-notify view { +.nut-notify taro-view-core { width: 100%; text-align: center; } .nut-switch { cursor: pointer; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; background-color: var(--nut-primary-color, #fa2c19); - border-radius: var(--nut-switch-border-radius, 21px); + border-radius: var(--nut-switch-border-radius, 0.525rem); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; flex: 0 0 auto; } .nut-switch .nut-icon-loading1 { - width: 12px; - height: 12px; - font-size: 12px; + width: 0.3rem; + height: 0.3rem; + font-size: 0.3rem; } .nut-switch.nut-switch-close { background-color: var(--nut-switch-close-bg-color, #ebebeb); } .nut-switch .nut-switch-button { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; border-radius: 50%; background: var(--nut-white, #fff); + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; transition: transform 0.3s; + transition: + transform 0.3s, + -webkit-transform 0.3s; } .nut-switch .nut-switch-button .nut-switch-label { color: var(--nut-white, #fff); - font-size: var(--nut-font-size-1, 12px); + font-size: var(--nut-font-size-1, 0.3rem); } .nut-switch .nut-switch-button .nut-switch-label.open { - transform: translate(-16px); + -webkit-transform: translate(-0.4rem); + -ms-transform: translate(-0.4rem); + transform: translate(-0.4rem); } .nut-switch .nut-switch-button .nut-switch-label.close { - transform: translate(16px); + -webkit-transform: translate(0.4rem); + -ms-transform: translate(0.4rem); + transform: translate(0.4rem); } .nut-switch.nut-switch-disabled { opacity: 0.6; } .nut-switch.nut-switch-base { - min-width: var(--nut-switch-width, 36px); - height: var(--nut-switch-height, 21px); - line-height: var(--nut-switch-line-height, 21px); + min-width: var(--nut-switch-width, 0.9rem); + height: var(--nut-switch-height, 0.525rem); + line-height: var(--nut-switch-line-height, 0.525rem); overflow: hidden; } .nut-switch.nut-switch-base .nut-switch-button { - height: var(--nut-switch-inside-height, 13px); - width: var(--nut-switch-inside-width, 13px); + height: var(--nut-switch-inside-height, 0.325rem); + width: var(--nut-switch-inside-width, 0.325rem); + -webkit-transform: var(--nut-switch-inside-close-transform, translateX(30%)); + -ms-transform: var(--nut-switch-inside-close-transform, translateX(30%)); transform: var(--nut-switch-inside-close-transform, translateX(30%)); } .nut-switch.nut-switch-base.nut-switch-open .nut-switch-button { + -webkit-transform: var(--nut-switch-inside-open-transform, translateX(146%)); + -ms-transform: var(--nut-switch-inside-open-transform, translateX(146%)); transform: var(--nut-switch-inside-open-transform, translateX(146%)); } +@-webkit-keyframes rotation { + 0% { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + } +} @keyframes rotation { 0% { -webkit-transform: rotate(0deg); @@ -3511,7 +4334,7 @@ textarea { .nut-toast { position: fixed; left: 0; - bottom: 150px; + bottom: 3.75rem; width: 100%; text-align: center; pointer-events: none; @@ -3519,14 +4342,20 @@ textarea { font-family: var(--nut-font-family, PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif); } .nut-toast-small .nut-toast-inner { - font-size: var(--nut-font-size-small, var(--nut-font-size-1, 12px)); + font-size: var(--nut-font-size-small, var(--nut-font-size-1, 0.3rem)); } .nut-toast-large .nut-toast-inner { - font-size: var(--nut-font-size-large, var(--nut-font-size-3, 16px)); + font-size: var(--nut-font-size-large, var(--nut-font-size-3, 0.4rem)); } .nut-toast-cover { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; pointer-events: auto; height: 100%; @@ -3534,53 +4363,72 @@ textarea { } .nut-toast-inner { display: inline-block; - font-size: var(--nut-toast-text-font-size, 14px); + font-size: var(--nut-toast-text-font-size, 0.35rem); min-width: 40%; max-width: 65%; text-align: center; - padding: var(--nut-toast-inner-padding, 24px 30px); + padding: var(--nut-toast-inner-padding, 0.6rem 0.75rem); word-break: break-all; background: var(--nut-toast-inner-bg-color, rgba(0, 0, 0, 0.8)); - border-radius: var(--nut-toast-inner-border-radius, 12px); + border-radius: var(--nut-toast-inner-border-radius, 0.3rem); color: var(--nut-toast-font-color, var(--nut-white, #fff)); } .nut-toast-text { - font-size: var(--nut-toast-text-font-size, 14px); + font-size: var(--nut-toast-text-font-size, 0.35rem); } .nut-toast-text:empty { - margin-bottom: -8px; + margin-bottom: -0.2rem; } .nut-toast-title { - font-size: var(--nut-toast-title-font-size, 16px); + font-size: var(--nut-toast-title-font-size, 0.4rem); } .nut-toast-title:empty { - margin-bottom: -8px; + margin-bottom: -0.2rem; } .nut-toast-has-icon .nut-toast-icon-wrapper { width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - margin-bottom: 8px; + margin-bottom: 0.2rem; } .nut-toast-center { top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-toast-loading .nut-toast-inner { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-toast-loading .nut-toast-icon-wrapper { + -webkit-animation: rotation 2s linear infinite; animation: rotation 2s linear infinite; } .nut-toast-loading .nut-toast-icon-no-animation { + -webkit-animation: none; animation: none; } .toast-fade-enter-active, .toast-fade-leave-active { + -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .toast-fade-enter-from, @@ -3599,26 +4447,34 @@ textarea { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-range-container { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: relative; width: 100%; - height: 4px; + height: 0.1rem; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-range-container .nut-range-min, .nut-range-container .nut-range-max { - font-size: var(--nut-font-size-1, 12px); + font-size: var(--nut-font-size-1, 0.3rem); color: var(--nut-range-tip-font-color, #333333); -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; } .nut-range-container-vertical { height: 100%; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; - padding: 0 15px; + padding: 0 0.375rem; } .nut-range-container-vertical .nut-range { - width: 4px; + width: 0.1rem; height: 100%; } .nut-range-container-vertical .nut-range-button-wrapper, @@ -3628,41 +4484,48 @@ textarea { bottom: 0; left: 50%; right: initial; + -webkit-transform: translate3d(-50%, 50%, 0); transform: translate3d(-50%, 50%, 0); } .nut-range-container-vertical .nut-range-button-wrapper-left { top: 0; left: 50%; right: initial; + -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .nut-range-container-vertical .nut-range .number { + -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .nut-range-container-vertical .nut-range-vertical { - margin: 10px 0; + margin: 0.25rem 0; } .nut-range-container-vertical .nut-range-mark { position: absolute; width: 100%; right: 50%; overflow: visible; - font-size: 12px; + font-size: 0.3rem; height: 100%; top: initial; - width: 36px; + width: 0.9rem; padding: 0; } .nut-range-container-vertical .nut-range-mark-text { - width: 20px; + width: 0.5rem; position: absolute; display: inline-block; - line-height: 16px; + line-height: 0.4rem; color: #999; text-align: center; word-break: keep-all; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-range-container-vertical .nut-range-mark-text-active .nut-range-tick { @@ -3671,9 +4534,9 @@ textarea { .nut-range-container-vertical .nut-range-tick { position: absolute; top: 0; - left: 30px; - width: 11px; - height: 11px; + left: 0.75rem; + width: 0.275rem; + height: 0.275rem; margin-left: 0; border-radius: 50%; background-color: var(--nut-range-bg-color-tick, #fa958c); @@ -3682,8 +4545,8 @@ textarea { display: block; position: relative; width: 100%; - height: 4px; - border-radius: 2px; + height: 0.1rem; + border-radius: 0.05rem; cursor: pointer; } .nut-range::before { @@ -3705,16 +4568,18 @@ textarea { height: 100%; background: var(--nut-range-bar-bg-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); border-radius: inherit; + -webkit-transition: all 0.2s; transition: all 0.2s; } .nut-range-button { display: block; - width: var(--nut-range-bar-btn-width, 24px); - height: var(--nut-range-bar-btn-height, 24px); + width: var(--nut-range-bar-btn-width, 0.6rem); + height: var(--nut-range-bar-btn-height, 0.6rem); background-color: var(--nut-range-bar-btn-bg-color, var(--nut-white, #fff)); border-radius: 50%; - box-shadow: 0 1px 2px #00000026; - border: var(--nut-range-bar-btn-border, 1px solid var(--nut-primary-color, #fa2c19)); + -webkit-box-shadow: 0 0.025rem 0.05rem #00000026; + box-shadow: 0 0.025rem 0.05rem #00000026; + border: var(--nut-range-bar-btn-border, 0.025rem solid var(--nut-primary-color, #fa2c19)); outline: none; } .nut-range-button-wrapper, @@ -3722,7 +4587,9 @@ textarea { position: absolute; top: 50%; right: 0; + -webkit-transform: translate3d(50%, -50%, 0); transform: translate3d(50%, -50%, 0); + cursor: -webkit-grab; cursor: grab; outline: none; } @@ -3730,20 +4597,31 @@ textarea { position: absolute; top: 50%; left: 0; + -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); + cursor: -webkit-grab; cursor: grab; outline: none; } .nut-range-button .number { width: 100%; height: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; - font-size: var(--nut-font-size-1, 12px); + font-size: var(--nut-font-size-1, 0.3rem); color: var(--nut-range-tip-font-color, #333333); + -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .nut-range-disabled { @@ -3756,25 +4634,29 @@ textarea { cursor: not-allowed; } .nut-range-show-number { - margin: 0 15px; + margin: 0 0.375rem; } .nut-range-mark { position: absolute; width: 100%; overflow: visible; top: 50%; - font-size: 12px; - padding-top: 14px; + font-size: 0.3rem; + padding-top: 0.35rem; } .nut-range-mark-text { position: absolute; display: inline-block; - line-height: 16px; + line-height: 0.4rem; color: #999; text-align: center; word-break: keep-all; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); } .nut-range-mark-text-active .nut-range-tick { @@ -3782,9 +4664,9 @@ textarea { } .nut-range-tick { position: absolute; - top: -20px; - width: 11px; - height: 11px; + top: -0.5rem; + width: 0.275rem; + height: 0.275rem; left: 0; border-radius: 50%; background-color: var(--nut-range-bg-color-tick, #fa958c); @@ -3796,19 +4678,25 @@ textarea { padding: 0; } .nut-audio .nut-audio__progress { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: 100%; margin: 0 auto; - padding: 10px 0; + padding: 0.25rem 0; } .nut-audio .nut-audio__progress .nut-audio__bar { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - margin: 0 10px; + margin: 0 0.25rem; } .nut-audio .nut-audio__progress .nut-audio__time { - min-width: 50px; - font-size: 12px; + min-width: 1.25rem; + font-size: 0.3rem; text-align: center; } .nut-audio .nut-audio__icon { @@ -3816,59 +4704,82 @@ textarea { display: inline-block; } .nut-audio .nut-audio__icon .nut-audio__icon--box { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - width: 30px; - height: 30px; + width: 0.75rem; + height: 0.75rem; background: #fff; border-radius: 50%; - box-shadow: 0 0 8px #80808080; + -webkit-box-shadow: 0 0 0.2rem #80808080; + box-shadow: 0 0 0.2rem #80808080; } .nut-audio .nut-audio__icon .nut-audio__icon--box.nut-audio__icon--stop::after { position: absolute; left: 50%; top: 50%; - transform: translate(-15px); + -webkit-transform: translate(-0.375rem); + -ms-transform: translate(-0.375rem); + transform: translate(-0.375rem); content: ''; - height: 2px; - width: 30px; + height: 0.05rem; + width: 0.75rem; background: var(--nut-disable-color, #cccccc); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); transform: rotate(45deg); - transform-origin: 8px -18px; + -webkit-transform-origin: 0.2rem -0.45rem; + -ms-transform-origin: 0.2rem -0.45rem; + transform-origin: 0.2rem -0.45rem; } .nut-audio .audioMain { - margin-top: 30px; + margin-top: 0.75rem; } .nut-audio .nut-audio__button--custom { - width: 8px; - height: 8px; + width: 0.2rem; + height: 0.2rem; color: #fff; - font-size: 10px; - line-height: 18px; + font-size: 0.25rem; + line-height: 0.45rem; text-align: center; background-color: #ee0a24; - border-radius: 100px; + border-radius: 2.5rem; } .nut-audio-operate-group { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - margin-top: 10px; + margin-top: 0.25rem; } .nut-audio-operate-group .nut-audio-operate .nut-audio-operate-item { - margin: 0 5px; + margin: 0 0.125rem; } .nut-avatar-group { background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: relative; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; flex: 0 0 auto; } .nut-avatar-group .nut-avatar { - border: 1px solid #fff; + border: 0.025rem solid #fff; } .nut-list { width: 100%; @@ -3897,32 +4808,50 @@ textarea { .nut-progress { width: 100%; position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-progress .nut-progress-outer { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; background-color: var(--nut-progress-outer-background-color, #f3f3f3); - border-radius: var(--nut-progress-outer-border-radius, 12px); - height: 10px; + border-radius: var(--nut-progress-outer-border-radius, 0.3rem); + height: 0.25rem; } .nut-progress .nut-progress-outer .nut-progress-inner { width: 30%; height: 100%; - border-radius: var(--nut-progress-outer-border-radius, 12px); + border-radius: var(--nut-progress-outer-border-radius, 0.3rem); background: var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); -webkit-transition: all 0.4s; transition: all 0.4s; } .nut-progress .nut-progress-outer .nut-progress-text { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; color: #fff; } .nut-progress .nut-progress-outer .nut-progress-slot { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-progress .nut-progress-outer .nut-active::before { @@ -3932,9 +4861,24 @@ textarea { left: 0; right: 0; bottom: 0; - border-radius: var(--nut-progress-outer-border-radius, 12px); + border-radius: var(--nut-progress-outer-border-radius, 0.3rem); + -webkit-animation: progressActive 2s ease-in-out infinite; animation: progressActive 2s ease-in-out infinite; } +@-webkit-keyframes progressActive { + 0% { + background: #ffffff1a; + width: 0; + } + 20% { + background: #ffffff80; + width: 0; + } + to { + background: #fff0; + width: 100%; + } +} @keyframes progressActive { 0% { background: #ffffff1a; @@ -3950,59 +4894,64 @@ textarea { } } .nut-progress .nut-progress-outer.nut-progress-small { - height: var(--nut-progress-small-height, 5px); + height: var(--nut-progress-small-height, 0.125rem); } .nut-progress .nut-progress-outer.nut-progress-small .nut-progress-text { - font-size: var(--nut-progress-small-text-font-size, 7px); - line-height: var(--nut-progress-small-text-line-height, 10px); - padding: var(--nut-progress-small-text-padding, 2px 4px); + font-size: var(--nut-progress-small-text-font-size, 0.175rem); + line-height: var(--nut-progress-small-text-line-height, 0.25rem); + padding: var(--nut-progress-small-text-padding, 0.05rem 0.1rem); top: 50%; } .nut-progress .nut-progress-outer.nut-progress-base { - height: var(--nut-progress-base-height, 10px); + height: var(--nut-progress-base-height, 0.25rem); } .nut-progress .nut-progress-outer.nut-progress-base .nut-progress-text { - font-size: var(--nut-progress-base-text-font-size, 9px); - line-height: var(--nut-progress-base-text-line-height, 13px); - padding: var(--nut-progress-base-text-padding, var(--nut-progress-insidetext-padding, 3px 5px 3px 6px)); + font-size: var(--nut-progress-base-text-font-size, 0.225rem); + line-height: var(--nut-progress-base-text-line-height, 0.325rem); + padding: var(--nut-progress-base-text-padding, var(--nut-progress-insidetext-padding, 0.075rem 0.125rem 0.075rem 0.15rem)); top: 50%; } .nut-progress .nut-progress-outer.nut-progress-large { - height: var(--nut-progress-large-height, 15px); + height: var(--nut-progress-large-height, 0.375rem); } .nut-progress .nut-progress-outer.nut-progress-large .nut-progress-text { - font-size: var(--nut-progress-large-text-font-size, 13px); - line-height: var(--nut-progress-large-text-line-height, 18px); - padding: var(--nut-progress-large-text-padding, var(--nut-progress-insidetext-padding, 3px 5px 3px 6px)); + font-size: var(--nut-progress-large-text-font-size, 0.325rem); + line-height: var(--nut-progress-large-text-line-height, 0.45rem); + padding: var(--nut-progress-large-text-padding, var(--nut-progress-insidetext-padding, 0.075rem 0.125rem 0.075rem 0.15rem)); top: 50%; } .nut-progress .nut-progress-outer-part { width: 90%; } .nut-progress .nut-progress-text { - padding: 0 5px; - font-size: 13px; + padding: 0 0.125rem; + font-size: 0.325rem; line-height: 1; - min-width: 35px; + min-width: 0.875rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-progress .nut-progress-insidetext { - padding: var(--nut-progress-insidetext-padding, 3px 5px 3px 6px); + padding: var(--nut-progress-insidetext-padding, 0.075rem 0.125rem 0.075rem 0.15rem); background: var( --nut-progress-insidetext-background, var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)) ); - border-radius: var(--nut-progress-insidetext-border-radius, 5px); + border-radius: var(--nut-progress-insidetext-border-radius, 0.125rem); position: absolute; + -webkit-transition: all 0.4s; transition: all 0.4s; top: 50%; - min-width: 0px; + min-width: 0rem; } .nut-progress .nut-icon-success, .nut-progress .nut-icon-fail { - width: 10px; - height: 10px; + width: 0.25rem; + height: 0.25rem; display: inline-block; } .nut-theme-dark .nut-circle-progress__text { @@ -4013,6 +4962,9 @@ textarea { } .nut-circle-progress__hover { stroke: var(--nut-circleprogress-primary-color, var(--nut-primary-color, #fa2c19)); + -webkit-transition: + stroke-dasharray 0.6s ease 0s, + stroke 0.6s ease 0s; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s; @@ -4024,12 +4976,15 @@ textarea { position: absolute; top: 50%; left: 0; + -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; color: var(--nut-circleprogress-text-color, #000000); - font-size: var(--nut-circleprogress-text-size, var(--nut-font-size-3, 16px)); + font-size: var(--nut-circleprogress-text-size, var(--nut-font-size-3, 0.4rem)); } .nut-theme-dark .nut-noticebar__page { background: var(--nut-dark-background2, #1b1b1b); @@ -4039,18 +4994,22 @@ textarea { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-noticebar__page { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - padding: var(--nut-noticebar-box-padding, 0 16px); - height: var(--nut-noticebar-across-height, 40px); - font-size: var(--nut-noticebar-font-size, 14px); + padding: var(--nut-noticebar-box-padding, 0 0.4rem); + height: var(--nut-noticebar-across-height, 1rem); + font-size: var(--nut-noticebar-font-size, 0.35rem); position: relative; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; background: var(--nut-noticebar-background, rgb(251, 248, 220)); color: var(--nut-noticebar-color, #d9500b); } .nut-noticebar__page--wrapable { height: auto; - padding: var(--nut-noticebar-wrapable-padding, 16px); + padding: var(--nut-noticebar-wrapable-padding, 0.4rem); } .nut-noticebar__page--wrapable .nut-noticebar__page-wrap { height: auto !important; @@ -4062,25 +5021,39 @@ textarea { } .nut-noticebar__page .nut-noticebar__page--withicon { position: relative; - padding-right: 40px; + padding-right: 1rem; } .nut-noticebar__page .nut-noticebar__page-lefticon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin: var(--nut-noticebar-lefticon-margin, 0px 10px); + margin: var(--nut-noticebar-lefticon-margin, 0rem 0.25rem); background-size: 100% 100%; } .nut-noticebar__page .nut-noticebar__page-righticon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - margin: var(--nut-noticebar-righticon-margin, 0px 10px); + margin: var(--nut-noticebar-righticon-margin, 0rem 0.25rem); } .nut-noticebar__page .nut-noticebar__page-wrap { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - height: var(--nut-noticebar-across-line-height, 24px); - line-height: var(--nut-noticebar-across-line-height, 24px); + height: var(--nut-noticebar-across-line-height, 0.6rem); + line-height: var(--nut-noticebar-across-line-height, 0.6rem); overflow: hidden; position: relative; } @@ -4096,37 +5069,65 @@ textarea { text-overflow: ellipsis; } .nut-noticebar__page .play { + -webkit-animation: nut-notice-bar-play linear both running; animation: nut-notice-bar-play linear both running; } .nut-noticebar__page .play-infinite { + -webkit-animation: nut-notice-bar-play-infinite linear infinite both running; animation: nut-notice-bar-play-infinite linear infinite both running; } .nut-noticebar__page .play-vertical { + -webkit-animation: nut-notice-bar-play-vertical linear infinite both running; animation: nut-notice-bar-play-vertical linear infinite both running; } +@-webkit-keyframes nut-notice-bar-play { + to { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} @keyframes nut-notice-bar-play { to { + -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } +@-webkit-keyframes nut-notice-bar-play-infinite { + to { + -webkit-transform: translate(-100%); + transform: translate(-100%); + } +} @keyframes nut-notice-bar-play-infinite { to { + -webkit-transform: translate(-100%); transform: translate(-100%); } } +@-webkit-keyframes nut-notice-bar-play-vertical { + to { + -webkit-transform: translateY(var(--nut-noticebar-across-height, 1rem)); + transform: translateY(var(--nut-noticebar-across-height, 1rem)); + } +} @keyframes nut-notice-bar-play-vertical { to { - transform: translateY(var(--nut-noticebar-across-height, 40px)); + -webkit-transform: translateY(var(--nut-noticebar-across-height, 1rem)); + transform: translateY(var(--nut-noticebar-across-height, 1rem)); } } .nut-noticebar__vertical { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; - height: var(--nut-noticebar-across-height, 40px); - font-size: var(--nut-noticebar-font-size, 14px); + height: var(--nut-noticebar-across-height, 1rem); + font-size: var(--nut-noticebar-font-size, 0.35rem); overflow: hidden; - padding: var(--nut-noticebar-box-padding, 0 16px); + padding: var(--nut-noticebar-box-padding, 0 0.4rem); background: var(--nut-noticebar-background, rgb(251, 248, 220)); color: var(--nut-noticebar-color, #d9500b); } @@ -4135,11 +5136,13 @@ textarea { margin: 0; padding: 0; display: block; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; overflow: hidden; } .nut-noticebar__vertical .nut-noticebar__vertical-list .nut-noticebar__vertical-item { - height: var(--nut-noticebar-across-height, 40px); + height: var(--nut-noticebar-across-height, 1rem); width: 100%; text-overflow: ellipsis; white-space: nowrap; @@ -4147,63 +5150,76 @@ textarea { } .nut-noticebar__vertical .nut-noticebar-custom-item { position: absolute; - top: 999999px; + top: 24999.975rem; } .nut-noticebar__vertical .go { - margin: var(--nut-noticebar-righticon-margin, 0px 10px); + margin: var(--nut-noticebar-righticon-margin, 0rem 0.25rem); + -webkit-align-self: center; + -ms-flex-item-align: center; align-self: center; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-theme-dark .nut-empty { background: var(--nut-dark-background, #131313); } .nut-empty { + -webkit-box-sizing: border-box; box-sizing: border-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - padding: var(--nut-empty-padding, 32px 0); + padding: var(--nut-empty-padding, 0.8rem 0); } .nut-empty__box { - width: var(--nut-empty-image-size, 170px); - height: var(--nut-empty-image-size, 170px); + width: var(--nut-empty-image-size, 4.25rem); + height: var(--nut-empty-image-size, 4.25rem); } .nut-empty__box .img { width: 100%; height: 100%; } .nut-empty__box img, -.nut-empty__box image { +.nut-empty__box taro-image-core { width: 100%; height: 100%; } .nut-empty__description { - margin-top: var(--nut-empty-description-margin-top, 4px); - padding: var(--nut-empty-description-padding, 0 40px); + margin-top: var(--nut-empty-description-margin-top, 0.1rem); + padding: var(--nut-empty-description-padding, 0 1rem); color: var(--nut-empty-description-color, #666666); - font-size: var(--nut-empty-description-font-size, 14px); - line-height: var(--nut-empty-description-line-height, 20px); + font-size: var(--nut-empty-description-font-size, 0.35rem); + line-height: var(--nut-empty-description-line-height, 0.5rem); } .nut-video-play-btn::before { content: ''; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA+CAMAAABTPci/AAAAb1BMVEUAAAACAgL///////////////////////////////////+urq4uLi7+/v6zs7OLi4v9/f3Hx8dubm79/f39/f3z8/P5+fn9/f38/Pz4+Pipqans7Oz8/Pz29vbx8fHi4uLX19fq6urg4ODT09P5+flRzniSAAAAJXRSTlMAA6GcmZWlno+RjBYHixgNhRsJgn9PbYh7XhNBdFlHMyc6LCNmyQGEbAAAAdlJREFUSMe11tly4jAQRuHgDdnBYBazw8xk8v7POMI/1Jm0iORUKs31Vy0dMOWX78xk8nWi+SKZrVYzqfHo9Xo4nOZiY83yvW2a9vxnwRmTZta3fhq3O/xlWQodzwNqGre/HlmWuNFeyKtm+7aSSqNG4/x0/VJnTKENxtWOICkkI9YQJIEwdV2uFSSOjPEfBYkjh7kpP+3FBrEIMuzR7AmSRN5oivpdQeJI13mYsig6G8Qi1sgMU55/KUiI1uZCoCJ3BDGo9iYgQnm+IYhBWsN1MPm0VJAADYbBDGra9gQBsccYoSxXEIuCNRiPsqxUkE8Q5IGksvXpFgRkiRBkmCrf/vbLHqgryWYXyUhVrvfLLIobr7KL7/ERPT8axk/xBrImRNV9riBdKG1CNMJwvHlnjAimuiOFABURw6Ka5PNdYfc8JVO+3AEhMPZoO/2MQJE9d1Qc+MGCME9ItufRAMXv4/rXCQYkYvYQQMQi2wDVnRasAbVk+9+YADHEGhMgRKGxAUIkYp44AqSRDAE+RxAhAiQQhAARNDWpHX/DccSenAAR1HzIRoCxqCoJkEDZwxAghY6buyBAGs0uMgQYo5bnW4A1AcapfrvtCTD2FXuxEPm5l3nYyw/PP4V4LkWCqx4LAAAAAElFTkSuQmCC) no-repeat center; - width: 30px; - height: 30px; + width: 0.75rem; + height: 0.75rem; display: inline-block; background-size: contain; } .nut-video-controller .nut-video-controller__playbtn { - width: 18px; - height: 18px; + width: 0.45rem; + height: 0.45rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x ); background-repeat: no-repeat; background-position: center; - margin: 0 10px; + margin: 0 0.25rem; } .nut-video-controller .nut-video-controller__playbtn.puase { background-image: -webkit-image-set( @@ -4214,8 +5230,8 @@ textarea { background-position: center; } .nut-video-controller .nut-video-controller__full { - width: 40px; - height: 35px; + width: 1rem; + height: 0.875rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K) 1x @@ -4232,8 +5248,8 @@ textarea { background-position: center; } .nut-video-controller .nut-video-controller__volume { - width: 30px; - height: 30px; + width: 0.75rem; + height: 0.75rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x @@ -4250,57 +5266,83 @@ textarea { background-position: center; } .nut-steps { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-steps-vertical { height: 100%; + -webkit-flex-flow: column; + -ms-flex-flow: column; flex-flow: column; } .nut-step { + -webkit-flex-grow: 0; + -ms-flex-positive: 0; flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; text-align: center; font-size: 0; } .nut-step-head { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - margin-bottom: 12px; + margin-bottom: 0.3rem; } .nut-step-line { position: absolute; - top: 11px; + top: 0.275rem; left: 50%; right: -50%; display: inline-block; - height: 1px; + height: 0.025rem; background: var(--nut-steps-base-line-color, #909ca4); } .nut-step-icon { position: relative; - display: flex; - width: var(--nut-steps-base-icon-width, 25px); - height: var(--nut-steps-base-icon-height, 25px); - line-height: var(--nut-steps-base-icon-line-height, 25px); - font-size: var(--nut-steps-base-icon-font-size, 13px); - align-items: center; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: var(--nut-steps-base-icon-width, 0.625rem); + height: var(--nut-steps-base-icon-height, 0.625rem); + line-height: var(--nut-steps-base-icon-line-height, 0.625rem); + font-size: var(--nut-steps-base-icon-font-size, 0.325rem); + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; z-index: 1; } .nut-step-icon-inner { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-step-icon .nut-icon { - width: var(--nut-steps-base-icon-font-size, 13px); - height: var(--nut-steps-base-icon-font-size, 13px); + width: var(--nut-steps-base-icon-font-size, 0.325rem); + height: var(--nut-steps-base-icon-font-size, 0.325rem); } .nut-step-icon.is-icon { border-radius: 50%; - border-width: 1px; + border-width: 0.025rem; border-style: solid; } .nut-step-main { @@ -4311,13 +5353,13 @@ textarea { } .nut-step-title { display: block; - margin-bottom: var(--nut-steps-base-title-margin-bottom, 10px); - font-size: var(--nut-steps-base-title-font-size, 14px); + margin-bottom: var(--nut-steps-base-title-margin-bottom, 0.25rem); + font-size: var(--nut-steps-base-title-font-size, 0.35rem); color: var(--nut-steps-base-title-color, #909ca4); } .nut-step-content { display: block; - font-size: var(--nut-steps-base-content-font-size, 14px); + font-size: var(--nut-steps-base-content-font-size, 0.35rem); color: var(--nut-steps-base-content-color, #666); } .nut-step:last-child .nut-step-line { @@ -4361,7 +5403,7 @@ textarea { color: var(--nut-steps-wait-content-color, #909ca4); } .nut-steps-horizontal.nut-steps-dot .nut-step-head { - margin-top: 7px; + margin-top: 0.175rem; margin-bottom: 0; } .nut-steps-horizontal.nut-steps-dot .nut-step-line { @@ -4369,10 +5411,11 @@ textarea { bottom: -50%; } .nut-steps-horizontal.nut-steps-dot .nut-step-icon { - width: 8px; - height: 8px; + width: 0.2rem; + height: 0.2rem; background: var(--nut-primary-color, #fa2c19); border-radius: 50%; + -webkit-box-sizing: content-box; box-sizing: content-box; } .nut-steps-horizontal.nut-steps-dot .nut-step-wait .nut-step-icon { @@ -4394,22 +5437,24 @@ textarea { position: absolute; left: 50%; top: 50%; - margin-left: -7px; - margin-top: -7px; - width: 14px; - height: 14px; + margin-left: -0.175rem; + margin-top: -0.175rem; + width: 0.35rem; + height: 0.35rem; background-color: var(--nut-primary-color-end, #fa6419); border-radius: 50%; opacity: 0.23; } .nut-steps-vertical .nut-step { + display: -webkit-flex; + display: -ms-flexbox; display: flex; height: 33.34%; } .nut-steps-vertical .nut-step-line { position: absolute; display: inline-block; - width: 1px; + width: 0.025rem; height: 100%; background: #909ca4; } @@ -4419,19 +5464,20 @@ textarea { text-align: left; } .nut-steps-vertical.nut-steps-dot .nut-step-head { - margin-top: 7px; + margin-top: 0.175rem; margin-bottom: 0; } .nut-steps-vertical.nut-steps-dot .nut-step-line { - top: 7px; + top: 0.175rem; left: 50%; right: -50%; } .nut-steps-vertical.nut-steps-dot .nut-step-icon { - width: 8px; - height: 8px; + width: 0.2rem; + height: 0.2rem; background: var(--nut-primary-color, #fa2c19); border-radius: 50%; + -webkit-box-sizing: content-box; box-sizing: content-box; } .nut-steps-vertical.nut-steps-dot .nut-step-wait .nut-step-icon { @@ -4453,60 +5499,79 @@ textarea { position: absolute; left: 50%; top: 50%; - margin-left: -7px; - margin-top: -7px; - width: 14px; - height: 14px; + margin-left: -0.175rem; + margin-top: -0.175rem; + width: 0.35rem; + height: 0.35rem; background-color: var(--nut-primary-color-end, #fa6419); border-radius: 50%; opacity: 0.23; } .nut-swiper { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-transition-property: -webkit-transform; + transition-property: -webkit-transform; transition-property: transform; + transition-property: + transform, + -webkit-transform; + -webkit-box-sizing: content-box; box-sizing: content-box; overflow: hidden; + cursor: -webkit-grab; cursor: grab; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; } .nut-swiper-inner { + display: -webkit-flex; + display: -ms-flexbox; display: flex; height: 100%; } .nut-swiper-vertical { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-swiper-pagination { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: absolute; left: 50%; - bottom: 12px; + bottom: 0.3rem; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); } .nut-swiper-pagination i { - width: var(--nut-swiper-pagination-item-width, 8px); - height: var(--nut-swiper-pagination-item-height, 3px); - margin-right: var(--nut-swiper-pagination-item-margin-right, 7px); - border-radius: var(--nut-swiper-pagination-item-border-radius, 2px); + width: var(--nut-swiper-pagination-item-width, 0.2rem); + height: var(--nut-swiper-pagination-item-height, 0.075rem); + margin-right: var(--nut-swiper-pagination-item-margin-right, 0.175rem); + border-radius: var(--nut-swiper-pagination-item-border-radius, 0.05rem); } .nut-swiper-pagination i:last-child { margin-right: 0; } .nut-swiper-pagination-vertical { top: 50%; - left: 12px; + left: 0.3rem; bottom: auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-swiper-pagination-vertical i { - margin-bottom: 5px; + margin-bottom: 0.125rem; } .nut-swiper-item { height: 100%; @@ -4515,6 +5580,8 @@ textarea { width: 100%; height: 100%; position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-video-player { @@ -4530,26 +5597,37 @@ textarea { left: 0; top: 0; right: 0; - bottom: 60px; + bottom: 1.5rem; } .nut-video .nut-video-mask.custom-touch { bottom: 0; } -.nut-video video { +.nut-video taro-video-core { width: 100%; height: 100%; + -o-object-fit: fill; object-fit: fill; } .nut-video-play-btn { - width: 80px; - height: 50px; - margin-top: -25px; + width: 2rem; + height: 1.25rem; + margin-top: -0.625rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; border: 0; background-color: #00000073; color: #fff; + -webkit-transition: + border-color 0.4s, + outline 0.4s, + background-color 0.4s; transition: border-color 0.4s, outline 0.4s, @@ -4557,34 +5635,39 @@ textarea { position: absolute; top: 50%; left: 50%; - margin-left: -40px; + margin-left: -1rem; padding: 0; cursor: pointer; opacity: 1; background-color: #00000080; - font-size: 30px; + font-size: 0.75rem; border-radius: 20%; } .nut-video-play-btn::before { content: ''; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA+CAMAAABTPci/AAAAb1BMVEUAAAACAgL///////////////////////////////////+urq4uLi7+/v6zs7OLi4v9/f3Hx8dubm79/f39/f3z8/P5+fn9/f38/Pz4+Pipqans7Oz8/Pz29vbx8fHi4uLX19fq6urg4ODT09P5+flRzniSAAAAJXRSTlMAA6GcmZWlno+RjBYHixgNhRsJgn9PbYh7XhNBdFlHMyc6LCNmyQGEbAAAAdlJREFUSMe11tly4jAQRuHgDdnBYBazw8xk8v7POMI/1Jm0iORUKs31Vy0dMOWX78xk8nWi+SKZrVYzqfHo9Xo4nOZiY83yvW2a9vxnwRmTZta3fhq3O/xlWQodzwNqGre/HlmWuNFeyKtm+7aSSqNG4/x0/VJnTKENxtWOICkkI9YQJIEwdV2uFSSOjPEfBYkjh7kpP+3FBrEIMuzR7AmSRN5oivpdQeJI13mYsig6G8Qi1sgMU55/KUiI1uZCoCJ3BDGo9iYgQnm+IYhBWsN1MPm0VJAADYbBDGra9gQBsccYoSxXEIuCNRiPsqxUkE8Q5IGksvXpFgRkiRBkmCrf/vbLHqgryWYXyUhVrvfLLIobr7KL7/ERPT8axk/xBrImRNV9riBdKG1CNMJwvHlnjAimuiOFABURw6Ka5PNdYfc8JVO+3AEhMPZoO/2MQJE9d1Qc+MGCME9ItufRAMXv4/rXCQYkYvYQQMQi2wDVnRasAbVk+9+YADHEGhMgRKGxAUIkYp44AqSRDAE+RxAhAiQQhAARNDWpHX/DccSenAAR1HzIRoCxqCoJkEDZwxAghY6buyBAGs0uMgQYo5bnW4A1AcapfrvtCTD2FXuxEPm5l3nYyw/PP4V4LkWCqx4LAAAAAElFTkSuQmCC) no-repeat center; - width: 30px; - height: 30px; + width: 0.75rem; + height: 0.75rem; display: inline-block; background-size: contain; } .nut-video-controller { position: absolute; + display: -webkit-flex; + display: -ms-flexbox; display: flex; left: 0; bottom: 0; background-color: #00000080; - height: 35px; + height: 0.875rem; width: 100%; z-index: 11111111; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; opacity: 0; + -webkit-transition: all 1s; transition: all 1s; } .nut-video-controller.nut-video-controller--show { @@ -4594,15 +5677,15 @@ textarea { opacity: 0; } .nut-video-controller .nut-video-controller__playbtn { - width: 18px; - height: 18px; + width: 0.45rem; + height: 0.45rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x ); background-repeat: no-repeat; background-position: center; - margin: 0 10px; + margin: 0 0.25rem; } .nut-video-controller .nut-video-controller__playbtn.puase { background-image: -webkit-image-set( @@ -4615,53 +5698,57 @@ textarea { .nut-video-controller .nut-video-controller__total, .nut-video-controller .nut-video-controller__now { color: #fff; - padding: 0 5px; - font-size: 10px; + padding: 0 0.125rem; + font-size: 0.25rem; } .nut-video-controller .nut-video-controller__progress { position: relative; display: inline-block; height: 100%; width: 100%; - margin: 0 5px; + margin: 0 0.125rem; + -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-video-controller .nut-video-controller__progress .nut-video-controller__progress-value { position: absolute; top: 50%; width: 100%; - height: 2px; + height: 0.05rem; margin-top: -0.05rem; background: #ffffff80; } .nut-video-controller .nut-video-controller__progress .buffered { background: #fffc; - height: 2px; + height: 0.05rem; } .nut-video-controller .nut-video-controller__progress .nut-video-controller__ball { - width: 10px; - height: 10px; + width: 0.25rem; + height: 0.25rem; position: absolute; top: 50%; left: 0; border-radius: 50%; } .nut-video-controller .nut-video-controller__progress .nut-video-controller__ball div { - width: 10px; - height: 10px; + width: 0.25rem; + height: 0.25rem; background: #fff; - box-shadow: 0 0 2px #0003; - margin: 0 -5px; + -webkit-box-shadow: 0 0 0.05rem #0003; + box-shadow: 0 0 0.05rem #0003; + margin: 0 -0.125rem; border-radius: 50%; } .nut-video-controller .nut-video-controller__progress .nut-video-controller__ball:hover { - width: 15px; - height: 15px; + width: 0.375rem; + height: 0.375rem; } .nut-video-controller .nut-video-controller__full { - width: 40px; - height: 35px; + width: 1rem; + height: 0.875rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K) 1x @@ -4678,8 +5765,8 @@ textarea { background-position: center; } .nut-video-controller .nut-video-controller__volume { - width: 30px; - height: 30px; + width: 0.75rem; + height: 0.75rem; background-image: -webkit-image-set( url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x @@ -4719,12 +5806,13 @@ textarea { .nut-image-preview-img { width: 100%; height: 100%; + -o-object-fit: contain; object-fit: contain; } .nut-image-preview-index { position: fixed; z-index: 2002; - top: 50px; + top: 1.25rem; text-align: center; left: 0; right: 0; @@ -4733,20 +5821,22 @@ textarea { } .nut-image-preview-index .arrow { position: absolute; - left: 15px; + left: 0.375rem; + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-image-preview-close-icon { position: fixed; z-index: 2002; - top: 50px; - right: 15px; + top: 1.25rem; + right: 0.375rem; } .nut-image-preview-close-icon-right { - right: 10px; + right: 0.25rem; } .nut-image-preview-close-icon-left { - left: 10px; + left: 0.25rem; } .nut-image-preview .popup-bg { background: #000000e6; @@ -4759,30 +5849,42 @@ textarea { .nut-image-preview-custom-pop { height: 100%; background: transparent !important; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: 100%; } .nut-image-preview-swiper .nut-swiper-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; height: 100%; } .nut-image-preview-swiper .nut-swiper-item .nut-image-preview-box { width: 100%; } -.nut-image-preview-swiper .nut-swiper-item .nut-video video { +.nut-image-preview-swiper .nut-swiper-item .nut-video taro-video-core { + -o-object-fit: contain; object-fit: contain; } .nut-theme-dark .nut-countup { background: var(--nut-dark-background, #131313); color: var(--nut-dark-color, var(--nut-white, #fff)); + -webkit-box-shadow: none; box-shadow: none; } .nut-countup { display: block; - padding: 5px 20px; + padding: 0.125rem 0.5rem; color: #000; font-weight: 700; } @@ -4797,6 +5899,7 @@ textarea { } .nut-countup .nut-countup__number .nut-countup__number-item { position: absolute; + -webkit-transition: none; transition: none; list-style: none; } @@ -4824,6 +5927,7 @@ textarea { .nut-countup .nut-countup__numberimg .nut-countup__numberimg__item { position: absolute; display: block; + -webkit-transition: none; transition: none; display: inline-block; background-position: 0 0; @@ -4843,37 +5947,49 @@ textarea { display: inline-block; } .nut-badge .nut-badge__icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; line-height: normal; + -webkit-transform: var(--nut-badge-content-transform, translate(50%, -50%)); + -ms-transform: var(--nut-badge-content-transform, translate(50%, -50%)); transform: var(--nut-badge-content-transform, translate(50%, -50%)); position: absolute; background: var(--nut-badge-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); - padding: var(--nut-badge-icon-padding, 4px); + padding: var(--nut-badge-icon-padding, 0.1rem); text-align: center; - border-radius: var(--nut-badge-border-radius, 14px); + border-radius: var(--nut-badge-border-radius, 0.35rem); z-index: var(--nut-badge-z-index, 1); } .nut-badge .nut-badge__content { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-transform: var(--nut-badge-content-transform, translate(50%, -50%)); + -ms-transform: var(--nut-badge-content-transform, translate(50%, -50%)); transform: var(--nut-badge-content-transform, translate(50%, -50%)); } .nut-badge .nut-badge__content--sup { position: absolute; background: var(--nut-badge-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); - padding: var(--nut-badge-padding, 0 5px); + padding: var(--nut-badge-padding, 0 0.125rem); text-align: center; - border-radius: var(--nut-badge-border-radius, 14px); - font-size: var(--nut-badge-font-size, var(--nut-font-size-1, 12px)); + border-radius: var(--nut-badge-border-radius, 0.35rem); + font-size: var(--nut-badge-font-size, var(--nut-font-size-1, 0.3rem)); font-weight: 400; color: var(--nut-badge-color, #fff); } .nut-badge .nut-badge__content--dot { - width: var(--nut-badge-dot-width, 7px); - height: var(--nut-badge-dot-height, 7px); - border-radius: var(--nut-badge-dot-border-radius, 7px); - padding: var(--nut-badge-dot-padding, 0px); + width: var(--nut-badge-dot-width, 0.175rem); + height: var(--nut-badge-dot-height, 0.175rem); + border-radius: var(--nut-badge-dot-border-radius, 0.175rem); + padding: var(--nut-badge-dot-padding, 0rem); } .nut-badge .nut-badge__content--bubble { border-bottom-left-radius: 0; @@ -4884,6 +6000,8 @@ textarea { background-position: center center; display: inline-block; position: relative; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; flex: 0 0 auto; text-align: center; vertical-align: top; @@ -4898,29 +6016,31 @@ textarea { position: absolute; top: 50%; left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .nut-avatar-large { - width: var(--nut-avatar-large-width, 60px); - height: var(--nut-avatar-large-height, 60px); - line-height: var(--nut-avatar-large-height, 60px); + width: var(--nut-avatar-large-width, 1.5rem); + height: var(--nut-avatar-large-height, 1.5rem); + line-height: var(--nut-avatar-large-height, 1.5rem); } .nut-avatar-small { - width: var(--nut-avatar-small-width, 32px); - height: var(--nut-avatar-small-height, 32px); - line-height: var(--nut-avatar-small-height, 32px); + width: var(--nut-avatar-small-width, 0.8rem); + height: var(--nut-avatar-small-height, 0.8rem); + line-height: var(--nut-avatar-small-height, 0.8rem); } .nut-avatar-normal { - width: var(--nut-avatar-normal-width, 40px); - height: var(--nut-avatar-normal-height, 40px); - line-height: var(--nut-avatar-normal-height, 40px); + width: var(--nut-avatar-normal-width, 1rem); + height: var(--nut-avatar-normal-height, 1rem); + line-height: var(--nut-avatar-normal-height, 1rem); } .nut-avatar-round { border-radius: 50%; overflow: hidden; } .nut-avatar-square { - border-radius: var(--nut-avatar-square, 5px); + border-radius: var(--nut-avatar-square, 0.125rem); } .nut-skeleton { display: inline-block; @@ -4929,20 +6049,26 @@ textarea { vertical-align: middle; } .nut-skeleton .nut-skeleton-content { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-skeleton .nut-skeleton-content .avatarClass { - margin-right: 20px; + margin-right: 0.5rem; background-color: var(--nut-skeleton-content-avatar-background-color, #efefef); } .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle, .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockLine { width: 100%; - margin-bottom: 10px; + margin-bottom: 0.25rem; background-color: var(--nut-skeleton-content-line-background-color, #efefef); } .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle { @@ -4957,7 +6083,7 @@ textarea { } .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle--round, .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockLine--round { - border-radius: 10px; + border-radius: 0.25rem; } .nut-skeleton .nut-skeleton-animation { position: absolute; @@ -4968,19 +6094,29 @@ textarea { z-index: 1; background: var(--nut-skeleton-animation-background-color, linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%)); background-repeat: no-repeat; + -webkit-animation: backpos 2s ease-in-out 0s infinite; animation: backpos 2s ease-in-out 0s infinite; } +@-webkit-keyframes backpos { + 0% { + background-position-x: -12.5rem; + } + to { + background-position-x: calc(12.5rem + 100%); + } +} @keyframes backpos { 0% { - background-position-x: -500px; + background-position-x: -12.5rem; } to { - background-position-x: calc(500px + 100%); + background-position-x: calc(12.5rem + 100%); } } .nut-theme-dark .nut-collapse-item .nut-collapse-item__title { background: var(--nut-dark-background, #131313); color: var(--nut-dark-color, var(--nut-white, #fff)); + -webkit-box-shadow: none; box-shadow: none; } .nut-theme-dark .nut-collapse-item .nut-collapse__item-wrapper .collapse-content, @@ -4993,14 +6129,16 @@ textarea { } .nut-collapse-item__border .nut-collapse-item__title::after { position: absolute; + -webkit-box-sizing: border-box; box-sizing: border-box; content: ' '; pointer-events: none; - right: 16px; + right: 0.4rem; bottom: 0; - left: 16px; - border-bottom: 1px solid #ebedf0; + left: 0.4rem; + border-bottom: 0.025rem solid #ebedf0; -webkit-transform: scaleY(0.5); + -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .nut-collapse-item { @@ -5008,47 +6146,67 @@ textarea { } .nut-collapse-item .nut-collapse-item__title { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; width: 100%; overflow: hidden; - padding: var(--nut-collapse-item-padding, 13px 36px 13px 26px); + padding: var(--nut-collapse-item-padding, 0.325rem 0.9rem 0.325rem 0.65rem); color: var(--nut-collapse-item-color, #666666); - font-size: var(--nut-collapse-item-font-size, var(--nut-font-size-2, 14px)); - line-height: var(--nut-collapse-item-line-height, 24px); + font-size: var(--nut-collapse-item-font-size, var(--nut-font-size-2, 0.35rem)); + line-height: var(--nut-collapse-item-line-height, 0.6rem); background-color: #fff; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main-value { display: block; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main-value .nut-collapse-item__title-main-icon { - top: 2px; + top: 0.05rem; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; color: var(--nut-collapse-item-icon-color, #666666); + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; transition: transform 0.3s; + transition: + transform 0.3s, + -webkit-transform 0.3s; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon--expanded { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-sub { position: absolute; top: 50%; - right: 65px; - margin-top: -12px; + right: 1.625rem; + margin-top: -0.3rem; color: var(--nut-collapse-item-sub-title-color, #666666); } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-label { display: block; color: #969799; - font-size: 12px; + font-size: 0.3rem; } .nut-collapse-item .nut-collapse__item-wrapper, .nut-collapse-item .nut-collapse__item-extraWrapper { @@ -5056,6 +6214,7 @@ textarea { position: relative; height: 0; overflow: hidden; + -webkit-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out; } .nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content, @@ -5063,15 +6222,15 @@ textarea { .nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content, .nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-extraWrapper__extraRender { display: block; - padding: var(--nut-collapse-wrapper-content-padding, 12px 26px); + padding: var(--nut-collapse-wrapper-content-padding, 0.3rem 0.65rem); color: var(--nut-collapse-wrapper-content-color, #666666); - font-size: var(--nut-collapse-wrapper-content-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-collapse-wrapper-content-font-size, var(--nut-font-size-2, 0.35rem)); line-height: var(--nut-collapse-wrapper-content-line-height, 1.5); background-color: var(--nut-collapse-wrapper-content-background-color, var(--nut-white, #fff)); } .nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content--empty, .nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content--empty { - padding: var(--nut-collapse-wrapper-empty-content-padding, 0 26px); + padding: var(--nut-collapse-wrapper-empty-content-padding, 0 0.65rem); } .nut-collapse-item .nut-collapse__item-extraWrapper { height: auto; @@ -5121,10 +6280,14 @@ textarea { background-color: var(--nut-dark-background, #131313); } .nut-table { + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; - font-size: var(--nut-font-size-2, 14px); + font-size: var(--nut-font-size-2, 0.35rem); } .nut-table__main { display: table; @@ -5150,18 +6313,24 @@ textarea { .nut-table__main__head__tr__td, .nut-table__main__body__tr__td { display: table-cell; - padding: var(--nut-table-cols-padding, 10px); + padding: var(--nut-table-cols-padding, 0.25rem); } .nut-table__main__head__tr__td__nodata, .nut-table__main__body__tr__td__nodata { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - height: 50px; + height: 1.25rem; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-table__main__head__tr--border, .nut-table__main__body__tr--border { - border: 1px solid var(--nut-table-border-color, #ececec); + border: 0.025rem solid var(--nut-table-border-color, #ececec); } .nut-table__main__head__tr--alignleft, .nut-table__main__head__tr--align, @@ -5184,189 +6353,414 @@ textarea { display: table-row-group; } .nut-table__summary { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - height: 30px; - padding: var(--nut-table-cols-padding, 10px); + height: 0.75rem; + padding: var(--nut-table-cols-padding, 0.25rem); } .nut-table__nodata { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; - height: 30px; - padding: var(--nut-table-cols-padding, 10px); + height: 0.75rem; + padding: var(--nut-table-cols-padding, 0.25rem); } .nut-animate .nut-animate__container { display: inline-block; } .nut-animate [class*='nut-animate-'] { + -webkit-animation-duration: 0.5s; animation-duration: 0.5s; + -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; + -webkit-animation-fill-mode: both; animation-fill-mode: both; } .nut-animate .nut-animate-shake { + -webkit-animation-name: shake; animation-name: shake; } .nut-animate .nut-animate-ripple { + -webkit-animation-name: ripple; animation-name: ripple; } .nut-animate .nut-animate-float { position: relative; + -webkit-animation-name: float-pop; animation-name: float-pop; } .nut-animate .nut-animate-breath { + -webkit-animation-name: breath; animation-name: breath; + -webkit-animation-duration: 2.7s; animation-duration: 2.7s; + -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; + -webkit-animation-direction: alternate; animation-direction: alternate; } .nut-animate .nut-animate-slide-right { + -webkit-animation-name: slide-right; animation-name: slide-right; } .nut-animate .nut-animate-slide-left { + -webkit-animation-name: slide-left; animation-name: slide-left; } .nut-animate .nut-animate-slide-top { + -webkit-animation-name: slide-top; animation-name: slide-top; } .nut-animate .nut-animate-slide-bottom { + -webkit-animation-name: slide-bottom; animation-name: slide-bottom; } .nut-animate .nut-animate-jump { + -webkit-transform-origin: center center; + -ms-transform-origin: center center; transform-origin: center center; + -webkit-animation: jump 0.7s linear; animation: jump 0.7s linear; } .nut-animate .loop { + -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } +@-webkit-keyframes shake { + 0%, + to { + -webkit-transform: translate(0); + transform: translate(0); + } + 10% { + -webkit-transform: translate(-0.225rem); + transform: translate(-0.225rem); + } + 20% { + -webkit-transform: translate(0.2rem); + transform: translate(0.2rem); + } + 30% { + -webkit-transform: translate(-0.175rem); + transform: translate(-0.175rem); + } + 40% { + -webkit-transform: translate(0.15rem); + transform: translate(0.15rem); + } + 50% { + -webkit-transform: translate(-0.125rem); + transform: translate(-0.125rem); + } + 60% { + -webkit-transform: translate(0.1rem); + transform: translate(0.1rem); + } + 70% { + -webkit-transform: translate(-0.075rem); + transform: translate(-0.075rem); + } + 80% { + -webkit-transform: translate(0.05rem); + transform: translate(0.05rem); + } + 90% { + -webkit-transform: translate(-0.025rem); + transform: translate(-0.025rem); + } +} @keyframes shake { 0%, to { + -webkit-transform: translate(0); transform: translate(0); } 10% { - transform: translate(-9px); + -webkit-transform: translate(-0.225rem); + transform: translate(-0.225rem); } 20% { - transform: translate(8px); + -webkit-transform: translate(0.2rem); + transform: translate(0.2rem); } 30% { - transform: translate(-7px); + -webkit-transform: translate(-0.175rem); + transform: translate(-0.175rem); } 40% { - transform: translate(6px); + -webkit-transform: translate(0.15rem); + transform: translate(0.15rem); } 50% { - transform: translate(-5px); + -webkit-transform: translate(-0.125rem); + transform: translate(-0.125rem); } 60% { - transform: translate(4px); + -webkit-transform: translate(0.1rem); + transform: translate(0.1rem); } 70% { - transform: translate(-3px); + -webkit-transform: translate(-0.075rem); + transform: translate(-0.075rem); } 80% { - transform: translate(2px); + -webkit-transform: translate(0.05rem); + transform: translate(0.05rem); } 90% { - transform: translate(-1px); + -webkit-transform: translate(-0.025rem); + transform: translate(-0.025rem); + } +} +@-webkit-keyframes ripple { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.1); + transform: scale(1.1); } } @keyframes ripple { 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } +} +@-webkit-keyframes breath { + 0% { + -webkit-transform: scale(1); transform: scale(1); } 50% { + -webkit-transform: scale(1.1); transform: scale(1.1); } + to { + -webkit-transform: scale(1); + transform: scale(1); + } } @keyframes breath { 0% { + -webkit-transform: scale(1); transform: scale(1); } 50% { + -webkit-transform: scale(1.1); transform: scale(1.1); } to { + -webkit-transform: scale(1); transform: scale(1); } } +@-webkit-keyframes slide-right { + 0% { + opacity: 0; + -webkit-transform: translate(100%); + transform: translate(100%); + } + to { + opacity: 1; + -webkit-transform: translate(0); + transform: translate(0); + } +} @keyframes slide-right { 0% { opacity: 0; + -webkit-transform: translate(100%); transform: translate(100%); } to { opacity: 1; + -webkit-transform: translate(0); + transform: translate(0); + } +} +@-webkit-keyframes slide-left { + 0% { + opacity: 0; + -webkit-transform: translate(-100%); + transform: translate(-100%); + } + to { + opacity: 1; + -webkit-transform: translate(0); transform: translate(0); } } @keyframes slide-left { 0% { opacity: 0; + -webkit-transform: translate(-100%); transform: translate(-100%); } to { opacity: 1; + -webkit-transform: translate(0); transform: translate(0); } } +@-webkit-keyframes slide-top { + 0% { + opacity: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + to { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} @keyframes slide-top { 0% { opacity: 0; + -webkit-transform: translateY(-100%); transform: translateY(-100%); } to { opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes slide-bottom { + 0% { + opacity: 0; + -webkit-transform: translateY(100%); + transform: translateY(100%); + } + to { + opacity: 1; + -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slide-bottom { 0% { opacity: 0; + -webkit-transform: translateY(100%); transform: translateY(100%); } to { opacity: 1; + -webkit-transform: translateY(0); transform: translateY(0); } } +@-webkit-keyframes float-pop { + 0% { + top: 0; + } + 25% { + top: 0.025rem; + } + 50% { + top: 0.1rem; + } + 75% { + top: 0.025rem; + } + to { + top: 0; + } +} @keyframes float-pop { 0% { top: 0; } 25% { - top: 1px; + top: 0.025rem; } 50% { - top: 4px; + top: 0.1rem; } 75% { - top: 1px; + top: 0.025rem; } to { top: 0; } } +@-webkit-keyframes jump { + 0% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-transform: rotate(0) translateY(0); + transform: rotate(0) translateY(0); + } + 25% { + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-transform: rotate(10deg) translateY(0.5rem); + transform: rotate(10deg) translateY(0.5rem); + } + 50% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-transform: rotate(0) translateY(-0.25rem); + transform: rotate(0) translateY(-0.25rem); + } + 75% { + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-transform: rotate(-10deg) translateY(0.5rem); + transform: rotate(-10deg) translateY(0.5rem); + } + to { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-transform: rotate(0) translateY(0); + transform: rotate(0) translateY(0); + } +} @keyframes jump { 0% { + -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; + -webkit-transform: rotate(0) translateY(0); transform: rotate(0) translateY(0); } 25% { + -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; - transform: rotate(10deg) translateY(20px); + -webkit-transform: rotate(10deg) translateY(0.5rem); + transform: rotate(10deg) translateY(0.5rem); } 50% { + -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; - transform: rotate(0) translateY(-10px); + -webkit-transform: rotate(0) translateY(-0.25rem); + transform: rotate(0) translateY(-0.25rem); } 75% { + -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; - transform: rotate(-10deg) translateY(20px); + -webkit-transform: rotate(-10deg) translateY(0.5rem); + transform: rotate(-10deg) translateY(0.5rem); } to { + -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; + -webkit-transform: rotate(0) translateY(0); transform: rotate(0) translateY(0); } } @@ -5375,25 +6769,46 @@ textarea { } .nut-animate .nut-animate-twinkle::after, .nut-animate .nut-animate-twinkle::before { - width: 60px; - height: 60px; + width: 1.5rem; + height: 1.5rem; content: ''; + -webkit-box-sizing: border-box; box-sizing: border-box; - border: 4px solid rgba(255, 255, 255, 0.6); + border: 0.1rem solid rgba(255, 255, 255, 0.6); position: absolute; - border-radius: 30px; + border-radius: 0.75rem; right: 50%; - margin-top: -15px; - margin-right: -30px; + margin-top: -0.375rem; + margin-right: -0.75rem; z-index: 1; + -webkit-transform: scale(0); + -ms-transform: scale(0); transform: scale(0); + -webkit-animation: twinkle 2s ease-out infinite; animation: twinkle 2s ease-out infinite; } .nut-animate .nut-animate-twinkle::after { + -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } +@-webkit-keyframes twinkle { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + } + 20% { + opacity: 1; + } + 50%, + to { + -webkit-transform: scale(1.4); + transform: scale(1.4); + opacity: 0; + } +} @keyframes twinkle { 0% { + -webkit-transform: scale(0); transform: scale(0); } 20% { @@ -5401,6 +6816,7 @@ textarea { } 50%, to { + -webkit-transform: scale(1.4); transform: scale(1.4); opacity: 0; } @@ -5410,28 +6826,48 @@ textarea { overflow: hidden; } .nut-animate .nut-animate-flicker::after { - width: 100px; - height: 60px; + width: 2.5rem; + height: 1.5rem; position: absolute; left: 0; top: 0; opacity: 0.73; content: ''; + background-image: -webkit-linear-gradient(344deg, #e8e0ff00 24%, #e8e0ff 91%); background-image: linear-gradient(106deg, #e8e0ff00 24%, #e8e0ff 91%); + -webkit-animation: flicker 1.5s linear infinite; animation: flicker 1.5s linear infinite; + -webkit-transform: skew(-20deg); + -ms-transform: skew(-20deg); transform: skew(-20deg); - filter: blur(3px); + -webkit-filter: blur(0.075rem); + filter: blur(0.075rem); +} +@-webkit-keyframes flicker { + 0% { + -webkit-transform: translate(-2.5rem) skew(-20deg); + transform: translate(-2.5rem) skew(-20deg); + } + 40%, + to { + -webkit-transform: translate(3.75rem) skew(-20deg); + transform: translate(3.75rem) skew(-20deg); + } } @keyframes flicker { 0% { - transform: translate(-100px) skew(-20deg); + -webkit-transform: translate(-2.5rem) skew(-20deg); + transform: translate(-2.5rem) skew(-20deg); } 40%, to { - transform: translate(150px) skew(-20deg); + -webkit-transform: translate(3.75rem) skew(-20deg); + transform: translate(3.75rem) skew(-20deg); } } .nut-ellipsis { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-ellipsis .nut-ellipsis__text { @@ -5444,7 +6880,7 @@ textarea { } .nut-ellipsis__copy { position: absolute; - top: -999999px; + top: -24999.975rem; } .nut-watermark { position: absolute; @@ -5461,13 +6897,13 @@ textarea { } .nut-trend-arrow { display: inline-block; - font-size: var(--nut-trendarrow-font-size, 14px); + font-size: var(--nut-trendarrow-font-size, 0.35rem); } .nut-trend-arrow-icon-before { - margin-right: var(--nut-trendarrow-before-icon-margin, 4px); + margin-right: var(--nut-trendarrow-before-icon-margin, 0.1rem); } .nut-trend-arrow-icon-after { - margin-left: var(--nut-trendarrow-before-icon-margin, 4px); + margin-left: var(--nut-trendarrow-before-icon-margin, 0.1rem); } .nut-trend-arrow-rate { vertical-align: middle; @@ -5485,81 +6921,110 @@ textarea { position: absolute; width: 0; height: 0; - border: 8px solid transparent; + border: 0.2rem solid transparent; } .nut-popover .nut-popover-arrow-top { bottom: 0; border-top-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); border-bottom-width: 0; - margin-bottom: -8px; + margin-bottom: -0.2rem; } .nut-popover .nut-popover-arrow-bottom { top: 0; border-bottom-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); border-top-width: 0; - margin-top: -8px; + margin-top: -0.2rem; } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom { left: 50%; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom-start { - left: 16px; + left: 0.4rem; + -webkit-transform: translate(0); + -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom-end { - right: 16px; + right: 0.4rem; + -webkit-transform: translate(0); + -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-arrow-left { right: 0; border-left-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); border-right-width: 0; - margin-right: -8px; + margin-right: -0.2rem; } .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left { top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left-start { - top: 16px; + top: 0.4rem; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left-end { - bottom: 16px; + bottom: 0.4rem; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-arrow-right { left: 0; border-right-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); border-left-width: 0; - margin-left: -8px; + margin-left: -0.2rem; } .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right { top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right-start { - top: 16px; + top: 0.4rem; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right-end { - bottom: 16px; + bottom: 0.4rem; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-content { position: absolute; z-index: 9999; background: #fff; - border-radius: 5px; - font-size: 14px; + border-radius: 0.125rem; + font-size: 0.35rem; font-weight: 400; color: #333; - box-shadow: 0 2px 12px #3232331f; + -webkit-box-shadow: 0 0.05rem 0.3rem #3232331f; + box-shadow: 0 0.05rem 0.3rem #3232331f; opacity: 1; + -webkit-transition: + opacity 0.15s, + -webkit-transform 0.15s; + transition: + opacity 0.15s, + -webkit-transform 0.15s; transition: opacity 0.15s, transform 0.15s; + transition: + opacity 0.15s, + transform 0.15s, + -webkit-transform 0.15s; max-height: initial; overflow-y: initial; } @@ -5569,21 +7034,25 @@ textarea { width: 100%; } .nut-popover .nut-popover-content .nut-popover-menu-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: 8px; - border-bottom: 1px solid var(--nut-popover-border-bottom-color, rgb(229, 229, 229)); + padding: 0.2rem; + border-bottom: 0.025rem solid var(--nut-popover-border-bottom-color, rgb(229, 229, 229)); } .nut-popover .nut-popover-content .nut-popover-menu-item:first-child { - margin-top: 15px; + margin-top: 0.375rem; } .nut-popover .nut-popover-content .nut-popover-menu-item:last-child { - margin-bottom: 2px; + margin-bottom: 0.05rem; border-bottom: none; } .nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-item-img { vertical-align: top; - margin-right: 3px; + margin-right: 0.075rem; } .nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-menu-item-name { width: 100%; @@ -5596,20 +7065,26 @@ textarea { } .nut-popover .nut-popover-content--top .nut-popover-arrow--top { left: 50%; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); } .nut-popover .nut-popover-content--top-end { right: 0; } .nut-popover .nut-popover-content--top-end .nut-popover-arrow--top-end { - right: 16px; + right: 0.4rem; + -webkit-transform: translate(0); + -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-content--top-start { left: 0; } .nut-popover .nut-popover-content--top-start .nut-popover-arrow--top-start { - left: 16px; + left: 0.4rem; + -webkit-transform: translate(0); + -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-content--bottom-end { @@ -5653,13 +7128,17 @@ textarea { } .nut-popover-enter-from, .nut-popover-leave-active { + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; } .nut-popover-enter-active { + -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .nut-popover-leave-active { + -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } .nut-popover-content-bg { @@ -5676,13 +7155,15 @@ textarea { } .nut-tour-mask { position: fixed; - width: 100px; - height: 50px; + width: 2.5rem; + height: 1.25rem; + -webkit-box-shadow: 0 0 0 150vh #00000080; box-shadow: 0 0 0 150vh #00000080; - border-radius: 10px; + border-radius: 0.25rem; z-index: 1002; } .nut-tour-mask-none { + -webkit-box-shadow: none; box-shadow: none; } .nut-tour-mask-hidden { @@ -5690,40 +7171,48 @@ textarea { } .nut-tour-content { display: block; - padding: 10px 12px; - min-width: 200px; + padding: 0.25rem 0.3rem; + min-width: 5rem; } .nut-tour-content-top { display: block; text-align: right; } .nut-tour-content-top-close { - width: 10px; - height: 10px; + width: 0.25rem; + height: 0.25rem; } .nut-tour-content-inner { - margin: 10px 0; - font-size: 14px; + margin: 0.25rem 0; + font-size: 0.35rem; } .nut-tour-content-bottom { - margin-top: 10px; + margin-top: 0.25rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-tour-content-bottom-init { - margin-left: 10px; + margin-left: 0.25rem; } .nut-tour-content-bottom-operate { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; } .nut-tour-content-bottom-operate-btn { display: inline-block; - border: 1px solid var(--nut-disable-color, #cccccc); - margin-left: 4px; - padding: 2px 4px; - font-size: 12px; - border-radius: 4px; + border: 0.025rem solid var(--nut-disable-color, #cccccc); + margin-left: 0.1rem; + padding: 0.05rem 0.1rem; + font-size: 0.3rem; + border-radius: 0.1rem; color: var(--nut-text-color, #808080); } .nut-tour-content-bottom-operate-btn.active { @@ -5769,35 +7258,42 @@ textarea { } .nut-elevator__list__item { display: block; - font-size: var(--nut-elevator-list-item-font-size, 12px); + font-size: var(--nut-elevator-list-item-font-size, 0.3rem); color: var(--nut-elevator-list-item-font-color, #333333); } .nut-elevator__list__item__code { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: relative; - height: var(--nut-elevator-list-item-code-height, 35px); - line-height: var(--nut-elevator-list-item-code-line-height, 35px); - font-size: var(--nut-elevator-list-item-code-font-size, 14px); + height: var(--nut-elevator-list-item-code-height, 0.875rem); + line-height: var(--nut-elevator-list-item-code-line-height, 0.875rem); + font-size: var(--nut-elevator-list-item-code-font-size, 0.35rem); color: var(--nut-elevator-list-item-code-font-color, #1a1a1a); - padding: var(--nut-elevator-list-item-code-padding, 0 20px); + padding: var(--nut-elevator-list-item-code-padding, 0 0.5rem); font-weight: var(--nut-elevator-list-item-code-font-weight, 500); + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-elevator__list__item__code::after { content: ' '; width: var(--nut-elevator-list-item-code-after-width, 100%); - height: var(--nut-elevator-list-item-code-after-height, 1px); + height: var(--nut-elevator-list-item-code-after-height, 0.025rem); position: absolute; left: 0; bottom: 0; background-color: var(--nut-elevator-list-item-code-after-bg-color, #f5f5f5); } .nut-elevator__list__item__name { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: var(--nut-elevator-list-item-name-padding, 0 20px); - height: var(--nut-elevator-list-item-name-height, 30px); - line-height: var(--nut-elevator-list-item-name-line-height, 30px); + padding: var(--nut-elevator-list-item-name-padding, 0 0.5rem); + height: var(--nut-elevator-list-item-name-height, 0.75rem); + line-height: var(--nut-elevator-list-item-name-line-height, 0.75rem); } .nut-elevator__list__item__name--highcolor { color: var(--nut-elevator-list-item-highcolor, var(--nut-primary-color, #fa2c19)); @@ -5807,45 +7303,52 @@ textarea { position: absolute; top: 0; left: 0; - padding: var(--nut-elevator-list-item-code-padding, 0 20px); - height: var(--nut-elevator-list-item-code-height, 35px); - line-height: var(--nut-elevator-list-item-code-line-height, 35px); - font-size: var(--nut-elevator-list-item-code-font-size, 14px); + padding: var(--nut-elevator-list-item-code-padding, 0 0.5rem); + height: var(--nut-elevator-list-item-code-height, 0.875rem); + line-height: var(--nut-elevator-list-item-code-line-height, 0.875rem); + font-size: var(--nut-elevator-list-item-code-font-size, 0.35rem); color: var(--nut-elevator-list-fixed-color, var(--nut-primary-color, #fa2c19)); font-weight: var(--nut-elevator-list-item-code-font-weight, 500); background-color: var(--nut-elevator-list-fixed-bg-color, var(--nut-white, #fff)); + -webkit-box-sizing: border-box; box-sizing: border-box; - box-shadow: var(--nut-elevator-list-fixed-box-shadow, 0 0 10px #eee); + -webkit-box-shadow: var(--nut-elevator-list-fixed-box-shadow, 0 0 0.25rem #eee); + box-shadow: var(--nut-elevator-list-fixed-box-shadow, 0 0 0.25rem #eee); z-index: 1; } .nut-elevator__code--current { position: var(--nut-elevator-list-item-code-current-position, absolute); - right: var(--nut-elevator-list-item-code-current-right, 60px); + right: var(--nut-elevator-list-item-code-current-right, 1.5rem); top: var(--nut-elevator-list-item-code-current-top, 50%); + -webkit-transform: var(--nut-elevator-list-item-code-current-transform, translateY(-50%)); + -ms-transform: var(--nut-elevator-list-item-code-current-transform, translateY(-50%)); transform: var(--nut-elevator-list-item-code-current-transform, translateY(-50%)); - width: var(--nut-elevator-list-item-code-current-width, 45px); - height: var(--nut-elevator-list-item-code-current-height, 45px); - line-height: var(--nut-elevator-list-item-code-current-line-height, 45px); + width: var(--nut-elevator-list-item-code-current-width, 1.125rem); + height: var(--nut-elevator-list-item-code-current-height, 1.125rem); + line-height: var(--nut-elevator-list-item-code-current-line-height, 1.125rem); border-radius: var(--nut-elevator-list-item-code-current-border-radius, 50%); background: var(--nut-elevator-list-item-code-current-bg-color, #fff); - box-shadow: var(--nut-elevator-list-item-code-current-box-shadow, 0 3px 3px 1px rgb(240, 240, 240)); + -webkit-box-shadow: var(--nut-elevator-list-item-code-current-box-shadow, 0 0.075rem 0.075rem 0.025rem rgb(240, 240, 240)); + box-shadow: var(--nut-elevator-list-item-code-current-box-shadow, 0 0.075rem 0.075rem 0.025rem rgb(240, 240, 240)); text-align: var(--nut-elevator-list-item-code-current-text-align, center); } .nut-elevator__bars { position: var(--nut-elevator-list-item-bars-position, absolute); - right: var(--nut-elevator-list-item-bars-right, 8px); + right: var(--nut-elevator-list-item-bars-right, 0.2rem); top: var(--nut-elevator-list-item-bars-top, 50%); + -webkit-transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); + -ms-transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); - padding: var(--nut-elevator-list-item-bars-padding, 15px 0); + padding: var(--nut-elevator-list-item-bars-padding, 0.375rem 0); background-color: var(--nut-elevator-list-item-bars-background-color, #eeeff2); - border-radius: var(--nut-elevator-list-item-bars-border-radius, 6px); + border-radius: var(--nut-elevator-list-item-bars-border-radius, 0.15rem); text-align: var(--nut-elevator-list-item-bars-text-align, center); z-index: var(--nut-elevator-list-item-bars-z-index, 1); } .nut-elevator__bars__inner__item { display: block; - padding: var(--nut-elevator-list-item-bars-inner-item-padding, 3px); - font-size: var(--nut-elevator-list-item-bars-inner-item-font-size, 10px); + padding: var(--nut-elevator-list-item-bars-inner-item-padding, 0.075rem); + font-size: var(--nut-elevator-list-item-bars-inner-item-font-size, 0.25rem); } .nut-elevator__bars__inner__item.active { color: var(--nut-elevator-list-item-bars-inner-item-active-color, var(--nut-primary-color, #fa2c19)); @@ -5859,17 +7362,23 @@ textarea { } .nut-theme-dark .nut-address .nut-address__exist .nut-address__exist-choose, .nut-theme-dark .nut-address-custom-buttom { - border-top: 1px solid var(--nut-dark-background, #131313); + border-top: 0.025rem solid var(--nut-dark-background, #131313); } .nut-address { display: block; } .nut-address__header { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - height: 68px; - padding: 0 20px; + height: 1.7rem; + padding: 0 0.5rem; text-align: center; font-weight: 700; color: #333; @@ -5877,149 +7386,171 @@ textarea { .nut-address__header__title { display: block; color: var(--nut-address-header-title-color, #262626); - font-size: var(--nut-address-header-title-font-size, 18px); + font-size: var(--nut-address-header-title-font-size, 0.45rem); } .nut-address .nut-address__custom { display: block; } .nut-address .nut-address__custom .nut-address__region { position: relative; - padding: 0 20px; + padding: 0 0.5rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - font-size: var(--nut-address-region-tab-font-size, 13px); + font-size: var(--nut-address-region-tab-font-size, 0.325rem); color: var(--nut-address-region-tab-color, #1d1e1e); } .nut-address .nut-address__custom .nut-address__region .nut-address__region-item { position: relative; - min-width: 2px; - margin-right: 30px; + min-width: 0.05rem; + margin-right: 0.75rem; display: block; } .nut-address .nut-address__custom .nut-address__region .nut-address__region-item.active { font-weight: var(--nut-address-region-tab-active-item-font-weight, bold); } -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item view { +.nut-address .nut-address__custom .nut-address__region .nut-address__region-item taro-view-core { display: block; - max-width: 100px; + max-width: 2.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nut-address .nut-address__custom .nut-address__region .nut-address__region-item span { display: inline-block; - max-width: 100px; + max-width: 2.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nut-address .nut-address__custom .nut-address__region .nut-address__region-item .nut-address__region-line--mini { position: absolute; - bottom: -10px; + bottom: -0.25rem; left: 0; display: inline-block; - margin-top: 5px; + margin-top: 0.125rem; width: 0; - height: 3px; + height: 0.075rem; background: var(--nut-address-region-tab-line, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); + -webkit-transition: 0.2s all linear; transition: 0.2s all linear; } .nut-address .nut-address__custom .nut-address__region .nut-address__region-item .nut-address__region-line--mini.active { - width: 26px; + width: 0.65rem; } .nut-address .nut-address__custom .nut-address__region .nut-address__region-line { position: absolute; - bottom: -10px; - left: 20px; + bottom: -0.25rem; + left: 0.5rem; display: inline-block; - margin-top: 5px; - width: 26px; - height: 3px; + margin-top: 0.125rem; + width: 0.65rem; + height: 0.075rem; background: var(--nut-address-region-tab-line, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); + -webkit-transition: 0.2s all linear; transition: 0.2s all linear; border-radius: var(--nut-address-region-tab-line-border-radius, 0); opacity: var(--nut-address-region-tab-line-opacity, 1); } .nut-address .nut-address__custom .nut-address__detail { display: block; - margin: 20px 20px 0; + margin: 0.5rem 0.5rem 0; } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list { - height: 270px; + height: 6.75rem; + -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list .nut-address__detail-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - font-size: var(--nut-address-region-item-font-size, var(--nut-font-size-1, 12px)); + font-size: var(--nut-address-region-item-font-size, var(--nut-font-size-1, 0.3rem)); color: var(--nut-address-region-item-color, #333); } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list .nut-address__detail-item.active { font-weight: 700; } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list .nut-address__detail-item > div { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin: 10px 0; + margin: 0.25rem 0; } .nut-address .nut-address__custom .nut-address__elevator-group { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - margin-top: 20px; + margin-top: 0.5rem; } .nut-address .nut-address__exist { display: block; - margin-top: 15px; + margin-top: 0.375rem; } .nut-address .nut-address__exist .nut-address__exist-group { - padding: 15px 20px 0; - height: 279px; + padding: 0.375rem 0.5rem 0; + height: 6.975rem; overflow-y: scroll; } .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list { + -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-bottom: 20px; - font-size: var(--nut-font-size-1, 12px); - line-height: 14px; + margin-bottom: 0.5rem; + font-size: var(--nut-font-size-1, 0.3rem); + line-height: 0.35rem; color: #333; } .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item.active { font-weight: 700; } .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item .exist-item-icon { - margin-right: var(--nut-address-item-margin-right, 9px); + margin-right: var(--nut-address-item-margin-right, 0.225rem); color: var(--nut-address-icon-color, var(--nut-primary-color, #fa2c19)) !important; } .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item span { display: inline-block; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-address .nut-address__exist .nut-address__exist-choose { width: 100%; - height: 54px; - padding: 6px 0 0; - border-top: 1px solid #f2f2f2; + height: 1.35rem; + padding: 0.15rem 0 0; + border-top: 0.025rem solid #f2f2f2; } .nut-address .nut-address__exist .nut-address__exist-choose .nut-address__exist-choose-btn { width: 90%; - height: 42px; - line-height: 42px; + height: 1.05rem; + line-height: 1.05rem; margin: auto; text-align: center; background: var( --nut-button-primary-background-color, linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) ); - border-radius: 21px; - font-size: 15px; + border-radius: 0.525rem; + font-size: 0.375rem; color: var(--nut-white, #fff); } .nut-address-select-icon { - margin-right: var(--nut-address-item-margin-right, 9px); + margin-right: var(--nut-address-item-margin-right, 0.225rem); color: var(--nut-address-icon-color, var(--nut-primary-color, #fa2c19)) !important; } .nut-barrage { @@ -6029,33 +7560,43 @@ textarea { width: 100%; height: 100%; overflow: hidden; + -webkit-box-sizing: border-box; box-sizing: border-box; --move-distance: '300%'; } .nut-barrage__item { - width: 100px; + width: 2.5rem; display: block; position: absolute; right: 0; - padding: 3px 25px; - border-radius: 50px; - font-size: 12px; + padding: 0.075rem 0.625rem; + border-radius: 1.25rem; + font-size: 0.3rem; text-align: center; white-space: pre; + -webkit-transform: translate(100%); + -ms-transform: translate(100%); transform: translate(100%); + background: -webkit-gradient(linear, left top, right top, from(#00000026), to(#0000)); + background: -webkit-linear-gradient(left, #00000026, #0000); background: linear-gradient(to right, #00000026, #0000); } .nut-barrage__item.move { will-change: transform; + -webkit-animation-name: moving; animation-name: moving; + -webkit-animation-timing-function: linear; animation-timing-function: linear; + -webkit-animation-play-state: running; animation-play-state: running; } @keyframes moving { 0% { + -webkit-transform: translate(100%); transform: translate(100%); } to { + -webkit-transform: translate(var(--move-distance)); transform: translate(var(--move-distance)); } } @@ -6064,6 +7605,7 @@ textarea { -webkit-transform: translateX(100%); } to { + -webkit-transform: translate(var(--move-distance)); transform: translate(var(--move-distance)); } } @@ -6073,9 +7615,15 @@ textarea { .nut-signature .nut-signature-inner { height: 8rem; margin-bottom: 1rem; - border: 1px solid #dadada; + border: 0.025rem solid #dadada; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-signature .spcanvas_WEAPP { @@ -6086,7 +7634,7 @@ textarea { width: 100%; } .nut-signature .nut-signature-btn { - margin-right: 15px; + margin-right: 0.375rem; } .nut-theme-dark .nut-time-select { background-color: var(--nut-dark-background2, #1b1b1b); @@ -6109,32 +7657,36 @@ textarea { overflow: hidden; } .nut-time-select__title { + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: var(--nut-timeselect-title-width, 100%); - height: var(--nut-timeselect-title-height, 50px); - line-height: var(--nut-timeselect-title-line-height, 50px); - padding-bottom: 10px; - font-size: var(--nut-timeselect-title-font-size, var(--nut-font-size-2, 14px)); + height: var(--nut-timeselect-title-height, 1.25rem); + line-height: var(--nut-timeselect-title-line-height, 1.25rem); + padding-bottom: 0.25rem; + font-size: var(--nut-timeselect-title-font-size, var(--nut-font-size-2, 0.35rem)); color: var(--nut-timeselect-title-color, var(--nut-title-color, #1a1a1a)); text-align: center; } .nut-time-select__title__fixed { width: 100%; - height: 50px; + height: 1.25rem; } .nut-time-select__content { width: 100%; - height: calc(100% - var(--nut-timeselect-title-height, 50px) - 10px); + height: calc(100% - var(--nut-timeselect-title-height, 1.25rem) - 0.25rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-time-select__content__pannel { - width: 140px; + width: 3.5rem; height: 100%; overflow: auto; background-color: var(--nut-timeselect-pannel-bg-color, #f6f7f9); } .nut-time-select__content__detail { - width: calc(100% - 140px); + width: calc(100% - 3.5rem); height: 100%; overflow-y: auto; overflow-x: hidden; @@ -6148,14 +7700,21 @@ textarea { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-time-pannel { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - width: var(--nut-timeselect-timepannel-width, 140px); - height: var(--nut-timeselect-timepannel-height, 40px); - padding: var(--nut-timeselect-timepannel-padding, 15px); + width: var(--nut-timeselect-timepannel-width, 3.5rem); + height: var(--nut-timeselect-timepannel-height, 1rem); + padding: var(--nut-timeselect-timepannel-padding, 0.375rem); + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; color: var(--nut-timeselect-timepannel-text-color, var(--nut-title-color2, #666666)); - font-size: var(--nut-timeselect-timepannel-font-size, var(--nut-font-size-2, 14px)); + font-size: var(--nut-timeselect-timepannel-font-size, var(--nut-font-size-2, 0.35rem)); + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-time-pannel--curr { @@ -6174,31 +7733,33 @@ textarea { color: var(--nut-timeselect-timedetail-item-cur-text-color, var(--nut-primary-color, #fa2c19)); } .nut-time-detail { + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; - padding: var(--nut-timeselect-timedetail-padding, 0 5px 50px 13px); + padding: var(--nut-timeselect-timedetail-padding, 0 0.125rem 1.25rem 0.325rem); } .nut-time-detail__detail { width: 100%; } .nut-time-detail__detail__list__item { display: inline-block; - width: var(--nut-timeselect-timedetail-item-width, 100px); - height: var(--nut-timeselect-timedetail-item-height, 50px); - line-height: var(--nut-timeselect-timedetail-item-line-height, 50px); + width: var(--nut-timeselect-timedetail-item-width, 2.5rem); + height: var(--nut-timeselect-timedetail-item-height, 1.25rem); + line-height: var(--nut-timeselect-timedetail-item-line-height, 1.25rem); text-align: center; - margin-right: 10px; - margin-bottom: 10px; + margin-right: 0.25rem; + margin-bottom: 0.25rem; background-color: var(--nut-timeselect-timedetail-item-bg-color, #f6f7f9); - border-radius: var(--nut-timeselect-timedetail-item-border-radius, 5px); + border-radius: var(--nut-timeselect-timedetail-item-border-radius, 0.125rem); color: var(--nut-timeselect-timedetail-item-text-color, #333333); - font-size: var(--nut-timeselect-timedetail-item-text-font-size, var(--nut-font-size-2, 14px)); - border: 1px solid transparent; + font-size: var(--nut-timeselect-timedetail-item-text-font-size, var(--nut-font-size-2, 0.35rem)); + border: 0.025rem solid transparent; font-weight: 700; } .nut-time-detail__detail__list__item--curr { background-color: transparent; - border: 1px solid var(--nut-timeselect-timedetail-item-cur-border, var(--nut-primary-color, #fa2c19)); + border: 0.025rem solid var(--nut-timeselect-timedetail-item-cur-border, var(--nut-primary-color, #fa2c19)); color: var(--nut-timeselect-timedetail-item-cur-text-color, var(--nut-primary-color, #fa2c19)); position: relative; } @@ -6215,11 +7776,13 @@ textarea { content: ''; } .nut-time-detail__detail--afternoon { - margin-top: 30px; + margin-top: 0.75rem; } .overlay-fade-enter-active, .overlay-fade-leave-active { + -webkit-transition-property: opacity; transition-property: opacity; + -webkit-transition-timing-function: ease; transition-timing-function: ease; } .overlay-fade-enter-from, @@ -6245,7 +7808,9 @@ textarea { } .nut-popup-slide-center-enter-active, .nut-popup-slide-center-leave-active { + -webkit-transition-property: opacity; transition-property: opacity; + -webkit-transition-timing-function: ease; transition-timing-function: ease; } .nut-popup-slide-center-enter-from, @@ -6254,27 +7819,37 @@ textarea { } .nut-popup-slide-top-enter-from, .nut-popup-slide-top-leave-active { + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); transform: translateY(-100%); } .nut-popup-slide-right-enter-from, .nut-popup-slide-right-leave-active { + -webkit-transform: translate(100%); + -ms-transform: translate(100%); transform: translate(100%); } .nut-popup-slide-bottom-enter-from, .nut-popup-slide-bottom-leave-active { + -webkit-transform: translateY(100%); + -ms-transform: translateY(100%); transform: translateY(100%); } .nut-popup-slide-left-enter-from, .nut-popup-slide-left-leave-active { + -webkit-transform: translate(-100%); + -ms-transform: translate(-100%); transform: translate(-100%); } .nut-popup--center { top: 50%; left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .nut-popup--center.round { - border-radius: var(--nut-popup-border-radius, 20px); + border-radius: var(--nut-popup-border-radius, 0.5rem); } .nut-popup--bottom { bottom: 0; @@ -6282,7 +7857,7 @@ textarea { width: 100%; } .nut-popup--bottom.round { - border-radius: var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0 0; + border-radius: var(--nut-popup-border-radius, 0.5rem) var(--nut-popup-border-radius, 0.5rem) 0 0; } .nut-popup--bottom--safebottom { padding-bottom: constant(safe-area-inset-bottom); @@ -6293,14 +7868,14 @@ textarea { right: 0; } .nut-popup--right.round { - border-radius: var(--nut-popup-border-radius, 20px) 0 0 var(--nut-popup-border-radius, 20px); + border-radius: var(--nut-popup-border-radius, 0.5rem) 0 0 var(--nut-popup-border-radius, 0.5rem); } .nut-popup--left { top: 0; left: 0; } .nut-popup--left.round { - border-radius: 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0; + border-radius: 0 var(--nut-popup-border-radius, 0.5rem) var(--nut-popup-border-radius, 0.5rem) 0; } .nut-popup--top { top: 0; @@ -6308,7 +7883,7 @@ textarea { width: 100%; } .nut-popup--top.round { - border-radius: 0 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px); + border-radius: 0 0 var(--nut-popup-border-radius, 0.5rem) var(--nut-popup-border-radius, 0.5rem); } .nut-popup { position: fixed; @@ -6321,31 +7896,31 @@ textarea { position: absolute !important; z-index: 1; color: #969799; - font-size: 18px; + font-size: 0.45rem; cursor: pointer; - width: 30px; - height: 30px; - line-height: 30px; + width: 0.75rem; + height: 0.75rem; + line-height: 0.75rem; text-align: center; } .nut-popup__close-icon:active { opacity: 0.7; } .nut-popup__close-icon--top-left { - top: var(--nut-popup-close-icon-margin, 16px); - left: var(--nut-popup-close-icon-margin, 16px); + top: var(--nut-popup-close-icon-margin, 0.4rem); + left: var(--nut-popup-close-icon-margin, 0.4rem); } .nut-popup__close-icon--top-right { - top: var(--nut-popup-close-icon-margin, 16px); - right: var(--nut-popup-close-icon-margin, 16px); + top: var(--nut-popup-close-icon-margin, 0.4rem); + right: var(--nut-popup-close-icon-margin, 0.4rem); } .nut-popup__close-icon--bottom-left { - bottom: var(--nut-popup-close-icon-margin, 16px); - left: var(--nut-popup-close-icon-margin, 16px); + bottom: var(--nut-popup-close-icon-margin, 0.4rem); + left: var(--nut-popup-close-icon-margin, 0.4rem); } .nut-popup__close-icon--bottom-right { - right: var(--nut-popup-close-icon-margin, 16px); - bottom: var(--nut-popup-close-icon-margin, 16px); + right: var(--nut-popup-close-icon-margin, 0.4rem); + bottom: var(--nut-popup-close-icon-margin, 0.4rem); } .nut-theme-dark .nut-sku { background: var(--nut-dark-background, #131313); @@ -6369,76 +7944,106 @@ textarea { } .nut-sku { height: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; padding: 0; background: var(--nut-white, #fff); } .nut-sku-header { - height: 100px; + height: 2.5rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; - margin-top: 18px; - padding: 0 18px; + margin-top: 0.45rem; + padding: 0 0.45rem; } .nut-sku-header .nut-sku-header-img { - width: var(--nut-sku-product-img-width, 100px); - height: var(--nut-sku-product-img-height, var(--nut-sku-product-img-width, 100px)); + width: var(--nut-sku-product-img-width, 2.5rem); + height: var(--nut-sku-product-img-height, var(--nut-sku-product-img-width, 2.5rem)); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; - margin-right: 12px; + margin-right: 0.3rem; border-radius: var(--nut-sku-product-img-border-radius, 0); } .nut-sku-header-right { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; } .nut-sku-header-right-extra { - font-size: 12px; + font-size: 0.3rem; color: var(--nut-text-color, #808080); } .nut-sku-content { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; overflow-y: auto; overflow-x: hidden; - margin-top: 24px; - padding: 0 18px; + margin-top: 0.6rem; + padding: 0 0.45rem; } .nut-sku-content::-webkit-scrollbar { display: none; } .nut-sku-select-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-sku-select-item-title { - height: 13px; + height: 0.325rem; font-weight: var(--nut-sku-spec-title-font-weight, bold); - font-size: var(--nut-sku-spec-title-font-size, 13px); + font-size: var(--nut-sku-spec-title-font-size, 0.325rem); color: var(--nut-sku-spec-title-color, var(--nut-black, #000)); - margin-bottom: var(--nut-sku-spec-title-margin-bottom, 18px); + margin-bottom: var(--nut-sku-spec-title-margin-bottom, 0.45rem); } .nut-sku-select-item-skus { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-sku-select-item-skus-sku { - margin-right: var(--nut-sku-spec-margin-right, 12px); - height: var(--nut-sku-spec-height, 30px); - line-height: var(--nut-sku-spec-line-height, var(--nut-sku-spec-height, 30px)); - padding: var(--nut-sku-spec-padding, 0 18px); - border-radius: 15px; - font-size: var(--nut-sku-spec-font-size, 11px); + margin-right: var(--nut-sku-spec-margin-right, 0.3rem); + height: var(--nut-sku-spec-height, 0.75rem); + line-height: var(--nut-sku-spec-line-height, var(--nut-sku-spec-height, 0.75rem)); + padding: var(--nut-sku-spec-padding, 0 0.45rem); + border-radius: 0.375rem; + font-size: var(--nut-sku-spec-font-size, 0.275rem); color: var(--nut-sku-spec-color, var(--nut-black, #000)); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; - margin-bottom: 12px; + margin-bottom: 0.3rem; background: var(--nut-sku-spec-background, rgb(242, 242, 242)); - border: 1px solid rgb(242, 242, 242); + border: 0.025rem solid rgb(242, 242, 242); } .nut-sku-select-item-skus-sku.active { background: transparent; - border: var(--nut-sku-item-border, 1px solid var(--nut-primary-color, #fa2c19)); + border: var(--nut-sku-item-border, 0.025rem solid var(--nut-primary-color, #fa2c19)); color: var(--nut-primary-color, #fa2c19); position: relative; } @@ -6450,39 +8055,54 @@ textarea { left: 0; width: 100%; height: 100%; - border-radius: 15px; + border-radius: 0.375rem; background-color: var(--nut-sku-item-active-bg, var(--nut-primary-color, #fa2c19)); opacity: 0.15; content: ''; } .nut-sku-select-item-skus-sku.disable { color: var(--nut-text-color, #808080); + -webkit-text-decoration: var(--nut-sku-item-disable-line, line-through); text-decoration: var(--nut-sku-item-disable-line, line-through); } .nut-sku-stepper { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; - margin: 10px 0 30px; + margin: 0.25rem 0 0.75rem; } .nut-sku-stepper-title { font-weight: 700; - font-size: 13px; + font-size: 0.325rem; color: var(--nut-black, #000); - margin-right: 12px; + margin-right: 0.3rem; } .nut-sku-stepper-limit { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - font-size: 12px; + font-size: 0.3rem; color: var(--nut-text-color, #808080); } .nut-sku-stepper-count { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-sku-stepper-count-lowestBuy { - font-size: 12px; + font-size: 0.3rem; color: var(--nut-primary-color, #fa2c19); } .nut-sku-operate { @@ -6491,32 +8111,39 @@ textarea { .nut-sku-operate-desc { display: block; width: 100%; - padding: 10px 0; + padding: 0.25rem 0; text-align: center; background: #fbf9da; color: #de6a1c; - font-size: 12px; + font-size: 0.3rem; } .nut-sku-operate-btn { - height: var(--nut-sku-operate-btn-height, 54px); + height: var(--nut-sku-operate-btn-height, 1.35rem); width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; background: var(--nut-white, #fff); text-align: center; - padding: 0 18px; + padding: 0 0.45rem; + -webkit-box-sizing: border-box; box-sizing: border-box; border-top: var(--nut-sku-operate-btn-border-top, 0); } .nut-sku-operate-btn-item { width: 100%; - height: var(--nut-sku-operate-btn-item-height, 40px); - line-height: var(--nut-sku-operate-btn-item-line-height, var(--nut-sku-operate-btn-item-height, 40px)); - margin-right: 18px; + height: var(--nut-sku-operate-btn-item-height, 1rem); + line-height: var(--nut-sku-operate-btn-item-line-height, var(--nut-sku-operate-btn-item-height, 1rem)); + margin-right: 0.45rem; background: var(--nut-sku-opetate-bg-default, linear-gradient(90deg, var(--nut-primary-color, #fa2c19), var(--nut-primary-color-end, #fa6419) 100%)); - border-radius: 21px; - font-size: var(--nut-sku-operate-btn-item-font-size, 15px); + border-radius: 0.525rem; + font-size: var(--nut-sku-operate-btn-item-font-size, 0.375rem); font-weight: var(--nut-sku-operate-btn-item-font-weight, normal); color: var(--nut-white, #fff); } @@ -6536,106 +8163,110 @@ textarea { } .nut-price--symbol { display: inline-block; - font-size: var(--nut-font-size-3, 16px); + font-size: var(--nut-font-size-3, 0.4rem); } .nut-price--large, .nut-price--point { display: inline-block; - font-size: var(--nut-price-big-size, 24px); + font-size: var(--nut-price-big-size, 0.6rem); } .nut-price--decimal-large { display: inline-block; - font-size: var(--nut-price-decimal-big-size, 18px); + font-size: var(--nut-price-decimal-big-size, 0.45rem); } .nut-price--symbol-large { display: inline-block; - font-size: var(--nut-price-symbol-big-size, 18px); + font-size: var(--nut-price-symbol-big-size, 0.45rem); } .nut-price--normal { display: inline-block; - font-size: var(--nut-price-medium-size, 16px); + font-size: var(--nut-price-medium-size, 0.4rem); } .nut-price--decimal-normal { display: inline-block; - font-size: var(--nut-price-decimal-medium-size, 14px); + font-size: var(--nut-price-decimal-medium-size, 0.35rem); } .nut-price--symbol-normal { display: inline-block; - font-size: var(--nut-price-symbol-medium-size, 14px); + font-size: var(--nut-price-symbol-medium-size, 0.35rem); } .nut-price--small { display: inline-block; - font-size: var(--nut-price-small-size, 12px); + font-size: var(--nut-price-small-size, 0.3rem); } .nut-price--decimal-small { display: inline-block; - font-size: var(--nut-price-decimal-small-size, 10px); + font-size: var(--nut-price-decimal-small-size, 0.25rem); } .nut-price--symbol-small { display: inline-block; - font-size: var(--nut-price-symbol-small-size, 10px); + font-size: var(--nut-price-symbol-small-size, 0.25rem); } .nut-tag { - padding: 0 4px; + padding: 0 0.1rem; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - font-size: var(--nut-tag-font-size, 12px); - border-radius: var(--nut-tag-default-border-radius, 4px); + font-size: var(--nut-tag-font-size, 0.3rem); + border-radius: var(--nut-tag-default-border-radius, 0.1rem); height: var(--nut-tag-height, auto); } .nut-tag--default { color: var(--nut-tag-default-color, #ffffff); background: var(--nut-tag-default-background-color, #000000); - border: var(--nut-tag-border-width, 1px) solid transparent; + border: var(--nut-tag-border-width, 0.025rem) solid transparent; } .nut-tag--default.nut-tag--plain { color: var(--nut-tag-default-background-color, #000000); - border: var(--nut-tag-border-width, 1px) solid var(--nut-tag-default-background-color, #000000); + border: var(--nut-tag-border-width, 0.025rem) solid var(--nut-tag-default-background-color, #000000); } .nut-tag--primary { color: var(--nut-tag-default-color, #ffffff); background: var(--nut-tag-primary-background-color, #3460fa); - border: var(--nut-tag-border-width, 1px) solid transparent; + border: var(--nut-tag-border-width, 0.025rem) solid transparent; } .nut-tag--primary.nut-tag--plain { color: var(--nut-tag-primary-background-color, #3460fa); - border: var(--nut-tag-border-width, 1px) solid var(--nut-tag-primary-background-color, #3460fa); + border: var(--nut-tag-border-width, 0.025rem) solid var(--nut-tag-primary-background-color, #3460fa); } .nut-tag--success { color: var(--nut-tag-default-color, #ffffff); background: var(--nut-tag-success-background-color, #4fc08d); - border: var(--nut-tag-border-width, 1px) solid transparent; + border: var(--nut-tag-border-width, 0.025rem) solid transparent; } .nut-tag--success.nut-tag--plain { color: var(--nut-tag-success-background-color, #4fc08d); - border: var(--nut-tag-border-width, 1px) solid var(--nut-tag-success-background-color, #4fc08d); + border: var(--nut-tag-border-width, 0.025rem) solid var(--nut-tag-success-background-color, #4fc08d); } .nut-tag--danger { color: var(--nut-tag-default-color, #ffffff); background: var(--nut-tag-danger-background-color, linear-gradient(135deg, rgb(242, 20, 12) 0%, rgb(232, 34, 14) 70%, rgb(242, 77, 12) 100%)); - border: var(--nut-tag-border-width, 1px) solid transparent; + border: var(--nut-tag-border-width, 0.025rem) solid transparent; } .nut-tag--danger.nut-tag--plain { color: var(--nut-tag-danger-background-color-plain, #df3526); - border: var(--nut-tag-border-width, 1px) solid var(--nut-tag-danger-background-color-plain, #df3526); + border: var(--nut-tag-border-width, 0.025rem) solid var(--nut-tag-danger-background-color-plain, #df3526); } .nut-tag--warning { color: var(--nut-tag-default-color, #ffffff); background: var(--nut-tag-warning-background-color, #f3812e); - border: var(--nut-tag-border-width, 1px) solid transparent; + border: var(--nut-tag-border-width, 0.025rem) solid transparent; } .nut-tag--warning.nut-tag--plain { color: var(--nut-tag-warning-background-color, #f3812e); - border: var(--nut-tag-border-width, 1px) solid var(--nut-tag-warning-background-color, #f3812e); + border: var(--nut-tag-border-width, 0.025rem) solid var(--nut-tag-warning-background-color, #f3812e); } .nut-tag--round { - border-radius: var(--nut-tag-round-border-radius, 8px); + border-radius: var(--nut-tag-round-border-radius, 0.2rem); } .nut-tag--mark { - border-radius: 0 12px 12px 0; + border-radius: 0 0.3rem 0.3rem 0; } .nut-tag--close { - margin-left: 4px; + margin-left: 0.1rem; cursor: pointer; } .nut-theme-dark .nut-card .nut-card__right { @@ -6643,11 +8274,15 @@ textarea { } .nut-card { width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-card .nut-card__left { - width: 120px; - height: 120px; + width: 3rem; + height: 3rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; background-color: var(--nut-card-left-background-color, inherit); border-radius: var(--nut-card-left-border-radius, 0); @@ -6658,8 +8293,10 @@ textarea { height: 100%; } .nut-card .nut-card__right { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - padding: 0 10px 8px; + padding: 0 0.25rem 0.2rem; } .nut-card .nut-card__right .nut-card__right__title { display: -webkit-box; @@ -6668,54 +8305,68 @@ textarea { overflow: hidden; word-break: break-all; line-height: 1.5; - font-size: 14px; + font-size: 0.35rem; } .nut-card .nut-card__right .nut-card__right__price { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - height: 18px; - line-height: 18px; - margin-top: 9px; + height: 0.45rem; + line-height: 0.45rem; + margin-top: 0.225rem; } .nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--symbol-large { - font-size: 12px; + font-size: 0.3rem; } .nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--large { - font-size: 18px; + font-size: 0.45rem; } .nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--decimal-large { - font-size: 12px; + font-size: 0.3rem; } .nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price { - margin-left: 2px; + margin-left: 0.05rem; color: #d2a448; } .nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--symbol-large, .nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--large, .nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--decimal-large { - font-size: 12px; + font-size: 0.3rem; } .nut-card .nut-card__right .nut-card__right__other { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: 5px 0 2px; + padding: 0.125rem 0 0.05rem; } .nut-card .nut-card__right .nut-card__right__other .nut-tag { border: none; - padding: 0 2px; - margin-right: 5px; - font-size: var(--nut-card-font-size-0, var(--nut-font-size-0, 10px)); + padding: 0 0.05rem; + margin-right: 0.125rem; + font-size: var(--nut-card-font-size-0, var(--nut-font-size-0, 0.25rem)); } .nut-card .nut-card__right .nut-card__right__shop { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-top: 4px; + margin-top: 0.1rem; } .nut-card .nut-card__right .nut-card__right__shop .nut-card__right__shop__name { line-height: 1.5; color: #999; - font-size: 12px; + font-size: 0.3rem; } .nut-theme-dark .nut-input-number__icon { color: var(--nut-dark-color, var(--nut-white, #fff)); @@ -6723,65 +8374,78 @@ textarea { .nut-theme-dark .nut-input-number__icon--disabled { color: var(--nut-dark-color-gray, var(--nut-text-color, #808080)); } -.nut-theme-dark .nut-input-number input, +.nut-theme-dark .nut-input-number taro-input-core, .nut-theme-dark .nut-input-number__text--readonly { background-color: var(--nut-dark-background, #131313); color: var(--nut-dark-color, var(--nut-white, #fff)); - border: 1px solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); + border: 0.025rem solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); } -.nut-theme-dark .nut-input-number--disabled input { +.nut-theme-dark .nut-input-number--disabled taro-input-core { color: var(--nut-dark-color-gray, var(--nut-text-color, #808080)); } .nut-input-number { display: var(--nut-inputnumber-display, inline-flex); + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; border: var(--nut-inputnumber-border, 0); border-radius: var(--nut-inputnumber-border-radius, 0); height: var(--nut-inputnumber-height, auto); line-height: var(--nut-inputnumber-line-height, normal); + -webkit-box-sizing: var(--nut-inputnumber-border-box, content-box); box-sizing: var(--nut-inputnumber-border-box, content-box); } -.nut-input-number--disabled input { +.nut-input-number--disabled taro-input-core { color: var(--nut-inputnumber-icon-void-color, var(--nut-disable-color, #cccccc)); } .nut-input-number__icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; color: var(--nut-inputnumber-icon-color, var(--nut-title-color, #1a1a1a)); cursor: pointer; } .nut-input-number__icon .nut-icon { - width: var(--nut-inputnumber-icon-size, 20px); - height: var(--nut-inputnumber-icon-size, 20px); - font-size: var(--nut-inputnumber-icon-size, 20px); + width: var(--nut-inputnumber-icon-size, 0.5rem); + height: var(--nut-inputnumber-icon-size, 0.5rem); + font-size: var(--nut-inputnumber-icon-size, 0.5rem); } .nut-input-number__icon--disabled { color: var(--nut-inputnumber-icon-void-color, var(--nut-disable-color, #cccccc)); cursor: not-allowed; } -.nut-input-number input { +.nut-input-number taro-input-core { border-top: 0 !important; border-bottom: 0 !important; } -.nut-input-number input, +.nut-input-number taro-input-core, .nut-input-number__text--readonly, .nut-input-number__text--input { - width: var(--nut-inputnumber-input-width, 40px); + width: var(--nut-inputnumber-input-width, 1rem); height: 100%; text-align: center; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; outline: none; border: var(--nut-inputnumber-input-border, 0); - font-size: var(--nut-inputnumber-input-font-size, 12px); + font-size: var(--nut-inputnumber-input-font-size, 0.3rem); color: var(--nut-inputnumber-input-font-color, var(--nut-title-color, #1a1a1a)); - margin: var(--nut-inputnumber-input-margin, 0 6px); + margin: var(--nut-inputnumber-input-margin, 0 0.15rem); background-color: var(--nut-inputnumber-input-background-color, var(--nut-help-color, #f5f5f5)); - border-radius: var(--nut-inputnumber-input-border-radius, 4px); + border-radius: var(--nut-inputnumber-input-border-radius, 0.1rem); } -.nut-input-number input::-webkit-outer-spin-button, -.nut-input-number input::-webkit-inner-spin-button { +.nut-input-number taro-input-core::-webkit-outer-spin-button, +.nut-input-number taro-input-core::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -6789,6 +8453,18 @@ textarea { .nut-theme-dark .nut-ecard { color: var(--nut-dark-color3, rgba(232, 230, 227, 0.8)); } +.nut-theme-dark .nut-ecard ::-webkit-input-placeholder { + color: #1d1f20; +} +.nut-theme-dark .nut-ecard ::-moz-placeholder { + color: #1d1f20; +} +.nut-theme-dark .nut-ecard :-ms-input-placeholder { + color: #1d1f20; +} +.nut-theme-dark .nut-ecard ::-ms-input-placeholder { + color: #1d1f20; +} .nut-theme-dark .nut-ecard ::placeholder { color: #1d1f20; } @@ -6797,7 +8473,7 @@ textarea { } .nut-theme-dark .nut-ecard .nut-ecard__list__item.active { background: var(--nut-dark-background6, #380e08); - outline: 1px solid var(--nut-dark-color2, #f2270c); + outline: 0.025rem solid var(--nut-dark-color2, #f2270c); color: var(--nut-dark-color2, #f2270c); } .nut-theme-dark .nut-ecard .nut-ecard__list__input { @@ -6807,10 +8483,10 @@ textarea { .nut-theme-dark .nut-ecard .nut-ecard__list__input.active { background: var(--nut-dark-background7, #707070); } -.nut-theme-dark .nut-ecard .nut-ecard__list__input.active > view > input { +.nut-theme-dark .nut-ecard .nut-ecard__list__input.active > view > taro-input-core { background: var(--nut-dark-background7, #707070); } -.nut-theme-dark .nut-ecard .nut-ecard__list__input .nut-ecard__list__input--con > input { +.nut-theme-dark .nut-ecard .nut-ecard__list__input .nut-ecard__list__input--con > taro-input-core { background-color: transparent; color: var(--nut-dark-color3, rgba(232, 230, 227, 0.8)); } @@ -6819,77 +8495,107 @@ textarea { } .nut-ecard__title { line-height: 1; - font-size: 15px; + font-size: 0.375rem; font-weight: 400; } .nut-ecard__list { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; - margin-top: 15px; + margin-top: 0.375rem; } .nut-ecard__list__item { width: 48%; - height: 46px; + height: 1.15rem; background: var(--nut-ecard-bg-color, #f0f2f5); - border-radius: 4px; - margin-bottom: 12px; + border-radius: 0.1rem; + margin-bottom: 0.3rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-ecard__list__item.active { background: var(--nut-white, #fff); - outline: 1px solid var(--nut-primary-color, #fa2c19); - border-radius: 4px; + outline: 0.025rem solid var(--nut-primary-color, #fa2c19); + border-radius: 0.1rem; } .nut-ecard__list__input { width: 100%; - height: 46px; + height: 1.15rem; background: var(--nut-ecard-bg-color, #f0f2f5); color: #000c; - border-radius: 4px; - display: flex; - padding: 0 15px 0 20px; - font-size: 14px; + border-radius: 0.1rem; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0 0.375rem 0 0.5rem; + font-size: 0.35rem; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-ecard__list__input--con { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; } -.nut-ecard__list__input--con input, +.nut-ecard__list__input--con taro-input-core, .nut-ecard__list__input--con .nut-ecard-input { caret-color: var(--nut-primary-color, #fa2c19); text-align: right; background: transparent; - margin-right: 10px; + margin-right: 0.25rem; outline: 0 none; border: 0; text-decoration: none; } .nut-ecard__list__input.active { background: var(--nut-white, #fff); - outline: 1px solid var(--nut-primary-color, #fa2c19); + outline: 0.025rem solid var(--nut-primary-color, #fa2c19); } -.nut-ecard__list__input.active > view > input { +.nut-ecard__list__input.active > view > taro-input-core { background: var(--nut-white, #fff); } .nut-ecard__list__step { width: 100%; - margin-top: 17px; + margin-top: 0.425rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; - font-size: 20px; + font-size: 0.5rem; font-weight: 400; color: var(--nut-primary-color, #fa2c19); } .nut-swipe { position: relative; display: block; + cursor: -webkit-grab; cursor: grab; + -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); } .nut-swipe__left, @@ -6900,10 +8606,12 @@ textarea { } .nut-swipe__left { left: 0; + -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .nut-swipe__right { right: 0; + -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .nut-swipe__content { @@ -6912,7 +8620,7 @@ textarea { .nut-theme-dark .nut-address-list-swipe, .nut-theme-dark .nut-address-list-general { background-color: var(--nut-dark-background2, #1b1b1b); - border-bottom: 1px solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); + border-bottom: 0.025rem solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-theme-dark .nut-address-list-swipe__mask, @@ -6934,17 +8642,21 @@ textarea { overflow: hidden; } .nut-address-list:last-child { - padding-bottom: 84px; + padding-bottom: 2.1rem; } .nut-address-list-swipe, .nut-address-list-general { - min-height: 76px; - padding: 5px 10px; + min-height: 1.9rem; + padding: 0.125rem 0.25rem; background-color: var(--nut-addresslist-bg, #fff); - border-bottom: 1px solid var(--nut-addresslist-border, #f0f0f0); + border-bottom: 0.025rem solid var(--nut-addresslist-border, #f0f0f0); color: var(--nut-addresslist-font-color, #333333); - font-size: var(--nut-addresslist-font-size, 16px); + font-size: var(--nut-addresslist-font-size, 0.4rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; position: relative; } @@ -6956,10 +8668,16 @@ textarea { bottom: 0; right: 0; background-color: var(--nut-addresslist-mask-bg, rgba(0, 0, 0, 0.4)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; justify-content: space-around; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: 0 40px; + padding: 0 1rem; z-index: 2001; } .nut-address-list-swipe__mask-copy, @@ -6968,16 +8686,23 @@ textarea { .nut-address-list-general__mask-copy, .nut-address-list-general__mask-set, .nut-address-list-general__mask-del { - height: 55px; - width: 55px; - padding: 0 10px; + height: 1.375rem; + width: 1.375rem; + padding: 0 0.25rem; border-radius: 50%; text-align: center; background-color: var(--nut-white, #fff); - font-size: 14px; + font-size: 0.35rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-address-list-swipe__mask-set, @@ -7000,41 +8725,51 @@ textarea { width: 100%; } .nut-address-list-item__info { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-address-list-item__info-contact { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; justify-content: flex-start; font-weight: 700; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-address-list-item__info-contact-name { - max-width: 145px; + max-width: 3.625rem; word-wrap: break-word; } .nut-address-list-item__info-contact-tel { - margin-left: 8px; - max-width: 110px; + margin-left: 0.2rem; + max-width: 2.75rem; word-wrap: break-word; } .nut-address-list-item__info-contact-default { - margin-left: 5px; - padding: 0 6px; - height: 16px; - line-height: 16px; + margin-left: 0.125rem; + padding: 0 0.15rem; + height: 0.4rem; + line-height: 0.4rem; background: var(--nut-addresslist-contnts-contact-default, var(--nut-primary-color, #fa2c19)); - border-radius: 2px; - font-size: 12px; + border-radius: 0.05rem; + font-size: 0.3rem; color: var(--nut-addresslist-contnts-contact-color, var(--nut-white, #fff)); } .nut-address-list-item__info-handle-edit { - margin-left: 15px; + margin-left: 0.375rem; } .nut-address-list-item__addr { color: var(--nut-addresslist-addr-font-color, #666666); - font-size: var(--nut-addresslist-addr-font-size, 12px); - margin-top: 5px; + font-size: var(--nut-addresslist-addr-font-size, 0.3rem); + margin-top: 0.125rem; } .nut-address-list__bottom { position: fixed; @@ -7044,9 +8779,10 @@ textarea { bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); width: 100%; - padding: 12px 18px 24px; + padding: 0.3rem 0.45rem 0.6rem; z-index: 100000; background-color: var(--nut-addresslist-bg, #fff); + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-address-list .nut-address-list__mask-bottom { @@ -7075,6 +8811,8 @@ textarea { background: var(--nut-category-list-item-checked-img-bg-color, var(--nut-primary-color, #fa2c19)); } .nut-category__cateList { + display: -webkit-flex; + display: -ms-flexbox; display: flex; background: var(--nut-category-bg-color, rgb(255, 255, 255)); } @@ -7083,19 +8821,27 @@ textarea { } .nut-category__cateListItemChecked, .nut-category__cateListItem { - width: 100px; - height: 50px; - font-size: 13px; + width: 2.5rem; + height: 1.25rem; + font-size: 0.325rem; font-weight: 400; color: var(--nut-category-list-item-color, var(--nut-title-color, #1a1a1a)); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-transition: all 0.3s; transition: all 0.3s; } .nut-category__cateListItemChecked { background: var(--nut-category-list-item-checked-color, rgb(255, 255, 255)); font-weight: 500; + -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; } @@ -7103,8 +8849,8 @@ textarea { position: absolute; content: ''; left: 0; - width: 5px; - height: 18px; + width: 0.125rem; + height: 0.45rem; background: var(--nut-category-list-item-checked-img-bg-color, var(--nut-primary-color, #fa2c19)); } .nut-theme-dark .nut-category-pane__childTitle { @@ -7114,75 +8860,97 @@ textarea { background: var(--nut-dark-background2, #1b1b1b); } .nut-category-pane__cateListRight { - padding-left: 15px; + padding-left: 0.375rem; background: var(--nut-category-bg-color, rgb(255, 255, 255)); } .nut-category-pane__childTitle { - margin-top: 15px; - margin-bottom: 15px; - font-size: 13px; + margin-top: 0.375rem; + margin-bottom: 0.375rem; + font-size: 0.325rem; font-weight: 500; color: var(--nut-category-pane-title-color, rgb(51, 51, 51)); } .nut-category-pane__childItemList { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-category-pane__childItem { - margin-right: 10px; + margin-right: 0.25rem; } .nut-category-pane__childImg { - width: 75px; - height: 75px; - border-radius: 5px; + width: 1.875rem; + height: 1.875rem; + border-radius: 0.125rem; } .nut-category-pane__skuName { - margin-left: 15px; - margin-top: 15px; - margin-right: 10px; - width: 75px; - height: 40px; - border: 1px solid var(--nut-category-pane-border-color, rgb(153, 153, 153)); - border-radius: 5px; - font-size: 12px; + margin-left: 0.375rem; + margin-top: 0.375rem; + margin-right: 0.25rem; + width: 1.875rem; + height: 1rem; + border: 0.025rem solid var(--nut-category-pane-border-color, rgb(153, 153, 153)); + border-radius: 0.125rem; + font-size: 0.3rem; font-weight: 400; color: var(--nut-category-pane-gray-color, #666); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-category-pane__skuName:nth-child(3n) { margin-right: 0; } .nut-category-pane__skuName:nth-child(n + 4) { - margin-top: 15px; + margin-top: 0.375rem; } .nut-category-pane__skuImg { - font-size: 12px; + font-size: 0.3rem; font-weight: 400; color: var(--nut-category-pane-gray-color, #666); - margin-top: 10px; - margin-bottom: 10px; + margin-top: 0.25rem; + margin-bottom: 0.25rem; text-align: center; } .nut-category-pane__selfItemList { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-rate { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; } .nut-rate-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; position: relative; - margin-right: 14px; + margin-right: 0.35rem; } .nut-rate-item:last-child { margin-right: 0; } .nut-rate-item__icon { color: var(--nut-rate-icon-color, var(--nut-primary-color, #fa2c19)); + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; } @@ -7190,9 +8958,13 @@ textarea { color: var(--nut-rate-icon-void-color, var(--nut-disable-color, #cccccc)); } .nut-rate-item__icon--full { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-rate-item__icon--half { + display: -webkit-flex; + display: -ms-flexbox; display: flex; position: absolute; width: 50%; @@ -7208,107 +8980,131 @@ textarea { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-theme-dark .nut-comment .nut-comment-shop { - border-top: 1px solid var(--nut-dark-color, var(--nut-white, #fff)); + border-top: 0.025rem solid var(--nut-dark-color, var(--nut-white, #fff)); } .nut-comment { width: 100%; - font-size: 12px; + font-size: 0.3rem; } .nut-comment-header { - margin-bottom: 10px; + margin-bottom: 0.25rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-comment-header__user { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-comment-header__user-avter { - width: 20px; - height: 20px; + width: 0.5rem; + height: 0.5rem; border-radius: 50%; - margin-right: 10px; + margin-right: 0.25rem; overflow: hidden; } .nut-comment-header__user-avter img { - width: 20px; - height: 20px; + width: 0.5rem; + height: 0.5rem; } .nut-comment-header__user-name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - margin-right: 5px; - font-size: 12px; + margin-right: 0.125rem; + font-size: 0.3rem; color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); width: auto; - max-width: 80px; + max-width: 2rem; } .nut-comment-header__user-default { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; } .nut-comment-header__user-default-name { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-bottom: 3px; + margin-bottom: 0.075rem; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 12px; + font-size: 0.3rem; color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); } .nut-comment-header__user-default-name > span { - margin-right: 8px; + margin-right: 0.2rem; } .nut-comment-header__user-complex { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); } .nut-comment-header__user-complex-name { - margin-right: 10px; + margin-right: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 80px; + max-width: 2rem; } -.nut-comment-header__user-complex image { - max-width: 50px; - height: 16px; +.nut-comment-header__user-complex taro-image-core { + max-width: 1.25rem; + height: 0.4rem; } .nut-comment-header__user-score .nut-rate-item { display: block !important; - line-height: 10px; + line-height: 0.25rem; } .nut-comment-header__user-score .nut-rate-item .nut-icon { - line-height: 10px; + line-height: 0.25rem; } .nut-comment-header__time { - width: 100px; + width: 2.5rem; text-align: right; - font-size: 12px; + font-size: 0.3rem; color: var(--nut-comment-header-time-color, rgb(153, 153, 153)); } .nut-comment-header__complex-score { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - margin-bottom: 10px; + margin-bottom: 0.25rem; } .nut-comment-header__complex-score .nut-rate-item { display: block !important; - line-height: 12px; + line-height: 0.3rem; } .nut-comment-header__complex-score .nut-rate-item .nut-icon { - line-height: 12px; + line-height: 0.3rem; } .nut-comment-header__complex-score-i { - margin: 0 8px 0 6px; + margin: 0 0.2rem 0 0.15rem; display: inline-block; - width: 1px; - height: 6px; + width: 0.025rem; + height: 0.15rem; background: var(--nut-text-color, #808080); opacity: 0.4; font-style: inherit; @@ -7321,8 +9117,8 @@ textarea { } .nut-comment-header__labels--item { display: inline-block; - height: 16px; - margin-right: 4px; + height: 0.4rem; + margin-right: 0.1rem; } .nut-comment-header__labels--item:last-child { margin-right: 0; @@ -7335,63 +9131,79 @@ textarea { white-space: pre-wrap; } .nut-comment-images { + display: -webkit-flex; + display: -ms-flexbox; display: flex; - margin: 10px 0 12px; + margin: 0.25rem 0 0.3rem; overflow-x: auto; overflow-y: hidden; } .nut-comment-images__item { position: relative; - width: 80px; - height: 80px; - margin-right: 5px; - border-radius: 6px; + width: 2rem; + height: 2rem; + margin-right: 0.125rem; + border-radius: 0.15rem; overflow: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; } .nut-comment-images__item img { - width: 80px; - height: 80px; + width: 2rem; + height: 2rem; } .nut-comment-images__item--video img { position: absolute; top: 50%; left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .nut-comment-images__mask { position: absolute; top: 0; left: 0; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; width: 100%; - height: 90px; - line-height: 90px; + height: 2.25rem; + line-height: 2.25rem; background: #00000080; - font-size: 12px; + font-size: 0.3rem; color: #fff; } .nut-comment-images--multi { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; flex-wrap: wrap; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; overflow: hidden; width: 100%; - margin: 10px auto 15px; + margin: 0.25rem auto 0.375rem; } .nut-comment-images--multi .nut-comment-images__item { - margin: 8px 8px 0 0; - width: calc(34% - 8px); - height: 90px; + margin: 0.2rem 0.2rem 0 0; + width: calc(34% - 0.2rem); + height: 2.25rem; } .nut-comment-images--multi .nut-comment-images__item img { width: 100%; height: 100%; } .nut-comment-images--multi .nut-comment-images__item .svg-demo { - width: 40px; - height: 40px; + width: 1rem; + height: 1rem; } .nut-comment-images--multi .nut-comment-images__item:nth-child(3n) { margin-right: 0; @@ -7399,25 +9211,27 @@ textarea { .nut-comment-images--multi::after { content: ''; display: block; - width: 105px; + width: 2.625rem; } .nut-comment__follow-title { position: relative; - font-size: 14px; + font-size: 0.35rem; font-weight: 700; color: var(--nut-black, #000); - padding-left: 8px; + padding-left: 0.2rem; } .nut-comment__follow-title svg { position: absolute; left: 0; top: 13%; color: var(--nut-primary-color, #fa2c19); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0.4; } .nut-comment__follow-com { - margin: 8px 0 8px 8px; + margin: 0.2rem 0 0.2rem 0.2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; @@ -7425,84 +9239,111 @@ textarea { word-break: break-all; } .nut-comment__follow-img { - margin: 0 0 8px 8px; + margin: 0 0 0.2rem 0.2rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-comment-bottom { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; color: var(--nut-comment-bottom-label-color, rgb(153, 153, 153)); - margin-right: 5px; + margin-right: 0.125rem; } .nut-comment-bottom__lable { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - margin-right: 10px; + margin-right: 0.25rem; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nut-comment-bottom__cpx { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; color: var(--nut-black, #000); } .nut-comment-bottom__cpx-item { position: relative; - margin-right: 18px; + margin-right: 0.45rem; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-comment-bottom__cpx-item span { color: var(--nut-black, #000); - margin-right: 5px; + margin-right: 0.125rem; } .nut-comment-bottom__cpx-item:last-child { margin-right: 0; } .nut-comment-bottom__cpx-item-popover { position: absolute; - top: 35px; - right: 18px; + top: 0.875rem; + right: 0.45rem; + width: -webkit-max-content; + width: -moz-max-content; width: max-content; background: var(--nut-white, #fff); - padding: 10px; - box-shadow: 0 0 6px var(--nut-disable-color, #cccccc); - border-radius: 5px 0 5px 5px; + padding: 0.25rem; + -webkit-box-shadow: 0 0 0.15rem var(--nut-disable-color, #cccccc); + box-shadow: 0 0 0.15rem var(--nut-disable-color, #cccccc); + border-radius: 0.125rem 0 0.125rem 0.125rem; } .nut-comment-bottom__cpx-item-popover::after { content: ''; position: absolute; - top: -20px; + top: -0.5rem; right: 0; width: 0; height: 0; - border-left: 14px solid transparent; - border-right: 0px solid transparent; - border-top: 10px solid transparent; - border-bottom: 10px solid var(--nut-white, #fff); + border-left: 0.35rem solid transparent; + border-right: 0rem solid transparent; + border-top: 0.25rem solid transparent; + border-bottom: 0.25rem solid var(--nut-white, #fff); } .nut-comment-bottom__cpx-item-popover::before { content: ''; position: absolute; - top: -22px; - right: -1px; + top: -0.55rem; + right: -0.025rem; width: 0; height: 0; - border-left: 14px solid transparent; - border-right: 0px solid transparent; - border-top: 10px solid transparent; - border-bottom: 10px solid rgba(114, 113, 113, 0.1); + border-left: 0.35rem solid transparent; + border-right: 0rem solid transparent; + border-top: 0.25rem solid transparent; + border-bottom: 0.25rem solid rgba(114, 113, 113, 0.1); } .nut-comment-images__play { - width: 40px; - height: 40px; + width: 1rem; + height: 1rem; position: absolute; left: 50%; top: 50%; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #00000080; border-radius: 50%; @@ -7511,17 +9352,17 @@ textarea { display: block; content: ''; position: absolute; - left: 15px; - top: 11px; - border-top: 9px solid transparent; - border-bottom: 9px solid transparent; - border-left: 15px solid #fff; + left: 0.375rem; + top: 0.275rem; + border-top: 0.225rem solid transparent; + border-bottom: 0.225rem solid transparent; + border-left: 0.375rem solid #fff; } .nut-comment .nut-comment-shop { width: 100%; - margin-top: 20px; - padding-top: 10px; - border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 0.5rem; + padding-top: 0.25rem; + border-top: 0.025rem solid rgba(0, 0, 0, 0.1); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; @@ -7535,28 +9376,35 @@ textarea { position: relative; display: inline-block; width: auto; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; - height: var(--nut-button-default-height, 38px); + height: var(--nut-button-default-height, 0.95rem); + -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; - line-height: var(--nut-button-default-line-height, 36px); - font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14px)); + line-height: var(--nut-button-default-line-height, 0.9rem); + font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 0.35rem)); text-align: center; cursor: pointer; + -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; + -ms-touch-action: manipulation; touch-action: manipulation; vertical-align: bottom; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; } .nut-button .nut-button__text { - margin-left: 5px; + margin-left: 0.125rem; } .nut-button::before { position: absolute; @@ -7568,6 +9416,8 @@ textarea { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; @@ -7581,8 +9431,14 @@ textarea { .nut-button__wrap { height: 100%; width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; } .nut-button--loading::before, @@ -7593,7 +9449,7 @@ textarea { color: var(--nut-button-default-color, rgb(102, 102, 102)); background: var(--nut-button-default-bg-color, var(--nut-white, #fff)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid var(--nut-button-default-border-color, rgb(204, 204, 204)); + border: var(--nut-button-border-width, 0.025rem) solid var(--nut-button-default-border-color, rgb(204, 204, 204)); } .nut-button--primary { color: var(--nut-button-primary-color, var(--nut-white, #fff)); @@ -7602,31 +9458,31 @@ textarea { linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) ); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--info { color: var(--nut-button-info-color, var(--nut-white, #fff)); background: var(--nut-button-info-background-color, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--success { color: var(--nut-button-success-color, var(--nut-white, #fff)); background: var(--nut-button-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--danger { color: var(--nut-button-danger-color, var(--nut-white, #fff)); background: var(--nut-button-danger-background-color, rgb(250, 44, 25)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--warning { color: var(--nut-button-warning-color, var(--nut-white, #fff)); background: var(--nut-button-warning-background-color, linear-gradient(135deg, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--plain { background: var(--nut-button-plain-background-color, var(--nut-white, #fff)); @@ -7654,28 +9510,28 @@ textarea { } .nut-button--large { width: 100%; - height: var(--nut-button-large-height, 48px); - line-height: var(--nut-button-large-line-height, 46px); - font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14px))); + height: var(--nut-button-large-height, 1.2rem); + line-height: var(--nut-button-large-line-height, 1.15rem); + font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 0.35rem))); } .nut-button--normal { - padding: var(--nut-button-default-padding, 0 18px); - font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14px)); + padding: var(--nut-button-default-padding, 0 0.45rem); + font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 0.35rem)); } .nut-button--small { - height: var(--nut-button-small-height, 28px); - line-height: var(--nut-button-small-line-height, 26px); - padding: var(--nut-button-small-padding, 0 12px); - font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 12px)); + height: var(--nut-button-small-height, 0.7rem); + line-height: var(--nut-button-small-line-height, 0.65rem); + padding: var(--nut-button-small-padding, 0 0.3rem); + font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 0.3rem)); } .nut-button--small.nut-button--round { - border-radius: var(--nut-button-small-round-border-radius, var(--nut-button-border-radius, 25px)); + border-radius: var(--nut-button-small-round-border-radius, var(--nut-button-border-radius, 0.625rem)); } .nut-button--mini { - height: var(--nut-button-mini-height, 24px); + height: var(--nut-button-mini-height, 0.6rem); line-height: var(--nut-button-mini-line-height, 1.2); - padding: var(--nut-button-mini-padding, 0 12px); - font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 12px)); + padding: var(--nut-button-mini-padding, 0 0.3rem); + font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 0.3rem)); } .nut-button--block { display: block; @@ -7690,7 +9546,7 @@ textarea { opacity: 0.9; } .nut-button--round { - border-radius: var(--nut-button-border-radius, 25px); + border-radius: var(--nut-button-border-radius, 0.625rem); } .nut-button--square { border-radius: 0; @@ -7699,7 +9555,7 @@ textarea { color: var(--nut-button-default-color, rgb(102, 102, 102)); background: var(--nut-button-default-bg-color, var(--nut-white, #fff)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid var(--nut-button-default-border-color, rgb(204, 204, 204)); + border: var(--nut-button-border-width, 0.025rem) solid var(--nut-button-default-border-color, rgb(204, 204, 204)); } .nut-button--primary:not([disabled]):active { color: var(--nut-button-primary-color, var(--nut-white, #fff)); @@ -7708,31 +9564,31 @@ textarea { linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) ); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--info:not([disabled]):active { color: var(--nut-button-info-color, var(--nut-white, #fff)); background: var(--nut-button-info-background-color, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--success:not([disabled]):active { color: var(--nut-button-success-color, var(--nut-white, #fff)); background: var(--nut-button-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--danger:not([disabled]):active { color: var(--nut-button-danger-color, var(--nut-white, #fff)); background: var(--nut-button-danger-background-color, rgb(250, 44, 25)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--warning:not([disabled]):active { color: var(--nut-button-warning-color, var(--nut-white, #fff)); background: var(--nut-button-warning-background-color, linear-gradient(135deg, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%)); background-origin: border-box; - border: var(--nut-button-border-width, 1px) solid transparent; + border: var(--nut-button-border-width, 0.025rem) solid transparent; } .nut-button--plain:not([disabled]):active { background: var(--nut-button-plain-background-color, var(--nut-white, #fff)); @@ -7762,14 +9618,16 @@ textarea { display: inline-block; } .nut-radio-group .nut-radio { - margin-bottom: 5px; + margin-bottom: 0.125rem; } .nut-radio-group--horizontal .nut-radio { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; - margin-right: 10px; + margin-right: 0.25rem; } .nut-radio-group--horizontal .nut-radio--round .nut-radio__label { - margin: 0 6px; + margin: 0 0.15rem; } .nut-theme-dark .nut-radio__label { color: var(--nut-dark-color, var(--nut-white, #fff)); @@ -7783,11 +9641,17 @@ textarea { } .nut-theme-dark .nut-radio__button--disabled { color: var(--nut-radio-label-disable-color, #999); - border: 1px solid var(--nut-radio-label-disable-color, #999); + border: 0.025rem solid var(--nut-radio-label-disable-color, #999); } .nut-radio { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; } @@ -7796,27 +9660,34 @@ textarea { margin-right: 0 !important; } .nut-radio--reverse { + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .nut-radio--reverse .nut-radio__label { - margin-right: var(--nut-radio-label-margin-left, 15px); + margin-right: var(--nut-radio-label-margin-left, 0.375rem); margin-left: 0; } .nut-radio__button { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - padding: var(--nut-radio-button-padding, 5px 18px); - font-size: var(--nut-radio-button-font-size, 12px); + padding: var(--nut-radio-button-padding, 0.125rem 0.45rem); + font-size: var(--nut-radio-button-font-size, 0.3rem); background: #f6f7f9; - border-radius: var(--nut-radio-button-border-radius, 15px); + border-radius: var(--nut-radio-button-border-radius, 0.375rem); color: var(--nut-radio-label-font-color, #1d1e1e); + -webkit-box-sizing: border-box; box-sizing: border-box; - border: 1px solid #f6f7f9; + border: 0.025rem solid #f6f7f9; } .nut-radio__button--active { background: transparent; color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #fa2c19)); - border: 1px solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #fa2c19)); + border: 0.025rem solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #fa2c19)); position: relative; } .nut-radio__button--active::after { @@ -7828,7 +9699,7 @@ textarea { width: 100%; height: 100%; background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #fa2c19)); - border-radius: var(--nut-radio-button-border-radius, 15px); + border-radius: var(--nut-radio-button-border-radius, 0.375rem); opacity: 0.05; content: ''; } @@ -7837,26 +9708,28 @@ textarea { border: none; } .nut-radio__button--large { - height: var(--nut-button-large-height, 48px); - line-height: var(--nut-button-large-line-height, 46px); - font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14px))); + height: var(--nut-button-large-height, 1.2rem); + line-height: var(--nut-button-large-line-height, 1.15rem); + font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 0.35rem))); } .nut-radio__button--small { - height: var(--nut-button-small-height, 28px); - line-height: var(--nut-button-small-line-height, 26px); - padding: var(--nut-button-small-padding, 0 12px); - font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 12px)); + height: var(--nut-button-small-height, 0.7rem); + line-height: var(--nut-button-small-line-height, 0.65rem); + padding: var(--nut-button-small-padding, 0 0.3rem); + font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 0.3rem)); } .nut-radio__button--mini { - height: var(--nut-button-mini-height, 24px); + height: var(--nut-button-mini-height, 0.6rem); line-height: var(--nut-button-mini-line-height, 1.2); - padding: var(--nut-button-mini-padding, 0 12px); - font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 12px)); + padding: var(--nut-button-mini-padding, 0 0.3rem); + font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 0.3rem)); } .nut-radio__label { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - margin-left: var(--nut-radio-label-margin-left, 15px); - font-size: var(--nut-radio-label-font-size, 14px); + margin-left: var(--nut-radio-label-margin-left, 0.375rem); + font-size: var(--nut-radio-label-font-size, 0.35rem); color: var(--nut-radio-label-font-color, #1d1e1e); } .nut-radio__label--disabled { @@ -7864,7 +9737,9 @@ textarea { } .nut-radio__icon { color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #fa2c19)); + -webkit-transition-duration: 0.3s; transition-duration: 0.3s; + -webkit-transition-property: color, border-color, background-color; transition-property: color, border-color, background-color; } .nut-radio__icon--unchecked { @@ -7878,78 +9753,90 @@ textarea { } .nut-cell-group__title { display: inherit; - padding: var(--nut-cell-group-title-padding, 0 10px); + padding: var(--nut-cell-group-title-padding, 0 0.25rem); color: var(--nut-cell-group-title-color, #909ca4); - font-size: var(--nut-cell-group-title-font-size, var(--nut-font-size-2, 14px)); - line-height: var(--nut-cell-group-title-line-height, 20px); - margin-top: 30px; - margin-bottom: 10px; + font-size: var(--nut-cell-group-title-font-size, var(--nut-font-size-2, 0.35rem)); + line-height: var(--nut-cell-group-title-line-height, 0.5rem); + margin-top: 0.75rem; + margin-bottom: 0.25rem; } .nut-cell-group__desc { display: inherit; - padding: var(--nut-cell-group-desc-padding, 0 10px); + padding: var(--nut-cell-group-desc-padding, 0 0.25rem); color: var(--nut-cell-group-desc-color, #909ca4); - font-size: var(--nut-cell-group-desc-font-size, var(--nut-font-size-1, 12px)); - line-height: var(--nut-cell-group-desc-line-height, 16px); - margin-top: 10px; - margin-bottom: 10px; + font-size: var(--nut-cell-group-desc-font-size, var(--nut-font-size-1, 0.3rem)); + line-height: var(--nut-cell-group-desc-line-height, 0.4rem); + margin-top: 0.25rem; + margin-bottom: 0.25rem; } .nut-cell-group__wrap { display: inherit; - border-radius: var(--nut-cell-border-radius, 6px); - box-shadow: var(--nut-cell-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241)); + border-radius: var(--nut-cell-border-radius, 0.15rem); + -webkit-box-shadow: var(--nut-cell-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); + box-shadow: var(--nut-cell-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); overflow: hidden; background-color: var(--nut-cell-group-background-color, var(--nut-white, #fff)); - margin: 10px 0; + margin: 0.25rem 0; } .nut-cell-group__wrap .nut-cell { margin: 0; + -webkit-box-shadow: none; box-shadow: none; border-radius: 0; } .nut-cell-group .nut-cell::after { - border-bottom: var(--nut-cell-after-border-bottom, 1px solid #f5f6f7); + border-bottom: var(--nut-cell-after-border-bottom, 0.025rem solid #f5f6f7); } .nut-theme-dark .nut-cell { background: var(--nut-dark-background2, #1b1b1b); color: var(--nut-dark-color, var(--nut-white, #fff)); + -webkit-box-shadow: none; box-shadow: none; } .nut-cell { position: relative; + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; - line-height: var(--nut-cell-line-height, 20px); - padding: var(--nut-cell-padding, 13px 16px); + line-height: var(--nut-cell-line-height, 0.5rem); + padding: var(--nut-cell-padding, 0.325rem 0.4rem); background: var(--nut-cell-background, var(--nut-white, #fff)); - border-radius: var(--nut-cell-border-radius, 6px); - box-shadow: var(--nut-cell-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241)); - font-size: var(--nut-cell-title-font, var(--nut-font-size-2, 14px)); + border-radius: var(--nut-cell-border-radius, 0.15rem); + -webkit-box-shadow: var(--nut-cell-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); + box-shadow: var(--nut-cell-box-shadow, 0rem 0.025rem 0.175rem 0rem rgb(237, 238, 241)); + font-size: var(--nut-cell-title-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-cell-color, var(--nut-title-color2, #666666)); - margin: 10px 0; + margin: 0.25rem 0; + -webkit-box-sizing: border-box; box-sizing: border-box; } .nut-cell--center { + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-cell--large { - font-size: var(--nut-cell-large-title-font, var(--nut-font-size-large, var(--nut-font-size-3, 16px))); - padding: var(--nut-cell-large-padding, 15px 16px); + font-size: var(--nut-cell-large-title-font, var(--nut-font-size-large, var(--nut-font-size-3, 0.4rem))); + padding: var(--nut-cell-large-padding, 0.375rem 0.4rem); } .nut-cell--large .nut-cell__title-desc { - font-size: var(--nut-cell-large-title-desc-font, var(--nut-font-size-base, var(--nut-font-size-2, 14px))); + font-size: var(--nut-cell-large-title-desc-font, var(--nut-font-size-base, var(--nut-font-size-2, 0.35rem))); } .nut-cell:last-child::after { border: 0 !important; } .nut-cell::after { position: absolute; + -webkit-box-sizing: border-box; box-sizing: border-box; content: ' '; pointer-events: none; - right: var(--nut-cell-after-right, 16px); + right: var(--nut-cell-after-right, 0.4rem); bottom: 0; - left: 16px; + left: 0.4rem; + -webkit-transform: scaleY(0.5); + -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .nut-cell:active::before { @@ -7968,30 +9855,46 @@ textarea { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; } .nut-cell__icon { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; flex-direction: row; - margin: var(--nut-cell-default-icon-margin, 0 4px 0 0px); + margin: var(--nut-cell-default-icon-margin, 0 0.1rem 0 0rem); + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-cell__title { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - min-width: 80px; + min-width: 2rem; } .nut-cell__title-desc { - font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 12px)); + font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 0.3rem)); } .nut-cell__value { display: inline-block; text-align: right; + -webkit-flex: 1; + -ms-flex: 1; flex: 1; - font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14px)); + font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 0.35rem)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); } .nut-cell__value--alone { @@ -7999,34 +9902,50 @@ textarea { } .nut-cell__link { color: #979797; + -webkit-align-self: center; + -ms-flex-item-align: center; align-self: center; } .nut-theme-dark .nut-form-item__body__slots .nut-input-text { color: var(--nut-dark-color, var(--nut-white, #fff)); } .nut-form-item { + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .nut-form-item::before { position: absolute; + -webkit-box-sizing: border-box; box-sizing: border-box; content: ' '; pointer-events: none; - right: 16px; + right: 0.4rem; bottom: 0; - left: 16px; + left: 0.4rem; + -webkit-transform: scaleX(0); + -ms-transform: scaleX(0); transform: scaleX(0); } .nut-form-item.error.line::before { - border-bottom: 1px solid var(--nut-form-item-error-line-color, var(--nut-required-color, #fa2c19)); + border-bottom: 0.025rem solid var(--nut-form-item-error-line-color, var(--nut-required-color, #fa2c19)); + -webkit-transform: scaleX(1); + -ms-transform: scaleX(1); transform: scaleX(1); + -webkit-transition: -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; + transition: -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; + transition: + transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, + -webkit-transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; } .nut-form-item__label { - font-size: var(--nut-form-item-label-font-size, 14px); + font-size: var(--nut-form-item-label-font-size, 0.35rem); font-weight: 400; - width: var(--nut-form-item-label-width, 90px); - margin-right: var(--nut-form-item-label-margin-right, 10px); + width: var(--nut-form-item-label-width, 2.25rem); + margin-right: var(--nut-form-item-label-margin-right, 0.25rem); + -webkit-flex: none !important; + -ms-flex: none !important; flex: none !important; display: inline-block !important; word-wrap: break-word; @@ -8038,7 +9957,7 @@ textarea { .nut-form-item__label.required::before { content: '*'; color: var(--nut-form-item-required-color, var(--nut-required-color, #fa2c19)); - margin-right: var(--nut-form-item-required-margin-right, 4px); + margin-right: var(--nut-form-item-required-margin-right, 0.1rem); } .nut-form-item__label.required.nut-form-item__star-right::before { content: none; @@ -8046,18 +9965,24 @@ textarea { .nut-form-item__label.required.nut-form-item__star-right::after { content: '*'; color: var(--nut-form-item-required-color, var(--nut-required-color, #fa2c19)); - margin-left: var(--nut-form-item-required-margin-right, 4px); + margin-left: var(--nut-form-item-required-margin-right, 0.1rem); } .nut-form-item__body { + -webkit-flex: 1; + -ms-flex: 1; flex: 1; + display: -webkit-flex !important; + display: -ms-flexbox !important; display: flex !important; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-form-item__body__slots { text-align: var(--nut-form-item-body-slots-text-align, left); } .nut-form-item__body__slots .nut-input { - font-size: var(--nut-form-item-body-font-size, 14px); + font-size: var(--nut-form-item-body-font-size, 0.35rem); text-align: var(--nut-form-item-body-input-text-align, left); color: var(--nut-black, #000); width: 100%; @@ -8067,7 +9992,7 @@ textarea { background: transparent; } .nut-form-item__body__slots .nut-range-container { - min-height: 24px; + min-height: 0.6rem; } .nut-form-item__body__slots .nut-textarea { padding: 0 !important; @@ -8077,21 +10002,24 @@ textarea { } .nut-form-item__body__tips { text-align: var(--nut-form-item-tip-text-align, left); - font-size: var(--nut-form-item-tip-font-size, 10px); + font-size: var(--nut-form-item-tip-font-size, 0.25rem); color: var(--nut-form-item-error-message-color, var(--nut-required-color, #fa2c19)); } .nut-form-item__right { --nut-form-item-label-text-align: right; } .nut-form-item__top { + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; } .nut-form-item__top .nut-form-item__label { - padding-bottom: 5px; + padding-bottom: 0.125rem; width: 100%; + -webkit-box-sizing: border-box; box-sizing: border-box; display: block; - padding-right: 24px; + padding-right: 0.6rem; } .nut-theme-dark .nut-invoice .nut-invoice__submit { background: var(--nut-dark-background2, #1b1b1b); @@ -8101,24 +10029,33 @@ textarea { position: relative; } .nut-invoice .nut-cell { + -webkit-align-items: baseline; + -ms-flex-align: baseline; align-items: baseline; } .nut-invoice__submit { position: fixed; bottom: 0; width: 100%; - padding: var(--nut-invoice-padding, 10px 10px 20px); + padding: var(--nut-invoice-padding, 0.25rem 0.25rem 0.5rem); + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; background: #fff; + -webkit-box-sizing: border-box; box-sizing: border-box; bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); } .nut-invoice .nut-radio { display: inline-block; - margin-right: 6px; + margin-right: 0.15rem; margin-bottom: 0; } .nut-avatar-cropper { @@ -8135,8 +10072,14 @@ textarea { background-color: #0000004d; z-index: 1; color: #fff; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-avatar-cropper.taro::after { @@ -8190,14 +10133,22 @@ textarea { } .nut-cropper-popup__toolbar .flex-sb { width: 100%; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; justify-content: space-between; } .nut-cropper-popup__toolbar-item { color: #fff; - padding: 15px; + padding: 0.375rem; cursor: pointer; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; } .nut-cropper-popup__highlight { @@ -8211,20 +10162,23 @@ textarea { } .nut-cropper-popup__highlight .highlight { position: absolute; - width: 365px; - height: 365px; + width: 9.125rem; + height: 9.125rem; left: 50%; top: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; background-color: transparent; - box-shadow: 0 0 1000px 1000px #0009; + -webkit-box-shadow: 0 0 25rem 25rem #0009; + box-shadow: 0 0 25rem 25rem #0009; } .nut-cropper-popup__highlight .highlight__round { border-radius: 50%; } @layer base { - button::after, + taro-button-core::after, wx-button::after { display: none; border: none; @@ -8243,11 +10197,16 @@ abc { @layer components { /*tokens: template-corpus-apply <= src/pages/index/index.vue */ .template-corpus-apply { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; gap: calc(var(--spacing) * 2); border-radius: 0.625rem; --tw-gradient-position: to right in oklab; + background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: #9e58e9; --tw-gradient-to: var(--color-blue-500); @@ -8266,26 +10225,47 @@ abc { } } .weapp-tw-user-ui-card { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; gap: 0.25rem; color: var(--weapp-tw-user-ui-color, #175e75); + -webkit-animation: weappTwUserUiBreathe 1.2s ease-in-out infinite; animation: weappTwUserUiBreathe 1.2s ease-in-out infinite; } .weapp-tw-user-ui-loading { display: inline-block; width: 1rem; height: 1rem; + -webkit-animation: weappTwUserUiRotation 1s linear infinite; animation: weappTwUserUiRotation 1s linear infinite; } +@-webkit-keyframes weappTwUserUiRotation { + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} @keyframes weappTwUserUiRotation { to { + -webkit-transform: rotate(360deg); transform: rotate(360deg); } } +@-webkit-keyframes weappTwUserUiBreathe { + 50% { + opacity: 0.65; + -webkit-transform: scale(0.96); + transform: scale(0.96); + } +} @keyframes weappTwUserUiBreathe { 50% { opacity: 0.65; + -webkit-transform: scale(0.96); transform: scale(0.96); } } @@ -8452,7 +10432,7 @@ page { @property --tw-ring-offset-width { syntax: ''; inherits: false; - initial-value: 0px; + initial-value: 0rem; } @property --tw-ring-offset-color { syntax: '*'; @@ -8475,6 +10455,76 @@ page { } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + ::-webkit-backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + --tw-space-y-reverse: 0; + --tw-border-style: solid; + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0rem; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ease: initial; + --tw-content: ''; + } + ::-ms-backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + --tw-space-y-reverse: 0; + --tw-border-style: solid; + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0rem; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ease: initial; + --tw-content: ''; + } *, ::before, ::after, @@ -8507,7 +10557,7 @@ page { --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; + --tw-ring-offset-width: 0rem; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ease: initial; diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/README.md index 8c7df3da8f..4a119294fe 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/h5 | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 72704 | 377 | true | true | true | true | true | true | true | +| 84878 | 324 | true | true | true | true | true | true | true | ## Generator CSS Files @@ -24,9 +24,9 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/h5 | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `assets/index.1.css` | [artifacts/assets__index.1.css](artifacts/assets__index.1.css) | 41360 | 234 | true | true | true | true | true | true | false | -| `assets/index.2.css` | [artifacts/assets__index.2.css](artifacts/assets__index.2.css) | 14458 | 67 | true | false | true | false | false | true | false | -| `assets/index.3.css` | [artifacts/assets__index.3.css](artifacts/assets__index.3.css) | 2967 | 28 | true | false | false | false | false | true | false | -| `assets/index.4.css` | [artifacts/assets__index.4.css](artifacts/assets__index.4.css) | 2937 | 28 | true | false | false | false | false | true | false | -| `assets/index.5.css` | [artifacts/assets__index.5.css](artifacts/assets__index.5.css) | 1822 | 6 | false | false | false | false | false | false | true | +| `assets/index.1.css` | [artifacts/assets__index.1.css](artifacts/assets__index.1.css) | 45064 | 233 | true | true | true | true | true | true | false | +| `assets/index.2.css` | [artifacts/assets__index.2.css](artifacts/assets__index.2.css) | 15953 | 66 | true | false | false | false | false | true | false | +| `assets/index.3.css` | [artifacts/assets__index.3.css](artifacts/assets__index.3.css) | 6247 | 21 | true | false | false | false | false | true | false | +| `assets/index.4.css` | [artifacts/assets__index.4.css](artifacts/assets__index.4.css) | 6222 | 21 | true | false | false | false | false | true | false | +| `assets/index.5.css` | [artifacts/assets__index.5.css](artifacts/assets__index.5.css) | 2034 | 6 | false | false | false | false | false | false | true | | `assets/uni.css` | [artifacts/assets__uni.css](artifacts/assets__uni.css) | 9160 | 86 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.1.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.1.css index 26c92f7cfb..71767583d0 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.1.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.1.css @@ -1,239 +1,1568 @@ -*{margin:0;-webkit-tap-highlight-color:transparent}html,body{-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;height:100%}body{overflow-x:hidden;font-size:16px}uni-app,uni-page,uni-page-wrapper,uni-page-body{display:block;box-sizing:border-box;width:100%}uni-page-wrapper{position:relative}#app,uni-app,uni-page,uni-page-wrapper{height:100%}.uni-mask{position:fixed;z-index:999;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.5)}.uni-fade-enter-active,.uni-fade-leave-active{transition-duration:.25s;transition-property:opacity;transition-timing-function:ease}.uni-fade-enter-from,.uni-fade-leave-active{opacity:0}.uni-loading,uni-button[loading]::before{background-color:transparent;background-image:url(data:image/svg+xml;base64,\ PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=);background-repeat:no-repeat}.uni-loading{width:20px;height:20px;display:inline-block;vertical-align:middle;animation:uni-loading 1s steps(12,end) infinite;background-size:100%}@keyframes uni-loading{0%{transform:rotate3d(0,0,1,0)}to{transform:rotate3d(0,0,1,360deg)}}html{--primary-color: #007aff;--UI-BG: #fff;--UI-BG-1: #f7f7f7;--UI-BG-2: #fff;--UI-BG-3: #f7f7f7;--UI-BG-4: #4c4c4c;--UI-BG-5: #fff;--UI-FG: #000;--UI-FG-0: rgba(0, 0, 0, .9);--UI-FG-HALF: rgba(0, 0, 0, .9);--UI-FG-1: rgba(0, 0, 0, .5);--UI-FG-2: rgba(0, 0, 0, .3);--UI-FG-3: rgba(0, 0, 0, .1)}uni-page[data-type] uni-page-body{background-color:transparent}body::after{position:fixed;content:"";left:-1000px;top:-1000px;animation:shadow-preload .1s;animation-delay:3s}@keyframes shadow-preload{0%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}to{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}}.uni-async-error{position:absolute;left:0;right:0;top:0;bottom:0;color:#999;padding:100px 10px;text-align:center}.uni-async-loading{box-sizing:border-box;width:100%;padding:50px;text-align:center}.uni-async-loading .uni-loading{width:30px;height:30px}uni-page-head{display:block;box-sizing:border-box}.uni-page-head{position:fixed;left:var(--window-left);right:var(--window-right);height:44px;height:calc(44px + constant(safe-area-inset-top));height:calc(44px + env(safe-area-inset-top));padding:7px 3px;padding-top:calc(7px + constant(safe-area-inset-top));padding-top:calc(7px + env(safe-area-inset-top));display:flex;overflow:hidden;justify-content:space-between;box-sizing:border-box;z-index:998;color:#fff;background-color:#000;transition-property:all}.uni-page-head *{box-sizing:border-box}.uni-page-head .uni-btn-icon{overflow:hidden;min-width:1em;font-style:normal}.uni-page-head-titlePenetrate,.uni-page-head-titlePenetrate .uni-page-head-bd,.uni-page-head-titlePenetrate .uni-page-head-bd *{pointer-events:none}.uni-page-head-titlePenetrate *{pointer-events:auto}.uni-page-head.uni-page-head-transparent .uni-page-head-ft>div{justify-content:center}.uni-page-head~.uni-placeholder{width:100%;height:44px;height:calc(44px + constant(safe-area-inset-top));height:calc(44px + env(safe-area-inset-top))}.uni-placeholder-titlePenetrate{pointer-events:none}.uni-page-head-hd{display:flex;align-items:center;font-size:16px}.uni-page-head-bd{position:absolute;left:70px;right:70px;min-width:0;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}.uni-page-head-btn{position:relative;width:auto;margin:0 2px;word-break:keep-all;white-space:pre;cursor:pointer;font-size:0px}.uni-page-head-transparent .uni-page-head-btn{display:flex;align-items:center;width:32px;height:32px;border-radius:50%;background-color:rgba(0,0,0,.5)}.uni-page-head-btn-red-dot::after{content:attr(badge-text);position:absolute;right:0;top:0;background-color:red;color:#fff;width:18px;height:18px;line-height:18px;border-radius:18px;overflow:hidden;transform:scale(.5) translate(40%,-40%);transform-origin:100% 0}.uni-page-head-btn-red-dot[badge-text]::after{font-size:12px;width:auto;min-width:18px;max-width:42px;text-align:center;padding:0 3px;transform:scale(.7) translate(40%,-40%)}.uni-page-head-btn-select svg{vertical-align:middle;margin-left:2px;transform:rotate(270deg) scale(.8)}.uni-page-head-search{position:relative;display:flex;flex:1;margin:0 2px;line-height:30px;font-size:15px}.uni-page-head-search-input{width:100%;height:100%;padding-left:34px;text-align:left}.uni-page-head-search-input .uni-input-input:disabled{pointer-events:none}.uni-page-head-search-placeholder{position:absolute;max-width:100%;height:100%;padding-left:34px;overflow:hidden;word-break:keep-all;white-space:pre}.uni-page-head-search-placeholder-right{right:0}.uni-page-head-search-placeholder-center{left:50%;transform:translate(-50%)}.uni-page-head-search-icon{position:absolute;top:0;left:2px;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.uni-page-head-ft{display:flex;align-items:center;flex-direction:row-reverse;font-size:13px}.uni-page-head__title{font-weight:700;font-size:16px;line-height:30px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.uni-page-head__title .uni-loading{width:16px;height:16px;margin-top:-3px}.uni-page-head__title .uni-page-head__title_image{width:auto;height:26px;vertical-align:middle}.uni-page-head-shadow{overflow:visible}.uni-page-head-shadow::after{content:"";position:absolute;left:0;right:0;top:100%;height:5px;background-size:100% 100%}uni-page-head[uni-page-head-type=default]~uni-page-wrapper{height:calc(100% - 44px);height:calc(100% - 44px - constant(safe-area-inset-top));height:calc(100% - 44px - env(safe-area-inset-top))}.uni-page-head-shadow-grey::after{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}.uni-page-head-shadow-blue::after{background-image:url(https://cdn.dcloud.net.cn/img/shadow-blue.png)}.uni-page-head-shadow-green::after{background-image:url(https://cdn.dcloud.net.cn/img/shadow-green.png)}.uni-page-head-shadow-orange::after{background-image:url(https://cdn.dcloud.net.cn/img/shadow-orange.png)}.uni-page-head-shadow-red::after{background-image:url(https://cdn.dcloud.net.cn/img/shadow-red.png)}.uni-page-head-shadow-yellow::after{background-image:url(https://cdn.dcloud.net.cn/img/shadow-yellow.png)}/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fmain.css *//*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-300: oklch(80.8% .114 19.571);--color-red-500: oklch(63.7% .237 25.331);--color-green-200: oklch(92.5% .084 155.995);--color-emerald-50: oklch(97.9% .021 166.113);--color-emerald-100: oklch(95% .052 163.051);--color-emerald-200: oklch(90.5% .093 164.15);--color-emerald-500: oklch(69.6% .17 162.48);--color-emerald-600: oklch(59.6% .145 163.225);--color-emerald-700: oklch(50.8% .118 165.612);--color-slate-50: oklch(98.4% .003 247.858);--color-slate-100: oklch(96.8% .007 247.896);--color-slate-200: oklch(92.9% .013 255.508);--color-slate-500: oklch(55.4% .046 257.417);--color-slate-700: oklch(37.2% .044 257.287);--color-slate-800: oklch(27.9% .041 260.031);--color-slate-900: oklch(20.8% .042 265.755);--color-zinc-50: oklch(98.5% 0 none);--color-zinc-900: oklch(21% .006 285.885);--color-zinc-950: oklch(14.1% .005 285.823);--color-white: #fff;--spacing: .25rem;--text-xs: .75rem;--text-xs--line-height: calc(1 / .75);--text-sm: .875rem;--text-sm--line-height: calc(1.25 / .875);--text-base: 1rem;--text-base--line-height: 1.5 ;--text-lg: 1.125rem;--text-lg--line-height: calc(1.75 / 1.125);--text-xl: 1.25rem;--text-xl--line-height: calc(1.75 / 1.25);--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono);--color-neutral-1B: #1b1b1b;--color-neutral-66: #666;--color-midnight: #121063;--color-tahiti: #3ab7bf;--color-bermuda: #78dcca}}@layer base{*,::after,::before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}uni-progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,uni-video,uni-canvas,uni-audio,iframe,embed,object{display:block;vertical-align:middle}img,uni-video{max-width:100%;height:auto}uni-button,uni-input,select,optgroup,uni-textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::-moz-placeholder{color:currentcolor}@supports (color: color-mix(in lab,red,red)){{color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor}@supports (color: color-mix(in lab,red,red)){{color:color-mix(in oklab,currentcolor 50%,transparent)}}}uni-textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}uni-button,uni-input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{ +* { + margin: 0; + -webkit-tap-highlight-color: transparent; +} +html, +body { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + width: 100%; + height: 100%; +} +body { + overflow-x: hidden; + font-size: 16px; +} +uni-app, +uni-page, +uni-page-wrapper, +uni-page-body { + display: block; + box-sizing: border-box; + width: 100%; +} +uni-page-wrapper { + position: relative; +} +#app, +uni-app, +uni-page, +uni-page-wrapper { + height: 100%; +} +.uni-mask { + position: fixed; + z-index: 999; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); +} +.uni-fade-enter-active, +.uni-fade-leave-active { + transition-duration: 0.25s; + transition-property: opacity; + transition-timing-function: ease; +} +.uni-fade-enter-from, +.uni-fade-leave-active { + opacity: 0; +} +.uni-loading, +uni-button[loading]::before { + background-color: transparent; + background-image: url(data:image/svg+xml;base64,\ PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=); + background-repeat: no-repeat; +} +.uni-loading { + width: 20px; + height: 20px; + display: inline-block; + vertical-align: middle; + animation: uni-loading 1s steps(12, end) infinite; + background-size: 100%; +} +@keyframes uni-loading { + 0% { + transform: rotate3d(0, 0, 1, 0); + } + to { + transform: rotate3d(0, 0, 1, 360deg); + } +} +html { + --primary-color: #007aff; + --UI-BG: #fff; + --UI-BG-1: #f7f7f7; + --UI-BG-2: #fff; + --UI-BG-3: #f7f7f7; + --UI-BG-4: #4c4c4c; + --UI-BG-5: #fff; + --UI-FG: #000; + --UI-FG-0: rgba(0, 0, 0, 0.9); + --UI-FG-HALF: rgba(0, 0, 0, 0.9); + --UI-FG-1: rgba(0, 0, 0, 0.5); + --UI-FG-2: rgba(0, 0, 0, 0.3); + --UI-FG-3: rgba(0, 0, 0, 0.1); +} +uni-page[data-type] uni-page-body { + background-color: transparent; +} +body::after { + position: fixed; + content: ''; + left: -1000px; + top: -1000px; + animation: shadow-preload 0.1s; + animation-delay: 3s; +} +@keyframes shadow-preload { + 0% { + background-image: url(https://cdn.dcloud.net.cn/img/shadow-grey.png); + } + to { + background-image: url(https://cdn.dcloud.net.cn/img/shadow-grey.png); + } +} +.uni-async-error { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + color: #999; + padding: 100px 10px; + text-align: center; +} +.uni-async-loading { + box-sizing: border-box; + width: 100%; + padding: 50px; + text-align: center; +} +.uni-async-loading .uni-loading { + width: 30px; + height: 30px; +} +uni-page-head { + display: block; + box-sizing: border-box; +} +.uni-page-head { + position: fixed; + left: var(--window-left); + right: var(--window-right); + height: 44px; + height: calc(44px + constant(safe-area-inset-top)); + height: calc(44px + env(safe-area-inset-top)); + padding: 7px 3px; + padding-top: calc(7px + constant(safe-area-inset-top)); + padding-top: calc(7px + env(safe-area-inset-top)); + display: flex; + overflow: hidden; + justify-content: space-between; + box-sizing: border-box; + z-index: 998; + color: #fff; + background-color: #000; + transition-property: all; +} +.uni-page-head * { + box-sizing: border-box; +} +.uni-page-head .uni-btn-icon { + overflow: hidden; + min-width: 1em; + font-style: normal; +} +.uni-page-head-titlePenetrate, +.uni-page-head-titlePenetrate .uni-page-head-bd, +.uni-page-head-titlePenetrate .uni-page-head-bd * { + pointer-events: none; +} +.uni-page-head-titlePenetrate * { + pointer-events: auto; +} +.uni-page-head.uni-page-head-transparent .uni-page-head-ft > div { + justify-content: center; +} +.uni-page-head ~ .uni-placeholder { + width: 100%; + height: 44px; + height: calc(44px + constant(safe-area-inset-top)); + height: calc(44px + env(safe-area-inset-top)); +} +.uni-placeholder-titlePenetrate { + pointer-events: none; +} +.uni-page-head-hd { + display: flex; + align-items: center; + font-size: 16px; +} +.uni-page-head-bd { + position: absolute; + left: 70px; + right: 70px; + min-width: 0; + -webkit-user-select: auto; + -moz-user-select: auto; + user-select: auto; +} +.uni-page-head-btn { + position: relative; + width: auto; + margin: 0 2px; + word-break: keep-all; + white-space: pre; + cursor: pointer; + font-size: 0px; +} +.uni-page-head-transparent .uni-page-head-btn { + display: flex; + align-items: center; + width: 32px; + height: 32px; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.5); +} +.uni-page-head-btn-red-dot::after { + content: attr(badge-text); + position: absolute; + right: 0; + top: 0; + background-color: red; + color: #fff; + width: 18px; + height: 18px; + line-height: 18px; + border-radius: 18px; + overflow: hidden; + transform: scale(0.5) translate(40%, -40%); + transform-origin: 100% 0; +} +.uni-page-head-btn-red-dot[badge-text]::after { + font-size: 12px; + width: auto; + min-width: 18px; + max-width: 42px; + text-align: center; + padding: 0 3px; + transform: scale(0.7) translate(40%, -40%); +} +.uni-page-head-btn-select svg { + vertical-align: middle; + margin-left: 2px; + transform: rotate(270deg) scale(0.8); +} +.uni-page-head-search { + position: relative; + display: flex; + flex: 1; + margin: 0 2px; + line-height: 30px; + font-size: 15px; +} +.uni-page-head-search-input { + width: 100%; + height: 100%; + padding-left: 34px; + text-align: left; +} +.uni-page-head-search-input .uni-input-input:disabled { + pointer-events: none; +} +.uni-page-head-search-placeholder { + position: absolute; + max-width: 100%; + height: 100%; + padding-left: 34px; + overflow: hidden; + word-break: keep-all; + white-space: pre; +} +.uni-page-head-search-placeholder-right { + right: 0; +} +.uni-page-head-search-placeholder-center { + left: 50%; + transform: translate(-50%); +} +.uni-page-head-search-icon { + position: absolute; + top: 0; + left: 2px; + width: 30px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; +} +.uni-page-head-ft { + display: flex; + align-items: center; + flex-direction: row-reverse; + font-size: 13px; +} +.uni-page-head__title { + font-weight: 700; + font-size: 16px; + line-height: 30px; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.uni-page-head__title .uni-loading { + width: 16px; + height: 16px; + margin-top: -3px; +} +.uni-page-head__title .uni-page-head__title_image { + width: auto; + height: 26px; + vertical-align: middle; +} +.uni-page-head-shadow { + overflow: visible; +} +.uni-page-head-shadow::after { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 100%; + height: 5px; + background-size: 100% 100%; +} +uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper { + height: calc(100% - 44px); + height: calc(100% - 44px - constant(safe-area-inset-top)); + height: calc(100% - 44px - env(safe-area-inset-top)); +} +.uni-page-head-shadow-grey::after { + background-image: url(https://cdn.dcloud.net.cn/img/shadow-grey.png); +} +.uni-page-head-shadow-blue::after { + background-image: url(https://cdn.dcloud.net.cn/img/shadow-blue.png); +} +.uni-page-head-shadow-green::after { + background-image: url(https://cdn.dcloud.net.cn/img/shadow-green.png); +} +.uni-page-head-shadow-orange::after { + background-image: url(https://cdn.dcloud.net.cn/img/shadow-orange.png); +} +.uni-page-head-shadow-red::after { + background-image: url(https://cdn.dcloud.net.cn/img/shadow-red.png); +} +.uni-page-head-shadow-yellow::after { + background-image: url(https://cdn.dcloud.net.cn/img/shadow-yellow.png); +} /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +@layer properties; +@layer theme, base, components, utilities; +@layer theme { + :root, + :host { + --font-sans: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --color-red-300: oklch(80.8% 0.114 19.571); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-green-200: oklch(92.5% 0.084 155.995); + --color-emerald-50: oklch(97.9% 0.021 166.113); + --color-emerald-100: oklch(95% 0.052 163.051); + --color-emerald-200: oklch(90.5% 0.093 164.15); + --color-emerald-500: oklch(69.6% 0.17 162.48); + --color-emerald-600: oklch(59.6% 0.145 163.225); + --color-emerald-700: oklch(50.8% 0.118 165.612); + --color-slate-50: oklch(98.4% 0.003 247.858); + --color-slate-100: oklch(96.8% 0.007 247.896); + --color-slate-200: oklch(92.9% 0.013 255.508); + --color-slate-500: oklch(55.4% 0.046 257.417); + --color-slate-700: oklch(37.2% 0.044 257.287); + --color-slate-800: oklch(27.9% 0.041 260.031); + --color-slate-900: oklch(20.8% 0.042 265.755); + --color-zinc-50: oklch(98.5% 0 none); + --color-zinc-900: oklch(21% 0.006 285.885); + --color-zinc-950: oklch(14.1% 0.005 285.823); + --color-white: #fff; + --spacing: 0.25rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + --color-neutral-1B: #1b1b1b; + --color-neutral-66: #666; + --color-midnight: #121063; + --color-tahiti: #3ab7bf; + --color-bermuda: #78dcca; + } +} +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, + :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, + strong { + font-weight: bolder; + } + code, + kbd, + samp, + pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring:where(:not(iframe)) { + outline: auto; + } + uni-progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, + ul, + menu { + list-style: none; + } + img, + svg, + uni-video, + uni-canvas, + uni-audio, + iframe, + embed, + object { + display: block; + vertical-align: middle; + } + img, + uni-video { + max-width: 100%; + height: auto; + } + uni-button, + uni-input, + select, + optgroup, + uni-textarea, + ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::-moz-placeholder { + opacity: 1; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::-moz-placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + } + uni-textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, + ::-webkit-datetime-edit-year-field, + ::-webkit-datetime-edit-month-field, + ::-webkit-datetime-edit-day-field, + ::-webkit-datetime-edit-hour-field, + ::-webkit-datetime-edit-minute-field, + ::-webkit-datetime-edit-second-field, + ::-webkit-datetime-edit-millisecond-field, + ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + uni-button, + uni-input:where([type='button'], [type='reset'], [type='submit']), + ::file-selector-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + } + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden='until-found'])) { + display: none !important; + } +} +@layer utilities { /*tokens: m-3 <= src/pages/index/index.vue */ -.m-3{margin:calc(var(--spacing) * 3)} + .m-3 { + margin: calc(var(--spacing) * 3); + } /*tokens: mt-1 <= src/pages/index/index.vue */ -.mt-1{margin-top:var(--spacing)} - /*tokens: mt-2 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.mt-2{margin-top:calc(var(--spacing) * 2)} + .mt-1 { + margin-top: var(--spacing); + } + /*tokens: mt-2 <= src/pages/index/index.vue */ + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } /*tokens: mt-3 <= src/pages/index/index.vue */ -.mt-3{margin-top:calc(var(--spacing) * 3)} - /*tokens: mt-4 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.mt-4{margin-top:calc(var(--spacing) * 4)} - /*tokens: mt-6 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.mt-6{margin-top:calc(var(--spacing) * 6)} - /*tokens: mt-8 <= src/pages-order/pages/user/user.vue */ -.mt-8{margin-top:calc(var(--spacing) * 8)} + .mt-3 { + margin-top: calc(var(--spacing) * 3); + } + /*tokens: mt-4 <= src/pages/index/index.vue */ + .mt-4 { + margin-top: calc(var(--spacing) * 4); + } + /*tokens: mt-6 <= src/pages/index/index.vue */ + .mt-6 { + margin-top: calc(var(--spacing) * 6); + } + .mt-8 { + margin-top: calc(var(--spacing) * 8); + } /*tokens: ml-2 <= src/pages/index/index.vue */ -.ml-2{margin-left:calc(var(--spacing) * 2)}.i-\[mdi--github-circle\]{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'/%3E%3C/svg%3E")}.i-\[mdi--home\]{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z'/%3E%3C/svg%3E")}.i-\[mdi--star\]{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z'/%3E%3C/svg%3E")}.i-\[svg-spinners--180-ring-with-bg\]{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25'/%3E%3Cpath fill='black' d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E")} - /*tokens: block <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.block{display:block} - /*tokens: flex <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.flex{display:flex}.aspect-\(--my-aspect-ratio\){aspect-ratio:var(--my-aspect-ratio)}.aspect-\[calc\(4\*3\+1\)\/3\]{aspect-ratio:13 /3} - /*tokens: h-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.h-12{height:calc(var(--spacing) * 12)} + .ml-2 { + margin-left: calc(var(--spacing) * 2); + } + .i-\[mdi--github-circle\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'/%3E%3C/svg%3E"); + } + .i-\[mdi--home\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z'/%3E%3C/svg%3E"); + } + .i-\[mdi--star\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z'/%3E%3C/svg%3E"); + } + .i-\[svg-spinners--180-ring-with-bg\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25'/%3E%3Cpath fill='black' d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E"); + } + /*tokens: block <= src/pages/index/index.vue */ + .block { + display: block; + } + /*tokens: flex <= src/components/HelloWorld.vue, src/pages/index/index.vue */ + .flex { + display: flex; + } + .aspect-\(--my-aspect-ratio\) { + aspect-ratio: var(--my-aspect-ratio); + } + .aspect-\[calc\(4\*3\+1\)\/3\] { + aspect-ratio: calc(4 * 3 + 1) / 3; + } + /*tokens: h-12 <= src/pages/index/index.vue */ + .h-12 { + height: calc(var(--spacing) * 12); + } /*tokens: h-16 <= src/pages/index/index.vue */ -.h-16{height:calc(var(--spacing) * 16)} + .h-16 { + height: calc(var(--spacing) * 16); + } /*tokens: h-20 <= src/pages/index/index.vue */ -.h-20{height:calc(var(--spacing) * 20)}.h-\[45px\]{height:45px} - /*tokens: min-h-screen <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ -.min-h-screen{min-height:100vh} - /*tokens: w-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.w-12{width:calc(var(--spacing) * 12)} + .h-20 { + height: calc(var(--spacing) * 20); + } + .h-\[45px\] { + height: 45px; + } + .min-h-screen { + min-height: 100vh; + } + /*tokens: w-12 <= src/pages/index/index.vue */ + .w-12 { + width: calc(var(--spacing) * 12); + } /*tokens: w-20 <= src/pages/index/index.vue */ -.w-20{width:calc(var(--spacing) * 20)} + .w-20 { + width: calc(var(--spacing) * 20); + } /*tokens: w-32 <= src/pages/index/index.vue */ -.w-32{width:calc(var(--spacing) * 32)}.w-\[323px\]{width:323px} - /*tokens: flex-1 <= src/pages-order/pages/user/user.vue */ -.flex-1{flex:1} - /*tokens: flex-col <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.flex-col{flex-direction:column} + .w-32 { + width: calc(var(--spacing) * 32); + } + .w-\[323px\] { + width: 323px; + } + .flex-1 { + flex: 1; + } + /*tokens: flex-col <= src/pages/index/index.vue */ + .flex-col { + flex-direction: column; + } /*tokens: flex-col-reverse <= src/pages/index/index.vue */ -.flex-col-reverse{flex-direction:column-reverse} + .flex-col-reverse { + flex-direction: column-reverse; + } /*tokens: flex-row-reverse <= src/pages/index/index.vue */ -.flex-row-reverse{flex-direction:row-reverse} - /*tokens: items-center <= src/components/HelloWorld.vue, src/main.css, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.items-center{align-items:center} + .flex-row-reverse { + flex-direction: row-reverse; + } + /*tokens: items-center <= src/components/HelloWorld.vue, src/pages/index/index.vue */ + .items-center { + align-items: center; + } /*tokens: justify-between <= src/pages/index/index.vue */ -.justify-between{justify-content:space-between} - /*tokens: justify-center <= src/pages-order/pages/user/user.vue */ -.justify-center{justify-content:center} - /*tokens: gap-1 <= src/pages-order/pages/user/user.vue */ -.gap-1{gap:var(--spacing)} - /*tokens: gap-2 <= src/components/HelloWorld.vue, src/main.css, src/pages/index/index.vue */ -.gap-2{gap:calc(var(--spacing) * 2)} - /*tokens: gap-3 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.gap-3{gap:calc(var(--spacing) * 3)} + .justify-between { + justify-content: space-between; + } + .justify-center { + justify-content: center; + } + .gap-1 { + gap: var(--spacing); + } + /*tokens: gap-2 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ + .gap-2 { + gap: calc(var(--spacing) * 2); + } + /*tokens: gap-3 <= src/pages/index/index.vue */ + .gap-3 { + gap: calc(var(--spacing) * 3); + } /*tokens: space-y-2 <= src/pages/index/index.vue */ -:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * (1 - var(--tw-space-y-reverse)))} + :where(.space-y-2 > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 2) * (1 - var(--tw-space-y-reverse))); + } /*tokens: space-y-4 <= src/pages/index/index.vue */ -:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * (1 - var(--tw-space-y-reverse)))} + :where(.space-y-4 > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 4) * (1 - var(--tw-space-y-reverse))); + } /*tokens: space-y-reverse <= src/pages/index/index.vue */ -:where(.space-y-reverse>:not(:last-child)){--tw-space-y-reverse: 1} + :where(.space-y-reverse > :not(:last-child)) { + --tw-space-y-reverse: 1; + } /*tokens: space-x-4 <= src/pages/index/index.vue */ -:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse: 0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * (1 - var(--tw-space-x-reverse)))} + :where(.space-x-4 > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 4) * (1 - var(--tw-space-x-reverse))); + } /*tokens: space-x-reverse <= src/pages/index/index.vue */ -:where(.space-x-reverse>:not(:last-child)){--tw-space-x-reverse: 1} + :where(.space-x-reverse > :not(:last-child)) { + --tw-space-x-reverse: 1; + } /*tokens: divide-x-4 <= src/pages/index/index.vue */ -:where(.divide-x-4>:not(:last-child)){--tw-divide-x-reverse: 0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(4px * var(--tw-divide-x-reverse));border-inline-end-width:calc(4px * (1 - var(--tw-divide-x-reverse)))} + :where(.divide-x-4 > :not(:last-child)) { + --tw-divide-x-reverse: 0; + border-inline-style: var(--tw-border-style); + border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); + border-inline-end-width: calc(4px * (1 - var(--tw-divide-x-reverse))); + } /*tokens: divide-y-4 <= src/pages/index/index.vue */ -:where(.divide-y-4>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(4px * var(--tw-divide-y-reverse));border-bottom-width:calc(4px * (1 - var(--tw-divide-y-reverse)))} + :where(.divide-y-4 > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(4px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(4px * (1 - var(--tw-divide-y-reverse))); + } /*tokens: divide-y-reverse <= src/pages/index/index.vue */ -:where(.divide-y-reverse>:not(:last-child)){--tw-divide-y-reverse: 1} + :where(.divide-y-reverse > :not(:last-child)) { + --tw-divide-y-reverse: 1; + } /*tokens: divide-dotted <= src/pages/index/index.vue */ -:where(.divide-dotted>:not(:last-child)){--tw-border-style: dotted;border-style:dotted} + :where(.divide-dotted > :not(:last-child)) { + --tw-border-style: dotted; + border-style: dotted; + } /*tokens: divide-double <= src/pages/index/index.vue */ -:where(.divide-double>:not(:last-child)){--tw-border-style: double;border-style:double}:where(.divide-\[\#41eb04\]>:not(:last-child)){border-color:#41eb04}:where(.divide-\[\#d80c0c\]>:not(:last-child)){border-color:#d80c0c} + :where(.divide-double > :not(:last-child)) { + --tw-border-style: double; + border-style: double; + } + :where(.divide-\[\#41eb04\] > :not(:last-child)) { + border-color: #41eb04; + } + :where(.divide-\[\#d80c0c\] > :not(:last-child)) { + border-color: #d80c0c; + } /*tokens: rounded <= src/pages/index/index.vue */ -.rounded{border-radius:.25rem}.rounded-\[20rpx\]{border-radius:.625rem}.rounded-\[28rpx\]{border-radius:.875rem} + .rounded { + border-radius: 0.25rem; + } + .rounded-\[20rpx\] { + border-radius: 0.625rem; + } + .rounded-\[28rpx\] { + border-radius: 0.875rem; + } /*tokens: rounded-full <= src/pages/index/index.vue */ -.rounded-full{border-radius:calc(infinity * 1px)} - /*tokens: rounded-xl <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.rounded-xl{border-radius:.5rem} - /*tokens: border <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.border{border-style:var(--tw-border-style);border-width:1px} + .rounded-full { + border-radius: calc(infinity * 1px); + } + /*tokens: rounded-xl <= src/pages/index/index.vue */ + .rounded-xl { + border-radius: 0.5rem; + } + /*tokens: border <= src/pages/index/index.vue */ + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } /*tokens: border-t <= src/pages/index/index.vue */ -.border-t{border-top-style:var(--tw-border-style);border-top-width:1px} + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + } /*tokens: border-emerald-200 <= src/pages/index/index.vue */ -.border-emerald-200{border-color:var(--color-emerald-200)} - /*tokens: border-emerald-500 <= src/pages-order/pages/user/user.vue */ -.border-emerald-500{border-color:var(--color-emerald-500)} - /*tokens: border-slate-200 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.border-slate-200{border-color:var(--color-slate-200)} + .border-emerald-200 { + border-color: var(--color-emerald-200); + } +.border-emerald-500 { + border-color: var(--color-emerald-500); + } + /*tokens: border-slate-200 <= src/pages/index/index.vue */ + .border-slate-200 { + border-color: var(--color-slate-200); + } /*tokens: border-slate-200/80 <= src/pages/index/index.vue */ -.border-slate-200\/80{border-color:color-mix(in srgb,oklch(92.9% .013 255.508) 80%,transparent)}@supports (color: color-mix(in lab,red,red)){ - /*tokens: border-slate-200/80 <= src/pages/index/index.vue */ -.border-slate-200\/80{border-color:color-mix(in oklab,var(--color-slate-200) 80%,transparent)}}.\!bg-\[gray\]{background-color:gray!important}.bg-\[\#0000ff\]{background-color:#00f}.bg-\[\#68c828\]{background-color:#68c828}.bg-\[\#0977ee\]{background-color:#0977ee}.bg-\[\#123498\]{background-color:#123498}.bg-\[\#f8fafc\]{background-color:#f8fafc} + .border-slate-200\/80 { + border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-slate-200) 80%, transparent); + } + } + .\!bg-\[gray\] { + background-color: gray !important; + } + .bg-\[\#0000ff\] { + background-color: #0000ff; + } + .bg-\[\#68c828\] { + background-color: #68c828; + } + .bg-\[\#0977ee\] { + background-color: #0977ee; + } + .bg-\[\#123498\] { + background-color: #123498; + } + .bg-\[\#f8fafc\] { + background-color: #f8fafc; + } /*tokens: bg-emerald-50 <= src/pages/index/index.vue */ -.bg-emerald-50{background-color:var(--color-emerald-50)} - /*tokens: bg-emerald-100 <= src/pages-order/pages/user/user.vue */ -.bg-emerald-100{background-color:var(--color-emerald-100)} - /*tokens: bg-emerald-500 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.bg-emerald-500{background-color:var(--color-emerald-500)} + .bg-emerald-50 { + background-color: var(--color-emerald-50); + } + .bg-emerald-100 { + background-color: var(--color-emerald-100); + } + /*tokens: bg-emerald-500 <= src/pages/index/index.vue */ + .bg-emerald-500 { + background-color: var(--color-emerald-500); + } /*tokens: bg-emerald-600 <= src/pages/index/index.vue */ -.bg-emerald-600{background-color:var(--color-emerald-600)} - /*tokens: bg-green-200/70 <= src/pages/index/index.vue */ -.bg-green-200\/70{background-color:color-mix(in srgb,oklch(92.5% .084 155.995) 70%,transparent)}@supports (color: color-mix(in lab,red,red)){ + .bg-emerald-600 { + background-color: var(--color-emerald-600); + } /*tokens: bg-green-200/70 <= src/pages/index/index.vue */ -.bg-green-200\/70{background-color:color-mix(in oklab,var(--color-green-200) 70%,transparent)}} + .bg-green-200\/70 { + background-color: color-mix(in srgb, oklch(92.5% 0.084 155.995) 70%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-green-200) 70%, transparent); + } + } /*tokens: bg-midnight <= src/pages/index/index.vue */ -.bg-midnight{background-color:var(--color-midnight)} + .bg-midnight { + background-color: var(--color-midnight); + } /*tokens: bg-neutral-1B <= src/pages/index/index.vue */ -.bg-neutral-1B{background-color:var(--color-neutral-1B)} + .bg-neutral-1B { + background-color: var(--color-neutral-1B); + } /*tokens: bg-red-300 <= src/pages/index/index.vue */ -.bg-red-300{background-color:var(--color-red-300)} - /*tokens: bg-slate-50 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ -.bg-slate-50{background-color:var(--color-slate-50)} + .bg-red-300 { + background-color: var(--color-red-300); + } + .bg-slate-50 { + background-color: var(--color-slate-50); + } /*tokens: bg-slate-900 <= src/pages/index/index.vue */ -.bg-slate-900{background-color:var(--color-slate-900)} - /*tokens: bg-white <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.bg-white{background-color:var(--color-white)} - /*tokens: bg-white/70 <= src/pages/index/index.vue */ -.bg-white\/70{background-color:color-mix(in srgb,#fff 70%,transparent)}@supports (color: color-mix(in lab,red,red)){ + .bg-slate-900 { + background-color: var(--color-slate-900); + } + /*tokens: bg-white <= src/pages/index/index.vue */ + .bg-white { + background-color: var(--color-white); + } /*tokens: bg-white/70 <= src/pages/index/index.vue */ -.bg-white\/70{background-color:color-mix(in oklab,var(--color-white) 70%,transparent)}} + .bg-white\/70 { + background-color: color-mix(in srgb, #fff 70%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 70%, transparent); + } + } /*tokens: bg-gradient-to-br <= src/pages/index/index.vue */ -.bg-gradient-to-br{--tw-gradient-position: to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[radial-gradient\(circle_at_18\%_20\%\,\#e0f2fe\,\#fdf4ff_70\%\)\]{background-image:radial-gradient(circle at 18% 20%,#e0f2fe,#fdf4ff 70%)} + .bg-gradient-to-br { + --tw-gradient-position: to bottom right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + } + .bg-\[radial-gradient\(circle_at_18\%_20\%\,\#e0f2fe\,\#fdf4ff_70\%\)\] { + background-image: radial-gradient(circle at 18% 20%, #e0f2fe, #fdf4ff 70%); + } /*tokens: from-slate-900/95 <= src/pages/index/index.vue */ -.from-slate-900\/95{--tw-gradient-from: color-mix(in srgb, oklch(20.8% .042 265.755) 95%, transparent);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}@supports (color: color-mix(in lab,red,red)){ - /*tokens: from-slate-900/95 <= src/pages/index/index.vue */ -.from-slate-900\/95{--tw-gradient-from: color-mix(in oklab, var(--color-slate-900) 95%, transparent)}} - /*tokens: to-slate-700/95 <= src/pages/index/index.vue */ -.to-slate-700\/95{--tw-gradient-to: color-mix(in srgb, oklch(37.2% .044 257.287) 95%, transparent);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}@supports (color: color-mix(in lab,red,red)){ + .from-slate-900\/95 { + --tw-gradient-from: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-from: color-mix(in oklab, var(--color-slate-900) 95%, transparent); + } + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); + } /*tokens: to-slate-700/95 <= src/pages/index/index.vue */ -.to-slate-700\/95{--tw-gradient-to: color-mix(in oklab, var(--color-slate-700) 95%, transparent)}} + .to-slate-700\/95 { + --tw-gradient-to: color-mix(in srgb, oklch(37.2% 0.044 257.287) 95%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-to: color-mix(in oklab, var(--color-slate-700) 95%, transparent); + } + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); + } /*tokens: fill-bermuda <= src/pages/index/index.vue */ -.fill-bermuda{fill:var(--color-bermuda)} + .fill-bermuda { + fill: var(--color-bermuda); + } /*tokens: p-2 <= src/pages/index/index.vue */ -.p-2{padding:calc(var(--spacing) * 2)} + .p-2 { + padding: calc(var(--spacing) * 2); + } /*tokens: p-4 <= src/pages/index/index.vue */ -.p-4{padding:calc(var(--spacing) * 4)} - /*tokens: p-5 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ -.p-5{padding:calc(var(--spacing) * 5)} + .p-4 { + padding: calc(var(--spacing) * 4); + } + .p-5 { + padding: calc(var(--spacing) * 5); + } /*tokens: px-3 <= src/pages/index/index.vue */ -.px-3{padding-inline:calc(var(--spacing) * 3)} - /*tokens: px-4 <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.px-4{padding-inline:calc(var(--spacing) * 4)}.px-\[29rpx\]{padding-inline:.90625rem}.px-\[48px\]{padding-inline:48px} + .px-3 { + padding-inline: calc(var(--spacing) * 3); + } + /*tokens: px-4 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + .px-\[29rpx\] { + padding-inline: 0.90625rem; + } + .px-\[48px\] { + padding-inline: 48px; + } /*tokens: py-1 <= src/pages/index/index.vue */ -.py-1{padding-block:var(--spacing)} - /*tokens: py-2 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.py-2{padding-block:calc(var(--spacing) * 2)} + .py-1 { + padding-block: var(--spacing); + } + /*tokens: py-2 <= src/pages/index/index.vue */ + .py-2 { + padding-block: calc(var(--spacing) * 2); + } /*tokens: py-3 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ -.py-3{padding-block:calc(var(--spacing) * 3)} - /*tokens: py-6 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ -.py-6{padding-block:calc(var(--spacing) * 6)}.py-\[24rpx\]{padding-block:.75rem} + .py-3 { + padding-block: calc(var(--spacing) * 3); + } + .py-6 { + padding-block: calc(var(--spacing) * 6); + } + .py-\[24rpx\] { + padding-block: 0.75rem; + } /*tokens: pt-2 <= src/pages/index/index.vue */ -.pt-2{padding-top:calc(var(--spacing) * 2)} - /*tokens: text-center <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.text-center{text-align:center} - /*tokens: text-base <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))} - /*tokens: text-lg <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ -.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))} - /*tokens: text-sm <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))} - /*tokens: text-xl <= src/pages-order/pages/user/user.vue */ -.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))} - /*tokens: text-xs <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-\[100rpx\]{font-size:3.125rem} -.text-\[102\.43rpx\]{font-size:3.20094rem} -.text-\[24rpx\]{font-size:.75rem} -.text-\[26rpx\]{font-size:.8125rem} -.text-\[31rpx\]{font-size:.96875rem} -.text-\[45rpx\]{font-size:1.40625rem} -.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))} + .pt-2 { + padding-top: calc(var(--spacing) * 2); + } + /*tokens: text-center <= src/pages/index/index.vue */ + .text-center { + text-align: center; + } + /*tokens: text-base <= src/pages/index/index.vue */ + .text-base { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + } +.text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + /*tokens: text-sm <= src/pages/index/index.vue */ + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } +.text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + /*tokens: text-xs <= src/pages/index/index.vue */ + .text-\[100rpx\] { + font-size: 3.125rem; + } +.text-\[102\.43rpx\] { + font-size: 3.20094rem; + } +.text-\[24rpx\] { + font-size: 0.75rem; + } +.text-\[26rpx\] { + font-size: 0.8125rem; + } +.text-\[31rpx\] { + font-size: 0.96875rem; + } +.text-\[45rpx\] { + font-size: 1.40625rem; + } +.text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } /*tokens: leading-5 <= src/pages/index/index.vue */ -.leading-5{--tw-leading: calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)} - /*tokens: leading-6 <= src/pages-order/pages/user/user.vue */ -.leading-6{--tw-leading: calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)} - /*tokens: font-bold <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)} - /*tokens: font-medium <= src/pages-order/pages/user/user.vue */ -.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)} - /*tokens: font-semibold <= src/main.css, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)} + .leading-5 { + --tw-leading: calc(var(--spacing) * 5); + line-height: calc(var(--spacing) * 5); + } +.leading-6 { + --tw-leading: calc(var(--spacing) * 6); + line-height: calc(var(--spacing) * 6); + } + /*tokens: font-bold <= src/pages/index/index.vue */ + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } +.font-medium { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } + /*tokens: font-semibold <= src/pages/index/index.vue */ + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } /*tokens: break-all <= src/pages/index/index.vue */ -.break-all{word-break:break-all}.text-\[\#00f285\]{color:#00f285} -.text-\[\#123456\]{color:#123456} -.text-\[\#929292\]{color:#929292} - /*tokens: text-emerald-600 <= src/pages-order/pages/user/user.vue */ -.text-emerald-600{color:var(--color-emerald-600)} + .break-all { + word-break: break-all; + } + .text-\[\#00f285\] { + color: #00f285; + } +.text-\[\#123456\] { + color: #123456; + } +.text-\[\#929292\] { + color: #929292; + } +.text-emerald-600 { + color: var(--color-emerald-600); + } /*tokens: text-emerald-700 <= src/pages/index/index.vue */ -.text-emerald-700{color:var(--color-emerald-700)} + .text-emerald-700 { + color: var(--color-emerald-700); + } /*tokens: text-neutral-66 <= src/pages/index/index.vue */ -.text-neutral-66{color:var(--color-neutral-66)} - /*tokens: text-slate-500 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-slate-500{color:var(--color-slate-500)} + .text-neutral-66 { + color: var(--color-neutral-66); + } + /*tokens: text-slate-500 <= src/pages/index/index.vue */ + .text-slate-500 { + color: var(--color-slate-500); + } /*tokens: text-slate-700 <= src/components/HelloWorld.vue, src/pages/index/index.vue */ -.text-slate-700{color:var(--color-slate-700)} - /*tokens: text-slate-800 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-slate-800{color:var(--color-slate-800)} - /*tokens: text-slate-900 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-slate-900{color:var(--color-slate-900)} + .text-slate-700 { + color: var(--color-slate-700); + } + /*tokens: text-slate-800 <= src/pages/index/index.vue */ + .text-slate-800 { + color: var(--color-slate-800); + } + /*tokens: text-slate-900 <= src/pages/index/index.vue */ + .text-slate-900 { + color: var(--color-slate-900); + } /*tokens: text-tahiti <= src/pages/index/index.vue */ -.text-tahiti{color:var(--color-tahiti)} - /*tokens: text-white <= src/main.css, src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.text-white{color:var(--color-white)} + .text-tahiti { + color: var(--color-tahiti); + } + /*tokens: text-white <= src/pages/index/index.vue */ + .text-white { + color: var(--color-white); + } /*tokens: underline <= src/pages/index/index.vue */ -.underline{text-decoration-line:underline} - /*tokens: shadow <= src/pages-order/pages/home/home.vue | shadow-sm <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.shadow,.shadow-sm{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)} + .underline { + text-decoration-line: underline; + } + .shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + /*tokens: shadow-sm <= src/pages/index/index.vue */ + .shadow-sm { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } /*tokens: shadow-xl <= src/pages/index/index.vue */ -.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)} + .shadow-xl { + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } /*tokens: divide-x-reverse <= src/pages/index/index.vue */ -:where(.divide-x-reverse>:not(:last-child)){--tw-divide-x-reverse: 1}.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before{--tw-content: "现在，让我们开始神奇的 tailwindcss 开发之旅吧！";content:var(--tw-content)}.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]::before{--tw-content: "现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！";content:var(--tw-content)}.after\:\!content-\[\'good_work\!\'\]::after{content:var(--tw-content);--tw-content: "good work!" !important;content:var(--tw-content)!important} - /*tokens: active:bg-emerald-50 <= src/pages-order/pages/user/user.vue */ -.active\:bg-emerald-50:active{background-color:var(--color-emerald-50)} - /*tokens: active:bg-emerald-600 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.active\:bg-emerald-600:active{background-color:var(--color-emerald-600)} + :where(.divide-x-reverse > :not(:last-child)) { + --tw-divide-x-reverse: 1; + } + .before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { + --tw-content: '现在，让我们开始神奇的 tailwindcss 开发之旅吧！'; + content: var(--tw-content); + } + .before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]::before { + --tw-content: '现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！'; + content: var(--tw-content); + } + .after\:\!content-\[\'good_work\!\'\]::after { + content: var(--tw-content); + --tw-content: 'good work!' !important; + content: var(--tw-content) !important; + } + .active\:bg-emerald-50:active { + background-color: var(--color-emerald-50); + } + /*tokens: active:bg-emerald-600 <= src/pages/index/index.vue */ + .active\:bg-emerald-600:active { + background-color: var(--color-emerald-600); + } /*tokens: active:bg-emerald-700 <= src/pages/index/index.vue */ -.active\:bg-emerald-700:active{background-color:var(--color-emerald-700)} + .active\:bg-emerald-700:active { + background-color: var(--color-emerald-700); + } /*tokens: active:bg-slate-700 <= src/pages/index/index.vue */ -.active\:bg-slate-700:active{background-color:var(--color-slate-700)} + .active\:bg-slate-700:active { + background-color: var(--color-slate-700); + } /*tokens: dark:bg-red-300 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:bg-red-300.theme-dark,.theme-dark .dark\:bg-red-300{background-color:var(--color-red-300)} + .dark\:bg-red-300.theme-dark { + background-color: var(--color-red-300); + } + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-red-300 <= src/pages/index/index.vue */ + .theme-dark .dark\:bg-red-300 { + background-color: var(--color-red-300); + } /*tokens: dark:bg-zinc-900 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:bg-zinc-900.theme-dark,.theme-dark .dark\:bg-zinc-900{background-color:var(--color-zinc-900)} + .dark\:bg-zinc-900.theme-dark { + background-color: var(--color-zinc-900); + } + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-900 <= src/pages/index/index.vue */ + .theme-dark .dark\:bg-zinc-900 { + background-color: var(--color-zinc-900); + } /*tokens: dark:bg-zinc-950 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:bg-zinc-950.theme-dark,.theme-dark .dark\:bg-zinc-950{background-color:var(--color-zinc-950)} + .dark\:bg-zinc-950.theme-dark { + background-color: var(--color-zinc-950); + } + /*tokens: theme-dark <= src/pages/index/index.vue | dark:bg-zinc-950 <= src/pages/index/index.vue */ + .theme-dark .dark\:bg-zinc-950 { + background-color: var(--color-zinc-950); + } /*tokens: dark:text-zinc-50 <= src/pages/index/index.vue | theme-dark <= src/pages/index/index.vue */ -.dark\:text-zinc-50.theme-dark,.theme-dark .dark\:text-zinc-50{color:var(--color-zinc-50)}@media (prefers-color-scheme: dark){ + .dark\:text-zinc-50.theme-dark { + color: var(--color-zinc-50); + } + /*tokens: theme-dark <= src/pages/index/index.vue | dark:text-zinc-50 <= src/pages/index/index.vue */ + .theme-dark .dark\:text-zinc-50 { + color: var(--color-zinc-50); + } + @media (prefers-color-scheme: dark) { /*tokens: system-dark:bg-slate-900 <= src/pages/index/index.vue */ -.system-dark\:bg-slate-900{background-color:var(--color-slate-900)} + .system-dark\:bg-slate-900 { + background-color: var(--color-slate-900); + } /*tokens: system-dark:text-slate-100 <= src/pages/index/index.vue */ -.system-dark\:text-slate-100{color:var(--color-slate-100)}} + .system-dark\:text-slate-100 { + color: var(--color-slate-100); + } + } /*tokens: not-wx:bg-red-500 <= src/pages/index/index.vue */ -.not-wx\:bg-red-500{background-color:var(--color-red-500)}@media (any-hover: hover){ + .not-wx\:bg-red-500 { + background-color: var(--color-red-500); + } + @media (any-hover: hover) { /*tokens: any-hover:bg-slate-800 <= src/pages/index/index.vue */ -.any-hover\:bg-slate-800:hover{background-color:var(--color-slate-800)}}}@layer base{uni-button::after,wx-button::after{display:none;border:none;content:""}wx-button{background:#000}}wx-button{background:#444}abc{background:#222}@layer components{.layer-card-v4{display:flex;align-items:center;gap:8px;color:var(--color-midnight)} + .any-hover\:bg-slate-800:hover { + background-color: var(--color-slate-800); + } + } +} +@layer base { + uni-button::after, + wx-button::after { + display: none; + border: none; + content: ''; + } + wx-button { + background: #000; + } +} +wx-button { + background: #444; +} +abc { + background: #222; +} +@layer components { + .layer-card-v4 { + display: flex; + align-items: center; + gap: 8px; + color: var(--color-midnight); + } /*tokens: template-corpus-apply <= src/pages/index/index.vue */ -.template-corpus-apply{display:inline-flex;align-items:center;gap:calc(var(--spacing) * 2);border-radius:.625rem;--tw-gradient-position: to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from: #9e58e9;--tw-gradient-to: var(--color-blue-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));padding-inline:.5625rem;padding-block:.3125rem;--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold);font-size:.8125rem;color:var(--color-white)}}@property --tw-space-y-reverse{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-space-x-reverse{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-divide-x-reverse{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-gradient-position{syntax: "*"; inherits: false;}@property --tw-gradient-from{syntax: ""; inherits: false; initial-value: #0000;}@property --tw-gradient-via{syntax: ""; inherits: false; initial-value: #0000;}@property --tw-gradient-to{syntax: ""; inherits: false; initial-value: #0000;}@property --tw-gradient-stops{syntax: "*"; inherits: false;}@property --tw-gradient-via-stops{syntax: "*"; inherits: false;}@property --tw-gradient-from-position{syntax: ""; inherits: false; initial-value: 0%;}@property --tw-gradient-via-position{syntax: ""; inherits: false; initial-value: 50%;}@property --tw-gradient-to-position{syntax: ""; inherits: false; initial-value: 100%;}@property --tw-leading{syntax: "*"; inherits: false;}@property --tw-font-weight{syntax: "*"; inherits: false;}@property --tw-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: "*"; inherits: false;}@property --tw-shadow-alpha{syntax: ""; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: "*"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: ""; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: "*"; inherits: false;}@property --tw-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: "*"; inherits: false;}@property --tw-inset-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: "*"; inherits: false;}@property --tw-ring-offset-width{syntax: ""; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: "*"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: "*"; initial-value: ""; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,::before,::after,::backdrop{--tw-space-y-reverse: 0;--tw-space-x-reverse: 0;--tw-divide-x-reverse: 0;--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-gradient-position: initial;--tw-gradient-from: #0000;--tw-gradient-via: #0000;--tw-gradient-to: #0000;--tw-gradient-stops: initial;--tw-gradient-via-stops: initial;--tw-gradient-from-position: 0%;--tw-gradient-via-position: 50%;--tw-gradient-to-position: 100%;--tw-leading: initial;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: ""}}}.weapp-tw-user-ui-card{display:inline-flex;align-items:center;gap:.25rem;color:var(--weapp-tw-user-ui-color, #175e75);animation:weappTwUserUiBreathe 1.2s ease-in-out infinite}.weapp-tw-user-ui-loading{display:inline-block;width:1rem;height:1rem;animation:weappTwUserUiRotation 1s linear infinite}@keyframes weappTwUserUiRotation{to{transform:rotate(360deg)}}@keyframes weappTwUserUiBreathe{50%{opacity:.65;transform:scale(.96)}}@media (prefers-color-scheme: light){:root,uni-page-body,.page{--td-brand-color-1: #e4f9ec}}@media (prefers-color-scheme: dark){:root,uni-page-body,.page{--td-brand-color-1: #002517}}.reset-button{display:block}uni-page-body{--test-color: #006241;--color-test: #006241;--font-test: "Issue 978", sans-serif;--font-sans: "inter", "inter Fallback", system-ui;--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono: var(--font-plex-mono), monospace;--color-red-500: #fb2c36;--color-emerald-500: #00bb7f;--color-slate-900: #0f172b;--color-white: #fff;--color-zinc-900: rgb(24, 24, 27);--color-red-50: #fef2f2;--color-red-950: #460809;--color-orange-500: #fe6e00;--color-amber-500: #f99c00;--color-yellow-500: #edb200;--color-lime-500: #80cd00;--color-teal-500: #00baa7;--color-sky-500: #00a5ef;--color-indigo-500: #625fff;--color-violet-500: #8d54ff;--color-purple-500: #ac4bff;--color-pink-500: #f6339a;--color-gray-900: #101828;--color-neutral-900: #171717;--color-stone-900: #1c1917;--color-black: #000;--spacing: .25rem;--text-base: 1rem;--font-weight-bold: 700;--radius-lg: .5rem;--default-font-family: var(--font-inter), system-ui;--default-mono-font-family: var(--font-plex-mono), monospace} + .template-corpus-apply { + display: inline-flex; + align-items: center; + gap: calc(var(--spacing) * 2); + border-radius: 0.625rem; + --tw-gradient-position: to right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + --tw-gradient-from: #9e58e9; + --tw-gradient-to: var(--color-blue-500); + --tw-gradient-stops: var( + --tw-gradient-via-stops, + var(--tw-gradient-position), + var(--tw-gradient-from) var(--tw-gradient-from-position), + var(--tw-gradient-to) var(--tw-gradient-to-position) + ); + padding-inline: 0.5625rem; + padding-block: 0.3125rem; + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + font-size: 0.8125rem; + color: var(--color-white); + } +} +@property --tw-space-y-reverse { + syntax: '*'; + inherits: false; + initial-value: 0; +} +@property --tw-space-x-reverse { + syntax: '*'; + inherits: false; + initial-value: 0; +} +@property --tw-divide-x-reverse { + syntax: '*'; + inherits: false; + initial-value: 0; +} +@property --tw-border-style { + syntax: '*'; + inherits: false; + initial-value: solid; +} +@property --tw-divide-y-reverse { + syntax: '*'; + inherits: false; + initial-value: 0; +} +@property --tw-gradient-position { + syntax: '*'; + inherits: false; +} +@property --tw-gradient-from { + syntax: ''; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-via { + syntax: ''; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-to { + syntax: ''; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-stops { + syntax: '*'; + inherits: false; +} +@property --tw-gradient-via-stops { + syntax: '*'; + inherits: false; +} +@property --tw-gradient-from-position { + syntax: ''; + inherits: false; + initial-value: 0%; +} +@property --tw-gradient-via-position { + syntax: ''; + inherits: false; + initial-value: 50%; +} +@property --tw-gradient-to-position { + syntax: ''; + inherits: false; + initial-value: 100%; +} +@property --tw-leading { + syntax: '*'; + inherits: false; +} +@property --tw-font-weight { + syntax: '*'; + inherits: false; +} +@property --tw-shadow { + syntax: '*'; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: '*'; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: ''; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: '*'; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: '*'; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: ''; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: '*'; + inherits: false; +} +@property --tw-ring-shadow { + syntax: '*'; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: '*'; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: '*'; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: '*'; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ''; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: '*'; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: '*'; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-content { + syntax: '*'; + initial-value: ''; + inherits: false; +} +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, + ::before, + ::after, + ::backdrop { + --tw-space-y-reverse: 0; + --tw-space-x-reverse: 0; + --tw-divide-x-reverse: 0; + --tw-border-style: solid; + --tw-divide-y-reverse: 0; + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-leading: initial; + --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; + } + } +} +.weapp-tw-user-ui-card { + display: inline-flex; + align-items: center; + gap: 0.25rem; + color: var(--weapp-tw-user-ui-color, #175e75); + animation: weappTwUserUiBreathe 1.2s ease-in-out infinite; +} +.weapp-tw-user-ui-loading { + display: inline-block; + width: 1rem; + height: 1rem; + animation: weappTwUserUiRotation 1s linear infinite; +} +@keyframes weappTwUserUiRotation { + to { + transform: rotate(360deg); + } +} +@keyframes weappTwUserUiBreathe { + 50% { + opacity: 0.65; + transform: scale(0.96); + } +} +@media (prefers-color-scheme: light) { + :root, + uni-page-body, + .page { + --td-brand-color-1: #e4f9ec; + } +} +@media (prefers-color-scheme: dark) { + :root, + uni-page-body, + .page { + --td-brand-color-1: #002517; + } +} +.reset-button { + display: block; +} +uni-page-body { + --test-color: #006241; + --color-test: #006241; + --font-test: 'Issue 978', sans-serif; + --font-sans: 'inter', 'inter Fallback', system-ui; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: var(--font-plex-mono), monospace; + --color-red-500: #fb2c36; + --color-emerald-500: #00bb7f; + --color-slate-900: #0f172b; + --color-white: #fff; + --color-zinc-900: rgb(24, 24, 27); + --color-red-50: #fef2f2; + --color-red-950: #460809; + --color-orange-500: #fe6e00; + --color-amber-500: #f99c00; + --color-yellow-500: #edb200; + --color-lime-500: #80cd00; + --color-teal-500: #00baa7; + --color-sky-500: #00a5ef; + --color-indigo-500: #625fff; + --color-violet-500: #8d54ff; + --color-purple-500: #ac4bff; + --color-pink-500: #f6339a; + --color-gray-900: #101828; + --color-neutral-900: #171717; + --color-stone-900: #1c1917; + --color-black: #000; + --spacing: 0.25rem; + --text-base: 1rem; + --font-weight-bold: 700; + --radius-lg: 0.5rem; + --default-font-family: var(--font-inter), system-ui; + --default-mono-font-family: var(--font-plex-mono), monospace; +} diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.2.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.2.css index 663d143461..fecb088f5d 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.2.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.2.css @@ -1,92 +1,572 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fpages-order%2Findex.css *//*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-emerald-50: oklch(97.9% .021 166.113);--color-emerald-100: oklch(95% .052 163.051);--color-emerald-500: oklch(69.6% .17 162.48);--color-emerald-600: oklch(59.6% .145 163.225);--color-slate-50: oklch(98.4% .003 247.858);--color-slate-200: oklch(92.9% .013 255.508);--color-slate-500: oklch(55.4% .046 257.417);--color-slate-800: oklch(27.9% .041 260.031);--color-slate-900: oklch(20.8% .042 265.755);--color-white: #fff;--spacing: .25rem;--text-xs: .75rem;--text-xs--line-height: calc(1 / .75);--text-sm: .875rem;--text-sm--line-height: calc(1.25 / .875);--text-base: 1rem;--text-base--line-height: 1.5 ;--text-lg: 1.125rem;--text-lg--line-height: calc(1.75 / 1.125);--text-xl: 1.25rem;--text-xl--line-height: calc(1.75 / 1.25);--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono)}}@layer base{*,::after,::before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}uni-progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,uni-video,uni-canvas,uni-audio,iframe,embed,object{display:block;vertical-align:middle}img,uni-video{max-width:100%;height:auto}uni-button,uni-input,select,optgroup,uni-textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::-moz-placeholder{color:currentcolor}@supports (color: color-mix(in lab,red,red)){{color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor}@supports (color: color-mix(in lab,red,red)){{color:color-mix(in oklab,currentcolor 50%,transparent)}}}uni-textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}uni-button,uni-input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{ - /*tokens: mt-2 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.mt-2{margin-top:calc(var(--spacing) * 2)} - /*tokens: mt-4 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.mt-4{margin-top:calc(var(--spacing) * 4)} - /*tokens: mt-6 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.mt-6{margin-top:calc(var(--spacing) * 6)} +@layer properties; +@layer theme, base, components, utilities; +@layer theme { + :root, + :host { + --font-sans: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --color-emerald-50: oklch(97.9% 0.021 166.113); + --color-emerald-100: oklch(95% 0.052 163.051); + --color-emerald-500: oklch(69.6% 0.17 162.48); + --color-emerald-600: oklch(59.6% 0.145 163.225); + --color-slate-50: oklch(98.4% 0.003 247.858); + --color-slate-200: oklch(92.9% 0.013 255.508); + --color-slate-500: oklch(55.4% 0.046 257.417); + --color-slate-800: oklch(27.9% 0.041 260.031); + --color-slate-900: oklch(20.8% 0.042 265.755); + --color-white: #fff; + --spacing: 0.25rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + } +} +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, + :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, + strong { + font-weight: bolder; + } + code, + kbd, + samp, + pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring:where(:not(iframe)) { + outline: auto; + } + uni-progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, + ul, + menu { + list-style: none; + } + img, + svg, + uni-video, + uni-canvas, + uni-audio, + iframe, + embed, + object { + display: block; + vertical-align: middle; + } + img, + uni-video { + max-width: 100%; + height: auto; + } + uni-button, + uni-input, + select, + optgroup, + uni-textarea, + ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::-moz-placeholder { + opacity: 1; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::-moz-placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + } + uni-textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, + ::-webkit-datetime-edit-year-field, + ::-webkit-datetime-edit-month-field, + ::-webkit-datetime-edit-day-field, + ::-webkit-datetime-edit-hour-field, + ::-webkit-datetime-edit-minute-field, + ::-webkit-datetime-edit-second-field, + ::-webkit-datetime-edit-millisecond-field, + ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + uni-button, + uni-input:where([type='button'], [type='reset'], [type='submit']), + ::file-selector-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + } + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden='until-found'])) { + display: none !important; + } +} +@layer utilities { + /*tokens: mt-2 <= src/pages-order/pages/user/user.vue */ + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } + /*tokens: mt-4 <= src/pages-order/pages/home/home.vue */ + .mt-4 { + margin-top: calc(var(--spacing) * 4); + } + /*tokens: mt-6 <= src/pages-order/pages/user/user.vue */ + .mt-6 { + margin-top: calc(var(--spacing) * 6); + } /*tokens: mt-8 <= src/pages-order/pages/user/user.vue */ -.mt-8{margin-top:calc(var(--spacing) * 8)} - /*tokens: block <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.block{display:block} - /*tokens: flex <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.flex{display:flex} - /*tokens: h-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.h-12{height:calc(var(--spacing) * 12)} + .mt-8 { + margin-top: calc(var(--spacing) * 8); + } + /*tokens: block <= src/pages-order/pages/user/user.vue */ + .block { + display: block; + } + /*tokens: flex <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + .flex { + display: flex; + } + /*tokens: h-12 <= src/pages-order/pages/user/user.vue */ + .h-12 { + height: calc(var(--spacing) * 12); + } /*tokens: min-h-screen <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ -.min-h-screen{min-height:100vh} - /*tokens: w-12 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.w-12{width:calc(var(--spacing) * 12)} + .min-h-screen { + min-height: 100vh; + } + /*tokens: w-12 <= src/pages-order/pages/user/user.vue */ + .w-12 { + width: calc(var(--spacing) * 12); + } /*tokens: flex-1 <= src/pages-order/pages/user/user.vue */ -.flex-1{flex:1} - /*tokens: flex-col <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.flex-col{flex-direction:column} - /*tokens: items-center <= src/components/HelloWorld.vue, src/main.css, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.items-center{align-items:center} + .flex-1 { + flex: 1; + } + /*tokens: flex-col <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + .flex-col { + flex-direction: column; + } + /*tokens: items-center <= src/pages-order/pages/user/user.vue */ + .items-center { + align-items: center; + } /*tokens: justify-center <= src/pages-order/pages/user/user.vue */ -.justify-center{justify-content:center} + .justify-center { + justify-content: center; + } /*tokens: gap-1 <= src/pages-order/pages/user/user.vue */ -.gap-1{gap:var(--spacing)} - /*tokens: gap-3 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.gap-3{gap:calc(var(--spacing) * 3)} - /*tokens: rounded-xl <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.rounded-xl{border-radius:.5rem} - /*tokens: border <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.border{border-style:var(--tw-border-style);border-width:1px} + .gap-1 { + gap: var(--spacing); + } + /*tokens: gap-3 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + .gap-3 { + gap: calc(var(--spacing) * 3); + } + /*tokens: rounded-xl <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + .rounded-xl { + border-radius: 0.5rem; + } + /*tokens: border <= src/pages-order/pages/user/user.vue */ + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } /*tokens: border-emerald-500 <= src/pages-order/pages/user/user.vue */ -.border-emerald-500{border-color:var(--color-emerald-500)} - /*tokens: border-slate-200 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.border-slate-200{border-color:var(--color-slate-200)} + .border-emerald-500 { + border-color: var(--color-emerald-500); + } + /*tokens: border-slate-200 <= src/pages-order/pages/user/user.vue */ + .border-slate-200 { + border-color: var(--color-slate-200); + } /*tokens: bg-emerald-100 <= src/pages-order/pages/user/user.vue */ -.bg-emerald-100{background-color:var(--color-emerald-100)} - /*tokens: bg-emerald-500 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.bg-emerald-500{background-color:var(--color-emerald-500)} + .bg-emerald-100 { + background-color: var(--color-emerald-100); + } + /*tokens: bg-emerald-500 <= src/pages-order/pages/home/home.vue */ + .bg-emerald-500 { + background-color: var(--color-emerald-500); + } /*tokens: bg-slate-50 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ -.bg-slate-50{background-color:var(--color-slate-50)} - /*tokens: bg-white <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.bg-white{background-color:var(--color-white)} + .bg-slate-50 { + background-color: var(--color-slate-50); + } + /*tokens: bg-white <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + .bg-white { + background-color: var(--color-white); + } /*tokens: p-5 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ -.p-5{padding:calc(var(--spacing) * 5)} - /*tokens: px-4 <= src/components/HelloWorld.vue, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.px-4{padding-inline:calc(var(--spacing) * 4)} - /*tokens: py-2 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.py-2{padding-block:calc(var(--spacing) * 2)} + .p-5 { + padding: calc(var(--spacing) * 5); + } + /*tokens: px-4 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + /*tokens: py-2 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + .py-2 { + padding-block: calc(var(--spacing) * 2); + } /*tokens: py-6 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ -.py-6{padding-block:calc(var(--spacing) * 6)} - /*tokens: text-center <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.text-center{text-align:center} - /*tokens: text-base <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))} + .py-6 { + padding-block: calc(var(--spacing) * 6); + } + /*tokens: text-center <= src/pages-order/pages/home/home.vue */ + .text-center { + text-align: center; + } + /*tokens: text-base <= src/pages-order/pages/user/user.vue */ + .text-base { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + } /*tokens: text-lg <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ -.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))} - /*tokens: text-sm <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))} + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + /*tokens: text-sm <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } /*tokens: text-xl <= src/pages-order/pages/user/user.vue */ -.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))} - /*tokens: text-xs <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))} + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + /*tokens: text-xs <= src/pages-order/pages/user/user.vue */ + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } /*tokens: leading-6 <= src/pages-order/pages/user/user.vue */ -.leading-6{--tw-leading: calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)} - /*tokens: font-bold <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)} + .leading-6 { + --tw-leading: calc(var(--spacing) * 6); + line-height: calc(var(--spacing) * 6); + } + /*tokens: font-bold <= src/pages-order/pages/user/user.vue */ + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } /*tokens: font-medium <= src/pages-order/pages/user/user.vue */ -.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)} - /*tokens: font-semibold <= src/main.css, src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)} -.text-\[\#929292\]{color:#929292} + .font-medium { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } + /*tokens: font-semibold <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } +.text-\[\#929292\] { + color: #929292; + } /*tokens: text-emerald-600 <= src/pages-order/pages/user/user.vue */ -.text-emerald-600{color:var(--color-emerald-600)} - /*tokens: text-slate-500 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-slate-500{color:var(--color-slate-500)} - /*tokens: text-slate-800 <= src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-slate-800{color:var(--color-slate-800)} - /*tokens: text-slate-900 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue, src/pages/index/index.vue */ -.text-slate-900{color:var(--color-slate-900)} - /*tokens: text-white <= src/main.css, src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.text-white{color:var(--color-white)} - /*tokens: shadow <= src/pages-order/pages/home/home.vue | shadow-sm <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.shadow,.shadow-sm{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before{--tw-content: "现在，让我们开始神奇的 tailwindcss 开发之旅吧！";content:var(--tw-content)}.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]::before{--tw-content: "现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！";content:var(--tw-content)} + .text-emerald-600 { + color: var(--color-emerald-600); + } + /*tokens: text-slate-500 <= src/pages-order/pages/user/user.vue */ + .text-slate-500 { + color: var(--color-slate-500); + } + /*tokens: text-slate-800 <= src/pages-order/pages/user/user.vue */ + .text-slate-800 { + color: var(--color-slate-800); + } + /*tokens: text-slate-900 <= src/pages-order/pages/home/home.vue, src/pages-order/pages/user/user.vue */ + .text-slate-900 { + color: var(--color-slate-900); + } + /*tokens: text-white <= src/pages-order/pages/home/home.vue */ + .text-white { + color: var(--color-white); + } + /*tokens: shadow <= src/pages-order/pages/home/home.vue */ + .shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + /*tokens: shadow-sm <= src/pages-order/pages/home/home.vue */ + .shadow-sm { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { + --tw-content: '现在，让我们开始神奇的 tailwindcss 开发之旅吧！'; + content: var(--tw-content); + } + .before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]::before { + --tw-content: '现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！'; + content: var(--tw-content); + } /*tokens: active:bg-emerald-50 <= src/pages-order/pages/user/user.vue */ -.active\:bg-emerald-50:active{background-color:var(--color-emerald-50)} - /*tokens: active:bg-emerald-600 <= src/pages-order/pages/home/home.vue, src/pages/index/index.vue */ -.active\:bg-emerald-600:active{background-color:var(--color-emerald-600)}}@property --tw-border-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: "*"; inherits: false;}@property --tw-font-weight{syntax: "*"; inherits: false;}@property --tw-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: "*"; inherits: false;}@property --tw-shadow-alpha{syntax: ""; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: "*"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: ""; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: "*"; inherits: false;}@property --tw-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: "*"; inherits: false;}@property --tw-inset-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: "*"; inherits: false;}@property --tw-ring-offset-width{syntax: ""; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: "*"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: "*"; initial-value: ""; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,::before,::after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: ""}}} + .active\:bg-emerald-50:active { + background-color: var(--color-emerald-50); + } + /*tokens: active:bg-emerald-600 <= src/pages-order/pages/home/home.vue */ + .active\:bg-emerald-600:active { + background-color: var(--color-emerald-600); + } +} +@property --tw-border-style { + syntax: '*'; + inherits: false; + initial-value: solid; +} +@property --tw-leading { + syntax: '*'; + inherits: false; +} +@property --tw-font-weight { + syntax: '*'; + inherits: false; +} +@property --tw-shadow { + syntax: '*'; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: '*'; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: ''; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: '*'; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: '*'; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: ''; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: '*'; + inherits: false; +} +@property --tw-ring-shadow { + syntax: '*'; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: '*'; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: '*'; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: '*'; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ''; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: '*'; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: '*'; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-content { + syntax: '*'; + initial-value: ''; + inherits: false; +} +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, + ::before, + ::after, + ::backdrop { + --tw-border-style: solid; + --tw-leading: initial; + --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; + } + } +} diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.3.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.3.css index a24b4cd083..44936856f0 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.3.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.3.css @@ -1,3 +1,262 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-independent%2Fpages%2Findex.css */@layer base{code[data-v-b12531e8],kbd[data-v-b12531e8],samp[data-v-b12531e8],pre[data-v-b12531e8]{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}:-moz-focusring:where([data-v-b12531e8]:not(iframe)){outline:auto}img[data-v-b12531e8],svg[data-v-b12531e8],uni-video[data-v-b12531e8],uni-canvas[data-v-b12531e8],uni-audio[data-v-b12531e8],iframe[data-v-b12531e8],embed[data-v-b12531e8],object[data-v-b12531e8]{display:block;vertical-align:middle}img[data-v-b12531e8],uni-video[data-v-b12531e8]{max-width:100%;height:auto}uni-button[data-v-b12531e8],uni-input[data-v-b12531e8],select[data-v-b12531e8],optgroup[data-v-b12531e8],uni-textarea[data-v-b12531e8],[data-v-b12531e8]::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup[data-v-b12531e8]{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option[data-v-b12531e8]{padding-inline-start:20px}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){@supports (color: color-mix(in lab,red,red)){{color:color-mix(in oklab,currentcolor 50%,transparent)}}@supports (color: color-mix(in lab,red,red)){{color:color-mix(in oklab,currentcolor 50%,transparent)}}}uni-textarea[data-v-b12531e8]{resize:vertical}[data-v-b12531e8]:-moz-ui-invalid{box-shadow:none}uni-button[data-v-b12531e8],uni-input:where([type=button][data-v-b12531e8],[type=reset][data-v-b12531e8],[type=submit][data-v-b12531e8]),[data-v-b12531e8]::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}[hidden]:where([data-v-b12531e8]:not([hidden=until-found])){display:none!important}}@layer utilities{ +@layer properties; +@layer theme, base, components, utilities; +@layer theme { + :root, + :host { + --font-sans: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + } +} +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, + :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, + strong { + font-weight: bolder; + } + code, + kbd, + samp, + pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring:where(:not(iframe)) { + outline: auto; + } + uni-progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, + ul, + menu { + list-style: none; + } + img, + svg, + uni-video, + uni-canvas, + uni-audio, + iframe, + embed, + object { + display: block; + vertical-align: middle; + } + img, + uni-video { + max-width: 100%; + height: auto; + } + uni-button, + uni-input, + select, + optgroup, + uni-textarea, + ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::-moz-placeholder { + opacity: 1; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::-moz-placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + } + uni-textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, + ::-webkit-datetime-edit-year-field, + ::-webkit-datetime-edit-month-field, + ::-webkit-datetime-edit-day-field, + ::-webkit-datetime-edit-hour-field, + ::-webkit-datetime-edit-minute-field, + ::-webkit-datetime-edit-second-field, + ::-webkit-datetime-edit-millisecond-field, + ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + uni-button, + uni-input:where([type='button'], [type='reset'], [type='submit']), + ::file-selector-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + } + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden='until-found'])) { + display: none !important; + } +} +@layer utilities { /*tokens: bg-independent-subpackage-marker <= src/sub-independent/pages/index.vue */ -.bg-independent-subpackage-marker[data-v-b12531e8]{background-color:#dc2626}.before\:content-\[\'independent_subpackage_uni-app-vite-tailwindcss-v4\'\][data-v-b12531e8]::before{--tw-content: "independent subpackage uni-app-vite-tailwindcss-v4";content:var(--tw-content)}.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\][data-v-b12531e8]::before{--tw-content: "现在，让我们开始神奇的 tailwindcss 开发之旅吧！";content:var(--tw-content)}.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\][data-v-b12531e8]::before{--tw-content: "现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！";content:var(--tw-content)}}@layer properties{} + .bg-independent-subpackage-marker { + background-color: #dc2626; + } + .before\:content-\[\'independent_subpackage_uni-app-vite-tailwindcss-v4\'\]::before { + --tw-content: 'independent subpackage uni-app-vite-tailwindcss-v4'; + content: var(--tw-content); + } + .before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { + --tw-content: '现在，让我们开始神奇的 tailwindcss 开发之旅吧！'; + content: var(--tw-content); + } + .before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]::before { + --tw-content: '现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！'; + content: var(--tw-content); + } +} +@property --tw-content { + syntax: '*'; + initial-value: ''; + inherits: false; +} +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, + ::before, + ::after, + ::backdrop { + --tw-content: ''; + } + } +} diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.4.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.4.css index fc41c2ef41..171756aaf7 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.4.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.4.css @@ -1,3 +1,262 @@ -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2Fsrc%2Fsub-normal%2Fpages%2Findex.css */@layer base{code[data-v-0a5a82ca],kbd[data-v-0a5a82ca],samp[data-v-0a5a82ca],pre[data-v-0a5a82ca]{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}:-moz-focusring:where([data-v-0a5a82ca]:not(iframe)){outline:auto}img[data-v-0a5a82ca],svg[data-v-0a5a82ca],uni-video[data-v-0a5a82ca],uni-canvas[data-v-0a5a82ca],uni-audio[data-v-0a5a82ca],iframe[data-v-0a5a82ca],embed[data-v-0a5a82ca],object[data-v-0a5a82ca]{display:block;vertical-align:middle}img[data-v-0a5a82ca],uni-video[data-v-0a5a82ca]{max-width:100%;height:auto}uni-button[data-v-0a5a82ca],uni-input[data-v-0a5a82ca],select[data-v-0a5a82ca],optgroup[data-v-0a5a82ca],uni-textarea[data-v-0a5a82ca],[data-v-0a5a82ca]::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup[data-v-0a5a82ca]{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option[data-v-0a5a82ca]{padding-inline-start:20px}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){@supports (color: color-mix(in lab,red,red)){{color:color-mix(in oklab,currentcolor 50%,transparent)}}@supports (color: color-mix(in lab,red,red)){{color:color-mix(in oklab,currentcolor 50%,transparent)}}}uni-textarea[data-v-0a5a82ca]{resize:vertical}[data-v-0a5a82ca]:-moz-ui-invalid{box-shadow:none}uni-button[data-v-0a5a82ca],uni-input:where([type=button][data-v-0a5a82ca],[type=reset][data-v-0a5a82ca],[type=submit][data-v-0a5a82ca]),[data-v-0a5a82ca]::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}[hidden]:where([data-v-0a5a82ca]:not([hidden=until-found])){display:none!important}}@layer utilities{ +@layer properties; +@layer theme, base, components, utilities; +@layer theme { + :root, + :host { + --font-sans: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + } +} +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, + :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, + strong { + font-weight: bolder; + } + code, + kbd, + samp, + pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring:where(:not(iframe)) { + outline: auto; + } + uni-progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, + ul, + menu { + list-style: none; + } + img, + svg, + uni-video, + uni-canvas, + uni-audio, + iframe, + embed, + object { + display: block; + vertical-align: middle; + } + img, + uni-video { + max-width: 100%; + height: auto; + } + uni-button, + uni-input, + select, + optgroup, + uni-textarea, + ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::-moz-placeholder { + opacity: 1; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::-moz-placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + } + uni-textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, + ::-webkit-datetime-edit-year-field, + ::-webkit-datetime-edit-month-field, + ::-webkit-datetime-edit-day-field, + ::-webkit-datetime-edit-hour-field, + ::-webkit-datetime-edit-minute-field, + ::-webkit-datetime-edit-second-field, + ::-webkit-datetime-edit-millisecond-field, + ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + uni-button, + uni-input:where([type='button'], [type='reset'], [type='submit']), + ::file-selector-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + } + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden='until-found'])) { + display: none !important; + } +} +@layer utilities { /*tokens: bg-normal-subpackage-marker <= src/sub-normal/pages/index.vue */ -.bg-normal-subpackage-marker[data-v-0a5a82ca]{background-color:#2563eb}.before\:content-\[\'normal_subpackage_uni-app-vite-tailwindcss-v4\'\][data-v-0a5a82ca]::before{--tw-content: "normal subpackage uni-app-vite-tailwindcss-v4";content:var(--tw-content)}.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\][data-v-0a5a82ca]::before{--tw-content: "现在，让我们开始神奇的 tailwindcss 开发之旅吧！";content:var(--tw-content)}.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\][data-v-0a5a82ca]::before{--tw-content: "现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！";content:var(--tw-content)}}@layer properties{} + .bg-normal-subpackage-marker { + background-color: #2563eb; + } + .before\:content-\[\'normal_subpackage_uni-app-vite-tailwindcss-v4\'\]::before { + --tw-content: 'normal subpackage uni-app-vite-tailwindcss-v4'; + content: var(--tw-content); + } + .before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { + --tw-content: '现在，让我们开始神奇的 tailwindcss 开发之旅吧！'; + content: var(--tw-content); + } + .before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]::before { + --tw-content: '现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！'; + content: var(--tw-content); + } +} +@property --tw-content { + syntax: '*'; + initial-value: ''; + inherits: false; +} +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, + ::before, + ::after, + ::backdrop { + --tw-content: ''; + } + } +} diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.5.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.5.css index 9b270afac7..dd5ab85c52 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.5.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/uni-app-vite-tailwindcss-v4/artifacts/assets__index.5.css @@ -9,31 +9,31 @@ padding-inline: calc(var(--spacing, 0.25rem) * 4); padding-block: calc(var(--spacing, 0.25rem) * 3); color: var(--color-slate-700, oklch(37.2% 0.044 257.287deg)); -} +} /*! weapp-tailwindcss vite-generated-css-end:%2FUsers%2Ficebreaker%2FProjects%2Fgithub%2Fweapp-tailwindcss-codex%2Flocal-full-run-fixes%2Fdemo%2Funi-app-vite-tailwindcss-v4%2Fsrc%2Fcomponents%2FHelloWorld.vue */ /*tokens: special-class-visual-probe <= src/pages/index/index.vue | dark <= src/pages/index/index.vue */ -.special-class-visual-probe.dark [class~='dark:bg-red-300'][data-v-6d488b3e] { +.special-class-visual-probe.dark [class~='dark:bg-red-300'][data-v-51823732] { background-color: #fca5a5; color: #7f1d1d; } /*tokens: special-class-visual-probe <= src/pages/index/index.vue */ -.special-class-visual-probe [class~='text-[45rpx]'][data-v-6d488b3e] { +.special-class-visual-probe [class~='text-[45rpx]'][data-v-51823732] { color: #0f172a; font-size: 45px; line-height: 1; } /*tokens: special-class-visual-probe <= src/pages/index/index.vue | dark <= src/pages/index/index.vue | dark:bg-red-300 <= src/pages/index/index.vue */ -.special-class-visual-probe.dark .dark_cbg-red-300[data-v-6d488b3e] { +.special-class-visual-probe.dark .dark_cbg-red-300[data-v-51823732] { background-color: #fca5a5; color: #7f1d1d; } /*tokens: special-class-visual-probe <= src/pages/index/index.vue | text-[45rpx] <= src/pages/index/index.vue */ -.special-class-visual-probe .text-_b45rpx_B[data-v-6d488b3e] { +.special-class-visual-probe .text-_b45rpx_B[data-v-51823732] { color: #0f172a; font-size: 45px; line-height: 1; } /*tokens: special-class-visual-probe <= src/pages/index/index.vue | css-variable-visual-probe <= src/pages/index/index.vue */ -.special-class-visual-probe .css-variable-visual-probe[data-v-6d488b3e] { +.special-class-visual-probe .css-variable-visual-probe[data-v-51823732] { --visual-probe-bg: rgb(16, 185, 129); --visual-probe-size: 45px; background-color: var(--visual-probe-bg); diff --git a/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/main.wxss b/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/main.wxss index e3ee6149da..7d0800a248 100644 --- a/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/main.wxss +++ b/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/main.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/sub-independent/index.wxss b/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/sub-independent/index.wxss index 6919b92dc1..0c1aa6ceca 100644 --- a/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/sub-independent/index.wxss +++ b/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/sub-independent/index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/sub-normal/index.wxss b/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/sub-normal/index.wxss index fe5d2d9b00..138ef0ba1e 100644 --- a/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/sub-normal/index.wxss +++ b/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/sub-normal/index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/app-origin.wxss b/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/app-origin.wxss index 8f6abf21a6..119d35bfcf 100644 --- a/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/app-origin.wxss +++ b/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/app-origin.wxss @@ -32,6 +32,7 @@ text, --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/sub-independent/pages/index.wxss b/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/sub-independent/pages/index.wxss index e8815043a4..a9847dc3ab 100644 --- a/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/sub-independent/pages/index.wxss +++ b/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/sub-independent/pages/index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/sub-normal/pages/index.wxss b/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/sub-normal/pages/index.wxss index 69d6c5b70c..702b61b82c 100644 --- a/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/sub-normal/pages/index.wxss +++ b/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/sub-normal/pages/index.wxss @@ -33,6 +33,7 @@ text, --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/app-origin.wxss b/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/app-origin.wxss index 00f2099519..0adc6e6be7 100644 --- a/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/app-origin.wxss +++ b/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/app-origin.wxss @@ -14,6 +14,7 @@ text, --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/sub-independent/pages/index.wxss b/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/sub-independent/pages/index.wxss index 7a4f1ad11d..10ae0b15c5 100644 --- a/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/sub-independent/pages/index.wxss +++ b/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/sub-independent/pages/index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/sub-normal/pages/index.wxss b/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/sub-normal/pages/index.wxss index 0262bfeaae..9a36bdc676 100644 --- a/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/sub-normal/pages/index.wxss +++ b/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/sub-normal/pages/index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/main.wxss b/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/main.wxss index 39f95cdaf8..d6fa6f52a0 100644 --- a/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/main.wxss +++ b/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/main.wxss @@ -35,6 +35,7 @@ text, --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/sub-independent/pages/index.wxss b/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/sub-independent/pages/index.wxss index 23bc9f1e2d..fe072cfc7f 100644 --- a/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/sub-independent/pages/index.wxss +++ b/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/sub-independent/pages/index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/sub-normal/pages/index.wxss b/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/sub-normal/pages/index.wxss index 2aa920d59e..48d7ddfdd3 100644 --- a/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/sub-normal/pages/index.wxss +++ b/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/sub-normal/pages/index.wxss @@ -6,6 +6,7 @@ text, box-sizing: border-box; margin: 0; padding: 0; + --tw-content: ''; } :host, page, diff --git a/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/app.wxss b/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/app.wxss index 44c5f622b8..a0076dcd1b 100644 --- a/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/app.wxss +++ b/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/app.wxss @@ -1,16 +1,47 @@ @import './uvue.wxss'; +view, +text, +::after, +::before { + --tw-content: ''; +} :host, page, .tw-root, wx-root-portal-content { + --font-sans: 'inter', 'inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + --font-mono: var(--font-plex-mono), monospace; + --color-red-500: #fb2c36; + --color-blue-500: #3080ff; + --color-slate-100: rgb(241, 245, 249); + --color-slate-200: rgb(226, 232, 240); + --color-slate-700: rgb(49, 65, 88); + --color-slate-800: rgb(29, 41, 61); + --color-slate-900: #0f172b; + --color-gray-200: rgb(229, 231, 235); + --color-gray-600: rgb(74, 85, 101); + --color-zinc-50: rgb(250, 250, 250); + --color-zinc-950: rgb(9, 9, 11); + --color-white: #fff; + --spacing: 8rpx; + --text-xs: 24rpx; + --text-xs--line-height: calc(1 / 0.75); + --text-sm: 28rpx; + --text-sm--line-height: calc(1.25 / 0.875); + --text-base: 32rpx; + --text-base--line-height: calc(1.5 / 1); + --text-xl: 40rpx; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 48rpx; + --text-2xl--line-height: calc(2 / 1.5); + --radius-md: 12rpx; + --default-font-family: var(--font-inter), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + --default-mono-font-family: var(--font-plex-mono), monospace; --test-color: #006241; --color-test: #006241; --font-test: 'Issue 978', sans-serif; - --font-sans: 'inter', 'inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; - --font-mono: var(--font-plex-mono), monospace; --color-red-50: #fef2f2; - --color-red-500: #fb2c36; --color-red-950: #460809; --color-orange-500: #fe6e00; --color-amber-500: #f99c00; @@ -21,39 +52,19 @@ wx-root-portal-content { --color-teal-500: #00baa7; --color-cyan-500: #00b7d7; --color-sky-500: #00a5ef; - --color-blue-500: #3080ff; --color-indigo-500: #625fff; --color-violet-500: #8d54ff; --color-purple-500: #ac4bff; --color-fuchsia-500: #e12afb; --color-pink-500: #f6339a; --color-rose-500: #ff2357; - --color-slate-900: #0f172b; --color-gray-900: #101828; --color-zinc-900: #18181b; --color-neutral-900: #171717; --color-stone-900: #1c1917; --color-black: #000; - --color-white: #fff; - --spacing: 8rpx; - --text-base: 32rpx; --font-weight-bold: 700; --radius-lg: 16rpx; - --default-font-family: var(--font-inter), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - --default-mono-font-family: var(--font-plex-mono), monospace; - --top-window-height: 0px; - --window-top: 0px; - --window-bottom: 0px; - --window-left: 0px; - --window-right: 0px; - --window-magin: 0px; - --uni-safe-area-inset-top: 0px; - --uni-safe-area-inset-left: 0px; - --uni-safe-area-inset-right: 0px; -} -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2FApp.uvue */ -.issue-902-theme-scope { - --theme-color: #16a34a; } .template-corpus-apply { display: flex; @@ -67,60 +78,580 @@ wx-root-portal-content { color: #fff; font-size: 26px; } -/** - * 这里是uni-app内置的常用样式变量 - * - * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 - * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App - * - */ -/** - * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 - * - * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 - */ -/* 颜色变量 */ -/* 行为相关颜色 */ -/* 文字基本颜色 */ -/* 背景颜色 */ -/* 边框颜色 */ -/* 尺寸变量 */ -/* 文字尺寸 */ -/* 图片尺寸 */ -/* Border Radius */ -/* 水平间距 */ -/* 垂直间距 */ -/* 透明度 */ -/* 文章场景相关 */ -/** - * 这里是uni-app内置的常用样式变量 - * - * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 - * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App - * - */ -/** - * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 - * - * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 - */ -/* 颜色变量 */ -/* 行为相关颜色 */ -/* 文字基本颜色 */ -/* 背景颜色 */ -/* 边框颜色 */ -/* 尺寸变量 */ -/* 文字尺寸 */ -/* 图片尺寸 */ -/* Border Radius */ -/* 水平间距 */ -/* 垂直间距 */ -/* 透明度 */ -/* 文章场景相关 */ -[data-c-h='true'] { - display: none !important; +.template-corpus-apply { + display: flex; + align-items: center; + border-radius: 20px; + background-color: #9e58e9; + padding-left: 18px; + padding-right: 18px; + padding-top: 10px; + padding-bottom: 10px; + color: #fff; + font-size: 26px; +} +.my-3 { + margin-top: calc(var(--spacing) * 3); + margin-bottom: calc(var(--spacing) * 3); +} +.mt-2 { + margin-top: calc(var(--spacing) * 2); +} +.mt-3 { + margin-top: calc(var(--spacing) * 3); +} +.mt-4 { + margin-top: calc(var(--spacing) * 4); +} +.mt-_b8px_B { + margin-top: 8px; +} +.mt-_b12px_B { + margin-top: 12px; +} +.mt-_b13_d14758px_B { + margin-top: 13.14758px; +} +.mr-_b16px_B { + margin-right: 16px; +} +.mb-_b12_d32px_B { + margin-bottom: 12.32px; +} +.ml-_b3px_B { + margin-left: 3px; +} +.i-_bmdi--github-circle_B { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'/%3E%3C/svg%3E"); +} +.i-_bmdi--star_B { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z'/%3E%3C/svg%3E"); +} +.i-_bsvg-spinners--180-ring-with-bg_B { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25'/%3E%3Cpath fill='black' d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E"); +} +.flex { + display: flex; +} +.h-_b41px_B { + height: 41px; +} +.h-_b45px_B { + height: 45px; +} +.h-_b48_d3px_B { + height: 48.3px; +} +.h-_b48px_B { + height: 48px; +} +.h-_b100px_B { + height: 100px; +} +.h-_b100rpx_B { + height: 100rpx; +} +.h-_b200px_B { + height: 200px; +} +.w-32 { + width: calc(var(--spacing) * 32); +} +.w-64 { + width: calc(var(--spacing) * 64); +} +.w-_b48px_B { + width: 48px; +} +.w-_b100rpx_B { + width: 100rpx; +} +.w-_b173px_B { + width: 173px; +} +.w-_b220px_B { + width: 220px; +} +.w-_b222_d222px_B { + width: 222.222px; +} +.w-_b300px_B { + width: 300px; +} +.w-_b323px_B { + width: 323px; +} +.w-full { + width: 100%; +} +.flex-col { + flex-direction: column; +} +.flex-row { + flex-direction: row; +} +.items-center { + align-items: center; +} +.justify-between { + justify-content: space-between; +} +.justify-center { + justify-content: center; +} +.gap-3 { + gap: calc(var(--spacing) * 3); +} +.space-y-2 > view + view, +.space-y-2 > view + text, +.space-y-2 > text + view, +.space-y-2 > text + text { + --tw-space-y-reverse: 0; + margin-bottom: calc((var(--spacing) * 2) * var(--tw-space-y-reverse)); + margin-bottom: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + margin-top: calc((var(--spacing) * 2) * (1 - var(--tw-space-y-reverse))); + margin-top: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); +} +.rounded { + border-radius: 8rpx; +} +.rounded-_b10rpx_B { + border-radius: 10rpx; } -/*! weapp-tailwindcss vite-generated-css:%3Cproject-root%3E%2FApp.uvue */ +.rounded-_b20px_B { + border-radius: 20px; +} +.rounded-_b28px_B { + border-radius: 28px; +} +.rounded-_b40px_B { + border-radius: 40px; +} +.rounded-_b9998px_B { + border-radius: 9998px; +} +.rounded-full { + border-radius: 9999px; +} +.rounded-md { + border-radius: var(--radius-md); +} +.border { + border-style: var(--tw-border-style); + border-width: 1px; +} +.border-_b2px_B { + border-style: var(--tw-border-style); + border-width: 2px; +} +.border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; +} +.border-t-0 { + border-top-style: var(--tw-border-style); + border-top-width: 0px; +} +.border-t-_b1px_B { + border-top-style: var(--tw-border-style); + border-top-width: 1px; +} +.border-r-_b1px_B { + border-right-style: var(--tw-border-style); + border-right-width: 1px; +} +.border-b-_b1px_B { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; +} +.border-l-_b1px_B { + border-left-style: var(--tw-border-style); + border-left-width: 1px; +} +.border-l-_b2px_B { + border-left-style: var(--tw-border-style); + border-left-width: 2px; +} +.border-dashed { + --tw-border-style: dashed; + border-style: dashed; +} +.border-none { + --tw-border-style: none; + border-style: none; +} +.border-solid { + --tw-border-style: solid; + border-style: solid; +} +.border-_b_h999_B { + border-color: #999; +} +.border-_b_h111111_B { + border-color: #111111; +} +.border-_bred_B { + border-color: red; +} +.border-gray-200 { + border-color: var(--color-gray-200); +} +.border-slate-200 { + border-color: var(--color-slate-200); +} +.bg-_b_h000_B { + background-color: #000; +} +.bg-_b_h31edd8_B_f_b0_d54_B { + background-color: rgba(49, 237, 216, 0.54); +} +.bg-_b_h68c828_B { + background-color: #68c828; +} +.bg-_b_h87add3_B { + background-color: #87add3; +} +.bg-_b_h111_B { + background-color: #111; +} +.bg-_b_h164e63_B { + background-color: #164e63; +} +.bg-_b_h222_B { + background-color: #222; +} +.bg-_b_h333_B { + background-color: #333; +} +.bg-_b_h444_B { + background-color: #444; +} +.bg-_b_h555_B { + background-color: #555; +} +.bg-_b_h666_B { + background-color: #666; +} +.bg-_b_h777_B { + background-color: #777; +} +.bg-_b_h888_B { + background-color: #888; +} +.bg-_b_h0977ee_B { + background-color: #0977ee; +} +.bg-_b_h999_B { + background-color: #999; +} +.bg-_b_h102938_B { + background-color: #102938; +} +.bg-_b_h123456_B { + background-color: #123456; +} +.bg-_b_haaa_B { + background-color: #aaa; +} +.bg-_b_hbbb_B { + background-color: #bbb; +} +.bg-_b_hccc_B { + background-color: #ccc; +} +.bg-_b_hd2e252_B { + background-color: #d2e252; +} +.bg-_b_hd7700a_B { + background-color: #d7700a; +} +.bg-_b_hddd_B { + background-color: #ddd; +} +.bg-_b_he0f2fe_B { + background-color: #e0f2fe; +} +.bg-_b_heccc68_B { + background-color: #eccc68; +} +.bg-_b_heee_B { + background-color: #eee; +} +.bg-_b_hf205f6_B { + background-color: #f205f6; +} +.bg-_b_hf21903_B { + background-color: #f21903; +} +.bg-_b_hff7a00_B { + background-color: #ff7a00; +} +.bg-_b_hfff_B { + background-color: #fff; +} +.bg-primary { + background-color: var(--theme-color, #0957de); +} +.bg-white { + background-color: var(--color-white); +} +.bg-gradient-to-br { + --tw-gradient-position: to bottom right; + background-image: linear-gradient(var(--tw-gradient-stops)); +} +.from-slate-900 { + --tw-gradient-from: var(--color-slate-900); + --tw-gradient-stops: + var(--tw-gradient-via-stops, var(--tw-gradient-position)), var(--tw-gradient-from) var(--tw-gradient-from-position,), var(--tw-gradient-to) var(--tw-gradient-to-position,); +} +.to-slate-700 { + --tw-gradient-to: var(--color-slate-700); + --tw-gradient-stops: + var(--tw-gradient-via-stops, var(--tw-gradient-position)), var(--tw-gradient-from) var(--tw-gradient-from-position,), var(--tw-gradient-to) var(--tw-gradient-to-position,); +} +.p-4 { + padding: calc(var(--spacing) * 4); +} +.p-_b12px_B { + padding: 12px; +} +.p-_b12rpx_B { + padding: 12rpx; +} +.p-_b20_d32px_B { + padding: 20.32px; +} +.px-3 { + padding-left: calc(var(--spacing) * 3); + padding-right: calc(var(--spacing) * 3); +} +.px-4 { + padding-left: calc(var(--spacing) * 4); + padding-right: calc(var(--spacing) * 4); +} +.px-_b29rpx_B { + padding-left: 29rpx; + padding-right: 29rpx; +} +.px-_b30rpx_B { + padding-left: 30rpx; + padding-right: 30rpx; +} +.px-_b48px_B { + padding-left: 48px; + padding-right: 48px; +} +.py-1 { + padding-top: var(--spacing); + padding-bottom: var(--spacing); +} +.py-2 { + padding-top: calc(var(--spacing) * 2); + padding-bottom: calc(var(--spacing) * 2); +} +.py-3 { + padding-top: calc(var(--spacing) * 3); + padding-bottom: calc(var(--spacing) * 3); +} +.py-4 { + padding-top: calc(var(--spacing) * 4); + padding-bottom: calc(var(--spacing) * 4); +} +.py-14 { + padding-top: calc(var(--spacing) * 14); + padding-bottom: calc(var(--spacing) * 14); +} +.py-_b24px_B { + padding-top: 24px; + padding-bottom: 24px; +} +.pt-_b10px_B { + padding-top: 10px; +} +.pr-12 { + padding-right: calc(var(--spacing) * 12); +} +.pl-16 { + padding-left: calc(var(--spacing) * 16); +} +.text-center { + text-align: center; +} +.text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); +} +.text-base { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); +} +.text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); +} +.text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); +} +.text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); +} +.text-_b11px_B { + font-size: 11px; +} +.text-_b14px_B { + font-size: 14px; +} +.text-_b26px_B { + font-size: 26px; +} +.text-_b100px_B { + font-size: 100px; +} +.text-_b31rpx_B { + font-size: 31rpx; +} +.text-_b39rpx_B { + font-size: 39rpx; +} +.text-_b93_d54rpx_B { + font-size: 93.54rpx; +} +.leading-_b1_d625_B { + --tw-leading: 1.625; + line-height: 1.625; +} +.leading-_b14px_B { + --tw-leading: 14px; + line-height: 14px; +} +.leading-_b16px_B { + --tw-leading: 16px; + line-height: 16px; +} +.leading-_b26px_B { + --tw-leading: 26px; + line-height: 26px; +} +.leading-_b52rpx_B { + --tw-leading: 52rpx; + line-height: 52rpx; +} +.text-_b_h70ed0a_B { + color: #70ed0a; +} +.text-_b_h94a3b8_B { + color: #94a3b8; +} +.text-_b_h111111_B { + color: #111111; +} +.text-_b_h123456_B { + color: #123456; +} +.text-_b_hda0e3c_B { + color: #da0e3c; +} +.text-_b_hf7fbff_B { + color: #f7fbff; +} +.text-_b_hff0000_B { + color: #ff0000; +} +.text-_b_hffffff_B { + color: #ffffff; +} +.text-gray-600_f75 { + color: rgba(74, 85, 101, 0.75); +} +.text-gray-600_f95 { + color: rgba(74, 85, 101, 0.95); +} +.text-slate-700 { + color: var(--color-slate-700); +} +.text-slate-900 { + color: var(--color-slate-900); +} +.text-white { + color: var(--color-white); +} +.underline { + text-decoration-line: underline; +} +.shadow-xl { + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} +.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x5f00_u_x59cb_u_x795e_u_x5947_u_x7684__tailwindcss_u_x5f00_u_x53d1_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B::before { + --tw-content: '现在，让我们开始神奇的 tailwindcss 开发之旅吧！'; + content: var(--tw-content); +} +.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x7ee7_u_x7eed_u_x795e_u_x5947_u_x7684__tailwindcss_HMR_u_x56de_u_x5f52_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B::before { + --tw-content: '现在，让我们继续神奇的 tailwindcss HMR 回归之旅吧！'; + content: var(--tw-content); +} +.dark_cbg-_b_h3498db_B.theme-dark { + background-color: #3498db; +} +.theme-dark .dark_cbg-_b_h3498db_B { + background-color: #3498db; +} +.dark_cbg-zinc-950.theme-dark { + background-color: var(--color-zinc-950); +} +.theme-dark .dark_cbg-zinc-950 { + background-color: var(--color-zinc-950); +} +.dark_ctext-zinc-50.theme-dark { + color: var(--color-zinc-50); +} +.theme-dark .dark_ctext-zinc-50 { + color: var(--color-zinc-50); +} +@media (prefers-color-scheme: dark) { + .system-dark_cbg-slate-900 { + background-color: var(--color-slate-900); + } + .system-dark_ctext-slate-100 { + color: var(--color-slate-100); + } +} +.wx_cbg-blue-500 { + background-color: var(--color-blue-500); +} + /** * 这里是uni-app内置的常用样式变量 * @@ -146,6 +677,9 @@ wx-root-portal-content { /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ +.issue-902-theme-scope { + --theme-color: #16a34a; +} /** * 这里是uni-app内置的常用样式变量 * diff --git a/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/main.wxss b/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/main.wxss index 79916e71aa..6edcf34a69 100644 --- a/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/main.wxss +++ b/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/main.wxss @@ -36,6 +36,7 @@ text, --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-content: ''; } :host, page, @@ -647,7 +648,6 @@ wx-root-portal-content { } page { height: 100%; - display: flex; flex-direction: column; } @@ -660,14 +660,11 @@ ad-rewarded-video, ad, animation-view, audio, +button, camera, canvas, checkbox-group, -button, checkbox, -picker-view, -radio, -slider, cover-image, cover-view, custom-tab-bar, @@ -689,10 +686,13 @@ navigation-bar, navigator, open-data, page-meta, +picker-view, picker, radio-group, +radio, rich-text, scroll-view, +slider, sticky-header, sticky-section, swiper-item, diff --git a/e2e/app-marker-visual.test.ts b/e2e/app-marker-visual.test.ts new file mode 100644 index 0000000000..9312b35dee --- /dev/null +++ b/e2e/app-marker-visual.test.ts @@ -0,0 +1,43 @@ +import { PNG } from 'pngjs' +import { describe, expect, it } from 'vitest' +import { countMarkerPixelChanges, locateMarkerColor } from '../scripts/demo-visual-e2e-report/app-marker-visual' + +const color = { red: 16, green: 41, blue: 56 } +function screenshot(rectangles: number[][]) { + const image = new PNG({ width: 220, height: 160 }) + image.data.fill(255) + for (const [left, top, width, height] of rectangles) { + for (let y = top!; y < top! + height!; y++) { + for (let x = left!; x < left! + width!; x++) { + const offset = (y * image.width + x) * 4 + image.data[offset] = color.red + image.data[offset + 1] = color.green + image.data[offset + 2] = color.blue + } + } + } + return image +} + +describe('App marker visual evidence', () => { + it('separates same-color unrelated regions using declared marker geometry', () => { + const marker = locateMarkerColor(screenshot([[10, 10, 80, 20], [20, 100, 150, 10]]), color, 'w-[80px] h-[20px]') + expect(marker.matched).toBe(true) + expect(marker.bounds).toEqual({ minX: 10, minY: 10, maxX: 89, maxY: 29 }) + }) + + it('rejects absent and ambiguous markers', () => { + expect(locateMarkerColor(screenshot([]), color, 'w-[80px] h-[20px]').matched).toBe(false) + expect(locateMarkerColor(screenshot([[10, 10, 80, 20], [10, 80, 80, 20]]), color, 'w-[80px] h-[20px]').matched).toBe(false) + }) + + it('accepts same-color movement without requiring more pixels, and rejects unchanged markers', () => { + const before = screenshot([[10, 10, 80, 20]]) + const after = screenshot([[10, 50, 80, 20]]) + const a = locateMarkerColor(before, color, 'w-[80px] h-[20px]') + const b = locateMarkerColor(after, color, 'w-[80px] h-[20px]') + expect(a.matchingPixels).toBe(b.matchingPixels) + expect(countMarkerPixelChanges(before, after, color, a.bounds!, b.bounds!)).toBe(3200) + expect(countMarkerPixelChanges(before, before, color, a.bounds!, a.bounds!)).toBe(0) + }) +}) diff --git a/e2e/app-marker.test.ts b/e2e/app-marker.test.ts new file mode 100644 index 0000000000..fa3616d795 --- /dev/null +++ b/e2e/app-marker.test.ts @@ -0,0 +1,39 @@ +import { describe, expect, it } from 'vitest' +import { rewriteAppMarker } from './hbuilderx-local/app-marker' + +const anchor = 'content' +const initial = { className: 'bg-[#123456]', textClassName: 'text-white', text: 'initial' } + +describe('App 结构与视觉探针的共同身份', () => { + it('首次插入并反复替换同一个可查询节点', () => { + const source = `` + const first = rewriteAppMarker(source, [anchor], initial) + const updated = rewriteAppMarker(first, [anchor], { ...initial, text: 'updated' }) + expect(updated.match(/id="native-hmr-probe"/g)).toHaveLength(1) + expect(updated).toContain('updated') + expect(updated).not.toContain('initial') + expect(updated).toContain(anchor) + expect(updated.match(/margin-bottom: 40px/g)).toHaveLength(1) + }) + + it('替换 demo 持久探针，避免视觉测试重复插入或读取旧文字', () => { + const source = `` + const result = rewriteAppMarker(source, [], { ...initial, className: `hbuilderx-app-native-hmr-probe ${initial.className}` }) + expect(result.match(/hbuilderx-app-native-hmr-probe/g)).toHaveLength(1) + expect(result.match(/id="native-hmr-probe"/g)).toHaveLength(1) + expect(result).not.toContain('original') + }) + + it('迁移旧探针但保留相邻业务节点', () => { + const source = `` + const result = rewriteAppMarker(source, [anchor], initial) + expect(result).not.toContain('hbuilderx-app-dynamic-old') + expect(result).toContain(anchor) + }) + + it('身份歧义或锚点缺失时拒绝继续', () => { + const first = rewriteAppMarker(anchor, [anchor], initial) + expect(() => rewriteAppMarker(first + first, [anchor], initial)).toThrow('多个受管探针') + expect(() => rewriteAppMarker('