Customize Download Manager Widget Using CSS
Widget Variables
The following CSS global variables control the Download Manager widget, including the More Info and Edit Schedule modals.
| CSS Variable | Functionality |
|---|---|
| --qv-main-color | Modifies the main color for all arrows, buttons (except the buttons inside Schedule/Detail View) and links. |
| --qv-main-text-color | Modifies the main color of the text fonts. |
| --qv-secondary-color | Modifies the secondary color of the widget. |
| --qv-info-notification-color | Modifies the color of the notifications. |
| --qv-success-notification-color | Modifies the color of successful notifications. |
| --qv-warning-notification-color | Modifies the color of warning notifications. |
| --qv-error-notification-color | Modifies the color of error notifications. |
| --qv-global-close-modal-color | Modifles the color of the close control for the widget and its modals. |
| --qv-global-close-modal-hover-color | Modifles the color of the hover text for the widget and its modals. |
| --qv-global-overlay-color | Modifies the modal overlay color. |
| --qv-global-color-auxiliar | All options (three-dot) icons in the widget and its modals. |
| --qv-global-tooltips-background-color | Modifies the background color of tooltips. |
| --qv-global-font-family | Changes the font family across the Download Manager widget. |
| --qv-global-position-toast-right | Modifies the horizontal position of the notification component. |
| --qv-global-position-toast-top | Modifies the vertical position of the notification component. |
| --qv-global-position-modal-top-offset | Modifies the distance of the modal with respect to the height of the browser window. |
| --qv-global-border-radius | Modifies the border radius globally. |
| --qv-global-border-radius-button | Modifies the border radius of the button component. |
| --qv-global-border-radius-dropdown | Modifies the border radius of the drop-down list component. |
| --qv-global-border-radius-input | Modifies the border radius of the textboxes component. |
| --qv-global-border-radius-modal | Modifies the border radius of the modals component. |
| --qv-global-border-radius-toast | Modifies the border radius of the Notifications component. |
| --qv-global-border-radius-table | Modifies the border radius of the table component. |
| --qv-global-border-radius-dropdown-list | Modifies the border radius of the list component. |
File Type Colors
The following CSS variables were added specifically for Download Manager to control the color of the file type indicator inside the table:
| CSS Variable | Color | File Type |
|---|---|---|
| --qdm-file-color-pdf | #dc2626; Grid | |
| --qdm-file-color-csv | #16a34a'; Green | CSV |
| --qdm-file-color-jpg | #2563eb; Blue | JPG |
| --qdm-file-color-xls | #15803d; Dark green | XLS |
| --qdm-file-color-zip | #7c3aed; Purple | ZIP |
| --qdm-file-color-na | #9ca3af; Neutral / unknown | Other |
Exports Modal
The Exports modal supports CSS variables wherever it is used, such as Dashboards, Single Panel Widgets, the Analyze tab, and Pixel-Perfect Reports
Main Colors
| CSS Variable | Description | Default |
|---|---|---|
| --qv-main-color | Modifies the main color for all arrows, buttons (except the buttons inside a Schedule or Detail view) and links. | #2563eb |
| --qv-secondary-color | Modifies the secondary accents. | #6b7280 |
Modal Close Button
| CSS Variable | Description | Default |
|---|---|---|
| --qv-global-close-modal-color | Modifies the modal close button color. | #6b7280 |
| --qv-global-close-modal-hover-color | Modifies the modal close button hover. | #111827 |
Overlays and Icons
| CSS Variable | Description | Default |
|---|---|---|
| --qv-global-overlay-color | Modifies the modal overlay color. | rgba(0, 0, 0, 0.5) |
Tooltips
| CSS Variable | Description | Default |
|---|---|---|
| --qv-global-tooltips-background-color | Modifies the background color of tooltips. | #111827 |
Typography
| CSS Variable | Description | Default |
|---|---|---|
| --qv-global-font-family | Changes the font family across the complete interface. | 'Inter', 'Helvetica Neue', Arial, sans-serif; |
Toast and Modal Positioning
| CSS Variable | Functionality | Default |
|---|---|---|
| --qv-global-position-modal-top-offset | Modifies the distance of the modal with respect to the height of the browser window. | 64px |
Border Radius – Global
| CSS Variable | Functionality | Default |
|---|---|---|
| --qv-global-border-radius | Modifies the border radius globally. | 8px |
Global Border Radius - Export Components
| CSS Variable | Functionality | Default |
|---|---|---|
| --qv-global-border-radius-button | Modifies the border radius of the button component. | 6px |
| --qv-global-border-radius-dropdown | Modifies the border radius of the drop-down list component. | 6px |
| --qv-global-border-radius-input | Modifies the border radius of the textboxes component. | 6px |
| --qv-global-border-radius-modal | Modifies the border radius of the modals component. | 10px |
| --qv-global-border-radius-dropdown-list | Modifies the border radius of the list component. | 6px |