fix several css issues
parent
e53182456a
commit
27ffeb156f
|
@ -404,9 +404,6 @@ div.jGraduate_StopSection {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
input.jGraduate_Ok, input.jGraduate_Cancel {
|
input.jGraduate_Ok, input.jGraduate_Cancel {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
@ -421,7 +418,7 @@ input.jGraduate_Ok {
|
||||||
float: left;
|
float: left;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
border: 1px solid #808080;
|
border: 1px solid var(--border-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 4px 4px 4px 30px;
|
margin: 4px 4px 4px 30px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ class SePlainBorderButton extends PlainButton {
|
||||||
fragmentFrom.html`
|
fragmentFrom.html`
|
||||||
<style>
|
<style>
|
||||||
[part~="button"] {
|
[part~="button"] {
|
||||||
background: #72797A;
|
background: var(--main-bg-color);
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -21,7 +21,7 @@ template.innerHTML = `
|
||||||
padding:5px 10px 5px 7px; /* Firefox */
|
padding:5px 10px 5px 7px; /* Firefox */
|
||||||
line-height:17px; /* Safari */
|
line-height:17px; /* Safari */
|
||||||
margin: 5px 20px 0 0;
|
margin: 5px 20px 0 0;
|
||||||
border: 1px #808080 solid;
|
border: 1px var(--border-color) solid;
|
||||||
border-top-color: #FFF;
|
border-top-color: #FFF;
|
||||||
border-left-color: #FFF;
|
border-left-color: #FFF;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
|
@ -44,7 +44,11 @@ export default {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
const showPanel = (on, tool) => {
|
const showPanel = (on, tool) => {
|
||||||
$id(`${tool}_panel`).style.display = on ? "block" : "none";
|
if (on) {
|
||||||
|
$id(`${tool}_panel`).style.removeProperty('display');
|
||||||
|
} else {
|
||||||
|
$id(`${tool}_panel`).style.display = 'none';
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -289,7 +289,7 @@ class TopPanel {
|
||||||
let linkHref = null;
|
let linkHref = null;
|
||||||
if (tagName === "a") {
|
if (tagName === "a") {
|
||||||
linkHref = this.editor.svgCanvas.getHref(elem);
|
linkHref = this.editor.svgCanvas.getHref(elem);
|
||||||
$id("g_panel").style.display = 'block';
|
$id("g_panel").style.removeProperty('display');
|
||||||
}
|
}
|
||||||
// siblings
|
// siblings
|
||||||
if (elem.parentNode) {
|
if (elem.parentNode) {
|
||||||
|
@ -297,7 +297,7 @@ class TopPanel {
|
||||||
return child !== elem;
|
return child !== elem;
|
||||||
});
|
});
|
||||||
if (elem.parentNode.tagName === "a" && !selements.length) {
|
if (elem.parentNode.tagName === "a" && !selements.length) {
|
||||||
$id("a_panel").style.display = 'block';
|
$id("a_panel").style.removeProperty('display');
|
||||||
linkHref = this.editor.svgCanvas.getHref(elem.parentNode);
|
linkHref = this.editor.svgCanvas.getHref(elem.parentNode);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -312,7 +312,7 @@ class TopPanel {
|
||||||
|
|
||||||
if (panels[tagName]) {
|
if (panels[tagName]) {
|
||||||
const curPanel = panels[tagName];
|
const curPanel = panels[tagName];
|
||||||
$id(tagName + "_panel").style.display = 'block';
|
$id(tagName + "_panel").style.removeProperty('display');
|
||||||
|
|
||||||
curPanel.forEach((item) => {
|
curPanel.forEach((item) => {
|
||||||
let attrVal = elem.getAttribute(item);
|
let attrVal = elem.getAttribute(item);
|
||||||
|
@ -367,7 +367,7 @@ class TopPanel {
|
||||||
);
|
);
|
||||||
// image
|
// image
|
||||||
} else if (tagName === "g" || tagName === "use") {
|
} else if (tagName === "g" || tagName === "use") {
|
||||||
$id("container_panel").style.display = 'block';
|
$id("container_panel").style.removeProperty('display');
|
||||||
const title = this.editor.svgCanvas.getTitle();
|
const title = this.editor.svgCanvas.getTitle();
|
||||||
const label = $id("g_title");
|
const label = $id("g_title");
|
||||||
label.value = title;
|
label.value = title;
|
||||||
|
@ -387,7 +387,7 @@ class TopPanel {
|
||||||
|
|
||||||
// if (!isNullish(elem))
|
// if (!isNullish(elem))
|
||||||
} else if (this.multiselected) {
|
} else if (this.multiselected) {
|
||||||
$id("multiselected_panel").style.display = 'block';
|
$id("multiselected_panel").style.removeProperty('display');
|
||||||
menuItems.setAttribute("enablemenuitems", "#group");
|
menuItems.setAttribute("enablemenuitems", "#group");
|
||||||
menuItems.setAttribute("disablemenuitems", "#ungroup");
|
menuItems.setAttribute("disablemenuitems", "#ungroup");
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
|
|
||||||
.svg_editor {
|
.svg_editor {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 40px 15px 1fr 40px;
|
grid-template-rows: auto 15px 1fr 40px;
|
||||||
grid-template-columns: 34px 15px 1fr 10px;
|
grid-template-columns: 34px 15px 1fr 10px;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"top top top top"
|
"top top top top"
|
||||||
|
@ -311,12 +311,16 @@ hr {
|
||||||
grid-area: top;
|
grid-area: top;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
/* leave space for the main menu */
|
/* leave space for the main menu */
|
||||||
position: relative;
|
position: relative;
|
||||||
|
background-color: var(--main-bg-color);
|
||||||
}
|
}
|
||||||
#tools_top > *{
|
#tools_top > *{
|
||||||
display:flex;
|
display:flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
background-color: var(--main-bg-color);
|
||||||
}
|
}
|
||||||
/*—————————————————————————————*/
|
/*—————————————————————————————*/
|
||||||
|
|
||||||
|
@ -613,33 +617,3 @@ ul li.current {
|
||||||
.dropdown li.tool_button {
|
.dropdown li.tool_button {
|
||||||
width: 24px;
|
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;
|
|
||||||
}
|
|
||||||
#cur_context_panel {
|
|
||||||
top: 87px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue