diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-11-19 16:05:00 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-11-19 16:05:00 +0100 |
commit | 5551cd9650afb48a1789ed36dffbe4df64e75e5b (patch) | |
tree | 5062736ac1ca89824adde9a82380d715a2030fba /src/styles/services.scss | |
parent | Merge branch 'develop' of github.com:meetfranz/franz into develop (diff) | |
parent | Bring package-lock in sync (diff) | |
download | ferdium-app-5551cd9650afb48a1789ed36dffbe4df64e75e5b.tar.gz ferdium-app-5551cd9650afb48a1789ed36dffbe4df64e75e5b.tar.zst ferdium-app-5551cd9650afb48a1789ed36dffbe4df64e75e5b.zip |
Merge branch 'feature/dark-theme' into develop
Diffstat (limited to 'src/styles/services.scss')
-rw-r--r-- | src/styles/services.scss | 60 |
1 files changed, 35 insertions, 25 deletions
diff --git a/src/styles/services.scss b/src/styles/services.scss index 9f6cfc772..0e559501c 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss | |||
@@ -1,30 +1,46 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .services { | ||
4 | background: $dark-theme-gray-darkest; | ||
5 | |||
6 | .services__webview-wrapper { background: $dark-theme-gray-darkest; } | ||
7 | |||
8 | .services__webview, | ||
9 | .services__info-layer { | ||
10 | webview { background: $dark-theme-gray-darkest; } | ||
11 | } | ||
12 | |||
13 | .services__no-service, | ||
14 | .services__info-layer { | ||
15 | background: $dark-theme-gray-darkest; | ||
16 | |||
17 | h1 { color: $dark-theme-gray-lightest; } | ||
18 | } | ||
19 | } | ||
20 | |||
3 | .services { | 21 | .services { |
22 | background: #FFF; | ||
4 | flex: 1; | 23 | flex: 1; |
5 | height: 100%; | 24 | height: 100%; |
6 | position: relative; | ||
7 | overflow: hidden; | ||
8 | background: #FFF; | ||
9 | order: 5; | 25 | order: 5; |
26 | overflow: hidden; | ||
27 | position: relative; | ||
10 | 28 | ||
11 | .services__webview-wrapper { | 29 | .services__webview-wrapper { background: $theme-gray-lighter; } |
12 | background: $theme-gray-lighter; | ||
13 | } | ||
14 | 30 | ||
15 | .services__webview, | 31 | .services__webview, |
16 | .services__info-layer { | 32 | .services__info-layer { |
33 | left: 0; | ||
17 | position: absolute; | 34 | position: absolute; |
18 | width: 100%; | ||
19 | top: 0; | 35 | top: 0; |
20 | left: 0; | 36 | width: 100%; |
21 | z-index: 0; | 37 | z-index: 0; |
22 | 38 | ||
23 | webview { | 39 | webview { |
24 | display: inline-flex; | ||
25 | width: 0px; | ||
26 | height: 0px; | ||
27 | background: $theme-gray-lighter; | 40 | background: $theme-gray-lighter; |
41 | display: inline-flex; | ||
42 | height: 0; | ||
43 | width: 0; | ||
28 | } | 44 | } |
29 | 45 | ||
30 | &.is-active { | 46 | &.is-active { |
@@ -32,36 +48,30 @@ | |||
32 | 48 | ||
33 | webview { | 49 | webview { |
34 | flex: 0 1; | 50 | flex: 0 1; |
35 | width: 100%; | ||
36 | height: 100%; | 51 | height: 100%; |
52 | width: 100%; | ||
37 | } | 53 | } |
38 | } | 54 | } |
39 | 55 | ||
40 | &--force-repaint { | 56 | &--force-repaint webview { z-index: 5; } |
41 | webview { | ||
42 | z-index: 5; | ||
43 | } | ||
44 | } | ||
45 | } | 57 | } |
46 | 58 | ||
47 | .services__no-service, | 59 | .services__no-service, |
48 | .services__info-layer { | 60 | .services__info-layer { |
61 | align-items: center; | ||
62 | background: $theme-gray-lighter; | ||
49 | display: flex; | 63 | display: flex; |
50 | flex-direction: column; | 64 | flex-direction: column; |
51 | justify-content: center; | 65 | justify-content: center; |
52 | align-items: center; | ||
53 | text-align: center; | 66 | text-align: center; |
54 | background: $theme-gray-lighter; | ||
55 | 67 | ||
56 | h1 { | 68 | h1 { |
57 | margin: 25px 0 40px; | ||
58 | color: $theme-gray-dark; | 69 | color: $theme-gray-dark; |
70 | margin: 25px 0 40px; | ||
59 | } | 71 | } |
60 | 72 | ||
61 | a.button, | 73 | a.button, |
62 | button { | 74 | button { margin: 40px 0 20px; } |
63 | margin: 40px 0 20px; | ||
64 | } | ||
65 | } | 75 | } |
66 | 76 | ||
67 | .services__info-layer { | 77 | .services__info-layer { |