Mastodon/Whalebird-desktop-client-mac-linux-windows
1
0
Fork 0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2025-01-30 17:15:16 +01:00
Code Issues Releases Wiki Activity

refs #888 Set scrollbar design for global css

Browse Source
This commit is contained in:
AkiraFukushima 2019-04-19 23:18:36 +09:00
parent a0254b0bd3
commit d925f18112
3 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/constants/themeColor/index.d.ts vendored
View File

@ -8,7 +8,8 @@ export type ThemeColorType = {
secondary_color: string,
border_color: string,
header_menu_color: string,
wrapper_mask_color: string
wrapper_mask_color: string,
scrollbar_color: string
}
declare var LightTheme: ThemeColorType

15
src/constants/themeColor/index.js
View File

@ -8,7 +8,8 @@ export const LightTheme = {
secondary_color: '#909399',
border_color: '#ebeef5',
header_menu_color: '#ffffff',
wrapper_mask_color: 'rgba(255, 255, 255, 0.7)'
wrapper_mask_color: 'rgba(255, 255, 255, 0.7)',
scrollbar_color: 'rgba(0, 0, 0, 0.4)'
}
export const DarkTheme = {
@ -21,7 +22,8 @@ export const DarkTheme = {
secondary_color: '#e4e7ed',
border_color: '#606266',
header_menu_color: '#444b5d',
wrapper_mask_color: 'rgba(0, 0, 0, 0.7)'
wrapper_mask_color: 'rgba(0, 0, 0, 0.7)',
scrollbar_color: 'rgba(255, 255, 255, 0.4)'
}
export const SolarizedLightTheme = {
@ -34,7 +36,8 @@ export const SolarizedLightTheme = {
secondary_color: '#839496',
border_color: '#93a1a1',
header_menu_color: '#fdf6e3',
wrapper_mask_color: 'rgba(255, 255, 255, 0.7)'
wrapper_mask_color: 'rgba(255, 255, 255, 0.7)',
scrollbar_color: 'rgba(0, 0, 0, 0.4)'
}
export const SolarizedDarkTheme = {
@ -47,7 +50,8 @@ export const SolarizedDarkTheme = {
secondary_color: '#839496',
border_color: '#93a1a1',
header_menu_color: '#393f4f',
wrapper_mask_color: 'rgba(0, 0, 0, 0.7)'
wrapper_mask_color: 'rgba(0, 0, 0, 0.7)',
scrollbar_color: 'rgba(255, 255, 255, 0.4)'
}
export const KimbieDarkTheme = {
@ -60,5 +64,6 @@ export const KimbieDarkTheme = {
secondary_color: '#d3af86',
border_color: '#d6baad',
header_menu_color: '#a57a4c',
wrapper_mask_color: 'rgba(0, 0, 0, 0.7)'
wrapper_mask_color: 'rgba(0, 0, 0, 0.7)',
scrollbar_color: 'rgba(255, 255, 255, 0.4)'
}

15
src/renderer/App.vue
View File

@ -23,6 +23,7 @@ export default {
'--theme-border-color': state.App.theme.border_color,
'--theme-header-menu-color': state.App.theme.header_menu_color,
'--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
'--theme-scrollbar-color': state.App.theme.scrollbar_color,
'--base-font-size': `${state.App.fontSize}px`,
'--specified-fonts': state.App.defaultFonts.join(', ')
}
@ -54,6 +55,7 @@ html, body, #app {
--theme-border-color: #ebeef5;
--theme-header-menu-color: #ffffff;
--theme-wrapper-mask-color: rgba(255, 255, 255, 0.7);
--theme-scrollbar-color: rgba(0, 0, 0, 0.4);
background-color: var(--theme-background-color);
color: var(--theme-primary-color);
@ -87,6 +89,19 @@ html, body, #app {
button {
font-family: var(--specified-fonts);
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: var(--theme-scrollbar-color);
border-radius: 10px;
}
}
html, body, #app, #global_header {