diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js index 3c6f49a8..4ca4a209 100644 --- a/src/editor/components/seButton.js +++ b/src/editor/components/seButton.js @@ -12,7 +12,7 @@ template.innerHTML = ` { height: 24px; width: 24px; - margin: 2px 2px 4px; + margin: 2px 1px 4px; padding: 3px; background-color: var(--icon-bg-color); cursor: pointer; diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index 6227b8e3..088bc6ab 100644 --- a/src/editor/components/seExplorerButton.js +++ b/src/editor/components/seExplorerButton.js @@ -28,7 +28,7 @@ template.innerHTML = ` .menu-button { height: 24px; width: 24px; - margin: 2px 2px 4px; + margin: 2px 1px 4px; padding: 3px; background-color: var(--icon-bg-color); cursor: pointer; diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 6d2e21ed..7e42e28d 100644 --- a/src/editor/components/seFlyingButton.js +++ b/src/editor/components/seFlyingButton.js @@ -27,7 +27,7 @@ template.innerHTML = ` .menu-button { height: 24px; width: 24px; - margin: 2px 2px 4px; + margin: 2px 1px 4px; padding: 3px; background-color: var(--icon-bg-color); cursor: pointer; diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index 62b1b790..2c25a39a 100644 --- a/src/editor/components/seMenu.js +++ b/src/editor/components/seMenu.js @@ -12,7 +12,7 @@ template.innerHTML = ` color: #fff; } elix-menu-button::part(popup-toggle) { - padding: 0.25em 0.60em !important + padding: 0.25em 0.30em !important } :host ::slotted([current]){ background-color: var(--icon-bg-color-hover) !important; diff --git a/src/editor/index.html b/src/editor/index.html index 57700aaa..857a3cfb 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -88,23 +88,31 @@ + +
+
+
+
+
+
+
- + diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js index 813d03f9..6e95a1c9 100644 --- a/src/editor/panels/TopPanelHandlers.js +++ b/src/editor/panels/TopPanelHandlers.js @@ -206,7 +206,7 @@ class TopPanelHandlers { }); if (tagName === 'text') { - $('#text_panel').css('display', 'inline'); + $('#text_panel').css('display', 'inline-block'); $('#tool_font_size').css('display', 'inline'); $id('tool_italic').pressed = this.svgCanvas.getItalic(); $id('tool_bold').pressed = this.svgCanvas.getBold(); diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 35ef6e29..544011f3 100644 --- a/src/editor/svgedit.css +++ b/src/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; - right:2px; + overflow: visible; + 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; - height: 15px; + margin-top: 5px; + 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; } /*—————————————————————————————*/ @@ -725,4 +724,47 @@ 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; + } } \ No newline at end of file