NetNewsWire/Mac/MainWindow/Detail/styleSheet.css
Andrew Brehaut 5fea81971b #554 newsfoot.js and css are included in the page
These changes are the bare minimum required to get footnotes to appear and function on the article page.
 * The newsfoot.js script now wraps everything in an IIFE to prevent bleed to other scripts
 * Stylesheets are included in the main stylesheet, with the colors extracted out into separate selectors

Currently missing the arrow pointing to the footnote link, and no consideration exists for mobile presentation
beyond a max-width: 100vh on the footnote popover.
2019-09-22 14:06:51 +12:00

232 lines
4.2 KiB
CSS

body {
margin-top: 20px;
margin-bottom: 64px;
margin-left: 64px;
margin-right: 64px;
font-family: -apple-system;
font-size: 18px;
word-wrap: break-word; /* break long words or URLs */
}
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 {
--body-color: #444;
--body-background-color: -apple-system-text-background;
--link-color: hsla(215, 99%, 43%, 1);
--header-table-border-color: rgba(0, 0, 0, 0.1);
--header-color: rgba(0, 0, 0, 0.3);
--header-link-color: rgba(0, 0, 0, 0.3);
--body-code-color: #666;
--system-message-color: #cbcbcb;
--feedlink-color: rgba(0, 0, 0, 0.6);
}
@media(prefers-color-scheme: dark) {
:root {
--body-color: #d2d2d2;
--body-background-color: #2d2d2d;
--link-color: #4490e2;
--header-table-border-color: rgba(255, 255, 255, 0.1);
--header-color: #d2d2d2;
--header-link-color: #4490e2;
--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: -11em;
right: -11em;
max-width: none;
border-radius: 0.3em;
box-sizing: border-box;
}
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: #fafafa;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
color: black;
border: 1px solid #ccc;
}
body a.footnote,
body a.footnote:visited {
background: #aaa;
color: white;
transition: background-color 200ms ease-out;
}
a.footnote:hover {
background: #666;
transition: background-color 200ms ease-out;
}