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 callout card

Browse Source 
Refs https://github.com/TryGhost/Team/issues/1206

- Replaced background and swatch colors to semi-transparent so that it works with light and dark mode
- Updated emoji-picker dark mode
- Removed text contrast adjustment for accent background
This commit is contained in:
Sanne de Vries 2021-11-16 18:32:22 +01:00
parent 5696ee53fc
commit 8f6b1aa61a
2 changed files with 35 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
ghost/admin/app/styles/app-dark.css
View File

@ -735,77 +735,8 @@ input:focus,
border-color: var(--green) !important;
}
.kg-card-callout-grey {
background: #25292c;
}
.kg-card-callout-white {
background: var(--dark-main-bg-color);
box-shadow: inset 0 0 0 1px color-mod(var(--lightgrey) l(+5%));
}
.kg-card-callout-blue {
background: #0c2637;
}
.kg-card-callout-green {
background: #0d2b11;
}
.kg-card-callout-yellow {
background: #342c13;
}
.kg-card-callout-red {
background: #3a1818;
}
.kg-card-callout-pink {
background: #35132b;
}
.kg-card-callout-purple {
background: #261a3d;
}
.kg-callout-palette-swatch-grey {
background: color-mod(#25292c l(+5%));
box-shadow: inset 0 0 0 1px color-mod(#25292c l(+16%));
}
.kg-callout-palette-swatch-white {
background: var(--dark-main-bg-color);
border: 1px solid color-mod(var(--lightgrey) l(+15%));
}
.kg-callout-palette-swatch-blue {
background: color-mod(#0c2637 l(+5%));
box-shadow: inset 0 0 0 1px color-mod(#0c2637 l(+16%));
}
.kg-callout-palette-swatch-green {
background: color-mod(#0d2b11 l(+5%));
box-shadow: inset 0 0 0 1px color-mod(#0d2b11 l(+16%));
}
.kg-callout-palette-swatch-yellow {
background: color-mod(#342c13 l(+5%));
box-shadow: inset 0 0 0 1px color-mod(#342c13 l(+16%));
}
.kg-callout-palette-swatch-red {
background: color-mod(#3a1818 l(+5%));
box-shadow: inset 0 0 0 1px color-mod(#3a1818 l(+16%));
}
.kg-callout-palette-swatch-pink {
background: color-mod(#35132b l(+5%));
box-shadow: inset 0 0 0 1px color-mod(#35132b l(+16%));
}
.kg-callout-palette-swatch-purple {
background: color-mod(#261a3d l(+5%));
box-shadow: inset 0 0 0 1px color-mod(#261a3d l(+16%));
.emoji-picker__emoji:hover {
background: var(--lightgrey) !important;
}
/* Editor */

59
ghost/admin/app/styles/components/koenig.css
View File

@ -1351,36 +1351,36 @@
}
.kg-card-callout-grey {
background: #eef0f2;
background: rgba(124, 139, 154, 0.13);
}
.kg-card-callout-white {
background: #fff;
box-shadow: inset 0 0 0 1px #dddedf;
background: transparent;
box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
}
.kg-card-callout-blue {
background: #E9F6FB;
background: rgba(33, 172, 232, 0.12);
}
.kg-card-callout-green {
background: #E8F8EA;
background: rgba(52, 183, 67, 0.12);
}
.kg-card-callout-yellow {
background: #FCF4E3;
background: rgba(240, 165, 15, 0.13);
}
.kg-card-callout-red {
background: #FBE9E9;
background: rgba(209, 46, 46, 0.11);
}
.kg-card-callout-pink {
background: #FCEEF8;
background: rgba(225, 71, 174, 0.11);
}
.kg-card-callout-purple {
background: #F2EDFC;
background: rgba(135, 85, 236, 0.12);
}
.kg-card-callout-accent {
@ -1388,7 +1388,7 @@
}
.kg-card-callout-accent p {
color: var(--text-color-for-adjusted-accent-background);
color: var(--white);
}
.kg-callout-emoji {
@ -1437,43 +1437,43 @@
}
.kg-callout-palette-swatch-grey {
background: color-mod(#eef0f2 l(-7%));
box-shadow: inset 0 0 0 1px color-mod(#eef0f2 l(-16%));
background: rgba(124, 139, 154, 0.25);
box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.3);
}
.kg-callout-palette-swatch-white {
background: #fff;
border: 1px solid #CED4D9;
background: transparent;
border: 1px solid rgba(124, 139, 154, 0.45);
}
.kg-callout-palette-swatch-blue {
background: color-mod(#E9F6FB l(-7%));
box-shadow: inset 0 0 0 1px color-mod(#E9F6FB l(-16%));
background: rgba(33, 172, 232, 0.25);
box-shadow: inset 0 0 0 1px rgba(33, 172, 232, 0.3);
}
.kg-callout-palette-swatch-green {
background: color-mod(#E8F8EA l(-7%));
box-shadow: inset 0 0 0 1px color-mod(#E8F8EA l(-16%));
background: rgba(52, 183, 67, 0.25);
box-shadow: inset 0 0 0 1px rgba(52, 183, 67, 0.3);
}
.kg-callout-palette-swatch-yellow {
background: color-mod(#FCF4E3 l(-7%));
box-shadow: inset 0 0 0 1px color-mod(#FCF4E3 l(-16%));
background: rgba(240, 165, 15, 0.25);
box-shadow: inset 0 0 0 1px rgba(240, 165, 15, 0.3);
}
.kg-callout-palette-swatch-red {
background: color-mod(#FBE9E9 l(-7%));
box-shadow: inset 0 0 0 1px color-mod(#FBE9E9 l(-16%));
background: rgba(209, 46, 46, 0.25);
box-shadow: inset 0 0 0 1px rgba(209, 46, 46, 0.3);
}
.kg-callout-palette-swatch-pink {
background: color-mod(#FCEEF8 l(-7%));
box-shadow: inset 0 0 0 1px color-mod(#FCEEF8 l(-16%));
background: rgba(225, 71, 174, 0.25);
box-shadow: inset 0 0 0 1px rgba(225, 71, 174, 0.3);
}
.kg-callout-palette-swatch-purple {
background: color-mod(#F2EDFC l(-7%));
box-shadow: inset 0 0 0 1px color-mod(#F2EDFC l(-16%));
background: rgba(135, 85, 236, 0.25);
box-shadow: inset 0 0 0 1px rgba(135, 85, 236, 0.3);
}
.kg-callout-palette-swatch-accent {
@ -1485,6 +1485,7 @@
}
.emoji-picker {
background: var(--white) !important;
border: 0 !important;
font-family: var(--font-family) !important;
box-shadow:
@ -1535,6 +1536,12 @@ button.emoji-picker__category-button.active {
padding: 0 8px !important;
}
.emoji-picker__emoji:hover,
.emoji-picker__emoji:focus {
background: var(--whitegrey) !important;
border-radius: var(--border-radius) !important;
}
.emoji-picker__category-name {
margin: .8rem 0 1rem !important;
color: var(--darkgrey) !important;