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
pewgeuges 7aa9d8803f Urgent bugfix development 2.5.11d5 with ST 2.5.10.
On top of 2.6.0d7.
Debugs Footnotes for all input field values with footnotes coming in from field label.
Preparing unreleased tagged v2.5.11 in response to Forum support request.
Accessibility fixes and AMP compat enhancements not fully debugged yet, draft only.

git-svn-id: https://plugins.svn.wordpress.org/footnotes/trunk@2499807 b8457f37-d9ea-0310-8a92-e5e31aec5664
2021-03-19 23:58:23 +00:00

65 lines
1.5 KiB
CSS

/*<?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)
*
* @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;
*/
}