| @@ -2497,8 +2497,28 @@ | ||
| 2497 | 2497 | & .friends-dm-message-meta { |
| 2498 | 2498 | visibility: hidden; |
| 2499 | 2499 | } |
| 2500 | 2500 | |
| 2501 | + &.is-own-message .friends-dm-message-meta { | |
| 2502 | + visibility: visible; | |
| 2503 | + | |
| 2504 | + & strong, | |
| 2505 | + & time { | |
| 2506 | + display: none; | |
| 2507 | + } | |
| 2508 | + } | |
| 2509 | + | |
| 2510 | + &.is-spaced-message .friends-dm-message-meta { | |
| 2511 | + visibility: visible; | |
| 2512 | + } | |
| 2513 | + | |
| 2514 | + &.is-own-message.is-spaced-message .friends-dm-message-meta { | |
| 2515 | + & strong, | |
| 2516 | + & time { | |
| 2517 | + display: inline; | |
| 2518 | + } | |
| 2519 | + } | |
| 2520 | + | |
| 2501 | 2521 | & .friends-dm-message-content { |
| 2502 | 2522 | margin-top: 0; |
| 2503 | 2523 | } |
| 2504 | 2524 | } |
| @@ -2617,8 +2637,26 @@ | ||
| 2617 | 2637 | & > :first-child { margin-top: 0; } |
| 2618 | 2638 | & > :last-child { margin-bottom: 0; } |
| 2619 | 2639 | } |
| 2620 | 2640 | |
| 2641 | + & .friends-dm-message-reactions { | |
| 2642 | + display: flex; | |
| 2643 | + flex-wrap: wrap; | |
| 2644 | + gap: .25rem; | |
| 2645 | + margin-top: .2rem; | |
| 2646 | + } | |
| 2647 | + | |
| 2648 | + & .friends-dm-message-reaction { | |
| 2649 | + background: var(--friends-color-surface); | |
| 2650 | + border: 1px solid var(--friends-color-border); | |
| 2651 | + border-radius: 1rem; | |
| 2652 | + color: var(--friends-color-text-muted); | |
| 2653 | + cursor: help; | |
| 2654 | + font-size: .7rem; | |
| 2655 | + line-height: 1.4; | |
| 2656 | + padding: 0 .4rem; | |
| 2657 | + } | |
| 2658 | + | |
| 2621 | 2659 | & .friends-dm-reply { |
| 2622 | 2660 | background: var(--friends-color-surface-muted); |
| 2623 | 2661 | border-top: 1px solid var(--friends-color-border); |
| 2624 | 2662 | padding: .65rem .8rem; |
| @@ -2845,6 +2883,71 @@ | ||
| 2845 | 2883 | |
| 2846 | 2884 | @media (max-width: 960px) { |
| 2847 | 2885 | .friends-page section.posts .card header.entry-header div.author { |
| 2848 | 2886 | max-width: 19em; |
| 2887 | + } | |
| 2888 | +} | |
| 2889 | + | |
| 2890 | +/* ======================================================================== | |
| 2891 | + Link Previews | |
| 2892 | + ======================================================================== */ | |
| 2893 | + | |
| 2894 | +.friends-page a.friends-link-preview { | |
| 2895 | + display: flex; | |
| 2896 | + flex-direction: column; | |
| 2897 | + margin-top: .8rem; | |
| 2898 | + overflow: hidden; | |
| 2899 | + border: .05rem solid var(--friends-color-border-strong); | |
| 2900 | + border-radius: .4rem; | |
| 2901 | + background: var(--friends-color-surface-alt); | |
| 2902 | + color: inherit; | |
| 2903 | + text-decoration: none; | |
| 2904 | + | |
| 2905 | + &:hover, &:focus { | |
| 2906 | + border-color: var(--friends-color-link); | |
| 2907 | + text-decoration: none; | |
| 2908 | + } | |
| 2909 | + | |
| 2910 | + & .friends-link-preview-image { | |
| 2911 | + display: block; | |
| 2912 | + background: var(--friends-color-surface-muted); | |
| 2913 | + | |
| 2914 | + & img { | |
| 2915 | + display: block; | |
| 2916 | + width: 100%; | |
| 2917 | + height: auto; | |
| 2918 | + max-height: 24rem; | |
| 2919 | + object-fit: cover; | |
| 2920 | + aspect-ratio: 1.91 / 1; | |
| 2921 | + } | |
| 2922 | + } | |
| 2923 | + | |
| 2924 | + & .friends-link-preview-text { | |
| 2925 | + display: flex; | |
| 2926 | + flex-direction: column; | |
| 2927 | + gap: .2rem; | |
| 2928 | + padding: .6rem .8rem; | |
| 2929 | + min-width: 0; | |
| 2930 | + } | |
| 2931 | + | |
| 2932 | + & .friends-link-preview-host { | |
| 2933 | + color: var(--friends-color-text-soft); | |
| 2934 | + font-size: .7rem; | |
| 2935 | + text-transform: uppercase; | |
| 2936 | + letter-spacing: .02em; | |
| 2937 | + } | |
| 2938 | + | |
| 2939 | + & .friends-link-preview-title { | |
| 2940 | + font-weight: 600; | |
| 2941 | + line-height: 1.3; | |
| 2942 | + } | |
| 2943 | + | |
| 2944 | + & .friends-link-preview-description { | |
| 2945 | + color: var(--friends-color-text-muted); | |
| 2946 | + font-size: .7rem; | |
| 2947 | + line-height: 1.4; | |
| 2948 | + display: -webkit-box; | |
| 2949 | + -webkit-line-clamp: 3; | |
| 2950 | + -webkit-box-orient: vertical; | |
| 2951 | + overflow: hidden; | |
| 2849 | 2952 | } |
| 2850 | 2953 | } |
