TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 03:44:29 +03:00
Code Issues Projects Releases Wiki Activity

Aligned cursor to left when header is empty

Browse Source 
refs https://github.com/TryGhost/Team/issues/1253

Using text-align: left will shift our cursor to the left of the editor,
but this does not match up with the placeholder text, so we need to use
media queries and some CSS calculations for that.

Zimo did the CSS magics for this
This commit is contained in:
Fabien egg O'Carroll 2021-12-17 10:49:40 +02:00
parent fa29e50c7d
commit da189578bb
1 changed files with 73 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
ghost/admin/app/styles/components/koenig.css
View File

@ -2042,6 +2042,55 @@ button.emoji-picker__category-button.active {
transition: background-color var(--animation-speed-fast) ease-in-out;
}
.kg-header-card .__mobiledoc-editor.__has-no-content h2,
.kg-header-card .__mobiledoc-editor.__has-no-content h3 {
text-align: left;
}
/* Setting placeholder cursor to left */
.kg-header-card .__mobiledoc-editor.__has-no-content h2 {
padding-left: calc((100% - 710px) / 2);
}
.kg-header-card .__mobiledoc-editor.__has-no-content h3 {
padding-left: calc((40em - 255px) / 2);
}
@media (max-width: 1292px) {
.kg-header-card .__mobiledoc-editor.__has-no-content h3 {
padding-left: calc((100% - 255px) / 2);
}
}
.kg-header-card.kg-size-small .__mobiledoc-editor.__has-no-content h2 {
padding-left: calc((100% - 570px) / 2);
}
.kg-header-card.kg-size-small .__mobiledoc-editor.__has-no-content h3 {
padding-left: calc((40em - 212px) / 2);
}
@media (max-width: 1122px) {
.kg-header-card.kg-size-small .__mobiledoc-editor.__has-no-content h3 {
padding-left: calc((100% - 212px) / 2);
}
}
.kg-header-card.kg-size-large .__mobiledoc-editor.__has-no-content h2 {
padding-left: calc((100% - 850px) / 2);
}
.kg-header-card.kg-size-large .__mobiledoc-editor.__has-no-content h3 {
padding-left: calc((40em - 292px) / 2);
}
@media (max-width: 1462px) {
.kg-header-card.kg-size-large .__mobiledoc-editor.__has-no-content h3 {
padding-left: calc((100% - 292px) / 2);
}
}
.kg-header-card a {
pointer-events: none;
}
@ -2261,6 +2310,10 @@ button.emoji-picker__category-button.active {
.kg-header-card.kg-size-large h2 {
font-size: 4.8em;
}
.kg-header-card.kg-size-large .__mobiledoc-editor.__has-no-content h2 {
padding-left: calc((100% - 680px) / 2);
}
}
@media (max-width: 980px) {
@ -2273,10 +2326,18 @@ button.emoji-picker__category-button.active {
font-size: 3.8em;
}
.kg-header-card .__mobiledoc-editor.__has-no-content h2 {
padding-left: calc((100% - 540px) / 2);
}
.kg-header-card.kg-size-large .kg-header-card-header .__mobiledoc-editor.__has-no-content:after,
.kg-header-card.kg-size-large h2 {
font-size: 4.0em;
}
.kg-header-card.kg-size-large .__mobiledoc-editor.__has-no-content h2 {
padding-left: calc((100% - 568px) / 2);
}
}
@media (max-width: 680px) {
@ -2285,15 +2346,27 @@ button.emoji-picker__category-button.active {
font-size: 3.0em;
}
.kg-header-card .__mobiledoc-editor.__has-no-content h2 {
padding-left: calc((100% - 430px) / 2);
}
.kg-header-card.kg-size-small .kg-header-card-header .__mobiledoc-editor.__has-no-content:after,
.kg-header-card.kg-size-small h2 {
font-size: 2.8em;
}
.kg-header-card.kg-size-small .__mobiledoc-editor.__has-no-content h2 {
padding-left: calc((100% - 404px) / 2);
}
.kg-header-card.kg-size-large .kg-header-card-header .__mobiledoc-editor.__has-no-content:after,
.kg-header-card.kg-size-large h2 {
font-size: 3.2em;
}
.kg-header-card.kg-size-large .__mobiledoc-editor.__has-no-content h2 {
padding-left: calc((100% - 460px) / 2);
}
}
/* Upload cards: audio and file