Skip to content

Commit 5e4e113

Browse files
Adez017Adez017
committed
Add dark mode support and improve UI styling
Introduces CSS variables and dark mode styles for main UI components, including loan guide sections, loan cards, and language select. Updates main.html to use CSS variables for colors and backgrounds, refines transitions, and enhances visual consistency for both light and dark themes.
1 parent 40e0db6 commit 5e4e113

2 files changed

Lines changed: 325 additions & 21 deletions

File tree

‎main.css‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,175 @@
1+
:root {
2+
--bg-primary: #ffffff;
3+
--bg-secondary: #f6f9f6;
4+
--text-primary: #333333;
5+
--text-secondary: #666666;
6+
--loan-guide-bg: #ffffff;
7+
--loan-guide-text: #333333;
8+
--loan-guide-secondary: #666666;
9+
}
10+
11+
[data-theme="dark"] {
12+
--bg-primary: #1a1a1a;
13+
--bg-secondary: #2d2d2d;
14+
--text-primary: #ffffff;
15+
--text-secondary: #cccccc;
16+
--loan-guide-bg: #2d2d2d;
17+
--loan-guide-text: #ffffff;
18+
--loan-guide-secondary: #cccccc;
19+
}
20+
21+
/* Update your existing loan guide styles */
22+
.loan-guide-section {
23+
text-align: center;
24+
margin-top: 50px;
25+
background: var(--loan-guide-bg) !important; /* Force override */
26+
padding: 30px;
27+
border-radius: 8px;
28+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
29+
color: var(--loan-guide-text) !important; /* Force text color */
30+
transition: all 0.3s ease;
31+
}
32+
33+
/* Ensure all text in loan guide section uses proper colors */
34+
.loan-guide-section h1,
35+
.loan-guide-section h2,
36+
.loan-guide-section h3 {
37+
color: var(--loan-guide-text) !important;
38+
margin-bottom: 1rem;
39+
}
40+
41+
.loan-guide-section p {
42+
color: var(--loan-guide-secondary) !important;
43+
margin-bottom: 1rem;
44+
}
45+
46+
/* Fix the header text in loan guide */
47+
.container header h1 {
48+
color: var(--loan-guide-text) !important;
49+
font-size: 2.5rem;
50+
font-weight: 600;
51+
margin-bottom: 1rem;
52+
}
53+
54+
.container header p {
55+
color: var(--loan-guide-secondary) !important;
56+
font-size: 1.1rem;
57+
margin-bottom: 2rem;
58+
}
59+
60+
/* Update loan cards to work with dark mode */
61+
.loan-card {
62+
background: var(--bg-primary);
63+
border: 1px solid rgba(76, 175, 80, 0.2);
64+
color: var(--text-primary);
65+
border-radius: 8px;
66+
overflow: hidden;
67+
text-align: center;
68+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
69+
transition: all 0.3s ease;
70+
}
71+
72+
.loan-card span {
73+
display: block;
74+
padding: 15px;
75+
font-weight: 600;
76+
background: rgba(76, 175, 80, 0.1);
77+
color: var(--text-primary) !important;
78+
border-top: 1px solid rgba(76, 175, 80, 0.2);
79+
}
80+
81+
.loan-card:hover {
82+
transform: translateY(-5px);
83+
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.2);
84+
border-color: rgba(76, 175, 80, 0.4);
85+
}
86+
87+
/* Language select styling for dark mode */
88+
select.language-select {
89+
padding: 8px 12px;
90+
border-radius: 5px;
91+
margin-left: 10px;
92+
border: 2px solid rgba(76, 175, 80, 0.3);
93+
background: var(--bg-primary);
94+
color: var(--text-primary);
95+
font-family: inherit;
96+
transition: all 0.3s ease;
97+
}
98+
99+
select.language-select:focus {
100+
outline: none;
101+
border-color: #4caf50;
102+
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
103+
}
104+
105+
/* Dark mode specific overrides */
106+
[data-theme="dark"] .loan-guide-section {
107+
background: #2d2d2d !important;
108+
border: 1px solid #404040;
109+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
110+
}
111+
112+
[data-theme="dark"] .loan-card {
113+
background: #3d3d3d;
114+
border-color: #505050;
115+
}
116+
117+
[data-theme="dark"] .loan-card span {
118+
background: rgba(76, 175, 80, 0.2);
119+
color: #ffffff !important;
120+
border-top-color: #505050;
121+
}
122+
123+
[data-theme="dark"] select.language-select {
124+
background: #3d3d3d;
125+
border-color: #505050;
126+
color: #ffffff;
127+
}
128+
129+
[data-theme="dark"] select.language-select option {
130+
background: #3d3d3d;
131+
color: #ffffff;
132+
}
133+
134+
/* Ensure button text is always visible */
135+
.btn-green {
136+
display: inline-block;
137+
background: linear-gradient(135deg, #2e7d32, #4caf50);
138+
color: #fff !important;
139+
padding: 12px 24px;
140+
border-radius: 25px;
141+
text-decoration: none;
142+
font-weight: 600;
143+
transition: all 0.3s ease;
144+
border: none;
145+
cursor: pointer;
146+
box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
147+
}
148+
149+
.btn-green:hover {
150+
background: linear-gradient(135deg, #1b5e20, #2e7d32);
151+
transform: translateY(-2px);
152+
box-shadow: 0 4px 15px rgba(46, 125, 50, 0.4);
153+
color: #fff !important;
154+
}
155+
156+
/* Additional container styling for better dark mode support */
157+
.container {
158+
width: 90%;
159+
max-width: 1100px;
160+
margin: auto;
161+
padding: 20px;
162+
background: var(--bg-secondary);
163+
border-radius: 10px;
164+
margin-top: 2rem;
165+
margin-bottom: 2rem;
166+
}
167+
168+
[data-theme="dark"] .container {
169+
background: #1f1f1f;
170+
border: 1px solid #404040;
171+
}
172+
1173
* {
2174
box-sizing: border-box;
3175
margin: 0;

0 commit comments

Comments
 (0)