diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css index b838efbfa9..01e9959d17 100644 --- a/ghost/admin/app/styles/components/koenig.css +++ b/ghost/admin/app/styles/components/koenig.css @@ -1745,6 +1745,10 @@ button.emoji-picker__category-button.active { padding: 20px; } +.kg-product-card-image { + margin-bottom: 1.6rem; +} + .kg-product-card-trash-icon svg { width: 16px; height: 16px; @@ -1764,32 +1768,33 @@ button.emoji-picker__category-button.active { width: 100%; } -.kg-product-card-title { +.kg-product-card-title, .kg-product-card-title h4 { text-decoration: none; color: #15171A; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif; - font-weight: 700; - font-size: 1.9rem; + font-weight: 700 !important; + font-size: 1.9rem !important; } .kg-product-card-title ::after { - font-weight: 600 !important; + font-weight: 700 !important; font-size: 2rem !important; + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif; letter-spacing: .02rem; - line-height: 1.6em; } .kg-product-card-description, .kg-product-card-description p { - font-size: 16px !important; + font-size: 1.4rem !important; + line-height: 1.6em; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif !important; color: #656E7A; - margin-top: 4px !important; + margin-top: 8px !important; } .kg-product-card-description ::after { - font-size: 2rem; + font-size: 1.4rem !important; line-height: 1.6em; - font-family: georgia, serif; + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif !important; } .kg-product-card-button { @@ -1797,16 +1802,17 @@ button.emoji-picker__category-button.active { margin-top: 24px; } -.kg-product-card-rating-star span { +.kg-product-card-rating-star { display: flex; align-items: center; justify-content: center; + height: 2.4rem; + width: 2.4rem; } .kg-product-card-rating-star svg { - width: 1em; - height: 1em; - margin-right: 0.6em; + width: 16px; + height: 16px; fill: #fff; } @@ -1817,6 +1823,7 @@ button.emoji-picker__category-button.active { .kg-product-card-rating-edit { background: none; display: flex; + align-items: center; } .kg-product-card-rating-preview { diff --git a/ghost/admin/lib/koenig-editor/addon/options/cards.js b/ghost/admin/lib/koenig-editor/addon/options/cards.js index 8711fc7e32..71ea04a866 100644 --- a/ghost/admin/lib/koenig-editor/addon/options/cards.js +++ b/ghost/admin/lib/koenig-editor/addon/options/cards.js @@ -233,7 +233,7 @@ export const CARD_MENU = [ }, { label: 'Product', - icon: 'koenig/kg-card-type-other', + icon: 'koenig/kg-card-type-product', desc: 'Add a product recommendation', matches: ['product'], type: 'card',