Adjust page loading

This commit is contained in:
DariusIII
2026-03-04 12:34:03 +01:00
parent cfc6dcfeb3
commit 83d5f9c6da
5 changed files with 18 additions and 10 deletions
+1
View File
@@ -161,6 +161,7 @@ html, body {
/* Structural surfaces: color scheme variables applied to main chrome */
body {
background-color: var(--surface-body) !important;
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dark body {
background-color: var(--surface-body-dark) !important;
+4 -4
View File
@@ -137,8 +137,8 @@
$hasValidCover = $coverUrl && !str_contains($coverUrl, 'no-cover.png');
@endphp
@if($hasValidCover)
<a href="{{ url('/details/' . $result->guid) }}" class="shrink-0 bg-gray-100 dark:bg-gray-700 rounded mr-3" x-show="showThumbs" x-cloak>
<img x-bind:src="showThumbs ? '{{ $coverUrl }}' : ''" class="w-12 h-16 object-cover rounded shadow-sm hover:shadow-md transition" alt="Cover" loading="lazy">
<a href="{{ url('/details/' . $result->guid) }}" class="shrink-0 bg-gray-100 dark:bg-gray-700 rounded mr-3" x-show="showThumbs" @unless(request()->query('thumbs') === '1') style="display:none" @endunless>
<img src="{{ request()->query('thumbs') === '1' ? $coverUrl : '' }}" x-bind:src="showThumbs ? '{{ $coverUrl }}' : ''" class="w-12 h-16 object-cover rounded shadow-sm hover:shadow-md transition" alt="Cover" loading="lazy">
</a>
@endif
<div class="flex-1">
@@ -284,8 +284,8 @@
$mHasCover = $mCoverUrl && !str_contains($mCoverUrl, 'no-cover.png');
@endphp
@if($mHasCover)
<a href="{{ url('/details/' . $result->guid) }}" class="block mb-2 bg-gray-100 dark:bg-gray-700 rounded-lg" x-show="showThumbs" x-cloak>
<img x-bind:src="showThumbs ? '{{ $mCoverUrl }}' : ''" class="w-16 h-20 object-cover rounded-lg shadow-sm" alt="Cover" loading="lazy">
<a href="{{ url('/details/' . $result->guid) }}" class="block mb-2 bg-gray-100 dark:bg-gray-700 rounded-lg" x-show="showThumbs" @unless(request()->query('thumbs') === '1') style="display:none" @endunless>
<img src="{{ request()->query('thumbs') === '1' ? $mCoverUrl : '' }}" x-bind:src="showThumbs ? '{{ $mCoverUrl }}' : ''" class="w-16 h-20 object-cover rounded-lg shadow-sm" alt="Cover" loading="lazy">
</a>
@endif
<a href="{{ url('/details/' . $result->guid) }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 font-medium wrap-break-word text-base">
+1 -1
View File
@@ -25,7 +25,7 @@
@vite(['resources/css/app.css', 'resources/js/app.js'])
@stack('styles')
</head>
<body class="bg-gray-100 dark:bg-gray-900 font-sans antialiased transition-colors duration-200">
<body class="bg-gray-100 dark:bg-gray-900 font-sans antialiased">
<div class="h-screen flex">
<!-- Admin Sidebar -->
<aside id="sidebar" class="hidden md:flex md:flex-col w-64 bg-gray-900 dark:bg-gray-950 text-white shrink-0 h-full overflow-y-auto">
+1 -1
View File
@@ -30,7 +30,7 @@
@vite(['resources/css/app.css', 'resources/js/app.js'])
@stack('styles')
</head>
<body class="bg-gray-50 dark:bg-gray-900 font-sans antialiased transition-colors duration-200">
<body class="bg-gray-50 dark:bg-gray-900 font-sans antialiased">
<div class="h-screen flex">
<!-- Sidebar -->
@auth
+11 -4
View File
@@ -1,9 +1,9 @@
{{--
Dark mode and color scheme initialization - MUST be included at the very top of <head>,
BEFORE any CSS/Vite tags, to prevent white flash on page load.
This tiny blocking script applies the 'dark' class and data-color-scheme to <html> synchronously
before the browser paints any content, and sets an inline background-color on <html> so the
first paint is never white (even before external CSS loads).
1. The blocking script applies the 'dark' class and data-color-scheme to <html> synchronously.
2. The style tag that follows uses those attributes to set html AND body background-color
for every scheme/dark combo so the first paint is never white.
--}}
<script nonce="{{ csp_nonce() }}">
(function() {
@@ -20,6 +20,13 @@
d.classList.add('dark');
}
d.setAttribute('data-color-scheme', scheme);
d.style.backgroundColor = isDark ? '#0f172a' : '#f8fafc';
})();
</script>
<style nonce="{{ csp_nonce() }}">
html, body { background-color: #f8fafc; }
html.dark, html.dark body { background-color: #0f172a; }
html[data-color-scheme="emerald"], html[data-color-scheme="emerald"] body { background-color: #f0fdf4; }
html.dark[data-color-scheme="emerald"], html.dark[data-color-scheme="emerald"] body { background-color: #071a12; }
html[data-color-scheme="violet"], html[data-color-scheme="violet"] body { background-color: #faf5ff; }
html.dark[data-color-scheme="violet"], html.dark[data-color-scheme="violet"] body { background-color: #120b20; }
</style>