refactor: scss

Co-authored-by: lainio24 <[email protected]>

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"

scripts/const.cjs

@@ -1,26 +1,25 @@
-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 = {
     html: {
         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: [

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);
+}

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;
+}

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);
+    }
+}