TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 06:35:49 +03:00
Code Issues Projects Releases Wiki Activity

Adjusted cardmenu styling for dark mode

Browse Source 
No issue

- Changed snippet icon fill
- Changed section border color
- Deleted white corners on bookmark icon
This commit is contained in:
Sanne de Vries 2020-10-28 14:55:34 +01:00
parent 8b26a2ae7e
commit 64e1f74033
6 changed files with 52 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ghost/admin/app/styles/spirit/_koenig-dark.css
View File

@ -62,6 +62,22 @@
fill: var(--darkgrey);
}
.kg-cardmenu-card-hover svg [data-selector="bg"] {
fill: var(--lightgrey-d2);
}
.kg-cardmenu-card-hover svg [data-selector="fold"] {
fill: var(--midlightgrey-l2);
}
.kg-cardmenu-card-hover svg [data-selector="line"] {
fill: var(--darkgrey);
}
.kg-cardmenu-card-hover:hover svg [data-selector="bg"] {
fill: var(--lightgrey-d2);
}
/* Card styles */

2
ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
View File

@ -1,7 +1,7 @@
{{#each @itemSections as |section sectionIndex|}}
{{#if section.items}}
{{#if (or (not section.developerExperiment) (enable-developer-experiments))}}
<div class="flex flex-column justify-center flex-shrink-0 {{unless (eq sectionIndex 0) "mt3"}} mb2 pl4 pr4 pt3 midlightgrey ttu f-supersmall fw5 tracked-3" style="min-width: calc(100% - 3.2rem); {{unless (eq sectionIndex 0) "border-top: 1px solid #e5eff5;"}}">
<div class="flex flex-column justify-center flex-shrink-0 {{unless (eq sectionIndex 0) "mt3 bt b--lightgrey"}} mb2 pl4 pr4 pt3 midlightgrey ttu f-supersmall fw5 tracked-3" style="min-width: calc(100% - 3.2rem);">
{{section.title}}
</div>
{{#each section.items as |item|}}

26
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-bookmark.svg
View File

@ -1 +1,25 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>kg-card-type-bookmark</title><defs><rect id="b" width="272" height="499" rx="4"/><filter x="-10.3%" y="-4.6%" width="120.6%" height="111.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="5" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0" in="shadowBlurOuter1"/></filter><path id="c" d="M.99 0H19v24H.99z"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(-200 -135)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#FFF" xlink:href="#b"/></g><path d="M32 2.667C32 .889 31.111 0 29.333 0H2.667C1.93 0 1.302.26.78.781.261 1.301 0 1.931 0 2.667v26.666C0 31.111.889 32 2.667 32h26.666C31.111 32 32 31.111 32 29.333V2.667z" fill="#3EB0EF"/><path stroke-opacity=".012" stroke="#000" stroke-width="0" d="M11 0h24v24H11z"/><g transform="translate(13)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M2.998-.01v18.674c-.054.558.175.951.687 1.18.525.2.965.084 1.322-.35l2.689-2.683c.081-.081.18-.122.294-.122.116 0 .214.041.295.122l2.69 2.684c.245.274.552.417.92.428.139 0 .273-.026.401-.078.512-.23.741-.623.687-1.18V-.062l-9.985.05z" fill="#FFF" mask="url(#d)"/></g></g></svg>
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>kg-card-type-bookmark</title>
<defs>
<rect id="b" width="272" height="499" rx="4"/>
<filter x="-10.3%" y="-4.6%" width="120.6%" height="111.2%" filterUnits="objectBoundingBox" id="a">
<feOffset dy="5" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur stdDeviation="8.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0" in="shadowBlurOuter1"/>
</filter>
<path id="c" d="M.99 0H19v24H.99z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(-200 -135)">
<use fill="#000" filter="url(#a)" xlink:href="#b"/>
</g>
<path d="M32 2.667C32 .889 31.111 0 29.333 0H2.667C1.93 0 1.302.26.78.781.261 1.301 0 1.931 0 2.667v26.666C0 31.111.889 32 2.667 32h26.666C31.111 32 32 31.111 32 29.333V2.667z" fill="#3EB0EF"/>
<path stroke-opacity=".012" stroke="#000" stroke-width="0" d="M11 0h24v24H11z"/>
<g transform="translate(13)">
<mask id="d" fill="#fff">
<use xlink:href="#c"/>
</mask>
<path d="M2.998-.01v18.674c-.054.558.175.951.687 1.18.525.2.965.084 1.322-.35l2.689-2.683c.081-.081.18-.122.294-.122.116 0 .214.041.295.122l2.69 2.684c.245.274.552.417.92.428.139 0 .273-.026.401-.078.512-.23.741-.623.687-1.18V-.062l-9.985.05z" fill="#FFF" mask="url(#d)"/>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

6
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block.svg
View File

@ -1,5 +1,5 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="4.5" width="13.5" height="7.5" rx="1" fill="#3EB0EF"/>
<path data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<path data-selector="fold" d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect data-selector="block" x="5.25" y="4.5" width="13.5" height="7.5" rx="1" fill="#3EB0EF"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 330 B

After

Width:  |  Height:  |  Size: 372 B

6
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination.svg
View File

@ -1,6 +1,6 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<rect x="5.25" y="4.5" width="13.5" height="4.5" rx="1" fill="#3EB0EF"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="11.25" width="8.25" height="1.5" rx=".75" fill="#738A94"/>
<rect data-selector="block" x="5.25" y="4.5" width="13.5" height="4.5" rx="1" fill="#3EB0EF"/>
<path data-selector="fold" d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect data-selector="line" x="5.25" y="11.25" width="8.25" height="1.5" rx=".75" fill="#738A94"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 410 B

After

Width:  |  Height:  |  Size: 474 B

8
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text.svg
View File

@ -1,7 +1,7 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect x="5.25" y="4.5" width="10.5" height="1.5" rx=".75" fill="#738A94"/>
<rect x="5.25" y="8.25" width="13.5" height="1.5" rx=".75" fill="#738A94"/>
<rect x="5.25" y="12" width="7.5" height="1.5" rx=".75" fill="#738A94"/>
<path data-selector="fold" d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
<rect data-selector="line" x="5.25" y="4.5" width="10.5" height="1.5" rx=".75" fill="#738A94"/>
<rect data-selector="line" x="5.25" y="8.25" width="13.5" height="1.5" rx=".75" fill="#738A94"/>
<rect data-selector="line" x="5.25" y="12" width="7.5" height="1.5" rx=".75" fill="#738A94"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 468 B

After

Width:  |  Height:  |  Size: 552 B