diff options
author | 2019-09-05 10:12:44 +0200 | |
---|---|---|
committer | 2019-09-05 10:12:44 +0200 | |
commit | 8860e1e6030bf580070d2d0d3c8c0e0571261364 (patch) | |
tree | bcc62ece220d00da7f5acf14ae9321efd9d2eb43 /src | |
parent | polishing (diff) | |
download | ferdium-app-8860e1e6030bf580070d2d0d3c8c0e0571261364.tar.gz ferdium-app-8860e1e6030bf580070d2d0d3c8c0e0571261364.tar.zst ferdium-app-8860e1e6030bf580070d2d0d3c8c0e0571261364.zip |
update settings ui
Diffstat (limited to 'src')
-rw-r--r-- | src/styles/settings.scss | 71 |
1 files changed, 42 insertions, 29 deletions
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 0955aaa0c..bb95ab5d2 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -1,45 +1,39 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | %headline { | 3 | %headline { |
4 | color: $theme-gray-light; | 4 | color: #FFF; |
5 | font-size: 20px; | 5 | font-size: 20px; |
6 | font-weight: 400; | 6 | font-weight: 400; |
7 | letter-spacing: -1px; | 7 | letter-spacing: -1px; |
8 | 8 | ||
9 | a { color: $theme-gray-light; } | 9 | a { color: #FFF } |
10 | } | 10 | } |
11 | 11 | ||
12 | %headline__dark { | 12 | %headline__dark { |
13 | color: $dark-theme-gray-lightest; | 13 | color: #FFF; |
14 | font-size: 20px; | ||
15 | font-weight: 400; | ||
16 | letter-spacing: -1px; | ||
14 | 17 | ||
15 | a { color: $dark-theme-gray-lightest; } | 18 | a { color: #FFF } |
16 | } | 19 | } |
17 | 20 | ||
18 | .theme__dark { | 21 | .theme__dark { |
19 | .settings-wrapper { background: rgba($dark-theme-black, .8); } | 22 | .settings-wrapper { background: rgba($dark-theme-black, .8); } |
20 | 23 | ||
21 | .settings { | 24 | .settings { |
22 | background: $dark-theme-gray-darkest; | ||
23 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | ||
24 | |||
25 | .settings__header { | 25 | .settings__header { |
26 | background: $dark-theme-gray-darker; | 26 | .mdi { color: #FFF } |
27 | 27 | } | |
28 | h1, | ||
29 | .settings__header-item { @extend %headline__dark; } | ||
30 | 28 | ||
31 | .separator { border-right: 1px solid $dark-theme-gray-dark; } | 29 | .settings__main { |
32 | .mdi { color: $dark-theme-gray-lightest; } | 30 | background: $dark-theme-gray-darkest; |
33 | } | 31 | } |
34 | 32 | ||
35 | .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; } | 33 | .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; } |
36 | 34 | ||
37 | .settings__close { | 35 | .settings__close { |
38 | background: $dark-theme-gray-darker; | 36 | color: #FFF; |
39 | border-left: none; | ||
40 | color: $dark-theme-gray-lightest; | ||
41 | |||
42 | &:hover { background: darken($dark-theme-gray-darker, 5%); } | ||
43 | } | 37 | } |
44 | 38 | ||
45 | &__settings-group h3 { color: $dark-theme-gray-lightest; } | 39 | &__settings-group h3 { color: $dark-theme-gray-lightest; } |
@@ -76,6 +70,11 @@ | |||
76 | 70 | ||
77 | .settings-navigation__link { | 71 | .settings-navigation__link { |
78 | color: $dark-theme-gray-lightest; | 72 | color: $dark-theme-gray-lightest; |
73 | border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); | ||
74 | |||
75 | &:last-child { | ||
76 | border: 0, | ||
77 | } | ||
79 | 78 | ||
80 | .badge { | 79 | .badge { |
81 | background: $dark-theme-gray-lighter; | 80 | background: $dark-theme-gray-lighter; |
@@ -129,15 +128,14 @@ | |||
129 | } | 128 | } |
130 | 129 | ||
131 | .settings { | 130 | .settings { |
132 | background: #FFF; | ||
133 | border-radius: $theme-border-radius; | 131 | border-radius: $theme-border-radius; |
134 | box-shadow: 0 20px 50px rgba(black, .5); | 132 | // box-shadow: 0 20px 50px rgba(black, .5); |
135 | display: flex; | 133 | display: flex; |
136 | height: 100%; | 134 | height: 100%; |
137 | max-height: 720px; | 135 | max-height: 720px; |
138 | max-width: 900px; | 136 | max-width: 900px; |
139 | min-height: 400px; | 137 | min-height: 400px; |
140 | overflow: hidden; | 138 | // overflow: hidden; |
141 | position: relative; | 139 | position: relative; |
142 | width: 100%; | 140 | width: 100%; |
143 | z-index: 9999; | 141 | z-index: 9999; |
@@ -147,25 +145,32 @@ | |||
147 | flex: 1; | 145 | flex: 1; |
148 | flex-direction: column; | 146 | flex-direction: column; |
149 | height: auto; | 147 | height: auto; |
148 | border-radius: $theme-border-radius; | ||
149 | overflow: hidden; | ||
150 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | ||
151 | background: #FFF; | ||
150 | } | 152 | } |
151 | 153 | ||
152 | .settings__header { | 154 | .settings__header { |
153 | align-items: center; | 155 | align-items: center; |
154 | background: $theme-gray-lighter; | 156 | background: $theme-brand-primary; |
155 | display: flex; | 157 | display: flex; |
156 | height: 50px; | 158 | height: 50px; |
157 | padding: 0 40px; | 159 | padding: 0 40px; |
158 | width: calc(100% - 60px); | 160 | width: calc(100% - 60px); |
161 | color: #FFF; | ||
159 | 162 | ||
160 | h1 { | 163 | h1 { |
161 | @extend %headline; | 164 | @extend %headline; |
162 | margin: 0; | 165 | margin: 0; |
163 | } | 166 | } |
164 | 167 | ||
165 | .settings__header-item { @extend %headline; } | 168 | .settings__header-item { |
169 | @extend %headline; | ||
170 | } | ||
166 | 171 | ||
167 | .separator { | 172 | .separator { |
168 | border-right: 1px solid darken($theme-gray-lighter, 10%); | 173 | border-right: 1px solid darken($theme-brand-primary, 8%); |
169 | height: 100%; | 174 | height: 100%; |
170 | margin: 0 15px; | 175 | margin: 0 15px; |
171 | transform: skew(15deg) rotate(2deg); | 176 | transform: skew(15deg) rotate(2deg); |
@@ -218,17 +223,18 @@ | |||
218 | } | 223 | } |
219 | 224 | ||
220 | .settings__close { | 225 | .settings__close { |
221 | background: $theme-gray-lighter; | 226 | background: $theme-brand-primary; |
222 | border-left: 1px solid darken($theme-gray-lighter, 5%); | 227 | border-left: 1px solid darken($theme-brand-primary, 8%); |
223 | color: $theme-gray-light; | 228 | color: #FFF; |
224 | font-size: 20px; | 229 | font-size: 20px; |
225 | height: 50px; | 230 | height: 50px; |
226 | padding: 0 20px; | 231 | padding: 0 20px; |
227 | position: absolute; | 232 | position: absolute; |
228 | right: 0; | 233 | right: 0; |
229 | transition: background $theme-transition-time; | 234 | transition: background $theme-transition-time; |
235 | border-top-right-radius: $theme-border-radius; | ||
230 | 236 | ||
231 | &:hover { background: darken($theme-gray-lighter, 5%); } | 237 | &:hover { background: darken($theme-brand-primary, 5%); } |
232 | } | 238 | } |
233 | 239 | ||
234 | .search-input { margin-bottom: 30px; } | 240 | .search-input { margin-bottom: 30px; } |
@@ -414,7 +420,13 @@ | |||
414 | background: $theme-gray-lightest; | 420 | background: $theme-gray-lightest; |
415 | flex-direction: column; | 421 | flex-direction: column; |
416 | height: auto; | 422 | height: auto; |
417 | width: 200px; | 423 | width: 240px; |
424 | height: calc(100% - 100px); | ||
425 | align-self: center; | ||
426 | border-top-left-radius: $theme-border-radius;; | ||
427 | border-bottom-left-radius: $theme-border-radius;; | ||
428 | overflow: hidden; | ||
429 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | ||
418 | 430 | ||
419 | .settings-navigation__link { | 431 | .settings-navigation__link { |
420 | align-items: center; | 432 | align-items: center; |
@@ -426,6 +438,7 @@ | |||
426 | padding: 0 20px; | 438 | padding: 0 20px; |
427 | text-decoration: none; | 439 | text-decoration: none; |
428 | transition: background $theme-transition-time, color $theme-transition-time; | 440 | transition: background $theme-transition-time, color $theme-transition-time; |
441 | border-bottom: 1px solid darken($theme-gray-lightest, 3%); | ||
429 | 442 | ||
430 | &:hover { | 443 | &:hover { |
431 | background: darken($theme-gray-lightest, 5%); | 444 | background: darken($theme-gray-lightest, 5%); |