From e253174506df9a01dc26225d97c0f751e0b85047 Mon Sep 17 00:00:00 2001
From: Zimo <peter.zimon@gmail.com>
Date: Wed, 25 Apr 2018 13:15:50 +0200
Subject: [PATCH] Koenig - Styled HTML card edit mode

refs https://github.com/TryGhost/Ghost/issues/9505
---
 .../app/styles/components/koenig-content.css  | 22 +++++++++++++++++++
 .../templates/components/koenig-card-html.hbs |  3 ++-
 .../icons/koenig/card-indicator-html.svg      |  5 +++++
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 ghost/admin/lib/koenig-editor/public/icons/koenig/card-indicator-html.svg

diff --git a/ghost/admin/app/styles/components/koenig-content.css b/ghost/admin/app/styles/components/koenig-content.css
index 24d7f84ec8..5d3720dbde 100644
--- a/ghost/admin/app/styles/components/koenig-content.css
+++ b/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,
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
index f325632c92..1345c67897 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
+++ b/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
diff --git a/ghost/admin/lib/koenig-editor/public/icons/koenig/card-indicator-html.svg b/ghost/admin/lib/koenig-editor/public/icons/koenig/card-indicator-html.svg
new file mode 100644
index 0000000000..bee1b4dfa3
--- /dev/null
+++ b/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>