NetNewsWire/iOS/Resources/styleSheet.css
Andrew Brehaut 8882d219a6 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.
2019-09-25 12:31:07 +12:00

301 lines
5.5 KiB
CSS

body {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
font: -apple-system-body;
word-wrap: break-word;
word-break: break-word;
-webkit-hyphens: auto;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.feedlink {
font-weight: bold;
}
.headerTable {
width: 100%;
height: 68px;
}
.systemMessage {
position: absolute;
top: 45%;
left: 50%;
transform: translateX(-55%) translateY(-50%);
}
:root {
color-scheme: light dark;
--link-color: #0655BE;
--header-table-border-color: rgba(0, 0, 0, 0.1);
--header-color: rgba(0, 0, 0, 0.3);
--header-link-color: #086AEE;
--body-code-color: #666;
--system-message-color: #cbcbcb;
--feedlink-color: rgba(0, 0, 0, 0.6);
}
@media(prefers-color-scheme: dark) {
:root {
--link-color: #5E9EF4;
--header-table-border-color: rgba(255, 255, 255, 0.1);
--header-color: #d2d2d2;
--header-link-color: #2D80F1;
--body-code-color: #b2b2b2;
--system-message-color: #5f5f5f
}
}
body {
color: var(--body-color);
background-color: var(--body-background-color);
}
body a, body a:link, body a:visited {
color: var(--link-color);
}
body .headerTable {
border-bottom: 1px solid var(--header-table-border-color);
}
body .header {
color: var(--header-color);
}
body .header a:link, body .header a:visited {
color: var(--header-link-color);
}
body .articleDateline, body .articleDateLine.a:link, body .articleDateline a:visited {
color: var(--header-color);
}
body code, body pre {
color: var(--body-code-color);
}
body > .systemMessage {
color: var(--system-message-color);
}
.feedlink a:link, .feedlink a:visited {
color: var(--feed-link-color);
}
.avatar img {
border-radius: 4px;
}
.feedIcon {
border-radius: 4px;
}
.rightAlign {
text-align: right;
}
.leftAlign {
text-align: left;
}
.articleTitle {
margin-top: 26px;
}
.articleDateline {
margin-bottom: 25px;
font-weight: bold;
}
.articleBody {
line-height: 1.6em;
}
h1 {
line-height: 1.15em;
font-weight: bold;
}
code, pre {
font-family: "SF Mono", Menlo, "Courier New", Courier, monospace;
font-size: 14px;
}
pre {
white-space: pre-wrap;
}
img, figure, video, iframe, div {
max-width: 100%;
height: auto !important;
margin: 0 auto;
}
figcaption {
font-size: 14px;
line-height: 1.3em;
}
.iframeWrap {
position: relative;
display: block;
padding-top: 56.25%;
}
.iframeWrap iframe {
position: absolute;
top: 0;
left: 0;
height: 100% !important;
width: 100% !important;
}
/*Block ads and junk*/
iframe[src*="feedads"],
iframe[src*="doubleclick"],
iframe[src*="plusone.google"] {
display: none !important;
}
a[href*=".ads."],
a[href*="feedads"],
a[href*="doubleclick"],
a[href*="//ads."],
a[href*="api.tweetmeme"],
a[href*="delicious.com/post?"],
a[href*="digg.com/submit?"],
a[href*="google.com/bookmarks/mark?"],
a[href*="posterous.com/share?"],
a[href*="tumblr.com/share?"],
a[href*="linkedin.com/shareArticle?"],
a[href*="facebook.com/share.php?"],
a[href*="http://twitter.com/home?"],
a[href*="addtoany.com/share_save"] {
display: none !important;
}
img[src*=".ads."],
img[src*="//ads."],
img[src*="doubleclick"],
img[src*="feedads"],
img[src*="feedburner"],
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;
}
}