Skip to content

Commit 4df430c

Browse files
authored
Merge pull request #176 from My-Mation/language-button-improvement
Improve language selection button attractiveness
2 parents 5324c16 + a5df1e1 commit 4df430c

8 files changed

Lines changed: 30 additions & 9 deletions

File tree

.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5503
3+
}

adventures.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@
147147
<select
148148
id="language"
149149
onchange="changeLanguage()"
150-
style="background-color: #1db954; color: #fff"
151150
>
152151
<option value="en">English</option>
153152
<option value="fr">Français</option>

fs.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@
147147
<select
148148
id="language"
149149
onchange="changeLanguage()"
150-
style="background-color: #1db954; color: #fff"
151150
>
152151
<option value="en">English</option>
153152
<option value="fr">Français</option>

gd.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,6 @@
151151
<select
152152
id="language"
153153
onchange="changeLanguageLocally()"
154-
style="background-color: #1db954; color: #fff"
155154
>
156155
<option value="en">English</option>
157156
<option value="fr">Français</option>

index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,6 @@
107107
<select
108108
id="language"
109109
onchange="changeLanguage()"
110-
style="background-color: #1db954; color: #fff"
111110
>
112111
<option value="en">English</option>
113112
<option value="fr">Français</option>

pbd.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,6 @@
148148
<select
149149
id="language"
150150
onchange="changeLanguage()"
151-
style="background-color: #1db954; color: #fff"
152151
>
153152
<option value="en">English</option>
154153
<option value="fr">Français</option>

rdpd.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@
147147
<select
148148
id="language"
149149
onchange="changeLanguage()"
150-
style="background-color: #1db954; color: #fff"
151150
>
152151
<option value="en">English</option>
153152
<option value="fr">Français</option>

style.css

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,13 +117,37 @@ li:hover {
117117

118118
.language-selector {
119119
margin: 20px;
120+
position: relative;
120121
}
121122

122123
.language-selector select {
123-
padding: 10px;
124-
font-size: 10px;
125-
border-radius: 7px;
124+
padding: 12px 16px;
125+
font-size: 16px;
126+
border-radius: 25px;
126127
font-weight: 500;
128+
border: 2px solid #1db954;
129+
background-color: #1db954;
130+
color: #fff;
131+
cursor: pointer;
132+
transition: all 0.3s ease;
133+
appearance: none; /* Remove default arrow */
134+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
135+
background-repeat: no-repeat;
136+
background-position: right 10px center;
137+
background-size: 20px;
138+
padding-right: 40px; /* Space for the icon */
139+
}
140+
141+
.language-selector select:hover {
142+
background-color: #25a56a;
143+
border-color: #25a56a;
144+
transform: translateY(-2px);
145+
box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
146+
}
147+
148+
.language-selector select:focus {
149+
outline: none;
150+
box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.5);
127151
}
128152

129153
body {

0 commit comments

Comments
 (0)