diff --git a/.gitignore b/.gitignore index c976a09..e5f92a9 100644 --- a/.gitignore +++ b/.gitignore @@ -62,3 +62,5 @@ node_modules/ .local composer.lock + +.claude/ diff --git a/CHANGES.md b/CHANGES.md index 77baa24..59bbf33 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,7 +1,13 @@ # Changelog +## 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) +- [#033] Added close widget type to dismiss devbar - [#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 f8a879a..57d63dc 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,7 @@ Example configuration that produces devbar shown in the screenshot above: ```yaml widgets: left: + - type: close - icon: "fa-bug" text: "1.47" url: "https://github.com//issues?q=is%3Aissue%20state%3Aopen%20milestone%3A1.47" @@ -122,6 +123,7 @@ widgets: | Property | Type | Required | Description | |-------------|:--------:|:--------:|--------------------------------------------------------------------------------| +| `type` | `string` | | Widget type: `link` (default) or `close` (dismisses devbar). | | `icon`* | `string` | | Optional icon to display. Can be Font Awesome class or emoji/text. | | `icon_type` | `string` | | Icon type: `fa` (Font Awesome, default) or `text` (emoji/plain text). | | `text`* | `string` | | Optional widget label to display alongside icon. | @@ -206,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 7413bb4..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; } @@ -199,3 +199,4 @@ body:has(.disco-devbar) #flash-messages { body.page-login:has(.disco-devbar) #flash-messages { top: 40px; /* Height of DiscoDevBar */ } + diff --git a/Resources/views/devbar.html.twig b/Resources/views/devbar.html.twig index 00a0faa..b8b4625 100644 --- a/Resources/views/devbar.html.twig +++ b/Resources/views/devbar.html.twig @@ -10,7 +10,7 @@ crossorigin="anonymous" referrerpolicy="no-referrer" /> -