mackuba.eu
Thread viewer for Bluesky
1<script lang="ts">
2 type Props = {
3 children: any;
4 id?: string;
5 class?: string;
6 onClose?: () => void;
7 }
8
9 let { children, onClose = undefined, id = undefined, ...props }: Props = $props();
10
11 function onclick(e: Event) {
12 // close the dialog (if it's closable) on click on the overlay, but not on anything inside
13 if (e.target === e.currentTarget) {
14 onClose?.();
15 }
16 }
17</script>
18
19<div {id} class="dialog {props.class}" {onclick}>
20 {@render children()}
21</div>
22
23<style>
24 .dialog {
25 position: fixed;
26 top: 0;
27 bottom: 0;
28 left: 0;
29 right: 0;
30 display: flex;
31 align-items: center;
32 justify-content: center;
33 padding-bottom: 5%;
34 z-index: 10;
35 background-color: rgba(240, 240, 240, 0.4);
36 }
37
38 .dialog:global(.expanded) {
39 padding-bottom: 0;
40 }
41
42 .dialog ~ :global(main) {
43 filter: blur(8px);
44 }
45
46 .dialog :global {
47 form {
48 position: relative;
49 border: 2px solid hsl(210, 100%, 85%);
50 background-color: hsl(210, 100%, 98%);
51 border-radius: 10px;
52 padding: 15px 25px;
53 }
54
55 .close {
56 position: absolute;
57 top: 5px;
58 right: 5px;
59 color: hsl(210, 100%, 75%);
60 opacity: 0.6;
61 }
62
63 .close:hover {
64 color: hsl(210, 100%, 65%);
65 opacity: 1.0;
66 }
67
68 p {
69 text-align: center;
70 line-height: 125%;
71 }
72
73 h2 {
74 font-size: 13pt;
75 font-weight: 600;
76 text-align: center;
77 margin-bottom: 25px;
78 padding-right: 10px;
79 }
80
81 input[type="text"], input[type="password"] {
82 width: 200px;
83 font-size: 11pt;
84 border: 1px solid #d6d6d6;
85 border-radius: 4px;
86 padding: 5px 6px;
87 margin: 0px 15px;
88 }
89
90 p.submit {
91 margin-top: 25px;
92 }
93
94 input[type="submit"] {
95 width: 150px;
96 font-size: 11pt;
97 border: 1px solid hsl(210, 90%, 85%);
98 background-color: hsl(210, 100%, 92%);
99 border-radius: 4px;
100 padding: 5px 6px;
101 }
102
103 input[type="submit"]:hover {
104 background-color: hsl(210, 100%, 90%);
105 border: 1px solid hsl(210, 90%, 82%);
106 }
107
108 input[type="submit"]:active {
109 background-color: hsl(210, 100%, 87%);
110 border: 1px solid hsl(210, 90%, 80%);
111 }
112 }
113
114 @media (prefers-color-scheme: dark) {
115 .dialog {
116 background-color: rgba(240, 240, 240, 0.15);
117 }
118
119 .dialog :global {
120 form {
121 border-color: hsl(210, 20%, 40%);
122 background-color: hsl(210, 12%, 25%);
123 }
124
125 .close {
126 color: hsl(210, 50%, 65%);
127 opacity: 0.6;
128 }
129
130 .close:hover {
131 color: hsl(210, 60%, 70%);
132 opacity: 1.0;
133 }
134
135 input[type="text"], input[type="password"] {
136 border-color: #666;
137 }
138
139 input[type="submit"] {
140 background-color: hsl(210, 53.33%, 35.29%);
141 border-color: hsl(210, 45.28%, 41.57%);
142 }
143
144 input[type="submit"]:hover {
145 background-color: hsl(210, 45.28%, 41.57%);
146 border-color: hsl(210, 39.34%, 47.84%);
147 }
148
149 input[type="submit"]:active {
150 border-color: hsl(210, 64.86%, 29.02%);
151 background-color: hsl(210, 53.33%, 35.29%);
152 }
153 }
154 }
155</style>