Merge pull request #889 from h3poteto/scroll
closes #888 Change scrollbar design
This commit is contained in:
commit
294903adae
|
@ -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
|
||||
|
|
|
@ -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)'
|
||||
}
|
||||
|
|
|
@ -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(', ')
|
||||
}
|
||||
|
@ -43,7 +44,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
html, body, #app {
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
--theme-background-color: #ffffff;
|
||||
--theme-selected-background-color: #f2f6fc;
|
||||
--theme-global-header-color: #4a5664;
|
||||
|
@ -54,6 +57,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);
|
||||
|
@ -94,6 +98,21 @@ html, body, #app, #global_header {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--theme-scrollbar-color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
|
|
@ -282,7 +282,7 @@ export default {
|
|||
height: calc(100% - 82px);
|
||||
width: 180px;
|
||||
border: none;
|
||||
overflow-y: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
.el-badge__content {
|
||||
background-color: #409eff;
|
||||
|
@ -307,6 +307,10 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.timeline-menu:hover /deep/ {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.narrow-menu /deep/ {
|
||||
width: 64px;
|
||||
|
||||
|
@ -330,5 +334,18 @@ export default {
|
|||
border-radius: 0 4px 4px 0;
|
||||
background-color: var(--theme-global-header-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue