Skip to content

Commit 93843b5

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request steam-bell-92#1316 from Alvi24-hub/main
Fix: Consistent button styling
2 parents b73b2b7 + 1464c5a commit 93843b5

6 files changed

Lines changed: 528 additions & 419 deletions

File tree

‎web-app/css/styles.css‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6778,3 +6778,188 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
67786778
border-color: var(--danger);
67796779
color: var(--danger);
67806780
}
6781+
}
6782+
6783+
/* ============================================
6784+
FIX: Coordinate to Polar Convert Button - GREEN GLOW
6785+
============================================ */
6786+
.coord-actions .btn-primary#convertCoordinateBtn {
6787+
background: linear-gradient(135deg, #22c55e, #16a34a) !important;
6788+
color: #ffffff !important;
6789+
border: none !important;
6790+
padding: 16px 44px !important;
6791+
border-radius: 50px !important;
6792+
cursor: pointer !important;
6793+
font-size: 1.1rem !important;
6794+
font-weight: 700 !important;
6795+
transition: all 0.3s ease !important;
6796+
box-shadow: 0 0 30px rgba(34, 197, 94, 0.35), 0 4px 20px rgba(34, 197, 94, 0.25) !important;
6797+
min-width: 180px !important;
6798+
height: auto !important;
6799+
line-height: 1.5 !important;
6800+
letter-spacing: 0.5px !important;
6801+
text-transform: none !important;
6802+
font-family: 'Space Grotesk', system-ui, sans-serif !important;
6803+
}
6804+
6805+
.coord-actions .btn-primary#convertCoordinateBtn:hover {
6806+
transform: translateY(-4px) !important;
6807+
box-shadow: 0 0 50px rgba(34, 197, 94, 0.5), 0 8px 35px rgba(34, 197, 94, 0.4) !important;
6808+
background: linear-gradient(135deg, #4ade80, #22c55e) !important;
6809+
color: #ffffff !important;
6810+
}
6811+
6812+
.coord-actions .btn-primary#convertCoordinateBtn:active {
6813+
transform: scale(0.95) !important;
6814+
box-shadow: 0 0 20px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
6815+
}
6816+
6817+
/* ============================================
6818+
FIX: AP/GP/AGP/HP Recognizer - Recognize Button - GREEN GLOW
6819+
============================================ */
6820+
#recognizeProgressionBtn {
6821+
background: linear-gradient(135deg, #22c55e, #16a34a) !important;
6822+
color: #ffffff !important;
6823+
border: none !important;
6824+
padding: 16px 48px !important;
6825+
border-radius: 50px !important;
6826+
cursor: pointer !important;
6827+
font-size: 1.1rem !important;
6828+
font-weight: 700 !important;
6829+
transition: all 0.3s ease !important;
6830+
box-shadow: 0 0 30px rgba(34, 197, 94, 0.35), 0 4px 20px rgba(34, 197, 94, 0.25) !important;
6831+
min-width: 200px !important;
6832+
letter-spacing: 0.5px !important;
6833+
font-family: 'Space Grotesk', system-ui, sans-serif !important;
6834+
display: inline-flex !important;
6835+
align-items: center !important;
6836+
justify-content: center !important;
6837+
gap: 8px !important;
6838+
line-height: 1.5 !important;
6839+
}
6840+
6841+
#recognizeProgressionBtn:hover {
6842+
transform: translateY(-4px) !important;
6843+
box-shadow: 0 0 50px rgba(34, 197, 94, 0.5), 0 8px 35px rgba(34, 197, 94, 0.4) !important;
6844+
background: linear-gradient(135deg, #4ade80, #22c55e) !important;
6845+
color: #ffffff !important;
6846+
}
6847+
6848+
#recognizeProgressionBtn:active {
6849+
transform: scale(0.95) !important;
6850+
box-shadow: 0 0 20px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
6851+
}
6852+
6853+
/* ============================================
6854+
FIX: Derivative Calculator - All Buttons - GREEN GLOW (Smaller)
6855+
============================================ */
6856+
#calcFirstDerivativeBtn,
6857+
#calcNthDerivativeBtn,
6858+
#evalDerivativeBtn {
6859+
background: linear-gradient(135deg, #22c55e, #16a34a) !important;
6860+
color: #ffffff !important;
6861+
border: none !important;
6862+
padding: 10px 22px !important;
6863+
border-radius: 50px !important;
6864+
cursor: pointer !important;
6865+
font-size: 0.9rem !important;
6866+
font-weight: 600 !important;
6867+
transition: all 0.3s ease !important;
6868+
box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 4px 12px rgba(34, 197, 94, 0.2) !important;
6869+
min-width: 120px !important;
6870+
letter-spacing: 0.3px !important;
6871+
font-family: 'Space Grotesk', system-ui, sans-serif !important;
6872+
display: inline-flex !important;
6873+
align-items: center !important;
6874+
justify-content: center !important;
6875+
gap: 6px !important;
6876+
line-height: 1.5 !important;
6877+
}
6878+
6879+
#calcFirstDerivativeBtn:hover,
6880+
#calcNthDerivativeBtn:hover,
6881+
#evalDerivativeBtn:hover {
6882+
transform: translateY(-3px) !important;
6883+
box-shadow: 0 0 35px rgba(34, 197, 94, 0.5), 0 8px 25px rgba(34, 197, 94, 0.4) !important;
6884+
background: linear-gradient(135deg, #4ade80, #22c55e) !important;
6885+
color: #ffffff !important;
6886+
}
6887+
6888+
#calcFirstDerivativeBtn:active,
6889+
#calcNthDerivativeBtn:active,
6890+
#evalDerivativeBtn:active {
6891+
transform: scale(0.95) !important;
6892+
box-shadow: 0 0 15px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
6893+
}
6894+
6895+
/* ============================================
6896+
FIX: Fibonacci Series - Generate Button - GREEN GLOW (Smaller)
6897+
============================================ */
6898+
#generateFib {
6899+
background: linear-gradient(135deg, #22c55e, #16a34a) !important;
6900+
color: #ffffff !important;
6901+
border: none !important;
6902+
padding: 10px 28px !important;
6903+
border-radius: 50px !important;
6904+
cursor: pointer !important;
6905+
font-size: 0.9rem !important;
6906+
font-weight: 600 !important;
6907+
transition: all 0.3s ease !important;
6908+
box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 4px 12px rgba(34, 197, 94, 0.2) !important;
6909+
min-width: 120px !important;
6910+
letter-spacing: 0.3px !important;
6911+
font-family: 'Space Grotesk', system-ui, sans-serif !important;
6912+
display: inline-flex !important;
6913+
align-items: center !important;
6914+
justify-content: center !important;
6915+
gap: 6px !important;
6916+
line-height: 1.5 !important;
6917+
}
6918+
6919+
#generateFib:hover {
6920+
transform: translateY(-3px) !important;
6921+
box-shadow: 0 0 35px rgba(34, 197, 94, 0.5), 0 8px 25px rgba(34, 197, 94, 0.4) !important;
6922+
background: linear-gradient(135deg, #4ade80, #22c55e) !important;
6923+
color: #ffffff !important;
6924+
}
6925+
6926+
#generateFib:active {
6927+
transform: scale(0.95) !important;
6928+
box-shadow: 0 0 15px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
6929+
}
6930+
6931+
/* ============================================
6932+
FIX: Pascal's Triangle - Generate Button - GREEN GLOW
6933+
============================================ */
6934+
#generatePascal {
6935+
background: linear-gradient(135deg, #22c55e, #16a34a) !important;
6936+
color: #ffffff !important;
6937+
border: none !important;
6938+
padding: 12px 28px !important;
6939+
border-radius: 50px !important;
6940+
cursor: pointer !important;
6941+
font-size: 0.9rem !important;
6942+
font-weight: 600 !important;
6943+
transition: all 0.3s ease !important;
6944+
box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 4px 12px rgba(34, 197, 94, 0.2) !important;
6945+
min-width: 120px !important;
6946+
letter-spacing: 0.3px !important;
6947+
font-family: 'Space Grotesk', system-ui, sans-serif !important;
6948+
display: inline-flex !important;
6949+
align-items: center !important;
6950+
justify-content: center !important;
6951+
gap: 6px !important;
6952+
line-height: 1.5 !important;
6953+
}
6954+
6955+
#generatePascal:hover {
6956+
transform: translateY(-3px) !important;
6957+
box-shadow: 0 0 35px rgba(34, 197, 94, 0.5), 0 8px 25px rgba(34, 197, 94, 0.4) !important;
6958+
background: linear-gradient(135deg, #4ade80, #22c55e) !important;
6959+
color: #ffffff !important;
6960+
}
6961+
6962+
#generatePascal:active {
6963+
transform: scale(0.95) !important;
6964+
box-shadow: 0 0 15px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
6965+
}

‎web-app/js/projects/coordinate-polar-transform.js‎

Lines changed: 10 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function getCoordinatePolarTransformHTML() {
3131
</div>
3232
</div>
3333
34-
<style>
34+
<style>
3535
.coord-polar-container {
3636
text-align: center;
3737
padding: 1.5rem;
@@ -79,42 +79,16 @@ function getCoordinatePolarTransformHTML() {
7979
color: var(--primary-color);
8080
min-height: 1.3rem;
8181
}
82-
#cartesianX{
83-
padding:15px;
84-
border-radius:30px;
85-
outline:none;
86-
background-color:var(--bg-color);
87-
border:1px solid white;
88-
color: var(--text-color);
89-
}
90-
#cartesianY{
91-
padding:15px;
92-
border-radius:30px;
93-
outline:none;
94-
background-color:var(--bg-color);
95-
border:1px solid white;
96-
color: var(--text-color);
97-
}
98-
.btn-primary {
99-
background: var(--primary-color);
100-
color: white;
101-
border: none;
102-
padding: 12px 28px;
103-
border-radius: 30px;
104-
cursor: pointer;
105-
font-weight: 600;
106-
font-size: 1rem;
107-
transition: all 0.2s ease;
108-
}
10982
110-
.btn-primary:hover {
111-
transform: translateY(-2px);
112-
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
113-
filter: brightness(1.05);
114-
}
115-
116-
.btn-primary:active {
117-
transform: translateY(0);
83+
#cartesianX,
84+
#cartesianY {
85+
padding: 15px;
86+
border-radius: 30px;
87+
outline: none;
88+
background-color: var(--bg-color);
89+
border: 1px solid white;
90+
color: var(--text-color);
91+
width: 100%;
11892
}
11993
</style>
12094
`;

‎web-app/js/projects/derivative-calculator.js‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,33 @@ function getDerivativeCalculatorHTML() {
4545
line-height: 1.6;
4646
}
4747
48+
.control-group {
49+
display: flex;
50+
flex-direction: column;
51+
gap: 0.45rem;
52+
text-align: left;
53+
}
54+
55+
.control-group label {
56+
font-weight: 600;
57+
color: var(--text-secondary);
58+
}
59+
60+
.control-group input {
61+
padding: 0.7rem;
62+
border: 2px solid var(--border-color);
63+
border-radius: 10px;
64+
background: var(--surface-color);
65+
color: var(--text-primary);
66+
font-size: 1rem;
67+
width: 100%;
68+
}
69+
4870
.derivative-grid {
4971
display: grid;
5072
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
5173
gap: 1rem;
52-
margin-top: 1rem;
74+
margin: 1rem 0;
5375
}
5476
5577
.derivative-actions {
@@ -70,37 +92,6 @@ function getDerivativeCalculatorHTML() {
7092
min-height: 110px;
7193
line-height: 1.7;
7294
}
73-
input {
74-
padding: 15px;
75-
border-radius: 30px;
76-
background-color: var(--bg-color);
77-
outline: none;
78-
border: 1px solid var(--border-color);
79-
color: var(--text-color);
80-
width: 100%;
81-
}
82-
83-
button {
84-
background: var(--primary-color);
85-
color: white;
86-
border: none;
87-
padding: 12px 24px;
88-
border-radius: 30px;
89-
cursor: pointer;
90-
font-weight: 600;
91-
font-size: 0.95rem;
92-
transition: all 0.2s ease;
93-
}
94-
95-
button:hover {
96-
transform: translateY(-2px);
97-
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
98-
filter: brightness(1.05);
99-
}
100-
101-
button:active {
102-
transform: translateY(0);
103-
}
10495
</style>
10596
`;
10697
}

0 commit comments

Comments
 (0)