Skip to content

Commit a82406f

Browse files
supriya46788supriya46788
authored
Merge pull request #675 from VinothanaBalakrishnan05/uiissue
 Fixed Login and Sign in Button UI inconsistency
2 parents 6f38f9d + 29a4e6b commit a82406f

File tree

2 files changed

+83
-61
lines changed

2 files changed

+83
-61
lines changed

‎assets/css/about.css‎

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ body.dark-mode .footer-section h3.footer-title::after {
104104
}
105105
.login-btn {
106106

107-
background-color: #5C4033;
107+
background-color: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
108108
color: white;
109109
text-decoration: none;
110110
padding: 0.7rem 1.5rem;
@@ -114,7 +114,7 @@ body.dark-mode .footer-section h3.footer-title::after {
114114
display: flex;
115115
align-items: center;
116116
gap: 0.5rem;
117-
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
117+
box-shadow: 0 4px 15px #402a26;
118118
border: 2px solid transparent;
119119

120120
height: 43.599999999999994px;
@@ -123,8 +123,8 @@ body.dark-mode .footer-section h3.footer-title::after {
123123

124124
.login-btn:hover {
125125
transform: translateY(-3px);
126-
box-shadow: 0 8px 25px #cf622f;
127-
background-color:#5C4033;
126+
box-shadow: 0 4px 15px #402a26;
127+
background-color:linear-gradient(90deg, #543732, #3d2b28, #341d19);
128128

129129
}
130130

@@ -1740,7 +1740,7 @@ body.about-page.dark-mode li {
17401740

17411741
.login-btn {
17421742

1743-
background-color:#5C4033;
1743+
background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
17441744
color: white;
17451745
text-decoration: none;
17461746
padding: 0.7rem 1.5rem;
@@ -1750,18 +1750,18 @@ body.about-page.dark-mode li {
17501750
display: flex;
17511751
align-items: center;
17521752
gap: 0.5rem;
1753-
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
1753+
box-shadow: 0 4px 15px #402a26;
17541754
border: 2px solid transparent;
17551755
}
17561756

17571757
.login-btn:hover {
17581758
transform: translateY(-3px);
1759-
box-shadow: 0 8px 25px #cf622f;
1760-
background-color:#5C4033;
1759+
box-shadow: 0 8px 25px #624844;
1760+
background-color: linear-gradient(90deg, #543732, #3d2b28, #341d19);
17611761
}
17621762

17631763
body.dark-mode .login-btn {
1764-
background-color: #e0e0e0;
1764+
background: #e0e0e0;
17651765
color: #0d0d0d !important;
17661766
text-decoration: none;
17671767
padding: 0.7rem 1.5rem;
@@ -1782,7 +1782,7 @@ body.about-page.dark-mode li {
17821782
}
17831783

17841784
.signup-btn {
1785-
background: linear-gradient(45deg, var(--sky-blue), var(--mint-green));
1785+
background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
17861786
color: white;
17871787
text-decoration: none;
17881788
padding: 0.7rem 1.5rem;
@@ -1792,25 +1792,25 @@ body.about-page.dark-mode li {
17921792
display: flex;
17931793
align-items: center;
17941794
gap: 0.5rem;
1795-
box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
1795+
box-shadow: 0 4px 15px #402a26;
17961796
border: 2px solid transparent;
17971797
}
17981798

17991799
.signup-btn:hover {
18001800
transform: translateY(-3px);
1801-
box-shadow: 0 8px 25px rgba(78, 205, 196, 0.4);
1802-
background: linear-gradient(45deg, var(--mint-green), var(--sky-blue));
1801+
box-shadow: 0 8px 25px #624844;
1802+
background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
18031803
border-color: rgba(255, 255, 255, 0.3);
18041804
}
18051805

18061806
body.dark-mode .signup-btn {
1807-
background: linear-gradient(45deg, #16a085, #1abc9c);
1808-
box-shadow: 0 4px 15px rgba(22, 160, 133, 0.3);
1807+
background: #e0e0e0;
1808+
box-shadow: 0 2px 2px #e0e0e0;
18091809
}
18101810

18111811
body.dark-mode .signup-btn:hover {
1812-
background: linear-gradient(45deg, #1abc9c, #16a085);
1813-
box-shadow: 0 8px 25px rgba(22, 160, 133, 0.4);
1812+
background: #e0e0e0;
1813+
box-shadow: 0 2px 2px #e0e0e0;
18141814
}
18151815

18161816
.hamburger {
@@ -2415,7 +2415,7 @@ body.about-page.dark-mode li {
24152415
max-width: 550px;
24162416
width: 90%;
24172417
padding: 2.5rem 2rem;
2418-
box-shadow: var(--shadow-medium);
2418+
box-shadow: 0 4px 15px #402a26;
24192419
position: relative;
24202420
overflow: hidden;
24212421
}
@@ -2427,7 +2427,7 @@ body.about-page.dark-mode li {
24272427
left: 0;
24282428
right: 0;
24292429
height: 4px;
2430-
background: linear-gradient(90deg, var(--sky-blue), var(--candy-red), var(--sunny-yellow), var(--mint-green));
2430+
background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
24312431
}
24322432

24332433
.close-btn {
@@ -2458,7 +2458,18 @@ body.about-page.dark-mode li {
24582458
font-size: 2rem;
24592459
font-weight: 600;
24602460
color: var(--text-dark);
2461-
background: linear-gradient(135deg, var(--candy-red), var(--sky-blue));
2461+
background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
2462+
-webkit-background-clip: text;
2463+
-webkit-text-fill-color: transparent;
2464+
background-clip: text;
2465+
}
2466+
body.dark-mode .form-title {
2467+
text-align: center;
2468+
margin-bottom: 2rem;
2469+
font-size: 2rem;
2470+
font-weight: 600;
2471+
color: var(--text-dark);
2472+
background: #e0e0e0;
24622473
-webkit-background-clip: text;
24632474
-webkit-text-fill-color: transparent;
24642475
background-clip: text;
@@ -2550,7 +2561,7 @@ body.about-page.dark-mode li {
25502561

25512562
.submit-btn {
25522563
width: 100%;
2553-
background: linear-gradient(45deg, var(--candy-red), var(--sunny-yellow));
2564+
background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
25542565
color: white;
25552566
font-weight: 600;
25562567
border: none;
@@ -2572,14 +2583,14 @@ body.about-page.dark-mode li {
25722583
left: -100%;
25732584
width: 100%;
25742585
height: 100%;
2575-
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
2586+
background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
25762587
transition: left 0.5s;
25772588
}
25782589

25792590
.submit-btn:hover {
2580-
background: linear-gradient(45deg, var(--sunny-yellow), var(--candy-red));
2591+
background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
25812592
transform: translateY(-2px);
2582-
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
2593+
box-shadow: 0 8px 25px #402a26;
25832594
}
25842595

25852596
.submit-btn:hover::before {
@@ -2597,7 +2608,7 @@ body.about-page.dark-mode li {
25972608
}
25982609

25992610
.toggle-link {
2600-
color: var(--candy-red);
2611+
color: #734e47;
26012612
font-weight: 600;
26022613
cursor: pointer;
26032614
text-decoration: none;
@@ -2612,17 +2623,17 @@ body.about-page.dark-mode li {
26122623
left: 0;
26132624
width: 0;
26142625
height: 2px;
2615-
background: var(--candy-red);
2626+
background: #734e47;
26162627
transition: width 0.3s ease;
26172628
}
26182629

26192630
.toggle-link:hover {
2620-
color: var(--sunny-yellow);
2631+
color: #835951;
26212632
}
26222633

26232634
.toggle-link:hover::after {
26242635
width: 100%;
2625-
background: var(--sunny-yellow);
2636+
background: #835951;
26262637
}
26272638

26282639
/* Show/Hide Password */
@@ -2643,15 +2654,15 @@ body.about-page.dark-mode li {
26432654
}
26442655

26452656
.signup-btn {
2646-
background: linear-gradient(45deg, var(--sky-blue), var(--sunny-yellow));
2657+
background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
26472658
text-align: center !important;
26482659
display: flex;
26492660
justify-content: center;
26502661
align-items: center;
26512662
}
26522663

26532664
.signup-btn:hover {
2654-
background: linear-gradient(45deg, var(--sunny-yellow), var(--sky-blue));
2665+
background:linear-gradient(90deg, #543732, #3d2b28, #341d19);
26552666
box-shadow: 0 8px 25px rgba(78, 205, 196, 0.3);
26562667
}
26572668

0 commit comments

Comments
 (0)