diff options
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/button.scss | 8 | ||||
-rw-r--r-- | src/styles/colors.scss | 2 | ||||
-rw-r--r-- | src/styles/layout.scss | 24 | ||||
-rw-r--r-- | src/styles/tabs.scss | 2 | ||||
-rw-r--r-- | src/styles/vertical.scss | 48 |
5 files changed, 67 insertions, 17 deletions
diff --git a/src/styles/button.scss b/src/styles/button.scss index cf2568fc4..d18b683d5 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -8,11 +8,11 @@ | |||
8 | &:active { background: lighten($theme-brand-primary, 5%); } | 8 | &:active { background: lighten($theme-brand-primary, 5%); } |
9 | 9 | ||
10 | &.franz-form__button--secondary { | 10 | &.franz-form__button--secondary { |
11 | background: $dark-theme-gray-lighter; | 11 | background: $dark-theme-gray-dark; |
12 | color: $dark-theme-text-color; | 12 | color: $dark-theme-text-color; |
13 | 13 | ||
14 | &:hover { background: lighten($dark-theme-gray-lighter, 10%); } | 14 | &:hover { background: lighten($dark-theme-gray-dark, 10%); } |
15 | &:active { background: lighten($dark-theme-gray-lighter, 20%); } | 15 | &:active { background: lighten($dark-theme-gray-dark, 20%); } |
16 | } | 16 | } |
17 | 17 | ||
18 | &.franz-form__button--danger { | 18 | &.franz-form__button--danger { |
@@ -138,4 +138,4 @@ | |||
138 | color: #FFFFFF; | 138 | color: #FFFFFF; |
139 | cursor: pointer; | 139 | cursor: pointer; |
140 | } | 140 | } |
141 | } \ No newline at end of file | 141 | } |
diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 6afe872bd..a33d26cf1 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss | |||
@@ -1,7 +1,7 @@ | |||
1 | @import "./type-helper"; | 1 | @import "./type-helper"; |
2 | 2 | ||
3 | $theme-brand-primary: convert-rgb-string-to-color($raw-theme-brand-primary); | 3 | $theme-brand-primary: convert-rgb-string-to-color($raw-theme-brand-primary); |
4 | $theme-brand-gradient: #7266F0; | 4 | $theme-brand-gradient: $theme-brand-primary; |
5 | $theme-brand-success: convert-rgb-string-to-color($raw-theme-brand-success); | 5 | $theme-brand-success: convert-rgb-string-to-color($raw-theme-brand-success); |
6 | $theme-brand-info: convert-rgb-string-to-color($raw-theme-brand-info); | 6 | $theme-brand-info: convert-rgb-string-to-color($raw-theme-brand-info); |
7 | $theme-brand-warning: convert-rgb-string-to-color($raw-theme-brand-warning); | 7 | $theme-brand-warning: convert-rgb-string-to-color($raw-theme-brand-warning); |
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index ecc305193..acbd65ad1 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -17,9 +17,13 @@ html { overflow: hidden; } | |||
17 | .theme__dark .app { | 17 | .theme__dark .app { |
18 | .sidebar { | 18 | .sidebar { |
19 | background: $dark-theme-gray-darker; | 19 | background: $dark-theme-gray-darker; |
20 | box-shadow: 0 0 5px 0 $dark-theme-black; | ||
21 | color: $theme-text-color; | 20 | color: $theme-text-color; |
22 | 21 | ||
22 | &::after { | ||
23 | box-shadow: inset 0 0 5px 0 $dark-theme-black, | ||
24 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); | ||
25 | } | ||
26 | |||
23 | .sidebar__add-service { | 27 | .sidebar__add-service { |
24 | color: $dark-theme-gray-lighter; | 28 | color: $dark-theme-gray-lighter; |
25 | background: $dark-theme-gray; | 29 | background: $dark-theme-gray; |
@@ -108,9 +112,9 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
108 | .darwin .sidebar { padding-top: 23px; } | 112 | .darwin .sidebar { padding-top: 23px; } |
109 | 113 | ||
110 | .sidebar { | 114 | .sidebar { |
115 | position: relative; | ||
111 | align-items: center; | 116 | align-items: center; |
112 | background: $theme-gray-lightest; | 117 | background: $theme-gray-lightest; |
113 | box-shadow: 1px 0 10px rgba(0, 0, 0, .08); | ||
114 | color: $theme-text-color; | 118 | color: $theme-text-color; |
115 | display: flex; | 119 | display: flex; |
116 | flex-direction: column; | 120 | flex-direction: column; |
@@ -119,6 +123,20 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
119 | width: $theme-sidebar-width; | 123 | width: $theme-sidebar-width; |
120 | z-index: 200; | 124 | z-index: 200; |
121 | 125 | ||
126 | &::after { | ||
127 | content: ' '; | ||
128 | position: absolute; | ||
129 | top: -10px; | ||
130 | right: 0; | ||
131 | bottom: -10px; | ||
132 | left: -10px; | ||
133 | z-index: 1000; | ||
134 | pointer-events: none; | ||
135 | clip-path: inset(10px 0 10px 10px); | ||
136 | box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .12), | ||
137 | inset 0 0 2px 0 rgba(0, 0, 0, 0.24); | ||
138 | } | ||
139 | |||
122 | .sidebar__add-service { | 140 | .sidebar__add-service { |
123 | color: $theme-gray-light; | 141 | color: $theme-gray-light; |
124 | background: $theme-gray-lighter; | 142 | background: $theme-gray-lighter; |
@@ -191,4 +209,4 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
191 | 209 | ||
192 | a, button { | 210 | a, button { |
193 | cursor: pointer; | 211 | cursor: pointer; |
194 | } \ No newline at end of file | 212 | } |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index d09353e38..fb2f1c32a 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -36,7 +36,7 @@ | |||
36 | background: lighten($theme-brand-primary, 35%); | 36 | background: lighten($theme-brand-primary, 35%); |
37 | border-left-width: 4px; | 37 | border-left-width: 4px; |
38 | border-left-style: solid; | 38 | border-left-style: solid; |
39 | border-left-color: $theme-brand-primary; | 39 | color: $theme-brand-primary; |
40 | 40 | ||
41 | .tab-item__icon { margin-left: -4px; } | 41 | .tab-item__icon { margin-left: -4px; } |
42 | } | 42 | } |
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss index 55660a088..426032bf6 100644 --- a/src/styles/vertical.scss +++ b/src/styles/vertical.scss | |||
@@ -1,13 +1,24 @@ | |||
1 | $sidebar-width: 65px; | 1 | @import './config.scss'; |
2 | |||
3 | $sidebar-width: 64px; | ||
2 | 4 | ||
3 | .sidebar { | 5 | .sidebar { |
4 | width: 100vw; | 6 | width: 100vw; |
5 | height: $sidebar-width; | 7 | height: $sidebar-width; |
6 | flex-direction: row; | 8 | flex-direction: row; |
7 | position: absolute; | 9 | position: absolute; |
10 | top: 0; | ||
8 | right: 0; | 11 | right: 0; |
9 | padding-bottom: 0px; | 12 | padding-bottom: 0px; |
10 | 13 | ||
14 | &::after { | ||
15 | top: -10px; | ||
16 | right: -10px; | ||
17 | bottom: 0; | ||
18 | left: -10px; | ||
19 | clip-path: inset(10px 10px 0 10px); | ||
20 | } | ||
21 | |||
11 | div:first-of-type { | 22 | div:first-of-type { |
12 | overflow-x: scroll; | 23 | overflow-x: scroll; |
13 | width: 100%; | 24 | width: 100%; |
@@ -22,7 +33,6 @@ $sidebar-width: 65px; | |||
22 | border-left-width: 0px; | 33 | border-left-width: 0px; |
23 | border-top-width: 4px; | 34 | border-top-width: 4px; |
24 | border-top-style: solid; | 35 | border-top-style: solid; |
25 | border-top-color: #7367f0; | ||
26 | padding-left: 4px; | 36 | padding-left: 4px; |
27 | } | 37 | } |
28 | 38 | ||
@@ -40,17 +50,39 @@ $sidebar-width: 65px; | |||
40 | } | 50 | } |
41 | } | 51 | } |
42 | 52 | ||
43 | .app_service { | 53 | .app .app__content { |
44 | width: 100vw; | 54 | padding-top: $sidebar-width; |
45 | position: absolute; | 55 | } |
46 | top: $sidebar-width; | 56 | |
47 | right: 0; | 57 | .workspaces-drawer { |
58 | margin-top: -$sidebar-width; | ||
59 | height: 100vh; | ||
60 | position: relative; | ||
61 | |||
62 | &::after { | ||
63 | content: ' '; | ||
64 | position: absolute; | ||
65 | top: -10px; | ||
66 | right: 0; | ||
67 | bottom: -10px; | ||
68 | left: -10px; | ||
69 | z-index: 1000; | ||
70 | pointer-events: none; | ||
71 | clip-path: inset(10px 0 10px 10px); | ||
72 | box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .12), | ||
73 | inset 0 0 2px 0 rgba(0, 0, 0, 0.36); | ||
74 | } | ||
48 | } | 75 | } |
49 | 76 | ||
50 | .theme__dark { | 77 | .theme__dark { |
51 | .sidebar .sidebar__button--workspaces.is-active { | 78 | .sidebar .sidebar__button--workspaces.is-active { |
52 | background-color: #2d2f31; | 79 | background-color: #2d2f31; |
53 | } | 80 | } |
81 | |||
82 | .workspaces-drawer::after { | ||
83 | box-shadow: inset 0 0 10px 0 $dark-theme-black, | ||
84 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); | ||
85 | } | ||
54 | } | 86 | } |
55 | 87 | ||
56 | .darwin .sidebar { | 88 | .darwin .sidebar { |
@@ -59,4 +91,4 @@ $sidebar-width: 65px; | |||
59 | .sidebar__button--workspaces.is-active { | 91 | .sidebar__button--workspaces.is-active { |
60 | height: $sidebar-width - 22px; | 92 | height: $sidebar-width - 22px; |
61 | } | 93 | } |
62 | } \ No newline at end of file | 94 | } |