diff options
Diffstat (limited to 'src/styles/layout.scss')
-rw-r--r-- | src/styles/layout.scss | 160 |
1 files changed, 77 insertions, 83 deletions
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index afdd7dec7..ebf468cf0 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -1,12 +1,36 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | html { | 3 | html { overflow: hidden; } |
4 | overflow: hidden; | 4 | |
5 | .theme__dark .app { | ||
6 | .sidebar { | ||
7 | background: $dark-theme-gray-darker; | ||
8 | box-shadow: 0 0 5px 0 $dark-theme-black; | ||
9 | color: $theme-text-color; | ||
10 | |||
11 | .sidebar__add-service { | ||
12 | color: $dark-theme-gray-lighter; | ||
13 | background: $dark-theme-gray; | ||
14 | } | ||
15 | |||
16 | .sidebar__button { | ||
17 | color: $dark-theme-gray-lighter; | ||
18 | font-size: 22px; | ||
19 | |||
20 | &:hover, | ||
21 | &:active { color: $dark-theme-gray-smoke; } | ||
22 | &.is-muted { color: $dark-theme-gray; } | ||
23 | } | ||
24 | } | ||
25 | |||
26 | .app-loader .app-loader__title { color: $dark-theme-gray-lightest; } | ||
5 | } | 27 | } |
6 | 28 | ||
7 | .app { | 29 | .app { |
8 | display: flex; | 30 | display: flex; |
9 | flex-direction: row; | 31 | flex-direction: column; |
32 | |||
33 | .app__content { display: flex; } | ||
10 | 34 | ||
11 | .app__service { | 35 | .app__service { |
12 | display: flex; | 36 | display: flex; |
@@ -15,130 +39,100 @@ html { | |||
15 | } | 39 | } |
16 | } | 40 | } |
17 | 41 | ||
42 | .electron-app-title-bar { z-index: 99999999; } | ||
43 | |||
18 | .window-draggable { | 44 | .window-draggable { |
19 | position: absolute; | ||
20 | width: 100%; | ||
21 | top: 0px; | ||
22 | left: 0px; | ||
23 | height: 35px; | 45 | height: 35px; |
46 | left: 0; | ||
24 | pointer-events: none; | 47 | pointer-events: none; |
25 | -webkit-app-region: drag; | 48 | position: absolute; |
49 | top: 0; | ||
50 | width: 100%; | ||
26 | z-index: 9999; | 51 | z-index: 9999; |
52 | -webkit-app-region: drag; | ||
27 | } | 53 | } |
28 | 54 | ||
29 | .darwin { | 55 | .darwin .sidebar { padding-top: 23px; } |
30 | .sidebar { | ||
31 | padding-top: 23px; | ||
32 | } | ||
33 | } | ||
34 | 56 | ||
35 | .sidebar { | 57 | .sidebar { |
36 | display: flex; | ||
37 | flex-direction: column; | ||
38 | align-items: center; | 58 | align-items: center; |
39 | width: $theme-sidebar-width; | ||
40 | background: $theme-gray-lightest; | 59 | background: $theme-gray-lightest; |
41 | box-shadow: 1px 0 10px rgba(0,0,0,0.08); | 60 | box-shadow: 1px 0 10px rgba(0, 0, 0, .08); |
42 | z-index: 200; | ||
43 | text-align: center; | ||
44 | color: $theme-text-color; | 61 | color: $theme-text-color; |
62 | display: flex; | ||
63 | flex-direction: column; | ||
45 | padding-bottom: 10px; | 64 | padding-bottom: 10px; |
65 | text-align: center; | ||
66 | width: $theme-sidebar-width; | ||
67 | z-index: 200; | ||
46 | 68 | ||
47 | .sidebar__add-service { | 69 | .sidebar__add-service { |
48 | width: 32px; | 70 | color: $theme-gray-light; |
49 | height: 32px; | ||
50 | background: $theme-gray-lighter; | 71 | background: $theme-gray-lighter; |
51 | border-radius: $theme-border-radius-small; | 72 | border-radius: $theme-border-radius-small; |
73 | height: 32px; | ||
52 | margin: 10px auto; | 74 | margin: 10px auto; |
53 | color: $theme-gray-light; | 75 | width: 32px; |
54 | } | 76 | } |
55 | 77 | ||
56 | .sidebar__button { | 78 | .sidebar__button { |
57 | width: $theme-sidebar-width; | 79 | color: $theme-gray-light; |
58 | padding: 7px 0; | ||
59 | font-size: 24px; | 80 | font-size: 24px; |
81 | padding: 7px 0; | ||
60 | position: relative; | 82 | position: relative; |
61 | color: $theme-gray-light; | 83 | width: $theme-sidebar-width; |
62 | |||
63 | &:hover { | ||
64 | color: darken($theme-gray-light, 10%); | ||
65 | } | ||
66 | |||
67 | &:active { | ||
68 | color: lighten($theme-gray-light, 10%); | ||
69 | } | ||
70 | |||
71 | &.is-muted { | ||
72 | color: $theme-brand-primary; | ||
73 | } | ||
74 | 84 | ||
75 | &--new-service { | 85 | &:hover, |
76 | padding-bottom: 6px; | 86 | &:active { color: lighten($theme-gray-light, 10%); } |
77 | } | 87 | &.is-muted { color: $theme-brand-primary; } |
88 | &--new-service { padding-bottom: 6px; } | ||
78 | } | 89 | } |
79 | 90 | ||
80 | & > div { | 91 | & > div { |
81 | display: flex; | 92 | display: flex; |
82 | overflow-y: scroll; | 93 | overflow-y: scroll; |
83 | 94 | ||
84 | &::-webkit-scrollbar { | 95 | &::-webkit-scrollbar { display: none; } |
85 | display: none; | ||
86 | } | ||
87 | } | 96 | } |
88 | } | 97 | } |
89 | 98 | ||
90 | .grid { | 99 | .grid .grid__row { |
91 | .grid__row { | 100 | display: flex; |
92 | display: flex; | 101 | flex-direction: row; |
93 | flex-direction: row; | ||
94 | |||
95 | &>* { | ||
96 | margin-right: 20px; | ||
97 | } | ||
98 | 102 | ||
99 | & :last-child { | 103 | & > * { margin-right: 20px; } |
100 | margin-right: 0; | 104 | & :last-child { margin-right: 0; } |
101 | } | ||
102 | } | ||
103 | } | 105 | } |
104 | 106 | ||
105 | .app-loader { | 107 | .app-loader { |
108 | align-items: center; | ||
106 | display: flex; | 109 | display: flex; |
107 | justify-content: center; | 110 | justify-content: center; |
108 | align-items: center; | ||
109 | 111 | ||
110 | .app-loader__title { | 112 | .app-loader__title { |
111 | color: #FFF; | 113 | color: #FFF; |
112 | font-size: 40px; | 114 | font-size: 40px; |
113 | } | 115 | } |
114 | 116 | ||
115 | &>span { | 117 | & > span { height: auto; } |
116 | height: auto; | ||
117 | } | ||
118 | } | ||
119 | |||
120 | .dev-warning { | ||
121 | display: none; | ||
122 | } | 118 | } |
123 | 119 | ||
124 | .isDevMode { | 120 | .dev-warning { display: none; } |
125 | .dev-warning { | 121 | |
126 | display: block; | 122 | .isDevMode .dev-warning { |
127 | position: fixed; | 123 | border-radius: 3px; |
128 | background: $theme-brand-warning; | 124 | background: $theme-brand-warning; |
129 | width: auto; | 125 | color: #FFF; |
130 | height: auto; | 126 | display: block; |
131 | top: 5px; | 127 | font-size: 10px; |
132 | right: 5px; | 128 | height: auto; |
133 | padding: 4px; | 129 | padding: 4px; |
134 | font-size: 10px; | 130 | position: fixed; |
135 | color: #FFF; | 131 | right: 5px; |
136 | z-index: 999999999; | 132 | top: 5px; |
137 | border-radius: 3px; | 133 | transition: opacity .5s ease; |
138 | transition: opacity 0.5s ease; | 134 | width: auto; |
139 | 135 | z-index: 999999999; | |
140 | &:hover { | 136 | |
141 | opacity: 0; | 137 | &:hover { opacity: 0; } |
142 | } | ||
143 | } | ||
144 | } | 138 | } |