view/theme/frio/css/hovercard.css

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