tutorial in editor (mechanics only)

[fnpeditor.git] / src / editor / modules / documentCanvas / documentCanvas.less

diff --git a/src/editor/modules/documentCanvas/documentCanvas.less b/src/editor/modules/documentCanvas/documentCanvas.less
index 1696a09..9677691 100644 (file)
--- a/src/editor/modules/documentCanvas/documentCanvas.less
+++ b/src/editor/modules/documentCanvas/documentCanvas.less
@@ -1,25 +1,46 @@
 @import 'nodes.less';
-@import 'canvas/widgets.less';
+@import 'canvas/canvas.less';
+@import 'canvas/container.less';
+@import 'canvas/documentElement.less';
+@import 'canvas/genericElement.less';
+@import 'canvas/gutter.less';
+@import 'canvas/comments/comments.less';
 
 #rng-module-documentCanvas {
    height: 100%;
 }
 
-#rng-module-documentCanvas-mainArea {
-   height: 100%;
-   margin-bottom: 20px;
-}
-
 #rng-module-documentCanvas-contentWrapper {
-    border-color: #ddd;
-    border-style: solid;
-    border-width: 1px;
+    background-color: #ddd;
     float:left;
     width: 100%;
     height: 100%;
     overflow-y: scroll;
-    padding: 0 10px;
     
+    &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -15px;
+        right: -15px;
+        box-shadow: inset 0 20px 12px -20px rgba(0,0,0,0.6);
+        pointer-events:none;
+        z-index: 1;
+    }
+
+    &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -15px;
+        right: -15px;
+        box-shadow: inset 0px -20px 12px -20px rgba(0,0,0,0.6);
+        pointer-events:none;
+        z-index: 1;
+    }
+
     &::-webkit-scrollbar {
         .rng-mixin-scrollbar;
     }
@@ -33,22 +54,39 @@
         .rng-mixin-scrollbar-thumb-window-inactive;
     }
     
-    .canvas-wrapper {
+    .root-wrapper {
+        display: table-cell;
+        vertical-align: top;
+        width: 600px;
         outline: 0px solid transparent;
+        padding: 0 100px;
+        background-color: white;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    [document-text-element] {
+        outline: none;
     }
 
     .current-text-element {
-        outline: 1px dashed black;
     }
 
     .current-node-element {
-        border-color: lighten(#000, 15%);
+        border-color: lighten(#000, 35%);
         border-style: solid;
         border-width: 1px;
     }
 
+    .current-node-element[wlxml-tag="span"] {
+        border: none;
+    }
+
     .highlighted-element {
-        border: 1px solid red;
+        border: 1px solid lighten(#000, 15%);
+    }
+    
+    .highlighted-element[wlxml-tag="span"] {
+        border: none;
     }
 
     counter-reset: footnote;