diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
new file mode 100644
index 000000000..3c6a8d5af
--- /dev/null
+++ b/apps/common/main/resources/less/toolbar.less
@@ -0,0 +1,231 @@
+@height-tabs: 40px;
+@height-controls: 67px;
+
+@tabs-bg-color: #fff;
+
+.toolbar {
+    position: relative;
+
+    &:not(.folded) {
+        height: @height-tabs + @height-controls;
+    }
+
+    &.folded {
+    height: @height-tabs;
+    transition: height .2s;
+    overflow: hidden;
+
+    &.expanded {
+      height: @height-tabs + @height-controls;
+      overflow: visible;
+    }
+
+    &:not(.expanded):not(.cover){
+      .marker {
+        opacity: 0;
+      }
+
+      .ribtab.active {
+        > a {
+          font-weight: normal;
+        }
+      }
+    }
+  }
+
+    .box-tabs {
+    height: @height-tabs;
+
+    display: flex;
+    align-items: stretch;
+
+    .extra {
+      background-color: @tabs-bg-color;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      border-top: 1px solid @gray-dark;
+      top: @height-tabs - 1;
+    }
+  }
+
+    .tabs {
+    flex-grow: 1;
+    background-color: @tabs-bg-color;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+
+    > ul {
+      padding: 0;
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      list-style: none;
+      font-size: 0;
+    }
+
+    li {
+      display: inline-block;
+      height: 100%;
+      //background-color: #a6c995;
+
+      > a {
+        display: inline-block;
+        line-height: @height-tabs;
+        height: 100%;
+        padding: 0 10px;
+        text-decoration: none;
+        cursor: default;
+        font-size: 12px;
+        text-align: center;
+        color: @gray-deep;
+
+        &::after {
+          display: block;
+          content: attr(data-title);
+          font-weight: bold;
+          height: 1px;
+          overflow: hidden;
+          visibility: hidden;
+        }
+
+      }
+
+      &.active {
+        > a {
+          font-weight: bold;
+        }
+      }
+    }
+
+    .marker {
+      position: relative;
+      border-top: 3px solid @gray-darker;
+      top: -5px;
+      -webkit-transition: width .2s, left .2s ease-out;
+      opacity: 1;
+      transition: width .2s, left .2s ease-out, opacity .2s;
+    }
+
+    &:not(.short) {
+      .scroll {
+        display: none;
+      }
+    }
+
+    .scroll {
+      line-height: @height-tabs;
+      min-width: 20px;
+      text-align: center;
+      z-index: 1;
+
+      &.left{
+        box-shadow: 5px 0 20px 5px rgba(208, 221, 182, .8)
+      }
+      &.right{
+        box-shadow: -5px 0 20px 5px rgba(208, 221, 182, .8)
+      }
+    }
+  }
+
+    .box-controls {
+    height: @height-controls;
+    padding: 10px 0;
+    display: flex;
+
+    //background-color: #F2CBBF;
+
+    .panel {
+      display: table;
+      height: 100%;
+    }
+    //width: 100%;
+  }
+
+    .box-panels {
+        .panel:not(.active) {
+            display: none;
+        }
+    }
+
+    background-color: @gray-light;
+    .box-inner-shadow(0 -1px 0 @gray-dark);
+
+    .group {
+        display: table-cell;
+        vertical-align: top;
+        white-space: nowrap;
+        padding-left: 12px;
+
+        &:last-child {
+            padding-right: 12px;
+        }
+    }
+
+    .group {
+        //background-color: #a9f261;
+        vertical-align: middle;
+    }
+
+    .elset {
+    height: 20px;
+    font-size: 0;
+
+    &:not(:first-child) {
+      margin-top: 6px;
+    }
+  }
+
+    .separator {
+        margin-left: 12px;
+
+        &.long {
+            height: 46px;
+        }
+
+        &.short {
+            height: 20px;
+        }
+    }
+
+    .btn-slot {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+
+        &:not(:first-child) {
+            margin-left: 1px;
+        }
+
+        &.split {
+            width: 29px;
+        }
+
+        &.text {
+            width: auto;
+        }
+
+        &.border {
+            border: 1px solid @gray;
+            .border-radius(1px);
+            width: 22px;
+            height: 22px;
+        }
+
+        &.x-huge {
+            height: 45px;
+        }
+    }
+}
+
+.toolbar-fullview-panel {
+    position: absolute;
+    top: @height-tabs;
+    bottom: 0;
+    width: 100%;
+    z-index: 995;
+}
diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less
index 6449d4149..96d309e81 100644
--- a/apps/documenteditor/main/resources/less/app.less
+++ b/apps/documenteditor/main/resources/less/app.less
@@ -114,6 +114,7 @@
 @import "../../../../common/main/resources/less/opendialog.less";
 @import "../../../../common/main/resources/less/review-changes.less";
 @import "../../../../common/main/resources/less/plugins.less";
+@import "../../../../common/main/resources/less/toolbar.less";
 
 // App
 // --------------------------------------------------
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index 376002457..6af9e493d 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -1,237 +1,13 @@
-@height-tabs: 40px;
-@height-controls: 67px;
 
-@tabs-bg-color: #fff;
 #toolbar {
     //z-index: 101;
 }
 
 .toolbar {
-    position: relative;
     z-index: 101;
 
-    &:not(.folded) {
-        height: @height-tabs + @height-controls;
-    }
-
-    &.folded {
-        height: @height-tabs;
-        transition: height .2s;
-        overflow: hidden;
-
-        &.expanded {
-            height: @height-tabs + @height-controls;
-            overflow: visible;
-        }
-
-        &:not(.expanded):not(.cover){
-            .marker {
-                opacity: 0;
-            }
-
-            .rib-tab.active {
-                > a {
-                    font-weight: normal;
-                }
-            }
-        }
-    }
-
-    .box-tabs {
-        height: @height-tabs;
-
-        display: flex;
-        align-items: stretch;
-
-        .extra {
-            background-color: @tabs-bg-color;
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            width: 100%;
-            border-top: 1px solid @gray-dark;
-            top: @height-tabs - 1;
-        }
-    }
-
-    .tabs {
-        flex-grow: 1;
-        background-color: @tabs-bg-color;
-        position: relative;
-        overflow: hidden;
-        display: flex;
-
-        > ul {
-            padding: 0;
-            margin: 0;
-            white-space: nowrap;
-            overflow: hidden;
-            list-style: none;
-            font-size: 0;
-        }
-
-        li {
-            display: inline-block;
-            height: 100%;
-            //background-color: #a6c995;
-
-            > a {
-                display: inline-block;
-                line-height: @height-tabs;
-                height: 100%;
-                padding: 0 10px;
-                text-decoration: none;
-                cursor: default;
-                font-size: 12px;
-                text-align: center;
-                color: @gray-deep;
-
-                &::after {
-                    display: block;
-                    content: attr(data-title);
-                    font-weight: bold;
-                    height: 1px;
-                    overflow: hidden;
-                    visibility: hidden;
-                }
-
-            }
-
-            &.active {
-                > a {
-                    font-weight: bold;
-                }
-            }
-        }
-
-        .marker {
-            position: relative;
-            border-top: 3px solid @gray-darker;
-            top: -5px;
-            -webkit-transition: width .2s, left .2s ease-out;
-            opacity: 1;
-            transition: width .2s, left .2s ease-out, opacity .2s;
-        }
-
-        &:not(.short) {
-            .scroll {
-                display: none;
-            }
-        }
-
-        .scroll {
-            line-height: @height-tabs;
-            min-width: 20px;
-            text-align: center;
-            z-index: 1;
-
-            &.left{
-                box-shadow: 5px 0 20px 5px rgba(208, 221, 182, .8)
-            }
-            &.right{
-                box-shadow: -5px 0 20px 5px rgba(208, 221, 182, .8)
-            }
-        }
-    }
-
-
-    .box-controls {
-        height: @height-controls;
-        padding: 10px 0;
-        display: flex;
-
-        //background-color: #F2CBBF;
-
-        .panel {
-            display: table;
-            height: 100%;
-        }
-        //width: 100%;
-    }
-
-    .box-panels {
-        .panel:not(.active) {
-            display: none;
-        }
-    }
     //padding: 10px 0;
 
-    background-color: @gray-light;
-    .box-inner-shadow(0 -1px 0 @gray-dark);
-
-    .toolbar-group, .group {
-        display: table-cell;
-        vertical-align: top;
-        white-space: nowrap;
-        padding-left: 12px;
-
-        &:last-child {
-            padding-right: 12px;
-        }
-    }
-
-    .group {
-        //background-color: #a9f261;
-        vertical-align: middle;
-    }
-
-    .toolbar-row, .elset {
-        height: 20px;
-        font-size: 0;
-
-        &:not(:first-child) {
-            margin-top: 6px;
-        }
-    }
-
-    .elset {
-        //background-color: #f2f254;
-    }
-
-    .separator {
-        margin-left: 12px;
-
-        &.long {
-            height: 46px;
-        }
-
-        &.short {
-            height: 20px;
-        }
-    }
-
-    .btn-slot {
-//        background-color: red;
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-
-        &:not(:first-child) {
-            margin-left: 1px;
-        }
-
-        &.split {
-            width: 29px;
-        }
-
-        &.text {
-            width: auto;
-        }
-
-        &.border {
-            border: 1px solid @gray;
-            .border-radius(1px);
-            width: 22px;
-            height: 22px;
-        }
-
-        &.x-huge {
-            height: 45px;
-        }
-    }
-
     &.masked {
         button.disabled .icon:not(.no-mask) {
             background-position-x: 0px !important;