diff options
Diffstat (limited to 'src/styles/title-bar.scss')
-rw-r--r-- | src/styles/title-bar.scss | 77 |
1 files changed, 54 insertions, 23 deletions
diff --git a/src/styles/title-bar.scss b/src/styles/title-bar.scss index 5316f35b3..885eb94c4 100644 --- a/src/styles/title-bar.scss +++ b/src/styles/title-bar.scss | |||
@@ -1,49 +1,80 @@ | |||
1 | #electron-app-title-bar { | 1 | @import './config.scss'; |
2 | background: $theme-gray-lightest; | ||
3 | border-bottom: 0; | ||
4 | box-shadow: 0px 0 8px rgba(#000, 0.1); | ||
5 | |||
6 | span { | ||
7 | line-height: normal; | ||
8 | } | ||
9 | 2 | ||
10 | div { | 3 | .theme__dark #electron-app-title-bar { |
11 | height: auto; | 4 | background: $dark-theme-gray-darker; |
12 | } | ||
13 | 5 | ||
14 | .toolbar-dropdown { | 6 | .toolbar-dropdown { |
15 | &.open { | 7 | &.open > .toolbar-button > button { |
16 | box-shadow: 0px 0 8px rgba(#000, 0.1); | 8 | background: $dark-theme-gray-light; |
9 | color: $dark-theme-gray-lightest; | ||
17 | } | 10 | } |
18 | 11 | ||
19 | &:not(.open) { | 12 | &:not(.open) { |
20 | .menu-item .menu-label { | 13 | .menu-item .menu-label { opacity: 1; } |
21 | opacity: 1; | 14 | > .toolbar-button > button:hover { |
15 | background: $dark-theme-gray-darkest; | ||
22 | } | 16 | } |
17 | } | ||
18 | } | ||
23 | 19 | ||
24 | &>.toolbar-button > button:hover { | 20 | #app-menu-bar #foldout-container .foldout { |
25 | background: $theme-brand-primary; | 21 | color: $dark-theme-gray-lightest; |
22 | |||
23 | .menu-pane { | ||
24 | background: $dark-theme-gray-light; | ||
25 | |||
26 | .menu-item { | ||
27 | .accelerator { | ||
28 | color: lighten($dark-theme-gray-light, 20%); | ||
29 | } | ||
30 | } | ||
31 | |||
32 | hr { | ||
33 | border-color: $dark-theme-gray-lighter; | ||
26 | } | 34 | } |
27 | } | 35 | } |
28 | } | 36 | } |
29 | 37 | ||
38 | .list .ReactVirtualized__Grid { | ||
39 | background: $dark-theme-gray-light; | ||
40 | } | ||
41 | } | ||
42 | |||
43 | #electron-app-title-bar { | ||
44 | background: $theme-gray-lightest; | ||
45 | border-bottom: 0; | ||
46 | box-shadow: 0 0 8px rgba(black, .1); | ||
47 | |||
48 | span { line-height: normal; } | ||
49 | |||
50 | div { height: auto; } | ||
51 | |||
52 | .toolbar-dropdown { | ||
53 | &.open { box-shadow: 0 0 8px rgba(black, 0.1); } | ||
54 | |||
55 | &:not(.open) { | ||
56 | .menu-item .menu-label { opacity: 1; } | ||
57 | > .toolbar-button > button:hover { background: $theme-brand-primary; } | ||
58 | } | ||
59 | } | ||
60 | |||
30 | .list-item { | 61 | .list-item { |
31 | .menu-item { | 62 | .menu-item { |
32 | margin: 4px; | ||
33 | border-radius: $theme-border-radius-small; | 63 | border-radius: $theme-border-radius-small; |
64 | margin: 4px; | ||
34 | } | 65 | } |
35 | &.selected, &.selected:focus { | 66 | |
67 | &.selected, | ||
68 | &.selected:focus { | ||
36 | background: none; | 69 | background: none; |
37 | 70 | ||
38 | .menu-item { | 71 | .menu-item { background: $theme-brand-primary; } |
39 | background: $theme-brand-primary; | ||
40 | } | ||
41 | } | 72 | } |
42 | } | 73 | } |
43 | 74 | ||
44 | .menu-pane { | 75 | .menu-pane { |
45 | box-shadow: 0px 0 10px rgba(#000, 0.5); | ||
46 | border-bottom-left-radius: $theme-border-radius-small; | 76 | border-bottom-left-radius: $theme-border-radius-small; |
47 | border-bottom-right-radius: $theme-border-radius-small; | 77 | border-bottom-right-radius: $theme-border-radius-small; |
78 | box-shadow: 0 0 10px rgba(black, .5); | ||
48 | } | 79 | } |
49 | } | 80 | } |