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