layout symmetry improvements
[owncloud:apps.git] / news / css / news.css
1 .news_input { 
2     float:left; 
3     font-size:12px; 
4     padding:4px 2px; 
5     border:solid 1px #aacfe4; 
6     width:200px; 
7 }
8
9 .svg { 
10     border: inherit; 
11     background: inherit; 
12 }
13
14 div.add_parentfolder { 
15     position: relative; 
16 }
17
18 #file_upload_start { 
19     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
20     filter:alpha(opacity=0); 
21     opacity:0; 
22     z-index:1001; 
23     width:0;
24     height:0;
25 }
26
27 /**
28  * when there are no feeds in the db 
29  */
30 #firstrun { 
31     position: relative;
32     top: 50%;
33     left: 50%;
34     margin-left: -25em;
35     margin-top: -10em;
36     width: 50em; 
37     height: 20em;
38     text-align: center; 
39     font-weight:bold; 
40     font-size:1.5em; 
41     color:#777; 
42 }
43     
44     #firstrun table {
45         margin: auto;
46     }
47
48     #firstrun small { display: block; font-weight: normal; font-size: 0.8em; margin: .5em 0 1em 0; }
49     #firstrun .button { font-size: 0.7em; }
50
51     #firstrun #selections { 
52         font-size:0.8em; 
53         margin: 2em auto 2em auto; 
54         clear: both; 
55     }
56
57     #addfeedbtn { 
58         background-image: url('%appswebroot%/news/img/rss.svg'); 
59         background-position: .5em center;
60         background-repeat: no-repeat;
61         padding-left: 1.8em; 
62     }
63
64     #importopmlbtn { 
65         background-image: url('%appswebroot%/news/img/opml-icon.svg'); 
66         background-position: .5em center;
67         background-repeat: no-repeat;
68         padding-left: 1.8em; 
69     }
70
71
72 /* feed/folder list */
73 #leftcontent { 
74     width: 21.5em; 
75     margin: 0; 
76     z-index: 0;
77     position: relative;
78     overflow: hidden;
79     top: 0;
80     bottom: 0;
81 }
82
83
84 #feeds { 
85     background-color: #f8f8f8; 
86     position: absolute;
87     top: 0;
88     bottom: 2.8em;
89     left: 0;
90     right: 0;
91     box-sizing: border-box;
92     -moz-box-sizing: border-box;
93 }
94
95     #feeds > ul {
96         height: 100%;
97         overflow: auto;     
98     }
99     
100     .dnd_over {
101         -moz-transition: background-color 200ms ease 0s;
102         transition: background-color 200ms ease 0s; 
103         background-color: #d0d0d0! important;
104     }
105     .dnd_over > ul {
106         padding-bottom: 2.5em;
107         -moz-transition: padding-bottom 500ms ease 0s;
108         transition: padding-bottom 500ms ease 0s; 
109     }
110
111     #feeds .folder {
112         box-sizing: border-box;
113         -moz-box-sizing: border-box;
114         padding: .5em 0 .5em 2.5em !important;
115         background-color: #dfdfdf !important;
116         font-weight: bold ;
117         border-bottom: 1px solid #bbb !important;
118         position: relative;
119         z-index: 1;
120     }
121
122         #feeds .folder a {
123             float: none;
124             display: inline-block;
125             position: relative;
126         }
127
128         #feeds .folder:hover {
129             background-color: #d0d0d0 !important;
130             -moz-transition: background-color 200ms ease 0s;
131             transition: background-color 200ms ease 0s;    
132         }
133
134     #feeds .subscriptions, #feeds .subscriptions:hover {
135         background-image: url('%appswebroot%/news/img/rss.svg'); 
136         background-repeat: no-repeat;
137         background-size: 16px 16px;
138         background-position: .8em center;
139     }
140
141     #feeds .starred, #feeds .starred:hover {
142         background-image: url('%appswebroot%/news/img/starred.svg'); 
143         background-repeat: no-repeat;
144         background-size: 16px 16px;
145         background-position: .8em center;
146         
147     }
148
149         #feeds .subscriptions a, #feeds .starred a {
150             display: inline-block;
151             width: 75%;
152         }
153
154     #feeds li.feed { 
155         position: relative; 
156         box-sizing: border-box;
157         -moz-box-sizing: border-box;
158         border-bottom: 1px solid #ccc;
159         padding-left: 2.5em;
160         -moz-transition: background-color 200ms ease 0s;
161         transition: background-color 200ms ease 0s;
162         background-color: #f1f1f1;
163         z-index: 1;
164         background-size:16px 16px;
165         background-repeat: no-repeat;
166         background-position: .8em center;
167     }
168     
169         #feeds li.feed a { 
170             display: inline-block;
171             overflow: hidden; 
172             text-overflow: ellipsis; 
173             text-align: left; 
174             width: 75%; 
175             font-weight: bold; 
176         }
177                 
178         #feeds li.feed a.all_read, #feeds .all_read { 
179             font-weight: normal; 
180         }
181
182         #feeds li#selected_feed { 
183             background-color: #FF9933 !important; 
184         }
185
186         #feeds li.feed.updating {
187             padding-right: 21px;
188             background-image: url('%webroot%/core/img/loader.gif');
189             background-size: 16px 16px;
190             background-repeat: no-repeat;
191             background-position: right center;
192         }
193         
194         #feeds li.feed:hover { 
195             background-color: #ddd;
196         }
197
198             #feeds li.feed .feeds_delete, 
199             #feeds li.feed .feeds_edit {
200                 display: none;
201             }
202
203             #feeds li.feed:hover .unreaditemcounter {
204                 display: none;
205             }
206
207             #feeds li.feed:hover .feeds_delete, 
208             #feeds li.feed:hover .feeds_edit, 
209             #feeds .collapsable:hover .feeds_delete, 
210             #feeds .collapsable:hover .feeds_edit {
211                 display: inline-block;
212             }
213
214         #feeds .feeds_delete { 
215             position: absolute; 
216             right: 0.1em; 
217             background: url('%webroot%/core/img/actions/delete.svg') no-repeat center; 
218             display: none; 
219             padding: 0; 
220             margin: -8px 0 0 0; 
221             top: 50%; 
222         }
223         
224         #feeds .feeds_edit { 
225             position: absolute; 
226             right: 1.6em; 
227             background: url('%webroot%/core/img/actions/rename.svg') no-repeat center; 
228             display: none; 
229             padding: 0; 
230             margin: -8px 0 0 0; 
231             top: 50%; 
232         }
233
234         #feeds .unreaditemcounter { 
235             position: relative; 
236             top: .3em;
237             right: .3em;
238             background: #5E5E5E; 
239             border-radius: 5px; 
240             padding: 2px 5px; 
241             color: white; 
242             text-align: center; 
243             font-weight: normal;
244             margin: 0;
245             display: none;
246         }
247         
248             #feeds .unreaditemcounter.all_read { 
249                 display: none !important;
250             }
251
252         #feeds li.collapsable_container { 
253             background-color: #dfdfdf;
254             font-weight: bold;
255             padding: 0;
256             border: 0;
257             border-bottom: 1px solid #bbb;
258             position: relative;
259             z-index: 1;
260         }
261
262         #feeds li.collapsable_container.open { 
263             background-image: linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%);
264             background-image: -o-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%);
265             background-image: -moz-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%);
266             background-image: -webkit-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%);
267             background-image: -ms-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%);
268             font-weight: bold;
269             padding: 0;
270             border: 0;
271             border-bottom: 1px solid #bbb;
272             border-top: 1px solid #bbb;
273             -webkit-box-shadow: inset 0 0 5px -1px #bbb;
274             box-shadow: inset 0 0 5px -1px #bbb; 
275         }
276
277             #feeds li.collapsable_container:hover { 
278                 background-color: #d0d0d0;
279                 -moz-transition: background-color 200ms ease 0s;
280                 transition: background-color 200ms ease 0s;
281             }
282         
283
284
285         #feeds li.collapsable_container.open > ul { 
286             margin: 0 8px 8px 8px; 
287             position: relative;
288             z-index: 1;
289         }
290
291             #feeds li.collapsable_container > ul > li {
292                 border: 1px solid #ccc;
293                 border-bottom: 0;
294             }
295
296             #feeds li.collapsable_container > ul > li:last-child {
297                 border: 1px solid #ccc;
298             }            
299
300         #feeds div.collapsable { 
301             position: relative;
302             z-index: 1; 
303             border-radius: 5px; 
304         }
305
306         
307         #feeds .collapsable_trigger { 
308             border: none ; 
309             margin: 0 0 0 .8em; 
310             padding: 0; 
311             border-radius: 0; 
312             box-shadow: none; 
313             vertical-align: middle !important; 
314             background: url('%webroot%/core/img/places/folder.svg') no-repeat; 
315             outline: none;
316             opacity: 1; 
317         }
318
319         #feeds .collapsable_container:hover .collapsable_trigger.triggerable {
320             background-image: url('%webroot%/core/img/actions/triangle-s.svg');
321             -moz-transform: none;
322             transform: none;
323         }
324
325         #feeds .collapsable_container:hover .collapsable_trigger.triggered {
326             background-image: url('%webroot%/core/img/actions/triangle-s.svg');
327             -moz-transform: rotate(-90deg);
328             transform: rotate(-90deg);
329         }
330         
331         #feeds .collapsable_title { 
332             padding: .5em 0 .5em .5em; 
333             line-height: 1.5em;
334             float: none;
335             display: inline-block;
336             position: relative;
337         }
338
339
340 /* feed settings */
341 #feed_settings { 
342     padding: 0; 
343     bottom: 0px; 
344     overflow:visible; 
345     height:2.8em; 
346     width: 21.5em; 
347     margin:0; 
348     background:#eee; 
349     border-top:1px 
350     solid #ccc; 
351     position:fixed; 
352 }
353     
354     #feed_settings .controls {
355         height: 100%;
356         width: 100%;
357     }
358
359     #feed_settings .controls > li {
360         display: inline-block;
361         float: left;
362         margin: 0;
363         padding: 0;
364
365     }
366
367     #feed_settings button {
368         height: 2.4em;
369         width: 2.4em;
370         padding: .2em .1em 0 .1em;
371         margin: .15em 0 0 .15em;
372     }
373
374     #feed_settings .controls > li:last-child button {
375         margin-right: .3em;
376     }
377
378     #feed_settings #view button {
379         padding-top: .2em;
380         background-size: 80%;
381         background-position: center;
382         background-repeat: no-repeat;
383     }
384
385     #feed_settings #view.show_all button {
386         background-image: url('%appswebroot%/news/img/eye_all.svg'); 
387     }
388
389     #feed_settings #view.show_unread button {
390         background-image: url('%appswebroot%/news/img/eye_unread.svg'); 
391     }
392
393     #feed_settings #addfeedfolder {
394         margin: 0 .3em .3em .3em;
395     }
396
397         #feed_settings #addfeedfolder #addfolder { 
398             background: url('%webroot%/core/img/places/folder.svg') no-repeat 10px center; 
399         }
400
401         #feed_settings #addfeedfolder #addfeed { 
402             background: url('%appswebroot%/news/img/rss.svg') no-repeat 10px center; 
403         }
404
405         /*
406         #feed_settings #addfeedfolder:hover ul#feedfoldermenu{
407             display: block;
408         }*/
409
410         #feed_settings ul#feedfoldermenu { 
411             display: none;
412             background:#EEEEEE; 
413             background:-webkit-gradient(linear, 0 0, 0 100%, from(#DCDCDC), to(#EEEEEE)); 
414             background:-moz-linear-gradient(#DCDCDC, #EEEEEE); 
415             background:-o-linear-gradient(#DCDCDC, #EEEEEE); 
416             background:linear-gradient(#DCDCDC, #EEEEEE); 
417             position:fixed; 
418             margin-left: 0; 
419             bottom: 2.8em; 
420             border-left:1px solid #ccc; 
421             border-top:1px solid #ccc; 
422             border-right:1px solid #ccc; 
423             border-bottom: 0;
424             -moz-box-shadow: 0 -3px 3px -3px #000; 
425             -webkit-box-shadow: 0 -3px 3px -3px #000; 
426             box-shadow: 0 -3px 3px -3px #000;
427         }
428
429             #feed_settings ul#feedfoldermenu li { 
430                 padding: 0 1em 0 2.5em; 
431                 float: none !important; 
432                 text-align: left; 
433             }
434
435                 #feed_settings ul#feedfoldermenu li:hover {
436                     background-color: #ccc !important;
437                 }
438
439
440
441
442 /* item view */
443 #rightcontent { 
444     top: 3.5em !important; 
445     box-sizing: border-box; 
446     -moz-box-sizing: border-box; 
447     left: 34.1em;
448 }
449
450     /**
451      * Area below the feed title and controls
452      */
453     #rightcontent #feed_items {
454         box-sizing: border-box; 
455         -moz-box-sizing: border-box; 
456         overflow: auto;
457         height: 100%;
458     }
459
460         #rightcontent #feed_items.loading {
461             background-image: url('%webroot%/core/img/loading.gif'); 
462             background-position: center;
463             background-repeat: no-repeat;
464             background-size: 
465         }
466
467         #rightcontent #feed_items li:active { 
468             background: none; 
469         }
470
471         /**
472          * Rules for a single feed item
473          */
474         .feed_item {
475             border-top: 1px solid #ccc;
476             min-height: 100px;
477             background-image: linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
478             background-image: -o-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
479             background-image: -moz-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
480             background-image: -webkit-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
481             background-image: -ms-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em);
482             padding: 2.5em 0 0 0;
483         }
484
485         .feed_item:first-child {
486             border-top: 0;
487         }
488
489             /**
490              * Utils panel
491              */
492             .utils {
493                 height: 2em;
494                 margin: 0 0 0 1em;
495                 float: left;
496             }
497
498             /**
499              * Primary feed utils which are always shown
500              */
501             .feed_item .primary_item_utils {
502                 float: left;
503             }
504
505                 .feed_item .primary_item_utils li { 
506                     display: inline-block; 
507                     line-height: 1.5em;
508                     font-size: 1em;
509                     color: #aaa;
510                     float: left;
511                     margin-left: ;
512                     cursor: default;
513                 }
514
515                 .feed_item .primary_item_utils li:first-child { margin: 0}
516                 .feed_item .primary_item_utils li.star { 
517                     background-image: url('%appswebroot%/news/img/inactive_star.svg');
518                     background-repeat: no-repeat;
519                     background-size: 1.5em 1.5em;
520                     width: 1.5em;
521                     height: 1.5em;
522                     cursor: pointer;
523                 }
524
525                 .feed_item .primary_item_utils li.star.important,
526                 .feed_item .primary_item_utils li.star:hover {
527                     background-image: url('%appswebroot%/news/img/active_star.svg');
528                 }
529
530             /**
531              * Feed title
532              */
533             .feed_item h1.item_title { 
534                 font-size: 1.5em;
535                 margin: 0 13em 0 2.1em;
536                 font-weight: bold;
537             }
538
539                 .feed_item h1.item_title a { 
540                     color: #222; 
541                 }
542                     .feed_item h1.item_title a:hover { 
543                         color: #222; 
544                         text-decoration: underline; 
545                     }
546             
547             /**
548              * Feed title when read
549              */
550             .feed_item.read h1.item_title { 
551                 font-weight: normal;
552             }
553
554                 .feed_item.read h1.item_title a { 
555                     color: #888; 
556                 }
557
558             /**
559              * Author of the feed
560              */
561             .feed_item h2.item_author {
562                 color: #aaa;
563                 font-size: 1.1em;
564                 margin-left: 3em;
565             }
566
567             /**
568              * Feed timestamp
569              */
570             .timeago {
571                 float: right; 
572                 color: #aaa;
573                 margin: 0 1.2em 0 0;
574                 font-size: 1.1em;
575             }
576
577             /**
578              * Body of the feed item
579              */
580             .feed_item div.body { 
581                 overflow-y: hidden;
582                 padding: .5em 3em 0 3em; 
583                 max-width: 55em;
584                 font-size: 1.1em;
585             }
586
587                 .feed_item div.body p { 
588                     line-height: 1.5; 
589                     margin: 10px 0; 
590                 }
591                 
592                 .feed_item div.body a { 
593                     color: #0000ff; 
594                     text-decoration: underline; 
595                 }
596                 
597                 .feed_item div.body ul { 
598                     padding-left: 15px; 
599                     list-style-type: disc; 
600                 }
601
602                     .feed_item div.body ul li { 
603                         cursor: default; 
604                     }
605             
606                 .feed_item div.body pre { 
607                     padding: 5px; 
608                     background-color: #dadada; 
609                     border: 1px solid #ccc; 
610                 }
611                 
612                     .feed_item div.body pre code { 
613                         font-family: monospace; 
614                         font-size: 1.5em;
615                     }
616         
617
618         /**
619          * Line with utils at the bottom
620          */        
621         .bottom_utils {
622             width: 100%;
623             height: 2.5em;
624             margin: 0;
625             padding: 0;
626             box-sizing: border-box; 
627             -moz-box-sizing: border-box; 
628         }
629
630             /**
631              * Secondary feed items which are only shown on hover
632              */
633             .feed_item .secondary_item_utils {
634                 display: none;
635                 color: #aaa;
636                 float: right;
637                 margin: 0 1.2em;
638             }
639             
640             .feed_item:hover .secondary_item_utils {
641                 display: block;
642             }
643
644                 .feed_item:hover .secondary_item_utils li.keep_unread {
645                     cursor: pointer;
646                    
647                 }
648
649                 .feed_item .secondary_item_utils li input[type=checkbox]{ 
650                 }
651
652 /* dialog/menues */
653 div.dialog { 
654     overflow: visible; 
655 }
656
657 #dropdownBtn { 
658     width: 12.5em; 
659     padding-left: 0; 
660     padding-right:20px; 
661     background: url('%webroot%/core/img/actions/triangle-s.svg') no-repeat right center; 
662     text-align: left; 
663     overflow: hidden;
664 }
665
666 ul#dropdownmenu { 
667     left: 0em; 
668 }
669
670
671 ul.menu { 
672     position: absolute; 
673     z-index:1; 
674     margin-left: 0.3em; 
675     display: none; 
676     background:#EEEEEE; 
677     background:-webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#f1f1f1)); 
678     background:-moz-linear-gradient(#eee, #f1f1f1); 
679     background:-o-linear-gradient(#eee, #f1f1f1); 
680     background:linear-gradient(#eee, #f1f1f1); 
681     border: 1px solid #ccc;
682 }
683
684     ul.menu .menuItem {
685         padding: 2px 5px;
686         min-width: 11em;
687     }
688
689         ul.menu .menuItem:hover {
690             background-color: #ddd;
691         }
692
693 .popup.bottomleft {
694     left: 34.8em;
695     /*left: 3.8em;*/
696 }
697
698
699