TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Updated colors

Browse Source
This commit is contained in:
Peter Zimon 2021-02-04 18:19:39 +01:00
parent 8e702e420e
commit 5fbd01a237
12 changed files with 84 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/gh-member-activity-feed.hbs
View File

@ -4,7 +4,7 @@
<h4 class="midlightgrey f-small fw5 ttu">Member activity</h4>
</div>
<div class="flex-auto br4 shadow-1 bg-grouped-table mt2 flex flex-column justify-between items-stretch">
<div class="flex-auto bg-grouped-table gh-content-box mt2 flex flex-column justify-between items-stretch">
<div class="pt5 pb5">
{{#if this.activities}}
{{#each this.firstActivities as |activity|}}

2
ghost/admin/app/components/gh-member-avatar.js
View File

@ -20,7 +20,7 @@ export default class GhMemberAvatarComponent extends Component {
}
get backgroundStyle() {
let color = stringToHslColor(this.memberName, 55, 55);
let color = stringToHslColor(this.memberName, 75, 55);
return htmlSafe(`background-color: ${color}`);
}

8
ghost/admin/app/components/gh-member-settings-form.hbs
View File

@ -1,5 +1,5 @@
<div class="mt2 pb2 gh-member-settings" ...attributes>
<div class="flex-auto br4 shadow-1 bg-grouped-table mt2 flex flex-column justify-between items-stretch gh-member-details">
<div class="flex-auto bg-grouped-table gh-content-box mt2 flex flex-column justify-between items-stretch gh-member-details">
<div>
<div class="flex items-center pa5 pb3">
{{#if (or this.member.name this.member.email)}}
@ -95,7 +95,7 @@
</div>
</div>
<div class="flex-auto br4 shadow-1 bg-grouped-table mt2 flex flex-column items-stretch gh-member-internal-info">
<div class="flex-auto bg-grouped-table gh-content-box grey mt2 flex flex-column items-stretch gh-member-internal-info">
<div class="pa5">
<GhFormGroup @classNames="gh-member-labels">
<label for="label-input">Labels</label>
@ -117,13 +117,13 @@
<h4 class="midlightgrey f-small fw5 ttu mt8 gh-member-label-stripe">Stripe info</h4>
{{#if this.isLoading}}
<div class="pa20 br4 shadow-1 bg-grouped-table mt2">
<div class="pa20 bg-grouped-table gh-content-box grey mt2">
<div class="flex justify-center flex-auto">
<div class="gh-loading-spinner"> </div>
</div>
</div>
{{else}}
<div class="br4 shadow-1 bg-grouped-table mt2">
<div class="bg-grouped-table gh-content-box grey mt2">
{{#if this.subscriptions}}
<div class="gh-member-header-stripeinfo">
<div class="flex items-center justify-between gh-btn-group w-100 ma5 mb0">

6
ghost/admin/app/styles/components/dropdowns.css
View File

@ -24,8 +24,8 @@
min-width: 200px;
background-color: #fff;
background-clip: padding-box;
border-radius: 5px;
box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 7px 20px -5px rgba(0,0,0,.15);
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 20px -3px rgba(0,0,0,.2);
list-style: none;
text-align: left;
text-transform: none;
@ -56,7 +56,7 @@
clear: both;
padding: 6px 14px;
width: 100%;
color: var(--middarkgrey);
color: var(--darkgrey);
text-align: left;
white-space: nowrap;
font-size: 1.3rem;

12
ghost/admin/app/styles/components/power-select.css
View File

@ -195,12 +195,12 @@
.ember-power-select-multiple-option {
margin: 2px;
padding: 2px 6px;
border: 1px solid #3fb0ef;
border: 1px solid var(--black);
border-radius: 3px;
font-size: 0.93em;
font-weight: 500;
color: white;
background: #3fb0ef;
background: var(--black);
}
.ember-power-select-multiple-remove-btn {
@ -247,13 +247,13 @@
/* Tag input */
.tag-token--internal {
background: color-mod(var(--blue) alpha(0.1));
color: var(--blue);
background: color-mod(var(--green) alpha(0.1));
color: var(--green);
}
.tag-token--internal svg path {
stroke: var(--blue);
fill: var(--blue);
stroke: var(--green);
fill: var(--green);
}
/* Inside settings / Mailgun region */

15
ghost/admin/app/styles/layouts/content.css
View File

@ -67,21 +67,11 @@
background: var(--whitegrey);
}
.gh-contentfilter-type .gh-contentfilter-menu-trigger {
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
}
.gh-contentfilter-menu:last-of-type .gh-contentfilter-menu-trigger {
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
}
.gh-contentfilter-selected .gh-contentfilter-menu-trigger,
.gh-contentfilter-selected .gh-contentfilter-menu-trigger:hover {
color: var(--black);
color: var(--green);
font-weight: 600;
background: var(--whitegrey);
background: var(--whitegrey-l1);
}
.gh-contentfilter-menu-trigger svg path {
@ -135,6 +125,7 @@
display: flex;
height: 33px;
line-height: 33px;
background: color-mod(var(--whitegrey-l1) l(-3%));
}

18
ghost/admin/app/styles/layouts/main.css
View File

@ -48,6 +48,14 @@
background: var(--white);
}
.gh-main-grey {
background: var(--whitegrey-l2);
}
.gh-main-grey-gradient {
background: linear-gradient(315deg,var(--whitegrey-l2),var(--white));
}
/* Flexbox fix. https://github.com/TryGhost/Ghost/issues/5804#issuecomment-141416812 */
.gh-main > section {
width: 100%;
@ -909,6 +917,15 @@
border-color: transparent;
}
.gh-main-grey .gh-canvas-header {
background: var(--whitegrey-l2);
}
.gh-main-grey-gradient .gh-canvas-header {
background: transparent;
position: relative;
}
.gh-canvas-header-content {
height: calc(var(--main-vertical-panel-height) - 1px);
position: relative;
@ -1065,6 +1082,7 @@
.view-actions .gh-btn {
border: none;
box-shadow: none;
background: color-mod(var(--whitegrey-l1) l(-3%));
}
.view-actions .gh-btn:hover {

2
ghost/admin/app/styles/layouts/members.css
View File

@ -169,7 +169,7 @@ p.gh-members-list-email {
}
.gh-members-chart-header {
padding: 12px 16px;
padding: 12px 7px 12px 12px;
margin-bottom: 10px;
border-bottom: var(--darkgrey) 1px solid;
}

38
ghost/admin/app/styles/patterns/buttons.css
View File

@ -65,6 +65,23 @@ fieldset[disabled] .gh-btn {
vertical-align: middle;
}
/* Primary button
/* ---------------------------------------------------------- */
.gh-btn-primary,
.gh-btn-black {
background: var(--black) !important;
border: none;
color: var(--white) !important;
font-weight: 600;
box-shadow: none;
}
.gh-btn-primary:hover,
.gh-btn-black:hover {
background: color-mod(var(--black) l(-20%)) !important;
}
/* Button highlights
/* ---------------------------------------------------------- */
@ -111,22 +128,6 @@ fieldset[disabled] .gh-btn {
box-shadow: none;
}
/* Primary button
/* ---------------------------------------------------------- */
.gh-btn-primary,
.gh-btn-black {
background: var(--black) !important;
border: none;
color: var(--white);
font-weight: 600;
box-shadow: none;
}
.gh-btn-primary:hover,
.gh-btn-black:hover {
background: color-mod(var(--black) l(-20%));
}
/* Blue button
/* ---------------------------------------------------------- */
@ -447,7 +448,7 @@ Usage: CTA buttons grouped together horizontally.
border: none;
background: none;
margin: 0;
background: none;
background: transparent !important;
box-shadow: none;
margin: 2px;
border-radius: 2px;
@ -458,6 +459,7 @@ Usage: CTA buttons grouped together horizontally.
height: 31px;
line-height: 31px;
border-radius: 2px;
background: transparent !important;
}
.gh-btn-group .gh-btn-group-selected span {
@ -465,7 +467,7 @@ Usage: CTA buttons grouped together horizontally.
font-weight: 600;
padding-left: 12px;
padding-right: 12px;
background: var(--white);
background: var(--white) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

8
ghost/admin/app/styles/patterns/forms.css
View File

@ -36,12 +36,12 @@ input {
}
::-webkit-input-placeholder {
color: color-mod(var(--midgrey) l(+18%));
color: var(--midlightgrey);
font-weight: 400;
}
:-ms-input-placeholder {
color: color-mod(var(--midgrey) l(+18%));
color: var(--midlightgrey);
font-weight: 400;
}
@ -176,8 +176,8 @@ select.error {
.gh-input:focus,
.gh-input.focus {
outline: 0;
border-color: color-mod(var(--blue));
box-shadow: inset 0 0 0 1px var(--blue);
border-color: color-mod(var(--green));
box-shadow: inset 0 0 0 1px var(--green);
background: var(--white);
}

42
ghost/admin/app/templates/member.hbs
View File

@ -21,30 +21,32 @@
{{/unless}}
{{/if}}
<GhTaskButton @class="gh-btn gh-btn-blue gh-btn-icon" @type="button" @task={{this.saveTask}} @data-test-button="save" />
<GhTaskButton @class="gh-btn gh-btn-primary gh-btn-icon" @type="button" @task={{this.saveTask}} @data-test-button="save" />
</section>
</GhCanvasHeader>
<form class="member-basic-info-form">
<GhMemberSettingsForm
@member={{this.member}}
@scratchMember={{this.scratchMember}}
@setProperty={{this.setProperty}}
@isLoading={{this.isLoading}} />
</form>
<div class="gh-main-width">
<form class="member-basic-info-form">
<GhMemberSettingsForm
@member={{this.member}}
@scratchMember={{this.scratchMember}}
@setProperty={{this.setProperty}}
@isLoading={{this.isLoading}} />
</form>
{{#unless this.member.isNew}}
<div class="w-60">
<button
type="button"
class="gh-btn gh-btn-red gh-btn-icon mt14"
{{on "click" this.toggleDeleteMemberModal}}
data-test-button="delete-member"
>
<span>Delete member</span>
</button>
</div>
{{/unless}}
{{#unless this.member.isNew}}
<div class="w-60">
<button
type="button"
class="gh-btn gh-btn-red gh-btn-icon mt14"
{{on "click" this.toggleDeleteMemberModal}}
data-test-button="delete-member"
>
<span>Delete member</span>
</button>
</div>
{{/unless}}
</div>
</section>
{{#if this.showUnsavedChangesModal}}

2
ghost/admin/app/templates/pages-loading.hbs
View File

@ -22,7 +22,7 @@
@onOrderChange={{action (mut k)}}
/>
<LinkTo @route="editor.new" @model="page" class="gh-btn gh-btn-green" data-test-new-page-button={{true}}><span>New page</span></LinkTo>
<LinkTo @route="editor.new" @model="page" class="gh-btn gh-btn-primary" data-test-new-page-button={{true}}><span>New page</span></LinkTo>
</section>
</header>
</div>