aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/badge.scss6
-rw-r--r--src/styles/button.scss91
-rw-r--r--src/styles/content-tabs.scss29
-rw-r--r--src/styles/fonts.scss19
-rw-r--r--src/styles/image-upload.scss32
-rw-r--r--src/styles/layout.scss70
-rw-r--r--src/styles/main.scss11
-rw-r--r--src/styles/radio.scss19
-rw-r--r--src/styles/recipes.scss41
-rw-r--r--src/styles/settings.scss235
-rw-r--r--src/styles/slider.scss29
-rw-r--r--src/styles/subscription-popup.scss18
-rw-r--r--src/styles/subscription.scss49
-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
17 files changed, 481 insertions, 312 deletions
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index 69879de31..1f58b8089 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -5,8 +5,7 @@
5 border-radius: $theme-border-radius-small; 5 border-radius: $theme-border-radius-small;
6 color: $dark-theme-gray-lightest; 6 color: $dark-theme-gray-lightest;
7 7
8 &.badge--primary, 8 &.badge--primary {
9 &.badge--premium {
10 background: $theme-brand-primary; 9 background: $theme-brand-primary;
11 color: $dark-theme-gray-lightest; 10 color: $dark-theme-gray-lightest;
12 } 11 }
@@ -21,8 +20,7 @@
21 padding: 5px 10px; 20 padding: 5px 10px;
22 letter-spacing: 0; 21 letter-spacing: 0;
23 22
24 &.badge--primary, 23 &.badge--primary {
25 &.badge--premium {
26 background: $theme-brand-primary; 24 background: $theme-brand-primary;
27 color: #FFF; 25 color: #FFF;
28 } 26 }
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 bd96ea867..1b2c99945 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -1,44 +1,49 @@
1@import './config.scss'; 1@import './config.scss';
2// @import './node_modules/mdi/scss/materialdesignicons.scss';
3 2
4@font-face { 3@font-face {
5 font-family: 'Open Sans'; 4 font-family: 'Open Sans';
6 src: url('../assets/fonts/OpenSans-Light.ttf'); 5 src: url('../assets/fonts/OpenSans-Light.ttf');
7 font-weight: 300; 6 font-weight: 300;
8 font-style: normal; 7 font-style: normal;
8 display: swap;
9} 9}
10 10
11@font-face { 11@font-face {
12 font-family: 'Open Sans'; 12 font-family: 'Open Sans';
13 src: url('../assets/fonts/OpenSans-Regular.ttf'); 13 src: url('../assets/fonts/OpenSans-Regular.ttf');
14 font-weight: normal; 14 font-weight: normal;
15 font-style: normal; 15 font-style: normal;
16 display: swap;
16} 17}
17 18
18@font-face { 19@font-face {
19 font-family: 'Open Sans'; 20 font-family: 'Open Sans';
20 src: url('../assets/fonts/OpenSans-Bold.ttf'); 21 src: url('../assets/fonts/OpenSans-Bold.ttf');
21 font-weight: bold; 22 font-weight: bold;
22 font-style: normal; 23 font-style: normal;
24 display: swap;
23} 25}
24 26
25@font-face { 27@font-face {
26 font-family: 'Open Sans'; 28 font-family: 'Open Sans';
27 src: url('../assets/fonts/OpenSans-BoldItalic.ttf'); 29 src: url('../assets/fonts/OpenSans-BoldItalic.ttf');
28 font-weight: bold; 30 font-weight: bold;
29 font-style: italic; 31 font-style: italic;
32 display: swap;
30} 33}
31 34
32@font-face { 35@font-face {
33 font-family: 'Open Sans'; 36 font-family: 'Open Sans';
34 src: url('../assets/fonts/OpenSans-ExtraBold.ttf'); 37 src: url('../assets/fonts/OpenSans-ExtraBold.ttf');
35 font-weight: 800; 38 font-weight: 800;
36 font-style: normal; 39 font-style: normal;
40 display: swap;
37} 41}
38 42
39@font-face { 43@font-face {
40 font-family: 'Open Sans'; 44 font-family: 'Open Sans';
41 src: url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf'); 45 src: url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf');
42 font-weight: 800; 46 font-weight: 800;
43 font-style: italic; 47 font-style: italic;
48 display: swap;
44} 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 c57dc6fcd..b0815e086 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,9 +1,9 @@
1$mdi-font-path: '../node_modules/mdi/fonts'; 1$mdi-font-path: '../node_modules/@mdi/font/fonts';
2@if $env == development { 2@if $env == development {
3 $mdi-font-path: '../../node_modules/mdi/fonts'; 3 $mdi-font-path: '../../node_modules/@mdi/font/fonts';
4} 4}
5 5
6@import './node_modules/mdi/scss/materialdesignicons.scss'; 6@import './node_modules/@mdi/font/scss/materialdesignicons.scss';
7@import './node_modules/electron-react-titlebar/assets/style'; 7@import './node_modules/electron-react-titlebar/assets/style';
8 8
9// modules 9// modules
@@ -22,11 +22,8 @@ $mdi-font-path: '../node_modules/mdi/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 './subscription.scss';
29@import './subscription-popup.scss';
30@import './content-tabs.scss'; 27@import './content-tabs.scss';
31@import './invite.scss'; 28@import './invite.scss';
32@import './title-bar.scss'; 29@import './title-bar.scss';
@@ -40,4 +37,4 @@ $mdi-font-path: '../node_modules/mdi/fonts';
40@import './searchInput.scss'; 37@import './searchInput.scss';
41@import './select.scss'; 38@import './select.scss';
42@import './image-upload.scss'; 39@import './image-upload.scss';
43@import './slider.scss'; \ No newline at end of file 40@import './slider.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..628d28f05 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,37 @@
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 }
71
72 .recipe-teaser__alias_label {
73 display: block;
74 font-size: x-small;
75 }
59 76
60 h2 { z-index: 10; } 77 h2 {
78 z-index: 10;
79 }
61 80
62 &__dev-badge { 81 &__dev-badge {
63 background: $theme-brand-warning; 82 background: $theme-brand-warning;
64 box-shadow: 0 0 4px rgba(black, .2); 83 box-shadow: 0 0 4px rgba(black, 0.2);
65 color: #FFF; 84 color: #fff;
66 font-size: 10px; 85 font-size: 10px;
67 position: absolute; 86 position: absolute;
68 right: -13px; 87 right: -13px;
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index a25759f48..501f97b98 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,69 +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 .premium-info { 80 .legal {
61 background: $dark-theme-gray-darker; 81 color: $theme-gray-light;
62 border-width: 2px;
63 border-style: solid;
64 border-color: $theme-brand-primary;
65 } 82 }
66 .legal { color: $theme-gray-light; }
67 } 83 }
68 84
69 .settings-navigation { 85 .settings-navigation {
@@ -75,7 +91,7 @@
75 border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); 91 border-bottom: 1px solid darken($dark-theme-gray-darker, 3%);
76 92
77 &:last-child { 93 &:last-child {
78 border: 0, 94 border: 0;
79 } 95 }
80 96
81 .badge { 97 .badge {
@@ -93,7 +109,7 @@
93 } 109 }
94 110
95 &.is-disabled { 111 &.is-disabled {
96 filter: grayscale(100%) opacity(.2); 112 filter: grayscale(100%) opacity(0.2);
97 } 113 }
98 114
99 &.is-active { 115 &.is-active {
@@ -107,13 +123,15 @@
107 } 123 }
108 } 124 }
109 125
110 .settings-navigation__action-badge { background: $theme-brand-danger; } 126 .settings-navigation__action-badge {
127 background: $theme-brand-danger;
128 }
111 } 129 }
112} 130}
113 131
114.settings-wrapper { 132.settings-wrapper {
115 align-items: center; 133 align-items: center;
116 background: rgba(black, .5); 134 background: rgba(black, 0.5);
117 display: flex; 135 display: flex;
118 height: 100%; 136 height: 100%;
119 left: 0; 137 left: 0;
@@ -135,7 +153,7 @@
135 153
136.settings { 154.settings {
137 border-radius: $theme-border-radius; 155 border-radius: $theme-border-radius;
138 box-shadow: 0 20px 50px rgba($dark-theme-black, .5); 156 box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5);
139 display: flex; 157 display: flex;
140 height: 100%; 158 height: 100%;
141 max-height: 720px; 159 max-height: 720px;
@@ -153,7 +171,7 @@
153 height: auto; 171 height: auto;
154 border-radius: 0 $theme-border-radius $theme-border-radius 0; 172 border-radius: 0 $theme-border-radius $theme-border-radius 0;
155 overflow: hidden; 173 overflow: hidden;
156 background: #FFF; 174 background: #fff;
157 } 175 }
158 176
159 .settings__header { 177 .settings__header {
@@ -163,7 +181,7 @@
163 height: 50px; 181 height: 50px;
164 padding: 0 40px; 182 padding: 0 40px;
165 width: calc(100% - 60px); 183 width: calc(100% - 60px);
166 color: #FFF; 184 color: #fff;
167 185
168 h1 { 186 h1 {
169 @extend %headline; 187 @extend %headline;
@@ -183,11 +201,13 @@
183 transform: skew(15deg) rotate(2deg); 201 transform: skew(15deg) rotate(2deg);
184 } 202 }
185 203
186 .mdi { color: $theme-gray-light; } 204 .mdi {
205 color: $theme-gray-light;
206 }
187 } 207 }
188 208
189 .settings_titles { 209 .settings_titles {
190 display:inline-block; 210 display: inline-block;
191 } 211 }
192 212
193 .settings__body { 213 .settings__body {
@@ -196,9 +216,13 @@
196 overflow-y: scroll; 216 overflow-y: scroll;
197 padding: 25px 15px 15px 25px; 217 padding: 25px 15px 15px 25px;
198 218
199 .badge { margin-right: 10px; } 219 .badge {
220 margin-right: 10px;
221 }
200 222
201 &::-webkit-scrollbar { width: 8px; } 223 &::-webkit-scrollbar {
224 width: 8px;
225 }
202 226
203 /* Track */ 227 /* Track */
204 &::-webkit-scrollbar-track { 228 &::-webkit-scrollbar-track {
@@ -214,9 +238,16 @@
214 -webkit-border-radius: 10px; 238 -webkit-border-radius: 10px;
215 } 239 }
216 240
217 &::-webkit-scrollbar-thumb:window-inactive { background: none; } 241 &::-webkit-scrollbar-thumb:window-inactive {
218 .service-flex-grid { display: flex; } 242 background: none;
219 .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 }
220 251
221 .service-icon { 252 .service-icon {
222 float: right; 253 float: right;
@@ -238,20 +269,28 @@
238 .settings__close { 269 .settings__close {
239 background: $theme-brand-primary; 270 background: $theme-brand-primary;
240 // border-left: 1px solid darken($theme-brand-primary, 8%); 271 // border-left: 1px solid darken($theme-brand-primary, 8%);
241 color: #FFF; 272 color: #fff;
242 font-size: 20px; 273 font-size: 20px;
243 height: 50px; 274 height: 50px;
244 padding: 0 20px; 275 padding: 0 20px;
245 position: absolute; 276 position: absolute;
246 right: 0; 277 right: 0;
247 transition: background $theme-transition-time; 278 @media (prefers-reduced-motion: no-preference) {
279 transition: background $theme-transition-time;
280 }
248 cursor: pointer; 281 cursor: pointer;
249 282
250 &::before { cursor: pointer; } 283 &::before {
251 &:hover { background: darken($theme-brand-primary, 5%); } 284 cursor: pointer;
285 }
286 &:hover {
287 background: darken($theme-brand-primary, 5%);
288 }
252 } 289 }
253 290
254 .search-input { margin-bottom: 30px; } 291 .search-input {
292 margin-bottom: 30px;
293 }
255 294
256 &__options { 295 &__options {
257 flex: 1; 296 flex: 1;
@@ -264,10 +303,12 @@
264 h3 { 303 h3 {
265 color: $theme-gray-light; 304 color: $theme-gray-light;
266 font-weight: bold; 305 font-weight: bold;
267 letter-spacing: -.1px; 306 letter-spacing: -0.1px;
268 margin: 25px 0 15px; 307 margin: 25px 0 15px;
269 308
270 &:first-of-type { margin-top: 0; } 309 &:first-of-type {
310 margin-top: 0;
311 }
271 312
272 .badge { 313 .badge {
273 font-weight: normal; 314 font-weight: normal;
@@ -308,14 +349,20 @@
308 padding: 10px 20px; 349 padding: 10px 20px;
309 350
310 .franz-form__button { 351 .franz-form__button {
311 &[type='submit'] { margin-left: auto; } 352 &[type='submit'] {
312 &.franz-form__button--secondary { background: $theme-gray-light; } 353 margin-left: auto;
354 }
355 &.franz-form__button--secondary {
356 background: $theme-gray-light;
357 }
313 } 358 }
314 } 359 }
315 360
316 .settings__delete-button { right: 0; } 361 .settings__delete-button {
362 right: 0;
363 }
317 .settings__open-recipe-file-button { 364 .settings__open-recipe-file-button {
318 cursor:pointer; 365 cursor: pointer;
319 margin-right: 10px; 366 margin-right: 10px;
320 } 367 }
321 .settings__open-recipe-file-container { 368 .settings__open-recipe-file-container {
@@ -336,7 +383,9 @@
336 margin-bottom: 1em; 383 margin-bottom: 1em;
337 } 384 }
338 385
339 a.button { margin-top: 40px; } 386 a.button {
387 margin-top: 40px;
388 }
340 } 389 }
341 390
342 .account { 391 .account {
@@ -349,8 +398,12 @@
349 margin-bottom: 40px; 398 margin-bottom: 40px;
350 padding: 20px; 399 padding: 20px;
351 400
352 &.account__box--flex { display: flex; } 401 &.account__box--flex {
353 &.account__box--last { margin-bottom: 0; } 402 display: flex;
403 }
404 &.account__box--last {
405 margin-bottom: 0;
406 }
354 407
355 .auth__button { 408 .auth__button {
356 margin-top: 10px; 409 margin-top: 10px;
@@ -366,38 +419,44 @@
366 .account__info { 419 .account__info {
367 flex: 1; 420 flex: 1;
368 421
369 h2 { margin-bottom: 5px; } 422 h2 {
370 .badge { margin-top: 5px; } 423 margin-bottom: 5px;
371 .username { margin-right: 10 } 424 }
425 .badge {
426 margin-top: 5px;
427 }
428 .username {
429 margin-right: 10;
430 }
372 } 431 }
373 432
374 .account__subscription { 433 .account__subscription {
375 align-items: center; 434 align-items: center;
376 display: flex; 435 display: flex;
377 436
378 .badge { margin-left: 10px; } 437 .badge {
379 } 438 margin-left: 10px;
380 439 }
381 .badge--premium {
382 margin-left: 1px;
383 position: relative;
384 top: -3px;
385 padding-top: 4px;
386 color: #FFF;
387 border-radius: 3px;
388 } 440 }
389 441
390
391 .manage-user-links { 442 .manage-user-links {
392 margin-top: 20px; 443 margin-top: 20px;
393 display: flex; 444 display: flex;
394 justify-content: space-between; 445 justify-content: space-between;
395 } 446 }
396 447
397 .account__subscription-button { margin-left: auto; } 448 .account__subscription-button {
398 .franz-form__button { white-space: nowrap; } 449 margin-left: auto;
399 div { height: auto; } 450 }
400 [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 }
401 460
402 .invoices { 461 .invoices {
403 width: 100%; 462 width: 100%;
@@ -415,7 +474,9 @@
415 .invoices__action { 474 .invoices__action {
416 text-align: right; 475 text-align: right;
417 476
418 button { color: $theme-brand-primary; } 477 button {
478 color: $theme-brand-primary;
479 }
419 } 480 }
420 } 481 }
421 } 482 }
@@ -425,16 +486,12 @@
425 font-size: 40px; 486 font-size: 40px;
426 margin-bottom: 20px; 487 margin-bottom: 20px;
427 488
428 img { width: 40px; } 489 img {
429 } 490 width: 40px;
430 491 }
431 .premium-info {
432 background: lighten($theme-brand-primary, 40%);
433 border-radius: $theme-border-radius;
434 padding: 20px;
435 } 492 }
436 493
437 .content-tabs .premium-info { 494 .content-tabs {
438 background: none; 495 background: none;
439 padding: 0; 496 padding: 0;
440 } 497 }
@@ -454,8 +511,8 @@
454 width: 240px; 511 width: 240px;
455 height: 100%; 512 height: 100%;
456 align-self: center; 513 align-self: center;
457 border-top-left-radius: $theme-border-radius;; 514 border-top-left-radius: $theme-border-radius;
458 border-bottom-left-radius: $theme-border-radius;; 515 border-bottom-left-radius: $theme-border-radius;
459 overflow: hidden; 516 overflow: hidden;
460 517
461 .settings-navigation__link { 518 .settings-navigation__link {
@@ -467,12 +524,15 @@
467 height: 51px; 524 height: 51px;
468 padding: 0 20px; 525 padding: 0 20px;
469 text-decoration: none; 526 text-decoration: none;
470 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 }
471 border-bottom: 1px solid darken($theme-gray-lightest, 3%); 531 border-bottom: 1px solid darken($theme-gray-lightest, 3%);
472 532
473 .badge { 533 .badge {
474 background: $theme-gray-light; 534 background: $theme-gray-light;
475 color: #FFF; 535 color: #fff;
476 } 536 }
477 537
478 &:hover { 538 &:hover {
@@ -480,26 +540,31 @@
480 540
481 .badge { 541 .badge {
482 background: $theme-gray-light; 542 background: $theme-gray-light;
483 color: #FFF; 543 color: #fff;
484 } 544 }
485 } 545 }
486 546
487 &.is-active { 547 &.is-active {
488 background: $theme-brand-primary; 548 background: $theme-brand-primary;
489 color: #FFF; 549 color: #fff;
490 550
491 .badge { 551 .badge {
492 background: #FFF; 552 background: #fff;
493 color: $theme-brand-primary; 553 color: $theme-brand-primary;
494 } 554 }
495 } 555 }
496 } 556 }
497 557
498 .settings-navigation__expander { flex: 1; } 558 .settings-navigation__expander {
559 flex: 1;
560 }
499 561
500 .badge { 562 .badge {
501 display: initial; 563 display: initial;
502 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 }
503 } 568 }
504 569
505 .settings-navigation__action-badge { 570 .settings-navigation__action-badge {
@@ -513,5 +578,7 @@
513} 578}
514 579
515.settings__support-badges { 580.settings__support-badges {
516 a { margin-right: 10px } 581 a {
582 margin-right: 10px;
583 }
517} 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/subscription-popup.scss b/src/styles/subscription-popup.scss
deleted file mode 100644
index 14e05e65d..000000000
--- a/src/styles/subscription-popup.scss
+++ /dev/null
@@ -1,18 +0,0 @@
1.subscription-popup {
2 height: 100%;
3
4 &__content { height: calc(100% - 60px); }
5 &__webview {
6 height: 100%;
7 background: #FFF;
8 }
9
10 &__toolbar {
11 background: $theme-gray-lightest;
12 border-top: 1px solid $theme-gray-lighter;
13 display: flex;
14 height: 60px;
15 justify-content: space-between;
16 padding: 10px;
17 }
18}
diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss
deleted file mode 100644
index 70fb41cde..000000000
--- a/src/styles/subscription.scss
+++ /dev/null
@@ -1,49 +0,0 @@
1.subscription {
2 .subscription__premium-features {
3 margin: 10px 0;
4
5 li {
6 align-items: center;
7 display: flex;
8 height: 30px;
9
10 &:before {
11 content: "👍";
12 margin-right: 10px;
13 }
14
15 .badge { margin-left: 10px; }
16 }
17 }
18
19 .subscription__premium-info { margin: 15px 0 25px; }
20}
21
22.paymentTiers .franz-form__radio-wrapper {
23 flex-flow: wrap;
24
25 .franz-form__radio {
26 flex: initial;
27 margin-right: 2%;
28 width: 32%;
29
30 &:nth-child(3) { margin-right: 0; }
31
32 &:nth-child(4) {
33 margin-right: 0;
34 margin-top: 2%;
35 width: 100%;
36 }
37 }
38}
39
40.settings .paymentTiers .franz-form__radio-wrapper .franz-form__radio {
41 width: 49%;
42
43 &:nth-child(2) { margin-right: 0; }
44
45 &:nth-child(3) {
46 margin-top: 2%;
47 width: 100%;
48 }
49}
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-70-g09d2 (git 2.46.0) at 2024-09-11 09:37:01 +0000