danvics/Handy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better scrollbars on macos

Browse source
This commit is contained in:
CJ Pais 2026-03-18 20:26:02 +08:00
parent 075a588791
commit 012e066697
2 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/App.css
View file

@ -62,17 +62,22 @@
} }
} }
/* Custom Scrollbar */ /* macOS - tint native overlay scrollbar thumb */
::-webkit-scrollbar { :root[data-platform="macos"] {
scrollbar-color: var(--scrollbar-thumb) transparent;
}
/* Custom Scrollbar - only on Windows/Linux; macOS uses native overlay scrollbars */
:root:not([data-platform="macos"]) ::-webkit-scrollbar {
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
::-webkit-scrollbar-track { :root:not([data-platform="macos"]) ::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { :root:not([data-platform="macos"]) ::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb); background-color: var(--scrollbar-thumb);
border-radius: 20px; border-radius: 20px;
border: 3px solid transparent; border: 3px solid transparent;
@ -82,7 +87,7 @@
min-height: 32px; min-height: 32px;
} }
::-webkit-scrollbar-thumb:hover { :root:not([data-platform="macos"]) ::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover); background-color: var(--scrollbar-thumb-hover);
} }

4
src/main.tsx
View file

@ -1,7 +1,11 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import { platform } from "@tauri-apps/plugin-os";
import App from "./App"; import App from "./App";
// Set platform before render so CSS can scope per-platform (e.g. scrollbar styles)
document.documentElement.dataset.platform = platform();
// Initialize i18n // Initialize i18n
import "./i18n"; import "./i18n";