style(css): update scrollbar styles

Updated scrollbar styles in App.css to customize appearance and behavior:
- Set width and height for scrollbar
- Defined background colors for track and thumb
- Added hover effect for scrollbar thumb

No breaking changes introduced.
This commit is contained in:
kangfenmao 2024-05-30 16:43:51 +08:00
parent aa4ede4427
commit 737a79f44c
5 changed files with 23 additions and 27 deletions

View File

@ -18,6 +18,8 @@ function createWindow(): void {
y: mainWindowState.y,
width: mainWindowState.width,
height: mainWindowState.height,
minWidth: 800,
minHeight: 500,
show: false,
autoHideMenuBar: true,
titleBarStyle: 'hiddenInset',

View File

@ -115,3 +115,20 @@ body,
flex-direction: row;
flex: 1;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background-color: #292f34;
}
::-webkit-scrollbar-thumb {
background-color: #444c51;
}
::-webkit-scrollbar-thumb:hover {
background-color: #444c51;
}

View File

@ -1,25 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1422 800" opacity="0.3">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="oooscillate-grad">
<stop stop-color="hsl(206, 75%, 49%)" stop-opacity="1" offset="0%"></stop>
<stop stop-color="hsl(331, 90%, 56%)" stop-opacity="1" offset="100%"></stop>
</linearGradient>
</defs>
<g stroke-width="1" stroke="url(#oooscillate-grad)" fill="none" stroke-linecap="round">
<path d="M 0 448 Q 355.5 -100 711 400 Q 1066.5 900 1422 448" opacity="0.05"></path>
<path d="M 0 420 Q 355.5 -100 711 400 Q 1066.5 900 1422 420" opacity="0.11"></path>
<path d="M 0 392 Q 355.5 -100 711 400 Q 1066.5 900 1422 392" opacity="0.18"></path>
<path d="M 0 364 Q 355.5 -100 711 400 Q 1066.5 900 1422 364" opacity="0.24"></path>
<path d="M 0 336 Q 355.5 -100 711 400 Q 1066.5 900 1422 336" opacity="0.30"></path>
<path d="M 0 308 Q 355.5 -100 711 400 Q 1066.5 900 1422 308" opacity="0.37"></path>
<path d="M 0 280 Q 355.5 -100 711 400 Q 1066.5 900 1422 280" opacity="0.43"></path>
<path d="M 0 252 Q 355.5 -100 711 400 Q 1066.5 900 1422 252" opacity="0.49"></path>
<path d="M 0 224 Q 355.5 -100 711 400 Q 1066.5 900 1422 224" opacity="0.56"></path>
<path d="M 0 196 Q 355.5 -100 711 400 Q 1066.5 900 1422 196" opacity="0.62"></path>
<path d="M 0 168 Q 355.5 -100 711 400 Q 1066.5 900 1422 168" opacity="0.68"></path>
<path d="M 0 140 Q 355.5 -100 711 400 Q 1066.5 900 1422 140" opacity="0.75"></path>
<path d="M 0 112 Q 355.5 -100 711 400 Q 1066.5 900 1422 112" opacity="0.81"></path>
<path d="M 0 84 Q 355.5 -100 711 400 Q 1066.5 900 1422 84" opacity="0.87"></path>
<path d="M 0 56 Q 355.5 -100 711 400 Q 1066.5 900 1422 56" opacity="0.94"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -1,5 +1,4 @@
import './assets/css/base.css'
import './App.css'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

View File

@ -33,6 +33,9 @@ const Container = styled.div`
height: calc(100vh - var(--navbar-height) - var(--status-bar-height));
padding: 10px;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
`
const Conversation = styled.div`