refactor: changed styling root, changed texts, add:new styles

wedding-app-themes/wedding-app-theme/login/messages/messages_en.properties

-loginTitleHtml=Zaloguj się do Twojego konta
+loginTitleHtml=
 loginSubtitleHtml=wypełnij formularz
-usernameOrEmail=Nazwa uzytkownika lub email
+usernameOrEmail=Email
 
 password=Haslo
 doLogIn=zaloguj się
 doForgotPassword=Zapomniałeś hasła?
 doRegister=Zarejestruj się
-loginAccountTitle=
-noAccount=Nie masz jeszcze konta?
\ No newline at end of file
+loginAccountTitle=Zaloguj się do swojego konta
+noAccount=Nie masz jeszcze konta?
+loginTimeout=Twoja sesja wygasła, zacznij od początku
+requiredFields=Wymagane pola
+backToLogin=« Powrót do logowania 
+username=Nazwa uzytkownika
+passwordConfirm=Powtórz hasło
+firstName=Imię
+lastName=Nazwisko
+emailForgotTitle=Zapomniałeś hasła?
+doSubmit=Odzyskaj hasło
+emailInstruction=Podaj swój email a my wyślemy Ci instrukcję jak odzyskać hasło
+registerTitle=Zarejestruj się w aplikacji wedding-app
\ No newline at end of file

wedding-app-themes/wedding-app-theme/login/resources/styles.css

-/************************************************
- * 1. Reset i ukrycie nagłówka Keycloak
- ************************************************/
-html, body {
-    margin: 0 !important;
-    padding: 0 !important;
-    width: 100%;
-    min-height: 100vh;         /* pozwala na wypełnienie ekranu w pionie */
-    box-sizing: border-box;
-    font-family: Arial, sans-serif;
+body.login-pf,
+.login-pf-page,
+.login-pf-page-container,
+.login-pf-body,
+.kc-login__background {
+    background-color: #f5f5f5 !important;
+    background-image: none !important;
 }
 
-/* Ukrywa prostokąt (nagłówek) Keycloak */
-#kc-header,
-#kc-header-wrapper {
-    display: none !important;
-}
-
-/************************************************
- * 2. Wycentrowanie pionowe i poziome całego formularza
- ************************************************/
-body {
-    background-color: #f5f5f5 !important; /* jasne tło */
-    display: flex !important;
-    flex-direction: column !important;
-    justify-content: center !important;   /* wyśrodkowanie w pionie */
-    align-items: center !important;       /* wyśrodkowanie w poziomie */
-}
-
-/************************************************
- * 3. Główny kontener formularza (#kc-content)
- ************************************************/
-#kc-content {
-    background: #fff !important;
-    border-radius: 8px !important;
-    padding: 2rem !important;
-    max-width: 400px !important;
-    width: 90% !important;
-    box-sizing: border-box;
-    margin: 1rem auto !important;
-    text-align: center !important; /* wyśrodkowanie tekstu */
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
-}
-
-/************************************************
- * 4. Tytuł (np. "Zaloguj się do Twojego konta")
- ************************************************/
 #kc-page-title {
-    color: #333333 !important;
+    font-weight: bold !important;
     font-size: 24px !important;
-    margin-bottom: 1rem !important;
-    text-align: center !important;  /* wyśrodkowanie tytułu */
-}
-
-/************************************************
- * 5. Układ etykiety i pola (kładziemy je w jednej linii)
- ************************************************/
-/* Kontener każdej pary label + input */
-.${properties.kcFormGroupClass!} {
-    display: flex !important;             /* ustawienie w wierszu */
-    align-items: center !important;       /* wyrównanie w pionie */
-    justify-content: space-between !important;
-    margin-bottom: 1rem !important;
-}
-
-/* Etykiety (np. "Nazwa użytkownika lub email", "Hasło") */
-.${properties.kcLabelClass!} {
-    width: 40% !important;                /* ustal szerokość etykiety */
-    text-align: left !important;          /* wyrównanie etykiety do lewej */
-    margin-right: 0.5rem !important;
-    font-weight: bold !important;         /* pogrubienie */
-}
-
-/* Pola tekstowe (#username, #password) */
-#username,
-#password {
-    width: 60% !important;                /* pozostała szerokość na input */
-    border: 2px solid #33cc40 !important;
-    border-radius: 4px !important;
-    padding: 0.6rem !important;
-    font-size: 1rem !important;
-    box-sizing: border-box;
+    margin-top: 1rem !important;
+    text-align: center !important;
 }
 
-/************************************************
- * 6. Przycisk logowania (#kc-login)
- ************************************************/
-#kc-login {
-    display: block !important;
-    width: 100% !important;
-    background-color: #000 !important;
+#kc-login.btn.btn-block.btn-primary,
+#kc-login.kc-button.kc-button-primary,
+#kc-login.pf-c-button.pf-m-primary,
+#kc-form-buttons input[type="submit"] {
+    background-color: #000000 !important;
+    border-color: #000000 !important;
     color: #fff !important;
-    border: none !important;
-    padding: 0.8rem 1.2rem !important;
-    font-size: 1rem !important;
-    border-radius: 4px !important;
     cursor: pointer !important;
-    transition: background-color 0.3s ease, color 0.3s ease !important;
-    margin: 1rem 0 1rem 0 !important;   /* odstęp u góry i dołu */
-}
-
-#kc-login:hover {
-    background-color: #333 !important;
+    transition: background-color 0.3s ease !important;
 }
 
-/************************************************
- * 7. Linki (zapomniałeś hasła? zarejestruj się)
- ************************************************/
-#kc-form-buttons,
-#kc-registration-wrapper,
-#kc-info-wrapper {
-    text-align: center !important;
-    margin-top: 0.5rem !important;
+#kc-login.btn.btn-block.btn-primary:hover,
+#kc-login.kc-button.kc-button-primary:hover,
+#kc-login.pf-c-button.pf-m-primary:hover,
+#kc-form-buttons input[type="submit"]:hover {
+    background-color: #000000 !important;
+    border-color: #000000 !important;
 }
 
 #kc-form-buttons a,
-#kc-registration-wrapper a,
-#kc-info-wrapper a {
-    background: none !important;
-    color: #000 !important;
+.kc-form-options a,
+#kc-registration a {
+    color: #0a69c8 !important;
     text-decoration: none !important;
-    margin: 0 0.5rem !important;
-    font-size: 0.9rem !important;
-}
-
-/* "Zarejestruj się" w innym kolorze (np. niebieski) */
-#kc-registration-wrapper a {
-    color: #007bff !important;
 }
-
 #kc-form-buttons a:hover,
-#kc-registration-wrapper a:hover,
-#kc-info-wrapper a:hover {
+.kc-form-options a:hover,
+#kc-registration a:hover {
     text-decoration: underline !important;
 }
 
-/************************************************
- * 8. Media queries – dostosowanie na urządzenia mobilne
- ************************************************/
-@media (max-width: 480px) {
-    #kc-content {
-        padding: 1.5rem !important;
-        margin: 1rem !important;
-    }
-
-    #kc-page-title {
-        font-size: 20px !important;
-        margin-bottom: 0.75rem !important;
-    }
-
-    /* Zwiększamy wielkość pól i przycisku dla lepszej czytelności */
-    #username,
-    #password {
-        font-size: 1.1rem !important;
-        padding: 0.8rem !important;
-    }
 
-    #kc-login {
-        font-size: 1.1rem !important;
-        padding: 0.8rem 1rem !important;
-    }
-
-    #kc-form-buttons a,
-    #kc-registration-wrapper a,
-    #kc-info-wrapper a {
-        font-size: 1rem !important;
-        margin: 0.5rem !important;
-    }
+#username:focus,
+#password:focus {
+    border-color: #000000 !important;
+    box-shadow: 0 0 0 2px #000000 !important;
+    outline: none !important;
 }
+

wedding-app-themes/wedding-app-theme/login/theme.properties

-parent=base
+parent=keycloak
 styles=styles.css
\ No newline at end of file