src/editor/modules/documentCanvas/documentCanvas.less

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