fixed style
This commit is contained in:
+24
-38
@@ -1,9 +1,9 @@
|
||||
.pestaña {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 62%;
|
||||
left: 62%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around; /* espacio igual entre los tres textos */
|
||||
align-items: center;
|
||||
@@ -25,17 +25,17 @@
|
||||
color: #b8870b; /* cambia de color al pasar el cursor */
|
||||
}
|
||||
|
||||
.titulo-reporte{
|
||||
font-weight: bold; /* negrita */
|
||||
font-size: 24px; /* tamaño de texto */
|
||||
.titulo-reporte {
|
||||
font-weight: bold; /* negrita */
|
||||
font-size: 24px; /* tamaño de texto */
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/*BUSCADOR*/
|
||||
|
||||
input[type="text"] {
|
||||
width: 500px; /* más ancho, más largo */
|
||||
padding: 7px; /* mantiene espacio cómodo dentro */
|
||||
width: 500px; /* más ancho, más largo */
|
||||
padding: 7px; /* mantiene espacio cómodo dentro */
|
||||
font-size: 18px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
@@ -54,33 +54,20 @@ button {
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.contenedor{
|
||||
.contenedor {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.filtro-rec{
|
||||
.filtro-rec {
|
||||
border: 2px solid #003366; /* Color del borde */
|
||||
border-radius: 10px; /* Bordes redondeados */
|
||||
padding: 10px; /* Espacio interno */
|
||||
margin: 80px 550px; /* Separación del resto del contenido */
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px; /* Bordes redondeados */
|
||||
padding: 10px; /* Espacio interno */
|
||||
margin: 80px 550px; /* Separación del resto del contenido */
|
||||
background-color: #f9f9f9;
|
||||
position: relative;
|
||||
left: 380px;
|
||||
left: 380px;
|
||||
font-family: Arial, sans-serif;
|
||||
top: -570px; /* sube 50px respecto a su posición original */
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* Estilos para los selects */
|
||||
select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #003366;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
@@ -94,7 +81,6 @@ form[action="/buscar"] {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 20px 0;
|
||||
|
||||
}
|
||||
|
||||
form[action="/buscar"] input {
|
||||
@@ -116,8 +102,8 @@ form[action="/buscar"] button {
|
||||
.botones-filtro {
|
||||
display: flex;
|
||||
justify-content: flex-end; /* botones a la derecha */
|
||||
gap: 10px; /* espacio entre botones */
|
||||
margin-top: 15px; /* separación del resto del formulario */
|
||||
gap: 10px; /* espacio entre botones */
|
||||
margin-top: 15px; /* separación del resto del formulario */
|
||||
}
|
||||
|
||||
.aplicar {
|
||||
@@ -140,17 +126,17 @@ form[action="/buscar"] button {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tabla-rec{
|
||||
.tabla-rec {
|
||||
border: 2px solid #003366; /* Color del borde */
|
||||
border-radius: 10px; /* Bordes redondeados */
|
||||
padding: 10px; /* Espacio interno */
|
||||
margin: 50px 700px 0 80px; /* superior, derecha, inferior, izquierda */
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px; /* Bordes redondeados */
|
||||
padding: 10px; /* Espacio interno */
|
||||
margin: 50px 700px 0 80px; /* superior, derecha, inferior, izquierda */
|
||||
background-color: #f9f9f9;
|
||||
font-family: Arial, sans-serif;
|
||||
height: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.boton-descargar{
|
||||
.boton-descargar {
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
@@ -160,4 +146,4 @@ form[action="/buscar"] button {
|
||||
cursor: pointer;
|
||||
right: 30px;
|
||||
margin-left: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,16 +69,28 @@ label {
|
||||
display: block;
|
||||
text-align: start;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
select {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
background-position: right 10px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 12px;
|
||||
}
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
.barNavigation li {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
width: auto;
|
||||
transition: background-color 0.3s ease;
|
||||
font-size: 1.5rem;
|
||||
@@ -96,7 +95,6 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.5rem;
|
||||
@@ -111,7 +109,7 @@
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -140,7 +138,7 @@
|
||||
|
||||
.barNavigation ul {
|
||||
position: absolute;
|
||||
background-color: #003e79;
|
||||
background-color: #f4f5f7;
|
||||
flex-direction: column;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
@@ -158,7 +156,7 @@
|
||||
|
||||
.barNavigation li:hover {
|
||||
background-color: #d59f0f;
|
||||
color: white;
|
||||
color: black;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
@@ -172,7 +170,7 @@
|
||||
|
||||
.logout-button {
|
||||
margin-top: 10px;
|
||||
font-size: 1rem;
|
||||
font-size: 1.75rem;
|
||||
padding: 6px 12px;
|
||||
max-width: 180px;
|
||||
}
|
||||
@@ -183,6 +181,6 @@
|
||||
}
|
||||
|
||||
.subMenu a span {
|
||||
color: #fff;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,13 +9,12 @@
|
||||
|
||||
.innerContainer {
|
||||
max-width: 1000px;
|
||||
width: 1000px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
color: #0056b3;
|
||||
margin-bottom: 20px;
|
||||
@@ -25,7 +24,7 @@
|
||||
|
||||
.equipoForm {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
gap: 1.5rem;
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
@@ -88,7 +87,7 @@ textarea {
|
||||
height: 100%;
|
||||
.btnGuardar {
|
||||
background-color: #ffb700;
|
||||
color: #0056b3;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
@@ -117,8 +116,28 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1075px) {
|
||||
.equipoForm {
|
||||
flex-wrap: wrap;
|
||||
max-width: 100%;
|
||||
|
||||
.column {
|
||||
flex: 1 1 calc(50% - 15px);
|
||||
min-width: 250px;
|
||||
|
||||
.formGroup {
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive: en móvil, una columna */
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 600px) {
|
||||
.agregarEquipoContainer .innerContainer {
|
||||
padding: 15px;
|
||||
max-width: 90vw;
|
||||
|
||||
@@ -180,13 +180,23 @@ export default function Page() {
|
||||
<form className="equipoForm">
|
||||
{/* Columna Izquierda */}
|
||||
<div className="column">
|
||||
<div className="formGroup">
|
||||
<label>Numero de Inventario</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
placeholder="Ingresa Inventario"
|
||||
value={formData.serie}
|
||||
onChange={(e) => handleInputChange("serie", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="formGroup">
|
||||
<label>Serie</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
placeholder="Ingresa serie"
|
||||
value={formData.serie}
|
||||
value={""}
|
||||
onChange={(e) => handleInputChange("serie", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
@@ -234,7 +244,9 @@ export default function Page() {
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="column">
|
||||
<div className="formGroup">
|
||||
<label>Estado</label>
|
||||
<select
|
||||
@@ -250,10 +262,7 @@ export default function Page() {
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Columna Centro */}
|
||||
<div className="column">
|
||||
<div className="formGroup">
|
||||
<label>Tipo de uso</label>
|
||||
<select
|
||||
@@ -316,7 +325,7 @@ export default function Page() {
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
placeholder="Selecciona adscripción"
|
||||
placeholder="Escribe la adscripcion"
|
||||
value={formData.adscripcion}
|
||||
onChange={(e) =>
|
||||
handleInputChange("adscripcion", e.target.value)
|
||||
|
||||
@@ -33,8 +33,8 @@ export default function BarcodeScanner({ onScan }: BarcodeScannerProps) {
|
||||
type: "LiveStream",
|
||||
target: scannerRef.current,
|
||||
constraints: {
|
||||
width: 640,
|
||||
height: 370,
|
||||
width: 300,
|
||||
height: 500,
|
||||
facingMode: "environment",
|
||||
},
|
||||
},
|
||||
|
||||
@@ -347,7 +347,12 @@ export default function Editar() {
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Responsable</label>
|
||||
<input type="text" value={formData.responsable} disabled />
|
||||
<input
|
||||
type="text"
|
||||
value={formData.responsable}
|
||||
disabled
|
||||
placeholder="Selecciona una Adscripcion"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
+1
-1
@@ -13,6 +13,6 @@ export function middleware(request: NextRequest) {
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: ["/AgregarEquipo", "/Escaner"],
|
||||
matcher: [],
|
||||
};
|
||||
//IO
|
||||
|
||||
Reference in New Issue
Block a user