Skip to content

Commit 1e232ef

Browse files
sauravhathisauravhathi
committed
Committing dist/ui/settings.css
1 parent 9d6d77e commit 1e232ef

File tree

1 file changed

+188
-0
lines changed

1 file changed

+188
-0
lines changed

‎dist/ui/settings.css‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
:root {
2+
--primary-color: #00ff00;
3+
--secondary-color: #1f1f1f;
4+
--background-color: #121212;
5+
--text-color: #eaeaea;
6+
}
7+
8+
body {
9+
margin: 0;
10+
background: var(--background-color);
11+
color: var(--text-color);
12+
min-height: 100vh;
13+
display: flex;
14+
justify-content: center;
15+
}
16+
17+
.container {
18+
width: 100%;
19+
max-width: 600px;
20+
height: fit-content;
21+
background: var(--secondary-color);
22+
border-radius: 16px;
23+
box-shadow: 0 0 14px rgba(0, 255, 0, 0.15);
24+
overflow: hidden;
25+
display: flex;
26+
flex-direction: column;
27+
}
28+
29+
header {
30+
background: #111;
31+
padding: 12px 20px;
32+
display: flex;
33+
align-items: center;
34+
justify-content: space-between;
35+
}
36+
37+
header h1 {
38+
color: var(--primary-color);
39+
font-size: 20px;
40+
margin: 0;
41+
}
42+
43+
/* Tabs */
44+
.tabs {
45+
display: flex;
46+
border-bottom: 1px solid #333;
47+
background: #181818;
48+
}
49+
50+
.tab {
51+
flex: 1;
52+
padding: 10px;
53+
text-align: center;
54+
color: #ccc;
55+
cursor: pointer;
56+
transition: background 0.2s, color 0.2s;
57+
font-weight: 500;
58+
}
59+
60+
.tab.active {
61+
background: var(--primary-color);
62+
color: #000;
63+
font-weight: 700;
64+
}
65+
66+
.tab-content {
67+
display: none;
68+
padding: 20px;
69+
animation: fadeIn 0.3s ease;
70+
}
71+
72+
.tab-content.active {
73+
display: block;
74+
}
75+
76+
@keyframes fadeIn {
77+
from {
78+
opacity: 0;
79+
transform: translateY(10px);
80+
}
81+
82+
to {
83+
opacity: 1;
84+
transform: translateY(0);
85+
}
86+
}
87+
88+
section {
89+
margin-bottom: 24px;
90+
}
91+
92+
h3 {
93+
color: var(--primary-color);
94+
margin-bottom: 12px;
95+
}
96+
97+
label {
98+
font-size: 14px;
99+
color: #bbb;
100+
display: block;
101+
margin-bottom: 4px;
102+
}
103+
104+
input,
105+
select {
106+
height: 40px;
107+
line-height: 1.2;
108+
font-size: 14px;
109+
padding: 0 12px;
110+
border: 1px solid #333;
111+
border-radius: 8px;
112+
background: #1e1e1e;
113+
color: #fff;
114+
}
115+
116+
input:focus,
117+
select:focus {
118+
border-color: var(--primary-color);
119+
box-shadow: 0 0 6px rgba(0, 255, 0, 0.3);
120+
outline: none;
121+
}
122+
123+
#saveBtn {
124+
width: 100%;
125+
padding: 12px;
126+
background: var(--primary-color);
127+
color: #000;
128+
font-weight: 600;
129+
border: none;
130+
border-radius: 8px;
131+
cursor: pointer;
132+
transition: 0.2s;
133+
}
134+
135+
#saveBtn:hover {
136+
background: #00e600;
137+
transform: scale(1.02);
138+
}
139+
140+
#status {
141+
margin-top: 10px;
142+
text-align: center;
143+
color: var(--primary-color);
144+
font-size: 14px;
145+
}
146+
147+
@media (max-width: 480px) {
148+
.tab {
149+
font-size: 13px;
150+
padding: 8px;
151+
}
152+
}
153+
154+
.hidden { display: none; }
155+
156+
#backupProgressContainer {
157+
margin-top: 20px;
158+
background: #1e1e1e;
159+
padding: 12px 16px;
160+
border-radius: 12px;
161+
box-shadow: 0 2px 10px rgba(0, 255, 0, 0.1);
162+
display: flex;
163+
flex-direction: column;
164+
gap: 8px;
165+
}
166+
167+
#backupProgressText {
168+
color: var(--primary-color);
169+
font-weight: 500;
170+
font-size: 14px;
171+
text-align: center;
172+
}
173+
174+
#backupProgressBar {
175+
width: 100%;
176+
height: 16px;
177+
background: #333;
178+
border-radius: 8px;
179+
overflow: hidden;
180+
}
181+
182+
#backupProgressFill {
183+
width: 0%;
184+
height: 100%;
185+
background: linear-gradient(90deg, #00ff00, #00cc00);
186+
border-radius: 8px;
187+
transition: width 0.3s ease;
188+
}

0 commit comments

Comments
 (0)