diff --git a/package-lock.json b/package-lock.json index 4975cea..f69d854 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,8 +53,8 @@ "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.11.0", "jsdom": "^24.1.3", + "less": "^4.2.0", "prettier": "^3.3.3", - "sass": "^1.79.5", "typescript": "^5.6.3", "typescript-eslint": "^8.9.0", "unplugin-auto-import": "^0.18.3", @@ -877,6 +877,8 @@ "version": "2.4.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", @@ -916,6 +918,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1891,6 +1894,8 @@ "version": "4.0.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "readdirp": "^4.0.1" }, @@ -1954,6 +1959,18 @@ "dev": true, "license": "MIT" }, + "node_modules/copy-anything": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "dev": true, + "dependencies": { + "is-what": "^3.14.1" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/copy-to-clipboard": { "version": "3.3.3", "license": "MIT", @@ -2073,6 +2090,8 @@ "version": "1.0.3", "dev": true, "license": "Apache-2.0", + "optional": true, + "peer": true, "bin": { "detect-libc": "bin/detect-libc.js" }, @@ -2117,6 +2136,19 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/errno": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "dev": true, + "optional": true, + "dependencies": { + "prr": "~1.0.1" + }, + "bin": { + "errno": "cli.js" + } + }, "node_modules/error-ex": { "version": "1.3.2", "dev": true, @@ -2676,6 +2708,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true, + "optional": true + }, "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", @@ -2744,6 +2783,19 @@ "node": ">= 4" } }, + "node_modules/image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "dev": true, + "optional": true, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/immediate": { "version": "3.0.6", "license": "MIT" @@ -2751,7 +2803,9 @@ "node_modules/immutable": { "version": "4.3.5", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/import-fresh": { "version": "3.3.0", @@ -2813,6 +2867,12 @@ "dev": true, "license": "MIT" }, + "node_modules/is-what": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", + "dev": true + }, "node_modules/isexe": { "version": "2.0.0", "dev": true, @@ -2948,6 +3008,32 @@ "dev": true, "license": "MIT" }, + "node_modules/less": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz", + "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==", + "dev": true, + "dependencies": { + "copy-anything": "^2.0.1", + "parse-node-version": "^1.0.1", + "tslib": "^2.3.0" + }, + "bin": { + "lessc": "bin/lessc" + }, + "engines": { + "node": ">=6" + }, + "optionalDependencies": { + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^3.1.0", + "source-map": "~0.6.0" + } + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -3054,6 +3140,30 @@ "@jridgewell/sourcemap-codec": "^1.5.0" } }, + "node_modules/make-dir": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dev": true, + "optional": true, + "dependencies": { + "pify": "^4.0.1", + "semver": "^5.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/make-dir/node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, + "optional": true, + "bin": { + "semver": "bin/semver" + } + }, "node_modules/match-sorter": { "version": "6.3.4", "license": "MIT", @@ -3082,6 +3192,19 @@ "node": ">=8.6" } }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true, + "optional": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/mime-db": { "version": "1.52.0", "license": "MIT", @@ -3167,6 +3290,23 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/needle": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz", + "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", + "dev": true, + "optional": true, + "dependencies": { + "iconv-lite": "^0.6.3", + "sax": "^1.2.4" + }, + "bin": { + "needle": "bin/needle" + }, + "engines": { + "node": ">= 4.4.x" + } + }, "node_modules/no-case": { "version": "3.0.4", "dev": true, @@ -3179,7 +3319,9 @@ "node_modules/node-addon-api": { "version": "7.1.1", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/node-releases": { "version": "2.0.18", @@ -3278,6 +3420,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parse-node-version": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/parse5": { "version": "7.1.2", "dev": true, @@ -3335,6 +3486,16 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true, + "optional": true, + "engines": { + "node": ">=6" + } + }, "node_modules/pkg-types": { "version": "1.2.1", "dev": true, @@ -3424,6 +3585,13 @@ "version": "1.1.0", "license": "MIT" }, + "node_modules/prr": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", + "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", + "dev": true, + "optional": true + }, "node_modules/psl": { "version": "1.9.0", "dev": true, @@ -4076,6 +4244,8 @@ "version": "4.0.2", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">= 14.16.0" }, @@ -4188,6 +4358,8 @@ "version": "1.79.5", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@parcel/watcher": "^2.4.1", "chokidar": "^4.0.0", @@ -4201,6 +4373,13 @@ "node": ">=14.0.0" } }, + "node_modules/sax": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", + "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==", + "dev": true, + "optional": true + }, "node_modules/saxes": { "version": "6.0.0", "dev": true, @@ -4273,6 +4452,16 @@ "tslib": "^2.0.3" } }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "dev": true, diff --git a/package.json b/package.json index 9e0e59d..9a415b4 100644 --- a/package.json +++ b/package.json @@ -68,8 +68,8 @@ "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.11.0", "jsdom": "^24.1.3", + "less": "^4.2.0", "prettier": "^3.3.3", - "sass": "^1.79.5", "typescript": "^5.6.3", "typescript-eslint": "^8.9.0", "unplugin-auto-import": "^0.18.3", diff --git a/src/assets/css/_mixins.scss b/src/assets/css/_mixins.scss deleted file mode 100644 index 47308ed..0000000 --- a/src/assets/css/_mixins.scss +++ /dev/null @@ -1,22 +0,0 @@ -@mixin keyframes($animationName) { - @-webkit-keyframes #{$animationName} { - @content - } - @-moz-keyframes #{$animationName} { - @content - } - @-o-keyframes #{$animationName} { - @content - } - @keyframes #{$animationName} { - @content - } -} - -@mixin unique-keyframes { - $animationName: unique-id(); - animation-name: $animationName; - @include keyframes($animationName) { - @content - } -} \ No newline at end of file diff --git a/src/assets/css/base.scss b/src/assets/css/base.less similarity index 100% rename from src/assets/css/base.scss rename to src/assets/css/base.less diff --git a/src/assets/css/common.scss b/src/assets/css/common.less similarity index 87% rename from src/assets/css/common.scss rename to src/assets/css/common.less index 3b85b09..025314e 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import '@/assets/css/constants'; #root { height: 100vh; @@ -6,8 +6,8 @@ } .body { - background-color: constants.$background-color; - color: constants.$font-main-color; + background-color: @background-color; + color: @font-main-color; user-select: none; min-width: 900px; min-height: 400px; @@ -27,7 +27,7 @@ } .background-origin { - background-color: constants.$origin-color; + background-color: @origin-color; } .center-box { diff --git a/src/assets/css/components/common/card.scss b/src/assets/css/components/common/card.less similarity index 53% rename from src/assets/css/components/common/card.scss rename to src/assets/css/components/common/card.less index 46a6be4..a19c6c0 100644 --- a/src/assets/css/components/common/card.scss +++ b/src/assets/css/components/common/card.less @@ -1,7 +1,7 @@ -@use '@/assets/css/constants' as constants; +@import '@/assets/css/constants'; .card-box { - background-color: constants.$origin-color; + background-color: @origin-color; border-radius: 8px; overflow: hidden; box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1); diff --git a/src/assets/css/components/common/fit-center.scss b/src/assets/css/components/common/fit-center.less similarity index 98% rename from src/assets/css/components/common/fit-center.scss rename to src/assets/css/components/common/fit-center.less index fd07971..e3abab9 100644 --- a/src/assets/css/components/common/fit-center.scss +++ b/src/assets/css/components/common/fit-center.less @@ -4,4 +4,4 @@ align-items: center; width: 100%; height: 100%; -} \ No newline at end of file +} diff --git a/src/assets/css/components/common/fit-fullscreen.scss b/src/assets/css/components/common/fit-fullscreen.less similarity index 97% rename from src/assets/css/components/common/fit-fullscreen.scss rename to src/assets/css/components/common/fit-fullscreen.less index 83d0ff6..f3f3a4b 100644 --- a/src/assets/css/components/common/fit-fullscreen.scss +++ b/src/assets/css/components/common/fit-fullscreen.less @@ -2,4 +2,4 @@ position: relative; width: 100%; height: 100vh; -} \ No newline at end of file +} diff --git a/src/assets/css/components/common/flex-box.scss b/src/assets/css/components/common/flex-box.less similarity index 94% rename from src/assets/css/components/common/flex-box.scss rename to src/assets/css/components/common/flex-box.less index 2926ffc..cbae3d3 100644 --- a/src/assets/css/components/common/flex-box.scss +++ b/src/assets/css/components/common/flex-box.less @@ -2,4 +2,4 @@ > * { flex: 1; } -} \ No newline at end of file +} diff --git a/src/assets/css/components/common/fullscreen-loading-mask.scss b/src/assets/css/components/common/fullscreen-loading-mask.less similarity index 99% rename from src/assets/css/components/common/fullscreen-loading-mask.scss rename to src/assets/css/components/common/fullscreen-loading-mask.less index c4458cd..2e7cb52 100644 --- a/src/assets/css/components/common/fullscreen-loading-mask.scss +++ b/src/assets/css/components/common/fullscreen-loading-mask.less @@ -7,4 +7,4 @@ height: 100%; z-index: 100; background-color: rgba(200, 200, 200, 0.2); -} \ No newline at end of file +} diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.less similarity index 83% rename from src/assets/css/components/common/hide-scrollbar.scss rename to src/assets/css/components/common/hide-scrollbar.less index 758e68f..d033853 100644 --- a/src/assets/css/components/common/hide-scrollbar.scss +++ b/src/assets/css/components/common/hide-scrollbar.less @@ -1,5 +1,5 @@ -@use '@/assets/css/constants' as constants; -@use '@/assets/css/mixins' as mixins; +@import "@/assets/css/constants"; +@import "@/assets/css/mixins"; .hide-scrollbar-mask { position: relative; @@ -41,12 +41,12 @@ width: 100%; height: 100%; border-radius: 8px; - background-color: constants.$font-secondary-color; + background-color: @font-secondary-color; transition: background-color .2s; } :hover { - background-color: constants.$font-main-color; + background-color: @font-main-color; } } @@ -55,14 +55,14 @@ opacity: 0; animation: 0.4s linear; - @include mixins.unique-keyframes { + .keyframes(m7t06K, { 0% { opacity: 0.5; } 100% { opacity: 0; } - } + }); } } diff --git a/src/assets/css/components/common/indicator.scss b/src/assets/css/components/common/indicator.less similarity index 53% rename from src/assets/css/components/common/indicator.scss rename to src/assets/css/components/common/indicator.less index be5054f..0ac17b1 100644 --- a/src/assets/css/components/common/indicator.scss +++ b/src/assets/css/components/common/indicator.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import '@/assets/css/constants'; .dot-list { display: flex; @@ -15,20 +15,16 @@ width: 10px; height: 10px; border-radius: 50%; - border: { - width: 2px; - color: constants.$font-secondary-color; - style: solid; - }; + border: 2px solid @font-secondary-color; transition: all .2s; } :hover { - background-color: constants.$focus-color; + background-color: @focus-color; } } .active > * { - background-color: constants.$font-secondary-color !important; + background-color: @font-secondary-color !important; } } diff --git a/src/assets/css/components/common/loading-mask.scss b/src/assets/css/components/common/loading-mask.less similarity index 98% rename from src/assets/css/components/common/loading-mask.scss rename to src/assets/css/components/common/loading-mask.less index 9b44a1a..bbdda27 100644 --- a/src/assets/css/components/common/loading-mask.scss +++ b/src/assets/css/components/common/loading-mask.less @@ -5,4 +5,4 @@ width: 100%; height: 100%; z-index: 100; -} \ No newline at end of file +} diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.less similarity index 76% rename from src/assets/css/components/common/sidebar.scss rename to src/assets/css/components/common/sidebar.less index 08fe6e5..5c9a44a 100644 --- a/src/assets/css/components/common/sidebar.scss +++ b/src/assets/css/components/common/sidebar.less @@ -1,5 +1,5 @@ -@use "@/assets/css/constants" as constants; -@use "@/assets/css/mixins" as mixins; +@import "@/assets/css/constants"; +@import "@/assets/css/mixins"; .sidebar { display: flex; @@ -14,7 +14,7 @@ align-items: center; font-weight: bold; padding: 10px 14px; - color: constants.$main-color; + color: @main-color; overflow: hidden; .icon-box { @@ -24,7 +24,7 @@ padding: 10px; width: 40px; height: 40px; - font-size: constants.$SIZE_ICON_SM; + font-size: @SIZE_ICON_SM; border-radius: 8px; cursor: pointer; @@ -34,7 +34,7 @@ } &:hover { - background-color: constants.$background-color; + background-color: @background-color; } } @@ -79,7 +79,7 @@ padding: 0 10px; width: 40px; height: 40px; - font-size: constants.$SIZE_ICON_SM; + font-size: @SIZE_ICON_SM; cursor: pointer; img { @@ -93,7 +93,7 @@ height: 100%; width: 100%; transition: all 0.2s; - background-color: constants.$origin-color; + background-color: @origin-color; .text { flex: 1; @@ -104,11 +104,11 @@ } &.active { - color: constants.$origin-color; - background-color: constants.$main-color; + color: @origin-color; + background-color: @main-color; img { - filter: drop-shadow(1000px 0 0 constants.$origin-color); + filter: drop-shadow(1000px 0 0 @origin-color); transform: translate(-1000px); } } @@ -121,7 +121,7 @@ padding-left: 10px; z-index: 10000; animation: 0.1s ease forwards; - @include mixins.unique-keyframes { + .keyframes(XxrGiu, { 0% { transform: translateX(0); opacity: 1; @@ -130,16 +130,16 @@ transform: translateX(-10px); opacity: 0; } - } + }); .content { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px; - background-color: constants.$origin-color; + background-color: @origin-color; border-radius: 8px; - box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1); + box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1); .item { border-radius: 8px; @@ -157,13 +157,13 @@ } &.active { - color: constants.$origin-color; - background-color: constants.$main-color; + color: @origin-color; + background-color: @main-color; } } &:hover a:not(.active) { - background-color: constants.$background-color; + background-color: @background-color; } } } @@ -172,14 +172,14 @@ &:hover { > .menu-bt { a:not(.active) { - background-color: constants.$background-color; + background-color: @background-color; } } .submenu { visibility: visible; animation: 0.3s ease; - @include mixins.unique-keyframes { + .keyframes(f6yTZM, { 0% { transform: translateX(-10px); opacity: 0; @@ -188,7 +188,7 @@ transform: translateX(0); opacity: 1; } - } + }); } } } @@ -196,12 +196,8 @@ .delete { .menu-bt { - border: { - width: 1px; - color: constants.$error-secondary-color; - style: dashed; - }; - filter: drop-shadow(1000px 0 0 constants.$error-secondary-color); + border: 1px dashed @error-secondary-color; + filter: drop-shadow(1000px 0 0 @error-secondary-color); transform: translate(-1000px); > a { @@ -215,11 +211,7 @@ .separate { height: 0; margin: 10px 5px; - border: { - width: 1px; - color: constants.$font-secondary-color; - style: solid; - }; + border: 1px solid @font-secondary-color; opacity: 0.4; } @@ -228,7 +220,7 @@ align-items: center; font-weight: bold; padding: 8px 14px; - color: constants.$main-color; + color: @main-color; .icon-user { display: flex; @@ -238,9 +230,9 @@ margin-left: 4px; width: 36px; height: 36px; - font-size: constants.$SIZE_ICON_XS; - border: 2px constants.$font-secondary-color solid; - color: constants.$font-secondary-color; + font-size: @SIZE_ICON_XS; + border: 2px @font-secondary-color solid; + color: @font-secondary-color; border-radius: 50%; overflow: hidden; cursor: pointer; @@ -255,26 +247,26 @@ flex: 1; padding-left: 10px; font-size: 1.4em; - color: constants.$font-main-color; + color: @font-main-color; user-select: text; overflow: hidden; text-overflow: ellipsis; a { - color: constants.$main-color; + color: @main-color; text-decoration: underline; } } .icon-exit { - font-size: constants.$SIZE_ICON_XS; - color: constants.$error-color; + font-size: @SIZE_ICON_XS; + color: @error-color; padding: 6px 10px; cursor: pointer; &:hover { border-radius: 8px; - background-color: constants.$background-color; + background-color: @background-color; } } } @@ -327,14 +319,14 @@ .content { padding: 8px; border-radius: 8px; - background-color: constants.$origin-color; + background-color: @origin-color; .icon-exit { padding: 4px 8px; &:hover { border-radius: 8px; - background-color: constants.$background-color; + background-color: @background-color; } } } @@ -347,7 +339,7 @@ &:hover .submenu-exit { display: block; animation: 0.3s ease; - @include mixins.unique-keyframes { + .keyframes(mfdCZC, { 0% { transform: translateX(-10px); opacity: 0; @@ -356,7 +348,7 @@ transform: translateX(0); opacity: 1; } - } + }); } } } diff --git a/src/assets/css/components/common/url-card.scss b/src/assets/css/components/common/url-card.less similarity index 71% rename from src/assets/css/components/common/url-card.scss rename to src/assets/css/components/common/url-card.less index 8110115..4cda414 100644 --- a/src/assets/css/components/common/url-card.scss +++ b/src/assets/css/components/common/url-card.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-url-card] { cursor: pointer; @@ -16,8 +16,8 @@ } .icon { - color: constants.$production-color; - font-size: constants.$SIZE_ICON_XL; + color: @production-color; + font-size: @SIZE_ICON_XL; } .text { diff --git a/src/assets/css/components/dnd/drag-handle.scss b/src/assets/css/components/dnd/drag-handle.less similarity index 100% rename from src/assets/css/components/dnd/drag-handle.scss rename to src/assets/css/components/dnd/drag-handle.less diff --git a/src/assets/css/components/dnd/drop-mask.less b/src/assets/css/components/dnd/drop-mask.less new file mode 100644 index 0000000..7f3f8f1 --- /dev/null +++ b/src/assets/css/components/dnd/drop-mask.less @@ -0,0 +1,22 @@ +@import "@/assets/css/constants"; + +[data-component=component-drop-mask] { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + padding: 0 10px 10px; + background-color: @origin-color; + + .drop-mask-border { + display: flex; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + border: 2px dashed @font-secondary-color; + border-radius: 8px; + font-size: 1.8em; + } +} diff --git a/src/assets/css/components/dnd/drop-mask.scss b/src/assets/css/components/dnd/drop-mask.scss deleted file mode 100644 index f721b1b..0000000 --- a/src/assets/css/components/dnd/drop-mask.scss +++ /dev/null @@ -1,30 +0,0 @@ -@use "@/assets/css/constants" as constants; - -[data-component=component-drop-mask] { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - padding: { - left: 10px; - right: 10px; - bottom: 10px; - }; - background-color: constants.$origin-color; - - .drop-mask-border { - display: flex; - width: 100%; - height: 100%; - justify-content: center; - align-items: center; - border: { - width: 2px; - color: constants.$font-secondary-color; - style: dashed; - radius: 8px; - }; - font-size: 1.8em; - } -} diff --git a/src/assets/css/components/system/setting-card.scss b/src/assets/css/components/system/setting-card.less similarity index 64% rename from src/assets/css/components/system/setting-card.scss rename to src/assets/css/components/system/setting-card.less index 4703dc8..39f5736 100644 --- a/src/assets/css/components/system/setting-card.scss +++ b/src/assets/css/components/system/setting-card.less @@ -1,17 +1,17 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-setting-card] { .settings-card { padding: 20px; gap: 20px; - color: constants.$main-color; + color: @main-color; > .head { align-items: center; gap: 5px; .icon { - font-size: constants.$SIZE_ICON_MD; + font-size: @SIZE_ICON_MD; flex: 0 0 auto; } @@ -22,11 +22,11 @@ :nth-child(n+3) { flex: 0 0 auto; - color: constants.$font-main-color; + color: @font-main-color; } .bt-save { - color: constants.$main-color; + color: @main-color; } } } diff --git a/src/assets/css/components/system/statistics-card.scss b/src/assets/css/components/system/statistics-card.less similarity index 80% rename from src/assets/css/components/system/statistics-card.scss rename to src/assets/css/components/system/statistics-card.less index 600a45f..e1c726f 100644 --- a/src/assets/css/components/system/statistics-card.scss +++ b/src/assets/css/components/system/statistics-card.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-statistics-card] { .statistics-card { @@ -8,10 +8,10 @@ > .head { align-items: center; gap: 5px; - color: constants.$main-color; + color: @main-color; .icon { - font-size: constants.$SIZE_ICON_MD; + font-size: @SIZE_ICON_MD; flex: 0 0 auto; } @@ -22,7 +22,7 @@ :nth-child(n+3) { flex: 0 0 auto; - color: constants.$font-main-color; + color: @font-main-color; } } @@ -33,11 +33,11 @@ .key, .value-percent { flex: 0 0 auto; - color: constants.$font-main-color; + color: @font-main-color; } .value { - color: constants.$font-secondary-color; + color: @font-secondary-color; overflow: hidden; > * { diff --git a/src/assets/css/components/tools/load-more-card.scss b/src/assets/css/components/tools/load-more-card.less similarity index 75% rename from src/assets/css/components/tools/load-more-card.scss rename to src/assets/css/components/tools/load-more-card.less index aa3d7ab..716f4bf 100644 --- a/src/assets/css/components/tools/load-more-card.scss +++ b/src/assets/css/components/tools/load-more-card.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-load-more-card] { cursor: pointer; @@ -11,8 +11,8 @@ .icon { display: flex; - font-size: constants.$SIZE_ICON_XXL; - color: constants.$production-color; + font-size: @SIZE_ICON_XXL; + color: @production-color; align-items: center; transform: translateY(-20px); } diff --git a/src/assets/css/components/tools/repository-card.scss b/src/assets/css/components/tools/repository-card.less similarity index 80% rename from src/assets/css/components/tools/repository-card.scss rename to src/assets/css/components/tools/repository-card.less index b563c6f..b106fc4 100644 --- a/src/assets/css/components/tools/repository-card.scss +++ b/src/assets/css/components/tools/repository-card.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-repository-card] { height: 100%; @@ -34,12 +34,12 @@ display: flex; padding-top: 10px; padding-bottom: 20px; - color: constants.$production-color; - font-size: constants.$SIZE_ICON_XL; + color: @production-color; + font-size: @SIZE_ICON_XL; justify-content: center; img { - width: constants.$SIZE_ICON_XL; + width: @SIZE_ICON_XL; } } diff --git a/src/assets/css/components/tools/store-card.scss b/src/assets/css/components/tools/store-card.less similarity index 80% rename from src/assets/css/components/tools/store-card.scss rename to src/assets/css/components/tools/store-card.less index e4ad6e1..ef19aa4 100644 --- a/src/assets/css/components/tools/store-card.scss +++ b/src/assets/css/components/tools/store-card.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-store-card] { height: 100%; @@ -35,7 +35,7 @@ z-index: 100; > *:hover { - color: constants.$font-secondary-color; + color: @font-secondary-color; } } } @@ -44,12 +44,12 @@ display: flex; padding-top: 10px; padding-bottom: 20px; - color: constants.$production-color; - font-size: constants.$SIZE_ICON_XL; + color: @production-color; + font-size: @SIZE_ICON_XL; justify-content: center; img { - width: constants.$SIZE_ICON_XL; + width: @SIZE_ICON_XL; } } @@ -62,12 +62,8 @@ } .tool-desc { - margin: { - top: 10px; - left: auto; - right: auto; - }; - color: constants.$font-secondary-color; + margin: 10px auto 0; + color: @font-secondary-color; overflow: hidden; text-overflow: ellipsis; max-height: 40px; diff --git a/src/assets/css/constants.less b/src/assets/css/constants.less new file mode 100644 index 0000000..a34f019 --- /dev/null +++ b/src/assets/css/constants.less @@ -0,0 +1,22 @@ +@origin-color: white; +@production-color: #4E47BB; +@main-color: @production-color; +@secondary-color: #BAB8E5; +@error-color: #FF4D4F; +@error-secondary-color: #FF7875; +@blue-color: #1677FF; +@active-color: #EBECFD; +@background-color: #F5F5F5; +@font-main-color: #4D4D4D; +@font-secondary-color: #9E9E9E; +@focus-color: #DDDDDD; +@divide-color: rgba(204, 204, 204, 0.66); +@border-color: rgba(204, 204, 204, 0.33); +@url-color: rgba(102, 102, 102, .8); +@url-active-color: #ccc; +@SIZE_ICON_XS: 16px; +@SIZE_ICON_SM: 20px; +@SIZE_ICON_MD: 24px; +@SIZE_ICON_LG: 32px; +@SIZE_ICON_XL: 64px; +@SIZE_ICON_XXL: 96px; diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss deleted file mode 100644 index aa21c9f..0000000 --- a/src/assets/css/constants.scss +++ /dev/null @@ -1,22 +0,0 @@ -$origin-color: white; -$production-color: #4E47BB; -$main-color: $production-color; -$secondary-color: #BAB8E5; -$error-color: #FF4D4F; -$error-secondary-color: #FF7875; -$blue-color: #1677FF; -$active-color: #EBECFD; -$background-color: #F5F5F5; -$font-main-color: #4D4D4D; -$font-secondary-color: #9E9E9E; -$focus-color: #DDDDDD; -$divide-color: rgba(204, 204, 204, 0.66); -$border-color: rgba(204, 204, 204, 0.33); -$url-color: rgba(102, 102, 102, .8); -$url-active-color: #ccc; -$SIZE_ICON_XS: 16px; -$SIZE_ICON_SM: 20px; -$SIZE_ICON_MD: 24px; -$SIZE_ICON_LG: 32px; -$SIZE_ICON_XL: 64px; -$SIZE_ICON_XXL: 96px; \ No newline at end of file diff --git a/src/assets/css/mixins.less b/src/assets/css/mixins.less new file mode 100644 index 0000000..a98a3c8 --- /dev/null +++ b/src/assets/css/mixins.less @@ -0,0 +1,15 @@ +.keyframes(@animationName, @content) { + animation-name: @animationName; + @-webkit-keyframes @animationName { + @content(); + } + @-moz-keyframes @animationName { + @content(); + } + @-o-keyframes @animationName { + @content(); + } + @keyframes @animationName { + @content(); + } +} diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.less similarity index 86% rename from src/assets/css/pages/sign.scss rename to src/assets/css/pages/sign.less index 62748e0..ce77959 100644 --- a/src/assets/css/pages/sign.scss +++ b/src/assets/css/pages/sign.less @@ -1,5 +1,4 @@ -@use "@/assets/css/mixins" as mixins; -@use "@/assets/css/constants" as constants; +@import "@/assets/css/constants"; [data-component=sign] { background-color: #D2D0DD; @@ -10,12 +9,12 @@ } a:hover { - color: constants.$production-color; + color: @production-color; } .sign-box { position: relative; - background-color: constants.$origin-color; + background-color: @origin-color; width: 900px; height: 600px; overflow: hidden; @@ -42,7 +41,7 @@ .primary { font-size: 2.4em; font-weight: bolder; - color: constants.$production-color; + color: @production-color; } .secondary { @@ -71,7 +70,7 @@ text-align: center; a { - color: constants.$production-color; + color: @production-color; } } } @@ -79,7 +78,7 @@ .verify { a { - color: constants.$production-color; + color: @production-color; font-weight: bolder; } } @@ -120,7 +119,7 @@ position: absolute; width: 128px; height: 128px; - background-color: constants.$production-color; + background-color: @production-color; border-radius: 50%; bottom: 0; left: 50%; diff --git a/src/assets/css/pages/system-framework.less b/src/assets/css/pages/system-framework.less new file mode 100644 index 0000000..a39df77 --- /dev/null +++ b/src/assets/css/pages/system-framework.less @@ -0,0 +1,13 @@ +@import "@/assets/css/constants"; + +[data-component=system-framework] { + .left-panel { + background-color: @origin-color; + } + + .right-panel { + flex: 1; + width: 0; + background-color: @background-color; + } +} diff --git a/src/assets/css/pages/system-framework.scss b/src/assets/css/pages/system-framework.scss deleted file mode 100644 index 4f8ea07..0000000 --- a/src/assets/css/pages/system-framework.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use "@/assets/css/constants" as constants; -@use "@/assets/css/mixins" as mixins; - -[data-component=system-framework] { - .left-panel { - background-color: constants.$origin-color; - } - - .right-panel { - flex: 1; - width: 0; - background-color: constants.$background-color; - } -} diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.less similarity index 85% rename from src/assets/css/pages/system/index.scss rename to src/assets/css/pages/system/index.less index 5dbfd3f..d10c4b8 100644 --- a/src/assets/css/pages/system/index.scss +++ b/src/assets/css/pages/system/index.less @@ -1,5 +1,3 @@ -@use '@/assets/css/constants' as constants; - [data-component=system] { .root-content { padding: 20px; diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.less similarity index 79% rename from src/assets/css/pages/system/settings.scss rename to src/assets/css/pages/system/settings.less index 7db4529..64c0e64 100644 --- a/src/assets/css/pages/system/settings.scss +++ b/src/assets/css/pages/system/settings.less @@ -1,5 +1,3 @@ -@use '@/assets/css/constants' as constants; - [data-component=system-settings] { .root-content { padding: 20px; diff --git a/src/assets/css/pages/system/statistics.scss b/src/assets/css/pages/system/statistics.less similarity index 82% rename from src/assets/css/pages/system/statistics.scss rename to src/assets/css/pages/system/statistics.less index 40e15a5..3b6dc2f 100644 --- a/src/assets/css/pages/system/statistics.scss +++ b/src/assets/css/pages/system/statistics.less @@ -1,5 +1,3 @@ -@use '@/assets/css/constants' as constants; - [data-component=system-statistics] { .root-content { padding: 20px; diff --git a/src/assets/css/pages/system/tools/base.scss b/src/assets/css/pages/system/tools/base.less similarity index 83% rename from src/assets/css/pages/system/tools/base.scss rename to src/assets/css/pages/system/tools/base.less index 8133ee5..cc874ae 100644 --- a/src/assets/css/pages/system/tools/base.scss +++ b/src/assets/css/pages/system/tools/base.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=system-tools-base] { .root-content { @@ -9,7 +9,7 @@ .has-edited::after { content: '*'; - color: constants.$font-secondary-color; + color: @font-secondary-color; } >*:first-child { @@ -30,7 +30,7 @@ position: absolute; top: 10px; right: 10px; - background-color: constants.$font-secondary-color; + background-color: @font-secondary-color; width: 32px; height: 32px; border-radius: 50%; diff --git a/src/assets/css/pages/system/tools/code.scss b/src/assets/css/pages/system/tools/code.less similarity index 100% rename from src/assets/css/pages/system/tools/code.scss rename to src/assets/css/pages/system/tools/code.less diff --git a/src/assets/css/pages/system/tools/execute.scss b/src/assets/css/pages/system/tools/execute.less similarity index 100% rename from src/assets/css/pages/system/tools/execute.scss rename to src/assets/css/pages/system/tools/execute.less diff --git a/src/assets/css/pages/system/tools/template.scss b/src/assets/css/pages/system/tools/template.less similarity index 83% rename from src/assets/css/pages/system/tools/template.scss rename to src/assets/css/pages/system/tools/template.less index 04b9f99..9d63a6f 100644 --- a/src/assets/css/pages/system/tools/template.scss +++ b/src/assets/css/pages/system/tools/template.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=system-tools-template] { .root-content { @@ -9,7 +9,7 @@ .has-edited::after { content: '*'; - color: constants.$font-secondary-color; + color: @font-secondary-color; } >*:first-child { @@ -30,7 +30,7 @@ position: absolute; top: 10px; right: 10px; - background-color: constants.$font-secondary-color; + background-color: @font-secondary-color; width: 32px; height: 32px; border-radius: 50%; diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.less similarity index 56% rename from src/assets/css/pages/tools-framework.scss rename to src/assets/css/pages/tools-framework.less index 9fd7751..be45eb0 100644 --- a/src/assets/css/pages/tools-framework.scss +++ b/src/assets/css/pages/tools-framework.less @@ -1,9 +1,8 @@ -@use "@/assets/css/constants" as constants; -@use "@/assets/css/mixins" as mixins; +@import "@/assets/css/constants"; [data-component=tools-framework] { .left-panel { - background-color: constants.$origin-color; + background-color: @origin-color; .menu-droppable { display: flex; @@ -17,6 +16,6 @@ .right-panel { flex: 1; width: 0; - background-color: constants.$background-color; + background-color: @background-color; } } diff --git a/src/assets/css/pages/tools/create.scss b/src/assets/css/pages/tools/create.less similarity index 80% rename from src/assets/css/pages/tools/create.scss rename to src/assets/css/pages/tools/create.less index 5a9e83c..26ee99e 100644 --- a/src/assets/css/pages/tools/create.scss +++ b/src/assets/css/pages/tools/create.less @@ -1,5 +1,4 @@ -@use "@/assets/css/mixins" as mixins; -@use "@/assets/css/constants" as constants; +@import "@/assets/css/constants"; [data-component=tools-create] { .root-content { @@ -22,7 +21,7 @@ justify-content: center; align-items: center; font-size: 1.6em; - color: constants.$production-color; + color: @production-color; font-weight: bolder; } } @@ -33,7 +32,7 @@ .help { margin-left: 6px; - color: constants.$font-main-color; + color: @font-main-color; font-size: 0.8em; } @@ -52,7 +51,7 @@ .no-preview { font-weight: bolder; - color: constants.$font-secondary-color; + color: @font-secondary-color; font-size: 1.4em; } } diff --git a/src/assets/css/pages/tools/edit.scss b/src/assets/css/pages/tools/edit.less similarity index 100% rename from src/assets/css/pages/tools/edit.scss rename to src/assets/css/pages/tools/edit.less diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.less similarity index 88% rename from src/assets/css/pages/tools/index.scss rename to src/assets/css/pages/tools/index.less index f6c1481..62c0c24 100644 --- a/src/assets/css/pages/tools/index.scss +++ b/src/assets/css/pages/tools/index.less @@ -1,5 +1,4 @@ -@use "@/assets/css/mixins" as mixins; -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=tools] { .root-content { @@ -81,17 +80,13 @@ :first-child, :last-child { height: 0; - border: { - width: 1px; - color: constants.$divide-color; - style: dashed; - }; + border: 1px dashed @divide-color; } .divider-text { flex: 0 0 auto; font-size: 1.2em; - color: constants.$font-secondary-color; + color: @font-secondary-color; } } diff --git a/src/assets/css/pages/tools/source.scss b/src/assets/css/pages/tools/source.less similarity index 100% rename from src/assets/css/pages/tools/source.scss rename to src/assets/css/pages/tools/source.less diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.less similarity index 89% rename from src/assets/css/pages/tools/store.scss rename to src/assets/css/pages/tools/store.less index 4188cbe..ad564cf 100644 --- a/src/assets/css/pages/tools/store.scss +++ b/src/assets/css/pages/tools/store.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=tools-store] { .search { @@ -37,7 +37,7 @@ justify-content: center; font-size: 1.4em; font-weight: bolder; - color: constants.$font-secondary-color; + color: @font-secondary-color; } } diff --git a/src/assets/css/pages/tools/user.scss b/src/assets/css/pages/tools/user.less similarity index 82% rename from src/assets/css/pages/tools/user.scss rename to src/assets/css/pages/tools/user.less index 7c5a5e8..96c66a3 100644 --- a/src/assets/css/pages/tools/user.scss +++ b/src/assets/css/pages/tools/user.less @@ -1,12 +1,7 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=tools-store-user] .root-content { - padding: { - top: 80px; - left: 20px; - right: 20px; - bottom: 20px; - }; + padding: 80px 20px 20px 20px; .root-box { width: 100%; @@ -36,10 +31,7 @@ } .info-name { - margin: { - top: 20px; - left: 24px; - }; + margin: 20px 0 0 24px; justify-content: center; > * { @@ -49,7 +41,7 @@ .nickname { font-size: 2.4em; font-weight: bolder; - color: constants.$production-color; + color: @production-color; } .url { @@ -80,7 +72,7 @@ margin-bottom: 20px; font-size: 1.2em; font-weight: bolder; - color: constants.$font-secondary-color; + color: @font-secondary-color; } } } diff --git a/src/assets/css/pages/tools/view.scss b/src/assets/css/pages/tools/view.less similarity index 100% rename from src/assets/css/pages/tools/view.scss rename to src/assets/css/pages/tools/view.less diff --git a/src/assets/css/pages/user-framework.less b/src/assets/css/pages/user-framework.less new file mode 100644 index 0000000..ff9e98a --- /dev/null +++ b/src/assets/css/pages/user-framework.less @@ -0,0 +1,13 @@ +@import "@/assets/css/constants"; + +[data-component=user-framework] { + .left-panel { + background-color: @origin-color; + } + + .right-panel { + flex: 1; + width: 0; + background-color: @background-color; + } +} diff --git a/src/assets/css/pages/user-framework.scss b/src/assets/css/pages/user-framework.scss deleted file mode 100644 index cd21ab7..0000000 --- a/src/assets/css/pages/user-framework.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use "@/assets/css/constants" as constants; -@use "@/assets/css/mixins" as mixins; - -[data-component=user-framework] { - .left-panel { - background-color: constants.$origin-color; - } - - .right-panel { - flex: 1; - width: 0; - background-color: constants.$background-color; - } -} diff --git a/src/assets/css/pages/user/index.scss b/src/assets/css/pages/user/index.less similarity index 75% rename from src/assets/css/pages/user/index.scss rename to src/assets/css/pages/user/index.less index 1b1bce0..55cea6d 100644 --- a/src/assets/css/pages/user/index.scss +++ b/src/assets/css/pages/user/index.less @@ -1,12 +1,7 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=user] .root-content { - padding: { - top: 80px; - left: 20px; - right: 20px; - bottom: 20px; - }; + padding: 80px 20px 20px 20px; .card-box { width: 100%; @@ -17,20 +12,14 @@ padding-bottom: 20px; > :not(:first-child) { - padding: { - left: 60px; - right: 60px; - }; + padding: 0 60px; } .divide { height: 1px; width: calc(100% - 120px); - background-color: constants.$divide-color; - margin: { - left: 60px; - right: 60px; - }; + background-color: @divide-color; + margin: 0 60px; } .info { @@ -53,10 +42,7 @@ } .info-name { - margin: { - top: 20px; - left: 24px; - }; + margin: 20px 0 0 24px; justify-content: center; > * { @@ -66,7 +52,7 @@ .nickname { font-size: 2.4em; font-weight: bolder; - color: constants.$production-color; + color: @production-color; } .url { @@ -83,9 +69,7 @@ align-items: center; .content { - padding: { - bottom: 30px; - }; + padding-bottom: 30px; justify-content: space-between; align-items: center; width: 100%; @@ -107,11 +91,8 @@ .table { gap: 24px; - - padding: { - top: 30px; - bottom: 20px; - }; + padding-top: 30px; + padding-bottom: 20px; .row { > * { diff --git a/src/components/Playground/CodeEditor/Editor/editor.scss b/src/components/Playground/CodeEditor/Editor/editor.less similarity index 65% rename from src/components/Playground/CodeEditor/Editor/editor.scss rename to src/components/Playground/CodeEditor/Editor/editor.less index e9f66a6..27fcffd 100644 --- a/src/components/Playground/CodeEditor/Editor/editor.scss +++ b/src/components/Playground/CodeEditor/Editor/editor.less @@ -1,23 +1,16 @@ -@mixin keyframes($animationName) { - @-webkit-keyframes #{$animationName} { - @content +.keyframes(@animationName, @content) { + animation-name: @animationName; + @-webkit-keyframes @animationName { + @content(); } - @-moz-keyframes #{$animationName} { - @content + @-moz-keyframes @animationName { + @content(); } - @-o-keyframes #{$animationName} { - @content + @-o-keyframes @animationName { + @content(); } - @keyframes #{$animationName} { - @content - } -} - -@mixin unique-keyframes { - $animationName: unique-id(); - animation-name: $animationName; - @include keyframes($animationName) { - @content + @keyframes @animationName { + @content(); } } @@ -77,15 +70,13 @@ width: 10px; height: 10px; border-radius: 50%; - border: { - top: 2px #666 solid; - bottom: 2px #ddd solid; - left: 2px #ddd solid; - right: 2px #ddd solid; - }; + border-top: 2px #666 solid; + border-right: 2px #ddd solid; + border-bottom: 2px #ddd solid; + border-left: 2px #ddd solid; animation: .6s linear infinite; - @include unique-keyframes { + .keyframes(fUHD7o, { 0% { transform: rotateZ(0); } @@ -93,6 +84,6 @@ 100% { transform: rotateZ(360deg); } - } + }); } -} \ No newline at end of file +} diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx index bb4b9db..30e8cb6 100644 --- a/src/components/Playground/CodeEditor/Editor/index.tsx +++ b/src/components/Playground/CodeEditor/Editor/index.tsx @@ -1,6 +1,6 @@ import { editor, Selection } from 'monaco-editor' import MonacoEditor, { Monaco } from '@monaco-editor/react' -import '@/components/Playground/CodeEditor/Editor/editor.scss' +import '@/components/Playground/CodeEditor/Editor/editor.less' import '@/components/Playground/CodeEditor/Editor/loader' import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared' import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files' diff --git a/src/components/Playground/CodeEditor/FileSelector/file-selector.scss b/src/components/Playground/CodeEditor/FileSelector/file-selector.less similarity index 100% rename from src/components/Playground/CodeEditor/FileSelector/file-selector.scss rename to src/components/Playground/CodeEditor/FileSelector/file-selector.less diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx index ffe35b0..49cdf6f 100644 --- a/src/components/Playground/CodeEditor/FileSelector/index.tsx +++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx @@ -1,4 +1,4 @@ -import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss' +import '@/components/Playground/CodeEditor/FileSelector/file-selector.less' import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' import FlexBox from '@/components/common/FlexBox' import { IFiles } from '@/components/Playground/shared' diff --git a/src/components/Playground/CodeEditor/code-editor.scss b/src/components/Playground/CodeEditor/code-editor.less similarity index 100% rename from src/components/Playground/CodeEditor/code-editor.scss rename to src/components/Playground/CodeEditor/code-editor.less diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx index 9116633..1cb2344 100644 --- a/src/components/Playground/CodeEditor/index.tsx +++ b/src/components/Playground/CodeEditor/index.tsx @@ -1,5 +1,5 @@ import _ from 'lodash' -import '@/components/Playground/CodeEditor/code-editor.scss' +import '@/components/Playground/CodeEditor/code-editor.less' import FlexBox from '@/components/common/FlexBox' import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared' import { diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx index 1d162ee..60acbf1 100644 --- a/src/components/Playground/Output/Preview/Render.tsx +++ b/src/components/Playground/Output/Preview/Render.tsx @@ -1,5 +1,5 @@ import { ChangeEvent } from 'react' -import '@/components/Playground/Output/Preview/render.scss' +import '@/components/Playground/Output/Preview/render.less' import { COLOR_FONT_MAIN } from '@/constants/common.constants' import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw' import HideScrollbar from '@/components/common/HideScrollbar' diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx index ea0145e..2c9b9f2 100644 --- a/src/components/Playground/Output/Preview/index.tsx +++ b/src/components/Playground/Output/Preview/index.tsx @@ -1,4 +1,4 @@ -import '@/components/Playground/Output/Preview/preview.scss' +import '@/components/Playground/Output/Preview/preview.less' import { IFiles, IImportMap } from '@/components/Playground/shared' import Compiler from '@/components/Playground/compiler' import Render from '@/components/Playground/Output/Preview/Render' diff --git a/src/components/Playground/Output/Preview/preview.scss b/src/components/Playground/Output/Preview/preview.less similarity index 100% rename from src/components/Playground/Output/Preview/preview.scss rename to src/components/Playground/Output/Preview/preview.less diff --git a/src/components/Playground/Output/Preview/render.scss b/src/components/Playground/Output/Preview/render.less similarity index 96% rename from src/components/Playground/Output/Preview/render.scss rename to src/components/Playground/Output/Preview/render.less index e39b9a8..cdda30b 100644 --- a/src/components/Playground/Output/Preview/render.scss +++ b/src/components/Playground/Output/Preview/render.less @@ -1,5 +1,3 @@ -@use '@/assets/css/constants' as constants; - [data-component=playground-output-preview-render] { border: none; height: 100%; diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx index 6883751..9378425 100644 --- a/src/components/Playground/Output/Transform/index.tsx +++ b/src/components/Playground/Output/Transform/index.tsx @@ -1,6 +1,6 @@ import MonacoEditor from '@monaco-editor/react' import { Loader } from 'esbuild-wasm' -import '@/components/Playground/Output/Transform/transform.scss' +import '@/components/Playground/Output/Transform/transform.less' import { IFile, ITheme } from '@/components/Playground/shared' import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files' import Compiler from '@/components/Playground/compiler' diff --git a/src/components/Playground/Output/Transform/transform.scss b/src/components/Playground/Output/Transform/transform.less similarity index 100% rename from src/components/Playground/Output/Transform/transform.scss rename to src/components/Playground/Output/Transform/transform.less diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx index 9e45a19..6e5a3fa 100644 --- a/src/components/Playground/index.tsx +++ b/src/components/Playground/index.tsx @@ -1,4 +1,4 @@ -import '@/components/Playground/playground.scss' +import '@/components/Playground/playground.less' import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared' import { ENTRY_FILE_NAME, diff --git a/src/components/Playground/playground.scss b/src/components/Playground/playground.less similarity index 100% rename from src/components/Playground/playground.scss rename to src/components/Playground/playground.less diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx index 1dded04..51132ab 100644 --- a/src/components/common/Card.tsx +++ b/src/components/common/Card.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' -import '@/assets/css/components/common/card.scss' +import '@/assets/css/components/common/card.less' type CardProps = DetailedHTMLProps, HTMLDivElement> diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx index a0be5ce..444264e 100644 --- a/src/components/common/FitCenter.tsx +++ b/src/components/common/FitCenter.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' -import '@/assets/css/components/common/fit-center.scss' +import '@/assets/css/components/common/fit-center.less' interface FitCenterProps extends DetailedHTMLProps, HTMLDivElement> { vertical?: boolean diff --git a/src/components/common/FitFullscreen.tsx b/src/components/common/FitFullscreen.tsx index 8d80704..772e2c0 100644 --- a/src/components/common/FitFullscreen.tsx +++ b/src/components/common/FitFullscreen.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' -import '@/assets/css/components/common/fit-fullscreen.scss' +import '@/assets/css/components/common/fit-fullscreen.less' interface FitFullscreenProps extends DetailedHTMLProps, HTMLDivElement> { diff --git a/src/components/common/FlexBox.tsx b/src/components/common/FlexBox.tsx index 58ca4d7..30ab610 100644 --- a/src/components/common/FlexBox.tsx +++ b/src/components/common/FlexBox.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' -import '@/assets/css/components/common/flex-box.scss' +import '@/assets/css/components/common/flex-box.less' interface FlexBoxProps extends DetailedHTMLProps, HTMLDivElement> { direction?: 'horizontal' | 'vertical' diff --git a/src/components/common/FullscreenLoadingMask.tsx b/src/components/common/FullscreenLoadingMask.tsx index 2c9240e..8ac2dc1 100644 --- a/src/components/common/FullscreenLoadingMask.tsx +++ b/src/components/common/FullscreenLoadingMask.tsx @@ -1,5 +1,5 @@ import Icon from '@ant-design/icons' -import '@/assets/css/components/common/fullscreen-loading-mask.scss' +import '@/assets/css/components/common/fullscreen-loading-mask.less' import { COLOR_FONT_MAIN } from '@/constants/common.constants' import FitFullscreen from '@/components/common/FitFullscreen' diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx index e064482..8c9d209 100644 --- a/src/components/common/HideScrollbar.tsx +++ b/src/components/common/HideScrollbar.tsx @@ -6,7 +6,7 @@ import { HTMLAttributes, UIEvent } from 'react' -import '@/assets/css/components/common/hide-scrollbar.scss' +import '@/assets/css/components/common/hide-scrollbar.less' interface HideScrollbarProps extends DetailedHTMLProps, HTMLDivElement> { diff --git a/src/components/common/Indicator.tsx b/src/components/common/Indicator.tsx index 2304254..7630379 100644 --- a/src/components/common/Indicator.tsx +++ b/src/components/common/Indicator.tsx @@ -1,5 +1,5 @@ import _ from 'lodash' -import '@/assets/css/components/common/indicator.scss' +import '@/assets/css/components/common/indicator.less' interface IndicatorProps { total: number diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx index 54dac5c..b9f500e 100644 --- a/src/components/common/LoadingMask.tsx +++ b/src/components/common/LoadingMask.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren, ReactNode } from 'react' import Icon from '@ant-design/icons' -import '@/assets/css/components/common/loading-mask.scss' +import '@/assets/css/components/common/loading-mask.less' import { COLOR_FONT_MAIN } from '@/constants/common.constants' interface LoadingMaskProps extends PropsWithChildren { diff --git a/src/components/common/Sidebar/index.tsx b/src/components/common/Sidebar/index.tsx index 660e062..51ce1e5 100644 --- a/src/components/common/Sidebar/index.tsx +++ b/src/components/common/Sidebar/index.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren, ReactNode } from 'react' import Icon from '@ant-design/icons' -import '@/assets/css/components/common/sidebar.scss' +import '@/assets/css/components/common/sidebar.less' import { getLocalStorage, setLocalStorage } from '@/util/browser' import Item from '@/components/common/Sidebar/Item' import ItemList from '@/components/common/Sidebar/ItemList' diff --git a/src/components/common/UrlCard.tsx b/src/components/common/UrlCard.tsx index 9e55624..28cae46 100644 --- a/src/components/common/UrlCard.tsx +++ b/src/components/common/UrlCard.tsx @@ -1,7 +1,7 @@ import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react' import Icon from '@ant-design/icons' import VanillaTilt, { TiltOptions } from 'vanilla-tilt' -import '@/assets/css/components/common/url-card.scss' +import '@/assets/css/components/common/url-card.less' import Card from '@/components/common/Card' import FlexBox from '@/components/common/FlexBox' diff --git a/src/components/dnd/DragHandle.tsx b/src/components/dnd/DragHandle.tsx index 6f27dc1..78acec1 100644 --- a/src/components/dnd/DragHandle.tsx +++ b/src/components/dnd/DragHandle.tsx @@ -1,6 +1,6 @@ import { HandleContextInst } from '@/components/dnd/HandleContext' import Icon from '@ant-design/icons' -import '@/assets/css/components/dnd/drag-handle.scss' +import '@/assets/css/components/dnd/drag-handle.less' interface DragHandleProps { padding?: string | number diff --git a/src/components/dnd/DropMask.tsx b/src/components/dnd/DropMask.tsx index 48428b8..c32d500 100644 --- a/src/components/dnd/DropMask.tsx +++ b/src/components/dnd/DropMask.tsx @@ -1,4 +1,4 @@ -import '@/assets/css/components/dnd/drop-mask.scss' +import '@/assets/css/components/dnd/drop-mask.less' import Icon from '@ant-design/icons' const DropMask = () => { diff --git a/src/components/system/SettingCard.tsx b/src/components/system/SettingCard.tsx index 874efd1..5315636 100644 --- a/src/components/system/SettingCard.tsx +++ b/src/components/system/SettingCard.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren, ReactNode } from 'react' import Icon from '@ant-design/icons' -import '@/assets/css/components/system/setting-card.scss' +import '@/assets/css/components/system/setting-card.less' import Card from '@/components/common/Card' import FlexBox from '@/components/common/FlexBox' import Permission from '@/components/common/Permission' diff --git a/src/components/system/StatisticsCard.tsx b/src/components/system/StatisticsCard.tsx index 567d6e2..34f4a18 100644 --- a/src/components/system/StatisticsCard.tsx +++ b/src/components/system/StatisticsCard.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren, ReactNode } from 'react' import Icon from '@ant-design/icons' -import '@/assets/css/components/system/statistics-card.scss' +import '@/assets/css/components/system/statistics-card.less' import Card from '@/components/common/Card' import FlexBox from '@/components/common/FlexBox' import LoadingMask from '@/components/common/LoadingMask' diff --git a/src/components/tools/LoadMoreCard.tsx b/src/components/tools/LoadMoreCard.tsx index a7c0736..8eba15e 100644 --- a/src/components/tools/LoadMoreCard.tsx +++ b/src/components/tools/LoadMoreCard.tsx @@ -1,6 +1,6 @@ import VanillaTilt from 'vanilla-tilt' import Icon from '@ant-design/icons' -import '@/assets/css/components/tools/load-more-card.scss' +import '@/assets/css/components/tools/load-more-card.less' import FlexBox from '@/components/common/FlexBox' import Card from '@/components/common/Card' diff --git a/src/components/tools/RepositoryCard.tsx b/src/components/tools/RepositoryCard.tsx index 656bcc4..19c1267 100644 --- a/src/components/tools/RepositoryCard.tsx +++ b/src/components/tools/RepositoryCard.tsx @@ -1,6 +1,6 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' import VanillaTilt, { TiltOptions } from 'vanilla-tilt' -import '@/assets/css/components/tools/repository-card.scss' +import '@/assets/css/components/tools/repository-card.less' import Card from '@/components/common/Card' import FlexBox from '@/components/common/FlexBox' import Draggable from '@/components/dnd/Draggable' @@ -24,7 +24,6 @@ interface RepositoryCardProps const RepositoryCard = ({ style, - // eslint-disable-next-line @typescript-eslint/no-unused-vars ref, icon, toolName, diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx index 3b5e112..e26e9ef 100644 --- a/src/components/tools/StoreCard.tsx +++ b/src/components/tools/StoreCard.tsx @@ -2,7 +2,7 @@ import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react' import VanillaTilt, { TiltOptions } from 'vanilla-tilt' import protocolCheck from 'custom-protocol-check' import Icon from '@ant-design/icons' -import '@/assets/css/components/tools/store-card.scss' +import '@/assets/css/components/tools/store-card.less' import { COLOR_BACKGROUND, COLOR_MAIN, COLOR_PRODUCTION } from '@/constants/common.constants' import { checkDesktop, omitText } from '@/util/common' import { getLoginStatus, getUserId } from '@/util/auth' @@ -35,7 +35,7 @@ interface StoreCardProps extends DetailedHTMLProps