From 8882d219a603574adc5efa35f6e8a9c16856e0be Mon Sep 17 00:00:00 2001 From: Andrew Brehaut Date: Wed, 25 Sep 2019 12:31:07 +1200 Subject: [PATCH] 544 footnote support working on iOS This commit includes the newsfoot.js script in the iOS page.html file and copies css from the Mac styleSheet.css into the iOS styleSheet.css. The is only one difference in the styles between the two: iOS defines left and right to be in terms of the viewport width rather than a fixed size. This ensures that the popover is always within the visible area. --- iOS/Resources/page.html | 1 + iOS/Resources/styleSheet.css | 119 ++++++++++++++++++++++++++++++++++- 2 files changed, 119 insertions(+), 1 deletion(-) diff --git a/iOS/Resources/page.html b/iOS/Resources/page.html index 4baf2cfee..101daec87 100644 --- a/iOS/Resources/page.html +++ b/iOS/Resources/page.html @@ -7,6 +7,7 @@ } + diff --git a/iOS/Resources/styleSheet.css b/iOS/Resources/styleSheet.css index 2b14a2684..2c7ba293a 100644 --- a/iOS/Resources/styleSheet.css +++ b/iOS/Resources/styleSheet.css @@ -8,7 +8,6 @@ body { word-wrap: break-word; word-break: break-word; -webkit-hyphens: auto; - } a { @@ -181,3 +180,121 @@ img[src*="feedblitz"], img[src*="share-buttons"] { display: none !important; } + + + + +/* Newsfoot specific styles. Structural styles come first, theme styles second */ +.newsfoot-footnote-container { + position: relative; + display: inline-block; +} +.newsfoot-footnote-popover { + position: absolute; + display: block; + padding: 0em 1em; + margin: 1em; + left: calc(-1 * (50vw - 1em)); + right: calc(-1 * (50vw - 1em)); + top: 0.75em; + max-width: none; + border-radius: 0.3em; + box-sizing: border-box; +} +.newsfoot-footnote-popover-arrow { + content: ''; + display: block; + width: 1em; + position: absolute; + top: -0.5em; + left: calc(50% - 0.5em); + height: 1em !important; + transform: rotate(45deg); + z-index:0; +} +.newsfoot-footnote-popover-inner { + border-radius: calc(0.3em - 1px); + padding: 1em; + position: relative; + z-index: 1; +} + +.newsfoot-footnote-popover-inner :first-child { + margin-top: 0; +} +.newsfoot-footnote-popover-inner :last-child { + margin-bottom: 0; +} + +.newsfoot-footnote-popover .reversefootnote { + display: none; +} +a.footnote { + display: inline-block; + text-decoration: none; + padding: 0.05em 0.75em; + border-radius: 1em; + min-width: 1em; + text-align: center; + font-size: 0.8em; + line-height: 1em; + position:relative; + top: -0.1em; +} + +/* light / default */ +.newsfoot-footnote-popover { + background: #ccc; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.25); + color: black; + padding: 1px; +} +.newsfoot-footnote-popover-arrow { + background: #fafafa; + border: 1px solid #ccc; +} +.newsfoot-footnote-popover-inner { + background: #fafafa; +} +body a.footnote, +body a.footnote:visited, +.newsfoot-footnote-popover + a.footnote:hover { + background: #aaa; + color: white; + transition: background-color 200ms ease-out; +} +a.footnote:hover, +.newsfoot-footnote-popover + a.footnote { + background: #666; + transition: background-color 200ms ease-out; +} + + +/* dark */ +@media screen and (prefers-color-scheme: dark) { + .newsfoot-footnote-popover { + background: #444; + color: rgb(224, 224, 224); + } + .newsfoot-footnote-popover-arrow { + background: #242424; + border: 1px solid #444; + } + .newsfoot-footnote-popover-inner { + background: #242424; + } + body a.footnote, + body a.footnote:visited, + .newsfoot-footnote-popover + a.footnote:hover { + background: #aaa; + color: white; + transition: background-color 200ms ease-out; + } + a.footnote:hover, + .newsfoot-footnote-popover + a.footnote { + background: #666; + transition: background-color 200ms ease-out; + } + +} +