![[BACK]](/icons/back.gif){kind=icon}
Return to daxe.css CVS log ![[TXT]](/icons/text.gif){kind=icon}
![[DIR]](/icons/dir.gif){kind=icon}
Up to [LON-CAPA] / modules / damieng / graphical_editor / daxe / lib|
Return to daxe.css CVS log | Up to [LON-CAPA] / modules / damieng / graphical_editor / daxe / lib |
1.1 damieng 1: body {
2: line-height: 1.5;
3: color: black;
4: background-color: white;
5: overflow: hidden;
6: }
7:
8: button {
9: padding: 2px;
10: }
11:
12: #headers {
13: position: absolute;
14: top: 0em;
15: left: 0em;
16: right: 0em;
17: z-index: 5;
18: }
19:
20: #left_panel {
21: position: absolute;
22: top: 4em;
23: bottom: 1.3em;
24: left: 0em;
25: width: 15em;
26: z-index: 1;
27: background-color: #F0F0F0;
28: }
29:
30: #tab_buttons {
31: position: absolute;
32: top: 0em;
33: left: 0em;
34: right: 0em;
35: border-bottom: 1px solid #555;
36: background-color: #F5F5F5;
37: z-index: 3;
38: }
39:
40: .tab_button {
41: position: relative;
42: top: 1px;
43: display: inline-block;
44: vertical-align: bottom;
45: border: 1px solid #555;
46: padding-left: 4px;
47: padding-right: 4px;
48: padding-top: 2px;
49: padding-bottom: 2px;
50: background-color: #F5F5F5;
51: border-top-left-radius: 0.4em;
52: border-top-right-radius: 0.4em;
53: cursor: default;
54: -webkit-user-select: none;
55: -khtml-user-select: none;
56: -moz-user-select: none;
57: -ms-user-select: none;
58: user-select: none;
59: }
60:
61: .tab_button:hover {
62: background-color: #DDD;
63: }
64:
65: .tab_button:focus {
66: outline: none;
67: box-shadow: inset 0px 0px 1px 1px #50A0FF;
68: }
69:
70: .tab_button.selected {
71: border-bottom: 1px solid #F0F0F0;
72: background-color: #F0F0F0;
73: color: black;
74: }
75:
76: #insert {
77: position: absolute;
78: top: 2em;
79: bottom: 0em;
80: left: 0em;
81: width: 15em;
82: overflow: auto;
83: text-align: center;
84: background-color: #F0F0F0;
85: }
86:
87: #tree {
88: position: absolute;
89: top: 2em;
90: bottom: 0em;
91: left: 0em;
92: width: 15em;
93: overflow: auto;
94: background-color: #F0F0F0;
95: white-space: pre;
96: }
97:
98: .tree_div {
99: position: relative;
100: margin-left: 0.5em;
101: }
102:
103: .expand_button {
104: position: absolute;
105: left: -14px;
106: top: 0px;
107: display: inline-block;
108: padding-left: 1px;
109: padding-right: 1px;
110: margin-right: 2px;
111: text-align: center;
112: cursor: default;
113: -webkit-user-select: none;
114: -khtml-user-select: none;
115: -moz-user-select: none;
116: -ms-user-select: none;
117: user-select: none;
118: }
119:
120: .expand_button:hover {
121: background-color: #DDD;
122: }
123:
124: .tree_node_title {
125: cursor: default;
126: -webkit-user-select: none;
127: -khtml-user-select: none;
128: -moz-user-select: none;
129: -ms-user-select: none;
130: user-select: none;
131: }
132:
133: .tree_node_title:focus {
134: outline: none;
135: box-shadow: 0px 0px 1px 1px #50A0FF;
136: }
137:
138: .tree_node_title:hover {
139: background-color: #DDD;
140: }
141:
142: #insert button.insertb {
143: width: 80%
144: }
145:
146:
147: div.menubar {
148: background-color: #FFFFFF;
149: color: #000;
150: border-bottom: 1px solid #000;
151: cursor: default;
152: z-index: 10;
153: -webkit-user-select: none;
154: -khtml-user-select: none;
155: -moz-user-select: none;
156: -ms-user-select: none;
157: user-select: none;
158: font-family: sans-serif;
159: }
160:
161: div.menu_title {
162: position: relative;
163: display: inline-block;
164: padding-left: 0.5em;
165: padding-right: 0.5em;
166: font-size: 0.9rem;
167: }
168:
169: .menu_title .disabled {
170: color: #AAA;
171: }
172:
173: .menu_title:focus {
174: outline: none;
175: box-shadow: inset 0px 0px 1px 1px #50A0FF;
176: }
177:
178: div.dropdown_menu {
179: position: absolute;
180: left: 0px;
181: top: 100%;
182: min-width: 5em;
183: white-space: nowrap;
184: z-index: 10;
185: font-family: sans-serif;
186: font-size: 0.9rem;
187: }
188:
189: table.menu {
190: border-spacing: 0px;
191: color: #000;
192: background-color: #FFFFFF;
193: border: 1px solid #000;
194: box-shadow: 2px 2px 2px #AAA;
195: }
196:
197: table.menu tr td {
198: position: relative;
199: padding-left: 5px;
200: padding-right: 5px;
201: cursor: default;
202: }
203:
204: table.menu tr.checked td:nth-of-type(2)::after {
205: content: "✓";
206: }
207:
208: div.submenu {
209: position: absolute;
210: left: 100%;
211: top: 0px;
212: width: 20em;
213: z-index: 10;
214: }
215:
216: .disabled {
217: color: #A0A0A0;
218: }
219:
220:
221: .toolbar {
222: cursor: default;
223: z-index: 5;
224: padding: 1px;
225: background: linear-gradient(#F5F5F5, #DADADA);
226: box-shadow: 2px 2px 2px #AAA;
227: -webkit-user-select: none;
228: -khtml-user-select: none;
229: -moz-user-select: none;
230: -ms-user-select: none;
231: user-select: none;
232: }
233:
234: .toolbar-box {
235: display: inline-block;
236: line-height: 20px;
237: border: 1px solid #AAA;
238: margin: 0.2em;
239: background: #FAFAFA;
240: border-radius: 5px;
241: overflow: hidden;
242: vertical-align: top;
243: }
244:
245: .toolbar-menu {
246: display: inline-block;
247: line-height: 20px;
248: border: 1px solid #AAA;
249: margin: 0.3em;
250: background: #FFFFFF;
251: vertical-align: top;
252: }
253:
254: .toolbar-button {
255: display: inline-block;
256: line-height: 18px;
257: padding: 3px;
258: }
259:
260: .button-disabled {
261: opacity: 0.3;
262: }
263:
264: .button-selected {
265: background-color: #CCC;
266: }
267:
268: .toolbar-button:hover {
269: background-color: #DDD;
270: }
271:
272: .toolbar-button:focus {
273: outline: none;
274: box-shadow: inset 0px 0px 1px 1px #50A0FF;
275: }
276:
277: .toolbar-button:focus img {
278: }
279:
280: .toolbar-button.button-disabled:hover {
281: background-color: transparent;
282: }
283:
284: .toolbar-button img {
285: vertical-align: middle;
286: }
287:
288: div#doc1 {
289: position: absolute;
290: bottom: 1.3em;
291: left: 15em;
292: right: 0em;
293: top: 4em;
294: overflow: auto;
295: }
296:
297: div#doc2 {
1.2 damieng 298: height: 100%;
1.1 damieng 299: cursor: text;
300: padding-right: 3px;
301: }
302:
303: div#path {
304: position: fixed;
305: left: 0px;
306: bottom: 0px;
307: width: 100%;
308: height: 1.5em;
309: z-index: 2;
310: border-top: 1px solid #999;
311: font-family: sans-serif;
312: font-size: 85%;
313: background-color: #F0F0F0;
314: color: #000000;
315: }
316:
317: textarea#tacursor {
318: position: absolute;
319: width: 0.5em;
320: height: 1em;
321: border: medium none;
322: opacity: 0;
323: resize: none;
324: pointer-events: none;
325: text-indent: -1em;
326: }
327:
328: span#caret {
329: position: absolute;
330: width: 1em;
331: height: 1em;
332: border-left: 2px solid #555;
333: pointer-events: none;
334: cursor: text;
335: z-index: 5;
336: }
337:
338: span#caret.horizontal {
339: border-top: 2px solid #555;
340: border-left: none;
341: }
342:
343: .dn {
344: word-wrap: break-word;
345: white-space: pre-wrap;
346: }
347:
348: div.indent {
349: margin-left: 1.5em;
350: }
351:
352: /* Tag */
353: span.empty_tag, span.start_tag, span.end_tag, span.simple_type {
354: font-family: sans-serif;
355: font-weight: normal;
356: font-style: normal;
357: font-size: 85%;
358: text-align: left;
359: color: #000000;
360: background-color: #FFFFB0;
361: border: 1px solid #707070;
362: margin-left: 2px;
363: margin-right: 2px;
364: padding-top: 1px;
365: padding-bottom: 1px;
366: -webkit-touch-callout: none;
367: -webkit-user-select: none;
368: -khtml-user-select: none;
369: -moz-user-select: none;
370: -ms-user-select: none;
371: user-select: none;
372: box-shadow: 1px 1px 1px #A0A0A0;
373: cursor: default;
374: }
375:
376: span.empty_tag {
377: padding-left: 2px;
378: padding-right: 2px;
379: }
380:
381: span.start_tag {
382: border-top-right-radius: 0.6em;
383: border-bottom-right-radius: 0.6em;
384: padding-left: 2px;
385: padding-right: 0.5em;
386: }
387:
388: span.end_tag {
389: border-top-left-radius: 0.6em;
390: border-bottom-left-radius: 0.6em;
391: padding-left: 0.5em;
392: padding-right: 2px;
393: }
394:
395: .selected span.empty_tag, .selected span.start_tag, .selected span.end_tag, span.selected.simple_type,
396: .selected span.simple_type {
397: background-color: #F05030;
398: color: #FFFFFF;
399: }
400: .invalid.selected>span.empty_tag, .invalid.selected>span.start_tag, .invalid.selected>span.end_tag,
401: .selected .invalid>span.empty_tag, .selected .invalid>span.start_tag, .selected .invalid>span.end_tag {
402: background-color: #F07030;
403: }
404:
405: .selected {
406: background-color: #50A0FF;
407: color: #FFFFFF;
408: }
409:
410: .invalid>span.empty_tag, .invalid>span.start_tag, .invalid>span.end_tag {
411: background-color: #FFE0A0;
412: }
413:
414: span.start_tag img, span.empty_tag img {
415: vertical-align: middle;
416: }
417: span.start_tag img:hover, span.empty_tag img:hover {
418: background-color: #F0F0B0;
419: }
420: .selected span.empty_tag img:hover, .selected span.start_tag img:hover,
421: .selected span.end_tag img:hover, span.selected.simple_type img:hover {
422: background-color: #F07050;
423: }
424:
425: span.long {
426: display: inline-block;
427: width: 90%;
428: line-height: 1.2em;
429: }
430:
431: span.attribute_name {
432: color: #000090;
433: }
434:
435: span.attribute_value {
436: color: #005000;
437: }
438:
439: /* dialogs */
440: div.dlg1 {
441: position: absolute;
442: left: 0px;
443: top: 0px;
444: width: 100%;
445: height: 100%;
446: z-index: 10;
447: background-color:rgba(127, 127, 127, 0.5);
448: }
449:
450: div.dlg2 {
451: position: absolute;
452: left: 50%;
453: height: 100%;
454: }
455:
456: div.dlg3 {
457: position: relative;
458: left: -50%;
459: top: 1em;
460: max-height: 90%;
461: min-width: 250px;
462: overflow: auto;
463: padding: 1em;
464: background-color: #FFFFFF;
465: border: solid 1px #202020;
466: box-shadow: 2px 2px 2px #A0A0A0;
467: }
468:
469: div.dlgtitle {
470: text-align: center;
471: font-family: sans-serif;
472: font-size: 120%;
473: margin-bottom: 1em;
474: }
475:
476: div.buttons {
477: text-align: right;
478: }
479:
480: div.buttons button {
481: margin: 5px;
482: }
483:
484: input.valid {
485: color: #006000;
486: }
487:
488: input.invalid {
489: color: #F00000;
490: }
491:
492: input:-webkit-autofill {
493: -webkit-box-shadow: 0 0 0px 1000px white inset;
494: -webkit-text-fill-color: #006000;
495: }
496:
497: .required {
498: color: #B00000;
499: }
500:
501: .optional {
502: color: #005000;
503: }
504:
505: /* help */
506: button.help {
507: line-height: 1em;
508: font-size: 80%;
509: padding: 2px;
510: margin-right: 7px;
511: }
512:
513: div.dlg3 table {
514: border-spacing: 5px;
515: }
516:
1.2 damieng 517: .help_element_name {
518: font-family: monospace;
519: }
520:
521: .help_attribute_name {
522: font-family: monospace;
523: }
524:
525: .help_default_value {
1.1 damieng 526: font-family: monospace;
527: }
528:
529: div.help_regexp {
530: font-family: monospace;
531: margin-bottom: 1em;
532: word-break: break-all;
533: }
534:
535: span.help_list_title {
536: position: relative;
537: margin-right: 2px;
538: border-top: 1px solid #505050;
539: border-left: 1px solid #505050;
540: border-right: 1px solid #505050;
541: padding-left: 4px;
542: padding-right: 4px;
543: padding-top: 2px;
544: padding-bottom: 2px;
545: background-color: #F0F0F0;
546: border-top-left-radius: 0.4em;
547: border-top-right-radius: 0.4em;
548: cursor: default;
549: }
550:
551: span.help_list_title.selected_tab {
552: top: 3px;
553: z-index: 3;
554: }
555:
556: div.help_list_div {
557: height: 15em;
558: overflow: auto;
559: border: 1px solid #505050;
560: background-color: #F0F0F0;
561: }
562:
563: ul#help_list {
564: margin-top: 0px;
565: }
566:
567: li.help_selectable:hover {
568: cursor: default;
569: color: #30A0F0;
570: }
571:
572: /* find */
573: div.find {
574: position: absolute;
575: bottom: 1.5em;
576: left: 15em;
577: right: 0em;
578: height: 9em;
579: overflow: auto;
580: background-color: #FFFFFF;
581: color: #000000;
582: border: 1px solid #505050;
583: }
584:
585: div.options label {
586: margin-right: 1em;
587: }
588:
1.4 ! damieng 589: /* open */
! 590: #open-dir-div {
! 591: cursor: default;
! 592: -webkit-user-select: none;
! 593: -khtml-user-select: none;
! 594: -moz-user-select: none;
! 595: -ms-user-select: none;
! 596: }
! 597: #open-path-div {
! 598: font-family: monospace;
! 599: }
! 600: #open-table-div {
! 601: overflow-y: scroll;
! 602: max-height: 30em;
! 603: margin-bottom: 0.5em;
! 604: }
! 605:
! 606: span.open-path-segment:hover {
! 607: background-color: #EEE;
! 608: }
! 609:
! 610: #open-table-div {
! 611: box-shadow: 2px 2px 2px #A0A0A0;
! 612: padding: 0px;
! 613: }
! 614:
! 615: table.opendlg_table {
! 616: border-collapse: collapse;
! 617: border: 1px solid #AAA;
! 618: font-size: 80%;
! 619: margin: 0px;
! 620: }
! 621:
! 622: table.opendlg_table>tr>th {
! 623: padding: 2px;
! 624: border-bottom: 1px solid #AAA;
! 625: }
! 626:
! 627: table.opendlg_table>tr>th:nth-of-type(2), table.opendlg_table>tr>th:nth-of-type(3) {
! 628: border-right: 1px solid #AAA;
! 629: }
! 630:
! 631: table.opendlg_table>tr>td {
! 632: white-space: nowrap;
! 633: padding: 2px;
! 634: border-bottom: 1px solid #AAA;
! 635: }
! 636:
! 637: table.opendlg_table>tr>td:nth-of-type(2), table.opendlg_table>tr>td:nth-of-type(3) {
! 638: border-right: 1px solid #AAA;
! 639: }
! 640:
! 641: table.opendlg_table>tr.selected {
! 642: background-color: #50A0FF;
! 643: }
! 644:
1.1 damieng 645: /* source */
646: div.source_window {
647: position: absolute;
648: z-index: 5;
649: left: 1em;
650: top: 2.5em;
651: right: 1em;
652: bottom: 1em;
653: overflow: auto;
654: background-color: #FFFFFF;
655: border: solid 1px #202020;
656: box-shadow: 2px 2px 2px #A0A0A0;
657: }
658:
659: div.source_content {
660: position: absolute;
661: z-index: 10;
662: left: 1em;
663: top: 1em;
664: right: 1em;
665: bottom: 3em;
666: overflow: auto;
667: font-family: monospace;
668: word-wrap: break-word;
669: white-space: pre-wrap;
670: background-color: #FFFFFF;
671: border: solid 1px #A0A0A0;
672: }
673:
674: div.source_bottom {
675: position: absolute;
676: z-index: 10;
677: left: 1em;
678: right: 1em;
679: bottom: 0em;
680: height: 2em;
681: text-align: center;
682: background-color: #FFFFFF;
683: }
684:
685: span.source_element_name {
686: color: #A00000;
687: }
688:
689: span.source_attribute_name {
690: color: #0000A0;
691: }
692:
693: span.source_attribute_value {
694: color: #006400;
695: }
696:
697: span.source_entity {
698: color: #006464;
699: }
700:
701: span.source_comment {
702: color: #505050;
703: }
704:
705: span.source_cdata {
706: color: #503000;
707: }
708:
709: span.source_pi {
710: color: #640064;
711: }
712:
713: span.source_doctype {
714: color: #646400;
715: }
716:
717: /* selection */
718: .selection {
719: background-color: #50A0FF;
720: color: #FFFFFF;
721: }
722:
723: /* DNAnchor */
724: .anchor {
725: text-decoration: underline;
726: color: #0000EE;
727: }
728: .anchor img {
729: cursor: default;
730: }
731:
732: /* DNHiddenP */
733: .hiddenp {
734: position: relative;
735: min-height: 1.5em;
736: }
737: .hiddenp::after {
738: position: absolute;
739: right: 1px;
740: bottom: 1px;
741: content: " ¶";
742: color: #CCC;
743: z-index: -1;
744: }
745:
746: /* DNList */
747: ul.list {
748: list-style: none;
749: min-height: 1em;
750: margin-top: 0em;
751: margin-bottom: 0em;
752: margin-left: 0em;
753: padding-left: 1.5em;
754: }
755:
756: img.bullet {
757: cursor: default;
758: }
759:
760: /* DNWList */
761: ul.wlist>li.selected {
762: color: inherit;
763: }
764: ul.wlist>li.selected span {
765: color: #FFFFFF;
766: }
767:
768: /* DNTable */
769: div.table>table {
770: width: 100%;
771: border-collapse: collapse;
772: border: 1px solid #000000;
773: border-spacing: 0px;
774: box-shadow: 2px 2px 2px #A0A0A0;
775: margin-bottom: 2px;
776: }
777:
778: div.table>table>tr>td {
779: min-width: 2em;
780: border: 1px solid #000000;
781: word-break: break-all;
782: padding: 2px;
783: }
784:
785: form.table_buttons {
786: padding: 1px;
787: background-color: #E0E0E0;
788: border-top: 1px solid #000000;
789: border-left: 1px solid #000000;
790: border-right: 1px solid #000000;
791: box-shadow: 2px 0px 2px #A0A0A0;
792: font-family: sans-serif;
793: font-weight: normal;
794: font-style: normal;
795: font-size: medium;
796: text-align: left;
797: color: black;
798: }
799:
800: td.header {
801: font-weight: bold;
802: }
803:
804: /* DNFile */
805: img.dn {
806: cursor: default;
807: }
808:
809: img.dn.selected, .selected img.dn {
810: opacity: 0.7;
811: }
812:
813: /* DNSpecial */
814: span.special {
815: font-family: STIXSubset-Regular;
816: }
817:
818: table.special_dlg {
819: font-family: STIXSubset-Regular;
820: cursor: default;
821: }
822:
1.3 damieng 823: table.special_dlg>tr>td {
824: border: 1px solid white;
825: }
826:
1.1 damieng 827: /* DNForm */
828: td.shrink {
829: white-space: nowrap;
830: }
831: .expand {
832: width: 99%;
833: }
834: span.form_title {
835: position: relative;
836: top: 3px;
837: border-top: 1px solid #505050;
838: border-left: 1px solid #505050;
839: border-right: 1px solid #505050;
840: padding-left: 4px;
841: padding-right: 4px;
842: padding-top: 2px;
843: padding-bottom: 2px;
844: background-color: #F0F0F0;
845: border-top-left-radius: 0.4em;
846: border-top-right-radius: 0.4em;
847: }
848:
849: .selected span.form_title {
850: background-color: #50A0FF;
851: }
852:
853: div.form {
854: font-family: sans-serif;
855: font-weight: normal;
856: font-style: normal;
857: font-size: medium;
858: text-align: left;
859: color: black;
860: }
861:
862: div.form table {
863: border: 1px solid #505050;
864: border-spacing: 0px;
865: box-shadow: 2px 2px 2px #A0A0A0;
866: margin-bottom: 2px;
867: background-color: #F5F5F5;
868: border-top-right-radius: 0.4em;
869: border-bottom-right-radius: 0.4em;
870: border-bottom-left-radius: 0.4em;
871: }
872:
873: .selected div.form table, div.form.selected table {
874: background-color: #50A0FF;
875: }
876:
877: div.form td {
878: padding-left: 3px;
879: padding-right: 3px;
880: }
881:
882: /* DNFormField */
883: .form_field {
884: width: 100%;
885: min-height: 1em;
886: background-color: white;
887: border-top: 2px solid #A0A0A0;
888: border-left: 2px solid #A0A0A0;
889: border-right: 2px solid #F5F5F5;
890: border-bottom: 2px solid #F5F5F5;
891: }
892:
893:
894: select.invalid {
895: border: 1px solid #F00000;
896: }
897:
898: /* DNSimpleType */
899: span.simple_type {
900: padding: 3px;
901: }
902:
903: /* Fonts for symbols and equations */
904:
905: @font-face {
906: font-family: 'STIXSubset-Regular';
907: src: url('fonts/STIXSubset-Regular.eot');
908: src: local('STIXSubset-Regular'), url('fonts/STIXSubset-Regular.ttf') format('truetype');
909: }
910:
911: @font-face {
912: font-family: 'STIXSubset-Bold';
913: src: url('fonts/STIXSubset-Bold.eot');
914: src: local('STIXSubset-Bold'), url('fonts/STIXSubset-Bold.ttf') format('truetype');
915: }
916:
917: @font-face {
918: font-family: 'STIXSubset-Italic';
919: src: url('fonts/STIXSubset-Italic.eot');
920: src: local('STIXSubset-Italic'), url('fonts/STIXSubset-Italic.ttf') format('truetype');
921: }
922:
923: span.symbol {
924: font-family: STIXSubset-Regular, "Times New Roman", Times, serif;
925: }