scrollbar custom code

xtendui · Apr 24, 2024 · e9d348b · e9d348b
1 parent b67d14c
commit e9d348b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 45 deletions.
diff --git a/encore/tailwind.config.js b/encore/tailwind.config.js
@@ -59,15 +59,10 @@ module.exports = {
             },
             // custom scrollbar
             '.xt-overflow-main': {
-              '&::-webkit-scrollbar': {
-                height: '10px',
-                width: '10px',
-                background: theme('colors.white'),
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: theme('colors.gray.900'),
-              },
-              scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.white')}`,
+              scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
+            },
+            '.xt-overflow-sub': {
+              scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
             },
           }),
         },

diff --git a/nextjs/tailwind.config.js b/nextjs/tailwind.config.js
@@ -59,15 +59,10 @@ module.exports = {
             },
             // custom scrollbar
             '.xt-overflow-main': {
-              '&::-webkit-scrollbar': {
-                height: '10px',
-                width: '10px',
-                background: theme('colors.white'),
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: theme('colors.gray.900'),
-              },
-              scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.white')}`,
+              scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
+            },
+            '.xt-overflow-sub': {
+              scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
             },
           }),
         },

diff --git a/parcel/tailwind.config.js b/parcel/tailwind.config.js
@@ -59,15 +59,10 @@ module.exports = {
             },
             // custom scrollbar
             '.xt-overflow-main': {
-              '&::-webkit-scrollbar': {
-                height: '10px',
-                width: '10px',
-                background: theme('colors.white'),
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: theme('colors.gray.900'),
-              },
-              scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.white')}`,
+              scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
+            },
+            '.xt-overflow-sub': {
+              scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
             },
           }),
         },

diff --git a/vite/tailwind.config.js b/vite/tailwind.config.js
@@ -59,15 +59,10 @@ module.exports = {
             },
             // custom scrollbar
             '.xt-overflow-main': {
-              '&::-webkit-scrollbar': {
-                height: '10px',
-                width: '10px',
-                background: theme('colors.white'),
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: theme('colors.gray.900'),
-              },
-              scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.white')}`,
+              scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
+            },
+            '.xt-overflow-sub': {
+              scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
             },
           }),
         },

diff --git a/webpack/tailwind.config.js b/webpack/tailwind.config.js
@@ -59,15 +59,10 @@ module.exports = {
             },
             // custom scrollbar
             '.xt-overflow-main': {
-              '&::-webkit-scrollbar': {
-                height: '10px',
-                width: '10px',
-                background: theme('colors.white'),
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: theme('colors.gray.900'),
-              },
-              scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.white')}`,
+              scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
+            },
+            '.xt-overflow-sub': {
+              scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
             },
           }),
         },