wcfsetup/install/files/style/ui/reactions.scss

   1 .reactionPopover {
   2         animation: wcfPopoverOut .3s;
   3         animation-fill-mode: forwards;
   4         background-color: $wcfContentBackground;
   5         border-radius: 2px;
   6         box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   7         overflow: hidden;
   8         position: absolute;
   9         top: 0;
  10         vertical-align: middle;
  11         visibility: hidden;
  12         z-index: 60;
  13
  14         &.active {
  15                 animation: wcfPopover .3s;
  16                 animation-fill-mode: forwards;
  17         }
  18
  19         &.forceHide {
  20                 animation: 0;
  21                 visibility: hidden;
  22         }
  23
  24         > .elementPointer {
  25                 display: none;
  26         }
  27
  28         @include screen-xs {
  29                 &.inverseOrder .reactionTypeButtonList {
  30                         flex-direction: column;
  31                 }
  32         }
  33 }
  34
  35 .reactionType {
  36         width: 20px;
  37         height: 20px;
  38 }
  39
  40 .reactionSummaryList {
  41         display: inline-flex;
  42         flex-wrap: wrap;
  43         margin: -5px -5px 0 0;
  44
  45         &.reactionSummaryListTiny .reactionType {
  46                 width: 16px;
  47                 height: 16px;
  48         }
  49
  50         &:hover {
  51                 .reactCountButton {
  52                         color: $wcfContentText;
  53                 }
  54         }
  55 }
  56
  57 .reactionCount{
  58         @include wcfFontSmall;
  59
  60         vertical-align: middle;
  61
  62         &::before {
  63                 content: '\202f×\202f';
  64         }
  65 }
  66
  67 .reactCountButton {
  68         color: $wcfContentDimmedText;
  69         flex: 0 0 auto;
  70         margin: 5px 5px 0 0;
  71         white-space: nowrap;
  72 }
  73
  74 .reactionPopoverContent {
  75         background-color: $wcfContentBackground;
  76         border-radius: 3px;
  77         color: $wcfContentText;
  78
  79         a {
  80                 color: $wcfContentLink;
  81
  82                 &:hover {
  83                         color: $wcfContentLinkActive;
  84                 }
  85         }
  86
  87         .reactionTypeButton > img {
  88                 width: 24px;
  89                 height: 24px;
  90
  91                 &:hover {
  92                         transform: scale(1.2);
  93                 }
  94         }
  95
  96         @include screen-xs {
  97                 max-height: 200px;
  98                 overflow: auto;
  99
 100                 &::after,
 101                 &::before {
 102                         content: "";
 103                         height: 40px;
 104                         left: 0;
 105                         opacity: 0;
 106                         pointer-events: none;
 107                         position: absolute;
 108                         right: 0;
 109                         transition: opacity .12s linear;
 110                 }
 111
 112                 &::after {
 113                         background-image: linear-gradient(to bottom, transparent, $wcfContentBackground);
 114                         bottom: 0;
 115                 }
 116                 &.overflowBottom::after {
 117                         opacity: 1;
 118                 }
 119
 120                 &::before {
 121                         background-image: linear-gradient(to top, transparent, $wcfContentBackground);
 122                         top: 0;
 123                 }
 124                 &.overflowTop::before {
 125                         opacity: 1;
 126                 }
 127         }
 128
 129         @include screen-md-down {
 130                 padding: 5px 0;
 131
 132                 .reactionTypeButton {
 133                         margin: 0;
 134                         display: block;
 135                         padding: 5px 25px;
 136
 137                         &.active {
 138                                 background-color: $wcfContentBorderInner;
 139                         }
 140
 141                         > .reactionTypeButtonTitle {
 142                                 vertical-align: middle;
 143                                 padding-left: 5px;
 144                         }
 145                 }
 146         }
 147
 148         @include screen-lg {
 149                 padding: 5px 15px;
 150
 151                 .reactionTypeButton {
 152                         display: inline-block;
 153                         padding-top: 10px;
 154                         padding-bottom: 10px;
 155                         cursor: pointer;
 156                         margin-left: 10px;
 157
 158                         &:first-child {
 159                                 margin-left: 0;
 160                         }
 161
 162                         &.active {
 163                                 padding-left: 5px;
 164                                 padding-right: 5px;
 165
 166                                 > img {
 167                                         transform: scale(1.4);
 168
 169                                         &:hover {
 170                                                 transform: scale(1.2);
 171                                         }
 172                                 }
 173
 174                         }
 175
 176                         > .reactionTypeButtonTitle {
 177                                 display: none;
 178                         }
 179                 }
 180         }
 181 }
 182
 183 @include screen-lg {
 184         html.touch .reactionPopoverContent .reactionTypeButton {
 185                 display: block;
 186                 margin-left: 0;
 187
 188                 > .reactionTypeButtonTitle {
 189                         display: inline;
 190                         margin-left: 10px;
 191                 }
 192         }
 193 }
 194
 195 @include screen-sm-down {
 196         .reactionStatusContainer {
 197                 display: none;
 198         }
 199 }
 200
 201 @include screen-xs {
 202         .reactionTypeButtonList {
 203                 display: flex;
 204                 flex-direction: column-reverse;
 205         }
 206 }
 207
 208 #likeList .likeTypeSelection {
 209         display: flex;
 210         flex-wrap: wrap;
 211         justify-content: flex-end;
 212
 213         .buttonGroup {
 214                 margin-bottom: 0;
 215
 216                 li {
 217                         display: flex;
 218                         justify-content: stretch;
 219
 220                         a {
 221                                 display: flex;
 222                                 align-items: center;
 223                         }
 224                 }
 225         }
 226 }
 227
 228 .topReactionFull,
 229 .topReactionShort {
 230         > .reactionType {
 231                 vertical-align: bottom;
 232         }
 233 }
 234
 235 .topReactionTiny > .reactionType {
 236         height: 16px;
 237         vertical-align: top;
 238         width: 16px;
 239 }