diff --git a/src/vs/workbench/parts/preferences/browser/media/preferences.css b/src/vs/workbench/parts/preferences/browser/media/preferences.css index 009214cada3bb389404a0cbb8bd1ec948fc27993..91a2de633a7f7ce8fcdad74230514f6747e0e1f7 100644 --- a/src/vs/workbench/parts/preferences/browser/media/preferences.css +++ b/src/vs/workbench/parts/preferences/browser/media/preferences.css @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ .settings-header-widget { - display: flex; border-bottom: 1px solid #efefef; } @@ -13,7 +12,23 @@ } .settings-header-widget > .settings-header-container { - margin: 8px 0px 12px 0; + margin-top: 8px; + padding-left: 28px; + padding-right: 32px; +} + +.settings-header-widget > .settings-search-container { + padding-left: 28px; + padding-right: 32px; + padding-bottom: 11px; + padding-top: 11px; +} + +.vs .settings-header-widget > .settings-search-container { + background: #efeff2; +} +.vs-dark .settings-header-widget > .settings-search-container { + background: #2d2d30; } .settings-header-widget > .settings-header-container > .settings-title-container { @@ -21,30 +36,48 @@ } .settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container { - color: rgba(170, 170, 170, 1); - font-style: italic; white-space: pre-wrap; margin-bottom: 8px; + font-size: 12px; } -.settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container span { - padding-right: 6px; +.vs .settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container { + color: #6f6f6f; +} +.vs-dark .settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container { + color: #bbbbbb; +} +.hc-black .settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container { + color: white; } -.settings-header-widget > .settings-header-container > .settings-search-container > .settings-search-input { +.settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container .title-label { + text-transform: uppercase; + font-weight: bold; +} + +.settings-header-widget > .settings-search-container > .settings-search-input { vertical-align: middle; } -.settings-header-widget > .settings-header-container > .settings-search-container > .settings-search-input > .monaco-inputbox { +.settings-header-widget > .settings-search-container > .settings-search-input > .monaco-inputbox { height: 30px; } -.vs .settings-header-widget > .settings-header-container > .settings-search-container > .settings-search-input > .monaco-inputbox { +.vs .settings-header-widget > .settings-search-container > .settings-search-input > .monaco-inputbox { border: 1px solid #ddd; } -.settings-header-widget > .settings-header-container > .settings-search-container > .settings-search-input > .monaco-inputbox .input { +.settings-header-widget > .settings-search-container > .settings-search-input > .monaco-inputbox .input { font-size: 14px; + padding-left:30px; + background-image: url('search.svg'); + background-repeat: no-repeat; + background-position: 8px 50%; +} + +.settings-header-widget > .settings-search-container > .settings-search-input > .monaco-inputbox .input { + background-image: url('search_inverse.svg'); } .monaco-editor .settings-group-title-widget { @@ -54,6 +87,17 @@ .monaco-editor .settings-group-title-widget .title-container { width: 100%; cursor: pointer; + font-weight: bold; +} + +.vs .monaco-editor .settings-group-title-widget .title-container { + color: #6f6f6f; +} +.vs-dark .monaco-editor .settings-group-title-widget .title-container { + color: #bbbbbb; +} +.hc-black .monaco-editor .settings-group-title-widget .title-container { + color: white; } .monaco-editor .settings-group-title-widget .title-container > * { diff --git a/src/vs/workbench/parts/preferences/browser/media/search.svg b/src/vs/workbench/parts/preferences/browser/media/search.svg new file mode 100644 index 0000000000000000000000000000000000000000..8a1aa1841550c0c58ec336c29f2906aa34a2ce72 --- /dev/null +++ b/src/vs/workbench/parts/preferences/browser/media/search.svg @@ -0,0 +1 @@ +Search_16x \ No newline at end of file diff --git a/src/vs/workbench/parts/preferences/browser/media/search_inverse.svg b/src/vs/workbench/parts/preferences/browser/media/search_inverse.svg new file mode 100644 index 0000000000000000000000000000000000000000..cb2e01e97a0689e1c45d942668fe32f0299f3452 --- /dev/null +++ b/src/vs/workbench/parts/preferences/browser/media/search_inverse.svg @@ -0,0 +1 @@ +Search_16x \ No newline at end of file diff --git a/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts b/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts index f771a9669b565384b87d6bc909f1f6969046968f..aa0a6b30c43dc0f8473496912fb7a6769ce8c3c6 100644 --- a/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts +++ b/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts @@ -89,7 +89,7 @@ export class SettingsGroupTitleWidget extends Widget implements IViewZone { private layout(): void { this.titleContainer.style.lineHeight = this.editor.getConfiguration().lineHeight + 3 + 'px'; - this.titleContainer.style.fontSize = this.editor.getConfiguration().fontInfo.fontSize + 3 + 'px'; + this.titleContainer.style.fontSize = this.editor.getConfiguration().fontInfo.fontSize + 'px'; const iconSize = this.getIconSize(); this.icon.style.height = `${iconSize}px`; this.icon.style.width = `${iconSize}px`; @@ -189,15 +189,14 @@ export class DefaultSettingsHeaderWidget extends Widget { private create(parent: HTMLElement) { this.domNode = DOM.append(parent, DOM.$('div.settings-header-widget')); this.headerContainer = DOM.append(this.domNode, DOM.$('div.settings-header-container')); - this.headerContainer.style.paddingLeft = '28px'; - this.headerContainer.style.paddingRight = '32px'; const titleContainer = DOM.append(this.headerContainer, DOM.$('div.settings-title-container')); this.createInfoContainer(DOM.append(titleContainer, DOM.$('div.settings-info-container'))); - this.createSearchContainer(DOM.append(this.headerContainer, DOM.$('div.settings-search-container'))); + this.createSearchContainer(DOM.append(this.domNode, DOM.$('div.settings-search-container'))); } private createInfoContainer(infoContainer: HTMLElement) { - DOM.append(infoContainer, DOM.$('span')).textContent = localize('defaultSettingsInfo', "Overwrite settings by placing them into your settings file."); + DOM.append(infoContainer, DOM.$('span.title-label')).textContent = localize('defaultSettingsTitle', "Default Settings"); + DOM.append(infoContainer, DOM.$('span')).textContent = localize('defaultSettingsInfo', " - Overwrite these by placing them into your settings file"); } private createSearchContainer(searchContainer: HTMLElement) { @@ -220,7 +219,7 @@ export class DefaultSettingsHeaderWidget extends Widget { } public layout(dimension: Dimension): void { - this.inputBox.width = dimension.width - 65; + this.inputBox.width = dimension.width - 62; } private _onKeyUp(keyboardEvent: IKeyboardEvent): void {