forked from
me.webbeef.org/browser.html
Rewild Your Web
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3:host {
4 position: fixed;
5 top: 0;
6 left: 0;
7 width: 100%;
8 height: 100%;
9 z-index: var(--z-modal);
10 pointer-events: none;
11}
12
13:host([open]) {
14 pointer-events: auto;
15}
16
17.overlay {
18 position: absolute;
19 top: 0;
20 left: 0;
21 right: 0;
22 bottom: 0;
23 background: var(--color-backdrop);
24 opacity: 0;
25 transition: opacity var(--transition-fast);
26 z-index: var(--z-dialog);
27}
28
29:host([open]) .overlay {
30 opacity: 1;
31}
32
33menu {
34 padding-left: 0;
35 position: absolute;
36 width: 200px;
37 height: 200px;
38 margin-left: -100px;
39 margin-top: -100px;
40 opacity: 0;
41 transition: opacity var(--transition-fast);
42 z-index: var(--z-modal);
43}
44
45:host([open]) menu {
46 opacity: 1;
47}
48
49.center {
50 position: absolute;
51 top: 50%;
52 left: 50%;
53 width: 50px;
54 height: 50px;
55 margin: -25px;
56 background: var(--bg-menu);
57 border-radius: 50%;
58 display: flex;
59 align-items: center;
60 justify-content: center;
61 box-shadow: 0 2px 10px var(--color-shadow);
62 transform: scale(0);
63 transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
64}
65
66:host([open]) .center {
67 transform: scale(1);
68}
69
70.center-dot {
71 width: 8px;
72 height: 8px;
73 background: var(--color-text-tertiary);
74 border-radius: 50%;
75}
76
77.zone {
78 position: absolute;
79 width: 60px;
80 height: 60px;
81 margin: -30px;
82 background: var(--bg-menu);
83 border-radius: 50%;
84 display: flex;
85 flex-direction: column;
86 align-items: center;
87 justify-content: center;
88 box-shadow: 0 2px 10px var(--color-shadow-menu);
89 cursor: pointer;
90 /* Start at center, scale down */
91 transform: translate(var(--start-x), var(--start-y)) scale(0);
92 transition:
93 transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
94 background var(--transition-fast),
95 box-shadow var(--transition-fast);
96}
97
98:host([open]) .zone {
99 transform: translate(0, 0) scale(1);
100}
101
102/* Staggered animation delays for each zone */
103.zone[data-zone="0"] {
104 transition-delay: 0.02s;
105}
106.zone[data-zone="1"] {
107 transition-delay: 0.04s;
108}
109.zone[data-zone="2"] {
110 transition-delay: 0.06s;
111}
112.zone[data-zone="3"] {
113 transition-delay: 0.08s;
114}
115.zone[data-zone="4"] {
116 transition-delay: 0.1s;
117}
118.zone[data-zone="5"] {
119 transition-delay: 0.12s;
120}
121.zone[data-zone="6"] {
122 transition-delay: 0.14s;
123}
124.zone[data-zone="7"] {
125 transition-delay: 0.16s;
126}
127
128/* Remove delay when closing */
129:host(:not([open])) .zone {
130 transition-delay: 0s;
131}
132
133.zone lucide-icon {
134 font-size: 20px;
135 color: var(--color-text-menu);
136 transition: color var(--transition-fast);
137}
138
139.zone:active {
140 transform: translate(0, 0) scale(0.9);
141 background: var(--color-focus-ring);
142 box-shadow: 0 4px 20px var(--color-focus-ring);
143}
144
145.zone.disabled {
146 opacity: 0.3;
147 pointer-events: none;
148}
149
150.zone.disabled lucide-icon {
151 color: var(--color-text-tertiary);
152}
153
154/* Position zones in a circle */
155/* Top */
156.zone[data-zone="0"] {
157 top: 15%;
158 left: 50%;
159 --start-x: 0;
160 --start-y: 35%;
161}
162
163/* Top-Right */
164.zone[data-zone="1"] {
165 top: 22%;
166 left: 78%;
167 --start-x: -28%;
168 --start-y: 28%;
169}
170
171/* Right */
172.zone[data-zone="2"] {
173 top: 50%;
174 left: 85%;
175 --start-x: -35%;
176 --start-y: 0;
177}
178
179/* Bottom-Right */
180.zone[data-zone="3"] {
181 top: 78%;
182 left: 78%;
183 --start-x: -28%;
184 --start-y: -28%;
185}
186
187/* Bottom */
188.zone[data-zone="4"] {
189 top: 85%;
190 left: 50%;
191 --start-x: 0;
192 --start-y: -35%;
193}
194
195/* Bottom-Left */
196.zone[data-zone="5"] {
197 top: 78%;
198 left: 22%;
199 --start-x: 28%;
200 --start-y: -28%;
201}
202
203/* Left */
204.zone[data-zone="6"] {
205 top: 50%;
206 left: 15%;
207 --start-x: 35%;
208 --start-y: 0;
209}
210
211/* Top-Left */
212.zone[data-zone="7"] {
213 top: 22%;
214 left: 22%;
215 --start-x: 28%;
216 --start-y: 28%;
217}