Koenig - Styled HTML card edit mode

refs https://github.com/TryGhost/Ghost/issues/9505

ghost/admin/app/styles/components/koenig-content.css

@@ -405,6 +405,7 @@
 
 /* Code
 /* ------------------------------------------------------------------ */
+.koenig-card-html--editor .CodeMirror,
 .koenig-editor__editor code,
 .koenig-editor__editor pre {
     font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
@@ -478,6 +479,10 @@
 /* HTML editor
 /* --------------------------------------------------------------- */
 
+.koenig-card-html-rendered > :nth-child(2) {
+    margin: 0;
+}
+
 .koenig-card-html--editor pre {
     border: none;
     background: none;
@@ -486,6 +491,20 @@
     line-height: 1.4em;
 }
 
+.koenig-card-html--editor .CodeMirror {
+    border: none;
+}
+
+.koenig-card-html--editor .CodeMirror-linenumber {
+    padding: 12px 3px 0 5px;
+    color: var(--midlightgrey);
+}
+
+.koenig-card-html--editor .CodeMirror-gutters {
+    border: none;
+    background: none;
+}
+
 
 /* Table
 /* --------------------------------------------------------------- */
@@ -493,6 +512,9 @@
 .koenig-editor__editor table {
     font-size: 1.75rem;
     margin: 0;
+    font-family: georgia,serif;
+    letter-spacing: .02rem;
+    line-height: 1.6em;
 }
 
 .koenig-editor__editor table tr td,

ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs

@@ -1,5 +1,6 @@
 {{#koenig-card
-    class=(concat (kg-style "media-card") " mih10 miw-100 relative")
+    icon="koenig/card-indicator-html"
+    class=(concat (kg-style "container-card") " mih10 miw-100 relative koenig-card-html-rendered")
     toolbar=toolbar
     isSelected=isSelected
     isEditing=isEditing

ghost/admin/lib/koenig-editor/public/icons/koenig/card-indicator-html.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M1 12V7M4 12V7M1 9.472h2.364M14 12V7l-1.5 2.472L11 7v5M19 12h-2.5V7M7.5 12V7M6 7h3" stroke="#9BAEB8" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+</svg>