This repository has been archived on 2023-08-16. You can view files and clone it, but cannot push or open issues or pull requests.
footnotes/css/dev-amp-tooltips.css

69 lines
1.5 KiB
CSS
Raw Normal View History

/*<?php for docblocks
/**
* Additional stylesheet for AMP compatible tooltips.
*
* - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 code contribution.
* - Bugfix: Tooltips: enable accessibility by keyboard navigation, thanks to @westonruter code contribution.
*
* @since 2.5.11 (draft)
* @since 2.6.0 (release)
*
* @contributor @milindmore22
* @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
*
* @contributor @westonruter
* @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
*
* To streamline internal CSS, immutable rules are in external stylesheet.
* Property values of settings are internal CSS.
* @see class/task.php
*
* System of unified minified style sheets tailored to the instance.
* @see dev-common.css.
*/
span.footnote_referrer > span.footnote_tooltip {
visibility: hidden;
opacity: 0;
transition-property: visibility, opacity;
/*
transition-delay: 500ms;
transition-duration: 1s;
*/
}
span.footnote_referrer:focus-within > span.footnote_tooltip,
span.footnote_referrer:hover > span.footnote_tooltip {
visibility: visible;
opacity: 1;
transition-property: visibility, opacity;
/*
transition-delay: 0;
transition-duration: 200ms;
*/
}
/**
* Position.
*
* Values are defined by internal CSS.
* @see class/task.php
*/
.footnote_referrer.relative {
position: relative;
}
.footnote_tooltip.position {
display: unset;
position: absolute;
/*
bottom: 24px;
left: -50px;
width: 400px;
*/
}