mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-22 16:13:20 +01:00
[design] change coffee image
This commit is contained in:
zombieFox
parent
4b6e1210da
commit
cbed3d11a9
@ -1,61 +1,5 @@
|
||||
.coffee {
|
||||
margin-right: 1em;
|
||||
font-size: 1em;
|
||||
width: calc(calc(calc(var(--coffee-size) / 100) * 1.25) * 1em);
|
||||
}
|
||||
|
||||
.coffee-lid {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.coffee-lid-top,
|
||||
.coffee-lid-bottom {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: calc(calc(calc(var(--coffee-size) / 100) * 0.25) * 1em);
|
||||
}
|
||||
|
||||
.coffee-lid-top {
|
||||
background-color: rgb(var(--theme-color-12));
|
||||
width: 95%;
|
||||
clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.coffee-lid-bottom {
|
||||
background-color: rgb(var(--theme-color-10));
|
||||
width: 130%;
|
||||
}
|
||||
|
||||
.coffee-body {
|
||||
background-color: rgb(var(--theme-color-20));
|
||||
width: 100%;
|
||||
height: calc(calc(calc(var(--coffee-size) / 100) * 2) * 1em);
|
||||
position: relative;
|
||||
transition: background-color var(--layout-transition-extra-fast);
|
||||
clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
|
||||
}
|
||||
|
||||
.coffee-body-label {
|
||||
background-color: rgb(var(--theme-color-06));
|
||||
width: 100%;
|
||||
height: calc(calc(var(--coffee-size) / 100) * 1em);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
transition: background-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.coffee-body-label:before {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
content: "";
|
||||
border-radius: 100%;
|
||||
width: calc(calc(calc(var(--coffee-size) / 100) * 0.75) * 1em);
|
||||
height: calc(calc(calc(var(--coffee-size) / 100) * 0.75) * 1em);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
.coffee-icon {
|
||||
margin-right: 0.5em;
|
||||
fill: rgb(var(--theme-color-18));
|
||||
transition: fill var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
@ -9,15 +9,19 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<a href="https://www.buymeacoffee.com/zombieFox" class="button button-line button-large px-4 py-3">
|
||||
<div class="coffee">
|
||||
<div class="coffee-lid">
|
||||
<div class="coffee-lid-top"></div>
|
||||
<div class="coffee-lid-bottom"></div>
|
||||
</div>
|
||||
<div class="coffee-body">
|
||||
<div class="coffee-body-label"></div>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="39" height="32" viewBox="0 0 39 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="coffee-icon">
|
||||
<g>
|
||||
<path
|
||||
d="M11.7043 8.72025C11.1342 8.72025 10.672 8.25805 10.672 7.68798C10.672 6.90875 10.878 6.47121 11.0284 6.15172L11.0285 6.15151C11.1348 5.92546 11.1882 5.81188 11.1882 5.4943C11.1882 5.17672 11.1348 5.06323 11.0287 4.83736L11.0284 4.83688C10.878 4.51739 10.672 4.07971 10.672 3.30061C10.672 2.52151 10.878 2.08396 11.0284 1.76448C11.1347 1.53846 11.1882 1.42483 11.1882 1.10731C11.1882 0.537246 11.6504 0.0750504 12.2204 0.0750504C12.7905 0.0750504 13.2527 0.537246 13.2527 1.10731C13.2527 1.88641 13.0468 2.32396 12.8963 2.64345C12.79 2.86947 12.7366 2.9831 12.7366 3.30061C12.7366 3.61806 12.7899 3.73155 12.8961 3.95742L12.8963 3.9579C13.0468 4.27739 13.2527 4.71507 13.2527 5.4943C13.2527 6.27353 13.0468 6.71108 12.8963 7.03069L12.8961 7.03117C12.7899 7.25705 12.7366 7.37053 12.7366 7.68798C12.7366 8.25805 12.2744 8.72025 11.7043 8.72025Z" />
|
||||
<path
|
||||
d="M33.14 14.7847H31.7551C31.9661 13.7656 32.0755 12.7276 32.0755 11.6879C32.0755 11.1178 31.6133 10.6556 31.0432 10.6556H1.13975C0.56968 10.6556 0.107484 11.1178 0.107484 11.6879C0.107484 15.7987 1.81227 19.8815 4.78479 22.8895C7.83255 25.9735 11.848 27.6719 16.0915 27.6719C19.0905 27.6719 21.9752 26.8225 24.4853 25.2363H33.1186C36 25.2363 38.3443 22.892 38.3443 20.0105C38.3443 17.1289 36.0096 14.7847 33.14 14.7847ZM29.9711 12.7203C29.4226 19.8055 23.2899 25.6075 16.0915 25.6075C8.8932 25.6075 2.7604 19.8055 2.21188 12.7203H29.9711ZM33.1186 23.1718H27.1124C27.2085 23.079 27.3037 22.9849 27.3982 22.8895C29.1033 21.164 30.3903 19.0845 31.1787 16.8492H33.14C34.8712 16.8492 36.2798 18.2673 36.2798 20.0105C36.2798 21.7537 34.8617 23.1718 33.1186 23.1718Z" />
|
||||
<path d="M30.9679 30.0105H1.03226C0.462195 30.0105 0 30.4727 0 31.0428C0 31.6129 0.462195 32.075 1.03226 32.075H30.9679C31.5379 32.075 32.0001 31.6129 32.0001 31.0428C32.0001 30.4727 31.5379 30.0105 30.9679 30.0105Z" />
|
||||
<path
|
||||
d="M14.8011 7.68798C14.8011 8.25805 15.2633 8.72025 15.8334 8.72025C16.4034 8.72025 16.8656 8.25805 16.8656 7.68798C16.8656 7.37053 16.919 7.25705 17.0251 7.03117L17.0254 7.03069C17.1758 6.71108 17.3817 6.27353 17.3817 5.4943C17.3817 4.71507 17.1758 4.27739 17.0254 3.9579L17.0251 3.95742C16.919 3.73155 16.8656 3.61806 16.8656 3.30061C16.8656 2.98309 16.919 2.86954 17.0253 2.64352C17.1758 2.32403 17.3817 1.88641 17.3817 1.10731C17.3817 0.537246 16.9196 0.0750504 16.3495 0.0750504C15.7794 0.0750504 15.3172 0.537246 15.3172 1.10731C15.3172 1.42483 15.2638 1.53839 15.1575 1.7644C15.0071 2.08389 14.8011 2.52151 14.8011 3.30061C14.8011 4.07971 15.007 4.51739 15.1575 4.83688L15.1577 4.83736C15.2639 5.06323 15.3172 5.17672 15.3172 5.4943C15.3172 5.81188 15.2638 5.92546 15.1576 6.15151L15.1575 6.15172C15.007 6.47121 14.8011 6.90875 14.8011 7.68798Z" />
|
||||
<path
|
||||
d="M19.9624 8.72025C19.3923 8.72025 18.9301 8.25805 18.9301 7.68798C18.9301 6.90875 19.1361 6.47121 19.2865 6.15172L19.2866 6.15152C19.3929 5.92546 19.4463 5.81188 19.4463 5.4943C19.4463 5.17671 19.3929 5.06323 19.2868 4.83735L19.2865 4.83688C19.1361 4.51739 18.9301 4.07971 18.9301 3.30061C18.9301 2.52151 19.1361 2.08396 19.2865 1.76448C19.3928 1.53845 19.4463 1.42483 19.4463 1.10731C19.4463 0.537246 19.9085 0.0750504 20.4785 0.0750504C21.0486 0.0750504 21.5108 0.537246 21.5108 1.10731C21.5108 1.88641 21.3049 2.32396 21.1544 2.64345C21.0481 2.86947 20.9947 2.98309 20.9947 3.30061C20.9947 3.61806 21.048 3.73155 21.1542 3.95742L21.1544 3.9579C21.3049 4.27739 21.5108 4.71507 21.5108 5.4943C21.5108 6.27353 21.3049 6.71108 21.1544 7.03069L21.1542 7.03117C21.048 7.25705 20.9947 7.37053 20.9947 7.68798C20.9947 8.25805 20.5325 8.72025 19.9624 8.72025Z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="button-text">Buy me a coffee</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user