From df8db4e71cff01a5b200b8ee4daf2c2d40358d0c Mon Sep 17 00:00:00 2001 From: WakelessSloth56 Date: Tue, 27 Aug 2024 16:47:54 +0800 Subject: [PATCH] refactor: scss Co-authored-by: lainio24 --- package.json | 7 +- pnpm-lock.yaml | 25 +++++ scripts/build-style.cjs | 13 --- scripts/const.cjs | 13 +-- src/style/_common.scss | 41 +++++++ src/style/_player.scss | 177 +++++++++++++++++++++++++++++ src/style/_start.scss | 26 +++++ src/style/main.scss | 9 ++ src/style/player.css | 242 ---------------------------------------- 9 files changed, 289 insertions(+), 264 deletions(-) delete mode 100644 scripts/build-style.cjs create mode 100644 src/style/_common.scss create mode 100644 src/style/_player.scss create mode 100644 src/style/_start.scss create mode 100644 src/style/main.scss delete mode 100644 src/style/player.css diff --git a/package.json b/package.json index dbd131c..25b9b63 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,14 @@ "scripts": { "dev:html": "cross-env NODE_ENV=development node scripts/build-html.cjs", "dev:script": "cross-env NODE_ENV=development rollup -c --bundleConfigAsCjs", + "dev:style": "cross-env NODE_ENV=development sass src/style/main.scss:public/player.css", "prod:html": "cross-env NODE_ENV=production node scripts/build-html.cjs", "prod:script": "cross-env NODE_ENV=production rollup -c --bundleConfigAsCjs", - "prod:style": "cross-env NODE_ENV=production node scripts/build-style.cjs", + "prod:style": "cross-env NODE_ENV=production sass --style=compressed --no-source-map src/style/main.scss:build/assets/player.min.css", "watch:html": "onchange -i \"src/html/*\" -- pnpm run dev:html", "watch:script": "rollup -c rollup.config.js --bundleConfigAsCjs --watch", - "build:dev": "pnpm run dev:html && pnpm run dev:script", + "watch:style": "sass --watch src/style/main.scss:public/player.css", + "build:dev": "pnpm run dev:html && pnpm run dev:script && pnpm run dev:style", "build": "pnpm run prod:html && pnpm run prod:style && pnpm run prod:script" }, "keywords": [], @@ -52,6 +54,7 @@ "node-html-parser": "^6.1.13", "onchange": "^7.1.0", "rollup": "^4.18.1", + "sass": "^1.77.8", "terser": "^5.31.2", "tslib": "^2.6.3", "typescript": "^5.5.3" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6b1901c..0639b1e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,6 +45,9 @@ importers: rollup: specifier: ^4.18.1 version: 4.18.1 + sass: + specifier: ^1.77.8 + version: 1.77.8 terser: specifier: ^5.31.2 version: 5.31.2 @@ -404,6 +407,9 @@ packages: resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==} engines: {node: '>= 4'} + immutable@4.3.7: + resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==} + is-binary-path@2.1.0: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} engines: {node: '>=8'} @@ -518,6 +524,11 @@ packages: safe-buffer@5.2.1: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} + sass@1.77.8: + resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==} + engines: {node: '>=14.0.0'} + hasBin: true + serialize-javascript@6.0.2: resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==} @@ -536,6 +547,10 @@ packages: smob@1.5.0: resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==} + source-map-js@1.2.0: + resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} + engines: {node: '>=0.10.0'} + source-map-support@0.5.21: resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} @@ -911,6 +926,8 @@ snapshots: ignore@5.3.1: {} + immutable@4.3.7: {} + is-binary-path@2.1.0: dependencies: binary-extensions: 2.3.0 @@ -1046,6 +1063,12 @@ snapshots: safe-buffer@5.2.1: {} + sass@1.77.8: + dependencies: + chokidar: 3.6.0 + immutable: 4.3.7 + source-map-js: 1.2.0 + serialize-javascript@6.0.2: dependencies: randombytes: 2.1.0 @@ -1060,6 +1083,8 @@ snapshots: smob@1.5.0: {} + source-map-js@1.2.0: {} + source-map-support@0.5.21: dependencies: buffer-from: 1.1.2 diff --git a/scripts/build-style.cjs b/scripts/build-style.cjs deleted file mode 100644 index b31fb17..0000000 --- a/scripts/build-style.cjs +++ /dev/null @@ -1,13 +0,0 @@ -const { DEV, inputs, outputs } = require('./const.cjs'); -const { minify } = require('html-minifier-terser'); -const { html: terserOptions } = require('./terser.config.cjs'); -const { readFile, writeFile } = require('./utils.cjs'); - -if (!DEV) { - const css = readFile(inputs.style); - (async () => { - const minCss = await minify(css, terserOptions); - - writeFile(outputs.style.prod, minCss); - })(); -} diff --git a/scripts/const.cjs b/scripts/const.cjs index bc8910c..2da05a6 100644 --- a/scripts/const.cjs +++ b/scripts/const.cjs @@ -1,10 +1,13 @@ -const { srcPath: src, buildPath: build, publicPath: pub } = require('./utils.cjs'); +const { + srcPath: src, + buildPath: build, + publicPath: pub, +} = require('./utils.cjs'); const DEV = process.env.NODE_ENV !== 'production'; const inputs = { html: src('html/index.html'), - style: src('style/player.css'), }; const outputs = { @@ -12,15 +15,11 @@ const outputs = { dev: pub('index.html'), prod: build('index.html'), }, - style: { - dev: pub('player.css'), - prod: build('assets/player.min.css'), - }, }; const styles = { player: [ - '../src/style/player.css', // + 'player.css', // 'assets/player.min.css', ], ccl: [ diff --git a/src/style/_common.scss b/src/style/_common.scss new file mode 100644 index 0000000..571a3f1 --- /dev/null +++ b/src/style/_common.scss @@ -0,0 +1,41 @@ +:root { + --border-color: #7e7e7e; + --bg-color: #f0f0f0; + --fg-color: #181818; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg-color: #181818; + --fg-color: #f0f0f0; + } +} + +.hide { + display: none !important; +} +.invisible { + visibility: hidden !important; +} + +.visible { + opacity: 1; + visibility: visible; +} +.invisible { + opacity: 0; + visibility: hidden; +} +.visibility-transition { + /* transition: opacity 400ms ease, visibility 400ms ease; */ +} + +.center { + text-align: center; +} + +body { + margin: 0; + background-color: var(--bg-color); + color: var(--fg-color); +} diff --git a/src/style/_player.scss b/src/style/_player.scss new file mode 100644 index 0000000..1afd5f5 --- /dev/null +++ b/src/style/_player.scss @@ -0,0 +1,177 @@ +& { + position: absolute; + height: 100%; + width: 100%; + background-color: black !important; + user-select: none; +} + +&[data-mouse-idle='true'] { + .overlays { + cursor: none; + } +} + +video { + position: absolute; + width: 100%; + height: 100%; +} + +.overlays { + position: fixed !important; + bottom: 0; + top: 0; + left: 0; + right: 0; +} + +.box { + background-color: var(--bg-color); + border: { + width: 1px; + style: solid; + color: var(--border-color); + } +} + +&.fullscreen .controls { + padding: 2px 4px; +} + +.controls-wrapper { + position: absolute; + bottom: 0; + left: 0; + right: 0; + z-index: 999999; + + .controls { + position: relative; + display: flex; + align-items: center; + gap: 4px; + padding: 2px 4px 4px 4px; + border-width: 1px 0 0 0 !important; + + button.play-toggle { + padding: 2px 5px; + } + + .volume-wrapper { + display: flex; + gap: 2px; + height: 22px; + + .volume { + max-width: 3em; + } + } + + .progress-wrapper { + flex: 1; + position: relative; + display: flex; + height: 22px; + + .progress { + width: 100%; + } + + .progress-popup { + position: absolute; + padding: 2px 4px; + top: -32px; + } + } + + .time-label { + line-height: 0; + + .time-input { + font-family: auto; + font-size: inherit; + padding: 0; + cursor: text; + border: none; + background-color: var(--bg-color); + + &::-webkit-datetime-edit { + display: contents; + } + &::-webkit-calendar-picker-indicator { + display: none; + } + &::-webkit-datetime-edit-fields-wrapper, + &::-webkit-datetime-edit-hour-field, + &::-webkit-datetime-edit-minute-field, + &::-webkit-datetime-edit-second-field { + padding: 0; + } + } + } + + .playback-rate { + height: 22px; + } + + .danmaku-controls { + display: flex; + gap: 2px; + + input { + max-width: 3em; + } + } + } +} + +.toast { + position: absolute; + padding: 2px 4px; + width: fit-content; + top: 4px; + left: 6px; + z-index: 999999; +} + +.danmaku-list { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + padding: 12px 10px 12px 18px; + max-width: 460px; + max-height: 540px; + z-index: 999990; + + ul { + width: 100%; + height: 100%; + overflow-y: auto; + padding: 0; + margin: 0; + + li { + padding: 4px 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + & > span:first-child { + margin-right: 12px; + } + + &::marker { + display: none; + } + } + } +} + +input[type='number']::-webkit-inner-spin-button, +input[type='number']::-webkit-outer-spin-button { + opacity: 1; +} diff --git a/src/style/_start.scss b/src/style/_start.scss new file mode 100644 index 0000000..e129f1a --- /dev/null +++ b/src/style/_start.scss @@ -0,0 +1,26 @@ +& { + margin: 2em auto; + max-width: 75%; +} + +&, +tr, +td { + border: 1px solid; + border-collapse: collapse; + padding: 4px 6px; +} + +tr > td:nth-child(1) { + text-wrap: nowrap; +} + +th { + padding: 0.5em; + + & > div { + font-weight: lighter; + font-size: smaller; + color: var(--border-color); + } +} diff --git a/src/style/main.scss b/src/style/main.scss new file mode 100644 index 0000000..44c0539 --- /dev/null +++ b/src/style/main.scss @@ -0,0 +1,9 @@ +@import 'common'; + +#start-panel { + @import 'start'; +} + +.player { + @import 'player'; +} diff --git a/src/style/player.css b/src/style/player.css deleted file mode 100644 index 35388f6..0000000 --- a/src/style/player.css +++ /dev/null @@ -1,242 +0,0 @@ -:root { - --border-color: #7e7e7e; - --bg-color: #f0f0f0; - --fg-color: #181818; -} - -@media (prefers-color-scheme: dark) { - :root { - --bg-color: #181818; - --fg-color: #f0f0f0; - } -} - -.hide { - display: none !important; -} -.invisible { - visibility: hidden !important; -} - -.visible { - opacity: 1; - visibility: visible; -} -.invisible { - opacity: 0; - visibility: hidden; -} -.visibility-transition { - /* transition: opacity 400ms ease, visibility 400ms ease; */ -} - -.center { - text-align: center; -} - -#start-panel { - margin: 2em auto; - max-width: 75%; -} - -#start-panel, -#start-panel tr, -#start-panel td { - border: 1px solid; - border-collapse: collapse; - padding: 4px 6px; -} - -#start-panel th { - padding: 0.5em; -} - -#start-panel th > div { - font-weight: lighter; - font-size: smaller; - color: var(--border-color); -} - -#start-panel tr > td:nth-child(1) { - text-wrap: nowrap; -} - -body { - margin: 0; - background-color: var(--bg-color); - color: var(--fg-color); -} - -input[type='number']::-webkit-inner-spin-button, -input[type='number']::-webkit-outer-spin-button { - opacity: 1; -} - -li::marker { - display: none; -} - -.player { - position: absolute; - height: 100%; - width: 100%; - background-color: black !important; - user-select: none; -} - -video { - position: absolute; - width: 100%; - height: 100%; -} - -.overlays { - position: fixed !important; - bottom: 0; - top: 0; - left: 0; - right: 0; -} - -.player[data-mouse-idle='true'] .overlays { - cursor: none; -} - -.player .box { - background-color: var(--bg-color); - border-width: 1px; - border-style: solid; - border-color: var(--border-color); -} - -.controls-wrapper { - position: absolute; - bottom: 0; - left: 0; - right: 0; - z-index: 999999; -} - -.controls { - position: relative; - display: flex; - align-items: center; - gap: 4px; - padding: 2px 4px 4px 4px; - border-width: 1px 0 0 0 !important; -} - -.fullscreen .controls { - padding: 2px 4px; -} - -.controls > button.play-toggle { - padding: 2px 5px; -} - -.controls > .volume-wrapper { - display: flex; - gap: 2px; - height: 22px; -} - -.volume-wrapper > .volume { - max-width: 3em; -} - -.controls > .progress-wrapper { - flex: 1; - position: relative; - display: flex; - height: 22px; -} - -.progress-wrapper > .progress { - width: 100%; -} - -.progress-wrapper > .progress-popup { - position: absolute; - padding: 2px 4px; - top: -32px; -} - -.controls > .time-label { - line-height: 0; -} - -.time-label > .time-input { - font-family: auto; - font-size: inherit; - padding: 0; - cursor: text; - border: none; - background-color: var(--bg-color); -} - -input.time-input::-webkit-datetime-edit { - display: contents; -} -input.time-input::-webkit-calendar-picker-indicator { - display: none; -} -input.time-input::-webkit-datetime-edit-fields-wrapper, -input.time-input::-webkit-datetime-edit-hour-field, -input.time-input::-webkit-datetime-edit-minute-field, -input.time-input::-webkit-datetime-edit-second-field { - padding: 0; -} - -.controls > .playback-rate { - height: 22px; -} - -.controls > .danmaku-controls { - display: flex; - gap: 2px; -} - -.danmaku-controls > input { - max-width: 3em; -} - -.toast { - position: absolute; - padding: 2px 4px; - width: fit-content; - top: 4px; - left: 6px; - z-index: 999999; -} - -.danmaku-list { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - padding: 12px 10px 12px 18px; - max-width: 460px; - max-height: 540px; - z-index: 999990; -} - -.danmaku-list > ul { - width: 100%; - height: 100%; - overflow-y: auto; - padding: 0; - margin: 0; -} - -.danmaku-list li { - padding: 4px 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.danmaku-list li > span:first-child { - margin-right: 12px; -}