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