]> git.wh0rd.org - tt-rss.git/blame - css/cdm.less
bring back (debloated) version of unexpanded combined mode
[tt-rss.git] / css / cdm.less
CommitLineData
481ab9ac
AD
1.cdm {
2 margin-right : 4px;
3
8359ca6d 4 .header, .footer {
481ab9ac
AD
5 display : table;
6 }
7
8359ca6d 8 .header img, .header input, .footer img {
481ab9ac
AD
9 vertical-align : middle;
10 }
11
8359ca6d 12 .header > div, .footer > div {
481ab9ac
AD
13 white-space : nowrap;
14 }
15
8359ca6d 16 .header > span, .footer > span.left {
481ab9ac
AD
17 width : 100%;
18 }
19
8359ca6d 20 .header img, .footer img {
481ab9ac
AD
21 margin : 0px 4px;
22 }
23
8359ca6d 24 .header {
481ab9ac
AD
25 > * {
26 display : table-cell;
27 padding : 5px;
28 }
29
30 span.updated {
4d10b4ab 31 color : @default-text;
481ab9ac
AD
32 font-weight : normal;
33 font-size : 11px;
34 white-space : nowrap;
35 vertical-align : middle;
36 }
37
38 input {
39 margin-right : 5px;
40 }
41
42 div.updPic {
43 width : 25px;
44 display : inline-block;
45 text-align : center;
46 }
47
48 div.updPic img {
49 vertical-align : middle;
50 }
51
52 input {
53 margin-left : 4px;
54 margin-right : 4px;
55 }
56 }
57
8359ca6d 58 .footer {
481ab9ac
AD
59 height : 30px;
60 padding-left : 5px;
61 font-weight : normal;
4d10b4ab 62 color : @default-text;
481ab9ac
AD
63 clear : both;
64
65 > * {
66 display : table-cell;
67 vertical-align : middle;
68 }
69 }
70
8359ca6d 71 .intermediate {
481ab9ac
AD
72 margin : 10px;
73 }
74
8359ca6d 75 .content-inner {
481ab9ac
AD
76 margin : 10px;
77 line-height : 1.5;
78 font-size : 16px;
79
80 h1 {
81 font-size : 16px;
82 }
83
84 h2,
85 h3,
86 h4 {
87 font-size : 15px;
88 }
89
90 }
91
8359ca6d
AD
92 .intermediate img,
93 .intermediate video,
94 .content-inner img,
95 .content-inner video {
481ab9ac
AD
96 border-width : 0px;
97 max-width : 98%;
98 height : auto;
99 }
100}
101
102.cdm.expanded {
103 margin-top : 4px;
104 margin-bottom : 4px;
105
5aa9c604
AD
106 .collapse {
107 display : none;
108 }
109
8359ca6d 110 .footer {
9dd336a2
AD
111 border: 0px solid #ddd;
112 border-bottom-width: 1px;
481ab9ac
AD
113 }
114
115 > hr {
116 margin-top : 0px;
117 margin-bottom : 0px;
118 }
119
120}
121
8359ca6d 122div.cdm.expanded div.header {
481ab9ac
AD
123 background : transparent ! important;
124}
125
8359ca6d 126div.cdm.expanded div.header a.title {
481ab9ac
AD
127 font-size : 16px;
128 color : #999;
129 font-weight : 600;
6184f526 130 transition : color 0.2s, background 0.2s;
481ab9ac 131 text-rendering: optimizelegibility;
9dd336a2 132 font-family : @fonts-ui-bold;
481ab9ac
AD
133}
134
135div.cdm.expanded.active {
136 background : white;
137}
138
8359ca6d 139div.cdm.expanded.active div.header a.title {
f9ffef66 140 color : @color-link;
481ab9ac
AD
141}
142
8359ca6d 143div.cdm.expanded.Unread div.header a.title {
481ab9ac
AD
144 color : black;
145}
146
8359ca6d 147div.cdm.expanded div.content {
4d10b4ab 148 color : @default-text;
481ab9ac
AD
149}
150
8359ca6d 151div.cdm.expanded.Unread div.content {
481ab9ac
AD
152 color : black;
153}
154
8359ca6d 155div.cdm.active div.content {
481ab9ac
AD
156 color : black;
157}
158
07fd4f8d
AD
159.cdm {
160 div.content div.postEnclosures {
161 margin-top: 1em;
162 color: @default-text;
163 }
481ab9ac 164
07fd4f8d
AD
165 div.feed-title {
166 border: 0px solid @color-link;
167 border-bottom-width: 1px;
168 padding: 5px 3px 5px 5px;
169 }
481ab9ac 170
07fd4f8d
AD
171 div.feed-title a.title {
172 color: @default-text;
173 font-weight: bold;
174 }
481ab9ac 175
07fd4f8d
AD
176 div.feed-title a {
177 color: @default-text;
178 }
481ab9ac 179
07fd4f8d
AD
180 div.feed-title a:hover {
181 color: @color-link;
182 }
481ab9ac 183
07fd4f8d
AD
184 div.header span.feed {
185 float: right;
186 font-weight: normal;
187 font-style: italic;
188 }
481ab9ac 189
07fd4f8d
AD
190 div.header div.feed, div.header div.feed a {
191 vertical-align: middle;
192 color: @default-text;
193 font-weight: normal;
194 font-style: italic;
195 font-size: 11px;
196 }
481ab9ac 197
07fd4f8d
AD
198 div.content-inner p {
199 /*max-width : 650px;*/
200 -webkit-hyphens: auto;
201 -moz-hyphens: auto;
202 hyphens: auto;
203 }
481ab9ac 204
07fd4f8d
AD
205 div.content-inner iframe {
206 min-width : 50%;
207 max-width : 98%;
208 }
481ab9ac 209
07fd4f8d
AD
210 div.header span.author {
211 white-space : nowrap;
212 color : @default-text;
213 font-size : 11px;
214 font-weight : normal;
215 }
481ab9ac 216
07fd4f8d
AD
217 .feed a {
218 border-radius : 4px;
219 display : inline-block;
220 padding : 1px 4px 1px 4px;
221 }
481ab9ac
AD
222}
223
224div#floatingTitle {
225 position : absolute;
226 z-index : 5;
227 top : 0px;
228 right : 0px;
229 left : 0px;
9dd336a2
AD
230 border: 0px solid #ddd;
231 border-bottom-width: 1px;
481ab9ac 232 background : white;
4d10b4ab 233 color : @default-text;
481ab9ac
AD
234 box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
235
236 > * {
237 display : table-cell;
238 white-space : nowrap;
239 vertical-align : middle;
240 padding : 9px 5px;
241 }
242
243 img {
244 margin-right : 4px;
245 margin-left : 4px;
246 }
247
248 span.author {
4d10b4ab 249 color : @default-text;
481ab9ac
AD
250 font-size : 11px;
251 font-weight : normal;
252 }
253
254 a.title {
255 font-size : 16px;
256 color : #999;
6184f526 257 transition : color 0.2s, background 0.2s;
481ab9ac
AD
258 font-weight : 600;
259 text-rendering: optimizelegibility;
9dd336a2 260 font-family : @fonts-ui-bold;
481ab9ac
AD
261 }
262
263 img.anchor {
264 margin-left : 0px;
265 }
266
8359ca6d 267 div.feed {
481ab9ac 268 padding-right : 10px;
4d10b4ab 269 color : @default-text;
481ab9ac
AD
270 font-weight : normal;
271 font-style : italic;
272 font-size : 11px;
273 white-space : nowrap;
274 }
275
8359ca6d 276 div.feed a {
481ab9ac
AD
277 border-radius : 4px;
278 display : inline-block;
279 padding : 1px 4px 1px 4px;
280 }
281
282 span.updated {
283 padding-right : 10px;
284 white-space : nowrap;
4d10b4ab 285 color : @default-text;
481ab9ac
AD
286 font-size : 11px;
287 }
288
8359ca6d 289 div.feed a {
4d10b4ab 290 color : @default-text;
481ab9ac
AD
291 }
292
293 span.titleWrap {
294 width : 100%;
295 white-space : normal;
296 }
297
298 .dijit,
8359ca6d 299 img.score-pic {
481ab9ac
AD
300 display : none;
301 }
302
07fd4f8d
AD
303 .feed-title {
304 > * {
305 display : table-cell;
306 vertical-align : middle;
307 }
308
309 a.title {
310 width : 100%;
311 }
312
313 a.catchup {
314 text-align : right;
315 color : @default-text;
316 padding-right : 10px;
317 font-size : 11px;
318 white-space : nowrap;
319 }
320
321 a.catchup:hover {
322 color : @color-link;
323 }
324
325 }
481ab9ac
AD
326}
327
328div#floatingTitle.Unread a.title {
329 color : black;
330}
331
8359ca6d 332.cdm.high .header {
481ab9ac 333 a.title.high,
5aa9c604 334 .excerpt,
481ab9ac
AD
335 span.author {
336 color : #00aa00;
337 }
338}
339
8359ca6d 340.cdm.Unread.high .header {
481ab9ac 341 a.title.high,
5aa9c604 342 .excerpt,
481ab9ac
AD
343 span.author {
344 color : #00dd00;
345 }
346}
347
8359ca6d 348.cdm .header a.title.low,
5aa9c604 349.cdm.low .header .excerpt,
8359ca6d 350.cdm.Unread .header a.title.low,
5aa9c604 351.cdm.Unread.low .header .excerpt,
8359ca6d 352.cdm.low .header span.author {
481ab9ac
AD
353 color : #909090;
354 text-decoration : line-through;
355}
356
5aa9c604
AD
357.cdm.expandable {
358 background-color : #f0f0f0;
359 border: 0px solid #ddd;
360 border-bottom-width: 1px;
361
362 > hr {
363 display : none;
364 }
365
366 div.header span.titleWrap {
367 white-space : nowrap;
368 text-overflow : ellipsis;
369 overflow : hidden;
370 max-width : 500px;
371 }
372}
373
374.cdm.expandable.Unread {
375 background : white;
376}
377
378.cdm.expandable.Selected:not(.active) {
379 background : desaturate(@color-accent, 25%);
380
381 a,
382 .header a.title,
383 span {
384 color : white;
385 }
386}
387
388.cdm.expandable.active {
389 background : white ! important;
390}
391
392div.cdm.expandable.active div.header span.titleWrap {
393 white-space : normal;
394}
395
396div.cdm.expandable div.header a.title {
397 font-weight : 600;
398 color : @default-text;
399 font-size : 14px;
400 transition : color 0.2s, background 0.2s;
401 text-rendering: optimizelegibility;
402 font-family : @fonts-ui-bold;
403}
404
405div.cdm.expandable.Unread div.header a.title {
406 color : black;
407}
408
409div.cdm.expandable.active div.header a.title {
410 color: @color-link;
411 font-size: 16px;
412 font-weight: 600;
413 text-rendering: optimizelegibility;
414 font-family: @fonts-ui-bold;
415}
416
417div.cdm.expandable:not(.active) {
418 cursor : pointer;
419
420 .content, .collapse {
421 display : none;
422 }
423}