[Styling] various style changes

- bigger tab bars and menu - use different background colors instead of borders Signed-off-by: Sven Efftinge <[email protected]>
eclipse-theia · Mar 22, 2019 · 7d33bcd · 7d33bcd
1 parent 8c9ecd8
commit 7d33bcd
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 39 deletions.
diff --git a/packages/core/src/browser/style/dockpanel.css b/packages/core/src/browser/style/dockpanel.css
@@ -23,7 +23,6 @@
 }
 
 .p-DockPanel-widget {
-  background: var(--theia-layout-color0);
   min-width: 100px;
   min-height: 100px;
 }

diff --git a/packages/core/src/browser/style/menus.css b/packages/core/src/browser/style/menus.css
@@ -20,7 +20,7 @@
 
 
 :root {
-  --theia-private-menubar-height: 28px;
+  --theia-private-menubar-height: 32px;
   --theia-private-menu-item-height: 24px;
 }
 

diff --git a/packages/core/src/browser/style/sidepanel.css b/packages/core/src/browser/style/sidepanel.css
@@ -139,12 +139,8 @@
   max-width: var(--theia-private-sidebar-tab-width);
 }
 
-#theia-left-side-panel {
-  border-right: var(--theia-panel-border-width) solid var(--theia-border-color1);
-}
-
-#theia-right-side-panel {
-  border-left: var(--theia-panel-border-width) solid var(--theia-border-color1);
+.theia-side-panel {
+  background-color: var(--theia-layout-color1);
 }
 
 
@@ -210,18 +206,11 @@
 |----------------------------------------------------------------------------*/
 
 .theia-sidepanel-toolbar {
-    min-height: 30px;
+    min-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
     display: flex;
     padding-left: 5px;
     align-items: center;
-}
-
-.theia-sidepanel-toolbar.theia-left-side-panel {
-    border-right: var(--theia-panel-border-width) solid var(--theia-border-color1);
-}
-
-.theia-sidepanel-toolbar.theia-right-side-panel {
-    border-left: var(--theia-panel-border-width) solid var(--theia-border-color1);
+    background-color: var(--theia-layout-color1);
 }
 
 .theia-sidepanel-toolbar .theia-sidepanel-title {

diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
@@ -4,8 +4,7 @@
 
 :root {
   /* These need to be root because tabs get attached to the body during dragging. */
-  --theia-private-horizontal-tab-height: 22px;
-  --theia-private-horizontal-tab-active-top-border: 2px;
+  --theia-private-horizontal-tab-height: 28.5px;
   --theia-private-horizontal-tab-scrollbar-rail-height: 7px;
   --theia-private-horizontal-tab-scrollbar-height: 5px;
 }
@@ -18,12 +17,26 @@
   color: var(--theia-ui-font-color1);
   background: var(--theia-layout-color1);
   font-size: var(--theia-ui-font-size1);
+  cursor: pointer;
+}
+
+.p-TabBar[data-orientation='horizontal'].theia-app-bottom {
+  background: var(--theia-layout-color0);
+}
+
+.p-TabBar[data-orientation='horizontal'].theia-app-bottom .p-TabBar-tab {
+  background: var(--theia-layout-color0);
+}
+
+.p-TabBar[data-orientation='horizontal'].theia-app-bottom .p-TabBar-tab.p-mod-current {
+  background: var(--theia-layout-color0);
+  border-top: var(--theia-border-width) solid var(--theia-ui-font-color2);
 }
 
 .p-TabBar[data-orientation='horizontal'] {
   overflow-x: hidden;
   overflow-y: hidden;
-  min-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-border-width) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
+  min-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
 }
 
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-content {
@@ -38,7 +51,8 @@
   min-width: 35px;
   line-height: var(--theia-private-horizontal-tab-height);
   padding: 0px 8px;
-  background: var(--theia-layout-color3);
+  background: var(--theia-layout-color2);
+  align-items: flex-end;
 }
 
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tab:last-child {
@@ -109,13 +123,18 @@
     mask-position: 4px 0;
 }
 
-.p-TabBar .file-icon.p-TabBar-tabIcon,
-.p-TabBar .fa.p-TabBar-tabIcon {
+.p-TabBar[data-orientation='horizontal'] .file-icon.p-TabBar-tabIcon {
+    background: none;
+    margin-bottom: 14px;
+}
+
+.p-TabBar[data-orientation='horizontal'] .fa.p-TabBar-tabIcon {
     background: none;
+    margin-bottom: 4px;
+    margin-right: 2px;
 }
 
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
-  padding-top: 6px;
   padding-left: 10px;
   height: 16px;
   width: 16px;
@@ -132,6 +151,7 @@
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable:hover > .p-TabBar-tabCloseIcon,
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon {
   background-image: var(--theia-icon-close);
+  margin-bottom: 7px;
 }
 
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon {

diff --git a/packages/core/src/browser/style/tree.css b/packages/core/src/browser/style/tree.css
@@ -17,7 +17,6 @@
 .theia-Tree {
     overflow: hidden;
     color: var(--theia-ui-font-color1);
-    background: var(--theia-layout-color0);
     font-size: var(--theia-ui-font-size1);
     max-height: calc(100% - var(--theia-border-width));
     position: relative;
@@ -35,7 +34,7 @@
 }
 
 .theia-TreeNode {
-    line-height: var(--theia-private-horizontal-tab-height);
+    line-height: 22px;
     display: flex;
 }
 
@@ -70,7 +69,8 @@
 .theia-ExpansionToggle:not(.theia-mod-collapsed)::before {
     font-family: FontAwesome;
     font-size: calc(var(--theia-content-font-size) * 0.8);
-    content: "\f0d7";
+    content: "\f0da";
+    transform: rotate(45deg);
 }
 
 .theia-Tree:focus .theia-TreeNode.theia-mod-selected,

diff --git a/packages/core/src/browser/style/variables-bright.useable.css b/packages/core/src/browser/style/variables-bright.useable.css
@@ -86,10 +86,10 @@ is not optimized for dense, information rich UIs.
     ------------------------------------ */
 
   --theia-layout-color0: #ffffff;
-  --theia-layout-color1: var(--md-grey-100);
-  --theia-layout-color2: var(--md-grey-200);
-  --theia-layout-color3: var(--md-grey-300);
-  --theia-layout-color4: var(--md-grey-400);
+  --theia-layout-color1: #f3f3f3;
+  --theia-layout-color2: #ececec;
+  --theia-layout-color3: #dcdcdc;
+  --theia-layout-color4: #dcdcdc;
 
   /* Brand colors */
 
@@ -197,7 +197,7 @@ is not optimized for dense, information rich UIs.
   --theia-scrollbar-active-rail-color: transparent;
 
   /* Menu */
-  --theia-menu-color0: var(--theia-layout-color2);
+  --theia-menu-color0: var(--theia-layout-color3);
   --theia-menu-color1: var(--theia-layout-color0);
   --theia-menu-color2: var(--theia-layout-color3);
 

diff --git a/packages/core/src/browser/style/variables-dark.useable.css b/packages/core/src/browser/style/variables-dark.useable.css
@@ -85,11 +85,11 @@ is not optimized for dense, information rich UIs.
   /* Main layout colors (dark to bright)
     ------------------------------------ */
 
-  --theia-layout-color0: #1e1e1e;
-  --theia-layout-color1: #262626;
-  --theia-layout-color2: #2e2e2e;
-  --theia-layout-color3: #303030;
-  --theia-layout-color4: #333333;
+  --theia-layout-color0: #1d1d1d;
+  --theia-layout-color1: #252526;
+  --theia-layout-color2: #333333;
+  --theia-layout-color3: #383838;
+  --theia-layout-color4: #383838;
 
   /* Brand colors */
 
@@ -197,7 +197,7 @@ is not optimized for dense, information rich UIs.
   --theia-scrollbar-active-rail-color: transparent;
 
   /* Menu */
-  --theia-menu-color0: var(--theia-layout-color2);
+  --theia-menu-color0: var(--theia-layout-color4);
   --theia-menu-color1: var(--theia-layout-color4);
   --theia-menu-color2: var(--theia-layout-color1);
 

diff --git a/packages/git/src/browser/style/index.css b/packages/git/src/browser/style/index.css
@@ -18,7 +18,6 @@
     color: var(--theia-ui-font-color1);
     padding: 5px;
     box-sizing: border-box;
-    background: var(--theia-layout-color0);
 }
 
 .theia-side-panel .theia-git {

diff --git a/packages/navigator/src/browser/style/index.css b/packages/navigator/src/browser/style/index.css
@@ -52,3 +52,10 @@
     -webkit-mask: url('files.svg');
     mask: url('files.svg');
 }
+
+.theia-FileTree > div > div > div > div:first-child {
+    background-color: var(--theia-layout-color4);
+    text-transform: uppercase;
+    font-size: 80%;
+    font-weight: 500;
+}