mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-29 04:28:07 +01:00
b475d439b3
r43158 introduced a new admin pointer for the privacy tools added in 4.9.6. With the previous positioning, though, sometimes the `Dismiss` link would be fixed off screen, making it impossible for the user to dismiss the pointer. This happened when there were enough extra menu items, or when the viewport height was short enough. This commit repositions the pointer to work around that problem. One down side of this workaround is that the arrow will not always be positioned next to the `Tools` menu, where it should be. That's an acceptable compromise given the current time constraints, though. A long term solution would be to make `WP_Pointer` robust enough to handle this use case. Props imath, audrasjb, desrosj. Merges [43246] to the 4.9 branch. Fixes #44045. Built from https://develop.svn.wordpress.org/branches/4.9@43253 git-svn-id: http://core.svn.wordpress.org/branches/4.9@43082 1a063a9b-81f0-0310-95a4-ce76da25c4cd
225 lines
3.9 KiB
CSS
225 lines
3.9 KiB
CSS
.wp-pointer-content {
|
|
padding: 0 0 10px;
|
|
position: relative;
|
|
font-size: 13px;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.075);
|
|
}
|
|
|
|
.wp-pointer-content h3 {
|
|
position: relative;
|
|
margin: -1px -1px 5px;
|
|
padding: 15px 18px 14px 60px;
|
|
border: 1px solid #3592b6;
|
|
border-bottom: none;
|
|
line-height: 1.4em;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
background: #00a0d2;
|
|
}
|
|
|
|
.wp-pointer-content h3:before {
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
color: #00a0d2;
|
|
content: "\f227";
|
|
font: normal 20px/1.6 dashicons;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 15px;
|
|
speak: none;
|
|
text-align: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.wp-pointer-content h4 {
|
|
margin: 1.33em 20px 1em;
|
|
font-size: 1.15em;
|
|
}
|
|
|
|
.wp-pointer-content p {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.wp-pointer-buttons {
|
|
margin: 0;
|
|
padding: 5px 15px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.wp-pointer-buttons a {
|
|
float: right;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wp-pointer-buttons a.close {
|
|
padding-left: 3px;
|
|
position: relative;
|
|
}
|
|
|
|
.wp-pointer-buttons a.close:before {
|
|
background: none;
|
|
color: #72777c;
|
|
content: "\f153";
|
|
display: block !important;
|
|
font: normal 16px/1 dashicons;
|
|
speak: none;
|
|
margin: 1px 0;
|
|
text-align: center;
|
|
-webkit-font-smoothing: antialiased !important;
|
|
width: 10px;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: -15px;
|
|
top: 1px;
|
|
}
|
|
|
|
.wp-pointer-buttons a.close:hover:before {
|
|
color: #c00;
|
|
}
|
|
|
|
/* The arrow base class must take up no space, even with transparent borders. */
|
|
.wp-pointer-arrow,
|
|
.wp-pointer-arrow-inner {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.wp-pointer-arrow {
|
|
z-index: 10;
|
|
width: 0;
|
|
height: 0;
|
|
border: 0 solid transparent;
|
|
}
|
|
|
|
.wp-pointer-arrow-inner {
|
|
z-index: 20;
|
|
}
|
|
|
|
/* Make Room for the Arrow! */
|
|
.wp-pointer-top,
|
|
.wp-pointer-undefined {
|
|
padding-top: 13px;
|
|
}
|
|
|
|
.wp-pointer-bottom {
|
|
margin-top: -13px;
|
|
padding-bottom: 13px;
|
|
}
|
|
|
|
/* rtl:ignore */
|
|
.wp-pointer-left {
|
|
padding-left: 13px;
|
|
}
|
|
/* rtl:ignore */
|
|
.wp-pointer-right {
|
|
margin-left: -13px;
|
|
padding-right: 13px;
|
|
}
|
|
|
|
/* Base Size & Positioning */
|
|
.wp-pointer-top .wp-pointer-arrow,
|
|
.wp-pointer-bottom .wp-pointer-arrow,
|
|
.wp-pointer-undefined .wp-pointer-arrow {
|
|
left: 50px;
|
|
}
|
|
|
|
.wp-pointer-left .wp-pointer-arrow,
|
|
.wp-pointer-right .wp-pointer-arrow {
|
|
top: 50%;
|
|
margin-top: -15px;
|
|
}
|
|
|
|
/* Arrow Sprite */
|
|
.wp-pointer-top .wp-pointer-arrow,
|
|
.wp-pointer-undefined .wp-pointer-arrow {
|
|
top: 0;
|
|
border-width: 0 13px 13px 13px;
|
|
border-bottom-color: #3592b6;
|
|
}
|
|
|
|
.wp-pointer-top .wp-pointer-arrow-inner,
|
|
.wp-pointer-undefined .wp-pointer-arrow-inner {
|
|
top: 1px;
|
|
margin-left: -13px;
|
|
margin-top: -13px;
|
|
border: 13px solid transparent;
|
|
border-bottom-color: #00a0d2;
|
|
display: block;
|
|
content: " ";
|
|
}
|
|
|
|
.wp-pointer-bottom .wp-pointer-arrow {
|
|
bottom: 0;
|
|
border-width: 13px 13px 0 13px;
|
|
border-top-color: #ccc;
|
|
}
|
|
|
|
.wp-pointer-bottom .wp-pointer-arrow-inner {
|
|
bottom: 1px;
|
|
margin-left: -13px;
|
|
margin-bottom: -13px;
|
|
border: 13px solid transparent;
|
|
border-top-color: #fff;
|
|
display: block;
|
|
content: " ";
|
|
}
|
|
|
|
/* rtl:ignore */
|
|
.wp-pointer-left .wp-pointer-arrow {
|
|
left: 0;
|
|
border-width: 13px 13px 13px 0;
|
|
border-right-color: #ccc;
|
|
}
|
|
|
|
/* rtl:ignore */
|
|
.wp-pointer-left .wp-pointer-arrow-inner {
|
|
left: 1px;
|
|
margin-left: -13px;
|
|
margin-top: -13px;
|
|
border: 13px solid transparent;
|
|
border-right-color: #fff;
|
|
display: block;
|
|
content: " ";
|
|
}
|
|
|
|
/* rtl:ignore */
|
|
.wp-pointer-right .wp-pointer-arrow {
|
|
right: 0;
|
|
border-width: 13px 0 13px 13px;
|
|
border-left-color: #ccc;
|
|
}
|
|
|
|
/* rtl:ignore */
|
|
.wp-pointer-right .wp-pointer-arrow-inner {
|
|
right: 1px;
|
|
margin-right: -13px;
|
|
margin-top: -13px;
|
|
border: 13px solid transparent;
|
|
border-left-color: #fff;
|
|
display: block;
|
|
content: " ";
|
|
}
|
|
|
|
.wp-pointer.arrow-bottom .wp-pointer-content {
|
|
margin-bottom: -45px;
|
|
}
|
|
|
|
.wp-pointer.arrow-bottom .wp-pointer-arrow {
|
|
top: 100%;
|
|
margin-top: -30px;
|
|
}
|
|
|
|
/* Disable pointers at responsive sizes */
|
|
@media screen and ( max-width: 782px ) {
|
|
.wp-pointer {
|
|
display: none;
|
|
}
|
|
}
|