1f173de885
Pristine upstream, unpacked from the official wordpress.org tarball. https://wordpress.org/wordpress-7.1.1.tar.gz sha1 2a9d68474e8703aa3a66f80427b325e0941b6a1e (published by wordpress.org) sha256 3996fee13448ef12e07e9f0c77db2f655ffa1b7cde71c80a4965d3bf1fb956b3 This branch carries nothing but upstream releases, one commit each, and is never edited. It is the other side of the git-subtree merge that brings security releases into SiriusPress/wordpress/ — see SiriusPress/docs/upstream-merges.md.
125 lines
3 KiB
CSS
125 lines
3 KiB
CSS
/* Accessible tooltip component. Markup from wp_get_tooltip(). */
|
|
|
|
.wp-tooltip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Toggle and close buttons. */
|
|
.wp-tooltip .wp-tooltip__toggle,
|
|
.wp-tooltip .wp-tooltip__close {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 2px;
|
|
background: none;
|
|
color: #50575e;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled])) .wp-tooltip__toggle:hover,
|
|
.wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled])) .wp-tooltip__toggle:focus,
|
|
.wp-tooltip .wp-tooltip__close:hover,
|
|
.wp-tooltip .wp-tooltip__close:focus {
|
|
color: var(--wp-admin-theme-color, #3858e9);
|
|
}
|
|
|
|
/*
|
|
* `:where()` keeps the wrapper out of the specificity total, so buttons
|
|
* passed into a tooltip keep control of their own focus ring.
|
|
*/
|
|
:where(.wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled]))) .wp-tooltip__toggle:focus,
|
|
.wp-tooltip .wp-tooltip__close:focus {
|
|
outline: 2px solid transparent;
|
|
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
|
|
}
|
|
|
|
.wp-tooltip .wp-tooltip__toggle .dashicons {
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.wp-tooltip .wp-tooltip__close .dashicons {
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Bubble. No position here, so it falls back to the UA's centered popover without anchoring. */
|
|
.wp-tooltip .wp-tooltip__bubble {
|
|
max-width: min(280px, calc(100vw - 32px));
|
|
margin: auto;
|
|
padding: 12px 16px;
|
|
overflow: visible;
|
|
border: 1px solid #c3c4c7;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
color: #1d2327;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.wp-tooltip.wp-is-tooltip .wp-tooltip__bubble {
|
|
background: #000;
|
|
color: #f0f0f0;
|
|
text-align: center;
|
|
padding: 4px 8px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__text {
|
|
display: block;
|
|
padding-inline-end: 24px;
|
|
}
|
|
|
|
.wp-tooltip .wp-tooltip__close {
|
|
position: absolute;
|
|
top: 6px;
|
|
inset-inline-end: 6px;
|
|
}
|
|
|
|
/* Anchor the bubble above its toggle, with a downward arrow. */
|
|
@supports (anchor-name: --a) {
|
|
.wp-tooltip .wp-tooltip__bubble {
|
|
position-area: top;
|
|
margin: 0 0 8px;
|
|
position-try-fallbacks: flip-block, flip-inline;
|
|
}
|
|
|
|
.wp-tooltip.wp-is-tooltip .wp-tooltip__bubble {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Arrow: gray border (::before) under a white fill (::after). */
|
|
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before,
|
|
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border: 8px solid transparent;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before {
|
|
margin-left: -8px;
|
|
border-top-color: #c3c4c7;
|
|
}
|
|
|
|
.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after {
|
|
margin-left: -7px;
|
|
border-width: 7px;
|
|
border-bottom: 0;
|
|
border-top-color: #fff;
|
|
}
|
|
}
|