mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 03:14:03 +03:00
56490b7a5f
refs https://github.com/TryGhost/Ghost/issues/9311 - adds an overlay element to the embed card so that clicks do not interact with any embedded iframes so that you can lazy click to enter edit mode
581 lines
12 KiB
CSS
581 lines
12 KiB
CSS
/* TODO: move these back into the editor.css layout? */
|
|
|
|
/* scrollable container */
|
|
.gh-koenig-editor {
|
|
position: relative;
|
|
z-index: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* padded container housing title + editor canvas, scrollable content */
|
|
.gh-koenig-editor-pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100%;
|
|
padding: 10vw 4vw;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.gh-koenig-editor-pane {
|
|
padding: 15vw 4vw;
|
|
}
|
|
}
|
|
|
|
/* use flex-grow to fill the available vertical space so clicks outside the
|
|
editor content can trigger focus */
|
|
.gh-koenig-editor-pane .koenig-editor {
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
cursor: text;
|
|
}
|
|
|
|
/* NOTE: everything from this point should be Koenig addon specific */
|
|
|
|
/* Editor canvas layout ----------------------------------------------------- */
|
|
|
|
.koenig-editor {
|
|
position: relative; /* necessary to position toolbar etc */
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Formatting / Container Card Toolbar -------------------------------------- */
|
|
|
|
.koenig-toolbar {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
color: color(var(--lightgrey) l(-10%));
|
|
background: linear-gradient(
|
|
color(var(--darkgrey) l(-3%)),
|
|
color(var(--darkgrey) l(-8%))
|
|
);
|
|
border-radius: 5px;
|
|
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;
|
|
z-index:110; /* places it above the title */
|
|
pointer-events: none !important; /* no interactivity when hidden */
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
.koenig-toolbar--visible {
|
|
pointer-events: auto !important; /* make sure the buttons work */
|
|
opacity: 1;
|
|
}
|
|
|
|
.koenig-toolbar:after {
|
|
display: block;
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -8px;
|
|
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;
|
|
transition-property: left;
|
|
transition-duration: 100ms;
|
|
}
|
|
.koenig-toolbar.tick-above:after {
|
|
border: none;
|
|
}
|
|
|
|
.koenig-toolbar.is-link {
|
|
width: 263px;
|
|
height: 40px;
|
|
}
|
|
.koenig-toolbar.is-link input {
|
|
width: 100%;
|
|
background-color: transparent;
|
|
outline: none;
|
|
border: none;
|
|
padding:5px;
|
|
}
|
|
.koenig-toolbar.is-touch {
|
|
position: fixed !important;
|
|
top: 70px;
|
|
right: 40px;
|
|
}
|
|
|
|
.koenig-toolbar.is-touch:after {
|
|
border: none;
|
|
}
|
|
|
|
.koenig-toolbar-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 40px;
|
|
width: 32px;
|
|
font-size: 1.6rem;
|
|
line-height: 40px;
|
|
transition: text-shadow 0.3s ease;
|
|
}
|
|
|
|
.koenig-toolbar-btn:first-child {
|
|
width: 43px;
|
|
padding-left: 8px;
|
|
}
|
|
.koenig-toolbar-btn:last-child {
|
|
width: 43px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.koenig-toolbar-btn svg {
|
|
height: 1.4rem;
|
|
}
|
|
|
|
.koenig-toolbar-btn svg g {
|
|
stroke-width: 2px;
|
|
stroke: color(var(--lightgrey) l(-10%));
|
|
}
|
|
|
|
.koenig-toolbar-btn:hover,
|
|
.koenig-toolbar-btn.selected {
|
|
color: #fff;
|
|
cursor: pointer;
|
|
text-shadow: #000 0 1px 6px;
|
|
}
|
|
|
|
.koenig-toolbar-btn:hover svg g {
|
|
stroke: #fff;
|
|
}
|
|
|
|
.koenig-toolbar-btn-bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.koenig-toolbar-btn-italic {
|
|
width: 31px;
|
|
font-size: 1.7rem;
|
|
text-indent: -1px;
|
|
font-style: italic;
|
|
font-family: Georgia, Times, serif;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.koenig-toolbar-btn-strike {
|
|
text-decoration: line-through;
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.koenig-toolbar-btn-h1 {
|
|
font-variant: small-caps;
|
|
font-weight: 700;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.koenig-toolbar-btn-h2 {
|
|
font-weight: 700;
|
|
font-size: 0.9em;
|
|
font-variant: small-caps;
|
|
line-height: 42px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.koenig-toolbar-btn-quote {
|
|
font-size: 4rem;
|
|
line-height: 62px;
|
|
font-family: Georgia, Times, serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.koenig-toolbar-divider {
|
|
height: 40px;
|
|
width: 1px;
|
|
margin: 0 9px 0 8px;
|
|
background: color(var(--darkgrey) l(-10%));
|
|
box-shadow: rgba(255,255,255,0.04) 1px 0 0 0;
|
|
}
|
|
|
|
/* ⨁ menu ------------------------------------------------------------------ */
|
|
|
|
.koenig-plus-menu {
|
|
position: absolute;
|
|
}
|
|
|
|
.koenig-plus-menu-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: var(--midgrey) 1px solid;
|
|
background: #fff;
|
|
border-radius: 100%;
|
|
margin-left: -40px;
|
|
}
|
|
|
|
.koenig-plus-menu-button svg {
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
|
|
.koenig-plus-menu-button svg path {
|
|
stroke: var(--midgrey);
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.koenig-plus-menu-button {
|
|
right:10px;
|
|
}
|
|
}
|
|
|
|
/* Slash shortcut menu ------------------------------------------------------ */
|
|
|
|
.koenig-slash-menu {
|
|
position: absolute;
|
|
}
|
|
|
|
/* Menu items --------------------------------------------------------------- */
|
|
|
|
/* Chrome has a bug with its scrollbars on this element which has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=697381 */
|
|
.koenig-cardmenu {
|
|
position: absolute;
|
|
top: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 0 20px 0;
|
|
padding: 12px 15px;
|
|
width: 350px;
|
|
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);
|
|
text-transform: none;
|
|
font-size: 1.4rem;
|
|
font-weight: normal;
|
|
position: absolute;
|
|
z-index: 9999999; /* have to compete with codemirror */
|
|
}
|
|
|
|
.koenig-cardmenu-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: var(--midgrey) 1px solid;
|
|
background: #fff;
|
|
border-radius: 100%;
|
|
margin-left: -40px;
|
|
}
|
|
|
|
.koenig-cardmenu-button svg {
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
|
|
.koenig-cardmenu-button svg path {
|
|
stroke: var(--midgrey);
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.koenig-cardmenu-button {
|
|
right:10px;
|
|
}
|
|
}
|
|
|
|
.koenig-cardmenu-search {
|
|
position: relative;
|
|
width: 350px;
|
|
height: 40px;
|
|
margin: -12px -15px;
|
|
}
|
|
|
|
.koenig-cardmenu-search svg {
|
|
position: absolute;
|
|
top: 11px;
|
|
left: 10px;
|
|
z-index: 100;
|
|
width: 20px;
|
|
height: 19px;
|
|
}
|
|
|
|
.koenig-cardmenu-search-input {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 40px;
|
|
font-size: 1.4rem;
|
|
line-height: 40px;
|
|
padding: 10px 0 10px 40px;
|
|
border: none;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
.koenig-cardmenu-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.koenig-cardmenu-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.koenig-cardmenu-icon svg {
|
|
width: 27px;
|
|
height: 27px;
|
|
fill: var(--darkgrey);
|
|
}
|
|
|
|
.koenig-cardmenu-label {
|
|
margin: 7px 0 0 0;
|
|
font-size: 1.1rem;
|
|
color: var(--midgrey);
|
|
letter-spacing: 0.2px;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.koenig-cardmenu-card:hover, .koenig-cardmenu-card.selected {
|
|
cursor: pointer;
|
|
background: color(var(--lightgrey) l(+3%) s(-10%));
|
|
}
|
|
.koenig-cardmenu-card:hover .koenig-cardmenu-label, .koenig-cardmenu-card.selected .koenig-cardmenu-label {
|
|
color: var(--darkgrey);
|
|
font-weight: 300;
|
|
}
|
|
|
|
.koenig-cardmenu-divider {
|
|
top: -12px;
|
|
width: 350px;
|
|
padding: 5px 0;
|
|
margin: 12px -15px;
|
|
font-size: 1.2rem;
|
|
text-align: center;
|
|
background: color(var(--lightgrey) l(+3%) s(-10%));
|
|
}
|
|
|
|
|
|
/* Cards -------------------------------------------------------------------- */
|
|
|
|
/* generic containers... */
|
|
|
|
.koenig-card {
|
|
position: relative;
|
|
display: flex;
|
|
width: calc(100% + 60px);
|
|
border: 2px solid color(var(--blue) alpha(-85%));
|
|
flex-direction: row;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin-left: -50px;
|
|
max-width: none;
|
|
cursor: default;
|
|
caret-color: auto; /* override hidden cursors around cards */
|
|
}
|
|
|
|
.koenig-card:hover {
|
|
border-color: color(var(--blue) alpha(-25%));
|
|
}
|
|
|
|
.koenig-card--selected {
|
|
border-color: var(--blue);
|
|
}
|
|
|
|
.koenig-card-icon {
|
|
width: 30px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.koenig-card-content {
|
|
flex-grow: 1;
|
|
max-width: calc(100% - 40px);
|
|
}
|
|
|
|
.koenig-card-click-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 400;
|
|
}
|
|
|
|
/* specific cards... */
|
|
|
|
textarea.koenig-card-markdown {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.koenig-card-html--editor .CodeMirror {
|
|
min-height: 170px;
|
|
padding: 0;
|
|
overflow: auto;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.koenig-card-html--editor .CodeMirror:hover {
|
|
cursor: text;
|
|
}
|
|
|
|
.koenig-card-html--editor .CodeMirror-scroll {
|
|
min-height: 170px;
|
|
overflow: hidden !important;
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* mobiledoc-kit base styles ------------------------------------------------
|
|
* NOTE: adapted from https://github.com/bustle/mobiledoc-kit/blob/master/src/css/mobiledoc-kit.css
|
|
*/
|
|
|
|
/**
|
|
* Editor
|
|
*/
|
|
|
|
/* TODO: update to match Ghost styles */
|
|
.__mobiledoc-editor {
|
|
position: relative;
|
|
font-family: var(--font-family);
|
|
font-size: 1.7rem;
|
|
resize: none;
|
|
font-weight: 200;
|
|
letter-spacing: 0.1px;
|
|
min-height: 1em;
|
|
}
|
|
|
|
.__mobiledoc-editor:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.__mobiledoc-editor > * {
|
|
position: relative;
|
|
}
|
|
|
|
.__mobiledoc-editor.__has-no-content:after {
|
|
content: attr(data-placeholder);
|
|
color: #bbb;
|
|
cursor: text;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.__mobiledoc-editor a {
|
|
color: #0b8bff;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* override of global.css block display */
|
|
.__mobiledoc-editor i {
|
|
display: inline;
|
|
}
|
|
|
|
.__mobiledoc-editor h1,
|
|
.__mobiledoc-editor h2,
|
|
.__mobiledoc-editor h3,
|
|
.__mobiledoc-editor h4,
|
|
.__mobiledoc-editor h5,
|
|
.__mobiledoc-editor h6 {
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.__mobiledoc-editor blockquote {
|
|
border-left: 4px solid #0b8bff;
|
|
margin: 1em 0 1em -1.2em;
|
|
padding-left: 1.05em;
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
.__mobiledoc-editor img {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.__mobiledoc-editor hr {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
/**
|
|
* Cards
|
|
*/
|
|
|
|
.__mobiledoc-card {
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin: 0 0 1.7em 0; /* match P margin */
|
|
}
|
|
|
|
/**
|
|
* Tooltips
|
|
*/
|
|
|
|
@-webkit-keyframes fade-in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
@keyframes fade-in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
.__mobiledoc-tooltip {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 0.7em;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
background-color: rgba(43,43,43,0.9);
|
|
border-radius: 3px;
|
|
line-height: 1em;
|
|
padding: 0.7em 0.9em;
|
|
color: #FFF;
|
|
-webkit-animation: fade-in 0.2s;
|
|
animation: fade-in 0.2s;
|
|
}
|
|
|
|
.__mobiledoc-tooltip:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 0.4em solid transparent;
|
|
border-right: 0.4em solid transparent;
|
|
border-bottom: 0.4em solid rgba(43,43,43,0.9);
|
|
top: -0.4em;
|
|
margin-left: -0.4em;
|
|
}
|
|
|
|
/* help keeps mouseover state when moving from link to tooltip */
|
|
.__mobiledoc-tooltip:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: -0.4em;
|
|
height: 0.4em;
|
|
}
|
|
|
|
.__mobiledoc-tooltip a {
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.__mobiledoc-tooltip a:hover {
|
|
text-decoration: underline;
|
|
}
|