Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Added CSS variable colors

Browse source
This commit is contained in:
Peter Zimon 2020-07-24 11:06:56 +02:00
parent 5484d5e2d8
commit e8ea5fef83
8 changed files with 52 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
ghost/portal/src/components/Frame.styles.js
View file

@ -14,6 +14,28 @@ import {MagicLinkStyles} from './pages/MagicLinkPage';
// Global styles
export const GlobalStyles = `
/* Colors
/* ----------------------------------------------------- */
:root {
--black: #000;
--grey0: #1d1d1d;
--grey1: #333;
--grey2: #3d3d3d;
--grey3: #474747;
--grey4: #515151;
--grey5: #686868;
--grey6: #7f7f7f;
--grey7: #979797;
--grey8: #aeaeae;
--grey9: #c5c5c5;
--grey10: #dcdcdc;
--grey11: #e1e1e1;
--grey12: #eaeaea;
--grey13: #f8f8f8;
--white: #fff;
}
/* Globals
/* ----------------------------------------------------- */
@ -57,11 +79,11 @@ export const GlobalStyles = `
}
.gh-portal-main-title {
color: #333;
color: var(--grey1);
}
.gh-portal-text-disabled {
color: #484848;
color: var(--grey3);
opacity: 0.35;
font-weight: normal;
}
@ -74,13 +96,13 @@ export const GlobalStyles = `
font-size: 1.3rem;
margin-bottom: 2px;
font-weight: 500;
color: #333;
color: var(--grey1);
letter-spacing: 0.35px;
}
.gh-portal-setting-data {
font-size: 1.3rem;
color: #7f7f7f;
color: var(--grey6);
line-height: 1.15em;
}
@ -106,9 +128,9 @@ export const GlobalStyles = `
transition: .4s ease;
box-shadow: none;
user-select: none;
background: #fff;
background: var(--white);
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px -3px rgba(0,0,0,0.19);
color: #212121;
color: var(--grey0);
}
.gh-portal-btn:hover {
@ -149,7 +171,7 @@ export const GlobalStyles = `
.gh-portal-popup-background {
position: absolute;
display: block;
content: "aaa";
content: "";
top: 0;
right: 0;
bottom: 0;
@ -177,7 +199,7 @@ export const GlobalStyles = `
padding: 32px;
text-align: left;
box-sizing: border-box;
background: #fff;
background: var(--white);
width: 440px;
border-radius: 5px;
margin: 0 auto;
@ -207,7 +229,7 @@ export const GlobalStyles = `
.gh-portal-closeicon {
width: 16px;
height: 16px;
color: #c5c5c5;
color: var(--grey9);
cursor: pointer;
padding: 12px;
}
@ -260,7 +282,7 @@ export const GlobalStyles = `
/* Buttons
/* ----------------------------------------------------- */
.gh-portal-list {
background: #fff;
background: var(--white);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);
border-radius: 3px;
padding: 20px;
@ -271,7 +293,7 @@ export const GlobalStyles = `
align-items: center;
margin: 0 -20px 20px;
padding: 0 20px 20px;
border-bottom: 1px solid #eaeaea;
border-bottom: 1px solid var(--grey12);
}
.gh-portal-list section:last-of-type {
@ -295,7 +317,7 @@ export const GlobalStyles = `
line-height: 1.15em;
padding: 0;
margin: 2px 0 0;
color: #7f7f7f;
color: var(--grey6);
}
.gh-portal-btn-list {

4
ghost/portal/src/components/common/InputField.js
View file

@ -8,7 +8,7 @@ export const InputFieldStyles = `
height: 40px;
outline: none;
color: inherit;
background: #fff;
background: var(--white);
border: none;
border-radius: 3px;
font-size: 1.5rem;
@ -29,7 +29,7 @@ export const InputFieldStyles = `
}
.gh-portal-input::placeholder {
color: #929292;
color: var(--grey7);
}
`;

2
ghost/portal/src/components/common/MemberGravatar.js
View file

@ -33,7 +33,7 @@ const Styles = ({style = {}}) => {
height: '56px',
color: '#fff',
...(style.userIcon || {}) // Override any custom style
},
}
};
};

12
ghost/portal/src/components/common/PlansSection.js
View file

@ -4,7 +4,7 @@ export const PlanSectionStyles = `
.gh-portal-plans-container {
display: flex;
align-items: stretch;
border: 1px solid #ddd;
border: 1px solid var(--grey10);
border-radius: 5px;
}
@ -15,7 +15,7 @@ export const PlanSectionStyles = `
position: relative;
padding: 16px;
flex: 1;
border-right: 1px solid #ddd;
border-right: 1px solid var(--grey10);
font-size: 1.4rem;
line-height: 1.35em;
cursor: pointer;
@ -75,7 +75,7 @@ export const PlanSectionStyles = `
}
.gh-portal-plan-type {
color: #999;
color: var(--grey7);
}
.gh-portal-plan-feature {
@ -84,7 +84,7 @@ export const PlanSectionStyles = `
text-align: center;
font-size: 1.25rem;
line-height: 1.25em;
border-top: 1px solid #eaeaea;
border-top: 1px solid var(--grey12);
width: 100%;
letter-spacing: 0.2px;
font-weight: 500;
@ -116,7 +116,7 @@ export const PlanSectionStyles = `
left: -9px;
height: 18px;
width: 18px;
background-color: #eee;
background-color: var(--grey12);
border-radius: 999px;
}
@ -139,7 +139,7 @@ export const PlanSectionStyles = `
top: 3px;
width: 3px;
height: 9px;
border: solid white;
border: solid var(--white);
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);

8
ghost/portal/src/components/common/Switch.js
View file

@ -13,7 +13,7 @@ export const SwitchStyles = `
.gh-portal-for-switch label p,
.gh-portal-for-switch .container p {
overflow: auto;
color: #15171A;
color: var(--grey0);
font-weight: normal;
}
@ -30,8 +30,8 @@ export const SwitchStyles = `
left: 0;
right: 0;
bottom: 0;
background: #f8f8f8;
border: 1px solid #e0e0e0;
background: var(--grey13);
border: 1px solid var(--grey11);
transition: .3s;
width: 36px !important;
height: 22px !important;
@ -41,7 +41,7 @@ export const SwitchStyles = `
.gh-portal-for-switch label:hover input:not(:checked) + .input-toggle-component,
.gh-portal-for-switch .container:hover input:not(:checked) + .input-toggle-component {
border-color: #ccc;
border-color: var(--grey9);
}
.gh-portal-for-switch .input-toggle-component:before {

2
ghost/portal/src/components/pages/AccountHomePage.js
View file

@ -7,7 +7,7 @@ const React = require('react');
export const AccountHomePageStyles = `
.gh-portal-account-main {
background: #f8f8f8;
background: var(--grey13);
margin: -32px -32px 0;
padding: 32px;
border-bottom: 1px solid #eaeaea;

2
ghost/portal/src/components/pages/AccountPlanPage.js
View file

@ -37,7 +37,7 @@ export default class AccountPlanPage extends React.Component {
renderHeader() {
return (
<header className='gh-portal-detail-header'>
<h3 className='gh-portal-maiin-title'>Choose plan</h3>
<h3 className='gh-portal-main-title'>Choose plan</h3>
</header>
);
}

6
ghost/portal/src/components/pages/SignupPage.js
View file

@ -23,7 +23,7 @@ export const SignupPageStyles = `
align-items: center;
padding: 0 32px 32px;
margin: 0 -32px 18px;
border-bottom: 1px solid #eaeaea;
border-bottom: 1px solid var(--grey12);
}
.gh-portal-signin-header {
@ -32,7 +32,7 @@ export const SignupPageStyles = `
align-items: center;
padding: 0 32px 32px;
margin: 0 -32px 32px;
border-bottom: 1px solid #eaeaea;
border-bottom: 1px solid var(--grey12);
}
.gh-portal-signup-header.nodivider {
@ -45,7 +45,7 @@ export const SignupPageStyles = `
justify-content: center;
font-size: 1.3rem;
margin-top: 8px;
color: #515151;
color: var(--grey4);
letter-spacing: 0.2px;
}