view/theme/frio/css/hovercard.css

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