wp-includes/css/wp-pointer.css

   1 .wp-pointer {
   2 }
   3
   4 .wp-pointer-content {
   5         padding: 0 0 10px;
   6         position: relative;
   7         font-size: 13px;
   8
   9         background: #fff;
  10         border-style: solid;
  11         border-width: 1px;
  12         /* Fallback for non-rgba-compliant browsers */
  13         border-color: #dfdfdf;
  14         /* Use rgba to look better against non-white backgrounds. */
  15         border-color: rgba(0,0,0,.125);
  16         -webkit-border-radius: 3px;
  17         border-radius: 3px;
  18
  19         -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.19);
  20         box-shadow: 0 2px 4px rgba(0,0,0,.19);
  21 }
  22
  23 .wp-pointer-content h3 {
  24         position: relative;
  25         margin: 0 0 5px;
  26         padding: 15px 18px 14px 60px;
  27         line-height: 1.4em;
  28         font-size: 14px;
  29         color: #fff;
  30         border-radius: 3px 3px 0 0;
  31         text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  32         background: #8cc1e9;
  33         background-image: -webkit-gradient(linear, left bottom, left top, from(#72a7cf), to(#8cc1e9));
  34         background-image: -webkit-linear-gradient(bottom, #72a7cf, #8cc1e9);
  35         background-image:    -moz-linear-gradient(bottom, #72a7cf, #8cc1e9);
  36         background-image:      -o-linear-gradient(bottom, #72a7cf, #8cc1e9);
  37         background-image: linear-gradient(to top, #72a7cf, #8cc1e9);
  38 }
  39
  40 .wp-pointer-content h3:before {
  41         position: absolute;
  42         top: 0;
  43         left: 15px;
  44         content: ' ';
  45         width: 36px;
  46         height: 100%;
  47         background: url('../images/icon-pointer-flag.png') 0 50% no-repeat;
  48 }
  49
  50 .wp-pointer-content p {
  51         padding: 0 15px;
  52 }
  53
  54 .wp-pointer-buttons {
  55         margin: 0;
  56         padding: 5px 15px;
  57         overflow: auto;
  58 }
  59
  60 .wp-pointer-buttons a {
  61         float: right;
  62         display: inline-block;
  63         text-decoration: none;
  64 }
  65
  66 .wp-pointer-buttons a.close {
  67         padding-left:3px;
  68         position: relative;
  69 }
  70
  71 .wp-pointer-buttons a.close:before {
  72         content: ' ';
  73         width:10px;
  74         height:100%;
  75         position:absolute;
  76         left:-10px;
  77         background:url('../images/xit.gif') 0 50% no-repeat;
  78 }
  79
  80 .wp-pointer-buttons a.close:hover:before {
  81         background-position:100% 50%;
  82 }
  83
  84 /* The arrow base class must take up no space, even with transparent borders. */
  85 .wp-pointer-arrow,
  86 .wp-pointer-arrow-inner {
  87         position: absolute;
  88         width: 0;
  89         height: 0;
  90 }
  91
  92 .wp-pointer-arrow {
  93         z-index: 10;
  94         background:url('../images/arrow-pointer-blue.png') 0 0 no-repeat;
  95 }
  96
  97 .wp-pointer-arrow-inner {
  98         z-index: 20;
  99 }
 100
 101 /* Make Room for the Arrow! */
 102 .wp-pointer-top,
 103 .wp-pointer-undefined {
 104         padding-top: 13px;
 105 }
 106
 107 .wp-pointer-bottom {
 108         padding-bottom: 13px;
 109 }
 110
 111 .wp-pointer-left {
 112         padding-left: 13px;
 113 }
 114
 115 .wp-pointer-right {
 116         padding-right: 13px;
 117 }
 118
 119 /* Base Size & Positioning */
 120 .wp-pointer-top .wp-pointer-arrow,
 121 .wp-pointer-bottom .wp-pointer-arrow,
 122 .wp-pointer-undefined .wp-pointer-arrow {
 123         left: 50px;
 124         width: 30px;
 125         height: 14px;
 126 }
 127
 128 .wp-pointer-left .wp-pointer-arrow,
 129 .wp-pointer-right .wp-pointer-arrow {
 130         top: 50%;
 131         margin-top: -15px;
 132         width: 14px;
 133         height: 30px;
 134 }
 135
 136 /* Arrow Sprite */
 137 .wp-pointer-top .wp-pointer-arrow,
 138 .wp-pointer-undefined .wp-pointer-arrow {
 139         top: 0;
 140         background-position: 0 0;
 141 }
 142
 143 .wp-pointer-bottom .wp-pointer-arrow {
 144         bottom: 0;
 145         background-position: 0 -46px;
 146 }
 147
 148 .wp-pointer-left .wp-pointer-arrow {
 149         left: 0;
 150         background-position: 0 -15px;
 151 }
 152
 153 .wp-pointer-right .wp-pointer-arrow {
 154         right:0;
 155         background-position:-16px -15px;
 156 }
 157
 158 /* - RTL
 159 ------------------------------------------------------------------------------*/
 160
 161 .rtl .wp-pointer-content h3 {
 162         padding-right: 60px;
 163         padding-left: 18px;
 164 }
 165
 166 .rtl .wp-pointer-content h3:before {
 167         right: 15px;
 168 }
 169
 170 .rtl .wp-pointer-buttons a {
 171         float: left;
 172 }
 173
 174 .rtl .wp-pointer-buttons a.close {
 175         padding-right:3px;
 176         padding-left: 0;
 177 }
 178
 179 .rtl .wp-pointer-buttons a.close:before {
 180         right:-10px;
 181 }
 182
 183 .rtl .wp-pointer-top .wp-pointer-arrow,
 184 .rtl .wp-pointer-bottom .wp-pointer-arrow,
 185 .rtl .wp-pointer-undefined .wp-pointer-arrow {
 186         right: 50px;
 187 }
 188
 189 /**
 190  * HiDPI Displays
 191  */
 192 @media print,
 193   (-o-min-device-pixel-ratio: 5/4),
 194   (-webkit-min-device-pixel-ratio: 1.25),
 195   (min-resolution: 120dpi) {
 196
 197         .wp-pointer-buttons a.close:before {
 198                 background-image: url('../images/xit-2x.gif');
 199                 background-size: 20px auto;
 200         }
 201
 202         .wp-pointer-content h3:before {
 203                 background-image: url('../images/icon-pointer-flag-2x.png');
 204                 background-size: 36px auto;
 205         }
 206
 207         .wp-pointer-arrow {
 208                 background: url('../images/arrow-pointer-blue-2x.png') 0 0 no-repeat;
 209                 background-size: 30px 60px;
 210         }
 211
 212         .wp-pointer-top .wp-pointer-arrow,
 213         .wp-pointer-undefined .wp-pointer-arrow {
 214                 background-position: 0 1px;
 215         }
 216
 217         .wp-pointer-bottom .wp-pointer-arrow {
 218                 background-position: 0 -47px;
 219         }
 220
 221         .wp-pointer-left .wp-pointer-arrow {
 222                 background-position: 1px -15px;
 223         }
 224
 225         .wp-pointer-right .wp-pointer-arrow {
 226                 background-position:-17px -15px;
 227         }
 228 }