diff options
Diffstat (limited to 'src/styles/image-upload.scss')
-rw-r--r-- | src/styles/image-upload.scss | 32 |
1 files changed, 23 insertions, 9 deletions
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 { |