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