Themes and Appearance
#CSS Variables
Custom styling properties can be defined in the :root selector of your stylesheet. Learn more about CSS variables.
The following variables are the most commonly used:
| Variable | Description | Default |
|---|---|---|
--userfront-alignment | Position alignment of the form. | center |
--userfront-text-color | The primary foreground color. | #303133 |
--userfront-background-color | The primary background color. | #ffffff |
--userfront-border-radius | Corner radius of the outer container. | 4px |
--userfront-container-border-color | Border color of the outer container. | #ebeef5 |
--userfront-container-border | Border style of the outer container. | 1px solid var(--userfront-container-border-color) |
--userfront-container-box-shadow | Shadow applied to the outer container. | 0 2px 12px 0 rgba(0, 0, 0, .1) |
--userfront-container-height | Height of the outer container. | auto |
--userfront-container-margin | Margin of the outer container. | 0 auto |
--userfront-container-max-height | Maximum height of the outer container. | unset |
--userfront-container-max-width | Maximum width of the outer container. | 340px |
--userfront-container-width | Width of the outer container. | auto |
--userfront-em-size | The base font size. Used as scaling reference. | 14px |
--userfront-font-family | The font family used throughout the toolkit. | Avenir, Helvetica, Arial, sans-serif |
--userfront-spacing | General spacing unit, such as padding and distance between elements. | 1em |
Additional Variables
| Variable | Description | Default |
|---|---|---|
--userfront-button-font-size | Primary and secondary button font size. | 1em |
--userfront-button-height | Primary and secondary button height. | 2em |
--userfront-button-hover-transform | Transform to apply on non-disabled button hover. | none |
--userfront-button-icon-size | Button icon size - icons are always square. | 2em |
--userfront-button-padding | Primary and secondary button padding. | 0.5em |
--userfront-container-active-box-shadow | Box shadow of form, when hovered or active. | var(--userfront-container-box-shadow) |
--userfront-container-border-radius | Border radius of the outer container. | 4px |
--userfront-container-padding | Padding of the outer container. | 2em 1.5em |
--userfront-divider-color | Foreground accent color, used for dividers. | #ccc |
--userfront-error-background-color | Background color for error messages. | #fae3e3 |
--userfront-error-border-color | Border color for error messages. | #f7dcdc |
--userfront-error-color | Error color, for text related to errors. | #c71717 |
--userfront-error-font-size | Form-level error message text size. | 1em |
--userfront-error-text-color | Form-level error message color. | var(--userfront-error-color) |
--userfront-info-background-color | Background color for informational updates. | #e6ffe5 |
--userfront-info-border-color | Border color for informational updates. | #edf4ec |
--userfront-info-color | Color for informational update text. | var(--userfront-secondary-color-text) |
--userfront-input-background-color-active | Active and hovered background color for text inputs. | #f8f9fa |
--userfront-input-background-color | Background color for text inputs. | #ffffff |
--userfront-input-border-active-color | Active and hovered input border style. | #bcc1cf |
--userfront-input-border-active | Active and hovered input border style. | 1px solid var(--userfront-input-border-active-color) |
--userfront-input-border-color | Input border style. | #dcdfe6 |
--userfront-input-border-error | Input border in error state. | 1px solid var(--userfront-error-color) |
--userfront-input-border-focus-color | Focused input border style. | #263DBF |
--userfront-input-border-focus | Focused input border style. | 2px solid var(--userfront-input-border-focus-color) |
--userfront-input-border | Input border style. | 1px solid var(--userfront-input-border-color) |
--userfront-input-font-size | Input font size. | 1em |
--userfront-input-text-color | Text color for text inputs. | #606266 |
--userfront-label-font-size | Label size. | 0.8em |
--userfront-label-spacing | Spacing between input and label. | 0.5em |
--userfront-label-text-color-error | Label text color in error state. | var(--userfront-error-color) |
--userfront-label-text-color | Label text color. | var(--userfront-text-color) |
--userfront-link-color | Link color, for subtle buttons and links. | #263DBF |
--userfront-logout-button-border-active | Hovered or active logout button border. | none |
--userfront-logout-button-border-focus-color | Focused logout button border. | #263DBF |
--userfront-logout-button-border-focus | Focused logout button border. | 3px solid var(--userfront-logout-button-border-focus-color) |
--userfront-logout-button-border | Logout button border. | none |
--userfront-logout-button-box-shadow-active | Box shadow for logout button when hovered, active, focused. | 0 2px 12px 0 rgba(0, 0, 0, 0.1) |
--userfront-logout-color-active | Hovered and active version of the logout color. | #d84848 |
--userfront-logout-color-disabled | Disabled version of the logout color. | #ff8e8e |
--userfront-logout-color-focus | Focused version of the logout color. | var(--userfront-logout-color-active) |
--userfront-logout-color-text | Text color to use on logout color backdrop. | #ffffff |
--userfront-logout-color | Logout button background color. | #c72a2a |
--userfront-placeholder-color-active | Active and hovered input placeholder text color. | #999 |
--userfront-placeholder-color | Input placeholder text color. | #999 |
--userfront-placeholder-height | Height of the placeholder, if no flow is available to be shown. | 300px |
--userfront-primary-button-border-active-color | Hovered or active primary button border. | transparent |
--userfront-primary-button-border-active | Hovered or active primary button border. | none |
--userfront-primary-button-border-color | Primary button border. | transparent |
--userfront-primary-button-border-focus-color | Focused primary button border. | #13a0ff |
--userfront-primary-button-border-focus | Focused primary button border. | 3px solid var(--userfront-primary-button-border-focus) |
--userfront-primary-button-border | Primary button border. | none |
--userfront-primary-button-box-shadow-active | Box shadow for primary button when hovered, active, focused. | 0 2px 12px 0 rgba(0, 0, 0, 0.1) |
--userfront-primary-color-active | Hovered and active version of the primary color. | #465ee4 |
--userfront-primary-color-disabled | Disabled version of the primary color. | #9da8e4 |
--userfront-primary-color-focus | Focused version of the primary color. | #374cc5 |
--userfront-primary-color-text | Text color to use on primary color backdrop. | #ffffff |
--userfront-primary-color | Primary color of the form, for primary button background and highlights. | #263DBF |
--userfront-secondary-button-border-active-color | Hovered or active secondary button border. | #bcc1cf |
--userfront-secondary-button-border-active | Hovered or active secondary button border. | 1px solid var(--userfront-secondary-button-border-active-color) |
--userfront-secondary-button-border-color | Secondary button border. | #cbceda |
--userfront-secondary-button-border-focus-color | Focused secondary button border. | #263DBF |
--userfront-secondary-button-border-focus | Focused secondary button border. | 2px solid var(--userfront-secondary-button-border-focus-color) |
--userfront-secondary-button-border | Secondary button border. | 1px solid var(--userfront-secondary-button-border-color) |
--userfront-secondary-button-box-shadow-active | Box shadow for secondary button when hovered, active, focused. | 0 2px 8px 0 rgba(0, 0, 0, 0.03) |
--userfront-secondary-color-active | Hovered and active version of the secondary color. | #f2f5fa |
--userfront-secondary-color-disabled | Disabled version of the secondary color. | #7a8291 |
--userfront-secondary-color-focus | Focus version of the secondary color. | var(--userfront-secondary-color-active) |
--userfront-secondary-color-text | Text color to use on secondary color backdrop. | #606266 |
--userfront-secondary-color | Secondary color, for secondary button background. | #ffffff |
--userfront-secured-font-color | Secured by Userfront font color. | #666 |
--userfront-secured-font-size | Secured by Userfront font size. | 1em |
--userfront-subtle-button-font-size | Subtle button font size. | 1em |
--userfront-test-mode-background-color | Background color for test mode banner. | #ffda96 |
--userfront-title-font-size | Title font size. | 1.5em |
--userfront-title-text-color | Title font color. | var(--userfront-text-color) |
#Remove Userfront branding
You can remove the "Secured by Userfront" text from your Toolkit forms by adding the following CSS to your page: