Skip to content

Commit f8aff68

Browse files
CelloSerenityCelloSerenity
authored
move to stylesheet
Signed-off-by: CelloSerenity <195480169+CelloSerenity@users.noreply.github.com>
1 parent 443c823 commit f8aff68

1 file changed

Lines changed: 330 additions & 0 deletions

File tree

‎styles.css‎

Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,330 @@
1+
:root {
2+
--primary-color: #2997ff;
3+
--bg-color: #000000;
4+
--text-color: #f5f5f7;
5+
--secondary-text: #86868b;
6+
7+
--glass-bg: rgba(30, 30, 35, 0.65);
8+
--glass-border: rgba(255, 255, 255, 0.12);
9+
--glass-highlight: rgba(255, 255, 255, 0.08);
10+
--glass-blur: blur(25px);
11+
12+
--neutral-btn-bg: rgba(255, 255, 255, 0.15);
13+
--neutral-btn-hover: rgba(255, 255, 255, 0.25);
14+
15+
--safe-top: env(safe-area-inset-top, 0px);
16+
--safe-right: env(safe-area-inset-right, 0px);
17+
--safe-bottom: env(safe-area-inset-bottom, 0px);
18+
--safe-left: env(safe-area-inset-left, 0px);
19+
}
20+
21+
@media (prefers-color-scheme: light) {
22+
:root:not([data-theme="dark"]) {
23+
--bg-color: #ffffffa6;
24+
--text-color: #1d1d1f;
25+
--secondary-text: #86868b;
26+
27+
--glass-bg: rgb(245, 245, 247);
28+
--glass-border: rgba(0, 0, 0, 0.1);
29+
--glass-highlight: rgba(255, 255, 255, 0.5);
30+
31+
--neutral-btn-bg: rgba(0, 0, 0, 0.05);
32+
--neutral-btn-hover: rgba(0, 0, 0, 0.1);
33+
}
34+
}
35+
36+
:root[data-theme="light"] {
37+
--bg-color: #ffffffa6;
38+
--text-color: #1d1d1f;
39+
--secondary-text: #86868b;
40+
41+
--glass-bg: rgb(245, 245, 247);
42+
--glass-border: rgba(0, 0, 0, 0.1);
43+
--glass-highlight: rgba(255, 255, 255, 0.5);
44+
45+
--neutral-btn-bg: rgba(0, 0, 0, 0.05);
46+
--neutral-btn-hover: rgba(0, 0, 0, 0.1);
47+
}
48+
49+
.theme-toggle {
50+
position: fixed;
51+
top: calc(var(--safe-top) + 20px);
52+
right: calc(var(--safe-right) + 20px);
53+
width: 44px;
54+
height: 44px;
55+
border-radius: 50%;
56+
background: var(--neutral-btn-bg);
57+
border: 1px solid var(--glass-border);
58+
color: var(--text-color);
59+
display: flex;
60+
align-items: center;
61+
justify-content: center;
62+
cursor: pointer;
63+
backdrop-filter: var(--glass-blur);
64+
-webkit-backdrop-filter: var(--glass-blur);
65+
z-index: 100;
66+
padding: 0;
67+
-webkit-tap-highlight-color: transparent;
68+
}
69+
70+
.theme-toggle:hover {
71+
background: var(--neutral-btn-hover);
72+
transform: scale(1.05);
73+
}
74+
75+
.theme-toggle:active {
76+
transform: scale(0.95);
77+
}
78+
79+
html { height: 100%; margin: 0; padding: 0; }
80+
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
81+
82+
body { margin: 0; }
83+
84+
body {
85+
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
86+
background-color: var(--bg-color);
87+
color: var(--text-color);
88+
min-height: 100dvh;
89+
display: flex;
90+
flex-direction: column;
91+
align-items: center;
92+
padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 20px);
93+
box-sizing: border-box;
94+
-webkit-font-smoothing: antialiased;
95+
transition: background-color 0.4s ease, color 0.4s ease;
96+
}
97+
98+
main {
99+
display: flex;
100+
flex-direction: column;
101+
align-items: center;
102+
width: 100%;
103+
margin: auto;
104+
}
105+
106+
.hero, .theme-toggle, .url-form, .url-input, .custom-button, .credit, .paste-button, .source-url-display {
107+
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease, transform 0.2s ease, background 0.4s ease;
108+
}
109+
110+
.source-url-display {
111+
font-size: 0.85rem;
112+
color: var(--secondary-text);
113+
word-break: break-all;
114+
margin-bottom: 0;
115+
padding: 12px 20px;
116+
background: var(--glass-bg);
117+
border-radius: 14px;
118+
border: 1px solid var(--glass-border);
119+
width: 100%;
120+
box-sizing: border-box;
121+
backdrop-filter: var(--glass-blur);
122+
-webkit-backdrop-filter: var(--glass-blur);
123+
}
124+
125+
.hero {
126+
text-align: center;
127+
max-width: 600px;
128+
width: 100%;
129+
}
130+
131+
.app-icon {
132+
width: 100px;
133+
height: 100px;
134+
margin: 0 auto 24px;
135+
display: block;
136+
object-fit: contain;
137+
transition: transform 0.3s ease;
138+
}
139+
140+
.app-icon:hover {
141+
transform: scale(1.05);
142+
}
143+
144+
h1 {
145+
font-size: 3rem;
146+
margin: 0 0 12px;
147+
line-height: 1.1;
148+
font-weight: 800;
149+
letter-spacing: -1.5px;
150+
color: var(--text-color);
151+
}
152+
153+
h1 span {
154+
color: var(--primary-color);
155+
}
156+
157+
p.description {
158+
font-size: 1.2rem;
159+
color: var(--secondary-text);
160+
margin: 0 auto 32px;
161+
font-weight: 400;
162+
}
163+
164+
#tagline {
165+
transition: opacity 0.3s ease;
166+
}
167+
168+
#subtitle {
169+
font-size: 0.95rem;
170+
color: var(--secondary-text);
171+
margin-bottom: 20px;
172+
line-height: 1.5;
173+
display: none;
174+
}
175+
176+
#links-container {
177+
display: flex;
178+
flex-direction: column;
179+
align-items: center;
180+
gap: 12px;
181+
width: 100%;
182+
max-width: 420px;
183+
margin: 0 auto;
184+
}
185+
186+
.url-form-wrapper {
187+
width: 100%;
188+
max-width: 420px;
189+
margin-bottom: 24px;
190+
}
191+
192+
.url-form {
193+
display: flex;
194+
background: var(--glass-bg);
195+
padding: 8px;
196+
border-radius: 100px;
197+
border: 1px solid var(--glass-border);
198+
backdrop-filter: var(--glass-blur) saturate(180%);
199+
-webkit-backdrop-filter: var(--glass-blur) saturate(180%);
200+
gap: 8px;
201+
}
202+
203+
.url-input {
204+
flex: 1;
205+
background: transparent;
206+
border: none;
207+
color: var(--text-color);
208+
padding: 12px 20px;
209+
font-size: 17px;
210+
outline: none;
211+
min-width: 0;
212+
}
213+
214+
.submit-button {
215+
background: var(--primary-color);
216+
color: #fff;
217+
border: none;
218+
padding: 0 20px;
219+
border-radius: 100px;
220+
cursor: pointer;
221+
transition: opacity 0.2s, transform 0.1s;
222+
display: flex;
223+
align-items: center;
224+
justify-content: center;
225+
}
226+
227+
.submit-button:hover {
228+
opacity: 0.9;
229+
}
230+
231+
.submit-button:active {
232+
transform: scale(0.96);
233+
}
234+
235+
.paste-button {
236+
background: var(--neutral-btn-bg);
237+
color: var(--text-color);
238+
border: none;
239+
padding: 0 20px;
240+
border-radius: 100px;
241+
cursor: pointer;
242+
display: flex;
243+
align-items: center;
244+
justify-content: center;
245+
}
246+
247+
.paste-button:hover {
248+
background: var(--neutral-btn-hover);
249+
}
250+
251+
.custom-button {
252+
display: inline-flex;
253+
align-items: center;
254+
justify-content: center;
255+
width: 100%;
256+
height: 54px;
257+
color: #fff;
258+
text-decoration: none;
259+
border-radius: 18px;
260+
font-weight: 600;
261+
font-size: 1rem;
262+
cursor: pointer;
263+
border: 1px solid var(--glass-border);
264+
background: var(--glass-bg);
265+
backdrop-filter: var(--glass-blur);
266+
-webkit-backdrop-filter: var(--glass-blur);
267+
box-sizing: border-box;
268+
}
269+
270+
.custom-button:hover {
271+
transform: translateY(-2px);
272+
background: rgba(255, 255, 255, 0.12);
273+
border-color: rgba(255, 255, 255, 0.25);
274+
}
275+
276+
.custom-button:active {
277+
transform: translateY(0);
278+
}
279+
280+
.custom-button.sidestore { background-color: rgba(164, 5, 250, 0.6); border-color: rgba(164, 5, 250, 0.8); }
281+
.custom-button.sidestore:hover { background-color: rgba(164, 5, 250, 0.8); }
282+
283+
.custom-button.altstore { background-color: rgba(1, 128, 132, 0.6); border-color: rgba(1, 128, 132, 0.8); }
284+
.custom-button.altstore:hover { background-color: rgba(1, 128, 132, 0.8); }
285+
286+
.custom-button.stikstore { background-color: rgba(59, 134, 247, 0.6); border-color: rgba(59, 134, 247, 0.8); }
287+
.custom-button.stikstore:hover { background-color: rgba(59, 134, 247, 0.8); }
288+
289+
.custom-button.livecontainer { background-color: rgba(7, 132, 252, 0.6); border-color: rgba(7, 132, 252, 0.8); }
290+
.custom-button.livecontainer:hover { background-color: rgba(7, 132, 252, 0.8); }
291+
292+
.custom-button.feather { background-color: rgba(132, 142, 249, 0.6); border-color: rgba(132, 142, 249, 0.8); }
293+
.custom-button.feather:hover { background-color: rgba(132, 142, 249, 0.8); }
294+
295+
.custom-button.neutral { background-color: var(--neutral-btn-bg); color: var(--text-color); }
296+
.custom-button.neutral:hover { background-color: var(--neutral-btn-hover); }
297+
298+
.error {
299+
color: #ff453a;
300+
font-size: 0.9rem;
301+
margin-top: 12px;
302+
background: rgba(255, 69, 58, 0.1);
303+
padding: 8px 16px;
304+
border-radius: 12px;
305+
border: 1px solid rgba(255, 69, 58, 0.2);
306+
}
307+
308+
.credit {
309+
margin-top: 20px;
310+
font-size: 12px;
311+
color: var(--secondary-text);
312+
background: var(--glass-bg);
313+
padding: 8px 12px;
314+
border-radius: 12px;
315+
backdrop-filter: var(--glass-blur);
316+
-webkit-backdrop-filter: var(--glass-blur);
317+
border: 1px solid var(--glass-border);
318+
}
319+
320+
.credit a {
321+
color: var(--text-color);
322+
text-decoration: none;
323+
opacity: 0.8;
324+
transition: opacity 0.2s;
325+
}
326+
327+
.credit a:hover {
328+
opacity: 1;
329+
text-decoration: underline;
330+
}

0 commit comments

Comments
 (0)