Panning, modeChange Event, minor changes (#939)
* mode event, panning cursor * Panning shortcuts(space,wheel), undo shortcut * Undo/redo shortcuts, svgcanvas changes added to the main file * minor refactoringmaster
olekhshch
GitHub
parent
d502525cc0
commit
19403a2755
|
|
@ -308,6 +308,9 @@ class SvgCanvas {
|
|||
this.contentW = this.getResolution().w
|
||||
this.contentH = this.getResolution().h
|
||||
this.clear()
|
||||
|
||||
// creates custom modeEvent for editor
|
||||
this.modeChangeEvent()
|
||||
} // End constructor
|
||||
|
||||
getSvgOption () {
|
||||
|
|
@ -827,6 +830,11 @@ class SvgCanvas {
|
|||
? this.curText
|
||||
: this.curShape
|
||||
this.currentMode = name
|
||||
|
||||
// fires modeChange event for the editor
|
||||
if (this.modeEvent) {
|
||||
document.dispatchEvent(this.modeEvent)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1328,6 +1336,14 @@ class SvgCanvas {
|
|||
this.decode64 = decode64
|
||||
this.mergeDeep = mergeDeep
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates modeChange event, adds it as an svgCanvas property
|
||||
* **/
|
||||
modeChangeEvent () {
|
||||
const modeEvent = new CustomEvent('modeChange', { detail: { getMode: () => this.getMode() } })
|
||||
this.modeEvent = modeEvent
|
||||
}
|
||||
} // End class
|
||||
|
||||
// attach utilities function to the class that are used by SvgEdit so
|
||||
|
|
|
|||
|
|
@ -388,8 +388,10 @@ class Editor extends EditorStartup {
|
|||
this.svgCanvas.randomizeIds(arg)
|
||||
}
|
||||
|
||||
/** @lends module:SVGEditor~Actions */
|
||||
/**
|
||||
* @lends module:SVGEditor~Actions */
|
||||
/**
|
||||
* editor shortcuts init
|
||||
* @returns {void}
|
||||
*/
|
||||
setAll () {
|
||||
|
|
|
|||
|
|
@ -118,6 +118,10 @@ class EditorStartup {
|
|||
this.configObj.curConfig
|
||||
)
|
||||
|
||||
// once svgCanvas is init - adding listener to the changes of the current mode
|
||||
this.modeEvent = this.svgCanvas.modeEvent
|
||||
document.addEventListener('modeChange', (evt) => this.modeListener(evt))
|
||||
|
||||
this.leftPanel.init()
|
||||
this.bottomPanel.init()
|
||||
this.topPanel.init()
|
||||
|
|
@ -278,6 +282,7 @@ class EditorStartup {
|
|||
|
||||
let lastX = null; let lastY = null
|
||||
let panning = false; let keypan = false
|
||||
let previousMode = 'select'
|
||||
|
||||
$id('svgcanvas').addEventListener('mouseup', (evt) => {
|
||||
if (panning === false) { return true }
|
||||
|
|
@ -305,7 +310,12 @@ class EditorStartup {
|
|||
})
|
||||
$id('svgcanvas').addEventListener('mousedown', (evt) => {
|
||||
if (evt.button === 1 || keypan === true) {
|
||||
// prDefault to avoid firing of browser's panning on mousewheel
|
||||
evt.preventDefault()
|
||||
panning = true
|
||||
previousMode = this.svgCanvas.getMode()
|
||||
this.svgCanvas.setMode('ext-panning')
|
||||
this.workarea.style.cursor = 'grab'
|
||||
lastX = evt.clientX
|
||||
lastY = evt.clientY
|
||||
return false
|
||||
|
|
@ -313,10 +323,27 @@ class EditorStartup {
|
|||
return true
|
||||
})
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
// preventing browser's scaling with Ctrl+wheel
|
||||
this.$container.addEventListener('wheel', (e) => {
|
||||
if (e.ctrlKey) {
|
||||
e.preventDefault()
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('mouseup', (evt) => {
|
||||
if (evt.button === 1) {
|
||||
this.svgCanvas.setMode(previousMode ?? 'select')
|
||||
}
|
||||
panning = false
|
||||
})
|
||||
|
||||
// Allows quick change to the select mode while panning mode is active
|
||||
this.workarea.addEventListener('dblclick', (evt) => {
|
||||
if (this.svgCanvas.getMode() === 'ext-panning') {
|
||||
this.leftPanel.clickSelect()
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.target.nodeName !== 'BODY') return
|
||||
if (e.code.toLowerCase() === 'space') {
|
||||
|
|
@ -332,6 +359,7 @@ class EditorStartup {
|
|||
if (e.target.nodeName !== 'BODY') return
|
||||
if (e.code.toLowerCase() === 'space') {
|
||||
this.svgCanvas.spaceKey = keypan = false
|
||||
this.svgCanvas.setMode(previousMode === 'ext-panning' ? 'select' : previousMode ?? 'select')
|
||||
e.preventDefault()
|
||||
} else if ((e.key.toLowerCase() === 'shift') && (this.svgCanvas.getMode() === 'zoom')) {
|
||||
this.workarea.style.cursor = zoomInIcon
|
||||
|
|
@ -695,6 +723,36 @@ class EditorStartup {
|
|||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Listens to the mode change, listener is to be added on document
|
||||
* @param {Event} evt custom modeChange event
|
||||
*/
|
||||
modeListener (evt) {
|
||||
const mode = this.svgCanvas.getMode()
|
||||
|
||||
this.setCursorStyle(mode)
|
||||
}
|
||||
|
||||
/**
|
||||
* sets cursor styling for workarea depending on the current mode
|
||||
* @param {string} mode
|
||||
*/
|
||||
setCursorStyle (mode) {
|
||||
let cs = 'auto'
|
||||
switch (mode) {
|
||||
case 'ext-panning':
|
||||
cs = 'grab'
|
||||
break
|
||||
case 'zoom':
|
||||
cs = 'crosshair'
|
||||
break
|
||||
default:
|
||||
cs = 'auto'
|
||||
}
|
||||
|
||||
this.workarea.style.cursor = cs
|
||||
}
|
||||
}
|
||||
|
||||
export default EditorStartup
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default {
|
|||
return {
|
||||
name: svgEditor.i18next.t(`${name}:name`),
|
||||
callback () {
|
||||
const btitle = `${name}:buttons.0.title`
|
||||
const btitle = `${name} [Space / mouse wheel + drag]`
|
||||
// Add the button and its handler(s)
|
||||
const buttonTemplate = document.createElement('template')
|
||||
buttonTemplate.innerHTML = `
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ class LeftPanel {
|
|||
*/
|
||||
clickSelect () {
|
||||
if (this.updateLeftPanel('tool_select')) {
|
||||
this.editor.workarea.style.cursor = 'auto'
|
||||
// this.editor.workarea.style.cursor = 'auto'
|
||||
this.editor.svgCanvas.setMode('select')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
</div> <!-- editor_panel -->
|
||||
<div id="history_panel">
|
||||
<div class="tool_sep"></div>
|
||||
<se-button id="tool_undo" title="tools.undo" shortcut="Z" src="undo.svg" disabled></se-button>
|
||||
<se-button id="tool_redo" title="tools.redo" shortcut="Y" src="redo.svg" disabled></se-button>
|
||||
<se-button id="tool_undo" title="tools.undo" shortcut="ctrl+Z" src="undo.svg" disabled></se-button>
|
||||
<se-button id="tool_redo" title="tools.redo" shortcut="ctrl+Y" src="redo.svg" disabled></se-button>
|
||||
</div> <!-- history_panel -->
|
||||
<!-- Buttons when a single element is selected -->
|
||||
<div class="selected_panel">
|
||||
|
|
@ -43,27 +43,27 @@
|
|||
<se-list-item id="tool_posleft" value="l" title="tools.align_left" src="align_left.svg" img-height="22px">
|
||||
</se-list-item>
|
||||
<se-list-item id="tool_poscenter" value="c" title="tools.align_center" src="align_center.svg"
|
||||
img-height="22px"></se-list-item>
|
||||
img-height="22px"></se-list-item>
|
||||
<se-list-item id="tool_posright" value="r" title="tools.align_right" src="align_right.svg"
|
||||
img-height="22px"></se-list-item>
|
||||
img-height="22px"></se-list-item>
|
||||
<se-list-item id="tool_postop" value="t" title="tools.align_top" src="align_top.svg" img-height="22px">
|
||||
</se-list-item>
|
||||
<se-list-item id="tool_posmiddle" value="m" title="tools.align_middle" src="align_middle.svg"
|
||||
img-height="22px"></se-list-item>
|
||||
img-height="22px"></se-list-item>
|
||||
<se-list-item id="tool_posbottom" value="b" src="align_bottom.svg" title="tools.align_bottom"
|
||||
img-height="22px"></se-list-item>
|
||||
img-height="22px"></se-list-item>
|
||||
<se-list-item id="tool_poshoriz" value="dh" src="align_distrib_horiz.svg" title="tools.align_distrib_horiz"
|
||||
img-height="22px"></se-list-item>
|
||||
img-height="22px"></se-list-item>
|
||||
<se-list-item id="tool_posverti" value="dv" src="align_distrib_verti.svg" title="tools.align_distrib_verti"
|
||||
img-height="22px"></se-list-item>
|
||||
img-height="22px"></se-list-item>
|
||||
</se-list>
|
||||
</div>
|
||||
<div class="xy_panel">
|
||||
<se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="properties.x_label"
|
||||
title="properties.pos_x">
|
||||
title="properties.pos_x">
|
||||
</se-spin-input>
|
||||
<se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="properties.y_label"
|
||||
title="properties.pos_y">
|
||||
title="properties.pos_y">
|
||||
</se-spin-input>
|
||||
</div>
|
||||
<!-- Buttons when multiple elements are selected -->
|
||||
|
|
@ -83,27 +83,29 @@
|
|||
<se-button id="tool_align_top" title="tools.align_top" src="align_top.svg"></se-button>
|
||||
<se-button id="tool_align_middle" title="tools.align_middle" src="align_middle.svg"></se-button>
|
||||
<se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
|
||||
<se-button id="tool_align_distrib_horiz" title="tools.align_distrib_horiz" src="align_distrib_horiz.svg"></se-button>
|
||||
<se-button id="tool_align_distrib_verti" title="tools.align_distrib_verti" src="align_distrib_verti.svg"></se-button>
|
||||
<se-button id="tool_align_distrib_horiz" title="tools.align_distrib_horiz"
|
||||
src="align_distrib_horiz.svg"></se-button>
|
||||
<se-button id="tool_align_distrib_verti" title="tools.align_distrib_verti"
|
||||
src="align_distrib_verti.svg"></se-button>
|
||||
<se-select id="tool_align_relative" label="tools.relativeTo"
|
||||
options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
|
||||
values="selected::largest::smallest::page">
|
||||
options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
|
||||
values="selected::largest::smallest::page">
|
||||
</se-list-item>
|
||||
</se-select>
|
||||
</div> <!-- multiselected_panel -->
|
||||
<div class="rect_panel">
|
||||
<se-spin-input id="rect_width" data-attr="width" size="4" label="properties.w_label"
|
||||
title="properties.rect_width"></se-spin-input>
|
||||
title="properties.rect_width"></se-spin-input>
|
||||
<se-spin-input id="rect_height" data-attr="height" size="4" label="properties.h_label"
|
||||
title="properties.rect_height"></se-spin-input>
|
||||
title="properties.rect_height"></se-spin-input>
|
||||
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius"
|
||||
data-attr="Corner Radius" src="c_radius.svg"></se-spin-input>
|
||||
data-attr="Corner Radius" src="c_radius.svg"></se-spin-input>
|
||||
</div> <!-- rect_panel -->
|
||||
<div class="image_panel">
|
||||
<se-spin-input id="image_width" data-attr="width" size="4" type="text" label="properties.w_label"
|
||||
title="properties.image_width"></se-spin-input>
|
||||
title="properties.image_width"></se-spin-input>
|
||||
<se-spin-input id="image_height" data-attr="height" size="4" type="text" label="properties.h_label"
|
||||
title="properties.image_height"></se-spin-input>
|
||||
title="properties.image_height"></se-spin-input>
|
||||
</div>
|
||||
<div class="image_panel">
|
||||
<se-input id="image_url" data-attr="image_url" size="15" label="properties.image_url"></se-input>
|
||||
|
|
@ -117,15 +119,15 @@
|
|||
</div>
|
||||
<div class="ellipse_panel">
|
||||
<se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx"
|
||||
label="properties.cx_label"></se-spin-input>
|
||||
label="properties.cx_label"></se-spin-input>
|
||||
<se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy"
|
||||
label="properties.cy_label"></se-spin-input>
|
||||
label="properties.cy_label"></se-spin-input>
|
||||
</div>
|
||||
<div class="ellipse_panel">
|
||||
<se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx"
|
||||
label="properties.rx_label"></se-spin-input>
|
||||
label="properties.rx_label"></se-spin-input>
|
||||
<se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry"
|
||||
label="properties.ry_label"></se-spin-input>
|
||||
label="properties.ry_label"></se-spin-input>
|
||||
</div>
|
||||
<div class="line_panel">
|
||||
<se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="properties.x1_label">
|
||||
|
|
@ -141,43 +143,49 @@
|
|||
<!-- Text styles -->
|
||||
<se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
|
||||
<se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
|
||||
<se-button id="tool_text_decoration_underline" title="properties.text_decoration_underline" src="text_decoration_underline.svg"></se-button>
|
||||
<se-button id="tool_text_decoration_linethrough" title="properties.text_decoration_linethrough" src="text_decoration_linethrough.svg"></se-button>
|
||||
<se-button id="tool_text_decoration_overline" title="properties.text_decoration_overline" src="text_decoration_overline.svg"></se-button>
|
||||
<se-button id="tool_text_decoration_underline" title="properties.text_decoration_underline"
|
||||
src="text_decoration_underline.svg"></se-button>
|
||||
<se-button id="tool_text_decoration_linethrough" title="properties.text_decoration_linethrough"
|
||||
src="text_decoration_linethrough.svg"></se-button>
|
||||
<se-button id="tool_text_decoration_overline" title="properties.text_decoration_overline"
|
||||
src="text_decoration_overline.svg"></se-button>
|
||||
|
||||
<!-- Font Size-->
|
||||
<se-select id="tool_font_family" label="properties.font_family_label"
|
||||
options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times"
|
||||
values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></se-select>
|
||||
options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times"
|
||||
values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></se-select>
|
||||
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size"
|
||||
src="fontsize.svg"></se-spin-input>
|
||||
src="fontsize.svg"></se-spin-input>
|
||||
|
||||
<!-- Text Anchor -->
|
||||
<se-list id="tool_text_anchor" label="" width="22px" height="22px">
|
||||
<se-list-item id="tool_text_anchor_start" value="start" title="properties.text_anchor_start" src="anchor_start.svg" img-height="25px"></se-list-item>
|
||||
<se-list-item id="tool_text_anchor_middle" value="middle" title="properties.text_anchor_middle" src="anchor_middle.svg" img-height="25px"></se-list-item>
|
||||
<se-list-item id="tool_text_anchor_end" value="end" title="properties.text_anchor_end" src="anchor_end.svg" img-height="25px"></se-list-item>
|
||||
<se-list-item id="tool_text_anchor_start" value="start" title="properties.text_anchor_start"
|
||||
src="anchor_start.svg" img-height="25px"></se-list-item>
|
||||
<se-list-item id="tool_text_anchor_middle" value="middle" title="properties.text_anchor_middle"
|
||||
src="anchor_middle.svg" img-height="25px"></se-list-item>
|
||||
<se-list-item id="tool_text_anchor_end" value="end" title="properties.text_anchor_end" src="anchor_end.svg"
|
||||
img-height="25px"></se-list-item>
|
||||
</se-list>
|
||||
|
||||
<!-- Letter Spacing -->
|
||||
<se-spin-input size="2" id="tool_letter_spacing" min=0 max=100 step=1 title="properties.text_letter_spacing"
|
||||
src="letter_spacing.svg"></se-spin-input>
|
||||
src="letter_spacing.svg"></se-spin-input>
|
||||
|
||||
<!-- Word Spacing -->
|
||||
<se-spin-input size="2" id="tool_word_spacing" min=0 max=1000 step=1 title="properties.text_word_spacing"
|
||||
src="word_spacing.svg"></se-spin-input>
|
||||
src="word_spacing.svg"></se-spin-input>
|
||||
|
||||
<!-- Text Length -->
|
||||
<se-spin-input size="2" id="tool_text_length" min=0 max=1000 step=1 title="properties.text_length"
|
||||
src="text_length.svg"></se-spin-input>
|
||||
src="text_length.svg"></se-spin-input>
|
||||
|
||||
<!-- Length Adjust -->
|
||||
<se-select id="tool_length_adjust" label="properties.text_length_adjust"
|
||||
options="properties.text_length_adjust_spacing,properties.text_length_adjust_spacing_and_glyphs"
|
||||
values="spacing::spacingAndGlyphs"></se-select>
|
||||
options="properties.text_length_adjust_spacing,properties.text_length_adjust_spacing_and_glyphs"
|
||||
values="spacing::spacingAndGlyphs"></se-select>
|
||||
</div>
|
||||
<!-- Not visible, but still used -->
|
||||
<input id="text" type="text" size="35"/>
|
||||
<input id="text" type="text" size="35" />
|
||||
<div class="container_panel">
|
||||
<div class="tool_sep"></div>
|
||||
<se-input id="g_title" data-attr="title" size="8" label="properties.label"></se-input>
|
||||
|
|
@ -192,7 +200,7 @@
|
|||
<div class="a_panel">
|
||||
<label id="tool_link_url">
|
||||
<span id="linkLabel" class="icon_label"></span>
|
||||
<input id="link_url" type="text" size="35"/>
|
||||
<input id="link_url" type="text" size="35" />
|
||||
</label>
|
||||
</div> <!-- a_panel -->
|
||||
<div class="path_node_panel">
|
||||
|
|
@ -204,11 +212,11 @@
|
|||
<se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label">
|
||||
</se-spin-input>
|
||||
<se-select id="seg_type" title="properties.seg_type" label=""
|
||||
options="properties.straight_segments,properties.curve_segments" values="4::6"></se-select>
|
||||
options="properties.straight_segments,properties.curve_segments" values="4::6"></se-select>
|
||||
<se-button id="tool_node_clone" title="tools.node_clone" src="tool_node_clone.svg"></se-button>
|
||||
<se-button id="tool_node_delete" title="tools.node_delete" src="tool_node_delete.svg"></se-button>
|
||||
<se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg"></se-button>
|
||||
<se-button id="tool_add_subpath" title="tools.add_subpath" src="tool_add_subpath.svg"></se-button>
|
||||
</div> <!-- path_node_panel -->
|
||||
<div id="cur_context_panel"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
display: grid;
|
||||
grid-template-rows: auto 15px 1fr 40px;
|
||||
grid-template-columns: 40px 15px 50px 1fr 15px;
|
||||
grid-template-areas:
|
||||
grid-template-areas:
|
||||
"main main main top top"
|
||||
"left corner rulerX rulerX side"
|
||||
"left rulerY workarea workarea side"
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
#title_panel > p {
|
||||
#title_panel>p {
|
||||
color: white;
|
||||
padding-left: 5px;
|
||||
padding-right: 3px;
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
color: white;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top:50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.svg_editor:not(.open) #sidepanel_content {
|
||||
|
|
@ -272,7 +272,8 @@ hr {
|
|||
top: -9px;
|
||||
}
|
||||
|
||||
#main_menu ul, #main_menu li {
|
||||
#main_menu ul,
|
||||
#main_menu li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -327,15 +328,18 @@ hr {
|
|||
overflow-y: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
scrollbar-width: thin;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
#tools_bottom::-webkit-scrollbar { /* Chrome, Edge, and Safari */
|
||||
#tools_bottom::-webkit-scrollbar {
|
||||
/* Chrome, Edge, and Safari */
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
#tools_bottom se-list, #tools_bottom se-select {
|
||||
#tools_bottom se-list,
|
||||
#tools_bottom se-select {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -353,19 +357,24 @@ hr {
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#tools_left::-webkit-scrollbar { /* Chrome, Edge, and Safari */
|
||||
#tools_left::-webkit-scrollbar {
|
||||
/* Chrome, Edge, and Safari */
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
#tools_left::-webkit-scrollbar-track, #tools_bottom::-webkit-scrollbar-track{
|
||||
#tools_left::-webkit-scrollbar-track,
|
||||
#tools_bottom::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#tools_left::-webkit-scrollbar-thumb, #tools_bottom::-webkit-scrollbar-thumb {
|
||||
background-color:rgb(70, 70, 70);
|
||||
#tools_left::-webkit-scrollbar-thumb,
|
||||
#tools_bottom::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(70, 70, 70);
|
||||
}
|
||||
|
||||
/* End scrollbar styling */
|
||||
|
|
@ -486,7 +495,8 @@ input[type=text] {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
#main_menu li#tool_open, #main_menu li#tool_import {
|
||||
#main_menu li#tool_open,
|
||||
#main_menu li#tool_import {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -495,7 +505,9 @@ input[type=text] {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
#tool_open input, #tool_import input, #tool_image input {
|
||||
#tool_open input,
|
||||
#tool_import input,
|
||||
#tool_image input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
font-size: 10em;
|
||||
|
|
@ -615,6 +627,4 @@ ul li.current {
|
|||
|
||||
.dropdown li.tool_button {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue