Monorepo for Tangled
appview/fragment/pill: add concave corners & borders when in focus mode
Signed-off-by: eti <eti@eti.tf>
+29
-4
+6
-4
appview/pages/templates/focus/fragments/pill.html
+6
-4
appview/pages/templates/focus/fragments/pill.html
···
1
1
{{ define "focus/pill" }}
2
2
{{ if .Focusing }}
3
3
{{ $offFocus := and .FocusLink .CurrentPath (not (hasPrefix .CurrentPath .FocusLink)) }}
4
-
<div id="focus-pill" class="fixed bottom-0 left-1/2 -translate-x-1/2 z-50 select-none">
4
+
<div id="focus-border" class="ring-inset ring-4 ring-indigo-600 rounded-2xl fixed inset w-screen h-screen z-50 pointer-events-none
5
+
before:ring-inset before:ring-4 before:ring-indigo-600 before:fixed before:inset before:w-screen before:h-screen before:z-50 before:pointer-events-none"></div>
6
+
<div id="focus-pill" class="focus-pill fixed bottom-1 left-1/2 -translate-x-1/2 z-50 select-none">
5
7
{{ if $offFocus }}<a href="{{ .FocusLink }}" class="absolute inset-0 z-0 no-underline" aria-label="Return to focus"></a>{{ end }}
6
-
<div class="relative flex items-center gap-12 bg-indigo-600 text-sm text-white rounded-t-lg px-4 py-2 shadow-lg">
8
+
<div class="relative flex items-center gap-12 bg-indigo-600 text-sm text-white rounded-t-lg px-4 py-2">
7
9
8
10
<form method="POST" action="/focus/end" class="relative z-10 inline m-0">
9
11
<button type="submit" class="flex items-center gap-1 text-white hover:text-indigo-200 bg-transparent border-0 p-0 cursor-pointer text-sm">
···
13
15
14
16
{{ $remaining := sub .FocusCount 1 }}
15
17
{{ if $offFocus }}
16
-
<span class="flex items-center gap-2 whitespace-nowrap animate-pulse">
17
-
{{ i "route-off" "size-4" }}
18
+
<span class="flex items-center gap-2 whitespace-nowrap">
19
+
{{ i "route-off" "size-4 animate-pulse" }}
18
20
Off track
19
21
{{ if gt $remaining 0 }}
20
22
<span class="opacity-75">{{ $remaining }} remaining</span>
+23
input.css
+23
input.css
···
1621
1621
} /* white */
1622
1622
}
1623
1623
}
1624
+
1625
+
.focus-pill {
1626
+
--r: 10px;
1627
+
1628
+
&::before,
1629
+
&::after {
1630
+
@apply bg-indigo-600 absolute bottom-0;
1631
+
content: "";
1632
+
width: var(--r);
1633
+
height: var(--r);
1634
+
-webkit-mask: radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000);
1635
+
mask: radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000);
1636
+
}
1637
+
1638
+
&::before {
1639
+
left: calc(-1 * var(--r));
1640
+
@apply -scale-x-100;
1641
+
}
1642
+
1643
+
&::after {
1644
+
right: calc(-1 * var(--r));
1645
+
}
1646
+
}