127 lines
4.3 KiB
CSS
127 lines
4.3 KiB
CSS
/*
|
|
* $Revision$
|
|
* $Id$
|
|
* Global CSS-variables (for all interfaces)
|
|
*/
|
|
|
|
/*************
|
|
** GLOBAL **
|
|
**************/
|
|
:root {
|
|
/* COLORS */
|
|
/* Aareon kleuren */
|
|
--aareon-ink-blue: #002C67;
|
|
--aareon-sky-blue: #00B0F0;
|
|
--aareon-urban-grey: #343F4D;
|
|
--aareon-fuchsia: #E02D93;
|
|
--aareon-berry: #73007E;
|
|
--aareon-tangerine: #F59D04;
|
|
--aareon-grapefruit: #CC5252;
|
|
--aareon-ocean-green: #0FD3BB;
|
|
--aareon-pine-green: #007764;
|
|
|
|
|
|
--aareon-color-1: #041260;
|
|
|
|
--aareon-color-2: #1770f6;
|
|
--aareon-color-3: #f98c73;
|
|
--aareon-color-4: #ebe3dd;
|
|
--aareon-color-5: #f7f3f0;
|
|
|
|
--aareon-color-6: #fdd9cb;
|
|
--aareon-color-7: #5cb02e;
|
|
--aareon-color-8: #bde8a1;
|
|
|
|
/* Aareon kleuren rgb-waarden, gebruik als volgt; rgba(var(--aareon-rgb-ink-blue), 50%) */
|
|
--aareon-rgb-ink-blue: 0, 44, 103;
|
|
--aareon-rgb-sky-blue: 0, 176, 240;
|
|
--aareon-rgb-urban-grey: 52, 63, 77;
|
|
--aareon-rgb-fuchsia: 244, 45, 147;
|
|
--aareon-rgb-berry: 115, 0, 126;
|
|
--aareon-rgb-tangerine: 245, 157, 4;
|
|
--aareon-rgb-grapefruit: 204, 86, 86;
|
|
--aareon-rgb-ocean-green: 15, 211, 187;
|
|
--aareon-rgb-pine-green: 0, 119, 100;
|
|
|
|
/* Wat semantische variabel-namen voor Aareon kleuren */
|
|
--fclt-color-main: var(--aareon-ink-blue);
|
|
--fclt-color-soft-1: var(--aareon-sky-blue);
|
|
--fclt-color-soft-2: var(--aareon-tangerine);
|
|
--fclt-color-soft-3: var(--aareon-ocean-green);
|
|
--fclt-color-soft-4: var(--aareon-fuchsia);
|
|
|
|
--fclt-color-hard-1: var(--aareon-ink-blue);
|
|
--fclt-color-hard-2: var(--aareon-grapefruit);
|
|
--fclt-color-hard-3: var(--aareon-pine-green);
|
|
--fclt-color-hard-4: var(--aareon-berry);
|
|
|
|
--fclt-bg-lowlight: color-mix(in srgb, currentColor 5%, transparent);
|
|
|
|
--fclt-body-color: var(--bs-body-color);
|
|
--fclt-body-color-rgb: var(--bs-body-color-rgb);
|
|
--fclt-body-bg: var(--bs-body-bg);
|
|
--fclt-body-bg-rgb: var(--bs-body-bg-rgb);
|
|
|
|
--fclt-body-color-5: rgba(var(--fclt-body-color-rgb), 5%);
|
|
--fclt-body-color-10: rgba(var(--fclt-body-color-rgb), 10%);
|
|
--fclt-body-color-25: rgba(var(--fclt-body-color-rgb), 25%);
|
|
--fclt-body-color-50: rgba(var(--fclt-body-color-rgb), 50%);
|
|
--fclt-body-color-100: rgba(var(--fclt-body-color-rgb), 100%);
|
|
|
|
/* Verschillende Aareon grijstinten */
|
|
--fclt-color-grey-5: rgba(var(--aareon-rgb-urban-grey), 5%);
|
|
--fclt-color-grey-10: rgba(var(--aareon-rgb-urban-grey), 10%);
|
|
--fclt-color-grey-25: rgba(var(--aareon-rgb-urban-grey), 25%);
|
|
--fclt-color-grey-40: rgba(var(--aareon-rgb-urban-grey), 40%);
|
|
|
|
/* General */
|
|
--fclt-color-bad: rgb(156, 0, 6);
|
|
--fclt-color-bad-contrast: rgb(255, 199, 206);
|
|
--fclt-color-good: rgb(0, 97, 0);
|
|
--fclt-color-good-contrast: rgb(198, 239, 206);
|
|
--fclt-color-neutral: rgb(94, 61, 0);;
|
|
--fclt-color-neutral-contrast: rgb(255, 235, 156);
|
|
|
|
--fclt-color-red: rgb(236, 24, 24);
|
|
--fclt-color-red-contrast: rgb(255, 255, 255);
|
|
|
|
/* Card */
|
|
--fclt-card-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05),
|
|
-2px 2px 2px rgba(0, 0, 0, .05);
|
|
|
|
/* Borders */
|
|
--fclt-border-width: 1px;
|
|
|
|
/* Typography */
|
|
--fclt-font-size-s: 12px;
|
|
--fclt-font-size-m: 14px;
|
|
--fclt-font-size-l: 16px;
|
|
|
|
/* Bootstrap overrules */
|
|
--fclt-border-radius: .25rem;
|
|
--fclt-border-radius-lg: var(--bs-border-radius, .375rem);
|
|
--fclt-border-radius-xl: .5rem;
|
|
--fclt-border-radius-xxl: .75rem;
|
|
--fclt-border-color: rgba(var(--bs-body-color-rgb, 0, 0, 0), calc(1 / 6));
|
|
--fclt-border: var(--fclt-border-width) solid var(--fclt-border-color);
|
|
|
|
/* Gaps */
|
|
--fclt-gap-sm: 0.25em;
|
|
--fclt-gap: 0.5em;
|
|
--fclt-gap-lg: 0.75em;
|
|
--fclt-gap-xl: 1em;
|
|
|
|
--fclt-card-padding: 0.75em;
|
|
|
|
/* Animations */
|
|
--fclt-animation-duration-xs: 75ms; /* Click / activate */
|
|
--fclt-animation-duration-s: 150ms; /* Hover / focus */
|
|
--fclt-animation-duration: 250ms; /* Voor kleine UI elementen (cards, dropdowns, tooltip) */
|
|
--fclt-animation-duration-l: 400ms; /* Voor grotere UI elementen (cardkolommen, slide-in panelen, accordion) */
|
|
|
|
/* Font Awesome */
|
|
--fa-animation-duration: 1s;
|
|
|
|
/* Reusable dimensions */
|
|
--fclt-frameheader-height: 2rem;
|
|
} |