Move prefix customization to bottom right of keybar

1 files changed, 8 insertions, 5 deletions

diff --git a/docs/style.css b/docs/style.css
index cfc3e346..3388aed7 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -112,7 +112,7 @@ textarea { width: 100%; outline: none; resize: vertical; margin: 0; }
   padding: 0.3em 0;
   position: relative;
 }
-.kb span {
+.kb span, .kb div {
   cursor: default;
   padding: 1px;
 }
@@ -120,11 +120,14 @@ textarea { width: 100%; outline: none; resize: vertical; margin: 0; }
   margin-left: 0.8em;
   font-size: 0.8em; vertical-align: 0.08em; opacity: 0.8;
 }
-.kb select {
+.kbext {
   position: absolute; bottom: 0.4em; right: 0.1em;
-  color: currentColor; opacity: 0.5;
   font-size: 0.7em;
-  border: none;
+}
+.kbext select { opacity: 0.5; border: none; }
+.prfx {
+  width: 1.2em; text-align: center; border: 1px solid #bdcac4;
+  margin-left: 0.6em;
 }
 .rel { position: relative; }
 .demo {
@@ -187,7 +190,7 @@ a:visited     { color: #3d155f; }
   body, input, select { color: #d6d7d9; background-color: #141515; }
   input       { border-color: #0c0d0e; }
   textarea, pre, code, .primitives tr td:first-child { color: #969698; background-color: #0c0d0e; }
-  textarea, pre, code, .kb { border-color: #040509; }
+  textarea, pre, code, .kb, .prfx { border-color: #040509; }
   .code, .codeCover { fill: #0c0d0e; stroke: #040509; }
   .codeCover  { stroke: #0c0d0e; }
   code        { border-color: #0c0d0e; background-color: #0f1011; }