Skip to content

Commit 45f8089

Browse files
steveseguinsteveseguin
committed
.
1 parent 6ea075b commit 45f8089

36 files changed

+5429
-293
lines changed

‎auth-client.js‎

Lines changed: 848 additions & 0 deletions
Large diffs are not rendered by default.

‎auth-styles.css‎

Lines changed: 342 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,342 @@
1+
/* Authentication UI Styles */
2+
3+
/* Auth Container */
4+
#auth-container {
5+
position: fixed;
6+
top: 0;
7+
left: 0;
8+
width: 100%;
9+
height: 100%;
10+
background: rgba(0, 0, 0, 0.8);
11+
backdrop-filter: blur(10px);
12+
z-index: 10000;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
}
17+
18+
.auth-modal {
19+
background: var(--main-bg, #1a1a1a);
20+
padding: 2rem;
21+
border-radius: 12px;
22+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
23+
max-width: 400px;
24+
width: 90%;
25+
animation: authModalSlide 0.3s ease-out;
26+
}
27+
28+
@keyframes authModalSlide {
29+
from {
30+
opacity: 0;
31+
transform: translateY(-20px);
32+
}
33+
to {
34+
opacity: 1;
35+
transform: translateY(0);
36+
}
37+
}
38+
39+
.auth-modal h2 {
40+
margin: 0 0 0.5rem 0;
41+
color: var(--text-color, #fff);
42+
font-size: 1.5rem;
43+
text-align: center;
44+
}
45+
46+
.auth-modal p {
47+
color: var(--text-color-secondary, #aaa);
48+
text-align: center;
49+
margin-bottom: 1.5rem;
50+
}
51+
52+
/* Auth Buttons */
53+
.auth-buttons {
54+
display: flex;
55+
flex-direction: column;
56+
gap: 0.75rem;
57+
}
58+
59+
.auth-button {
60+
display: flex;
61+
align-items: center;
62+
gap: 1rem;
63+
padding: 0.875rem 1.5rem;
64+
border: none;
65+
border-radius: 8px;
66+
cursor: pointer;
67+
font-size: 1rem;
68+
font-weight: 500;
69+
transition: all 0.2s ease;
70+
text-decoration: none;
71+
color: white;
72+
}
73+
74+
.auth-button:hover {
75+
transform: translateY(-2px);
76+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
77+
}
78+
79+
.auth-button:active {
80+
transform: translateY(0);
81+
}
82+
83+
.auth-button img {
84+
width: 20px;
85+
height: 20px;
86+
}
87+
88+
.auth-button.google {
89+
background: #4285f4;
90+
}
91+
92+
.auth-button.google:hover {
93+
background: #357ae8;
94+
}
95+
96+
.auth-button.discord {
97+
background: #5865f2;
98+
}
99+
100+
.auth-button.discord:hover {
101+
background: #4752c4;
102+
}
103+
104+
.auth-button.twitch {
105+
background: #9146ff;
106+
}
107+
108+
.auth-button.twitch:hover {
109+
background: #772ce8;
110+
}
111+
112+
/* Skip Auth Button */
113+
.skip-auth {
114+
margin-top: 1rem;
115+
padding: 0.75rem;
116+
background: transparent;
117+
border: 1px solid var(--border-color, #444);
118+
color: var(--text-color-secondary, #aaa);
119+
cursor: pointer;
120+
border-radius: 8px;
121+
transition: all 0.2s ease;
122+
width: 100%;
123+
font-size: 0.9rem;
124+
}
125+
126+
.skip-auth:hover {
127+
border-color: var(--text-color-secondary, #aaa);
128+
color: var(--text-color, #fff);
129+
}
130+
131+
/* User Info Display */
132+
.user-info-display {
133+
display: flex;
134+
align-items: center;
135+
gap: 0.75rem;
136+
padding: 0.5rem 1rem;
137+
background: rgba(255, 255, 255, 0.1);
138+
border-radius: 8px;
139+
margin-bottom: 1rem;
140+
}
141+
142+
.user-info-display img {
143+
width: 32px;
144+
height: 32px;
145+
border-radius: 50%;
146+
border: 2px solid var(--primary-color, #4285f4);
147+
}
148+
149+
.user-info-display .user-details {
150+
flex: 1;
151+
}
152+
153+
.user-info-display .user-name {
154+
font-weight: 600;
155+
color: var(--text-color, #fff);
156+
font-size: 0.9rem;
157+
}
158+
159+
.user-info-display .user-handle {
160+
color: var(--text-color-secondary, #aaa);
161+
font-size: 0.8rem;
162+
}
163+
164+
/* Auth Badge in Control Boxes */
165+
.user-auth-badge {
166+
display: inline-flex;
167+
align-items: center;
168+
gap: 0.5rem;
169+
padding: 0.25rem 0.75rem;
170+
background: rgba(0, 0, 0, 0.3);
171+
border-radius: 20px;
172+
font-size: 0.8rem;
173+
margin-left: auto;
174+
}
175+
176+
.user-auth-badge img {
177+
width: 20px;
178+
height: 20px;
179+
border-radius: 50%;
180+
}
181+
182+
.user-auth-badge .user-handle {
183+
font-weight: 600;
184+
color: var(--primary-color, #4285f4);
185+
}
186+
187+
.user-auth-badge .user-provider {
188+
font-size: 0.7rem;
189+
opacity: 0.7;
190+
text-transform: capitalize;
191+
}
192+
193+
.user-auth-badge .user-provider.google {
194+
color: #4285f4;
195+
}
196+
197+
.user-auth-badge .user-provider.discord {
198+
color: #5865f2;
199+
}
200+
201+
.user-auth-badge .user-provider.twitch {
202+
color: #9146ff;
203+
}
204+
205+
/* Access Denied Modal */
206+
.access-denied-modal {
207+
text-align: center;
208+
}
209+
210+
.access-denied-modal h3 {
211+
color: #ff4444;
212+
margin-bottom: 1rem;
213+
}
214+
215+
.access-denied-modal p {
216+
margin-bottom: 1.5rem;
217+
}
218+
219+
.access-denied-modal button {
220+
padding: 0.75rem 2rem;
221+
background: var(--primary-color, #4285f4);
222+
color: white;
223+
border: none;
224+
border-radius: 8px;
225+
cursor: pointer;
226+
font-size: 1rem;
227+
transition: all 0.2s ease;
228+
}
229+
230+
.access-denied-modal button:hover {
231+
background: var(--primary-color-dark, #357ae8);
232+
}
233+
234+
/* Room Settings Panel */
235+
.room-settings-panel {
236+
position: fixed;
237+
top: 50%;
238+
left: 50%;
239+
transform: translate(-50%, -50%);
240+
background: var(--main-bg, #1a1a1a);
241+
padding: 2rem;
242+
border-radius: 12px;
243+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
244+
max-width: 500px;
245+
width: 90%;
246+
max-height: 80vh;
247+
overflow-y: auto;
248+
z-index: 10001;
249+
}
250+
251+
.room-settings-panel h3 {
252+
margin: 0 0 1.5rem 0;
253+
color: var(--text-color, #fff);
254+
}
255+
256+
.setting-group {
257+
margin-bottom: 1.5rem;
258+
}
259+
260+
.setting-group label {
261+
display: block;
262+
margin-bottom: 0.5rem;
263+
color: var(--text-color, #fff);
264+
font-weight: 500;
265+
}
266+
267+
.setting-group select,
268+
.setting-group input[type="text"] {
269+
width: 100%;
270+
padding: 0.5rem;
271+
background: rgba(255, 255, 255, 0.1);
272+
border: 1px solid var(--border-color, #444);
273+
border-radius: 4px;
274+
color: var(--text-color, #fff);
275+
}
276+
277+
.setting-group input[type="checkbox"] {
278+
margin-right: 0.5rem;
279+
}
280+
281+
/* Access Requests */
282+
.access-requests {
283+
background: rgba(255, 165, 0, 0.1);
284+
border: 1px solid rgba(255, 165, 0, 0.3);
285+
border-radius: 8px;
286+
padding: 1rem;
287+
margin: 1rem 0;
288+
}
289+
290+
.access-requests h4 {
291+
margin: 0 0 1rem 0;
292+
color: #ffa500;
293+
}
294+
295+
.access-request {
296+
display: flex;
297+
align-items: center;
298+
gap: 1rem;
299+
padding: 0.75rem;
300+
background: rgba(0, 0, 0, 0.2);
301+
border-radius: 8px;
302+
margin-bottom: 0.5rem;
303+
}
304+
305+
.access-request img {
306+
width: 40px;
307+
height: 40px;
308+
border-radius: 50%;
309+
}
310+
311+
.access-request span {
312+
flex: 1;
313+
color: var(--text-color, #fff);
314+
}
315+
316+
.access-request button {
317+
padding: 0.5rem 1rem;
318+
border: none;
319+
border-radius: 4px;
320+
cursor: pointer;
321+
font-size: 0.875rem;
322+
transition: all 0.2s ease;
323+
}
324+
325+
.access-request button:first-of-type {
326+
background: #4caf50;
327+
color: white;
328+
margin-right: 0.5rem;
329+
}
330+
331+
.access-request button:first-of-type:hover {
332+
background: #45a049;
333+
}
334+
335+
.access-request button:last-of-type {
336+
background: #f44336;
337+
color: white;
338+
}
339+
340+
.access-request button:last-of-type:hover {
341+
background: #da190b;
342+
}

0 commit comments

Comments
 (0)