Update selectors.

src/application/tabs.css

@@ -16,11 +16,11 @@
 
 
 /*-----------------------------------------------------------------------------
-| TabBar
+| Tabs in the dock panel
 |----------------------------------------------------------------------------*/
 
 
-.p-TabBar {
+.p-DockPanel-tabBar {
   border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
   overflow: visible;
   color: var(--jp-ui-font-color1);
@@ -28,28 +28,24 @@
 }
 
 
-.p-TabBar.p-mod-horizontal {
+.p-DockPanel-tabBar.p-mod-horizontal {
   min-height: calc(var(--jp-private-horizontal-tab-height) + 2 * var(--jp-border-width));
 }
 
 
-.p-TabBar.p-mod-vertical {
+.p-DockPanel-tabBar.p-mod-vertical {
   min-width: 80px;
 }
 
 
-.p-TabBar-content {
+.p-DockPanel-tabBar > .p-TabBar-content {
+  align-items: flex-end;
   min-width: 0;
   min-height: 0;
 }
 
 
-.p-TabBar > .p-TabBar-content {
-  align-items: flex-end;
-}
-
-
-.p-TabBar-tab {
+.p-DockPanel-tabBar .p-TabBar-tab {
   flex: 0 1 var(--jp-private-horizontal-tab-width);
   min-height: calc(var(--jp-private-horizontal-tab-height) + var(--jp-border-width));
   /* For some reason Firefox needs us to give a max-height as well...*/
@@ -66,18 +62,17 @@
 }
 
 
-.p-TabBar-tab:hover:not(.p-mod-current) {
+.p-DockPanel-tabBar .p-TabBar-tab:hover:not(.p-mod-current) {
   background: var(--jp-layout-color1);
 }
 
 
-.p-TabBar-tab:first-child {
+.p-DockPanel-tabBar .p-TabBar-tab:first-child {
   margin-left: 0;
 }
 
-/* .p-mod-current state */
-
-.p-TabBar-tab.p-mod-current {
+/* This is a current tab of a tab bar in the dock panel: each tab bar has 1. */
+.p-DockPanel-tabBar .p-TabBar-tab.p-mod-current {
   background: var(--jp-layout-color1);
   color: var(--jp-ui-font-color0);
   min-height: calc(var(--jp-private-horizontal-tab-height) + 2 * var(--jp-border-width));
@@ -85,61 +80,73 @@
 }
 
 
-.p-TabBar.p-mod-left .p-TabBar-tab,
-.p-TabBar.p-mod-right .p-TabBar-tab {
+/* This is the main application level current tab: only 1 exists. */
+.p-DockPanel-tabBar .p-TabBar-tab.jp-mod-current:before {
+  position: absolute;
+  top: calc(-1 * var(--jp-border-width));
+  left: calc(-1 * var(--jp-border-width));
+  content: '';
+  height: var(--jp-private-horizontal-tab-active-top-border);
+  width: calc(100% + 2*var(--jp-border-width));
+  background: var(--jp-brand-color1);
+}
+
+
+.p-DockPanel-tabBar .p-TabBar.p-mod-left .p-TabBar-tab,
+.p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab {
   flex: 0 1 40px;
   margin-top: -1px;
   line-height: 40px;
 }
 
 
-.p-TabBar.p-mod-left .p-TabBar-tab {
+.p-DockPanel-tabBar .p-TabBar.p-mod-left .p-TabBar-tab {
   border-right: none;
 }
 
 
-.p-TabBar.p-mod-right .p-TabBar-tab {
+.p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab {
   border-left: none;
 }
 
 
-.p-TabBar.p-mod-left .p-TabBar-tab:first-child,
-.p-TabBar.p-mod-right .p-TabBar-tab:first-child {
+.p-DockPanel-tabBar .p-TabBar.p-mod-left .p-TabBar-tab:first-child,
+.p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab:first-child {
   margin-top: 0;
 }
 
 
-.p-TabBar.p-mod-left .p-TabBar-tab.p-mod-current,
-.p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
+.p-DockPanel-tabBar .p-TabBar.p-mod-left .p-TabBar-tab.p-mod-current,
+.p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
   min-width: 80px;
   max-width: 80px;
 }
 
 
-.p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
+.p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
   transform: translateX(-1px);
 }
 
 
-.p-TabBar-tabIcon,
-.p-TabBar-tabLabel,
-.p-TabBar-tabCloseIcon {
+.p-DockPanel-tabBar .p-TabBar-tabIcon,
+.p-DockPanel-tabBar .p-TabBar-tabLabel,
+.p-DockPanel-tabBar .p-TabBar-tabCloseIcon {
   display: inline-block;
 }
 
 
-.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
+.p-DockPanel-tabBar .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
   margin-left: 4px;
 }
 
 
-.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
+.p-DockPanel-tabBar .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
   content: '\f00d';  /* close */
   font-family: FontAwesome;
 }
 
 
-.p-TabBar-tab.p-mod-closable.jp-mod-dirty > .p-TabBar-tabCloseIcon:before {
+.p-DockPanel-tabBar .p-TabBar-tab.p-mod-closable.jp-mod-dirty > .p-TabBar-tabCloseIcon:before {
   font-family: FontAwesome;
   content: '\f111'; /* circle */
   font-size: 10px;
@@ -147,15 +154,16 @@
 
 
 .p-TabBar-tab.p-mod-drag-image {
-  min-height: var(--jp-private-horizontal-tab-height);
-  min-width: var(--jp-private-horizontal-tab-width);
-  line-height: var(--jp-private-horizontal-tab-height);
-  color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color1);
   border: var(--jp-border-width) solid var(--jp-border-color1);
   border-top: var(--jp-border-width) solid var(--jp-brand-color1);
-  font-size: var(--jp-ui-font-size1);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+  line-height: var(--jp-private-horizontal-tab-height);
+  min-height: var(--jp-private-horizontal-tab-height);
+  min-width: var(--jp-private-horizontal-tab-width);
+  padding: 0px 10px;
   transform: translateX(-40%) translateY(-58%);
 }