InventarioSC2/si-war/web/resources/css/estiloProvedor.css

/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : 16 abr 2024, 22:49:18
    Author     : Josue
*/

/* Establecer la fuente y el fondo para el cuerpo del documento */

body {
    font-family: arial, helvetica; /* Utiliza las fuentes Arial o Helvetica */
    background: #e8e8e8;           /* Establece el color de fondo del cuerpo */
    margin: 0;                     /* Elimina el margen predeterminado del cuerpo */
}

/* Estilo para la lista en la parte izquierda */
.left {
    list-style: none;              /* Elimina los marcadores de lista */
    padding: 0;                    /* Elimina el relleno interno de la lista */
    background: #092327;           /* Establece el color de fondo de la lista */
    color: white;                  /* Establece el color del texto en la lista */
    width: 130px;                  /* Ancho fijo para la lista */
    margin: auto;                  /* Centra la lista horizontalmente */
}   

/* Estilo para cada elemento de la lista */
.left li {
    text-align: center; /* Centra el texto dentro de cada elemento de la lista */
    padding: 5px 0; /* Agrega espacio interno vertical (arriba y abajo) */
    border-bottom: 1px solid white; /* Agrega borde inferior a cada elemento */
}

/* Estilo para el último elemento de la lista (sin borde inferior) */
.left li:last-child {
    border-bottom: none; /* Elimina el borde inferior del último elemento */
}

/* Estilo para los enlaces dentro de cada elemento de la lista */
.left li a {
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
    color: white; /* Establece el color del texto de los enlaces */
    display: block; /* Hace que los enlaces ocupen todo el ancho del elemento li */
    padding: 8px; /* Agrega espacio interno alrededor del texto de los enlaces */
    font-size: 12px; /* Tamaño del texto */
}
.left li a:hover{
    background: #ef8354
    
}

.options-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px; /* Espacio superior para separar del contenido */
}

/* Estilos para los botones dentro de options-buttons */
.options-buttons .p-commandbutton {
    margin-left: 1px; /* Espacio entre botones */
    padding: 2px 2px; /* Ajusta el padding para controlar el tamaño del botón */
    font-size: 12px; /* Tamaño de la fuente del texto en el botón */
    font-weight: bold; /* Texto en negrita */
    background-color: #17a2b8; /* Color de fondo del botón */
    color: #fff; /* Color del texto en el botón */
    border: none; /* Elimina el borde del botón */
    border-radius: 5px; /* Añade esquinas redondeadas al botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease; /* Transición suave para cambios en el color de fondo */
}

/* Estilos para el botón al pasar el cursor sobre él */
.options-buttons .p-commandbutton:hover {
    background-color: #0a7a8f; /* Cambia el color de fondo al pasar el cursor sobre el botón */
}

/* Estilo para la tabla de proveedores */
.dataTable {
    width: 100%; /* Ancho completo de la tabla */
    border-collapse: collapse; /* Fusionar bordes de celdas */
}

/* Estilo para todas las celdas de la tabla */
.dataTable td, .dataTable th {
    padding: 12px; /* Ajusta el espacio interno de las celdas */
    border: 1px solid #ddd; /* Borde delgada alrededor de las celdas */
}

/* Estilo para el encabezado de la tabla */
.dataTable th {
    background-color: #f2f2f2; /* Color de fondo para el encabezado */
    text-align: left; /* Alineación del texto en el encabezado */
}

/* Estilo para filas impares (alternar color de fondo) */
.dataTable tr:nth-child(odd) {
    background-color: #f9f9f9; /* Color de fondo para filas impares */
}

/* Estilo para las opciones en la última columna de la tabla */
.dataTable .options-buttons {
    display: flex;
    justify-content: space-between; /* Distribuye uniformemente los botones */
}

/* Estilo para los botones en la columna de opciones */
.dataTable .options-buttons .p-commandbutton {
    margin-right: 10px; /* Margen derecho entre los botones */
}


.bottomJ {
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    color: #001f3f;
    background-color: #fff;
    border: 2px solid #9ec2e6;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.bottomJ:hover {
    transform: translateY(2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

  /* Estilos para los botones dentro de la columna */
    .opcion .ui-button {
        padding: 2px 8px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        transition: transform 0.3s ease;
        text-decoration: none; /* Para quitar el subrayado de los botones */
    }

/*     Estilo para el botón "Editar" 
    .opcioned {
        color: #3366FF;
        border: 2px solid #3366FF;
        background-color: #fff;
    }

     Estilo para el botón "Eliminar" 
    .opcione {
        color: #990000;
        border: 2px solid #FF0000;
        background-color: #fff;
    }

     Estilos adicionales al hacer hover sobre los botones 
    .opcion .ui-button:hover {
        transform: translateY(-2px);  Efecto de levantamiento 
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  Sombra suave 
    }*/

 /* Estilo para los botones de edición */
    .optioned {
        padding: 2px 8px;
        font-size: 14px;
        font-weight: bold;
        color: #3366FF;
        background-color: #fff;
        border: 2px solid #3366FF;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        text-decoration: none; /* Para quitar el subrayado de los botones */
    }

    /* Estilo para los botones de eliminación */
    .optione {
        padding: 2px 8px;
        font-size: 14px;
        font-weight: bold;
        color: #990000;
        background-color: #fff;
        border: 2px solid #FF0000;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        text-decoration: none; /* Para quitar el subrayado de los botones */
    }

    /* Estilos adicionales al hacer hover sobre los botones */
    .optioned:hover,
    .optione:hover {
        transform: translateY(-2px); /* Efecto de levantamiento */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    }