Merge pull request #12704 from bgashler1/bgashler1/watermark-tweeks

Bgashler1/watermark tweeks

src/vs/workbench/parts/watermark/watermark.css

@@ -3,10 +3,44 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+.monaco-workbench .part.editor.empty.watermark-tips {
+	background-position-y: calc(50% - 100px);
+	transition: background-position-y 1s;
+}
+
 .monaco-workbench > .part.editor > .watermark {
 	position: absolute;
 	width: 100%;
-	bottom: 10%;
+	top: calc(50% + 55px);
+}
+
+@keyframes watermarkfadein {
+	0% {
+		opacity: 0;
+	}
+	33% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@media (min-height: 501px) {
+	.monaco-workbench > .part.editor > .watermark {
+		animation: watermarkfadein 2s;
+		opacity: 1;
+		transition: opacity 1s;
+	}
+}
+
+@media (max-height: 500px) {
+	.monaco-workbench > .part.editor > .watermark {
+		opacity: 0;
+	}
+	.monaco-workbench .part.editor.empty.watermark-tips {
+		background-position-y: 50%;
+	}
 }
 
 .monaco-workbench > .part.editor > .watermark dl {
@@ -21,6 +55,7 @@
 	width: 49%;
 	margin: 0 1% 0 0;
 	text-align: right;
+	font-weight: bold;
 }
 
 .monaco-workbench > .part.editor > .watermark dd {
@@ -33,21 +68,16 @@
 .monaco-workbench > .part.editor > .watermark dt,
 .monaco-workbench > .part.editor > .watermark dd {
 	margin-bottom: 17px;
-	font-weight: 300;
 }
 
-.monaco-workbench > .part.editor > .watermark dt {
-	color: rgba(0,0,0,.68);
-}
+.monaco-workbench > .part.editor > .watermark dt,
 .monaco-workbench > .part.editor > .watermark dl {
-	color: rgba(0,0,0,.9);
+	color: rgba(0,0,0,.68);
 }
 
-.vs-dark .monaco-workbench > .part.editor > .watermark dt {
-	color: rgba(255,255,255,.6);
-}
+.vs-dark .monaco-workbench > .part.editor > .watermark dt,
 .vs-dark .monaco-workbench > .part.editor > .watermark dl {
-	color: #fff;
+	color: rgba(255,255,255,.6);
 }
 
 .hc-black .monaco-workbench > .part.editor > .watermark dt {

src/vs/workbench/parts/watermark/watermark.ts

@@ -41,6 +41,7 @@ export function create(container: Builder, keybindingService: IKeybindingService
 			'class': 'watermark',
 		});
 	function update() {
+		container.addClass('watermark-tips');
 		$(div).clearChildren()
 			.element('dl', {
 			}, dl => entries.map(entry => {
@@ -49,8 +50,8 @@ export function create(container: Builder, keybindingService: IKeybindingService
 					entry.ids
 						.map(id => keybindingService.lookupKeybindings(id)
 							.map(k => keybindingService.getLabelFor(k))
-							.join(', ') || UNBOUND)
-						.join(' / ')
+							.join(' or ') || UNBOUND)
+						.join(' or ')
 				));
 			}));
 	}