diff --git a/assembly/ibom.html b/assembly/ibom.html
index cb47d3f..7118be2 100644
--- a/assembly/ibom.html
+++ b/assembly/ibom.html
@@ -9,9 +9,14 @@
:root {
--pcb-edge-color: black;
--pad-color: #878787;
+ --pad-hole-color: #CCCCCC;
--pad-color-highlight: #D04040;
+ --pad-color-highlight-both: #D0D040;
+ --pad-color-highlight-marked: #44a344;
--pin1-outline-color: #ffb629;
- --pin1-outline-color-highlight: #b4ff03;
+ --pin1-outline-color-highlight: #ffb629;
+ --pin1-outline-color-highlight-both: #fcbb39;
+ --pin1-outline-color-highlight-marked: #fdbe41;
--silkscreen-edge-color: #aa4;
--silkscreen-polygon-color: #4aa;
--silkscreen-text-color: #4aa;
@@ -24,7 +29,8 @@
--zone-color-highlight: #d0404080;
}
-html, body {
+html,
+body {
margin: 0px;
height: 100%;
font-family: Verdana, sans-serif;
@@ -109,7 +115,7 @@ button#copy {
}
button#copy:active {
- box-shadow: inset 0px 0px 5px #6c6c6c;
+ box-shadow: inset 0px 0px 5px #6c6c6c;
}
textarea.clipboard-temp {
@@ -142,7 +148,7 @@ textarea.clipboard-temp {
.button-container {
font-size: 0;
- margin: 10px 10px 10px 0px;
+ margin: 0.4rem 0.4rem 0.4rem 0;
}
.dark .button-container {
@@ -173,7 +179,7 @@ canvas:active {
width: 100%;
max-width: 1000px;
border: none;
- padding: 5px;
+ padding: 3px;
}
.fileinfo .title {
@@ -196,9 +202,11 @@ canvas:active {
table-layout: fixed;
width: 100%;
margin-top: 1px;
+ position: relative;
}
-.bom th, .bom td {
+.bom th,
+.bom td {
border: 1px solid black;
padding: 5px;
word-wrap: break-word;
@@ -206,7 +214,8 @@ canvas:active {
position: relative;
}
-.dark .bom th, .dark .bom td {
+.dark .bom th,
+.dark .bom td {
border: 1px solid #777;
}
@@ -236,11 +245,11 @@ canvas:active {
}
.bom tr.checked {
- color: #aaa;
+ color: #1cb53d;
}
.dark .bom tr.checked {
- color: #666;
+ color: #2cce54;
}
.bom tr {
@@ -248,22 +257,14 @@ canvas:active {
}
.bom .numCol {
- width: 25px;
+ width: 30px;
}
-.bom .Description {
- width: 10%;
-}
-
-.bom .Part {
- width: 10%;
-}
-
-.bom .Value {
+.bom .value {
width: 15%;
}
-.bom .Quantity {
+.bom .quantity {
width: 65px;
}
@@ -325,7 +326,8 @@ canvas:active {
visibility: hidden;
}
-.bom .bom-checkbox:hover:before, .bom .bom-checkbox:hover:after {
+.bom .bom-checkbox:hover:before,
+.bom .bom-checkbox:hover:after {
visibility: visible;
transition: visibility 0.2s linear 1s;
}
@@ -339,7 +341,8 @@ canvas:active {
background-color: inherit;
}
-.split.split-horizontal, .gutter.gutter-horizontal {
+.split.split-horizontal,
+.gutter.gutter-horizontal {
height: 100%;
float: left;
}
@@ -452,7 +455,23 @@ mark.highlight {
background-repeat: no-repeat;
}
-.dark .statsbtn, .dark .savebtn, .dark .menubtn, .dark .iobtn {
+.visbtn {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='none' stroke='%23333' d='M2.5 4.5h5v15h-5zM9.5 4.5h5v15h-5zM16.5 4.5h5v15h-5z'/%3E%3C/svg%3E");
+ background-position: center;
+ background-repeat: no-repeat;
+ padding: 15px;
+}
+
+#vismenu-content {
+ left: 0px;
+ font-family: Verdana, sans-serif;
+}
+
+.dark .statsbtn,
+.dark .savebtn,
+.dark .menubtn,
+.dark .iobtn,
+.dark .visbtn {
filter: invert(1);
}
@@ -520,10 +539,13 @@ mark.highlight {
.menu {
position: relative;
display: inline-block;
- margin: 10px 10px 10px 0px;
+ margin: 0.4rem 0.4rem 0.4rem 0;
}
.menu-content {
+ font-size: 12pt !important;
+ text-align: left !important;
+ font-weight: normal !important;
display: none;
position: absolute;
background-color: white;
@@ -542,7 +564,9 @@ mark.highlight {
display: block;
}
-.menu:hover .menubtn, .menu:hover .iobtn, .menu:hover .statsbtn {
+.menu:hover .menubtn,
+.menu:hover .iobtn,
+.menu:hover .statsbtn {
background-color: #eee;
}
@@ -574,7 +598,8 @@ mark.highlight {
width: calc(100% - 10px);
}
-.menu-textbox.invalid, .dark .menu-textbox.invalid {
+.menu-textbox.invalid,
+.dark .menu-textbox.invalid {
color: red;
}
@@ -588,21 +613,73 @@ mark.highlight {
}
.topmostdiv {
+ display: flex;
+ flex-direction: column;
width: 100%;
- height: 100%;
background-color: white;
transition: background-color 0.3s;
}
#top {
- height: 78px;
- border-bottom: 2px solid black;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ align-items: center;
}
-.dark #top {
+#topdivider {
+ border-bottom: 2px solid black;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.dark #topdivider {
border-bottom: 2px solid #ccc;
}
+#topdivider>div {
+ position: relative;
+}
+
+#toptoggle {
+ cursor: pointer;
+ user-select: none;
+ position: absolute;
+ padding: 0.1rem 0.3rem;
+ top: -0.4rem;
+ left: -1rem;
+ font-size: 1.4rem;
+ line-height: 60%;
+ border: 1px solid black;
+ border-radius: 1rem;
+ background-color: #fff;
+ z-index: 100;
+}
+
+.flipped {
+ transform: rotate(0.5turn);
+}
+
+.dark #toptoggle {
+ border: 1px solid #fff;
+ background-color: #222;
+}
+
+#fileinfodiv {
+ flex: 20rem 1 0;
+ overflow: auto;
+}
+
+#bomcontrols {
+ display: flex;
+ flex-direction: row-reverse;
+}
+
+#bomcontrols>* {
+ flex-shrink: 0;
+}
+
#dbg {
display: block;
}
@@ -730,11 +807,97 @@ a {
color: #00b9fd;
}
-#frontcanvas, #backcanvas {
- touch-action: none;
+#frontcanvas,
+#backcanvas {
+ touch-action: none;
}
+.placeholder {
+ border: 1px dashed #9f9fda !important;
+ background-color: #edf2f7 !important;
+}
+.dragging {
+ z-index: 999;
+}
+
+.dark .dragging>table>tbody>tr {
+ background-color: #252c30;
+}
+
+.dark .placeholder {
+ filter: invert(1);
+}
+
+.column-spacer {
+ top: 0;
+ left: 0;
+ width: calc(100% - 4px);
+ position: absolute;
+ cursor: pointer;
+ user-select: none;
+ height: 100%;
+}
+
+.column-width-handle {
+ top: 0;
+ right: 0;
+ width: 4px;
+ position: absolute;
+ cursor: col-resize;
+ user-select: none;
+ height: 100%;
+}
+
+.column-width-handle:hover {
+ background-color: #4f99bd;
+}
+
+.help-link {
+ border: 1px solid #0278a4;
+ padding-inline: 0.3rem;
+ border-radius: 3px;
+ cursor: pointer;
+}
+
+.dark .help-link {
+ border: 1px solid #00b9fd;
+}
+
+.bom-color {
+ width: 20%;
+}
+
+.color-column input {
+ width: 1.6rem;
+ height: 1rem;
+ border: 1px solid black;
+ cursor: pointer;
+ padding: 0;
+}
+
+/* removes default styling from input color element */
+::-webkit-color-swatch {
+ border: none;
+}
+
+::-webkit-color-swatch-wrapper {
+ padding: 0;
+}
+
+::-moz-color-swatch,
+::-moz-focus-inner {
+ border: none;
+}
+
+::-moz-focus-inner {
+ padding: 0;
+}
+/* #bomhead {
+ position: sticky;
+ top: 0px;
+ z-index: 1;
+} */
@@ -3359,8 +4388,30 @@ window.matchMedia("print").addListener(resizeAll);