fix webpage
This commit is contained in:
@@ -1,13 +1,10 @@
|
||||
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); */
|
||||
|
||||
/* Font fallback that closely matches Inter metrics */
|
||||
/* --- Import and fonts unchanged --- */
|
||||
@font-face {
|
||||
font-family: "Inter Fallback";
|
||||
size-adjust: 107%;
|
||||
ascent-override: 90%;
|
||||
src: local("Arial");
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family:
|
||||
Inter,
|
||||
@@ -27,27 +24,41 @@
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* --- Dark mode color variables --- */
|
||||
--bg-color: #121212; /* Dark background */
|
||||
--text-color: #e2e2e2; /* Light text */
|
||||
--input-bg-color: #1e1e1e; /* Dark input background */
|
||||
--input-border-color: #333; /* Darker border for inputs */
|
||||
--accent-color: #bbb; /* Accent color for links/buttons */
|
||||
--hover-bg-color: #2c2c2c; /* Hover state background color */
|
||||
--active-bg-color: #3a3a3a; /* Active state background color */
|
||||
--success-color: #28a745; /* Green for copy-success feedback */
|
||||
}
|
||||
|
||||
/* --- Normalized layout reset stays the same --- */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
/* --- Modified to Dark mode --- */
|
||||
body {
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1a1a1a;
|
||||
background-color: var(--bg-color); /* Changed: Added dark background */
|
||||
color: var(--text-color); /* Changed: Light text color */
|
||||
}
|
||||
|
||||
/* Header and fonts remain unchanged (already good contrast with dark mode) */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
@@ -58,94 +69,87 @@ h6 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* --- Link colors modified for contrast --- */
|
||||
a {
|
||||
color: #444444;
|
||||
color: var(--accent-color); /* Changed: Lighter accent/link color */
|
||||
}
|
||||
a:hover {
|
||||
color: #888888;
|
||||
color: white; /* Changed: Bright when hovered */
|
||||
}
|
||||
|
||||
/* --- Basic element reset unchanged --- */
|
||||
button {
|
||||
font: inherit;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
.bang-title {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Add these new styles */
|
||||
/* --- Container layout unchanged --- */
|
||||
.url-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* Add this new style */
|
||||
.content-container {
|
||||
max-width: 36rem;
|
||||
text-align: center;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* Update url-input width to be 100% since container will control max width */
|
||||
/* --- URL input element styling adjustments --- */
|
||||
.url-input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--input-border-color); /* Changed: Darker border */
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
background: #f5f5f5;
|
||||
background: var(--input-bg-color); /* Changed: Dark input bg */
|
||||
color: var(--text-color); /* Added: Input text color */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- Copy-button style adjustments --- */
|
||||
.copy-button {
|
||||
padding: 8px;
|
||||
color: #666;
|
||||
color: var(--accent-color); /* Changed: Accent color instead of gray */
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: #f0f0f0;
|
||||
background: var(--hover-bg-color); /* Changed: Hover bg darker */
|
||||
}
|
||||
|
||||
.copy-button:active {
|
||||
background: #e5e5e5;
|
||||
background: var(--active-bg-color); /* Changed: Active state even darker */
|
||||
}
|
||||
|
||||
.copy-button img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Copy feedback unchanged (Green stands out in dark mode as well) */
|
||||
.copy-button.copied {
|
||||
background: #28a745;
|
||||
background: var(--success-color);
|
||||
color: white; /* Ensures contrast */
|
||||
}
|
||||
|
||||
/* Add footer styles */
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
.settings-title {
|
||||
margin-top: 36px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #333;
|
||||
.settings-links-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
34
src/main.ts
34
src/main.ts
@@ -6,18 +6,46 @@ function noSearchDefaultPageRender() {
|
||||
app.innerHTML = `
|
||||
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">
|
||||
<div class="content-container">
|
||||
<h1>Bang</h1>
|
||||
<h1 class="bang-title">💣 Bang!</h1>
|
||||
<p>
|
||||
Add the following URL as a custom search engine to your browser in order to enable
|
||||
<a href="https://duckduckgo.com/bang.html" target="_blank">
|
||||
all of DuckDuckGo's bangs
|
||||
</a>
|
||||
right from your browser's search bar!
|
||||
</p>
|
||||
<div class="url-container">
|
||||
<input
|
||||
type="text"
|
||||
class="url-input"
|
||||
value="bang.gbrown.org?q=%s"
|
||||
value="https://bang.gbrown.org?q=%s"
|
||||
readonly
|
||||
/>
|
||||
<button class="copy-button">
|
||||
<img src="/clipboard.svg" alt="Copy" />
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="settings-title">Search Settings Links</h3>
|
||||
<div class="settings-links-container">
|
||||
<h3>
|
||||
<a href="about:preferences#search" target="_blank">
|
||||
<img
|
||||
src="/firefox.svg"
|
||||
alt="Firefox"
|
||||
width="30"
|
||||
/>
|
||||
</a>
|
||||
</h3>
|
||||
<h3>
|
||||
<a href="chrome://settings/searchEngines" target="_blank">
|
||||
<img
|
||||
src="/chrome.svg"
|
||||
alt="Chrome"
|
||||
width="30"
|
||||
/>
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -27,7 +55,7 @@ function noSearchDefaultPageRender() {
|
||||
const urlInput = app.querySelector<HTMLInputElement>(".url-input")!;
|
||||
|
||||
copyButton.addEventListener("click", async () => {
|
||||
await navigator.clipboard.writeText("https://" + urlInput.value);
|
||||
await navigator.clipboard.writeText(urlInput.value);
|
||||
copyIcon.src = "/clipboard-check.svg";
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
Reference in New Issue
Block a user