diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml index dc0ce5fd4..f796c362d 100644 --- a/app/pnpm-lock.yaml +++ b/app/pnpm-lock.yaml @@ -34,8 +34,8 @@ importers: specifier: ^4.0.0 version: 4.0.0(webpack@5.99.5) css-loader: - specifier: ^6.7.1 - version: 6.11.0(webpack@5.99.5) + specifier: ^7.1.2 + version: 7.1.2(webpack@5.99.5) dayjs: specifier: ^1.11.5 version: 1.11.13 @@ -73,8 +73,8 @@ importers: specifier: ^2.3.2 version: 2.3.2 mini-css-extract-plugin: - specifier: 2.7.6 - version: 2.7.6(webpack@5.99.5) + specifier: 2.9.2 + version: 2.9.2(webpack@5.99.5) path-browserify: specifier: ^1.0.1 version: 1.0.1 @@ -82,11 +82,11 @@ importers: specifier: ^2.1.2 version: 2.1.2 sass: - specifier: ^1.53.0 - version: 1.86.3 + specifier: ^1.89.2 + version: 1.89.2 sass-loader: - specifier: ^12.6.0 - version: 12.6.0(sass@1.86.3)(webpack@5.99.5) + specifier: ^16.0.5 + version: 16.0.5(sass@1.89.2)(webpack@5.99.5) typescript: specifier: ^4.7.4 version: 4.9.5 @@ -131,8 +131,8 @@ packages: resolution: {integrity: sha512-Qkzpg2s9GnVV2I2BjRksUi43U5e6+zaQMcjoJy0C+C5oxaKl+fmckGDQFtRpZpZV0NQekuZZ+tGz7EA9TVnQtQ==} engines: {node: '>=12'} - '@electron/node-gyp@https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2': - resolution: {tarball: https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2} + '@electron/node-gyp@git+https://git@github.com:electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2': + resolution: {commit: 06b29aafb7708acef8b3669835c8a7857ebc92d2, repo: git@github.com:electron/node-gyp.git, type: git} version: 10.2.0-electron.1 engines: {node: '>=12.13.0'} hasBin: true @@ -451,42 +451,36 @@ packages: engines: {node: '>= 10.0.0'} cpu: [arm] os: [linux] - libc: [glibc] '@parcel/watcher-linux-arm-musl@2.5.1': resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==} engines: {node: '>= 10.0.0'} cpu: [arm] os: [linux] - libc: [musl] '@parcel/watcher-linux-arm64-glibc@2.5.1': resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==} engines: {node: '>= 10.0.0'} cpu: [arm64] os: [linux] - libc: [glibc] '@parcel/watcher-linux-arm64-musl@2.5.1': resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==} engines: {node: '>= 10.0.0'} cpu: [arm64] os: [linux] - libc: [musl] '@parcel/watcher-linux-x64-glibc@2.5.1': resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==} engines: {node: '>= 10.0.0'} cpu: [x64] os: [linux] - libc: [glibc] '@parcel/watcher-linux-x64-musl@2.5.1': resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==} engines: {node: '>= 10.0.0'} cpu: [x64] os: [linux] - libc: [musl] '@parcel/watcher-win32-arm64@2.5.1': resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==} @@ -1038,12 +1032,12 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} - css-loader@6.11.0: - resolution: {integrity: sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==} - engines: {node: '>= 12.13.0'} + css-loader@7.1.2: + resolution: {integrity: sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==} + engines: {node: '>= 18.12.0'} peerDependencies: '@rspack/core': 0.x || 1.x - webpack: ^5.0.0 + webpack: ^5.27.0 peerDependenciesMeta: '@rspack/core': optional: true @@ -1793,10 +1787,6 @@ packages: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} - klona@2.0.6: - resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==} - engines: {node: '>= 8'} - lazy-val@1.0.5: resolution: {integrity: sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==} @@ -1900,8 +1890,8 @@ packages: resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==} engines: {node: '>=10'} - mini-css-extract-plugin@2.7.6: - resolution: {integrity: sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==} + mini-css-extract-plugin@2.9.2: + resolution: {integrity: sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==} engines: {node: '>= 12.13.0'} peerDependencies: webpack: ^5.0.0 @@ -2348,17 +2338,17 @@ packages: sanitize-filename@1.6.3: resolution: {integrity: sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==} - sass-loader@12.6.0: - resolution: {integrity: sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==} - engines: {node: '>= 12.13.0'} + sass-loader@16.0.5: + resolution: {integrity: sha512-oL+CMBXrj6BZ/zOq4os+UECPL+bWqt6OAC6DWS8Ln8GZRcMDjlJ4JC3FBDuHJdYaFWIdKNIBYmtZtK2MaMkNIw==} + engines: {node: '>= 18.12.0'} peerDependencies: - fibers: '>= 3.1.0' - node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 + '@rspack/core': 0.x || 1.x + node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 sass: ^1.3.0 sass-embedded: '*' webpack: ^5.0.0 peerDependenciesMeta: - fibers: + '@rspack/core': optional: true node-sass: optional: true @@ -2366,9 +2356,11 @@ packages: optional: true sass-embedded: optional: true + webpack: + optional: true - sass@1.86.3: - resolution: {integrity: sha512-iGtg8kus4GrsGLRDLRBRHY9dNVA78ZaS7xr01cWnS7PEMQyFtTqBiyCrfpTYTZXRWM94akzckYjh8oADfFNTzw==} + sass@1.89.2: + resolution: {integrity: sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==} engines: {node: '>=14.0.0'} hasBin: true @@ -2803,7 +2795,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@electron/node-gyp@https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2': + '@electron/node-gyp@git+https://git@github.com:electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2': dependencies: env-paths: 2.2.1 exponential-backoff: 3.1.2 @@ -2840,7 +2832,7 @@ snapshots: '@electron/rebuild@3.7.0': dependencies: - '@electron/node-gyp': https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2 + '@electron/node-gyp': git+https://git@github.com:electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2 '@malept/cross-spawn-promise': 2.0.0 chalk: 4.1.2 debug: 4.4.0 @@ -3813,7 +3805,7 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 - css-loader@6.11.0(webpack@5.99.5): + css-loader@7.1.2(webpack@5.99.5): dependencies: icss-utils: 5.1.0(postcss@8.5.3) postcss: 8.5.3 @@ -4707,8 +4699,6 @@ snapshots: kind-of@6.0.3: {} - klona@2.0.6: {} - lazy-val@1.0.5: {} levn@0.4.1: @@ -4813,9 +4803,10 @@ snapshots: mimic-response@3.1.0: {} - mini-css-extract-plugin@2.7.6(webpack@5.99.5): + mini-css-extract-plugin@2.9.2(webpack@5.99.5): dependencies: schema-utils: 4.3.0 + tapable: 2.2.1 webpack: 5.99.5(webpack-cli@4.10.0) minimatch@10.0.1: @@ -5220,15 +5211,14 @@ snapshots: dependencies: truncate-utf8-bytes: 1.0.2 - sass-loader@12.6.0(sass@1.86.3)(webpack@5.99.5): + sass-loader@16.0.5(sass@1.89.2)(webpack@5.99.5): dependencies: - klona: 2.0.6 neo-async: 2.6.2 - webpack: 5.99.5(webpack-cli@4.10.0) optionalDependencies: - sass: 1.86.3 + sass: 1.89.2 + webpack: 5.99.5(webpack-cli@4.10.0) - sass@1.86.3: + sass@1.89.2: dependencies: chokidar: 4.0.3 immutable: 5.1.1 diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss index f67edce3a..2413f627d 100644 --- a/app/src/assets/scss/base.scss +++ b/app/src/assets/scss/base.scss @@ -34,5 +34,5 @@ @use "business/av" as *; @use "business/emojis" as *; @use "component/svg" as *; -@use "base-styles" as *; +@use "main/main" as *; @use "util/responsive" as *; // 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056 diff --git a/app/src/assets/scss/business/_card.scss b/app/src/assets/scss/business/_card.scss index 0e4b71826..248f5c9fe 100644 --- a/app/src/assets/scss/business/_card.scss +++ b/app/src/assets/scss/business/_card.scss @@ -2,7 +2,7 @@ .card { &__main { - @extend %fn__flex-column; + @extend .fn__flex-column; box-sizing: border-box; max-height: 100%; background-color: var(--b3-theme-surface); diff --git a/app/src/assets/scss/business/_search.scss b/app/src/assets/scss/business/_search.scss index baffc3af5..45ed90e7c 100644 --- a/app/src/assets/scss/business/_search.scss +++ b/app/src/assets/scss/business/_search.scss @@ -81,7 +81,7 @@ } &__history-icon { - @extend %fn__a; + @extend .fn__a; height: 42px; width: 42px; display: block; @@ -144,7 +144,7 @@ } &__rmpath { - @extend %b3-form__icon-clear; + @extend .b3-form__icon-clear; } &__tip { diff --git a/app/src/assets/scss/component/_form.scss b/app/src/assets/scss/component/_form.scss index be901af82..a3e86adc3 100644 --- a/app/src/assets/scss/component/_form.scss +++ b/app/src/assets/scss/component/_form.scss @@ -1,17 +1,3 @@ -%b3-form__icon-clear { - position: absolute; - height: 18px; - width: 16px; - opacity: .68; - transition: var(--b3-transition); - right: 0; - cursor: pointer; - - &:hover { - opacity: 1; - } -} - .b3-form { &__space { margin: 16px 24px; @@ -61,7 +47,17 @@ } &__icon-clear { - @extend %b3-form__icon-clear; + position: absolute; + height: 18px; + width: 16px; + opacity: .68; + transition: var(--b3-transition); + right: 0; + cursor: pointer; + + &:hover { + opacity: 1; + } } // repo password & av description diff --git a/app/src/assets/scss/component/_list.scss b/app/src/assets/scss/component/_list.scss index c9450656f..4d6745ae2 100644 --- a/app/src/assets/scss/component/_list.scss +++ b/app/src/assets/scss/component/_list.scss @@ -1,32 +1,5 @@ @use "../util/mixin"; -%b3-list-item__icon { - svg, img { - height: 16px; - width: 16px; - color: var(--b3-theme-on-surface); - } - - text-align: center; - font-size: 14px; - font-family: var(--b3-font-family-emoji); - margin-right: 4px; - line-height: 22px; - transition: var(--b3-transition); - height: 22px; - padding: 0 4px; - flex-shrink: 0; - border-radius: var(--b3-border-radius); - display: flex; - align-items: center; - justify-content: center; - - &:hover { - color: var(--b3-theme-on-background); - background-color: var(--b3-list-icon-hover); - } -} - .b3-list { mark { background-color: var(--b3-protyle-inline-mark-background); @@ -185,7 +158,30 @@ } &__icon { - @extend %b3-list-item__icon; + svg, img { + height: 16px; + width: 16px; + color: var(--b3-theme-on-surface); + } + + text-align: center; + font-size: 14px; + font-family: var(--b3-font-family-emoji); + margin-right: 4px; + line-height: 22px; + transition: var(--b3-transition); + height: 22px; + padding: 0 4px; + flex-shrink: 0; + border-radius: var(--b3-border-radius); + display: flex; + align-items: center; + justify-content: center; + + &:hover { + color: var(--b3-theme-on-background); + background-color: var(--b3-list-icon-hover); + } } &__hinttext { diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss index afa87216d..168301387 100644 --- a/app/src/assets/scss/component/_menu.scss +++ b/app/src/assets/scss/component/_menu.scss @@ -312,7 +312,7 @@ } &__avemoji { - @extend %b3-list-item__icon; + @extend .b3-list-item__icon; align-self: center; margin-left: -4px; font-size: 14px; diff --git a/app/src/assets/scss/component/_text-field.scss b/app/src/assets/scss/component/_text-field.scss index 93bc86436..938ea0698 100644 --- a/app/src/assets/scss/component/_text-field.scss +++ b/app/src/assets/scss/component/_text-field.scss @@ -1,4 +1,4 @@ -%b3-text-field { +.b3-text-field { border: 0; border-radius: var(--b3-border-radius); box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface); @@ -33,7 +33,3 @@ box-shadow: 0 0 0; } } - -.b3-text-field { - @extend %b3-text-field; -} diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss index 326f11676..88eb2678e 100644 --- a/app/src/assets/scss/component/_typography.scss +++ b/app/src/assets/scss/component/_typography.scss @@ -263,7 +263,7 @@ code:not(.hljs), span[data-type~="code"] { - @extend %fn__code; + @extend .fn__code; tab-size: 4; } diff --git a/app/src/assets/scss/_base-styles.scss b/app/src/assets/scss/main/_main.scss similarity index 99% rename from app/src/assets/scss/_base-styles.scss rename to app/src/assets/scss/main/_main.scss index b437e90c3..2780ec412 100644 --- a/app/src/assets/scss/_base-styles.scss +++ b/app/src/assets/scss/main/_main.scss @@ -1,5 +1,3 @@ -@use "util/mixin" as *; - /* .status: 2 diff --git a/app/src/assets/scss/_mobile-styles.scss b/app/src/assets/scss/main/_mobile.scss similarity index 99% rename from app/src/assets/scss/_mobile-styles.scss rename to app/src/assets/scss/main/_mobile.scss index 41868eb7c..bb86ff8c6 100644 --- a/app/src/assets/scss/_mobile-styles.scss +++ b/app/src/assets/scss/main/_mobile.scss @@ -1,5 +1,5 @@ -@use "util/mixin"; -@use "util/function"; +@use "../util/mixin"; +@use "../util/function"; .block__popover { width: 80vw; @@ -462,7 +462,7 @@ width: 100%; box-sizing: border-box; background-color: var(--b3-theme-background); - @extend %fn__ellipsis; + @extend .fn__ellipsis; z-index: 2; } diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss index 9da8d54c9..5336c05bc 100644 --- a/app/src/assets/scss/mobile.scss +++ b/app/src/assets/scss/mobile.scss @@ -28,5 +28,5 @@ @use "business/search" as *; @use "business/emojis" as *; @use "component/svg" as *; -@use "mobile-styles" as *; +@use "main/mobile" as *; @use "util/responsive" as *; diff --git a/app/src/assets/scss/pickr/pcr.scss b/app/src/assets/scss/pickr/pcr.scss index c3d0687cb..ac92b7e61 100644 --- a/app/src/assets/scss/pickr/pcr.scss +++ b/app/src/assets/scss/pickr/pcr.scss @@ -6,7 +6,7 @@ border-radius: var(--b3-border-radius); .pcr-interaction .pcr-result { - @extend %b3-text-field; + @extend .b3-text-field; background: transparent; font-size: 12px; } diff --git a/app/src/assets/scss/util/_function.scss b/app/src/assets/scss/util/_function.scss index dce130b76..5386f99e9 100644 --- a/app/src/assets/scss/util/_function.scss +++ b/app/src/assets/scss/util/_function.scss @@ -1,46 +1,13 @@ @use "mixin"; -%fn { - &__ellipsis { - @include mixin.text-clamp(1); - display: block; // 集市挂件名称过长遮挡星标 https://github.com/siyuan-note/siyuan/issues/4782 - } - - &__flex-column { - min-height: 100%; - display: flex; - flex-direction: column; - } - - &__a { - color: var(--b3-theme-on-surface); - cursor: pointer; - - &:hover { - color: var(--b3-theme-on-background); - } - } - - &__code { - padding: .2em .4em; - margin: 0; - font-size: 85%; - border-radius: var(--b3-border-radius); - font-family: var(--b3-font-family-code); - word-break: break-word; - background-size: 20px 20px; - white-space: pre-wrap; - background-color: var(--b3-protyle-code-background); - } -} - .fn { &__hidescrollbar::-webkit-scrollbar { display: none; } &__ellipsis { - @extend %fn__ellipsis; + @include mixin.text-clamp(1); + display: block; // 集市挂件名称过长遮挡星标 https://github.com/siyuan-note/siyuan/issues/4782 } &__space { @@ -87,7 +54,9 @@ } &-column { - @extend %fn__flex-column; + min-height: 100%; + display: flex; + flex-direction: column; } &-shrink { @@ -116,7 +85,12 @@ } &__a { - @extend %fn__a; + color: var(--b3-theme-on-surface); + cursor: pointer; + + &:hover { + color: var(--b3-theme-on-background); + } } &__block { @@ -153,7 +127,15 @@ } &__code { - @extend %fn__code; + padding: .2em .4em; + margin: 0; + font-size: 85%; + border-radius: var(--b3-border-radius); + font-family: var(--b3-font-family-code); + word-break: break-word; + background-size: 20px 20px; + white-space: pre-wrap; + background-color: var(--b3-protyle-code-background); } &__kbd {