NOT FOR REVIEW: A set of patches for Josh to work on top of.

chrome/browser/resources/vr_shell/vk.css

+.emoji {
+  font-family: 'Noto Emoji', Roboto2, Roboto, sans-serif;
+}
+
+.inputview-container {
+  width:1240px;
+  height: 323px;
+  cursor: default;
+/*  background-color: rgb(236, 239, 241);*/
+  -webkit-user-select: none;
+  font-family: Roboto2, Roboto, 'Noto Sans', sans-serif;
+/*  background-color: rgb(50,50,75);*/
+  float:left;
+}
+
+.inputview-layoutview {
+  position: relative;
+  background-color: rgb(71, 71, 71);
+  border: 2px solid gray;
+  border-radius: 10px;
+  display: inline-block;
+  overflow: hidden;
+  font-size: 0;
+  padding: 32px;
+  float:left;
+}
+
+.inputview-spacerview {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  font-size: 0;
+  padding: 32px;
+  float: left;
+}
+
+
+.inputview-skv {
+  display: inline-block;
+  overflow: hidden;
+  padding: 3px 2px;
+  box-sizing: border-box;
+}
+
+.inputview-sk {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: block;
+  /*background-color: rgb(236, 239, 241);*/
+  background-color: rgb(71, 71, 71);
+  border-radius: 5px
+}
+
+.inputview-sk:hover {
+  background-color: rgb(110, 112, 114);
+}
+
+.inputview-sk:active {
+  background-color: rgb(90, 93, 95);
+}
+
+.inputview-sk-spacer:hover {
+  background-color: inherit;
+}
+
+.inputview-ch {
+  color: rgba(236, 236, 236, 0.8);
+  display: inline-block;
+  font-size: 30px;
+  text-align: center;
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.inputview-sk-1 .inputview-ch {
+  display: block;
+}
+
+.inputview-level {
+  display: none;
+}
+
+.inputview-active-level-0 .inputview-level-0,
+.inputview-active-level-1 .inputview-level-1,
+.inputview-active-level-2 .inputview-level-2,
+.inputview-active-level-3 .inputview-level-3,
+.inputview-active-level-4 .inputview-level-4,
+.inputview-active-level-5 .inputview-level-5,
+.inputview-active-level-6 .inputview-level-6,
+.inputview-active-level-7 .inputview-level-7 {
+  display: block;
+}
+
+.vk-shift-icon { display: block; width: 25px; height: 22px; background: url("../../../../ui/webui/resources/images/shift.svg") transparent; background-size: 25px 22px; background-repeat: no-repeat;  position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -12px; }
+
+.vk-blueshift-icon { display: block; width: 25px; height: 22px; background: url("../../../../ui/webui/resources/images/blueshift.svg") transparent; background-size: 25px 22px; background-repeat: no-repeat;  position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -12px; }
+
+.vk-escape-icon { display: block; width: 32px; height: 32px; background: url("../../../../ui/webui/resources/images/hidekeyboard.svg") 0px 0px / 32px 32px no-repeat transparent;  position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px; }
+
+.vk-backspace-icon { display: block; height: 24px; width: 24px; background: url("../../../../ui/webui/resources/images/backspace.svg") transparent; background-size: 24px 24px; background-repeat: no-repeat;  position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; }
+
+.vk-enter-icon { display: block; width: 40px; height: 40px; background: url("../../../../ui/webui/resources/images/enter.svg") transparent; background-size: 40px 40px; background-repeat: no-repeat;  position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -20px; }
+
+.vk-space-icon {
+  background-color: rgba(165, 161, 169, 0.34902);
+/*  border-radius: 50px;*/
+  width: 100%;
+  height: 100%;
+
+  border-radius: 40px;
+}
+
+.inputview-code-Space:hover {
+  background-color: rgba(165, 161, 169, 0.34902);
+  border-radius: 40px;
+}
+.inputview-code-Space:active {
+  background-color: rgb(90, 93, 95);
+}
+