diff options
author | 2023-07-25 09:20:43 -0600 | |
---|---|---|
committer | 2023-07-26 16:28:22 +0000 | |
commit | 4bd3d6764bfd48c881d9722825309ddb5956c758 (patch) | |
tree | 53296e94d91ab2cdc57c4d32a1fbcee071ae7923 /src/styles | |
parent | chore: upgrade @octokit/core to latest (diff) | |
download | ferdium-app-4bd3d6764bfd48c881d9722825309ddb5956c758.tar.gz ferdium-app-4bd3d6764bfd48c881d9722825309ddb5956c758.tar.zst ferdium-app-4bd3d6764bfd48c881d9722825309ddb5956c758.zip |
style: reformat all files properly
- remove .json from .eslintignore
- add type intellisense to .prettierrc.js
- install missing @jest/types which is used in jest.config.js
- split up typecheck and lint into two separate commands
- remove --require-pragma flag from reformat-files which leads to unformatted files
- install suggested @types/prop-types and @types/react-loader dependencies
- add @ts-expect-error to Loader usages
- reformat all scss files automatically with reformat-files command
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/animations.scss | 50 | ||||
-rw-r--r-- | src/styles/auth.scss | 67 | ||||
-rw-r--r-- | src/styles/badge.scss | 6 | ||||
-rw-r--r-- | src/styles/button.scss | 4 | ||||
-rw-r--r-- | src/styles/colors.scss | 72 | ||||
-rw-r--r-- | src/styles/globals.scss | 46 | ||||
-rw-r--r-- | src/styles/info-bar.scss | 34 | ||||
-rw-r--r-- | src/styles/infobox.scss | 26 | ||||
-rw-r--r-- | src/styles/input.scss | 40 | ||||
-rw-r--r-- | src/styles/invite.scss | 8 | ||||
-rw-r--r-- | src/styles/layout.scss | 6 | ||||
-rw-r--r-- | src/styles/main.scss | 1 | ||||
-rw-r--r-- | src/styles/reset.scss | 139 | ||||
-rw-r--r-- | src/styles/searchInput.scss | 4 | ||||
-rw-r--r-- | src/styles/select.scss | 2 | ||||
-rw-r--r-- | src/styles/service-table.scss | 34 | ||||
-rw-r--r-- | src/styles/services.scss | 29 | ||||
-rw-r--r-- | src/styles/settings.scss | 162 | ||||
-rw-r--r-- | src/styles/status-bar-target-url.scss | 2 | ||||
-rw-r--r-- | src/styles/tabs.scss | 7 | ||||
-rw-r--r-- | src/styles/title-bar.scss | 36 | ||||
-rw-r--r-- | src/styles/toggle.scss | 2 | ||||
-rw-r--r-- | src/styles/type-helper.scss | 99 | ||||
-rw-r--r-- | src/styles/type.scss | 4 | ||||
-rw-r--r-- | src/styles/vertical.scss | 21 | ||||
-rw-r--r-- | src/styles/welcome.scss | 4 |
26 files changed, 579 insertions, 326 deletions
diff --git a/src/styles/animations.scss b/src/styles/animations.scss index 35125dec5..dcc9690fb 100644 --- a/src/styles/animations.scss +++ b/src/styles/animations.scss | |||
@@ -1,43 +1,51 @@ | |||
1 | @import "./globals.scss"; | 1 | @import './globals.scss'; |
2 | 2 | ||
3 | // FadeIn | 3 | // FadeIn |
4 | .fadeIn-appear { opacity: .01; } | 4 | .fadeIn-appear { |
5 | opacity: 0.01; | ||
6 | } | ||
5 | 7 | ||
6 | .fadeIn-appear.fadeIn-appear-active { | 8 | .fadeIn-appear.fadeIn-appear-active { |
7 | opacity: 1; | 9 | opacity: 1; |
8 | transition: opacity .5s ease-out; | 10 | transition: opacity 0.5s ease-out; |
9 | } | 11 | } |
10 | 12 | ||
11 | .fadeIn-enter { | 13 | .fadeIn-enter { |
12 | opacity: .01; | 14 | opacity: 0.01; |
13 | transition: opacity .5s ease-out; | 15 | transition: opacity 0.5s ease-out; |
14 | } | 16 | } |
15 | 17 | ||
16 | .fadeIn-leave { opacity: 1; } | 18 | .fadeIn-leave { |
19 | opacity: 1; | ||
20 | } | ||
17 | 21 | ||
18 | .fadeIn-leave.fadeIn-leave-active { | 22 | .fadeIn-leave.fadeIn-leave-active { |
19 | opacity: .01; | 23 | opacity: 0.01; |
20 | transition: opacity 300ms ease-in; | 24 | transition: opacity 300ms ease-in; |
21 | } | 25 | } |
22 | 26 | ||
23 | // FadeIn Fast | 27 | // FadeIn Fast |
24 | .fadeIn-fast-appear { opacity: .01; } | 28 | .fadeIn-fast-appear { |
29 | opacity: 0.01; | ||
30 | } | ||
25 | 31 | ||
26 | .fadeIn-fast-appear.fadeIn-fast-appear-active { | 32 | .fadeIn-fast-appear.fadeIn-fast-appear-active { |
27 | opacity: 1; | 33 | opacity: 1; |
28 | transition: opacity .25s ease-out; | 34 | transition: opacity 0.25s ease-out; |
29 | } | 35 | } |
30 | 36 | ||
31 | .fadeIn-fast-enter { | 37 | .fadeIn-fast-enter { |
32 | opacity: .01; | 38 | opacity: 0.01; |
33 | transition: opacity .25s ease-out; | 39 | transition: opacity 0.25s ease-out; |
34 | } | 40 | } |
35 | 41 | ||
36 | .fadeIn-fast-leave { opacity: 1; } | 42 | .fadeIn-fast-leave { |
43 | opacity: 1; | ||
44 | } | ||
37 | 45 | ||
38 | .fadeIn-fast-leave.fadeIn-fast-leave-active { | 46 | .fadeIn-fast-leave.fadeIn-fast-leave-active { |
39 | opacity: .01; | 47 | opacity: 0.01; |
40 | transition: opacity .25s ease-in; | 48 | transition: opacity 0.25s ease-in; |
41 | } | 49 | } |
42 | 50 | ||
43 | // Slide down | 51 | // Slide down |
@@ -48,12 +56,12 @@ | |||
48 | 56 | ||
49 | .slideDown-appear.slideDown-appear-active { | 57 | .slideDown-appear.slideDown-appear-active { |
50 | max-height: 500px; | 58 | max-height: 500px; |
51 | transition: max-height .5s ease-out; | 59 | transition: max-height 0.5s ease-out; |
52 | } | 60 | } |
53 | 61 | ||
54 | .slideDown-enter { | 62 | .slideDown-enter { |
55 | max-height: 0; | 63 | max-height: 0; |
56 | transition: max-height .5s ease-out; | 64 | transition: max-height 0.5s ease-out; |
57 | } | 65 | } |
58 | 66 | ||
59 | // Slide up | 67 | // Slide up |
@@ -65,18 +73,20 @@ | |||
65 | .slideUp-appear.slideUp-appear-active { | 73 | .slideUp-appear.slideUp-appear-active { |
66 | opacity: 1; | 74 | opacity: 1; |
67 | transform: translateY(0px); | 75 | transform: translateY(0px); |
68 | transition: all .3s ease-out; | 76 | transition: all 0.3s ease-out; |
69 | } | 77 | } |
70 | 78 | ||
71 | .slideUp-enter { | 79 | .slideUp-enter { |
72 | opacity: 0; | 80 | opacity: 0; |
73 | transform: translateY(20px); | 81 | transform: translateY(20px); |
74 | transition: all .3s ease-out; | 82 | transition: all 0.3s ease-out; |
75 | } | 83 | } |
76 | 84 | ||
77 | .slideUp-leave { opacity: 1; } | 85 | .slideUp-leave { |
86 | opacity: 1; | ||
87 | } | ||
78 | 88 | ||
79 | .slideUp-leave.slideUp-leave-active { | 89 | .slideUp-leave.slideUp-leave-active { |
80 | opacity: .01; | 90 | opacity: 0.01; |
81 | transition: opacity 300ms ease-in; | 91 | transition: opacity 300ms ease-in; |
82 | } | 92 | } |
diff --git a/src/styles/auth.scss b/src/styles/auth.scss index 53c03a40a..448b8c2b3 100644 --- a/src/styles/auth.scss +++ b/src/styles/auth.scss | |||
@@ -5,18 +5,20 @@ | |||
5 | 5 | ||
6 | .auth__container { | 6 | .auth__container { |
7 | background: $dark-theme-gray-darker; | 7 | background: $dark-theme-gray-darker; |
8 | box-shadow: 0 0 50px rgba($dark-theme-black, .2); | 8 | box-shadow: 0 0 50px rgba($dark-theme-black, 0.2); |
9 | } | 9 | } |
10 | 10 | ||
11 | .auth__logo.auth__logo--sm { | 11 | .auth__logo.auth__logo--sm { |
12 | border: none; | 12 | border: none; |
13 | box-shadow: 0 0 6px rgba($dark-theme-black, .5); | 13 | box-shadow: 0 0 6px rgba($dark-theme-black, 0.5); |
14 | } | 14 | } |
15 | 15 | ||
16 | .auth__links { | 16 | .auth__links { |
17 | background: $dark-theme-gray-dark; | 17 | background: $dark-theme-gray-dark; |
18 | 18 | ||
19 | a { color: $dark-theme-text-color; } | 19 | a { |
20 | color: $dark-theme-text-color; | ||
21 | } | ||
20 | } | 22 | } |
21 | 23 | ||
22 | .welcome__featured-services { | 24 | .welcome__featured-services { |
@@ -26,7 +28,9 @@ | |||
26 | .legal { | 28 | .legal { |
27 | color: $dark-theme-text-color; | 29 | color: $dark-theme-text-color; |
28 | 30 | ||
29 | a { color: $dark-theme-gray-lightest; } | 31 | a { |
32 | color: $dark-theme-gray-lightest; | ||
33 | } | ||
30 | } | 34 | } |
31 | 35 | ||
32 | .locked__or_line { | 36 | .locked__or_line { |
@@ -53,14 +57,16 @@ | |||
53 | } | 57 | } |
54 | 58 | ||
55 | .auth__container { | 59 | .auth__container { |
56 | background: #FFF; | 60 | background: #fff; |
57 | border-radius: $theme-border-radius; | 61 | border-radius: $theme-border-radius; |
58 | height: auto; | 62 | height: auto; |
59 | margin: 40px auto 0; | 63 | margin: 40px auto 0; |
60 | position: relative; | 64 | position: relative; |
61 | width: 350px; | 65 | width: 350px; |
62 | 66 | ||
63 | &.auth__container--signup { width: 450px; } | 67 | &.auth__container--signup { |
68 | width: 450px; | ||
69 | } | ||
64 | 70 | ||
65 | &.auth__container--releasenotes { | 71 | &.auth__container--releasenotes { |
66 | width: 90%; | 72 | width: 90%; |
@@ -77,16 +83,18 @@ | |||
77 | width: 150px; | 83 | width: 150px; |
78 | 84 | ||
79 | &.auth__logo--sm { | 85 | &.auth__logo--sm { |
80 | border: 4px solid #FFF; | 86 | border: 4px solid #fff; |
81 | border-radius: 100%; | 87 | border-radius: 100%; |
82 | box-shadow: 0 0 6px rgba(black, .5); | 88 | box-shadow: 0 0 6px rgba(black, 0.5); |
83 | } | 89 | } |
84 | } | 90 | } |
85 | 91 | ||
86 | .auth__form { | 92 | .auth__form { |
87 | padding: 20px; | 93 | padding: 20px; |
88 | 94 | ||
89 | h1 { text-align: center; } | 95 | h1 { |
96 | text-align: center; | ||
97 | } | ||
90 | } | 98 | } |
91 | 99 | ||
92 | .auth__button { | 100 | .auth__button { |
@@ -138,11 +146,11 @@ | |||
138 | margin-bottom: 20px; | 146 | margin-bottom: 20px; |
139 | 147 | ||
140 | &:after { | 148 | &:after { |
141 | background: #FFF; | 149 | background: #fff; |
142 | content: 'or'; | 150 | content: 'or'; |
143 | padding: 0 10px; | 151 | padding: 0 10px; |
144 | position: relative; | 152 | position: relative; |
145 | top: -9px; | 153 | top: -9px; |
146 | } | 154 | } |
147 | } | 155 | } |
148 | 156 | ||
@@ -158,7 +166,9 @@ | |||
158 | margin-bottom: 8px; | 166 | margin-bottom: 8px; |
159 | text-align: center; | 167 | text-align: center; |
160 | 168 | ||
161 | &:last-of-type { margin-bottom: 0; } | 169 | &:last-of-type { |
170 | margin-bottom: 0; | ||
171 | } | ||
162 | } | 172 | } |
163 | } | 173 | } |
164 | 174 | ||
@@ -175,24 +185,37 @@ | |||
175 | position: absolute; | 185 | position: absolute; |
176 | right: 25px; | 186 | right: 25px; |
177 | 187 | ||
178 | img { width: 65px; } | 188 | img { |
189 | width: 65px; | ||
190 | } | ||
179 | } | 191 | } |
180 | 192 | ||
181 | .auth__letter { margin-bottom: 30px; text-align: left; } | 193 | .auth__letter { |
182 | .scroll-container { z-index: 10; } | 194 | margin-bottom: 30px; |
183 | .info-bar { position: absolute; } | 195 | text-align: left; |
196 | } | ||
197 | .scroll-container { | ||
198 | z-index: 10; | ||
199 | } | ||
200 | .info-bar { | ||
201 | position: absolute; | ||
202 | } | ||
184 | 203 | ||
185 | &__scroll-container { | 204 | &__scroll-container { |
186 | width: 100%; | 205 | width: 100%; |
187 | height: fit-content; | 206 | height: fit-content; |
188 | } | 207 | } |
189 | 208 | ||
190 | .available-services { margin-bottom: 15px; } | 209 | .available-services { |
210 | margin-bottom: 15px; | ||
211 | } | ||
191 | 212 | ||
192 | .unavailable-services { | 213 | .unavailable-services { |
193 | margin: 15px 0; | 214 | margin: 15px 0; |
194 | 215 | ||
195 | p { text-transform: capitalize; } | 216 | p { |
217 | text-transform: capitalize; | ||
218 | } | ||
196 | } | 219 | } |
197 | 220 | ||
198 | .legal { | 221 | .legal { |
@@ -220,7 +243,7 @@ | |||
220 | height: fit-content; | 243 | height: fit-content; |
221 | 244 | ||
222 | &-item__secondary { | 245 | &-item__secondary { |
223 | padding-left: 5px | 246 | padding-left: 5px; |
224 | } | 247 | } |
225 | } | 248 | } |
226 | 249 | ||
diff --git a/src/styles/badge.scss b/src/styles/badge.scss index 78309ea18..0ac17c6ed 100644 --- a/src/styles/badge.scss +++ b/src/styles/badge.scss | |||
@@ -10,7 +10,6 @@ | |||
10 | } | 10 | } |
11 | } | 11 | } |
12 | 12 | ||
13 | |||
14 | .badge { | 13 | .badge { |
15 | background: $theme-gray-lighter; | 14 | background: $theme-gray-lighter; |
16 | border-radius: $theme-border-radius; | 15 | border-radius: $theme-border-radius; |
@@ -21,12 +20,11 @@ | |||
21 | 20 | ||
22 | &.badge--primary { | 21 | &.badge--primary { |
23 | background: $theme-brand-primary; | 22 | background: $theme-brand-primary; |
24 | color: #FFF; | 23 | color: #fff; |
25 | } | 24 | } |
26 | 25 | ||
27 | &.badge--success { | 26 | &.badge--success { |
28 | background: $theme-brand-success; | 27 | background: $theme-brand-success; |
29 | color: #FFF; | 28 | color: #fff; |
30 | } | 29 | } |
31 | |||
32 | } | 30 | } |
diff --git a/src/styles/button.scss b/src/styles/button.scss index 106caa6bc..98e8f515c 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -130,7 +130,9 @@ | |||
130 | color: $theme-brand-primary; | 130 | color: $theme-brand-primary; |
131 | padding: 10px 20px; | 131 | padding: 10px 20px; |
132 | @media (prefers-reduced-motion: no-preference) { | 132 | @media (prefers-reduced-motion: no-preference) { |
133 | transition: background 0.5s, color 0.5s; | 133 | transition: |
134 | background 0.5s, | ||
135 | color 0.5s; | ||
134 | } | 136 | } |
135 | &:hover { | 137 | &:hover { |
136 | background: darken($theme-brand-primary, 5%); | 138 | background: darken($theme-brand-primary, 5%); |
diff --git a/src/styles/colors.scss b/src/styles/colors.scss index a33d26cf1..eada2bb1d 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss | |||
@@ -1,41 +1,49 @@ | |||
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: $theme-brand-primary; | 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); |
8 | $theme-brand-danger: convert-rgb-string-to-color($raw-theme-brand-danger); | 8 | $theme-brand-danger: convert-rgb-string-to-color($raw-theme-brand-danger); |
9 | 9 | ||
10 | $theme-gray-dark: convert-rgb-string-to-color($raw-theme-gray-dark); | 10 | $theme-gray-dark: convert-rgb-string-to-color($raw-theme-gray-dark); |
11 | $theme-gray: convert-rgb-string-to-color($raw-theme-gray); | 11 | $theme-gray: convert-rgb-string-to-color($raw-theme-gray); |
12 | $theme-gray-light: convert-rgb-string-to-color($raw-theme-gray-light); | 12 | $theme-gray-light: convert-rgb-string-to-color($raw-theme-gray-light); |
13 | $theme-gray-lighter: convert-rgb-string-to-color($raw-theme-gray-lighter); | 13 | $theme-gray-lighter: convert-rgb-string-to-color($raw-theme-gray-lighter); |
14 | $theme-gray-lightest: convert-rgb-string-to-color($raw-theme-gray-lightest); | 14 | $theme-gray-lightest: convert-rgb-string-to-color($raw-theme-gray-lightest); |
15 | 15 | ||
16 | $theme-border-radius: to-number($raw-theme-border-radius); | 16 | $theme-border-radius: to-number($raw-theme-border-radius); |
17 | $theme-border-radius-small: to-number($raw-theme-border-radius-small); | 17 | $theme-border-radius-small: to-number($raw-theme-border-radius-small); |
18 | 18 | ||
19 | $theme-sidebar-width: to-number($raw-theme-sidebar-width); | 19 | $theme-sidebar-width: to-number($raw-theme-sidebar-width); |
20 | 20 | ||
21 | $theme-text-color: convert-rgb-string-to-color($raw-theme-gray-dark); | 21 | $theme-text-color: convert-rgb-string-to-color($raw-theme-gray-dark); |
22 | 22 | ||
23 | $theme-transition-time: .5s; | 23 | $theme-transition-time: 0.5s; |
24 | 24 | ||
25 | $theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, .03); | 25 | $theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03); |
26 | 26 | ||
27 | // Dark Theme | 27 | // Dark Theme |
28 | $dark-theme-black: convert-rgb-string-to-color($raw-dark-theme-black); | 28 | $dark-theme-black: convert-rgb-string-to-color($raw-dark-theme-black); |
29 | 29 | ||
30 | $dark-theme-gray-darkest: convert-rgb-string-to-color($raw-dark-theme-gray-darkest); | 30 | $dark-theme-gray-darkest: convert-rgb-string-to-color( |
31 | $dark-theme-gray-darker: convert-rgb-string-to-color($raw-dark-theme-gray-darker); | 31 | $raw-dark-theme-gray-darkest |
32 | $dark-theme-gray-dark: convert-rgb-string-to-color($raw-dark-theme-gray-dark); | 32 | ); |
33 | 33 | $dark-theme-gray-darker: convert-rgb-string-to-color( | |
34 | $dark-theme-gray: convert-rgb-string-to-color($raw-dark-theme-gray); | 34 | $raw-dark-theme-gray-darker |
35 | 35 | ); | |
36 | $dark-theme-gray-light: convert-rgb-string-to-color($raw-dark-theme-gray-light); | 36 | $dark-theme-gray-dark: convert-rgb-string-to-color($raw-dark-theme-gray-dark); |
37 | $dark-theme-gray-lighter: convert-rgb-string-to-color($raw-dark-theme-gray-lighter); | 37 | |
38 | $dark-theme-gray-lightest: convert-rgb-string-to-color($raw-dark-theme-gray-lightest); | 38 | $dark-theme-gray: convert-rgb-string-to-color($raw-dark-theme-gray); |
39 | 39 | ||
40 | $dark-theme-gray-smoke: convert-rgb-string-to-color($raw-dark-theme-gray-smoke); | 40 | $dark-theme-gray-light: convert-rgb-string-to-color($raw-dark-theme-gray-light); |
41 | $dark-theme-text-color: convert-rgb-string-to-color($raw-dark-theme-text-color); | 41 | $dark-theme-gray-lighter: convert-rgb-string-to-color( |
42 | $raw-dark-theme-gray-lighter | ||
43 | ); | ||
44 | $dark-theme-gray-lightest: convert-rgb-string-to-color( | ||
45 | $raw-dark-theme-gray-lightest | ||
46 | ); | ||
47 | |||
48 | $dark-theme-gray-smoke: convert-rgb-string-to-color($raw-dark-theme-gray-smoke); | ||
49 | $dark-theme-text-color: convert-rgb-string-to-color($raw-dark-theme-text-color); | ||
diff --git a/src/styles/globals.scss b/src/styles/globals.scss index b6a7949c2..fe4123242 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss | |||
@@ -1,26 +1,26 @@ | |||
1 | $raw-theme-brand-primary: "114,102,240"; | 1 | $raw-theme-brand-primary: '114,102,240'; |
2 | $raw-theme-brand-success: "92,184,92"; | 2 | $raw-theme-brand-success: '92,184,92'; |
3 | $raw-theme-brand-info: "91,192,222"; | 3 | $raw-theme-brand-info: '91,192,222'; |
4 | $raw-theme-brand-warning: "255,159,0"; | 4 | $raw-theme-brand-warning: '255,159,0'; |
5 | $raw-theme-brand-danger: "217,83,79"; | 5 | $raw-theme-brand-danger: '217,83,79'; |
6 | $raw-theme-gray-dark: "55,58,60"; | 6 | $raw-theme-gray-dark: '55,58,60'; |
7 | $raw-theme-gray: "85,89,92"; | 7 | $raw-theme-gray: '85,89,92'; |
8 | $raw-theme-gray-light: "129,138,145"; | 8 | $raw-theme-gray-light: '129,138,145'; |
9 | $raw-theme-gray-lighter: "236,238,239"; | 9 | $raw-theme-gray-lighter: '236,238,239'; |
10 | $raw-theme-gray-lightest: "247,247,249"; | 10 | $raw-theme-gray-lightest: '247,247,249'; |
11 | $raw-theme-border-radius: 6px; | 11 | $raw-theme-border-radius: 6px; |
12 | $raw-theme-border-radius-small: 3px; | 12 | $raw-theme-border-radius-small: 3px; |
13 | $raw-theme-sidebar-width: 68px; | 13 | $raw-theme-sidebar-width: 68px; |
14 | $raw-theme-text-color: "55,58,60"; | 14 | $raw-theme-text-color: '55,58,60'; |
15 | $raw-theme-transition-time: .5s; | 15 | $raw-theme-transition-time: 0.5s; |
16 | $raw-theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, .03); | 16 | $raw-theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03); |
17 | $raw-dark-theme-black: "26,26,26"; | 17 | $raw-dark-theme-black: '26,26,26'; |
18 | $raw-dark-theme-gray-darkest: "30,30,30"; | 18 | $raw-dark-theme-gray-darkest: '30,30,30'; |
19 | $raw-dark-theme-gray-darker: "45,47,49"; | 19 | $raw-dark-theme-gray-darker: '45,47,49'; |
20 | $raw-dark-theme-gray-dark: "56,58,59"; | 20 | $raw-dark-theme-gray-dark: '56,58,59'; |
21 | $raw-dark-theme-gray: "71,73,75"; | 21 | $raw-dark-theme-gray: '71,73,75'; |
22 | $raw-dark-theme-gray-light: "81,83,85"; | 22 | $raw-dark-theme-gray-light: '81,83,85'; |
23 | $raw-dark-theme-gray-lighter: "138,139,139"; | 23 | $raw-dark-theme-gray-lighter: '138,139,139'; |
24 | $raw-dark-theme-gray-lightest: "255,255,255"; | 24 | $raw-dark-theme-gray-lightest: '255,255,255'; |
25 | $raw-dark-theme-gray-smoke: "206,208,209"; | 25 | $raw-dark-theme-gray-smoke: '206,208,209'; |
26 | $raw-dark-theme-text-color: "255,255,255"; | 26 | $raw-dark-theme-text-color: '255,255,255'; |
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss index d3010942f..514da8839 100644 --- a/src/styles/info-bar.scss +++ b/src/styles/info-bar.scss | |||
@@ -3,7 +3,7 @@ | |||
3 | .info-bar { | 3 | .info-bar { |
4 | align-items: center; | 4 | align-items: center; |
5 | background: $theme-brand-primary; | 5 | background: $theme-brand-primary; |
6 | box-shadow: 0 0 8px rgba(black, .2); | 6 | box-shadow: 0 0 8px rgba(black, 0.2); |
7 | display: flex; | 7 | display: flex; |
8 | height: 50px; | 8 | height: 50px; |
9 | justify-content: center; | 9 | justify-content: center; |
@@ -15,21 +15,23 @@ | |||
15 | .info-bar__content { | 15 | .info-bar__content { |
16 | height: auto; | 16 | height: auto; |
17 | 17 | ||
18 | .mdi { margin-right: 5px; } | 18 | .mdi { |
19 | margin-right: 5px; | ||
20 | } | ||
19 | } | 21 | } |
20 | 22 | ||
21 | .info-bar__close { | 23 | .info-bar__close { |
22 | color: #FFF; | 24 | color: #fff; |
23 | position: absolute; | 25 | position: absolute; |
24 | right: 10px; | 26 | right: 10px; |
25 | } | 27 | } |
26 | 28 | ||
27 | .info-bar__cta { | 29 | .info-bar__cta { |
28 | border-color: #FFF; | 30 | border-color: #fff; |
29 | border-radius: $theme-border-radius-small; | 31 | border-radius: $theme-border-radius-small; |
30 | border-style: solid; | 32 | border-style: solid; |
31 | border-width: 2px; | 33 | border-width: 2px; |
32 | color: #FFF; | 34 | color: #fff; |
33 | margin-left: 15px; | 35 | margin-left: 15px; |
34 | padding: 3px 8px; | 36 | padding: 3px 8px; |
35 | 37 | ||
@@ -47,26 +49,34 @@ | |||
47 | color: white; | 49 | color: white; |
48 | } | 50 | } |
49 | 51 | ||
50 | &.info-bar--bottom { order: 10; } | 52 | &.info-bar--bottom { |
53 | order: 10; | ||
54 | } | ||
51 | 55 | ||
52 | &.info-bar--primary { | 56 | &.info-bar--primary { |
53 | background: $theme-brand-primary; | 57 | background: $theme-brand-primary; |
54 | color: #FFF; | 58 | color: #fff; |
55 | 59 | ||
56 | a { color: #FFF; } | 60 | a { |
61 | color: #fff; | ||
62 | } | ||
57 | } | 63 | } |
58 | 64 | ||
59 | &.info-bar--warning { | 65 | &.info-bar--warning { |
60 | background: $theme-brand-warning; | 66 | background: $theme-brand-warning; |
61 | color: #FFF; | 67 | color: #fff; |
62 | 68 | ||
63 | a { color: #FFF; } | 69 | a { |
70 | color: #fff; | ||
71 | } | ||
64 | } | 72 | } |
65 | 73 | ||
66 | &.info-bar--danger { | 74 | &.info-bar--danger { |
67 | background: $theme-brand-danger; | 75 | background: $theme-brand-danger; |
68 | color: #FFF; | 76 | color: #fff; |
69 | 77 | ||
70 | a { color: #FFF; } | 78 | a { |
79 | color: #fff; | ||
80 | } | ||
71 | } | 81 | } |
72 | } | 82 | } |
diff --git a/src/styles/infobox.scss b/src/styles/infobox.scss index e287e5be7..cf43de3c4 100644 --- a/src/styles/infobox.scss +++ b/src/styles/infobox.scss | |||
@@ -8,38 +8,44 @@ | |||
8 | margin-bottom: 30px; | 8 | margin-bottom: 30px; |
9 | padding: 15px 20px; | 9 | padding: 15px 20px; |
10 | 10 | ||
11 | a { color: #FFF; } | 11 | a { |
12 | color: #fff; | ||
13 | } | ||
12 | 14 | ||
13 | .infobox__content { flex: 1; } | 15 | .infobox__content { |
16 | flex: 1; | ||
17 | } | ||
14 | 18 | ||
15 | &.infobox--success { | 19 | &.infobox--success { |
16 | background: $theme-brand-success; | 20 | background: $theme-brand-success; |
17 | color: #FFF; | 21 | color: #fff; |
18 | } | 22 | } |
19 | 23 | ||
20 | &.infobox--primary { | 24 | &.infobox--primary { |
21 | background: $theme-brand-primary; | 25 | background: $theme-brand-primary; |
22 | color: #FFF; | 26 | color: #fff; |
23 | } | 27 | } |
24 | 28 | ||
25 | &.infobox--danger { | 29 | &.infobox--danger { |
26 | background: $theme-brand-danger; | 30 | background: $theme-brand-danger; |
27 | color: #FFF; | 31 | color: #fff; |
28 | } | 32 | } |
29 | 33 | ||
30 | &.infobox--warning { | 34 | &.infobox--warning { |
31 | background: $theme-brand-warning; | 35 | background: $theme-brand-warning; |
32 | color: #FFF; | 36 | color: #fff; |
33 | } | 37 | } |
34 | 38 | ||
35 | .mdi { margin-right: 10px; } | 39 | .mdi { |
40 | margin-right: 10px; | ||
41 | } | ||
36 | 42 | ||
37 | .infobox__cta { | 43 | .infobox__cta { |
38 | border-color: #FFF; | 44 | border-color: #fff; |
39 | border-radius: $theme-border-radius-small; | 45 | border-radius: $theme-border-radius-small; |
40 | border-style: solid; | 46 | border-style: solid; |
41 | border-width: 2px; | 47 | border-width: 2px; |
42 | color: #FFF; | 48 | color: #fff; |
43 | margin-left: 15px; | 49 | margin-left: 15px; |
44 | padding: 3px 8px; | 50 | padding: 3px 8px; |
45 | 51 | ||
@@ -54,7 +60,7 @@ | |||
54 | } | 60 | } |
55 | 61 | ||
56 | .infobox__delete { | 62 | .infobox__delete { |
57 | color: #FFF; | 63 | color: #fff; |
58 | margin-right: 0; | 64 | margin-right: 0; |
59 | } | 65 | } |
60 | } | 66 | } |
diff --git a/src/styles/input.scss b/src/styles/input.scss index 687bcac64..a78bc185e 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss | |||
@@ -2,7 +2,9 @@ | |||
2 | @import './mixins.scss'; | 2 | @import './mixins.scss'; |
3 | 3 | ||
4 | .theme__dark .franz-form { | 4 | .theme__dark .franz-form { |
5 | .franz-form__label { color: $dark-theme-text-color; } | 5 | .franz-form__label { |
6 | color: $dark-theme-text-color; | ||
7 | } | ||
6 | 8 | ||
7 | .franz-form__input-wrapper { | 9 | .franz-form__input-wrapper { |
8 | background: $dark-theme-gray-dark; | 10 | background: $dark-theme-gray-dark; |
@@ -12,7 +14,9 @@ | |||
12 | .franz-form__input { | 14 | .franz-form__input { |
13 | color: $dark-theme-gray-lightest; | 15 | color: $dark-theme-gray-lightest; |
14 | 16 | ||
15 | &::placeholder { color: $dark-theme-gray-lighter; } | 17 | &::placeholder { |
18 | color: $dark-theme-gray-lighter; | ||
19 | } | ||
16 | } | 20 | } |
17 | 21 | ||
18 | .franz-form__input-prefix, | 22 | .franz-form__input-prefix, |
@@ -26,7 +30,9 @@ | |||
26 | color: $dark-theme-gray-lighter; | 30 | color: $dark-theme-gray-lighter; |
27 | } | 31 | } |
28 | 32 | ||
29 | .franz-form__password-score { background: $dark-theme-gray-dark; } | 33 | .franz-form__password-score { |
34 | background: $dark-theme-gray-dark; | ||
35 | } | ||
30 | } | 36 | } |
31 | 37 | ||
32 | .franz-form { | 38 | .franz-form { |
@@ -38,11 +44,15 @@ | |||
38 | 44 | ||
39 | &.has-error { | 45 | &.has-error { |
40 | .franz-form__input-wrapper, | 46 | .franz-form__input-wrapper, |
41 | .franz-form__input-modifier { border-color: $theme-brand-danger; } | 47 | .franz-form__input-modifier { |
48 | border-color: $theme-brand-danger; | ||
49 | } | ||
42 | } | 50 | } |
43 | } | 51 | } |
44 | 52 | ||
45 | .franz-form__label { @include formLabel(); } | 53 | .franz-form__label { |
54 | @include formLabel(); | ||
55 | } | ||
46 | 56 | ||
47 | .franz-form__error { | 57 | .franz-form__error { |
48 | color: $theme-brand-danger; | 58 | color: $theme-brand-danger; |
@@ -68,7 +78,9 @@ | |||
68 | padding: 8px; | 78 | padding: 8px; |
69 | width: 100%; | 79 | width: 100%; |
70 | 80 | ||
71 | &::placeholder { color: lighten($theme-gray-light, 10%); } | 81 | &::placeholder { |
82 | color: lighten($theme-gray-light, 10%); | ||
83 | } | ||
72 | } | 84 | } |
73 | 85 | ||
74 | .franz-form__input-prefix, | 86 | .franz-form__input-prefix, |
@@ -101,10 +113,18 @@ | |||
101 | overflow: hidden; | 113 | overflow: hidden; |
102 | width: 100%; | 114 | width: 100%; |
103 | 115 | ||
104 | &::-webkit-meter-bar { background: none; } | 116 | &::-webkit-meter-bar { |
105 | &::-webkit-meter-even-less-good-value { background: $theme-brand-danger; } | 117 | background: none; |
106 | &::-webkit-meter-suboptimum-value { background: $theme-brand-warning; } | 118 | } |
107 | &::-webkit-meter-optimum-value { background: $theme-brand-success; } | 119 | &::-webkit-meter-even-less-good-value { |
120 | background: $theme-brand-danger; | ||
121 | } | ||
122 | &::-webkit-meter-suboptimum-value { | ||
123 | background: $theme-brand-warning; | ||
124 | } | ||
125 | &::-webkit-meter-optimum-value { | ||
126 | background: $theme-brand-success; | ||
127 | } | ||
108 | } | 128 | } |
109 | } | 129 | } |
110 | } | 130 | } |
diff --git a/src/styles/invite.scss b/src/styles/invite.scss index 594224f62..b68112478 100644 --- a/src/styles/invite.scss +++ b/src/styles/invite.scss | |||
@@ -4,5 +4,9 @@ | |||
4 | justify-content: center; | 4 | justify-content: center; |
5 | } | 5 | } |
6 | 6 | ||
7 | .invite__embed { text-align: center; } | 7 | .invite__embed { |
8 | .invite__embed--button { width: 100%; } | 8 | text-align: center; |
9 | } | ||
10 | .invite__embed--button { | ||
11 | width: 100%; | ||
12 | } | ||
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 664108ed4..173ca3184 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -24,7 +24,8 @@ html { | |||
24 | color: $theme-text-color; | 24 | color: $theme-text-color; |
25 | 25 | ||
26 | &::after { | 26 | &::after { |
27 | box-shadow: inset 0 0 5px 0 $dark-theme-black, | 27 | box-shadow: |
28 | inset 0 0 5px 0 $dark-theme-black, | ||
28 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); | 29 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); |
29 | } | 30 | } |
30 | 31 | ||
@@ -159,7 +160,8 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
159 | z-index: 1000; | 160 | z-index: 1000; |
160 | pointer-events: none; | 161 | pointer-events: none; |
161 | clip-path: inset(10px 0 10px 10px); | 162 | clip-path: inset(10px 0 10px 10px); |
162 | box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.12), | 163 | box-shadow: |
164 | inset 0 0 10px 0 rgba(0, 0, 0, 0.12), | ||
163 | inset 0 0 2px 0 rgba(0, 0, 0, 0.24); | 165 | inset 0 0 2px 0 rgba(0, 0, 0, 0.24); |
164 | } | 166 | } |
165 | 167 | ||
diff --git a/src/styles/main.scss b/src/styles/main.scss index eb7649bfa..8369c9298 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss | |||
@@ -1,6 +1,5 @@ | |||
1 | @import '../../node_modules/electron-react-titlebar/assets/style'; | 1 | @import '../../node_modules/electron-react-titlebar/assets/style'; |
2 | 2 | ||
3 | |||
4 | // modules | 3 | // modules |
5 | @import './globals.scss'; | 4 | @import './globals.scss'; |
6 | @import './reset.scss'; | 5 | @import './reset.scss'; |
diff --git a/src/styles/reset.scss b/src/styles/reset.scss index d87ce652a..929494514 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss | |||
@@ -3,19 +3,87 @@ | |||
3 | /* ============ RESET =========== */ | 3 | /* ============ RESET =========== */ |
4 | /* http://meyerweb.com/eric/tools/css/reset */ | 4 | /* http://meyerweb.com/eric/tools/css/reset */ |
5 | 5 | ||
6 | html, body, div, span, applet, object, iframe, | 6 | html, |
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | 7 | body, |
8 | a, abbr, acronym, address, big, cite, code, | 8 | div, |
9 | del, dfn, em, img, ins, kbd, q, s, samp, | 9 | span, |
10 | small, strike, strong, sub, sup, tt, var, | 10 | applet, |
11 | b, u, i, center, | 11 | object, |
12 | dl, dt, dd, ol, ul, li, | 12 | iframe, |
13 | fieldset, form, label, legend, | 13 | h1, |
14 | table, caption, tbody, tfoot, thead, tr, th, td, | 14 | h2, |
15 | article, aside, canvas, details, embed, | 15 | h3, |
16 | figure, figcaption, footer, header, hgroup, | 16 | h4, |
17 | menu, nav, output, ruby, section, summary, | 17 | h5, |
18 | time, mark, audio, video { | 18 | h6, |
19 | p, | ||
20 | blockquote, | ||
21 | pre, | ||
22 | a, | ||
23 | abbr, | ||
24 | acronym, | ||
25 | address, | ||
26 | big, | ||
27 | cite, | ||
28 | code, | ||
29 | del, | ||
30 | dfn, | ||
31 | em, | ||
32 | img, | ||
33 | ins, | ||
34 | kbd, | ||
35 | q, | ||
36 | s, | ||
37 | samp, | ||
38 | small, | ||
39 | strike, | ||
40 | strong, | ||
41 | sub, | ||
42 | sup, | ||
43 | tt, | ||
44 | var, | ||
45 | b, | ||
46 | u, | ||
47 | i, | ||
48 | center, | ||
49 | dl, | ||
50 | dt, | ||
51 | dd, | ||
52 | ol, | ||
53 | ul, | ||
54 | li, | ||
55 | fieldset, | ||
56 | form, | ||
57 | label, | ||
58 | legend, | ||
59 | table, | ||
60 | caption, | ||
61 | tbody, | ||
62 | tfoot, | ||
63 | thead, | ||
64 | tr, | ||
65 | th, | ||
66 | td, | ||
67 | article, | ||
68 | aside, | ||
69 | canvas, | ||
70 | details, | ||
71 | embed, | ||
72 | figure, | ||
73 | figcaption, | ||
74 | footer, | ||
75 | header, | ||
76 | hgroup, | ||
77 | menu, | ||
78 | nav, | ||
79 | output, | ||
80 | ruby, | ||
81 | section, | ||
82 | summary, | ||
83 | time, | ||
84 | mark, | ||
85 | audio, | ||
86 | video { | ||
19 | border: 0; | 87 | border: 0; |
20 | font: inherit; | 88 | font: inherit; |
21 | font-size: 100%; | 89 | font-size: 100%; |
@@ -23,11 +91,24 @@ time, mark, audio, video { | |||
23 | padding: 0; | 91 | padding: 0; |
24 | } | 92 | } |
25 | 93 | ||
26 | article, aside, details, figcaption, figure, | 94 | article, |
27 | footer, header, hgroup, menu, nav, section { display: block; } | 95 | aside, |
96 | details, | ||
97 | figcaption, | ||
98 | figure, | ||
99 | footer, | ||
100 | header, | ||
101 | hgroup, | ||
102 | menu, | ||
103 | nav, | ||
104 | section { | ||
105 | display: block; | ||
106 | } | ||
28 | 107 | ||
29 | ol, | 108 | ol, |
30 | ul { list-style: none; } | 109 | ul { |
110 | list-style: none; | ||
111 | } | ||
31 | 112 | ||
32 | blockquote, | 113 | blockquote, |
33 | q { | 114 | q { |
@@ -50,11 +131,13 @@ button { | |||
50 | border: none; | 131 | border: none; |
51 | padding: 0; | 132 | padding: 0; |
52 | 133 | ||
53 | &:focus { outline: 0; } | 134 | &:focus { |
135 | outline: 0; | ||
136 | } | ||
54 | } | 137 | } |
55 | 138 | ||
56 | html { | 139 | html { |
57 | font-size: 62.5%; | 140 | font-size: 62.5%; |
58 | font-family: 'Open Sans'; | 141 | font-family: 'Open Sans'; |
59 | } | 142 | } |
60 | 143 | ||
@@ -63,7 +146,9 @@ body { | |||
63 | font-size: 1.4rem; | 146 | font-size: 1.4rem; |
64 | line-height: 1; | 147 | line-height: 1; |
65 | 148 | ||
66 | &.theme__dark { color: $dark-theme-gray-smoke; } | 149 | &.theme__dark { |
150 | color: $dark-theme-gray-smoke; | ||
151 | } | ||
67 | } | 152 | } |
68 | 153 | ||
69 | * { | 154 | * { |
@@ -74,12 +159,20 @@ body { | |||
74 | -webkit-user-select: none; | 159 | -webkit-user-select: none; |
75 | } | 160 | } |
76 | 161 | ||
77 | html, body, div { | 162 | html, |
163 | body, | ||
164 | div { | ||
78 | height: 100%; | 165 | height: 100%; |
79 | background: none; | 166 | background: none; |
80 | box-sizing: border-box; | 167 | box-sizing: border-box; |
81 | } | 168 | } |
82 | 169 | ||
83 | *:focus { outline: none; } | 170 | *:focus { |
84 | img { pointer-events: none; } | 171 | outline: none; |
85 | a { cursor: default; } | 172 | } |
173 | img { | ||
174 | pointer-events: none; | ||
175 | } | ||
176 | a { | ||
177 | cursor: default; | ||
178 | } | ||
diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss index 91453c600..4890454ff 100644 --- a/src/styles/searchInput.scss +++ b/src/styles/searchInput.scss | |||
@@ -8,7 +8,9 @@ | |||
8 | border-radius: $theme-border-radius; | 8 | border-radius: $theme-border-radius; |
9 | color: $dark-theme-gray-lightest; | 9 | color: $dark-theme-gray-lightest; |
10 | 10 | ||
11 | input { color: $dark-theme-gray-lightest; } | 11 | input { |
12 | color: $dark-theme-gray-lightest; | ||
13 | } | ||
12 | } | 14 | } |
13 | 15 | ||
14 | .search-input { | 16 | .search-input { |
diff --git a/src/styles/select.scss b/src/styles/select.scss index 513975f9c..c2f7a8db9 100644 --- a/src/styles/select.scss +++ b/src/styles/select.scss | |||
@@ -1,7 +1,7 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | @import './mixins.scss'; | 2 | @import './mixins.scss'; |
3 | 3 | ||
4 | $toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo="; | 4 | $toggle: 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo='; |
5 | 5 | ||
6 | .theme__dark .franz-form .franz-form__select { | 6 | .theme__dark .franz-form .franz-form__select { |
7 | background-color: $dark-theme-gray-dark; | 7 | background-color: $dark-theme-gray-dark; |
diff --git a/src/styles/service-table.scss b/src/styles/service-table.scss index f2090685b..70a41e435 100644 --- a/src/styles/service-table.scss +++ b/src/styles/service-table.scss | |||
@@ -1,14 +1,22 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .service-table { | 3 | .theme__dark .service-table { |
4 | .service-table__icon.has-custom-icon { border: 1px solid $dark-theme-gray-dark; } | 4 | .service-table__icon.has-custom-icon { |
5 | .service-table__column-info .mdi { color: $dark-theme-gray-lightest; } | 5 | border: 1px solid $dark-theme-gray-dark; |
6 | } | ||
7 | .service-table__column-info .mdi { | ||
8 | color: $dark-theme-gray-lightest; | ||
9 | } | ||
6 | 10 | ||
7 | .service-table__row { | 11 | .service-table__row { |
8 | border-bottom: 1px solid $dark-theme-gray-darker; | 12 | border-bottom: 1px solid $dark-theme-gray-darker; |
9 | 13 | ||
10 | &:hover { background: $dark-theme-gray-darker; } | 14 | &:hover { |
11 | &.service-table__row--disabled { color: $dark-theme-gray; } | 15 | background: $dark-theme-gray-darker; |
16 | } | ||
17 | &.service-table__row--disabled { | ||
18 | color: $dark-theme-gray; | ||
19 | } | ||
12 | } | 20 | } |
13 | } | 21 | } |
14 | 22 | ||
@@ -18,7 +26,9 @@ | |||
18 | .service-table__toggle { | 26 | .service-table__toggle { |
19 | width: 60px; | 27 | width: 60px; |
20 | 28 | ||
21 | .franz-form__field { margin-bottom: 0; } | 29 | .franz-form__field { |
30 | margin-bottom: 0; | ||
31 | } | ||
22 | } | 32 | } |
23 | 33 | ||
24 | .service-table__icon { | 34 | .service-table__icon { |
@@ -32,7 +42,9 @@ | |||
32 | } | 42 | } |
33 | 43 | ||
34 | .service-table__column-icon, | 44 | .service-table__column-icon, |
35 | .service-table__column-action { width: 40px } | 45 | .service-table__column-action { |
46 | width: 40px; | ||
47 | } | ||
36 | 48 | ||
37 | .service-table__column-info { | 49 | .service-table__column-info { |
38 | width: 40px; | 50 | width: 40px; |
@@ -47,17 +59,21 @@ | |||
47 | .service-table__row { | 59 | .service-table__row { |
48 | border-bottom: 1px solid $theme-gray-lightest; | 60 | border-bottom: 1px solid $theme-gray-lightest; |
49 | 61 | ||
50 | &:hover { background: $theme-gray-lightest; } | 62 | &:hover { |
63 | background: $theme-gray-lightest; | ||
64 | } | ||
51 | 65 | ||
52 | &.service-table__row--disabled { | 66 | &.service-table__row--disabled { |
53 | color: $theme-gray-light; | 67 | color: $theme-gray-light; |
54 | 68 | ||
55 | .service-table__column-icon { | 69 | .service-table__column-icon { |
56 | filter: grayscale(100%); | 70 | filter: grayscale(100%); |
57 | opacity: .5; | 71 | opacity: 0.5; |
58 | } | 72 | } |
59 | } | 73 | } |
60 | } | 74 | } |
61 | 75 | ||
62 | td { padding: 10px; } | 76 | td { |
77 | padding: 10px; | ||
78 | } | ||
63 | } | 79 | } |
diff --git a/src/styles/services.scss b/src/styles/services.scss index 359a41ab0..7ce6f8c87 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss | |||
@@ -3,7 +3,9 @@ | |||
3 | .theme__dark .services { | 3 | .theme__dark .services { |
4 | background: $dark-theme-gray-darkest; | 4 | background: $dark-theme-gray-darkest; |
5 | 5 | ||
6 | .services__webview-wrapper { background: $dark-theme-gray-darkest; } | 6 | .services__webview-wrapper { |
7 | background: $dark-theme-gray-darkest; | ||
8 | } | ||
7 | 9 | ||
8 | .services__webview, | 10 | .services__webview, |
9 | .services__info-layer { | 11 | .services__info-layer { |
@@ -14,7 +16,9 @@ | |||
14 | .services__info-layer { | 16 | .services__info-layer { |
15 | background: $dark-theme-gray-darkest; | 17 | background: $dark-theme-gray-darkest; |
16 | 18 | ||
17 | h1 { color: $dark-theme-gray-lightest; } | 19 | h1 { |
20 | color: $dark-theme-gray-lightest; | ||
21 | } | ||
18 | } | 22 | } |
19 | } | 23 | } |
20 | 24 | ||
@@ -31,21 +35,23 @@ | |||
31 | } | 35 | } |
32 | 36 | ||
33 | @for $i from $split-columns-min through $split-columns-max { | 37 | @for $i from $split-columns-min through $split-columns-max { |
34 | &[data-columns="#{$i}"] .services .services__webview { | 38 | &[data-columns='#{$i}'] .services .services__webview { |
35 | flex-basis: calc(100% / $i); | 39 | flex-basis: calc(100% / $i); |
36 | } | 40 | } |
37 | } | 41 | } |
38 | } | 42 | } |
39 | 43 | ||
40 | .services { | 44 | .services { |
41 | background: #FFF; | 45 | background: #fff; |
42 | flex: 1; | 46 | flex: 1; |
43 | height: 100%; | 47 | height: 100%; |
44 | order: 5; | 48 | order: 5; |
45 | overflow: hidden; | 49 | overflow: hidden; |
46 | position: relative; | 50 | position: relative; |
47 | 51 | ||
48 | .services__webview-wrapper { background: $theme-gray-lighter; } | 52 | .services__webview-wrapper { |
53 | background: $theme-gray-lighter; | ||
54 | } | ||
49 | 55 | ||
50 | .services__webview, | 56 | .services__webview, |
51 | .services__info-layer { | 57 | .services__info-layer { |
@@ -66,9 +72,13 @@ | |||
66 | z-index: 100; | 72 | z-index: 100; |
67 | } | 73 | } |
68 | 74 | ||
69 | &--force-repaint webview { z-index: 5; } | 75 | &--force-repaint webview { |
76 | z-index: 5; | ||
77 | } | ||
70 | 78 | ||
71 | &.is-loading webview { background: #FFF } | 79 | &.is-loading webview { |
80 | background: #fff; | ||
81 | } | ||
72 | } | 82 | } |
73 | 83 | ||
74 | .services__no-service, | 84 | .services__no-service, |
@@ -86,12 +96,13 @@ | |||
86 | } | 96 | } |
87 | 97 | ||
88 | .button, | 98 | .button, |
89 | button { margin: 40px 0 20px; } | 99 | button { |
100 | margin: 40px 0 20px; | ||
101 | } | ||
90 | } | 102 | } |
91 | 103 | ||
92 | .services__info-layer { | 104 | .services__info-layer { |
93 | position: absolute; | 105 | position: absolute; |
94 | z-index: 110; | 106 | z-index: 110; |
95 | } | 107 | } |
96 | |||
97 | } | 108 | } |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index f16fc91fd..50accd8d7 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -23,7 +23,6 @@ | |||
23 | } | 23 | } |
24 | 24 | ||
25 | .theme__dark { | 25 | .theme__dark { |
26 | |||
27 | .settings__hr { | 26 | .settings__hr { |
28 | color: rgba($dark-theme-gray, 0.8); | 27 | color: rgba($dark-theme-gray, 0.8); |
29 | } | 28 | } |
@@ -236,7 +235,7 @@ | |||
236 | @extend %headline; | 235 | @extend %headline; |
237 | 236 | ||
238 | &__secondary { | 237 | &__secondary { |
239 | padding-left: 5px | 238 | padding-left: 5px; |
240 | } | 239 | } |
241 | } | 240 | } |
242 | 241 | ||
@@ -416,17 +415,20 @@ | |||
416 | } | 415 | } |
417 | } | 416 | } |
418 | 417 | ||
419 | .settings__open-recipe-file-button, .settings__open-settings-file-button { | 418 | .settings__open-recipe-file-button, |
419 | .settings__open-settings-file-button { | ||
420 | cursor: pointer; | 420 | cursor: pointer; |
421 | margin-right: 10px; | 421 | margin-right: 10px; |
422 | } | 422 | } |
423 | .settings__open-recipe-file-container, .settings__open-settings-file-container { | 423 | .settings__open-recipe-file-container, |
424 | .settings__open-settings-file-container { | ||
424 | margin-top: 20px; | 425 | margin-top: 20px; |
425 | display: flex; | 426 | display: flex; |
426 | height: auto !important; | 427 | height: auto !important; |
427 | } | 428 | } |
428 | 429 | ||
429 | .settings__open-settings-cache-button, .settings__open-settings-cache-container { | 430 | .settings__open-settings-cache-button, |
431 | .settings__open-settings-cache-container { | ||
430 | cursor: pointer; | 432 | cursor: pointer; |
431 | margin-right: 10px; | 433 | margin-right: 10px; |
432 | } | 434 | } |
@@ -586,7 +588,8 @@ | |||
586 | padding: 0 20px; | 588 | padding: 0 20px; |
587 | text-decoration: none; | 589 | text-decoration: none; |
588 | @media (prefers-reduced-motion: no-preference) { | 590 | @media (prefers-reduced-motion: no-preference) { |
589 | transition: background $theme-transition-time, | 591 | transition: |
592 | background $theme-transition-time, | ||
590 | color $theme-transition-time; | 593 | color $theme-transition-time; |
591 | } | 594 | } |
592 | border-bottom: 1px solid darken($theme-gray-lightest, 3%); | 595 | border-bottom: 1px solid darken($theme-gray-lightest, 3%); |
@@ -613,7 +616,8 @@ | |||
613 | .badge { | 616 | .badge { |
614 | display: initial; | 617 | display: initial; |
615 | @media (prefers-reduced-motion: no-preference) { | 618 | @media (prefers-reduced-motion: no-preference) { |
616 | transition: background $theme-transition-time, | 619 | transition: |
620 | background $theme-transition-time, | ||
617 | color $theme-transition-time; | 621 | color $theme-transition-time; |
618 | } | 622 | } |
619 | } | 623 | } |
@@ -642,86 +646,86 @@ | |||
642 | .releasenotes__body { | 646 | .releasenotes__body { |
643 | line-height: 150%; | 647 | line-height: 150%; |
644 | 648 | ||
645 | h1 { | 649 | h1 { |
646 | margin-top: 0; | 650 | margin-top: 0; |
647 | font-weight: 400; | 651 | font-weight: 400; |
648 | font-size: xx-large; | 652 | font-size: xx-large; |
649 | text-align: center; | 653 | text-align: center; |
650 | } | 654 | } |
651 | 655 | ||
652 | h2 { | 656 | h2 { |
653 | margin-top: 10%; | 657 | margin-top: 10%; |
654 | font-weight: 400; | 658 | font-weight: 400; |
655 | font-size: x-large; | 659 | font-size: x-large; |
656 | text-align: center; | 660 | text-align: center; |
657 | margin-bottom: 2%; | 661 | margin-bottom: 2%; |
658 | } | 662 | } |
659 | 663 | ||
660 | h3 { | 664 | h3 { |
661 | margin-top: 5%; | 665 | margin-top: 5%; |
662 | font-weight: 400; | 666 | font-weight: 400; |
663 | font-size: large; | 667 | font-size: large; |
664 | text-align: center; | 668 | text-align: center; |
665 | margin-bottom: 2%; | 669 | margin-bottom: 2%; |
666 | } | 670 | } |
667 | 671 | ||
668 | h4 { | 672 | h4 { |
669 | margin-top: 5%; | 673 | margin-top: 5%; |
670 | font-weight: 400; | 674 | font-weight: 400; |
671 | font-size: medium; | 675 | font-size: medium; |
672 | text-align: center; | 676 | text-align: center; |
673 | margin-bottom: 2%; | 677 | margin-bottom: 2%; |
674 | } | 678 | } |
675 | 679 | ||
676 | h5 { | 680 | h5 { |
677 | margin-top: 5%; | 681 | margin-top: 5%; |
678 | font-weight: 400; | 682 | font-weight: 400; |
679 | text-align: center; | 683 | text-align: center; |
680 | margin-bottom: 2%; | 684 | margin-bottom: 2%; |
681 | } | 685 | } |
682 | 686 | ||
683 | p { | 687 | p { |
684 | margin-top: 4%; | 688 | margin-top: 4%; |
685 | margin-bottom: 4%; | 689 | margin-bottom: 4%; |
686 | user-select: text; | 690 | user-select: text; |
687 | } | 691 | } |
688 | 692 | ||
689 | a { | 693 | a { |
690 | color: rgb(0, 102, 255) !important; | 694 | color: rgb(0, 102, 255) !important; |
691 | user-select: text; | 695 | user-select: text; |
692 | } | 696 | } |
693 | 697 | ||
694 | code { | 698 | code { |
695 | background: #f4f4f4; | 699 | background: #f4f4f4; |
696 | border: 1px solid #ddd; | 700 | border: 1px solid #ddd; |
697 | border-radius: 5px; | 701 | border-radius: 5px; |
698 | padding: 0.2em 0.4em; | 702 | padding: 0.2em 0.4em; |
699 | font-size: 85%; | 703 | font-size: 85%; |
700 | color: #666; | 704 | color: #666; |
701 | font-family: monospace; | 705 | font-family: monospace; |
702 | margin-bottom: 1.6em; | 706 | margin-bottom: 1.6em; |
703 | max-width: 100%; | 707 | max-width: 100%; |
704 | overflow: auto; | 708 | overflow: auto; |
705 | user-select: text; | 709 | user-select: text; |
706 | } | 710 | } |
707 | 711 | ||
708 | ul { | 712 | ul { |
709 | padding-left: 2rem; | 713 | padding-left: 2rem; |
710 | } | 714 | } |
711 | 715 | ||
712 | li { | 716 | li { |
713 | margin-top: 2%; | 717 | margin-top: 2%; |
714 | list-style-type: disc; | 718 | list-style-type: disc; |
715 | user-select: text; | 719 | user-select: text; |
716 | } | 720 | } |
717 | 721 | ||
718 | img { | 722 | img { |
719 | max-width: 100%; | 723 | max-width: 100%; |
720 | margin-top: 2%; | 724 | margin-top: 2%; |
721 | margin-bottom: 2%; | 725 | margin-bottom: 2%; |
722 | align-items: center; | 726 | align-items: center; |
723 | display: block; | 727 | display: block; |
724 | margin-left: auto; | 728 | margin-left: auto; |
725 | margin-right: auto; | 729 | margin-right: auto; |
726 | } | 730 | } |
727 | } | 731 | } |
diff --git a/src/styles/status-bar-target-url.scss b/src/styles/status-bar-target-url.scss index 36f69df28..a324902ae 100644 --- a/src/styles/status-bar-target-url.scss +++ b/src/styles/status-bar-target-url.scss | |||
@@ -4,7 +4,7 @@ | |||
4 | background: $theme-gray-lighter; | 4 | background: $theme-gray-lighter; |
5 | border-top-left-radius: 5px; | 5 | border-top-left-radius: 5px; |
6 | bottom: 0; | 6 | bottom: 0; |
7 | box-shadow: 0 0 8px rgba(black, .2); | 7 | box-shadow: 0 0 8px rgba(black, 0.2); |
8 | color: $theme-gray-dark; | 8 | color: $theme-gray-dark; |
9 | font-size: 12px; | 9 | font-size: 12px; |
10 | height: auto; | 10 | height: auto; |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 21a5e76ce..f5e60d158 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -49,12 +49,13 @@ | |||
49 | border-left-width: 4px; | 49 | border-left-width: 4px; |
50 | border-left-style: solid; | 50 | border-left-style: solid; |
51 | 51 | ||
52 | .tab-item__icon, .tab-item__label { | 52 | .tab-item__icon, |
53 | .tab-item__label { | ||
53 | margin-left: -4px; | 54 | margin-left: -4px; |
54 | } | 55 | } |
55 | } | 56 | } |
56 | 57 | ||
57 | &.is-label-enabled{ | 58 | &.is-label-enabled { |
58 | height: min-content; | 59 | height: min-content; |
59 | overflow: hidden; | 60 | overflow: hidden; |
60 | padding-top: 8px; | 61 | padding-top: 8px; |
@@ -149,7 +150,7 @@ | |||
149 | z-index: 99999; | 150 | z-index: 99999; |
150 | } | 151 | } |
151 | 152 | ||
152 | .tab-item__error-icon{ | 153 | .tab-item__error-icon { |
153 | font-size: 1.9em; | 154 | font-size: 1.9em; |
154 | color: red; | 155 | color: red; |
155 | position: absolute; | 156 | position: absolute; |
diff --git a/src/styles/title-bar.scss b/src/styles/title-bar.scss index b6d28ac60..99c844c1c 100644 --- a/src/styles/title-bar.scss +++ b/src/styles/title-bar.scss | |||
@@ -10,7 +10,9 @@ | |||
10 | } | 10 | } |
11 | 11 | ||
12 | &:not(.open) { | 12 | &:not(.open) { |
13 | .menu-item .menu-label { opacity: 1; } | 13 | .menu-item .menu-label { |
14 | opacity: 1; | ||
15 | } | ||
14 | > .toolbar-button > button:hover { | 16 | > .toolbar-button > button:hover { |
15 | background: $dark-theme-gray-darkest; | 17 | background: $dark-theme-gray-darkest; |
16 | } | 18 | } |
@@ -43,18 +45,28 @@ | |||
43 | #electron-app-title-bar { | 45 | #electron-app-title-bar { |
44 | background: $theme-gray-lightest; | 46 | background: $theme-gray-lightest; |
45 | border-bottom: 0; | 47 | border-bottom: 0; |
46 | box-shadow: 0 0 8px rgba(black, .1); | 48 | box-shadow: 0 0 8px rgba(black, 0.1); |
47 | 49 | ||
48 | span { line-height: normal; } | 50 | span { |
51 | line-height: normal; | ||
52 | } | ||
49 | 53 | ||
50 | div { height: auto; } | 54 | div { |
55 | height: auto; | ||
56 | } | ||
51 | 57 | ||
52 | .toolbar-dropdown { | 58 | .toolbar-dropdown { |
53 | &.open { box-shadow: 0 0 8px rgba(black, 0.1); } | 59 | &.open { |
60 | box-shadow: 0 0 8px rgba(black, 0.1); | ||
61 | } | ||
54 | 62 | ||
55 | &:not(.open) { | 63 | &:not(.open) { |
56 | .menu-item .menu-label { opacity: 1; } | 64 | .menu-item .menu-label { |
57 | > .toolbar-button > button:hover { background: $theme-brand-primary; } | 65 | opacity: 1; |
66 | } | ||
67 | > .toolbar-button > button:hover { | ||
68 | background: $theme-brand-primary; | ||
69 | } | ||
58 | } | 70 | } |
59 | } | 71 | } |
60 | 72 | ||
@@ -63,14 +75,18 @@ | |||
63 | border-radius: $theme-border-radius-small; | 75 | border-radius: $theme-border-radius-small; |
64 | margin: 4px; | 76 | margin: 4px; |
65 | 77 | ||
66 | .status-icon { min-width: 12px; } | 78 | .status-icon { |
79 | min-width: 12px; | ||
80 | } | ||
67 | } | 81 | } |
68 | 82 | ||
69 | &.selected, | 83 | &.selected, |
70 | &.selected:focus { | 84 | &.selected:focus { |
71 | background: none; | 85 | background: none; |
72 | 86 | ||
73 | .menu-item { background: $theme-brand-primary; } | 87 | .menu-item { |
88 | background: $theme-brand-primary; | ||
89 | } | ||
74 | } | 90 | } |
75 | } | 91 | } |
76 | 92 | ||
@@ -78,7 +94,7 @@ | |||
78 | &.menu-endblock { | 94 | &.menu-endblock { |
79 | border-bottom-left-radius: $theme-border-radius-small; | 95 | border-bottom-left-radius: $theme-border-radius-small; |
80 | border-bottom-right-radius: $theme-border-radius-small; | 96 | border-bottom-right-radius: $theme-border-radius-small; |
81 | box-shadow: 0px 15px 10px -15px rgba(black, .5); | 97 | box-shadow: 0px 15px 10px -15px rgba(black, 0.5); |
82 | border-left-width: 0px; | 98 | border-left-width: 0px; |
83 | } | 99 | } |
84 | } | 100 | } |
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss index ed4c0d11b..d7a65def6 100644 --- a/src/styles/toggle.scss +++ b/src/styles/toggle.scss | |||
@@ -1,4 +1,4 @@ | |||
1 | @use "sass:math"; | 1 | @use 'sass:math'; |
2 | 2 | ||
3 | @import './config.scss'; | 3 | @import './config.scss'; |
4 | 4 | ||
diff --git a/src/styles/type-helper.scss b/src/styles/type-helper.scss index b1da394b5..b618d24cf 100644 --- a/src/styles/type-helper.scss +++ b/src/styles/type-helper.scss | |||
@@ -1,23 +1,23 @@ | |||
1 | @function str-split($string, $separator) { | 1 | @function str-split($string, $separator) { |
2 | // empty array/list | 2 | // empty array/list |
3 | $split-arr: (); | 3 | $split-arr: (); |
4 | // first index of separator in string | 4 | // first index of separator in string |
5 | $index : str-index($string, $separator); | 5 | $index: str-index($string, $separator); |
6 | // loop through string | 6 | // loop through string |
7 | @while $index != null { | 7 | @while $index != null { |
8 | // get the substring from the first character to the separator | 8 | // get the substring from the first character to the separator |
9 | $item: str-slice($string, 1, $index - 1); | 9 | $item: str-slice($string, 1, $index - 1); |
10 | // push item to array | 10 | // push item to array |
11 | $split-arr: append($split-arr, $item); | 11 | $split-arr: append($split-arr, $item); |
12 | // remove item and separator from string | 12 | // remove item and separator from string |
13 | $string: str-slice($string, $index + 1); | 13 | $string: str-slice($string, $index + 1); |
14 | // find new index of separator | 14 | // find new index of separator |
15 | $index : str-index($string, $separator); | 15 | $index: str-index($string, $separator); |
16 | } | 16 | } |
17 | // add the remaining string to list (the last item) | 17 | // add the remaining string to list (the last item) |
18 | $split-arr: append($split-arr, $string); | 18 | $split-arr: append($split-arr, $string); |
19 | 19 | ||
20 | @return $split-arr; | 20 | @return $split-arr; |
21 | } | 21 | } |
22 | 22 | ||
23 | // ---- | 23 | // ---- |
@@ -29,7 +29,6 @@ | |||
29 | /// @author Hugo Giraudel | 29 | /// @author Hugo Giraudel |
30 | /// @access private | 30 | /// @access private |
31 | 31 | ||
32 | |||
33 | /// Casts a string into a number | 32 | /// Casts a string into a number |
34 | /// | 33 | /// |
35 | /// @param {String | Number} $value - Value to be parsed | 34 | /// @param {String | Number} $value - Value to be parsed |
@@ -42,32 +41,42 @@ | |||
42 | } @else if type-of($value) != 'string' { | 41 | } @else if type-of($value) != 'string' { |
43 | $_: log('Value for `to-number` should be a number or a string.'); | 42 | $_: log('Value for `to-number` should be a number or a string.'); |
44 | } | 43 | } |
45 | 44 | ||
46 | $result: 0; | 45 | $result: 0; |
47 | $digits: 0; | 46 | $digits: 0; |
48 | $minus: str-slice($value, 1, 1) == '-'; | 47 | $minus: str-slice($value, 1, 1) == '-'; |
49 | $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); | 48 | $numbers: ( |
50 | 49 | '0': 0, | |
50 | '1': 1, | ||
51 | '2': 2, | ||
52 | '3': 3, | ||
53 | '4': 4, | ||
54 | '5': 5, | ||
55 | '6': 6, | ||
56 | '7': 7, | ||
57 | '8': 8, | ||
58 | '9': 9, | ||
59 | ); | ||
60 | |||
51 | @for $i from if($minus, 2, 1) through str-length($value) { | 61 | @for $i from if($minus, 2, 1) through str-length($value) { |
52 | $character: str-slice($value, $i, $i); | 62 | $character: str-slice($value, $i, $i); |
53 | 63 | ||
54 | @if not (index(map-keys($numbers), $character) or $character == '.') { | 64 | @if not(index(map-keys($numbers), $character) or $character == '.') { |
55 | @return to-length(if($minus, -$result, $result), str-slice($value, $i)) | 65 | @return to-length(if($minus, -$result, $result), str-slice($value, $i)); |
56 | } | 66 | } |
57 | 67 | ||
58 | @if $character == '.' { | 68 | @if $character == '.' { |
59 | $digits: 1; | 69 | $digits: 1; |
60 | } @else if $digits == 0 { | 70 | } @else if $digits == 0 { |
61 | $result: $result * 10 + map-get($numbers, $character); | 71 | $result: $result * 10 + map-get($numbers, $character); |
62 | } @else { | 72 | } @else { |
63 | $digits: $digits * 10; | 73 | $digits: $digits * 10; |
64 | $result: $result + map-get($numbers, $character) / $digits; | 74 | $result: $result + map-get($numbers, $character) / $digits; |
65 | } | 75 | } |
66 | } | 76 | } |
67 | |||
68 | @return if($minus, -$result, $result);; | ||
69 | } | ||
70 | 77 | ||
78 | @return if($minus, -$result, $result); | ||
79 | } | ||
71 | 80 | ||
72 | /// Add `$unit` to `$value` | 81 | /// Add `$unit` to `$value` |
73 | /// | 82 | /// |
@@ -76,18 +85,32 @@ | |||
76 | /// | 85 | /// |
77 | /// @return {Number} - `$value` expressed in `$unit` | 86 | /// @return {Number} - `$value` expressed in `$unit` |
78 | @function to-length($value, $unit) { | 87 | @function to-length($value, $unit) { |
79 | $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); | 88 | $units: ( |
80 | 89 | 'px': 1px, | |
90 | 'cm': 1cm, | ||
91 | 'mm': 1mm, | ||
92 | '%': 1%, | ||
93 | 'ch': 1ch, | ||
94 | 'pc': 1pc, | ||
95 | 'in': 1in, | ||
96 | 'em': 1em, | ||
97 | 'rem': 1rem, | ||
98 | 'pt': 1pt, | ||
99 | 'ex': 1ex, | ||
100 | 'vw': 1vw, | ||
101 | 'vh': 1vh, | ||
102 | 'vmin': 1vmin, | ||
103 | 'vmax': 1vmax, | ||
104 | ); | ||
105 | |||
81 | @if not index(map-keys($units), $unit) { | 106 | @if not index(map-keys($units), $unit) { |
82 | $_: log('Invalid unit `#{$unit}`.'); | 107 | $_: log('Invalid unit `#{$unit}`.'); |
83 | } | 108 | } |
84 | 109 | ||
85 | @return $value * map-get($units, $unit); | 110 | @return $value * map-get($units, $unit); |
86 | } | 111 | } |
87 | 112 | ||
88 | 113 | /// converts injectes rgb strings to sass colors | |
89 | |||
90 | /// converts injectes rgb strings to sass colors | ||
91 | @function convert-rgb-string-to-color($string) { | 114 | @function convert-rgb-string-to-color($string) { |
92 | $values: str-split($string, ','); | 115 | $values: str-split($string, ','); |
93 | $colorList: (); | 116 | $colorList: (); |
@@ -97,4 +120,4 @@ | |||
97 | 120 | ||
98 | $rgbaColor: rgb(nth($colorList, 1), nth($colorList, 2), nth($colorList, 3)); | 121 | $rgbaColor: rgb(nth($colorList, 1), nth($colorList, 2), nth($colorList, 3)); |
99 | @return $rgbaColor; | 122 | @return $rgbaColor; |
100 | } \ No newline at end of file | 123 | } |
diff --git a/src/styles/type.scss b/src/styles/type.scss index 234c4d5c4..3b7a953af 100644 --- a/src/styles/type.scss +++ b/src/styles/type.scss | |||
@@ -59,7 +59,9 @@ button { | |||
59 | position: relative; | 59 | position: relative; |
60 | text-align: center; | 60 | text-align: center; |
61 | @media (prefers-reduced-motion: no-preference) { | 61 | @media (prefers-reduced-motion: no-preference) { |
62 | transition: background 0.5s, color 0.5s; | 62 | transition: |
63 | background 0.5s, | ||
64 | color 0.5s; | ||
63 | } | 65 | } |
64 | cursor: pointer; | 66 | cursor: pointer; |
65 | 67 | ||
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss index dd2ae4ed1..604f5aad6 100644 --- a/src/styles/vertical.scss +++ b/src/styles/vertical.scss | |||
@@ -23,8 +23,8 @@ $tabitem-bias: 30px; | |||
23 | clip-path: inset(10px 10px 0 10px); | 23 | clip-path: inset(10px 10px 0 10px); |
24 | } | 24 | } |
25 | 25 | ||
26 | >div:first-of-type { | 26 | > div:first-of-type { |
27 | overflow-x: scroll!important; | 27 | overflow-x: scroll !important; |
28 | width: 100%; | 28 | width: 100%; |
29 | } | 29 | } |
30 | 30 | ||
@@ -32,7 +32,6 @@ $tabitem-bias: 30px; | |||
32 | flex-direction: row; | 32 | flex-direction: row; |
33 | 33 | ||
34 | .tab-item { | 34 | .tab-item { |
35 | |||
36 | &.is-active { | 35 | &.is-active { |
37 | border-left-width: 0px !important; | 36 | border-left-width: 0px !important; |
38 | border-top-width: 4px; | 37 | border-top-width: 4px; |
@@ -45,7 +44,7 @@ $tabitem-bias: 30px; | |||
45 | padding-top: 4px; | 44 | padding-top: 4px; |
46 | } | 45 | } |
47 | 46 | ||
48 | &.is-label-enabled{ | 47 | &.is-label-enabled { |
49 | min-width: 70px; | 48 | min-width: 70px; |
50 | max-width: 140px; | 49 | max-width: 140px; |
51 | height: $sidebar-width + 10; | 50 | height: $sidebar-width + 10; |
@@ -61,7 +60,7 @@ $tabitem-bias: 30px; | |||
61 | } | 60 | } |
62 | } | 61 | } |
63 | } | 62 | } |
64 | div{ | 63 | div { |
65 | overflow: hidden !important; | 64 | overflow: hidden !important; |
66 | } | 65 | } |
67 | 66 | ||
@@ -92,8 +91,9 @@ $tabitem-bias: 30px; | |||
92 | z-index: 1000; | 91 | z-index: 1000; |
93 | pointer-events: none; | 92 | pointer-events: none; |
94 | clip-path: inset(10px 0 10px 10px); | 93 | clip-path: inset(10px 0 10px 10px); |
95 | box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .12), | 94 | box-shadow: |
96 | inset 0 0 2px 0 rgba(0, 0, 0, 0.36); | 95 | inset 0 0 15px 0 rgba(0, 0, 0, 0.12), |
96 | inset 0 0 2px 0 rgba(0, 0, 0, 0.36); | ||
97 | } | 97 | } |
98 | } | 98 | } |
99 | 99 | ||
@@ -103,8 +103,9 @@ $tabitem-bias: 30px; | |||
103 | } | 103 | } |
104 | 104 | ||
105 | .workspaces-drawer::after { | 105 | .workspaces-drawer::after { |
106 | box-shadow: inset 0 0 10px 0 $dark-theme-black, | 106 | box-shadow: |
107 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); | 107 | inset 0 0 10px 0 $dark-theme-black, |
108 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); | ||
108 | } | 109 | } |
109 | } | 110 | } |
110 | 111 | ||
@@ -114,7 +115,7 @@ $tabitem-bias: 30px; | |||
114 | .sidebar__button--workspaces.is-active { | 115 | .sidebar__button--workspaces.is-active { |
115 | height: $sidebar-width - $sidebar-bias; | 116 | height: $sidebar-width - $sidebar-bias; |
116 | } | 117 | } |
117 | .tab-item .is-label-enabled{ | 118 | .tab-item .is-label-enabled { |
118 | height: $sidebar-width + $tabitem-bias; | 119 | height: $sidebar-width + $tabitem-bias; |
119 | } | 120 | } |
120 | } | 121 | } |
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index 3f90964a6..4e0080efa 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss | |||
@@ -122,7 +122,9 @@ | |||
122 | margin: 0 10px 15px; | 122 | margin: 0 10px 15px; |
123 | height: 35px; | 123 | height: 35px; |
124 | @media (prefers-reduced-motion: no-preference) { | 124 | @media (prefers-reduced-motion: no-preference) { |
125 | transition: 0.5s filter, 0.5s opacity; | 125 | transition: |
126 | 0.5s filter, | ||
127 | 0.5s opacity; | ||
126 | } | 128 | } |
127 | width: 35px; | 129 | width: 35px; |
128 | 130 | ||