42 lines
1.6 KiB
SCSS
42 lines
1.6 KiB
SCSS
// If you're using multitenancy, you can override styles for a certain
|
|
// tenant by styling the `<html>` element with the class
|
|
// `tenant-<tenant_name>`. For example, to style the public (main)
|
|
// tenant without these styles affecting any other tenants, use the
|
|
// `.tenant-public` selector.
|
|
//
|
|
// You can use CSS variables to customize the colors. Here's an example
|
|
// changing the brand, buttons, links and main layout colors for just
|
|
// the main tenant.
|
|
//
|
|
// .tenant-public {
|
|
// --anchor-color: #372;
|
|
// --anchor-color-hover: #137;
|
|
// --brand: #153;
|
|
// --brand-secondary: #134a00;
|
|
// --button-background-hover: #fa0;
|
|
// --button-background-hover-contrast: #{$black};
|
|
// --footer: #e6e6e6;
|
|
// --main-header: #351;
|
|
// --top-links: var(--main-header);
|
|
// --subnavigation: #ffd;
|
|
// }
|
|
//
|
|
// Some colors default to another color, so you don't have to change
|
|
// both colors if you'd like them to be the same. For instance, the
|
|
// `--main-header` and `--anchor-color` colors will use the `--brand`
|
|
// color if `--main-header` or `--anchor-color` are not defined, while
|
|
// the `--top-links` color will use the `--brand-secondary` color if
|
|
// `--top-links` is not defined.
|
|
//
|
|
// If, for instance, you're using a light color for the main header when
|
|
// the default color is a dark one, you should also change the text
|
|
// color. You can do that with a variable ending in `-contrast`, like:
|
|
//
|
|
// .tenant-public {
|
|
// --main-header: #{$white};
|
|
// --main-header-contrast: #{$black};
|
|
// }
|
|
//
|
|
// NOTE: If you are **not** using mulitenancy, we recommend overwriting
|
|
// SCSS variables in the `_consul_custom_overrides.scss` file instead
|