Add generic support for a 'surround'.

src/scss/timeline-core.scss

@@ -0,0 +1,88 @@
+@use 'vis-timeline/dist/vis-timeline-graph2d.css';
+@use 'drawer';
+
+:host {
+  width: 100%;
+  height: 100%;
+  background-color: var(--card-background-color);
+  padding-bottom: 5px;
+
+  // Share the screen space with thumbnails that may be above/below.
+  display: flex;
+  flex-direction: column;
+
+  // So that absolute sidedrawer is relative to this host.
+  position: relative;
+}
+
+div.timeline {
+  flex: 1;
+}
+div.timeline.left-margin {
+  // Clearance for the drawer button.
+  margin-left: calc(drawer.$drawer-icon-size + 1px);
+}
+div.timeline.right-margin {
+  // Clearance for the drawer button.
+  margin-right: calc(drawer.$drawer-icon-size + 1px);
+}
+
+.vis-text {
+  color: var(--primary-text-color) !important;
+}
+
+.vis-timeline {
+  border: none;
+}
+
+.vis-labelset .vis-label {
+  // Group labels.
+  color: var(--primary-text-color);
+}
+
+.vis-item {
+  border-color: var(--primary-color);
+  background: none;
+  color: var(--primary-text-color);
+  background-color: var(--primary-color);
+}
+
+.vis-item:hover {
+  // Float icons upwards when the user hovers over them.
+  z-index: 2;
+}
+
+.vis-item.vis-box {
+  border: none;
+}
+
+.vis-item .vis-item-content {
+  padding: 0px;
+}
+
+.vis-item.vis-cluster {
+  border-style: dotted;
+  color: var(--primary-text-color);
+  background-color: var(--primary-background-color);
+  box-shadow: 0px 0px 5px 1px var(--primary-color);
+}
+
+.vis-time-axis .vis-grid.vis-minor {
+  border-color: var(--secondary-color);
+}
+
+.vis-time-axis .vis-grid.vis-major {
+  border-color: var(--secondary-color);
+}
+
+.vis-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div.vis-tooltip {
+  padding: 0px;
+  background-color: unset;
+  border: none;
+}