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