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

Updated code injection styles

This commit is contained in:
Peter Zimon 2021-02-10 11:54:27 +01:00
parent d13505ea7a
commit c9c62007db
7 changed files with 33 additions and 40 deletions

View file

@ -412,10 +412,6 @@
color: #f04600;
}
.gh-settings-zapier-templates {
margin-top: -25px;
}
.gh-settings-zapier-templates .apps-card-app-title {
margin-left: 8px;
white-space: unset;

View file

@ -960,7 +960,7 @@
.gh-main-section.bb { border-bottom: 1px solid var(--whitegrey); }
.gh-main-section-header {
font-size: 1.9rem;
font-size: 1.7rem;
font-weight: 600;
text-transform: none;
letter-spacing: unset;
@ -982,26 +982,27 @@
border: none;
}
.gh-main-section .header-description,
.gh-main-section-block .header-description {
font-size: 1.2rem;
font-weight: 400;
.gh-main-section-description {
color: var(--middarkgrey);
border-bottom: 1px solid var(--whitegrey);
padding: 0 0 8px;
margin: 0;
}
.gh-main-section-header + .description {
margin-top: -10px;
}
.gh-main-section-header.large + .description {
font-size: 1.3rem;
margin-top: -8px;
margin: 0;
font-weight: 400;
}
.gh-main-section-description.bn { border-bottom: none; }
.gh-main-section-header + .gh-main-section-description {
margin-top: -6px;
padding-bottom: 12px;
}
.gh-main-section-header.small + .gh-main-section-description {
font-size: 1.2rem;
margin-top: -10px;
}
.gh-main-section.columns-2 {
grid-template-columns: 1fr 1fr;
}

View file

@ -701,7 +701,7 @@
padding: 0;
min-width: 250px;
min-height: 300px;
max-width: 1130px;
max-width: 1224px;
width: calc(100vw - 360px);
height: auto;
line-height: 22px;
@ -1078,7 +1078,7 @@ p.theme-validation-details {
justify-content: space-between;
border-bottom: 1px solid var(--whitegrey);
margin: -20px -24px;
padding: 20px 24px;
padding: 16px 24px;
}
.gh-branding-settings-header h4 {

View file

@ -5,18 +5,16 @@
position: relative;
padding: 12px 10px 14px 40px;
border: 1px solid transparent;
border-left-width: 5px;
color: var(--midgrey);
color: var(--black);
line-height: 1.55em;
letter-spacing: 0.2px;
background: #fff;
background: color-mod(var(--blue) a(5%));
border-radius: 5px;
border-color: var(--whitegrey);
box-shadow: 0 6px 10px -8px rgba(0,0,0,.15)
border-color: color-mod(var(--blue) a(30%));
}
.gh-box a {
color: var(--middarkgrey);
color: var(--black);
text-decoration: underline;
}
@ -26,10 +24,6 @@
width: auto;
}
.gh-box-tip {
border-left-color: var(--blue);
}
.gh-box-tip svg:first-of-type {
top: 12px;
height: 2rem;

View file

@ -71,7 +71,7 @@
<section id="zapier-toggle" class="gh-main-section">
<h4 class="gh-main-section-header large bn">Zapier templates</h4>
<p class="header-description">Explore pre-built templates for common automation tasks</p>
<p class="gh-main-section-description">Explore pre-built templates for common automation tasks</p>
<div class="gh-setting-content gh-setting-content--no-action">
<div class="gh-setting-content-extended">
<div class="apps-grid gh-settings-zapier-templates">

View file

@ -1,14 +1,14 @@
<section class="gh-canvas">
<header class="gh-canvas-header">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="settings">Settings</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
Code injection
</h2>
<section class="view-actions">
<GhTaskButton @task={{save}} @class="gh-btn gh-btn-blue gh-btn-icon" @disabled={{true}} data-test-save-button={{true}} />
<GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
</section>
</header>
</GhCanvasHeader>
<section class="gh-content">
<GhLoadingSpinner />

View file

@ -6,7 +6,7 @@
Code injection
</h2>
<section class="view-actions">
<GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button={{true}} />
<GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
</section>
</GhCanvasHeader>
@ -25,16 +25,18 @@
Ghost allows you to inject code into the top and bottom of your theme files without editing them. This allows for quick modifications to insert useful things like tracking codes and meta tags.
</p>
<div class="br3 shadow-1 bg-grouped-table pa5 pt3 pb1">
<div class="gh-main-section">
<label for="ghost-head" class="gh-main-section-header bn">Site Header</label>
<p class="gh-main-section-description bn">Code here will be injected into the <code>\{{ghost_head}}</code> tag on every page of the site</p>
<div class="form-group settings-code">
<label for="ghost-head">Site Header</label>
<p>Code here will be injected into the <code>\{{ghost_head}}</code> tag on every page of the site</p>
<GhCmEditor @value={{this.settings.codeinjectionHead}} @id="ghost-head" @class="gh-input settings-code-editor" @name="codeInjection[ghost_head]" @type="text" @update={{action (mut this.settings.codeinjectionHead)}} />
</div>
</div>
<div class="gh-main-section">
<label for="ghost-foot" class="gh-main-section-header bn">Site Footer</label>
<p class="gh-main-section-description bn">Code here will be injected into the <code>\{{ghost_foot}}</code> tag on every page of the site</p>
<div class="form-group settings-code">
<label for="ghost-foot">Site Footer</label>
<p>Code here will be injected into the <code>\{{ghost_foot}}</code> tag on every page of the site</p>
<GhCmEditor @value={{this.settings.codeinjectionFoot}} @id="ghost-foot" @class="gh-input settings-code-editor" @name="codeInjection[ghost_foot]" @type="text" @update={{action (mut this.settings.codeinjectionFoot)}} />
</div>
</div>