2 animation: wcfPopoverOut 0.3s;
3 animation-fill-mode: forwards;
4 background-color: $wcfContentBackground;
6 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
10 vertical-align: middle;
15 animation: wcfPopover 0.3s;
16 animation-fill-mode: forwards;
29 &.inverseOrder .reactionTypeButtonList {
30 flex-direction: column;
40 .reactionSummaryList {
43 margin: -5px -5px 0 0;
45 &.reactionSummaryListTiny .reactionType {
52 color: $wcfContentText;
58 @include wcfFontSmall;
60 vertical-align: middle;
63 content: "\202f×\202f";
68 color: $wcfContentDimmedText;
74 .reactionPopoverContent {
75 background-color: $wcfContentBackground;
77 color: $wcfContentText;
80 color: $wcfContentLink;
83 color: $wcfContentLinkActive;
87 .reactionTypeButton > img {
92 transform: scale(1.2);
106 pointer-events: none;
109 transition: opacity 0.12s linear;
113 background-image: linear-gradient(to bottom, transparent, $wcfContentBackground);
116 &.overflowBottom::after {
121 background-image: linear-gradient(to top, transparent, $wcfContentBackground);
124 &.overflowTop::before {
129 @include screen-md-down {
132 .reactionTypeButton {
138 background-color: $wcfContentBorderInner;
141 > .reactionTypeButtonTitle {
142 vertical-align: middle;
151 .reactionTypeButton {
152 display: inline-block;
154 padding-bottom: 10px;
167 transform: scale(1.4);
170 transform: scale(1.2);
175 > .reactionTypeButtonTitle {
183 html.touch .reactionPopoverContent .reactionTypeButton {
187 > .reactionTypeButtonTitle {
194 @include screen-sm-down {
195 .reactionStatusContainer {
201 .reactionTypeButtonList {
203 flex-direction: column-reverse;
207 #likeList .likeTypeSelection {
210 justify-content: flex-end;
217 justify-content: stretch;
230 vertical-align: bottom;
234 .topReactionTiny > .reactionType {