Skip to content

Fortified IDDocs

CSS

Reference of the CSS variables that can be overridden through css_overrides.css

The look of all Fortified ID applications is driven by CSS variables that an overlay can redefine.

css_overrides.css

Section titled “css_overrides.css”

Configure the css_overrides.css file in the assets/ folder of your overlay directory.

The file is empty by default. List only the variables you want to change; everything you leave out keeps its default. The file is applied on every page load, so a change takes effect on reload without restarting the service.

Default values/available variables

Section titled “Default values/available variables”
:root {
  --color-primary: #024550; /* primary color */
  --color-accent: #00cc7e; /* accent color */


  --color-background: #181830; /* background color, used as fallback color if no background image is used. */
  --color-surface: #ffffff; /* surface color. used for cards and such typically where text appear */
  --color-backface: #f5f5f5; /* backface color, used behind cards and other surfaces */
  --color-on-primary: #ffffff; /* color that contrasts when used on color-primary, typically text on primary backgrounds */
  --color-on-surface: #024550; /* color that contrasts when used on color-surface, typically text on surface backgrounds */
  --color-on-accent: #ffffff; /* color that contrasts when used on color-accent, typically text on accent backgrounds */


  --color-link: #045e6c; /* link color */
  --color-link-hover: #058194; /* link color when hovered */
  --color-link-disabled: #bcbcbc; /* link color when disabled */


  --color-button-background: #181830; /* button background color */
  --color-button-background-hover: #c7f3aa; /* button background color when hovered */
  --color-button-background-disabled: #d4d4d4; /* button background color when disabled */
  --color-button-text: #ffffff; /* button text color */
  --color-button-text-hover: #181830; /* button text color when hovered */
  --color-button-text-disabled: #181830; /* button text color when disabled */


  --color-warning: #c24b1d; /* warning text/icon color */
  --color-favorite: #f59e0b; /* favorite/accented star color */


  --button-radius: 0rem; /* button border radius, default no radius */
  --button-border: none; /* button border, default none, example: --button-border: 1px solid --color-primary; or --button-border: 1px solid #fa8072; */
  --button-border-hover: none; /* button border when hovered, default none. example: --button-border: 1px solid #8fbc8f; */


  --color-button-secondary-background: transparent; /* secondary button background color */
  --color-button-secondary-background-hover: transparent; /* secondary button background color when hovered */
  --color-button-secondary-text: var(--color-on-surface); /* secondary button text color, inherits from palette */
  --color-button-secondary-text-hover: var(--color-on-surface); /* secondary button text color when hovered, inherits from palette */
  --color-button-secondary-background-disabled: transparent; /* secondary button background color when disabled */
  --color-button-secondary-text-disabled: #9ca3af; /* secondary button text color when disabled, default gray-400 */
  --button-secondary-border: 1px solid #d1d5db; /* secondary button border, default gray-300 */
  --button-secondary-border-hover: 1px solid #9ca3af; /* secondary button border when hovered, default gray-400 */
  --button-secondary-border-disabled: 1px solid #e5e7eb; /* secondary button border when disabled, default gray-200 */


  --background-image: url('bg_login.svg') no-repeat center center/cover fixed; /* background image, used behind surface and backface. typically for authentication pages */
  /* image can be svg, png, jpg, jpeg, gif, webp, etc. The image will scale to fill the entire screen but maintain ratio if using the no-repeat center center/cover fixed */
  /* Image should be of size 1920x1080 and size optimized for web for best results  */
  /* apps such as Portal/Password Reset etc will have --background-image: none; as default and only use background color */
  --background-fallback-color: var(--color-background); /* background color, used as fallback color if no background image is used or if loading slowly */


  --color-header-background: var(--color-primary); /* header background color, mainly used in apps such as Portal/Password Reset etc. Default the --color-primary variable is used */
  --color-header-text: var(--color-on-primary); /* header text color, mainly used in apps such as Portal/Password Reset etc. Default the --color-on-primary variable is used */


  --color-progress-filled: var(--color-primary); /* progress bar filled color */
  --color-progress-background: #e2e8e9; /* progress bar background color/(not filled color) */


  --color-loader-indicator-bottom: var(--color-primary); /* loader indicator bottom color, mainly used in authentication pages */
  --color-loader-indicator-middle: var(--color-accent); /* loader indicator middle color, mainly used in authentication pages */
  --color-loader-indicator-top: rgb(from var(--color-surface) calc(r - 5) calc(g - 5) calc(b - 5) / 0.2); /* loader indicator middle color, mainly used in authentication pages */


  /* shadcn/ui Table component variables */
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;


  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);


  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);


  /* Table-specific tokens for consistent styling across shadcn DataTable and MUI TableComponent */
  --table-header-bg: var(--color-primary);
  --table-header-text: var(--color-on-primary);
  --table-row-hover: rgb(229 231 235); /* neutral-200 */
  --table-row-selected: rgb(229 231 235); /* neutral-200 for selected state */
  --table-row-selected-text: inherit;
  --table-border: var(--border);


  --background: var(--color-backface);
  --foreground: var(--color-on-surface);
  --card: var(--color-surface);
  --card-foreground: var(--color-on-surface);
  --popover: var(--color-surface);
  --popover-foreground: var(--color-on-surface);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-on-primary);
  --secondary: var(--color-accent);
  --secondary-foreground: var(--color-on-accent);
  /* --muted: var(--color-backface); */
  /* --muted-foreground: var(--color-on-surface); */
  --accent: var(--color-accent);
  --accent-foreground: var(--color-on-accent);
  /* --destructive: var(--color-destructive);
  --destructive-foreground: var(--color-on-destructive); */
  --border: var(--color-border);
  --input: var(--color-input);
  --ring: var(--color-ring);
}
Theme mapping and base styles

The declarations below map the variables above onto the component library and set the page defaults. They are included for reference; overriding them is rarely needed and is not supported as a customization point.

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}


/* @layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
} */


html {
  color: var(--color-on-surface); /* default text color */
  background-color: var(--background-fallback-color); /* default background color (used as fallback before image loads). */
  background: var(--background-image), var(--background-fallback-color); /* Background defaults to use background image, mainly used in authentication pages, and color otherwise while image loads. If only the color will be used you can just use fallback-color or define the color directly. example: background: #ffdab9; */
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol';
}


@supports (font-variation-settings: normal) {
  html {
    font-family:
      'Inter var',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Helvetica,
      Arial,
      sans-serif,
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol';
  }
}

Examples

Section titled “Examples”

Example: To update the button backgrounds define in your css_overrides.css:

:root {
  --color-button-background: #ffe4c4;
  --color-button-background-hover: rgb(143 188 143);
  --color-button-text: #32cd32;
  --color-button-text-hover: #00fa9a;
}

Example: To change background image

Make sure image is available in the assets folder (using the overlay method preferably) and define in your css_overrides.css

:root {
  --background-image: url('new_background_image.png') no-repeat center center fixed;
}