Continue work on bands display. #48

webassets/css/style.css

@@ -150,6 +150,110 @@ div#map {
 }
 
 
+/* BANDS PANEL */
+
+div#bands-container {
+    margin: 0;
+    padding: 0;
+    overflow-x: auto;
+    overflow-y: auto;
+    white-space: nowrap;
+    display: flex;
+    overscroll-behavior-x: none;
+}
+
+/* Bands panel inner layout */
+div.bandCol {
+    height: 100%;
+    min-width: 8em;
+    display: flex;
+    flex-flow: column;
+    overflow-y: clip;
+}
+
+div.bandColHeader {
+    flex: 0 1 auto;
+}
+
+div.bandColMiddle {
+    flex: 1 1 auto;
+}
+
+div.bandColMiddle ul {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    min-height: 100%;
+    margin: 0;
+    padding: 0;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+div.bandColMiddle ul li {
+    display: table-row;
+    line-height: 0.5em;
+}
+
+/*noinspection CssUnusedSymbol*/
+div.bandColMiddle ul li.withSpots {
+    line-height: 1em;
+}
+
+div.bandColMiddle ul li span {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+div.bandColMiddle ul {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border-left: 2px dotted;
+}
+
+div.bandColHeader {
+    text-align: center;
+    font-weight: bold;
+    padding: 0.5em;
+}
+
+div.bandColMiddle {
+    margin-left: 3px;
+    border-left: 2px dotted var(--text);
+}
+
+div.bandColSpot {
+    display: block;
+    border-radius: 3px;
+    padding: 3px;
+    background: lightyellow;
+    margin-right: 2em;
+}
+
+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;
+}
+
+
 /* GENERAL MOBILE SUPPORT */
 
 @media (max-width: 991.99px) {