Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Made Ghost logo background in dark mode match the admin background

Browse source 
close https://linear.app/tryghost/issue/IPC-140/ghost-logo-in-dark-mode-doesnt-perfectly-match-the-background
This commit is contained in:
Djordje Vlaisavljevic 2024-04-04 12:07:12 +01:00
parent 0f0cdfdcd4
commit 7107b092fd
3 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ghost/admin/app/components/dashboard/onboarding-checklist.hbs
View file

@ -1,20 +1,25 @@
<div class="gh-onboarding-wrapper" data-test-dashboard="onboarding-checklist">
<div class="gh-onboarding-header">
{{#if (feature "nightShift")}}
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;" class="gh-onboarding-ghost-logo--dark" {{autoplay}}>
<source src="assets/videos/logo-loader-dark.mp4" type="video/mp4" />
</video>
<div class="gh-onboarding-ghost-logo-wrapper">
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px;" class="gh-onboarding-ghost-logo--dark" {{autoplay}}>
<source src="assets/videos/logo-loader-dark.mp4" type="video/mp4" />
</video>
<div class="gh-onboarding-ghost-logo-overlay"></div>
</div>
{{else}}
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;" class="gh-onboarding-ghost-logo--light" {{autoplay}}>
<source src="assets/videos/logo-loader.mp4" type="video/mp4" />
</video>
<div class="gh-onboarding-ghost-logo-wrapper">
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px;" class="gh-onboarding-ghost-logo--light" {{autoplay}}>
<source src="assets/videos/logo-loader.mp4" type="video/mp4" />
</video>
</div>
{{/if}}
{{#if this.onboarding.allStepsCompleted}}
<h2 class="gh-canvas-title">You’re all set.</h2>
{{else}}
<h2 class="gh-canvas-title">Let’s get started!</h2>
<p>Welcome! It's time to set up {{get-setting "title"}}.</p>
<p>Welcome! It’s time to set up {{get-setting "title"}}.</p>
{{/if}}
</div>

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

@ -1389,6 +1389,15 @@ Onboarding checklist */
border: 1px solid var(--lightgrey);
}
.gh-onboarding-ghost-logo-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: hsl(216deg 11% 70% / 1%);
}
/* ---------------------------------
Onboarding checklist: Share publication modal */

10
ghost/admin/app/styles/layouts/dashboard.css
View file

@ -2778,10 +2778,20 @@ Onboarding checklist */
}
.gh-onboarding-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 40px;
}
.gh-onboarding-ghost-logo-wrapper {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 24px;
}
.gh-onboarding-header h2 {
justify-content: center;
}