/* * Feuille de style générale de l'Extranet * Company: MYDRAL * Author: Olivier CEROU */ /************************************************/ /* VARIABLES CSS */ /************************************************/ /* #region VariablesCSS */ :root { /* THEME */ --color-base-100: white; --color-base-200: WhiteSmoke; --color-base-300: lightgrey; --color-base-content: black; --color-primary: #3276b1; --color-primary-content: white; --color-secondary: oklch(55% 0.046 257.417); --color-secondary-content: oklch(100% 0 0); --color-accent: oklch(60% 0.118 184.704); --color-accent-content: oklch(100% 0 0); --color-neutral: lightgrey; --color-neutral-content: black; /* EVENTS */ --color-info: #5bc0de; --color-info-content: white; --color-success: #5cb85c; --color-success-content: white; --color-warning: #f0ad4e; --color-warning-content: white; --color-error: #d9534f; --color-error-content: white; /* MENU */ --color-menu: var(--color-base-100); --color-menu-content: var(--color-base-content); --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); } /* #endregion */ /************************************************/ /* THEMES */ /************************************************/ /* #region Themes */ [data-theme="Classic"] { /* THEME */ --color-base-100: white; --color-base-200: WhiteSmoke; --color-base-300: lightgrey; --color-base-content: black; --color-primary: #3276b1; --color-primary-content: white; --color-secondary: oklch(55% 0.046 257.417); --color-secondary-content: oklch(100% 0 0); --color-accent: oklch(60% 0.118 184.704); --color-accent-content: oklch(100% 0 0); --color-neutral: lightgrey; --color-neutral-content: black; /* EVENTS */ --color-info: #5bc0de; --color-info-content: white; --color-success: #5cb85c; --color-success-content: white; --color-warning: #f0ad4e; --color-warning-content: white; --color-error: #d9534f; --color-error-content: white; /* MENU */ --color-menu: #363636; --color-menu-content: #D2AF70; --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-100); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); } [data-theme="Sombre"] { /* THEME */ --color-base-100: oklch(25.33% 0.016 252.42); --color-base-200: oklch(23.26% 0.014 253.1); --color-base-300: oklch(21.15% 0.012 254.09); --color-base-content: oklch(97.807% 0.029 256.847); --color-primary: oklch(58% 0.233 277.117); --color-primary-content: oklch(96% 0.018 272.314); --color-secondary: oklch(65% 0.241 354.308); --color-secondary-content: oklch(94% 0.028 342.258); --color-accent: oklch(77% 0.152 181.912); --color-accent-content: oklch(38% 0.063 188.416); --color-neutral: oklch(14% 0.005 285.823); --color-neutral-content: oklch(92% 0.004 286.32); /* EVENTS */ --color-info: oklch(74% 0.16 232.661); --color-info-content: oklch(29% 0.066 243.157); --color-success: oklch(76% 0.177 163.223); --color-success-content: oklch(37% 0.077 168.94); --color-warning: oklch(82% 0.189 84.429); --color-warning-content: oklch(41% 0.112 45.904); --color-error: oklch(71% 0.194 13.428); --color-error-content: oklch(27% 0.105 12.094); --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* MENU */ --color-menu: var(--color-base-100); --color-menu-content: var(--color-base-content); --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); --color-menu-soft: color-mix(in srgb, var(--color-menu), white 50%); --color-menu-intense: color-mix(in srgb, var(--color-menu), black 50%); } [data-theme="Marine"] { /* THEME */ --color-base-100: #17143E; --color-base-200: #3E385E; --color-base-300: #524B6F; --color-base-content: oklch(78% 0.115 274.713); --color-primary: oklch(71% 0.202 349.761); --color-primary-content: oklch(28% 0.109 3.907); --color-secondary: oklch(82% 0.111 230.318); --color-secondary-content: oklch(29% 0.066 243.157); --color-accent: oklch(75% 0.183 55.934); --color-accent-content: oklch(26% 0.079 36.259); --color-neutral: oklch(45% 0.24 277.023); --color-neutral-content: oklch(87% 0.065 274.039); /* EVENTS */ --color-info: oklch(74% 0.16 232.661); --color-info-content: oklch(29% 0.066 243.157); --color-success: oklch(77% 0.152 181.912); --color-success-content: oklch(27% 0.046 192.524); --color-warning: oklch(90% 0.182 98.111); --color-warning-content: oklch(42% 0.095 57.708); --color-error: oklch(73.7% 0.121 32.639); --color-error-content: oklch(23.501% 0.096 290.329); /* MENU */ --color-menu: var(--color-base-100); --color-menu-content: var(--color-base-content); --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); --color-menu-soft: color-mix(in srgb, var(--color-menu), white 50%); --color-menu-intense: color-mix(in srgb, var(--color-menu), black 50%); } [data-theme="Expresso"] { /* THEME */ --color-base-100: #BDAA9E; --color-base-200: #967B69; --color-base-300: #6F4E37; --color-base-content: oklch(22.389% 0.031 278.072); --color-primary: oklch(58% 0.158 241.966); --color-primary-content: oklch(100% 0 0); --color-secondary: oklch(55% 0.046 257.417); --color-secondary-content: oklch(100% 0 0); --color-accent: oklch(60% 0.118 184.704); --color-accent-content: oklch(100% 0 0); --color-neutral: oklch(0% 0 0); --color-neutral-content: oklch(100% 0 0); /* EVENTS */ --color-info: oklch(60% 0.126 221.723); --color-info-content: oklch(100% 0 0); --color-success: oklch(62% 0.194 149.214); --color-success-content: oklch(100% 0 0); --color-warning: oklch(85% 0.199 91.936); --color-warning-content: oklch(0% 0 0); --color-error: oklch(70% 0.191 22.216); --color-error-content: oklch(0% 0 0); /* MENU */ --color-menu: #50392A; --color-menu-content: white; --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); --color-menu-soft: color-mix(in srgb, var(--color-menu), white 50%); --color-menu-intense: color-mix(in srgb, var(--color-menu), black 50%); } [data-theme="Royal"] { /* THEME */ --color-base-100: #561D27; --color-base-200: #69212f; --color-base-300: #864850; --color-base-content: #D2AF70; --color-primary: oklch(71.996% 0.123 62.756); --color-primary-content: oklch(14.399% 0.024 62.756); --color-secondary: oklch(34.465% 0.029 199.194); --color-secondary-content: oklch(86.893% 0.005 199.194); --color-accent: oklch(42.621% 0.074 224.389); --color-accent-content: oklch(88.524% 0.014 224.389); --color-neutral: oklch(16.51% 0.015 326.261); --color-neutral-content: oklch(83.302% 0.003 326.261); /* EVENTS */ --color-info: oklch(79.49% 0.063 184.558); --color-info-content: oklch(15.898% 0.012 184.558); --color-success: oklch(74.722% 0.072 131.116); --color-success-content: oklch(14.944% 0.014 131.116); --color-warning: oklch(88.15% 0.14 87.722); --color-warning-content: oklch(17.63% 0.028 87.722); --color-error: oklch(77.318% 0.128 31.871); --color-error-content: oklch(15.463% 0.025 31.871); --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* MENU */ --color-menu: #3B171D; --color-menu-content: #D2AF70; --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); --color-menu-soft: color-mix(in srgb, var(--color-menu), white 50%); --color-menu-intense: color-mix(in srgb, var(--color-menu), black 50%); } [data-theme="Lavande"] { /* THEME */ --color-base-100: #ECE6F2; --color-base-200: #E2DAEB; --color-base-300: #CFC1DE; --color-base-content: black; --color-primary: #3276b1; --color-primary-content: white; --color-secondary: oklch(55% 0.046 257.417); --color-secondary-content: oklch(100% 0 0); --color-accent: oklch(60% 0.118 184.704); --color-accent-content: oklch(100% 0 0); --color-neutral: lightgrey; --color-neutral-content: black; /* EVENTS */ --color-info: #5bc0de; --color-info-content: white; --color-success: #5cb85c; --color-success-content: white; --color-warning: #f0ad4e; --color-warning-content: white; --color-error: #d9534f; --color-error-content: white; /* MENU */ --color-menu: #5D4D70; --color-menu-content: #d4af37; --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); --color-menu-soft: color-mix(in srgb, var(--color-menu), white 50%); --color-menu-intense: color-mix(in srgb, var(--color-menu), black 50%); } [data-theme="Dracula"] { /* THEMES */ --color-base-100: oklch(28.822% 0.022 277.508); --color-base-200: oklch(26.805% 0.02 277.508); --color-base-300: oklch(24.787% 0.019 277.508); --color-base-content: oklch(97.747% 0.007 106.545); --color-primary: oklch(75.461% 0.183 346.812); --color-primary-content: oklch(15.092% 0.036 346.812); --color-secondary: oklch(74.202% 0.148 301.883); --color-secondary-content: oklch(14.84% 0.029 301.883); --color-accent: oklch(83.392% 0.124 66.558); --color-accent-content: oklch(16.678% 0.024 66.558); --color-neutral: oklch(39.445% 0.032 275.524); --color-neutral-content: oklch(87.889% 0.006 275.524); /* EVENTS */ --color-info: oklch(88.263% 0.093 212.846); --color-info-content: oklch(17.652% 0.018 212.846); --color-success: oklch(87.099% 0.219 148.024); --color-success-content: oklch(17.419% 0.043 148.024); --color-warning: oklch(95.533% 0.134 112.757); --color-warning-content: oklch(19.106% 0.026 112.757); --color-error: oklch(68.22% 0.206 24.43); --color-error-content: oklch(13.644% 0.041 24.43); /* MENU */ --color-menu: var(--color-base-100); --color-menu-content: var(--color-base-content); --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); --color-menu-soft: color-mix(in srgb, var(--color-menu), white 50%); --color-menu-intense: color-mix(in srgb, var(--color-menu), black 50%); } [data-theme="Citron"] { /* THEME */ --color-base-100: oklch(98.71% 0.02 123.72); --color-base-200: oklch(91.8% 0.018 123.72); --color-base-300: oklch(84.89% 0.017 123.72); --color-base-content: oklch(19.742% 0.004 123.72); --color-primary: oklch(58.92% 0.199 134.6); --color-primary-content: white; --color-secondary: oklch(77.75% 0.196 111.09); --color-secondary-content: oklch(15.55% 0.039 111.09); --color-accent: oklch(85.39% 0.201 100.73); --color-accent-content: oklch(17.078% 0.04 100.73); --color-neutral: oklch(30.98% 0.075 108.6); --color-neutral-content: oklch(86.196% 0.015 108.6); /* EVENTS */ --color-info: oklch(86.19% 0.047 224.14); --color-info-content: oklch(17.238% 0.009 224.14); --color-success: oklch(86.19% 0.047 157.85); --color-success-content: oklch(17.238% 0.009 157.85); --color-warning: oklch(86.19% 0.047 102.15); --color-warning-content: oklch(17.238% 0.009 102.15); --color-error: oklch(86.19% 0.047 25.85); --color-error-content: oklch(17.238% 0.009 25.85); /* MENU */ --color-menu: #578b03; --color-menu-content: var(--color-base-100); --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); --color-menu-soft: color-mix(in srgb, var(--color-menu), white 50%); --color-menu-intense: color-mix(in srgb, var(--color-menu), black 50%); } [data-theme="Caramel"] { --color-base-100: oklch(98% 0.016 73.684); --color-base-200: oklch(95% 0.038 75.164); --color-base-300: oklch(90% 0.076 70.697); --color-base-content: oklch(40% 0.123 38.172); --color-primary: oklch(0% 0 0); --color-primary-content: oklch(100% 0 0); --color-secondary: oklch(22.45% 0.075 37.85); --color-secondary-content: oklch(90% 0.076 70.697); --color-accent: oklch(46.44% 0.111 37.85); --color-accent-content: oklch(90% 0.076 70.697); --color-neutral: oklch(55% 0.195 38.402); --color-neutral-content: oklch(98% 0.016 73.684); /* EVENTS */ --color-info: oklch(42% 0.199 265.638); --color-info-content: oklch(90% 0.076 70.697); --color-success: oklch(43% 0.095 166.913); --color-success-content: oklch(90% 0.076 70.697); --color-warning: oklch(82% 0.189 84.429); --color-warning-content: oklch(41% 0.112 45.904); --color-error: oklch(70% 0.191 22.216); --color-error-content: oklch(39% 0.141 25.723); /* MENU */ --color-menu: #4E1902; --color-menu-content: var(--color-base-100); --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); --color-menu-soft: color-mix(in srgb, var(--color-menu), white 50%); --color-menu-intense: color-mix(in srgb, var(--color-menu), black 50%); } [data-theme="Automne"] { /* THEME */ --color-base-100: oklch(95.814% 0 0); --color-base-200: oklch(89.107% 0 0); --color-base-300: oklch(82.4% 0 0); --color-base-content: oklch(19.162% 0 0); --color-primary: oklch(40.723% 0.161 17.53); --color-primary-content: oklch(88.144% 0.032 17.53); --color-secondary: oklch(61.676% 0.169 23.865); --color-secondary-content: oklch(12.335% 0.033 23.865); --color-accent: oklch(73.425% 0.094 60.729); --color-accent-content: oklch(14.685% 0.018 60.729); --color-neutral: oklch(54.367% 0.037 51.902); --color-neutral-content: oklch(90.873% 0.007 51.902); --color-info: oklch(69.224% 0.097 207.284); --color-info-content: oklch(13.844% 0.019 207.284); --color-success: oklch(60.995% 0.08 174.616); --color-success-content: oklch(12.199% 0.016 174.616); --color-warning: oklch(70.081% 0.164 56.844); --color-warning-content: oklch(14.016% 0.032 56.844); --color-error: oklch(53.07% 0.241 24.16); --color-error-content: oklch(90.614% 0.048 24.16); /* MENU */ --color-menu: #51433B; --color-menu-content: var(--color-base-100); --color-menu-dropdown: color-mix(in srgb, var(--color-menu), white 10%); /* INPUT */ --color-input: var(--color-base-200); --color-input-content: var(--color-base-content); /* VARIANTES */ --color-info-soft: color-mix(in srgb, var(--color-info), white 50%); --color-info-intense: color-mix(in srgb, var(--color-info), black 50%); --color-success-soft: color-mix(in srgb, var(--color-success), white 50%); --color-success-intense: color-mix(in srgb, var(--color-success), black 50%); --color-warning-soft: color-mix(in srgb, var(--color-warning), white 50%); --color-warning-intense: color-mix(in srgb, var(--color-warning), black 50%); --color-error-soft: color-mix(in srgb, var(--color-error), white 50%); --color-error-intense: color-mix(in srgb, var(--color-error), black 50%); --color-primary-soft: color-mix(in srgb, var(--color-primary), white 50%); --color-primary-intense: color-mix(in srgb, var(--color-primary), black 50%); --color-secondary-soft: color-mix(in srgb, var(--color-secondary), white 50%); --color-secondary-intense: color-mix(in srgb, var(--color-secondary), black 50%); --color-accent-soft: color-mix(in srgb, var(--color-accent), white 50%); --color-accent-intense: color-mix(in srgb, var(--color-accent), black 50%); --color-neutral-soft: color-mix(in srgb, var(--color-neutral), white 50%); --color-neutral-intense: color-mix(in srgb, var(--color-neutral), black 50%); --color-menu-soft: color-mix(in srgb, var(--color-menu), white 50%); --color-menu-intense: color-mix(in srgb, var(--color-menu), black 50%); } /* #endregion */ /************************************************/ /* ELEMENTS HTML */ /************************************************/ /* #region ElementsHTML */ html, body { width: 100%; } html { position: relative; } body { background-color: var(--color-base-300); color: var(--color-base-content); } a { color: #4a7ab7; /*color-mix(in srgb, var(--color-base-content), blue 50%);*/ cursor: pointer; } a:hover { color: #2352a2; } input { color: var(--color-input-content); background-color: var(--color-input); } label { font-weight: normal; } /* #endregion */ /************************************************/ /* LAYOUT */ /************************************************/ /* #region Layout */ #menu-content { padding-right: 0px; padding-left: 0px; } #page-container { background-color: var(--color-base-100); } #page-content { min-height: 100vh; margin: 0 0 0 0; padding: 60px 0px 60px 0px; } #footer-container { position: absolute; bottom: 0; height: 60px; width:100%; } #footer-content { border-top: 1px solid var(--color-base-300); display: flex; } .footer-image { padding: 5px 0px 0px 0px; } .footer-image > img { width: 50px; height: 50px; } .footer-info { padding: 10px 0px 0px 0px; width: 100%; text-align: center; } .main-container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 1350px) { .main-container { width: 1300px; } } .main-container:before, .main-container:after { display: table; content: " "; } .main-container:after { clear: both; } @media (min-width: 1349px) { .hidden-lg { display: none !important; } } .wide-container { margin-right: auto; margin-left: auto; width: 100%; } .pagebar { position: fixed; top: 52px; right: 0; left: 0; z-index: 800; } @media (min-width: 768px) { .pagebar { padding-right: 0; padding-left: 0; } } @media (max-device-width: 480px) and (orientation: landscape) { .pagebar { /*max-height: 200px;*/ } } @media (min-width: 768px) { .pagebar { border-radius: 0; } } .pagebar-container { min-height: 45px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; border-bottom: 1px solid darkgrey; background-color: var(--color-base-100); } @media (min-width: 1350px) { .pagebar-container { width: 1300px; } } .pagebar-title { font-size: 28px; font-style: italic; font-weight: bold; padding-top: 3px; float: left; } .pagebar-icon { margin-left: 5px; margin-right: 10px; } .pagebar-buttons { float: right; padding-top: 5px; } .pagebar-filters { float: right; padding-top: 5px; display: flex; } .pagebar-filters > * { margin-left: 5px; width: auto; max-width: 250px; vertical-align: central; } .pagebar-filters-largeitem { width: 225px; } .pagebar-multiline > * { margin-top: 3px; margin-bottom: 3px; } /* #endregion */ /************************************************/ /* MENU */ /************************************************/ /* #region Menu */ /***** COULEURS MENU *****/ .navbar-default { background-color: var(--color-menu); border-color: var(--color-menu-dropdown); } .navbar-default .navbar-nav > li > a { color: var(--color-menu-content); } .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { color: var(--color-menu-content); background-color: transparent; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover { color: var(--color-menu-content); background-color: var(--color-menu-dropdown); } /***** ICONE MENU MOBILE *****/ .navbar-default .navbar-toggle { border-color: var(--color-menu-content); } .navbar-default .navbar-toggle .icon-bar { background-color: var(--color-menu-content); } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: var(--color-menu-content); } .navbar-default .navbar-toggle:focus .icon-bar, .navbar-default .navbar-toggle:hover .icon-bar { background-color: var(--color-menu); } /***** MENU DEROULANT *****/ .dropdown-mainmenu { color: var(--color-menu-content); background-color: var(--color-menu-dropdown); padding: 0px; } .dropdown-mainmenu .divider { height: 1px; margin: 2px 0; background-color: var(--color-menu-content); } .dropdown-mainmenu > li > a { color: var(--color-menu-content); padding: 5px 20px 5px 10px; } .dropdown-mainmenu > li > a:focus, .dropdown-mainmenu > li > a:hover { color: var(--color-menu-content); background-color: var(--color-menu); } .navbar-nav > li > a > span, .dropdown-mainmenu > li > a > span { margin: 0px 5px 0px 0px; } .menu-icon { width:20px; } /***** SOUS-MENU DEROULANT *****/ .dropdown-submenu { position: relative; background-color: var(--color-menu-dropdown); } .dropdown-submenu-toggle .caret { float: right; margin-top: 8px; margin-right: -10px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -1px; margin-left: -1px; } .dropdown-submenu > a:focus { outline: none; } .dropdown-submenu.open > a:after { border-left-color: #fff; } .dropdown-submenu.open > .dropdown-menu { display: block; } .dropdown-submenu .dropdown-menu { margin-bottom: 8px; } /***** SELECTION THEME *****/ .dropdown-menu > li.menu-set-theme a { display: flex; align-items: center; gap: 10px; padding: 5px 15px; } .menu-set-theme .theme-palette { display: inline-grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 4px; width: 28px; height: 28px; border-radius: 6px; box-sizing: border-box; flex-shrink: 0; background-color: var(--color-base-300); } .menu-set-theme .theme-palette span { display: block; border-radius: 50%; width: 100%; height: 100%; } .menu-set-theme .theme-name { flex: 1; } .menu-set-theme .theme-check { width: 16px; text-align: center; visibility: hidden; } .menu-set-theme .theme-check.active { visibility: visible; } /***** LOGO *****/ .navbar-logo { padding: 0px !important; } .navbar-logo a { padding: 0px !important; } .navbar-logo svg { float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px; fill: var(--color-menu-content); } .navbar-logo svg:hover, .navbar-logo svg:focus { text-decoration: none; } .navbar-logo svg > img { display: block; } /******/ /* #endregion */ /************************************************/ /* FORMULAIRE */ /************************************************/ /* #region Formulaire */ .form-control { background-color: var(--color-input); color: var(--color-input-content); } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: var(--color-neutral-soft); } /***** INPUT CLASSIQUES *****/ input[type="radio"].form-control { background-color: red; } /***** INPUT XS *****/ input.input-xs { font-size: 12px; font-weight: normal; height: 22px; padding: 6px; } select.input-xs { font-size: 12px; font-weight: normal; height: 22px; padding: 2px; } .input-group-addon.input-xs { font-size: 12px; font-weight: normal; height: 22px; padding: 4px 6px; } input.input-xs[type="file"] { padding: 2px; } input.input-xs[type="file"]::file-selector-button { height: 16px; font-size: 10px; line-height: 16px; } /***** CHOSEN SELECT *****/ select.form-control + .chosen-container.chosen-container-single .chosen-single { background-color: var(--color-input); color: var(--color-input-content); } .chosen-search { background-color: var(--color-input); color: var(--color-input-content); } select.form-control + .chosen-container, select.form-control + .chosen-container .chosen-drop, select.form-control + .chosen-container .chosen-results, select.form-control + .chosen-container .chosen-results li, select.form-control + .chosen-container .chosen-results li.active-result { background-color: var(--color-input); color: var(--color-input-content); } select.form-control + .chosen-container .chosen-results li.active-result.highlighted { background-color: var(--color-primary); color: var(--color-primary-content); } /***** MULTI-SELECT *****/ .multiselect-container.dropdown-menu { color: var(--color-input-content); background-color: var(--color-input); } .multiselect-container.dropdown-menu > li > a { color: var(--color-input-content); } .multiselect-container.dropdown-menu > .active > a, .multiselect-container.dropdown-menu > .active > a:focus, .multiselect-container.dropdown-menu > .active > a:hover, .multiselect-container.dropdown-menu > li > a:hover { color: var(--color-primary-content); background-color: var(--color-primary); } .multiselect .caret { margin-top: 8px; float: right; color: var(--color-input-content); } /*********** DATE **************/ /*********************************/ .form-label { font-style: italic; padding-top: 6px; text-align: left; } .form-label-sm { font-style: italic; padding-top: 6px; text-align: left; font-size: 12px; } @media (min-width: 768px) { .form-label, .form-label-sm { text-align: right; } } .form-label-left { font-style: italic; padding-top: 6px; text-align: left; } .form-required { color: var(--color-error); } .form-recommanded { color: blue; } .form-value { min-height: 32px; font-weight: bold; padding-top: 6px; padding-bottom: 6px; padding-left: 15px; } .form-value-table { min-height: 32px; padding-top: 6px; padding-bottom: 6px; } .form-check { font-style: italic; padding-top: 2px; text-align: left; } @media (min-width: 768px) { .form-check { text-align: center; } } .form-radio { font-style: italic; padding-left: 20px; padding-top: 6px; text-align: left; } .form-textarea { resize: vertical; } .field-with-error { border-color: rgb(159, 70, 67); } .form-slider-label { font-style: italic; text-align: left; padding-top: 35px; } @media (min-width: 768px) { .form-slider-label { text-align: right; } } .form-slider { font-style: italic; padding: 10px 20px 10px 20px; text-align: left; } .form-filters-zone { background-color: var(--color-base-300); margin: 0px 0px 15px 0px; padding: 10px; border: 0px solid lightgrey; border-radius: 5px; } .form-filters-row { display: flex; margin: 0px; align-items: center; } .form-filters-label { font-style: italic; margin: 0px 0px 0px 0px; padding: 6px 0px 0px 15px; text-align: left; } @media (min-width: 768px) { .form-filters-label { padding: 6px 0px 0px 0px; text-align: right; } } @media (max-width: 768px) { .form-filters-row { margin: 0px 0px 0px 0px; padding: 0px; } .form-filters-zone { padding: 0px; } } .form-list-buttons { margin-bottom: 15px; } .form-list-buttons-title { margin-bottom: 5px; font-style: italic; } .form-list-buttons-content { } .form-group-padding { padding: 0px 15px 0px 15px; } .input-group-addon { background-color: var(--color-base-100); color: var(--color-input-content); } /* #endregion */ /************************************************/ /* BOUTONS */ /************************************************/ /* #region Boutons */ /***** TAILLES DE BOUTONS *****/ .btn-std { width: 100px; } .btn-std-xs { width: 70px; } .btn-icon { width: 40px; } .btn-xxs { padding: 1px 5px; font-size: 10px; line-height: 1.5; border-radius: 3px; } .btn-xl { width: 200px; } /***** BOUTON CARRE GRAND FORMAT AVEC ICONE ET TITRE *****/ .btn-square { width: 128px; height: 128px; border-radius: 10px; cursor: pointer; text-align: center; vertical-align: middle; display: inline-block; } .btn-square-icon { margin-top: 20px; font-size: 64px; } .btn-square-text { margin-top: 5px; font-size: 16px; font-weight: bold; } /***** BOUTON EN COURS DE CHARGEMENT *****/ .btn-loading { z-index: 1; width: 100%; height: 100%; margin: 0px 0px 0px 0px; } .btn-loading-spinner { width: 20px; height: 20px; z-index: 2; border: 5px solid gainsboro; /* Light grey */ border-radius: 50%; border-top: 5px solid #3498db; /* Blue */ -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } /***** BOUTON AVEC ICONE ET TITRE *****/ .btn-title-with-icon { padding-left: 5px; } /***** BTN-DEFAULT *****/ .btn-default { color: var(--color-base-content); background-color: var(--color-base-100); border-color: var(--color-base-300); } .btn-default:focus, .btn-default.focus { color: var(--color-base-content); background-color: var(--color-base-100); border-color: var(--color-base-300); } .btn-default:hover { color: var(--color-base-content); background-color: var(--color-base-300); border-color: var(--color-base-300); } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: var(--color-base-content); background-color: var(--color-base-300); border-color: var(--color-base-300); background-image: none; } .btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus { color: var(--color-base-content); background-color: var(--color-base-300); border-color: var(--color-base-300); } .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus { background-color: var(--color-base-300); border-color: var(--color-base-300); } .btn-default .badge { color: var(--color-base-100); background-color: var(--color-base-content); } /***** BTN-PRIMARY *****/ .btn-primary { color: var(--color-primary-content); background-color: var(--color-primary); border-color: var(--color-primary-intense); } .btn-primary:focus, .btn-primary.focus { color: var(--color-primary-content); background-color: var(--color-primary); border-color: var(--color-primary-intense); } .btn-primary:hover { color: var(--color-primary-content); background-color: var(--color-primary-intense); border-color: var(--color-primary-intense); } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: var(--color-primary-content); background-color: var(--color-primary-intense); border-color: var(--color-primary-intense); background-image: none; } .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus { color: var(--color-primary-content); background-color: var(--color-primary-intense); border-color: var(--color-primary-intense); } .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus { background-color: var(--color-primary-intense); border-color: var(--color-primary-intense); } .btn-primary .badge { color: var(--color-primary); background-color: var(--color-primary-content); } /***** BTN-SECONDARY *****/ .btn-secondary { color: var(--color-secondary-content); background-color: var(--color-secondary); border-color: var(--color-secondary-intense); } .btn-secondary:focus, .btn-secondary.focus { color: var(--color-secondary-content); background-color: var(--color-secondary); border-color: var(--color-secondary-intense); } .btn-secondary:hover { color: var(--color-secondary-content); background-color: var(--color-secondary-intense); border-color: var(--color-secondary-intense); } .btn-secondary:active, .btn-secondary.active, .open > .dropdown-toggle.btn-secondary { color: var(--color-secondary-content); background-color: var(--color-secondary-intense); border-color: var(--color-secondary-intense); background-image: none; } .btn-secondary:active:hover, .btn-secondary.active:hover, .open > .dropdown-toggle.btn-secondary:hover, .btn-secondary:active:focus, .btn-secondary.active:focus, .open > .dropdown-toggle.btn-secondary:focus, .btn-secondary:active.focus, .btn-secondary.active.focus, .open > .dropdown-toggle.btn-secondary.focus { color: var(--color-secondary-content); background-color: var(--color-secondary-intense); border-color: var(--color-secondary-intense); } .btn-secondary.disabled:hover, .btn-secondary[disabled]:hover, fieldset[disabled] .btn-secondary:hover, .btn-secondary.disabled:focus, .btn-secondary[disabled]:focus, fieldset[disabled] .btn-secondary:focus, .btn-secondary.disabled.focus, .btn-secondary[disabled].focus, fieldset[disabled] .btn-secondary.focus { background-color: var(--color-secondary-intense); border-color: var(--color-secondary-intense); } .btn-secondary .badge { color: var(--color-secondary); background-color: var(--color-secondary-content); } /***** BTN-ACCENT *****/ .btn-accent { color: var(--color-accent-content); background-color: var(--color-accent); border-color: var(--color-accent-intense); } .btn-accent:focus, .btn-accent.focus { color: var(--color-accent-content); background-color: var(--color-accent); border-color: var(--color-accent-intense); } .btn-accent:hover { color: var(--color-accent-content); background-color: var(--color-accent-intense); border-color: var(--color-accent-intense); } .btn-accent:active, .btn-accent.active, .open > .dropdown-toggle.btn-accent { color: var(--color-accent-content); background-color: var(--color-accent-intense); border-color: var(--color-accent-intense); background-image: none; } .btn-accent:active:hover, .btn-accent.active:hover, .open > .dropdown-toggle.btn-accent:hover, .btn-accent:active:focus, .btn-accent.active:focus, .open > .dropdown-toggle.btn-accent:focus, .btn-accent:active.focus, .btn-accent.active.focus, .open > .dropdown-toggle.btn-accent.focus { color: var(--color-accent-content); background-color: var(--color-accent-intense); border-color: var(--color-accent-intense); } .btn-accent.disabled:hover, .btn-accent[disabled]:hover, fieldset[disabled] .btn-accent:hover, .btn-accent.disabled:focus, .btn-accent[disabled]:focus, fieldset[disabled] .btn-accent:focus, .btn-accent.disabled.focus, .btn-accent[disabled].focus, fieldset[disabled] .btn-accent.focus { background-color: var(--color-accent-intense); border-color: var(--color-accent-intense); } .btn-accent .badge { color: var(--color-accent); background-color: var(--color-accent-content); } /***** BTN-NEUTRAL *****/ .btn-neutral { color: var(--color-neutral-content); background-color: var(--color-neutral); border-color: var(--color-neutral-intense); } .btn-neutral:focus, .btn-neutral.focus { color: var(--color-neutral-content); background-color: var(--color-neutral); border-color: var(--color-neutral-intense); } .btn-neutral:hover { color: var(--color-neutral-content); background-color: var(--color-neutral-intense); border-color: var(--color-neutral-intense); } .btn-neutral:active, .btn-neutral.active, .open > .dropdown-toggle.btn-neutral { color: var(--color-neutral-content); background-color: var(--color-neutral-intense); border-color: var(--color-neutral-intense); background-image: none; } .btn-neutral:active:hover, .btn-neutral.active:hover, .open > .dropdown-toggle.btn-neutral:hover, .btn-neutral:active:focus, .btn-neutral.active:focus, .open > .dropdown-toggle.btn-neutral:focus, .btn-neutral:active.focus, .btn-neutral.active.focus, .open > .dropdown-toggle.btn-neutral.focus { color: var(--color-neutral-content); background-color: var(--color-neutral-intense); border-color: var(--color-neutral-intense); } .btn-neutral.disabled:hover, .btn-neutral[disabled]:hover, fieldset[disabled] .btn-neutral:hover, .btn-neutral.disabled:focus, .btn-neutral[disabled]:focus, fieldset[disabled] .btn-neutral:focus, .btn-neutral.disabled.focus, .btn-neutral[disabled].focus, fieldset[disabled] .btn-neutral.focus { background-color: var(--color-neutral-intense); border-color: var(--color-neutral-intense); } .btn-neutral .badge { color: var(--color-neutral); background-color: var(--color-neutral-content); } /***** BTN-INFO *****/ .btn-info { color: var(--color-info-content); background-color: var(--color-info); border-color: var(--color-info-intense); } .btn-info:focus, .btn-info.focus { color: var(--color-info-content); background-color: var(--color-info); border-color: var(--color-info-intense); } .btn-info:hover { color: var(--color-info-content); background-color: var(--color-info-intense); border-color: var(--color-info-intense); } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { color: var(--color-info-content); background-color: var(--color-info-intense); border-color: var(--color-info-intense); background-image: none; } .btn-info:active:hover, .btn-info.active:hover, .open > .dropdown-toggle.btn-info:hover, .btn-info:active:focus, .btn-info.active:focus, .open > .dropdown-toggle.btn-info:focus, .btn-info:active.focus, .btn-info.active.focus, .open > .dropdown-toggle.btn-info.focus { color: var(--color-info-content); background-color: var(--color-info-intense); border-color: var(--color-info-intense); } .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus { background-color: var(--color-info-intense); border-color: var(--color-info-intense); } .btn-info .badge { color: var(--color-info); background-color: var(--color-info-content); } /***** BTN-SUCCESS *****/ .btn-success { color: var(--color-success-content); background-color: var(--color-success); border-color: var(--color-success-intense); } .btn-success:focus, .btn-success.focus { color: var(--color-success-content); background-color: var(--color-success); border-color: var(--color-success-intense); } .btn-success:hover { color: var(--color-success-content); background-color: var(--color-success-intense); border-color: var(--color-success-intense); } .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { color: var(--color-success-content); background-color: var(--color-success-intense); border-color: var(--color-success-intense); background-image: none; } .btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus { color: var(--color-success-content); background-color: var(--color-success-intense); border-color: var(--color-success-intense); } .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus { background-color: var(--color-success-intense); border-color: var(--color-success-intense); } .btn-success .badge { color: var(--color-success); background-color: var(--color-success-content); } /***** BTN-WARNING *****/ .btn-warning { color: var(--color-warning-content); background-color: var(--color-warning); border-color: var(--color-warning-intense); } .btn-warning:focus, .btn-warning.focus { color: var(--color-warning-content); background-color: var(--color-warning); border-color: var(--color-warning-intense); } .btn-warning:hover { color: var(--color-warning-content); background-color: var(--color-warning-intense); border-color: var(--color-warning-intense); } .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { color: var(--color-warning-content); background-color: var(--color-warning-intense); border-color: var(--color-warning-intense); background-image: none; } .btn-warning:active:hover, .btn-warning.active:hover, .open > .dropdown-toggle.btn-warning:hover, .btn-warning:active:focus, .btn-warning.active:focus, .open > .dropdown-toggle.btn-warning:focus, .btn-warning:active.focus, .btn-warning.active.focus, .open > .dropdown-toggle.btn-warning.focus { color: var(--color-warning-content); background-color: var(--color-warning-intense); border-color: var(--color-warning-intense); } .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled.focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning.focus { background-color: var(--color-warning-intense); border-color: var(--color-warning-intense); } .btn-warning .badge { color: var(--color-warning); background-color: var(--color-warning-content); } /***** BTN-ERROR *****/ .btn-error { color: var(--color-error-content); background-color: var(--color-error); border-color: var(--color-error-intense); } .btn-error:focus, .btn-error.focus { color: var(--color-error-content); background-color: var(--color-error); border-color: var(--color-error-intense); } .btn-error:hover { color: var(--color-error-content); background-color: var(--color-error-intense); border-color: var(--color-error-intense); } .btn-error:active, .btn-error.active, .open > .dropdown-toggle.btn-error { color: var(--color-error-content); background-color: var(--color-error-intense); border-color: var(--color-error-intense); background-image: none; } .btn-error:active:hover, .btn-error.active:hover, .open > .dropdown-toggle.btn-error:hover, .btn-error:active:focus, .btn-error.active:focus, .open > .dropdown-toggle.btn-error:focus, .btn-error:active.focus, .btn-error.active.focus, .open > .dropdown-toggle.btn-error.focus { color: var(--color-error-content); background-color: var(--color-error-intense); border-color: var(--color-error-intense); } .btn-error.disabled:hover, .btn-error[disabled]:hover, fieldset[disabled] .btn-error:hover, .btn-error.disabled:focus, .btn-error[disabled]:focus, fieldset[disabled] .btn-error:focus, .btn-error.disabled.focus, .btn-error[disabled].focus, fieldset[disabled] .btn-error.focus { background-color: var(--color-error-intense); border-color: var(--color-error-intense); } .btn-error .badge { color: var(--color-error); background-color: var(--color-error-content); } /***** ********************* *****/ /* */ .btn-space { margin-right: 5px; } .btn-space:last-of-type { margin-right: 0; } .has-error > .btn { color: var(--color-error-content); background-color: var(--color-error); border-color: var(--color-error-content); } /* #endregion */ /************************************************/ /* PROCESSUS */ /************************************************/ /* #region Processus */ .process-container { display: flex; align-items: stretch; width: 100%; } .process-container .process-step { flex: 1; position: relative; padding: 5px 15px 5px 15px; clip-path: polygon( 0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50% ); font-size: 12px; text-align: center; user-select: none; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; white-space: normal; word-break: break-word; } .process-container .process-step.selected { color: var(--color-primary-content); font-weight: bold; background-color: var(--color-primary) !important; } .process-container .process-step:not(.selected) { color: var(--color-base-content); background-color: var(--color-base-200); } .process-container:not(.disabled) .process-step { cursor: pointer; } .process-container:not(.disabled) .process-step:hover:not(.selected) { color: var(--color-base-content); background-color: var(--color-base-300); } /* #endregion */ /************************************************/ /* ALERTES */ /************************************************/ /* #region Alertes */ .alert-success { color: var(--color-success-intense); background-color: var(--color-success-soft); border-color: var(--color-success); } .alert-success hr { border-top-color: var(--color-success-intense); } .alert-success .alert-link { color: var(--color-success-intense); } .alert-info { color: var(--color-info-intense); background-color: var(--color-info-soft); border-color: var(--color-info); } .alert-info hr { border-top-color: var(--color-info-intense); } .alert-info .alert-link { color: var(--color-info-intense); } .alert-warning { color: var(--color-warning-intense); background-color: var(--color-warning-soft); border-color: var(--color-warning); } .alert-warning hr { border-top-color: var(--color-warning-intense); } .alert-warning .alert-link { color: var(--color-warning-intense); } .alert-danger { color: var(--color-error-intense); background-color: var(--color-error-soft); border-color: var(--color-error); } .alert-danger hr { border-top-color: var(--color-error-intense); } .alert-danger .alert-link { color: var(--color-error-intense); } /* #endregion */ /************************************************/ /* RATING (ETOILES) */ /************************************************/ /* #region Rating */ .rating { --dir: right; --fill: gold; --fillbg: rgba(100, 100, 100, 0.15); --star: url('data:image/svg+xml,'); --fill-star: gold; --heart: url('data:image/svg+xml,'); --fill-heart: red; --like: url('data:image/svg+xml,'); --fill-like: green; --smiley: url('data:image/svg+xml, '); --fill-smiley: gold; --stars: 5; --starsize: 3rem; --symbol: var(--star); --value: 1; --w: calc(var(--stars) * var(--starsize)); --x: calc(100% * (var(--value) / var(--stars))); width: var(--w) !important; block-size: var(--starsize); inline-size: var(--w); position: relative; touch-action: manipulation; -webkit-appearance: none; } .rating-active-input:hover { cursor: pointer; } .rating-heart { --symbol: var(--heart); --fill: red; } .rating-like { --symbol: var(--like); --fill: green; } [dir="rtl"] .rating { --dir: left; } .rating::-moz-range-track { background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x)); block-size: 100%; mask: repeat left center/var(--starsize) var(--symbol); } .rating::-webkit-slider-runnable-track { background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x)); block-size: 100%; mask: repeat left center/var(--starsize) var(--symbol); -webkit-mask: repeat left center/var(--starsize) var(--symbol); } .rating::-moz-range-thumb { height: var(--starsize); opacity: 0; width: var(--starsize); } .rating::-webkit-slider-thumb { height: var(--starsize); opacity: 0; width: var(--starsize); -webkit-appearance: none; } .rating { display: block; font-family: ui-sans-serif, system-ui, sans-serif; } /* #endregion */ /************************************************/ /* UTILES */ /************************************************/ /* #region Utiles */ /******** COULEURS FOND ********/ .bg-color-base-100 { background-color: var(--color-base-100); } .bg-color-base-200 { background-color: var(--color-base-200); } .bg-color-base-300 { background-color: var(--color-base-300); } .bg-color-base-content { background-color: var(--color-base-content); } .bg-color-primary { background-color: var(--color-primary); } .bg-color-secondary { background-color: var(--color-secondary); } .bg-color-accent { background-color: var(--color-accent); } /******** COULEURS POLICE ********/ .color-text-dark { color: var(--color-base-content); } .color-text-light { color: var(--color-base-100); } .color-default { color: var(--color-default); } .color-primary { color: var(--color-primary); } .color-secondary { color: var(--color-secondary); } .color-success { color: var(--color-success); } .color-error { color: var(--color-error); } .color-warning { color: var(--color-warning); } .color-info { color: var(--color-info); } /******** POLICE ********/ .font-italic { font-style: italic; } .font-bold { font-weight: bold; } .font-normal { font-weight: normal; } /******** OBJETS FLOTTANTS ********/ .float-right { float: right; } .float-left { float: left; } /******** CURSEURS ********/ .cursor-pointer { cursor: pointer; } .cursor-grab { cursor: grab; } .cursor-help { cursor: help; } .sortable-item { cursor: grab; } .sortable-item:active { cursor: grabbing; } /******** ALIGNEMENTS ********/ .align-center { text-align: center; } .align-left { text-align: left; } .align-right { text-align: right; } .align-vh-center { vertical-align: middle !important; text-align: center; } .align-v-middle { vertical-align: middle !important; } /******** MARGES ********/ .margin-0 { margin: 0px; } /* #endregion */ /************************************************/ /* TITRES */ /************************************************/ /* #region Titres */ h2 { font-size: 28px; font-style: italic; font-weight: bold; line-height: 1; margin: 0px 0px 0px 0px; } h3 { font-size: 20px; font-style: italic; font-weight: bold; line-height: 1; margin: 0px 0px 0px 0px; } h4 { font-size: 14px; font-style: italic; font-weight: bold; line-height: 1; margin: 0px 0px 0px 0px; } .titre-intercalaire { height: 2em; margin-top: 30px; font-size: 16px; background-color: var(--color-menu); color: var(--color-menu-content); text-transform: uppercase; font-weight: bold; padding: 5px 15px 5px 15px; font-style: italic; border-radius: 0px; } .titre-intercalaire .icone-action-left { margin-left: 10px; cursor: pointer; } /* #endregion */ /************************************************/ /* ZONES AUDIT */ /************************************************/ /* #region ZonesAudit */ .audit { display: flex; width: 100%; font-size: 10px; font-style: italic; padding: 15px 10px 10px 10px; } .audit-left { width: 50%; text-align: left; } .audit-right { width: 50%; text-align: right; } .audit-modal-footer { float: left; font-size: 10px; font-style: italic; text-align: left; width: 50%; } /* #endregion */ /************************************************/ /* FENETRES MODALES */ /************************************************/ /* #region Modales */ /***** CONTENU *****/ .modal-title { font-size: 20px; font-weight: bold; } .modal-content { overflow: hidden; background-color: var(--color-base-100); } .modal-body-subject { font-size: 16px; font-weight: bold; } /***** COULEURS *****/ .modal-primary { background-color: var(--color-primary); color: var(--color-primary-content); } .modal-secondary { background-color: var(--color-secondary); color: var(--color-secondary-content); } .modal-info { background-color: var(--color-info); color: var(--color-info-content); } .modal-error { background-color: var(--color-error); color: var(--color-error-content); } .modal-warning { background-color: var(--color-warning); color: var(--color-warning-content); } .modal-success { background-color: var(--color-success); color: var(--color-success-content); } /***** TAILLES *****/ .modal-sm { width: 350px; } .modal-lg { width: 800px; } .modal-xl { width: 1000px; } .modal-xxl { width: 1200px; } /***** CROIX FERMETURE *****/ .modal-close { float: right; font-size: 20px; font-weight: bold; margin: 0 0 0 0; cursor: pointer; } .modal-close:hover { filter: brightness(1.2); } /***** MESSAGE ALERTE *****/ .modal-message-alert { color: var(--color-error); font-size: 20px; } /***** ALIGNEMENT *****/ .modal.modal-vertical-center { display: flex !important; align-items: center; justify-content: center; text-align: center; } .modal.modal-vertical-center .modal-dialog { margin: 0; text-align: left; } .modal-center { text-align: center; } @media screen and (min-device-width: 768px) { .modal-center:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } } .modal-center .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } /************************************************/ /* FENETRES MODALES EVOLUEES */ /************************************************/ .modal-advanced-content { height: 600px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; box-sizing: border-box; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 15px; } .modal-advanced-tab-content { border-style: none !important; padding: 0px 0px 0px 0px !important; height: 600px; } .modal-advanced-tab-pane { height: 100%; padding: 0px 15px 0px 0px; overflow: hidden auto; } .modal-advanced-titre-sous-section { padding: 0px 0px 5px 0px; margin: 0px 0px 20px 0px; font-size: 16px; font-style: italic; font-weight: bold; border-bottom: 1px solid var(--color-neutral); } /************************************************/ /* FENETRES MODALES GENERIQUE ERROR */ /************************************************/ .modal-generic-error-field { width: 200px; margin-top: 2px; margin-left: 59px; } /************************************************/ /* FENETRES MODALES GENERIQUE IMPUTATION */ /************************************************/ #modal-generic-imputation-nom-client { width: 100%; text-align: center; font-weight: bold; font-size: 20px; margin-bottom: 10px; } .modal-generic-imputation-option-label { margin: 0 0 0 5px; } .modal-generic-imputation-intercalaire { background-color: var(--color-base-300); font-style: italic; } .modal-generic-imputation-reste { font-weight: bold; } .modal-generic-imputation-loading { width: 100%; text-align: center; } .modal-generic-imputation-loading-spinner { display: inline-block; width: 100px; height: 100px; border: 16px solid var(--modal-spinner-bgcolor); border-radius: 50%; border-top: 16px solid var(--modal-spinner-fgcolor); -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .modal-generic-imputation-loading-title { font-size: 20px; color: var(--color-base-content); } /* #endregion */ /************************************************/ /* TABLE STANDARD */ /************************************************/ /* #region TableStandard */ .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { vertical-align: middle; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: var(--color-info-soft); color: var(--color-base-content); } .table-actions { white-space: nowrap; text-align: right; } .table-actions > div, .table-actions > span { cursor: pointer; margin: 0px 7px 0px 7px; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--color-base-200); } td.col-oneline { max-width: 0; } td.col-oneline div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* #endregion */ /************************************************/ /* TABLE SAISIE */ /************************************************/ /* #region TableSaisie */ .table-saisie { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; } /* ESPACEMENTS */ .table-saisie tr { line-height: 22px; } .table-saisie td, .table-saisie th { padding: 3px 8px; } /* CORPS POLICES */ .table-saisie td { font-weight: normal; } .table-saisie th { font-weight: bold; } /* ALIGNEMENT TEXTE */ .table-saisie thead th, .table-saisie thead td { text-align: center; } /* COULEURS */ .table-saisie td, .table-saisie th { } .table-saisie thead th, .table-saisie tfoot th { background-color: var(--color-neutral); color: var(--color-neutral-content); } .table-saisie thead td, .table-saisie tfoot td { background: var(--color-neutral-soft); color: var(--color-neutral-intense); } .table-saisie tbody tr:hover { background: var(--color-base-200); color: var(--color-base-content); } /* INPUT */ .table-saisie input { font-size: 12px; font-weight: normal; height: 22px; padding: 6px; } .table-saisie .input-group-addon { font-size: 12px; font-weight: normal; height: 22px; padding: 4px 6px; } .table-saisie select { font-size: 12px; font-weight: normal; height: 22px; padding: 2px; } /* BORDURES */ /* HEADER */ .table-saisie thead tr th, .table-saisie thead tr td { border-top: none; border-bottom: 1px solid var(--color-base-100); border-left: none; border-right: 1px solid var(--color-base-100); } /* Bordures du header de gauche de la dernière cellule */ .table-saisie thead tr th:first-child, .table-saisie thead tr td:first-child { border-left: 2px solid var(--color-neutral-intense); } /* Bordure de droite de la dernière cellule */ .table-saisie thead tr th:last-child, .table-saisie thead tr td:last-child { border-right: 2px solid var(--color-neutral-intense); } /* Bordure de haut des celulles de la 1ère ligne */ .table-saisie thead tr:first-child th, .table-saisie thead tr:first-child td { border-top: 2px solid var(--color-neutral-intense); } /* Bordure de bas des celulles de la dernière ligne */ .table-saisie thead tr:last-child th, .table-saisie thead tr:last-child td { border-bottom: 1px solid var(--color-neutral-intense); } /* BODY */ .table-saisie tbody tr td, .table-saisie tbody tr th { border-bottom: 1px solid var(--color-neutral); } /* Bordure de la première cellule de chaque ligne */ .table-saisie tbody tr td:first-child, .table-saisie tbody tr th:first-child { border-left: 2px solid var(--color-neutral-intense); } /* Bordure de la dernière cellule de chaque ligne */ .table-saisie tbody tr td:last-child, .table-saisie tbody tr th:last-child { border-right: 2px solid var(--color-neutral-intense); } /* FOOTER */ .table-saisie tfoot tr th, .table-saisie tfoot tr td { border-top: none; border-bottom: 1px solid var(--color-base-100); border-left: none; border-right: 1px solid var(--color-base-100); } /* Bordure de la première ligne */ .table-saisie tfoot tr:first-child th, .table-saisie tfoot tr:first-child td { border-top: 2px solid var(--color-neutral-intense); } /* Bordure de la dernière ligne */ .table-saisie tfoot tr:last-child th, .table-saisie tfoot tr:last-child td { border-bottom: 2px solid var(--color-neutral-intense); } /* Bordure de la première cellule */ .table-saisie tfoot tr th:first-child, .table-saisie tfoot tr td:first-child { border-left: 2px solid var(--color-neutral-intense); } /* Bordure de la dernière cellule */ .table-saisie tfoot tr th:last-child, .table-saisie tfoot tr td:last-child { border-right: 2px solid var(--color-neutral-intense); } /* COINS ARRONDIS */ /* Coins arrondis de la cellule en haut à gauche */ .table-saisie thead tr:first-child td:first-child, .table-saisie thead tr:first-child th:first-child { border-top-left-radius: 6px; } /* Coins arrondis de la cellule en haut à droite */ .table-saisie thead tr:first-child td:last-child, .table-saisie thead tr:first-child th:last-child { border-top-right-radius: 6px; } /* Coins arrondis de la première cellule en bas à gauche */ .table-saisie tfoot tr:last-child th:first-child, .table-saisie tfoot tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* Coins arrondis de la denière cellule en bas à gauche */ .table-saisie tfoot tr:last-child th:last-child, .table-saisie tfoot tr:last-child td:last-child { border-bottom-right-radius: 6px; } /*--------------------------*/ /* VARIANTE PRIMARY */ /*--------------------------*/ .table-saisie-primary thead th, .table-saisie-primary tfoot th { background-color: var(--color-primary); color: var(--color-primary-content); } .table-saisie-primary thead td, .table-saisie-primary tfoot td { background: var(--color-primary-soft); color: var(--color-primary-intense); } /*--------------------------*/ /* VARIANTE SECONDARY */ /*--------------------------*/ .table-saisie-secondary thead th, .table-saisie-secondary tfoot th { background-color: var(--color-secondary); color: var(--color-secondary-content); } .table-saisie-secondary thead td, .table-saisie-secondary tfoot td { background: var(--color-secondary-soft); color: var(--color-secondary-intense); } /* #endregion */ /************************************************/ /* LOADING */ /************************************************/ /* #region Loading */ .loading { position: absolute; left: 0; top: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .loading-title { position: fixed; top: 50vh; z-index: 1001; margin-top: 80px; width: 100%; text-align: center; font-size: 20px; color: white; } .loading-spinner { position: fixed; left: 50%; top: 50vh; z-index: 1001; width: 100px; height: 100px; margin: -50px 0 0 -50px; border: 16px solid #f3f3f3; /* Light grey */ border-radius: 50%; border-top: 16px solid #3498db; /* Blue */ -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* #endregion */ /************************************************/ /* POPUP D'ACTION EN COURS */ /************************************************/ /* #region PopupAction */ .waiting-action-popup { position: fixed; z-index: 100; background: WhiteSmoke; width: auto; max-width: 400px; height: 35px; bottom: 10px; left: 10px; border-radius: 10px; border: 2px solid black; display: table; padding: 0px 20px 0px 10px; } .waiting-action-popup > .content { display: table-cell; font-size: 14px; text-align: left; vertical-align: middle; padding-left: 10px; font-weight: bold; } .waiting-action-popup > .spinner-container { display: table-cell; padding: 5px 5px 5px 5px; } .waiting-action-popup > .spinner-container > .spinner { width: 25px; height: 25px; z-index: 200; border: 5px solid gainsboro; /* Light grey */ border-radius: 50%; border-top: 5px solid #3498db; /* Blue */ -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .simple-spinner { display: inline; padding: 5px 5px 5px 5px; } .simple-spinner > .spinner { display: table-cell; width: 25px; height: 25px; z-index: 200; border: 5px solid gainsboro; /* Light grey */ border-radius: 50%; border-top: 5px solid #3498db; /* Blue */ -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } /* #endregion */ /************************************************/ /* IMAGE VIEWER */ /************************************************/ /* #region ImageViewer */ #image-viewer { position: absolute; left: 0; top: 0; z-index: 2001; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } #image-viewer-controls { display: block; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid lightgrey; background-color: #eeeeee; /*rgba(255, 255, 255, 1);*/ height: 40px; padding-top: 3px; margin-top: 20px; vertical-align: central; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); } #image-viewer-controls-row { padding: 0px 10px 0px 10px; display: flex; align-items: center; font-weight: bold; font-size: 18px; } #image-viewer-controls-row .image-viewer-controls-col { max-height: 34px; overflow: hidden; } #image-viewer-img { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); } #image-viewer-direct-access-box { background-color: white; border: 1px solid lightgrey; background-color: #eeeeee; /*rgba(255, 255, 255, 1);*/ position: absolute; top: 60px; z-index: 3000; height: 70px; width: 160px; padding: 0 10px 0 10px; border-radius: 5px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); } .image-viewer-tooltip { cursor: pointer; } /* #endregion */ /************************************************/ /* ONGLETS */ /************************************************/ /* #region Onglets */ .tab-content { border: 1px solid lightgrey; border-top: 0px; padding: 20px 20px 20px 20px; } .tab-pane-border { border: 1px solid #dddddd; border-radius: 0px 0px 4px 4px; border-top-style: none; } .nav-tabs > li > a, .nav-tabs > li > a:focus, .nav-tabs > li > a:hover { background-color: var(--color-base-100); color: var(--color-base-content); border-bottom: 1px solid #dddddd; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { background-color: var(--color-base-100); color: var(--color-base-content); } /* #endregion */ /************************************************/ /* PANEL */ /************************************************/ /* #region Panel */ .panel { background-color: var(--color-base-200); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .panel-heading, .panel-default > .panel-heading { background-color: var(--color-base-300); color: var(--color-base-content); } .panel-footer, .panel-default > .panel-footer { background-color: var(--color-base-300); color: var(--color-base-content); border-top: 1px solid inherit; } /* GERER BTN-DEFAULT */ /* GERER BACKGROUD RATING */ /* #endregion */ /************************************************/ /* NAV-PILLS */ /************************************************/ /* #region NavPills */ .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover { color: var(--color-primary-content); background-color: var(--color-primary); } /* #endregion */ /************************************************/ /* TOOLTIPS */ /************************************************/ /* #region Tooltips */ .tooltip-inner { max-width: 350px; } .tooltip-error + .tooltip > .tooltip-inner { background-color: #f00; } .tooltip-error + .tooltip > .tooltip-arrow { border-top-color: #f00; } /* #endregion */ /************************************************/ /* TABLESORTER EXTENSION */ /************************************************/ /* #region Tablesorter */ .tablesorter-default { background-color: inherit; color: inherit; margin: 0 0 0 0; } .tablesorter-default thead tr th, .tablesorter-default thead tr td, .tablesorter-default tbody tr th, .tablesorter-default tbody tr td, .tablesorter-default tfoot tr th, .tablesorter-default tfoot tr td { background-color: inherit; color: inherit; } /* #endregion */ /************************************************/ /* SPECIFIQUES PAGES */ /************************************************/ /************************************************/ /* ENTRETIEN */ /************************************************/ .fa-icon-item { margin-right: 15px; width: 15px; text-align: center; } /************************************************/ /* ENTRETIEN MODELE */ /************************************************/ .entretien-modele-element-titre { /*text-transform: uppercase;*/ font-size: 20px; font-weight: bold; } .entretien-modele-add-element-button { margin-bottom: 20px; } /************************************************/ /* TABLES FORMATION */ /************************************************/ .table-formation { width: 100%; } .table-formation th { padding: 7px; background-color: black; text-align: center; font-style: italic; font-weight: normal; color: white; } .table-formation td { padding: 7px; } .table-formation td.td-action { text-align: center; justify-content: space-around; } .qcm-periode { font-style: italic; } .qcm-theme { font-size: 16px; text-decoration: underline; } .qcm-question { padding-top: 6px; font-style: italic; } .qcm-reponse { padding-top: 6px; padding-bottom: 6px; } .qcm-liste > div { background-color: var(--color-base-200); } .qcm-liste > div:nth-child(2n) { background-color: var(--color-base-100); } /************************************************/ /* MODALE ENTRETIEN */ /************************************************/ #modal-entretien { position: absolute; left: 0; top: 0; z-index: 2001; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .modal-entretien-window { position: absolute; left: 0; top: 0; width: 100%; margin: 0 0 0 0; padding: 20px 20px 20px 20px; } .modal-entretien-header { height: 60px; font-size: 20px; font-weight: bold; padding: 15px 20px 15px 20px; background-color: #3276b1; color: white; border-radius: 5px 5px 0px 0px; overflow: hidden; } .modal-entretien-content { padding: 0px 20px 0px 20px; max-height: 80vh; overflow: auto; background-color: white; } .modal-entretien-footer { background-color: whitesmoke; height: 60px; border-top: 1px solid lightgray; padding: 12px 40px 12px 40px; border-radius: 0px 0px 5px 5px; } /************************************************/ /* ENTRETIEN */ /************************************************/ .entretien-photo-user { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; } .entretien-titre-principal { font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 32px; color: #012498; margin: 15px 0px 15px 0px; text-transform: uppercase; } .entretien-titre-secondaire { font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 22px; color: #FF5135; margin: 20px 0px 5px 0px; text-transform: uppercase; } .entretien-element-titre { font-size: 18px; font-weight: bold; margin: 20px 0px 5px 0px; } .entretien-element-instructions { font-size:12px; font-style: italic; margin-bottom: 10px; } .entretien-table-reponse { width: 100%; --entretien-border-table: gainsboro; } .entretien-table-reponse > thead > tr { padding: 10px 10px 10px 10px; background-color: whitesmoke; } .entretien-table-reponse > thead > tr > th { border-top: 1px var(--entretien-border-table) solid; border-left: 1px var(--entretien-border-table) solid; border-right: 1px var(--entretien-border-table) solid; padding: 10px 10px 10px 10px; } .entretien-table-reponse > thead > tr > th > .qualification { font-style: italic; font-weight: normal; } .entretien-table-reponse > thead > tr > th.sans-reponse { color: lightgrey; } .entretien-table-reponse > thead > tr > th.sans-reponse > img { filter: grayscale(1); opacity: 0.2; } .entretien-table-reponse > tbody > tr > td { border-left: 1px var(--entretien-border-table) solid; border-right: 1px var(--entretien-border-table) solid; padding: 3px 10px 3px 10px; } .entretien-table-reponse > tbody > tr > td.with-border { border-bottom: 1px var(--entretien-border-table) solid; } .entretien-table-reponse > tbody > tr > td.with-separator { border-bottom: 1px var(--entretien-border-table) solid; padding-bottom: 10px !important; } .entretien-table-reponse > tfoot > tr > td { border-bottom: 1px var(--entretien-border-table) solid; border-left: 1px var(--entretien-border-table) solid; border-right: 1px var(--entretien-border-table) solid; padding: 10px 10px 10px 10px; } .entretien-table-label { padding-top: 10px !important; padding-bottom: 0px !important; font-size: 12px; font-style: italic; text-decoration: underline; } .entretien-sans-note { border: 0 !important; background-color: white !important; } .entretien-sortable-item { height: 2em; border: 1px solid gainsboro; cursor: grab; border-radius: 5px; background-color: whitesmoke; margin: 5px 0px 5px 0px; padding-top: 3px; padding-left: 10px; vertical-align: middle; } .entretien-sortable-item:hover { background-color: gainsboro; } .entretien-sortable-item:active { cursor: grabbing; } .entretien-indicateur-deplacement { float: right; padding: 4px 15px 0px 0px; } .entretien-grille-header { padding-top: 6px; } .entretien-grille-header > span { padding-top: 6px; } .entretien-reponse-non-selectionnee { text-decoration: line-through; font-weight: normal; color: lightgray; } /************************************************/ /* SORTABLE LIST */ /************************************************/ .card-item { margin: 10px 0px 10px 0px; padding: 10px 0px 10px 0px; background-color: white; border: 1px solid lightgrey; border-radius: 5px; display: flex; align-items: center; } .card-item-icon { text-align: center; font-size: 16px; } /************************************************/ /* GRILLE DE SAISIE */ /************************************************/ .grid-status, .grid-action, .grid-order { text-align: center; font-size: 16px; width: 40px; } .grid-icon { margin-top: 5px; } .grid-action > div { cursor: pointer; } .grid-order > div { cursor: grab; } .grid-loading { z-index: 1; width: 100%; height: 100%; margin: 3px 0px 0px 3px; /*background-color: rgba(0, 0, 0, 0.5);*/ } .grid-loading-spinner { width: 25px; height: 25px; z-index: 2; border: 5px solid gainsboro; /* Light grey */ border-radius: 50%; border-top: 5px solid #3498db; /* Blue */ -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .grid-total { font-weight: bold; font-size: 14px; } .grid-value { overflow: hidden; text-overflow: ellipsis; /*margin-top: 6px;*/ max-height: 16px; } .grid-sm-line { height: 41px; font-size: 12px; } .grid-sm-line input { font-size: 12px; font-weight: normal; height: 30px; padding: 6px; } .grid-sm-line select { font-size: 12px; font-weight: normal; height: 30px; padding: 2px; } .grid-sm-line .input-group-addon { font-size: 12px; font-weight: normal; height: 30px; padding: 4px 6px; } .grid-sm-value { padding-left: 8px; padding-right: 8px; } /************************************************/ /* FICHE INTERVENTION */ /************************************************/ .detail-activite-description-tooltip { position: absolute; top: 0px; left: 0px; z-index: 100; width: 400px; background-color: white; margin: 0px; padding: 5px; border: 2px solid black; } /************************************************/ /* TOOLTIPS */ /************************************************/ /************************************************/ /* TOOLTIPS ANOMALIES */ /************************************************/ .anomalie-sign { cursor: help; font-size: 20px; } .anomalie-anomalie-color { color: #FF5135; } .anomalie-alerte-color { color: #D2AF70; } .anomalie-title { font-size: 12px; font-style: italic; } .anomalie-detail { font-size: 16px; font-weight: bold; } .anomalie-tooltip { position: absolute; top: 0px; left: 0px; z-index: 100; width: 400px; background-color: white; margin: 0px; padding: 5px; border: 2px solid black; } /************************************************/ /* TOOLTIPS COMMANDES */ /************************************************/ .commande-warning { cursor: help; font-size: 20px; color: #FF5135; } .commande-warning-tooltip { position: absolute; top: 0px; left: 0px; z-index: 100; width: 180px; background-color: white; margin: 0px; padding: 5px; border: 2px solid #FF5135; color: #FF5135; font-weight: bold; } .commande-name { cursor: help; } .commande-name-tooltip { position: absolute; top: 0px; left: 0px; z-index: 100; width: 400px; background-color: white; margin: 0px; padding: 5px; border: 2px solid black; } /************************************************/ /* PLANNING */ /************************************************/ @media (max-width: 992px) { .planning-mensuel { font-size: 12px; } } .planning-mensuel { width: 100%; } .planning-mensuel > thead > tr > th { text-align: center; font-weight: normal; padding-top: 10px; padding-bottom: 10px; } .planning-mensuel > tbody > tr > th { font-weight: normal; width: 9%; } .planning-mensuel > tbody > tr > td { vertical-align: top; width: 13%; } .planning-hebdo { width: 100%; } .planning-hebdo > tbody > tr { border-bottom: 1px solid lightgrey; border-top: 1px solid lightgrey; } .planning-hebdo > tbody > tr > th { font-weight: normal; text-align: left; width: 15%; } .planning-hebdo > tbody > tr > td { width: 85%; } .planning-equipe { width: 100%; } .planning-equipe > thead > tr > th { background: white; text-align: center; font-weight: normal; padding-top: 10px; padding-bottom: 10px; } .planning-equipe > tbody > tr { border-bottom: 1px solid lightgrey; border-top: 1px solid lightgrey; } .planning-equipe > tbody > tr > th { font-weight: normal; width: 16%; } .planning-equipe > tbody > tr > td { vertical-align: top; width: 12%; } .jour-courant { border: 2px solid var(--color-accent); } .case { padding: 2px; margin: 2px; overflow: hidden; cursor: pointer; position:relative; } @media (min-width: 992px) { .case { font-size: 12px; } } .case:hover { cursor: pointer; } .case-complete { height: 80px; } .case-incomplete { height: 38px; } .case-icon-time { position: absolute; bottom: 1px; right: 5px; } .case-tooltip-header { color: var(--color-info-soft); } .case-tooltip-error { color: var(--color-error); } .inter-ferme { background-color: var(--color-success-soft); color: var(--color-success-intense); } .inter-valide { border-left: 5px solid var(--color-success); } .inter-ouvert-passe { background-color: var(--color-error); color: var(--color-error-content); } .inter-ouvert-futur { background-color: var(--color-primary); color: var(--color-primary-content); } .sans-inter-passe { border: 1px dashed var(--color-error); } .sans-inter-futur { border: 1px dashed var(--color-primary); } .sans-inter-non-travaille { border: 1px dashed var(--color-neutral); } /************************************************/ /* LISTE INTERVENTIONS */ /************************************************/ .ligne-non-travaille { /*background-color: lightblue;*/ background-color: var(--color-info); } .ligne-aujourdhui { font-weight: bold; } /************************************************/ /* FICHE INTERVENTION */ /************************************************/ .message-serie-input { padding-left: 10px; display: inline-block; white-space: nowrap; } @media (max-width: 992px) { .message-serie-input { display: block; white-space: nowrap; } } /************************************************/ /* FICHE JUSTFIFICATIF */ /************************************************/ .sauvegarder-document-input { padding-top: 3px; padding-left: 10px; display: inline-block; white-space: nowrap; } @media (max-width: 992px) { .sauvegarder-document-input { display: block; white-space: nowrap; } } /************************************************/ /* FICHE DETAIL ACTIVITE */ /************************************************/ .detail-activite-ligne-jour { background-color: lightblue; } .detail-activite-ligne-intervention { background-color: antiquewhite; font-style: italic; font-weight: bold; } /************************************************/ /* RESSOURCE COURS */ /************************************************/ .ressource-libelle-nom { font-size: 24px; font-weight: bold; } .ressource-label { font-style: italic; text-align: right; } .ressource-value { font-weight: bold; } .support-thumbnail { display: block; border: 1px solid black; width: 192px; } .support-thumbnail:hover { cursor: pointer; -webkit-filter: brightness(50%); } .support-thumbnail-spinner-container { background-color: lightgrey; width: 192px; height: 108px; border: 1px solid black; } .support-thumbnail-spinner { z-index: 2; width: 50px; height: 50px; margin: 20px 0 0 71px; border: 8px solid #f3f3f3; /* Light grey */ border-radius: 50%; border-top: 8px solid #3498db; /* Blue */ -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .support-thumbnail-spinner-title { font-size: 10px; color: black; margin-top: 5px; text-align: center; } .support-thumbnail { display: block; border: 1px solid black; width: 192px; } .support-thumbnail:hover { cursor: pointer; -webkit-filter: brightness(50%); } .support-thumbnail-spinner-container { background-color: lightgrey; width: 192px; height: 108px; border: 1px solid black; } .support-thumbnail-spinner { z-index: 2; width: 50px; height: 50px; margin: 20px 0 0 71px; border: 8px solid #f3f3f3; /* Light grey */ border-radius: 50%; border-top: 8px solid #3498db; /* Blue */ -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .support-thumbnail-spinner-title { font-size: 10px; color: black; margin-top: 5px; text-align: center; } .fichier-thumbnail { display: block; border: 1px solid black; width: 192px; } .fichier-thumbnail-spinner-container { background-color: lightgrey; width: 50px; height: 50px; border: 1px solid black; } .fichier-thumbnail-spinner { z-index: 2; width: 50px; height: 50px; margin: 0 0 0 0; border: 8px solid #f3f3f3; /* Light grey */ border-radius: 50%; border-top: 8px solid #3498db; /* Blue */ -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .fichier-thumbnail-spinner-title { font-size: 10px; color: black; margin-top: 5px; text-align: center; } .errors-messages { color: red; } /************************************************/ /* SPECIFIQUE FICHE INTERVENTION */ /************************************************/ .modal-serie-jours-semaine { line-height: 10px; padding-top: 10px; padding-left: 40px; } /************************************************/ /* SPECIFIQUE LISTE REFERENTIELS */ /************************************************/ .extra-data { font-size: 9pt; color: grey; } /************************************************/ /* PLANNING */ /************************************************/ .info-complementaire { font-size: 10px; font-style: italic; padding-left: 10px; text-align: left; } .titre-documentation-div { height: 50px; vertical-align: middle; font-size: 26px; font-weight: bold; color: #0b8ac9; } .td-input-label { text-align: right; font-size: 14px; font-style: italic; padding: 5px; } .td-value-label { text-align: left; line-height: 1.428571429; font-weight: bold; font-size: 14px; padding: 5px; } .cal-inter { font-size: 12px; padding: 2px; margin: 2px; overflow: auto; } .cal-inter:hover { /*cursor:pointer;*/ } /***** CASE DU PLANNING *****/ .ferme { background-color: #caf5b8; } .valide { border-collapse: collapse; border-left-width: 5px; border-left-color: green; border-left-style: solid; } .courant { border-collapse: collapse; border-width: 2px; border-color: black; border-style: solid; } .non-ferme { background-color: #d9534f /*#f0ad4e*/; color: white; } .booke { background-color: lightblue; } .off { background-color: lightgray; } .retard { border-color: #d9534f; border-width: 1px; border-style: dashed; border-collapse: collapse; } .sans { border-color: #428bca; border-width: 1px; border-style: dashed; border-collapse: collapse; } .we { border-color: #cccccc; border-width: 1px; border-style: dashed; border-collapse: collapse; } .jour { height: 80px; } .demi-jour { height: 38px; } .quart-jour { height: 18px; }