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 @@
+
\ 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 @@
+
\ 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 {