Skip to content
Permalink
Browse files

Made theme configurable with CSS variables

Email template will need to be done in the file self
  • Loading branch information...
Miggets7 committed Nov 6, 2019
1 parent 62bec47 commit 1e968c163e9153d363da80c21e7b163f38c328ee
@@ -42,12 +42,12 @@

<div class="col s12 center-align">
<button type="submit"
class="btn waves-effect waves-light green darken-1"
class="btn waves-effect waves-light"
name="submitAction" value="Save">${msg("doSave")}
<i class="material-icons right">send</i>
</button>
<button type="submit"
class="btn waves-effect waves-light green darken-1"
class="btn waves-effect waves-light"
name="submitAction" value="Cancel" formnovalidate>${msg("doCancel")}
<i class="material-icons right">cancel</i>
</button>
@@ -82,7 +82,7 @@

<td>
<#if (application.client.consentRequired && application.claimsGranted?has_content) || application.additionalGrants?has_content>
<button type="submit" class="btn waves-effect waves-light green darken-1" id='revoke-${application.client.clientId}' name="clientId" value="${application.client.id}">${msg("revoke")}</button>
<button type="submit" class="btn waves-effect waves-light" id='revoke-${application.client.clientId}' name="clientId" value="${application.client.id}">${msg("revoke")}</button>
</#if>
</td>
</tr>
@@ -35,7 +35,7 @@
</div>

<div class="col s12 center-align">
<button class="btn waves-effect waves-light green darken-1" type="submit" name="login"
<button class="btn waves-effect waves-light" type="submit" name="login"
value="Save">${msg("doSave")}
<i class="material-icons right">send</i>
</button>
@@ -1,7 +1,15 @@
:root {
--app-primary-color: #43A047;
--app-secondary-color: #C1D72E;
--app-background-color: #FFFFFF;
--input-background-color: #FFFFFF;
}

html, body {
margin: 0;
padding: 0;
height: 100vh;
background-color: var(--app-background-color);
}

#outer-wrapper {
@@ -99,4 +107,28 @@ header, main, footer {
header, main, footer {
padding-left: 0;
}
}

.input-field >label {
color: var(--app-primary-color);
}

.input-field > input {
background-color: var(--input-background-color) !important;
border-bottom: 1px solid var(--app-primary-color) !important;
-webkit-box-shadow: 0 1px 0 0 var(--app-primary-color) !important;
box-shadow: 0 1px 0 0 var(--app-primary-color) !important;
}

.btn {
background-color: var(--app-primary-color) !important;
}

[type="checkbox"]:checked + span:not(.lever):before {
border-right: 2px solid var(--app-primary-color) !important;
border-bottom: 2px solid var(--app-primary-color) !important;
}

a.top-nav.sidenav-trigger {
color: var(--app-primary-color) !important;
}
@@ -39,12 +39,7 @@
<li class="<#if active=='social'>active</#if>"><a href="${url.socialUrl}">${msg("federatedIdentity")}</a></li>
</#if>
<li class="<#if active=='sessions'>active</#if>"><a href="${url.sessionsUrl}">${msg("sessions")}</a></li>
<li class="<#if active=='applications'>active</#if>"><a
href="${url.applicationsUrl}">${msg("applications")}</a></li>
<#if features.log>
<li class="<#if active=='log'>active</#if>"><a href="${url.logUrl}">${msg("log")}</a></li></#if>
</ul>
<a href="#" data-target="menu" class="top-nav sidenav-trigger full hide-on-large-only green-text darken-3"><i class="material-icons">menu</i></a>
</header>

<main>
@@ -54,12 +54,12 @@

<div class="col s12 center-align">
<button type="submit"
class="btn waves-effect waves-light green darken-1"
class="btn waves-effect waves-light"
name="submitAction" value="Save">${msg("doSave")}
<i class="material-icons right">send</i>
</button>
<button type="submit"
class="btn waves-effect waves-light green darken-1"
class="btn waves-effect waves-light"
name="submitAction" value="Cancel" formnovalidate>${msg("doCancel")}
<i class="material-icons right">cancel</i>
</button>
@@ -8,13 +8,13 @@
<form id="kc-reset-password-form" action="${url.loginAction}" method="post">
<div class="row">
<div class="input-field col s12">
<input type="text" id="username" name="username" autofocus/>
<input type="text" id="username" name="username" autofocus required class="validate"/>
<label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
</div>
</div>

<div class="col s12 center-align">
<button class="btn waves-effect waves-light green darken-1" type="submit" name="login">${msg("doSubmit")}
<button class="btn waves-effect waves-light" type="submit" name="login">${msg("doSubmit")}
<i class="material-icons right">send</i>
</button>
</div>
@@ -23,7 +23,7 @@
autocapitalize="off"
required
class="validate"
name="username" value="${(login.username!'')}" type="text" autofocus/>
name="username" value="${(login.username!'')}" type="text"/>
</#if>
<label for="username"><#if !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
</div>
@@ -51,7 +51,7 @@
</div>

<div class="col s12 center-align">
<button class="btn waves-effect waves-light green darken-1" type="submit" name="login">${msg("doLogIn")}
<button class="btn waves-effect waves-light" type="submit" name="login">${msg("doLogIn")}
<i class="material-icons right">send</i>
</button>
</div>
@@ -0,0 +1,3 @@
backToLogin=Back to login
applicationName=OpenRemote
logoUrl=https://openremote.io
@@ -59,7 +59,7 @@
</div>

<div class="col s12 center-align">
<button class="btn waves-effect waves-light green darken-1" type="submit" name="register">${msg("doRegister")}
<button class="btn waves-effect waves-light" type="submit" name="register">${msg("doRegister")}
<i class="material-icons right">send</i>
</button>
</div>
@@ -1,7 +1,15 @@
:root {
--app-primary-color: #43A047;
--app-secondary-color: #C1D72E;
--app-background-color: #FFFFFF;
--input-background-color: #FFFFFF;
}

html, body {
margin: 0;
padding: 0;
height: 100vh;
background-color: var(--app-background-color);
}

#outer-wrapper {
@@ -87,4 +95,24 @@ i.material-icons {

/* Support for IE. */
font-feature-settings: 'liga';
}

.input-field >label {
color: var(--app-primary-color);
}

.input-field > input {
background-color: var(--input-background-color) !important;
border-bottom: 1px solid var(--app-primary-color) !important;
-webkit-box-shadow: 0 1px 0 0 var(--app-primary-color) !important;
box-shadow: 0 1px 0 0 var(--app-primary-color) !important;
}

.btn {
background-color: var(--app-primary-color) !important;
}

[type="checkbox"]:checked + span:not(.lever):before {
border-right: 2px solid var(--app-primary-color) !important;
border-bottom: 2px solid var(--app-primary-color) !important;
}
@@ -2,7 +2,7 @@
<!DOCTYPE html>
<html>
<head>
<title>OpenRemote Login</title>
<title>${msg("applicationName")}</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
@@ -42,7 +42,7 @@
</a>
<div class="left-align">
<h5 id="header"><#nested "header"></h5><br>
<p id="sub-header">OpenRemote Login</p>
<p id="sub-header">${msg("applicationName")}</p>
</div>
</div>
</div>

0 comments on commit 1e968c1

Please sign in to comment.
You can’t perform that action at this time.