diff options
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/button.scss | 91 | ||||
-rw-r--r-- | src/styles/content-tabs.scss | 29 | ||||
-rw-r--r-- | src/styles/fonts.scss | 6 | ||||
-rw-r--r-- | src/styles/image-upload.scss | 32 | ||||
-rw-r--r-- | src/styles/layout.scss | 70 | ||||
-rw-r--r-- | src/styles/main.scss | 1 | ||||
-rw-r--r-- | src/styles/radio.scss | 19 | ||||
-rw-r--r-- | src/styles/recipes.scss | 36 | ||||
-rw-r--r-- | src/styles/settings.scss | 213 | ||||
-rw-r--r-- | src/styles/slider.scss | 29 | ||||
-rw-r--r-- | src/styles/tabs.scss | 58 | ||||
-rw-r--r-- | src/styles/toggle.scss | 4 | ||||
-rw-r--r-- | src/styles/type.scss | 46 | ||||
-rw-r--r-- | src/styles/welcome.scss | 36 |
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 | ||
3 | html { overflow: hidden; } | 3 | html { |
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 | ||
77 | body.win32:not(.isFullScreen) .app .app__content { | 81 | body.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 | ||
210 | a, button { | 237 | a, |
238 | button { | ||
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 | ||
10 | h1 { | 16 | h1 { |
@@ -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 | ||
27 | p { | 35 | p { |
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 | ||
34 | strong { font-weight: bold; } | 44 | strong { |
45 | font-weight: bold; | ||
46 | } | ||
35 | 47 | ||
36 | a, button { | 48 | a, |
49 | button { | ||
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 | } |