css fixes

This commit is contained in:
JFH
2020-12-21 00:50:25 +01:00
parent 88690b6a2b
commit aaf04adcf5
3 changed files with 26 additions and 44 deletions

View File

@@ -11,6 +11,28 @@ const $ = [
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
<style> <style>
img {
height: 22px;
width: 22px;
}
.block {
height: 22px;
width: 22px;
float: right;
background-color: darkgrey;
}
#picker {
background: #f0f0f0;
height: 26px;
line-height: 26px;
border-radius: 3px;
min-width: 52px;
display: flex;
align-items: center;
margin-right: 4px;
justify-content: space-evenly;
}
</style> </style>
<div id="picker"> <div id="picker">
<img src="./images/logo.svg" alt="icon"> <img src="./images/logo.svg" alt="icon">

View File

@@ -340,8 +340,8 @@
<div value="layer">Fit to layer content</div> <div value="layer">Fit to layer content</div>
<div value="content">Fit to all content</div> <div value="content">Fit to all content</div>
</se-dropdown> </se-dropdown>
<se-colorpicker id="fill_color" src="fill.svg" title="Change fill color" type="fill"></se-colorpicker> <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker> <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1" label=""></se-spin-input> <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1" label=""></se-spin-input>
<label class="stroke_tool"> <label class="stroke_tool">
<select id="stroke_style" title="Change stroke dash style"> <select id="stroke_style" title="Change stroke dash style">

View File

@@ -416,31 +416,6 @@ hr {
margin-top: 5px; margin-top: 5px;
} }
#fill_color, #stroke_color {
height: 16px;
width: 16px;
border: 1px solid #808080;
cursor: pointer;
overflow: hidden;
}
#fill_color, #stroke_color {
height: 16px;
width: 16px;
border: 1px solid #808080;
cursor: pointer;
overflow: hidden;
}
.color_block {
top: 0;
left: 0;
}
.color_block svg {
display: block;
}
#tools_left { #tools_left {
position: absolute; position: absolute;
border-right: none; border-right: none;
@@ -695,20 +670,12 @@ input[type=text] {
display: none; display: none;
} }
#color_picker {
position: absolute;
display: none;
background: #E8E8E8;
height: 350px;
z-index: 5;
}
#tools_bottom { #tools_bottom {
position: absolute; position: absolute;
left: 40px; left: 40px;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 40px; height: 33px;
overflow: visible; overflow: visible;
} }
@@ -754,10 +721,7 @@ input[type=text] {
#toggle_stroke_tools:hover { #toggle_stroke_tools:hover {
background: white; background: white;
} }
.color_tool > * {
float: left;
margin-right: 5px;
}
#tool_opacity { right: 0;} #tool_opacity { right: 0;}
#tool_opacity { #tool_opacity {
@@ -883,10 +847,6 @@ ul li.current {
margin-left: 30px; margin-left: 30px;
} }
#bg_blocks .color_block {
position: static;
}
#svg_docprops #svg_docprops_container, #svg_docprops #svg_docprops_container,
#svg_prefs #svg_prefs_container { #svg_prefs #svg_prefs_container {
position: absolute; position: absolute;