/*================================*/
/*           COLOR.CSS            */
/*        KGARMIRE 2023-03-02     */
/*================================*/


#color{display: none;}

#splash{
    width:100vw;
    height:100vh;
    position: fixed;
    top:0;
    left:0;
    z-index: -1;
    background: url("../graphics/alpha.png") repeat;
}

#splash .color{
    height:100%;
    width:100%;
    background-color: mediumseagreen;
}

/*h1{color:white}*/

.lbl{
    margin:auto 0 auto auto;
}

/*--- TITLE GRID -----------------*/
button.title-grid{
    display:grid;
    grid-template-columns: 1fr 32px;
    grid-gap:8px;

    width: 100%;
    text-align: left;
    padding: 4px;
    border: none;
    background: transparent;
}
button.title-grid h2{
    margin:auto 0;
    font-size: 1.5rem;
}

/*--- SECTION --------------------*/
section{box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20); }
section .body{margin-top:12px; }


/*--- INPUT-CONT -----------------*/
#input .rgba-grid{
    display: grid;
    grid-template-columns: repeat(4, 36px 1fr);
}


/*--- OUTPUT-CONT ----------------*/
#output .output-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 52px 1fr);
    grid-gap: 16px;
}

/*--- EDIT -----------------------*/
#edit button:not(.title-grid){
    font-weight: bold;
    border-radius: 99px;
}

/*--- GRADIENT -------------------*/
#gradient .grad-copybox{
    display: grid;
    grid-template-columns: 1fr 34px;
    width: 100%;
    height: 48px;
    border: 1px solid black;
    margin-bottom: 16px;
    cursor: pointer;
}

#grad-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
}

#gradient .gradient-input{
    display:grid;
    grid-template-columns: 100px 1fr 1fr 1fr;
    grid-gap:8px;
}

#gradient .grad-color{
    font-weight: bold;
}

/*--- BUTTONIFY ------------------*/
#buttonify .grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr) 34px;
    grid-gap: 8px;
}

#buttonify button.example {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 32px;
    border: none;
    background-color: mediumseagreen;
    color: white;
}

#buttonify button.example.hollow {
    border: 1px solid mediumseagreen;
    color:mediumseagreen;
    background-color: transparent;
}


/*... DISPLAY ONLY ...............*/
#buttonify button.example,
#buttonify input{
    min-height: 34px;
    max-width: 200px;
}

#buttonify button.copy-button{
    height: 34px;
    width: 34px;
    margin-left: auto;
}

/*--- COLOR LISTS ----------------*/
fieldset{
    border: 2px solid white;
    margin-bottom: 24px;
    padding: 12px;
}

fieldset legend{
    font-family: "Montserrat", sans-serif;
    color:white;
}

fieldset .grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:8px;
}

.color-box{
    display: flex;
/*    border: 1px solid white;*/
    border-radius: 99px;
    cursor: pointer;
    text-align: center;
    width: 100%;
    height: 42px;

    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}
.color-box span{
    margin:auto;
    font-size: 0.8rem;
    display: none;
}

/*-------------- HOVER ---------------*/
@media (hover: hover) and (pointer: fine) {

    button.title-grid:hover{background-color: rgba(0,0,0,0.1);}

    .color-box:hover span{display:block; }
    #buttonify button.example:hover{background-color: #008f50}
    #buttonify button.example.hollow:hover{background-color: rgba(60,179,113,0.2)}
}