From c1cbb45b3487017ea32568bd733a82110b79951c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?= Date: Sat, 21 Mar 2026 15:59:59 +0800 Subject: [PATCH] =?UTF-8?q?scss=E6=9B=BF=E6=8D=A2=E4=B8=BAless?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/yilia/package-lock.json | 718 ++++++++---------- themes/yilia/package.json | 4 +- themes/yilia/source-src/css/_core.less | 6 + themes/yilia/source-src/css/_core.scss | 7 - .../css/{archive.scss => archive.less} | 66 +- ...{article-inner.scss => article-inner.less} | 72 +- .../{article-main.scss => article-main.less} | 42 +- .../{article-nav.scss => article-nav.less} | 2 +- .../source-src/css/{aside.scss => aside.less} | 10 +- .../yilia/source-src/css/core/_animation.less | 94 +++ .../yilia/source-src/css/core/_animation.scss | 328 -------- .../source-src/css/core/_media-queries.scss | 247 ------ themes/yilia/source-src/css/core/_mixin.less | 409 ++++++++++ themes/yilia/source-src/css/core/_mixin.scss | 694 ----------------- .../css/core/{_reset.scss => _reset.less} | 124 +-- .../yilia/source-src/css/core/_variables.less | 72 ++ .../yilia/source-src/css/core/_variables.scss | 72 -- themes/yilia/source-src/css/font-awsome.css | 2 +- themes/yilia/source-src/css/footer.less | 17 + themes/yilia/source-src/css/footer.scss | 17 - themes/yilia/source-src/css/grid.less | 58 ++ themes/yilia/source-src/css/grid.scss | 58 -- .../css/{highlight.scss => highlight.less} | 2 +- themes/yilia/source-src/css/left.less | 120 +++ themes/yilia/source-src/css/left.scss | 120 --- .../source-src/css/{main.scss => main.less} | 4 +- ...{mobile-slider.scss => mobile-slider.less} | 8 +- .../css/{mobile.scss => mobile.less} | 38 +- themes/yilia/source-src/css/night.less | 183 +++++ themes/yilia/source-src/css/night.scss | 149 ---- themes/yilia/source-src/css/page.less | 39 + themes/yilia/source-src/css/page.scss | 39 - .../page/{categories.scss => categories.less} | 10 +- .../page/{photo-wall.scss => photo-wall.less} | 4 +- .../css/{reward.scss => reward.less} | 12 +- themes/yilia/source-src/css/scroll.less | 65 ++ themes/yilia/source-src/css/scroll.scss | 65 -- .../source-src/css/{share.scss => share.less} | 16 +- .../css/{social.scss => social.less} | 64 +- themes/yilia/source-src/css/tags.less | 120 +++ themes/yilia/source-src/css/tags.scss | 95 --- .../source-src/css/{tools.scss => tools.less} | 98 ++- .../css/{tooltip.scss => tooltip.less} | 32 +- .../source-src/css/{waifu.scss => waifu.less} | 16 +- themes/yilia/source-src/js/main.js | 2 +- themes/yilia/webpack.config.js | 4 +- 46 files changed, 1801 insertions(+), 2623 deletions(-) create mode 100644 themes/yilia/source-src/css/_core.less delete mode 100644 themes/yilia/source-src/css/_core.scss rename themes/yilia/source-src/css/{archive.scss => archive.less} (69%) rename themes/yilia/source-src/css/{article-inner.scss => article-inner.less} (75%) rename themes/yilia/source-src/css/{article-main.scss => article-main.less} (69%) rename themes/yilia/source-src/css/{article-nav.scss => article-nav.less} (99%) rename themes/yilia/source-src/css/{aside.scss => aside.less} (93%) create mode 100644 themes/yilia/source-src/css/core/_animation.less delete mode 100644 themes/yilia/source-src/css/core/_animation.scss delete mode 100644 themes/yilia/source-src/css/core/_media-queries.scss create mode 100644 themes/yilia/source-src/css/core/_mixin.less delete mode 100644 themes/yilia/source-src/css/core/_mixin.scss rename themes/yilia/source-src/css/core/{_reset.scss => _reset.less} (63%) create mode 100644 themes/yilia/source-src/css/core/_variables.less delete mode 100644 themes/yilia/source-src/css/core/_variables.scss create mode 100644 themes/yilia/source-src/css/footer.less delete mode 100644 themes/yilia/source-src/css/footer.scss create mode 100644 themes/yilia/source-src/css/grid.less delete mode 100644 themes/yilia/source-src/css/grid.scss rename themes/yilia/source-src/css/{highlight.scss => highlight.less} (99%) create mode 100644 themes/yilia/source-src/css/left.less delete mode 100644 themes/yilia/source-src/css/left.scss rename themes/yilia/source-src/css/{main.scss => main.less} (90%) rename themes/yilia/source-src/css/{mobile-slider.scss => mobile-slider.less} (88%) rename themes/yilia/source-src/css/{mobile.scss => mobile.less} (94%) create mode 100644 themes/yilia/source-src/css/night.less delete mode 100644 themes/yilia/source-src/css/night.scss create mode 100644 themes/yilia/source-src/css/page.less delete mode 100644 themes/yilia/source-src/css/page.scss rename themes/yilia/source-src/css/page/{categories.scss => categories.less} (84%) rename themes/yilia/source-src/css/page/{photo-wall.scss => photo-wall.less} (95%) rename themes/yilia/source-src/css/{reward.scss => reward.less} (74%) create mode 100644 themes/yilia/source-src/css/scroll.less delete mode 100644 themes/yilia/source-src/css/scroll.scss rename themes/yilia/source-src/css/{share.scss => share.less} (85%) rename themes/yilia/source-src/css/{social.scss => social.less} (66%) create mode 100644 themes/yilia/source-src/css/tags.less delete mode 100644 themes/yilia/source-src/css/tags.scss rename themes/yilia/source-src/css/{tools.scss => tools.less} (73%) rename themes/yilia/source-src/css/{tooltip.scss => tooltip.less} (83%) rename themes/yilia/source-src/css/{waifu.scss => waifu.less} (96%) diff --git a/themes/yilia/package-lock.json b/themes/yilia/package-lock.json index 7264ae3..c9a2e51 100644 --- a/themes/yilia/package-lock.json +++ b/themes/yilia/package-lock.json @@ -27,10 +27,10 @@ "css-loader": "^5.2.7", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", + "less": "^4.1.3", + "less-loader": "^11.1.0", "mini-css-extract-plugin": "^2.6.0", "postcss-loader": "^6.2.1", - "sass": "^1.49.9", - "sass-loader": "^12.6.0", "terser-webpack-plugin": "^5.3.1", "url-loader": "^4.1.1", "webpack": "^5.70.0", @@ -2229,19 +2229,6 @@ "node": ">=4" } }, - "node_modules/anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dev": true, - "dependencies": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/array-union": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", @@ -2451,15 +2438,6 @@ "node": "*" } }, - "node_modules/binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, - "engines": { - "node": ">=8" - } - }, "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -2475,18 +2453,6 @@ "concat-map": "0.0.1" } }, - "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, - "dependencies": { - "fill-range": "^7.0.1" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/browserslist": { "version": "4.20.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.0.tgz", @@ -2611,33 +2577,6 @@ "node": "*" } }, - "node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/chrome-trace-event": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", @@ -2813,6 +2752,22 @@ "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.3.tgz", "integrity": "sha512-JxbCBUdrfr6AQjOXrxoTvAMJO4HBTUIlBzslcJPAz+/KT8yk53fXun51u+RenNYvad/+Vc2DIz5o9UxlCDymFQ==" }, + "node_modules/copy-anything": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz", + "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-what": "^4.1.8" + }, + "engines": { + "node": ">=12.13" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/core-js": { "version": "2.6.12", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", @@ -3186,6 +3141,20 @@ "node": ">=4" } }, + "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, + "license": "MIT", + "optional": true, + "dependencies": { + "prr": "~1.0.1" + }, + "bin": { + "errno": "cli.js" + } + }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -3433,18 +3402,6 @@ "url": "https://opencollective.com/webpack" } }, - "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, - "dependencies": { - "to-regex-range": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/find-cache-dir": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", @@ -3536,20 +3493,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -3636,18 +3579,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/glob-to-regexp": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", @@ -3848,6 +3779,20 @@ "node": ">=10.17.0" } }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", @@ -3860,11 +3805,19 @@ "postcss": "^8.1.0" } }, - "node_modules/immutable": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", - "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", - "dev": true + "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, + "license": "MIT", + "optional": true, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=0.10.0" + } }, "node_modules/import-fresh": { "version": "3.3.0", @@ -3938,18 +3891,6 @@ "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", "dev": true }, - "node_modules/is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, - "dependencies": { - "binary-extensions": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", @@ -3980,15 +3921,6 @@ "is-dom-node": "^1.0.4" } }, - "node_modules/is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/is-fullwidth-code-point": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", @@ -4000,27 +3932,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, - "dependencies": { - "is-extglob": "^2.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, - "engines": { - "node": ">=0.12.0" - } - }, "node_modules/is-path-cwd": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz", @@ -4078,6 +3989,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-what": { + "version": "4.1.16", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz", + "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.13" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", @@ -4284,6 +4208,87 @@ "ms": "^2.1.1" } }, + "node_modules/less": { + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/less/-/less-4.6.4.tgz", + "integrity": "sha512-OJmO5+HxZLLw0RLzkqaNHzcgEAQG7C0y3aMbwtCzIUFZsLMNNq/1IdAdHEycQ58CwUO3jPTHmoN+tE5I7FQxNg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "copy-anything": "^3.0.5", + "parse-node-version": "^1.0.1" + }, + "bin": { + "lessc": "bin/lessc" + }, + "engines": { + "node": ">=18" + }, + "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/less-loader": { + "version": "11.1.4", + "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.4.tgz", + "integrity": "sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14.15.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "less": "^3.5.0 || ^4.0.0", + "webpack": "^5.0.0" + } + }, + "node_modules/less/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, + "license": "MIT", + "optional": true, + "dependencies": { + "pify": "^4.0.1", + "semver": "^5.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/less/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, + "license": "ISC", + "optional": true, + "bin": { + "semver": "bin/semver" + } + }, + "node_modules/less/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, + "license": "BSD-3-Clause", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -4566,6 +4571,24 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/needle": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/needle/-/needle-3.5.0.tgz", + "integrity": "sha512-jaQyPKKk2YokHrEg+vFDYxXIHTCBgiZwSHOoVx/8V3GIBS8/VN6NdVRmg8q1ERtPkMvmOvebsgga4sAj5hls/w==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "iconv-lite": "^0.6.3", + "sax": "^1.2.4" + }, + "bin": { + "needle": "bin/needle" + }, + "engines": { + "node": ">= 4.4.x" + } + }, "node_modules/neo-async": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", @@ -4588,15 +4611,6 @@ "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==", "dev": true }, - "node_modules/normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/normalize-range": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", @@ -4806,6 +4820,16 @@ "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, + "license": "MIT", + "engines": { + "node": ">= 0.10" + } + }, "node_modules/pascal-case": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", @@ -4877,18 +4901,6 @@ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, - "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/pify": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", @@ -5108,6 +5120,14 @@ "dev": true, "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, + "license": "MIT", + "optional": true + }, "node_modules/punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", @@ -5159,18 +5179,6 @@ "util-deprecate": "~1.0.1" } }, - "node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, "node_modules/rechoir": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz", @@ -5359,59 +5367,23 @@ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, - "node_modules/sass": { - "version": "1.49.9", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz", - "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==", + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, - "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - }, - "bin": { - "sass": "sass.js" - }, - "engines": { - "node": ">=12.0.0" - } + "license": "MIT", + "optional": true }, - "node_modules/sass-loader": { - "version": "12.6.0", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", - "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==", + "node_modules/sax": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz", + "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==", "dev": true, - "dependencies": { - "klona": "^2.0.4", - "neo-async": "^2.6.2" - }, + "license": "BlueOak-1.0.0", + "optional": true, "engines": { - "node": ">= 12.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "fibers": ">= 3.1.0", - "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0", - "sass": "^1.3.0", - "sass-embedded": "*", - "webpack": "^5.0.0" - }, - "peerDependenciesMeta": { - "fibers": { - "optional": true - }, - "node-sass": { - "optional": true - }, - "sass": { - "optional": true - }, - "sass-embedded": { - "optional": true - } + "node": ">=11.0.0" } }, "node_modules/schema-utils": { @@ -5776,18 +5748,6 @@ "node": ">=4" } }, - "node_modules/to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, - "dependencies": { - "is-number": "^7.0.0" - }, - "engines": { - "node": ">=8.0" - } - }, "node_modules/tslib": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", @@ -7822,16 +7782,6 @@ "color-convert": "^1.9.0" } }, - "anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dev": true, - "requires": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - } - }, "array-union": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", @@ -7999,12 +7949,6 @@ "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", "dev": true }, - "binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true - }, "boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -8020,15 +7964,6 @@ "concat-map": "0.0.1" } }, - "braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, - "requires": { - "fill-range": "^7.0.1" - } - }, "browserslist": { "version": "4.20.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.0.tgz", @@ -8117,22 +8052,6 @@ "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz", "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=" }, - "chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, - "requires": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "fsevents": "~2.3.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - } - }, "chrome-trace-event": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", @@ -8276,6 +8195,15 @@ "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.3.tgz", "integrity": "sha512-JxbCBUdrfr6AQjOXrxoTvAMJO4HBTUIlBzslcJPAz+/KT8yk53fXun51u+RenNYvad/+Vc2DIz5o9UxlCDymFQ==" }, + "copy-anything": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz", + "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==", + "dev": true, + "requires": { + "is-what": "^4.1.8" + } + }, "core-js": { "version": "2.6.12", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", @@ -8540,6 +8468,16 @@ "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==", "dev": true }, + "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, + "requires": { + "prr": "~1.0.1" + } + }, "error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -8725,15 +8663,6 @@ } } }, - "fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, - "requires": { - "to-regex-range": "^5.0.1" - } - }, "find-cache-dir": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", @@ -8787,13 +8716,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, - "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, - "optional": true - }, "function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -8850,15 +8772,6 @@ "path-is-absolute": "^1.0.0" } }, - "glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "requires": { - "is-glob": "^4.0.1" - } - }, "glob-to-regexp": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", @@ -8992,6 +8905,16 @@ "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==", "dev": true }, + "iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "optional": true, + "requires": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + } + }, "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", @@ -8999,11 +8922,12 @@ "dev": true, "requires": {} }, - "immutable": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", - "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", - "dev": true + "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 }, "import-fresh": { "version": "3.3.0", @@ -9056,15 +8980,6 @@ "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", "dev": true }, - "is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, - "requires": { - "binary-extensions": "^2.0.0" - } - }, "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", @@ -9092,12 +9007,6 @@ "is-dom-node": "^1.0.4" } }, - "is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true - }, "is-fullwidth-code-point": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", @@ -9106,21 +9015,6 @@ "number-is-nan": "^1.0.0" } }, - "is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, - "requires": { - "is-extglob": "^2.1.1" - } - }, - "is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true - }, "is-path-cwd": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz", @@ -9160,6 +9054,12 @@ "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", "dev": true }, + "is-what": { + "version": "4.1.16", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz", + "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==", + "dev": true + }, "isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", @@ -9334,6 +9234,57 @@ } } }, + "less": { + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/less/-/less-4.6.4.tgz", + "integrity": "sha512-OJmO5+HxZLLw0RLzkqaNHzcgEAQG7C0y3aMbwtCzIUFZsLMNNq/1IdAdHEycQ58CwUO3jPTHmoN+tE5I7FQxNg==", + "dev": true, + "requires": { + "copy-anything": "^3.0.5", + "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", + "parse-node-version": "^1.0.1", + "source-map": "~0.6.0" + }, + "dependencies": { + "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, + "requires": { + "pify": "^4.0.1", + "semver": "^5.6.0" + } + }, + "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 + }, + "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 + } + } + }, + "less-loader": { + "version": "11.1.4", + "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.4.tgz", + "integrity": "sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==", + "dev": true, + "requires": {} + }, "lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -9542,6 +9493,17 @@ "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", "dev": true }, + "needle": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/needle/-/needle-3.5.0.tgz", + "integrity": "sha512-jaQyPKKk2YokHrEg+vFDYxXIHTCBgiZwSHOoVx/8V3GIBS8/VN6NdVRmg8q1ERtPkMvmOvebsgga4sAj5hls/w==", + "dev": true, + "optional": true, + "requires": { + "iconv-lite": "^0.6.3", + "sax": "^1.2.4" + } + }, "neo-async": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", @@ -9564,12 +9526,6 @@ "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==", "dev": true }, - "normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true - }, "normalize-range": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", @@ -9719,6 +9675,12 @@ "lines-and-columns": "^1.1.6" } }, + "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 + }, "pascal-case": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", @@ -9775,12 +9737,6 @@ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, - "picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true - }, "pify": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", @@ -9933,6 +9889,13 @@ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", "dev": true }, + "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 + }, "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", @@ -9975,15 +9938,6 @@ "util-deprecate": "~1.0.1" } }, - "readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "requires": { - "picomatch": "^2.2.1" - } - }, "rechoir": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz", @@ -10137,26 +10091,19 @@ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, - "sass": { - "version": "1.49.9", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz", - "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==", + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, - "requires": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - } + "optional": true }, - "sass-loader": { - "version": "12.6.0", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", - "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==", + "sax": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz", + "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==", "dev": true, - "requires": { - "klona": "^2.0.4", - "neo-async": "^2.6.2" - } + "optional": true }, "schema-utils": { "version": "2.7.1", @@ -10427,15 +10374,6 @@ "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", "dev": true }, - "to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, - "requires": { - "is-number": "^7.0.0" - } - }, "tslib": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", diff --git a/themes/yilia/package.json b/themes/yilia/package.json index 79a5ff8..9a89efa 100644 --- a/themes/yilia/package.json +++ b/themes/yilia/package.json @@ -36,10 +36,10 @@ "css-loader": "^5.2.7", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", + "less": "^4.1.3", + "less-loader": "^11.1.0", "mini-css-extract-plugin": "^2.6.0", "postcss-loader": "^6.2.1", - "sass": "^1.49.9", - "sass-loader": "^12.6.0", "terser-webpack-plugin": "^5.3.1", "url-loader": "^4.1.1", "webpack": "^5.70.0", diff --git a/themes/yilia/source-src/css/_core.less b/themes/yilia/source-src/css/_core.less new file mode 100644 index 0000000..e85256a --- /dev/null +++ b/themes/yilia/source-src/css/_core.less @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +@import "core/_variables"; +@import "core/_mixin"; +@import "core/_animation"; +@import "core/_reset"; diff --git a/themes/yilia/source-src/css/_core.scss b/themes/yilia/source-src/css/_core.scss deleted file mode 100644 index 7bcf990..0000000 --- a/themes/yilia/source-src/css/_core.scss +++ /dev/null @@ -1,7 +0,0 @@ -@charset "UTF-8"; - -@import "core/variables"; -@import "core/media-queries"; -@import "core/mixin"; -@import "core/animation"; -@import "core/reset"; \ No newline at end of file diff --git a/themes/yilia/source-src/css/archive.scss b/themes/yilia/source-src/css/archive.less similarity index 69% rename from themes/yilia/source-src/css/archive.scss rename to themes/yilia/source-src/css/archive.less index 559cf19..d4ad33a 100644 --- a/themes/yilia/source-src/css/archive.scss +++ b/themes/yilia/source-src/css/archive.less @@ -1,17 +1,17 @@ -.archives-wrap{ +.archives-wrap { position: relative; margin: 0 30px; padding-right: 60px; border-bottom: 1px solid #eee; - background: adjust-color($colorBg, $alpha: -0.2); - @extend %trans; - &:first-child{ + background: fade(@colorBg, 80%); + .trans(); + &:first-child { margin-top: 30px; } - &:last-child{ + &:last-child { margin-bottom: 80px; } - .archive-year-wrap{ + .archive-year-wrap { line-height: 35px; width: 200px; position: absolute; @@ -19,50 +19,50 @@ font-size: 1.8em; z-index: 1; } - .archive-year-wrap a{ - color: $color6; + .archive-year-wrap a { + color: @color6; font-weight: bold; padding-left: 48px; } } .archives { - position:relative; - .article-info{ + position: relative; + .article-info { border: none; } .archive-article { - margin-left:200px; - padding:20px 0; + margin-left: 200px; + padding: 20px 0; border-bottom: 1px solid #eee; border-top: 1px solid #fff; transition: border-color 0.2s ease-in; position: relative; - &:first-child{ + &:first-child { border-top: none; } - &:last-child{ + &:last-child { border-bottom: none; } } .archive-article-title { font-size: 16px; - color: $colorText; + color: @colorText; transition: color 0.3s; - &:hover{ + &:hover { color: #657b83; } - span{ + span { display: block; color: #a8a8a8; font-size: 12px; line-height: 14px; height: 7px; padding-left: 2px; - &:before{ + &:before { display: inline-block; - content: "“"; + content: "\201C"; font-family: serif; font-size: 30px; margin: 4px 4px 0 -12px; @@ -72,50 +72,50 @@ } } -.archive-article-inner{ +.archive-article-inner { .icon-clock { margin-right: 5px; } - .archive-article-header{ + .archive-article-header { position: relative; min-height: 36px; } - .article-meta{ + .article-meta { position: absolute; top: 10px; - .article-date time{ - color: $colorA; + .article-date time { + color: @colorA; } - .archive-article-date, .article-tag-list{ + .archive-article-date, .article-tag-list { margin-right: 30px; display: inline-block; vertical-align: middle; zoom: 1; - color: $color6; + color: @color6; font-size: 14px; } - .archive-article-date{ + .archive-article-date { cursor: default; margin-right: 0; } - .article-category{ - &:before{ + .article-category { + &:before { float: left; margin-top: 1px; left: 15px; } - .article-category-link{ + .article-category-link { width: auto; max-width: 83px; padding-left: 10px; } } - .article-tag-list{ + .article-tag-list { margin-top: 0px; - &:before{ + &:before { left: 15px; } - .article-tag-list-item{ + .article-tag-list-item { display: inline-block; width: auto; max-width: 83px; diff --git a/themes/yilia/source-src/css/article-inner.scss b/themes/yilia/source-src/css/article-inner.less similarity index 75% rename from themes/yilia/source-src/css/article-inner.scss rename to themes/yilia/source-src/css/article-inner.less index 5aec689..13cbd32 100644 --- a/themes/yilia/source-src/css/article-inner.scss +++ b/themes/yilia/source-src/css/article-inner.less @@ -1,7 +1,7 @@ .article-inner { border-color: #d1d1d1; // 目录标题 - h1,h2,h3,h4,h5,h6 { + h1, h2, h3, h4, h5, h6 { font-weight: 900; &:first-child { margin-top: 0; @@ -27,7 +27,7 @@ font-size: 1.1875rem; line-height: 1.1052631579; } - h4,h5,h6{ + h4, h5, h6 { font-size: 16px; font-size: 1rem; line-height: 1.3125; @@ -37,10 +37,10 @@ } } -.article-entry{ +.article-entry { line-height: 1.8em; - padding-right: $articlePadding; - padding-left: $articlePadding; + padding-right: @articlePadding; + padding-left: @articlePadding; .post-count { // 字数统计 color: rgb(185, 185, 185); font-size: 14px; @@ -53,32 +53,32 @@ } } img { - transition: transform 0.3s ease-out,box-shadow 0.4s ease; + transition: transform 0.3s ease-out, box-shadow 0.4s ease; cursor: zoom-in; &:hover { - transform: scale(1.05,1.05); + transform: scale(1.05, 1.05); box-shadow: 0px 0px 10px 2px #87afea; } } - p{ + p { margin-top: 1em; } - p code,li code{ + p code, li code { padding: 3px 4px; margin: 0 3px; background: #f5ecee; color: #c7254e; - font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New","Microsoft YaHei"; + font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", "Microsoft YaHei"; word-wrap: break-word; font-size: 14px; - border-radius: $radiusSmall; + border-radius: @radiusSmall; } blockquote { padding: 15px 20px; margin-top: 10px; border-left: 5px solid #657b83; background: #f6f6f6; - p{ + p { margin-top: 0; margin-bottom: 0; } @@ -87,11 +87,11 @@ font-style: italic; } ul { - li:before{ + li:before { content: ""; width: 6px; height: 6px; - border: 1px solid $color9; + border: 1px solid @color9; border-radius: 10px; background: #aaa; display: inline-block; @@ -101,28 +101,28 @@ } ol { counter-reset: item; - li:before{ + li:before { counter-increment: item; - content: counter(item)"."; + content: counter(item) "."; margin-right: 10px; } } - ul,ol{ + ul, ol { margin-top: 1em; } - li{ - ul,ol{ + li { + ul, ol { margin-left: 30px; - li:before{ + li:before { content: ""; background: #dedede; } } } - h1{ + h1 { margin-top: 30px; } - h2,h3,h4,h5,h6{ + h2, h3, h4, h5, h6 { margin-top: 20px; font-weight: bold; color: #574C4C; @@ -130,18 +130,18 @@ padding-left: 20px; border-bottom: 1px solid #ddd; } - video{ + video { max-width: 100%; } strong { font-weight: bold; } - .caption{ + .caption { display: block; font-size: 0.8em; color: #aaa; } - hr{ + hr { height: 0; margin-top: 20px; margin-bottom: 20px; @@ -156,33 +156,33 @@ padding: 5px 15px; overflow-x: auto; border: 1px solid #ccc; - font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New",monospace; - code{ + font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; + code { font-size: 14px; } } - table{ + table { margin: 15px 0; - border-collapse:collapse; - tr,td{ - height:35px; + border-collapse: collapse; + tr, td { + height: 35px; } - thead tr{ + thead tr { background: #f8f8f8; } - tbody tr:hover{ + tbody tr:hover { background: #efefef; } - td,th{ + td, th { border: 1px solid #bbb; padding: 0 10px; } } - figure table{ + figure table { border: none; width: auto; margin: 0; - tbody tr:hover{ + tbody tr:hover { background: none; } } diff --git a/themes/yilia/source-src/css/article-main.scss b/themes/yilia/source-src/css/article-main.less similarity index 69% rename from themes/yilia/source-src/css/article-main.scss rename to themes/yilia/source-src/css/article-main.less index b042816..3ae65d8 100644 --- a/themes/yilia/source-src/css/article-main.scss +++ b/themes/yilia/source-src/css/article-main.less @@ -1,5 +1,5 @@ .body-wrap > article { - position: relative; + position: relative; } .article-outer { @@ -12,9 +12,9 @@ border-width: 1px; border-style: solid; border-color: #fff #ddd; - background: adjust-color($colorBg, $alpha: -0.2); - @extend %trans; - img{ + background: fade(@colorBg, 80%); + .trans(); + img { max-width: 100%; } } @@ -28,19 +28,19 @@ transition: color 0.3s; } -.article-header{ +.article-header { border-left: 5px solid #4d4d4d; padding: 30px 0px 15px 25px; - padding-left: $articlePadding; + padding-left: @articlePadding; } -.article-meta{ +.article-meta { position: absolute; right: 0; top: 23px; text-align: center; z-index: 1; - time{ + time { color: #aaa; .icon-clock { margin-right: 8px; @@ -49,34 +49,34 @@ } } -.article-more-link{ +.article-more-link { margin-top: 0; text-align: left; float: right; - a{ + a { background-color: #4d4d4d; - color: $colorF; + color: @colorF; font-size: 12px; padding: 5px 8px 5px; line-height: 16px; border-radius: 2px; transition: background-color 0.3s; - &:hover{ + &:hover { background: #3c3c3c; } - &.hidden{ + &.hidden { visibility: hidden; } } } -.article-info-index.article-info{ - padding-top: 20px; - margin: 30px $articlePadding 0 $articlePadding; +.article-info-index.article-info { + padding-top: 20px; + margin: 30px @articlePadding 0 @articlePadding; min-height: 72px; border-top: 1px solid #ddd; } -.article-info-post.article-info{ - padding: 0; - border: none; - margin: -30px 0 20px $articlePadding; -} \ No newline at end of file +.article-info-post.article-info { + padding: 0; + border: none; + margin: -30px 0 20px @articlePadding; +} diff --git a/themes/yilia/source-src/css/article-nav.scss b/themes/yilia/source-src/css/article-nav.less similarity index 99% rename from themes/yilia/source-src/css/article-nav.scss rename to themes/yilia/source-src/css/article-nav.less index 31415e7..9174c03 100644 --- a/themes/yilia/source-src/css/article-nav.scss +++ b/themes/yilia/source-src/css/article-nav.less @@ -16,4 +16,4 @@ } #article-nav #article-nav-older { float: right; -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/css/aside.scss b/themes/yilia/source-src/css/aside.less similarity index 93% rename from themes/yilia/source-src/css/aside.scss rename to themes/yilia/source-src/css/aside.less index 6746044..db80378 100644 --- a/themes/yilia/source-src/css/aside.scss +++ b/themes/yilia/source-src/css/aside.less @@ -5,7 +5,7 @@ z-index: 999; font-size: 14px; .icon { - color: $colorF; + color: @colorF; text-shadow: 1px 1px 1px #509eb7; font-size: 24px; line-height: 40px; @@ -19,7 +19,7 @@ width: 40px; text-align: center; } -.jump-container:hover, .toc-container:hover{ +.jump-container:hover, .toc-container:hover { .icon { background: rgba(36, 193, 246, 0.9); } @@ -50,7 +50,7 @@ } } -.toc-container.tooltip-left{ +.toc-container.tooltip-left { margin-top: 10px; transition: 0.3s; .tooltip { @@ -72,7 +72,7 @@ transform-origin: 100% 100%; transform: translate3d(0, -10px, 0) rotate3d(1, 1, 1, -30deg); a { - color: $colorF; + color: @colorF; } &::after { top: initial; @@ -94,4 +94,4 @@ bottom: -10px; transform: translate(0); } -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/css/core/_animation.less b/themes/yilia/source-src/css/core/_animation.less new file mode 100644 index 0000000..f9ba5ff --- /dev/null +++ b/themes/yilia/source-src/css/core/_animation.less @@ -0,0 +1,94 @@ +@charset "UTF-8"; + +//----------------------------------------------------- +// animate less +// 提供动画 mixin 及基础 placeholder 类 +//----------------------------------------------------- + +// animation-basic 基础动画属性 +.animation-basic() { + animation-duration: 0.3s; + animation-fill-mode: both; +} + +// 公共动画基础属性 +//----------------------------------------------------- +.anmCommon() { + animation-duration: .5s; + animation-fill-mode: both; + animation-timing-function: ease-in-out; +} + +@keyframes leftIn { + from { + transform: translate(0, 0); + } + to { + transform: translate(333px, 0); + } +} + +@keyframes leftOut { + from { + transform: translate(333px, 0); + } + to { + transform: translate(0, 0); + } +} + +.anmLeftIn() { + .anmCommon(); + animation-name: leftIn; +} + +.anmLeftOut() { + .anmCommon(); + animation-name: leftOut; +} + +@keyframes smallLeftIn { + from { + transform: translate(0, 0); + opacity: 0; + } + to { + transform: translate(300px, 0); + opacity: 1; + } +} + +@keyframes smallleftOut { + from { + transform: translate(300px, 0); + opacity: 1; + } + to { + transform: translate(0, 0); + opacity: 0; + } +} + +.anmSmallLeftIn() { + .anmCommon(); + animation-name: smallLeftIn; +} + +.anmSmallLeftOut() { + .anmCommon(); + animation-name: smallleftOut; +} + +// 头像旋转动画 +@keyframes profilepic { + 0% { + transform: rotate(360deg); + } + 100% { + transform: rotate(0deg); + } +} + +.picRotate() { + animation: profilepic 5s linear infinite; +} diff --git a/themes/yilia/source-src/css/core/_animation.scss b/themes/yilia/source-src/css/core/_animation.scss deleted file mode 100644 index a28748a..0000000 --- a/themes/yilia/source-src/css/core/_animation.scss +++ /dev/null @@ -1,328 +0,0 @@ -@charset "UTF-8"; - -//----------------------------------------------------- -// animate.scss -// 提供6组动画 fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out, right-in/out -//----------------------------------------------------- - -%animation-basic { - animation-duration: 0.3s; - animation-fill-mode: both; -} - -// fade in/out -//----------------------------------------------------- - -@mixin animation-fade-in($className: fade, $from: 0) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } - @include animation-fade($name: $name, $from: $from); -} - -@mixin animation-fade-out($className: fade, $to: 0) { - $name: str-insert(Out, $className, 0); - - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } - - @include animation-fade($name: $name, $from: 1, $to: $to); -} - -// shrink in/out -//----------------------------------------------------- - -@mixin animation-shrink-in($className: shrink, $from: 0.815) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } - @keyframes #{$name} { - 0% { - opacity: 0; - transform: scale($from); - } - 100% { - opacity: 1; - transform: scale(1); - } - } -} - -@mixin animation-shrink-out($className: shrink, $to: 1.185) { - $name: str-insert(Out, $className, 0); - - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } - - @keyframes #{$name} { - 0% { - opacity: 1; - transform: scale(1); - } - 100% { - opacity: 0; - transform: scale($to); - } - } -} - -// down in/out -//----------------------------------------------------- - -@mixin animation-down-in($className: down, $value: 100%) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } - - @keyframes #{$name} { - 0% { - opacity: 0; - transform: translate(0, $value); - } - 100% { - opacity: 1; - transform: translate(0, 0); - } - } -} - -@mixin animation-down-out($className: down, $value: 100%) { - $name: str-insert(Out, $className, 0); - - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } - - @keyframes #{$name} { - 0% { - opacity: 1; - transform: translate(0, 0); - } - 100% { - opacity: 0; - transform: translate(0, $value); - } - } -} - -// up in/out -//----------------------------------------------------- - -@mixin animation-up-in($className: up, $value: -100%) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } - - @keyframes #{$name} { - 0% { - opacity: 0; - transform: translate(0, $value); - } - 100% { - opacity: 1; - transform: translate(0, 0); - } - } -} - -@mixin animation-up-out($className: up, $value: -100%) { - $name: str-insert(Out, $className, 0); - - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } - - @keyframes #{$name} { - 0% { - opacity: 1; - transform: translate(0, 0); - } - 100% { - opacity: 0; - transform: translate(0, $value); - } - } -} - -// left in/out -//----------------------------------------------------- - -@mixin animation-left-in($className: left, $value: -100%) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } - - @keyframes #{$name} { - 0% { - opacity: 0; - transform: translate($value, 0); - } - 100% { - opacity: 1; - transform: translate(0, 0); - } - } -} - -@mixin animation-left-out($className: left, $value: -100%) { - $name: str-insert(Out, $className, 0); - - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } - - @keyframes #{$name} { - 0% { - opacity: 1; - transform: translate(0, 0); - } - 100% { - opacity: 0; - transform: translate($value, 0); - } - } -} - -// right in/out -//----------------------------------------------------- - -@mixin animation-right-in($className: right, $value: 100%) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } - - @keyframes #{$name} { - 0% { - opacity: 0; - transform: translate($value, 0); - } - 100% { - opacity: 1; - transform: translate(0, 0); - } - } -} - -@mixin animation-right-out($className: right, $value: 100%) { - $name: str-insert(Out, $className, 0); - - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } - - @keyframes #{$name} { - 0% { - opacity: 1; - transform: translate(0, 0); - } - 100% { - opacity: 0; - transform: translate($value, 0); - } - } -} - -%anmCommon { - animation-duration: .5s; - animation-fill-mode: both; - animation-timing-function: ease-in-out; -} - -@keyframes leftIn { - from { - transform: translate(0, 0); - } - to { - transform: translate(333px, 0); - } -} - -@keyframes leftOut { - from { - transform: translate(333px, 0); - } - to { - transform: translate(0, 0); - } -} - -%anmLeftIn { - @extend %anmCommon; - animation-name: leftIn; -} - -%anmLeftOut { - @extend %anmCommon; - animation-name: leftOut; -} - -@keyframes smallLeftIn { - from { - transform: translate(0, 0); - opacity: 0; - } - to { - transform: translate(300px, 0); - opacity: 1; - } -} - -@keyframes smallleftOut { - from { - transform: translate(300px, 0); - opacity: 1; - } - to { - transform: translate(0, 0); - opacity: 0; - } -} - -%anmSmallLeftIn { - @extend %anmCommon; - animation-name: smallLeftIn; -} - -%anmSmallLeftOut { - @extend %anmCommon; - animation-name: smallleftOut; -} - -// 头像旋转动画 -@keyframes profilepic { - 0% { - transform: rotate(360deg); - } - 100% { - transform: rotate(0deg); - } -} -%picRotate { - animation: profilepic 5s linear infinite; -} \ No newline at end of file diff --git a/themes/yilia/source-src/css/core/_media-queries.scss b/themes/yilia/source-src/css/core/_media-queries.scss deleted file mode 100644 index 80af0a7..0000000 --- a/themes/yilia/source-src/css/core/_media-queries.scss +++ /dev/null @@ -1,247 +0,0 @@ -@charset "utf-8"; - -//----------------------------------------------------- -// media queries scss -// author: Rafal Bromirski -// github: http://github.com/paranoida/sass-mediaqueries -// version: 1.6.1 -//----------------------------------------------------- - - -// generator -// ---------------------------------------------------- - -@mixin mq($args...) { - $media-type: 'only screen'; - $media-type-key: 'media-type'; - $args: keywords($args); - $expr: ''; - - @if map-has-key($args, $media-type-key) { - $media-type: map-get($args, $media-type-key); - $args: map-remove($args, $media-type-key); - } - - @each $key, $value in $args { - @if $value { - $expr: "#{$expr} and (#{$key}: #{$value})"; - } - } - - @media #{$media-type} #{$expr} { - @content; - } -} - - -// screen -// ---------------------------------------------------- - -@mixin screen($min, $max, $orientation: false) { - @include mq($min-width: $min, $max-width: $max, $orientation: $orientation) { - @content; - } -} - -@mixin max-screen($max) { - @include mq($max-width: $max) { - @content; - } -} - -@mixin min-screen($min) { - @include mq($min-width: $min) { - @content; - } -} - -@mixin screen-height($min, $max, $orientation: false) { - @include mq($min-height: $min, $max-height: $max, $orientation: $orientation) { - @content; - } -} - -@mixin max-screen-height($max) { - @include mq($max-height: $max) { - @content; - } -} - -@mixin min-screen-height($min) { - @include mq($min-height: $min) { - @content; - } -} - - -// hdpi -// ---------------------------------------------------- - -@mixin hdpi($ratio: 1.3) { - @media only screen and (-webkit-min-device-pixel-ratio: $ratio), - screen and (min-resolution: #{round($ratio*96)}dpi) { - @content; - } -} - - -// hdtv -// ---------------------------------------------------- - -@mixin hdtv($standard: '1080') { - $min-width: false; - $min-height: false; - - $standards: ('720p', 1280px, 720px) - ('1080', 1920px, 1080px) - ('2K', 2048px, 1080px) - ('4K', 4096px, 2160px); - - @each $s in $standards { - @if $standard == nth($s, 1) { - $min-width: nth($s, 2); - $min-height: nth($s, 3); - } - } - - @include mq( - $min-device-width: $min-width, - $min-device-height: $min-height, - $min-width: $min-width, - $min-height: $min-height - ) { - @content; - } -} - - -// iphone 4 -// ---------------------------------------------------- - -@mixin iphone4($orientation: false) { - $min: 320px; - $max: 480px; - $pixel-ratio: 2; - $aspect-ratio: '2/3'; - - @include mq( - $min-device-width: $min, - $max-device-width: $max, - $orientation: $orientation, - $device-aspect-ratio: $aspect-ratio, - $-webkit-device-pixel-ratio: $pixel-ratio - ) { - @content; - } -} - - -// iphone 5 -// ---------------------------------------------------- - -@mixin iphone5($orientation: false) { - $min: 320px; - $max: 568px; - $pixel-ratio: 2; - $aspect-ratio: '40/71'; - - @include mq( - $min-device-width: $min, - $max-device-width: $max, - $orientation: $orientation, - $device-aspect-ratio: $aspect-ratio, - $-webkit-device-pixel-ratio: $pixel-ratio - ) { - @content; - } -} - - -// iphone 6 -// ---------------------------------------------------- - -@mixin iphone6($orientation: false) { - $min: 375px; - $max: 667px; - $pixel-ratio: 2; - - @include mq( - $min-device-width: $min, - $max-device-width: $max, - $orientation: $orientation, - $-webkit-device-pixel-ratio: $pixel-ratio - ) { - @content; - } -} - - -// iphone 6 plus -// ---------------------------------------------------- - -@mixin iphone6-plus($orientation: false) { - $min: 414px; - $max: 736px; - $pixel-ratio: 3; - - @include mq( - $min-device-width: $min, - $max-device-width: $max, - $orientation: $orientation, - $-webkit-device-pixel-ratio: $pixel-ratio - ) { - @content; - } -} - - -// ipad (all) -// ---------------------------------------------------- - -@mixin ipad($orientation: false) { - $min: 768px; - $max: 1024px; - - @include mq( - $min-device-width: $min, - $max-device-width: $max, - $orientation: $orientation - ) { - @content; - } -} - - -// ipad-retina -// ---------------------------------------------------- - -@mixin ipad-retina($orientation: false) { - $min: 768px; - $max: 1024px; - $pixel-ratio: 2; - - @include mq( - $min-device-width: $min, - $max-device-width: $max, - $orientation: $orientation, - $-webkit-device-pixel-ratio: $pixel-ratio - ) { - @content; - } -} - - -// orientation -// ---------------------------------------------------- - -@mixin landscape() { - @include mq($orientation: landscape) { - @content; - } -} - -@mixin portrait() { - @include mq($orientation: portrait) { - @content; - } -} \ No newline at end of file diff --git a/themes/yilia/source-src/css/core/_mixin.less b/themes/yilia/source-src/css/core/_mixin.less new file mode 100644 index 0000000..efaaa44 --- /dev/null +++ b/themes/yilia/source-src/css/core/_mixin.less @@ -0,0 +1,409 @@ +@charset "UTF-8"; + +//----------------------------------------------------- +// mixin less +// 包括常用的 mixin 及辅助样式 +// LESS 中用 .name() 定义 mixin（不会输出到 CSS），用 .name() 调用 +//----------------------------------------------------- + + +// Center-align a block level element +//----------------------------------------------------- +.center-block() { + margin-left: auto; + margin-right: auto; +} + +// clearfix +//----------------------------------------------------- +.clearfix() { + &::before, + &::after { + content: ""; + display: table; + } + &::after { + clear: both; + } +} + +// Hide only visually, but have it available for screenreaders +//----------------------------------------------------- +.hidden-clip() { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); +} + +// ellipsis +//----------------------------------------------------- +.ellipsis() { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +// ellipsis lines (only old webkit flex box) +//----------------------------------------------------- +.ellipsis-lines(@lines: 2) { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: @lines; + -webkit-box-orient: vertical; +} + +// word-break +//----------------------------------------------------- +.word-break() { + white-space: normal; + word-wrap: break-word; + word-break: break-all; +} + +// disabled +//----------------------------------------------------- +.disabled(@disabledText: @colorDisabled-text; @disabledBg: @colorDisabled-bg; @disabledBorder: false) { + background-color: @disabledBg !important; + color: @disabledText !important; + cursor: default !important; + pointer-events: none !important; +} + +// image replace text +//----------------------------------------------------- +.ir() { + font: 0/0 a; + text-shadow: none; + border: 0 none; + color: transparent; +} + +// fixed top or bottom +//----------------------------------------------------- +.fixed(@pos: 0) { + position: fixed; + left: 0; + right: 0; + top: @pos; +} + +.fixed-bottom() { + position: fixed; + left: 0; + right: 0; + bottom: 0; +} + +// justify 左右对齐 +//----------------------------------------------------- +.justify() { + display: flex; + justify-content: space-between; +} + +// retina border 0.5px 实现 (ios9) +//----------------------------------------------------- +.retina-one-px() { + @supports (border-width: 0.5px) { + @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) { + border-width: 0.5px; + } + } +} + +// retina border via linear-gradient +//----------------------------------------------------- +.retina-one-px-bg(@direction: top; @color: @colorBorder) { + background-repeat: no-repeat; +} + +// retina border via transform +//----------------------------------------------------- +.retina-one-px-border(@direction: top; @color: @colorBorder) { + position: absolute; + left: 0; + top: 0; + box-sizing: border-box; + right: 0; + height: 0; + transform: scaleY(0.5); + border-top: 1px solid @color; +} + +.retina-one-px-border-bottom(@color: @colorBorder) { + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 0; + box-sizing: border-box; + transform: scaleY(0.5); + border-top: 1px solid @color; +} + +.retina-one-px-border-all(@color: @colorBorder) { + position: absolute; + left: 0; + top: 0; + box-sizing: border-box; + width: 200%; + height: 200%; + transform-origin: left top; + transform: scale(0.5); + border: 1px solid @color; +} + +// border top & bottom placeholder +//----------------------------------------------------- +.border-tb() { + position: relative; + &::before { + content: ""; + .retina-one-px-border(); + z-index: 1; + } + &::after { + content: ""; + .retina-one-px-border-bottom(); + } +} + +// border all placeholder +//----------------------------------------------------- +.border-all() { + position: relative; + &::before { + content: ""; + .retina-one-px-border-all(); + z-index: -1; + } +} + +// equal-table +//----------------------------------------------------- +.equal-table(@child: ~"li") { + display: table; + table-layout: fixed; + width: 100%; + @{child} { + display: table-cell; + } +} + +// equal-flex +//----------------------------------------------------- +.equal-flex(@child: ~"li") { + display: flex; + @{child} { + flex: 1; + width: 1%; + } +} + +// flex center +//----------------------------------------------------- +.center-flex() { + display: flex; + justify-content: center; + align-items: center; +} + +// translate center +//----------------------------------------------------- +.center-translate() { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); +} + +// triangle 三角箭头 +//----------------------------------------------------- +.triangle-basic() { + content: ""; + height: 0; + width: 0; + overflow: hidden; +} + +.triangle(@direction: top; @borderWidth: 6px; @borderColor: @colorC) { + .triangle-basic(); +} + +// v-arrow 方向箭头 +//----------------------------------------------------- +.v-arrow(@direction: right; @borderWidth: 2px; @size: 10px) { + display: inline-block; + vertical-align: middle; + width: @size; + height: @size; + border-top: @borderWidth solid currentColor; + border-right: @borderWidth solid currentColor; + transform: rotate(45deg); +} + +// btn-size +//----------------------------------------------------- +.btn-size(@padding: 1em; @height: @barHeight; @radius: 3px) { + padding: 0 @padding; + line-height: (@height - 2px); + border-radius: @radius; +} + +// btn-color (simplified) +//----------------------------------------------------- +.btn-color(@btnColorText: #333; @btnColorBg: #666; @btnColorBorder: false) { + color: @btnColorText; + background-color: @btnColorBg; + &:hover, &:active { + background-color: darken(@btnColorBg, 5%); + } +} + +// function: tint - 为颜色添加白色 +//----------------------------------------------------- +.tint(@color; @percent) { + // Use mix(white, @color, @percent) equivalent + // In LESS: mix(white, @color, @percent) +} + +// function: shade - 为颜色添加黑色 +//----------------------------------------------------- +.shade(@color; @percent) { + // In LESS: mix(black, @color, @percent) +} + + +// 下面是常用 placeholder 转为 LESS mixin +//----------------------------------------------------- + +// shadow +.shadow() { + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .75); +} + +// trans +.trans() { + transition: all 0.2s ease-in; + -ms-transition: all 0.2s ease-in; +} + +// trans8 +.trans8() { + transition: all 0.8s ease-in; + -ms-transition: all 0.8s ease-in; +} + +// display-flex +.display-flex() { + display: flex; +} + +// transition-all +.transition-all() { + transition: all 0.3s ease-in-out; +} + +// translate3d +.translate3d() { + transform: translate3d(0, 0, 0); +} + +// btn-basic 按钮基本样式 +.btn-basic() { + display: inline-block; + vertical-align: middle; + cursor: pointer; + text-align: center; + border: 1px solid transparent; + box-sizing: border-box; + user-select: none; + padding: 0 1em; + white-space: nowrap; +} + +// bar-line +.bar-line() { + line-height: (@barHeight - 10px); + padding: 5px 10px; + position: relative; + display: block; + overflow: hidden; + &:active, + &:hover { + background-color: darken(@colorF, 3%); + } + &:not(:first-of-type)::before { + content: ""; + position: absolute; + left: 0; + top: 0; + box-sizing: border-box; + right: 0; + height: 0; + transform: scaleY(0.5); + border-top: 1px solid @colorBorder; + z-index: 1; + } +} + +// item-v-right 右侧箭头 +.item-v-right() { + &::after { + content: ""; + display: inline-block; + vertical-align: middle; + width: 10px; + height: 10px; + border-top: 2px solid currentColor; + border-right: 2px solid currentColor; + color: @colorC; + position: absolute; + right: 15px; + top: 50%; + margin-top: -1px; + transform: rotate(45deg) translate(0, -50%); + box-sizing: border-box; + } +} + +// gap-item 间隔列表 +.gap-item() { + position: relative; + background: #fff; + margin: 10px 0; + &:active, + &:hover { + background-color: darken(@colorF, 3%); + } + &::before { + content: ""; + position: absolute; + left: 0; + top: 0; + box-sizing: border-box; + right: 0; + height: 0; + transform: scaleY(0.5); + border-top: 1px solid @colorBorder; + } + &::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 0; + box-sizing: border-box; + transform: scaleY(0.5); + border-top: 1px solid @colorBorder; + } +} + +// triangle-basic +.triangle-basic-class() { + content: ""; + height: 0; + width: 0; + overflow: hidden; +} diff --git a/themes/yilia/source-src/css/core/_mixin.scss b/themes/yilia/source-src/css/core/_mixin.scss deleted file mode 100644 index 446cf2d..0000000 --- a/themes/yilia/source-src/css/core/_mixin.scss +++ /dev/null @@ -1,694 +0,0 @@ -@charset "UTF-8"; - -//----------------------------------------------------- -// mixin scss -// 包括常用的mixin, %, @function 及辅助的btn和背景图片icon -// mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数 -// %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段 -// @function，返回一个值，用于调用 -//----------------------------------------------------- - -// mixin & % -// 既定义了mixin也定义了%，根据需求使用@include或@extend调用 -//----------------------------------------------------- - -// Center-align a block level element -@mixin center-block($extend: true) { - @if $extend { - @extend %center-block; - } - @else { - margin-left: auto; - margin-right: auto; - } -} - -%center-block { - @include center-block(false); -} - -// clearfix -@mixin clearfix($extend: true) { - @if $extend { - @extend %clearfix; - } - @else { - &::before, - &::after { - content: ""; - display: table; - } - &::after { - clear: both; - } - } -} - -%clearfix { - @include clearfix(false); -} - -// Hide only visually, but have it available for screenreaders -// 只隐藏于视觉，屏幕浏览器可以阅读 -@mixin hidden-clip($extend: true) { - @if $extend { - @extend %hidden-clip; - } - @else { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - } -} - -%hidden-clip { - @include hidden-clip(false); -} - -// ellipsis -@mixin ellipsis($extend: true) { - @if $extend { - @extend %ellipsis; - } - @else { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } -} - -%ellipsis { - @include ellipsis(false); -} - -// ellipsis lines -// only old webkit flex box -@mixin ellipsis-lines($lines: 2) { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: $lines; - -webkit-box-orient: vertical; -} - -// word-break -@mixin word-break($extend: true) { - @if $extend { - @extend %word-break; - } - @else { - white-space: normal; - word-wrap: break-word; - word-break: break-all; - } -} - -%word-break { - @include word-break(false); -} - -// disabled -// add !important -@mixin disabled($colorText: map-get($colorDisabled, text), $colorBg: map-get($colorDisabled, bg), $colorBorder: false) { - background-color: $colorBg !important; - color: $colorText !important; - cursor: default !important; - pointer-events: none !important; - @if $colorBorder { - border: 1px solid map-get($colorDisabled, border); - } -} - -%disabled { - @include disabled; -} - -// image replace text -@mixin ir($extend: true) { - @if $extend { - @extend %ir; - } - @else { - font: 0/0 a; - text-shadow: none; - border: 0 none; - color: transparent; - } -} - -%ir { - @include ir(false); -} - -// fixed top or bottom or bottom & top -@mixin fixed($pos: 0) { - position: fixed; - left: 0; - right: 0; - @if $pos == bottom { - bottom: 0; - } @else if $pos == all { - top: 0; - bottom: 0; - } @else { - top: $pos; - } -} - -%fixed-top { - @include fixed; -} - -%fixed-bottom { - @include fixed(bottom); -} - -// justify -// 左右对齐 -@mixin justify($extend: true) { - @if $extend { - @extend %justify; - } - @else { - display: flex; - justify-content: space-between; - } -} - -%justify { - @include justify(false); -} - -// retina border -// 0.5px实现 ios9 -@mixin retina-one-px() { - @supports (border-width: 0.5px) { - @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) { - border-width: 0.5px; - } - } -} - -// linear-gradient实现 -// 安卓4.3- 不支持background-size的百分比 -@mixin retina-one-px-bg($direction: top, $color: $colorBorder) { - background-repeat: no-repeat; - @if $direction == top { - background-image: linear-gradient(to bottom, $color 50%, transparent 50%); - background-size: 100% 1px; - } - @if $direction == bottom { - background-image: linear-gradient(to top, $color 50%, transparent 50%); - background-size: 100% 1px; - background-position: left bottom; - } - @if $direction == left { - background-image: linear-gradient(to right, $color 50%, transparent 50%); - background-size: 1px 100%; - } - @if $direction == right { - background-image: linear-gradient(to left, $color 50%, transparent 50%); - background-size: 1px 100%; - background-position: right top; - } - @if $direction == v { // 左右两个边框 - background-image: linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%); - background-size: 1px 100%; - background-position: left top, right top; - } - @if $direction == h { // 上下两个边框 - background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%); - background-size: 100% 1px; - background-position: left top, left bottom; - } - @if $direction == all { // 上下左右四个边框 - background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%); - background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%; - background-position: left top, left bottom, left top, right top; - } -} - -// border和transform实现 -// 注意before和after的层级问题 -@mixin retina-one-px-border($direction: top, $color: $colorBorder) { - position: absolute; - left: 0; - top: 0; - box-sizing: border-box; - - @if $direction == top or $direction == bottom{ - right: 0; - height: 0; - transform: scaleY(0.5); - border-top: 1px solid $color; - } - @if $direction == bottom { - top: auto; - bottom: 0; - } - @if $direction == right or $direction == left{ - width: 0; - bottom: 0; - transform: scaleX(0.5); - border-left: 1px solid $color; - } - @if $direction == right { - left: auto; - right: 0; - } - @if $direction == all { - width: 200%; - height: 200%; - transform-origin: left top; - transform: scale(0.5); - border: 1px solid $color; - } -} - -// border top & bottom -%border-tb { - position: relative; - &::before { - content: ""; - @include retina-one-px-border(top); - z-index: 1; - } - &::after { - content: ""; - @include retina-one-px-border(bottom); - } -} - -// border all -%border-all { - position: relative; - &::before { - content: ""; - @include retina-one-px-border(all); - z-index: -1; - } -} - -// mixin -// 只定义了mixin，所以只能通过@include来调用 -//----------------------------------------------------- - -// table 等 -// $child 参数请使用单引号，因为用于子元素选择器 -@mixin equal-table($child: 'li') { - display: table; - table-layout: fixed; - width: 100%; - - #{unquote($child)} { - display: table-cell; - } -} - -// flex 等分 -// $child 参数请使用单引号，因为用于子元素选择器 -@mixin equal-flex($child: 'li') { - display: flex; - - #{unquote($child)} { - flex: 1; - width: 1%; - } -} - -// line equal gap -// $child 参数请使用单引号，因为用于子元素选择器 -@mixin line-equal-gap($gap: 10px, $child: 'li', $lr: true) { - display: flex; - - @if $lr { - padding-left: $gap; - padding-right: $gap; - } - - #{unquote($child)} { - flex: 1; - width: 1%; - &:not(:first-of-type){ - margin-left: $gap; - } - } -} - -// line equal item -@mixin line-equal-item($lr: true) { - display: flex; - justify-content: space-between; - @if $lr { - &::before, - &::after { - content: ""; - } - } -} - -// flex center -@mixin center-flex($direction: both) { - display: flex; - @if $direction == both { - justify-content: center; - align-items: center; - } - @else if $direction == x { - justify-content: center; - } - @else if $direction == y { - align-items: center; - } -} - -// translate center -@mixin center-translate($direction: both) { - position: absolute; - @if $direction == both { - top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); - } - @else if $direction == x { - left: 50%; - transform: translate3d(-50%, 0, 0); - } - @else if $direction == y { - top: 50%; - transform: translate3d(0, -50%, 0); - } -} - -// object wrap -// $child 参数请使用单引号，因为用于子元素选择器 -@mixin object-wrap($percent: 100%, $child: 'img') { - position: relative; - padding-top: $percent; - height: 0; - - #{unquote($child)} { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } -} - -// triangle 三角箭头 -// 可采用空元素或伪元素生成，具体定位这里不涉及 -%triangle-basic { - content: ""; - height: 0; - width: 0; - overflow: hidden; -} - -@mixin triangle($direction: top, $borderWidth: 6px, $borderColor: $colorC) { - @extend %triangle-basic; - @if $direction == top { - border-bottom: $borderWidth solid $borderColor; - border-left: $borderWidth dashed transparent; - border-right: $borderWidth dashed transparent; - } - @else if $direction == right { - border-left: $borderWidth solid $borderColor; - border-top: $borderWidth dashed transparent; - border-bottom: $borderWidth dashed transparent; - } - @else if $direction == bottom { - border-top: $borderWidth solid $borderColor; - border-left: $borderWidth dashed transparent; - border-right: $borderWidth dashed transparent; - } - @else if $direction == left { - border-right: $borderWidth solid $borderColor; - border-top: $borderWidth dashed transparent; - border-bottom: $borderWidth dashed transparent; - } -} - -// v arrow 方向箭头 -@mixin v-arrow($direction: right, $borderWidth: 2px, $size: 10px) { - display: inline-block; - vertical-align: middle; - width: $size; - height: $size; - @if $direction == top { - border-top: $borderWidth solid currentColor; - border-right: $borderWidth solid currentColor; - transform: rotate(-45deg); - } - @else if $direction == right { - border-top: $borderWidth solid currentColor; - border-right: $borderWidth solid currentColor; - transform: rotate(45deg); - } - @else if $direction == bottom { - border-left: $borderWidth solid currentColor; - border-bottom: $borderWidth solid currentColor; - transform: rotate(-45deg); - } - @if $direction == left { - border-left: $borderWidth solid currentColor; - border-bottom: $borderWidth solid currentColor; - transform: rotate(45deg); - } -} - -// selector -// 改变父元素状态，如:hover或.active -// 父元素不能有组合选择器，如.a, .b{} -// .parent{ -// .child{ -// @include parent-state(":hover"){ -// color: #f00; -// } -// } -// } -// .parent:hover .child { -// color: #f00; -// } -@mixin parent-state($states...) { - $parent: nth(nth(&, 1), (length(nth(&, 1))-1)); - - @each $state in $states { - @at-root #{selector-replace(&, $parent, str-insert($state, $parent, 0))} { - @content; - } - } -} - -// animation-fade -// @include animation-fade -// @include animation-fade($from: false, $to: .5); -// @include animation-fade($from: 1, $to: 0); -@mixin animation-fade($name: animationFade, $from: 0, $to: false){ - @keyframes #{animationFade} { - @if $from { - from { - opacity: $from; - } - } - @if $to { - to { - opacity: $to; - } - } - } -} - -// animation-translate -// @include animation-translate -// @include animation-translate($from: x -100%); -// @include animation-translate($from: xy -50% -50%, $to: y -100%); -// @include animation-translate($from: y 100px, $to: y 0px); -@mixin animation-translate($name: animationTranslate, $from: y -100%, $to: false) { - @keyframes #{$name} { - @if $from and length($from) > 1 { - from { - @if nth($from, 1) == x { - transform: translate(nth($from, 2), 0); - } - @if nth($from, 1) == y { - transform: translate(0, nth($from, 2)); - } - @if nth($from, 1) == xy or nth($from, 1) == both { - transform: translate(nth($from, 2), nth($from, 3)); - } - } - } - @if $to andd length($to) > 1 { - to { - @if nth($to, 1) == x { - transform: translate(nth($to, 2), 0); - } - @if nth($to, 1) == y { - transform: translate(0, nth($to, 2)); - } - @if nth($to, 1) == xy or nth($to, 1) == both { - transform: translate(nth($to, 2), nth($to, 3)); - } - } - } - } -} - -// % -// 只定义了%，所以只能通过@extend来调用 -//----------------------------------------------------- - -// bar line -%bar-line { - line-height: $barHeight - 10px; - padding: 5px 10px; - position: relative; - display: block; - overflow: hidden; - @if $activeStateSwitch{ - &:active, - &:hover { - background-color: darken($colorF, 3%); - } - } - &:not(:first-of-type)::before { - content: ""; - @include retina-one-px-border; - } -} - -// item arrow, 右侧箭头跳转指向 -%item-v-right { - &::after { - content: ""; - @include v-arrow; - color: $colorC; - position: absolute; - right: 15px; - top: 50%; - margin-top: -1px; - transform: rotate(45deg) translate(0, -50%); - box-sizing: border-box; - } -} - -// 间隔列表 -%gap-item{ - position: relative; - background: #fff; - margin: 10px 0; - @if $activeStateSwitch{ - &:active, - &:hover { - background-color: darken($colorF, 3%); - } - } - &::before{ - content: ""; - @include retina-one-px-border; - } - &::after{ - content: ""; - @include retina-one-px-border(bottom); - } -} - -// 下面的几个%，由于版本或前缀，所以设计成% -//----------------------------------------------------- -// flex -%display-flex { - display: flex; -} - -// all-transition -%transition-all { - transition: all 0.3s ease-in-out; -} - -// translate3d -%translate3d { - transform: translate3d(0, 0, 0); -} - - -// btn -//---------------------------------------------------- -// btn-basic -// 按钮基本样式，联合申明 -%btn-basic { - display: inline-block; - vertical-align: middle; - cursor: pointer; - text-align: center; - border: 1px solid transparent; - box-sizing: border-box; - user-select: none; - padding: 0 1em; - white-space: nowrap; -} - -// btn-size -// 按钮大小 -@mixin btn-size($padding: 1em, $height: $barHeight, $radius: 3px) { - padding: 0 $padding; - line-height: $height - 2px; // 减掉2px的上下高度 - @if $radius { - border-radius: $radius; - } -} - -// btn-color -// 包括按钮背景色，文本色，是否有边框 -@mixin btn-color($colorText: #333, $colorBg: #666, $colorBorder: false) { - color: nth($colorText, 1); - background-color: nth($colorBg, 1); - @if $colorBorder { - border-color: nth($colorBorder, 1); - } - &:hover,&:active { - @if length($colorText) == 2 { - color: nth($colorText, 2); - } - @if length($colorBg) == 2 { - background-color: nth($colorBg, 2); - } @else { - @if lightness($colorBg) > 40% { - background-color: darken($colorBg, 5%); - } - @else { - background-color: lighten($colorBg, 5%); - } - } - @if $colorBorder and length($colorBorder) == 2 { - border-color: nth($colorBorder, 2); // $colorBorder: #dbdbdb #ccc => #ccc - } - } -} - - -//function -//----------------------------------------------------- - -// 为颜色添加白色，以百分比形式 -@function tint($color, $percent) { - @return mix(white, $color, $percent); -} - -// 为颜色添加黑色，以百分比形式 -@function shade($color, $percent) { - @return mix(black, $color, $percent); -} - -%shadow { - box-shadow: 0px 0px 6px 0px rgba(0,0,0,.75); -} - -%trans { - transition: all 0.2s ease-in; - -ms-transition: all 0.2s ease-in; -} - -%trans8 { - transition: all 0.8s ease-in; - -ms-transition: all 0.8s ease-in; -} \ No newline at end of file diff --git a/themes/yilia/source-src/css/core/_reset.scss b/themes/yilia/source-src/css/core/_reset.less similarity index 63% rename from themes/yilia/source-src/css/core/_reset.scss rename to themes/yilia/source-src/css/core/_reset.less index db3d54f..0d78ec9 100644 --- a/themes/yilia/source-src/css/core/_reset.scss +++ b/themes/yilia/source-src/css/core/_reset.less @@ -1,7 +1,7 @@ @charset "UTF-8"; -//----------------------------------------------------- -// reset scss +//----------------------------------------------------- +// reset less // 包括normalize，清零重置 //----------------------------------------------------- @@ -21,20 +21,17 @@ html { // 1. Remove default margin body { margin: 0; // 1 - font-size: $fontSize; - font-family: $fontFamily; - line-height: $fontLineHeight; - color: $colorText; - background-color: $colorBg; + font-size: @fontSize; + font-family: @fontFamily; + line-height: @fontLineHeight; + color: @colorText; + background-color: @colorBg; min-height: 100%; } // HTML5 display definitions //----------------------------------------------------- -// Correct `block` display not defined for any HTML5 element in IE 8/9. -// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. -// Correct `block` display not defined for `main` in IE 11. article, aside, details, @@ -73,7 +70,7 @@ progress { // Address `[hidden]` styling not present in IE 8/9/10. // Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. -[hidden],template { +[hidden], template { display: none; } @@ -86,8 +83,8 @@ progress { a { background: transparent; // 1 text-decoration: none; - color: nth($colorLink, 1); - + color: @colorLink; + &:active { outline: 0; // 2 } @@ -96,34 +93,28 @@ a { // Text-level semantics //----------------------------------------------------- -// Address styling not present in IE 8/9/10/11, Safari, and Chrome. abbr[title] { border-bottom: 1px dotted; } -// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. -b,strong { +b, strong { font-weight: bold; } -// Address styling not present in Safari and Chrome. dfn { font-style: italic; } -// Address styling not present in IE 8/9. mark { background: #ff0; color: #000; } -// Address inconsistent and variable font size in all browsers. small { font-size: 80%; } -// Prevent `sub` and `sup` affecting `line-height` in all browsers. -sub,sup { +sub, sup { font-size: 75%; line-height: 0; position: relative; @@ -156,15 +147,6 @@ svg:not(:root) { // Grouping content //----------------------------------------------------- -// 1. Contain overflow in all browsers. -// 2. Improve readability of pre-formatted text in all browsers. -// pre { -// overflow: auto; // 1 -// white-space: pre; // 2 -// white-space: pre-wrap; // 2 -// word-wrap: break-word; // 2 -// } - // 1. Address odd `em`-unit font size rendering in all browsers. code, kbd, @@ -177,13 +159,6 @@ samp { // Forms //----------------------------------------------------- -// Known limitation: by default, Chrome and Safari on OS X allow very limited -// styling of `select`, unless a `border` property is set. - -// 1. Correct color not being inherited. -// Known issue: affects color of disabled elements. -// 2. Correct font properties not being inherited. -// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. button, input, optgroup, @@ -196,33 +171,25 @@ textarea { } // Show the overflow in IE. -// 1. Show the overflow in Edge. -// 2. Show the overflow in Edge, Firefox, and IE. button, -input, // 1 -select { // 2 +input, +select { overflow: visible; } // Address inconsistent `text-transform` inheritance for `button` and `select`. -// All other form control elements do not inherit `text-transform` values. -// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. -// Correct `select` style inheritance in Firefox. -button,select { +button, select { text-transform: none; } -// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` -// and `video` controls. -// 2. Correct inability to style clickable `input` types in iOS. -// 3. Improve usability and consistency of cursor style between image-type -// `input` and others. +// 1. Correct inability to style clickable `input` types in iOS. +// 2. Improve usability and consistency of cursor style between image-type `input` and others. button, -html input[type="button"], // 1 +html input[type="button"], input[type="reset"], input[type="submit"] { - -webkit-appearance: button; // 2 - cursor: pointer; // 3 + -webkit-appearance: button; // 1 + cursor: pointer; // 2 } // Re-set default cursor for disabled elements. @@ -237,42 +204,33 @@ input::-moz-focus-inner { padding: 0; } -// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in -// the UA stylesheet. +// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. input { line-height: normal; // 1 } -// It's recommended that you don't attempt to style these elements. -// Firefox's implementation doesn't respect box-sizing, padding, or width. - -// 1. Address box sizing set to `content-box` in IE 8/9/10. -// 2. Remove excess padding in IE 8/9/10. +// 1. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-webkit-`). +// 2. Address `height` property not being respected. input[type="checkbox"], input[type="radio"] { box-sizing: border-box; // 1 padding: 0; // 2 } -// Fix the cursor style for Chrome's increment/decrement buttons. For certain -// `font-size` values of the `input`, it causes the cursor style of the -// decrement button to change from `default` to `text`. +// Fix the cursor style for Chrome's increment/decrement buttons. input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } // 1. Address `appearance` set to `searchfield` in Safari and Chrome. -// 2. Address `box-sizing` set to `border-box` in Safari and Chrome -// (include `-moz` to future-proof). +// 2. Address `box-sizing` set to `border-box` in Safari and Chrome. input[type="search"] { -webkit-appearance: textfield; // 1 - box-sizing: border-box; + box-sizing: content-box; // 2 } // Remove inner padding and search cancel button in Safari and Chrome on OS X. -// Safari (but not Chrome) clips the cancel button when the search input has -// padding (and `textfield` appearance). input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; @@ -292,15 +250,12 @@ legend { padding: 0; // 2 } -// 1. Remove default vertical scrollbar in IE 8/9/10/11. +// Remove default vertical scrollbar in IE 8/9/10/11. textarea { - overflow: auto; // 1 - resize: vertical; - vertical-align: top; + overflow: auto; } // Don't inherit the `font-weight` (applied by a rule above). -// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. optgroup { font-weight: bold; } @@ -314,7 +269,7 @@ button { } // Android 下 input focus 消除高亮外框 -textarea,input { +textarea, input { -webkit-user-modify: read-write-plaintext-only; } @@ -325,39 +280,38 @@ input::-ms-reveal { } // 表单placeholder样式 -// 注意不可联合申明，否则无效 // Firefox 19+ input::-moz-placeholder, textarea::-moz-placeholder { - color: $colorPlaceholder; + color: @colorPlaceholder; } // Internet Explorer 10+ input:-ms-input-placeholder, textarea:-ms-input-placeholder { - color: $colorPlaceholder; + color: @colorPlaceholder; } // Safari and Chrome input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { - color: $colorPlaceholder; + color: @colorPlaceholder; } -// 如不支持placeholder添加class 或者 设置提示的placeholder -.placeholder{ - color: $colorPlaceholder; +// 如不支持placeholder添加class +.placeholder { + color: @colorPlaceholder; } // Tables //----------------------------------------------------- -// Remove most spacing between table cells. + table { border-collapse: collapse; border-spacing: 0; } -td,th { +td, th { padding: 0; } @@ -408,5 +362,5 @@ i { // 清除子元素浮动 .clearfix { - @extend %clearfix; -} \ No newline at end of file + .clearfix(); +} diff --git a/themes/yilia/source-src/css/core/_variables.less b/themes/yilia/source-src/css/core/_variables.less new file mode 100644 index 0000000..eded1d0 --- /dev/null +++ b/themes/yilia/source-src/css/core/_variables.less @@ -0,0 +1,72 @@ +@charset "UTF-8"; + +//----------------------------------------------------- +// variables less +//----------------------------------------------------- + + +// font相关 +//----------------------------------------------------- +@fontSize: 14px; +@fontLineHeight: 1.5; +@fontFamily: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; +// ios华文黑体, Android 4.0之后, Android 4.0之前 +@fontCn: STHeiTi, Roboto, "Droid Sans Fallback", Arial; +// ios4.0+, ios4.0-, Android 4.0+, Android 4.0- +@fontEn: "Helvetica Neue", Helvetica, Roboto, "Droid Sans", Arial; + +// 背景色，文本色，边框色，链接色 +//----------------------------------------------------- +@colorText: #333; +@colorBodyBg: #e3d8cc; +@colorBg: #f0eae3; +@colorBorder: #dbdbdb; +@colorLink: #08c; +@colorPlaceholder: #999; + +// 标签颜色组 +@tagColors: #88acdb, #ffa07a, #ca5757, #76becc, #7e608d, #6fc0e4, #bc8f8f; +@tagcolorsLength: 7; + +// disabled state (原 $colorDisabled map) +@colorDisabled-text: #999; +@colorDisabled-bg: #e3e3e3; +@colorDisabled-border: #dbdbdb; + +// 基本颜色 +//----------------------------------------------------- +@color3: #333; +@color6: #666; +@color9: #999; +@colorA: #aaa; +@colorC: #ccc; +@colorF: #f5f5f5; + + +// 元素上下间距 +//----------------------------------------------------- +@gap: 20px; + + +// header,footer等的高度 +//----------------------------------------------------- +@barHeight: 44px; + + +// radius +//----------------------------------------------------- +@radiusBase: 5px; +@radiusSmall: 3px; + + +// timing-function +//----------------------------------------------------- +@timingFunction: cubic-bezier(0.42, 0, 0.58, 1); + + +// active state switch +//----------------------------------------------------- +@activeStateSwitch: true; + + +@articlePadding: 7.6923%; diff --git a/themes/yilia/source-src/css/core/_variables.scss b/themes/yilia/source-src/css/core/_variables.scss deleted file mode 100644 index 1abc86b..0000000 --- a/themes/yilia/source-src/css/core/_variables.scss +++ /dev/null @@ -1,72 +0,0 @@ -@charset "UTF-8"; - -//----------------------------------------------------- -// variables scss -//----------------------------------------------------- - - -// font相关 -//----------------------------------------------------- -$fontSize: 14px !default; -$fontLineHeight: 1.5 !default; -$fontFamily: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif !default; -// ios华文黑体,Android 4.0之后,Android 4.0之前 -$fontCn: STHeiTi, Roboto, "Droid Sans Fallback", Arial !default; -// ios4.0+,ios4.0-,Android 4.0+,Android 4.0- -$fontEn: "Helvetica Neue", Helvetica, Roboto, "Droid Sans", Arial !default; - - -// 背景色，文本色，边框色，链接色 -//----------------------------------------------------- -$colorText: #333 !default; -$colorBodyBg: #e3d8cc !default; -$colorBg: #f0eae3 !default; -$colorBorder: #dbdbdb !default; -$colorLink: #08c !default; -$colorPlaceholder: #999 !default; // input placeholder color -$tagcolorList: #88acdb #ffa07a #ca5757 #76becc #7e608d #6fc0e4 #bc8f8f; // 标签颜色组 -$colorDisabled: (text: #999, bg: #e3e3e3, border: #dbdbdb) !default; // textColor bgColor borderColor - - -// 基本颜色 -// color function : http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html -// lighten($color, $amount) -// darken($color, $amount) -// opacity($color, $amount) -// mix($color1, $color2[, $amount]) -//----------------------------------------------------- -$color3: #333; -$color6: #666; -$color9: #999; -$colorA: #aaa; -$colorC: #ccc; -$colorF: #f5f5f5; - - -// 元素上下间距 -//----------------------------------------------------- -$gap: 20px !default; - - -// header,footer等的高度 -//----------------------------------------------------- -$barHeight: 44px !default; - - -// radius -//----------------------------------------------------- -$radiusBase: 5px !default; -$radiusSmall: 3px !default; - - -// timing-function -//----------------------------------------------------- -$timingFunction: cubic-bezier(0.42, 0, 0.58, 1); - - -// active state switch -//----------------------------------------------------- -$activeStateSwitch: true !default; - - -$articlePadding: 7.6923%; \ No newline at end of file diff --git a/themes/yilia/source-src/css/font-awsome.css b/themes/yilia/source-src/css/font-awsome.css index db96091..481e636 100644 --- a/themes/yilia/source-src/css/font-awsome.css +++ b/themes/yilia/source-src/css/font-awsome.css @@ -11,7 +11,7 @@ .icon { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'FontAwesome' !important; - speak: none; + speak-as: none; font-size:16px; font-style: normal; font-weight: normal; diff --git a/themes/yilia/source-src/css/footer.less b/themes/yilia/source-src/css/footer.less new file mode 100644 index 0000000..c5ff9ed --- /dev/null +++ b/themes/yilia/source-src/css/footer.less @@ -0,0 +1,17 @@ +#footer { + font-size: 14px; + position: absolute; + bottom: 30px; + opacity: 0.6; + width: 100%; + text-align: center; + .outer { + padding: 0 30px; + } +} +.footer-left { + float: left; +} +.footer-right { + float: right; +} diff --git a/themes/yilia/source-src/css/footer.scss b/themes/yilia/source-src/css/footer.scss deleted file mode 100644 index f7a0717..0000000 --- a/themes/yilia/source-src/css/footer.scss +++ /dev/null @@ -1,17 +0,0 @@ -#footer { - font-size: 14px; - position: absolute; - bottom: 30px; - opacity: 0.6; - width: 100%; - text-align: center; - .outer{ - padding: 0 30px; - } -} -.footer-left{ - float: left; -} -.footer-right{ - float: right; -} \ No newline at end of file diff --git a/themes/yilia/source-src/css/grid.less b/themes/yilia/source-src/css/grid.less new file mode 100644 index 0000000..a8f8860 --- /dev/null +++ b/themes/yilia/source-src/css/grid.less @@ -0,0 +1,58 @@ +body, button, input, select, textarea { + color: #1a1a1a; + font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.75; +} +body { + overflow-y: hidden; + background: @colorBodyBg; +} +html, body, #container { + height: 100%; + overflow-x: hidden; + overflow-y: auto; +} +#mobile-nav, .js-mobile-btnctn { + display: none; +} +#container { + position: relative; + min-height: 100%; + scroll-behavior: smooth; + -webkit-overflow-scrolling: touch; + background-color: @colorBodyBg; + background-repeat: no-repeat; + background-size: contain; + background-position: right; + &.show { + overflow-y: hidden; + } +} +body:not(.night) #container.show { + background-image: linear-gradient(200deg, #5aa5c6, #a4854b) !important; +} +.body-wrap { + padding-top: 30px; + margin-bottom: 80px; +} +.mid-col { + position: absolute; + right: 0; + min-height: 100%; + left: 300px; + width: auto; + &.show { + .anmLeftIn(); + .article { + .trans(); + // transition: opacity .3s ease-in, background-color .3s ease-in; + opacity: 0.5 !important; + pointer-events: none; + } + } + &.hide { + .anmLeftOut(); + } +} diff --git a/themes/yilia/source-src/css/grid.scss b/themes/yilia/source-src/css/grid.scss deleted file mode 100644 index 5aaf6cd..0000000 --- a/themes/yilia/source-src/css/grid.scss +++ /dev/null @@ -1,58 +0,0 @@ -body, button, input, select, textarea { - color: #1a1a1a; - font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; - font-size: 16px; - font-size: 1rem; - line-height: 1.75; -} -body { - overflow-y: hidden; - background:$colorBodyBg; -} -html, body, #container { - height: 100%; - overflow-x: hidden; - overflow-y: auto; -} -#mobile-nav,.js-mobile-btnctn { - display: none; -} -#container{ - position:relative; - min-height:100%; - scroll-behavior: smooth; - -webkit-overflow-scrolling: touch; - background-color: $colorBodyBg; - background-repeat: no-repeat; - background-size: contain; - background-position: right; - &.show { - overflow-y: hidden; - } -} -body:not(.night) #container.show { - background-image: linear-gradient(200deg,#5aa5c6,#a4854b) !important; -} -.body-wrap{ - padding-top: 30px; - margin-bottom: 80px; -} -.mid-col { - position:absolute; - right:0; - min-height:100%; - left: 300px; - width: auto; - &.show { - @extend %anmLeftIn; - .article { - @extend %trans; - // transition: opacity .3s ease-in, background-color .3s ease-in; - opacity: 0.5 !important; - pointer-events: none; - } - } - &.hide { - @extend %anmLeftOut; - } -} \ No newline at end of file diff --git a/themes/yilia/source-src/css/highlight.scss b/themes/yilia/source-src/css/highlight.less similarity index 99% rename from themes/yilia/source-src/css/highlight.scss rename to themes/yilia/source-src/css/highlight.less index 280c162..e99e98a 100644 --- a/themes/yilia/source-src/css/highlight.scss +++ b/themes/yilia/source-src/css/highlight.less @@ -159,4 +159,4 @@ pre .number { pre .id, pre .css ~ * .id { color: #fd971f; -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/css/left.less b/themes/yilia/source-src/css/left.less new file mode 100644 index 0000000..289a23f --- /dev/null +++ b/themes/yilia/source-src/css/left.less @@ -0,0 +1,120 @@ +.left-col { + background-color: @colorBg; + background-repeat: no-repeat; + background-size: cover; + background-position: top; + width: 300px; + position: fixed; + opacity: 1; + .trans(); + height: 100%; + z-index: 999; + .shadow(); + + .intrude-less { + width: 76%; + text-align: center; + margin: 62px auto 0; + } + + #header { + width: 100%; + height: 300px; + position: relative; + a { + color: #696969; + transition: color 0.3s; + &:hover { + color: #B0A0AA; + } + } + .header-subtitle { + text-align: center; + color: @color9; + font-size: 14px; + line-height: 25px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + .header-menu { + font-weight: 300; + line-height: 31px; + text-transform: uppercase; + float: none; + min-height: 150px; + margin-left: -12px; + text-align: center; + position: relative; + ul { + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + li { + cursor: default; + a { + font-size: 14px; + min-width: 300px; + } + } + } + } + .header-smart-menu { + font-size: 16px; + margin-bottom: 20px; + a { + &:after { + content: '/'; + margin-left: 4px; + } + &:last-child { + &:after { + content: '' + } + } + } + } + .profilepic { + text-align: center; + display: block; + border: 5px solid @colorF; + border-radius: 300px; + width: 128px; + height: 128px; + margin: 0 auto; + position: relative; + overflow: hidden; + background: #88acdb; + .trans(); + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-pack: center; + -webkit-box-align: center; + text-align: center; + &:hover { + .picRotate(); + } + img { + border-radius: 300px; + width: 100%; + height: 100%; + opacity: 1; + .trans(); + &.show { + width: 100%; + height: 100%; + opacity: 1; + } + } + } + .header-author { + text-align: center; + margin: 0.67em 0; + font-size: 30px; + transition: 0.3s; + } + } +} diff --git a/themes/yilia/source-src/css/left.scss b/themes/yilia/source-src/css/left.scss deleted file mode 100644 index ae85477..0000000 --- a/themes/yilia/source-src/css/left.scss +++ /dev/null @@ -1,120 +0,0 @@ -.left-col { - background-color: $colorBg; - background-repeat: no-repeat; - background-size: cover; - background-position: top; - width: 300px; - position:fixed; - opacity:1; - @extend %trans; - height:100%; - z-index: 999; - @extend %shadow; - - .intrude-less { - width: 76%; - text-align: center; - margin: 62px auto 0; - } - - #header{ - width:100%; - height: 300px; - position: relative; - a { - color: #696969; - transition: color 0.3s; - &:hover { - color: #B0A0AA; - } - } - .header-subtitle{ - text-align: center; - color:$color9; - font-size: 14px; - line-height: 25px; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - } - .header-menu{ - font-weight: 300; - line-height: 31px; - text-transform: uppercase; - float:none; - min-height: 150px; - margin-left: -12px; - text-align: center; - position: relative; - ul { - position: absolute; - left: 50%; - top: 50%; - transform: translateX(-50%) translateY(-50%); - li{ - cursor: default; - a{ - font-size: 14px; - min-width: 300px; - } - } - } - } - .header-smart-menu { - font-size: 16px; - margin-bottom: 20px; - a { - &:after { - content: '/'; - margin-left: 4px; - } - &:last-child { - &:after { - content: '' - } - } - } - } - .profilepic{ - text-align: center; - display: block; - border: 5px solid $colorF; - border-radius: 300px; - width: 128px; - height: 128px; - margin: 0 auto; - position: relative; - overflow: hidden; - background: #88acdb; - @extend %trans; - display: -webkit-box; - -webkit-box-orient: horizontal; - -webkit-box-pack: center; - -webkit-box-align: center; - text-align: center; - &:hover { - @extend %picRotate; - } - img{ - border-radius: 300px; - width: 100%; - height: 100%; - opacity: 1; - @extend %trans; - &.show{ - width: 100%; - height: 100%; - opacity: 1; - } - } - } - .header-author{ - text-align: center; - margin: 0.67em 0; - font-size: 30px; - transition: 0.3s; - } - } -} \ No newline at end of file diff --git a/themes/yilia/source-src/css/main.scss b/themes/yilia/source-src/css/main.less similarity index 90% rename from themes/yilia/source-src/css/main.scss rename to themes/yilia/source-src/css/main.less index d9b1372..8bc86a6 100644 --- a/themes/yilia/source-src/css/main.scss +++ b/themes/yilia/source-src/css/main.less @@ -1,4 +1,4 @@ -@import 'core'; +@import './_core'; @import './grid'; @import './left'; @import './scroll'; @@ -19,7 +19,7 @@ @import './waifu'; @import './night'; @import './page/photo-wall'; -@import './page/categories.scss'; +@import './page/categories.less'; @media screen and (max-width: 800px) { @import './mobile'; @import './mobile-slider'; diff --git a/themes/yilia/source-src/css/mobile-slider.scss b/themes/yilia/source-src/css/mobile-slider.less similarity index 88% rename from themes/yilia/source-src/css/mobile-slider.scss rename to themes/yilia/source-src/css/mobile-slider.less index 83f3f4d..485a379 100644 --- a/themes/yilia/source-src/css/mobile-slider.scss +++ b/themes/yilia/source-src/css/mobile-slider.less @@ -1,7 +1,7 @@ .profilepic { text-align: center; display: block; - border: 5px solid $colorF; + border: 5px solid @colorF; border-radius: 300px; width: 128px; height: 128px; @@ -20,15 +20,15 @@ } .header-subtitle { text-align: center; - color: $color9; + color: @color9; font-size: 14px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; - -webkit-line-clamp: 2; + line-clamp: 2; -webkit-box-orient: vertical; } .header-subtitle { padding: 0 24px; -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/css/mobile.scss b/themes/yilia/source-src/css/mobile.less similarity index 94% rename from themes/yilia/source-src/css/mobile.scss rename to themes/yilia/source-src/css/mobile.less index f206ad0..f32bb2b 100644 --- a/themes/yilia/source-src/css/mobile.scss +++ b/themes/yilia/source-src/css/mobile.less @@ -3,7 +3,7 @@ margin-bottom: 0; } #container { - background: $colorBodyBg; + background: @colorBodyBg; } .left-col { display: none; @@ -19,8 +19,8 @@ display: none; } .cloud-tie-wrapper { - padding: 0; - min-height: 20px; + padding: 0; + min-height: 20px; } .tools-col { left: -300px; @@ -120,7 +120,7 @@ padding: 10px; border: 0; font-size: 16px; - background: #{$colorBg}; + background: @colorBg; .article-more-link { margin: 0; } @@ -270,21 +270,21 @@ z-index: 2; color: #424242; } - .overlay{ - height: 110px; - position: absolute; - width: 100%; + .overlay{ + height: 110px; + position: absolute; + width: 100%; z-index: 2; - background: #4d4d4d; - } - #header{ - padding: 10px 0 0 0; - .profilepic{ - display: block; - position: relative; - z-index: 100; - } - } + background: #4d4d4d; + } + #header{ + padding: 10px 0 0 0; + .profilepic{ + display: block; + position: relative; + z-index: 100; + } + } } .js-mobile-btnctn { display: block; @@ -360,4 +360,4 @@ flex-grow: 1; } } -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/css/night.less b/themes/yilia/source-src/css/night.less new file mode 100644 index 0000000..73a204e --- /dev/null +++ b/themes/yilia/source-src/css/night.less @@ -0,0 +1,183 @@ +/* +* 夜间模式配色 +*/ +@mainBg_night: #1f2e3c; +@articleBg_night: #15202b; +@borderColor_night: #38444d; +@textColor_night: #d5d5d5; + +@keyframes leftIn_night { + from { + transform: translate(0, 0); + background: @mainBg_night; + } + to { + transform: translate(333px, 0); + background: none; + } +} + +@keyframes leftOut_night { + from { + transform: translate(333px, 0); + background: none; + } + to { + transform: translate(0, 0); + background: @mainBg_night; + } +} + +.anmLeftIn_night() { + .anmCommon(); + animation-name: leftIn_night; +} + +.anmLeftOut_night() { + .anmCommon(); + animation-name: leftOut_night; +} + +body.night { + background: @mainBg_night; + // 展开菜单之后的背景 + #container, #container.show { + background-color: @mainBg_night; + } + // 文章区域 + .article { + background: fade(@articleBg_night, 80%); + border-color: @borderColor_night; + color: @textColor_night; + .article-title { + color: @colorF; + } + .article-entry { + table { + border-color: @borderColor_night; + th, td { + border-color: @borderColor_night; + } + thead tr { + background: @mainBg_night; + } + tbody tr:hover { + background: lighten(@mainBg_night, 10%); + } + } + blockquote { + background: #2c2c2c; + } + } + h1, h2, h3, h4, h5, h6 { + color: @colorC; + border-bottom-color: @borderColor_night; + } + } + // 归档列表 + .archives-wrap { + background: fade(@articleBg_night, 80%); + border-bottom-color: @borderColor_night; + .archive-article { + border-color: @borderColor_night; + } + a.archive-article-title { + color: @textColor_night; + } + } + // 左侧栏 + .left-col { + background-color: @articleBg_night; + background-image: none !important; + } + #mobile-nav { + background: none; + .overlay { + display: none; + } + } + // 头像 看板娘 图标 -> 降低亮度滤镜 + .profilepic, .waifu, #header .header-nav .social a { + filter: brightness(30%); + } + // 文章信息栏 + .article-info-index.article-info { + border-top-color: @borderColor_night; + } + #footer { + color: @textColor_night; + } + // 高亮关键字 + .article-entry p code, .article-entry li code { + background: @mainBg_night; + color: #bf7676; + } + // 分类列表 + .category-list li.category-list-item { + border-color: @borderColor_night; + } + // 标签颜色组 (unrolled from @for loop, darken(color, 25%)) + .tagcloud { + a.color1 { + background: darken(#88acdb, 25%); + &::before { + border-right-color: darken(#88acdb, 25%); + } + } + a.color2 { + background: darken(#ffa07a, 25%); + &::before { + border-right-color: darken(#ffa07a, 25%); + } + } + a.color3 { + background: darken(#ca5757, 25%); + &::before { + border-right-color: darken(#ca5757, 25%); + } + } + a.color4 { + background: darken(#76becc, 25%); + &::before { + border-right-color: darken(#76becc, 25%); + } + } + a.color5 { + background: darken(#7e608d, 25%); + &::before { + border-right-color: darken(#7e608d, 25%); + } + } + a.color6 { + background: darken(#6fc0e4, 25%); + &::before { + border-right-color: darken(#6fc0e4, 25%); + } + } + a.color7 { + background: darken(#bc8f8f, 25%); + &::before { + border-right-color: darken(#bc8f8f, 25%); + } + } + } + // 滚动条 + ::-webkit-scrollbar { + background-color: @articleBg_night; + } + .page-modal { + background: @mainBg_night; + color: @textColor_night; + .close { + color: @textColor_night; + } + } + #search-panel { + .search-input > input[type=text] { + color: @textColor_night; + } + .more-item { + background: linear-gradient(-180deg, @articleBg_night 10%, rgba(255, 255, 255, 0) 100%); + } + } +} diff --git a/themes/yilia/source-src/css/night.scss b/themes/yilia/source-src/css/night.scss deleted file mode 100644 index 267dc75..0000000 --- a/themes/yilia/source-src/css/night.scss +++ /dev/null @@ -1,149 +0,0 @@ -/* -* 夜间模式配色 -*/ -$mainBg_night: #1f2e3c; // 主背景色 -$articleBg_night: #15202b; // 文章背景色 -$borderColor_night: #38444d; // 边框颜色 -$textColor_night: #d5d5d5; // 文字颜色 - -@keyframes leftIn_night { - from { - transform: translate(0, 0); - background:$mainBg_night; - } - to { - transform: translate(333px, 0); - background: none; - } -} - -@keyframes leftOut_night { - from { - transform: translate(333px, 0); - background: none; - } - to { - transform: translate(0, 0); - background:$mainBg_night; - } -} - -%anmLeftIn_night { - @extend %anmCommon; - animation-name: leftIn_night; -} - -%anmLeftOut_night { - @extend %anmCommon; - animation-name: leftOut_night; -} - -body.night { - background: $mainBg_night; - // 展开菜单之后的背景 - #container, #container.show { - background-color: $mainBg_night; - } - // 文章区域 - .article{ - background: adjust-color($articleBg_night, $alpha: -0.2); - border-color: $borderColor_night; - color: $textColor_night; - .article-title { // 主标题 - color: $colorF; - } - .article-entry { - table { // 表格 - border-color: $borderColor_night; - th,td { - border-color: $borderColor_night; - } - thead tr { // 表头 - background: $mainBg_night; - } - tbody tr:hover { // 表格行指向 - background: lighten($mainBg_night, 10%); - } - } - blockquote{ // 引用 - background: #2c2c2c; - } - } - h1,h2,h3,h4,h5,h6 { // 章节标题 - color: $colorC; - border-bottom-color: $borderColor_night; - } - } - // 归档列表 - .archives-wrap { - background: adjust-color($articleBg_night, $alpha: -0.2); - border-bottom-color: $borderColor_night; - .archive-article { - border-color: $borderColor_night; - } - a.archive-article-title { - color: $textColor_night; - } - } - // 左侧栏 - .left-col { - background-color: $articleBg_night; - background-image: none !important; - } - #mobile-nav { - background: none; - .overlay { - display: none; - } - } - // 头像 看板娘 图标 -> 降低亮度滤镜 - .profilepic, .waifu, #header .header-nav .social a { - filter: brightness(30%); - } - // 文章信息栏 - .article-info-index.article-info { - border-top-color: $borderColor_night; - } - #footer { - color: $textColor_night; - } - // 高亮关键字 - .article-entry p code, .article-entry li code { - background: $mainBg_night; - color: #bf7676; - } - // 分类列表 - .category-list li.category-list-item { - border-color: $borderColor_night; - } - // 标签颜色组 - .tagcloud { - @for $index from 1 to length($tagcolorList)+1 { - a.color#{$index}{ - background: darken(nth($tagcolorList,$index), 25%); - &::before{ - border-right-color: darken(nth($tagcolorList,$index), 25%); - } - } - } - } - // 滚动条 - ::-webkit-scrollbar { - background-color: $articleBg_night; - } - .page-modal { - background: $mainBg_night; - color: $textColor_night; - .close { - color: $textColor_night; - } - } - #search-panel { - .search-input > input[type=text] { - color: $textColor_night; - } - .more-item { - background: linear-gradient(-180deg,$articleBg_night 10%,rgba(255, 255, 255, 0) 100%); - } - } -} \ No newline at end of file diff --git a/themes/yilia/source-src/css/page.less b/themes/yilia/source-src/css/page.less new file mode 100644 index 0000000..a5040a1 --- /dev/null +++ b/themes/yilia/source-src/css/page.less @@ -0,0 +1,39 @@ +#page-nav { + text-align: center; + margin-top: 30px; + .page-number { + width: 25px; + height: 30px; + background: #4d4d4d; + display: inline-block; + color: @colorF; + line-height: 30px; + font-size: 14px; + margin: 0 5px 30px; + border-radius: 2px; + &:hover { + background: #5e5e5e; + } + } + .current { + background: #88acdb; + cursor: default; + &:hover { + background: #88acdb; + } + } + .extend { + color: #4d4d4d; + margin: 0 27px; + opacity: 1; + &:hover { + color: #5e5e5e; + } + } + .prev.disabled, .next.disabled { + visibility: hidden; + } + &:hover .extend { + opacity: 1; + } +} diff --git a/themes/yilia/source-src/css/page.scss b/themes/yilia/source-src/css/page.scss deleted file mode 100644 index 84a2047..0000000 --- a/themes/yilia/source-src/css/page.scss +++ /dev/null @@ -1,39 +0,0 @@ -#page-nav{ - text-align: center; - margin-top: 30px; - .page-number{ - width: 25px; - height: 30px; - background: #4d4d4d; - display: inline-block; - color: $colorF; - line-height: 30px; - font-size: 14px; - margin: 0 5px 30px; - border-radius: 2px; - &:hover{ - background: #5e5e5e; - } - } - .current{ - background: #88acdb; - cursor: default; - &:hover{ - background: #88acdb; - } - } - .extend{ - color: #4d4d4d; - margin: 0 27px; - opacity: 1; - &:hover{ - color: #5e5e5e; - } - } - .prev.disabled,.next.disabled { - visibility: hidden; - } - &:hover .extend { - opacity: 1; - } -} \ No newline at end of file diff --git a/themes/yilia/source-src/css/page/categories.scss b/themes/yilia/source-src/css/page/categories.less similarity index 84% rename from themes/yilia/source-src/css/page/categories.scss rename to themes/yilia/source-src/css/page/categories.less index 1be90f6..9d133e3 100644 --- a/themes/yilia/source-src/css/page/categories.scss +++ b/themes/yilia/source-src/css/page/categories.less @@ -5,11 +5,11 @@ display: inline-block; margin: 0 1em .5em 0; padding: 4px; - border: 1px solid $colorBorder; + border: 1px solid @colorBorder; font-size: 1.2rem; - @extend %trans; + .trans(); &:hover { - background:rgba(204, 204, 204, 0.3); + background: rgba(204, 204, 204, 0.3); } } } @@ -39,8 +39,8 @@ right: 0; bottom: 0; height: 2px; - background: $colorLink; + background: @colorLink; transition: width .3s ease; } } -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/css/page/photo-wall.scss b/themes/yilia/source-src/css/page/photo-wall.less similarity index 95% rename from themes/yilia/source-src/css/page/photo-wall.scss rename to themes/yilia/source-src/css/page/photo-wall.less index 8ace81d..3ec6890 100644 --- a/themes/yilia/source-src/css/page/photo-wall.scss +++ b/themes/yilia/source-src/css/page/photo-wall.less @@ -20,7 +20,7 @@ } } #load-tip { - color: $color9; + color: @color9; text-align: center; display: none; -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/css/reward.scss b/themes/yilia/source-src/css/reward.less similarity index 74% rename from themes/yilia/source-src/css/reward.scss rename to themes/yilia/source-src/css/reward.less index 5ef20a0..c868944 100644 --- a/themes/yilia/source-src/css/reward.scss +++ b/themes/yilia/source-src/css/reward.less @@ -8,13 +8,13 @@ height: 56px; line-height: 56px; font-size: 20px; - color: $colorF; + color: @colorF; background: #f44336; border-radius: 50%; - box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition: .4s ease-in-out; &:hover, &:active { - box-shadow: 0 6px 12px rgba(0,0,0,0.2),0 4px 15px rgba(0,0,0,0.2); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2); } .tooltip-item { display: block; @@ -27,7 +27,7 @@ justify-content: space-around; } .reward-p { - color: $colorF; + color: @colorF; font-weight: bold; text-shadow: 1px 1px 1px #45b9e0; .icon { @@ -44,7 +44,7 @@ .reward-img { width: 130px; height: 130px; - border: 6px solid $colorBorder; - border-radius: $radiusSmall; + border: 6px solid @colorBorder; + border-radius: @radiusSmall; } } diff --git a/themes/yilia/source-src/css/scroll.less b/themes/yilia/source-src/css/scroll.less new file mode 100644 index 0000000..800f75a --- /dev/null +++ b/themes/yilia/source-src/css/scroll.less @@ -0,0 +1,65 @@ +/* 设置滚动条的样式 */ +::-webkit-scrollbar { + width: 10px; + height: 10px; + background-color: @colorBg; +} + +::-webkit-scrollbar-button { + width: 0; + height: 0; +} + +::-webkit-scrollbar-button:start:increment, ::-webkit-scrollbar-button:end:decrement { + display: none; +} + +::-webkit-scrollbar-corner { + display: block; +} + +::-webkit-scrollbar-thumb { + border-radius: 8px; + background-color: rgba(0, 0, 0, .3); +} + +::-webkit-scrollbar-thumb:hover { + border-radius: 8px; + background-color: rgba(0, 0, 0, .5); +} + +::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { + border-right: 1px solid transparent; + border-left: 1px solid transparent; +} + +::-webkit-scrollbar-track:hover { + background-color: rgba(0, 0, 0, .15); +} +::-webkit-scrollbar-button:start { + width: 10px; + height: 10px; + background: url(./img/scrollbar_arrow.png) no-repeat 0 0; +} + +::-webkit-scrollbar-button:start:hover { + background: url(./img/scrollbar_arrow.png) no-repeat -15px 0; +} + +::-webkit-scrollbar-button:start:active { + background: url(./img/scrollbar_arrow.png) no-repeat -30px 0; +} + +::-webkit-scrollbar-button:end { + width: 10px; + height: 10px; + background: url(./img/scrollbar_arrow.png) no-repeat 0 -18px; +} + +::-webkit-scrollbar-button:end:hover { + background: url(./img/scrollbar_arrow.png) no-repeat -15px -18px; +} + +::-webkit-scrollbar-button:end:active { + background: url(./img/scrollbar_arrow.png) no-repeat -30px -18px; +} diff --git a/themes/yilia/source-src/css/scroll.scss b/themes/yilia/source-src/css/scroll.scss deleted file mode 100644 index 979c0d8..0000000 --- a/themes/yilia/source-src/css/scroll.scss +++ /dev/null @@ -1,65 +0,0 @@ -/* 设置滚动条的样式 */ -::-webkit-scrollbar { - width: 10px; - height: 10px; - background-color: $colorBg; -} - -::-webkit-scrollbar-button { - width: 0; - height: 0; -} - -::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement { - display: none; -} - -::-webkit-scrollbar-corner { - display: block; -} - -::-webkit-scrollbar-thumb { - border-radius: 8px; - background-color: rgba(0,0,0,.3); -} - -::-webkit-scrollbar-thumb:hover { - border-radius: 8px; - background-color: rgba(0,0,0,.5); -} - -::-webkit-scrollbar-track,::-webkit-scrollbar-thumb { - border-right: 1px solid transparent; - border-left: 1px solid transparent; -} - -::-webkit-scrollbar-track:hover { - background-color: rgba(0,0,0,.15); -} -::-webkit-scrollbar-button:start { - width: 10px; - height: 10px; - background: url(./img/scrollbar_arrow.png) no-repeat 0 0; -} - -::-webkit-scrollbar-button:start:hover { - background: url(./img/scrollbar_arrow.png) no-repeat -15px 0; -} - -::-webkit-scrollbar-button:start:active { - background: url(./img/scrollbar_arrow.png) no-repeat -30px 0; -} - -::-webkit-scrollbar-button:end { - width: 10px; - height: 10px; - background: url(./img/scrollbar_arrow.png) no-repeat 0 -18px; -} - -::-webkit-scrollbar-button:end:hover { - background: url(./img/scrollbar_arrow.png) no-repeat -15px -18px; -} - -::-webkit-scrollbar-button:end:active { - background: url(./img/scrollbar_arrow.png) no-repeat -30px -18px; -} \ No newline at end of file diff --git a/themes/yilia/source-src/css/share.scss b/themes/yilia/source-src/css/share.less similarity index 85% rename from themes/yilia/source-src/css/share.scss rename to themes/yilia/source-src/css/share.less index 4b46cf8..486f1a6 100644 --- a/themes/yilia/source-src/css/share.scss +++ b/themes/yilia/source-src/css/share.less @@ -1,5 +1,5 @@ .share-wrap { - min-height: 20px; + min-height: 20px; } .share-btn { float: right; @@ -11,7 +11,7 @@ align-items: center; flex-wrap: wrap; a { - border: 1px solid $colorBorder; + border: 1px solid @colorBorder; border-radius: 50%; display: -moz-inline-stack; display: inline-block; @@ -20,21 +20,21 @@ margin: 10px; transition: 0.3s; text-align: center; - color: $colorF; + color: @colorF; opacity: 0.7; width: 28px; height: 28px; line-height: 26px; text-shadow: 1px 1px 1px #509eb7; &:active { - color: $colorF; + color: @colorF; } &:hover { transform: scale(1.2); } &.share-outer { border: none; - color: $colorF; + color: @colorF; background: #4d4d4d; text-shadow: none; } @@ -49,14 +49,14 @@ padding: 20px; text-align: center; color: #727272; - background: $colorBg; + background: @colorBg; border-radius: 4px; - box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); opacity: 0; transform: translate(-50%, -50%); transition: .3s; p { - margin-bottom: 10px; + margin-bottom: 10px; } &.in { diff --git a/themes/yilia/source-src/css/social.scss b/themes/yilia/source-src/css/social.less similarity index 66% rename from themes/yilia/source-src/css/social.scss rename to themes/yilia/source-src/css/social.less index 049fe75..2ff6817 100644 --- a/themes/yilia/source-src/css/social.scss +++ b/themes/yilia/source-src/css/social.less @@ -1,4 +1,4 @@ -#header .header-nav{ +#header .header-nav { width: 100%; position: absolute; transition: transform .3s ease-in; @@ -9,14 +9,12 @@ flex-wrap: wrap; justify-content: center; a { - border-radius:50%; - display:inline-block; - vertical-align:middle; - *vertical-align:auto; - zoom:1; - *display:inline; - margin:0 8px 15px 8px; - transition:0.3s; + border-radius: 50%; + display: inline-block; + vertical-align: middle; + zoom: 1; + margin: 0 8px 15px 8px; + transition: 0.3s; text-align: center; color: #fff; opacity: 0.7; @@ -24,63 +22,63 @@ height: 28px; line-height: 28px; &:hover { - opacity:1 + opacity: 1; } } a.weibo { background: #aaaaff; - border:1px solid #aaaaff; + border: 1px solid #aaaaff; &:hover { - border:1px solid #aaaaff; + border: 1px solid #aaaaff; } } a.segmentfault { background: #009a61; - border:1px solid #009a61; + border: 1px solid #009a61; &:hover { - border:1px solid #009a61; + border: 1px solid #009a61; } } a.rss { background: #ef7522; - border:1px solid #ef7522; + border: 1px solid #ef7522; &:hover { - border:1px solid #cf5d0f; + border: 1px solid #cf5d0f; } } a.github { background: #767c8d; - border:1px solid #767c8d; + border: 1px solid #767c8d; &:hover { - border:1px solid #666d80; + border: 1px solid #666d80; } } a.facebook { background: #3b5998; - border:1px solid #3b5998; + border: 1px solid #3b5998; &:hover { - border:1px solid #2d4373; + border: 1px solid #2d4373; } } a.google { background: #c83d20; - border:1px solid #c83d20; + border: 1px solid #c83d20; &:hover { - border:1px solid #9c3019; + border: 1px solid #9c3019; } } a.twitter { background: #55cff8; - border:1px solid #55cff8; + border: 1px solid #55cff8; &:hover { - border:1px solid #24c1f6; + border: 1px solid #24c1f6; } } a.linkedin { background: #005a87; - border:1px solid #005a87; + border: 1px solid #005a87; &:hover { - border:1px solid #006b98; + border: 1px solid #006b98; } } /* @@ -100,23 +98,23 @@ }*/ a.zhihu { background: #0078d8; - border:1px solid #0078d8; + border: 1px solid #0078d8; &:hover { - border:1px solid #0078d8; + border: 1px solid #0078d8; } } a.douban { background: #06c611; - border:1px solid #06c611; + border: 1px solid #06c611; &:hover { - border:1px solid #06c611; + border: 1px solid #06c611; } } a.mail { background: #005a87; - border:1px solid #005a87; + border: 1px solid #005a87; &:hover { - border:1px solid #006b98; + border: 1px solid #006b98; } } /* @@ -142,4 +140,4 @@ } }*/ } -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/css/tags.less b/themes/yilia/source-src/css/tags.less new file mode 100644 index 0000000..b02410d --- /dev/null +++ b/themes/yilia/source-src/css/tags.less @@ -0,0 +1,120 @@ +// tags.less +// 标签颜色组：将 @for 循环手动展开 +// @tagColors: #88acdb, #ffa07a, #ca5757, #76becc, #7e608d, #6fc0e4, #bc8f8f + +#header .tagcloud a { + color: #fff; +} +.tagcloud { + a.js-tag { + display: inline-block; + text-decoration: none; + font-weight: normal; + font-size: 10px; + color: @colorF; + height: 18px; + line-height: 18px; + padding: 0 5px 0px 10px; + position: relative; + border-radius: 0 5px 5px 0; + margin: 5px 9px 5px 8px; + font-family: Menlo, Monaco, "Andale Mono", "lucida console"; + &:hover { + opacity: 0.8; + } + &::before { + content: " "; + width: 0px; + height: 0px; + position: absolute; + top: 0; + left: -18px; + border: 9px solid transparent; + } + &::after { + content: " "; + width: 4px; + height: 4px; + background-color: @colorF; + border-radius: 4px; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .3); + position: absolute; + top: 7px; + left: 2px; + } + } + + // 手动展开 @for $index from 1 to 8 的 7 个标签颜色 + a.color1 { + background: #88acdb; + &::before { border-right-color: #88acdb; } + } + a.color2 { + background: #ffa07a; + &::before { border-right-color: #ffa07a; } + } + a.color3 { + background: #ca5757; + &::before { border-right-color: #ca5757; } + } + a.color4 { + background: #76becc; + &::before { border-right-color: #76becc; } + } + a.color5 { + background: #7e608d; + &::before { border-right-color: #7e608d; } + } + a.color6 { + background: #6fc0e4; + &::before { border-right-color: #6fc0e4; } + } + a.color7 { + background: #bc8f8f; + &::before { border-right-color: #bc8f8f; } + } +} + + +.article-tag-list { + .article-tag-list-item { + float: left; + } +} +.article-pop-out { + float: left; + .icon-thumb-tack { + color: @color9; + float: left; + margin-right: 10px; + margin-top: 6px; + } +} +.article-tag, .article-category { + float: left; + .article-tag-list { + float: left; + } + .icon { + color: @color9; + float: left; + margin-right: 10px; + margin-top: 8px; + } +} +.article-pop-out { + float: left; +} + +.archive-article-date { + color: @color9; + margin-right: @articlePadding; + float: right; + transition: color 0.3s; + &:hover { + color: #b5b5b5; + } + .icon { + margin: 5px 5px 5px 0; + } +} diff --git a/themes/yilia/source-src/css/tags.scss b/themes/yilia/source-src/css/tags.scss deleted file mode 100644 index 2a69945..0000000 --- a/themes/yilia/source-src/css/tags.scss +++ /dev/null @@ -1,95 +0,0 @@ -#header .tagcloud a{ - color:#fff; -} -.tagcloud{ - a.js-tag{ - display:inline-block; - text-decoration:none; - font-weight: normal; - font-size:10px; - color:$colorF; - height:18px; - line-height:18px; - padding:0 5px 0px 10px; - position:relative; - border-radius:0 5px 5px 0; - margin: 5px 9px 5px 8px; - font-family: Menlo, Monaco, "Andale Mono", "lucida console"; - &:hover{ - opacity: 0.8; - } - &::before{ - content: " "; - width: 0px; - height: 0px; - position: absolute; - top: 0; - left: -18px; - border: 9px solid transparent; - } - &::after{ - content:" "; - width:4px; - height:4px; - background-color:$colorF; - border-radius:4px; - box-shadow:0px 0px 0px 1px rgba(0,0,0,.3); - position:absolute; - top: 7px; - left: 2px; - } - } - - @for $index from 1 to length($tagcolorList)+1 { - a.color#{$index}{ - background: nth($tagcolorList,$index); - &::before{ - border-right-color: nth($tagcolorList,$index); - } - } - } -} - - -.article-tag-list{ - .article-tag-list-item{ - float: left; - } -} -.article-pop-out{ - float: left; - .icon-thumb-tack { - color: $color9; - float: left; - margin-right: 10px; - margin-top: 6px; - } -} -.article-tag, .article-category{ - float: left; - .article-tag-list{ - float: left; - } - .icon { - color: $color9; - float: left; - margin-right: 10px; - margin-top: 8px; - } -} -.article-pop-out { - float: left; -} - -.archive-article-date { - color: $color9; - margin-right: $articlePadding; - float: right; - transition: color 0.3s; - &:hover { - color: #b5b5b5; - } - .icon { - margin: 5px 5px 5px 0; - } -} \ No newline at end of file diff --git a/themes/yilia/source-src/css/tools.scss b/themes/yilia/source-src/css/tools.less similarity index 73% rename from themes/yilia/source-src/css/tools.scss rename to themes/yilia/source-src/css/tools.less index e7675da..c07e55e 100644 --- a/themes/yilia/source-src/css/tools.scss +++ b/themes/yilia/source-src/css/tools.less @@ -8,18 +8,17 @@ padding: 0; opacity: 0; -webkit-overflow-scrolling: touch; - overflow-scrolling: touch; - @extend %trans; + .trans(); &.show { - @extend %anmSmallLeftIn; + .anmSmallLeftIn(); } &.hide { - @extend %anmSmallLeftOut; + .anmSmallLeftOut(); } .tools-nav { display: none; } - .tools-wrap, .tools-section{ + .tools-wrap, .tools-section { height: 100%; color: #e5e5e5; width: 360px; @@ -33,24 +32,24 @@ .search-wrap { margin: 20px 20px 10px 20px; position: relative; - border-bottom: 2px solid $colorF; + border-bottom: 2px solid @colorF; display: flex; flex-wrap: wrap; .search-ipt { - color: $colorF; + color: @colorF; background: none; border: none; flex-grow: 1; width: 0; min-width: 80px; } - >.icon-search { + > .icon-search { position: absolute; right: 0; bottom: 7px; - color: $colorF; + color: @colorF; cursor: pointer; - @extend %trans; + .trans(); &:hover { transform: scale(1.2); } @@ -63,8 +62,8 @@ white-space: nowrap; font-size: 14px; line-height: 25px; - >.icon-close { - color: darken($colorF, 15%); + > .icon-close { + color: darken(@colorF, 15%); font-size: 12px; position: relative; margin-right: 3px; @@ -79,10 +78,10 @@ text-align: center; position: relative; .article-tag-list { - @extend %trans; + .trans(); margin: 15px 10px 0; padding: 10px; - background: rgba(255,255,255,0.2); + background: rgba(255, 255, 255, 0.2); &.show { display: block; } @@ -95,7 +94,6 @@ margin-top: 10px; color: rgba(77, 77, 77, 0.75); -webkit-overflow-scrolling: touch; - overflow-scrolling: touch; overflow-y: auto; .search-li { padding: 10px 20px; @@ -109,15 +107,15 @@ white-space: nowrap; text-overflow: ellipsis; display: block; - color: rgba(255,255,248,1); - text-shadow: 1px 1px rgba(77,77,77,0.25); + color: rgba(255, 255, 248, 1); + text-shadow: 1px 1px rgba(77, 77, 77, 0.25); .icon { margin-right: 10px; color: #fffdd8; } &:hover { color: #fff; - @extend %trans; + .trans(); } } .search-time, .search-tag, .search-category { @@ -133,7 +131,7 @@ margin-right: 5px; &:hover { color: #fff; - @extend %trans; + .trans(); } } } @@ -145,7 +143,7 @@ } .aboutme-wrap { display: flex; - align-items:center; + align-items: center; justify-content: center; width: 100%; height: 100%; @@ -153,17 +151,18 @@ text-shadow: 1px 1px rgba(77, 77, 77, 0.45); } } -// 按钮开关 -@mixin borderRadius($radius:20px) { - border-radius: $radius; - border-top-left-radius: $radius; - border-top-right-radius: $radius; - border-bottom-left-radius: $radius; - border-bottom-right-radius: $radius; + +// 按钮开关相关 mixin +.borderRadius(@radius: 20px) { + border-radius: @radius; + border-top-left-radius: @radius; + border-top-right-radius: @radius; + border-bottom-left-radius: @radius; + border-bottom-right-radius: @radius; } -$duration: .4s; -$checkedColor: #64bd63; +@duration: .4s; +@checkedColor: #64bd63; label.bui-switch-label { input { position: absolute; @@ -171,18 +170,18 @@ label.bui-switch-label { visibility: hidden; } input:checked { - border-color: $checkedColor; - box-shadow: $checkedColor 0 0 0 16px inset; - background-color: $checkedColor; + border-color: @checkedColor; + box-shadow: @checkedColor 0 0 0 16px inset; + background-color: @checkedColor; &:before { - left: 27px; + left: 27px; } } input:disabled + .bui-switch { background-color: #e8e8e8; border: solid 1px #dfdfdf; &:before { - background-color: #c1c1c1; + background-color: #c1c1c1; } } input:disabled:checked + .bui-switch { @@ -201,13 +200,10 @@ label.bui-switch-label { border: 1px solid #dfdfdf; background-color: #fdfdfd; box-shadow: #dfdfdf 0 0 0 0 inset; - @include borderRadius(); + .borderRadius(); background-clip: content-box; display: inline-block; - -webkit-appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; + appearance: none; user-select: none; outline: none; &:before { @@ -216,28 +212,28 @@ label.bui-switch-label { height: 18px; position: absolute; left: 1px; - @include borderRadius(); + .borderRadius(); background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } } input:checked + .bui-switch { - border-color: $checkedColor; - box-shadow: $checkedColor 0 0 0 16px inset; - background-color: $checkedColor; + border-color: @checkedColor; + box-shadow: @checkedColor 0 0 0 16px inset; + background-color: @checkedColor; &:before { left: 30px; } } &.bui-switch-animbg { - transition: background-color ease $duration; + transition: background-color ease @duration; .bui-switch:before { transition: left 0.3s; } input:checked + .bui-switch { box-shadow: #dfdfdf 0 0 0 0 inset; - background-color: $checkedColor; - transition: border-color $duration, background-color ease $duration; + background-color: @checkedColor; + transition: border-color @duration, background-color ease @duration; &:before { transition: left 0.3s; } @@ -248,7 +244,7 @@ label.bui-switch-label { #search-panel { width: 500px; top: 10%; - transform: translate(-50%,0); + transform: translate(-50%, 0); .search { border-bottom: 1px solid #ccc; display: flex; @@ -273,10 +269,10 @@ label.bui-switch-label { position: relative; .search-result-item { text-align: left; - border-bottom: 1px dashed $colorC; + border-bottom: 1px dashed @colorC; padding: 10px 10px 0; &:hover { - border-bottom-color: $colorA; + border-bottom-color: @colorA; } } .tip { @@ -285,10 +281,10 @@ label.bui-switch-label { .more-item { cursor: pointer; transform: rotate(180deg) translateY(60px); - background: linear-gradient(-180deg,$colorBg 10%,rgba(255, 255, 255, 0) 100%); + background: linear-gradient(-180deg, @colorBg 10%, rgba(255, 255, 255, 0) 100%); position: absolute; height: 70px; width: 100%; } } -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/css/tooltip.scss b/themes/yilia/source-src/css/tooltip.less similarity index 83% rename from themes/yilia/source-src/css/tooltip.scss rename to themes/yilia/source-src/css/tooltip.less index fde540b..c762629 100644 --- a/themes/yilia/source-src/css/tooltip.scss +++ b/themes/yilia/source-src/css/tooltip.less @@ -17,15 +17,15 @@ /* Trigger item */ @keyframes pulse { - from { transform: scale3d(0.5,0.5,1); } - to { transform: scale3d(1,1,1); } + from { transform: scale3d(0.5, 0.5, 1); } + to { transform: scale3d(1, 1, 1); } } /* Tooltip */ .tooltip-content { position: absolute; - background: rgba(36,193,246,0.9); + background: rgba(36, 193, 246, 0.9); z-index: 9999; width: 200px; bottom: 50%; @@ -44,18 +44,18 @@ .tooltip-west .tooltip-content { left: 3.5em; transform-origin: -2em 50%; - transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg); + transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, 30deg); } .tooltip-east .tooltip-content { right: 3.5em; transform-origin: calc(100% + 2em) 50%; - transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg); + transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, -30deg); } .tooltip:hover .tooltip-content { opacity: 1; - transform: translate3d(0,50%,0) rotate3d(0,0,0,0); + transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0); pointer-events: auto; } @@ -83,17 +83,17 @@ .tooltip-west .tooltip-content::before, .tooltip-west .tooltip-content::after { - right: 99%; /* because of FF, otherwise we have a gap */ + right: 99%; } .tooltip-east .tooltip-content::before, .tooltip-east .tooltip-content::after { - left: 99%; /* because of FF, otherwise we have a gap */ + left: 99%; } .tooltip-east .tooltip-content::after { - transform: scale3d(-1,1,1); - } + transform: scale3d(-1, 1, 1); + } } .tooltip-top { @@ -157,25 +157,25 @@ .tooltip-text { border-bottom: 10px solid #4d4d4d; overflow: hidden; - transform: scale3d(0,1,1); + transform: scale3d(0, 1, 1); transition: transform 0.3s ease-in; } .tooltip:hover .tooltip-text { transition-delay: 0s; - transform: scale3d(1,1,1); + transform: scale3d(1, 1, 1); } .tooltip-inner { - background: rgba(36,193,246,0.9); + background: rgba(36, 193, 246, 0.9); padding: 40px; - transform: translate3d(0,100%,0); + transform: translate3d(0, 100%, 0); transition: transform 0.3s ease-in; } .tooltip:hover .tooltip-inner { transition-delay: 0.3s; - transform: translate3d(0,0,0); + transform: translate3d(0, 0, 0); } /* Arrow */ @@ -193,4 +193,4 @@ border-width: 10px; margin-left: -10px; } -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/css/waifu.scss b/themes/yilia/source-src/css/waifu.less similarity index 96% rename from themes/yilia/source-src/css/waifu.scss rename to themes/yilia/source-src/css/waifu.less index 8e6ce0a..e97e689 100644 --- a/themes/yilia/source-src/css/waifu.scss +++ b/themes/yilia/source-src/css/waifu.less @@ -20,7 +20,7 @@ padding: 5px 10px; border: 1px solid rgba(107, 107, 107, 0.7); border-radius: 8px; - background-color: $colorBg; + background-color: @colorBg; font-size: 13px; text-overflow: ellipsis; position: absolute; @@ -48,14 +48,14 @@ width: 0; height: 0; left: 20px; - border-top: 10px $colorBg solid; + border-top: 10px @colorBg solid; border-left: 7px transparent solid; - border-right: 6px $colorBg solid; + border-right: 6px @colorBg solid; border-bottom: 10px transparent solid; } } .waifu-tool { - color: $colorA; + color: @colorA; top: 80px; right: 60px; font-size: 14px; @@ -64,13 +64,13 @@ display: block; cursor: pointer; color: rgb(57, 57, 57); - background-color: $colorBg; + background-color: @colorBg; border: 1px solid rgb(57, 57, 57); border-radius: 5px; padding: 0 4px; margin-bottom: 4px; line-height: 20px; - @extend %trans; + .trans(); animation-duration: 30s; animation-iteration-count: infinite; animation-name: shake; @@ -82,7 +82,7 @@ } } } - #live2d{ + #live2d { position: relative; cursor: grab; &:active { @@ -291,4 +291,4 @@ 0%, 100% { transform: translate(0, 0) rotate(0); } -} \ No newline at end of file +} diff --git a/themes/yilia/source-src/js/main.js b/themes/yilia/source-src/js/main.js index b62349a..ad6ad3a 100644 --- a/themes/yilia/source-src/js/main.js +++ b/themes/yilia/source-src/js/main.js @@ -1,5 +1,5 @@ // 样式 -import '../css/main.scss' +import '../css/main.less' import '../css/font-awsome.css' // 分享 import Share from './share' diff --git a/themes/yilia/webpack.config.js b/themes/yilia/webpack.config.js index 6060282..bc227f7 100644 --- a/themes/yilia/webpack.config.js +++ b/themes/yilia/webpack.config.js @@ -46,8 +46,8 @@ module.exports = function(env, argv) { }, exclude: /node_modules/ },{ - test: /\.(scss|sass)$/, - use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] + test: /\.less$/, + use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] },{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader']