From d925f181124cf9a28471bc80a3a8e86b0efa3e28 Mon Sep 17 00:00:00 2001 From: AkiraFukushima Date: Fri, 19 Apr 2019 23:18:36 +0900 Subject: [PATCH 1/5] refs #888 Set scrollbar design for global css --- src/constants/themeColor/index.d.ts | 3 ++- src/constants/themeColor/index.js | 15 ++++++++++----- src/renderer/App.vue | 15 +++++++++++++++ 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/constants/themeColor/index.d.ts b/src/constants/themeColor/index.d.ts index 794712bb..c3dd8844 100644 --- a/src/constants/themeColor/index.d.ts +++ b/src/constants/themeColor/index.d.ts @@ -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 diff --git a/src/constants/themeColor/index.js b/src/constants/themeColor/index.js index 4997e79d..f09a5fa6 100644 --- a/src/constants/themeColor/index.js +++ b/src/constants/themeColor/index.js @@ -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)' } diff --git a/src/renderer/App.vue b/src/renderer/App.vue index 288d1477..6f4f18bc 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -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 { From 8fdd1046297433589e35504b1e1cad61c6b258e4 Mon Sep 17 00:00:00 2001 From: AkiraFukushima Date: Sat, 20 Apr 2019 00:27:57 +0900 Subject: [PATCH 2/5] refs #888 Fix selector scope in App --- src/renderer/App.vue | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/renderer/App.vue b/src/renderer/App.vue index 6f4f18bc..19ae7f6a 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -44,7 +44,8 @@ export default { From 71bcf0a08307d76cb0a7437f3da28f347dd02b21 Mon Sep 17 00:00:00 2001 From: AkiraFukushima Date: Sat, 20 Apr 2019 11:30:51 +0900 Subject: [PATCH 4/5] refs #888 Show scrollbar only hoverred in SideMenu --- src/renderer/components/TimelineSpace/SideMenu.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue index 6600f6b4..a94f2a13 100644 --- a/src/renderer/components/TimelineSpace/SideMenu.vue +++ b/src/renderer/components/TimelineSpace/SideMenu.vue @@ -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; From 41402c0501ad71ffaca79f120a6663119f3aa09b Mon Sep 17 00:00:00 2001 From: AkiraFukushima Date: Mon, 22 Apr 2019 22:15:44 +0900 Subject: [PATCH 5/5] refs #888 Fix css selector --- src/renderer/App.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/renderer/App.vue b/src/renderer/App.vue index 19ae7f6a..57ec2e1b 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -45,7 +45,8 @@ export default {