light-chaser-pro 1.0.0

package/light-chaser-app/src/framework/screen-fit/ScreenFit.tsx

@@ -0,0 +1,177 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {CSSProperties, ReactNode, useEffect, useRef, useState} from 'react'
+import {debounce} from "lodash";
+import './ScreenFit.less';
+import {AdaptationType} from 'light-chaser-types/types/CanvasTypes';
+
+interface ScreenFitProps {
+    children?: ReactNode
+    width: number | string
+    height: number | string,
+    bodyOverflowHidden?: boolean
+    delay?: number
+    mode?: AdaptationType
+    scaleChange?: (xScale: number, yScale: number) => void
+}
+
+const screenFitStyleMap: Record<string, CSSProperties> = {
+    'scale': {overflow: 'hidden'},
+    'full-screen': {overflow: 'hidden'},
+    'full-x': {overflow: 'hidden scroll'},
+    'full-y': {overflow: 'scroll hidden'}
+}
+
+export default function ScreenFit(props: ScreenFitProps) {
+    const {width, height, bodyOverflowHidden = true, delay = 200, scaleChange} = props
+    let bodyOverflow: string
+    const elRef = useRef<HTMLDivElement>(null)
+    const [size, setSize] = useState({width, height, originalHeight: 0, originalWidth: 0})
+
+    let observer: MutationObserver;
+
+    function updateSize() {
+        if (size.width && size.height) {
+            elRef.current!.style.width = `${size.width}px`
+            elRef.current!.style.height = `${size.height}px`
+        } else {
+            elRef.current!.style.width = `${size.originalWidth}px`
+            elRef.current!.style.height = ` ${size.originalHeight}px`
+        }
+    }
+
+    function updateScale() {
+        // 获取真实视口尺寸
+        const currentWidth = document.body.clientWidth
+        const currentHeight = document.body.clientHeight
+        // 获取大屏最终的宽高
+        const realWidth = size.width || size.originalWidth
+        const realHeight = size.height || size.originalHeight
+        // 计算缩放比例
+        const widthScale = currentWidth / +realWidth
+        const heightScale = currentHeight / +realHeight
+
+        let scale, domWidth, domHeight, mx, my;
+        switch (props.mode) {
+            case 'full-screen':
+                // 若要铺满全屏，则按照各自比例缩放
+                elRef.current!.style.transform = `scale(${widthScale},${heightScale})`
+                scaleChange && scaleChange(widthScale, heightScale)
+                break;
+            case 'full-x': {
+                // 宽度铺满，高度按相同比例缩放（保持宽高比）
+                elRef.current!.style.transform = `scale(${widthScale}, ${widthScale})`
+                elRef.current!.style.transformOrigin = 'left top'
+                elRef.current!.style.margin = '0'
+
+                // 关键修复：计算缩放后的实际显示高度
+                const scaledHeight = +realHeight * widthScale
+
+                // 使用 padding-bottom 撑开父容器，消除 transform 导致的布局空白
+                // padding-bottom 会被计入布局高度，解决滚动条问题
+                const heightDiff = +realHeight - scaledHeight
+                if (heightDiff > 0) {
+                    // 需要减去差值，因为 transform 缩小后占用空间变小了
+                    elRef.current!.style.paddingBottom = `0px`
+                    elRef.current!.style.marginBottom = `-${heightDiff}px`
+                } else {
+                    elRef.current!.style.paddingBottom = `0px`
+                    elRef.current!.style.marginBottom = `0px`
+                }
+
+                scaleChange && scaleChange(widthScale, widthScale)
+                break;
+            }
+            case 'full-y': {
+                // 高度铺满，宽度按相同比例缩放（保持宽高比）
+                elRef.current!.style.transform = `scale(${heightScale}, ${heightScale})`
+                elRef.current!.style.transformOrigin = 'left top'
+                elRef.current!.style.margin = '0'
+
+                // 同样的逻辑应用到宽度
+                const scaledWidth = +realWidth * heightScale
+                const widthDiff = +realWidth - scaledWidth
+                if (widthDiff > 0) {
+                    elRef.current!.style.paddingRight = `0px`
+                    elRef.current!.style.marginRight = `-${widthDiff}px`
+                } else {
+                    elRef.current!.style.paddingRight = `0px`
+                    elRef.current!.style.marginRight = `0px`
+                }
+
+                scaleChange && scaleChange(heightScale, heightScale)
+                break;
+            }
+            default:
+                // 按照宽高最小比例进行缩放
+                scale = Math.min(widthScale, heightScale)
+                elRef.current!.style.transform = `scale(${scale},${scale})`;
+                domWidth = elRef.current!.clientWidth
+                domHeight = elRef.current!.clientHeight
+                mx = Math.max((currentWidth - domWidth * scale) / 2, 0)
+                my = Math.max((currentHeight - domHeight * scale) / 2, 0)
+                elRef.current!.style.margin = `${my}px ${mx}px`
+                elRef.current!.style.marginBottom = `${my}px`
+                scaleChange && scaleChange(scale, scale)
+                break;
+        }
+    }
+
+    const onResize = debounce(() => {
+        if (!elRef.current) return;
+        updateSize()
+        updateScale()
+    }, delay)
+
+    function initState() {
+        if (bodyOverflowHidden) {
+            bodyOverflow = document.body.style.overflow
+            document.body.style.overflow = 'hidden'
+        }
+        observer = new MutationObserver(() => onResize());
+        observer.observe(elRef.current!, {
+            attributes: true,
+            attributeFilter: ['style'],
+            attributeOldValue: true
+        })
+        setSize({
+            ...size,
+            originalWidth: window.screen.width,
+            originalHeight: window.screen.height
+        })
+        updateSize();
+        updateScale();
+        window.addEventListener('resize', onResize);
+    }
+
+    useEffect(() => {
+        initState()
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', onResize);
+            if (bodyOverflowHidden)
+                document.body.style.overflow = bodyOverflow;
+        }
+    }, [])
+
+    const scrollStyle = screenFitStyleMap[props.mode || 'scale']
+
+    return (
+        <div style={{...scrollStyle}}
+             className={'react-screen-box'}>
+            <div className={'screen-wrapper'}
+                 ref={elRef}>
+                {props.children}
+            </div>
+        </div>
+    )
+}

package/light-chaser-app/src/global/ExportEditGlobalMember.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import React from "react";
+import AbstractDesignerController from "../framework/core/AbstractDesignerController.ts";
+import AbstractDesignerDefinition from "../framework/core/AbstractDesignerDefinition.ts";
+import BaseInfo from "../comps/common-component/base-info/BaseInfo.tsx";
+import AnimationConfig from "../comps/common-component/animation-config/AnimationConfig.tsx";
+import ThemeConfig from "../comps/common-component/theme-config/ThemeConfig.tsx";
+import FilterConfig from "../comps/common-component/filter-config/FilterConfig.tsx";
+import {LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import DataConfig from "../comps/common-component/data-config/DataConfig.tsx";
+import ReactDOM from "react-dom";
+import ObjectUtil from "light-chaser-util/lib/ObjectUtil.ts";
+import ComponentUtil from "light-chaser-util/lib/ComponentUtil.ts";
+import FetchUtil from "../util/FetchUtil.ts";
+
+/**
+ * 以下抛出的全局变量为服务器组件运行所需要的基础环境，在Edit环境下
+ * BaseInfo,AnimationConfig,ThemeConfig,FilterConfig,LCGUI必须抛出
+ */
+
+window['React'] = React;
+window['ReactDOM'] = ReactDOM;
+
+window.LightChaserInterface = {
+    AbstractDesignerController,
+    AbstractDesignerDefinition,
+    BaseInfo,
+    AnimationConfig,
+    ThemeConfig,
+    DataConfig,
+    FilterConfig
+}
+
+window.LightChaserUtil = {
+    ObjectUtil,
+    ComponentUtil,
+    FetchUtil
+}
+
+window.LightChaserUI = {
+    LCGUI
+}
+
+export {}

package/light-chaser-app/src/global/ExportViewGlobalMember.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import React from "react";
+import AbstractDesignerController from "../framework/core/AbstractDesignerController.ts";
+import AbstractDesignerDefinition from "../framework/core/AbstractDesignerDefinition.ts";
+import ReactDOM from "react-dom";
+import ObjectUtil from "light-chaser-util/lib/ObjectUtil.ts";
+import ComponentUtil from "light-chaser-util/lib/ComponentUtil.ts";
+import FetchUtil from "../util/FetchUtil.ts";
+
+/**
+ * 以下抛出的全局变量为服务器组件运行所需要的基础环境, 在View环境下仅需抛出组件运行的必要依赖即可。congfig，LCGUI等配置项不需要抛出
+ */
+
+window['React'] = React;
+window['ReactDOM'] = ReactDOM;
+
+window.LightChaserInterface = {
+    AbstractDesignerController,
+    AbstractDesignerDefinition,
+}
+
+window.LightChaserUtil = {
+    ObjectUtil,
+    ComponentUtil,
+    FetchUtil
+}
+
+window.LightChaserUI = {}
+
+export {}

package/light-chaser-app/src/global/GlobalConstants.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+export const LIGHT_CHASER_PROJECT_LIST = 'light_chaser_project_list';
+
+export const IMAGE_SOURCE_PREFIX = 'image_source_';
+
+export const COVER_PREFIX = 'cover_';

package/light-chaser-app/src/images/lock.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  - Copyright © 2023-2025 puyinzhen
+  - All rights reserved.
+  -
+  - The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+  -
+  - This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+  -
+  - For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+  -->
+
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>lock</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录" transform="translate(-533.000000, -572.000000)" fill-rule="nonzero">
+            <g id="lock" transform="translate(533.000000, 572.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M13,7.25 L11.9375,7.25 L11.9375,3.75 C11.9375,2.6453125 11.0421875,1.75 9.9375,1.75 L6.0625,1.75 C4.9578125,1.75 4.0625,2.6453125 4.0625,3.75 L4.0625,7.25 L3,7.25 C2.7234375,7.25 2.5,7.4734375 2.5,7.75 L2.5,13.75 C2.5,14.0265625 2.7234375,14.25 3,14.25 L13,14.25 C13.2765625,14.25 13.5,14.0265625 13.5,13.75 L13.5,7.75 C13.5,7.4734375 13.2765625,7.25 13,7.25 Z M5.1875,3.75 C5.1875,3.2671875 5.5796875,2.875 6.0625,2.875 L9.9375,2.875 C10.4203125,2.875 10.8125,3.2671875 10.8125,3.75 L10.8125,7.25 L5.1875,7.25 L5.1875,3.75 Z M12.375,13.125 L3.625,13.125 L3.625,8.375 L12.375,8.375 L12.375,13.125 Z M7.5625,10.953125 L7.5625,11.78125 C7.5625,11.85 7.61875,11.90625 7.6875,11.90625 L8.3125,11.90625 C8.38125,11.90625 8.4375,11.85 8.4375,11.78125 L8.4375,10.953125 C8.6265625,10.8171875 8.75,10.5953125 8.75,10.34375 C8.75,9.9296875 8.4140625,9.59375 8,9.59375 C7.5859375,9.59375 7.25,9.9296875 7.25,10.34375 C7.25,10.5953125 7.3734375,10.8171875 7.5625,10.953125 Z" id="形状" fill="#FFFFFF" opacity="0.65"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/light-chaser-app/src/images/user.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  - Copyright © 2023-2025 puyinzhen
+  - All rights reserved.
+  -
+  - The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+  -
+  - This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+  -
+  - For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+  -->
+
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>user</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.65">
+        <g id="登录" transform="translate(-533.000000, -508.000000)" fill-rule="nonzero">
+            <g id="user" transform="translate(533.000000, 508.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M13.4140625,11.93125 C13.11875,11.23125 12.69375,10.603125 12.1546875,10.0640625 C11.615625,9.525 10.9875,9.1015625 10.2875,8.8046875 C10.28125,8.8015625 10.275,8.8 10.26875,8.796875 C11.2421875,8.09375 11.875,6.9484375 11.875,5.65625 C11.875,3.515625 10.140625,1.78125 8,1.78125 C5.859375,1.78125 4.125,3.515625 4.125,5.65625 C4.125,6.9484375 4.7578125,8.09375 5.73125,8.7984375 C5.725,8.8015625 5.71875,8.803125 5.7125,8.80625 C5.0125,9.1015625 4.384375,9.525 3.8453125,10.065625 C3.30625,10.6046875 2.8828125,11.2328125 2.5859375,11.9328125 C2.2953125,12.6171875 2.140625,13.34375 2.12496822,14.090625 C2.1234375,14.1609375 2.1796875,14.21875 2.25,14.21875 L3.1875,14.21875 C3.25625,14.21875 3.3109375,14.1640625 3.3125,14.096875 C3.34375,12.890625 3.828125,11.7609375 4.684375,10.9046875 C5.5703125,10.01875 6.746875,9.53125 8,9.53125 C9.253125,9.53125 10.4296875,10.01875 11.315625,10.9046875 C12.171875,11.7609375 12.65625,12.890625 12.6875,14.096875 C12.6890625,14.165625 12.74375,14.21875 12.8125,14.21875 L13.75,14.21875 C13.8203125,14.21875 13.8765625,14.1609375 13.8750318,14.090625 C13.859375,13.34375 13.7046875,12.6171875 13.4140625,11.93125 Z M8,8.34375 C7.2828125,8.34375 6.6078125,8.0640625 6.1,7.55625 C5.5921875,7.0484375 5.3125,6.3734375 5.3125,5.65625 C5.3125,4.9390625 5.5921875,4.2640625 6.1,3.75625 C6.6078125,3.2484375 7.2828125,2.96875 8,2.96875 C8.7171875,2.96875 9.3921875,3.2484375 9.9,3.75625 C10.4078125,4.2640625 10.6875,4.9390625 10.6875,5.65625 C10.6875,6.3734375 10.4078125,7.0484375 9.9,7.55625 C9.3921875,8.0640625 8.7171875,8.34375 8,8.34375 Z" id="形状" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/light-chaser-app/src/index.less

@@ -0,0 +1,359 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  monospace;
+}
+
+/* stylelint-disable */
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background: #232323;
+}
+
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+@-ms-viewport {
+  width: device-width;
+}
+
+body {
+  margin: 0;
+}
+
+[tabindex='-1']:focus {
+  outline: none;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  font-weight: 500;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+  border-bottom: 0;
+  cursor: help;
+}
+
+address {
+  margin-bottom: 1em;
+  font-style: normal;
+  line-height: inherit;
+}
+
+input[type='text'],
+input[type='password'],
+input[type='number'],
+textarea {
+  -webkit-appearance: none;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 500;
+}
+
+dd {
+  margin-bottom: 0.5em;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1em;
+}
+
+dfn {
+  font-style: italic;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-size: 1em;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1em;
+  overflow: auto;
+}
+
+figure {
+  margin: 0 0 1em;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+a,
+area,
+button,
+[role='button'],
+input:not([type='range']),
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.75em;
+  padding-bottom: 0.3em;
+  text-align: left;
+  caption-side: bottom;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html [type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type='radio'],
+input[type='checkbox'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type='date'],
+input[type='time'],
+input[type='datetime-local'],
+input[type='month'] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 0.5em;
+  padding: 0;
+  color: inherit;
+  font-size: 1.5em;
+  line-height: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type='search'] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+mark {
+  padding: 0.2em;
+  background-color: #feffe6;
+}
+
+body {
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #1E1E2F;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #2C2C3E;
+    border-radius: 4px;
+    border: 1px solid #3A3A4E;
+    transition: all 0.2s ease;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #43435d;
+    border-color: #494961;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: #1E1E2F;
+  }
+
+}