diff --git a/ghost/admin/app/styles/components/koenig-content.css b/ghost/admin/app/styles/components/koenig-content.css
index 221a9200d9..24d7f84ec8 100644
--- a/ghost/admin/app/styles/components/koenig-content.css
+++ b/ghost/admin/app/styles/components/koenig-content.css
@@ -415,7 +415,7 @@
.koenig-editor__editor code {
border-radius: 2px;
color: var(--pink);
- font-size: 1.75rem;
+ font-size: 1.65rem;
line-height: 1em;
padding: .4rem .4rem .2rem;
vertical-align: middle;
@@ -425,7 +425,7 @@
.koenig-editor__editor pre code {
border: none;
font-size: 1.6rem;
- color: var(--darkgrey);
+ color: var(--pink);
padding: 0;
}
diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css
index 8f2d5308cf..ec07f78af4 100644
--- a/ghost/admin/app/styles/components/koenig.css
+++ b/ghost/admin/app/styles/components/koenig.css
@@ -58,17 +58,23 @@
justify-content: center;
align-items: center;
position: relative;
- width: 30px;
- height: 30px;
+ width: 36px;
+ height: 36px;
border: var(--midgrey) 1px solid;
background: #fff;
border-radius: 100%;
- margin-left: -40px;
+ margin-left: -48px;
+ margin-top: -2px;
+}
+
+.koenig-plus-menu-button:hover {
+ border: var(--blue) 1px solid;
+ background: rgba(62, 176, 239, .05);
}
.koenig-plus-menu-button svg {
- height: 15px;
- width: 15px;
+ height: 16px;
+ width: 16px;
}
.koenig-plus-menu-button svg path {
@@ -76,6 +82,10 @@
stroke-width: 2px;
}
+.koenig-plus-menu-button:hover svg path {
+ stroke: var(--middarkgrey);
+}
+
@media (max-width: 1024px) {
.koenig-plus-menu-button {
right:10px;
@@ -97,14 +107,14 @@
display: flex;
flex-wrap: wrap;
margin: 0 0 20px 0;
- padding: 12px 15px;
- width: 350px;
+ padding: 20px;
+ width: 360px;
max-height: 460px;
overflow-y: auto;
background-color: #fff;
background-clip: padding-box;
border-radius: 4px;
- box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08);
+ box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 10px 34px rgba(0,0,0,0.12);
text-transform: none;
font-size: 1.4rem;
font-weight: normal;
@@ -185,10 +195,15 @@
display: flex;
align-items: center;
}
+
.koenig-cardmenu-icon svg {
- width: 27px;
- height: 27px;
- fill: var(--darkgrey);
+ width: 32px;
+ height: 32px;
+}
+
+.koenig-cardmenu-icon svg path,
+.koenig-cardmenu-icon svg g {
+ stroke: var(--midgrey);
}
.koenig-cardmenu-label {
@@ -201,13 +216,20 @@
.koenig-cardmenu-card:hover, .koenig-cardmenu-card.selected {
cursor: pointer;
- background: color-mod(var(--lightgrey) l(+3%) s(-10%));
+ background: rgba(62, 176, 239, .05);
+ border: 1px solid var(--blue);
}
+
.koenig-cardmenu-card:hover .koenig-cardmenu-label, .koenig-cardmenu-card.selected .koenig-cardmenu-label {
color: var(--darkgrey);
font-weight: 300;
}
+.koenig-cardmenu-card:hover svg path,
+.koenig-cardmenu-card:hover svg g {
+ stroke: var(--darkgrey);
+}
+
.koenig-cardmenu-divider {
top: -12px;
width: 350px;
@@ -290,6 +312,7 @@
.koenig-editor .gh-markdown-editor {
position: static;
overflow: visible;
+ padding-top: 2px;
}
.koenig-editor .gh-markdown-editor .editor-toolbar {
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
index b4cbe39b56..f9ff80021b 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
@@ -13,7 +13,7 @@ export default Component.extend({
// attrs
icon: null,
- iconClass: 'ih2 absolute fill-lightgrey mt2 nl10 kg-icon',
+ iconClass: 'ih5 absolute stroke-midgrey-l2 mt1 nl10 kg-icon',
toolbar: null,
isSelected: false,
isEditing: false,
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js
index 75635b2697..aa6c519de7 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js
@@ -24,8 +24,8 @@ const ITEM_MAP = [
replaceArg: 'image'
},
{
- label: 'Embed',
- icon: 'koenig/embed',
+ label: 'HTML',
+ icon: 'koenig/html',
matches: ['embed', 'html'],
type: 'card',
replaceArg: 'html'
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
index e54891054b..10b04d7531 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
@@ -1,5 +1,5 @@
{{#koenig-card
- icon="koenig/markdown"
+ icon="koenig/card-indicator-markdown"
class=(concat (kg-style "container-card") " koenig-card-markdown-rendered")
toolbar=toolbar
isSelected=isSelected
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
index dc994abcfe..376f5c8d26 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
@@ -20,8 +20,8 @@