/**
* CSS File for colors in the Coder application
* 
* @version 0.0.1
* 
* @since 0.0.1 2024-03-08 initial version
* 
* @author Hans Druyts <hans.druyts@custom8.be>
*/

:root{ 

    /* COLORS */
    --color-custom8-orange: rgb(223, 103, 6);
    --color-deep-orange: rgb(196, 82, 6);
    --color-dark-grey: rgb(65, 63, 63);
    --color-light-grey: rgb(230, 229, 229);
	--color-light-ivory: rgb(255,255,250);
	--color-dark-blue: #0c0230;
    --color-dark-brown: rgb(43,17,0);
    --color-light-brown: rgb(200,190,183);

    /* slider colors */
    --color-slider:#795548;
    --color-slider-general: #c37158;

    /* button colors */
    /* --color-button: #e65c00; */

    /* slider & button - state colors */
    --color-up: #54372d;           /* moving up: darker */
    --color-down: #a98172;         /* moving down: lighter */
    --color-nc: #6c757d;           /* not connected = grey */
    --color-error: #dc3545;	    /* error = red */
    --color-reset: #ff7b07;        /* reset = orange */
    --color-trigger: #ffe203;      /* trigger = yellow */

}

/* GENERAL PAGE & DIVISIONS */
html, body {

    background-color: var(--color-dark-brown);
	color: #795548; 

}

body.sleep {
    background-color: var(--color-dark-brown);
}

body.active {
    background-color: var(--color-light-ivory);
}

header {
	background: var(--color-dark-brown); 			
}
header h1 {
    color: var(--color-custom8-orange);
}
header .spinner {
    color: var(--color-custom8-orange);
}

main.active {
    background: var(--color-light-ivory);
}

main.sleep {
    background: var(--color-dark-brown);
}

footer {
	/* background: #c0c4c6;*/ 			/* grey */
	/* background-color: var(--color-light-brown);*/
    background-color: var(--color-light-ivory);
}

.modal-footer {
    color: var(--color-morning-grey);
}

/* OBJECTS */


.btn-primary {

    --bs-btn-color: var(--bs-white);

    --bs-btn-bg: var(--color-custom8-orange);
    --bs-btn-border-color:var(--color-custom8-orange);

    --bs-btn-hover-bg: var(--color-deep-orange);
    --bs-btn-hover-border-color: var(--color-deep-orange);

}
.btn-outline-primary {

    --bs-btn-color: var(--color-custom8-orange);

    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color:var(--color-custom8-orange);

    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--color-deep-orange);
    --bs-btn-hover-border-color: var(--color-deep-orange);

}

.btn-secondary {

    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--color-night-blue);
    --bs-btn-hover-bg: var(--color-morning-grey);
}

/*
.btn.pressed{

    color: var(--color-custom8-orange);
    background-color:  var(--bs-white);
    --bs-btn-color: var(--color-custom8-orange);
    --bs-btn-bg:  var(--bs-white);
}
*/


/* TOOLTIP */
.noUi-active .noUi-tooltip {
    color: #c37158;
}

/* HORIZONTAL (PROFILE) SLIDERS */
.sliders.profile .noUi-connect {
    background: #ce5f00;    /* background color of the sliders: */
}

.sliders.profile .noUi-handle {
    background-color: #ce5f00;
    color: #FFFFFF;
}

/* VERTICAL (MODULE) SLIDERS */	
/*.sliders.vertical .noUi-handle{
    /* background-color: #F0F0F0; */
/*}*/

.sliders.vertical .noUi-connect {
    background: var(--color-slider);
}

.sliders.vertical .noUi-connect.up {
    background: var(--color-up);
}
.sliders.vertical .noUi-connect.down{
    background: var(--color-down);
}
.sliders.vertical .noUi-connect.nc{
    background: var(--color-nc);
}
.sliders.vertical .noUi-connect.error {
    background: var(--color-error);
}
.sliders.vertical .noUi-connect.reset{
    background: var(--color-reset);
}
.sliders.vertical .noUi-connect.trigger{
    background: var(--color-trigger);
}


#general-slider .noUi-connect {
    background: var(--color-slider-general);
}