Skip to content

Commit 20c6256

Browse files
STRMLSTRML
committed
Deploying to gh-pages from @ e0bb413 🚀
1 parent 802a9f5 commit 20c6256

3 files changed

Lines changed: 445 additions & 63 deletions

File tree

‎example/example-styles.css‎

Lines changed: 347 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,347 @@
1+
/* === CYBERPUNK THEME === */
2+
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@400;700;900&display=swap');
3+
4+
:root {
5+
--cyber-bg: #0a0a0f;
6+
--cyber-surface: #12121a;
7+
--cyber-cyan: #00f0ff;
8+
--cyber-magenta: #ff00aa;
9+
--cyber-purple: #a855f7;
10+
--cyber-yellow: #facc15;
11+
--cyber-grid: rgba(0, 240, 255, 0.03);
12+
--glow-cyan: 0 0 20px rgba(0, 240, 255, 0.5), 0 0 40px rgba(0, 240, 255, 0.2);
13+
--glow-magenta: 0 0 20px rgba(255, 0, 170, 0.5), 0 0 40px rgba(255, 0, 170, 0.2);
14+
}
15+
16+
* {
17+
box-sizing: border-box;
18+
}
19+
20+
body {
21+
margin: 0;
22+
padding: 0;
23+
background: var(--cyber-bg);
24+
background-image:
25+
linear-gradient(var(--cyber-grid) 1px, transparent 1px),
26+
linear-gradient(90deg, var(--cyber-grid) 1px, transparent 1px);
27+
background-size: 50px 50px;
28+
min-height: 100vh;
29+
font-family: 'JetBrains Mono', monospace;
30+
color: #e0e0e0;
31+
}
32+
33+
/* === MAIN CONTENT === */
34+
.main-content {
35+
padding: 20px 30px;
36+
min-height: 100vh;
37+
max-width: 1400px;
38+
margin: 0 auto;
39+
}
40+
41+
#container {
42+
width: 100%;
43+
}
44+
45+
/* === HEADER === */
46+
.main-header {
47+
display: flex;
48+
align-items: center;
49+
justify-content: space-between;
50+
margin-bottom: 20px;
51+
padding-bottom: 15px;
52+
border-bottom: 1px solid rgba(0, 240, 255, 0.3);
53+
}
54+
55+
h1 {
56+
font-family: 'Orbitron', sans-serif;
57+
font-size: 24px;
58+
font-weight: 700;
59+
color: var(--cyber-cyan);
60+
text-shadow: var(--glow-cyan);
61+
letter-spacing: 1px;
62+
margin: 0;
63+
}
64+
65+
h3 {
66+
font-family: 'Orbitron', sans-serif;
67+
font-size: 18px;
68+
font-weight: 700;
69+
color: var(--cyber-cyan);
70+
text-shadow: var(--glow-cyan);
71+
letter-spacing: 1px;
72+
margin: 0 0 15px 0;
73+
}
74+
75+
.version-badge {
76+
font-size: 13px;
77+
font-family: 'JetBrains Mono', monospace;
78+
color: var(--cyber-magenta);
79+
background: rgba(255, 0, 170, 0.15);
80+
padding: 6px 12px;
81+
border: 1px solid rgba(255, 0, 170, 0.4);
82+
text-decoration: none;
83+
text-shadow: 0 0 10px rgba(255, 0, 170, 0.5);
84+
transition: all 0.2s ease;
85+
flex-shrink: 0;
86+
}
87+
88+
.version-badge:hover {
89+
color: var(--cyber-yellow);
90+
border-color: var(--cyber-yellow);
91+
background: rgba(250, 204, 21, 0.15);
92+
text-shadow: 0 0 15px rgba(250, 204, 21, 0.7);
93+
}
94+
95+
.header-links {
96+
display: flex;
97+
gap: 12px;
98+
align-items: center;
99+
}
100+
101+
.lib-link {
102+
font-size: 13px;
103+
font-family: 'JetBrains Mono', monospace;
104+
color: var(--cyber-cyan);
105+
background: rgba(0, 240, 255, 0.1);
106+
padding: 6px 12px;
107+
border: 1px solid rgba(0, 240, 255, 0.4);
108+
text-decoration: none;
109+
text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
110+
transition: all 0.2s ease;
111+
}
112+
113+
.lib-link:hover {
114+
color: var(--cyber-magenta);
115+
border-color: var(--cyber-magenta);
116+
background: rgba(255, 0, 170, 0.15);
117+
text-shadow: 0 0 15px rgba(255, 0, 170, 0.7);
118+
}
119+
120+
/* === NAVIGATION LINKS === */
121+
.nav-links {
122+
list-style: none;
123+
padding: 0;
124+
margin: 0 0 25px 0;
125+
display: flex;
126+
flex-wrap: wrap;
127+
gap: 8px;
128+
}
129+
130+
.nav-links li {
131+
background: linear-gradient(135deg, rgba(18, 18, 26, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
132+
border: 1px solid rgba(0, 240, 255, 0.3);
133+
border-left: 3px solid var(--cyber-cyan);
134+
padding: 8px 14px;
135+
font-size: 13px;
136+
transition: all 0.2s ease;
137+
}
138+
139+
.nav-links li:hover {
140+
border-color: var(--cyber-magenta);
141+
border-left-color: var(--cyber-magenta);
142+
box-shadow: var(--glow-magenta);
143+
}
144+
145+
.nav-links li a {
146+
color: #c0c0c0;
147+
text-decoration: none;
148+
transition: color 0.2s ease;
149+
}
150+
151+
.nav-links li a:hover {
152+
color: var(--cyber-magenta);
153+
}
154+
155+
/* === PARAGRAPHS === */
156+
p {
157+
color: #a0a0a0;
158+
line-height: 1.6;
159+
margin-bottom: 15px;
160+
padding-left: 12px;
161+
border-left: 2px solid rgba(168, 85, 247, 0.4);
162+
}
163+
164+
p code {
165+
background: rgba(168, 85, 247, 0.2);
166+
border: 1px solid var(--cyber-purple);
167+
padding: 2px 8px;
168+
font-family: 'JetBrains Mono', monospace;
169+
font-size: 12px;
170+
color: var(--cyber-purple);
171+
}
172+
173+
p a {
174+
color: var(--cyber-cyan);
175+
text-decoration: none;
176+
transition: color 0.2s ease;
177+
}
178+
179+
p a:hover {
180+
color: var(--cyber-magenta);
181+
}
182+
183+
/* === DRAGGABLE BOXES === */
184+
.box {
185+
background: linear-gradient(145deg, rgba(18, 18, 26, 0.9) 0%, rgba(30, 30, 45, 0.9) 100%);
186+
border: 1px solid var(--cyber-cyan);
187+
width: 180px;
188+
height: 180px;
189+
margin: 10px;
190+
padding: 15px;
191+
float: left;
192+
display: flex;
193+
flex-direction: column;
194+
justify-content: center;
195+
align-items: center;
196+
text-align: center;
197+
font-size: 13px;
198+
color: #c0c0c0;
199+
box-shadow:
200+
inset 0 1px 0 rgba(255, 255, 255, 0.05),
201+
0 4px 20px rgba(0, 0, 0, 0.5);
202+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
203+
overflow: hidden;
204+
}
205+
206+
.box:hover {
207+
border-color: var(--cyber-magenta);
208+
box-shadow:
209+
var(--glow-magenta),
210+
inset 0 1px 0 rgba(255, 255, 255, 0.05);
211+
}
212+
213+
/* === CURSORS === */
214+
.react-draggable, .cursor {
215+
cursor: move;
216+
}
217+
.no-cursor {
218+
cursor: auto;
219+
}
220+
.cursor-y {
221+
cursor: ns-resize;
222+
}
223+
.cursor-x {
224+
cursor: ew-resize;
225+
}
226+
227+
/* === HANDLE === */
228+
.react-draggable strong {
229+
background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(0, 240, 255, 0.1) 100%);
230+
border: 1px solid var(--cyber-cyan);
231+
display: block;
232+
margin-bottom: 10px;
233+
padding: 6px 10px;
234+
text-align: center;
235+
font-weight: 500;
236+
color: var(--cyber-cyan);
237+
text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
238+
transition: all 0.2s ease;
239+
}
240+
241+
.react-draggable strong:hover {
242+
background: linear-gradient(135deg, rgba(255, 0, 170, 0.2) 0%, rgba(255, 0, 170, 0.1) 100%);
243+
border-color: var(--cyber-magenta);
244+
color: var(--cyber-magenta);
245+
text-shadow: 0 0 10px rgba(255, 0, 170, 0.5);
246+
}
247+
248+
/* === SPECIAL STATES === */
249+
.no-pointer-events {
250+
pointer-events: none;
251+
}
252+
253+
.hovered {
254+
background: linear-gradient(145deg, rgba(255, 0, 170, 0.2) 0%, rgba(30, 30, 45, 0.9) 100%) !important;
255+
border-color: var(--cyber-magenta) !important;
256+
}
257+
258+
.drop-target {
259+
border-style: dashed;
260+
}
261+
262+
/* === REM POSITION FIX === */
263+
.rem-position-fix {
264+
position: static !important;
265+
}
266+
267+
/* === BOUNDED CONTAINER === */
268+
.bounded-container {
269+
height: 500px;
270+
width: 500px;
271+
position: relative;
272+
overflow: auto;
273+
padding: 0;
274+
background: var(--cyber-surface);
275+
border: 1px solid rgba(0, 240, 255, 0.2);
276+
background-image:
277+
linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
278+
linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
279+
background-size: 20px 20px;
280+
float: left;
281+
margin: 10px;
282+
}
283+
284+
.bounded-inner {
285+
height: 1000px;
286+
width: 1000px;
287+
padding: 10px;
288+
}
289+
290+
/* === ACTIVE DRAGS COUNTER === */
291+
.active-drags {
292+
font-family: 'Orbitron', sans-serif;
293+
color: var(--cyber-yellow);
294+
background: rgba(250, 204, 21, 0.1);
295+
border: 1px solid rgba(250, 204, 21, 0.3);
296+
padding: 8px 15px;
297+
display: inline-block;
298+
margin-bottom: 20px;
299+
font-size: 12px;
300+
}
301+
302+
/* === SCROLLBAR === */
303+
::-webkit-scrollbar {
304+
width: 8px;
305+
height: 8px;
306+
}
307+
308+
::-webkit-scrollbar-track {
309+
background: var(--cyber-bg);
310+
}
311+
312+
::-webkit-scrollbar-thumb {
313+
background: linear-gradient(180deg, var(--cyber-cyan), var(--cyber-magenta));
314+
border-radius: 4px;
315+
}
316+
317+
::-webkit-scrollbar-thumb:hover {
318+
background: linear-gradient(180deg, var(--cyber-magenta), var(--cyber-cyan));
319+
}
320+
321+
/* === PREVENT TEXT SELECTION DURING DRAG === */
322+
body:has(.react-draggable-dragging) {
323+
user-select: none;
324+
-webkit-user-select: none;
325+
}
326+
327+
/* === RESPONSIVE === */
328+
@media (max-width: 768px) {
329+
.main-content {
330+
padding: 15px;
331+
}
332+
333+
.main-header {
334+
flex-direction: column;
335+
gap: 10px;
336+
align-items: flex-start;
337+
}
338+
339+
h1 {
340+
font-size: 18px;
341+
}
342+
343+
.box {
344+
width: 150px;
345+
height: 150px;
346+
}
347+
}

0 commit comments

Comments
 (0)