Merge pull request #8994 from ellisonbg/final-style-1

Minor style improvements for 3.0

packages/application/style/tabs.css

@@ -77,7 +77,7 @@
 /* This is the main application level current tab: only 1 exists. */
 .lm-DockPanel-tabBar .lm-TabBar-tab.jp-mod-current:before {
   position: absolute;
-  top: calc(-1 * var(--jp-border-width));
+  top: calc(-1 * var(--jp-border-width) + 1px);
   left: calc(-1 * var(--jp-border-width));
   content: '';
   height: var(--jp-private-horizontal-tab-active-top-border);

packages/celltags/src/tool.ts

@@ -32,6 +32,7 @@ export class TagTool extends NotebookTools.Tool {
     this.tracker = tracker;
     this.layout = new PanelLayout();
     this.createTagInput();
+    this.addClass('jp-TagTool');
   }
 
   /**
@@ -184,16 +185,16 @@ export class TagTool extends NotebookTools.Tool {
   }
 
   /**
-   * Upon attach, add header if it doesn't already exist and listen for changes
+   * Upon attach, add label if it doesn't already exist and listen for changes
    * from the notebook tracker.
    */
   protected onAfterAttach() {
-    if (!this.header) {
-      const header = document.createElement('header');
-      header.textContent = this._trans.__('Tags in Notebook');
-      header.className = 'tag-header';
-      this.parent!.node.insertBefore(header, this.node);
-      this.header = true;
+    if (!this.label) {
+      const label = document.createElement('label');
+      label.textContent = this._trans.__('Cell Tags');
+      label.className = 'tag-label';
+      this.parent!.node.insertBefore(label, this.node);
+      this.label = true;
     }
     if (this.tracker.currentWidget) {
       void this.tracker.currentWidget.context.ready.then(() => {
@@ -230,7 +231,7 @@ export class TagTool extends NotebookTools.Tool {
 
   public tracker: INotebookTracker;
   private tagList: string[] = [];
-  private header: boolean = false;
+  private label: boolean = false;
   protected translator: ITranslator;
   private _trans: TranslationBundle;
 }

packages/celltags/style/base.css

@@ -1,15 +1,16 @@
 .tag {
-  height: 32px;
-  width: fit-content;
-  border-radius: 35px;
+  height: 20px;
+  border-radius: 10px;
   margin-right: 5px;
   margin-bottom: 10px;
-  padding: 12px;
-  font-size: var(--jp-ui-font-size-1);
+  padding: 0px 8px;
+  font-size: var(--jp-ui-font-size1);
   display: inline-flex;
   justify-content: center;
   align-items: center;
   max-width: calc(100% - 25px);
+  border: 1px solid var(--jp-border-color1);
+  color: var(--jp-ui-font-color1);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -19,15 +20,11 @@
 }
 
 .unapplied-tag {
-  background-color: var(--jp-layout-color1);
-  border: 1px solid var(--jp-ui-font-color2);
-  color: var(--jp-ui-font-color2);
+  background-color: var(--jp-layout-color2);
 }
 
 .applied-tag {
-  background-color: var(--jp-layout-color2);
-  border: 1px solid var(--jp-ui-font-color1);
-  color: var(--jp-ui-font-color1);
+  background-color: var(--jp-layout-color3);
 }
 
 .add-tag {
@@ -36,9 +33,9 @@
   border: none;
   outline: none;
   resize: horizontal;
-  font-size: var(--jp-ui-font-size-1);
-  color: var(--jp-ui-font-color2);
-  background-color: var(--jp-layout-color1);
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color2);
 }
 
 .tag-holder {
@@ -47,17 +44,19 @@
   align-items: center;
 }
 
-.tag-hover {
-  background-color: var(--jp-layout-color2);
+.tag-label {
+  flex: 0 0 auto;
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
+  padding: 0px 12px;
 }
 
-.tag-header {
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
-  flex: 0 0 auto;
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 600;
-  letter-spacing: 1px;
+/* Need a more specific selector to override another rule on .jp-NotebookTools children. */
+.jp-NotebookTools .tag-label {
   margin: 0px;
-  padding: 8px 12px;
-  text-transform: uppercase;
+}
+
+/* Need a more specific selector to override another rule .jp-NotebookTools children. */
+.jp-NotebookTools div.jp-TagTool {
+  margin-top: 4px;
 }

packages/filebrowser/style/base.css

@@ -36,7 +36,7 @@
 
 .jp-BreadCrumbs {
   flex: 0 0 auto;
-  margin: 4px 12px;
+  margin: 8px 12px 8px 12px;
 }
 
 .jp-BreadCrumbs-item {
@@ -65,18 +65,57 @@
 
 .jp-FileBrowser-toolbar.jp-Toolbar {
   padding: 0px;
+  margin: 8px 12px 0px 12px;
 }
 
 .jp-FileBrowser-toolbar.jp-Toolbar {
-  justify-content: space-evenly;
+  justify-content: flex-start;
 }
 
 .jp-FileBrowser-toolbar.jp-Toolbar .jp-Toolbar-item {
-  flex: 1;
+  flex: 0 0 auto;
+  padding-left: 0px;
+  padding-right: 2px;
 }
 
 .jp-FileBrowser-toolbar.jp-Toolbar .jp-ToolbarButtonComponent {
-  width: 100%;
+  width: 40px;
+}
+
+.jp-FileBrowser-toolbar.jp-Toolbar
+  .jp-Toolbar-item:first-child
+  .jp-ToolbarButtonComponent {
+  width: 72px;
+  background: var(--jp-brand-color1);
+}
+
+.jp-FileBrowser-toolbar.jp-Toolbar
+  .jp-Toolbar-item:first-child
+  .jp-ToolbarButtonComponent
+  .jp-icon3 {
+  fill: white;
+}
+
+/*-----------------------------------------------------------------------------
+| Other styles
+|----------------------------------------------------------------------------*/
+
+.jp-FileDialog.jp-mod-conflict input {
+  color: red;
+}
+
+.jp-FileDialog .jp-new-name-title {
+  margin-top: 12px;
+}
+
+.jp-LastModified-hidden {
+  display: none;
+}
+
+.jp-FileBrowser-filterBox {
+  padding: 0px;
+  flex: 0 0 auto;
+  margin: 8px 12px 0px 12px;
 }
 
 /*-----------------------------------------------------------------------------
@@ -238,19 +277,3 @@
   min-height: 120px;
   outline: none;
 }
-
-.jp-FileDialog.jp-mod-conflict input {
-  color: red;
-}
-
-.jp-FileDialog .jp-new-name-title {
-  margin-top: 12px;
-}
-
-.jp-LastModified-hidden {
-  display: none;
-}
-
-.jp-FileBrowser-filterBox {
-  padding: 4px;
-}

packages/notebook/style/base.css

@@ -249,6 +249,15 @@
   line-height: 1.4;
 }
 
+.jp-NotebookTools .jp-select-wrapper {
+  margin-top: 4px;
+  margin-bottom: 0px;
+}
+
+.jp-NotebookTools .jp-Collapse {
+  margin-top: 16px;
+}
+
 /*-----------------------------------------------------------------------------
 | Presentation Mode (.jp-mod-presentationMode)
 |----------------------------------------------------------------------------*/

packages/terminal/style/base.css

@@ -11,3 +11,11 @@
 .jp-Terminal-body {
   padding: 8px;
 }
+
+[data-jp-theme-light='true'] .xterm .xterm-screen canvas {
+  border: 1px solid white;
+}
+
+[data-jp-theme-light='false'] .xterm .xterm-screen canvas {
+  border: 1px solid black;
+}