@jupyterlab/running 4.2.0-alpha.1 → 4.2.0-alpha.2

package/style/base.css

@@ -11,11 +11,6 @@
   --jp-private-running-item-height: 24px;
 }
 
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
 .jp-RunningSessions {
   display: flex;
   flex-direction: column;
@@ -47,6 +42,7 @@
   margin: 0;
   padding: 0;
   list-style-type: none;
+  padding-left: 14px;
 }
 
 .jp-RunningSessions-item {
@@ -63,17 +59,76 @@
   cursor: pointer;
 }
 
-.jp-RunningSessions-item.jp-mod-running-child {
-  padding-left: 40px;
+.jp-mod-running-leaf {
+  /** Account for lack of collapser */
+  margin-left: 16px;
+}
+
+.jp-RunningSessions-sectionContainer > .jp-RunningSessions-sectionList {
+  padding-left: 0;
+}
+
+.jp-RunningSessions-viewButton[aria-pressed='true'] {
+  box-shadow: none;
+}
+
+.jp-mod-running-list-view .jp-RunningSessions-sectionList {
+  padding-left: 0;
 }
 
-.jp-RunningSessions-item.jp-mod-kernel:not(.jp-mod-running-child) {
+.jp-mod-running-list-view .jp-mod-running-leaf {
+  margin-left: 0;
+}
+
+.jp-mod-running-list-view .jp-RunningSessions-item.jp-mod-kernel,
+.jp-mod-running-list-view .jp-RunningSessions-item.jp-mod-kernelspec {
+  display: none;
+}
+
+.jp-RunningSessions-item.jp-mod-kernelspec,
+.jp-RunningSessions-item.jp-mod-kernel {
   user-select: none;
 }
 
-.jp-RunningSessions-item img {
+.jp-RunningSessions-item-label-kernel-id {
+  color: var(--jp-ui-font-color3);
+}
+
+.jp-RunningSessions-collapseButton {
+  margin: 4px 2px;
+}
+
+.jp-RunningSessions-collapseButton[aria-pressed='true'] {
+  box-shadow: none;
+}
+
+.jp-RunningSessions-icon {
+  margin: 0 4px;
+}
+
+.jp-RunningSessions-toolbar {
+  min-width: max-content;
+}
+
+img.jp-RunningSessions-icon,
+span.jp-RunningSessions-icon > svg {
+  width: 16px;
   height: 16px;
+}
+
+img.jp-RunningSessions-icon {
   margin-top: 4px;
+  object-fit: contain;
+}
+
+span.jp-RunningSessions-icon {
+  align-items: center;
+  display: flex;
+}
+
+span.jp-RunningSessions-icon > svg {
+  display: block;
+  margin: 0 auto;
 }
 
 .jp-RunningSessions-itemLabel {
@@ -98,8 +153,20 @@
   white-space: nowrap;
 }
 
+.jp-RunningSessions-caret {
+  align-items: center;
+  display: flex;
+  padding-right: 4px;
+}
+
+.jp-RunningSessions-caret > svg {
+  height: 16px;
+  width: 16px;
+}
+
 .jp-RunningSessions-item .jp-RunningSessions-itemShutdown {
   border-radius: 0;
+  margin: 0;
 }
 
 .jp-RunningSessions-item:not(:hover) .jp-RunningSessions-itemShutdown {
@@ -131,10 +198,90 @@
   background-color: var(--jp-layout-color2);
 }
 
-.jp-RunningSessions-shutdownAll.jp-ToolbarButtonComponent.jp-mod-disabled {
+.jp-RunningSessions-shutdownAll.jp-ToolbarButtonComponent[disabled] {
   color: var(--jp-ui-font-color2);
 }
 
-.jp-RunningSessions-shutdownAll.jp-ToolbarButtonComponent.jp-mod-disabled:hover {
+.jp-RunningSessions-shutdownAll.jp-ToolbarButtonComponent[disabled]:hover {
   background: none;
 }
+
+/*-----------------------------------------------------------------------------
+| SearchableSessions
+|----------------------------------------------------------------------------*/
+
+.jp-RunningSessions-item.jp-mod-active {
+  background-color: var(--jp-layout-color2);
+  outline: 1px solid var(--jp-brand-color1);
+  outline-offset: -2px;
+}
+
+.jp-SearchableSessions-list > .jp-RunningSessions-section {
+  min-height: auto;
+}
+
+.jp-SearchableSessions-title {
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size0);
+  margin: 0;
+  padding: 4px 0;
+}
+
+.jp-SearchableSessions-titleLabel {
+  text-transform: uppercase;
+}
+
+.jp-SearchableSessions-acceptButton {
+  display: none;
+}
+
+.jp-SearchableSessions-list > .jp-RunningSessions-section.jp-mod-empty {
+  display: none;
+}
+
+.jp-SearchableSessions-filter {
+  overflow: visible;
+}
+
+.jp-SearchableSessions-list {
+  overflow: auto;
+}
+
+.jp-SearchableSessions.jp-Dialog-body {
+  display: flex;
+}
+
+.jp-SearchableSessions-modal .jp-Dialog-content {
+  padding: 16px;
+  box-shadow: var(--jp-elevation-z4);
+  border-radius: 4px;
+  min-height: 100px;
+  max-height: 95%;
+}
+
+.jp-SearchableSessions-modal .jp-Dialog-footer {
+  display: none;
+}
+
+.jp-SearchableSessions-modal .jp-Dialog-header {
+  font-size: var(--jp-ui-font-size2);
+}
+
+.jp-SearchableSessions-modal.jp-Dialog {
+  background: transparent;
+  justify-content: start;
+  padding-top: 38px;
+  border: 0;
+}
+
+.jp-SearchableSessions-emptyIndicator {
+  color: var(--jp-ui-font-color2);
+  padding: 16px;
+  text-align: center;
+  padding-bottom: 8px;
+}
+
+.jp-RunningSessions-section:not(.jp-mod-empty)
+  ~ .jp-SearchableSessions-emptyIndicator {
+  display: none;
+}