194 lines
7.6 KiB
CSS
194 lines
7.6 KiB
CSS
/*
|
|
* $Revision$
|
|
* $Id$
|
|
* Global CSS-variables (for all interfaces)
|
|
*/
|
|
|
|
/*************
|
|
** GLOBAL **
|
|
**************/
|
|
:root {
|
|
/* COLORS */
|
|
/* Aareon kleuren 2022 */
|
|
--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 2025 */
|
|
--color-aareon-blue: #051163;
|
|
--color-aareon-bright-blue: #086DFB;
|
|
--color-aareon-light-blue: #A4CBFF;
|
|
--color-aareon-sand: #F7F3F0;
|
|
--color-aareon-stone: #EBE3DC;
|
|
--color-aareon-coral: #FF7F62;
|
|
|
|
--color-aareon-peach: #FFD8CA;
|
|
--color-aareon-green: #50B214;
|
|
--color-aareon-light-green: #B9E99C;
|
|
--color-aareon-headline-black: #081326; /* Ook hardcoded in header.inc (!) */
|
|
--color-aareon-body-copy-gray: #384152;
|
|
|
|
/* Afgeleide kleuren */
|
|
--accent-dark: color-mix(in srgb, var(--accent-color) 50%, #000000);
|
|
--accent-darker: color-mix(in srgb, var(--accent-color) 25%, #000000);
|
|
--accent-light: color-mix(in srgb, var(--accent-color) 50%, #FFFFFF);
|
|
--accent-lighter: color-mix(in srgb, var(--accent-color) 25%, #FFFFFF);
|
|
|
|
/* Deze 2 worden berekend in header.inc;
|
|
--main-color-contrast: #FFFFFF;
|
|
--accent-color-contrast: #FFFFFF;
|
|
*/
|
|
|
|
/* 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-bg: var(--bs-body-bg);
|
|
|
|
--fclt-body-color-2: color-mix(in srgb, var(--fclt-body-color) 2%, var(--fclt-body-bg));
|
|
--fclt-body-color-5: color-mix(in srgb, var(--fclt-body-color) 5%, var(--fclt-body-bg));
|
|
--fclt-body-color-10: color-mix(in srgb, var(--fclt-body-color) 10%, var(--fclt-body-bg));
|
|
--fclt-body-color-25: color-mix(in srgb, var(--fclt-body-color) 25%, var(--fclt-body-bg));
|
|
--fclt-body-color-50: color-mix(in srgb, var(--fclt-body-color) 50%, var(--fclt-body-bg));
|
|
|
|
/* Verschillende Aareon grijstinten */
|
|
--fclt-color-grey-5: color-mix(in srgb, var(--aareon-urban-grey) 5%, transparent);
|
|
--fclt-color-grey-10: color-mix(in srgb, var(--aareon-urban-grey) 10%, transparent);
|
|
--fclt-color-grey-25: color-mix(in srgb, var(--aareon-urban-grey) 25%, transparent);
|
|
--fclt-color-grey-40: color-mix(in srgb, var(--aareon-urban-grey) 40%, transparent);
|
|
|
|
/* 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);
|
|
|
|
/* Specifics */
|
|
--menuiconcolor-gradient: linear-gradient(to bottom, var(--main-color), color-mix(in srgb, var(--main-color) 75%, rgb(0, 0, 0)));
|
|
|
|
/* 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 */
|
|
--fontfamily: Segoe UI, Arial, Helvetica, sans-serif;
|
|
--fontfamily_alt: Tahoma, Arial, Helvetica, sans-serif; /* Ex-template, functioneel, dunner lettertype */
|
|
|
|
--fclt-font-size-s: 12px;
|
|
--fclt-font-size-m: 14px;
|
|
--fclt-font-size-l: 16px;
|
|
|
|
--headertextcolor: var(--color-aareon-headline-black);
|
|
--textcolor: var(--color-aareon-body-copy-gray);
|
|
|
|
/* Bootstrap overrules */
|
|
--fclt-border-radius-input: 5px;
|
|
--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-radius-3xl: 20px;
|
|
--fclt-border-color: color-mix(in srgb, var(--bs-body-color) 15%, transparent);
|
|
--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;
|
|
|
|
/* Ex-template variables; */
|
|
--linkcolor: var(--color-aareon-bright-blue);
|
|
--linkhovercolor: var(--color-aareon-coral);
|
|
--requiredbordercolor: #D50000;
|
|
|
|
--portalkopcolor: var(--textcolor);
|
|
--headercolor: var(--headertextcolor);
|
|
|
|
--activetabbackgroundcolor: #FCFCFC; /* 99% wit, 1% zwart */
|
|
--activetabcolor: var(--headertextcolor);
|
|
--inactivetabbackgroundcolor: #E6E6E6; /* 90% wit, 10% zwart */;
|
|
--inactivetabcolor: var(--textcolor);
|
|
|
|
--buttonbackgroundcolor: var(--main-color);
|
|
--buttoncolor: var(--main-color-contrast);
|
|
--buttonhoverbackgroundcolor: var(--accent-color);
|
|
--buttonhovercolor: var(--accent-color-contrast);
|
|
--buttonbackgroundcolormediumlow: #F2F2F2; /* 95% wit, 5% zwart */;
|
|
--buttoncolormediumlow: var(--headertextcolor);
|
|
|
|
--frameheaderbackgroundcolor: #F2F2F2; /* 95% wit, 5% zwart */;
|
|
--frameheadercolor: var(--headertextcolor); /* accent-light is licht genoeg om hoog contrast te garanderen */
|
|
|
|
--inlineactionbackgroundcolor: var(--main-color-contrast);
|
|
--inlineactioncolor: var(--main-color);
|
|
|
|
--menubackgroundcolor: #F2F2F2; /* 95% wit, 5% zwart */;
|
|
--menucolor: var(--headertextcolor);
|
|
--menukophoverbackgroundcolor: #E6E6E6; /* 90% wit, 10% zwart */;
|
|
--menukophovercolor: var(--headertextcolor);
|
|
|
|
--menuitembackgroundcolor: #FFFFFF;
|
|
--menuitemcolor: var(--textcolor);
|
|
--menuitemhoverbackgroundcolor: #F2F2F2; /* 95% wit, 5% zwart */;
|
|
--menuitemhovercolor: var(--textcolor);
|
|
|
|
--notesbackgroundcolor: var(--main-color);
|
|
|
|
--welcomebackgroundcolor: #FFFFFF;
|
|
--welcomecolor: var(--headertextcolor);
|
|
|
|
--tableheaderbackgroundcolor: #F2F2F2; /* 95% wit, 5% zwart */;
|
|
--tableheadercolor: var(--headertextcolor);
|
|
}
|