diff --git a/CHANGES.md b/CHANGES.md index 2e3d530..58cef6b 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,8 +1,12 @@ # Changelog -## 1.5.2 (2025-12-12) +## 1.6.0 (TBD) +- [#035] Added customizable background colors for breathing stripes - [#033] Added close widget type to dismiss devbar + +## 1.5.2 (2025-12-12) + - [#027] Devbar template now includes its own CSS for self-contained styling - [#029] Normalized uses CSS styles in both views diff --git a/README.md b/README.md index 1483bf3..57d63dc 100644 --- a/README.md +++ b/README.md @@ -208,6 +208,15 @@ Include the devbar template in your base layout: ## Customization +### Background Colors + +Customize the breathing stripes background colors in your `.disco-devbar.yaml`: + +```yaml +bg_color_light: '#b71c1c' +bg_color_dark: '#8e0000' +``` + ### Custom CSS The bundle includes default styling. To customize, override the CSS after importing bundle assets or diff --git a/Resources/public/devbar.css b/Resources/public/devbar.css index 84a2223..245bab0 100644 --- a/Resources/public/devbar.css +++ b/Resources/public/devbar.css @@ -5,7 +5,7 @@ left: 0; right: 0; z-index: 1001; /* Higher than top-nav (1000) to ensure it's above */ - background: #8e0000; + background: var(--bg-color-dark, #8e0000); color: white; font-size: 15px; overflow: hidden; @@ -17,10 +17,10 @@ inset: 0; background: repeating-linear-gradient( 45deg, - #b71c1c, - #b71c1c 10px, - #8e0000 10px, - #8e0000 20px + var(--bg-color-light, #b71c1c), + var(--bg-color-light, #b71c1c) 10px, + var(--bg-color-dark, #8e0000) 10px, + var(--bg-color-dark, #8e0000) 20px ); animation: breathe 6s ease-in-out infinite; } diff --git a/Resources/views/devbar.html.twig b/Resources/views/devbar.html.twig index 2b9d2e9..b8b4625 100644 --- a/Resources/views/devbar.html.twig +++ b/Resources/views/devbar.html.twig @@ -10,7 +10,7 @@ crossorigin="anonymous" referrerpolicy="no-referrer" /> -