css/hovercard.css

   1 \r
   2 .hovercard {\r
   3   position: absolute;\r
   4   top: 0;\r
   5   left: 0;\r
   6   z-index: 1040;\r
   7   display: none;\r
   8   /*max-width: 276px;*/\r
   9   max-width: 400px;\r
  10   padding: 1px;\r
  11   text-align: left;\r
  12   background-color: #ffffff;\r
  13   background-clip: padding-box;\r
  14   border: 1px solid #cccccc;\r
  15   border: 1px solid rgba(0, 0, 0, 0.2);\r
  16   border-radius: 200px;\r
  17   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\r
  18   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\r
  19   white-space: normal;\r
  20 }\r
  21 .hovercard.top {\r
  22   margin-top: -10px;\r
  23 }\r
  24 .hovercard.right {\r
  25   margin-left: 10px;\r
  26 }\r
  27 .hovercard.bottom {\r
  28   margin-top: 10px;\r
  29 }\r
  30 .hovercard.left {\r
  31   margin-left: -10px;\r
  32 }\r
  33 .hovercard-title {\r
  34   margin: 0;\r
  35   padding: 8px 14px;\r
  36   font-size: 14px;\r
  37   font-weight: normal;\r
  38   line-height: 18px;\r
  39   background-color: #f7f7f7;\r
  40   border-bottom: 1px solid #ebebeb;\r
  41   border-radius: 199px 199px 0 0;\r
  42   display: none;\r
  43 }\r
  44 .hovercard-content {\r
  45   color: #777;\r
  46   padding: 0;\r
  47 }\r
  48 .hovercard > .arrow,\r
  49 .hovercard > .arrow:after {\r
  50   position: absolute;\r
  51   display: block;\r
  52   width: 0;\r
  53   height: 0;\r
  54   border-color: transparent;\r
  55   border-style: solid;\r
  56 }\r
  57 .hovercard > .arrow {\r
  58   border-width: 11px;\r
  59 }\r
  60 .hovercard > .arrow:after {\r
  61   border-width: 10px;\r
  62   content: "";\r
  63 }\r
  64 .hovercard.top > .arrow {\r
  65   left: 50%;\r
  66   margin-left: -11px;\r
  67   border-bottom-width: 0;\r
  68   border-top-color: #999999;\r
  69   border-top-color: rgba(0, 0, 0, 0.25);\r
  70   bottom: -11px;\r
  71 }\r
  72 .hovercard.top > .arrow:after {\r
  73   content: " ";\r
  74   bottom: 1px;\r
  75   margin-left: -10px;\r
  76   border-bottom-width: 0;\r
  77   border-top-color: #ffffff;\r
  78 }\r
  79 .hovercard.right > .arrow {\r
  80   top: 50%;\r
  81   left: -11px;\r
  82   margin-top: -11px;\r
  83   border-left-width: 0;\r
  84   border-right-color: #999999;\r
  85   border-right-color: rgba(0, 0, 0, 0.25);\r
  86 }\r
  87 .hovercard.right > .arrow:after {\r
  88   content: " ";\r
  89   left: 1px;\r
  90   bottom: -10px;\r
  91   border-left-width: 0;\r
  92   border-right-color: #ffffff;\r
  93 }\r
  94 .hovercard.bottom > .arrow {\r
  95   left: 50%;\r
  96   margin-left: -11px;\r
  97   border-top-width: 0;\r
  98   border-bottom-color: #999999;\r
  99   border-bottom-color: rgba(0, 0, 0, 0.25);\r
 100   top: -11px;\r
 101 }\r
 102 .hovercard.bottom > .arrow:after {\r
 103   content: " ";\r
 104   top: 1px;\r
 105   margin-left: -10px;\r
 106   border-top-width: 0;\r
 107   border-bottom-color: #ffffff;\r
 108 }\r
 109 .hovercard.left > .arrow {\r
 110   top: 50%;\r
 111   right: -11px;\r
 112   margin-top: -11px;\r
 113   border-right-width: 0;\r
 114   border-left-color: #999999;\r
 115   border-left-color: rgba(0, 0, 0, 0.25);\r
 116 }\r
 117 .hovercard.left > .arrow:after {\r
 118   content: " ";\r
 119   right: 1px;\r
 120   border-right-width: 0;\r
 121   border-left-color: #ffffff;\r
 122   bottom: -10px;\r
 123 }\r
 124 \r
 125 .right-aligned {\r
 126   float: right !important;\r
 127 }\r
 128 .left-align {\r
 129   float: left !important;\r
 130 }\r
 131 .hidden {\r
 132   display: none !important;\r
 133   visibility: hidden !important;\r
 134 }\r
 135 .hovercard h1,\r
 136 .hovercard .h1,\r
 137 .hovercard h2,\r
 138 .hovercard .h2,\r
 139 .hovercard h3,\r
 140 .hovercard .h3 {\r
 141   margin: 0;\r
 142   padding: 0;\r
 143 }\r
 144 .hovercard h3 {\r
 145   font-size: 24px;\r
 146 }\r
 147 .hovercard h4,\r
 148 .hovercard .h4,\r
 149 .hovercard h5,\r
 150 .hovercard .h5,\r
 151 .hovercard h6,\r
 152 .hovercard .h6 {\r
 153   margin: 0;\r
 154   padding: 0;\r
 155 }\r
 156 .hovercard h4.text-center {\r
 157   margin-top: 10px;\r
 158   margin-bottom: 5px;\r
 159 }\r
 160 .hovercard sup {\r
 161   top: 0;\r
 162 }\r
 163 .hovercard small,\r
 164 .hovercard .small {\r
 165   font-size: 85%;\r
 166 }\r
 167 .hovercard ul,\r
 168 .hovercard ol {\r
 169   margin: 0;\r
 170   padding: 0;\r
 171   margin-bottom: 0;\r
 172 }\r
 173 .hovercard a:hover,\r
 174 .hovercard a:active,\r
 175 .hovercard a:focus,\r
 176 .hovercard a:visited {\r
 177   text-decoration: none !important;\r
 178 }\r
 179 \r
 180 \r
 181 /* Basic hovercard */\r
 182 .basic-content {\r
 183   padding: 9px;\r
 184 }\r
 185 .image-wrapper {\r
 186   background: #fff;\r
 187   border: 2px #fff solid;\r
 188   display: block;\r
 189   overflow: hidden;\r
 190 }\r
 191 .image-wrapper > a,\r
 192 .image-wrapper > span {\r
 193   background-size: 100% !important;\r
 194 }\r
 195 .image-wrapper.medium > a,\r
 196 .image-wrapper.medium > span {\r
 197   content: " ";\r
 198   display: block;\r
 199 }\r
 200 .image-wrapper.medium > a img {\r
 201   height: 80px;\r
 202   width: 80px;\r
 203   margin-bottom: 0;\r
 204 }\r
 205 .hovercard {\r
 206   -webkit-border-radius: 4px;\r
 207   -moz-border-radius: 4px;\r
 208   border-radius: 4px;\r
 209   /*max-width: 250px;*/\r
 210   max-width: 400px;\r
 211   width: 350px;\r
 212   -webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);\r
 213   -moz-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);\r
 214   box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);\r
 215   border: 1px solid rgba(0, 0, 0, 0);\r
 216 }\r
 217 .hovercard a:hover {\r
 218   text-decoration: none;\r
 219 }\r
 220 .hovercard.right > .arrow {\r
 221   border-right-color: rgba(0, 0, 0, 0.05);\r
 222 }\r
 223 .hovercard.left > .arrow {\r
 224   border-left-color: rgba(0, 0, 0, 0.05);\r
 225 }\r
 226 .hovercard.bottom > .arrow {\r
 227   border-bottom-color: rgba(0, 0, 0, 0.05);\r
 228 }\r
 229 .hovercard.top > .arrow {\r
 230   border-top-color: rgba(0, 0, 0, 0.05);\r
 231 }\r
 232 .advance-hovercard + .hovercard {\r
 233   max-width: 445px;\r
 234 }\r
 235 .advance-hovercard + .hovercard .hovercard-content {\r
 236   padding: 5px;\r
 237 }\r
 238 \r
 239 .basic-hovercard + .hovercard {\r
 240   max-width: 445px;\r
 241 }\r
 242 .basic-hovercard + .hovercard .hovercard-content {\r
 243   padding: 5px;\r
 244 }\r
 245 \r
 246 .hover-card-header {\r
 247   width: 100%;\r
 248 }\r
 249 .hover-card-header h4 {\r
 250   display: block;\r
 251 \r
 252 }\r
 253 .hover-card-header h4 a {\r
 254   font-size: 18px;\r
 255   font-weight: bold;\r
 256   letter-spacing: 0.03rem;\r
 257 }\r
 258 .hover-card-details {\r
 259   width: 100%;\r
 260 }\r
 261 .hover-card-pic {\r
 262   margin-top: 0px;\r
 263   display: block;\r
 264 }\r
 265 .hover-card-pic .image-wrapper {\r
 266   margin-right: 0.75em;\r
 267   float: left;\r
 268   position: relative;\r
 269 }\r
 270 .hover-card-content {\r
 271   list-style-type: none;\r
 272   width: 100%;\r
 273   display: block;\r
 274   background: #fff;\r
 275   padding: 0.3em 0 1em;\r
 276 }\r
 277 .hover-card-content .profile-details {\r
 278     font-size: 13px;\r
 279 }\r
 280 .hover-card-content .profile-addr {\r
 281   overflow: hidden;\r
 282   display: block;\r
 283   text-overflow: ellipsis;\r
 284 }\r
 285 .hover-card-actions {\r
 286   display: flex;\r
 287 }\r
 288 .hover-card-actions-connection {\r
 289   margin-left: 30px;\r
 290 }\r
 291 .hovercard .hovercard-content .hover-card-actions a.btn {\r
 292   display: inline-block;\r
 293 }\r
 294 .hover-card-footer {\r
 295   background-color: #f7f7f7;\r
 296   border-top: 1px solid #ebebeb;\r
 297   padding: 0 10px;\r
 298 }\r
 299 \r