docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: fix search result color (#22962) 

Some parts of the search results window are hard to read. Let's fix
this.

Before: see live website
After: 

![Screenshot 2025-07-01 at 12 45
40](https://github.com/user-attachments/assets/34e8e10c-d2ab-4c8b-9d83-07299915464e)
![Screenshot 2025-07-01 at 12 45
49](https://github.com/user-attachments/assets/a851dcdb-5423-40bc-9a8b-19cd949c408c)
This commit is contained in:
Arthur 2025-07-01 13:00:56 +02:00 committed by GitHub
parent 266da0b4ec
commit 03ae6f16f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/global.css
View File

@ -95,3 +95,9 @@ input[type="search"]::-ms-clear {
.navbar-group:first-of-type {
margin-top: 0.2rem !important;
}
#search-page-results {
mark:where(.dark, .dark *) {
color: var(--color-blue-400);
}
}

4
assets/css/utilities.css
View File

@ -253,3 +253,7 @@
@utility chip {
@apply border-divider-light dark:border-divider-dark inline-flex items-center gap-1 rounded-full border bg-gray-100 px-2 text-sm text-gray-800 select-none dark:bg-gray-700 dark:text-gray-200;
}
@utility pagination-link {
@apply flex items-center justify-center rounded-sm p-2;
}

12
layouts/_default/search.html
View File

@ -133,14 +133,14 @@
}
// Generate the search results HTML
let resultsHTML = `<div class="text-gray-200 dark:text-gray-500 p-2">${resultsLength} results</div>`;
let resultsHTML = `<div class="text-gray-400 dark:text-gray-500 p-2">${resultsLength} results</div>`;
// Map results to HTML
resultsHTML += results
.map((item) => {
return `<div class="p-4">
<div class="flex flex-col">
<span class="text-gray-200 dark:texty-gray-dark text-sm">${item.meta.breadcrumbs}</span>
<span class="text-gray-400 dark:texty-gray-dark text-sm">${item.meta.breadcrumbs}</span>
<a class="link" href="${item.url}" data-query="${query}" data-index="${item.index}">${item.meta.title}</a>
<p class="text-black dark:text-white overflow-hidden">…${item.excerpt}…</p>
</div>
@ -153,12 +153,12 @@
resultsHTML += `<ul class="flex flex-wrap gap-1 pt-4 pb-8 justify-center text-sm">`;
for (let i = 1; i <= resultsLength / 10; i++) {
if (i == currentPage) {
resultsHTML += `<li class="text-center text-white">
<a href="/search/?q=${query}&page=${i}" class="block h-6 w-6 rounded-sm bg-blue-light dark:bg-blue-dark">${i}</a>
resultsHTML += `<li class="flex items-center justify-center">
<a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-200 dark:bg-gray-800 dark:text-gray-200">${i}</a>
</li>`;
} else {
resultsHTML += `<li class="text-center text-gray-200 dark:text-gray-500">
<a href="/search/?q=${query}&page=${i}" class="block h-6 w-6 rounded-sm bg-gray-200 dark:bg-gray-800">${i}</a>
resultsHTML += `<li class="flex items-center justify-center">
<a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-100 dark:bg-gray-900 dark:text-gray-400">${i}</a>
</li>`;
}
}

2
layouts/partials/search-bar.html
View File

@ -104,7 +104,7 @@
searchBarResults.classList.add("hidden");
}
let resultsHTML = `<div class="p-2 text-gray-200 dark:text-gray-500">${resultsLength} results</div>`;
let resultsHTML = `<div class="p-2 text-gray-400 dark:text-gray-500">${resultsLength} results</div>`;
resultsHTML += results
.map((item) => {
return `<div class="p-2">