add magnifying glass unicode on placeholders

This commit is contained in:
Gerome Matilla 2020-06-05 10:39:40 +08:00
parent db66c1d957
commit 9e61d679f0
6 changed files with 24 additions and 8 deletions

View File

@ -28,6 +28,10 @@
pointer-events var(--transition-speed);
}
#searchBox::placeholder {
font-family: roboto-bold, fantasque-sans-mono;
}
.showSearchBox {
opacity: 1 !important;
top: 100% !important;

View File

@ -107,6 +107,12 @@ html, body {
url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
@font-face {
font-family: 'fantasque-sans-mono';
font-style: normal;
src: url('../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
}
/*Scrollbar*/
/*Placeholder*/

View File

@ -80,6 +80,10 @@
margin: 0;
}
#webMenuSearchBox::placeholder {
font-family: roboto-bold, fantasque-sans-mono;
}
@media screen and (max-width: 580px) {
#webMenuSearchBox {
width: 50vw;

View File

@ -51,7 +51,7 @@
<div id='profileImageContainer'>
<div id='profileImage'></div>
</div>
<input type="text" id="searchBox" autocomplete="off" autofocus="off" placeholder="Type to search"/>
<input type="text" id="searchBox" autocomplete="off" autofocus="off" placeholder=" Search with HiddenWiki"/>
</div>
@ -204,7 +204,7 @@
<div id="webMenu">
<div id="webMenuContainer">
<div id="webMenuSearchBoxContainer">
<input type="text" id="webMenuSearchBox" autocomplete="off" placeholder="Type to search">
<input type="text" id="webMenuSearchBox" autocomplete="off" placeholder="Type to search">
</div>
<div id="webMenuListContainer">

View File

@ -9,32 +9,34 @@ var defaultEngine = localStorage.getItem('searchEngine') || 'google';
let searchQueryPrefix;
var placeholderPrefix = " Search with ";
// Update query string and placeholder
const selectQueryString = () => {
if (defaultEngine === "google") {
searchQueryPrefix = 'http://www.google.com/search?q=';
searchBox.placeholder = "Search with Google";
searchBox.placeholder = placeholderPrefix + "Google";
} else if (defaultEngine === "duckduckgo") {
searchQueryPrefix = 'https://duckduckgo.com/?q=';
searchBox.placeholder = "Search with Duckduckgo";
searchBox.placeholder = placeholderPrefix + "Duckduckgo";
} else if (defaultEngine === "ecosia") {
searchQueryPrefix = 'https://www.ecosia.org/search?q=';
searchBox.placeholder = "Search with Ecosia";
searchBox.placeholder = placeholderPrefix + "Ecosia";
} else if (defaultEngine === "yahoo") {
searchQueryPrefix = 'http://search.yahoo.com/search?p=';
searchBox.placeholder = "Search with Yahoo";
searchBox.placeholder = placeholderPrefix + "Yahoo";
} else if (defaultEngine === "bing") {
searchQueryPrefix = 'https://www.bing.com/search?q=';
searchBox.placeholder = "Search with Bing";
searchBox.placeholder = placeholderPrefix + "Bing";
} else {
searchQueryPrefix = 'http://www.google.com/search?q=';
searchBox.placeholder = "Search with Google";
searchBox.placeholder = placeholderPrefix + "Google";
}
}