mirror of
https://github.com/Ranchero-Software/NetNewsWire.git
synced 2024-12-12 09:26:26 +01:00
8882d219a6
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.
301 lines
5.5 KiB
CSS
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;
|
|
}
|
|
|
|
}
|
|
|