UI tweaks

terminus-core/src/components/appRoot.component.scss

@@ -10,9 +10,10 @@
     will-change: transform;
     cursor: default;
     animation: 0.5s ease-out fadeIn;
+    transition: 0.25s background;
 }
 
-$tabs-height: 36px;
+$tabs-height: 38px;
 $tab-border-radius: 4px;
 
 

terminus-core/src/components/appRoot.component.ts

@@ -56,7 +56,10 @@ export class AppRootComponent {
     @Input() ready = false
     @Input() leftToolbarButtons: IToolbarButton[]
     @Input() rightToolbarButtons: IToolbarButton[]
-    @HostBinding('class') hostClass = `platform-${process.platform}`
+    @HostBinding('class.platform-win32') platformClassWindows = process.platform === 'win32'
+    @HostBinding('class.platform-darwin') platformClassMacOS = process.platform === 'darwin'
+    @HostBinding('class.platform-linux') platformClassLinux = process.platform === 'linux'
+    @HostBinding('class.no-tabs') noTabs = true
     tabsDragging = false
     unsortedTabs: BaseTabComponent[] = []
     updateIcon: SafeHtml
@@ -147,9 +150,12 @@ export class AppRootComponent {
                     this.hostApp.getWindow().setProgressBar(-1, { mode: 'none' })
                 }
             })
+            this.noTabs = false
         })
+
         this.app.tabClosed$.subscribe(tab => {
             this.unsortedTabs = this.unsortedTabs.filter(x => x !== tab)
+            this.noTabs = app.tabs.length === 0
         })
     }
 

terminus-core/src/components/tabHeader.component.scss

@@ -1,4 +1,4 @@
-$tabs-height: 36px;
+$tabs-height: 38px;
 
 :host {
     position: relative;

terminus-core/src/theme.scss

@@ -125,6 +125,10 @@ body {
 }
 
 app-root  {
+    &.no-tabs {
+        background: rgba(0,0,0,.5);    
+    }
+
     &> .content {
         .tab-bar {
             .btn-tab-bar {

terminus-terminal/src/frontends/htermFrontend.ts

@@ -15,6 +15,7 @@ export class HTermFrontend extends Frontend {
         if (!this.initialized) {
             this.init()
             this.initialized = true
+            preferenceManager.set('background-color', 'transparent')
             this.term.decorate(host)
             this.htermIframe = this.term.scrollPort_.iframe_
         } else {

terminus-terminal/src/hterm.userCSS.scss

@@ -8,6 +8,7 @@ a:hover {
 
 x-screen {
     transition: 0.125s ease background;
+    background: transparent;
 
     &::-webkit-scrollbar {
       width: 3px;