estilo login

Inventario-war/web/login.xhtml

@@ -7,29 +7,38 @@
 <h:head>
     <title>Inicio de sesión</title>
     <h:outputStylesheet library="css" name="styles.css" />
-  
+        <style>
+        body {
+            background-image: url('../resources/css/images/fondoLogin3.png');
+            background-size: auto;
+            background-position: center;
+            background-repeat: no-repeat;
+            font-family: Arial, sans-serif; /* Cambia la fuente según necesites */
+            margin: 0;
+            padding: 0;
+        }
+    </style>
     
-
 </h:head>
 <h:body>
     <h:form id="loginForm">
          <p:growl id="growl" showDetail="true" />
-        <h2>Iniciar sesión</h2>
+         <h2 style="margin-bottom: 40px;">Iniciar sesión</h2>
         <h:panelGrid columns="2" id="loginPanel">
             <p:outputLabel for="username" value="Usuario:" />
-            <p:inputText id="username" value="#{demoBeanLogin.username}" title="Usuario" required="true" validatorMessage="El número 0 es inválido"  >
+            <p:inputText id="username" value="#{demoBeanLogin.username}" style="margin-bottom: 20px" title="Usuario" required="true" validatorMessage="El número 0 es inválido"  >
                 <f:validateLength minimum="1" maximum="100" />
             </p:inputText>
             
             
 
             <p:outputLabel for="password" value="Contraseña:" />
-            <p:password id="password" value="#{demoBeanLogin.password}" title="Contraseña" required="true" validatorMessage="El número 0 es inválido">
+            <p:password id="password" value="#{demoBeanLogin.password}" title="Contraseña" style="margin-bottom: 20px" required="true" validatorMessage="El número 0 es inválido">
                 <f:validateLength minimum="1" maximum="100" />
             </p:password>
-
-           <h:commandButton value="Iniciar sesión" action="#{demoBeanLogin.buscarPorLogin}" />
-
+            <div>
+           <h:commandButton value="Iniciar sesión" action="#{demoBeanLogin.buscarPorLogin}" style="margin-top: 40px; width: 100%"/>
+            </div>
            <p:message for="loginForm" id="errorMessage" />
         </h:panelGrid>
     </h:form>

Inventario-war/web/resources/css/styles.css

@@ -17,14 +17,16 @@ h2 {
 
 #loginForm {
     width: 300px;
+    height: 350px;
     margin: 0 auto; /* Esto centra el formulario horizontalmente */
-    margin-top: 30vh; /* Esto centra verticalmente el formulario */
+    margin-top: 25vh; /* Esto centra verticalmente el formulario */
     padding: 20px;
     background-color: #ffffff; /* Color de fondo blanco */
-    border-radius: 5px;
+    border-radius: 20px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
-    text-align: center;
-    
+    text-align: match-parent;
+    align-items: center;
+    justify-content: center;
 }
 
 
@@ -70,3 +72,9 @@ input[type="submit"]:hover {
     font-style: italic;
 }
 
+.fullWidthLabel {
+    display: block;
+    width: 100%;
+    text-align: right;
+}
+