frenzy-ios/Reader/read.css

114 lines
2.0 KiB
CSS

:root {
color-scheme: light dark;
--tint-color: rgb(255, 59, 48); /* .systemRed */
--dark-tint-color: rgb(255, 69, 58); /* .systemRed */
--secondary-text-color: rgb(85, 85, 85); /* .darkGray */
--dark-secondary-text-color: rgb(170, 170, 170); /* .lightGray */
--background-color: white; /* .appBackground */
--dark-background-color: rgb(25, 25, 25); /* .appBackground */
}
body {
margin: 12px;
font-family: ui-serif;
overflow-wrap: break-word;
background-color: var(--background-color);
}
@media (min-width: 696px) {
body {
width: 672px;
margin: 12px auto;
}
}
a {
color: var(--tint-color);
}
img {
max-width: 100%;
}
figure {
margin: 0;
}
figcaption {
color: var(--secondary-text-color);
font-style: italic;
font-family: ui-sans-serif;
font-size: 12pt;
line-height: 1.2;
}
pre, code {
/* ui-monospace doesn't work for some reason, even though the other ui- fonts do */
font-family: ui-monospace, "SF Mono";
}
pre {
overflow-wrap: normal;
overflow-x: auto;
tab-size: 4;
}
blockquote {
border-left: 4px solid var(--tint-color);
margin-left: 0;
margin-right: 0;
padding: 0 20px;
color: gray;
font-style: italic;
}
.item-content-table {
overflow-x: scroll;
}
#item-info {
margin-bottom: 1em;
}
#item-title {
margin-top: 0;
margin-bottom: 0.5em;
}
#item-title a {
text-decoration: none;
color: text;
}
#item-feed-title,
#item-author,
#item-published {
margin: 0.25em 0;
font-family: ui-sans-serif;
font-weight: normal;
}
#item-feed-title {
color: var(--tint-color);
}
#item-author,
#item-published {
font-style: italic;
color: var(--secondary-text-color);
}
#item-content {
font-size: 14pt;
line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
:root {
--tint-color: var(--dark-tint-color);
--secondary-text-color: var(--dark-secondary-text-color);
--background-color: var(--dark-background-color);
}
}