Styles for Profile page

account.css

/* Screen sizes */

/* // Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

*/

html {
	height: 100%;
}

body {
	background-color: #fff;
	margin: 0;
	padding: 0;
	height: 100%;
	color: #222222;
	font-family: "Avenir Next" !important;
}
	
/* Header */

header .logo {
	height: 60px;
	width: 130px;
}

header nav ul li {
	display: inline
}

header .nav-btn {
	border: 1px solid #162457;
	border-radius: 6px;
	box-shadow: 1px 1px 6px 0 rgba(0,0,0,0.25);
	padding: 0.875rem;
	color: #162457;
	text-decoration: none;
	font-size: 13px;
	line-height: 18px;
	font-weight: 500px;
}

header .nav-btn:hover {
	background-color: #162457;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

@media (min-width: 768px) {
    .account-container {
        max-width: 1056px;
        margin-top: 40px;
    }
}

/* Sidebar */

div.sidebar {
	padding-right: 32px;
}

.sidebar a {
	display: block;
	font-size: 16px;
	line-height: 22px;
	padding: 10px 20px;
	margin-bottom: 0.25rem;
	color: #222222;
}

.sidebar a:hover {
	border-radius: 6px;
	background-color: #E7EDEF;
	color: #222222;
	text-decoration: none;
}

.sidebar .active {
	border-radius: 6px;
	background-color: #0017A9;
}

.sidebar .active a {
	color: #fff
}

.sidebar .active a:hover {
	border-radius: 6px;
	background-color: #0017A9;
	color: #fff;
}

.sidebar h2 {
	font-size: 20px;
	font-weight: 500;
	line-height: 32px;
}

div.content-area {
    padding: 0px 30px;
}

.content-area h2 {
	font-size: 18px;
	font-weight: 500;
    line-height: 32px;
    margin-bottom: 2rem;
}

.alert {
    margin-top: 30px;
    margin-bottom: 0;
}

.feedback-aligner .alert {
    background-position: 1.27273em center;
    background-repeat: no-repeat;
    border-radius: 2px;
    border-width: 1px;
    color: #4D5258;
    display: inline-block;
    font-size: 1.1em;
    line-height: 1.4em;
    margin: 0;
    padding: 0.909091em 3.63636em;
    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;
}

@media (min-width: 768px) {
    .content-form {
        width: 420px;
    }
}

.content-form input {
	border: none;
	width: 100%;
	border-radius: 6px;
	background-color: #ECF7FF;
	font-size: 16px;
	line-height: 32px;
	padding: 0.5rem 1.5rem;
	margin-bottom: 2rem;
}

.content-form input::placeholder {
	color: #ABB4BD;
}

.content-form input:focus {
	background-color: #fff;
    border: 2px solid #175DFD;
    color: #222222;
    outline: none;
}

.form-btn {
	border-radius: 6px;
	box-shadow: 1px 1px 6px 0 rgba(0,0,0,0.25);;
	text-align: center;
	text-shadow: 2px 2px 4px 0 rgba(0,0,0,0.5);
    padding: 11px 34px;
    background-color: #fff;
    width: 100%;
    border: 1px solid #175DFD;
    color: #175DFD;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

@media (min-width: 768px) {
    .form-btn {
        width: unset;
        border: 1px solid #CCCCCC;
        color: #162457;
        font-size: 14px;
        line-height: 19px
    }
}

.form-btn:hover {
	background-color: #162457;
	color: #fff;
}

/* Linked Account page */

.linked-accounts {
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background-color: #F7F9FA;
}

.linked-accounts li {
    padding: 1.5rem 0.8rem 0rem 0.8rem;
    border-bottom: 1px solid #E0E0E0;
}

@media (min-width: 567px) {
    .linked-accounts li {
        padding: 1.5rem 2rem 0rem 2rem;
    }
}

.linked-accounts li:last-child {
    border-bottom: none;
}

.linked-accounts img {
    height: 36px;
    width: 46px;
    margin-bottom: 24px;
}

.linked-accounts .info {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    padding-left: 16px;
}

.linked-accounts .user {
    color: #ABB4BD;
}

.linked-accounts button {
    color: #175DFD;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-align: right;
    text-shadow: 2px 2px 4px 0 rgba(0,0,0,0.5);
}

/* Sessions */

table.sessions {
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    border-collapse: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

.sessions thead {
    background: transparent;
    color: #8E9BA1;
}

.sessions tbody tr {
    border-top: 1px solid #E0E0E0;
    border-collapse: collapse;
}

table.sessions tr td {
    padding: 8px 16px;
}

.nav-wrapper {
    background-color: #EFEFEF;
    padding: 20px 30px;
}
.nav-div {
    background-color: #FFF;
    border-radius: 6px;
}

.nav-div div {
    padding: 6px 18px;
}

.nav-div li {
    padding: 6px 18px;
    border-top: 1px solid #EFEFEF;
}

.nav-div a {
    color: #162457;
    font-size: 18px;
    font-weight: 600;
    line-height: 32px;
    text-decoration: none;
}

.nav-div a:hover {
    text-decoration: none;
}

.nav-div button {
    background: center no-repeat url('../img/down.svg');
    color: #162457;
    border: 0;
    height: 32px;
    width: 32px;
    float: right;
}

.nav-div button:focus {
    outline: none
}

.nav-options-wrapper {
    padding: 0px 30px;
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    z-index: 2;
    display: none;
}

.body-overlay { 
    display: none;/* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

/* Utilities */

.bg-white {
    background-color: #fff;
}

/* ol {
    padding-left: 40px;
}

ol li {
    font-size: 13px;
    margin-bottom: 10px;
    position: relative;
}

ol li img {
    margin-top: 15px;
    margin-bottom: 5px;
    border: 1px solid #eee;
}

hr + .form-horizontal {
    border: none;
    padding-top: 0;
}

.kc-dropdown{
    position: relative;
}
.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{
    content: "\2c5";
    margin-left: 4px;
}
.kc-dropdown:hover > a{
    background-color: rgba(0,0,0,0.2);
}
.kc-dropdown ul li a{
    padding: 1px 11px;
    font-size: 12px;
    color: #000 !important;
    border: 1px solid #fff;
    text-decoration: none;
    display:block;
    line-height: 20px;
}
.kc-dropdown ul li a:hover{
    color: #4d5258;
    background-color: #d4edfa;
    border-color: #b3d3e7;
}
.kc-dropdown ul{
    position: absolute;
    z-index: 2000;
    list-style:none;
    display:none;
    padding: 5px 0px;
    margin: 0px;
    background-color: #fff !important;
    border: 1px solid #b6b6b6;
    border-radius: 1px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    min-width: 100px;
}
.kc-dropdown:hover ul{
    display:block;
}


#kc-totp-secret-key {
    border: 1px solid #eee;
    font-size: 16px;
    padding: 10px;
    margin: 50px 0;
} */

account.ftl

<#import "template.ftl" as layout>
<@layout.mainLayout active='account' bodyClass='user'; section>

  <div>
    <h2>Your profile settings</h2>
  </div>

  <form action="${url.accountUrl}" class="content-form" method="post">
    <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">

    <div class="${messagesPerField.printIfExists('firstName','has-error')}">
      <div>
        <input placeholder="First name" type="text" id="firstName" name="firstName" value="${(account.firstName!'')}"/>
      </div>
    </div>

    <div class="${messagesPerField.printIfExists('lastName','has-error')}">
      <div>
        <input placeholder="Last name" type="text" id="lastName" name="lastName" value="${(account.lastName!'')}"/>
      </div>
    </div>

    <div class="${messagesPerField.printIfExists('username','has-error')}">
      <input type="text" class="form-control" id="username" name="username" <#if !realm.editUsernameAllowed>disabled="disabled"</#if> value="${(account.username!'')}"/>
    </div>

    <div class="${messagesPerField.printIfExists('email','has-error')}">
      <div>
        <input placeholder="emailname@address.com" type="text" id="email" name="email" autofocus value="${(account.email!'')}"/>
      </div>
    </div>

    <div class="mt-2">
      <button type="submit" class="form-btn" name="submitAction" value="Save">Save changes</button>
    </div>
  </form>

</@layout.mainLayout>

template.ftl

<#macro mainLayout active bodyClass>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>${msg("accountManagementTitle")} - CTO.ai</title>
    <link rel="icon" href="${url.resourcesPath}/img/favicon.png">
    <#if properties.styles?has_content>
        <#list properties.styles?split(' ') as style>
            <link href="${url.resourcesPath}/${style}" rel="stylesheet" />
        </#list>
    </#if>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <#if properties.scripts?has_content>
        <#list properties.scripts?split(' ') as script>
            <script type="text/javascript" src="${url.resourcesPath}/${script}"></script>
        </#list>
    </#if>
</head>
<body class="admin-console user ${bodyClass}">
  <header class="px-4 border-bottom">
    <nav class="mt-2 ml-4" role="navigation">
      <a href="https://cto.ai">
        <img class="logo" src="${url.resourcesPath}/img/cto-logo.svg" />
      </a>
      <ul class="list-unstyled d-inline-block float-right mr-4 mt-4">
        <#--  <#if referrer?has_content && referrer.url?has_content><li class="nav-btn"><a href="${referrer.url}" id="referrer">${msg("backTo",referrer.name)}</a></li></#if>  -->
        <li><a class="nav-btn" href="${url.logoutUrl}">${msg("doSignOut")}</a></li>
      </ul>
    </nav>
  </header>

  <div class="h-100 account-container mx-auto">
    <div class="row mx-auto">
      <div class="col-12 col-md-3 p-0 pl-md-5">
        <div class="nav-wrapper d-block d-md-none">
          <div id="nav-selector" class="nav-div">
            <div class="row">
              <#if active=='account'><a class="col-10 col-sm-11" href="${url.accountUrl}">Profile</a></#if>
              <#if active=='password'><a class="col-10 col-sm-11" href="${url.passwordUrl}">Password</a></#if>
              <#if active=='social'><a class="col-10 col-sm-11" href="${url.socialUrl}">Linked Accounts</a></#if>
              <#if active=='sessions'><a class="col-10 col-sm-11" href="${url.sessionsUrl}">Sessions</a></#if>
              <button id='dd-button' class="ml-3"></button>
            </div>
          </div>
        </div>
        <div class="sidebar d-none d-md-block">
          <h2>Account</h2>
          <ul class="list-unstyled mt-4">
            <li class="<#if active=='account'>active</#if>"><a href="${url.accountUrl}">Profile</a></li>
            <#if features.passwordUpdateSupported><li class="<#if active=='password'>active</#if>"><a href="${url.passwordUrl}">Password</a></li></#if>
            <#if features.identityFederation><li class="<#if active=='social'>active</#if>"><a href="${url.socialUrl}">Linked Accounts</a></li></#if>
            <li class="<#if active=='sessions'>active</#if>"><a href="${url.sessionsUrl}">Sessions</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-9 pt-5 pt-md-0 content-area">
        <#if message?has_content>
          <div class="alert alert-${message.type}">
            ${kcSanitize(message.summary)?no_esc}
          </div>
        </#if>

        <#nested "content">
      </div>
      <div class="body-overlay" id="overlay">
        <div id="nav-options" class="nav-options-wrapper">
          <div class="nav-div">
            <ul class="list-unstyled">
              <a href="${url.accountUrl}"><li>Profile<button id='dd-button'></button></li></a>
              <a href="${url.passwordUrl}"><li>Password</li></a>
              <a href="${url.socialUrl}"><li>Linked Accounts</li></a>
              <a href="${url.sessionsUrl}"><li>Sessions</li></a>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
  <script type="text/javascript">
    var navOptionsDiv = document.getElementById('nav-options');
    var overlay = document.getElementById('overlay')
    var navSelectorDiv = document.getElementById('nav-selector');
    var button = document.getElementById('dd-button');
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == overlay) {
        overlay.style.display = 'none';
        navSelectorDiv.style.display = 'block';
      }
    }
    button.onclick = function() {
        if (navOptionsDiv.style.display === 'none' || navOptionsDiv.style.display === '' ) {
          // hide nav selector
          navSelectorDiv.style.display = 'none';

          // show dropdown
          navOptionsDiv.style.display = 'block';
          overlay.style.display = 'block';
        }
        else {
          // hide dropdown
          navOptionsDiv.style.display = 'none';
          overlay.style.display = 'none';
        }
    };
  </script>
</html>
</#macro>