First pass of the new style of band panel #48

webassets/css/style.css

@@ -162,76 +162,64 @@ div#bands-container {
     overscroll-behavior-x: none;
 }
 
-div.bandCol {
-    min-width: 8em;
-    display: flex;
-    flex-flow: column;
-    overflow-y: clip;
+#bands-table {
+    min-width: 100%;
 }
 
-div.bandColHeader {
-    flex: 0 1 auto;
+#bands-table th {
+    width: 20%;
+    min-width: 12em;
+    padding: 0.5em;
     text-align: center;
     font-weight: bold;
-    padding: 0.5em;
 }
 
-div.bandColMiddle {
-    flex: 1 1 auto;
-    margin-left: 3px;
-    border-left: 2px dotted var(--text);
+#bands-table td {
+    width: 20%;
+    min-width: 12em;
 }
 
-div.bandColMiddle ul {
-    display: table;
-    table-layout: fixed;
+div.band-container {
+    height: 62em;
+    width: 20%;
+    min-width: 12em;
+    position: relative;
+}
+
+div.band-markers {
     width: 100%;
     height: 100%;
-    margin: 0;
-    padding: 0;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    border-left: 2px dotted;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 13;
 }
 
-div.bandColMiddle ul li {
-    display: table-row;
-    line-height: 0.5em;
+div.band-spots {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 15;
 }
 
-/*noinspection CssUnusedSymbol*/
-div.bandColMiddle ul li.withSpots {
-    line-height: 1em;
+canvas.band-lines-canvas {
+    width: 5em;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 11;
 }
 
-div.bandColMiddle ul li span {
-    display: table-cell;
-    vertical-align: middle;
-}
-
-div.bandColSpot {
-    display: block;
+div.band-spot {
+    position: absolute;
+    left: 5em;
+    padding: 0 0.25em;
+    background-color: white;
     border-radius: 3px;
-    padding: 3px;
-    background: lightyellow;
-    margin: 0.1em 2em 0.1em 0.3em;
-}
-
-span.bandColSpot {
-    vertical-align: bottom;
-    display: inline !important;
-}
-
-/* Don't wrap frequencies */
-span.bandColSpotFreq {
-    white-space: nowrap;
-    display: inline !important;
-}
-
-span.bandColSpotMode {
-    padding-left: 0.5em;
-    font-size: 0.8em;
-    line-height: 0.4em;
+    cursor: default;
 }