diff options
author | 2021-08-10 19:04:54 +0200 | |
---|---|---|
committer | 2021-08-10 22:34:54 +0530 | |
commit | 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch) | |
tree | 9f21b062f0c188f2c3ddfbb6594670982610aadf /src/styles/type.scss | |
parent | refactor: Move platform-specific logic for shortcut keys into common location. (diff) | |
download | ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.gz ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.zst ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.zip |
feat: follow OS reduced motion setting (#1757)
- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference
Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/styles/type.scss')
-rw-r--r-- | src/styles/type.scss | 46 |
1 files changed, 33 insertions, 13 deletions
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; |