diff --git a/CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css b/CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css index 61b0f02c..1f661a7e 100644 --- a/CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css +++ b/CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css @@ -15,8 +15,8 @@ body { overflow: hidden; background: linear-gradient(180deg, rgba(232, 241, 248, 0.22), rgba(17, 24, 39, 0.18)), - url("/assets/auth/skyline.png") center center / cover no-repeat fixed !important; - color: #f8fafc; + url("../img/skyline.png") center center / cover no-repeat fixed !important; + color: #0f172a; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; } @@ -137,9 +137,9 @@ body > main { gap: 14px; padding: 28px; border-radius: 30px; - background: rgba(255, 255, 255, 0.12); - border: 1px solid rgba(255, 255, 255, 0.24); - box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22); + background: rgba(255, 255, 255, 0.18); + border: 1px solid rgba(255, 255, 255, 0.30); + box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18); backdrop-filter: blur(22px) saturate(1.08); } @@ -153,7 +153,7 @@ body > main { font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; - color: rgba(248, 250, 252, 0.84); + color: rgba(255, 255, 255, 0.82); } .kb-login-form-shell, @@ -177,11 +177,11 @@ body > main { width: 100%; min-height: 48px; padding: 0 18px; - border: 1px solid rgba(255, 255, 255, 0.10); + border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; - background: rgba(239, 245, 226, 0.78) !important; - color: #f8fafc !important; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; + background: rgba(255, 255, 255, 0.72) !important; + color: #111827 !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; outline: none; font-size: 1rem; backdrop-filter: blur(9px); @@ -190,17 +190,17 @@ body > main { .kb-text-input:focus { border-color: rgba(255, 255, 255, 0.26); - background: rgba(213, 223, 193, 0.62) !important; + background: rgba(255, 255, 255, 0.9) !important; color: #111827 !important; } .kb-text-input:not(:placeholder-shown) { - background: rgba(213, 223, 193, 0.62) !important; + background: rgba(255, 255, 255, 0.88) !important; color: #111827 !important; } .kb-text-input::placeholder { - color: rgba(255, 255, 255, 0.88); + color: rgba(15, 23, 42, 0.68); } .kb-password-row { @@ -244,11 +244,24 @@ body > main { display: inline-flex; align-items: center; gap: 8px; - color: rgba(248, 250, 252, 0.94); + color: rgba(248, 250, 252, 0.96); font-size: 0.88rem; cursor: pointer; } +.kb-login-card h1, +.kb-login-card h2, +.kb-login-card h3 { + color: #f8fafc; +} + +.kb-login-card p, +.kb-login-card label, +.kb-login-card .pf-v5-c-form__label-text, +.kb-login-card .kcLabelClass { + color: rgba(248, 250, 252, 0.94) !important; +} + .kb-remember input { width: 16px; height: 16px; diff --git a/CopyToKeycloak/theme/kusche-desktop/login/resources/img/skyline.png b/CopyToKeycloak/theme/kusche-desktop/login/resources/img/skyline.png new file mode 100644 index 00000000..61214831 Binary files /dev/null and b/CopyToKeycloak/theme/kusche-desktop/login/resources/img/skyline.png differ diff --git a/public/assets/auth/login.css b/public/assets/auth/login.css index e28235fc..7b678330 100644 --- a/public/assets/auth/login.css +++ b/public/assets/auth/login.css @@ -10,7 +10,7 @@ body { margin: 0; min-height: 100vh; - color: #f8fafc; + color: #0f172a; background: linear-gradient(180deg, rgba(232, 241, 248, 0.22), rgba(17, 24, 39, 0.18)), url("/assets/auth/skyline.png") center center / cover no-repeat fixed; @@ -41,9 +41,9 @@ body { z-index: 1; padding: 28px; border-radius: 30px; - background: rgba(255, 255, 255, 0.12); - border: 1px solid rgba(255, 255, 255, 0.24); - box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22); + background: rgba(255, 255, 255, 0.18); + border: 1px solid rgba(255, 255, 255, 0.30); + box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18); backdrop-filter: blur(22px) saturate(1.08); } @@ -71,7 +71,7 @@ body { font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; - color: rgba(248, 250, 252, 0.84); + color: rgba(255, 255, 255, 0.82); font-weight: 700; } @@ -80,11 +80,12 @@ body { font-size: 2.2rem; line-height: 1.05; font-weight: 400; + color: #f8fafc; } .login-copy { margin: 0; - color: rgba(248, 250, 252, 0.96); + color: rgba(248, 250, 252, 0.94); line-height: 1.5; } @@ -156,7 +157,7 @@ body { .login-field span { font-size: 0.88rem; - color: rgba(248, 250, 252, 0.94); + color: rgba(248, 250, 252, 0.96); } .login-field input, @@ -165,11 +166,11 @@ body { min-height: 48px; padding: 0 18px; border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.10); - background: rgba(239, 245, 226, 0.78); - color: #f8fafc; + border: 1px solid rgba(255, 255, 255, 0.24); + background: rgba(255, 255, 255, 0.72); + color: #111827; font: inherit; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); backdrop-filter: blur(9px); outline: none; } @@ -183,19 +184,19 @@ body { .login-field input::placeholder, .login-field textarea::placeholder { - color: rgba(255, 255, 255, 0.88); + color: rgba(15, 23, 42, 0.68); } .login-field input:focus, .login-field textarea:focus { border-color: rgba(255, 255, 255, 0.26); - background: rgba(213, 223, 193, 0.62); + background: rgba(255, 255, 255, 0.9); color: #111827; } .login-field input:not(:placeholder-shown), .login-field textarea:not(:placeholder-shown) { - background: rgba(213, 223, 193, 0.62); + background: rgba(255, 255, 255, 0.88); color: #111827; }