]> git.wh0rd.org - tt-rss.git/blame - css/cdm.less
style updates for 3 panel mode
[tt-rss.git] / css / cdm.less
CommitLineData
481ab9ac
AD
1.cdm {
2 margin-right : 4px;
3
4 .cdmHeader, .cdmFooter {
5 display : table;
6 }
7
8 .cdmHeader img, .cdmHeader input, .cdmFooter img {
9 vertical-align : middle;
10 }
11
12 .cdmHeader > div, .cdmFooter > div {
13 white-space : nowrap;
14 }
15
16 .cdmHeader > span, .cdmFooter > span.left {
17 width : 100%;
18 }
19
20 .cdmHeader img, .cdmFooter img {
21 margin : 0px 4px;
22 }
23
24 .cdmHeader {
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
58 .cdmFooter {
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
71 .cdmIntermediate {
72 margin : 10px;
73 }
74
75 .cdmContentInner {
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
92 .cdmIntermediate img,
93 .cdmIntermediate video,
94 .cdmContentInner img,
95 .cdmContentInner video {
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
106 .cdmFooter {
9dd336a2
AD
107 border: 0px solid #ddd;
108 border-bottom-width: 1px;
481ab9ac
AD
109 }
110
111 > hr {
112 margin-top : 0px;
113 margin-bottom : 0px;
114 }
115
116}
117
118.cdm.expandable {
119 background-color : #f0f0f0;
9dd336a2
AD
120 border: 0px solid #ddd;
121 border-bottom-width: 1px;
481ab9ac
AD
122
123 > hr {
124 display : none;
125 }
126
127 div.cdmHeader span.titleWrap {
128 white-space : nowrap;
129 text-overflow : ellipsis;
130 overflow : hidden;
131 max-width : 500px;
132 }
133}
134
135.cdm.expandable.Unread {
136 background : white;
137}
138
139.cdm.expandable.Selected {
140 background : #f9fbff;
141}
142
143.cdm.expandable.active {
144 background : white ! important;
145}
146
147div.cdm.expandable.active div.cdmHeader span.titleWrap {
148 white-space : normal;
149}
150
151div.cdm.expandable div.cdmHeader a.title {
152 font-weight : 600;
4d10b4ab 153 color : @default-text;
481ab9ac
AD
154 font-size : 14px;
155 -webkit-transition : color 0.2s;
156 transition : color 0.2s;
157 text-rendering: optimizelegibility;
9dd336a2 158 font-family : @fonts-ui-bold;
481ab9ac
AD
159}
160
161div.cdm.expandable.Unread div.cdmHeader a.title {
162 color : black;
163}
164
165div.cdm.expandable.active div.cdmHeader a.title {
f9ffef66 166 color: @color-link;
481ab9ac
AD
167 font-size: 16px;
168 font-weight: 600;
169 text-rendering: optimizelegibility;
9dd336a2 170 font-family: @fonts-ui-bold;
481ab9ac
AD
171}
172
173div.cdm.expanded div.cdmHeader {
174 background : transparent ! important;
175}
176
177div.cdm.expanded div.cdmHeader a.title {
178 font-size : 16px;
179 color : #999;
180 font-weight : 600;
181 -webkit-transition : color 0.2s;
182 transition : color 0.2s;
183 text-rendering: optimizelegibility;
9dd336a2 184 font-family : @fonts-ui-bold;
481ab9ac
AD
185}
186
187div.cdm.expanded.active {
188 background : white;
189}
190
191div.cdm.expanded.active div.cdmHeader a.title {
f9ffef66 192 color : @color-link;
481ab9ac
AD
193}
194
195div.cdm.expanded.Unread div.cdmHeader a.title {
196 color : black;
197}
198
199div.cdm.expanded div.cdmContent {
4d10b4ab 200 color : @default-text;
481ab9ac
AD
201}
202
203div.cdm.expanded.Unread div.cdmContent {
204 color : black;
205}
206
207div.cdm.active div.cdmContent {
208 color : black;
209}
210
211span.cdmExcerpt {
212 white-space : nowrap;
213 font-size : 11px;
214 color : #999;
215 font-weight : normal;
216 cursor : pointer;
217}
218
219div.cdmContent div.postEnclosures {
220 margin-top : 1em;
4d10b4ab 221 color : @default-text;
481ab9ac
AD
222}
223
224div.cdmFeedTitle {
f9ffef66 225 border: 0px solid @color-link;
9dd336a2 226 border-bottom-width: 1px;
481ab9ac
AD
227 padding : 5px 3px 5px 5px;
228}
229
230div.cdmFeedTitle a.title {
4d10b4ab 231 color : @default-text;
481ab9ac
AD
232 font-weight : bold;
233}
234
235div.cdmFeedTitle a {
4d10b4ab 236 color : @default-text;
481ab9ac
AD
237}
238
239div.cdmFeedTitle a:hover {
f9ffef66 240 color : @color-link;
481ab9ac
AD
241}
242
243div.cdmHeader span.hlFeed {
244 float : right;
245 font-weight : normal;
246 font-style : italic;
247}
248
249div.cdmHeader div.hlFeed, div.cdmHeader div.hlFeed a {
250 vertical-align : middle;
4d10b4ab 251 color : @default-text;
481ab9ac
AD
252 font-weight : normal;
253 font-style : italic;
254 font-size : 11px;
255}
256
257div.cdm .hlFeed a {
258 border-radius : 4px;
259 display : inline-block;
260 padding : 1px 4px 1px 4px;
261}
262
263div.cdmContentInner p {
264 /*max-width : 650px;*/
265 -webkit-hyphens: auto;
266 -moz-hyphens: auto;
267 hyphens: auto;
268}
269
270div.cdmContentInner iframe {
271 min-width : 50%;
272 max-width : 98%;
273}
274
275div.cdmHeader span.author {
276 white-space : nowrap;
4d10b4ab 277 color : @default-text;
481ab9ac
AD
278 font-size : 11px;
279 font-weight : normal;
280}
281
282div#floatingTitle {
283 position : absolute;
284 z-index : 5;
285 top : 0px;
286 right : 0px;
287 left : 0px;
9dd336a2
AD
288 border: 0px solid #ddd;
289 border-bottom-width: 1px;
481ab9ac 290 background : white;
4d10b4ab 291 color : @default-text;
481ab9ac
AD
292 box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
293
294 > * {
295 display : table-cell;
296 white-space : nowrap;
297 vertical-align : middle;
298 padding : 9px 5px;
299 }
300
301 img {
302 margin-right : 4px;
303 margin-left : 4px;
304 }
305
306 span.author {
4d10b4ab 307 color : @default-text;
481ab9ac
AD
308 font-size : 11px;
309 font-weight : normal;
310 }
311
312 a.title {
313 font-size : 16px;
314 color : #999;
315 -webkit-transition : color 0.2s;
316 transition : color 0.2s;
317 font-weight : 600;
318 text-rendering: optimizelegibility;
9dd336a2 319 font-family : @fonts-ui-bold;
481ab9ac
AD
320 }
321
322 img.anchor {
323 margin-left : 0px;
324 }
325
326 div.hlFeed {
327 padding-right : 10px;
4d10b4ab 328 color : @default-text;
481ab9ac
AD
329 font-weight : normal;
330 font-style : italic;
331 font-size : 11px;
332 white-space : nowrap;
333 }
334
335 div.hlFeed a {
336 border-radius : 4px;
337 display : inline-block;
338 padding : 1px 4px 1px 4px;
339 }
340
341 span.updated {
342 padding-right : 10px;
343 white-space : nowrap;
4d10b4ab 344 color : @default-text;
481ab9ac
AD
345 font-size : 11px;
346 }
347
348 div.hlFeed a {
4d10b4ab 349 color : @default-text;
481ab9ac
AD
350 }
351
352 span.titleWrap {
353 width : 100%;
354 white-space : normal;
355 }
356
357 .dijit,
358 img.hlScorePic {
359 display : none;
360 }
361
362}
363
364div#floatingTitle.Unread a.title {
365 color : black;
366}
367
368.cdm.high .cdmHeader {
369 a.title.high,
370 .cdmExcerpt,
371 span.author {
372 color : #00aa00;
373 }
374}
375
376.cdm.Unread.high .cdmHeader {
377 a.title.high,
378 .cdmExcerpt,
379 span.author {
380 color : #00dd00;
381 }
382}
383
384.cdm .cdmHeader a.title.low,
385.cdm.low .cdmHeader .cdmExcerpt,
386.cdm.Unread .cdmHeader a.title.low,
387.cdm.Unread.low .cdmHeader .cdmExcerpt,
388.cdm.low .cdmHeader span.author {
389 color : #909090;
390 text-decoration : line-through;
391}
392
393.cdmFeedTitle {
394
395 > * {
396 display : table-cell;
397 vertical-align : middle;
398 }
399
400 a.title {
401 width : 100%;
402 }
403
404 a.catchup {
405 text-align : right;
4d10b4ab 406 color : @default-text;
481ab9ac
AD
407 padding-right : 10px;
408 font-size : 11px;
409 white-space : nowrap;
410 }
411
412 a.catchup:hover {
f9ffef66 413 color : @color-link;
481ab9ac
AD
414 }
415
416}