burrito.space / diffuse
forked from tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: button css tweaks

Steven Vandevelde 07691b1f 1acc5f03

+35 -23
+5 -5
src/_components/nav.vto
··· 4 4 <div class="nav-container"> 5 5 <nav id="diffuse-nav"> 6 6 <a href="dashboard/" class="button {{ colorClass("dashboard/") }} button--border"> 7 - <span> 7 + <span class="with-icon"> 8 8 <i class="ph-fill ph-person"></i> 9 9 Your Diffuse 10 10 </span> 11 11 </a> 12 12 13 13 <a href="guide/" class="button {{ colorClass("guide/") }} button--border"> 14 - <span> 14 + <span class="with-icon"> 15 15 <i class="ph-fill ph-book-open-text"></i> 16 16 Guide 17 17 </span> 18 18 </a> 19 19 20 20 <a href="featured/" class="button {{ colorClass("featured/") }} button--border"> 21 - <span> 21 + <span class="with-icon"> 22 22 <i class="ph-fill ph-sparkle"></i> 23 23 Featured 24 24 </span> 25 25 </a> 26 26 27 27 <a href="catalogue/" class="button {{ colorClass("catalogue/") }} button--border"> 28 - <span> 28 + <span class="with-icon"> 29 29 <i class="ph-fill ph-storefront"></i> 30 30 Catalogue 31 31 </span> 32 32 </a> 33 33 34 34 <a href="code/" class="button {{ colorClass("code/") }} button--border"> 35 - <span> 35 + <span class="with-icon"> 36 36 <i class="ph-fill ph-hammer"></i> 37 37 Code 38 38 </span>
+5 -3
src/common/pages/dashboard.js
··· 161 161 <span class="divider"></span> 162 162 163 163 <button 164 - class="button--border button--tiny button--bg-accent button--tr-accent button--transparent with-icon" 164 + class="button--border button--tiny button--bg-accent button--tr-accent button--transparent" 165 165 @click="${() => openAddFromURIModal()}" 166 166 > 167 - <i class="ph-fill ph-plus-circle"></i> 168 - <span class="button__supplementary-text">Add from URI</span> 167 + <span class="with-repositioned-icon"> 168 + <i class="ph-fill ph-plus-circle"></i> 169 + <span class="button__supplementary-text">Add from URI</span> 170 + </span> 169 171 </button> 170 172 171 173 <div style="flex: 1"></div>
+25 -15
src/styles/diffuse/page.css
··· 558 558 display: inline-block; 559 559 font-family: inherit; 560 560 font-weight: 500; 561 - line-height: var(--leading-tight); 562 - padding: var(--space-2xs) calc((var(--space-xs) + var(--space-sm)) / 2); 561 + line-height: 0.75; 562 + padding: var(--space-xs) calc((var(--space-sm) + var(--space-xs)) / 2); 563 + text-box: trim-both cap alphabetic; 563 564 transition-duration: 250ms; 564 565 transition-property: background-color, border-color, opacity; 565 566 ··· 575 576 &:hover:not([disabled]), 576 577 &:focus:not([disabled]) { 577 578 --button-bg-opacity: 1; 579 + } 580 + 581 + &:has(.with-icon) { 582 + padding-top: calc(var(--space-xs) * 1.1); 578 583 } 579 584 580 585 &.button--bg-accent { ··· 607 612 608 613 &.button--small { 609 614 font-size: var(--fs-sm); 610 - line-height: 0.75; 611 615 padding: var(--space-2xs); 612 - text-box: trim-both cap alphabetic; 613 616 } 614 617 615 618 &.button--subtle { ··· 619 622 &.button--tag { 620 623 font-size: var(--fs-2xs); 621 624 font-weight: 600; 622 - line-height: 0.75; 623 625 padding: var(--space-3xs); 624 - text-box: trim-both cap alphabetic; 625 626 vertical-align: middle; 626 627 627 628 &.button--border { ··· 635 636 636 637 &.button--tiny { 637 638 font-size: var(--fs-xs); 638 - line-height: 1; 639 - padding: var(--space-3xs) calc((var(--space-2xs) + var(--space-3xs)) / 2); 639 + padding: calc(var(--space-2xs) * 0.7) calc(var(--space-2xs) * 0.8); 640 640 } 641 641 642 642 &.button--transparent { ··· 680 680 display: inline-flex; 681 681 } 682 682 } 683 - 684 - & > span { 685 - align-items: center; 686 - display: inline-flex; 687 - gap: var(--space-3xs); 688 - padding-top: 1px; 689 - } 690 683 } 691 684 692 685 small { ··· 734 727 button .with-icon--bigger-gap, 735 728 .button .with-icon--bigger-gap { 736 729 gap: var(--space-2xs); 730 + } 731 + 732 + .with-repositioned-icon { 733 + i { 734 + display: inline-block; 735 + height: 0; 736 + position: relative; 737 + width: 1em; 738 + } 739 + 740 + i::before { 741 + bottom: 0; 742 + bottom: 0.35cap; 743 + left: 0; 744 + position: absolute; 745 + transform: translateY(50%); 746 + } 737 747 } 738 748 739 749 /**