]> git.wh0rd.org Git - tt-rss.git/blob - css/tt-rss.css
add some experimental font family updates for headlines and chrome elements
[tt-rss.git] / css / tt-rss.css
1 body#ttrssMain, body#ttrssPrefs, body#ttrssLogin, body {
2         background : white;
3         color : black;
4         margin : 0px;
5         padding : 0px;
6         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
7         font-size: 14px;
8 }
9
10 body#ttrssPrefs {
11         background-color : #ecf4ff;
12 }
13
14 body#ttrssPrefs #footer, body#ttrssPrefs #header {
15         background-color : #ecf4ff;
16         padding-left : 8px;
17         padding-right : 8px;
18 }
19
20 div.postReply {
21         padding : 0px;
22 }
23
24 div.postReply div.postHeader {
25         padding : 5px;
26         margin-right : 4px;
27         color : #909090;
28         border-width : 0px 0px 1px 0px;
29         border-color : #ddd;
30         border-style : solid;
31 }
32
33 div.postReply div.postTitle {
34         overflow : hidden;
35         text-overflow: ellipsis;
36         white-space : nowrap;
37         font-weight : 600;
38         text-rendering: optimizelegibility;
39         font-family : "Segoe WP Semibold", "Segoe UI Semibold", 
40                 "Segoe UI Web Semibold", "Segoe UI", "Helvetica Neue",
41                 Helvetica, Arial, sans-serif;
42 }
43
44 div.postReply div.postDate {
45         padding-left : 10px;
46 }
47
48 div.postReply div.postContent {
49         padding : 10px;
50 }
51
52 div.postReply div.postContent img {
53         border-width : 0px;
54         max-width : 98%;
55         height: auto;
56 }
57
58 div.postReply div.postEnclosures {
59         margin-top : 1em;
60         color : #555;
61 }
62
63 div.postReply img.tagsPic {
64         width : 16px;
65         height : 16px;
66         margin-left : 4px;
67         vertical-align : middle;
68 }
69
70 div.articleNote {
71         background-color : #fff7d5;
72         padding : 5px;
73         margin : 5px;
74         border-style : solid;
75         border-color : #e7d796;
76         border-width : 1px;
77         background-color : #fff7d5;
78         color : #9a8c59;
79 }
80
81 div.articleNote div.noteEdit {
82         float : right;
83         cursor : pointer;
84 }
85
86 div.postReply span.author {
87         font-size : 12px;
88 }
89
90 h1 {
91         font-size : 18px;
92         font-weight : 600;
93         text-rendering: optimizelegibility;
94         font-family : "Segoe WP Semibold", "Segoe UI Semibold", 
95                 "Segoe UI Web Semibold", "Segoe UI", "Helvetica Neue",
96                 Helvetica, Arial, sans-serif;
97 }
98
99 h2 {
100         font-size : 16px;
101         font-weight : 600;
102         border-width : 0px 0px 1px 0px;
103         border-style : solid;
104         border-color : #ecf4ff;
105         text-rendering: optimizelegibility;
106         font-family : "Segoe WP Semibold", "Segoe UI Semibold", 
107                 "Segoe UI Web Semibold", "Segoe UI", "Helvetica Neue",
108                 Helvetica, Arial, sans-serif;
109 }
110
111 h3 {
112         font-size : 12px;
113         border-width : 0px 0px 1px 0px;
114         border-style : solid;
115         border-color : #ecf4ff;
116         font-weight : 600;
117         text-rendering: optimizelegibility;
118         font-family : "Segoe WP Semibold", "Segoe UI Semibold", 
119                 "Segoe UI Web Semibold", "Segoe UI", "Helvetica Neue",
120                 Helvetica, Arial, sans-serif;
121 }
122
123 hr {
124         border-width : 0px 0px 1px 0px;
125         border-style : solid;
126         border-color : #ccc;
127 }
128
129 a {
130         color : #4684ff;
131         text-decoration : none;
132 }
133
134 a:hover {
135         color : #88b0f0;
136 }
137
138 #piggie {
139         z-index : 999;
140         position : absolute;
141 }
142
143 #notify {
144         bottom : 10px;
145         right : 20px;
146         border-width : 1px;
147         border-style : solid;
148         position : absolute;    
149         font-size : 12px;
150         z-index : 99;
151         max-width : 200px;
152         min-width : 100px;
153         padding : 5px;
154         -width : 200px;
155 }
156
157 #notify img {
158         vertical-align : middle;
159         max-height : 14px;
160 }
161
162 #notify span.msg {
163         width : 100%;
164 }
165
166 #notify span.close {
167         text-align : right;
168 }
169
170 #notify span {
171         display : table-cell;
172         vertical-align : middle;
173         padding : 4px;
174 }
175
176 .notify {
177         border-color : #d7c47a;
178         background-color : #fff7d5;
179 }
180
181 .notify.progress {
182         border-color : #d7c47a;
183         background-color : #fff7d5;
184 }
185
186 .notify.info {
187         border-color : #88b0f0;
188         background-color : #ecf4ff;
189 }
190
191 .notify.error {
192         background-color : #ffcccc;
193         border-color : #ff0000;
194 }
195
196 .hl div.hlTitle a {
197         font-weight : 600;
198         text-rendering: optimizelegibility;
199         font-family : "Segoe WP Semibold", "Segoe UI Semibold", 
200                 "Segoe UI Web Semibold", "Segoe UI", "Helvetica Neue",
201                 Helvetica, Arial, sans-serif;
202         color : #777;
203 }
204
205 .hl.Unread div.hlTitle a {
206         color : black;
207 }
208
209 .hl.active div.hlTitle a {
210         color : #4684ff;
211         text-shadow : 1px 1px 2px #fff;
212 }
213
214 .hl.Selected {
215         background : #f9fbff;
216 }
217
218 .hl.Grayed {
219         color : #909090;
220 }
221
222 .hl {
223         border-width : 0px 0px 1px 0px;
224         border-style : solid;
225         border-color : #ddd;
226 }
227
228 .hl.active {
229         background : #ecf4ff ! important;
230 }
231
232 div.filterTestHolder {
233         height : 300px;
234         overflow : auto;
235         border-color : #ddd;
236         border-style : solid;
237         margin : 0px 0px 5px 0px;
238         background-color : #f5f5f5;
239         border-width : 1px;
240 }
241
242
243 #content-insert blockquote, #headlines-frame blockquote, .dijitContentPane blockquote {
244         margin : 5px 0px 5px 0px;
245         color : #555;
246         padding-left : 10px;
247         border-width : 0px 0px 0px 4px;
248         border-color : #ccc;
249         border-style : solid;
250 }
251
252 #content-insert code, #headlines-frame code, .dijitContentPane code {
253         color : #009900;
254         font-family : monospace;
255         font-size : 12px;
256 }
257
258 #content-insert pre, #headlines-frame pre, .dijitContentPane pre {
259         margin : 5px 0px 5px 0px;
260         padding : 10px;
261         color : #555;
262         font-family : monospace;
263         font-size : 12px;
264         border-width : 0px;
265         border-color : #ccc;
266         border-style : solid;
267         background : #f5f5f5;
268         display : block;
269         max-width : 98%;
270         overflow : auto;
271 }
272
273 div.notice, div.warning, div.error {
274         padding : 4px 10px 4px 4px;
275         display : inline-block;
276         margin : 2px 0px 4px 0px;
277         font-size : 12px;
278         border-style : solid;
279         border-color : #ccc;
280         border-width : 1px;
281 }
282
283 div.notice div.inner, div.warning div.inner, div.error div.inner {
284         vertical-align : middle;
285 }
286
287 div.notice {
288         background : #ecf4ff;
289         border-color : #88b0f0;
290 }
291
292 div.warning {
293         background : #fff7d5;
294         border-color : #e7d796;;
295 }
296
297 div.error {
298         background : #ffcccc;
299         border-color : #ff0000;
300 }
301
302 div.warning img, div.notice img, div.error img {
303         margin : 4px;
304         vertical-align : middle;
305 }
306
307 div.warning span, div.notice span, div.error span {
308         display : table-cell;
309         vertical-align : middle;
310
311 }
312
313 ul.nomarks {
314         list-style-type : none;
315         margin : 0px;
316         padding : 10px; 
317 }
318
319 div.prefHelp {
320         color : #555;
321         padding : 5px;
322 }
323
324 .insensitive {
325         color : #555;
326 }
327
328 #main-toolbar > * {
329         white-space : nowrap;
330         display : table-cell;
331         color : #999;
332         text-rendering: optimizelegibility;
333         font-family : "Segoe WP Semibold", "Segoe UI Semibold", 
334                 "Segoe UI Web Semibold", "Segoe UI", "Helvetica Neue",
335                 Helvetica, Arial, sans-serif;
336         font-size : 12px;
337 }
338
339 #main-toolbar #headlines-toolbar {
340         padding-right : 4px;
341         width : 100%;
342 }
343
344 #main-toolbar #headlines-toolbar span.holder {
345         display : table;
346         width : 100%;
347 }
348
349 #main-toolbar #headlines-toolbar span.holder > * {
350         display : table-cell;
351 }
352
353 #main-toolbar #headlines-toolbar .main {
354         text-align : right;
355 }
356
357 #headlines-toolbar span.r img {
358         margin-right : 4px;
359         position : relative;
360         top : 3px;
361 }
362
363 #headlines-toolbar span.r .error a {
364         color : red;
365 }
366
367 #main-toolbar #selected_prompt {
368         font-style : italic;
369         text-align : right;
370         margin-right : 4px;
371 }
372
373 span.contentPreview {
374         color : #999;
375         font-weight : normal;
376         text-shadow : 1px 1px 2px #fff;
377         font-size : 11px;
378 }
379
380 span.hlLabelRef {
381         background-color : #fff7d5;     
382         font-size : 8px;
383         color : #063064;
384         font-weight : normal;
385         margin-left : 2px;
386         padding : 1px 4px 1px 4px;
387         display : inline-block;
388         vertical-align : middle;
389         white-space: nowrap;
390         border-radius : 4px; 
391 }
392
393 div.postHeader div.postDate {
394         text-align : right;
395         color : #909090;
396         float : right;
397 }
398
399 div.postHeader div {
400         padding-bottom : 3px;
401 }
402
403 #feedUpdateErrors {
404         display : none;
405 }
406
407 #allEntryTags {
408         border-width : 0px 0px 1px 0px;
409         border-style : solid;
410         border-color : #ddd;
411         padding-bottom : 5px;
412         display : none;
413 }
414
415 a.hlFeed {
416         display : block;
417         white-space : nowrap;
418         font-size : 9px;
419         font-style : italic;
420         font-weight : normal;
421         display : inline-block;
422         padding : 1px 2px 1px 2px;
423         margin-bottom : 2px;
424         margin-top : 2px;
425         color : #555;
426 }
427
428 a.hlFeed:hover {
429         color : #4684ff;
430 }
431
432 img.markedPic, img.pubPic {
433         cursor : pointer;
434         vertical-align : middle;
435         opacity : 0.5;
436         -webkit-transition : opacity 0.25s;
437         transition : opacity 0.25s;
438 }
439
440 img.markedPic:hover, img.pubPic:hover {
441         opacity : 1;
442 }
443
444 img[src*='pub_set.png'], img[src*='mark_set.png'] {
445         opacity : 1;
446 }
447
448 div.tagCloudContainer {
449         border : 1px solid #ddd;
450         background-color : #f5f5f5;
451         margin : 5px 0px 5px 0px;
452         padding : 5px;
453         text-align : center;
454 }
455
456 div.errorExplained {
457         border : 1px solid #ddd;
458         background-color : #f5f5f5;
459         margin : 5px 0px 5px 0px;
460         padding : 5px;
461 }
462
463 ul.feedErrorsList {
464         max-height : 300px;
465         overflow : auto;
466         list-style-type : none;
467         border : 1px solid #ddd;
468         background-color : #f5f5f5;
469         margin : 0px 0px 5px 0px;
470         padding : 5px;
471 }
472
473 ul.feedErrorsList em {
474         color : #555;
475 }
476
477 ul.browseFeedList {
478         height : 300px;
479         overflow : auto;
480         border-width : 0px 1px 1px 1px;
481         border-color : #ddd;
482         border-style : solid;
483         margin : 0px 0px 5px 0px;
484         background-color : white;
485         list-style-type : none;
486         padding : 0px;
487
488 }
489
490 ul.browseFeedList li {
491         margin : 0px;
492         padding : 2px 4px 2px 4px;
493 }
494
495 span.subscribers {
496         color : #808080;
497 }
498
499 div.subscribers {
500         color : #808080;
501         font-size : 12px;
502         float : right;
503 }
504
505 div.browserDetails {
506         margin : 5px 5px 5px 5px;
507         padding : 5px;
508 }
509
510 ul.compact {
511         list-style-type : none;
512         margin : 0px;
513         padding : 0px;
514 }
515
516 ul.compact li {
517         margin : 0px;
518         padding : 0px;
519 }
520
521 .noborder {
522         border-width : 0px;
523 }
524
525 #overlay {
526         background : white;
527         left : 0;
528         top : 0;
529         height : 100%;
530         width : 100%;
531         z-index : 100;
532         position : absolute;
533 }
534
535 #overlay_inner {
536         font-weight : bold;
537         margin : 1em;
538 }
539
540 form {
541         margin : 0px;
542         padding : 0px;
543 }
544
545 div.loadingPrompt {
546         padding : 1em;
547         text-align : center;
548         font-weight : bold;
549 }
550
551 div.whiteBox {
552         margin-left : 1px;
553         text-align : center;
554         padding : 1em;
555 }
556
557 div.autocomplete {
558         position : absolute;
559         width : 250px;
560         background-color : white;
561         border :1px solid #778899;
562         margin : 0px;
563         padding : 0px;
564 }
565
566 div.autocomplete ul {
567         list-style-type : none;
568         margin : 0px;
569         padding : 0px;
570 }
571
572 div.autocomplete ul li.selected { 
573         background-color : #fff7d5;
574 }
575
576 div.autocomplete ul li {
577         list-style-type : none;
578         display : block;
579         margin : 0;
580         padding : 2px;
581         height : 32px;
582         cursor : pointer;
583 }
584
585 .hlTitle {
586         overflow : hidden;
587         white-space : nowrap;
588         max-width : 500px;
589         text-overflow : ellipsis;
590 }
591
592 div#headlines-frame.wide .hlTitle {
593         max-width : auto;
594         overflow : visible;
595         white-space : normal;
596 }
597
598 .hl a.title.high, span.hlContent.high .contentPreview {
599         color : #00aa00;
600 }
601 .hl.Unread a.title.high, .hl.Unread span.hlContent.high .contentPreview {
602         color : #00dd00;
603 }
604
605 .hl a.title.low, span.hlContent.low .contentPreview,
606 .hl.Unread a.title.low, .hl.Unread span.hlContent.low .contentPreview {
607         color : #909090;
608         text-decoration : line-through;
609 }
610
611 img.hlScorePic {
612         vertical-align : middle;
613         width : 16px;
614         height : 16px;
615 }
616
617 div.dlgSec {
618         font-size : 12px;
619         color : #555;
620         font-weight : bold;
621         clear : both;
622         height : 20px;
623 }
624
625 div.dlgSecCont {
626         position : relative;
627         left : 150px;
628         top : -20px;
629         float : left;
630         font-size : 12px;
631         font-weight : normal;
632 }
633
634 div.dlgSecCont hr {
635         height : 0px;
636         line-height : 0px;
637         border : 0px solid transparent;
638         margin : 2px;
639 }
640
641 div.dlgSecCont > * {
642         position : relative;
643         top : -2px;
644 }
645
646 div.dlgButtons {
647         text-align : right;
648         clear : both;
649 }
650
651 span.labelColorIndicator {
652         height : 16px;
653         width : 16px;
654         border-radius : 4px;
655         line-height : 14px;
656         vertical-align : middle;
657         font-size : 9px;
658         display : inline-block;
659         border : 1px solid #ccc;
660         background-color : #fff7d5;     
661         color : #063064;
662         text-align : center;
663 }
664
665 div#cmdline {
666         position : absolute;
667         left : 5px;
668         bottom : 5px;
669         font-size : 11px;
670         color : #555;
671         font-weight : bold;
672         background-color : white;
673         border : 1px solid #88b0f0;
674         padding : 3px 5px 3px 5px;
675         z-index : 5;
676 }
677
678 #feed_browser_spinner {
679         vertical-align : middle;
680         height : 18px;
681         width : 18px;
682 }
683
684 div.hlTitle {
685         display : table-cell;
686         cursor : pointer;
687         width : 100%;
688         vertical-align : middle;
689         padding-top : 4px;
690         padding-bottom : 4px;
691 }
692
693 div.hlLeft {
694         display : table-cell;
695         vertical-align : middle;
696         white-space: nowrap;
697 }
698
699 div.hlRight {
700         display : table-cell;
701         white-space: nowrap;
702         text-align : right;
703         vertical-align : middle;
704 }
705
706 div.hlRight img {
707         max-width : 16px;
708         max-height : 16px;
709 }
710
711 span.hlUpdated {
712         color : #555;
713         min-width : 100px;
714         display : table-cell;
715         width : 100%;
716         vertical-align : middle;
717         text-align : right;
718         font-size : 10px;
719 }
720
721 div.hlLeft {
722         padding-left : 8px;
723 }
724
725 div.hlLeft input {
726         margin-left : 4px;
727         margin-right : 4px;
728 }
729
730 div.hlLeft img, div.hlRight img {
731         margin : 0px 4px;
732 }
733
734 div.hlLeft img {
735         width : 16px;
736         height : 16px;
737 }
738
739 div.fatalError {
740         margin-bottom : 10px;
741 }
742
743 div.fatalError button {
744         margin-top : 5px;
745 }
746
747 div.fatalError textarea {
748         width : 100%;
749         height : 100px;
750 }
751
752 #ttrssMain #main {
753         border-width : 0px;
754         margin : 0px;
755         padding : 0px;
756 }
757
758 #header-wrap {
759         border-width : 0px;
760         margin : 0px;
761         padding : 0px;
762 }
763
764 #content-wrap {
765         padding : 0px;
766         border-width : 0px;
767         margin : 0px;
768 }
769
770 #feeds-holder {
771         padding : 0px;
772         border-width : 0px 1px 0px 0px;
773         border-style : solid;
774         border-color : #ddd;
775         overflow : hidden;
776         background : #f5f5f5;
777 }
778
779 #headlines-wrap-inner {
780         padding : 0px;
781         margin : 0px;
782         border-width : 0px;
783 }
784
785 #headlines-frame {
786         padding : 0px;
787         border-width : 0px;
788         margin-top : 0px;
789 }
790
791 #headlines-toolbar_splitter, #toolbar_splitter {
792         display : none;
793 }
794
795 #toolbar {
796         padding : 0px;
797         margin : 0px;
798         border-width : 0px;
799         white-space: nowrap;
800         font-size : 12px;
801 }
802
803 #main-toolbar {
804         background : white;
805         border-width : 0px 0px 1px 0px;
806         border-color : #ddd;
807         border-style : solid;
808         padding-left : 4px;
809         height : 26px;
810
811 }
812
813 #header {
814         border-width : 0px;
815         text-align : right;
816         color : #555;
817         padding : 5px 5px 0px 0px;
818         margin : 0px;
819         position : absolute;
820         right : 0px;
821         top : 0px;
822         z-index : 5;
823 }
824
825 #footer {
826         text-align : center;
827         color : #555;
828         padding : 4px 4px 8px 4px;
829         border-width : 0px;
830 }
831
832 #content-insert {
833         padding : 0px;
834         border-color : #ddd;
835         border-width : 0px;
836         line-height: 20px;
837         overflow : auto;
838 }
839
840 #feedTree .dijitTreeRow .dijitTreeLabel.Unread {
841         font-weight : bold;
842 }
843
844 #feedTree .dijitTreeRow.Error .dijitTreeLabel {
845         color : red;
846 }
847
848 img.feedIcon, img.tinyFeedIcon {
849         width : 16px;
850         height : 16px;
851         line-height : 16px;
852         vertical-align : middle;
853         display : inline-block;
854 }
855
856 .player {
857         display : inline-block;
858         color : #555;
859         font-size : 11px;
860         font-family : sans-serif;
861         border : 1px solid #555;
862         padding : 0px 4px 0px 4px;
863         margin : 0px 2px 0px 2px;
864         width : 50px;
865         text-align : center;
866         background : white;
867 }
868
869 .player.playing {
870         color : #00c000;
871         border-color : #00c000;
872 }
873
874 .player:hover {
875         background : #f0f0f0;
876         cursor : pointer;
877 }
878
879 #headlines-spacer {
880         height : 100%;
881         margin-left : 1px;
882         text-align : center;
883         padding : 1em;
884         color : #555;
885 }
886
887
888 ul#filterDlg_Matches, ul#filterDlg_Actions {
889         max-height : 100px;
890         overflow : auto;
891         list-style-type : none;
892         border-style : solid;
893         border-color : #ddd;
894         border-width : 0px 1px 1px 1px;
895         background-color : white;
896         margin : 0px 0px 5px 0px;
897         padding : 0px;
898 }
899
900 ul#filterDlg_Matches li, ul#filterDlg_Actions li {
901         cursor : pointer;
902         padding : 0px 0px 0px 5px;
903 }
904
905 ul.helpKbList {
906         max-height : 300px;
907         overflow : auto;
908         list-style-type : none;
909         border : 1px solid #ddd;
910         background-color : #f5f5f5;
911         margin : 0px 0px 5px 0px;
912         padding : 5px;
913 }
914
915 ul.helpKbList span.hksequence {
916         width : 6em;
917         margin-left : 20px;
918         color : #88b0f0;
919         font-weight : bold;
920         display : inline-block;
921 }
922
923 ul.helpKbList h2 {
924         margin-top : 0px;
925 }
926
927 span.collapseBtn {
928         cursor : pointer;
929 }
930
931 div.postContent p {
932         max-width : 650px;
933         -webkit-hyphens: auto;
934         -moz-hyphens: auto;
935         hyphens: auto;
936 }
937
938 div.postContent iframe {
939         min-width : 50%;
940 }
941
942 div.postHeader span.author {
943         color : #555;
944         font-size : 11px;
945         font-weight : normal;
946 }
947
948 select.attachments {
949         display : block;
950         margin-top : 10px;
951         max-width : 120px;
952 }
953
954 #selected_prompt {
955         margin-right : 25px;
956 }
957
958 #feedTree img.feedIcon {
959         position : relative;
960         top : -2px;
961 }
962
963 body#ttrssMain #feedTree .dijitTreeRow {
964         padding : 2px 0px 2px;
965         height : 22px;
966         border-width : 1px;
967         color : #333;
968 }
969
970 ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitCheckBox {
971         margin-right : 5px;
972 }
973
974 body#ttrssMain #feedTree { 
975         height : 100%;
976         overflow-x : hidden;
977         text-rendering: optimizelegibility;
978         font-family : "Segoe WP Semibold", "Segoe UI Semibold", 
979                 "Segoe UI Web Semibold", "Segoe UI", "Helvetica Neue",
980                 Helvetica, Arial, sans-serif;
981 }
982
983 body#ttrssMain #feedTree .counterNode.aux {
984         background : #f0f0f0;
985         color : #999;
986         border-color : #f0f0f0;
987 }
988
989 body#ttrssMain #feedTree .counterNode {
990         font-weight : bold;
991         display : inline-block;
992         font-size : 9px;
993         text-align : center;
994         border : 1px solid #88b0f0;
995         color : white;
996         background : #88b0f0;
997         border-radius : 4px;
998         vertical-align : middle;
999         float : right;
1000         position : relative;
1001         line-height : 14px;
1002         margin-right : 8px;
1003         margin-top : 3px;
1004         min-width : 23px;
1005         height : 14px;
1006 }
1007
1008 #feedTree img[src*='indicator_white.gif'] {
1009         position : relative;
1010         top : -2px;
1011 }
1012
1013 span.highlight {
1014         background-color : #ffff00;
1015         color : #cc90cc;
1016 }
1017
1018 /* body#ttrssMain #feedTree .dijitTreeRow .dijitTreeExpandoLeaf {
1019         display : none;
1020 } */
1021
1022 div.enclosure_title {
1023
1024 }
1025
1026 body#ttrssMain #headlines-frame .dijitCheckBox {
1027         border-width : 0px;
1028 }
1029
1030 :focus {
1031         outline: none; 
1032 }