Ghost/ghost/admin/app/styles/layouts/editor.css
Aileen Nowak b8a1036a43 No more icon font: {{inline-svg}} - Part 2 (#642)
closes TryGhost/Ghost#8107
- replaces all icons in Ghost-Admin with SVGs by using our new helper {{inline-svg}}.
- removes all ghosticon fonts.

This is the second and final batch of the refactor.
2017-04-14 17:22:14 +01:00

238 lines
4.2 KiB
CSS

/* Editor /ghost/editor/
/* ---------------------------------------------------------- */
/* Title
/* ---------------------------------------------------------- */
.gh-editor-title {
flex-grow: 1;
margin-bottom: 2vw;
padding: 0;
margin: 0;
outline: none;
position: relative;
width: 100%;
letter-spacing: 0.8px;
font-weight: bold;
font-size: 3.2rem;
line-height: 1.3em;
z-index: 1;
}
/* Place holder content that displays in the title if it is empty */
.gh-editor-title.no-content:before {
content: attr(data-placeholder);
color: color(var(--midgrey) l(+35%));
cursor: text;
position: absolute;
top: 0;
font-size: 3.2rem;
font-weight: bold;
line-height: 1.3em;
min-width: 30rem; /* hack it's defaulting just to enough width for the 'Your' in 'Your Post Title' */
z-index: -1;
}
.gh-editor-title input {
margin: 0;
padding: 0;
width: 100%;
border: 0;
background: transparent;
color: var(--darkgrey);
font-size: 3.2rem;
font-weight: bold;
letter-spacing: 0.8px;
}
.gh-editor-title input::-webkit-input-placeholder {
color: color(var(--midgrey) l(+25%));
font-weight: 400;
letter-spacing: 1.2px;
}
.gh-editor-title input:-ms-input-placeholder {
color: color(var(--midgrey) l(+25%));
font-weight: 400;
letter-spacing: 1.2px;
}
.gh-editor-title input:focus {
outline: 0;
}
.editor-options .dropdown-menu {
top: 35px;
right: 0;
left: auto;
}
/* Tags input CSS (TODO: needs some revision)
/* ------------------------------------------------------ */
.tags-input-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style-type: none;
}
.tags-input-list li {
flex: 1 0 auto;
}
.label-tag {
margin-right: 0.3em;
padding: 0.2em 0.6em 0.3em;
background-color: var(--darkgrey);
border-radius: 0.25em;
color: var(--lightgrey);
text-align: center;
font-weight: 300;
}
.label-tag.highlight {
background: var(--midgrey);
color: #fff;
}
.tag-input {
margin-top: 5px;
border: none;
font-weight: 300;
cursor: default;
}
.tag-input:focus {
outline: 0;
}
.publish-bar-actions {
flex: 1 0 auto;
align-self: auto;
display: flex;
text-align: right;
}
.post-settings {
position: relative;
display: inline-block;
padding: 15px;
color: var(--midgrey);
transition: all 0.15s ease-out 0s;
}
.post-settings:hover,
.post-settings.active {
color: var(--darkgrey);
}
.post-settings svg {
width: 16px;
height: 16px;
fill: var(--midgrey);
}
.post-settings svg:hover,
.post-settings.active svg {
fill: var(--darkgrey);
}
.post-settings-menu .dropdown-menu {
top: auto;
right: 100%;
bottom: 100%;
left: auto;
}
.post-view-link {
position: absolute;
top: 1px;
right: 0;
font-size: 1.3rem;
}
.post-view-link svg {
display: inline;
height: 10px;
width: auto;
fill: var(--blue);
}
/* Post settings meta
/* ---------------------------------------------------------- */
/* Google Imitation */
.seo-preview {
font-family: Arial, sans-serif;
}
.seo-preview-title {
color: #1e0fbe;
text-overflow: ellipses;
word-wrap: break-word;
font-size: 1.8rem;
line-height: 2.16rem;
-webkit-text-overflow: ellipsis;
}
.seo-preview-link {
margin: 1px 0 2px 0;
color: #006621;
word-wrap: break-word;
font-size: 1.3rem;
line-height: 1.6rem;
}
.seo-preview-description {
color: #545454;
word-wrap: break-word;
font-size: 1.3rem;
line-height: 1.4;
}
/* NEW editor
/* ---------------------------------------------------------- */
.gh-editor-header {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
height: 80px;
}
@media (max-width: 750px) {
.gh-editor-header { padding: 0 4vw; }
}
.gh-editor-status {
color: var(--midgrey);
font-weight: 300;
}
.gh-editor-container {
position: absolute;
overflow-y: auto;
padding: 10vw 4vw;
width: 100%;
height: 100%;
}
.gh-editor-inner {
margin: 0 auto;
max-width: 740px;
height: 100%;
}