From dfa2e14bfa1709e57d40f41681666dc5fed8c0ef Mon Sep 17 00:00:00 2001 From: Markus Krogh Date: Tue, 3 Oct 2017 16:06:31 +0200 Subject: Fix css for login --- idp/Dockerfile | 1 - idp/templates/edit-webapp/css/NORDUnet.css | 302 --------------------------- idp/templates/edit-webapp/css/main.css | 171 +++++++++++++++ idp/templates/edit-webapp/images/ndn-bg1.png | Bin 0 -> 33778 bytes idp/templates/views/layout.vm | 42 +++- idp/templates/views/login.vm | 21 +- 6 files changed, 212 insertions(+), 325 deletions(-) delete mode 100644 idp/templates/edit-webapp/css/NORDUnet.css create mode 100644 idp/templates/edit-webapp/css/main.css create mode 100644 idp/templates/edit-webapp/images/ndn-bg1.png diff --git a/idp/Dockerfile b/idp/Dockerfile index b110812..0e1efc5 100644 --- a/idp/Dockerfile +++ b/idp/Dockerfile @@ -10,7 +10,6 @@ COPY shibboleth-identity-provider-${IDP_VERSION}.tar.gz /opt/ COPY templates /opt/templates WORKDIR /opt RUN echo $(id) && apk --no-cache add bash apache-ant curl && \ - #curl -O https://shibboleth.net/downloads/identity-provider/${IDP_VERSION}/shibboleth-identity-provider-${IDP_VERSION}.tar.gz && \ sha256sum -c shibboleth-identity-provider-$IDP_VERSION.tar.gz.sha256 && \ tar xf shibboleth-identity-provider-$IDP_VERSION.tar.gz && \ mv shibboleth-identity-provider-$IDP_VERSION shibboleth-identity-provider && \ diff --git a/idp/templates/edit-webapp/css/NORDUnet.css b/idp/templates/edit-webapp/css/NORDUnet.css deleted file mode 100644 index f7c3ef2..0000000 --- a/idp/templates/edit-webapp/css/NORDUnet.css +++ /dev/null @@ -1,302 +0,0 @@ -#wrapper { - width: 100%; - font-family: Arial, Helvetica, sans-serif; - font-size: 12px; - color: #000; - // background: #fff url('images/pipes_back.jpg') repeat-y top left; -} - -#top { - display: block; - width: 100%; - background: #00B2E4 url('images/top_back.gif') repeat-x bottom left; - overflow: hidden; - -} -#top_table { - margin:0; - padding:0; - margin-top: 33px; - width: 900px; - border-collapse: collapse; - margin-bottom: -1px; - - -} - -#top_table td { - vertical-align:bottom; -} - -#top_table td img { - margin-bottom: 20px; - display: block; - padding-right:10px; - -} - -#main_nav { - margin:0; - padding:0; - list-style:none; - color: #fff; - height: 40px; - display: block; - -} - -#main_nav li { - display: block; - float: left; - background: url('images/main_nav_left.gif') no-repeat bottom left; - padding: 0 0 0 11px; - -} -#main_nav li#selectedPage { - background: url('images/main_nav_left_selected.gif') no-repeat bottom left; -} -#main_nav li a { - display: block; - float: left; - padding: 0 11px 0 0; - height: 40px; - color: #fff; - text-decoration: none; - outline: 0; - background: url('images/main_nav_back.gif') no-repeat bottom right; -} - -#main_nav li#selectedPage a { - background: url('images/main_nav_back_selected.jpg') no-repeat bottom right; - color: #000; - -} -#main_nav li a span { - vertical-align: middle; - display: block; - padding-top: 10px; - -} - -#left { - clear: both; - background: #fff url('images/left_back.gif') repeat-y top left; - width: 200px; - float: left; -} - -#search_form { - padding-left: 8px; - width: 200px; - margin: 10px 0 20px 0; -} - -#search_form .input_image { - - vertical-align: middle; -} - -#nav { - - width: 200px; - font-size: 12px; - clear: both; -} - -#nav #intro { - width: 179px; - background: #fff url('images/intro_top.jpg') no-repeat top left; - padding: 15px 10px 1px 10px; -} - -#nav #intro_footer { - width: 199px; - height:27px; - background: #fff url('images/intro_bottom.jpg') no-repeat top left; -} - - -#nav ul.site_tree, -#nav ul.site_tree ul, -#nav ul.site_tree li { - margin: 0; - padding: 0; - list-style: none; - -} -#nav ul.site_tree { - background: transparent url(images/subnavback.gif) no-repeat bottom left; - padding-bottom:2px; -} - -#nav ul.site_tree a { - color: #4F4E4E; - text-decoration: none; - display: block; -} - -#nav ul.site_tree a:hover { - text-decoration: none; -} - -#nav ul.site_tree strong.level1 { - color: #000; - display: block; - background-color: #59BAE7; -} - -#nav ul.site_tree li.level2 { - background: transparent url(images/subnavback.gif) no-repeat top left; -} - - -#nav ul.site_tree a.level1, -#nav ul.site_tree strong.level1 { - padding:5px 0 5px 10px; - -} - -#nav ul.site_tree li.level2 { - display:block; - padding: 5px 0 2px 15px; -} - -#nav ul.site_tree a.level2 { - -} - -#nav #nav_pic { - display: block; - margin: 0; - padding: 0; -} - - -h1 { - font-size: 20px; - color: #004788; -} - -h2 { - font-size: 18px; - color: #004788; -} - -h3 { - font-size: 16px; - color: #004788; -} - -h4 { - font-size: 14px; - color: #004788; -} - -h5 { - font-size: 12px; - color: #004788; -} - -p { - font-size: 12px; - color: #004788; - -} - -ul { - font-size: 12px; - color: #004788; - -} - -#content { - margin-left: 200px; - padding: 20px; - width: auto; - line-height: 1.5em; -} - -#content table { - border-collapse: collapse; -} - -#content th { - background-color: #f0f0f0; - padding: 5px; - color: #036; -} - -#content td { - vertical-align: middle; - padding: 5px; -} - -*html #content table { width:99%; } - -#footer { - clear: both; - width: 100%; - height: 35px; - background-color: #D8D8D8; - border-top: 1px solid #989898; - border-bottom: 1px solid #989898; -} - -#footer p { - vertical-align: middle; - margin: 12px 10px 10px 200px; - font-size: 10px; - color: #848484; -} - -#footer img { - float: left; - margin: 0px 0px 0px 2px; -} - -hr { - border: 0; - color: #696969; - background-color:#696969; - height: 1px; -} - - -#intro img{ - padding-top: 5px; - border: none; -} - -/* Open trouble tickets */ -#opentickets { - margin-left: 200px; - padding: 0 20px 20px 20px; - width: auto; -} - -.blue { -background:#004788 none repeat scroll 0 0; -} - -.text { - font-size: 12px; - color: #004788; -} - -.group_heading { -color:#004788; -font-size:12px; -font-weight:bolder; -} - -.list_info { -background-color:#D9EFFA; -color:#004788; -padding:0.6em; -} - -.whitebold { -color:#FFFFFF; -font-size:12px; -font-weight:bold; -} diff --git a/idp/templates/edit-webapp/css/main.css b/idp/templates/edit-webapp/css/main.css new file mode 100644 index 0000000..edacd5f --- /dev/null +++ b/idp/templates/edit-webapp/css/main.css @@ -0,0 +1,171 @@ +* { + margin: 0; + padding: 0; +} +header, footer, section, nav { + display: block; +} +html, body { + height: 100%; +} +body { + font-family:Verdana, Geneva, sans-serif; + font-size: 12px; + line-height: 1.5; + color: #717171; +} +a:link, +a:visited { + text-decoration: none; + color: #717171; +} +img { + max-width: 100%; + margin-bottom: 12px; +} + +header { + background-color: #00a8d9; + width: 100%; +} + +header img { + margin: 0; +} + +form { + padding-bottom: 21px; +} +form label { /* labels are hidden */ + font-weight: bold; +} +form legend { + font-size:1.2em; + margin-bottom: 12px; +} +.form-element-wrapper { + margin-bottom: 12px; +} +.form-element { + width: 100%; + padding: 13px 12px; + box-sizing: border-box; + border: none; + font-size: 14px; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; +} +.form-field { + color: #B7B7B7; + border: 1px solid #B7B7B7; +} +.form-field-focus, +.form-field:focus, +input[type="text"]:focus { + color: #333333; + border-color: #333; +} +.form-button { + background: #00a8d9; + color: #ffffff; + cursor: pointer; +} +.form-button:hover { + background: #00baf1; +} + +.form-error { + padding: 0; + color: #B61601; +} + +.list-help { + list-style: none; +} +.list-help-item a { + display: block; + color: #4F4E4E; +} + +.list-title { + font-weight: bold; +} + +.list-title, .list-help-item { + padding: 2px 24px; +} + +.item-marker { + color: #00a7d9; +} + +footer { + color: #ffffff; + font-size: 11px; + background: #717171; + position: fixed; + bottom: 0; + width: 100%; + padding: 12px 20px; +} + +.container.flex-group { + /* make space for floating footer */ + margin: 24px 0 80px +} + +body::after { + content: ""; + background: transparent url('../images/ndn-bg1.png') repeat-y; + opacity: 0.5; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; + z-index: -1; +} + + +.flex-group { + display: flex; + flex-flow: row wrap-reverse; +} + +.flex-container { + display: flex; + flex-flow: row wrap; + flex: 1 1 400px; +} + + +.column { + flex: 1 1 400px; + max-width: 400px; + margin: 0 24px; +} + +nav { + flex: 0 0 200px; +} + +@media only screen and (max-width: 599px) { + nav { + max-width: 400px; + flex-grow: 1; + } + body::after { + content: none; + } + .container.flex-group { + margin: 0 10px 80px 10px; + } + + .list-help-item a { + line-height: 18px; + } + .column { + margin: 0; + } +} diff --git a/idp/templates/edit-webapp/images/ndn-bg1.png b/idp/templates/edit-webapp/images/ndn-bg1.png new file mode 100644 index 0000000..40c0bca Binary files /dev/null and b/idp/templates/edit-webapp/images/ndn-bg1.png differ diff --git a/idp/templates/views/layout.vm b/idp/templates/views/layout.vm index 7dca3b5..cbad886 100644 --- a/idp/templates/views/layout.vm +++ b/idp/templates/views/layout.vm @@ -4,25 +4,51 @@ - $title - $titleSuffix + + #springMessageText("idp.title", "Web Login Service") #if ($titleSuffix) -$titleSuffix #end
-
- #springMessageText( - #if ($titleSuffix) -

#springMessageText("idp.title", "Web Login Service") - $titleSuffix

- #end +
+ #springMessageText( +
-
+
+ +
+ #if ($titleSuffix) +

#springMessageText("idp.title", "Web Login Service") - $titleSuffix

+ #end $!bodyContent
-
+

#springMessageText("idp.footer", "Your footer here.")

diff --git a/idp/templates/views/login.vm b/idp/templates/views/login.vm index b4f02d0..b813dc0 100644 --- a/idp/templates/views/login.vm +++ b/idp/templates/views/login.vm @@ -59,11 +59,6 @@
#end -
- - -
- #if ($passwordEnabled)
+
#* // // SP Description & Logo (optional) @@ -94,6 +92,10 @@ // added SP information. // *# +

$encoder.encodeForHTML($serviceName)

+

+ #springMessageText("idp.login.sploginTo", "You have asked to login to") $encoder.encodeForHTML($serviceName) +

#set ($logo = $rpUIContext.getLogo()) #if ($logo) -
-
#end -- cgit v1.1