From 7d33bcd9ca47a3f8bd1be79e0c15a658726a1f3f Mon Sep 17 00:00:00 2001 From: Sven Efftinge Date: Fri, 22 Mar 2019 16:03:44 +0000 Subject: [PATCH] [Styling] various style changes - bigger tab bars and menu - use different background colors instead of borders Signed-off-by: Sven Efftinge --- packages/core/src/browser/style/dockpanel.css | 1 - packages/core/src/browser/style/menus.css | 2 +- packages/core/src/browser/style/sidepanel.css | 19 +++-------- packages/core/src/browser/style/tabs.css | 34 +++++++++++++++---- packages/core/src/browser/style/tree.css | 6 ++-- .../style/variables-bright.useable.css | 10 +++--- .../browser/style/variables-dark.useable.css | 12 +++---- packages/git/src/browser/style/index.css | 1 - .../navigator/src/browser/style/index.css | 7 ++++ 9 files changed, 53 insertions(+), 39 deletions(-) diff --git a/packages/core/src/browser/style/dockpanel.css b/packages/core/src/browser/style/dockpanel.css index c3969c661845c..8f6a8636d87f3 100644 --- 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 index 176037c5578c5..9b2edcd9230ba 100644 --- 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 index 48055e675f3ed..2c56cf7c35f25 100644 --- 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 index 1e95bf0045a72..21fb22d4b5839 100644 --- 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 index 364ba5384a3d4..e11e57f1a50a1 100644 --- 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 index 7982b922503f9..2f1fbd1dfef26 100644 --- 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 index bbc165a972fb4..7aa29eeae26bd 100644 --- 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 index 54c346ac2db73..287c7a280335b 100644 --- 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 index 85cc4cb174766..30a941e9c5067 100644 --- 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; +}