Files
chrono-snap/src/assets/main.css
Julian Freeman b1b63a9949 custon scrollbar
2026-03-26 20:48:08 -04:00

98 lines
2.1 KiB
CSS

@import "tailwindcss";
@theme {
--color-bg-main: var(--bg-main);
--color-bg-sidebar: var(--bg-sidebar);
--color-bg-card: var(--bg-card);
--color-bg-input: var(--bg-input);
--color-bg-hover: var(--bg-hover);
--color-border-main: var(--border-main);
--color-text-main: var(--text-main);
--color-text-sec: var(--text-sec);
}
:root {
--primary-color: #007AFF;
--bg-main: #FBFBFD;
--bg-sidebar: #F8FAFD;
--bg-card: #FFFFFF;
--bg-input: #F2F2F7;
--bg-hover: #E5E5E7;
--border-main: #E5E5E7;
--text-main: #1D1D1F;
--text-sec: #86868B;
}
html.dark {
--bg-main: #000000;
--bg-sidebar: #1C1C1E;
--bg-card: #1C1C1E;
--bg-input: #2C2C2E;
--bg-hover: #3A3A3C;
--border-main: #38383A;
--text-main: #F5F5F7;
--text-sec: #98989D;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: var(--bg-light);
color: var(--text-main);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
/* Base custom styles for utility-like usage */
.bg-light { background-color: var(--bg-light); }
.bg-sidebar { background-color: var(--sidebar-bg); }
.text-main { color: var(--text-main); }
.text-sec { color: var(--text-sec); }
.border-main { border-color: var(--border-color); }
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 4px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-corner {
background: transparent;
}
.dark ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border: 2px solid transparent;
background-clip: padding-box;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
border: 2px solid transparent;
background-clip: padding-box;
}