/*
:filename: statics/css/acs-theme.css
:author:   Brigitte Bigi
:contact:  contact@sppas.org
:summary:  Colors and theme for https://auto-cuedspeech.org.
:note:     Must be loaded AFTER acs.css so its selectors win the cascade
           on ties (same convention as wexa_theme.css, loaded after wexa.css).
*/

/* ---------------- Set existing variables to custom values --------------- */

/* Override some wexa.css color variables for a custom look, and define the
   AutoCuedSpeech specific ones. Sizes are in acs.css. */
:root {
    --logo-color: rgb(88, 126, 105);   /* the color of the project logo */
    --table-row-stripped-bg-color: rgb(250, 250, 250);
}


/* The default colors */
:root:not(.dark) {

    /* Main colors */
    --border-color: rgb(160, 190, 160);
    --columns-sep-color-light: rgb(225, 245, 225);
    --columns-sep-color-dark: rgb(45, 60, 45);

    /* Background colors */
    --bg-color: rgb(250, 255, 250);
    --bg-color-alt: rgb(245, 255, 230);
    --header-bg-color: linear-gradient(0deg, rgb(117 165 117) 0%, rgb(160 200 117) 100%);
    --footer-bg-color: linear-gradient(0deg, rgb(117 165 117) 0%, rgb(160 200 117) 100%);
    --nav-bg-color: rgba(97, 197, 127, 0.8);
    --apps-panel-bg-color: linear-gradient(270deg, rgb(65 128 65), rgb(177 133 75));
    /* Read by main_swapp.css to paint a card of the apps panel. */
    --app-bg-image: linear-gradient(0deg, rgb(240, 250, 240) 0%, rgb(250, 255, 250) 100%);

    --buttons-fg-color: rgb(2, 51, 6);
    --buttons-bg-color: linear-gradient(270deg, rgb(200 207 198) 0%, rgb(184, 216, 150) 100%);
    --buttons-bg-color-hover: linear-gradient(90deg, rgb(200 207 198) 0%, rgb(184, 216, 150) 100%);
    --progress-bg-color: rgb(49, 85, 49);

    /* Foreground colors of HTML elements */
    --header-fg-color: rgb(0 0 0);
    --footer-fg-color: rgb(8, 30, 0);
    --nav-fg-color: rgb(8, 30, 0);
    --li-color: rgb(175 85 0); /* --- rgb(175, 85, 0) --- */
    --a-color: rgb(45, 105, 165);

    --h1-color: rgb(20, 60, 5);
    --h2-color: rgb(40, 80, 25);
    --h3-color: rgb(152 79 30);  /* rgb(60, 100, 50);*/ /* --- rgb(175, 85, 0) --- */
    --h4-color: rgb(130, 65, 25); /* rgb(90, 110, 70); */
    --h5-color: rgb(90, 110, 80);
    --h6-color: rgb(90, 110, 80);
    --blockquote-border-color: rgb(88, 126, 105);
    --blockquote-footer-color: rgb(88, 126, 105);

    --table-border-color: rgb(96, 108, 90);
    --table-row-stripped-bg-color: rgba(184, 203, 208, 0.28);
    --table-head-bg-color: rgb(202, 212, 204);
    --table-head-fg-color: rgb(12, 22, 14);
    --table-caption-bg-color: rgb(201 227 174);
    --table-caption-fg-color: rgb(0, 0, 0);

    /* Table of contents of a page: read by main_swapp.css. The numbers are
       told apart by their background, one per rank. */
    --toc-num-fg-color: rgb(255, 255, 255);
    --toc-num-bg-color: rgb(88, 126, 105);
    --toc-num-bg-color-1: rgb(65, 128, 65);
    --toc-num-bg-color-2: rgb(45, 105, 165);
    --toc-num-bg-color-3: rgb(190, 95, 0);
    --toc-num-bg-color-4: rgb(112, 145, 43);
    --toc-num-bg-color-5: rgb(130, 65, 25);
    --toc-num-bg-color-6: rgb(45, 130, 120);
    --toc-num-bg-color-7: rgb(160, 100, 0);
    --toc-num-bg-color-8: rgb(175, 85, 0);
    --toc-num-bg-color-9: rgb(60, 100, 50);
    --toc-num-bg-color-10: rgb(88, 126, 105);
    --toc-label-color-hover: rgb(175, 85, 0);

    /* Other colors */
    --shadow-color: rgba(3, 4, 3, 0.8);
    --tooltip-bg-color: rgb(72, 82, 74);
    --tooltip-fg-color: rgb(222, 252, 224);
}

@media screen {
    .dark {
        --border-color: rgb(60, 90, 60);
        --bg-color: radial-gradient(at center, rgb(29 55 43), rgb(31 46 38));
        /* the color of the project logo */
        --logo-color: rgb(95, 150, 135);

        /* Main colors */
        --columns-sep-color-light: rgb(241, 241, 245);
        --columns-sep-color-dark: rgb(41, 41, 45);

        /* Background colors */
        --bg-color-alt: rgba(38, 42, 38);
        --header-bg-color: linear-gradient(0deg, rgb(27 28 27) 0%, rgb(19 19 19) 100%);
        --footer-bg-color: linear-gradient(180deg, rgb(27 28 27) 0%, rgb(19 19 19) 100%);
        --nav-bg-color: rgba(88, 126, 105, 0.8);
        --buttons-fg-color: rgb(217, 253, 223);
        --buttons-bg-color: linear-gradient(225deg, rgb(36 73 43) 0%, rgb(73 166 98) 100%); /*     --buttons-bg-color: linear-gradient(270deg, rgb(115 179 115) 0%, rgb(141 193 86) 100%);*/
        --buttons-bg-color-hover: linear-gradient(45deg, rgb(36 73 43) 0%, rgb(73 166 98) 100%); /*     --buttons-bg-color: linear-gradient(270deg, rgb(115 179 115) 0%, rgb(141 193 86) 100%);*/
        --progress-bg-color: rgb(39, 56, 49);
        --apps-panel-bg-color: linear-gradient(270deg, rgb(41 103 58), rgb(216 155 102));
        --app-bg-image: rgb(38, 67, 51);

        /* Foreground colors */
        --header-fg-color: rgb(216 155 102);
        --footer-fg-color: rgb(217, 253, 223);;
        --nav-fg-color: rgb(217, 253, 223);
        --h1-color: rgb(224, 243, 228);
        --h2-color: rgb(214, 233, 208);
        --h3-color: rgb(216 155 102);
        --h4-color: rgb(194, 213, 208);
        --h5-color: rgb(184, 203, 208);
        --h6-color: rgb(184, 203, 208);

        --li-color: rgb(193 141 82);

        --blockquote-border-color: rgb(24 57 43);
        --blockquote-footer-color: rgb(95, 150, 135);

        --table-border-color: rgb(95 150 135);
        --table-head-bg-color: rgb(29 46 40);
        --table-head-fg-color: rgb(202, 212, 204);
        --table-caption-bg-color: rgb(38 67 51);
        --table-caption-fg-color: rgb(222, 252, 224);
        --table-row-stripped-bg-color: rgb(24, 28, 24);

        /* Table of contents of a page */
        --toc-num-fg-color: rgb(24, 34, 28);
        --toc-num-bg-color: rgb(95, 150, 135);
        --toc-num-bg-color-1: rgb(73, 166, 98);
        --toc-num-bg-color-2: rgb(122, 170, 205);
        --toc-num-bg-color-3: rgb(232, 160, 75);
        --toc-num-bg-color-4: rgb(160, 190, 100);
        --toc-num-bg-color-5: rgb(205, 150, 95);
        --toc-num-bg-color-6: rgb(100, 180, 170);
        --toc-num-bg-color-7: rgb(240, 190, 90);
        --toc-num-bg-color-8: rgb(216, 155, 102);
        --toc-num-bg-color-9: rgb(130, 175, 120);
        --toc-num-bg-color-10: rgb(95, 150, 135);
        --toc-label-color-hover: rgb(216, 155, 102);

        /* Other colors */
        --shadow-color: rgba(110, 140, 120, 0.8);
        --tooltip-bg-color: rgb(222, 252, 224);
        --tooltip-fg-color: rgb(72, 82, 74);

        --app-button-bg-color: linear-gradient(to right, rgb(0, 92, 151) 0%, rgb(54, 55, 149) 51%, rgb(0, 92, 151) 100%);
        --app-button-fg-color: rgb(255, 255, 255);
    }
}


/* --------------------------------------- */
/* Side navigation                         */
/* --------------------------------------- */

/* was: nav#nav-content.nav-wexa.side:not(.dark) -- .dark is set on :root,
   not on the nav element itself, so the rule never actually excluded dark
   mode. The added :root prefix also matches main_swapp.css's specificity
   for the same selector, so this rule reliably wins the cascade since
   acs-theme.css is loaded last. */
:root:not(.dark) nav#nav-content.nav-wexa.side {
    background: linear-gradient(270deg, rgb(201 227 174), rgb(155 179 128));
}

.dark nav#nav-content.nav-wexa.side {
    background: linear-gradient(270deg, rgb(41 43 41), rgb(28 35 29));
}


/* --------------------------------------- */
/* Application cards                       */
/* --------------------------------------- */

.apps-panel {
    background: var(--apps-panel-bg-color);
}

/* was: .app-background-img:not(.dark) -- .dark is set on :root, not on
   this element; see the nav note above for the same fix. */
:root:not(.dark) .app-background-img {
    filter: brightness(1) invert(0);
}

.dark .app-background-img {
    filter: brightness(1.4);
    border-radius: calc(3*var(--border-radius));
    box-shadow: 0 0 0 100vw white inset;
}


/* --------------------------------------- */
/* Table of contents of a page             */
/* --------------------------------------- */

/* main_swapp.css tells apart the five first numbers only, and gives the
   color of the first rank to every one that follows. The pages of this
   website hold ten of them. */
.page-toc li:nth-child(6) .toc-num {
    background: var(--toc-num-bg-color-6);
}

.page-toc li:nth-child(7) .toc-num {
    background: var(--toc-num-bg-color-7);
}

.page-toc li:nth-child(8) .toc-num {
    background: var(--toc-num-bg-color-8);
}

.page-toc li:nth-child(9) .toc-num {
    background: var(--toc-num-bg-color-9);
}

.page-toc li:nth-child(10) .toc-num {
    background: var(--toc-num-bg-color-10);
}


/* --------------------------------------- */
/* Styling others                          */
/* --------------------------------------- */

figure.img-video-visualization button[name=play-btn] {
    color: red;
}

.card-button {
    color: var(--buttons-fg-color);
    box-shadow: 0 0 20px rgb(238, 238, 238);
}

/* background */

.card-button {
    background: var(--buttons-bg-color) !important;
    transition: background-position .4s ease;
}

.card-button:hover {
    color: var(--buttons-fg-color);
    background: var(--buttons-bg-color-hover) !important;
}

.default {
    box-shadow: 0 0 20px rgb(238, 238, 238);
}