Ghost/ghost/admin/app/templates/application.hbs
Kevin Ansfield 503845ce59 Fixed incorrect darkening of email-cta button on hover with some colours
refs https://github.com/TryGhost/Team/issues/928

- the background color of the button was incorrectly applied to the original accent colour rather than the adjusted accent color
- added adjustment of text color on hover too in case it went outside of a visible range
2021-07-29 15:11:17 +01:00

69 lines
2.3 KiB
Handlebars

<GhApp>
<GhSkipLink @anchor=".gh-main">Skip to main content</GhSkipLink>
<GhAlerts />
<div class="gh-viewport {{if this.ui.showMobileMenu 'mobile-menu-expanded'}}">
{{#if this.showNavMenu}}
<GhNavMenu />
{{/if}}
<main class="gh-main {{this.ui.mainClass}} {{if (and (feature "membersFiltering") (or (eq this.router.currentURL "/members") (eq this.router.currentURL "/members/import"))) "gh-main-fullwidth"}}" 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>
:root {
--accent-color: {{this.settings.accentColor}};
--adjusted-accent-color: {{this.ui.adjustedAccentColor}};
--text-color-for-adjusted-accent-background: {{this.ui.textColorForAdjustedAccentBackground}};
}
.koenig-editor__editor a:not([class]) {
color: var(--adjusted-accent-color);
}
.koenig-editor__editor blockquote {
border-left: 0.25rem solid var(--adjusted-accent-color);
}
.email-cta-button-text-input,
.gh-btn-accent {
color: var(--text-color-for-adjusted-accent-background);
background-color: var(--adjusted-accent-color)
}
.email-cta-button-text-input:hover,
.gh-btn-accent:hover {
color: {{hex-contrast this.ui.adjustedAccentColor}};
background-color: {{hex-adjust this.ui.adjustedAccentColor l=-15}}
}
.email-cta-button-text-input::placeholder {
{{!-- TODO: saturation adjustment for white/black doesn't work --}}
color: {{hex-adjust this.ui.textColorForAdjustedAccentBackground s=-15}}
}
</style>
{{/if}}
</GhApp>
<EmberLoadRemover />