mirror of
https://github.com/martinrotter/rssguard.git
synced 2024-12-29 09:31:24 +01:00
288 lines
6.4 KiB
HTML
288 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!--
|
|
___________________________
|
|
< I'm an expert in my field. >
|
|
---------------------------
|
|
\ ^__^
|
|
\ (oo)\_______
|
|
(__)\ )\/\
|
|
||----w |
|
|
|| ||
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
:root {
|
|
--rssguard-base-unit: 10px;
|
|
--rssguard-em-unit: .3em;
|
|
|
|
/* Qt5 fusion border grey */
|
|
--rssguard-grey01: #B8B8B8;
|
|
|
|
/* Some other grey */
|
|
--rssguard-grey02: #CFCFCF;
|
|
--rssguard-grey10: #343434;
|
|
--rssguard-grey20: #F1F1F1;
|
|
}
|
|
article, aside, details, div, dt,
|
|
figcaption, footer, form, header,
|
|
hgroup, html, main, nav, section, summary {
|
|
display: block;
|
|
}
|
|
body, h1, h2, h3, h4, h5, h6,
|
|
p, blockquote, pre, hr,
|
|
dl, dd, ol, ul, figure {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
h1, h2, h3, h4, h5, h6,
|
|
p, blockquote, pre,
|
|
ul, ol, dl, figure {
|
|
margin-bottom: var(--rssguard-base-unit);
|
|
}
|
|
body {
|
|
/*
|
|
* Another Qt grey;
|
|
* bg required for "newspaper mode"
|
|
*/
|
|
background-color: #FBFBFB;
|
|
|
|
box-sizing: border-box;
|
|
cursor: default;
|
|
font-kerning: normal;
|
|
|
|
/* redundant? */
|
|
-webkit-font-feature-settings: "kern" 1;
|
|
font-feature-settings: "kern" 1;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 600 !important;
|
|
}
|
|
h1 { font-size: 1.25em !important; }
|
|
h2 { font-size: 1.20em !important; }
|
|
h3 { font-size: 1.15em !important; }
|
|
h4 { font-size: 1.1em !important; }
|
|
h5 { font-size: 1em !important; }
|
|
h6 { font-size: .95em !important; }
|
|
b {
|
|
font-weight: bold !important;
|
|
}
|
|
i {
|
|
font-style: italic !important;
|
|
}
|
|
strong {
|
|
font-weight: 800 !important;
|
|
}
|
|
em {
|
|
font-style: oblique !important;
|
|
}
|
|
mark {
|
|
background-color: #FFECCC;
|
|
}
|
|
sub,
|
|
sup {
|
|
font-size: .8em !important;
|
|
}
|
|
small {
|
|
font-size: .9em !important;
|
|
}
|
|
q {
|
|
font-style: italic !important;
|
|
}
|
|
q::before {
|
|
content: '“';
|
|
}
|
|
q::after {
|
|
content: '”';
|
|
}
|
|
a {
|
|
color: steelblue;
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
cite {
|
|
font-style: italic !important;
|
|
font-weight: bold !important;
|
|
}
|
|
figure > img {
|
|
display: block;
|
|
}
|
|
figcaption {
|
|
font-size: .8em !important;
|
|
}
|
|
blockquote {
|
|
color: var(--rssguard-grey10);
|
|
border-left: var(--rssguard-em-unit) solid var(--rssguard-grey02);
|
|
margin-left: 0;
|
|
padding: 0 var(--rssguard-base-unit);
|
|
}
|
|
pre,
|
|
code {
|
|
background-color: var(--rssguard-grey20);
|
|
cursor: text;
|
|
}
|
|
pre {
|
|
--rssguard-horiz: 13px;
|
|
|
|
border-radius: var(--rssguard-em-unit);
|
|
overflow-x: auto;
|
|
padding: 7px var(--rssguard-horiz);
|
|
white-space: pre !important;
|
|
width: calc(100wv - calc(var(--rssguard-horiz) * 2)) !important;
|
|
}
|
|
code {
|
|
border-radius: var(--rssguard-em-unit);
|
|
color: var(--rssguard-grey10);
|
|
padding: 0 .25em;
|
|
word-break: break-word;
|
|
}
|
|
pre code {
|
|
display: block;
|
|
padding: 0;
|
|
tab-size: 4;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
table,
|
|
th,
|
|
td {
|
|
border: 1px solid var(--rssguard-grey01);
|
|
}
|
|
li {
|
|
display: list-item;
|
|
}
|
|
ul,
|
|
ol {
|
|
padding-left: 1.5em;
|
|
}
|
|
ul {
|
|
display: block;
|
|
list-style-type: circle;
|
|
}
|
|
ul li ul {
|
|
list-style-type: square;
|
|
}
|
|
ol {
|
|
display: block;
|
|
list-style-type: decimal;
|
|
}
|
|
ol li ol {
|
|
list-style-type: lower-roman;
|
|
}
|
|
img {
|
|
/* redundant? */
|
|
display: inline-block;
|
|
|
|
height: auto;
|
|
width: auto;
|
|
}
|
|
details > summary {
|
|
border-radius: var(--rssguard-em-unit);
|
|
cursor: pointer;
|
|
}
|
|
details > summary:hover,
|
|
details[open] > summary {
|
|
background-color: var(--rssguard-grey20);
|
|
}
|
|
details > summary:focus {
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
hr {
|
|
background-color: var(--rssguard-grey02);
|
|
border: none;
|
|
display: block;
|
|
height: 2px;
|
|
margin: var(--rssguard-base-unit) 0;
|
|
}
|
|
iframe {
|
|
max-width: 100%;
|
|
height: auto;
|
|
width: auto;
|
|
}
|
|
select {
|
|
max-width: 100%;
|
|
}
|
|
.rssguard-mwrapper {
|
|
padding: var(--rssguard-base-unit) !important;
|
|
}
|
|
.rssguard-mhead .rssguard-msmall,
|
|
.rssguard-mhead .rssguard-mlinks {
|
|
opacity: .8;
|
|
}
|
|
.rssguard-mhead h1 {
|
|
margin: 0;
|
|
}
|
|
.rssguard-msmall {
|
|
font-size: .9em;
|
|
}
|
|
.rssguard-mlinks a.rssguard-menc {
|
|
word-break: break-word;
|
|
}
|
|
.rssguard-murl {
|
|
visibility: hidden;
|
|
}
|
|
body:hover .rssguard-mwrapper .rssguard-murl {
|
|
visibility: visible;
|
|
}
|
|
@media only screen and (max-width: 800px) {
|
|
|
|
.rssguard-mbody img {
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
.rssguard-mbody img {
|
|
max-width: 450px;
|
|
}
|
|
.rssguard-mbody {
|
|
/*
|
|
* For articles without html elements;
|
|
* Not sure if I want to apply this to *all*;
|
|
* otherwise *must* be applied to links in mbody
|
|
*/
|
|
word-break: break-word;
|
|
}
|
|
/* Fix at least some mess produced by above */
|
|
table {
|
|
word-break: normal;
|
|
}
|
|
</style>
|
|
<style>
|
|
html, body, div, span, applet, object, iframe,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
a, abbr, acronym, address, big, cite, code,
|
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
small, strike, strong, sub, sup, tt, var,
|
|
b, u, i, center,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
article, aside, canvas, details, embed,
|
|
figure, figcaption, footer, header, hgroup,
|
|
menu, nav, output, ruby, section, summary,
|
|
time, mark, audio, video {
|
|
font: inherit;
|
|
font-size: 100%;
|
|
}
|
|
html {
|
|
height: 100vh;
|
|
}
|
|
body {
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
<title>%1</title>
|
|
</head>
|
|
|
|
<body>
|
|
%2
|
|
</body>
|
|
|
|
</html>
|