:root { --fontSize: 1.1em; --fontStyle: 'Roboto'; --titleStyle: 'Merriweather'; --blockWarning: var(--blockImportant); --blockWarningLight: color-mix(in oklab, var(--blockImportant), transparent 90%); --blockAdvice: var(--blockFocus); --blockTip: var(--blockFocus); --blockExample: var(--blockFocus); --blockNote: var(--blockDiscrete); --blockLegal: var(--blockDiscrete); --blockComplement: var(--blockDiscrete); --blockComplementLight: color-mix(in oklab, var(--blockDiscrete), transparent 90%); } html[data-theme='light'] { --contentBG: #fff; --contentFG: #4d4d4d; --contentLightBG: #f2f2f2; --contentLightFG:#797676; --titleFG: #292929; --accentColor:#1177C0; --accentColorAlpha:#815f891f; --accentDarkColor:#074f82; --accentDarkFG: #fff; --accentLightColor: #D9EBFF; --borderColor: #e2e2e2; --borderColorAlpha: #e2e2e280; --menuBG: #f5f5ff; --menuFG: #0C76B9; --elmtBG: #f5f5ff; --blockImportant: #d14121; --blockFocus: #7CB342; --blockDiscrete: #795548; --blockObjectives: #00838F; --blockObjectivesLight: color-mix(in oklab, var(--blockObjectives), transparent 90%); --blockAgenda: #00ACC1; --evalAccentColor: #4a619b; --evalAccentLight: #DCE6FF; --scrollbar-thumb-color:#1177C0; --scrollbar-bgcolor:#f5f5ff; } html[data-theme='dark'] { --contentBG: #292929; --contentFG: #d5d5d5; --contentLightBG: #000; --contentLightFG:#989898; --titleFG: #fff; --accentColor:#6fb8ec; --accentColorAlpha:#815f891f; --accentDarkColor:#074f82; --accentDarkFG: #000; --accentLightColor: #011b39; --borderColor: #6c6c6c; --borderColorAlpha: #6c6c6c80; --menuBG: #3b3b3b; --menuFG: #6fb8ec; --elmtBG: #4c4c4c; --blockImportant: #ff866b; --blockFocus: #99d55a; --blockDiscrete: #ba8c7c; --blockObjectives: #00838F; --blockObjectivesLight: color-mix(in oklab, var(--blockObjectives), transparent 90%); --blockAgenda: #00ACC1; --evalAccentColor: #4a619b; --evalAccentLight: #DCE6FF; --scrollbar-thumb-color:#074f82; --scrollbar-bgcolor:#000; } /*____________________________________*/ /* DEBUT TOKENS ULK ULILLE */ /*____________________________________*/ :root { /* Colors */ --ulk-white: #fff; --ulk-white-rgb: 255, 255, 255; --ulk-gray-50: #F8F9FB; /* ulk-neutral1 */ --ulk-gray-50-rgb: 248, 249, 251; --ulk-gray-100: #F3F4F6; /* ulk-neutral2 */ --ulk-gray-100-rgb: 243, 244, 246; --ulk-gray-200: #E5E7EB; /* Borders, dividers */ --ulk-gray-200-rgb: 229, 231, 235; --ulk-gray-300: #D2D4DB; /* Puces */ --ulk-gray-300-rgb: 210, 212, 219; --ulk-gray-400: #9CA3AF; --ulk-gray-400-rgb: 156, 163, 175; --ulk-gray-500: #69707E; --ulk-gray-500-rgb: 105, 112, 126; --ulk-gray-600: #4B5563; /* ulk-fg-neutral2 */ --ulk-gray-600-rgb: 75, 85, 99; --ulk-gray-700: #374151; --ulk-gray-700-rgb: 55, 65, 81; --ulk-gray-800: #1F2937; --ulk-gray-800-rgb: 31, 41, 55; --ulk-gray-900: #111827; /* ulk-fg-neutral1 */ --ulk-gray-900-rgb: 17, 24, 39; --ulk-green-50: #ECFDF5; --ulk-green-100: #D1FAE5; --ulk-green-200: #A7F3D0; --ulk-green-300: #6EE7B7; --ulk-green-400: #34D399; --ulk-green-500: #10B981; --ulk-green-600: #059669; --ulk-green-700: #047857; --ulk-green-800: #065F46; --ulk-green-900: #042F1B; --ulk-blue-50: #EFF6FF; --ulk-blue-100: #DBEAFE; --ulk-blue-200: #BFDBFE; --ulk-blue-300: #93C5FD; --ulk-blue-400: #60A5FA; --ulk-blue-500: #3B82F6; --ulk-blue-600: #2563EB; --ulk-blue-700: #1D4ED8; --ulk-blue-800: #1E40AF; --ulk-blue-900: #1E3A8A; --ulk-red-50: #FEF2F2; --ulk-red-100: #FEE2E2; --ulk-red-200: #FECACA; --ulk-red-300: #FCA5A5; --ulk-red-400: #F87171; --ulk-red-500: #EF4444; --ulk-red-600: #DC2626; --ulk-red-700: #B91C1C; --ulk-red-800: #991B1B; --ulk-red-900: #7F1D1D; --ulk-orange-50: #FFF7ED; --ulk-orange-100: #FFEDD5; --ulk-orange-200: #FED7AA; --ulk-orange-300: #FDBA74; --ulk-orange-400: #FB923C; --ulk-orange-500: #F97316; --ulk-orange-600: #EA580C; --ulk-orange-700: #C2410C; --ulk-orange-800: #9A3412; --ulk-orange-900: #7C2D12; /* Radius */ --ulk-radius-none: 0px; --ulk-radius-xs: 4px; --ulk-radius-sm: 8px; --ulk-radius-md: 16px; --ulk-radius-lg: 24px; --ulk-radius-xl: 32px; --ulk-radius-full: 50px; /* Shadows */ --ulk-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --ulk-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 1px 1px 2px 0 rgba(0, 0, 0, 0.06); --ulk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --ulk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --ulk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --ulk-shadow-xxl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Spacing */ --ulk-spacing-none: 0rem; --ulk-spacing-xxs: 0.4rem; --ulk-spacing-xs: 0.8rem; --ulk-spacing-sm: 1.6rem; --ulk-spacing-md: 2.4rem; --ulk-spacing-lg: 3.2rem; --ulk-spacing-xl: 4rem; --ulk-spacing-xxl: 5.6rem; --ulk-spacing-3xl: 6.4rem; --ulk-spacing-4xl: 8rem; --ulk-spacing-5xl: 10rem; } /*____________________________________*/ /* FIN TOKENS ULK ULILLE */ /*____________________________________*/ /*____________________________________*/ /* DEBUT Skin ULK ULILLE */ /* version du 31/10/2025 */ /*____________________________________*/ :root { /* LIGHT MODE // --------------------------- // Backgrounds // ---------------------------*/ --ulk-bg: var(--ulk-white); --ulk-bg-rgb: var(--ulk-white-rgb); --ulk-bg-hover: var(--ulk-gray-50); --ulk-bg-neutral1: var(--ulk-gray-50); --ulk-bg-neutral1-rgb: var(--ulk-gray-50-rgb); --ulk-bg-neutral1-hover: var(--ulk-gray-100); --ulk-bg-neutral2: var(--ulk-gray-100); --ulk-bg-neutral2-rgb: var(--ulk-gray-100-rgb); --ulk-bg-neutral2-hover: var(--ulk-gray-200); /* --------------------------- // Foreground (fontes, icones, éléments contrastés) // ---------------------------*/ --ulk-fg: var(--ulk-gray-600); --ulk-fg-neutral1: var(--ulk-gray-900); --ulk-fg-neutral2: var(--ulk-gray-600); --ulk-fg-warning: #c70000; /* --------------------------- // Borders // ---------------------------*/ --ulk-border1: 1px solid var(--ulk-gray-200); --ulk-border2: 1px solid var(--ulk-gray-300); --ulk-border-on-primary1: 1px solid var(--ulk-gray-700); --ulk-border-on-primary2: 1px solid rgba(var(--ulk-white-rgb), 0.5); /* --------------------------- // Commun light/dark : valeurs sur blocs primary // ---------------------------*/ --ulk-fg-on-primary1: var(--ulk-gray-900); --ulk-fg-on-primary2: var(--ulk-white); /* DARK MODE // --------------------------- // Backgrounds // ---------------------------*/ --ulk-bg-darkmode: var(--ulk-gray-900); --ulk-bg-rgb-darkmode: var(--ulk-gray-900-rgb); --ulk-bg-hover-darkmode: var(--ulk-gray-800); --ulk-bg-neutral1-darkmode: var(--ulk-gray-800); --ulk-bg-neutral1-rgb-darkmode: var(--ulk-gray-800-rgb); --ulk-bg-neutral1-hover-darkmode: var(--ulk-gray-700); --ulk-bg-neutral2-darkmode: var(--ulk-gray-700); --ulk-bg-neutral2-rgb-darkmode: var(--ulk-gray-700-rgb); --ulk-bg-neutral2-hover-darkmode: var(--ulk-gray-600); /* --------------------------- // Foreground (fontes, icones, éléments contrastés) // ---------------------------*/ --ulk-fg-darkmode: var(--ulk-white); --ulk-fg-neutral1-darkmode: var(--ulk-white); --ulk-fg-neutral2-darkmode: var(--ulk-gray-300); --ulk-fg-warning-darkmode: #ff5252; /* --------------------------- // Borders // ---------------------------*/ --ulk-border1-darkmode: 1px solid rgba(var(--ulk-white-rgb), 0.2); --ulk-border2-darkmode: 1px solid rgba(var(--ulk-white-rgb), 0.4); /* ---------------------------*/ --ulk-font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --ulk-font-serif: "Source Serif 4"; --ulk-font-dyslexia: "open-dyslexic", "usual", "Helvetica Neue", Helvetica, Arial, sans-serif; --ulk-font-luciole: "luciole", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* --------------------------- // Thèmes // --------------------------- // Thème 1 : Neutre*/ --ulk-theme1-bg-primary1: #D2D4DB; --ulk-theme1-bg-primary1-rgb: 210, 212, 219; --ulk-theme1-bg-primary2: #4B5563; --ulk-theme1-bg-primary2-rgb: 75, 85, 99; --ulk-theme1-fg-accent1: #9500ff; --ulk-theme1-fg-accent1-rgb: 149, 0, 255; --ulk-theme1-fg-accent1-darkmode: #d294ff; --ulk-theme1-fg-accent1-darkmode-rgb: 210, 148, 255; /* --------------------------- // Thème 2 : Industrie*/ --ulk-theme2-bg-primary1: #96a2f5; --ulk-theme2-bg-primary1-rgb: 150, 162, 245; --ulk-theme2-bg-primary2: #494591; --ulk-theme2-bg-primary2-rgb: 73, 69, 145; --ulk-theme2-fg-accent1: #5a55af; --ulk-theme2-fg-accent1-rgb: 90, 85, 175; --ulk-theme2-fg-accent1-darkmode: #c4c2ff; --ulk-theme2-fg-accent1-darkmode-rgb: 196, 194, 255; /* --------------------------- // Thème 3 : Pink Lady*/ --ulk-theme3-bg-primary1: #fe7db1; --ulk-theme3-bg-primary1-rgb: 254, 125, 177; --ulk-theme3-bg-primary2: #b72957; --ulk-theme3-bg-primary2-rgb: 183, 41, 98; --ulk-theme3-fg-accent1: #89586C; --ulk-theme3-fg-accent1-rgb: 137, 88, 108; --ulk-theme3-fg-accent1-darkmode: #FE86B6; --ulk-theme3-fg-accent1-darkmode-rgb: 254, 134, 182; /* --------------------------- // Thème 4 : Brique du Nord*/ --ulk-theme4-bg-primary1: #fc8670; --ulk-theme4-bg-primary1-rgb: 252, 134, 112; --ulk-theme4-bg-primary2: #b14937; --ulk-theme4-bg-primary2-rgb: 177, 73, 55; --ulk-theme4-fg-accent1: #8c584f; --ulk-theme4-fg-accent1-rgb: 140, 88, 79; --ulk-theme4-fg-accent1-darkmode: #FC907D; --ulk-theme4-fg-accent1-darkmode-rgb: 252, 144, 125; /* --------------------------- // Thème 5 : Orangette*/ --ulk-theme5-bg-primary1: #f39200; --ulk-theme5-bg-primary1-rgb: 243, 146, 0; --ulk-theme5-bg-primary2: #aa2e00; --ulk-theme5-bg-primary2-rgb: 170, 46, 0; --ulk-theme5-fg-accent1: #995238; --ulk-theme5-fg-accent1-rgb: 153, 82, 56; --ulk-theme5-fg-accent1-darkmode: #FA9600; --ulk-theme5-fg-accent1-darkmode-rgb: 250, 150, 0; /* --------------------------- // Thème 6 : Hyperion*/ --ulk-theme6-bg-primary1: #ffd24d; --ulk-theme6-bg-primary1-rgb: 255, 210, 77; --ulk-theme6-bg-primary2: #4D3F17; --ulk-theme6-bg-primary2-rgb: 76, 63, 23; --ulk-theme6-fg-accent1: #7B6523; --ulk-theme6-fg-accent1-rgb: 123, 101, 35; --ulk-theme6-fg-accent1-darkmode: #ffd24d; --ulk-theme6-fg-accent1-darkmode-rgb: 255, 210, 77; /* --------------------------- // Thème 7 : Océan*/ --ulk-theme7-bg-primary1: #7abaff; --ulk-theme7-bg-primary1-rgb: 122, 186, 255; --ulk-theme7-bg-primary2: #2973c3; --ulk-theme7-bg-primary2-rgb: 41, 115, 195; --ulk-theme7-fg-accent1: #2569B1; --ulk-theme7-fg-accent1-rgb: 37, 105, 177; --ulk-theme7-fg-accent1-darkmode: #7abaff; --ulk-theme7-fg-accent1-darkmode-rgb: 122, 186, 255; /* --------------------------- // Thème 8 : Menthe*/ --ulk-theme8-bg-primary1: #89e0b1; --ulk-theme8-bg-primary1-rgb: 137, 224, 177; --ulk-theme8-bg-primary2: #3f845f; --ulk-theme8-bg-primary2-rgb: 63, 132, 95; --ulk-theme8-fg-accent1: #37724F; --ulk-theme8-fg-accent1-rgb: 55, 114, 79; --ulk-theme8-fg-accent1-darkmode: #89e0b1; --ulk-theme8-fg-accent1-darkmode-rgb: 137, 224, 177; /*---------------------------- // Thème 9 : Dune*/ --ulk-theme9-bg-primary1: #faf0e1; --ulk-theme9-bg-primary1-rgb: 250, 240, 225; --ulk-theme9-bg-primary2: #827561; --ulk-theme9-bg-primary2-rgb: 130, 117, 97; --ulk-theme9-fg-accent1: #6F6452; --ulk-theme9-fg-accent1-rgb: 111, 100, 82; --ulk-theme9-fg-accent1-darkmode: #E3C182; --ulk-theme9-fg-accent1-darkmode-rgb: 227, 193, 130; /* --------------------------- // Thème 10 : Commodore*/ --ulk-theme10-bg-primary1: #a6ceff; --ulk-theme10-bg-primary1-rgb: 166, 206, 255; --ulk-theme10-bg-primary2: #003d87; --ulk-theme10-bg-primary2-rgb: 0, 61, 135; --ulk-theme10-fg-accent1: #005ac7; --ulk-theme10-fg-accent1-rgb: 0, 90, 199; --ulk-theme10-fg-accent1-darkmode: #75B3FF; --ulk-theme10-fg-accent1-darkmode-rgb: 117, 179, 255; /* --------------------------- // Thème 11 : Colvert*/ --ulk-theme11-bg-primary1: #4abeb1; --ulk-theme11-bg-primary1-rgb: 74, 190, 177; --ulk-theme11-bg-primary2: #00766b; --ulk-theme11-bg-primary2-rgb: 0, 118, 104; --ulk-theme11-fg-accent1: #007668; --ulk-theme11-fg-accent1-rgb: 0, 118, 104; --ulk-theme11-fg-accent1-darkmode: #74CDC3; --ulk-theme11-fg-accent1-darkmode-rgb: 116, 205, 195; /* --------------------------- // Thème 12 : Vulcain*/ --ulk-theme12-bg-primary1: #d15c64; --ulk-theme12-bg-primary1-rgb: 209, 92, 100; --ulk-theme12-bg-primary2: #941b23; --ulk-theme12-bg-primary2-rgb: 148, 27, 35; --ulk-theme12-fg-accent1: #944c53; --ulk-theme12-fg-accent1-rgb: 148, 76, 83; --ulk-theme12-fg-accent1-darkmode: #E29CA4; --ulk-theme12-fg-accent1-darkmode-rgb: 226, 156, 164; /* --------------------------- // Thème 13 : Orange Sanguine*/ --ulk-theme13-bg-primary1: #e67339; --ulk-theme13-bg-primary1-rgb: 229, 115, 57; --ulk-theme13-bg-primary2: #4d1900; --ulk-theme13-bg-primary2-rgb: 76, 25, 0; --ulk-theme13-fg-accent1: #8C5D45; --ulk-theme13-fg-accent1-rgb: 140, 93, 69; --ulk-theme13-fg-accent1-darkmode: #ED986E; --ulk-theme13-fg-accent1-darkmode-rgb: 237, 152, 110; } /*_____________________________________________*/ /* DEBUT Locales communes Skin ULK ULILLE */ /*_____________________________________________*/ :root{ /* Fonts (couleurs et typographies) */ --local-font-sans: var(--ulk-font-sans); --local-font-family: var(--ulk-font-sans); --local-font-serif: var(--ulk-font-serif); --local-font-dyslexia: var(--ulk-font-dyslexia); --local-font-luciole: var(--ulk-font-luciole); /* Font colors*/ --local-fg-neutral1: var(--ulk-fg-neutral1); --local-fg-neutral2: var(--ulk-fg-neutral2); --local-fg-darkmode: var(--ulk-fg-darkmode); --local-fg-on-primary1: var(--ulk-fg-on-primary1); --local-fg-on-primary2: var(--ulk-fg-on-primary2); --local-fg-warning: var(--ulk-fg-warning); --local-title: var(--local-fg-neutral1); --local-fg: var(--local-fg-neutral1); --local-fg-accent: var(--local-fg-accent1); --local-fg-accent-rgb: var(--local-fg-accent1-rgb); --local-fg-accent-darkmode: var(--local-fg-accent1-darkmode); --local-fg-accent-rgb-darkmode: var(--local-fg-accent1-rgb-darkmode); /* Background */ --local-bg: var(--ulk-bg); --local-bg-rgb: var(--ulk-bg-rgb); --local-bg-hover: var(--ulk-bg-hover); --local-bg-darkmode: var(--ulk-bg-darkmode); --local-bg-rgb-darkmode: var(--ulk-bg-rgb-darkmode); --local-bg-hover-darkmode: var(--ulk-bg-hover-darkmode); --local-hover: var(--local-bg-hover); /* surcharger dans themes-classes*/ /* Background - neutral 1*/ --local-bg-neutral1: var(--ulk-bg-neutral1); --local-bg-neutral1-rgb: var(--ulk-bg-neutral1-rgb); --local-bg-neutral1-hover: var(--ulk-bg-neutral1-hover); --local-bg-neutral1-darkmode: var(--ulk-bg-neutral1-darkmode); --local-bg-neutral1-rgb-darkmode: var(--ulk-bg-neutral1-rgb-darkmode); --local-bg-neutral1-hover-darkmode: var(--ulk-bg-neutral1-hover-darkmode); /* Background - neutral 2*/ --local-bg-neutral2: var(--ulk-bg-neutral2); --local-bg-neutral2-rgb: var(--ulk-bg-neutral2-rgb); --local-bg-neutral2-hover: var(--ulk-bg-neutral2-hover); --local-bg-neutral2-darkmode: var(--ulk-bg-neutral2-darkmode); --local-bg-neutral2-rgb-darkmode: var(--ulk-bg-neutral2-rgb-darkmode); --local-bg-neutral2-hover-darkmode: var(--ulk-bg-neutral2-hover-darkmode); /* Background - revert*/ --local-bg-revert: var(--ulk-bg-darkmode); --local-bg-revert-darkmode: var(--ulk-bg); /* Borders */ --local-border1: var(--ulk-border1); --local-border2: var(--ulk-border2); --local-border-on-primary1: var(--ulk-border-on-primary1); --local-border-on-primary2: var(--ulk-border-on-primary2); --local-border1-darkmode: var(--ulk-border1-darkmode); --local-border2-darkmode: var(--ulk-border2-darkmode); /* Status / alerts / feedback */ --local-bg-success: var(--ulk-green-50); --local-border-success: var(--ulk-green-100); --local-fg-success: var(--ulk-green-800); --local-icon-success: var(--ulk-green-500); /* darkmode*/ --local-bg-success-darkmode: var(--ulk-green-900); --local-border-success-darkmode: var(--ulk-green-800); --local-fg-success-darkmode: var(--ulk-green-200); --local-icon-success-darkmode: var(--ulk-green-300); --local-bg-info: var(--ulk-blue-50); --local-border-info: var(--ulk-blue-100); --local-fg-info: var(--ulk-blue-800); --local-icon-info: var(--ulk-blue-500); /* darkmode*/ --local-bg-info-darkmode: var(--ulk-blue-900); --local-border-info-darkmode: var(--ulk-blue-800); --local-fg-info-darkmode: var(--ulk-blue-200); --local-icon-info-darkmode: var(--ulk-blue-300); --local-bg-warning: var(--ulk-orange-100); --local-border-warning: var(--ulk-orange-200); --local-fg-warning: var(--ulk-orange-800); --local-icon-warning: var(--ulk-orange-500); /* darkmode*/ --local-bg-warning-darkmode: var(--ulk-orange-900); --local-border-warning-darkmode: var(--ulk-orange-800); --local-fg-warning-darkmode: var(--ulk-orange-200); --local-icon-warning-darkmode: var(--ulk-orange-300); --local-bg-danger: var(--ulk-red-50); --local-border-danger: var(--ulk-red-100); --local-fg-danger: var(--ulk-red-800); --local-icon-danger: var(--ulk-red-500); /* darkmode*/ --local-bg-danger-darkmode: var(--ulk-red-900); --local-border-danger-darkmode: var(--ulk-red-800); --local-fg-danger-darkmode: var(--ulk-red-200); --local-icon-danger-darkmode: var(--ulk-red-300); --local-logo:url("../img/content/logo-noir.svg"); /* ----- Locales spécifiques Scenari -----*/ --local-sc-border: var(--ulk-gray-300); --local-sc-placeholder: var(--ulk-gray-500); --local-sc-highlight: #ffef6d; --local-sc-highlight2: var(--ulk-gray-200); --local-sc-assmntSolRight: var(--ulk-theme8-fg-accent1); --local-sc-amber: var(--ulk-theme5-bg-primary1); /* Shadows */ --local-shadow-down-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --local-shadow-down-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.20), 1px 1px 2px 0 rgba(0, 0, 0, 0.06); --local-shadow-down-md: 0 4px 6px -1px rgba(0, 0, 0, 0.20), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --local-shadow-down-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.20), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --local-shadow-down-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.20), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --local-shadow-down-xxl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --local-shadow-right-xs: 1px 0 2px 0 rgba(0, 0, 0, 0.05); --local-shadow-right-sm: 1px 0 3px 0 rgba(0, 0, 0, 0.20), 1px 1px 2px 0 rgba(0, 0, 0, 0.06); --local-shadow-right-md: 4px 0 6px -1px rgba(0, 0, 0, 0.20), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --local-shadow-right-lg: 10px 0 15px -3px rgba(0, 0, 0, 0.20), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --local-shadow-right-xl: 20px 0 25px -5px rgba(0, 0, 0, 0.20), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --local-shadow-right-xxl: 25px 0 50px -12px rgba(0, 0, 0, 0.25); } :root[data-theme='dark']{ /*/ Font colors */ --local-fg-neutral1: var(--ulk-fg-neutral1-darkmode); --local-fg-neutral2: var(--ulk-fg-neutral2-darkmode); --local-fg-darkmode: var(--ulk-fg); --local-fg-warning: var(--ulk-fg-warning-darkmode); --local-fg-accent: var(--local-fg-accent1-darkmode); --local-fg-accent-rgb: var(--local-fg-accent1-rgb-darkmode); --local-fg-accent-darkmode: var(--local-fg-accent1); --local-fg-accent-rgb-darkmode: var(--local-fg-accent1-rgb); --local-fg: var(--ulk-fg-darkmode); /* Background */ --local-bg: var(--ulk-bg-darkmode); --local-bg-rgb: var(--ulk-bg-rgb-darkmode); --local-bg-hover: var(--ulk-bg-hover-darkmode); --local-bg-darkmode: var(--ulk-bg); --local-bg-rgb-darkmode: var(--ulk-bg-rgb); --local-bg-hover-darkmode: var(--ulk-bg-hover); --local-hover: var(--local-bg-hover); /* Background - neutral 1*/ --local-bg-neutral1: var(--ulk-bg-neutral1-darkmode); --local-bg-neutral1-rgb: var(--ulk-bg-neutral1-rgb-darkmode); --local-bg-neutral1-hover: var(--ulk-bg-neutral1-hover-darkmode); --local-bg-neutral1-darkmode: var(--ulk-bg-neutral1); --local-bg-neutral1-rgb-darkmode: var(--ulk-bg-neutral1-rgb); --local-bg-neutral1-hover-darkmode: var(--ulk-bg-neutral1-hover); /* Background - neutral 2*/ --local-bg-neutral2: var(--ulk-bg-neutral2-darkmode); --local-bg-neutral2-rgb: var(--ulk-bg-neutral2-rgb-darkmode); --local-bg-neutral2-hover: var(--ulk-bg-neutral2-hover-darkmode); --local-bg-neutral2-darkmode: var(--ulk-bg-neutral2); --local-bg-neutral2-rgb-darkmode: var(--ulk-bg-neutral2-rgb); --local-bg-neutral2-hover-darkmode: var(--ulk-bg-neutral2-hover); /* Background - revert*/ --local-bg-revert: var(--ulk-bg); --local-bg-revert-darkmode: var(--ulk-bg-darkmode); /* Background - surface*/ --local-surface: var(--ulk-gray-800); --local-surface-hover: var(--ulk-gray-700); --local-surface-neutral: var(--ulk-gray-700); --local-surface-neutral-hover: var(--ulk-gray-600); --local-surface-darkmode: var(--ulk-gray-200); --local-surface-hover-darkmode: var(--ulk-gray-300); /* Borders */ --local-border1: var(--ulk-border1-darkmode); --local-border2: var(--ulk-border2-darkmode); --local-border1-darkmode: var(--ulk-border1); --local-border2-darkmode: var(--ulk-border2); /* Status / alerts / feedback */ /* Success */ --local-bg-success: var(--ulk-green-900); --local-border-success: var(--ulk-green-800); --local-fg-success: var(--ulk-green-200); --local-icon-success: var(--ulk-green-300); --local-bg-success-darkmode: var(--ulk-green-50); --local-border-success-darkmode: var(--ulk-green-100); --local-fg-success-darkmode: var(--ulk-green-800); --local-icon-success-darkmode: var(--ulk-green-500); /* Info */ --local-bg-info: var(--ulk-blue-900); --local-border-info: var(--ulk-blue-800); --local-fg-info: var(--ulk-blue-200); --local-icon-info: var(--ulk-blue-300); --local-bg-info-darkmode: var(--ulk-blue-50); --local-border-info-darkmode: var(--ulk-blue-100); --local-fg-info-darkmode: var(--ulk-blue-800); --local-icon-info-darkmode: var(--ulk-blue-500); /* Warning */ --local-bg-warning: var(--ulk-orange-900); --local-border-warning: var(--ulk-orange-800); --local-fg-warning: var(--ulk-orange-200); --local-icon-warning: var(--ulk-orange-300); --local-bg-warning-darkmode: var(--ulk-orange-100); --local-border-warning-darkmode: var(--ulk-orange-200); --local-fg-warning-darkmode: var(--ulk-orange-800); --local-icon-warning-darkmode: var(--ulk-orange-500); /* Danger */ --local-bg-danger: var(--ulk-red-900); --local-border-danger: var(--ulk-red-800); --local-fg-danger: var(--ulk-red-200); --local-icon-danger: var(--ulk-red-300); --local-bg-danger-darkmode: var(--ulk-red-50); --local-border-danger-darkmode: var(--ulk-red-100); --local-fg-danger-darkmode: var(--ulk-red-800); --local-icon-danger-darkmode: var(--ulk-red-500); --local-logo:url("../img/content/logo-blanc.svg"); /* ----- Locales spécifiques Scenari -----*/ --local-sc-border: var(--ulk-gray-600); --local-sc-placeholder: var(--ulk-gray-400); --local-sc-highlight: #847811; --local-sc-highlight2: var(--ulk-gray-800); --local-sc-assmntSolRight: var(--ulk-theme8-fg-accent1-darkmode); --local-sc-amber: var(--ulk-theme5-bg-primary1); /* Shadows */ --local-shadow-down-xs: 0 1px 2px 0 rgba(255, 255, 255, 0.05); --local-shadow-down-sm: 0 1px 3px 0 rgba(255, 255, 255, 0.20), 1px 1px 2px 0 rgba(255, 255, 255, 0.06); --local-shadow-down-md: 0 4px 6px -1px rgba(255, 255, 255, 0.20), 0 2px 4px -1px rgba(255, 255, 255, 0.06); --local-shadow-down-lg: 0 10px 15px -3px rgba(255, 255, 255, 0.20), 0 4px 6px -2px rgba(255, 255, 255, 0.05); --local-shadow-down-xl: 0 20px 25px -5px rgba(255, 255, 255, 0.20), 0 10px 10px -5px rgba(255, 255, 255, 0.04); --local-shadow-down-xxl: 0 25px 50px -12px rgba(255, 255, 255, 0.25); --local-shadow-right-xs: 1px 0 2px 0 rgba(255, 255, 255, 0.05); --local-shadow-right-sm: 1px 0 3px 0 rgba(255, 255, 255, 0.20), 1px 1px 2px 0 rgba(255, 255, 255, 0.06); --local-shadow-right-md: 4px 0 6px -1px rgba(255, 255, 255, 0.20), 0 2px 4px -1px rgba(255, 255, 255, 0.06); --local-shadow-right-lg: 10px 0 15px -3px rgba(255, 255, 255, 0.20), 0 4px 6px -2px rgba(255, 255, 255, 0.05); --local-shadow-right-xl: 20px 0 25px -5px rgba(255, 255, 255, 0.20), 0 10px 10px -5px rgba(255, 255, 255, 0.04); --local-shadow-right-xxl: 25px 0 50px -12px rgba(255, 255, 255, 0.25); } /*_____________________________________________*/ /* FIN Locales communes Skin ULK ULILLE */ /*_____________________________________________*/ /*_____________________________________________*/ /* DEBUT Locales Skin ULILLE thématique */ /*_____________________________________________*/ :root{ /* theme8 */ --local-bg-primary1: var(--ulk-theme12-bg-primary1); --local-bg-primary1-rgb: var(--ulk-theme12-bg-primary1-rgb); --local-bg-primary2: var(--ulk-theme12-bg-primary2); --local-bg-primary2-rgb: var(--ulk-theme12-bg-primary2-rgb); --local-fg-accent1: var(--ulk-theme12-fg-accent1); --local-fg-accent1-rgb: var(--ulk-theme12-fg-accent1-rgb); } :root[data-theme='dark']{ /* theme8 */ --local-bg-primary1: var(--ulk-theme12-bg-primary2); --local-bg-primary1-rgb: var(--ulk-theme12-bg-primary2-rgb); --local-bg-primary2: var(--ulk-theme12-bg-primary1); --local-bg-primary2-rgb: var(--ulk-theme12-bg-primary1-rgb); --local-fg-accent1: var(--ulk-theme12-fg-accent1-darkmode); --local-fg-accent1-rgb: var(--ulk-theme12-fg-accent1-rgb-darkmode); } /*_____________________________________________*/ /* FIN Locales Skin ULILLE thématique */ /*_____________________________________________*/ /*____________________________________*/ /* DEBUT SKIN SPECIFIC DOKIEL ULILLE */ /*____________________________________*/ /* Reprise des variables définies dans Opale/Daylight */ :root, :root[data-theme='light'] { --local-logo:url("img/content/logo-blanc.svg"); } :root[data-theme='dark'] { --local-logo:url("img/content/logo-noir.svg"); } html[data-theme='light'], html[data-theme='dark'] { --contentBG: var(--local-bg-neutral1); --contentFG: var(--local-fg-neutral1); --contentLightBG: var(--local-bg-neutral2); --contentLightFG:var(--local-fg-neutral2); --headerBG:var(--local-bg-primary2); --headerFG:var(--local-bg-neutral1); --titleFG: var(--local-fg-accent1); --accentColor:var(--local-bg-primary2); --accentColorAlpha:#815f891f; --accentDarkColor:color-mix(in oklab, var(--local-fg-accent1) 50%, var(--local-fg-neutral2) 30%); --accentDarkFG: var(--local-bg-neutral2); --accentLightColor: var(--local-bg-neutral2); --borderColor:var(--local-sc-border); --borderColorAlpha: var(--local-sc-borderAlpha); --menuBG: var(--local-bg-neutral2); --menuFG: var(--local-fg-neutral2); --elmtBG: var(--local-bg-neutral2); --blockObjectives: var(--local-sc-placeholder); --blockAgenda: var(--local-sc-placeholder); --blockImportant: var(--local-fg-warning); --blockFocus: var(--local-bg-primary2); --blockDiscrete: var(--local-sc-placeholder); --footerBG:var(--local-bg-neutral2); --footerFG:var(--local-fg-neutral2); --resultsBG: var(--local-bg-neutral2); --wrongFG: var(--local-fg-warning); --correctFG: var(--local-fg-accent1); --schBG:var(--local-bg); --schFG:var(--local-fg-neutral1); --schCoef-1: var(--local-fg-warning); --schCoef-2: var(--local-sc-amber); --schCoef-3: var(--local-sc-assmntSolRight); --scrollbar-thumb-color:var(--local-bg-primary2); --scrollbar-bgcolor:var(--local-sc-highlight2); --evalAccentColor: var(--local-fg-accent1); --evalAccentLight: var(--local-bg-neutral2); } body{ font-weight: 400; } #main main { top: 6px; } .scrTools a[aria-selected="true"] { color: var(--local-fg-neutral1); background-color: var(--local-bg-primary1); cursor: default; } #menu a{ --accentColor: var(--local-bg-neutral1); } #menu a:hover{ color: color-mix(in oklab, var(--accentColor), var(--ulk-gray-400) 50%)!important; } #header{ box-shadow: var(--local-shadow-down-md); } #header .toolLayer{ --accentLightColor: var(--local-bg-neutra2); } .twoColumn #outline{ box-shadow: var(--local-shadow-right-md); border-inline-end: none; } #footer{ border-top: solid 1px var(--borderColor); } #footer nav a { --accentColor: var(--local-bg-primary2); --accentDarkFG: var(--local-bg-neutral1); } a.subWindow_x{ background-color: var(--local-fg-neutral2); color: var(--local-bg-neutral2); } a.subWindow_x:hover{ background-color: var(--local-fg-neutral1); color: var(--local-bg-neutral1); } section.condensedChild{ --accentColorAlpha: var(--local-sc-highlight2); box-shadow: var(--local-shadow-down-lg); border: 1px solid var(--borderColor); } .schInput::placeholder{ color:var(--local-sc-placeholder); } #outline li > .mnu_sel_yes { --accentLightColor: var(--local-bg-primary2); --contentFG: var(--local-bg-neutral1); } .complement.block > .block_ti { --block-color: var(--contentFG); } .important.block > .block_ti { background-color: var(--local-fg-warning); color: var(--local-bg); } a.sspBtnPrv, a.sspBtnNxt{ color: var(--local-bg-neutral1); } .ssMask{ background-color: var(--contentBG)!important; } .schResFrame{ box-shadow: var(--local-shadow-down-lg); } input.schInput { color: var(--schFG); background-color: var(--schBG); } #logo img{ visibility: hidden; } #header .titleLayer { background-image: var(--local-logo); background-size: 125px; background-repeat: no-repeat; } #header h1.tplTitle, #header h1 span.rootTitle{ margin-left: 75px; } .keyOutlineEntry a{ color:var(--contentBG); } .idxProcs .idxEntryCaller a, .idxProcs .idxEntryCaller a:hover { color:var(--contentLightFG); } .cbk{ box-shadow:var(--local-shadow-down-lg); border-radius: 5px; } .slpTools a.disabled_true{ color: var(--contentBG); --accentDarkColor:var(--accentColor); border-radius: 5px 5px 0 0; } .slpTools a.disabled_false{ border-radius: 5px 5px 0 0; } a.enterBtn, a.validBtn, a.solBtn, a.btnRestartE{ color:var(--contentBG); } .tooltip { box-shadow:var(--local-shadow-down-xl); } .exoInput:hover, .gapInput:hover { background-color: var(--elmtBG); color: var(--contentFG); } div#navFooter div.pDone { color: var(--elmtBG); } .ddLabel_Right, .assmntResult_Right { border-color: var(--accentColor); } .assmntResult_0 .exoInput, .assmntResult_0 .gapInput { background-color: var(--contentBG); } body:not(.hideOutline) #toolbar button.btnOutline, body:not(.hideTime):not(.hideOutline) #toolbar button.btnTime, body:not(.hideNotes) #toolbar button.btnNotes { color: var(--contentBG); } #root > .tools button:hover{ color: var(--contentBG); } /*____________________________________*/ /* FIN SKIN SPECIFIC DOKIEL ULILLE */ /*____________________________________*/