improve dialog style

This commit is contained in:
JFH
2021-05-12 23:48:41 +02:00
parent d40b45bcf3
commit e4283a79b9
14 changed files with 59 additions and 57 deletions

View File

@@ -52,7 +52,7 @@ export default class SePlainAlertDialog extends PlainAlertDialog {
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #B0B0B0;
border: 1px solid #5a6162;
padding: 1em;
border-radius: 5px;
-moz-border-radius: 5px;

View File

@@ -71,7 +71,8 @@ template.innerHTML = `
}
#svg_prefs #svg_prefs_container {
padding: 10px;
background-color: #B0B0B0;
background-color: #5a6162;
color: #c5c5c5;
border: 1px outset #777;
opacity: 1.0;
font-family: Verdana, Helvetica, sans-serif;
@@ -83,6 +84,17 @@ template.innerHTML = `
margin-left: 1em;
overflow: auto;
}
#tool_prefs_save {
width: 30%;
background-color: #c79605;
margin-left: 20%;
}
#tool_prefs_cancel {
width: 30%;
background-color: #c8c8c8;
}
#svg_prefs #svg_docprops_prefs {
float: left;
@@ -138,11 +150,9 @@ template.innerHTML = `
<div id="svg_prefs_container">
<div id="tool_prefs_back" class="toolbar_button">
<button id="tool_prefs_save">
<img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
OK
</button>
<button id="tool_prefs_cancel">
<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
Cancel
</button>
</div>

View File

@@ -6,10 +6,10 @@ template.innerHTML = `
#dialog_content {
margin: 10px 10px 5px 10px;
background: #DDD;
background: #5a6162;
overflow: auto;
text-align: left;
border: 1px solid #B0B0B0;
border: 1px solid #c8c8c8;
}
#dialog_content p, #dialog_content select, #dialog_content label {
@@ -24,7 +24,7 @@ template.innerHTML = `
top: 50%;
max-width: 400px;
z-index: 50001;
background: #CCC;
background: #5a6162;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
@@ -72,11 +72,9 @@ template.innerHTML = `
</div>
<div id="dialog_buttons">
<button id="export_ok">
<img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
Ok
</button>
<button id="export_cancel">
<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
Cancel
</button>
</div>

View File

@@ -16,7 +16,8 @@ template.innerHTML = `
}
#svg_docprops #svg_docprops_container {
padding: 10px;
background-color: #B0B0B0;
background-color: #5a6162;
color: #c5c5c5;
border: 1px outset #777;
opacity: 1.0;
font-family: Verdana, Helvetica, sans-serif;

View File

@@ -14,7 +14,8 @@ template.innerHTML = `
}
#svg_source_editor #svg_source_container {
background-color: #B0B0B0;
background-color: #5a6162;
color: #c5c5c5;
opacity: 1.0;
text-align: center;
border: 1px outset #777;
@@ -42,18 +43,27 @@ template.innerHTML = `
#svg_source_editor #tool_source_back {
text-align: left;
margin: 5px 10px;
height: 30px;
}
#tool_source_save {
width: 20%;
background-color: #c79605;
margin-left: 30%;
margin-top: 5px;
}
#tool_source_cancel {
width: 20%;
background-color: #c8c8c8;
}
</style>
<elix-dialog id="svg_source_editor" aria-label="SVG Source Editor" closed>
<div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save">
<img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
Apply Changes
</button>
<button id="tool_source_cancel">
<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
Cancel
</button>
</div>