aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
authorLibravatar Markus Hatvan <markus_hatvan@aon.at>2021-08-10 19:04:54 +0200
committerLibravatar GitHub <noreply@github.com>2021-08-10 22:34:54 +0530
commit969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch)
tree9f21b062f0c188f2c3ddfbb6594670982610aadf /src/styles
parentrefactor: Move platform-specific logic for shortcut keys into common location. (diff)
downloadferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.gz
ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.zst
ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.zip
feat: follow OS reduced motion setting (#1757)
- add missing meta charset to index.html - dont restrict scaling for user in index.html - load animations.css conditionally based on motion preference - load transitions conditionally in js and css based on motion preference Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/button.scss91
-rw-r--r--src/styles/content-tabs.scss29
-rw-r--r--src/styles/fonts.scss6
-rw-r--r--src/styles/image-upload.scss32
-rw-r--r--src/styles/layout.scss70
-rw-r--r--src/styles/main.scss1
-rw-r--r--src/styles/radio.scss19
-rw-r--r--src/styles/recipes.scss36
-rw-r--r--src/styles/settings.scss213
-rw-r--r--src/styles/slider.scss29
-rw-r--r--src/styles/tabs.scss58
-rw-r--r--src/styles/toggle.scss4
-rw-r--r--src/styles/type.scss46
-rw-r--r--src/styles/welcome.scss36
14 files changed, 464 insertions, 206 deletions
diff --git a/src/styles/button.scss b/src/styles/button.scss
index d18b683d5..86b3501f0 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -4,29 +4,45 @@
4 background: $theme-brand-primary; 4 background: $theme-brand-primary;
5 color: $dark-theme-text-color; 5 color: $dark-theme-text-color;
6 6
7 &:hover { background: darken($theme-brand-primary, 5%); } 7 &:hover {
8 &:active { background: lighten($theme-brand-primary, 5%); } 8 background: darken($theme-brand-primary, 5%);
9 }
10 &:active {
11 background: lighten($theme-brand-primary, 5%);
12 }
9 13
10 &.franz-form__button--secondary { 14 &.franz-form__button--secondary {
11 background: $dark-theme-gray-dark; 15 background: $dark-theme-gray-dark;
12 color: $dark-theme-text-color; 16 color: $dark-theme-text-color;
13 17
14 &:hover { background: lighten($dark-theme-gray-dark, 10%); } 18 &:hover {
15 &:active { background: lighten($dark-theme-gray-dark, 20%); } 19 background: lighten($dark-theme-gray-dark, 10%);
20 }
21 &:active {
22 background: lighten($dark-theme-gray-dark, 20%);
23 }
16 } 24 }
17 25
18 &.franz-form__button--danger { 26 &.franz-form__button--danger {
19 background: $theme-brand-danger; 27 background: $theme-brand-danger;
20 28
21 &:hover { background: darken($theme-brand-danger, 5%); } 29 &:hover {
22 &:active { background: lighten($theme-brand-danger, 5%); } 30 background: darken($theme-brand-danger, 5%);
31 }
32 &:active {
33 background: lighten($theme-brand-danger, 5%);
34 }
23 } 35 }
24 36
25 &.franz-form__button--warning { 37 &.franz-form__button--warning {
26 background: $theme-brand-warning; 38 background: $theme-brand-warning;
27 39
28 &:hover { background: darken($theme-brand-warning, 5%); } 40 &:hover {
29 &:active { background: lighten($theme-brand-warning, 5%); } 41 background: darken($theme-brand-warning, 5%);
42 }
43 &:active {
44 background: lighten($theme-brand-warning, 5%);
45 }
30 } 46 }
31 47
32 &.franz-form__button--inverted { 48 &.franz-form__button--inverted {
@@ -39,27 +55,35 @@
39 } 55 }
40 } 56 }
41 57
42 &:disabled { opacity: .5; } 58 &:disabled {
59 opacity: 0.5;
60 }
43} 61}
44 62
45.franz-form__button { 63.franz-form__button {
46 background: $theme-brand-primary; 64 background: $theme-brand-primary;
47 border-radius: 3px; 65 border-radius: 3px;
48 display: block; 66 display: block;
49 color: #FFF; 67 color: #fff;
50 padding: 10px 20px; 68 padding: 10px 20px;
51 position: relative; 69 position: relative;
52 transition: background .5s; 70 @media (prefers-reduced-motion: no-preference) {
71 transition: background 0.5s;
72 }
53 text-align: center; 73 text-align: center;
54 74
55 &:hover { background: darken($theme-brand-primary, 5%) } 75 &:hover {
76 background: darken($theme-brand-primary, 5%);
77 }
56 78
57 &:active { 79 &:active {
58 background: lighten($theme-brand-primary, 5%); 80 background: lighten($theme-brand-primary, 5%);
59 transition: none; 81 transition: none;
60 } 82 }
61 83
62 &:disabled { opacity: .2; } 84 &:disabled {
85 opacity: 0.2;
86 }
63 87
64 &.franz-form__button--large { 88 &.franz-form__button--large {
65 width: 100%; 89 width: 100%;
@@ -70,22 +94,34 @@
70 background: $theme-gray-lighter; 94 background: $theme-gray-lighter;
71 color: $theme-gray; 95 color: $theme-gray;
72 96
73 &:hover { background: darken($theme-gray-lighter, 5%); } 97 &:hover {
74 &:active { background: lighten($theme-gray-lighter, 5%); } 98 background: darken($theme-gray-lighter, 5%);
99 }
100 &:active {
101 background: lighten($theme-gray-lighter, 5%);
102 }
75 } 103 }
76 104
77 &.franz-form__button--danger { 105 &.franz-form__button--danger {
78 background: $theme-brand-danger; 106 background: $theme-brand-danger;
79 107
80 &:hover { background: darken($theme-brand-danger, 5%); } 108 &:hover {
81 &:active { background: lighten($theme-brand-danger, 5%); } 109 background: darken($theme-brand-danger, 5%);
110 }
111 &:active {
112 background: lighten($theme-brand-danger, 5%);
113 }
82 } 114 }
83 115
84 &.franz-form__button--warning { 116 &.franz-form__button--warning {
85 background: $theme-brand-warning; 117 background: $theme-brand-warning;
86 118
87 &:hover { background: darken($theme-brand-warning, 5%); } 119 &:hover {
88 &:active { background: lighten($theme-brand-warning, 5%); } 120 background: darken($theme-brand-warning, 5%);
121 }
122 &:active {
123 background: lighten($theme-brand-warning, 5%);
124 }
89 } 125 }
90 126
91 &.franz-form__button--inverted { 127 &.franz-form__button--inverted {
@@ -93,11 +129,12 @@
93 border: 2px solid $theme-brand-primary; 129 border: 2px solid $theme-brand-primary;
94 color: $theme-brand-primary; 130 color: $theme-brand-primary;
95 padding: 10px 20px; 131 padding: 10px 20px;
96 transition: background .5s, color .5s; 132 @media (prefers-reduced-motion: no-preference) {
97 133 transition: background 0.5s, color 0.5s;
134 }
98 &:hover { 135 &:hover {
99 background: darken($theme-brand-primary, 5%); 136 background: darken($theme-brand-primary, 5%);
100 color: #FFF; 137 color: #fff;
101 } 138 }
102 } 139 }
103 140
@@ -122,20 +159,20 @@
122 z-index: 9998; 159 z-index: 9998;
123 list-style: none; 160 list-style: none;
124 background: $theme-brand-primary; 161 background: $theme-brand-primary;
125 162
126 position: absolute; 163 position: absolute;
127 bottom: 20px; 164 bottom: 20px;
128 right: 20px; 165 right: 20px;
129 166
130 cursor: pointer; 167 cursor: pointer;
131 168
132 display: flex; 169 display: flex;
133 justify-content: center; 170 justify-content: center;
134 align-items: center; 171 align-items: center;
135 172
136 a { 173 a {
137 font-size: 30px; 174 font-size: 30px;
138 color: #FFFFFF; 175 color: #ffffff;
139 cursor: pointer; 176 cursor: pointer;
140 } 177 }
141} 178}
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss
index 03befedcb..41bd2c251 100644
--- a/src/styles/content-tabs.scss
+++ b/src/styles/content-tabs.scss
@@ -9,7 +9,7 @@
9 .content-tabs__tabs { 9 .content-tabs__tabs {
10 .content-tabs__item { 10 .content-tabs__item {
11 background: $dark-theme-gray; 11 background: $dark-theme-gray;
12 color: #FFF; 12 color: #fff;
13 border: 0; 13 border: 0;
14 } 14 }
15 } 15 }
@@ -24,19 +24,26 @@
24 overflow: hidden; 24 overflow: hidden;
25 25
26 .content-tabs__item { 26 .content-tabs__item {
27 background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); 27 background: linear-gradient(
28 $theme-gray-lightest 80%,
29 darken($theme-gray-lightest, 3%)
30 );
28 border-right: 1px solid $theme-gray-lighter; 31 border-right: 1px solid $theme-gray-lighter;
29 color: $theme-gray-dark; 32 color: $theme-gray-dark;
30 flex: 1; 33 flex: 1;
31 padding: 10px; 34 padding: 10px;
32 transition: background $theme-transition-time; 35 @media (prefers-reduced-motion: no-preference) {
36 transition: background $theme-transition-time;
37 }
33 38
34 &:last-of-type { border-right: 0; } 39 &:last-of-type {
40 border-right: 0;
41 }
35 42
36 &.is-active { 43 &.is-active {
37 background: $theme-brand-primary; 44 background: $theme-brand-primary;
38 box-shadow: none; 45 box-shadow: none;
39 color: #FFF; 46 color: #fff;
40 } 47 }
41 } 48 }
42 } 49 }
@@ -51,10 +58,16 @@
51 display: none; 58 display: none;
52 top: 0; 59 top: 0;
53 60
54 &.is-active { display: block; } 61 &.is-active {
62 display: block;
63 }
55 } 64 }
56 65
57 .franz-form__input-wrapper { background: #FFF; } 66 .franz-form__input-wrapper {
58 .franz-form__field:last-of-type { margin-bottom: 0; } 67 background: #fff;
68 }
69 .franz-form__field:last-of-type {
70 margin-bottom: 0;
71 }
59 } 72 }
60} 73}
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 432332b49..1b2c99945 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -5,6 +5,7 @@
5 src: url('../assets/fonts/OpenSans-Light.ttf'); 5 src: url('../assets/fonts/OpenSans-Light.ttf');
6 font-weight: 300; 6 font-weight: 300;
7 font-style: normal; 7 font-style: normal;
8 display: swap;
8} 9}
9 10
10@font-face { 11@font-face {
@@ -12,6 +13,7 @@
12 src: url('../assets/fonts/OpenSans-Regular.ttf'); 13 src: url('../assets/fonts/OpenSans-Regular.ttf');
13 font-weight: normal; 14 font-weight: normal;
14 font-style: normal; 15 font-style: normal;
16 display: swap;
15} 17}
16 18
17@font-face { 19@font-face {
@@ -19,6 +21,7 @@
19 src: url('../assets/fonts/OpenSans-Bold.ttf'); 21 src: url('../assets/fonts/OpenSans-Bold.ttf');
20 font-weight: bold; 22 font-weight: bold;
21 font-style: normal; 23 font-style: normal;
24 display: swap;
22} 25}
23 26
24@font-face { 27@font-face {
@@ -26,6 +29,7 @@
26 src: url('../assets/fonts/OpenSans-BoldItalic.ttf'); 29 src: url('../assets/fonts/OpenSans-BoldItalic.ttf');
27 font-weight: bold; 30 font-weight: bold;
28 font-style: italic; 31 font-style: italic;
32 display: swap;
29} 33}
30 34
31@font-face { 35@font-face {
@@ -33,6 +37,7 @@
33 src: url('../assets/fonts/OpenSans-ExtraBold.ttf'); 37 src: url('../assets/fonts/OpenSans-ExtraBold.ttf');
34 font-weight: 800; 38 font-weight: 800;
35 font-style: normal; 39 font-style: normal;
40 display: swap;
36} 41}
37 42
38@font-face { 43@font-face {
@@ -40,4 +45,5 @@
40 src: url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf'); 45 src: url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf');
41 font-weight: 800; 46 font-weight: 800;
42 font-style: italic; 47 font-style: italic;
48 display: swap;
43} 49}
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss
index 31300c227..b5f6d5cd4 100644
--- a/src/styles/image-upload.scss
+++ b/src/styles/image-upload.scss
@@ -5,17 +5,23 @@
5 color: $dark-theme-gray-lighter; 5 color: $dark-theme-gray-lighter;
6 6
7 &__action { 7 &__action {
8 &-background { background: rgba($dark-theme-black, .7); } 8 &-background {
9 background: rgba($dark-theme-black, 0.7);
10 }
9 11
10 button { 12 button {
11 color: $dark-theme-gray-lightest; 13 color: $dark-theme-gray-lightest;
12 14
13 .mdi { color: $dark-theme-gray-lightest; } 15 .mdi {
16 color: $dark-theme-gray-lightest;
17 }
14 } 18 }
15 } 19 }
16 } 20 }
17 21
18 .image-upload-wrapper .mdi { color: $dark-theme-gray-light; } 22 .image-upload-wrapper .mdi {
23 color: $dark-theme-gray-light;
24 }
19} 25}
20 26
21.image-upload { 27.image-upload {
@@ -49,11 +55,13 @@
49 justify-content: center; 55 justify-content: center;
50 opacity: 0; 56 opacity: 0;
51 position: relative; 57 position: relative;
52 transition: opacity .5s; 58 @media (prefers-reduced-motion: no-preference) {
59 transition: opacity 0.5s;
60 }
53 z-index: 10; 61 z-index: 10;
54 62
55 &-background { 63 &-background {
56 background: rgba($theme-gray, .7); 64 background: rgba($theme-gray, 0.7);
57 bottom: 0; 65 bottom: 0;
58 left: 0; 66 left: 0;
59 position: absolute; 67 position: absolute;
@@ -63,11 +71,13 @@
63 } 71 }
64 72
65 button { 73 button {
66 color: #FFF; 74 color: #fff;
67 position: relative; 75 position: relative;
68 z-index: 100; 76 z-index: 100;
69 77
70 .mdi { color: #FFF; } 78 .mdi {
79 color: #fff;
80 }
71 } 81 }
72 } 82 }
73 83
@@ -83,7 +93,9 @@
83 93
84 &__dropzone, 94 &__dropzone,
85 button { 95 button {
86 .mdi { margin-bottom: 5px; } 96 .mdi {
97 margin-bottom: 5px;
98 }
87 99
88 p { 100 p {
89 font-size: 10px; 101 font-size: 10px;
@@ -91,7 +103,9 @@
91 } 103 }
92 } 104 }
93 105
94 &:hover .image-upload__action { opacity: 1; } 106 &:hover .image-upload__action {
107 opacity: 1;
108 }
95} 109}
96 110
97.image-upload-wrapper .mdi { 111.image-upload-wrapper .mdi {
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
3html { overflow: hidden; } 3html {
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
77body.win32:not(.isFullScreen) .app .app__content { 81body.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
210a, button { 237a,
238button {
211 cursor: pointer; 239 cursor: pointer;
212} 240}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 4cc996785..b0815e086 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -22,7 +22,6 @@ $mdi-font-path: '../node_modules/@mdi/font/fonts';
22@import './tooltip.scss'; 22@import './tooltip.scss';
23@import './info-bar.scss'; 23@import './info-bar.scss';
24@import './status-bar-target-url.scss'; 24@import './status-bar-target-url.scss';
25@import './animations.scss';
26@import './infobox.scss'; 25@import './infobox.scss';
27@import './badge.scss'; 26@import './badge.scss';
28@import './content-tabs.scss'; 27@import './content-tabs.scss';
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index b1e148ca0..e8297408d 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -11,9 +11,10 @@
11 } 11 }
12} 12}
13 13
14
15.franz-form { 14.franz-form {
16 .franz-form__radio-wrapper { display: flex; } 15 .franz-form__radio-wrapper {
16 display: flex;
17 }
17 18
18 .franz-form__radio { 19 .franz-form__radio {
19 border: 2px solid $theme-gray-lighter; 20 border: 2px solid $theme-gray-lighter;
@@ -24,18 +25,24 @@
24 margin-right: 20px; 25 margin-right: 20px;
25 padding: 11px; 26 padding: 11px;
26 text-align: center; 27 text-align: center;
27 transition: background $theme-transition-time; 28 @media (prefers-reduced-motion: no-preference) {
29 transition: background $theme-transition-time;
30 }
28 31
29 &:last-of-type { margin-right: 0; } 32 &:last-of-type {
33 margin-right: 0;
34 }
30 35
31 &.is-selected { 36 &.is-selected {
32 background: #FFF; 37 background: #fff;
33 border-width: 2px; 38 border-width: 2px;
34 border-style: solid; 39 border-style: solid;
35 border-color: $theme-brand-primary; 40 border-color: $theme-brand-primary;
36 color: $theme-brand-primary; 41 color: $theme-brand-primary;
37 } 42 }
38 43
39 input { display: none; } 44 input {
45 display: none;
46 }
40 } 47 }
41} 48}
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
index 5bdc60a57..37c2febf6 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -4,7 +4,9 @@
4 background-color: $dark-theme-gray-dark; 4 background-color: $dark-theme-gray-dark;
5 color: $dark-theme-text-color; 5 color: $dark-theme-text-color;
6 6
7 &:hover { background-color: $dark-theme-gray; } 7 &:hover {
8 background-color: $dark-theme-gray;
9 }
8} 10}
9 11
10.recipes { 12.recipes {
@@ -17,7 +19,7 @@
17 19
18 &.recipes__list--disabled { 20 &.recipes__list--disabled {
19 filter: grayscale(100%); 21 filter: grayscale(100%);
20 opacity: .3; 22 opacity: 0.3;
21 pointer-events: none; 23 pointer-events: none;
22 } 24 }
23 } 25 }
@@ -26,16 +28,20 @@
26 height: auto; 28 height: auto;
27 margin-bottom: 35px; 29 margin-bottom: 35px;
28 30
29 .badge { margin-right: 10px; } 31 .badge {
32 margin-right: 10px;
33 }
30 34
31 &.recipes__navigation--disabled { 35 &.recipes__navigation--disabled {
32 filter: grayscale(100%); 36 filter: grayscale(100%);
33 opacity: .3; 37 opacity: 0.3;
34 pointer-events: none; 38 pointer-events: none;
35 } 39 }
36 } 40 }
37 41
38 &__service-request { float: right; } 42 &__service-request {
43 float: right;
44 }
39} 45}
40 46
41.recipe-teaser { 47.recipe-teaser {
@@ -45,24 +51,32 @@
45 margin: 0 20px 20px 0; 51 margin: 0 20px 20px 0;
46 overflow: hidden; 52 overflow: hidden;
47 position: relative; 53 position: relative;
48 transition: background $theme-transition-time; 54 @media (prefers-reduced-motion: no-preference) {
55 transition: background $theme-transition-time;
56 }
49 width: calc(25% - 20px); 57 width: calc(25% - 20px);
50 58
51 &:hover { background-color: $theme-gray-lighter; } 59 &:hover {
60 background-color: $theme-gray-lighter;
61 }
52 62
53 .recipe-teaser__icon { 63 .recipe-teaser__icon {
54 margin-bottom: 10px; 64 margin-bottom: 10px;
55 width: 50px; 65 width: 50px;
56 } 66 }
57 67
58 .recipe-teaser__label { display: block; } 68 .recipe-teaser__label {
69 display: block;
70 }
59 71
60 h2 { z-index: 10; } 72 h2 {
73 z-index: 10;
74 }
61 75
62 &__dev-badge { 76 &__dev-badge {
63 background: $theme-brand-warning; 77 background: $theme-brand-warning;
64 box-shadow: 0 0 4px rgba(black, .2); 78 box-shadow: 0 0 4px rgba(black, 0.2);
65 color: #FFF; 79 color: #fff;
66 font-size: 10px; 80 font-size: 10px;
67 position: absolute; 81 position: absolute;
68 right: -13px; 82 right: -13px;
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 5d4e81a4f..501f97b98 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,63 +1,85 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3%headline { 3%headline {
4 color: #FFF; 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: #FFF } 9 a {
10 color: #fff;
11 }
10} 12}
11 13
12%headline__dark { 14%headline__dark {
13 color: #FFF; 15 color: #fff;
14 font-size: 20px; 16 font-size: 20px;
15 font-weight: 400; 17 font-weight: 400;
16 letter-spacing: -1px; 18 letter-spacing: -1px;
17 19
18 a { color: #FFF } 20 a {
21 color: #fff;
22 }
19} 23}
20 24
21.theme__dark { 25.theme__dark {
22 .settings-wrapper { background: rgba($dark-theme-black, .8); } 26 .settings-wrapper {
27 background: rgba($dark-theme-black, 0.8);
28 }
23 29
24 .settings { 30 .settings {
25 .settings__header { 31 .settings__header {
26 .mdi { color: #FFF } 32 .mdi {
33 color: #fff;
34 }
27 } 35 }
28 36
29 .settings__main { 37 .settings__main {
30 background: $dark-theme-gray-darkest; 38 background: $dark-theme-gray-darkest;
31 } 39 }
32 40
33 .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; } 41 .settings__body::-webkit-scrollbar-thumb {
42 background: $dark-theme-gray;
43 }
34 44
35 .settings__close { 45 .settings__close {
36 color: #FFF; 46 color: #fff;
37 } 47 }
38 48
39 &__settings-group h3 { color: $dark-theme-gray-lightest; } 49 &__settings-group h3 {
50 color: $dark-theme-gray-lightest;
51 }
40 52
41 .settings__message { 53 .settings__message {
42 border-top: 1px solid $theme-gray-lighter; 54 border-top: 1px solid $theme-gray-lighter;
43 color: $dark-theme-gray-lightest; 55 color: $dark-theme-gray-lightest;
44 56
45 .mdi { color: $dark-theme-gray-lightest; } 57 .mdi {
58 color: $dark-theme-gray-lightest;
59 }
46 } 60 }
47 61
48 .settings__help { color: $dark-theme-gray-lightest; } 62 .settings__help {
63 color: $dark-theme-gray-lightest;
64 }
49 65
50 .settings__controls { 66 .settings__controls {
51 background: $dark-theme-gray-darker; 67 background: $dark-theme-gray-darker;
52 68
53 .franz-form__button.franz-form__button--secondary { background: $theme-gray-light; } 69 .franz-form__button.franz-form__button--secondary {
70 background: $theme-gray-light;
71 }
54 } 72 }
55 73
56 .account { 74 .account {
57 .account__box { background: $dark-theme-gray-darker; } 75 .account__box {
76 background: $dark-theme-gray-darker;
77 }
58 } 78 }
59 79
60 .legal { color: $theme-gray-light; } 80 .legal {
81 color: $theme-gray-light;
82 }
61 } 83 }
62 84
63 .settings-navigation { 85 .settings-navigation {
@@ -69,7 +91,7 @@
69 border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); 91 border-bottom: 1px solid darken($dark-theme-gray-darker, 3%);
70 92
71 &:last-child { 93 &:last-child {
72 border: 0, 94 border: 0;
73 } 95 }
74 96
75 .badge { 97 .badge {
@@ -87,7 +109,7 @@
87 } 109 }
88 110
89 &.is-disabled { 111 &.is-disabled {
90 filter: grayscale(100%) opacity(.2); 112 filter: grayscale(100%) opacity(0.2);
91 } 113 }
92 114
93 &.is-active { 115 &.is-active {
@@ -101,13 +123,15 @@
101 } 123 }
102 } 124 }
103 125
104 .settings-navigation__action-badge { background: $theme-brand-danger; } 126 .settings-navigation__action-badge {
127 background: $theme-brand-danger;
128 }
105 } 129 }
106} 130}
107 131
108.settings-wrapper { 132.settings-wrapper {
109 align-items: center; 133 align-items: center;
110 background: rgba(black, .5); 134 background: rgba(black, 0.5);
111 display: flex; 135 display: flex;
112 height: 100%; 136 height: 100%;
113 left: 0; 137 left: 0;
@@ -129,7 +153,7 @@
129 153
130.settings { 154.settings {
131 border-radius: $theme-border-radius; 155 border-radius: $theme-border-radius;
132 box-shadow: 0 20px 50px rgba($dark-theme-black, .5); 156 box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5);
133 display: flex; 157 display: flex;
134 height: 100%; 158 height: 100%;
135 max-height: 720px; 159 max-height: 720px;
@@ -147,7 +171,7 @@
147 height: auto; 171 height: auto;
148 border-radius: 0 $theme-border-radius $theme-border-radius 0; 172 border-radius: 0 $theme-border-radius $theme-border-radius 0;
149 overflow: hidden; 173 overflow: hidden;
150 background: #FFF; 174 background: #fff;
151 } 175 }
152 176
153 .settings__header { 177 .settings__header {
@@ -157,7 +181,7 @@
157 height: 50px; 181 height: 50px;
158 padding: 0 40px; 182 padding: 0 40px;
159 width: calc(100% - 60px); 183 width: calc(100% - 60px);
160 color: #FFF; 184 color: #fff;
161 185
162 h1 { 186 h1 {
163 @extend %headline; 187 @extend %headline;
@@ -177,11 +201,13 @@
177 transform: skew(15deg) rotate(2deg); 201 transform: skew(15deg) rotate(2deg);
178 } 202 }
179 203
180 .mdi { color: $theme-gray-light; } 204 .mdi {
205 color: $theme-gray-light;
206 }
181 } 207 }
182 208
183 .settings_titles { 209 .settings_titles {
184 display:inline-block; 210 display: inline-block;
185 } 211 }
186 212
187 .settings__body { 213 .settings__body {
@@ -190,9 +216,13 @@
190 overflow-y: scroll; 216 overflow-y: scroll;
191 padding: 25px 15px 15px 25px; 217 padding: 25px 15px 15px 25px;
192 218
193 .badge { margin-right: 10px; } 219 .badge {
220 margin-right: 10px;
221 }
194 222
195 &::-webkit-scrollbar { width: 8px; } 223 &::-webkit-scrollbar {
224 width: 8px;
225 }
196 226
197 /* Track */ 227 /* Track */
198 &::-webkit-scrollbar-track { 228 &::-webkit-scrollbar-track {
@@ -208,9 +238,16 @@
208 -webkit-border-radius: 10px; 238 -webkit-border-radius: 10px;
209 } 239 }
210 240
211 &::-webkit-scrollbar-thumb:window-inactive { background: none; } 241 &::-webkit-scrollbar-thumb:window-inactive {
212 .service-flex-grid { display: flex; } 242 background: none;
213 .service-name,.user-agent { flex: 1px; } 243 }
244 .service-flex-grid {
245 display: flex;
246 }
247 .service-name,
248 .user-agent {
249 flex: 1px;
250 }
214 251
215 .service-icon { 252 .service-icon {
216 float: right; 253 float: right;
@@ -232,20 +269,28 @@
232 .settings__close { 269 .settings__close {
233 background: $theme-brand-primary; 270 background: $theme-brand-primary;
234 // border-left: 1px solid darken($theme-brand-primary, 8%); 271 // border-left: 1px solid darken($theme-brand-primary, 8%);
235 color: #FFF; 272 color: #fff;
236 font-size: 20px; 273 font-size: 20px;
237 height: 50px; 274 height: 50px;
238 padding: 0 20px; 275 padding: 0 20px;
239 position: absolute; 276 position: absolute;
240 right: 0; 277 right: 0;
241 transition: background $theme-transition-time; 278 @media (prefers-reduced-motion: no-preference) {
279 transition: background $theme-transition-time;
280 }
242 cursor: pointer; 281 cursor: pointer;
243 282
244 &::before { cursor: pointer; } 283 &::before {
245 &:hover { background: darken($theme-brand-primary, 5%); } 284 cursor: pointer;
285 }
286 &:hover {
287 background: darken($theme-brand-primary, 5%);
288 }
246 } 289 }
247 290
248 .search-input { margin-bottom: 30px; } 291 .search-input {
292 margin-bottom: 30px;
293 }
249 294
250 &__options { 295 &__options {
251 flex: 1; 296 flex: 1;
@@ -258,10 +303,12 @@
258 h3 { 303 h3 {
259 color: $theme-gray-light; 304 color: $theme-gray-light;
260 font-weight: bold; 305 font-weight: bold;
261 letter-spacing: -.1px; 306 letter-spacing: -0.1px;
262 margin: 25px 0 15px; 307 margin: 25px 0 15px;
263 308
264 &:first-of-type { margin-top: 0; } 309 &:first-of-type {
310 margin-top: 0;
311 }
265 312
266 .badge { 313 .badge {
267 font-weight: normal; 314 font-weight: normal;
@@ -302,14 +349,20 @@
302 padding: 10px 20px; 349 padding: 10px 20px;
303 350
304 .franz-form__button { 351 .franz-form__button {
305 &[type='submit'] { margin-left: auto; } 352 &[type='submit'] {
306 &.franz-form__button--secondary { background: $theme-gray-light; } 353 margin-left: auto;
354 }
355 &.franz-form__button--secondary {
356 background: $theme-gray-light;
357 }
307 } 358 }
308 } 359 }
309 360
310 .settings__delete-button { right: 0; } 361 .settings__delete-button {
362 right: 0;
363 }
311 .settings__open-recipe-file-button { 364 .settings__open-recipe-file-button {
312 cursor:pointer; 365 cursor: pointer;
313 margin-right: 10px; 366 margin-right: 10px;
314 } 367 }
315 .settings__open-recipe-file-container { 368 .settings__open-recipe-file-container {
@@ -330,7 +383,9 @@
330 margin-bottom: 1em; 383 margin-bottom: 1em;
331 } 384 }
332 385
333 a.button { margin-top: 40px; } 386 a.button {
387 margin-top: 40px;
388 }
334 } 389 }
335 390
336 .account { 391 .account {
@@ -343,8 +398,12 @@
343 margin-bottom: 40px; 398 margin-bottom: 40px;
344 padding: 20px; 399 padding: 20px;
345 400
346 &.account__box--flex { display: flex; } 401 &.account__box--flex {
347 &.account__box--last { margin-bottom: 0; } 402 display: flex;
403 }
404 &.account__box--last {
405 margin-bottom: 0;
406 }
348 407
349 .auth__button { 408 .auth__button {
350 margin-top: 10px; 409 margin-top: 10px;
@@ -360,16 +419,24 @@
360 .account__info { 419 .account__info {
361 flex: 1; 420 flex: 1;
362 421
363 h2 { margin-bottom: 5px; } 422 h2 {
364 .badge { margin-top: 5px; } 423 margin-bottom: 5px;
365 .username { margin-right: 10 } 424 }
425 .badge {
426 margin-top: 5px;
427 }
428 .username {
429 margin-right: 10;
430 }
366 } 431 }
367 432
368 .account__subscription { 433 .account__subscription {
369 align-items: center; 434 align-items: center;
370 display: flex; 435 display: flex;
371 436
372 .badge { margin-left: 10px; } 437 .badge {
438 margin-left: 10px;
439 }
373 } 440 }
374 441
375 .manage-user-links { 442 .manage-user-links {
@@ -378,10 +445,18 @@
378 justify-content: space-between; 445 justify-content: space-between;
379 } 446 }
380 447
381 .account__subscription-button { margin-left: auto; } 448 .account__subscription-button {
382 .franz-form__button { white-space: nowrap; } 449 margin-left: auto;
383 div { height: auto; } 450 }
384 [data-type="franz-button"] div { height: 20px } 451 .franz-form__button {
452 white-space: nowrap;
453 }
454 div {
455 height: auto;
456 }
457 [data-type='franz-button'] div {
458 height: 20px;
459 }
385 460
386 .invoices { 461 .invoices {
387 width: 100%; 462 width: 100%;
@@ -399,7 +474,9 @@
399 .invoices__action { 474 .invoices__action {
400 text-align: right; 475 text-align: right;
401 476
402 button { color: $theme-brand-primary; } 477 button {
478 color: $theme-brand-primary;
479 }
403 } 480 }
404 } 481 }
405 } 482 }
@@ -409,7 +486,9 @@
409 font-size: 40px; 486 font-size: 40px;
410 margin-bottom: 20px; 487 margin-bottom: 20px;
411 488
412 img { width: 40px; } 489 img {
490 width: 40px;
491 }
413 } 492 }
414 493
415 .content-tabs { 494 .content-tabs {
@@ -432,8 +511,8 @@
432 width: 240px; 511 width: 240px;
433 height: 100%; 512 height: 100%;
434 align-self: center; 513 align-self: center;
435 border-top-left-radius: $theme-border-radius;; 514 border-top-left-radius: $theme-border-radius;
436 border-bottom-left-radius: $theme-border-radius;; 515 border-bottom-left-radius: $theme-border-radius;
437 overflow: hidden; 516 overflow: hidden;
438 517
439 .settings-navigation__link { 518 .settings-navigation__link {
@@ -445,12 +524,15 @@
445 height: 51px; 524 height: 51px;
446 padding: 0 20px; 525 padding: 0 20px;
447 text-decoration: none; 526 text-decoration: none;
448 transition: background $theme-transition-time, color $theme-transition-time; 527 @media (prefers-reduced-motion: no-preference) {
528 transition: background $theme-transition-time,
529 color $theme-transition-time;
530 }
449 border-bottom: 1px solid darken($theme-gray-lightest, 3%); 531 border-bottom: 1px solid darken($theme-gray-lightest, 3%);
450 532
451 .badge { 533 .badge {
452 background: $theme-gray-light; 534 background: $theme-gray-light;
453 color: #FFF; 535 color: #fff;
454 } 536 }
455 537
456 &:hover { 538 &:hover {
@@ -458,26 +540,31 @@
458 540
459 .badge { 541 .badge {
460 background: $theme-gray-light; 542 background: $theme-gray-light;
461 color: #FFF; 543 color: #fff;
462 } 544 }
463 } 545 }
464 546
465 &.is-active { 547 &.is-active {
466 background: $theme-brand-primary; 548 background: $theme-brand-primary;
467 color: #FFF; 549 color: #fff;
468 550
469 .badge { 551 .badge {
470 background: #FFF; 552 background: #fff;
471 color: $theme-brand-primary; 553 color: $theme-brand-primary;
472 } 554 }
473 } 555 }
474 } 556 }
475 557
476 .settings-navigation__expander { flex: 1; } 558 .settings-navigation__expander {
559 flex: 1;
560 }
477 561
478 .badge { 562 .badge {
479 display: initial; 563 display: initial;
480 transition: background $theme-transition-time, color $theme-transition-time; 564 @media (prefers-reduced-motion: no-preference) {
565 transition: background $theme-transition-time,
566 color $theme-transition-time;
567 }
481 } 568 }
482 569
483 .settings-navigation__action-badge { 570 .settings-navigation__action-badge {
@@ -491,5 +578,7 @@
491} 578}
492 579
493.settings__support-badges { 580.settings__support-badges {
494 a { margin-right: 10px } 581 a {
582 margin-right: 10px;
583 }
495} 584}
diff --git a/src/styles/slider.scss b/src/styles/slider.scss
index 8bb771586..85b31660f 100644
--- a/src/styles/slider.scss
+++ b/src/styles/slider.scss
@@ -3,43 +3,44 @@
3.theme__dark .franz-form .franz-form__slider-wrapper .slider { 3.theme__dark .franz-form .franz-form__slider-wrapper .slider {
4 border: 1px solid $dark-theme-gray; 4 border: 1px solid $dark-theme-gray;
5 background: $dark-theme-gray; 5 background: $dark-theme-gray;
6
7} 6}
8 7
9
10.franz-form { 8.franz-form {
11 .franz-form__slider-wrapper { 9 .franz-form__slider-wrapper {
12 display: flex; 10 display: flex;
13 flex-direction: row; 11 flex-direction: row;
14 12
15 .franz-form__label { margin-left: 20px; } 13 .franz-form__label {
14 margin-left: 20px;
15 }
16 16
17 .slider-container { 17 .slider-container {
18 width: 100%; /* Width of the outside container */ 18 width: 100%; /* Width of the outside container */
19 } 19 }
20 20
21 /* The slider itself */ 21 /* The slider itself */
22 .slider { 22 .slider {
23 -webkit-appearance: none; 23 -webkit-appearance: none;
24 width: 100%; 24 width: 100%;
25 height: 14px; 25 height: 14px;
26 border-radius: $theme-border-radius; 26 border-radius: $theme-border-radius;
27 background: $theme-gray-lighter; 27 background: $theme-gray-lighter;
28 outline: none; 28 outline: none;
29 opacity: 1.0; 29 opacity: 1;
30 -webkit-transition: .2s; 30 @media (prefers-reduced-motion: no-preference) {
31 transition: opacity .2s; 31 transition: opacity 0.2s;
32 }
32 } 33 }
33 34
34 .slider::-webkit-slider-thumb { 35 .slider::-webkit-slider-thumb {
35 -webkit-appearance: none; 36 -webkit-appearance: none;
36 appearance: none; 37 appearance: none;
37 width: 14px; 38 width: 14px;
38 height: 14px; 39 height: 14px;
39 border-radius: 50%; 40 border-radius: 50%;
40 background: $theme-brand-primary; 41 background: $theme-brand-primary;
41 box-shadow: 0 1px 4px rgba(0, 0, 0, .3); 42 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
42 cursor: pointer; 43 cursor: pointer;
43 } 44 }
44 } 45 }
45} 46}
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 31a239387..df10da77c 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -4,11 +4,17 @@
4 &.is-active { 4 &.is-active {
5 background: $dark-theme-gray; 5 background: $dark-theme-gray;
6 6
7 .tab-item__icon { margin-left: -4px; } 7 .tab-item__icon {
8 margin-left: -4px;
9 }
8 } 10 }
9 11
10 &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); } 12 &.is-disabled .tab-item__icon {
11 .tab-item__icon { width: 34px; } 13 filter: grayscale(100%) opacity(0.2);
14 }
15 .tab-item__icon {
16 width: 34px;
17 }
12} 18}
13 19
14.tabs { 20.tabs {
@@ -29,22 +35,34 @@
29 justify-content: center; 35 justify-content: center;
30 min-height: 50px; 36 min-height: 50px;
31 position: relative; 37 position: relative;
32 transition: background $theme-transition-time; 38 @media (prefers-reduced-motion: no-preference) {
39 transition: background $theme-transition-time;
40 }
33 width: $theme-sidebar-width; 41 width: $theme-sidebar-width;
34 42
35 &.is-active { 43 &.is-active {
36 background: change-color($theme-brand-primary, 44 background: change-color(
37 $lightness: min(lightness($theme-brand-primary) * 1.35, 100)); 45 $theme-brand-primary,
46 $lightness: min(lightness($theme-brand-primary) * 1.35, 100)
47 );
38 border-left-width: 4px; 48 border-left-width: 4px;
39 border-left-style: solid; 49 border-left-style: solid;
40 color: $theme-brand-primary; 50 color: $theme-brand-primary;
41 51
42 .tab-item__icon { margin-left: -4px; } 52 .tab-item__icon {
53 margin-left: -4px;
54 }
43 } 55 }
44 56
45 &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); } 57 &.is-disabled .tab-item__icon {
46 &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; } 58 filter: grayscale(100%) opacity(0.2);
47 &:active .tab-item__icon { opacity: .7; } 59 }
60 &.has-custom-icon .tab-item__icon {
61 border-radius: $theme-border-radius;
62 }
63 &:active .tab-item__icon {
64 opacity: 0.7;
65 }
48 66
49 .tab-item__icon { 67 .tab-item__icon {
50 height: auto; 68 height: auto;
@@ -56,7 +74,7 @@
56 background: $theme-brand-danger; 74 background: $theme-brand-danger;
57 border-radius: 20px; 75 border-radius: 20px;
58 bottom: 8px; 76 bottom: 8px;
59 color: #FFF; 77 color: #fff;
60 display: flex; 78 display: flex;
61 font-size: 11px; 79 font-size: 11px;
62 justify-content: center; 80 justify-content: center;
@@ -66,13 +84,13 @@
66 position: absolute; 84 position: absolute;
67 right: 8px; 85 right: 8px;
68 86
69 &.is-indirect { 87 &.is-indirect {
70 padding-top: 0; 88 padding-top: 0;
71 background: #0088cc; 89 background: #0088cc;
72 } 90 }
73 &.hibernating { 91 &.hibernating {
74 padding-top: 0; 92 padding-top: 0;
75 background: $theme-gray; 93 background: $theme-gray;
76 font-size: 0px; 94 font-size: 0px;
77 min-height: 10px; 95 min-height: 10px;
78 min-width: 10px; 96 min-width: 10px;
@@ -96,11 +114,13 @@
96 right: 8px; 114 right: 8px;
97 width: 17px; 115 width: 17px;
98 116
99 &.is-indirect { 117 &.is-indirect {
100 padding-top: 0; 118 padding-top: 0;
101 background: #0088cc; 119 background: #0088cc;
102 } 120 }
103 } 121 }
104 122
105 &.is-reordering { z-index: 99999; } 123 &.is-reordering {
124 z-index: 99999;
125 }
106} 126}
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss
index 5cd9e4526..ed4c0d11b 100644
--- a/src/styles/toggle.scss
+++ b/src/styles/toggle.scss
@@ -39,7 +39,9 @@ $toggle-button-size: 22px;
39 left: 1px; 39 left: 1px;
40 top: 1px; 40 top: 1px;
41 position: absolute; 41 position: absolute;
42 transition: all 0.5s; 42 @media (prefers-reduced-motion: no-preference) {
43 transition: all 0.5s;
44 }
43 width: $toggle-size - 2; 45 width: $toggle-size - 2;
44 } 46 }
45 47
diff --git a/src/styles/type.scss b/src/styles/type.scss
index 37ec0bcca..234c4d5c4 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -2,9 +2,15 @@
2@import './mixins.scss'; 2@import './mixins.scss';
3 3
4.theme__dark { 4.theme__dark {
5 a { color: $dark-theme-gray-smoke; } 5 a {
6 .label { color: $dark-theme-gray-lightest; } 6 color: $dark-theme-gray-smoke;
7 .footnote { color: $dark-theme-gray-lightest; } 7 }
8 .label {
9 color: $dark-theme-gray-lightest;
10 }
11 .footnote {
12 color: $dark-theme-gray-lightest;
13 }
8} 14}
9 15
10h1 { 16h1 {
@@ -21,36 +27,45 @@ h2 {
21 margin-bottom: 25px; 27 margin-bottom: 25px;
22 margin-top: 5px; 28 margin-top: 5px;
23 29
24 &:first-of-type { margin-top: 0; } 30 &:first-of-type {
31 margin-top: 0;
32 }
25} 33}
26 34
27p { 35p {
28 margin-bottom: 10px; 36 margin-bottom: 10px;
29 line-height: 1.7rem; 37 line-height: 1.7rem;
30 38
31 &:last-of-type { margin-bottom: 0; } 39 &:last-of-type {
40 margin-bottom: 0;
41 }
32} 42}
33 43
34strong { font-weight: bold; } 44strong {
45 font-weight: bold;
46}
35 47
36a, button { 48a,
49button {
37 color: $theme-text-color; 50 color: $theme-text-color;
38 text-decoration: none; 51 text-decoration: none;
39 52
40 &.button { 53 &.button {
41 background: $theme-brand-primary; 54 background: $theme-brand-primary;
42 color: #FFF; 55 color: #fff;
43 border-radius: 3px; 56 border-radius: 3px;
44 display: inline-block; 57 display: inline-block;
45 padding: 10px 20px; 58 padding: 10px 20px;
46 position: relative; 59 position: relative;
47 text-align: center; 60 text-align: center;
48 transition: background .5s, color .5s; 61 @media (prefers-reduced-motion: no-preference) {
62 transition: background 0.5s, color 0.5s;
63 }
49 cursor: pointer; 64 cursor: pointer;
50 65
51 &:hover { 66 &:hover {
52 background: darken($theme-brand-primary, 10%); 67 background: darken($theme-brand-primary, 10%);
53 color: #FFF; 68 color: #fff;
54 } 69 }
55 } 70 }
56 71
@@ -60,14 +75,19 @@ a, button {
60 } 75 }
61} 76}
62 77
63.error-message, .error-message:last-of-type { 78.error-message,
79.error-message:last-of-type {
64 color: $theme-brand-danger; 80 color: $theme-brand-danger;
65 margin: 10px 0; 81 margin: 10px 0;
66} 82}
67 83
68.center { text-align: center; } 84.center {
85 text-align: center;
86}
69 87
70.label { @include formLabel(); } 88.label {
89 @include formLabel();
90}
71 91
72.footnote { 92.footnote {
73 color: $theme-gray-light; 93 color: $theme-gray-light;
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
index c1f85391e..7202fe148 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -1,24 +1,26 @@
1.auth .welcome { 1.auth .welcome {
2 height: auto; 2 height: auto;
3 3
4 &__content { 4 &__content {
5 align-items: center; 5 align-items: center;
6 color: #FFF; 6 color: #fff;
7 display: flex; 7 display: flex;
8 justify-content: center; 8 justify-content: center;
9 height: auto; 9 height: auto;
10 } 10 }
11 11
12 &__logo { width: 100px; } 12 &__logo {
13 width: 100px;
14 }
13 15
14 &__text { 16 &__text {
15 border-left: 1px solid #FFF; 17 border-left: 1px solid #fff;
16 margin-left: 40px; 18 margin-left: 40px;
17 padding-left: 40px; 19 padding-left: 40px;
18 20
19 h1 { 21 h1 {
20 font-size: 60px; 22 font-size: 60px;
21 letter-spacing: -.4rem; 23 letter-spacing: -0.4rem;
22 margin-bottom: 5px; 24 margin-bottom: 5px;
23 } 25 }
24 26
@@ -42,33 +44,35 @@
42 text-align: center; 44 text-align: center;
43 height: auto; 45 height: auto;
44 46
45 .button:first-of-type { margin-right: 25px; } 47 .button:first-of-type {
48 margin-right: 25px;
49 }
46 } 50 }
47 51
48 .button { 52 .button {
49 border-color: #FFF; 53 border-color: #fff;
50 color: #FFF; 54 color: #fff;
51 cursor: pointer; 55 cursor: pointer;
52 56
53 &:hover { 57 &:hover {
54 background: #FFF; 58 background: #fff;
55 color: $theme-brand-primary; 59 color: $theme-brand-primary;
56 } 60 }
57 61
58 &__inverted { 62 &__inverted {
59 background: #FFF; 63 background: #fff;
60 color: $theme-brand-primary; 64 color: $theme-brand-primary;
61 } 65 }
62 66
63 &__inverted:hover { 67 &__inverted:hover {
64 background: none; 68 background: none;
65 color: #FFF; 69 color: #fff;
66 } 70 }
67 } 71 }
68 72
69 &__featured-services { 73 &__featured-services {
70 align-items: center; 74 align-items: center;
71 background: #FFF; 75 background: #fff;
72 border-radius: 6px; 76 border-radius: 6px;
73 display: flex; 77 display: flex;
74 flex-wrap: wrap; 78 flex-wrap: wrap;
@@ -82,9 +86,13 @@
82 &__featured-service { 86 &__featured-service {
83 margin: 0 10px 15px; 87 margin: 0 10px 15px;
84 height: 35px; 88 height: 35px;
85 transition: .5s filter, .5s opacity; 89 @media (prefers-reduced-motion: no-preference) {
90 transition: 0.5s filter, 0.5s opacity;
91 }
86 width: 35px; 92 width: 35px;
87 93
88 img { width: 35px; } 94 img {
95 width: 35px;
96 }
89 } 97 }
90} 98}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-07 20:11:17 +0000