![[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;
1.6 ! damieng 604: margin-right: 110px;
! 605: box-shadow: 2px 2px 2px #A0A0A0;
! 606: padding: 0px;
1.4 damieng 607: }
608:
609: span.open-path-segment:hover {
610: background-color: #EEE;
611: }
612:
613: table.opendlg_table {
614: border-collapse: collapse;
615: border: 1px solid #AAA;
616: font-size: 80%;
617: margin: 0px;
618: }
619:
620: table.opendlg_table>tr>th {
621: padding: 2px;
622: border-bottom: 1px solid #AAA;
623: }
624:
625: table.opendlg_table>tr>th:nth-of-type(2), table.opendlg_table>tr>th:nth-of-type(3) {
626: border-right: 1px solid #AAA;
627: }
628:
629: table.opendlg_table>tr>td {
630: white-space: nowrap;
631: padding: 2px;
632: border-bottom: 1px solid #AAA;
633: }
634:
635: table.opendlg_table>tr>td:nth-of-type(2), table.opendlg_table>tr>td:nth-of-type(3) {
636: border-right: 1px solid #AAA;
637: }
638:
639: table.opendlg_table>tr.selected {
640: background-color: #50A0FF;
641: }
642:
1.6 ! damieng 643: #open-preview-div {
! 644: float: right;
! 645: }
! 646:
! 647: #open-preview-div>img {
! 648: max-width: 100px;
! 649: max-height: 100px;
! 650: }
! 651:
1.1 damieng 652: /* source */
653: div.source_window {
654: position: absolute;
655: z-index: 5;
656: left: 1em;
657: top: 2.5em;
658: right: 1em;
659: bottom: 1em;
660: overflow: auto;
661: background-color: #FFFFFF;
662: border: solid 1px #202020;
663: box-shadow: 2px 2px 2px #A0A0A0;
664: }
665:
666: div.source_content {
667: position: absolute;
668: z-index: 10;
669: left: 1em;
670: top: 1em;
671: right: 1em;
672: bottom: 3em;
673: overflow: auto;
674: font-family: monospace;
675: word-wrap: break-word;
676: white-space: pre-wrap;
677: background-color: #FFFFFF;
678: border: solid 1px #A0A0A0;
679: }
680:
681: div.source_bottom {
682: position: absolute;
683: z-index: 10;
684: left: 1em;
685: right: 1em;
686: bottom: 0em;
687: height: 2em;
688: text-align: center;
689: background-color: #FFFFFF;
690: }
691:
692: span.source_element_name {
693: color: #A00000;
694: }
695:
696: span.source_attribute_name {
697: color: #0000A0;
698: }
699:
700: span.source_attribute_value {
701: color: #006400;
702: }
703:
704: span.source_entity {
705: color: #006464;
706: }
707:
708: span.source_comment {
709: color: #505050;
710: }
711:
712: span.source_cdata {
713: color: #503000;
714: }
715:
716: span.source_pi {
717: color: #640064;
718: }
719:
720: span.source_doctype {
721: color: #646400;
722: }
723:
724: /* selection */
725: .selection {
726: background-color: #50A0FF;
727: color: #FFFFFF;
728: }
729:
730: /* DNAnchor */
731: .anchor {
732: text-decoration: underline;
733: color: #0000EE;
734: }
735: .anchor img {
736: cursor: default;
737: }
738:
739: /* DNHiddenP */
740: .hiddenp {
741: position: relative;
742: min-height: 1.5em;
743: }
744: .hiddenp::after {
745: position: absolute;
746: right: 1px;
747: bottom: 1px;
748: content: " ¶";
749: color: #CCC;
750: z-index: -1;
751: }
752:
753: /* DNList */
754: ul.list {
755: list-style: none;
756: min-height: 1em;
757: margin-top: 0em;
758: margin-bottom: 0em;
759: margin-left: 0em;
760: padding-left: 1.5em;
761: }
762:
763: img.bullet {
764: cursor: default;
765: }
766:
767: /* DNWList */
768: ul.wlist>li.selected {
769: color: inherit;
770: }
771: ul.wlist>li.selected span {
772: color: #FFFFFF;
773: }
774:
775: /* DNTable */
776: div.table>table {
777: width: 100%;
778: border-collapse: collapse;
779: border: 1px solid #000000;
780: border-spacing: 0px;
781: box-shadow: 2px 2px 2px #A0A0A0;
782: margin-bottom: 2px;
783: }
784:
785: div.table>table>tr>td {
786: min-width: 2em;
787: border: 1px solid #000000;
788: word-break: break-all;
789: padding: 2px;
790: }
791:
792: form.table_buttons {
793: padding: 1px;
794: background-color: #E0E0E0;
795: border-top: 1px solid #000000;
796: border-left: 1px solid #000000;
797: border-right: 1px solid #000000;
798: box-shadow: 2px 0px 2px #A0A0A0;
799: font-family: sans-serif;
800: font-weight: normal;
801: font-style: normal;
802: font-size: medium;
803: text-align: left;
804: color: black;
805: }
806:
807: td.header {
808: font-weight: bold;
809: }
810:
811: /* DNFile */
812: img.dn {
813: cursor: default;
814: }
815:
816: img.dn.selected, .selected img.dn {
817: opacity: 0.7;
818: }
819:
1.5 damieng 820: span.file-label {
821: cursor: default;
822: border: 1px solid #AAA;
823: font-family: monospace;
824: padding: 1px;
825: margin-left: 2px;
826: margin-right: 2px;
827: }
828:
1.1 damieng 829: /* DNSpecial */
830: span.special {
831: font-family: STIXSubset-Regular;
832: }
833:
834: table.special_dlg {
835: font-family: STIXSubset-Regular;
836: cursor: default;
837: }
838:
1.3 damieng 839: table.special_dlg>tr>td {
840: border: 1px solid white;
841: }
842:
1.1 damieng 843: /* DNForm */
844: td.shrink {
845: white-space: nowrap;
846: }
847: .expand {
848: width: 99%;
849: }
850: span.form_title {
851: position: relative;
852: top: 3px;
853: border-top: 1px solid #505050;
854: border-left: 1px solid #505050;
855: border-right: 1px solid #505050;
856: padding-left: 4px;
857: padding-right: 4px;
858: padding-top: 2px;
859: padding-bottom: 2px;
860: background-color: #F0F0F0;
861: border-top-left-radius: 0.4em;
862: border-top-right-radius: 0.4em;
863: }
864:
865: .selected span.form_title {
866: background-color: #50A0FF;
867: }
868:
869: div.form {
870: font-family: sans-serif;
871: font-weight: normal;
872: font-style: normal;
873: font-size: medium;
874: text-align: left;
875: color: black;
876: }
877:
878: div.form table {
879: border: 1px solid #505050;
880: border-spacing: 0px;
881: box-shadow: 2px 2px 2px #A0A0A0;
882: margin-bottom: 2px;
883: background-color: #F5F5F5;
884: border-top-right-radius: 0.4em;
885: border-bottom-right-radius: 0.4em;
886: border-bottom-left-radius: 0.4em;
887: }
888:
889: .selected div.form table, div.form.selected table {
890: background-color: #50A0FF;
891: }
892:
893: div.form td {
894: padding-left: 3px;
895: padding-right: 3px;
896: }
897:
898: /* DNFormField */
899: .form_field {
900: width: 100%;
901: min-height: 1em;
902: background-color: white;
903: border-top: 2px solid #A0A0A0;
904: border-left: 2px solid #A0A0A0;
905: border-right: 2px solid #F5F5F5;
906: border-bottom: 2px solid #F5F5F5;
907: }
908:
909:
910: select.invalid {
911: border: 1px solid #F00000;
912: }
913:
914: /* DNSimpleType */
915: span.simple_type {
916: padding: 3px;
917: }
918:
919: /* Fonts for symbols and equations */
920:
921: @font-face {
922: font-family: 'STIXSubset-Regular';
923: src: url('fonts/STIXSubset-Regular.eot');
924: src: local('STIXSubset-Regular'), url('fonts/STIXSubset-Regular.ttf') format('truetype');
925: }
926:
927: @font-face {
928: font-family: 'STIXSubset-Bold';
929: src: url('fonts/STIXSubset-Bold.eot');
930: src: local('STIXSubset-Bold'), url('fonts/STIXSubset-Bold.ttf') format('truetype');
931: }
932:
933: @font-face {
934: font-family: 'STIXSubset-Italic';
935: src: url('fonts/STIXSubset-Italic.eot');
936: src: local('STIXSubset-Italic'), url('fonts/STIXSubset-Italic.ttf') format('truetype');
937: }
938:
939: span.symbol {
940: font-family: STIXSubset-Regular, "Times New Roman", Times, serif;
941: }