vigdorov/team-planner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix background theme
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Николай Вигдоров
2026-01-14 01:50:14 +03:00
parent 8f9fa581eb
commit 9e43ad65c5
3 changed files with 291 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.playwright-mcp/keycloak-login-current.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 361 KiB

42
keycloak-theme/team-planner/login/login.ftl
View File

@ -1,13 +1,13 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section> <@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
<#if section = "header"> <#if section = "header">
<div style="text-align: center; margin-bottom: 32px;">
<h1 style="font-size: 1.75rem; font-weight: 700; color: rgba(0, 0, 0, 0.87); margin: 0 0 8px 0;">Team Planner</h1>
<p style="font-size: 0.875rem; color: rgba(0, 0, 0, 0.6); margin: 0;">Приложение для управления бэклогом идей команды</p>
</div>
<#elseif section = "form"> <#elseif section = "form">
<div id="kc-form"> <div id="kc-form">
<div id="kc-form-wrapper"> <div id="kc-form-wrapper">
<div style="text-align: center; margin-bottom: 32px;">
<h1 style="font-size: 1.75rem; font-weight: 700; color: rgba(0, 0, 0, 0.87); margin: 0 0 8px 0;">Team Planner</h1>
<p style="font-size: 0.875rem; color: rgba(0, 0, 0, 0.6); margin: 0;">Приложение для управления бэклогом идей команды</p>
</div>
<#if realm.password> <#if realm.password>
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post"> <form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<div class="form-group"> <div class="form-group">
@ -17,7 +17,7 @@
<input tabindex="1" id="username" class="form-control" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off" <input tabindex="1" id="username" class="form-control" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off"
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>" /> aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>" />
<#if messagesPerField.existsError('username','password')> <#if messagesPerField.existsError('username','password')>
<span class="input-error" aria-live="polite"> <span class="input-error" aria-live="polite" style="color: #d32f2f; font-size: 0.75rem; margin-top: 4px; display: block;">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc} ${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span> </span>
</#if> </#if>
@ -29,15 +29,15 @@
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>" /> aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>" />
</div> </div>
<div class="form-group" style="display: flex; justify-content: space-between; align-items: center;"> <div class="form-group" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<#if realm.rememberMe && !usernameHidden??> <#if realm.rememberMe && !usernameHidden??>
<div class="checkbox" style="margin-bottom: 0;"> <div class="checkbox" style="margin-bottom: 0; display: flex; align-items: center; gap: 8px;">
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" <#if login.rememberMe??>checked</#if>> <input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" style="width: 18px; height: 18px; accent-color: #1976d2;" <#if login.rememberMe??>checked</#if>>
<label for="rememberMe">${msg("rememberMe")}</label> <label for="rememberMe" style="margin: 0; font-size: 0.875rem; color: rgba(0, 0, 0, 0.6);">${msg("rememberMe")}</label>
</div> </div>
</#if> </#if>
<#if realm.resetPasswordAllowed> <#if realm.resetPasswordAllowed>
<span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span> <span><a tabindex="5" href="${url.loginResetCredentialsUrl}" style="font-size: 0.875rem; color: #1976d2;">${msg("doForgotPassword")}</a></span>
</#if> </#if>
</div> </div>
@ -47,27 +47,23 @@
</div> </div>
</form> </form>
</#if> </#if>
<div style="text-align: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.12);">
<p style="font-size: 0.875rem; color: rgba(0, 0, 0, 0.6); margin: 0;">
Для получения доступа обратитесь к Николаю Вигдорову
</p>
</div>
</div> </div>
</div> </div>
<#elseif section = "info"> <#elseif section = "info">
<div id="kc-info-wrapper" style="text-align: center; margin-top: 24px;">
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
<div id="kc-registration">
<span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
</#if>
<p style="font-size: 0.875rem; color: rgba(0, 0, 0, 0.6); margin-top: 16px;">
Для получения доступа обратитесь к Николаю Вигдорову
</p>
</div>
<#elseif section = "socialProviders"> <#elseif section = "socialProviders">
<#if realm.password && social.providers??> <#if realm.password && social.providers??>
<div id="kc-social-providers"> <div id="kc-social-providers" style="margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.12);">
<h4 style="text-align: center; color: rgba(0, 0, 0, 0.6); margin-bottom: 16px;">Или войти через</h4> <p style="text-align: center; color: rgba(0, 0, 0, 0.6); margin-bottom: 16px; font-size: 0.875rem;">Или войти через</p>
<ul style="list-style: none; padding: 0; margin: 0;"> <ul style="list-style: none; padding: 0; margin: 0;">
<#list social.providers as p> <#list social.providers as p>
<li style="margin-bottom: 8px;"> <li style="margin-bottom: 8px;">
<a id="social-${p.alias}" class="social-provider-button" type="button" href="${p.loginUrl}"> <a id="social-${p.alias}" href="${p.loginUrl}" style="display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 16px; font-size: 0.875rem; color: rgba(0, 0, 0, 0.87); background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.23); border-radius: 4px; text-decoration: none;">
<#if p.iconClasses?has_content> <#if p.iconClasses?has_content>
<i class="${p.iconClasses!}" aria-hidden="true"></i> <i class="${p.iconClasses!}" aria-hidden="true"></i>
</#if> </#if>

528
keycloak-theme/team-planner/login/resources/css/login.css
View File

@ -1,10 +1,9 @@
/* Team Planner - Keycloak Login Theme */ /* Team Planner - Keycloak Login Theme */
/* Стилизация под MUI (Material Design) */ /* Полное переопределение стилей Keycloak/PatternFly */
:root { :root {
--primary-color: #1976d2; --primary-color: #1976d2;
--primary-hover: #1565c0; --primary-hover: #1565c0;
--primary-light: #42a5f5;
--text-primary: rgba(0, 0, 0, 0.87); --text-primary: rgba(0, 0, 0, 0.87);
--text-secondary: rgba(0, 0, 0, 0.6); --text-secondary: rgba(0, 0, 0, 0.6);
--background: #f5f5f5; --background: #f5f5f5;
@ -14,343 +13,360 @@
--shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12); --shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
} }
/* Reset и базовые стили */ /* ===========================================
* { ПОЛНЫЙ СБРОС ФОНА KEYCLOAK
box-sizing: border-box; =========================================== */
html, body {
background: var(--background) !important;
background-image: none !important;
min-height: 100vh;
margin: 0;
padding: 0;
} }
body { body {
font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
background-color: var(--background); display: flex !important;
margin: 0; align-items: center !important;
padding: 0; justify-content: center !important;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
} }
/* Скрываем стандартный header Keycloak */ /* Убираем ВСЕ фоны PatternFly */
#kc-header { .login-pf,
display: none; .login-pf body,
.login-pf-page,
.pf-c-background-image,
.pf-c-login,
.pf-c-login__container,
[class*="pf-c-background"],
[class*="login-pf"] {
background: var(--background) !important;
background-image: none !important;
background-color: var(--background) !important;
} }
#kc-header-wrapper { /* Убираем SVG фон */
display: none; .pf-c-background-image::before,
.pf-c-background-image::after,
.login-pf-page::before,
.login-pf-page::after {
display: none !important;
content: none !important;
background: none !important;
} }
/* Основной контейнер */ /* ===========================================
.login-pf { СКРЫВАЕМ СТАНДАРТНЫЙ HEADER KEYCLOAK
background-color: var(--background); =========================================== */
#kc-header,
#kc-header-wrapper,
.pf-c-login__header,
.login-pf-page-header,
.pf-c-brand,
header[class*="pf-"],
.kc-logo-text {
display: none !important;
} }
#kc-content { /* ===========================================
width: 100%; ОСНОВНОЙ КОНТЕЙНЕР
max-width: 400px; =========================================== */
margin: 0 auto;
.pf-c-login__main,
#kc-content,
#kc-content-wrapper,
.card-pf,
#kc-form-wrapper {
background: var(--surface) !important;
border-radius: var(--border-radius) !important;
box-shadow: var(--shadow) !important;
padding: 48px !important;
width: 100% !important;
max-width: 400px !important;
margin: 20px auto !important;
border: none !important;
} }
#kc-content-wrapper { .pf-c-login {
width: 100%; display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 100vh !important;
padding: 20px !important;
} }
/* Карточка логина */ .pf-c-login__container {
#kc-form-wrapper, max-width: 400px !important;
.card-pf { width: 100% !important;
background: var(--surface);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 48px;
width: 100%;
max-width: 400px;
margin: 20px;
} }
/* Заголовок */ /* ===========================================
#kc-page-title { ЗАГОЛОВОК ФОРМЫ
font-size: 1.5rem; =========================================== */
font-weight: 700;
color: var(--text-primary); #kc-page-title,
text-align: center; .pf-c-login__main-header,
margin-bottom: 8px; .pf-c-title {
font-size: 1.75rem !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
text-align: center !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
} }
/* Подзаголовок - скрываем дефолтный */ /* ===========================================
#kc-locale { ФОРМА ЛОГИНА
display: none; =========================================== */
.pf-c-login__main-body,
.pf-c-form {
padding: 0 !important;
} }
/* Кастомный заголовок */ /* Группы полей */
#kc-form-login::before { .form-group,
content: "Team Planner"; .pf-c-form__group {
display: block; margin-bottom: 24px !important;
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
text-align: center;
margin-bottom: 8px;
}
#kc-form-login::after {
content: "Приложение для управления бэклогом идей команды";
display: block;
font-size: 0.875rem;
color: var(--text-secondary);
text-align: center;
margin-bottom: 32px;
}
/* Группы форм */
.form-group {
margin-bottom: 24px;
} }
/* Лейблы */ /* Лейблы */
.form-group label, label,
.pf-c-form__label,
.pf-c-form__label-text,
.control-label { .control-label {
display: block; display: block !important;
font-size: 0.875rem; font-size: 0.875rem !important;
font-weight: 500; font-weight: 500 !important;
color: var(--text-primary); color: var(--text-primary) !important;
margin-bottom: 8px; margin-bottom: 8px !important;
padding: 0 !important;
} }
/* Инпуты */ /* Инпуты */
.form-control,
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
input[type="email"] { input[type="email"],
width: 100%; .form-control,
padding: 16.5px 14px; .pf-c-form-control {
font-size: 1rem; width: 100% !important;
font-family: inherit; padding: 16.5px 14px !important;
color: var(--text-primary); font-size: 1rem !important;
background-color: var(--surface); font-family: inherit !important;
border: 1px solid rgba(0, 0, 0, 0.23); color: var(--text-primary) !important;
border-radius: var(--border-radius); background-color: var(--surface) !important;
outline: none; border: 1px solid rgba(0, 0, 0, 0.23) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease; border-radius: var(--border-radius) !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 0.2s ease !important;
box-sizing: border-box !important;
} }
.form-control:hover,
input[type="text"]:hover, input[type="text"]:hover,
input[type="password"]:hover, input[type="password"]:hover,
input[type="email"]:hover { input[type="email"]:hover,
border-color: var(--text-primary); .form-control:hover,
.pf-c-form-control:hover {
border-color: var(--text-primary) !important;
} }
.form-control:focus,
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="email"]:focus { input[type="email"]:focus,
border-color: var(--primary-color); .form-control:focus,
border-width: 2px; .pf-c-form-control:focus {
padding: 15.5px 13px; border-color: var(--primary-color) !important;
box-shadow: none; border-width: 2px !important;
padding: 15.5px 13px !important;
} }
/* Кнопка входа */ /* ===========================================
КНОПКА ВХОДА
=========================================== */
#kc-login, #kc-login,
.btn-primary, .btn-primary,
input[type="submit"] { .pf-c-button.pf-m-primary,
width: 100%; input[type="submit"],
padding: 12px 24px; button[type="submit"] {
font-size: 0.9375rem; width: 100% !important;
font-weight: 500; padding: 12px 24px !important;
font-family: inherit; font-size: 0.9375rem !important;
text-transform: uppercase; font-weight: 500 !important;
letter-spacing: 0.02857em; font-family: inherit !important;
color: #ffffff; text-transform: uppercase !important;
background-color: var(--primary-color); letter-spacing: 0.02857em !important;
border: none; color: #ffffff !important;
border-radius: var(--border-radius); background-color: var(--primary-color) !important;
cursor: pointer; border: none !important;
transition: background-color 0.2s ease, box-shadow 0.2s ease; border-radius: var(--border-radius) !important;
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12); cursor: pointer !important;
transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12) !important;
margin-top: 16px !important;
} }
#kc-login:hover, #kc-login:hover,
.btn-primary:hover, .btn-primary:hover,
input[type="submit"]:hover { .pf-c-button.pf-m-primary:hover,
background-color: var(--primary-hover); input[type="submit"]:hover,
box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12); button[type="submit"]:hover {
background-color: var(--primary-hover) !important;
box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12) !important;
} }
#kc-login:active, /* ===========================================
.btn-primary:active, ССЫЛКИ
input[type="submit"]:active { =========================================== */
box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
a,
.pf-c-button.pf-m-link {
color: var(--primary-color) !important;
text-decoration: none !important;
font-size: 0.875rem !important;
background: none !important;
border: none !important;
padding: 0 !important;
} }
/* Ссылки */ a:hover,
a { .pf-c-button.pf-m-link:hover {
color: var(--primary-color); text-decoration: underline !important;
text-decoration: none;
font-size: 0.875rem;
} }
a:hover { /* ===========================================
text-decoration: underline; ЧЕКБОКС "ЗАПОМНИТЬ МЕНЯ"
=========================================== */
.checkbox,
.pf-c-check {
display: flex !important;
align-items: center !important;
gap: 8px !important;
} }
/* Ссылка "Забыли пароль?" */ .checkbox input[type="checkbox"],
#kc-form-options { .pf-c-check__input {
margin-top: 16px; width: 18px !important;
text-align: center; height: 18px !important;
accent-color: var(--primary-color) !important;
cursor: pointer !important;
} }
/* Чекбокс "Запомнить меня" */ .checkbox label,
.checkbox { .pf-c-check__label {
display: flex; margin: 0 !important;
align-items: center; font-size: 0.875rem !important;
gap: 8px; color: var(--text-secondary) !important;
margin-bottom: 24px; cursor: pointer !important;
} }
.checkbox input[type="checkbox"] { /* ===========================================
width: 18px; СООБЩЕНИЯ ОБ ОШИБКАХ
height: 18px; =========================================== */
accent-color: var(--primary-color);
cursor: pointer;
}
.checkbox label {
margin: 0;
font-size: 0.875rem;
color: var(--text-secondary);
cursor: pointer;
}
/* Сообщения об ошибках */
.alert, .alert,
.alert-error, .alert-error,
.pf-c-alert,
.pf-c-alert.pf-m-danger,
.kc-feedback-text { .kc-feedback-text {
background-color: #fdeded; background-color: #fdeded !important;
color: var(--error); color: var(--error) !important;
border: 1px solid #f5c6cb; border: 1px solid #f5c6cb !important;
border-radius: var(--border-radius); border-radius: var(--border-radius) !important;
padding: 12px 16px; padding: 12px 16px !important;
margin-bottom: 24px; margin-bottom: 24px !important;
font-size: 0.875rem; font-size: 0.875rem !important;
} }
.alert-success { .pf-c-alert__icon {
background-color: #edf7ed; display: none !important;
color: #1e4620;
border-color: #c3e6cb;
} }
.alert-warning { /* ===========================================
background-color: #fff4e5; СОЦИАЛЬНЫЕ ПРОВАЙДЕРЫ
color: #663c00; =========================================== */
border-color: #ffeeba;
#kc-social-providers,
.pf-c-login__main-footer-band {
margin-top: 24px !important;
padding-top: 24px !important;
border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
} }
/* Информационное сообщение внизу */ #kc-social-providers h4,
#kc-registration { .pf-c-login__main-footer-band-item {
margin-top: 32px; font-size: 0.875rem !important;
padding-top: 24px; color: var(--text-secondary) !important;
border-top: 1px solid rgba(0, 0, 0, 0.12); text-align: center !important;
text-align: center; margin-bottom: 16px !important;
} }
#kc-registration span { .pf-c-login__main-footer-links-item a,
font-size: 0.875rem; #kc-social-providers a {
color: var(--text-secondary); display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
padding: 10px 16px !important;
margin-bottom: 8px !important;
font-size: 0.875rem !important;
color: var(--text-primary) !important;
background-color: var(--surface) !important;
border: 1px solid rgba(0, 0, 0, 0.23) !important;
border-radius: var(--border-radius) !important;
text-decoration: none !important;
} }
/* Социальные провайдеры */ .pf-c-login__main-footer-links-item a:hover,
#kc-social-providers { #kc-social-providers a:hover {
margin-top: 24px; background-color: rgba(0, 0, 0, 0.04) !important;
padding-top: 24px; text-decoration: none !important;
border-top: 1px solid rgba(0, 0, 0, 0.12);
} }
#kc-social-providers h4 { /* ===========================================
font-size: 0.875rem; FOOTER
color: var(--text-secondary); =========================================== */
text-align: center;
margin-bottom: 16px; .pf-c-login__main-footer,
.pf-c-login__footer,
#kc-info-wrapper,
#kc-form-options {
margin-top: 16px !important;
text-align: center !important;
} }
.social-provider-button { /* ===========================================
display: flex; АДАПТИВНОСТЬ
align-items: center; =========================================== */
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
margin-bottom: 8px;
font-size: 0.875rem;
color: var(--text-primary);
background-color: var(--surface);
border: 1px solid rgba(0, 0, 0, 0.23);
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color 0.2s ease;
}
.social-provider-button:hover {
background-color: rgba(0, 0, 0, 0.04);
}
/* Footer - добавляем информацию о контакте */
#kc-info-wrapper {
margin-top: 24px;
text-align: center;
}
#kc-info-wrapper::after {
content: "Для получения доступа обратитесь к Николаю Вигдорову";
display: block;
font-size: 0.875rem;
color: var(--text-secondary);
margin-top: 16px;
}
/* Адаптивность */
@media (max-width: 480px) { @media (max-width: 480px) {
.pf-c-login__main,
#kc-form-wrapper, #kc-form-wrapper,
.card-pf { .card-pf {
margin: 10px; margin: 10px !important;
padding: 32px 24px; padding: 32px 24px !important;
}
#kc-form-login::before {
font-size: 1.5rem;
} }
} }
/* Скрываем ненужные элементы */ /* ===========================================
.pf-c-alert__icon, СКРЫВАЕМ ЛИШНИЕ ЭЛЕМЕНТЫ
.login-pf-page .login-pf-page-header, =========================================== */
#kc-attempted-username {
display: none; .pf-c-login__main-header-desc,
#kc-attempted-username,
.pf-c-alert__action,
.pf-c-login__footer-list,
.login-pf-page .login-pf-page-header {
display: none !important;
} }
/* Фикс для Keycloak 21+ */ /* Скрываем иконку показа пароля если мешает */
.pf-c-login__main { .pf-c-button.pf-m-control {
background: var(--surface); background: transparent !important;
border-radius: var(--border-radius); border: none !important;
box-shadow: var(--shadow);
padding: 48px;
max-width: 400px;
margin: 20px auto;
}
.pf-c-form-control {
width: 100%;
padding: 16.5px 14px;
font-size: 1rem;
border: 1px solid rgba(0, 0, 0, 0.23);
border-radius: var(--border-radius);
}
.pf-c-button.pf-m-primary {
width: 100%;
padding: 12px 24px;
font-size: 0.9375rem;
background-color: var(--primary-color);
border: none;
border-radius: var(--border-radius);
} }