Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Fixed editor dark-mode issues

Browse source 
No ref
This commit is contained in:
Sanne de Vries 2022-05-16 13:50:54 +02:00
parent 5415fb6e01
commit 025fe3e6ae
6 changed files with 67 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/components/editor-labs/modals/preview.hbs
View file

@ -1,7 +1,7 @@
<div class="flex flex-column h-100">
<header class="modal-header gh-post-preview-header" data-test-modal="preview-email">
<div class="left">
<button class="gh-editor-back-button" title="Close" type="button" {{on "click" @close}}>
<button class="gh-btn-editor gh-editor-back-button" title="Close" type="button" {{on "click" @close}}>
<span>{{svg-jar "arrow-left"}} Editor</span>
</button>
</div>
@ -20,7 +20,7 @@
<div class="right">
<button
type="button"
class="gh-btn gh-editor-preview-trigger active"
class="gh-btn gh-btn-editor gh-editor-preview-trigger active"
{{on "click" @close}}
>
<span>Preview</span>

4
ghost/admin/app/components/editor-labs/modals/publish-flow.hbs
View file

@ -1,6 +1,6 @@
<div class="flex flex-column h-100 items-center overflow-auto">
<header class="gh-publish-header" data-test-modal="publish-flow">
<button class="gh-publish-back-button" title="Close" type="button" {{on "click" @close}}>
<button class="gh-btn-editor gh-publish-back-button" title="Close" type="button" {{on "click" @close}}>
<span>{{svg-jar "arrow-left"}} Editor</span>
</button>
@ -9,7 +9,7 @@
<div>
<button
type="button"
class="gh-btn gh-editor-preview-trigger"
class="gh-btn gh-btn-editor gh-editor-preview-trigger"
{{on "click" @data.togglePreviewPublish}}
>
<span>Preview</span>

2
ghost/admin/app/components/editor-labs/modals/update-flow.hbs
View file

@ -1,6 +1,6 @@
<div class="flex flex-column h-100 items-center overflow-auto">
<header class="gh-publish-header" data-test-modal="update-flow">
<button class="gh-publish-back-button" title="Close" type="button" {{on "click" @close}}>
<button class="gh-btn-editor gh-publish-back-button" title="Close" type="button" {{on "click" @close}}>
<span>{{svg-jar "arrow-left"}} Editor</span>
</button>
<div class="flex">

2
ghost/admin/app/components/editor-labs/publish-management.hbs
View file

@ -1,6 +1,6 @@
{{#if @post.isDraft}}
<div {{on-key "cmd+p" this.togglePreview}}>
<button type="button" class="gh-btn gh-editor-preview-trigger" {{on "click" this.openPreview}}>
<button type="button" class="gh-btn gh-btn-editor gh-editor-preview-trigger" {{on "click" this.openPreview}}>
<span>Preview</span>
</button>
</div>

97
ghost/admin/app/styles/app-dark.css
View file

@ -233,7 +233,7 @@ input:focus,
opacity: 0.2;
}
.gh-main,
.gh-main:not(.gh-main-white),
.gh-nav,
.gh-unsplash-window {
background: var(--dark-main-bg-color);
@ -278,10 +278,6 @@ input:focus,
border-right: none !important;
}
.gh-btn-group .gh-btn-group-selected span {
background: var(--lightgrey-l1) !important;
}
.gh-btn-blue,
.gh-btn-green,
.gh-btn-red {
@ -414,6 +410,47 @@ input:focus,
background: var(--whitegrey);
}
.gh-publish-setting {
border-bottom: 1px solid var(--lightgrey-l1);
}
.gh-publish-setting-trigger {
color: var(--darkgrey-d2);
}
.gh-publish-setting-title svg path {
stroke: var(--darkgrey-d2);
}
.gh-publish-newsletter-trigger {
background: var(--lightgrey);
}
.gh-publish-confirmation {
color: var(--middarkgrey);
}
.gh-publish-confirmation strong {
color: var(--black)
}
.gh-btn-pulse {
background: var(--green) !important;
}
.gh-publish-cta-secondary {
color: var(--middarkgrey);
}
.gh-publish-cta-secondary:hover {
color: var(--middarkgrey-l2);
}
.gh-post-bookmark {
border: 1px solid rgba(124, 139, 154, 0.25);
background: var(--white);
}
.gh-image-uploader {
background: var(--lightgrey);
}
@ -698,12 +735,13 @@ input:focus,
background: var(--whitegrey-l1);
}
.gh-browserpreview-browser {
background: var(--whitegrey);
.gh-browserpreview-browser .tabs {
background: var(--whitegrey-l2);
}
.gh-browserpreview-browser .tabs div {
background: var(--lightgrey);
.gh-browserpreview-browser .tabs div,
.gh-browserpreview-browser .tabs ul li {
background: var(--lightgrey-l2);
}
.tag-settings .gh-image-uploader {
@ -794,30 +832,18 @@ input:focus,
}
/* Editor */
@media (max-width: 1024px) {
.gh-editor-header {
background-color: var(--dark-main-bg-color);
}
}
.gh-editor-back-button {
background: var(--dark-main-bg-color);
}
.gh-editor-post-status {
background: var(--dark-main-bg-color);
}
.gh-editor-preview-trigger {
background: var(--dark-main-bg-color) !important;
}
.gh-editor-preview-trigger:hover {
background: var(--whitegrey) !important;
}
.gh-btn-editor {
background: var(--dark-main-bg-color) !important;
background: var(--white) !important;
}
.gh-btn-editor.active,
.gh-btn-editor:hover {
background: var(--lightgrey) !important;
}
.gh-editor-post-status {
background: var(--white);
}
.gh-editor-feature-image-add-button {
@ -841,7 +867,7 @@ input:focus,
}
.gh-editor-wordcount-container {
background: var(--dark-main-bg-color);
background: var(--white);
}
/* Segment input */
@ -867,11 +893,6 @@ input:focus,
}
/* Post preview modal */
.gh-post-preview-header,
.gh-post-preview-browser-footer {
background: var(--main-color-content-greybg);
}
.gh-post-preview-browser-footer {
border-top: 1px solid var(--hairline-color-1);
}
@ -924,7 +945,7 @@ input:focus,
.gh-post-preview-browser-container,
.gh-post-preview-email-container,
.gh-post-preview-social-container {
background: var(--dark-main-bg-color);
background: transparent;
}
.modal-fullsettings-main {

4
ghost/admin/app/templates/editor.hbs
View file

@ -8,7 +8,7 @@
<header class="gh-editor-header br2 pe-none">
<div class="flex items-center pe-auto h-100">
{{#if this.ui.isFullScreen}}
<LinkTo @route={{pluralize this.post.displayName }} class="gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
<LinkTo @route={{pluralize this.post.displayName }} class="gh-btn-editor gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
<span>
{{svg-jar "arrow-left"}}
{{capitalize (pluralize this.post.displayName)}}
@ -31,7 +31,7 @@
{{#if this.session.user.isContributor}}
{{#if this.post.isDraft}}
<div {{on-key "cmd+p" this.openPostPreview}}>
<button type="button" class="gh-btn gh-editor-preview-trigger" {{on "click" this.openPostPreviewModal}}>
<button type="button" class="gh-btn gh-btn-editor gh-editor-preview-trigger" {{on "click" this.openPostPreviewModal}}>
<span>Preview</span>
</button>
</div>