Skip to content

Commit 1f9b726

Browse files
gcclinuxgcclinux
committed
changed button theme colour
1 parent de8dec6 commit 1f9b726

File tree

3 files changed

+258
-5
lines changed

3 files changed

+258
-5
lines changed

‎button-style-options.css‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
/* ============================================
2+
MODERN BUTTON STYLE OPTIONS FOR EASYEDIT
3+
============================================
4+
5+
Choose one of the 4 options below and replace the
6+
.button-mermaid styles in App.css
7+
============================================ */
8+
9+
10+
/* ============================================
11+
OPTION 1: Modern Gradient (Purple to Blue)
12+
============================================ */
13+
.button-mermaid-option1 {
14+
margin-top: 4px;
15+
margin-bottom: 2px;
16+
height: 32px;
17+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18+
color: white;
19+
font-family: Arial, sans-serif;
20+
font-size: 16px;
21+
font-weight: 500;
22+
font-style: normal;
23+
text-decoration: none;
24+
display: inline-flex;
25+
align-items: center;
26+
justify-content: center;
27+
padding: 0 10px;
28+
border: none;
29+
border-radius: 6px;
30+
cursor: pointer;
31+
transition: all 0.3s ease;
32+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
33+
}
34+
35+
.button-mermaid-option1:hover {
36+
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
37+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
38+
transform: translateY(-1px);
39+
}
40+
41+
.button-mermaid-option1:active {
42+
transform: translateY(0);
43+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
44+
}
45+
46+
47+
/* ============================================
48+
OPTION 2: Flat Modern (Slate Gray)
49+
============================================ */
50+
.button-mermaid-option2 {
51+
margin-top: 4px;
52+
margin-bottom: 2px;
53+
height: 32px;
54+
background-color: #475569;
55+
color: white;
56+
font-family: Arial, sans-serif;
57+
font-size: 16px;
58+
font-weight: 500;
59+
font-style: normal;
60+
text-decoration: none;
61+
display: inline-flex;
62+
align-items: center;
63+
justify-content: center;
64+
padding: 0 10px;
65+
border: none;
66+
border-radius: 6px;
67+
cursor: pointer;
68+
transition: all 0.2s ease;
69+
}
70+
71+
.button-mermaid-option2:hover {
72+
background-color: #334155;
73+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
74+
}
75+
76+
.button-mermaid-option2:active {
77+
background-color: #1e293b;
78+
}
79+
80+
81+
/* ============================================
82+
OPTION 3: Vibrant Teal
83+
============================================ */
84+
.button-mermaid-option3 {
85+
margin-top: 4px;
86+
margin-bottom: 2px;
87+
height: 32px;
88+
background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
89+
color: white;
90+
font-family: Arial, sans-serif;
91+
font-size: 16px;
92+
font-weight: 500;
93+
font-style: normal;
94+
text-decoration: none;
95+
display: inline-flex;
96+
align-items: center;
97+
justify-content: center;
98+
padding: 0 10px;
99+
border: none;
100+
border-radius: 8px;
101+
cursor: pointer;
102+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
103+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
104+
}
105+
106+
.button-mermaid-option3:hover {
107+
background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
108+
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
109+
transform: translateY(-2px);
110+
}
111+
112+
.button-mermaid-option3:active {
113+
transform: translateY(0);
114+
}
115+
116+
117+
/* ============================================
118+
OPTION 4: Dark Modern with Border
119+
============================================ */
120+
.button-mermaid-option4 {
121+
margin-top: 4px;
122+
margin-bottom: 2px;
123+
height: 32px;
124+
background-color: #1f2937;
125+
color: #e5e7eb;
126+
font-family: Arial, sans-serif;
127+
font-size: 16px;
128+
font-weight: 500;
129+
font-style: normal;
130+
text-decoration: none;
131+
display: inline-flex;
132+
align-items: center;
133+
justify-content: center;
134+
padding: 0 10px;
135+
border: 1px solid #374151;
136+
border-radius: 6px;
137+
cursor: pointer;
138+
transition: all 0.2s ease;
139+
}
140+
141+
.button-mermaid-option4:hover {
142+
background-color: #374151;
143+
border-color: #4b5563;
144+
color: white;
145+
}
146+
147+
.button-mermaid-option4:active {
148+
background-color: #111827;
149+
border-color: #374151;
150+
}
151+
152+
153+
/* ============================================
154+
BONUS: Apply to all button types
155+
============================================
156+
157+
If you want to update ALL buttons (not just .button-mermaid),
158+
you can also update these classes with similar styles:
159+
160+
- .fixed-menubar-btn
161+
- .menu-item
162+
- .button
163+
- .button-auto
164+
- .button-html
165+
- .button-format
166+
167+
Example for fixed-menubar-btn using Option 1 style:
168+
============================================ */
169+
170+
.fixed-menubar-btn-option1 {
171+
width: 188px;
172+
height: 35px;
173+
box-sizing: border-box;
174+
padding: 4px 4px;
175+
display: inline-flex;
176+
align-items: center;
177+
justify-content: center;
178+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
179+
color: white;
180+
border: none;
181+
border-radius: 6px;
182+
cursor: pointer;
183+
transition: all 0.3s ease;
184+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
185+
font-weight: 500;
186+
}
187+
188+
.fixed-menubar-btn-option1:hover {
189+
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
190+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
191+
transform: translateY(-1px);
192+
}
193+
194+
.fixed-menubar-btn-option1:active {
195+
transform: translateY(0);
196+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
197+
}
198+
199+
.fixed-menubar-btn-option1:disabled {
200+
opacity: 0.5;
201+
cursor: not-allowed;
202+
transform: none;
203+
}

‎src/App.css‎

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,31 @@ html,
232232
display: inline-flex;
233233
align-items: center;
234234
justify-content: center;
235+
background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
236+
color: white;
237+
border: none;
238+
border-radius: 6px;
239+
cursor: pointer;
240+
transition: all 0.3s ease;
241+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
242+
font-weight: 500;
243+
}
244+
245+
.fixed-menubar-btn:hover {
246+
background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
247+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
248+
transform: translateY(-1px);
249+
}
250+
251+
.fixed-menubar-btn:active {
252+
transform: translateY(0);
253+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
254+
}
255+
256+
.fixed-menubar-btn:disabled {
257+
opacity: 0.5;
258+
cursor: not-allowed;
259+
transform: none;
235260
}
236261

237262

@@ -377,19 +402,33 @@ html,
377402
margin-top: 4px;
378403
margin-bottom: 2px;
379404
height: 32px;
380-
background-color: rgb(19, 0, 128);
405+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
381406
color: white;
382407
font-family: Arial, sans-serif;
383408
font-size: 16px;
384-
font-weight: normal;
409+
font-weight: 500;
385410
font-style: normal;
386411
text-decoration: none;
387412
display: inline-flex;
388413
align-items: center;
389414
justify-content: center;
390415
padding: 0 10px;
391416
border: none;
417+
border-radius: 6px;
392418
cursor: pointer;
419+
transition: all 0.3s ease;
420+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
421+
}
422+
423+
.button-mermaid:hover {
424+
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
425+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
426+
transform: translateY(-1px);
427+
}
428+
429+
.button-mermaid:active {
430+
transform: translateY(0);
431+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
393432
}
394433

395434
.button-auto {
@@ -558,13 +597,24 @@ html,
558597
padding: 10px 14px;
559598
text-decoration: none;
560599
font-size: 17px;
561-
background-color: rgb(59, 59, 61);
600+
background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
562601
border: none;
602+
border-radius: 6px;
563603
cursor: pointer;
604+
transition: all 0.3s ease;
605+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
606+
font-weight: 500;
564607
}
565608

566609
.menu-item:hover {
567-
background-color: #7d7d7d;
610+
background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
611+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
612+
transform: translateY(-1px);
613+
}
614+
615+
.menu-item:active {
616+
transform: translateY(0);
617+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
568618
}
569619

570620
.dropdown-container {

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -809,7 +809,7 @@ const App = () => {
809809

810810
setShowHelpDropdown(false);
811811
}}>
812-
<div className="hdr-title"><FaHeart /> Buy me a coffee ★</div>
812+
<div className="hdr-title"><FaHeart /> Buy me a coffee</div>
813813
<div className="hdr-desc">Sponsor the project</div>
814814
</button>
815815
<div className="hdr-sep" />

0 commit comments

Comments
 (0)