fix several css issues

master
JFH 2021-08-09 10:37:51 +02:00
parent e53182456a
commit 27ffeb156f
6 changed files with 18 additions and 43 deletions

View File

@ -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;
} }

View File

@ -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>

View File

@ -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;

View File

@ -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';
}
}; };
/** /**

View File

@ -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 {

View File

@ -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;
}
}