Fix html bg specificity: use html:root to override daisyUI :root rule

This commit is contained in:
2026-07-03 21:54:37 +02:00
parent a10afc9891
commit 0ce089f062
@@ -13,7 +13,9 @@
.icon-sm { width: 16px; height: 16px; flex-shrink: 0; } .icon-sm { width: 16px; height: 16px; flex-shrink: 0; }
.icon-xs { width: 12px; height: 12px; flex-shrink: 0; } .icon-xs { width: 12px; height: 12px; flex-shrink: 0; }
.icon-lg { width: 48px; height: 48px; flex-shrink: 0; } .icon-lg { width: 48px; height: 48px; flex-shrink: 0; }
html { overflow-y: scroll; background: var(--fallback-b3, oklch(var(--b3)/1)); } html { overflow-y: scroll; }
html:root { background: var(--fallback-b3, oklch(var(--b3)/1)); }
body { margin: 0; }
.card-shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .card-shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.card-shadow:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .card-shadow:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.dropdown-shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.3); } .dropdown-shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
@@ -31,7 +33,7 @@
</script> </script>
</head> </head>
<body class="min-h-screen bg-base-100"> <body class="min-h-screen bg-base-100">
<div class="navbar bg-base-300 shadow-lg" style="min-height:3.5rem;display:flex;align-items:center;justify-content:center"> <div class="navbar bg-base-300 shadow-lg" style="min-height:3.5rem;display:flex;align-items:center;justify-content:center;width:100vw">
<div style="display:flex;align-items:center;width:100%;max-width:1100px;padding:0 1rem;gap:2rem"> <div style="display:flex;align-items:center;width:100%;max-width:1100px;padding:0 1rem;gap:2rem">
<a href="/" class="font-bold text-lg text-base-content no-underline" style="flex-shrink:0">DiscDrop</a> <a href="/" class="font-bold text-lg text-base-content no-underline" style="flex-shrink:0">DiscDrop</a>
<div style="flex:1;display:flex;justify-content:center"> <div style="flex:1;display:flex;justify-content:center">