60 lines
1.2 KiB
Svelte
60 lines
1.2 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { RiLink, RiLock2Line, RiPlaneLine, RiStackLine } from "svelte-remixicon";
|
||
|
|
|
||
|
|
let { value = $bindable(0) } = $props();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<ul class="grid">
|
||
|
|
<li>
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="privacy" value={0} bind:group={value} />
|
||
|
|
<RiPlaneLine />
|
||
|
|
Public
|
||
|
|
<small class="faint">your followers and public timeline</small>
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="privacy" value=1 bind:group={value} />
|
||
|
|
<RiLink />
|
||
|
|
Unlisted
|
||
|
|
<small class="faint">your followers, hide from public timeline</small>
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="privacy" value=2 bind:group={value} />
|
||
|
|
<RiStackLine />
|
||
|
|
Friends
|
||
|
|
<small class="faint">mutual followers only</small>
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="privacy" value=3 bind:group={value} />
|
||
|
|
<RiLock2Line />
|
||
|
|
Only you
|
||
|
|
<small class="faint">nobody else</small>
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
@media (max-width: 1099px) {
|
||
|
|
ul.grid {
|
||
|
|
grid-template-columns: 1fr 1fr 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 699px) {
|
||
|
|
ul.grid {
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
li:has(:checked) {
|
||
|
|
border-color: var(--accent);
|
||
|
|
}
|
||
|
|
</style>
|