AgileDialogs Customization Variables list
Home –> AgileDialogs Customization Guide - Variables list
| Variable | Desccription | Sample |
|---|---|---|
| @font-family | Defines the font-family for AgileDialogs pages | “Segoe UI”, “Segoe”, Tahoma, Helvetica, Arial, sans-serif |
| @text-color | Sets the color for AgileDialogs text content | #246dbb |
| @widget-font-size | Sets the font-size of AgileDialogs pages | 14px |
| @widget-frame-color | Sets the fill color of the AgileDialogs frame | rgb(59, 121, 183) |
| @background-color | Set background color for #ADAppWrapper element | rgba(255,255,255,0.9) |
| @alt-background-color | Set background color for alt items | #f5f5f5 |
| @ad-app-wrapper-border-size | Set the size for #ADAppWrapper border | 1rem |
| @main-border-radius | Set the border radius value for #ADAppWrapper | 0px |
| @pageCaption-font-size | Sets the font-size for AgileDialogs page caption | 1.5rem |
| @pageCaption-font-weight | Sets the font-weight for AgileDialogs page caption | 600 |
| @input-font-weight | Sets the font-weight for AgileDialogs controls which has input elements | 600 |
| @input-disabled-opacity | Sets the opacity for AgileDialogs controls which has disabled input elements | 0.8 |
| @imagespin-background | Sets the background color for AgileDialogs navigation overlay | rgb(173, 40, 40, 0.1) |
| @disabled-text-color | Sets the color for AgileDialogs controls text content when control is disabled | #837f7f |
| @input-background-color | Sets the background-color for AgileDialogs controls which contains input elements | #837f7f |
| @input-text-color | Sets the text-color for AgileDialogs controls which contains input elements | #7ea700 |
| @title-text-color | Sets the text color for AgileDialogs title. | #246dff |
| @header-text-color | Sets the text-color for AgileDialogs controls which has headers. Note: This setting does not apply to headers which contains links, like Grid control | #f00aab |
| @button-background-color | Sets the background-color for AgileDialogs buttons | #000 |
| @button-text-color | Sets the text-color for AgileDialogs buttons | #ffffff |
| @button-border-color | Sets the border-color for AgileDialogs buttons | #dadada |
| @widget-border-color | Sets the border-color for AgileDialogs controls | #dadada |
| @widget-text-color | Sets the text-color for AgileDialogs controls which uses data (GridControl, lookup …) | #787878 |
| @hover-background-color | Sets the background-color for AgileDialogs controls when mouse is over it. | #787878 |
| @hover-border-color | Sets the border-color for AgileDialogs controls when mouse is over it. | #667c8f |
| @hover-text-color | Sets the text-color for AgileDialogs controls when mouse is over it. | #787878 |
| @content-background-color | Sets the background-color for AgileDialogs loookup window | #fff |
| @validation-text-color | Sets the text-color for validation message control tooltip | #ffffff |
| @validation-background-color | Sets the background-color for AgileDialogs loookup window | #246dbb |
| @validation-border-color | Sets the background-color for AgileDialogs loookup window | #ffa500 |
| @ad-centered-margin-background-color | Sets the background-color for AgileDialogs form margins. Only applies when AgileDialogs uses centered mode | #246dbb |
| @notification-bar-background-color | Sets the color for AgileDialogs messasing progress bar | blue |
| @lookupGrid-height | Sets the height for AgileDialogs lookup control popup window grid | 390px |
| @lookupGrid-k-grid-content-height | Sets the height for AgileDialogs lookup control popup window grid content | 325px |
| @widget-background-color | Sets the backgroundcolor for Widgets | #ffffff |
| @group-background-color | Sets the background color for grouping items (calendar, files attahcments …) | #ffffff |
| @group-border-color | Sets the border color for grouping items (calendar, files attahcments …) | #dadada |
| @select-group-background-color | Sets the background color for grouping items (calendar, files attahcments …) | #ffffff |
| @input-text-color | Sets the text color for input element | #6e6e6e |
| @input-background-color | Sets background-color for not wrapped inputs | #ffffff |
| @select-background-color | Sets background color for controls wrapped inputs. | #ffffff |
| @link-text-color | Sets text color for link elements | #3ca451 |
| @header-background-color | Sets the header background control for AgileDialogs widgets | #ffffff |
| @header-text-color | Sets the header text control for AgileDialogs widgets | #787878 |
| @selected-background-color | Sets background color for selected elements | #667c8f |
| @selected-border-color | Sets border color for selected elements | #667c8f |
| @selected-text-color | Sets text color for selected elements | #ffffff |
| @active-background-color | Sets background color for active elements | #ffffff |
| @active-border-color | Sets border color for active elements | #667c8f |
| @active-text-color | Sets text color for active elements | #000000 |
| @draghandle-border-color | Set the border color for items draghandle | #667c8f |
| @draghandle-background-color | Set the background color for items draghandle | #667c8f |
| @default-icon-opacity | Sets the default icon opacity for disabled widgets | 0.8 |
| @xrmgrid-border-spacing | Sets the spacing between XRMGrid control data rows | inherit |
| @xrmgrid-row-height | Sets the height for XRMGrid control data rows | 31px |
| @xrmgrid-td-border-style | Set the border style for XRMGrid control data | solid |
| @xrmgrid-td-line-height | Set the line height for XRMGrid control data | 1.6em |
| @xrmgrid-td-font-size | Set the font size for XRMGrid control data | 1rem |
| @xrmgrid-k-grid-header-font-weight | Set the header font weight for XRMGrid control data | bold |
| @xrmgrid-k-grid-header-link-padding | Set the header link padding for XRMGrid control data | inherit |
| @xrmgrid-k-grid-header-font-size | Set the font size padding for XRMGrid control data | inherit |
| @xrmgrid-min-width | Sets min width for XRMGrid controls | 37em |
| @focused-border-color | Sets border color for focused elements | #FFA500 |
| @select-border-color | Set border color for wrapped elements | #dadada |
| @select-hover-background-color | none | |
| @hover-border-color | #667c8f | |
| @hover-gradient | “none” | |
| @hover-shadow | none | |
| @selected-gradient | “none” | |
| @selected-shadow | none | |
| @active-gradient | “none” | |
| @active-shadow | none | |
| @focused-item-shadow | rgb(142, 188, 0) 0px 0px 0px 1px inset | |
| @focused-active-item-shadow | rgb(68, 91, 0) 0px 0px 3px 1px inset | |
| @focused-shadow | none | |
| @error-background-color | #ffffff | |
| @error-border-color | #e20000 | |
| @error-text-color | #e20000 | |
| @disabled-text-color | #837f7f | |
| @list-border-radius | @main-border-radius - 1 | |
| @inner-border-radius | @main-border-radius - 2 | |
| @slider-border-radius | 13px | |
| @draghandle-border-radius | 0px | |
| @draghandle-shadow | none | |
| @draghandle-hover-border-color | @hover-border-color | |
| @draghandle-hover-background-color | @hover-background-color | |
| @draghandle-hover-shadow | none | |
| @numeric-selected-background | #7ea700 | |
| @shadow-color | rgba(0,0,0,0.298039) | |
| @loading-panel-color | #ffffff | |
| @splitbankground-color | #dadada | |
| @tooltip-background-color | transparent | |
| @tooltip-border-color | #94c0d2 | |
| @tooltip-text-color | #000000 |