Update paper stack to work with dark theme

Using translucency instead of opaque shadows
This commit is contained in:
Markus Olsson 2019-02-21 14:43:27 +01:00
parent eee535190d
commit 1140b533d9
2 changed files with 16 additions and 22 deletions

View file

@ -1,34 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="74px" height="74px" viewBox="0 0 74 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="70px" height="73px" viewBox="0 0 70 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Artboard</title>
<title>paper-stack</title>
<desc>Created with Sketch.</desc>
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-2" transform="translate(2.000000, 1.000000)">
<path d="M49.9470635,8.54447619 C45.856746,5.94312698 44.7976667,0.488984127 44.7976667,0.488984127 C44.7976667,0.488984127 43.550873,4.43098413 39.6355238,5.5595873 L40.313381,7.75190476 L45.2565238,9.05547619 L49.949381,8.54563492 L49.9470635,8.54447619 Z" id="Path" fill="#F8F9F9"></path>
<path d="M49.9470635,8.54447619 C45.856746,5.94312698 44.7976667,0.488984127 44.7976667,0.488984127 C44.7976667,0.488984127 43.550873,4.43098413 39.6355238,5.5595873 L40.313381,7.75190476 L45.2565238,9.05547619 L49.949381,8.54563492 L49.9470635,8.54447619 Z" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M35.7190159,6.68587302 C35.7190159,6.68587302 33.6043333,4.78555556 34.5904127,0.632666667 C34.5904127,0.632666667 40.807,9.56647619 49.9470635,8.54679365 C49.9470635,8.54679365 44.353873,11.8028254 35.7178571,6.68703175" id="Path" fill="#F8F9F9"></path>
<path d="M35.7190159,6.68587302 C35.7190159,6.68587302 33.6043333,4.78555556 34.5904127,0.632666667 C34.5904127,0.632666667 40.807,9.56647619 49.9470635,8.54679365 C49.9470635,8.54679365 44.353873,11.8028254 35.7178571,6.68703175 L35.7190159,6.68587302 Z" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.5328571,28.2846032 C14.0901587,27.9833333 16.9638095,31.2161905 16.9638095,31.2161905 C16.9638095,31.2161905 17.6590476,27.2765079 14.8132063,26.2104762 L9.48652381,25.5152381 L10.5316984,28.2846032 L10.5328571,28.2846032 Z" id="Path" fill="#F8F9F9"></path>
<path d="M10.5328571,28.2846032 C14.0901587,27.9833333 16.9638095,31.2161905 16.9638095,31.2161905 C16.9638095,31.2161905 17.6590476,27.2765079 14.8132063,26.2104762 L9.48652381,25.5152381 L10.5316984,28.2846032 L10.5328571,28.2846032 Z" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M0.984920635,27.6530952 C0.984920635,27.6530952 5.58160317,27.6646825 8.84922222,31.0435397 C8.84922222,31.0435397 11.2211429,25.446873 14.8132063,26.2116349 C14.8132063,26.2116349 3.29311111,20.8698889 0.984920635,27.654254" id="Path" fill="#F8F9F9"></path>
<path d="M0.984920635,27.6530952 C0.984920635,27.6530952 5.58160317,27.6646825 8.84922222,31.0435397 C8.84922222,31.0435397 11.2211429,25.446873 14.8132063,26.2116349 C14.8132063,26.2116349 3.29311111,20.8698889 0.984920635,27.654254 L0.984920635,27.6530952 Z" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M69.8656349,68.1472381 C69.8656349,70.3430317 54.8994762,72.1216825 36.439746,72.1216825 C17.9788571,72.1216825 3.01385714,70.3430317 3.01385714,68.1472381 C3.01385714,65.9514444 17.9800159,64.1727937 36.4409048,64.1727937 C54.8994762,64.1727937 69.8667937,65.9514444 69.8667937,68.1472381" id="Path" fill="#EBF2FA"></path>
<path d="M27.6530952,66.3836508 C25.0308889,66.9456349 19.5373492,69.1935714 19.5373492,69.1935714 L12.7970159,65.9468095 C12.4841587,60.577254 11.0473333,44.5334762 11.0473333,44.5334762 C11.0473333,44.5334762 21.8490159,46.9065556 26.7805714,45.096619 C26.7805714,45.096619 30.7781905,47.1545238 35.5834444,47.2170952 C35.5834444,47.2170952 34.7097619,49.4024603 34.7723333,50.2147302 C34.7723333,50.2147302 36.6448413,50.7755556 37.5810952,50.7755556 L36.9576984,44.0977937 L37.5834127,43.7223651 L36.3957143,43.4095079 C36.3957143,43.4095079 41.0155714,41.9124286 43.6377778,39.2264921 C43.6377778,39.2264921 51.1926984,38.6030952 59.9295238,34.3598254 C59.9295238,34.3598254 58.8692857,37.2937302 56.0593651,40.1013333 L60.242381,41.0399048 L58.369873,67.4450476 L51.9412381,70.1912381 C51.9412381,70.1912381 47.3225397,68.1935873 43.3260794,67.4450476 L38.1465556,70.5040952 C38.1465556,70.5040952 34.7120794,68.8193016 27.6577302,67.507619 L27.6577302,66.3836508 L27.6530952,66.3836508 Z" id="Path" fill="#F8F9F9"></path>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="paper-stack">
<path d="M44.7976667,0.488984127 C44.7976667,0.488984127 43.550873,4.43098413 39.6355238,5.5595873 C41.9368677,6.89837849 43.6558439,7.73230842 44.7924524,8.06137708 C45.9478121,8.39587456 47.6667883,8.55729384 49.949381,8.54563492 C45.856746,5.94312698 44.7976667,0.488984127 44.7976667,0.488984127 Z" id="Path" stroke="#CADEF3" fill-opacity="0.2" fill="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M35.7190159,6.68587302 C35.7190159,6.68587302 33.6043333,4.78555556 34.5904127,0.632666667 C34.5904127,0.632666667 40.807,9.56647619 49.9470635,8.54679365 C49.9470635,8.54679365 44.353873,11.8028254 35.7178571,6.68703175 L35.7190159,6.68587302 Z" id="Path" stroke="#CADEF3" fill-opacity="0.2" fill="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M16.9638095,31.2161905 C16.9638095,31.2161905 17.6590476,27.2765079 14.8132063,26.2104762 C13.8698835,26.1940425 13.1936159,26.2849448 12.7844036,26.483183 C12.2421697,26.7458619 11.491268,27.3463353 10.5316984,28.2846032 C14.0901587,27.9833333 16.9638095,31.2161905 16.9638095,31.2161905 Z" id="Path" stroke="#CADEF3" fill-opacity="0.2" fill="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M0.984920635,27.6530952 C0.984920635,27.6530952 5.58160317,27.6646825 8.84922222,31.0435397 C8.84922222,31.0435397 11.2211429,25.446873 14.8132063,26.2116349 C14.8132063,26.2116349 3.29311111,20.8698889 0.984920635,27.654254 L0.984920635,27.6530952 Z" id="Path" stroke="#CADEF3" fill-opacity="0.2" fill="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M36.439746,72.1216825 C17.9788571,72.1216825 3.01385714,70.3430317 3.01385714,68.1472381 C3.01385714,67.4374007 6.09693867,66.5224753 12.2631017,65.4024618 L12.8877594,66.2069057 C16.4049961,68.1175206 18.5849682,69.0207872 19.4276757,68.9167054 C22.6705278,68.5161847 25.1753322,67.3321889 27.3983294,66.4869542 C28.3651797,66.1193355 27.4503112,67.2074495 27.8715843,67.4213008 C28.9482606,67.967855 30.399585,68.7310732 32.5104778,68.7310732 C33.1028534,68.7310732 37.4217636,70.2348248 38.0063858,70.3443088 C39.9973128,70.7171558 41.3573939,67.8493737 43.2787383,67.6945955 C46.1441181,67.4637684 49.5036772,69.7953536 51.992531,69.9512688 C52.951289,70.0113305 55.018314,69.1680079 58.1936059,67.4213008 C58.1936059,65.8930341 58.2958672,65.1395883 58.5003898,65.1609633 C65.4686527,65.8892281 69.8667937,66.9569444 69.8667937,68.1472381 C69.8656349,70.3430317 54.8994762,72.1216825 36.439746,72.1216825 Z" id="Path" fill-opacity="0.4" fill="#CADEF3"></path>
<path d="M19.5373492,69.1935714 L12.7970159,65.9468095 C12.4841587,60.577254 11.0473333,44.5334762 11.0473333,44.5334762 C11.0473333,44.5334762 21.8490159,46.9065556 26.7805714,45.096619 C26.7805714,45.096619 30.7781905,47.1545238 35.5834444,47.2170952 C35.5834444,47.2170952 34.7097619,49.4024603 34.7723333,50.2147302 C34.7723333,50.2147302 28.1716084,50.662597 28.6156083,50.7755556 C28.8428695,50.8333734 29.4537426,51.3855083 30.4482277,52.4319603 L27.0902243,55.19649 L32.4916666,55.19649 L38.691777,55.5677628 L32.4916666,53.2530645 L29.0811382,50.7755556 C34.7435767,50.7755556 37.5768956,50.7755556 37.5810952,50.7755556 L36.9576984,44.0977937 L37.5834127,43.7223651 L36.3957143,43.4095079 C36.3957143,43.4095079 41.0155714,41.9124286 43.6377778,39.2264921 C43.6377778,39.2264921 51.1926984,38.6030952 59.9295238,34.3598254 C59.9295238,34.3598254 59.1234806,37.1249735 56.31356,39.9325766 C55.5091283,40.8613004 54.9114464,41.4483494 54.5205142,41.6937236 C53.4985035,42.3352033 52.513127,42.317175 51.9412381,42.5470752 C49.6261497,43.4777445 47.6122723,43.428483 47.3807097,43.7223651 C46.0740048,45.3807388 52.4525503,44.9813465 52.8615392,45.096619 C53.1535084,45.1789098 55.613789,43.8266717 60.242381,41.0399048 L58.369873,67.4450476 C55.5175649,69.0197492 53.6814536,69.8110902 52.8615392,69.8190706 C52.0416248,69.827051 51.7348577,69.0565671 51.9412381,67.507619 L52.3516388,62.994656 L52.8615392,56.7935863 L53.2093076,56.5520672 L55.6820606,53.6775817 L52.3516388,54.4906402 L46.0704624,54.1894008 L52.3516388,56.1565706 C52.7317146,61.7399825 52.7317146,64.6128689 52.3516388,64.7752301 C52.0691561,64.8959013 51.9323559,66.7012373 51.9412381,70.1912381 C51.9412381,70.1912381 47.3225397,68.1935873 43.3260794,67.4450476 L38.1465556,70.5040952 C38.1465556,70.5040952 34.7120794,68.8193016 27.6577302,67.507619 L27.6577302,66.3836508 C27.3799787,66.4430727 24.7952057,67.230371 19.9034111,68.7455456 C19.7287453,63.7530429 19.4647611,60.897185 19.1114586,60.1779721 C18.8829584,59.7128175 25.6933646,57.6479922 25.3542606,57.2768644 C24.3941706,56.226107 19.5373492,57.742874 19.1114586,57.742874 C18.1504535,57.742874 15.0593625,56.9579861 14.6010228,56.5520672 C14.3086643,56.293146 14.9360383,57.8923572 16.7950814,59.5793308 C17.1990007,59.9458641 17.9711264,60.3039456 19.1114586,60.6535753 C19.3953857,66.346906 19.5373492,69.1935714 19.5373492,69.1935714 Z" id="Path" fill-opacity="0.2" fill="#CADEF3"></path>
<path d="M27.6530952,66.3836508 C25.0308889,66.9456349 19.5373492,69.1935714 19.5373492,69.1935714 L12.7970159,65.9468095 C12.4841587,60.577254 11.0473333,44.5334762 11.0473333,44.5334762 C11.0473333,44.5334762 21.8490159,46.9065556 26.7805714,45.096619 C26.7805714,45.096619 30.7781905,47.1545238 35.5834444,47.2170952 C35.5834444,47.2170952 34.7097619,49.4024603 34.7723333,50.2147302 C34.7723333,50.2147302 36.6448413,50.7755556 37.5810952,50.7755556 L36.9576984,44.0977937 L37.5834127,43.7223651 L36.3957143,43.4095079 C36.3957143,43.4095079 41.0155714,41.9124286 43.6377778,39.2264921 C43.6377778,39.2264921 51.1926984,38.6030952 59.9295238,34.3598254 C59.9295238,34.3598254 58.8692857,37.2937302 56.0593651,40.1013333 L60.242381,41.0399048 L58.369873,67.4450476 L51.9412381,70.1912381 C51.9412381,70.1912381 47.3225397,68.1935873 43.3260794,67.4450476 L38.1465556,70.5040952 C38.1465556,70.5040952 34.7120794,68.8193016 27.6577302,67.507619 L27.6577302,66.3836508 L27.6530952,66.3836508 Z" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M11.0473333,44.5346349 C11.0473333,44.5346349 15.2929206,49.2159048 19.2256508,50.4650159 C19.2256508,50.4650159 28.6507619,51.1521429 35.581127,47.2205714" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M19.5361905,69.1935714 L19.2256508,60.1404127 L18.2893968,60.766127 C18.2893968,60.766127 15.7286032,59.391873 14.2940952,55.9573968 C14.2940952,55.9573968 16.8548889,57.7696508 18.9127937,57.8310635 L19.2256508,50.4638571" id="Path" fill="#F8F9F9"></path>
<path d="M19.5361905,69.1935714 L19.2256508,60.1404127 L18.2893968,60.766127 C18.2893968,60.766127 15.7286032,59.391873 14.2940952,55.9573968 C14.2940952,55.9573968 16.8548889,57.7696508 18.9127937,57.8310635 L19.2256508,50.4638571" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<polyline id="Path" fill="#F8F9F9" points="60.2389048 41.038746 52.7882698 45.1093651 44.1070635 43.9135556"></polyline>
<polyline id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round" points="60.2389048 41.038746 52.7882698 45.1093651 44.1070635 43.9135556"></polyline>
<path d="M51.9366032,70.1923968 C51.9366032,70.1923968 52.6550159,54.6074762 52.7894286,45.1105238" id="Path" fill="#F8F9F9"></path>
<path d="M51.9366032,70.1923968 C51.9366032,70.1923968 52.6550159,54.6074762 52.7894286,45.1105238" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M51.9366032,70.1923968 C51.9366032,70.1923968 52.4159421,65.5301164 52.5503548,56.033164" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M52.5448162,54.6123785 C52.6182827,54.6091103 52.6998201,51.4418254 52.7894286,45.1105238 L52.5448162,54.6123785 Z" id="Path-Copy" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M46.1406349,47.2124603 C49.4661905,47.0768889 52.7268571,48.3653968 52.7268571,48.3653968 C52.7268571,48.3653968 55.6375873,45.788381 57.5379048,45.788381" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M58.7128571,62.5366667 L54.8913651,64.1727937" id="Path" fill="#F8F9F9"></path>
<path d="M58.7128571,62.5366667 L54.8913651,64.1727937" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M46.1406349,59.8287143 C46.1406349,59.8287143 50.5113651,61.0523333 52.3630159,61.8680794 L53.3317143,61.4590476" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<polyline id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round" points="43.3214444 67.4462063 44.7153968 52.7766825 38.8139841 55.8299365 38.1396032 70.505254"></polyline>
<path d="M30.6252381,52.4325397 L26.3993492,55.2853333 C26.3993492,55.2853333 30.7411111,54.9469841 38.8139841,55.8299365" id="Path" fill="#F8F9F9"></path>
<path d="M30.6252381,52.4325397 L26.3993492,55.2853333 C26.3993492,55.2853333 30.7411111,54.9469841 38.8139841,55.8299365" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M44.7153968,52.7755238 L43.5566667,52.431381" id="Path" fill="#F8F9F9"></path>
<path d="M44.7153968,52.7755238 L43.5566667,52.431381" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
@ -51,7 +46,6 @@
<path d="M43.4964127,65.6049841 C43.4964127,65.6049841 41.4593651,66.412619 40.5764127,67.2944127" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M27.6171746,65.6049841 C27.6171746,65.6049841 28.8407937,65.6107778 30.264873,66.1125079" id="Path" fill="#F8F9F9"></path>
<path d="M27.6171746,65.6049841 C27.6171746,65.6049841 28.8407937,65.6107778 30.264873,66.1125079" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M46.1406349,54.1300794 C46.1406349,54.1300794 51.1614127,54.4719048 53.3317143,56.7105714 C53.3317143,56.7105714 54.6410794,54.8797778 55.7186984,53.6561587 L52.5437778,54.7082857 C52.5437778,54.7082857 49.2610952,53.788254 46.1406349,54.1289206" id="Path" fill="#F8F9F9"></path>
<path d="M46.1406349,54.1300794 C46.1406349,54.1300794 51.1614127,54.4719048 53.3317143,56.7105714 C53.3317143,56.7105714 54.6410794,54.8797778 55.7186984,53.6561587 L52.5437778,54.7082857 C52.5437778,54.7082857 49.2610952,53.788254 46.1406349,54.1289206 L46.1406349,54.1300794 Z" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M34.7688571,50.2158889 C34.7688571,50.2158889 31.2150317,50.4175079 28.1617778,50.5113651 C28.1617778,50.5113651 31.2254603,53.929619 38.1384444,55.2853333 C38.1384444,55.2853333 41.3249524,53.5171111 44.7153968,51.8578095 C44.7153968,51.8578095 41.3631905,51.628381 37.577619,50.7767143 L34.7688571,50.2158889 Z" id="Path" stroke="#CADEF3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M56.0558889,40.1036508 C56.0558889,40.1036508 54.8913651,41.5149841 54.6190635,41.7189206 C54.6190635,41.7189206 46.7906825,44.9146984 37.577619,43.7235238" id="Path" fill="#F8F9F9"></path>

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -29,10 +29,10 @@
.blankslate-image {
flex: 0;
height: 74px;
width: 74px;
min-width: 74px;
min-height: 74px;
height: 70px;
width: 73px;
min-width: 70px;
min-height: 73px;
align-self: flex-end;
}