diff options
Diffstat (limited to 'src/styles/layout.scss')
-rw-r--r-- | src/styles/layout.scss | 70 |
1 files changed, 49 insertions, 21 deletions
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index acbd65ad1..49e041022 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -1,6 +1,8 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | html { overflow: hidden; } | 3 | html { |
4 | overflow: hidden; | ||
5 | } | ||
4 | 6 | ||
5 | @keyframes pulse-danger { | 7 | @keyframes pulse-danger { |
6 | 0% { | 8 | 0% { |
@@ -21,7 +23,7 @@ html { overflow: hidden; } | |||
21 | 23 | ||
22 | &::after { | 24 | &::after { |
23 | box-shadow: inset 0 0 5px 0 $dark-theme-black, | 25 | box-shadow: inset 0 0 5px 0 $dark-theme-black, |
24 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); | 26 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); |
25 | } | 27 | } |
26 | 28 | ||
27 | .sidebar__add-service { | 29 | .sidebar__add-service { |
@@ -48,12 +50,12 @@ html { overflow: hidden; } | |||
48 | filter: grayscale(1); | 50 | filter: grayscale(1); |
49 | } | 51 | } |
50 | 52 | ||
51 | .update-available { | 53 | .update-available { |
52 | align-items: center; | 54 | align-items: center; |
53 | background: $theme-brand-danger; | 55 | background: $theme-brand-danger; |
54 | border-radius: 20px; | 56 | border-radius: 20px; |
55 | bottom: 5px; | 57 | bottom: 5px; |
56 | color: #FFF; | 58 | color: #fff; |
57 | display: flex; | 59 | display: flex; |
58 | justify-content: center; | 60 | justify-content: center; |
59 | padding: 0px 5px; | 61 | padding: 0px 5px; |
@@ -71,7 +73,9 @@ html { overflow: hidden; } | |||
71 | } | 73 | } |
72 | } | 74 | } |
73 | 75 | ||
74 | .app-loader .app-loader__title { color: $dark-theme-gray-lightest; } | 76 | .app-loader .app-loader__title { |
77 | color: $dark-theme-gray-lightest; | ||
78 | } | ||
75 | } | 79 | } |
76 | 80 | ||
77 | body.win32:not(.isFullScreen) .app .app__content { | 81 | body.win32:not(.isFullScreen) .app .app__content { |
@@ -96,7 +100,9 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
96 | } | 100 | } |
97 | } | 101 | } |
98 | 102 | ||
99 | .electron-app-title-bar { z-index: 99999999; } | 103 | .electron-app-title-bar { |
104 | z-index: 99999999; | ||
105 | } | ||
100 | 106 | ||
101 | .window-draggable { | 107 | .window-draggable { |
102 | height: 22px; | 108 | height: 22px; |
@@ -109,7 +115,9 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
109 | -webkit-app-region: drag; | 115 | -webkit-app-region: drag; |
110 | } | 116 | } |
111 | 117 | ||
112 | .darwin .sidebar { padding-top: 23px; } | 118 | .darwin .sidebar { |
119 | padding-top: 23px; | ||
120 | } | ||
113 | 121 | ||
114 | .sidebar { | 122 | .sidebar { |
115 | position: relative; | 123 | position: relative; |
@@ -133,8 +141,8 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
133 | z-index: 1000; | 141 | z-index: 1000; |
134 | pointer-events: none; | 142 | pointer-events: none; |
135 | clip-path: inset(10px 0 10px 10px); | 143 | clip-path: inset(10px 0 10px 10px); |
136 | box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .12), | 144 | box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.12), |
137 | inset 0 0 2px 0 rgba(0, 0, 0, 0.24); | 145 | inset 0 0 2px 0 rgba(0, 0, 0, 0.24); |
138 | } | 146 | } |
139 | 147 | ||
140 | .sidebar__add-service { | 148 | .sidebar__add-service { |
@@ -154,16 +162,25 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
154 | width: $theme-sidebar-width; | 162 | width: $theme-sidebar-width; |
155 | 163 | ||
156 | &:hover, | 164 | &:hover, |
157 | &:active { color: lighten($theme-gray-light, 10%); } | 165 | &:active { |
158 | &.is-muted, &.is-active { color: $theme-brand-primary; } | 166 | color: lighten($theme-gray-light, 10%); |
159 | &--new-service { padding-bottom: 6px; } | 167 | } |
168 | &.is-muted, | ||
169 | &.is-active { | ||
170 | color: $theme-brand-primary; | ||
171 | } | ||
172 | &--new-service { | ||
173 | padding-bottom: 6px; | ||
174 | } | ||
160 | } | 175 | } |
161 | 176 | ||
162 | & > div { | 177 | & > div { |
163 | display: flex; | 178 | display: flex; |
164 | overflow-y: scroll; | 179 | overflow-y: scroll; |
165 | 180 | ||
166 | &::-webkit-scrollbar { display: none; } | 181 | &::-webkit-scrollbar { |
182 | display: none; | ||
183 | } | ||
167 | } | 184 | } |
168 | } | 185 | } |
169 | 186 | ||
@@ -171,8 +188,12 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
171 | display: flex; | 188 | display: flex; |
172 | flex-direction: row; | 189 | flex-direction: row; |
173 | 190 | ||
174 | & > * { margin-right: 20px; } | 191 | & > * { |
175 | & :last-child { margin-right: 0; } | 192 | margin-right: 20px; |
193 | } | ||
194 | & :last-child { | ||
195 | margin-right: 0; | ||
196 | } | ||
176 | } | 197 | } |
177 | 198 | ||
178 | .app-loader { | 199 | .app-loader { |
@@ -181,19 +202,23 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
181 | justify-content: center; | 202 | justify-content: center; |
182 | 203 | ||
183 | .app-loader__title { | 204 | .app-loader__title { |
184 | color: #FFF; | 205 | color: #fff; |
185 | font-size: 40px; | 206 | font-size: 40px; |
186 | } | 207 | } |
187 | 208 | ||
188 | & > span { height: auto; } | 209 | & > span { |
210 | height: auto; | ||
211 | } | ||
189 | } | 212 | } |
190 | 213 | ||
191 | .dev-warning { display: none; } | 214 | .dev-warning { |
215 | display: none; | ||
216 | } | ||
192 | 217 | ||
193 | .isDevMode .dev-warning { | 218 | .isDevMode .dev-warning { |
194 | border-radius: 3px; | 219 | border-radius: 3px; |
195 | background: $theme-brand-warning; | 220 | background: $theme-brand-warning; |
196 | color: #FFF; | 221 | color: #fff; |
197 | display: block; | 222 | display: block; |
198 | font-size: 8px; | 223 | font-size: 8px; |
199 | height: auto; | 224 | height: auto; |
@@ -201,12 +226,15 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
201 | position: fixed; | 226 | position: fixed; |
202 | left: 9px; | 227 | left: 9px; |
203 | bottom: 0px; | 228 | bottom: 0px; |
204 | transition: opacity .5s ease; | 229 | @media (prefers-reduced-motion: no-preference) { |
230 | transition: opacity 0.5s ease; | ||
231 | } | ||
205 | width: auto; | 232 | width: auto; |
206 | z-index: 999999999; | 233 | z-index: 999999999; |
207 | pointer-events: none; | 234 | pointer-events: none; |
208 | } | 235 | } |
209 | 236 | ||
210 | a, button { | 237 | a, |
238 | button { | ||
211 | cursor: pointer; | 239 | cursor: pointer; |
212 | } | 240 | } |