mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 18:31:57 +03:00
5724a94fbc
Refs: https://github.com/TryGhost/Ghost/issues/8191 Refs: https://github.com/TryGhost/Ghost/issues/8194 Changes the selection behaviour of mobiledoc-cards: If you navigate to a card with a keyboard or click on the new editor toolbar it "hard selects". If you click into the body of a card to edit it it "soft selects". When a card is "hard selected" you can navigate out of the card and to the previous or following blocks within the mobiledoc with the keyboard, you can delete the current card with the backspace or delete button, and you can create a new block following the card with the enter key. When a card is soft selected it is simply displayed as selected and allows the user to edit content within the card. New card toolbar: Allows a user to delete the card, save the card, and "hard select" a card. New title behaviour: Pressing the enter key within the title "splits" the title at the cursor point, if multiple characters are selected they are first deleted, and creates a new paragraph at the top of the document with the trailing characters after the split. gh-cm-editor updates: Adds an on-focus event to gh-cm-editor
230 lines
4.5 KiB
CSS
230 lines
4.5 KiB
CSS
@import "koenig-toolbar.css";
|
|
@import "koenig-menu.css";
|
|
@import "../ghost-editor/cardmenu.css";
|
|
|
|
.editor-holder {
|
|
height: 100%;
|
|
}
|
|
.gh-koenig {
|
|
height: 100%;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.__mobiledoc-editor {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 300px;
|
|
padding-bottom: 10vw;
|
|
outline: none;
|
|
font-family: var(--font-family);
|
|
font-size: 1.7rem;
|
|
resize: none;
|
|
font-weight: 200;
|
|
letter-spacing: 0.1px;
|
|
}
|
|
|
|
.kg-card {
|
|
position: relative;
|
|
display: block;
|
|
padding: 10px;
|
|
outline:none;
|
|
}
|
|
|
|
.kg-card:hover, .kg-card.selected {
|
|
box-shadow: var(--blue) 0 0 0 1px;
|
|
border-radius:10px;
|
|
}
|
|
.kg-card.selected-hard {
|
|
box-shadow: var(--blue) 0 0 0 3px;
|
|
}
|
|
.kg-card .kg-card-toolbar {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
margin-top: -56px;
|
|
height: 46px;
|
|
width:100%;
|
|
display: none;
|
|
}
|
|
.button-group {
|
|
color: color(var(--lightgrey) l(-10%));
|
|
background: linear-gradient(
|
|
color(var(--darkgrey) l(-3%)),
|
|
color(var(--darkgrey) l(-8%))
|
|
);
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
border-radius:5px;
|
|
|
|
height:46px;
|
|
display:flex;
|
|
box-shadow: 0 0 0 1px color(var(--darkgrey) l(-10%)), 0 8px 16px rgba(26,39,49,0.16), rgba(255,255,255,0.09) 0 1px 0 0 inset;
|
|
}
|
|
|
|
/* keeps the hover when the cursor is moving from the card to the toolbar */
|
|
.button-group:before {
|
|
display: block;
|
|
content: "";
|
|
position: absolute;
|
|
bottom:-9px;
|
|
width: 100%;
|
|
height: 8px;
|
|
}
|
|
|
|
.button-group:after {
|
|
display: block;
|
|
content: "";
|
|
position: absolute;
|
|
bottom:-9px;
|
|
left: 50%;
|
|
margin-left: -10px;
|
|
|
|
width: 0;
|
|
height: 0;
|
|
border-left: transparent 10px solid;
|
|
border-right: transparent 10px solid;
|
|
border-top: color(var(--darkgrey) l(-10%)) 8px solid;
|
|
}
|
|
|
|
|
|
.kg-card:hover .kg-card-toolbar, .kg-card.selected .kg-card-toolbar {
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: space-around;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.kg-card .kg-card-toolbar label {
|
|
flex-grow: 1;
|
|
font-size: 1.3rem;
|
|
line-height: 46px;
|
|
text-align:center;
|
|
vertical-align: middle;
|
|
font-weight: bold;
|
|
padding:0 18px;
|
|
}
|
|
|
|
|
|
.kg-card .kg-card-toolbar button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 46px;
|
|
min-width: 32px;
|
|
font-size: 1.6rem;
|
|
line-height: 30px;
|
|
padding:0 5px 0 5px;
|
|
transition: text-shadow 0.3s ease;
|
|
}
|
|
.kg-card .kg-card-toolbar button.kg-card-button-text {
|
|
font-size: 1.3rem;
|
|
line-height: 46px;
|
|
width:70px;
|
|
text-align:center;
|
|
vertical-align: middle;
|
|
padding:0;
|
|
}
|
|
.kg-card .kg-card-toolbar button.kg-card-button-save {
|
|
font-size: 1.3rem;
|
|
line-height: 30px;
|
|
height:30px;
|
|
width:60px;
|
|
text-align:center;
|
|
vertical-align: middle;
|
|
margin:8px;
|
|
|
|
color: #fff;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
|
|
fill: #fff;
|
|
background: linear-gradient( rgb(61, 161, 214), rgb(34, 136, 191) );
|
|
box-shadow: 0 1px 0 rgba(0,0,0,0.12);
|
|
border-radius:5px;
|
|
}
|
|
.kg-card .kg-card-toolbar button.kg-card-delete {
|
|
text-transform: none !important;
|
|
font-family: "ghosticons" !important;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
font-weight: normal !important;
|
|
font-style: normal !important;
|
|
font-variant: normal !important;
|
|
}
|
|
|
|
.kg-card textarea {
|
|
min-height: 333px;
|
|
max-width: 900px;
|
|
outline: none;
|
|
border: none;
|
|
resize: none;
|
|
}
|
|
|
|
.kg-card-toolbar button:hover {
|
|
background-color: #718087;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
|
|
textarea.ed_code {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Tooltip
|
|
*/
|
|
|
|
|
|
@keyframes tooltip-fadein {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
.__mobiledoc-tooltip {
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
background-color: #5ba4e5;
|
|
border-radius: 3px;
|
|
padding: 5px 10px 5px 10px;
|
|
color: #FFF;
|
|
-webkit-animation: tooltip-fadein 0.333s;
|
|
animation: tooltip-fadein 0.333s;
|
|
}
|
|
.__mobiledoc-tooltip a {
|
|
color: #FFF;
|
|
}
|
|
.__mobiledoc-tooltip:before {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
top: -9px;
|
|
|
|
margin-left: -10px;
|
|
|
|
border-bottom: 10px solid #5ba4e5;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
}
|
|
|
|
|
|
.kg-card .gh-image-uploader .upload-form {
|
|
width: 100%;
|
|
height: 350px;
|
|
background: color(var(--lightgrey) l(+4%));
|
|
box-shadow: var(--lightgrey) 0 0 0 1px inset, #fff 0 0 0 15px inset;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
|
|
/**
|
|
* HTML Card
|
|
*/
|
|
|
|
.kg-card-html {
|
|
border: #ddd 1px solid;
|
|
}
|