(search) Fix layout for light mode

This commit is contained in:
Viktor Lofgren 2024-12-13 16:22:11 +01:00
parent 357f349e30
commit e161882ec7
4 changed files with 23 additions and 23 deletions

View File

@ -57,8 +57,8 @@
</div> </div>
<div class="mx-auto md:px-4 border dark:border-gray-600 bg-slate-50 dark:bg-gray-600"> <div class="mx-auto md:px-4 border dark:border-gray-600 bg-slate-50 dark:bg-gray-600">
<div class="flex md:space-x-2 max-w-[1000px] mx-auto"> <div class="flex md:space-x-2 max-w-[1000px] mx-auto">
<div class="has-[:checked]:bg-slate-200 has-[:checked]:bg-slate-800 py-1 sm:px-2 px-1"> <div class="has-[:checked]:bg-slate-200 dark:has-[:checked]:bg-slate-800 py-1 sm:px-2 px-1">
<a href="?view=info" class="whitespace-nowrap place-items-baseline space-x-1 text-gray-700 dark:text-white text-sm hover:text-gray-900 dark:hover:text-gray-400"> <a href="?view=info" class="whitespace-nowrap place-items-baseline space-x-1 text-gray-700 dark:text-white text-sm hover:text-gray-900 dark:hover:text-gray-200">
@if (model instanceof SearchSiteInfoService.SiteInfoWithContext) @if (model instanceof SearchSiteInfoService.SiteInfoWithContext)
<input type="checkbox" class="sr-only hidden " checked readonly /> <input type="checkbox" class="sr-only hidden " checked readonly />
@else @else
@ -71,8 +71,8 @@
</a> </a>
</div> </div>
<div class="has-[:checked]:bg-slate-200 has-[:checked]:bg-slate-800 py-1 sm:px-2 px-1"> <div class="has-[:checked]:bg-slate-200 dark:has-[:checked]:bg-slate-800 py-1 sm:px-2 px-1">
<a href="?view=docs" class="whitespace-nowrap place-items-baseline space-x-1 text-gray-700 dark:text-white text-sm hover:text-gray-900 dark:hover:text-gray-400"> <a href="?view=docs" class="whitespace-nowrap place-items-baseline space-x-1 text-gray-700 dark:text-white text-sm hover:text-gray-900 dark:hover:text-gray-200">
@if (model instanceof SearchSiteInfoService.Docs) @if (model instanceof SearchSiteInfoService.Docs)
<input type="checkbox" class="sr-only hidden absolute" checked readonly /> <input type="checkbox" class="sr-only hidden absolute" checked readonly />
@else @else
@ -85,8 +85,8 @@
</a> </a>
</div> </div>
<div class="has-[:checked]:bg-slate-200 has-[:checked]:bg-slate-800 py-1 sm:px-2 px-1"> <div class="has-[:checked]:bg-slate-200 dark:has-[:checked]:bg-slate-800 py-1 sm:px-2 px-1">
<a href="?view=links" class="whitespace-nowrap place-items-baseline space-x-1 text-gray-700 dark:text-white text-sm hover:text-gray-900 dark:hover:text-gray-400"> <a href="?view=links" class="whitespace-nowrap place-items-baseline space-x-1 text-gray-700 dark:text-white text-sm hover:text-gray-900 dark:hover:text-gray-200">
@if (model instanceof SearchSiteInfoService.Backlinks) @if (model instanceof SearchSiteInfoService.Backlinks)
<input type="checkbox" class="sr-only hidden absolute" checked readonly /> <input type="checkbox" class="sr-only hidden absolute" checked readonly />
@else @else
@ -99,7 +99,7 @@
</a> </a>
</div> </div>
<div class="grow"></div> <div class="grow"></div>
<div class="has-[:checked]:bg-slate-200 has-[:checked]:bg-slate-800 py-1 sm:px-2 px-1"> <div class="has-[:checked]:bg-slate-200 dark:has-[:checked]:bg-slate-800 py-1 sm:px-2 px-1">
<a href="?view=report" class="text-sm whitespace-nowrap place-items-baseline space-x-1 text-red-800 dark:text-red-200 text-sm hover:text-red-600 dark:hover:text-red-300"> <a href="?view=report" class="text-sm whitespace-nowrap place-items-baseline space-x-1 text-red-800 dark:text-red-200 text-sm hover:text-red-600 dark:hover:text-red-300">
@if (model instanceof SearchSiteInfoService.ReportDomain) @if (model instanceof SearchSiteInfoService.ReportDomain)
<input type="checkbox" class="sr-only hidden absolute" checked readonly /> <input type="checkbox" class="sr-only hidden absolute" checked readonly />

View File

@ -24,7 +24,7 @@
</thead> </thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600 text-xs"> <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600 text-xs">
@for(SimilarDomain item : list) @for(SimilarDomain item : list)
<tr class="hover:bg-gray-50 hover:bg-gray-700"> <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
<td class="px-3 py-3 whitespace-nowrap"> <td class="px-3 py-3 whitespace-nowrap">
@if(item.linkType().isLinked()) @if(item.linkType().isLinked())
<a href="/crosstalk/?domains=${domainName},${item.url().getDomain().toString()}" <a href="/crosstalk/?domains=${domainName},${item.url().getDomain().toString()}"

View File

@ -13,7 +13,7 @@
@template.part.navbar(navbar = navbar) @template.part.navbar(navbar = navbar)
<header class="border-b border-gray-300 dark:border-gray-600 bg-gray-800 dark:bg-gray-800 shadow-md"> <header class="border-b border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 shadow-md">
<div class="max-w-[1400px] mx-auto px-4 py-4"> <div class="max-w-[1400px] mx-auto px-4 py-4">
<h1 class="text-base md:text-xl mr-2 md:mr-8 font-serif">View Site Information</h1> <h1 class="text-base md:text-xl mr-2 md:mr-8 font-serif">View Site Information</h1>
</div> </div>
@ -22,7 +22,7 @@
<div class="max-w-[1000px] mx-auto flex gap-4 flex-col md:flex-row place-items-center md:place-items-start p-4"> <div class="max-w-[1000px] mx-auto flex gap-4 flex-col md:flex-row place-items-center md:place-items-start p-4">
<div class="border dark:border-gray-600 rounded md:my-4 overflow-hidden bg-gray-800 flex flex-col space-y-2 flex-1"> <div class="border dark:border-gray-600 rounded md:my-4 overflow-hidden bg-white dark:bg-gray-800 flex flex-col space-y-2 flex-1">
<div class="bg-margeblue text-white p-2 text-sm mb-2">View Site Information</div> <div class="bg-margeblue text-white p-2 text-sm mb-2">View Site Information</div>
<p class="mx-4">This utility lets you explore what the search engine knows about the web, <p class="mx-4">This utility lets you explore what the search engine knows about the web,
@ -48,17 +48,17 @@
<div class="bg-margeblue text-white p-2 text-sm">Recently Discovered Domains</div> <div class="bg-margeblue text-white p-2 text-sm">Recently Discovered Domains</div>
<div class="bg-gray-800"> <div class="bg-gray-100 dark:bg-gray-800">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600"> <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
<thead> <thead>
<tr class="hover:bg-gray-50 hover:bg-gray-700"> <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-100 uppercase tracking-wider">Domain Name</th> <th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-100 uppercase tracking-wider">Domain Name</th>
<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-100 uppercase tracking-wider">Discover Time</th> <th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-100 uppercase tracking-wider">Discover Time</th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600 text-xs"> <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600 text-xs">
@for (DiscoveredDomain domain : model.domains()) @for (DiscoveredDomain domain : model.domains())
<tr class="hover:bg-gray-50 hover:bg-gray-700"> <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
<td class="px-3 py-3 whitespace-nowrap"> <td class="px-3 py-3 whitespace-nowrap">
<a class="text-liteblue dark:text-blue-200 underline" href="site/${domain.name()}">${domain.name()}</a> <a class="text-liteblue dark:text-blue-200 underline" href="site/${domain.name()}">${domain.name()}</a>
</td> </td>

View File

@ -1127,11 +1127,6 @@ video {
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
} }
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-green-50 { .bg-green-50 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
@ -1644,11 +1639,6 @@ video {
background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
} }
.has-\[\:checked\]\:bg-slate-800:has(:checked) {
--tw-bg-opacity: 1;
background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.has-\[\:checked\]\:text-slate-900:has(:checked) { .has-\[\:checked\]\:text-slate-900:has(:checked) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(15 23 42 / var(--tw-text-opacity, 1)); color: rgb(15 23 42 / var(--tw-text-opacity, 1));
@ -2038,6 +2028,11 @@ video {
background-color: rgb(62 95 111 / var(--tw-bg-opacity, 1)); background-color: rgb(62 95 111 / var(--tw-bg-opacity, 1));
} }
.dark\:hover\:text-gray-200:hover {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-gray-400:hover { .dark\:hover\:text-gray-400:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1)); color: rgb(156 163 175 / var(--tw-text-opacity, 1));
@ -2058,6 +2053,11 @@ video {
background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1)); background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
} }
.dark\:has-\[\:checked\]\:bg-slate-800:has(:checked) {
--tw-bg-opacity: 1;
background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:has-\[\:checked\]\:text-slate-100:has(:checked) { .dark\:has-\[\:checked\]\:text-slate-100:has(:checked) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity, 1)); color: rgb(241 245 249 / var(--tw-text-opacity, 1));