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         position: absolute;
   8         top: 0;
   9         vertical-align: middle;
  10         visibility: hidden;
  11         z-index: 500;
  12
  13         &.active {
  14                 animation: wcfPopover .3s;
  15                 animation-fill-mode: forwards;
  16         }
  17
  18         &.forceHide {
  19                 animation: 0;
  20                 visibility: hidden;
  21         }
  22
  23         > .elementPointer {
  24                 display: none;
  25         }
  26 }
  27
  28 img.reactionType {
  29         width: 16px;
  30         height: 16px;
  31 }
  32
  33 .reactionPopoverContent {
  34         background-color: $wcfContentBackground;
  35         border-radius: 3px;
  36         color: $wcfContentText;
  37         padding: 15px;
  38
  39         a {
  40                 color: $wcfContentLink;
  41
  42                 &:hover {
  43                         color: $wcfContentLinkActive;
  44                 }
  45         }
  46
  47         > ul > li.reactionTypeButton > img {
  48                 width: 24px;
  49                 height: 24px;
  50         }
  51
  52         > ul > li.reactionTypeButton > img:hover {
  53                 transform: scale(1.2);
  54         }
  55
  56         @include screen-md-down {
  57                 > ul > li.reactionTypeButton {
  58                         margin: 0px;
  59                         display: block;
  60                         padding: 5px 10px;
  61                 }
  62
  63                 > ul > li.reactionTypeButton > .reactionTypeButtonTitle {
  64                         vertical-align: middle;
  65                         padding-left: 5px;
  66                 }
  67         }
  68
  69         @include screen-lg {
  70                 > ul > li.reactionTypeButton > .reactionTypeButtonTitle {
  71                         display: none;
  72                 }
  73
  74                 > ul > li.reactionTypeButton {
  75                         display: inline;
  76                         cursor: pointer;
  77                         margin-left: 10px;
  78                 }
  79
  80                 > ul > li.reactionTypeButton:first-child {
  81                         margin-left: 0px;
  82                 }
  83         }
  84 }
  85
  86 li.reactCountButton {
  87         display: inline;
  88         padding: 10px;
  89         cursor: pointer;
  90         background-color: $wcfSidebarBackground;
  91         color: $wcfContentDimmedText;
  92 }
  93
  94 li.reactCountButton:hover {
  95         background-color: darken($wcfSidebarBackground, 5);
  96         color: $wcfContentText;
  97 }
  98
  99 .reactionSummaryListTiny {
 100         display: inline;
 101
 102         li.reactCountButton > img {
 103                 width: 16px;
 104                 height: 16px;
 105         }
 106
 107         span.reactionCount {
 108                 @include wcfFontSmall;
 109         }
 110
 111         li.reactCountButton {
 112                 background-color: transparent;
 113                 padding: 0px;
 114         }
 115 }
 116
 117 .reactionStatusContainer {
 118         margin-top: 10px;
 119
 120         .positiveReactionCount {
 121                 color: $wcfStatusSuccessText;
 122
 123                 .fa {
 124                         color: $wcfStatusSuccessText;
 125                 }
 126         }
 127
 128         .negativeReactionCount {
 129                 color: $wcfStatusErrorText;
 130
 131                 .fa {
 132                         color: $wcfStatusErrorText;
 133                 }
 134         }
 135
 136         .neutralReactionCount {
 137                 color: $wcfStatusSuccessText;
 138
 139                 .fa {
 140                         color: $wcfStatusSuccessText;
 141                 }
 142         }
 143 }
 144
 145 .box.reactionReputationBox {
 146         &.positiveReactionReputationBox {
 147                 background-color: $wcfStatusSuccessBackground;
 148                 color: $wcfStatusSuccessText;
 149
 150                 .fa {
 151                         color: $wcfStatusSuccessText;
 152                 }
 153
 154                 .boxTitle > a {
 155                         color: $wcfStatusSuccessText;
 156                 }
 157         }
 158
 159         &.negativeReactionReputationBox {
 160                 background-color: $wcfStatusErrorBackground;
 161                 color: $wcfStatusErrorText;
 162
 163                 .fa {
 164                         color: $wcfStatusErrorText;
 165                 }
 166
 167                 .boxTitle > a {
 168                         color: $wcfStatusErrorText;
 169                 }
 170         }
 171
 172         .boxContent {
 173                 @include wcfFontHeadline;
 174
 175                 text-align: center;
 176         }
 177 }
 178
 179 @include screen-sm-down {
 180         .reactionStatusContainer {
 181                 display: none;
 182         }
 183 }