From da085dfc2e5314c5a655b7e6550c2adf73aa6784 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Mon, 13 Mar 2017 17:54:50 +0100 Subject: [PATCH] shell/workbench css cleanup --- .../browser/ui/contextview/contextview.css | 33 ---- .../electron-browser/media/shell.css | 184 ++++++++++-------- .../electron-browser/media/workbench.css | 106 ++++------ .../search/browser/media/searchviewlet.css | 4 + 4 files changed, 149 insertions(+), 178 deletions(-) diff --git a/src/vs/base/browser/ui/contextview/contextview.css b/src/vs/base/browser/ui/contextview/contextview.css index 58bb251b7c9..84942adb3e6 100644 --- a/src/vs/base/browser/ui/contextview/contextview.css +++ b/src/vs/base/browser/ui/contextview/contextview.css @@ -6,37 +6,4 @@ .context-view { position: absolute; z-index: 1000; -} - -/* Tooltips */ -.context-view .tooltip { - padding: 5px; - position: relative; - margin-top: 4px; - margin-right: 4px; - max-width: 350px; - - -webkit-animation: fadeIn 0.15s linear; - -o-animation: fadeIn 0.15s linear; - -moz-animation: fadeIn 0.15s linear; - -ms-animation: fadeIn 0.15s linear; - animation: fadeIn 0.15s linear; -} - -.context-view .tooltip:before, -.context-view .tooltip:after { - content: ''; - position: absolute; - border-color: transparent; - border-style: solid; -} - -.context-view.bottom.right .tooltip:before { - top: -12px; - right: 12px; -} - -.context-view.bottom.right .tooltip:after { - top: -9px; - right: 13px; } \ No newline at end of file diff --git a/src/vs/workbench/electron-browser/media/shell.css b/src/vs/workbench/electron-browser/media/shell.css index 1b99367279f..160cdbf597b 100644 --- a/src/vs/workbench/electron-browser/media/shell.css +++ b/src/vs/workbench/electron-browser/media/shell.css @@ -6,7 +6,6 @@ .monaco-shell { height: 100%; width: 100%; - color: #6C6C6C; margin: 0; padding: 0; overflow: hidden; @@ -37,16 +36,36 @@ text-decoration: none; } +.monaco-shell a:active { + color: inherit; + background-color: inherit; +} + .monaco-shell a.plain { color: inherit; text-decoration: none; } -.monaco-shell a.plain:hover, .monaco-shell a.plain.hover { +.monaco-shell a.plain:hover, +.monaco-shell a.plain.hover { color: inherit; text-decoration: none; } +.monaco-shell input { + color: inherit; + font-family: inherit; + font-size: 100%; +} + +.monaco-shell select { + font-family: inherit; +} + +.monaco-shell .pointer { + cursor: pointer; +} + /* START Keyboard Focus Indication Styles */ .monaco-shell.vs [tabindex="0"]:focus, @@ -57,7 +76,7 @@ .monaco-shell.vs input[type="search"]:focus, .monaco-shell.vs input[type="text"]:focus, .monaco-shell.vs textarea:focus, .monaco-shell.vs input[type="checkbox"]:focus { - outline: 1px solid rgba(0, 122, 204, 0.4); + outline: 1px solid; outline-offset: -1px; opacity: 1 !important; } @@ -85,7 +104,7 @@ .monaco-shell.vs-dark input[type="search"]:focus, .monaco-shell.vs-dark input[type="text"]:focus, .monaco-shell.vs-dark textarea:focus, .monaco-shell.vs-dark input[type="checkbox"]:focus { - outline: 1px solid rgba(14, 99, 156, 0.6); + outline: 1px solid; outline-offset: -1px; opacity: 1 !important; } @@ -97,17 +116,10 @@ .monaco-shell.hc-black input[type="text"]:focus, .monaco-shell.hc-black textarea:focus, .monaco-shell.hc-black input[type="search"]:focus, .monaco-shell.hc-black input[type="checkbox"]:focus { - outline: 2px solid #f38518; + outline: 2px solid; outline-offset: -1px; } -.monaco-shell.vs .monaco-text-button:focus, -.monaco-shell.vs-dark .monaco-text-button:focus, -.monaco-shell.vs .action-button:focus, -.monaco-shell.vs-dark .action-button:focus { - outline-color: rgba(255, 255, 255, .5); /* buttons have a blue color, so focus indication needs to be different */ -} - .monaco-shell.vs .monaco-text-button:focus, .monaco-shell.vs .action-button:focus { outline-offset: -2px; /* Inset outline so it stands out on light background. */ @@ -118,15 +130,15 @@ } .monaco-shell.hc-black .synthetic-focus input { - background:transparent; /* Search input focus fix when in high contrast */ + background: transparent; /* Search input focus fix when in high contrast */ } .monaco-shell.vs .monaco-tree.focused .monaco-tree-row.focused [tabindex="0"]:focus { - outline: 1px solid #007ACC; /* higher contrast color for focusable elements in a row that shows focus feedback */ + outline: 1px solid; /* higher contrast color for focusable elements in a row that shows focus feedback */ } .monaco-shell.vs-dark .monaco-tree.focused .monaco-tree-row.focused [tabindex="0"]:focus { - outline: 1px solid #007ACC; /* higher contrast color for focusable elements in a row that shows focus feedback */ + outline: 1px solid; /* higher contrast color for focusable elements in a row that shows focus feedback */ } .monaco-shell .monaco-tree.focused.no-focused-item:focus:before { @@ -141,17 +153,17 @@ } .monaco-shell.vs .monaco-tree.focused.no-focused-item:focus:before { - outline: 1px solid rgba(0, 122, 204, 0.4); /* we still need to handle the empty tree or no focus item case */ + outline: 1px solid; /* we still need to handle the empty tree or no focus item case */ outline-offset: -1px; } .monaco-shell.vs-dark .monaco-tree.focused.no-focused-item:focus:before { - outline: 1px solid rgba(14, 99, 156, 0.6); /* we still need to handle the empty tree or no focus item case */ + outline: 1px solid; /* we still need to handle the empty tree or no focus item case */ outline-offset: -1px; } .monaco-shell.hc-black .monaco-tree.focused.no-focused-item:focus:before { - outline: 2px solid #f38518; /* we still need to handle the empty tree or no focus item case */ + outline: 2px solid; /* we still need to handle the empty tree or no focus item case */ outline-offset: -2px; } @@ -192,87 +204,103 @@ /* END Keyboard Focus Indication Styles */ -.monaco-shell a.prominent { - text-decoration: underline; -} +/* TODO@theme */ -a:active { - color: inherit; - background-color: inherit; +.monaco-shell.vs { + color: #6C6C6C; } -.monaco-shell input { - color: inherit; - font-family: inherit; -} - -.monaco-shell select { - font-family: inherit; -} - -.monaco-shell .pointer { - cursor: pointer; -} - -.monaco-shell .context-view .tooltip { - background-color: white; - border: 1px solid #ccc; -} - -.monaco-shell .context-view.bottom.right .tooltip:before { - border-width: 6px; - border-bottom: 6px solid #ccc; -} - -.monaco-shell .context-view.bottom.right .tooltip:after { - border-width: 5px; - border-bottom: 5px solid white; -} - -.monaco-shell input:disabled { - background-color: #E1E1E1; -} - -/* ---------- Dark Theme ---------- */ - .monaco-shell.vs-dark { color: #BBB; background-color: #1E1E1E; } -.monaco-shell.vs-dark .monaco-action-bar.vertical .action-label.separator { - border-bottom-color: #666; +.monaco-shell.hc-black { + color: #fff; + background-color: #000; } -.monaco-shell.vs-dark .context-view .tooltip { - background-color: #1E1E1E; - border-color: #707070; +.monaco-shell.vs input { + background-color: white; } -.monaco-shell.vs-dark .context-view.bottom.right .tooltip:before { - border-bottom: 6px solid #707070; +.monaco-shell.vs-dark input, +.monaco-shell.vs-dark textarea { + background-color: #3C3C3C; } -.monaco-shell.vs-dark .context-view.bottom.right .tooltip:after { - border-bottom: 5px solid #1E1E1E; +.monaco-shell.vs input:disabled { + background-color: #E1E1E1; } .monaco-shell.vs-dark input:disabled { background-color: #333; } -/* ---------- High Contrast Theme ---------- */ - -.monaco-shell.hc-black { color: #fff; background-color: #000; } - -.monaco-shell.hc-black .context-view .tooltip { - background-color: black; +.monaco-shell.hc-black input, +.monaco-shell.hc-black textarea { + background-color: #000; } -.monaco-shell.hc-black .context-view .tooltip:before { - border-width: 0 !important; +/* START Keyboard Focus Indication Styles */ + +.monaco-shell.vs [tabindex="0"]:focus, +.monaco-shell.vs .synthetic-focus, +.monaco-shell.vs select:focus, +.monaco-shell.vs input[type="button"]:focus, +.monaco-shell.vs input[type="submit"]:focus, +.monaco-shell.vs input[type="search"]:focus, +.monaco-shell.vs input[type="text"]:focus, .monaco-shell.vs textarea:focus, +.monaco-shell.vs input[type="checkbox"]:focus { + outline-color: rgba(0, 122, 204, 0.4); } -.monaco-shell.hc-black .context-view .tooltip:after { - border-width: 0 !important; -} \ No newline at end of file +.monaco-shell.vs-dark [tabindex="0"]:focus, +.monaco-shell.vs-dark .synthetic-focus, +.monaco-shell.vs-dark select:focus, +.monaco-shell.vs-dark input[type="button"]:focus, +.monaco-shell.vs-dark input[type="submit"]:focus, +.monaco-shell.vs-dark input[type="search"]:focus, +.monaco-shell.vs-dark input[type="text"]:focus, .monaco-shell.vs-dark textarea:focus, +.monaco-shell.vs-dark input[type="checkbox"]:focus { + outline-color: rgba(14, 99, 156, 0.6); +} + +.monaco-shell.hc-black [tabindex="0"]:focus, +.monaco-shell.hc-black .synthetic-focus, +.monaco-shell.hc-black select:focus, +.monaco-shell.hc-black input[type="button"]:focus, +.monaco-shell.hc-black input[type="text"]:focus, .monaco-shell.hc-black textarea:focus, +.monaco-shell.hc-black input[type="search"]:focus, +.monaco-shell.hc-black input[type="checkbox"]:focus { + outline-color: #f38518; +} + +.monaco-shell.vs .monaco-text-button:focus, +.monaco-shell.vs-dark .monaco-text-button:focus, +.monaco-shell.vs .action-button:focus, +.monaco-shell.vs-dark .action-button:focus { + outline-color: rgba(255, 255, 255, .5); /* buttons have a blue color, so focus indication needs to be different */ +} + +.monaco-shell.vs .monaco-tree.focused .monaco-tree-row.focused [tabindex="0"]:focus { + outline-color: #007ACC; /* higher contrast color for focusable elements in a row that shows focus feedback */ +} + +.monaco-shell.vs-dark .monaco-tree.focused .monaco-tree-row.focused [tabindex="0"]:focus { + outline-color: #007ACC; /* higher contrast color for focusable elements in a row that shows focus feedback */ +} + +.monaco-shell.vs .monaco-tree.focused.no-focused-item:focus:before { + outline-color: rgba(0, 122, 204, 0.4); /* we still need to handle the empty tree or no focus item case */ +} + +.monaco-shell.vs-dark .monaco-tree.focused.no-focused-item:focus:before { + outline-color: rgba(14, 99, 156, 0.6); /* we still need to handle the empty tree or no focus item case */ +} + +.monaco-shell.hc-black .monaco-tree.focused.no-focused-item:focus:before { + outline-color: #f38518; /* we still need to handle the empty tree or no focus item case */ +} + +/* END Keyboard Focus Indication Styles */ \ No newline at end of file diff --git a/src/vs/workbench/electron-browser/media/workbench.css b/src/vs/workbench/electron-browser/media/workbench.css index c6cd9d1bd19..565e57cdeca 100644 --- a/src/vs/workbench/electron-browser/media/workbench.css +++ b/src/vs/workbench/electron-browser/media/workbench.css @@ -3,11 +3,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.context-view .tooltip.customhover { - text-overflow: ellipsis; - overflow: hidden; -} - .monaco-workbench-container { position: absolute; } @@ -20,10 +15,6 @@ overflow: hidden; } -.monaco-workbench input { - font-size: 100%; -} - .monaco-workbench > .part { position: absolute; box-sizing: border-box; @@ -46,75 +37,56 @@ z-index: 10000; } -/* ---------- Light Theme ---------- */ - -.vs .monaco-workbench { background-color: #F3F3F3; } - -.vs .monaco-workbench .sidebar .separator { background-color: #EFEFF2; } - -.vs .monaco-workbench input { - background-color: white; +.hc-black #monaco-workbench-drop-overlay { + background: none !important; + outline: 2px dashed; + outline-offset: -2px; } -.vs .monaco-workbench input:disabled { - background-color: #E1E1E1; +.hc-black .monaco-workbench .monaco-action-bar .action-item.disabled .action-label.disabled { + opacity: 0.4; +} + +/* TODO@theme */ + +.vs .monaco-workbench { + background-color: #F3F3F3; +} + +.vs-dark .monaco-workbench { + background-color: #252526; + color: #CCC; +} + +.hc-black .monaco-workbench { + color: #FFF; + background-color: #000; } .vs #monaco-workbench-drop-overlay { background-color: rgba(51,153,255, 0.18); } -/* ---------- Dark Theme ---------- */ - -.vs-dark .monaco-workbench { - --input-bgcolor: #3C3C3C; - background-color: #252526; - color: #CCC; -} - -.vs-dark .monaco-workbench .monaco-scrollable-element .shadow.top { box-shadow: #000 0 6px 6px -6px inset; } -.vs-dark .monaco-workbench .monaco-scrollable-element .shadow.left { box-shadow: #000 6px 0 6px -6px inset; } -.vs-dark .monaco-workbench .monaco-scrollable-element .shadow.top.left { box-shadow: #000 6px 6px 6px -6px inset; } -.vs-dark .monaco-workbench .monaco-scrollable-element .slider.active { background-color: rgba(85, 85, 85, .8); } - -.vs-dark .monaco-workbench .sidebar { border: none; } -.vs-dark .monaco-workbench .sidebar .separator { background-color: #2D2D30; } - -.vs-dark .monaco-workbench input, -.vs-dark .monaco-workbench textarea { - background-color: var(--input-bgcolor); -} - -.vs-dark .monaco-workbench input:disabled { - background-color: #333; -} - -.vs-dark .monaco-workbench .viewlet .message { opacity: 0.5; } - -.vs-dark .monaco-workbench .stacked-view .action-label { color: inherit; } -.vs-dark .monaco-workbench .stacked-view .action-label:hover { color: #3399FF; } - .vs-dark #monaco-workbench-drop-overlay { background-color: rgba(83, 89, 93, 0.5); } -/* ---------- HC Theme ---------- */ - -.hc-black .monaco-workbench { color: #FFF; background-color: #000; } - -.hc-black .monaco-workbench .sidebar .separator { background-color: #000; border: 1px solid #6FC3DF; } - -.hc-black .monaco-workbench input, -.hc-black .monaco-workbench textarea { - background-color: #000; -} - -.hc-black .monaco-workbench .monaco-action-bar .action-item.disabled .action-label.disabled { - opacity: .4; -} - .hc-black #monaco-workbench-drop-overlay { - background: none !important; - outline: 2px dashed #f38518; - outline-offset: -2px; + outline-color: #f38518; +} + +.vs-dark .monaco-workbench .monaco-scrollable-element .shadow.top { + box-shadow: #000 0 6px 6px -6px inset; +} + +.vs-dark .monaco-workbench .monaco-scrollable-element .shadow.left { + box-shadow: #000 6px 0 6px -6px inset; +} + +.vs-dark .monaco-workbench .monaco-scrollable-element .shadow.top.left { + box-shadow: #000 6px 6px 6px -6px inset; +} + +.vs-dark .monaco-workbench .monaco-scrollable-element .slider.active { + background-color: rgba(85, 85, 85, .8); } \ No newline at end of file diff --git a/src/vs/workbench/parts/search/browser/media/searchviewlet.css b/src/vs/workbench/parts/search/browser/media/searchviewlet.css index 656c7e54dbe..da894f89ebd 100644 --- a/src/vs/workbench/parts/search/browser/media/searchviewlet.css +++ b/src/vs/workbench/parts/search/browser/media/searchviewlet.css @@ -336,6 +336,10 @@ border: 1px dashed rgb(51, 255, 46); } +.monaco-workbench .search-viewlet a.prominent { + text-decoration: underline; +} + /* Theming */ .search-viewlet .highlight {