Improved the editor styles for header card

refs https://github.com/TryGhost/Team/issues/1253
This commit is contained in:
James Morris 2021-12-15 12:21:19 +00:00
parent 89a766bca1
commit 88ddcfeeff

View File

@ -1994,13 +1994,14 @@ button.emoji-picker__category-button.active {
/* --------------------------------------------------------------- */ /* --------------------------------------------------------------- */
.kg-header-card { .kg-header-card {
padding-left: 2em; padding-left: 4em;
padding-right: 2em; padding-right: 4em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--white); color: var(--white);
transition: background-color var(--animation-speed-fast) ease-in-out;
} }
.kg-header-card h2, .kg-header-card h2,
@ -2018,18 +2019,21 @@ button.emoji-picker__category-button.active {
padding-top: 4em; padding-top: 4em;
padding-bottom: 4em; padding-bottom: 4em;
height: 40vh; height: 40vh;
min-height: auto;
} }
.kg-header-card.kg-size-medium { .kg-header-card.kg-size-medium {
padding-top: 6em; padding-top: 6em;
padding-bottom: 6em; padding-bottom: 6em;
height: 60vh; height: 60vh;
min-height: auto;
} }
.kg-header-card.kg-size-large { .kg-header-card.kg-size-large {
padding-top: 12em; padding-top: 12em;
padding-bottom: 7em; padding-bottom: 12em;
height: 80vh; height: 80vh;
min-height: auto;
} }
.kg-header-card.kg-size-large h2 { .kg-header-card.kg-size-large h2 {
@ -2040,6 +2044,10 @@ button.emoji-picker__category-button.active {
font-size: 4em; font-size: 4em;
} }
.kg-header-card h2 strong {
font-weight: 800;
}
.kg-header-card h3 { .kg-header-card h3 {
font-size: 1.5em; font-size: 1.5em;
font-weight: 500; font-weight: 500;
@ -2064,8 +2072,13 @@ button.emoji-picker__category-button.active {
} }
.kg-header-card.kg-style-invert { .kg-header-card.kg-style-invert {
background: var(--black);
color: var(--white);
}
.kg-header-card.kg-style-clear {
color: var(--black); color: var(--black);
border: 1px solid var(--accent-color); border: 1px solid var(--lightgrey);
border-width: 1px 0; border-width: 1px 0;
} }