Skip to content

Commit cb8dafd

Browse files
mercwarmercwar
committed
Constellation
1 parent bb648bf commit cb8dafd

3 files changed

Lines changed: 839 additions & 122 deletions

File tree

‎css/index.css‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Rajdhani:wght@500;600;700&display=swap');
2+
3+
:root {
4+
--gold: #ffd54a;
5+
--gold-strong: #ffdf72;
6+
--bg: #000;
7+
--glass: rgba(0,0,0,0.55);
8+
--glass-2: rgba(0,0,0,0.35);
9+
--line: rgba(255,215,0,0.35);
10+
--line-strong: rgba(255,215,0,0.55);
11+
}
12+
13+
* { box-sizing: border-box; }
14+
15+
html, body {
16+
margin: 0;
17+
padding: 0;
18+
min-height: 100%;
19+
}
20+
21+
body {
22+
background-color: var(--bg);
23+
background-image: url('https://raw.githubusercontent.com/mercwar/Robo-Knight-Gallery/main/Version%207/mercwar_portal_bg.jpg');
24+
background-repeat: repeat;
25+
overflow: hidden;
26+
font-family: 'Rajdhani', sans-serif;
27+
color: var(--gold);
28+
}
29+
30+
.screen {
31+
position: fixed;
32+
top: 50%;
33+
left: 50%;
34+
transform: translate(-50%, -50%);
35+
background: url('https://raw.githubusercontent.com/mercwar/Robo-Knight-Gallery/refs/heads/main/Version%207/mercwar_portal.jpg')
36+
no-repeat center center;
37+
background-size: contain;
38+
height: 875px;
39+
width: 1220px;
40+
overflow: hidden;
41+
42+
/* Smoothly animates both the movement shift and the background removal */
43+
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), background 0.45s ease;
44+
}
45+
46+
.screen.sidebar-mode {
47+
48+
/* keep it centered, just remove the frame background */
49+
transform: translate(-88%, -70%);
50+
background: transparent;
51+
52+
}
53+
54+
55+
/* ============================
56+
CENTERPIECE PANEL
57+
============================ */
58+
.centerpiece {
59+
width: 304px;
60+
min-height: 260px;
61+
position: absolute;
62+
top: 209px;
63+
left: 609px;
64+
transform: translateX(-50%);
65+
background: var(--glass-2);
66+
border: 1px solid var(--line);
67+
border-radius: 14px;
68+
backdrop-filter: blur(10px);
69+
box-shadow:
70+
0 0 30px rgba(255,212,0,0.15),
71+
inset 0 0 20px rgba(0,0,0,0.8);
72+
overflow: hidden;
73+
transition:
74+
left 0.4s cubic-bezier(0.25, 1, 0.5, 1),
75+
top 0.4s cubic-bezier(0.25, 1, 0.5, 1),
76+
transform 0.4s ease;
77+
}
78+
79+
.centerpiece.sidebar-mode {
80+
top: 10px;
81+
left: 10px; /* REAL left docking */
82+
transform: none !important; /* OVERRIDES translateX(-50%) */
83+
}
84+
85+
/* INNER LAYOUT */
86+
.center-inner {
87+
padding: 18px 22px 22px;
88+
display: flex;
89+
flex-direction: column;
90+
gap: 8px;
91+
}
92+
93+
/* TITLE */
94+
.center-title {
95+
text-align: center;
96+
font-family: 'Orbitron', sans-serif;
97+
font-size: 13px;
98+
letter-spacing: 3px;
99+
margin-bottom: 8px;
100+
text-transform: uppercase;
101+
text-shadow: 0 0 10px var(--gold-strong);
102+
}
103+
104+
/* MENU GROUP */
105+
.menu-group {
106+
position: relative;
107+
z-index: 2;
108+
}
109+
110+
/* MAIN BUTTON */
111+
.rk-btn {
112+
width: 100%;
113+
padding: 4px;
114+
height:30px;
115+
background: var(--glass);
116+
border: 1px solid var(--line);
117+
color: var(--gold);
118+
cursor: pointer;
119+
font-family: 'Orbitron', sans-serif;
120+
font-size: 11px;
121+
font-weight: 700;
122+
letter-spacing: 1px;
123+
transition: 0.2s;
124+
border-radius: 2px;
125+
position: relative;
126+
box-shadow: 0 0 0 rgba(0,0,0,0);
127+
}
128+
129+
.rk-btn:hover {
130+
background: rgba(0,0,0,0.85);
131+
box-shadow:
132+
0 0 14px rgba(0,0,0,0.9),
133+
0 0 12px var(--line-strong);
134+
}
135+
136+
/* DROPDOWN WRAPPER */
137+
.has-dropdown > .rk-btn {
138+
margin-bottom: 0;
139+
}
140+
141+
.dropdown {
142+
max-height: 0;
143+
overflow: hidden;
144+
display: flex;
145+
flex-direction: column;
146+
transition:
147+
max-height 0.3s ease,
148+
opacity 0.25s ease,
149+
transform 0.25s ease,
150+
margin 0.25s ease;
151+
border-left: 1px solid var(--line);
152+
margin-left: 10px;
153+
padding-left: 10px;
154+
opacity: 0;
155+
transform: translateY(-6px);
156+
}
157+
158+
/* OPEN STATE */
159+
.menu-group.open .dropdown {
160+
max-height: 160px;
161+
overflow-y: auto;
162+
opacity: 1;
163+
transform: translateY(0);
164+
margin-top: 6px;
165+
}
166+
167+
/* CUSTOM SCROLLBAR */
168+
.dropdown::-webkit-scrollbar {
169+
width: 6px;
170+
}
171+
172+
.dropdown::-webkit-scrollbar-track {
173+
background: #000;
174+
}
175+
176+
.dropdown::-webkit-scrollbar-thumb {
177+
background: var(--gold);
178+
box-shadow: 0 0 8px var(--gold);
179+
}
180+
181+
/* SUB ITEMS */
182+
.sub-btn {
183+
width:220px;
184+
padding-left: 10px;
185+
padding-top: 6px;
186+
padding-bottom: 6px;
187+
background: rgba(0,0,0,0.65);
188+
border: 1px solid rgba(255,212,0,0.2);
189+
color: #ffe88a;
190+
text-align: left;
191+
cursor: pointer;
192+
transition: 0.18s;
193+
border-radius: 4px;
194+
font-family: 'Rajdhani', sans-serif;
195+
font-size: 12px;
196+
font-weight: 700;
197+
box-shadow: 0 0 0 rgba(0,0,0,0);
198+
}
199+
200+
.sub-btn:hover {
201+
transform: translateX(4px);
202+
background: rgba(0,0,0,0.95);
203+
box-shadow:
204+
0 0 12px rgba(0,0,0,0.9),
205+
0 0 10px rgba(255,215,0,0.45);
206+
}
207+
208+
/* CARET */
209+
.caret {
210+
float: right;
211+
border-right: 2px solid var(--gold);
212+
border-bottom: 2px solid var(--gold);
213+
width: 8px;
214+
height: 8px;
215+
transform: rotate(45deg);
216+
}
217+
218+
/* STATUS */
219+
.status-line {
220+
margin-top: 10px;
221+
text-align: center;
222+
font-size: 12px;
223+
opacity: 0.8;
224+
}
225+
/* ============================
226+
BLACK GLASS FLASH EFFECT
227+
============================ */
228+
229+
@keyframes glassFlash {
230+
0% { opacity: 0; }
231+
40% { opacity: 0.35; }
232+
55% { opacity: 0.55; }
233+
70% { opacity: 0.35; }
234+
100% { opacity: 0; }
235+
}
236+
237+
/* FLASH LAYER FOR MAIN BUTTONS */
238+
.rk-btn::after {
239+
content: "";
240+
position: absolute;
241+
inset: 0;
242+
background: linear-gradient(120deg,
243+
rgba(0,0,0,0.85),
244+
rgba(0,0,0,0.45),
245+
transparent
246+
);
247+
opacity: 0;
248+
pointer-events: none;
249+
border-radius: 6px;
250+
}
251+
252+
/* FLASH ON HOVER */
253+
.rk-btn:hover::after {
254+
animation: glassFlash 0.45s ease-out;
255+
}
256+
257+
258+
/* FLASH LAYER FOR SUB BUTTONS */
259+
.sub-btn::after {
260+
content: "";
261+
position: absolute;
262+
inset: 0;
263+
background: linear-gradient(120deg,
264+
rgba(0,0,0,0.85),
265+
rgba(0,0,0,0.45),
266+
transparent
267+
);
268+
opacity: 0;
269+
pointer-events: none;
270+
border-radius: 4px;
271+
}
272+
273+
/* FLASH ON HOVER */
274+
.sub-btn:hover::after {
275+
animation: glassFlash 0.45s ease-out;
276+
}
277+
.screen {
278+
/* ... keep your existing screen styles ... */
279+
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
280+
}

0 commit comments

Comments
 (0)