TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-27 10:42:45 +03:00
Code Issues Projects Releases Wiki Activity

remove hardcoded values from Portal (#15661)

Browse Source 
Portal currently has a Globals.js file that spells out all the colors in use in Portal, which should make it easy to customize the portal colors to match the chosen theme. There are a bunch of hardcoded values and this PR deals with those. The final outcome of these changes is absolutely invisible.

Co-authored-by: Peter Zimon <zimo@ghost.org>
This commit is contained in:
Cathy Sarisky 2023-01-24 07:23:11 -05:00 committed by GitHub
parent 48e9393159
commit 9db27cfd50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ghost/portal/src/components/Frame.styles.js
View File

@ -103,7 +103,7 @@ const FrameStyles = `
bottom: 0;
margin: 0 0 -32px;
padding: 32px 0 32px;
background: linear-gradient(0deg, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%);
background: linear-gradient(0deg, rgba(var(--whitergb),1) 75%, rgba(var(--whitergb),0) 100%);
}
.gh-portal-btn-container.sticky.m28 {
@ -255,7 +255,7 @@ const FrameStyles = `
bottom: 0;
left: 0;
animation: fadein 0.2s;
background: linear-gradient(315deg , rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
background: linear-gradient(315deg , rgba(var(--blackrgb),0.2) 0%, rgba(var(--blackrgb),0.1) 100%);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
-webkit-transform: translate3d(0, 0, 0);
@ -317,7 +317,7 @@ const FrameStyles = `
padding: 32px;
transform: translateY(0px);
border-radius: 10px;
box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1);
box-shadow: 0 3.8px 2.2px rgba(var(--blackrgb), 0.028), 0 9.2px 5.3px rgba(var(--blackrgb), 0.04), 0 17.3px 10px rgba(var(--blackrgb), 0.05), 0 30.8px 17.9px rgba(var(--blackrgb), 0.06), 0 57.7px 33.4px rgba(var(--blackrgb), 0.072), 0 138px 80px rgba(var(--blackrgb), 0.1);
animation: popup 0.25s ease-in-out;
z-index: 9999;
}
@ -842,13 +842,13 @@ const MobileStyles = `
@media (min-width: 520px) {
.gh-portal-popup-wrapper.full-size .gh-portal-popup-container.preview {
box-shadow:
0 0 0 1px rgba(0,0,0,0.02),
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
0 0 0 1px rgba(var(--blackrgb),0.02),
0 2.8px 2.2px rgba(var(--blackrgb), 0.02),
0 6.7px 5.3px rgba(var(--blackrgb), 0.028),
0 12.5px 10px rgba(var(--blackrgb), 0.035),
0 22.3px 17.9px rgba(var(--blackrgb), 0.042),
0 41.8px 33.4px rgba(var(--blackrgb), 0.05),
0 100px 80px rgba(var(--blackrgb), 0.07);
animation: none;
margin: 32px;
padding: 32px 32px 0;
@ -1001,7 +1001,7 @@ const MultipleProductsGlobalStyles = `
/* Multiple product signup/signin-only modifications! */
.gh-portal-popup-wrapper.multiple-products {
background: #fff;
box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1);
box-shadow: 0 3.8px 2.2px rgba(var(--blackrgb), 0.028), 0 9.2px 5.3px rgba(var(--blackrgb), 0.04), 0 17.3px 10px rgba(var(--blackrgb), 0.05), 0 30.8px 17.9px rgba(var(--blackrgb), 0.06), 0 57.7px 33.4px rgba(var(--blackrgb), 0.072), 0 138px 80px rgba(var(--blackrgb), 0.1);
padding: 0;
border-radius: 5px;
height: calc(100vh - 64px);

4
ghost/portal/src/components/Global.styles.js
View File

@ -3,8 +3,10 @@ export const GlobalStyles = `
/* ----------------------------------------------------- */
:root {
--black: #000;
--blackrgb: 0,0,0;
--grey0: #1d1d1d;
--grey1: #333;
--grey1rgb: 33, 33, 33;
--grey2: #3d3d3d;
--grey3: #474747;
--grey4: #515151;
@ -17,8 +19,10 @@ export const GlobalStyles = `
--grey11: #e1e1e1;
--grey12: #eaeaea;
--grey13: #f9f9f9;
--grey13rgb: 249,249,249;
--grey14: #fbfbfb;
--white: #fff;
--whitergb: 255,255,255;
--red: #f02525;
--darkerRed: #C50202;
--yellow: #FFDC15;

6
ghost/portal/src/components/Notification.styles.js
View File

@ -20,11 +20,11 @@ const NotificationStyles = `
min-height: 66px;
font-size: 1.3rem;
letter-spacing: 0.2px;
background: rgba(33,33,33,0.95);
background: rgba(var(--grey1rgb),0.95);
backdrop-filter: blur(8px);
color: var(--white);
border-radius: 7px;
box-shadow: 0 3.2px 3.6px rgba(0, 0, 0, 0.024), 0 8.8px 10px -5px rgba(0, 0, 0, 0.08);
box-shadow: 0 3.2px 3.6px rgba(var(--black), 0.024), 0 8.8px 10px -5px rgba(var(--black), 0.08);
animation: notification-slidein 0.55s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
@ -74,7 +74,7 @@ const NotificationStyles = `
}
.gh-portal-notification-icon.error {
color: #FF2828;
color: var(--red);
}
.gh-portal-notification-closeicon {

8
ghost/portal/src/components/TriggerButton.styles.js
View File

@ -40,12 +40,12 @@ const TriggerButtonStyles = `
bottom: 0;
left: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0);
background: rgba(var(--whitergb), 0);
transition: background 0.3s ease;
}
.gh-portal-triggerbtn-container:hover:before {
background: rgba(255, 255, 255, 0.08);
background: rgba(var(--whitergb), 0.08);
}
.gh-portal-triggerbtn-container.halo:before {
@ -53,7 +53,7 @@ const TriggerButtonStyles = `
right: -4px;
bottom: -4px;
left: -4px;
border: 4px solid rgba(255, 255, 255, 0.15);
border: 4px solid rgba(var(--whitergb), 0.15);
}
.gh-portal-triggerbtn-container.with-label {
@ -62,7 +62,7 @@ const TriggerButtonStyles = `
.gh-portal-triggerbtn-label {
padding: 8px;
color: rgb(255, 255, 255);
color: var(--white);
display: block;
white-space: nowrap;
max-width: 380px;

4
ghost/portal/src/components/common/ActionButton.js
View File

@ -47,12 +47,12 @@ export const ActionButtonStyles = `
.gh-portal-loadingicon path,
.gh-portal-loadingicon rect {
fill: #fff;
fill: var(--white);
}
.gh-portal-loadingicon.dark path,
.gh-portal-loadingicon.dark rect {
fill: #1d1d1d;
fill: var(--grey0);
}
`;

10
ghost/portal/src/components/common/PopupNotification.js
View File

@ -17,10 +17,10 @@ export const PopupNotificationStyles = `
z-index: 11000;
border-radius: 5px;
font-size: 1.5rem;
box-shadow: 0px 0.8151839971542358px 0.8151839971542358px 0px rgba(0,0,0,0.01),
0px 2.2538793087005615px 2.2538793087005615px 0px rgba(0,0,0,0.02),
0px 5.426473140716553px 5.426473140716553px 0px rgba(0,0,0,0.03),
0px 18px 18px 0px rgba(0,0,0,0.04);
box-shadow: 0px 0.8151839971542358px 0.8151839971542358px 0px rgba(var(--blackrgb),0.01),
0px 2.2538793087005615px 2.2538793087005615px 0px rgba(var(--blackrgb),0.02),
0px 5.426473140716553px 5.426473140716553px 0px rgba(var(--blackrgb),0.03),
0px 18px 18px 0px rgba(var(--blackrgb),0.04);
animation: popupnotification-slidein 0.3s ease-in-out;
}
@ -55,7 +55,7 @@ export const PopupNotificationStyles = `
}
.gh-portal-popupnotification-icon.error {
color: #FF2828;
color: var(--red);
}
.gh-portal-popupnotification .closeicon {

14
ghost/portal/src/components/common/ProductsSection.js
View File

@ -34,8 +34,8 @@ export const ProductsSectionStyles = ({site}) => {
top: 4px;
bottom: 4px;
right: 4px;
background: #fff;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);
background: var(--white);
box-shadow: 0px 1px 3px rgba(var(--blackrgb), 0.08);
border-radius: 999px;
transition: all 0.15s ease-in-out;
}
@ -59,8 +59,6 @@ export const ProductsSectionStyles = ({site}) => {
height: 100%;
width: 50%;
color: var(--grey0);
/*background: white;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);*/
}
.gh-portal-priceoption-label {
@ -99,7 +97,7 @@ export const ProductsSectionStyles = ({site}) => {
flex-direction: column;
align-items: flex-start;
justify-content: stretch;
background: white;
background: var(--white);
padding: 32px;
border-radius: 7px;
border: 1px solid var(--grey11);
@ -344,13 +342,13 @@ export const ProductsSectionStyles = ({site}) => {
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);
background: linear-gradient(0deg, rgba(var(--whitergb),1) 60%, rgba(var(--whitergb),0) 100%);
z-index: 800;
}
.gh-portal-btn-product .gh-portal-btn {
background: var(--brandcolor);
color: #fff;
color: var(--white);
border: none;
width: 100%;
z-index: 900;
@ -375,7 +373,7 @@ export const ProductsSectionStyles = ({site}) => {
line-height: 1em;
letter-spacing: 0.2px;
font-weight: 500;
background: #f0f0f0;
background: var(--grey14);
z-index: 900;
}

4
ghost/portal/src/components/common/Switch.js
View File

@ -30,7 +30,7 @@ export const SwitchStyles = `
left: 0;
right: 0;
bottom: 0;
background: #e9e9e9;
background: var(--grey12);
transition: .3s;
width: 44px !important;
height: 26px !important;
@ -51,7 +51,7 @@ export const SwitchStyles = `
left: 3px !important;
height: 20px !important;
width: 20px !important;
background-color: white;
background-color: var(--white);
transition: .3s;
border-radius: 999px;
}