atbackup.pages.dev / atbackup
One-click backups for AT Protocol
fork atom

feat: custom scrollbar

Turtlepaw 92fbed7b 4ccdf747

options
unified split
Changed files
+17 -17
src
App.css
App.tsx
+16 -16
src/App.css
··· 191 overflow-y: auto; 192 } 193 194 - .custom-scrollbar { 195 - scrollbar-width: thin; 196 - scrollbar-color: #6366f1 #18181b; 197 } 198 199 - .custom-scrollbar::-webkit-scrollbar { 200 - width: 10px; 201 - background: #18181b; 202 - border-radius: 8px; 203 } 204 205 - .custom-scrollbar::-webkit-scrollbar-thumb { 206 - background: #6366f1; 207 - border-radius: 8px; 208 - min-height: 40px; 209 - border: 2px solid #18181b; 210 } 211 212 - .custom-scrollbar::-webkit-scrollbar-thumb:hover { 213 - background: #818cf8; 214 } 215 216 - .custom-scrollbar::-webkit-scrollbar-corner { 217 - background: #18181b; 218 }
··· 191 overflow-y: auto; 192 } 193 194 + /* width */ 195 + ::-webkit-scrollbar { 196 + width: 5px; 197 + margin-right: 5px; 198 } 199 200 + /* Track */ 201 + ::-webkit-scrollbar-track { 202 + background: var(--background); 203 } 204 205 + /* Handle */ 206 + ::-webkit-scrollbar-thumb { 207 + background: rgba(225, 225, 225, 0.2); 208 + border-radius: 100px; 209 } 210 211 + /* Handle on hover */ 212 + ::-webkit-scrollbar-thumb:hover { 213 + background: rgba(225, 225, 225, 0.3); 214 } 215 216 + .hide-scroll::-webkit-scrollbar { 217 + display: none; 218 }
+1 -1
src/App.tsx
··· 161 162 return ( 163 <main className="bg-background dark min-h-screen flex flex-col"> 164 - <div className="titlebar" data-tauri-drag-region> 165 <div className="controls pr-[4px]"> 166 <Button 167 variant="ghost"
··· 161 162 return ( 163 <main className="bg-background dark min-h-screen flex flex-col"> 164 + <div className="titlebar hide-scroll" data-tauri-drag-region> 165 <div className="controls pr-[4px]"> 166 <Button 167 variant="ghost"