diff --git a/src/renderer-lrc/document/index.tsx b/src/renderer-lrc/document/index.tsx index d9f67e1..4eacb41 100644 --- a/src/renderer-lrc/document/index.tsx +++ b/src/renderer-lrc/document/index.tsx @@ -6,7 +6,7 @@ import { useEffect } from "react"; import "animate.css"; import "rc-slider/assets/index.css"; import "react-toastify/dist/ReactToastify.css"; -import "@/styles/index.scss"; // 全局样式 +import "./styles/index.scss"; // 全局样式 import WindowDrag from "@shared/window-drag/renderer"; bootstrap().then(() => { diff --git a/src/renderer-lrc/document/styles/index.scss b/src/renderer-lrc/document/styles/index.scss new file mode 100644 index 0000000..bbb4f83 --- /dev/null +++ b/src/renderer-lrc/document/styles/index.scss @@ -0,0 +1,113 @@ +html, +body, +#root { + margin: 0; + width: 100vw; + height: 100vh; + overflow: hidden; +} + +::-webkit-scrollbar { + width: var(--scrollbar-width, 8px); + height: 8px; +} + +::-webkit-scrollbar-thumb { + background-color: #b2b2b2; + border-radius: 8px; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #a0a0a0; +} + +::-webkit-scrollbar-thumb:active { + background-color: #a0a0a0; +} + +::-webkit-scrollbar-track { + background-color: rgba(0, 0, 0, 0.1); +} + +.blur10 { + backdrop-filter: blur(10px); +} + +.opacity-button { + opacity: 0.6; + + &:hover { + opacity: 1; + } +} + +.highlight { + color: var(--primaryColor) !important; +} + +input { + outline: none; + font-size: 1rem; + padding: 0.4rem 0.6rem; + border-radius: 2px; + border: 1px solid var(--dividerColor); + box-sizing: border-box; + + &::placeholder { + opacity: 0.6; + } +} + +div[role="button"] { + cursor: pointer; + user-select: none; + + &[data-disabled]:not([data-disabled="false"]) { + cursor: default; + opacity: 0.5; + pointer-events: none; + } + + &[data-type="primaryButton"] { + background-color: var(--primaryColor); + font-size: 1em; + padding: 0.4em 1em; + border-radius: 1.6em; + color: white; + width: fit-content; + line-height: 1em; + } + + &[data-type="normalButton"] { + font-size: 1em; + padding: 0.4em 1em; + border-radius: 1.6em; + color: var(--textColor); + border: 1px solid currentColor; + width: fit-content; + line-height: 1em; + } + + &[data-type="dangerButton"] { + font-size: 1em; + padding: 0.4em 1em; + border-radius: 1.6em; + color: #fc5f5f; + border: 1px solid currentColor; + width: fit-content; + line-height: 1em; + + &[data-fill="true"] { + color: white; + background: #fc5f5f; + } + } +} + +.divider { + width: 100%; + height: 1px; + background-color: var(--dividerColor); + margin-top: 12px; + margin-bottom: 12px; +} \ No newline at end of file diff --git a/src/renderer-minimode/document/index.tsx b/src/renderer-minimode/document/index.tsx index 1f26919..ebd188a 100644 --- a/src/renderer-minimode/document/index.tsx +++ b/src/renderer-minimode/document/index.tsx @@ -8,7 +8,7 @@ import { useEffect } from "react"; import "animate.css"; import "rc-slider/assets/index.css"; import "react-toastify/dist/ReactToastify.css"; -import "@/styles/index.scss"; // 全局样式 +import "./styles/index.scss"; // 全局样式 import WindowDrag from "@shared/window-drag/renderer"; bootstrap().then(() => { diff --git a/src/renderer-minimode/document/styles/index.scss b/src/renderer-minimode/document/styles/index.scss new file mode 100644 index 0000000..bbb4f83 --- /dev/null +++ b/src/renderer-minimode/document/styles/index.scss @@ -0,0 +1,113 @@ +html, +body, +#root { + margin: 0; + width: 100vw; + height: 100vh; + overflow: hidden; +} + +::-webkit-scrollbar { + width: var(--scrollbar-width, 8px); + height: 8px; +} + +::-webkit-scrollbar-thumb { + background-color: #b2b2b2; + border-radius: 8px; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #a0a0a0; +} + +::-webkit-scrollbar-thumb:active { + background-color: #a0a0a0; +} + +::-webkit-scrollbar-track { + background-color: rgba(0, 0, 0, 0.1); +} + +.blur10 { + backdrop-filter: blur(10px); +} + +.opacity-button { + opacity: 0.6; + + &:hover { + opacity: 1; + } +} + +.highlight { + color: var(--primaryColor) !important; +} + +input { + outline: none; + font-size: 1rem; + padding: 0.4rem 0.6rem; + border-radius: 2px; + border: 1px solid var(--dividerColor); + box-sizing: border-box; + + &::placeholder { + opacity: 0.6; + } +} + +div[role="button"] { + cursor: pointer; + user-select: none; + + &[data-disabled]:not([data-disabled="false"]) { + cursor: default; + opacity: 0.5; + pointer-events: none; + } + + &[data-type="primaryButton"] { + background-color: var(--primaryColor); + font-size: 1em; + padding: 0.4em 1em; + border-radius: 1.6em; + color: white; + width: fit-content; + line-height: 1em; + } + + &[data-type="normalButton"] { + font-size: 1em; + padding: 0.4em 1em; + border-radius: 1.6em; + color: var(--textColor); + border: 1px solid currentColor; + width: fit-content; + line-height: 1em; + } + + &[data-type="dangerButton"] { + font-size: 1em; + padding: 0.4em 1em; + border-radius: 1.6em; + color: #fc5f5f; + border: 1px solid currentColor; + width: fit-content; + line-height: 1em; + + &[data-fill="true"] { + color: white; + background: #fc5f5f; + } + } +} + +.divider { + width: 100%; + height: 1px; + background-color: var(--dividerColor); + margin-top: 12px; + margin-bottom: 12px; +} \ No newline at end of file diff --git a/src/renderer/document/index.tsx b/src/renderer/document/index.tsx index 951a425..971d819 100644 --- a/src/renderer/document/index.tsx +++ b/src/renderer/document/index.tsx @@ -10,7 +10,7 @@ import { ToastContainer } from "react-toastify"; import "rc-slider/assets/index.css"; import "react-toastify/dist/ReactToastify.css"; -import "@/styles/index.scss"; // 全局样式 +import "./styles/index.scss"; // 全局样式 import { toastDuration } from "@/common/constant"; import useBootstrap from "./useBootstrap"; import logger from "@shared/logger/renderer"; diff --git a/src/styles/base.scss b/src/renderer/document/styles/base.scss similarity index 100% rename from src/styles/base.scss rename to src/renderer/document/styles/base.scss diff --git a/src/styles/components.scss b/src/renderer/document/styles/components.scss similarity index 100% rename from src/styles/components.scss rename to src/renderer/document/styles/components.scss diff --git a/src/styles/index.scss b/src/renderer/document/styles/index.scss similarity index 100% rename from src/styles/index.scss rename to src/renderer/document/styles/index.scss diff --git a/src/styles/tables.scss b/src/renderer/document/styles/tables.scss similarity index 100% rename from src/styles/tables.scss rename to src/renderer/document/styles/tables.scss diff --git a/src/styles/utilities.scss b/src/renderer/document/styles/utilities.scss similarity index 100% rename from src/styles/utilities.scss rename to src/renderer/document/styles/utilities.scss diff --git a/src/styles/variables.scss b/src/renderer/document/styles/variables.scss similarity index 100% rename from src/styles/variables.scss rename to src/renderer/document/styles/variables.scss