CalculadoraEspecializada.css

/*****************
    Pablo Argallero - UO283216
    
    Descipción de los estilos que contiene
******************/

/*decoramos el header con las instrucciones de uso*/
header{
    background-color: rgb(157, 212, 232);
    font-size: 1.2em;
    border-radius: 0.7em;
    margin: 1.2em;
    padding: 1em;
}

input[type="button"]{

    background-color: rgb(219, 219, 219);
    color: black;
    font-size: 1.1em;
    border: none;
}

/*pintamos los botones de las bases en caso de qu eesten seleccionados*/
input[type="button"][value="BIN"],
input[type="button"][value="OCT"],
input[type="button"][value="DEC"],
input[type="button"][value="HEX"]
{
    background-color: rgb(57, 57, 166);
    color: white;
}

/*pintamos los botones de las bases en caso de que no esten seleccionados*/
input[type="button"][value="bin"],
input[type="button"][value="oct"],
input[type="button"][value="dec"],
input[type="button"][value="hex"]
{
    background-color: #4E4E7E;
    color: white;
}

/*pintamos el boton que cambia el ultimo valor de la pila a la base seleccionada*/
input[type="button"][value="CHANGE"]
{
    background-color: rgb(7, 60, 19);
    color: white;
}
 
/*pintamos los botones de los numeros de un color mas claro*/
input[type="button"][value="0"],
input[type="button"][value="1"],
input[type="button"][value="2"],
input[type="button"][value="3"],
input[type="button"][value="4"],
input[type="button"][value="5"],
input[type="button"][value="6"],
input[type="button"][value="7"],
input[type="button"][value="8"],
input[type="button"][value="9"],
input[type="button"][value="."]
{
    background-color: rgb(255, 255, 255);
    color: black;
}

input[type="button"][value="Enter"]{
    background-color: rgb(214, 159, 159);
}

input[type="button"][value="▼"]
{
    background-color: rgb(151, 161, 213);
}


section{
    padding: 1em;
    background-color: rgb(237, 237, 237);
}

footer{
    padding: 1em;
}


input[type="text"]{
    border: 0em;
   color: black;
   font-size: 2em;
   font-family: "Lucida Console", "Courier New", monospace;
}



/********************************
LAYOUT
*********************************/
body{
    display: flex;
    flex-direction: column;
    align-items: center;

}




section 
{
   display: grid;
   grid-template-columns: [primera] 0.5fr 
                        [segunda] 0.5fr 
                        [tercera] 0.5fr 
                        [cuarta] 0.5fr 
                        [quinta]0.5fr [ultima];
   grid-template-rows: [primera] 1fr
                        [segunda] 1fr
                        [tercera] 1fr
                        [cuarta] 1fr
                        [quinta] 1fr
                        [sexta]1fr
                        [septima] 1fr 
                        [octaba] 1fr
                        [novena]1fr
                        [decima]1fr 
                        [undecima]1fr 
                        [duodecima]1fr[ultima];
   grid-gap: 0.5em;
   
}
textarea{
    display: block;
    width: 100%;
    height: 80%;
}
input[type="text"]{
    display: block;
    width: 100%;
}

/*tratamiento de las pilas generales -> ocupan todas 3 rows*/
textarea{
    resize: none;
}
label:nth-of-type(1),
label:nth-of-type(2),
label:nth-of-type(3)
{
    grid-row: primera /cuarta;
}
/*configuracion del text area del orden*/
label:nth-of-type(1){
    grid-column: primera /segunda;
}
/*configuracion del text area del base*/
label:nth-of-type(2){
    grid-column: segunda /tercera;
}
/*configuracion del text area del valor*/
label:nth-of-type(3){
    grid-column: tercera /ultima;
}

/*configuramos tamaño del input*/
label:nth-of-type(4) {
    grid-column: primera / ultima;
}

/*configuramos el boton enter de la calculadora*/
input[type="button"][value="Enter"]{
    grid-column: cuarta / ultima;
}

/*configuramos los botones de las bases para que empiecen en la segund columns*/
section input[type="button"][value="BIN"],
section input[type="button"][value="bin"]{
    grid-column-start: segunda;
}

/*Configuramos los parrafos que indican de qué es cada pila*/
section p
{
    text-align: center;
}
section p:nth-of-type(1)
{
    grid-column: primera / segunda;
}
section p:nth-of-type(2)
{
    grid-column: segunda / tercera;
}
section p:nth-of-type(3)
{
    
    grid-column: tercera / ultima;
}