mirror of
https://github.com/plexguide/Huntarr.io.git
synced 2026-04-20 09:27:07 -04:00
53 lines
1.6 KiB
JavaScript
53 lines
1.6 KiB
JavaScript
/**
|
|
* Huntarr - Subtle Background Pattern
|
|
* Adds a modern dot grid pattern to the dashboard background
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add subtle background pattern styles
|
|
const style = document.createElement('style');
|
|
style.id = 'background-pattern-styles';
|
|
|
|
// Pattern style based on the user's preference for dark themes with blue accents
|
|
style.textContent = `
|
|
/* Subtle dot grid pattern for dark background */
|
|
.dashboard-grid::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image:
|
|
radial-gradient(circle at 1px 1px, rgba(85, 97, 215, 0.07) 1px, transparent 0);
|
|
background-size: 25px 25px;
|
|
background-position: -5px -5px;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Make sure all dashboard content stays above the pattern */
|
|
.dashboard-grid > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* For mobile - smaller pattern */
|
|
@media (max-width: 768px) {
|
|
.dashboard-grid::before {
|
|
background-size: 20px 20px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
document.head.appendChild(style);
|
|
|
|
// Make sure the container has position relative for the pattern to work
|
|
const dashboardGrid = document.querySelector('.dashboard-grid');
|
|
if (dashboardGrid) {
|
|
dashboardGrid.style.position = 'relative';
|
|
dashboardGrid.style.overflow = 'hidden';
|
|
}
|
|
});
|