tutorial in editor (mechanics only)
[fnpeditor.git] / src / editor / modules / documentCanvas / documentCanvas.less
1 @import 'nodes.less';
2 @import 'canvas/canvas.less';
3 @import 'canvas/container.less';
4 @import 'canvas/documentElement.less';
5 @import 'canvas/genericElement.less';
6 @import 'canvas/gutter.less';
7 @import 'canvas/comments/comments.less';
8
9 #rng-module-documentCanvas {
10    height: 100%;
11 }
12
13 #rng-module-documentCanvas-contentWrapper {
14     background-color: #ddd;
15     float:left;
16     width: 100%;
17     height: 100%;
18     overflow-y: scroll;
19     
20     &:before {
21         content: "";
22         position: absolute;
23         top: 0;
24         bottom: 0;
25         left: -15px;
26         right: -15px;
27         box-shadow: inset 0 20px 12px -20px rgba(0,0,0,0.6);
28         pointer-events:none;
29         z-index: 1;
30     }
31
32     &:after {
33         content: "";
34         position: absolute;
35         top: 0;
36         bottom: 0;
37         left: -15px;
38         right: -15px;
39         box-shadow: inset 0px -20px 12px -20px rgba(0,0,0,0.6);
40         pointer-events:none;
41         z-index: 1;
42     }
43
44     &::-webkit-scrollbar {
45         .rng-mixin-scrollbar;
46     }
47     &::-webkit-scrollbar-track {
48         .rng-mixin-scrollbar-track;
49     }
50     &::-webkit-scrollbar-thumb {
51         .rng-mixin-scrollbar-thumb;
52     }
53     &::-webkit-scrollbar-thumb:window-inactive {
54         .rng-mixin-scrollbar-thumb-window-inactive;
55     }
56     
57     .root-wrapper {
58         display: table-cell;
59         vertical-align: top;
60         width: 600px;
61         outline: 0px solid transparent;
62         padding: 0 100px;
63         background-color: white;
64         box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
65     }
66
67     [document-text-element] {
68         outline: none;
69     }
70
71     .current-text-element {
72     }
73
74     .current-node-element {
75         border-color: lighten(#000, 35%);
76         border-style: solid;
77         border-width: 1px;
78     }
79
80     .current-node-element[wlxml-tag="span"] {
81         border: none;
82     }
83
84     .highlighted-element {
85         border: 1px solid lighten(#000, 15%);
86     }
87     
88     .highlighted-element[wlxml-tag="span"] {
89         border: none;
90     }
91
92     counter-reset: footnote;
93 }
94
95 .rng-module-documentCanvas-currentNode {
96     background: #fffacd;
97     border-color: grey;
98     border-style:dashed;
99     border-width:1px;
100 }
101
102 .rng-module-documentCanvas-hoveredNodeTag {
103     position:absolute;
104     height:20px;
105     top:-20px;
106     left:0;
107     background: #bd362f;
108     color: white;
109     font-size:9px;
110     font-weight: normal;
111     font-style: normal;
112     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
113     padding: 0 5px;
114     text-indent: 0;
115 }
116
117 [document-node-element] {
118     position:relative;
119     border: 1px solid transparent;
120 }