From 91d6b44c417e32e9e275840f1f10f277f458704f Mon Sep 17 00:00:00 2001 From: lifegpc Date: Tue, 27 Jun 2023 11:20:33 +0800 Subject: [PATCH] Only enable custom scrollBar to Windows Chrome --- islands/Container.tsx | 1 - routes/_middleware.ts | 2 +- routes/index.tsx | 2 +- static/common.css | 22 +++------------------- static/scrollBar.css | 35 +++++++++++++++++++---------------- static/sw.ts | 2 +- 6 files changed, 25 insertions(+), 39 deletions(-) diff --git a/islands/Container.tsx b/islands/Container.tsx index 03471fe..f52cf02 100644 --- a/islands/Container.tsx +++ b/islands/Container.tsx @@ -40,7 +40,6 @@ export default class Container extends Component { const [display, set_display] = useState(false); const [state, set_state1] = useState("#/"); const [darkmode, set_darkmode1] = useState(DarkMode.Auto); - const [scrollHide, set_ScrollHide] = useState(false); const set_darkmode: StateUpdater = (u) => { const v = typeof u === "function" ? u(darkmode) : u; set_darkmode1(v); diff --git a/routes/_middleware.ts b/routes/_middleware.ts index ee8ae67..ec4d7a0 100644 --- a/routes/_middleware.ts +++ b/routes/_middleware.ts @@ -7,7 +7,7 @@ import { GetFileResponseOptions, } from "../server/get_file_response.ts"; -const STATIC_FILES = ["/common.css", "/sw.js", "/sw.js.map"]; +const STATIC_FILES = ["/common.css", "/scrollBar.css", "/sw.js", "/sw.js.map"]; export async function handler(req: Request, ctx: MiddlewareHandlerContext) { const url = new URL(req.url); diff --git a/routes/index.tsx b/routes/index.tsx index ff3300d..454eb78 100644 --- a/routes/index.tsx +++ b/routes/index.tsx @@ -32,7 +32,7 @@ export default function Index({ data }: PageProps) { {is_windows_chrome - ? + ? : null} diff --git a/static/common.css b/static/common.css index ffea69b..348c193 100644 --- a/static/common.css +++ b/static/common.css @@ -1,19 +1,3 @@ -::-webkit-scrollbar{ - width: 6px; - height: 1px; - } - ::-webkit-scrollbar-thumb{ - border-radius: 100%; - } - ::-webkit-scrollbar-track{ - -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); - border-radius: 10px; - background: #EDEDED; - } - ::-webkit-scrollbar-thumb{ - background: rgba(0, 0, 0, 0.45); - border-radius: 6px; - } body { min-width: 100vw; min-height: 100vh; @@ -277,12 +261,12 @@ div.new_task>div.container>div.bottom { @media (max-width:767px) { - .settings .text-box .text{ + .settings .text-box .text { flex-direction: column; align-items: start; } - .settings .text-box .mdc-text-field{ + .settings .text-box .mdc-text-field { margin: 10px 0; width: 100%; } @@ -292,4 +276,4 @@ div.new_task>div.container>div.bottom { .settings { margin: 0; } -} \ No newline at end of file +} diff --git a/static/scrollBar.css b/static/scrollBar.css index 8cb2a1a..2fbaa6f 100644 --- a/static/scrollBar.css +++ b/static/scrollBar.css @@ -1,16 +1,19 @@ -::-webkit-scrollbar{ - width: 6px; - height: 1px; -} -::-webkit-scrollbar-thumb{ - border-radius: 100%; -} -::-webkit-scrollbar-track{ - -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); - border-radius: 10px; - background: #EDEDED; -} -::-webkit-scrollbar-thumb{ - background: rgba(0, 0, 0, 0.45); - border-radius: 6px; -} \ No newline at end of file +::-webkit-scrollbar { + width: 6px; + height: 1px; +} + +::-webkit-scrollbar-thumb { + border-radius: 100%; +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + border-radius: 10px; + background: #EDEDED; +} + +::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.45); + border-radius: 6px; +} diff --git a/static/sw.ts b/static/sw.ts index bdf558b..f00fcb2 100644 --- a/static/sw.ts +++ b/static/sw.ts @@ -29,7 +29,7 @@ self.addEventListener("activate", (event: ActivateEvent) => { const CACHES = [ "/common.css", - "/hide-scrollbar.css", + "/scrollBar.css", "/preact-material-components/style.css", ];