|
13 | 13 | <head>
|
14 | 14 | <style>
|
15 | 15 | :root {
|
16 |
| - --base-unit: 10px; |
17 |
| - --brad-unit: .3em; |
| 16 | + --rssguard-base-unit: 10px; |
| 17 | + --rssguard-em-unit: .3em; |
18 | 18 | /* Qt5 fusion border grey */
|
19 |
| - --grey1: #B8B8B8; |
| 19 | + --rssguard-grey01: #B8B8B8; |
20 | 20 |
|
21 | 21 | /* Some other grey */
|
22 |
| - --grey2: #CFCFCF; |
23 |
| - --grey10: #343434; |
24 |
| - --grey20: #F1F1F1; |
| 22 | + --rssguard-grey02: #CFCFCF; |
| 23 | + --rssguard-grey10: #343434; |
| 24 | + --rssguard-grey20: #F1F1F1; |
| 25 | + } |
| 26 | + article, aside, details, div, dt, |
| 27 | + figcaption, footer, form, header, |
| 28 | + hgroup, html, main, nav, section, summary { |
| 29 | + display: block; |
25 | 30 | }
|
26 | 31 | body, h1, h2, h3, h4, h5, h6,
|
27 | 32 | p, blockquote, pre, hr,
|
|
32 | 37 | h1, h2, h3, h4, h5, h6,
|
33 | 38 | p, blockquote, pre,
|
34 | 39 | ul, ol, dl, figure {
|
35 |
| - margin-bottom: var(--base-unit); |
| 40 | + margin-bottom: var(--rssguard-base-unit); |
36 | 41 | }
|
37 | 42 | body {
|
| 43 | + box-sizing: border-box; |
38 | 44 | cursor: default;
|
39 | 45 | font-kerning: normal;
|
40 | 46 | -webkit-text-size-adjust: 100%;
|
|
65 | 71 | font-style: oblique !important;
|
66 | 72 | }
|
67 | 73 | mark {
|
68 |
| - background: #FFECCC; |
| 74 | + background-color: #FFECCC; |
69 | 75 | }
|
70 | 76 | sub,
|
71 | 77 | sup {
|
|
100 | 106 | font-size: .8em !important;
|
101 | 107 | }
|
102 | 108 | blockquote {
|
103 |
| - color: var(--grey10); |
104 |
| - border-left: 4px solid var(--grey2); |
| 109 | + color: var(--rssguard-grey10); |
| 110 | + border-left: var(--rssguard-em-unit) solid var(--rssguard-grey02); |
105 | 111 | margin-left: 0;
|
106 |
| - padding: 0 var(--base-unit); |
| 112 | + padding: 0 var(--rssguard-base-unit); |
107 | 113 | }
|
108 | 114 | pre,
|
109 | 115 | code {
|
110 |
| - background: var(--grey20); |
| 116 | + background-color: var(--rssguard-grey20); |
111 | 117 | }
|
112 | 118 | pre {
|
113 | 119 | --horiz: 13px;
|
114 | 120 |
|
115 |
| - border-radius: var(--brad-unit); |
| 121 | + border-radius: var(--rssguard-em-unit); |
116 | 122 | margin 0;
|
117 | 123 | overflow-x: auto;
|
118 | 124 | padding: 7px var(--horiz);
|
119 | 125 | white-space: pre !important;
|
120 | 126 | width: calc(100wv - calc(var(--horiz) * 2)) !important;
|
121 | 127 | }
|
122 | 128 | code {
|
123 |
| - border-radius: var(--brad-unit); |
124 |
| - color: var(--grey10); |
| 129 | + border-radius: var(--rssguard-em-unit); |
| 130 | + color: var(--rssguard-grey10); |
125 | 131 | padding: 0 .25em;
|
126 | 132 | word-break: break-word;
|
127 | 133 | }
|
|
137 | 143 | table,
|
138 | 144 | th,
|
139 | 145 | td {
|
140 |
| - border: 1px solid var(--grey1); |
| 146 | + border: 1px solid var(--rssguard-grey01); |
| 147 | + } |
| 148 | + li { |
| 149 | + display: list-item; |
| 150 | + } |
| 151 | + ul { |
| 152 | + display: block; |
| 153 | + list-style-type: circle; |
| 154 | + padding-left: 1em; |
| 155 | + } |
| 156 | + ul li ul { |
| 157 | + list-style-type: square; |
| 158 | + } |
| 159 | + ol { |
| 160 | + display: block; |
| 161 | + list-style-type: decimal; |
| 162 | + padding-left: 1em; |
| 163 | + } |
| 164 | + ol li ol { |
| 165 | + list-style-type: lower-roman; |
141 | 166 | }
|
142 | 167 | img {
|
143 |
| - max-height: 100%; |
144 |
| - /* |
145 |
| - * There are few cases in horizontal layout when |
146 |
| - * max-width: 500px; looks better with hi-res images |
147 |
| - */ |
148 |
| - max-width: 100%; |
| 168 | + /* redundant? */ |
| 169 | + display: inline-block; |
| 170 | + |
| 171 | + height: auto; |
| 172 | + width: auto; |
149 | 173 | }
|
150 | 174 | details > summary {
|
151 |
| - border-radius: var(--brad-unit); |
| 175 | + border-radius: var(--rssguard-em-unit); |
152 | 176 | cursor: pointer;
|
153 | 177 | }
|
154 | 178 | details > summary:hover {
|
155 |
| - background: var(--grey20); |
| 179 | + background-color: var(--rssguard-grey20); |
156 | 180 | }
|
157 | 181 | details[open] > summary {
|
158 |
| - background: var(--grey20); |
| 182 | + background-color: var(--rssguard-grey20); |
159 | 183 | }
|
160 | 184 | details > summary:focus {
|
161 | 185 | box-shadow: none;
|
162 | 186 | outline: none;
|
163 | 187 | }
|
164 | 188 | hr {
|
165 |
| - background: var(--grey2); |
| 189 | + background-color: var(--rssguard-grey02); |
166 | 190 | border: none;
|
167 | 191 | display: block;
|
168 | 192 | height: 2px;
|
169 |
| - margin: var(--base-unit) 0; |
| 193 | + margin: var(--rssguard-base-unit) 0; |
170 | 194 | }
|
171 | 195 | iframe {
|
172 | 196 | max-width: 100%;
|
173 |
| - max-height: auto; |
| 197 | + height: auto; |
| 198 | + width: auto; |
| 199 | + } |
| 200 | + select { |
| 201 | + max-width: 100%; |
174 | 202 | }
|
175 | 203 | .rssguard-mwrapper {
|
176 |
| - padding: var(--base-unit) !important; |
| 204 | + padding: var(--rssguard-base-unit) !important; |
177 | 205 | }
|
178 | 206 | .rssguard-mhead .rssguard-msmall,
|
179 | 207 | .rssguard-mhead .rssguard-mlinks {
|
|
194 | 222 | body:hover .rssguard-mwrapper .rssguard-murl {
|
195 | 223 | visibility: visible;
|
196 | 224 | }
|
| 225 | + @media only screen and (max-width: 800px) { |
| 226 | + .rssguard-mbody img { |
| 227 | + max-width: 100% !important; |
| 228 | + } |
| 229 | + } |
| 230 | + .rssguard-mbody img { |
| 231 | + max-width: 450px; |
| 232 | + } |
197 | 233 | .rssguard-mbody {
|
198 | 234 | /*
|
199 | 235 | * For articles without html elements;
|
200 | 236 | * Not sure if I want to apply this to *all*;
|
201 |
| - * otherwise apply only to links |
| 237 | + * otherwise *must* be applied to links in mbody |
202 | 238 | */
|
203 | 239 | word-break: break-word;
|
204 | 240 | }
|
| 241 | + /* fix at least some mess made by above */ |
| 242 | + table { |
| 243 | + word-break: normal; |
| 244 | + } |
205 | 245 | </style>
|
206 | 246 | <style>
|
207 | 247 | html, body, div, span, applet, object, iframe,
|
|
0 commit comments