Ghost/ghost/admin/app/templates/application.hbs
Kevin Ansfield 7286ae9fcf 🐛 Fixed link contrast in editor with very light/dark accent colors (#1870)
refs https://github.com/TryGhost/Team/issues/551
refs https://github.com/TryGhost/Ghost/issues/12767#issuecomment-800177254

- calculate contrast color of accent color against light/dark mode background color
- lighten (dark mode) or darken (light mode) the accent color used in the editor to ensure it has enough contrast to be legible
2021-03-18 16:46:38 +00:00

49 lines
1.3 KiB
Handlebars

<GhApp @showSettingsMenu={{this.ui.showSettingsMenu}}>
<GhSkipLink @anchor=".gh-main">Skip to main content</GhSkipLink>
<GhAlerts />
<div class="gh-viewport {{if this.ui.showSettingsMenu 'settings-menu-expanded'}} {{if this.ui.showMobileMenu 'mobile-menu-expanded'}}">
{{#if this.showNavMenu}}
<GhNavMenu />
{{/if}}
<main class="gh-main {{this.ui.mainClass}}" role="main">
{{outlet}}
{{#if this.showBilling}}
<GhBillingModal @billingWindowOpen={{this.billing.billingWindowOpen}} />
{{/if}}
</main>
<GhNotifications />
<GhContentCover />
<GhMobileNavBar />
<GhWhatsNew />
</div>{{!gh-viewport}}
{{#if this.customViews.showFormModal}}
<GhFullscreenModal
@modal="custom-view-form"
@close={{this.customViews.toggleFormModal}}
@modifier="action narrow"
/>
{{/if}}
{{#if this.settings.accentColor}}
<style>
.koenig-editor__editor a:not([class]) {
color: {{this.adjustedAccentColor}};
}
.koenig-editor__editor blockquote {
border-left: 0.25rem solid {{this.adjustedAccentColor}};
}
</style>
{{/if}}
</GhApp>
<EmberLoadRemover />