build

dist/editor/index.html

@@ -88,23 +88,31 @@
           <se-button id="tool_clone" title="Duplicate Element" shortcut="D" src="./images/clone.svg"></se-button>
           <se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg">
           </se-button>
+        </div>
+        <div class="toolset">
           <div class="tool_sep"></div>
           <se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
           </se-button>
           <se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
           </se-button>
+        </div>
+        <div class="toolset">
           <se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
           <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
           <se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
+        </div>
+        <div class="toolset">
           <div class="tool_sep"></div>
           <se-input id="elem_id" data-attr="id" size="10" label="id" title="Identify the element"></se-input>
+        </div>
+        <div class="toolset">
           <se-input id="elem_class" data-attr="class" size="10" label="class" title="Element class"></se-input>
         </div>
         <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
           title="Change rotation angle"></se-spin-input>
         <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
           title="Change gaussian blur value"></se-spin-input>
-        <se-list id="tool_position" title="Align Element to Page" label="">
+        <se-list id="tool_position" title="Align Element to Page" label="" width="22px" height="24px">
           <se-list-item id="tool_posleft" value="l">
             <img title="align left" src="./images/align_left.svg" height="22px">
           </se-list-item>

dist/editor/svgedit.css

@@ -306,12 +306,12 @@ hr {
 
 #tools_top {
   position: absolute;
-  left: 105px;
+  left: 96px;
   top: 2px;
   min-height: 40px;
   border-bottom: none;
-  overflow: auto;
+  overflow: visible;
-  right:2px;
+  right:1px;
 }
 
 #tools_top .tool_sep {
@@ -320,20 +320,19 @@ hr {
 
 #tools_top > div > * {
   float: left;
-  margin-right: 1px;
 }
 #tools_top se-input {
-  margin-top: 6px;
+  margin-top: 5px;
-  height: 15px;
+  height: 34px;
 }
 #tools_top se-spin-input, #tools_top se-list {
   margin-top: 5px;
-  height: 15px;
+  height: 34px;
 }
 
 #tools_top se-dropdown-list {
   margin-top: 5px;
-  height: 15px;
+  height: 34px;
 }
 
 /*—————————————————————————————*/
@@ -726,3 +725,46 @@ ul li.current {
 .dropdown li.tool_button {
   width: 24px;
 }
+
+@media screen and (max-width:1250px) {
+  .expanded #palette_holder {
+    left: 560px;
+    overflow-x: scroll;
+    padding: 0 5px;
+    margin-top: 2px;
+    height: 30px;
+  }
+  #tools_top {
+    height: 71px;
+    overflow-x: scroll;
+  }
+  #workarea, #sidepanels {
+    top: 70px !important;
+  }
+  #rulers #ruler_corner,
+  #rulers #ruler_x, #tools_left {
+    top: 71px;
+  }
+
+  #rulers #ruler_y {
+    top: 86px;
+  }
+
+  #cur_context_panel {
+    top: 87px;
+  }
+
+  #selected_panel {
+    clear: right;
+  }
+}
+
+@media screen and (max-width:1100px) {
+  #tools_bottom:not(.expanded) #palette_holder {
+    left: 410px;
+    overflow-x: scroll;
+    padding: 0 5px;
+    margin-top: 2px;
+    height: 30px;
+  }
+}

dist/editor/system/index.html

@@ -88,23 +88,31 @@
           <se-button id="tool_clone" title="Duplicate Element" shortcut="D" src="./images/clone.svg"></se-button>
           <se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg">
           </se-button>
+        </div>
+        <div class="toolset">
           <div class="tool_sep"></div>
           <se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
           </se-button>
           <se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
           </se-button>
+        </div>
+        <div class="toolset">
           <se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
           <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
           <se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
+        </div>
+        <div class="toolset">
           <div class="tool_sep"></div>
           <se-input id="elem_id" data-attr="id" size="10" label="id" title="Identify the element"></se-input>
+        </div>
+        <div class="toolset">
           <se-input id="elem_class" data-attr="class" size="10" label="class" title="Element class"></se-input>
         </div>
         <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
           title="Change rotation angle"></se-spin-input>
         <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
           title="Change gaussian blur value"></se-spin-input>
-        <se-list id="tool_position" title="Align Element to Page" label="">
+        <se-list id="tool_position" title="Align Element to Page" label="" width="22px" height="24px">
           <se-list-item id="tool_posleft" value="l">
             <img title="align left" src="./images/align_left.svg" height="22px">
           </se-list-item>

dist/editor/system/svgedit.css

@@ -306,12 +306,12 @@ hr {
 
 #tools_top {
   position: absolute;
-  left: 105px;
+  left: 96px;
   top: 2px;
   min-height: 40px;
   border-bottom: none;
-  overflow: auto;
+  overflow: visible;
-  right:2px;
+  right:1px;
 }
 
 #tools_top .tool_sep {
@@ -320,20 +320,19 @@ hr {
 
 #tools_top > div > * {
   float: left;
-  margin-right: 1px;
 }
 #tools_top se-input {
-  margin-top: 6px;
+  margin-top: 5px;
-  height: 15px;
+  height: 34px;
 }
 #tools_top se-spin-input, #tools_top se-list {
   margin-top: 5px;
-  height: 15px;
+  height: 34px;
 }
 
 #tools_top se-dropdown-list {
   margin-top: 5px;
-  height: 15px;
+  height: 34px;
 }
 
 /*—————————————————————————————*/
@@ -726,3 +725,46 @@ ul li.current {
 .dropdown li.tool_button {
   width: 24px;
 }
+
+@media screen and (max-width:1250px) {
+  .expanded #palette_holder {
+    left: 560px;
+    overflow-x: scroll;
+    padding: 0 5px;
+    margin-top: 2px;
+    height: 30px;
+  }
+  #tools_top {
+    height: 71px;
+    overflow-x: scroll;
+  }
+  #workarea, #sidepanels {
+    top: 70px !important;
+  }
+  #rulers #ruler_corner,
+  #rulers #ruler_x, #tools_left {
+    top: 71px;
+  }
+
+  #rulers #ruler_y {
+    top: 86px;
+  }
+
+  #cur_context_panel {
+    top: 87px;
+  }
+
+  #selected_panel {
+    clear: right;
+  }
+}
+
+@media screen and (max-width:1100px) {
+  #tools_bottom:not(.expanded) #palette_holder {
+    left: 410px;
+    overflow-x: scroll;
+    padding: 0 5px;
+    margin-top: 2px;
+    height: 30px;
+  }
+}

dist/editor/xdomain-index.html

@@ -88,23 +88,31 @@
           <se-button id="tool_clone" title="Duplicate Element" shortcut="D" src="./images/clone.svg"></se-button>
           <se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg">
           </se-button>
+        </div>
+        <div class="toolset">
           <div class="tool_sep"></div>
           <se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
           </se-button>
           <se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
           </se-button>
+        </div>
+        <div class="toolset">
           <se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
           <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
           <se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
+        </div>
+        <div class="toolset">
           <div class="tool_sep"></div>
           <se-input id="elem_id" data-attr="id" size="10" label="id" title="Identify the element"></se-input>
+        </div>
+        <div class="toolset">
           <se-input id="elem_class" data-attr="class" size="10" label="class" title="Element class"></se-input>
         </div>
         <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
           title="Change rotation angle"></se-spin-input>
         <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
           title="Change gaussian blur value"></se-spin-input>
-        <se-list id="tool_position" title="Align Element to Page" label="">
+        <se-list id="tool_position" title="Align Element to Page" label="" width="22px" height="24px">
           <se-list-item id="tool_posleft" value="l">
             <img title="align left" src="./images/align_left.svg" height="22px">
           </se-list-item>