MDrivenDesignerStylingVariables
This page was created by Hans.karlsen on 2025-04-26. Last edited by Restore-user on 2026-10-21.
These values are read by MDrivenDesigner in order to get meta info on CSS styling variables
NOTE TO EDITORS: This is referenced from within MDrivenDesigner - don't move or change the format since that would BREAK THINGS
| #VariableName | TypeOfValue(Color,px,double,font) | Short description |
|---|---|---|
| #--base-bg-color | color | The main background |
| #--base-fg-color | color | The main font color |
| #--textfield-label-clr | color | Font color of control labels |
| #--btn-default-clr | color | Button color when no other style is applied |
| #--cancel-action-bg-color | color | The Cancel-changes button |
| #--cancel-action-bg-color-dark | color | The Cancel-changes button on hover |
| #--danger-color | color | Color on buttons with the danger style |
| #--danger-color-dark | color | Color on buttons with the danger style when hovered |
| #--error-clr | color | Background of a broken constraint of type error |
| #--fileupload-label-clr | color | |
| #--info-clr | color | Background of a broken constraint of type info |
| #--navbar-bg-color | color | The background of the top-level menu bar |
| #--navbar-brand-color | color | The font color of the app name |
| #--navbar-link-color | color | The color of global menu item text |
| #--primary-color | color | The signature color used for table row selection, Save-button, Menu-Button |
| #--primary-color-dark | color | The signature color when hovered |
| #--redo-action-bg-color | color | |
| #--redo-action-bg-color-dark | color | |
| #--redo-action-text-color | color | |
| #--save-action-bg-color | color | |
| #--save-action-bg-color-dark | color | |
| #--save-action-text-color | color | |
| #--select-border-clr | color | The color of the border of the select controls |
| #--sidebar-bg-color | color | The background of the left-side menu |
| #--sidebar-border-clr | color | |
| #--sidebar-divider-clr | color | |
| #--success-color | color | |
| #--success-color-dark | color | |
| #--table-bg-clr | color | The color of the table background |
| #--table-border-clr | color | The color of the border of the table |
| #--textfield-border-clr | color | |
| #--textfield-disabled-bg-clr | color | |
| #--textfield-icon-clr | color | |
| #--textfield-label-clr | color | |
| #--text-on-danger | color | |
| #--text-on-default-btn | color | Text on placed button actions |
| #--text-on-error | color | Foreground of a broken constraint of type error |
| #--text-on-info | color | Foreground of a broken constraint of type info |
| #--text-on-primary | color | Text used on system buttons like login |
| #--text-on-success | color | |
| #--text-on-warning | color | Foreground of a broken constraint of type warning |
| #--toolbar-bg-color | color | Toolbar background color |
| #--toolbar-item-color | color | Toolbar action text color |
| #--tooltip-bg-clr | color | |
| #--tooltip-text-clr | color | |
| #--undo-action-bg-color | color | |
| #--undo-action-bg-color-dark | color | |
| #--undo-action-text-color | color | |
| #--warning-color | color | Color on buttons with the warning style |
| #--warning-color-dark | color | Color on buttons with the warning style when hovered |
| #--data-table-header-text-color | color | The text color of the table header |
| #--data-table-header-bg-color | color | The background of the table headers |
| #--textfield-border-radius | px | |
| #--select-border-radius | px | |
| #--table-border-radius | px | The radius of the border of tables |
| #--table-border-width | px | The width of the border of tables |
| #--extra-small | px | Size of an extra-small image |
| #--small | px | Size of a small image |
| #--medium | px | Size of a medium image |
| #--large | px | Size of an image |
| #--extra-large | px | Size of an image |
| #--navbar-height | px | The height of the main menu |
| #--savebar-height | px | |
| #--btn-border-radius | px | The radius of buttons |
| #--tooltip-border-radius | px | |
| #--sidebar-width | px | The width of the left-side menu |
| #--base-border-radius | px | The radius of inputs |
| #--resizer-width | px | The size of the resizer between grid header columns |
| #--input-border-radius | px | |
| #--base-font-size | px | The size of the base font of the application |
| #--base-checkbox-size | px | |
| #--data-table-row-height | px | The height of a row in the data table |
| #--data-table-header-height | px | The height of the header row in the data table |
| #--sidebar-item-height | px | The height of actions in the left-side menu |
| #--sidebar-divider-alpha | double | |
| #--app-font-family | font | Font used for constraints |
| #--base-font-family | font | Main font of the UI |
| #--app-icon-font | font | Font used for MaterialDesign Icons |
| #--label-font-size | px | Font size of labels |
| #--quickgrid-row-height | px | Height of a Blazor quickgrid row—fixed to avoid flicker when virtualized |
