| @@ -1703,4 +1703,63 @@ | ||
| 1703 | 1703 | cursor: pointer; |
| 1704 | 1704 | font-size: .8rem; |
| 1705 | 1705 | padding: 1px 6px; |
| 1706 | 1706 | } |
| 1707 | + | |
| 1708 | +/* === Link Previews === */ | |
| 1709 | +.friends-page a.friends-link-preview { | |
| 1710 | + display: flex; | |
| 1711 | + gap: 10px; | |
| 1712 | + margin-top: 8px; | |
| 1713 | + padding: 8px; | |
| 1714 | + border: 1px solid light-dark(#dadce0, #3c4043); | |
| 1715 | + border-radius: 4px; | |
| 1716 | + background: light-dark(#f8f9fa, #292a2d); | |
| 1717 | + color: inherit; | |
| 1718 | + text-decoration: none; | |
| 1719 | +} | |
| 1720 | + | |
| 1721 | +.friends-page a.friends-link-preview:hover { | |
| 1722 | + background: light-dark(#f1f3f4, #35363a); | |
| 1723 | + text-decoration: none; | |
| 1724 | +} | |
| 1725 | + | |
| 1726 | +.friends-page a.friends-link-preview .friends-link-preview-image { | |
| 1727 | + flex: 0 0 auto; | |
| 1728 | +} | |
| 1729 | + | |
| 1730 | +.friends-page a.friends-link-preview .friends-link-preview-image img { | |
| 1731 | + display: block; | |
| 1732 | + width: 100px; | |
| 1733 | + height: 75px; | |
| 1734 | + object-fit: cover; | |
| 1735 | + border-radius: 2px; | |
| 1736 | +} | |
| 1737 | + | |
| 1738 | +.friends-page a.friends-link-preview .friends-link-preview-text { | |
| 1739 | + display: flex; | |
| 1740 | + flex-direction: column; | |
| 1741 | + gap: 2px; | |
| 1742 | + min-width: 0; | |
| 1743 | +} | |
| 1744 | + | |
| 1745 | +.friends-page a.friends-link-preview .friends-link-preview-host { | |
| 1746 | + color: light-dark(#5f6368, #9aa0a6); | |
| 1747 | + font-size: 11px; | |
| 1748 | + text-transform: uppercase; | |
| 1749 | +} | |
| 1750 | + | |
| 1751 | +.friends-page a.friends-link-preview .friends-link-preview-title { | |
| 1752 | + font-size: 13px; | |
| 1753 | + font-weight: bold; | |
| 1754 | + line-height: 1.3; | |
| 1755 | +} | |
| 1756 | + | |
| 1757 | +.friends-page a.friends-link-preview .friends-link-preview-description { | |
| 1758 | + color: light-dark(#5f6368, #9aa0a6); | |
| 1759 | + font-size: 12px; | |
| 1760 | + line-height: 1.4; | |
| 1761 | + display: -webkit-box; | |
| 1762 | + -webkit-line-clamp: 2; | |
| 1763 | + -webkit-box-orient: vertical; | |
| 1764 | + overflow: hidden; | |
| 1765 | +} | |
