Commit | Line | Data |
---|---|---|
bf04738c | 1 | .reactionPopover { |
8a52619a | 2 | animation: wcfPopoverOut 0.3s; |
bf04738c | 3 | animation-fill-mode: forwards; |
d58d832f AE |
4 | background-color: var(--wcfDropdownBackground); |
5 | border-radius: var(--wcfBorderRadius); | |
6 | box-shadow: var(--wcfBoxShadow); | |
7 | color: var(--wcfDropdownText); | |
78462555 | 8 | overflow: hidden; |
bf04738c JR |
9 | position: absolute; |
10 | top: 0; | |
11 | vertical-align: middle; | |
12 | visibility: hidden; | |
1936e876 | 13 | z-index: 60; |
8a52619a | 14 | |
bf04738c | 15 | &.active { |
8a52619a | 16 | animation: wcfPopover 0.3s; |
bf04738c JR |
17 | animation-fill-mode: forwards; |
18 | } | |
8a52619a | 19 | |
bf04738c JR |
20 | &.forceHide { |
21 | animation: 0; | |
22 | visibility: hidden; | |
23 | } | |
8a52619a | 24 | |
78462555 AE |
25 | @include screen-xs { |
26 | &.inverseOrder .reactionTypeButtonList { | |
14ef36d8 | 27 | flex-direction: column; |
78462555 AE |
28 | } |
29 | } | |
bf04738c JR |
30 | } |
31 | ||
d58d832f AE |
32 | html[data-color-scheme="dark"] .reactionPopover { |
33 | border: 1px solid var(--wcfDropdownBorderInner); | |
34 | } | |
35 | ||
4cb8dcd3 AE |
36 | .reactionType { |
37 | width: 20px; | |
38 | height: 20px; | |
f7ab933b JR |
39 | } |
40 | ||
d58d832f AE |
41 | .reactionPopoverContent .reactionType { |
42 | width: 24px; | |
43 | height: 24px; | |
44 | } | |
45 | ||
8a52619a | 46 | .reactionCount { |
63e477f7 | 47 | @include wcfFontSmall; |
8a52619a | 48 | |
10c39b70 | 49 | vertical-align: middle; |
8a52619a | 50 | |
63e477f7 | 51 | &::before { |
8a52619a | 52 | content: "\202f×\202f"; |
63e477f7 AE |
53 | } |
54 | } | |
55 | ||
d58d832f AE |
56 | .reactionTypeButton.active { |
57 | background-color: var(--wcfDropdownBackgroundActive); | |
58 | color: var(--wcfDropdownLinkActive); | |
59 | } | |
8a52619a | 60 | |
d58d832f | 61 | .reactionPopoverContent { |
78462555 AE |
62 | @include screen-xs { |
63 | max-height: 200px; | |
64 | overflow: auto; | |
8a52619a | 65 | |
78462555 AE |
66 | &::after, |
67 | &::before { | |
68 | content: ""; | |
69 | height: 40px; | |
70 | left: 0; | |
71 | opacity: 0; | |
72 | pointer-events: none; | |
73 | position: absolute; | |
74 | right: 0; | |
8a52619a | 75 | transition: opacity 0.12s linear; |
78462555 | 76 | } |
8a52619a | 77 | |
78462555 | 78 | &::after { |
e02ddc44 MS |
79 | background-image: linear-gradient( |
80 | to bottom, | |
4dfb95ef | 81 | rgba(var(--wcfContentBackground-rgb) / 0), |
1a75e228 | 82 | var(--wcfContentBackground) |
e02ddc44 | 83 | ); |
78462555 AE |
84 | bottom: 0; |
85 | } | |
86 | &.overflowBottom::after { | |
87 | opacity: 1; | |
88 | } | |
8a52619a | 89 | |
78462555 | 90 | &::before { |
4dfb95ef AE |
91 | background-image: linear-gradient( |
92 | to top, | |
93 | rgba(var(--wcfContentBackground-rgb) / 0), | |
94 | var(--wcfContentBackground) | |
95 | ); | |
78462555 AE |
96 | top: 0; |
97 | } | |
98 | &.overflowTop::before { | |
99 | opacity: 1; | |
100 | } | |
101 | } | |
8a52619a | 102 | |
71bc3307 | 103 | @include screen-md-down { |
4cb8dcd3 | 104 | padding: 5px 0; |
8a52619a | 105 | |
8f95bc9d | 106 | .reactionTypeButton { |
4cb8dcd3 | 107 | margin: 0; |
71bc3307 | 108 | display: block; |
1167800d | 109 | padding: 5px 25px; |
8a52619a | 110 | |
8f95bc9d AE |
111 | > .reactionTypeButtonTitle { |
112 | vertical-align: middle; | |
113 | padding-left: 5px; | |
114 | } | |
1167800d | 115 | } |
71bc3307 | 116 | } |
8a52619a | 117 | |
71bc3307 | 118 | @include screen-lg { |
d58d832f AE |
119 | padding: 5px; |
120 | ||
121 | .reactionTypeButtonList { | |
122 | display: flex; | |
123 | column-gap: 5px; | |
124 | } | |
8a52619a | 125 | |
8f95bc9d | 126 | .reactionTypeButton { |
d58d832f | 127 | border-radius: var(--wcfBorderRadius); |
71bc3307 | 128 | cursor: pointer; |
d58d832f | 129 | padding: 5px; |
8a52619a | 130 | |
d58d832f AE |
131 | &:hover { |
132 | background-color: var(--wcfDropdownBackgroundActive); | |
133 | color: var(--wcfDropdownLinkActive); | |
8f95bc9d | 134 | } |
d58d832f | 135 | } |
8a52619a | 136 | |
d58d832f AE |
137 | .reactionTypeButtonTitle { |
138 | display: none; | |
71bc3307 JR |
139 | } |
140 | } | |
bf04738c JR |
141 | } |
142 | ||
5552cb5d AE |
143 | @include screen-lg { |
144 | html.touch .reactionPopoverContent .reactionTypeButton { | |
145 | display: block; | |
146 | margin-left: 0; | |
8a52619a | 147 | |
5552cb5d AE |
148 | > .reactionTypeButtonTitle { |
149 | display: inline; | |
150 | margin-left: 10px; | |
151 | } | |
152 | } | |
153 | } | |
154 | ||
340d92fc JR |
155 | @include screen-sm-down { |
156 | .reactionStatusContainer { | |
157 | display: none; | |
158 | } | |
8149511f JR |
159 | } |
160 | ||
c56a9f15 AE |
161 | @include screen-xs { |
162 | .reactionTypeButtonList { | |
163 | display: flex; | |
14ef36d8 | 164 | flex-direction: column-reverse; |
c56a9f15 AE |
165 | } |
166 | } | |
167 | ||
110293a3 JR |
168 | #likeList .likeTypeSelection { |
169 | display: flex; | |
3a3806e6 | 170 | flex-wrap: wrap; |
110293a3 | 171 | justify-content: flex-end; |
8a52619a | 172 | |
3a3806e6 MW |
173 | .buttonGroup { |
174 | margin-bottom: 0; | |
8a52619a | 175 | |
3a3806e6 | 176 | li { |
110293a3 | 177 | display: flex; |
3a3806e6 | 178 | justify-content: stretch; |
8a52619a | 179 | |
3a3806e6 MW |
180 | a { |
181 | display: flex; | |
182 | align-items: center; | |
183 | } | |
110293a3 JR |
184 | } |
185 | } | |
4cb8dcd3 | 186 | } |
63e477f7 AE |
187 | |
188 | .topReactionFull, | |
189 | .topReactionShort { | |
190 | > .reactionType { | |
191 | vertical-align: bottom; | |
192 | } | |
193 | } | |
194 | ||
195 | .topReactionTiny > .reactionType { | |
196 | height: 16px; | |
197 | vertical-align: top; | |
198 | width: 16px; | |
199 | } | |
2626b3ab MW |
200 | |
201 | .reactionSummary { | |
202 | display: inline-flex; | |
203 | flex-wrap: wrap; | |
204 | gap: 5px 5px; | |
205 | ||
206 | &:hover .reactionCountButton { | |
1a75e228 | 207 | color: var(--wcfContentText); |
2626b3ab MW |
208 | } |
209 | ||
210 | .reactionCountButton { | |
1a75e228 | 211 | color: var(--wcfContentDimmedText); |
2626b3ab MW |
212 | white-space: nowrap; |
213 | } | |
214 | ||
4dfb95ef AE |
215 | .selected .reactionCount { |
216 | font-weight: 600; | |
217 | } | |
2626b3ab | 218 | } |