Add overlay UI element

.readthedocs.yaml

@@ -1,5 +1,10 @@
 version: 2
-sphinx:
-  configuration: docs/source/conf.py
+
+build:
+  os: ubuntu-22.04
+  tools:
+    python: "mambaforge-22.9"
 conda:
   environment: docs/environment.yml
+sphinx:
+  configuration: docs/source/conf.py

packages/widgets/src/tabbar.ts

@@ -849,7 +849,7 @@ export class TabBar<T> extends Widget {
         nextFocused?.setAttribute('tabindex', '0');
         (nextFocused as HTMLElement).focus();
       }
-    }
+    } 
   }
 
   /**
@@ -1713,7 +1713,8 @@ export namespace TabBar {
         return h.li(
           { id, key, className, title, style, dataset, ...aria },
           this.renderIcon(data),
-          this.renderLabel(data)
+          this.renderLabel(data),
+          this.renderOverlay(data)
         );
       }
     }
@@ -1755,6 +1756,14 @@ export namespace TabBar {
       return h.div({ className: 'lm-TabBar-tabCloseIcon' });
     }
 
+    renderOverlay(data: IRenderData<any>): VirtualElement {
+      if (data.title.label == 'Launcher') {
+        return h.div({ className: 'lm-TabBar-UI-Overlay.lm-mod-hidden' });
+      } else {
+        return h.div({ className: 'lm-TabBar-UI-Overlay' });
+      }
+    }
+
     /**
      * Create a unique render key for the tab.
      *

packages/widgets/style/tabbar.css

@@ -103,3 +103,21 @@
   box-sizing: border-box;
   background: inherit;
 }
+
+.lm-TabBar-UI-Overlay {
+  position: absolute;
+  top: 67%;
+  left: 45%;
+  width: 47%;
+  height: 32%;
+  border-radius: 25%;
+  z-index: inherit;
+  text-align: center;
+  color: rgb(255, 255, 255);
+  background: rgb(51, 51, 51);
+  visibility: hidden;
+}
+
+.lm-TabBar-UI-Overlay.lm-mod-hidden {
+  display: none !important;
+}