_content: make "Press Esc to move out of the editor" message stop flickering

It's distracting to have this "Press Esc to move out of the editor"
message flicker on and off as focus shifts around the pages, especially
since it moves everything else up and down.

Make the message permanent and unobtrusive instead.

Change-Id: Iabe7a723f01ff2b54c49b3ef1214a1787b2751cd
Reviewed-on: https://go-review.googlesource.com/c/website/+/517695
Run-TryBot: Russ Cox <rsc@golang.org>
Reviewed-by: Prudhvi Krishna Chintala <prudhvikrishna@google.com>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>

1 files changed, 5 insertions, 10 deletions

diff --git a/_content/css/styles.css b/_content/css/styles.css
index b6f80f07..921c8b04 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -4591,7 +4591,7 @@ a.error {
   height: 100%;
   border: none;
   outline: none;
-  padding: 0.625rem 0.625rem 0 0.625rem;
+  padding: 0 0.625rem 0 0.625rem;
   min-height: 13rem;
   resize: none;
 }
@@ -4625,8 +4625,7 @@ a.error {
   background-color: var(--color-background-playground-input) !important;
 }
 .Playground-outputContainer,
-.Playground-output,
-.Playground-preContainer {
+.Playground-output {
   background: var(--color-background-code);
 }
 .Playground-inputContainer,
@@ -4641,13 +4640,9 @@ a.error {
   resize: vertical;
 }
 .Playground-preContainer {
-  border-bottom: var(--border-code);
-}
-.Playground-preContainer {
-  display: none;
-}
-.Playground-input:focus + .Playground-preContainer {
-  display: block;
+  font-size: 0.8em;
+  font-style: italic;
+  padding: 0.3rem 0 0.3rem 0.625rem;
 }
 .Playground-controls {
   display: flex;