diff --git a/META-INF/keycloak-themes.json b/META-INF/keycloak-themes.json index 2465c454f..ba3301334 100644 --- a/META-INF/keycloak-themes.json +++ b/META-INF/keycloak-themes.json @@ -2,7 +2,7 @@ "themes": [ { "name": "steedos", - "types": ["login"] + "types": ["account", "admin", "email", "login","welcome"] } ] } diff --git a/steedos-theme.jar b/steedos-theme.jar index 891de41ab..00a701800 100644 Binary files a/steedos-theme.jar and b/steedos-theme.jar differ diff --git a/theme/keywind/account/resources/css/account.css b/theme/keywind/account/resources/css/account.css new file mode 100644 index 000000000..3878e43ac --- /dev/null +++ b/theme/keywind/account/resources/css/account.css @@ -0,0 +1,277 @@ +html { + height: 100%; +} + +body { + background-color: #F9F9F9; + margin: 0; + padding: 0; + height: 100%; +} + +header .navbar { + margin-bottom: 0; + min-height: inherit; +} + +.header .container { + position: relative; +} + +.navbar-title { + background-image: url('../img/logo.png'); + height: 25px; + background-repeat: no-repeat; + width: 123px; + margin: 3px 10px 5px; + text-indent: -99999px; +} + +.navbar-pf .navbar-utility { + right: 20px; + top: -34px; + font-size: 12px; +} + +.navbar-pf .navbar-utility > li > a { + color: #fff !important; + padding-bottom: 12px; + padding-top: 11px; + border-left: medium none; +} + +.container { + height: 100%; +} + +.content-area { + background-color: #fff; + border-color: #CECECE; + border-style: solid; + border-width: 0 1px; + height: 100%; + padding: 0 30px; +} + +.margin-bottom { + margin-bottom: 10px; +} + +/* Sidebar */ + +.bs-sidebar { + background-color: #f9f9f9; + padding-top: 44px; + padding-right: 0; + padding-left: 0; + z-index: 20; +} +.bs-sidebar ul { + list-style: none; + padding-left: 12px; +} + +.bs-sidebar ul li { + margin-bottom: 0.5em; + margin-left: -1em; +} +.bs-sidebar ul li a { + font-size: 14px; + padding-left: 25px; + color: #4d5258; + line-height: 28px; + display: block; + border-width: 1px 0 1px 1px; + 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; + font-weight: bold; + background-image: url(../img/icon-sidebar-active.png); + background-repeat: no-repeat; + background-position: right center; +} + +.bs-sidebar ul li.active a:hover { + border-right: none; +} + + +.content-area h2 { + font-family: "Open Sans", sans-serif; + font-weight: 100; + font-size: 24px; + margin-bottom: 25px; + margin-top: 25px; +} + +.subtitle { + text-align: right; + margin-top: 30px; + color: #909090; +} + +.required { + color: #CB2915; +} + + +.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; +} + +.form-horizontal { + border-top: 1px solid #E9E8E8; + padding-top: 23px; +} + +.form-horizontal .control-label { + color: #909090; + line-height: 1.4em; + padding-top: 5px; + position: relative; + text-align: right; + width: 100%; +} + +.form-group { + position: relative; +} + +.control-label + .required { + position: absolute; + right: -2px; + top: 0; +} + +#kc-form-buttons { + text-align: right; + margin-top: 10px; +} + +#kc-form-buttons .btn-primary { + float: right; + margin-left: 8px; +} + +/* Authenticator page */ + +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; +} \ No newline at end of file diff --git a/theme/keywind/account/resources/img/icon-sidebar-active.png b/theme/keywind/account/resources/img/icon-sidebar-active.png new file mode 100644 index 000000000..e7b9b0828 Binary files /dev/null and b/theme/keywind/account/resources/img/icon-sidebar-active.png differ diff --git a/theme/keywind/account/resources/img/keycloak-logo.png b/theme/keywind/account/resources/img/keycloak-logo.png new file mode 100644 index 000000000..955574855 Binary files /dev/null and b/theme/keywind/account/resources/img/keycloak-logo.png differ diff --git a/theme/keywind/account/resources/img/logo.png b/theme/keywind/account/resources/img/logo.png new file mode 100644 index 000000000..2472801ff Binary files /dev/null and b/theme/keywind/account/resources/img/logo.png differ diff --git a/theme/keywind/account/theme.properties b/theme/keywind/account/theme.properties new file mode 100644 index 000000000..e7f114793 --- /dev/null +++ b/theme/keywind/account/theme.properties @@ -0,0 +1,14 @@ +parent=base +import=common/keycloak + +styles=css/account.css +stylesCommon=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css + +##### css classes for form buttons +# main class used for all buttons +kcButtonClass=btn +# classes defining priority of the button - primary or default (there is typically only one priority button for the form) +kcButtonPrimaryClass=btn-primary +kcButtonDefaultClass=btn-default +# classes defining size of the button +kcButtonLargeClass=btn-lg diff --git a/theme/keywind/admin/resources/css/styles.css b/theme/keywind/admin/resources/css/styles.css new file mode 100755 index 000000000..bb8571000 --- /dev/null +++ b/theme/keywind/admin/resources/css/styles.css @@ -0,0 +1,505 @@ +html,body { + height: 100%; +} + +form { + margin-top: 20px; +} + +table { + margin-top: 20px; +} + +.required { + color: #f00; +} + +.tooltip-inner { + min-width: 200px; +} + +.margin-top { + margin-top: 20px; +} + +.no-margin-top { + margin-top: 0px !important; +} + +table { + max-width: 100%; +} + +td.clip { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 0; +} + +th.w-10 { + width: 10%; +} + +th.w-15 { + width: 15%; +} + +th.w-20 { + width: 20%; +} + + +th.w-25 { + width: 25%; +} + +th.w-30 { + width: 30%; +} + + +th.w-35 { + width: 35%; +} + +th.w-40 { + width: 40%; +} + +/*********** Loading ***********/ + +.loading { + background-color: #f5f5f5; + border: 1px solid #eee; + position: absolute; + bottom: 0px; + left: 0px; + padding: 2px 200px 2px 5px; +} + +/*********** Feedback ***********/ + +.feedback-aligner { + position: fixed; + top: 15px; + text-align: center; + width: 100%; + height: 0; + z-index: 100; +} +.feedback-aligner .alert { + border-radius: 2px; + border-width: 1px; + display: inline-block; + position: relative; +} + +/*********** On-Off Switch ***********/ + +.onoffswitch { + -moz-user-select: none; + height: 26px; + position: relative; + width: 62px; +} +.onoffswitch .onoffswitch-checkbox { + display: none; +} +.onoffswitch .onoffswitch-label { + border: 1px solid #bbb; + border-radius: 2px; + cursor: pointer; + display: block; + overflow: hidden; + width: 62px; +} +.onoffswitch .onoffswitch-inner { + display: block; + margin-left: -100%; + transition: margin 0.3s ease-in 0s; + width: 200%; +} +.onoffswitch .onoffswitch-inner > span { + -moz-box-sizing: border-box; + color: white; + float: left; + font-size: 11px; + font-family: "Open Sans", sans-serif; + font-weight: bold; + height: 24px; + line-height: 24px; + padding: 0; + width: 50%; +} +.onoffswitch .onoffswitch-switch { + background-image: linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -o-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -moz-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -webkit-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -ms-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #ededed)); + border: 1px solid #aaa; + border-radius: 2px; + bottom: 0; + margin: 0; + position: absolute; + right: 39px; + top: 0; + transition: all 0.3s ease-in 0s; + -webkit-transition: all 0.3s ease-in 0s; + width: 23px; +} +.onoffswitch .onoffswitch-inner .onoffswitch-active { + background-image: linear-gradient(top, #00a9ec 0%, #009bd3 100%); + background-image: -o-linear-gradient(top, #00a9ec 0%, #009bd3 100%); + background-image: -moz-linear-gradient(top, #00a9ec 0%, #009bd3 100%); + background-image: -webkit-linear-gradient(top, #00a9ec 0%, #009bd3 100%); + background-image: -ms-linear-gradient(top, #00a9ec 0%, #009bd3 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00a9ec), color-stop(1, 0, #009bd3)); + color: #FFFFFF; + padding-left: 10px; +} +.onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner .onoffswitch-active, +.onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner .onoffswitch-inactive { + background-image: none; + background-color: #e5e5e5; + color: #9d9fa1; +} +.onoffswitch .onoffswitch-inner .onoffswitch-inactive { + background: linear-gradient(#fefefe, #e8e8e8) repeat scroll 0 0 transparent; + color: #4d5258; + padding-right: 10px; + text-align: right; +} +.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { + margin-left: 0; +} +.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { + right: 0; +} + + +/*********** Select 2 ***********/ + +.select2-container { + width: 100%; +} + +.select2-container-multi .select2-choices .select2-search-field { + height: 26px; +} + +.select2-container-single { + padding: 0; + margin: 0; +} + +.select2-container-single .form-group { + width: 100%; + margin: 0; +} + +.select2-container-single .form-group .input-group { + width: 100%; +} + +/*********** html select ********/ +.overflow-select { + overflow: auto; +} + + +/*********** New Menu ***********/ + + +.sidebar-pf-left{ + background: #292e34; +} + +.sidebar-pf .nav-pills > li a i, .sidebar-pf .nav-pills > li a span{ + color: #72767b; + display: inline-block; + margin-right: 10px; +} +.sidebar-pf .nav-pills > li > a{ + color: #dbdada; + padding: 0px 20px 0 30px!important; + line-height: 30px; + border-left-width: 12px; + border-left-style: solid; + border-left-color: #292e34; + margin-left: -6px; +} + +.sidebar-pf .nav-pills > li > a:hover{ + background: #393f44; + border-color:#292e34; + border-left-color: #393f44; + color: #fff; +} + +.sidebar-pf .nav-pills > li > a:after{ + display: none!important; +} + + +.sidebar-pf .nav-pills > li.active > a { + color: #fff; + background: #393f44!important; + border-bottom: 1px solid #000!important; + border-top: 1px solid #000!important; + border-left-color: #39a5dc!important; +} + +.sidebar-pf .nav-pills > li.active a i, .sidebar-pf .nav-pills > li.active a span{ + color: #39a5dc; +} + +/*********** Realm selector ***********/ + +.realm-selector{ + color: #fff; + margin: 0 -20px; + position: relative; +} + +.realm-dropmenu{ + display: none; + cursor: pointer; + position: absolute; + top: 60px; + left: 0; + right: 0; + z-index: 999; + background: #fff; +} + +.realm-selector:hover .realm-dropmenu{ + display: block; +} + +.realm-add{ + padding: 10px; +} + +.realm-selector h2{ + font-size: 16px; + line-height: 60px; + padding: 0 20px; + margin: 0; + border-bottom: 1px solid #d5d5d6; +} + +.realm-selector h2 i{ + display: inline-block; + float: right; + line-height: 60px; +} + + +.realm-selector ul{ + padding-left: 0; + margin: 0; + list-style: none; + max-height: 200px; + overflow-y:auto; +} + + +.realm-selector ul li a{ + line-height: 60px; + padding: 0 20px; + border-bottom: 1px solid #d5d5d6; + line-height: 39px; + display: block; + font-size: 14px; +} + + +/*********** Overwrites header defaults ***********/ + +.navbar-pf{ + border-top: none!important; +} + +.navbar-pf .navbar-brand { + padding: 0; + height: 56px; + line-height: 56px; + background-position: center center; + background-image: url('../img/keyclok-logo.png'); + background-size: 148px 30px; + background-repeat: no-repeat; + width: 148px; +} + +.navbar-pf .navbar-utility .dropdown-toggle { + padding: 23px !important; +} + +.clickable { + cursor: pointer; +} + +h1 i { + color: #999999; + font-size: 18px; + margin-left: 10px; +} + +/* Action cell */ +.kc-action-cell { + background-color: #eeeeee; + background-image: linear-gradient(to bottom, #fafafa 0%, #ededed 100%); + background-repeat: repeat-x; + + text-align: center; + vertical-align: middle; + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + cursor:pointer; +} + +.kc-action-cell:hover { + background-color: #eeeeee; + background-image: none; +} + +.kc-action-cell-disabled { + background-color: #fafafa; + color: #8b8d8f; + background-image: none; + cursor: not-allowed; +} + +.kc-sorter span { + margin-left: 10px; +} + + +/* Time selector */ + +.time-selector input { + display: inline-block; + width: 120px; + padding-right: 0; + margin-right: 0; +} + +.time-selector select { + display: inline-block; + width: 80px; + margin-left: 0; + padding-left: 0; +} + +.ace_editor { + height: 600px; + width: 100%; +} + +.kc-button-input-file input { + float: left; + width: 73%; +} + +.kc-button-input-file label { + float: left; + margin-left: 2%; + width: 25%; +} + +table.kc-authz-table-expanded { + margin-top: 0px !important; +} + +.no-gutter > [class*='col-'] { + padding-right:0!important; + padding-left:0!important; +} + +.password-conceal { + font-family: 'text-security-disc'; + font-size: 14px; +} + +.input-map input.form-control { + width: 50%; +} + +/* Deactivation styles for user-group membership tree models */ + +div[tree-model] li .deactivate { + color: #4a5053; + opacity: 0.4; +} + +div[tree-model] li .deactivate_selected { + background-color: #dcdcdc; + font-weight: bold; + padding: 1px 5px; +} + +/* search highlighting */ + +div[tree-model] li .highlight { + background-color: #aaddff; +} + +/* Manage credentials */ +table.credentials-table { + margin-top: 0; + margin-bottom: 20px; +} + +table.credentials-table td { + vertical-align: middle !important; +} + +table.credentials-table input[type='text'] { + width: 100%; +} + +td.credential-arrows-cell { + width: 75px; +} + +td.credential-label-cell { + padding: 5px !important; +} + +td.credential-action-cell { + padding: 0px !important; +} + +td.credential-action-cell div.kc-action-cell { + width: 100%; + height: 36px; + line-height: 34px; +} + +td.credential-action-cell.expanded div.kc-action-cell { + border-bottom: 1px solid #d1d1d1; +} + +table.credential-data-table td { + word-break: break-all; +} + +table.credential-data-table tr:first-child td { + border-top: 0; +} + +table.credential-data-table td:first-child { + width: 150px; +} + +table.credential-data-table td.key { + text-align: right; + font-weight: bold; +} + diff --git a/theme/keywind/admin/resources/img/keyclok-logo.old.png b/theme/keywind/admin/resources/img/keyclok-logo.old.png new file mode 100644 index 000000000..ca53f0a04 Binary files /dev/null and b/theme/keywind/admin/resources/img/keyclok-logo.old.png differ diff --git a/theme/keywind/admin/resources/img/keyclok-logo.png b/theme/keywind/admin/resources/img/keyclok-logo.png new file mode 100644 index 000000000..2472801ff Binary files /dev/null and b/theme/keywind/admin/resources/img/keyclok-logo.png differ diff --git a/theme/keywind/admin/resources/img/keyclok-logo.svg b/theme/keywind/admin/resources/img/keyclok-logo.svg new file mode 100644 index 000000000..05fa87b8a --- /dev/null +++ b/theme/keywind/admin/resources/img/keyclok-logo.svg @@ -0,0 +1,194 @@ + + + diff --git a/theme/keywind/admin/resources/img/select-arrow.png b/theme/keywind/admin/resources/img/select-arrow.png new file mode 100644 index 000000000..a865a6fa7 Binary files /dev/null and b/theme/keywind/admin/resources/img/select-arrow.png differ diff --git a/theme/keywind/admin/theme.properties b/theme/keywind/admin/theme.properties new file mode 100755 index 000000000..512d63324 --- /dev/null +++ b/theme/keywind/admin/theme.properties @@ -0,0 +1 @@ +parent=keycloak \ No newline at end of file diff --git a/theme/keywind/email/theme.properties b/theme/keywind/email/theme.properties new file mode 100644 index 000000000..f1dbb7215 --- /dev/null +++ b/theme/keywind/email/theme.properties @@ -0,0 +1 @@ +parent=base \ No newline at end of file diff --git a/theme/keywind/welcome/index.ftl b/theme/keywind/welcome/index.ftl new file mode 100755 index 000000000..20c348084 --- /dev/null +++ b/theme/keywind/welcome/index.ftl @@ -0,0 +1,50 @@ + + + + +
+