调整样式 #1
@ -25,15 +25,17 @@ header .navbar {
|
||||
width: 123px;
|
||||
margin: 3px 10px 5px;
|
||||
text-indent: -99999px;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.navbar-pf .navbar-utility {
|
||||
right: 20px;
|
||||
top: -34px;
|
||||
right: 20px;
|
||||
top: -40px;
|
||||
font-size: 12px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.navbar-pf .navbar-utility > li > a {
|
||||
.navbar-pf .navbar-utility>li>a {
|
||||
color: #fff !important;
|
||||
padding-bottom: 12px;
|
||||
padding-top: 11px;
|
||||
@ -57,6 +59,7 @@ header .navbar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Sidebar */
|
||||
|
||||
.bs-sidebar {
|
||||
@ -66,6 +69,7 @@ header .navbar {
|
||||
padding-left: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.bs-sidebar ul {
|
||||
list-style: none;
|
||||
padding-left: 12px;
|
||||
@ -75,6 +79,7 @@ header .navbar {
|
||||
margin-bottom: 0.5em;
|
||||
margin-left: -1em;
|
||||
}
|
||||
|
||||
.bs-sidebar ul li a {
|
||||
font-size: 14px;
|
||||
padding-left: 25px;
|
||||
@ -85,12 +90,14 @@ header .navbar {
|
||||
border-style: solid;
|
||||
border-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.bs-sidebar ul li a:hover,
|
||||
.bs-sidebar ul li a:focus {
|
||||
text-decoration: none;
|
||||
color: #777777;
|
||||
border-right: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.bs-sidebar ul li.active a {
|
||||
background-color: #c7e5f0;
|
||||
border-color: #56bae0;
|
||||
@ -101,10 +108,9 @@ header .navbar {
|
||||
}
|
||||
|
||||
.bs-sidebar ul li.active a:hover {
|
||||
border-right: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
|
||||
.content-area h2 {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 100;
|
||||
@ -123,7 +129,6 @@ header .navbar {
|
||||
color: #CB2915;
|
||||
}
|
||||
|
||||
|
||||
.alert {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
@ -143,18 +148,22 @@ header .navbar {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.alert.alert-success {
|
||||
background-color: #E4F1E1;
|
||||
border-color: #4B9E39;
|
||||
}
|
||||
|
||||
.alert.alert-error {
|
||||
background-color: #F8E7E7;
|
||||
border-color: #B91415;
|
||||
}
|
||||
|
||||
.alert.alert-warning {
|
||||
background-color: #FEF1E9;
|
||||
border-color: #F17528;
|
||||
}
|
||||
|
||||
.alert.alert-info {
|
||||
background-color: #E4F3FA;
|
||||
border-color: #5994B2;
|
||||
@ -178,7 +187,7 @@ header .navbar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.control-label + .required {
|
||||
.control-label+.required {
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: 0;
|
||||
@ -194,6 +203,7 @@ header .navbar {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
/* Authenticator page */
|
||||
|
||||
ol {
|
||||
@ -212,48 +222,54 @@ ol li img {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
hr + .form-horizontal {
|
||||
hr+.form-horizontal {
|
||||
border: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.kc-dropdown{
|
||||
.kc-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.kc-dropdown > a{
|
||||
display:block;
|
||||
|
||||
.kc-dropdown>a {
|
||||
display: block;
|
||||
padding: 11px 10px 12px;
|
||||
line-height: 12px;
|
||||
font-size: 12px;
|
||||
color: #fff !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
.kc-dropdown > a::after{
|
||||
|
||||
.kc-dropdown>a::after {
|
||||
content: "\2c5";
|
||||
margin-left: 4px;
|
||||
}
|
||||
.kc-dropdown:hover > a{
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
|
||||
.kc-dropdown:hover>a {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.kc-dropdown ul li a{
|
||||
|
||||
.kc-dropdown ul li a {
|
||||
padding: 1px 11px;
|
||||
font-size: 12px;
|
||||
color: #000 !important;
|
||||
border: 1px solid #fff;
|
||||
text-decoration: none;
|
||||
display:block;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
}
|
||||
.kc-dropdown ul li a:hover{
|
||||
|
||||
.kc-dropdown ul li a:hover {
|
||||
color: #4d5258;
|
||||
background-color: #d4edfa;
|
||||
border-color: #b3d3e7;
|
||||
}
|
||||
.kc-dropdown ul{
|
||||
|
||||
.kc-dropdown ul {
|
||||
position: absolute;
|
||||
z-index: 2000;
|
||||
list-style:none;
|
||||
display:none;
|
||||
list-style: none;
|
||||
display: none;
|
||||
padding: 5px 0px;
|
||||
margin: 0px;
|
||||
background-color: #fff !important;
|
||||
@ -264,10 +280,10 @@ hr + .form-horizontal {
|
||||
background-clip: padding-box;
|
||||
min-width: 100px;
|
||||
}
|
||||
.kc-dropdown:hover ul{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.kc-dropdown:hover ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#kc-totp-secret-key {
|
||||
border: 1px solid #eee;
|
||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 8.3 KiB |
@ -1,10 +0,0 @@
|
||||
<#macro kw component="span" rest...>
|
||||
<${component}
|
||||
class="absolute left-0 ml-3 text-lg"
|
||||
<#list rest as attrName, attrValue>
|
||||
${attrName}="${attrValue}"
|
||||
</#list>
|
||||
>
|
||||
<#nested>
|
||||
</${component}>
|
||||
</#macro>
|
@ -1,10 +0,0 @@
|
||||
<#macro kw component="button" rest...>
|
||||
<${component}
|
||||
class="bg-primary-600 flex justify-center px-4 py-2 relative rounded-lg text-sm text-white w-full focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 hover:bg-primary-700"
|
||||
<#list rest as attrName, attrValue>
|
||||
${attrName}="${attrValue}"
|
||||
</#list>
|
||||
>
|
||||
<#nested>
|
||||
</${component}>
|
||||
</#macro>
|
@ -1,17 +0,0 @@
|
||||
<#macro kw name checked=false rest...>
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
<#if checked>checked</#if>
|
||||
class="border-gray-300 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50"
|
||||
id="${name}"
|
||||
name="${name}"
|
||||
type="checkbox"
|
||||
<#list rest as attrName, attrValue>
|
||||
${attrName}="${attrValue}"
|
||||
</#list>
|
||||
>
|
||||
<label class="block ml-2 text-gray-900 text-sm" for="${name}">
|
||||
<#nested>
|
||||
</label>
|
||||
</div>
|
||||
</#macro>
|
@ -1,31 +0,0 @@
|
||||
<#macro kw>
|
||||
<title>${msg("loginTitle", (realm.displayName!""))}</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<#if properties.meta?has_content>
|
||||
<#list properties.meta?split(" ") as meta>
|
||||
<meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
|
||||
</#list>
|
||||
</#if>
|
||||
|
||||
<#if properties.favicons?has_content>
|
||||
<#list properties.favicons?split(" ") as favicon>
|
||||
<link href="${url.resourcesPath}/${favicon?split('==')[0]}" rel="${meta?split('==')[1]}">
|
||||
</#list>
|
||||
</#if>
|
||||
|
||||
<#if properties.styles?has_content>
|
||||
<#list properties.styles?split(" ") as style>
|
||||
<link href="${url.resourcesPath}/${style}" rel="stylesheet" />
|
||||
</#list>
|
||||
</#if>
|
||||
|
||||
<#if properties.scripts?has_content>
|
||||
<#list properties.scripts?split(" ") as script>
|
||||
<script defer src="${url.resourcesPath}/${script}" type="text/javascript"></script>
|
||||
</#list>
|
||||
</#if>
|
||||
</#macro>
|
@ -1,6 +0,0 @@
|
||||
<#-- https://github.com/tailwindlabs/heroicons/blob/master/src/outline/chevron-down.svg -->
|
||||
<#macro kw>
|
||||
<svg fill="none" height="1em" stroke="currentColor" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</#macro>
|
@ -1,6 +0,0 @@
|
||||
<#-- https://github.com/tailwindlabs/heroicons/blob/master/src/outline/external-link.svg -->
|
||||
<#macro kw>
|
||||
<svg fill="none" height="1em" stroke="currentColor" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</#macro>
|
@ -1,23 +0,0 @@
|
||||
<#macro kw invalid name autofocus=false disabled=false message=true required=true rest...>
|
||||
<label class="sr-only" for="${name}">
|
||||
<#nested>
|
||||
</label>
|
||||
<input
|
||||
<#if autofocus>autofocus</#if>
|
||||
<#if disabled>disabled</#if>
|
||||
<#if required>required</#if>
|
||||
aria-invalid="${messagesPerField.existsError(invalid)?c}"
|
||||
class="block border-gray-300 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm"
|
||||
id="${name}"
|
||||
name="${name}"
|
||||
placeholder="<#compress><#nested></#compress>"
|
||||
<#list rest as attrName, attrValue>
|
||||
${attrName}="${attrValue}"
|
||||
</#list>
|
||||
>
|
||||
<#if message && messagesPerField.existsError(invalid)>
|
||||
<div class="mt-2 text-red-600 text-sm">
|
||||
${kcSanitize(messagesPerField.getFirstError(invalid))?no_esc}
|
||||
</div>
|
||||
</#if>
|
||||
</#macro>
|
@ -1,11 +0,0 @@
|
||||
<#macro kw>
|
||||
<#compress>
|
||||
<#if !realm.loginWithEmailAllowed>
|
||||
${msg("username")}
|
||||
<#elseif !realm.registrationEmailAsUsername>
|
||||
${msg("usernameOrEmail")}
|
||||
<#else>
|
||||
${msg("email")}
|
||||
</#if>
|
||||
</#compress>
|
||||
</#macro>
|
@ -1,18 +0,0 @@
|
||||
<#macro kw>
|
||||
<#switch message.type>
|
||||
<#case "error">
|
||||
<#assign color="bg-red-100 text-red-600">
|
||||
<#case "info">
|
||||
<#assign color="bg-blue-100 text-blue-600">
|
||||
<#case "success">
|
||||
<#assign color="bg-green-100 text-green-600">
|
||||
<#case "warning">
|
||||
<#assign color="bg-orange-100 text-orange-600">
|
||||
<#default>
|
||||
<#assign color="bg-blue-100 text-blue-600">
|
||||
</#switch>
|
||||
|
||||
<div class="${color} p-4 rounded-lg text-sm" role="alert">
|
||||
<span>${kcSanitize(message.summary)?no_esc}</span>
|
||||
</div>
|
||||
</#macro>
|
@ -1,10 +0,0 @@
|
||||
<#import "../button/primary.ftl" as buttonPrimary>
|
||||
|
||||
<#macro kw>
|
||||
<form action="${url.loginAction}" class="flex justify-center" method="post">
|
||||
<input name="tryAnotherWay" type="hidden" value="on"/>
|
||||
<@buttonPrimary.kw type="submit">
|
||||
${msg("doTryAnotherWay")}
|
||||
</@buttonPrimary.kw>
|
||||
</form>
|
||||
</#macro>
|
@ -1,5 +0,0 @@
|
||||
<#macro kw>
|
||||
<footer class="space-y-4">
|
||||
<#nested>
|
||||
</footer>
|
||||
</#macro>
|
@ -1,5 +0,0 @@
|
||||
<#macro kw>
|
||||
<header class="space-y-4">
|
||||
<#nested>
|
||||
</header>
|
||||
</#macro>
|
@ -1,5 +0,0 @@
|
||||
<#macro kw>
|
||||
<main class="space-y-4">
|
||||
<#nested>
|
||||
</main>
|
||||
</#macro>
|
@ -1,5 +0,0 @@
|
||||
<#macro kw>
|
||||
<div class="bg-white p-8 rounded-lg space-y-6">
|
||||
<#nested>
|
||||
</div>
|
||||
</#macro>
|
@ -1,7 +0,0 @@
|
||||
<#macro kw>
|
||||
<div class="bg-gray-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
|
||||
<div class="max-w-md space-y-6 w-full">
|
||||
<#nested>
|
||||
</div>
|
||||
</div>
|
||||
</#macro>
|
@ -1,28 +0,0 @@
|
||||
<#import "../icon/chevron-down.ftl" as iconChevronDown>
|
||||
<#import "../link/secondary.ftl" as linkSecondary>
|
||||
|
||||
<#macro kw>
|
||||
<div class="relative" x-data="{open: false}">
|
||||
<@linkSecondary.kw component="button" type="button" @click="open = true">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-1 text-sm">${locale.current}</span>
|
||||
<@iconChevronDown.kw />
|
||||
</div>
|
||||
</@linkSecondary.kw>
|
||||
<div
|
||||
class="absolute bg-white bottom-0 -left-4 max-h-80 mb-6 overflow-y-scroll rounded-lg shadow-lg"
|
||||
x-show="open"
|
||||
@click.away="open = false"
|
||||
>
|
||||
<#list locale.supported as locales>
|
||||
<#if locale.current != locales.label>
|
||||
<div class="px-4 py-2">
|
||||
<@linkSecondary.kw href=locales.url>
|
||||
<span class="text-sm">${locales.label}</span>
|
||||
</@linkSecondary.kw>
|
||||
</div>
|
||||
</#if>
|
||||
</#list>
|
||||
</ul>
|
||||
</div>
|
||||
</#macro>
|
@ -1,5 +0,0 @@
|
||||
<#macro kw>
|
||||
<div class="flex justify-around">
|
||||
<#nested>
|
||||
</div>
|
||||
</#macro>
|
@ -1,3 +0,0 @@
|
||||
<#macro kw>
|
||||
<div class="text-gray-600 text-sm">* ${msg("requiredFields")}</div>
|
||||
</#macro>
|
@ -1,3 +0,0 @@
|
||||
<#macro kw>
|
||||
<h1 class="text-center text-xl"><#nested "header"></h1>
|
||||
</#macro>
|
@ -1,5 +0,0 @@
|
||||
<#macro kw>
|
||||
<div class="font-bold text-center text-2xl">
|
||||
${kcSanitize(msg("loginTitleHtml", (realm.displayNameHtml!"")))?no_esc}
|
||||
</div>
|
||||
</#macro>
|
@ -1,16 +0,0 @@
|
||||
<#import "../button/icon.ftl" as buttonIcon >
|
||||
<#import "../button/primary.ftl" as buttonPrimary>
|
||||
<#import "../icon/external-link.ftl" as iconExternalLink>
|
||||
|
||||
<#macro kw>
|
||||
<#nested "show-username">
|
||||
<div class="mb-4">
|
||||
<div class="font-bold mb-2 text-center">${auth.attemptedUsername}</div>
|
||||
<@buttonPrimary.kw component="a" href="${url.loginRestartFlowUrl}">
|
||||
<@buttonIcon.kw>
|
||||
<@iconExternalLink.kw />
|
||||
</@buttonIcon.kw>
|
||||
${msg("restartLoginTooltip")}
|
||||
</@buttonPrimary.kw>
|
||||
</div>
|
||||
</#macro>
|
@ -1,10 +0,0 @@
|
||||
<#macro kw component="a" rest...>
|
||||
<${component}
|
||||
class="text-primary-600 hover:text-primary-500"
|
||||
<#list rest as attrName, attrValue>
|
||||
${attrName}="${attrValue}"
|
||||
</#list>
|
||||
>
|
||||
<#nested>
|
||||
</${component}>
|
||||
</#macro>
|
@ -1,10 +0,0 @@
|
||||
<#macro kw component="a" rest...>
|
||||
<${component}
|
||||
class="text-gray-600 hover:text-black"
|
||||
<#list rest as attrName, attrValue>
|
||||
${attrName}="${attrValue}"
|
||||
</#list>
|
||||
>
|
||||
<#nested>
|
||||
</${component}>
|
||||
</#macro>
|
@ -1,22 +0,0 @@
|
||||
<#import "./socials.ftl" as socials>
|
||||
|
||||
<#macro kw>
|
||||
<div class="separate pt-4">${msg("identity-provider-login-label")}</div>
|
||||
<div class="flex <#if social.providers?size gt 3>justify-between<#else>justify-around</#if>">
|
||||
<#list social.providers as provider>
|
||||
<a
|
||||
class="text-5xl"
|
||||
data-provider="${provider.alias}"
|
||||
href="${provider.loginUrl}"
|
||||
title="${provider.displayName!}"
|
||||
type="button"
|
||||
>
|
||||
<#if provider.iconClasses?has_content>
|
||||
<i class="${provider.iconClasses!}"></i>
|
||||
<#else>
|
||||
<@socials[provider.alias] />
|
||||
</#if>
|
||||
</a>
|
||||
</#list>
|
||||
</div>
|
||||
</#macro>
|
@ -1,37 +0,0 @@
|
||||
<#-- https://facebookbrand.com/facebookapp/assets/f-logo/ -->
|
||||
<#macro facebook>
|
||||
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H24V24H0V0Z" fill="white"/>
|
||||
<path d="M20 12.0972C20 7.6789 16.4183 4.09719 12 4.09719C7.58172 4.09719 4 7.6789 4 12.0972C4 16.0902 6.92548 19.3998 10.75 20V14.4097H8.71875V12.0972H10.75V10.3347C10.75 8.32969 11.9443 7.22219 13.7717 7.22219C14.647 7.22219 15.5625 7.37844 15.5625 7.37844V9.34719H14.5537C13.5599 9.34719 13.25 9.96386 13.25 10.5965V12.0972H15.4688L15.1141 14.4097H13.25V20C17.0745 19.3998 20 16.0902 20 12.0972Z" fill="#1877F2"/>
|
||||
</svg>
|
||||
</#macro>
|
||||
|
||||
<#-- https://github.com/logos -->
|
||||
<#macro github>
|
||||
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H24V24H0V0Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.999 4C7.5825 4 4 7.5675 4 11.9685C4 15.4885 6.292 18.475 9.471 19.5285C9.871 19.602 10.017 19.356 10.017 19.1445C10.017 18.956 10.01 18.4545 10.0065 17.7895C7.7815 18.271 7.3115 16.7215 7.3115 16.7215C6.9475 15.801 6.423 15.556 6.423 15.556C5.697 15.062 6.478 15.0715 6.478 15.0715C7.281 15.128 7.7035 15.893 7.7035 15.893C8.417 17.1105 9.576 16.7585 10.032 16.5545C10.1045 16.04 10.3115 15.689 10.5395 15.4895C8.7635 15.289 6.8955 14.6045 6.8955 11.5515C6.8955 10.6815 7.2075 9.97 7.719 9.4135C7.6365 9.212 7.362 8.4015 7.798 7.3045C7.798 7.3045 8.469 7.0905 9.9975 8.1215C10.6503 7.94431 11.3236 7.85403 12 7.853C12.68 7.8565 13.364 7.9445 14.003 8.1215C15.5305 7.0905 16.2005 7.305 16.2005 7.305C16.6375 8.4015 16.363 9.212 16.2805 9.4135C16.7935 9.97 17.103 10.682 17.103 11.5515C17.103 14.6125 15.232 15.2865 13.4505 15.4835C13.7375 15.7295 13.993 16.2155 13.993 16.959C13.993 18.024 13.983 18.884 13.983 19.1445C13.983 19.358 14.128 19.606 14.533 19.528C17.71 18.472 20 15.4885 20 11.9685C20 7.568 16.418 4 11.999 4Z" fill="#161514"/>
|
||||
</svg>
|
||||
</#macro>
|
||||
|
||||
<#-- https://developers.google.com/identity/branding-guidelines -->
|
||||
<#macro google>
|
||||
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H24V24H0V0Z" fill="white"/>
|
||||
<path d="M19.5302 12.1776C19.5302 11.52 19.4772 11.0399 19.3627 10.5424H11.9232V13.5112H16.2903C16.2023 14.2488 15.7267 15.36 14.6701 16.1066L14.6551 16.2061L17.0079 18.0458L17.1709 18.0623C18.6671 16.6666 19.5302 14.6134 19.5302 12.1776Z" fill="#4285F4"/>
|
||||
<path d="M11.9233 20C14.0626 20 15.8588 19.2889 17.1705 18.0623L14.6702 16.1065C14.0011 16.5776 13.103 16.9066 11.9233 16.9066C9.82808 16.9066 8.04986 15.5114 7.41578 13.5822L7.32277 13.5902L4.87696 15.5014L4.84496 15.5914C6.14812 18.2043 8.82445 20 11.9233 20Z" fill="#34A853"/>
|
||||
<path d="M7.41593 13.5822C7.24279 13.0726 7.15362 12.5383 7.1519 12C7.1519 11.449 7.24841 10.9154 7.40693 10.4178L7.40293 10.3118L4.92612 8.37009L4.84511 8.40909C4.29002 9.52462 4.00076 10.7535 4 11.9995C4 13.2887 4.30804 14.5069 4.84511 15.591L7.41593 13.5822Z" fill="#FBBC05"/>
|
||||
<path d="M11.9233 7.09339C13.411 7.09339 14.4152 7.74197 14.9872 8.28454L17.2235 6.07976C15.8498 4.7911 14.0631 4 11.9233 4C8.82445 4 6.14762 5.79522 4.84496 8.40905L7.40678 10.4178C8.04986 8.48906 9.82808 7.09339 11.9233 7.09339Z" fill="#EB4335"/>
|
||||
</svg>
|
||||
</#macro>
|
||||
|
||||
<#-- https://docs.microsoft.com/azure/active-directory/develop/howto-add-branding-in-azure-ad-apps -->
|
||||
<#macro microsoft>
|
||||
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H24V24H0V0Z" fill="white"/>
|
||||
<path d="M5 5H11.6316V11.6316H5V5Z" fill="#F25022"/>
|
||||
<path d="M5 12.3686H11.6316V19.0002H5V12.3686Z" fill="#00A4EF"/>
|
||||
<path d="M12.3684 5H19V11.6316H12.3684V5Z" fill="#7FBA00"/>
|
||||
<path d="M12.3684 12.3686H19V19.0002H12.3684V12.3686Z" fill="#FFB900"/>
|
||||
</svg>
|
||||
</#macro>
|
@ -1,21 +0,0 @@
|
||||
<#import "template.ftl" as layout>
|
||||
<#import "components/button/primary.ftl" as buttonPrimary>
|
||||
|
||||
<@layout.registrationLayout; section>
|
||||
<#if section="header">
|
||||
${msg("confirmLinkIdpTitle")}
|
||||
<#elseif section="form">
|
||||
<form action="${url.loginAction}" class="m-0 space-y-4" method="post">
|
||||
<div>
|
||||
<@buttonPrimary.kw name="submitAction" type="submit" value="updateProfile">
|
||||
${msg("confirmLinkIdpReviewProfile")}
|
||||
</@buttonPrimary.kw>
|
||||
</div>
|
||||
<div>
|
||||
<@buttonPrimary.kw name="submitAction" type="submit" value="linkAccount">
|
||||
${msg("confirmLinkIdpContinue", idpDisplayName)}
|
||||
</@buttonPrimary.kw>
|
||||
</div>
|
||||
</form>
|
||||
</#if>
|
||||
</@layout.registrationLayout>
|
@ -1,42 +0,0 @@
|
||||
<#import "template.ftl" as layout>
|
||||
<#import "components/button/primary.ftl" as buttonPrimary>
|
||||
<#import "components/input/primary.ftl" as inputPrimary>
|
||||
<#import "components/label/username.ftl" as labelUsername>
|
||||
<#import "components/link/secondary.ftl" as linkSecondary>
|
||||
|
||||
<@layout.registrationLayout
|
||||
displayInfo=true
|
||||
displayMessage=!messagesPerField.existsError("username")
|
||||
;
|
||||
section
|
||||
>
|
||||
<#if section="header">
|
||||
${msg("emailForgotTitle")}
|
||||
<#elseif section="form">
|
||||
<form action="${url.loginAction}" class="m-0 space-y-4" method="post">
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete=realm.loginWithEmailAllowed?string("email", "username")
|
||||
autofocus=true
|
||||
invalid=["username"]
|
||||
name="username"
|
||||
type="text"
|
||||
value=(auth?has_content && auth.showUsername())?then(auth.attemptedUsername, '')
|
||||
>
|
||||
<@labelUsername.kw />
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
<div>
|
||||
<@buttonPrimary.kw type="submit">
|
||||
${msg("doSubmit")}
|
||||
</@buttonPrimary.kw>
|
||||
</div>
|
||||
</form>
|
||||
<#elseif section="info">
|
||||
${msg("emailInstruction")}
|
||||
<#elseif section="nav">
|
||||
<@linkSecondary.kw href=url.loginUrl>
|
||||
<span class="text-sm">${kcSanitize(msg("backToLogin"))?no_esc}</span>
|
||||
</@linkSecondary.kw>
|
||||
</#if>
|
||||
</@layout.registrationLayout>
|
@ -1,53 +0,0 @@
|
||||
<#import "template.ftl" as layout>
|
||||
<#import "components/button/primary.ftl" as buttonPrimary>
|
||||
<#import "components/input/primary.ftl" as inputPrimary>
|
||||
|
||||
<@layout.registrationLayout
|
||||
displayMessage=!messagesPerField.existsError("password", "password-confirm")
|
||||
;
|
||||
section
|
||||
>
|
||||
<#if section="header">
|
||||
${msg("updatePasswordTitle")}
|
||||
<#elseif section="form">
|
||||
<form action="${url.loginAction}" class="m-0 space-y-4" method="post">
|
||||
<input
|
||||
autocomplete="username"
|
||||
name="username"
|
||||
type="hidden"
|
||||
value="${username}"
|
||||
>
|
||||
<input autocomplete="current-password" name="password" type="hidden">
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="new-password"
|
||||
autofocus=true
|
||||
invalid=["password", "password-confirm"]
|
||||
message=false
|
||||
name="password-new"
|
||||
type="password"
|
||||
>
|
||||
${msg("passwordNew")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="new-password"
|
||||
invalid=["password-confirm"]
|
||||
name="password-confirm"
|
||||
type="password"
|
||||
>
|
||||
${msg("passwordConfirm")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
|
||||
<#-- TODO isAppInitiatedAction -->
|
||||
|
||||
<div>
|
||||
<@buttonPrimary.kw type="submit">
|
||||
${msg("doSubmit")}
|
||||
</@buttonPrimary.kw>
|
||||
</div>
|
||||
</form>
|
||||
</#if>
|
||||
</@layout.registrationLayout>
|
@ -1,71 +0,0 @@
|
||||
<#import "template.ftl" as layout>
|
||||
<#import "components/button/primary.ftl" as buttonPrimary>
|
||||
<#import "components/input/primary.ftl" as inputPrimary>
|
||||
|
||||
<@layout.registrationLayout
|
||||
displayMessage=!messagesPerField.existsError("email", "firstName", "lastName", "username")
|
||||
;
|
||||
section
|
||||
>
|
||||
<#if section="header">
|
||||
${msg("loginProfileTitle")}
|
||||
<#elseif section="form">
|
||||
<form action="${url.loginAction}" class="m-0 space-y-4" method="post">
|
||||
<#if user.editUsernameAllowed>
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="username"
|
||||
autofocus=true
|
||||
invalid=["username"]
|
||||
name="username"
|
||||
type="text"
|
||||
value=(user.username)!''
|
||||
>
|
||||
${msg("username")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
</#if>
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="email"
|
||||
invalid=["email"]
|
||||
name="email"
|
||||
type="email"
|
||||
value=(user.email)!''
|
||||
>
|
||||
${msg("email")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="given-name"
|
||||
invalid=["firstName"]
|
||||
name="firstName"
|
||||
type="text"
|
||||
value=(user.firstName)!''
|
||||
>
|
||||
${msg("firstName")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="family-name"
|
||||
invalid=["lastName"]
|
||||
name="lastName"
|
||||
type="text"
|
||||
value=(user.lastName)!''
|
||||
>
|
||||
${msg("lastName")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
|
||||
<#-- TODO isAppInitiatedAction -->
|
||||
|
||||
<div>
|
||||
<@buttonPrimary.kw type="submit">
|
||||
${msg("doSubmit")}
|
||||
</@buttonPrimary.kw>
|
||||
</div>
|
||||
</form>
|
||||
</#if>
|
||||
</@layout.registrationLayout>
|
@ -1,72 +0,0 @@
|
||||
<#import "template.ftl" as layout>
|
||||
<@layout.registrationLayout displayInfo=social.displayInfo displayWide=(realm.password && social.providers??); section>
|
||||
<#if section = "header">
|
||||
${msg("doLogIn")}
|
||||
<#elseif section = "form">
|
||||
<div id="kc-form" <#if realm.password && social.providers??>class="${properties.kcContentWrapperClass!}"</#if>>
|
||||
<div id="kc-form-wrapper" <#if realm.password && social.providers??>class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"</#if>>
|
||||
<#if realm.password>
|
||||
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
|
||||
|
||||
<#if usernameEditDisabled??>
|
||||
<input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" disabled />
|
||||
<#else>
|
||||
<input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off" />
|
||||
</#if>
|
||||
</div>
|
||||
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
|
||||
<input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
|
||||
<div id="kc-form-options">
|
||||
<#if realm.rememberMe && !usernameEditDisabled??>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<#if login.rememberMe??>
|
||||
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" checked> ${msg("rememberMe")}
|
||||
<#else>
|
||||
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox"> ${msg("rememberMe")}
|
||||
</#if>
|
||||
</label>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
<div class="${properties.kcFormOptionsWrapperClass!}">
|
||||
<#if realm.resetPasswordAllowed>
|
||||
<span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
|
||||
</#if>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
|
||||
<input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
|
||||
</div>
|
||||
</form>
|
||||
</#if>
|
||||
</div>
|
||||
<#if realm.password && social.providers??>
|
||||
<div id="kc-social-providers" class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}">
|
||||
<div id="kc-social-providers-or">Or</div>
|
||||
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 4>${properties.kcFormSocialAccountDoubleListClass!}</#if>">
|
||||
<#list social.providers as p>
|
||||
<li class="${properties.kcFormSocialAccountListLinkClass!}"><a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId}"> <span>Log In with ${p.displayName}</span></a></li>
|
||||
</#list>
|
||||
</ul>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
<#elseif section = "info" >
|
||||
<#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
|
||||
<div id="kc-registration">
|
||||
<span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
|
||||
</div>
|
||||
</#if>
|
||||
</#if>
|
||||
|
||||
</@layout.registrationLayout>
|
@ -1,101 +0,0 @@
|
||||
<#import "template.ftl" as layout>
|
||||
<#import "components/button/primary.ftl" as buttonPrimary>
|
||||
<#import "components/input/primary.ftl" as inputPrimary>
|
||||
<#import "components/link/secondary.ftl" as linkSecondary>
|
||||
|
||||
<@layout.registrationLayout
|
||||
displayMessage=!messagesPerField.existsError("firstName", "lastName", "email", "username", "password", "password-confirm")
|
||||
;
|
||||
section
|
||||
>
|
||||
<#if section="header">
|
||||
${msg("registerTitle")}
|
||||
<#elseif section="form">
|
||||
<form action="${url.registrationAction}" class="m-0 space-y-4" method="post">
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="given-name"
|
||||
autofocus=true
|
||||
invalid=["firstName"]
|
||||
name="firstName"
|
||||
type="text"
|
||||
value=(register.formData.firstName)!''
|
||||
>
|
||||
${msg("firstName")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="family-name"
|
||||
invalid=["lastName"]
|
||||
name="lastName"
|
||||
type="text"
|
||||
value=(register.formData.lastName)!''
|
||||
>
|
||||
${msg("lastName")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="email"
|
||||
invalid=["email"]
|
||||
name="email"
|
||||
type="email"
|
||||
value=(register.formData.email)!''
|
||||
>
|
||||
${msg("email")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
<#if !realm.registrationEmailAsUsername>
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="username"
|
||||
invalid=["username"]
|
||||
name="username"
|
||||
type="text"
|
||||
value=(register.formData.username)!''
|
||||
>
|
||||
${msg("username")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
</#if>
|
||||
<#if passwordRequired??>
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="new-password"
|
||||
invalid=["password", "password-confirm"]
|
||||
message=false
|
||||
name="password"
|
||||
type="password"
|
||||
>
|
||||
${msg("password")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
<div>
|
||||
<@inputPrimary.kw
|
||||
autocomplete="new-password"
|
||||
invalid=["password-confirm"]
|
||||
name="password-confirm"
|
||||
type="password"
|
||||
>
|
||||
${msg("passwordConfirm")}
|
||||
</@inputPrimary.kw>
|
||||
</div>
|
||||
</#if>
|
||||
<#if recaptchaRequired??>
|
||||
<div>
|
||||
<div class="g-recaptcha" data-sitekey="${recaptchaSiteKey}" data-size="compact"></div>
|
||||
</div>
|
||||
</#if>
|
||||
<div>
|
||||
<@buttonPrimary.kw type="submit">
|
||||
${msg("doRegister")}
|
||||
</@buttonPrimary.kw>
|
||||
</div>
|
||||
</form>
|
||||
<#elseif section="nav">
|
||||
<@linkSecondary.kw href=url.loginUrl>
|
||||
<span class="text-sm">${kcSanitize(msg("backToLogin"))?no_esc}</span>
|
||||
</@linkSecondary.kw>
|
||||
</#if>
|
||||
</@layout.registrationLayout>
|
@ -1,657 +0,0 @@
|
||||
.login-pf body {
|
||||
background-color: #fff;
|
||||
background-size: cover;
|
||||
min-height: 418px;
|
||||
min-width: 760px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-image {
|
||||
margin-top: 36px;
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.header-image img {
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
.welcome-heading {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
min-height: 100%;
|
||||
min-width: 320px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
flex-direction:column;
|
||||
}
|
||||
.login-content .box {
|
||||
width: 448px;
|
||||
border-radius: 8px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
||||
margin: auto;
|
||||
}
|
||||
.login-content .box .box-container {
|
||||
width:100%;
|
||||
padding-left: 32px;
|
||||
}
|
||||
.login-content .box .logo {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.login-content .box .application-name {
|
||||
width: 270px;
|
||||
font-family: Muli;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 0.83;
|
||||
letter-spacing: -0.4px;
|
||||
text-align: left;
|
||||
color: #0055B8;
|
||||
margin-left: 32px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.login-content .box .form {
|
||||
margin-left: 32px;
|
||||
margin-top: 55px;
|
||||
margin-bottom: -55px;
|
||||
}
|
||||
.login-content .box .login-field {
|
||||
width: 320px;
|
||||
height: 24px;
|
||||
font-family: Muli;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: -0.4px;
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
outline: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
.login-content .box input[type="text"]:focus, .login-content .box input[type="password"]:focus {
|
||||
border-bottom: 2px solid #0055B8;
|
||||
}
|
||||
.login-content .box input[type="text"]:-webkit-autofill, .login-content .box input[type="password"]:-webkit-autofill
|
||||
{
|
||||
box-shadow: 0 0 0px 1000px white inset;
|
||||
}
|
||||
.login-content .box .submit{
|
||||
width: 320px;
|
||||
height: 36px;
|
||||
border-radius: 2px;
|
||||
background-color: #00754a;
|
||||
font-family: Muli;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
border-style: none;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.login-content .box .visibility {
|
||||
position: relative;
|
||||
left: 296px;
|
||||
top: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
opacity: 0.54;
|
||||
border: none;
|
||||
}
|
||||
.login-content .box .copyright {
|
||||
min-width: 320px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
opacity: .54;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.text-center-align {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
error {
|
||||
background-color: #ffffff;
|
||||
border-color: #cc0000;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
#kc-locale ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
list-style: none;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
min-width: 100px;
|
||||
padding: 2px 0;
|
||||
border: solid 1px #bbb;
|
||||
}
|
||||
|
||||
#kc-locale:hover ul {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#kc-locale ul li a {
|
||||
display: block;
|
||||
padding: 5px 14px;
|
||||
color: #000 !important;
|
||||
text-decoration: none;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#kc-locale ul li a:hover {
|
||||
color: #4d5258;
|
||||
background-color: #d4edfa;
|
||||
}
|
||||
|
||||
#kc-locale-dropdown a {
|
||||
color: #4d5258;
|
||||
background: 0 0;
|
||||
padding: 0 15px 0 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#kc-locale-dropdown a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a#kc-current-locale-link {
|
||||
display: block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#kc-page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* a#kc-current-locale-link:hover {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
} */
|
||||
|
||||
a#kc-current-locale-link::after {
|
||||
content: "\2c5";
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.login-pf .container {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.login-pf a:hover {
|
||||
color: #0099d3;
|
||||
}
|
||||
|
||||
#kc-logo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#kc-logo-wrapper {
|
||||
background-image: url(../img/keycloak-logo-2.png);
|
||||
background-repeat: no-repeat;
|
||||
height: 63px;
|
||||
width: 300px;
|
||||
margin: 62px auto 0;
|
||||
}
|
||||
|
||||
div.kc-logo-text {
|
||||
background-image: url(../img/keycloak-logo-text.png);
|
||||
background-repeat: no-repeat;
|
||||
height: 63px;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.kc-logo-text span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#kc-header {
|
||||
color: #000000;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#kc-header-wrapper {
|
||||
font-size: 29px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
line-height: 1.2em;
|
||||
padding: 62px 10px 20px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#kc-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* #kc-content-wrapper {
|
||||
overflow-y: hidden;
|
||||
} */
|
||||
|
||||
#kc-info {
|
||||
padding-bottom: 200px;
|
||||
margin-bottom: -200px;
|
||||
}
|
||||
|
||||
#kc-info-wrapper {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#kc-social-providers-or {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
#kc-form-login label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#kc-form-login .form-control {
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
border: 1px solid #bdbdbd;
|
||||
}
|
||||
|
||||
#kc-form-login a {
|
||||
color: #3492ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#kc-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#kc-form-wrapper {
|
||||
border-right: none;
|
||||
margin: 0 auto;
|
||||
padding-right: 0;
|
||||
min-width: 420px;
|
||||
}
|
||||
|
||||
#kc-form-options span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#kc-form-options .checkbox {
|
||||
margin-top: 0;
|
||||
color: #72767b;
|
||||
}
|
||||
|
||||
#kc-terms-text {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#kc-registration {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* TOTP */
|
||||
|
||||
ol#kc-totp-settings {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ul#kc-totp-supported-apps {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#kc-totp-secret-qr-code {
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
#kc-totp-secret-key {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* OAuth */
|
||||
|
||||
#kc-oauth h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#kc-oauth ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#kc-oauth ul li {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 12px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
#kc-oauth ul li:first-of-type {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
#kc-oauth .kc-role {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
#kc-code textarea {
|
||||
width: 100%;
|
||||
height: 8em;
|
||||
}
|
||||
|
||||
/* Social */
|
||||
|
||||
#kc-social-providers {
|
||||
padding-left: 0;
|
||||
margin: 0 auto;
|
||||
border: 0;
|
||||
min-width: 420px;
|
||||
}
|
||||
|
||||
#kc-social-providers ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#kc-social-providers li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#kc-social-providers li:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.zocial,
|
||||
a.zocial {
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
text-shadow: none;
|
||||
border: 0;
|
||||
background: #f5f5f5;
|
||||
color: #72767b;
|
||||
border-radius: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
.zocial:before {
|
||||
border-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.zocial span:before {
|
||||
padding: 7px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.zocial.facebook,
|
||||
.zocial.github,
|
||||
.zocial.google,
|
||||
.zocial.microsoft,
|
||||
.zocial.stackoverflow,
|
||||
.zocial.linkedin,
|
||||
.zocial.twitter {
|
||||
background-image: none;
|
||||
border: 0;
|
||||
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Copy of zocial windows classes to be used for microsoft's social provider button */
|
||||
.zocial.microsoft:before {
|
||||
content: "\f15d";
|
||||
}
|
||||
.zocial.stackoverflow:before {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#kc-container-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-pf .container {
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
#kc-locale {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.login-pf body {
|
||||
background: white;
|
||||
}
|
||||
|
||||
#kc-header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
float: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#kc-header-wrapper {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 20px 60px 0 0;
|
||||
color: #72767b;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
div.kc-logo-text {
|
||||
margin: 0;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#kc-form {
|
||||
float: none;
|
||||
}
|
||||
|
||||
#kc-info-wrapper {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
padding-left: 0px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#kc-social-providers li {
|
||||
display: block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.login-pf .container {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
#kc-locale {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
text-align: right;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#kc-logo-wrapper {
|
||||
background-size: 100px 21px;
|
||||
height: 21px;
|
||||
width: 100px;
|
||||
margin: 20px 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 646px) {
|
||||
#kc-container-wrapper {
|
||||
bottom: 12%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 645px) {
|
||||
#kc-container-wrapper {
|
||||
padding-top: 50px;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-pf form.form-actions .btn {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#kc-form-buttons {
|
||||
margin-top: 22px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
#kc-form-buttons > input {
|
||||
background: #0067dd;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 11px 10px;
|
||||
max-height: 42px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#kc-form-buttons > input:hover {
|
||||
background: #025bc1;
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-brand {
|
||||
margin-top: 20px;
|
||||
max-width: 360px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.card-pf {
|
||||
box-shadow: none !important;
|
||||
background: none !important;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
max-width: 500px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
/*tablet*/
|
||||
@media (max-width: 840px) {
|
||||
.login-pf-page .card-pf {
|
||||
max-width: none;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
padding: 20px 20px 30px 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.login-pf-page .card-pf {
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
.card-pf.login-pf-accounts {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-signup {
|
||||
font-size: 15px;
|
||||
color: #72767b;
|
||||
}
|
||||
#kc-content-wrapper .row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#kc-content-wrapper .alert {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#kc-content-wrapper .pficon {
|
||||
left: 36% !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.login-pf-page .login-pf-social-section:first-of-type {
|
||||
padding-right: 39px;
|
||||
border-right: 1px solid #d1d1d1;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.login-pf-page .login-pf-social-section:last-of-type {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.login-pf-page .login-pf-social-section .login-pf-social-link:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-social-link {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.login-pf-page .login-pf-social-link a {
|
||||
background: #0067dd;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 6px 8px;
|
||||
max-height: 42px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-pf-social-link > a:hover {
|
||||
background: #025bc1 !important;
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-social-link a > span {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.login-pf-page.login-pf-page-accounts {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.login-pf-page .btn-primary {
|
||||
margin-top: 0;
|
||||
}
|
7
login.keywind/resources/dist/index.js
vendored
7
login.keywind/resources/dist/index.js.map
vendored
@ -1,39 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1266px" height="881px" viewBox="0 0 1266 881" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 63.1 (101010) - https://sketch.com -->
|
||||
<title>157422A6-29B2-4F17-81E3-A7274C0B39D1</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs>
|
||||
<rect id="path-1" x="0" y="0" width="1266" height="900"></rect>
|
||||
<linearGradient x1="39.5825108%" y1="4.41267968%" x2="2.76867691%" y2="43.9444809%" id="linearGradient-3">
|
||||
<stop stop-color="#FB9729" offset="0%"></stop>
|
||||
<stop stop-color="#FF6B00" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="39.5825108%" y1="4.40863302%" x2="2.76867691%" y2="43.9439434%" id="linearGradient-4">
|
||||
<stop stop-color="#FB9729" offset="0%"></stop>
|
||||
<stop stop-color="#FF6B00" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="1.-🎨-Styles-/-Atoms-/-Molecules-/-Compounds" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="08.6-Various-(Light)" transform="translate(-66.000000, -304.000000)">
|
||||
<g id="3.-Layout/Background/Wallpaper-BG-generic" transform="translate(66.000000, 303.000000)">
|
||||
<g id="standards/bgWallpaper-ColCircles" transform="translate(0.000000, 1.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="Mask"></g>
|
||||
<g id="interectionsShapes" mask="url(#mask-2)">
|
||||
<g transform="translate(-5164.225000, -2427.539062)" id="Petals-outlines">
|
||||
<g transform="translate(0.528510, 0.528353)">
|
||||
<path d="M5395.88845,2869.83099 C5918.2359,2869.86491 6341.65466,2446.28359 6341.62072,1923.73563 C6341.58679,1401.18768 5918.113,977.551377 5395.76556,977.517463 C5217.74319,977.505905 4898.84505,977.4852 4439.07113,977.455349 C4446.36817,1437.9524 4450.02222,1753.33822 4450.03328,1923.61282 C4450.06722,2446.16077 4873.541,2869.79708 5395.88845,2869.83099 Z" id="Petal-Blue" stroke="#0055B8" stroke-width="4.39453125" transform="translate(5390.345924, 1923.643170) rotate(-193.000000) translate(-5390.345924, -1923.643170) "></path>
|
||||
<path d="M5317.34041,2884.20406 C5770.80887,2884.26634 6138.36717,2516.51645 6138.30487,2062.81168 C6138.24256,1609.10691 5770.58323,1241.25604 5317.11477,1241.19376 C5162.5672,1241.17253 4885.72034,1241.1345 4486.57419,1241.07968 C4492.93797,1640.90891 4496.13001,1914.7444 4496.15031,2062.58614 C4496.21262,2516.2909 4863.87195,2884.14178 5317.34041,2884.20406 Z" id="Petal-Green" stroke="#8BC34A" stroke-width="8.7890625" transform="translate(5312.439529, 2062.641872) rotate(-236.000000) translate(-5312.439529, -2062.641872) "></path>
|
||||
<path d="M3934.48555,6680.83263 C5460.29007,6680.60662 6697.38225,5443.47052 6697.60826,3917.61181 C6697.83428,2391.7531 5461.10856,1154.98344 3935.30404,1155.20945 C3415.2913,1155.28648 2483.77296,1155.42446 1140.74902,1155.6234 C1161.77754,2500.28672 1172.25498,3421.22235 1172.18133,3918.43027 C1171.95531,5444.28898 2408.68104,6681.05864 3934.48555,6680.83263 Z" id="Petal-thin-orange" stroke="url(#linearGradient-3)" stroke-width="1.7578125" transform="translate(3919.178643, 3918.021040) rotate(-135.000000) translate(-3919.178643, -3918.021040) "></path>
|
||||
<path d="M5910.63741,3300.72163 C6249.47013,3300.76748 6524.11115,3026.0846 6524.0653,2687.20024 C6524.01944,2348.31588 6249.30408,2073.55865 5910.47135,2073.5128 C5794.99304,2073.49717 5588.1324,2073.46918 5289.88944,2073.42881 C5294.64385,2372.07207 5297.02852,2576.60719 5297.04346,2687.03419 C5297.08932,3025.91855 5571.80469,3300.67577 5910.63741,3300.72163 Z" id="Petal-orange" stroke="url(#linearGradient-4)" stroke-width="20.2148438" transform="translate(5906.977367, 2687.075220) rotate(-57.000000) translate(-5906.977367, -2687.075220) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 627 B |
Before Width: | Height: | Size: 513 B |
Before Width: | Height: | Size: 343 B |
Before Width: | Height: | Size: 678 B |
Before Width: | Height: | Size: 410 B |
Before Width: | Height: | Size: 513 B |
Before Width: | Height: | Size: 646 B |
Before Width: | Height: | Size: 80 KiB |
Before Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 8.3 KiB |
@ -1,70 +0,0 @@
|
||||
<#import "components/document.ftl" as document>
|
||||
<#import "components/layout/alerts.ftl" as alerts>
|
||||
<#import "components/layout/another-way.ftl" as anotherWay>
|
||||
<#import "components/layout/card.ftl" as card>
|
||||
<#import "components/layout/card-footer.ftl" as cardFooter>
|
||||
<#import "components/layout/card-header.ftl" as cardHeader>
|
||||
<#import "components/layout/card-main.ftl" as cardMain>
|
||||
<#import "components/layout/container.ftl" as container>
|
||||
<#import "components/layout/locales.ftl" as locales>
|
||||
<#import "components/layout/nav.ftl" as nav>
|
||||
<#import "components/layout/required-fields.ftl" as requiredFields>
|
||||
<#import "components/layout/title.ftl" as title>
|
||||
<#import "components/layout/subtitle.ftl" as subtitle>
|
||||
<#import "components/layout/username.ftl" as username>
|
||||
|
||||
<#macro
|
||||
registrationLayout
|
||||
displayInfo=false
|
||||
displayMessage=true
|
||||
displayRequiredFields=false
|
||||
showAnotherWayIfPresent=true
|
||||
>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<@document.kw />
|
||||
</head>
|
||||
|
||||
<body class="login-content" style="background-image: url("${url.resourcesPath}/img/background.svg");">
|
||||
<@container.kw>
|
||||
<@card.kw>
|
||||
<@cardHeader.kw>
|
||||
<@title.kw />
|
||||
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
|
||||
<@subtitle.kw>
|
||||
<#nested "header">
|
||||
</@subtitle.kw>
|
||||
<#else>
|
||||
<@username.kw />
|
||||
</#if>
|
||||
</@cardHeader.kw>
|
||||
<@cardMain.kw>
|
||||
<#if displayMessage && message?has_content && (message.type != "warning" || !isAppInitiatedAction??)>
|
||||
<@alerts.kw />
|
||||
</#if>
|
||||
<#nested "form">
|
||||
<#if displayRequiredFields>
|
||||
<@requiredFields.kw />
|
||||
</#if>
|
||||
<#if auth?has_content && auth.showTryAnotherWayLink() && showAnotherWayIfPresent>
|
||||
<@anotherWay.kw />
|
||||
</#if>
|
||||
</@cardMain.kw>
|
||||
<#if displayInfo>
|
||||
<@cardFooter.kw>
|
||||
<#nested "info">
|
||||
</@cardFooter.kw>
|
||||
</#if>
|
||||
</@card.kw>
|
||||
<@nav.kw>
|
||||
<#nested "nav">
|
||||
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
|
||||
<@locales.kw />
|
||||
</#if>
|
||||
</@nav.kw>
|
||||
</@container.kw>
|
||||
</body>
|
||||
</html>
|
||||
</#macro>
|
||||
|
@ -1,4 +0,0 @@
|
||||
parent=keywind
|
||||
|
||||
styles=css/index.css
|
||||
scripts=dist/index.js
|