Thread viewer for Bluesky
mackuba.eu
1<script lang="ts">
2 let { collapsed = $bindable(false) }: { collapsed: boolean } = $props();
3
4 function toggleFold() {
5 collapsed = !collapsed;
6 }
7</script>
8
9<div class="margin">
10 <div class="edge" onclick={toggleFold}>
11 <div class="line"></div>
12 </div>
13
14 <img class="plus" alt="{collapsed ? '+' : '-'}" src="icons/{collapsed ? 'add-square.png' : 'subtract-square.png'}" onclick={toggleFold}>
15</div>
16
17<style>
18 .edge {
19 position: absolute;
20 left: -2px;
21 top: 30px;
22 bottom: 0px;
23 width: 6px;
24 }
25
26 .line {
27 position: absolute;
28 left: 2px;
29 top: 0px;
30 bottom: 0px;
31 border-left: 1px solid #aaa;
32 }
33
34 .edge:hover .line {
35 border-left: 2px solid #888;
36 }
37
38 .plus {
39 position: absolute;
40 top: 8px;
41 left: -6px;
42 width: 14px;
43 }
44
45 :global(.post.collapsed) .line {
46 display: none;
47 }
48
49 :global(.post.flat) > .margin {
50 display: none;
51 }
52
53 @media (prefers-color-scheme: dark) {
54 .line { border-left-color: #666; }
55 .edge:hover .line { border-left-color: #888; }
56 .plus { filter: invert(); }
57 }
58</style>