Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
variables.css 5.4 KiB
Newer Older
/* NOTE VALUE INFO to change color var
    --ifm-color-scheme: light;

    --ifm-dark-value: 10%;
    --ifm-darker-value: 15%;
    --ifm-darkest-value: 30%;

    --ifm-light-value: 15%;
    --ifm-lighter-value: 30%;
    --ifm-lightest-value: 50%;

    --ifm-contrast-background-value: 90%;
    --ifm-contrast-foreground-value: 70%;

    --ifm-contrast-background-dark-value: 70%;
    --ifm-contrast-foreground-dark-value: 90%; */

:root {

    /* Base colors
       https://infima.dev/docs/utilities/colors
       https://coolors.co/000000-ffffff-805d93-e07931-b3433b
    */

     --ifm-color-primary: var(--ifm-color-light-green);
     --ifm-color-secondary: #ebedf0;
     --ifm-color-success: #577018;
     --ifm-color-info: #805D93;
     --ifm-color-warning: #E07931;
     --ifm-color-danger: #B3433B;

    /* Froggit colors*/
    --ifm-color-light-green:#8EA34E;
    --ifm-color-frame: #FFC729;

    /* Fonts var */
    --ifm-font-family-base: "comfortaa", cursive;
    --ifm-font-family: "montserrat", sans-serif;
    --ifm-font-family-monospace: "jetbrainsmono", monospace;
    --ifm-code-font-size: 95%; 

    /* Container var */
    --ifm-container-width: 100%; 
    --ifm-container-max-width: 950px;

    /* Navbar var */
    --ifm-navbar-shadow: none;
    --ifm-button-shadow: 1px 3px 4px var(--ifm-color-secondary-darkest);

    /* Primary */
    --ifm-color-primary-lightest: #aebf7a;
    --ifm-color-primary-lighter: #9fb462;
    --ifm-color-primary-light: #9ab059	;
    --ifm-color-primary-darkest: #637237;
    --ifm-color-primary-darker: #798b42;
    --ifm-color-primary-dark: #809346;
    --ifm-color-primary-contrast-background: var(--ifm-color-light-green);
    --ifm-color-primary-contrast-foreground: var(--ifm-color-secondary);

    /* Secondary */
    --ifm-color-secondary-lightest: #ffffff;
    --ifm-color-secondary-lighter: #ffffff;
    --ifm-color-secondary-light: #ffffff;
    --ifm-color-secondary-dark: #d0d5dc;
    --ifm-color-secondary-darker: #c2c8d1;
    --ifm-color-secondary-darkest: #9aa4b3;
    --ifm-color-secondary-contrast-background: var(--ifm-color-gray);
    --ifm-color-secondary-contrast-foreground: var(--ifm-color-secondary);

    /* Success */
    --ifm-color-success-lightest: #68861d;
    --ifm-color-success-lighter: #64811c;
    --ifm-color-success-light: #607b1a;
    --ifm-color-success-dark: #4e6516;
    --ifm-color-success-darker: #4a5f14;
    --ifm-color-success-darkest: #3d4e11;
    --ifm-color-success-contrast-background: var(--ifm-color-success);
    --ifm-color-success-contrast-foreground: var(--ifm-color-secondary);

    /* Info */
    --ifm-color-info-lightest: #B39BBF;
    --ifm-color-info-lighter: #9270a4;
    --ifm-color-info-light: #8c68a0;
    --ifm-color-info-dark: #735484;
    --ifm-color-info-darker: #6d4f7d;
    --ifm-color-info-darkest: #5a4167;
    --ifm-color-info-contrast-background: var(--ifm-color-info);
    --ifm-color-info-contrast-foreground: var(--ifm-color-secondary);

    /* Warning */
    --ifm-color-warning-lightest: #e79860;
    --ifm-color-warning-lighter: #e59055;
    --ifm-color-warning-light: #e48849;
    --ifm-color-warning-dark: #d66b20;
    --ifm-color-warning-darker: #ca651e;
    --ifm-color-warning-darkest: #a65319;
    --ifm-color-warning-contrast-background: var(--ifm-color-warning);
    --ifm-color-warning-contrast-foreground: var(--ifm-color-secondary);

    /* Danger */
    --ifm-color-danger-lightest: #c65951;
    --ifm-color-danger-lighter: #c4544b;
    --ifm-color-danger-light: #c14d44;
    --ifm-color-danger-dark: #a13c35;
    --ifm-color-danger-darker: #983932;
    --ifm-color-danger-darkest: #7d2f29;
    --ifm-color-danger-contrast-background: var(--ifm-color-danger);
    --ifm-color-danger-contrast-foreground: var(--ifm-color-secondary);

    /* White - black - gray */
    --ifm-color-white: #fff;
    --ifm-color-black: #000;
    --ifm-color-gray-0: var(--ifm-color-white);
    --ifm-color-gray-100: #f5f6f7;
    --ifm-color-gray-200: #ebedf0;
    --ifm-color-gray-300: #dadde1;
    --ifm-color-gray-400: #ccd0d5;
    --ifm-color-gray-500: #bec3c9;
    --ifm-color-gray-600: #8d949e;
    --ifm-color-gray-700: #606770;
    --ifm-color-gray-800: #444950;
    --ifm-color-gray-900: #1c1e21;
    --ifm-color-gray-1000: var(--ifm-color-black);
    --ifm-color-emphasis-0: var(--ifm-color-gray-0);
    --ifm-color-emphasis-100: var(--ifm-color-gray-100);
    --ifm-color-emphasis-200: var(--ifm-color-gray-200);
    --ifm-color-emphasis-300: var(--ifm-color-gray-300);
    --ifm-color-emphasis-400: var(--ifm-color-gray-400);
    --ifm-color-emphasis-500: var(--ifm-color-gray-500);
    --ifm-color-emphasis-600: var(--ifm-color-gray-600);
    --ifm-color-emphasis-700: var(--ifm-color-gray-700);
    --ifm-color-emphasis-800: var(--ifm-color-gray-800);
    --ifm-color-emphasis-900: var(--ifm-color-gray-900);
    --ifm-color-emphasis-1000: var(--ifm-color-gray-1000);
    --ifm-color-content: var(--ifm-color-emphasis-900);
    --ifm-color-content-inverse: var(--ifm-color-emphasis-0);
    --ifm-color-content-secondary: #525860;
    --ifm-background-color: transparent;
    --ifm-background-surface-color: var(--ifm-color-content-inverse);
    --ifm-global-border-width: 1px;
    --ifm-global-radius: 0.4rem;
    --ifm-hover-overlay: rgba(0, 0, 0, 0.05);
    --ifm-font-color-base: var(--ifm-color-content);
    --ifm-font-color-base-inverse: var(--ifm-color-content-inverse);
    --ifm-font-color-secondary: var(--ifm-color-content-secondary);
    --ifm-link-color : var(--ifm-color-warning);
}