| /* |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| */ |
| |
| $font: Helvetica, Arial, sans-serif; |
| $main_background_color: white; |
| $body_background_color: white; |
| $color_text: #444; |
| $color_link: #2623aa; |
| $color_dropdown: #eee; |
| $color_nav_item: #2f3036; |
| $color_nav_text: #ddd; |
| $color_nav_hover: red; |
| $color_header_text: #eee; |
| $body_background_hover: #0006; |
| |
| |
| html, body { |
| width: 100%; |
| height: 100%; |
| margin: 0 auto; |
| background: $body_background_color; |
| } |
| |
| body { |
| min-height: 100%; |
| display: grid; |
| grid-template-rows: auto 1fr auto; |
| grid-template-columns: 100%; |
| position: relative; |
| pointer-events: auto; |
| } |
| |
| |
| body.blurbg:after { |
| content: ""; |
| width: inherit; |
| height: inherit; |
| position: absolute; |
| background: $color_nav_item; |
| top: 0; |
| left: 0; |
| opacity: 0.75; |
| transition: opacity 0.15s ease-in-out; |
| z-index: 1; |
| } |
| |
| |
| header { |
| display: grid; |
| grid-template-columns: 30% auto; |
| background: $color_nav_item; |
| padding: 0; |
| height: 64px; |
| |
| .header-logo { |
| display: flex; |
| } |
| |
| .header-logo img { |
| max-height: 64px; |
| } |
| |
| .header-text { |
| display: flex; |
| align-items: center; |
| font-size: 24px; |
| font-family: $font; |
| color: $color_header_text; |
| padding-left: 20px; |
| } |
| |
| @media screen and (max-width : 810px){ |
| grid-template-columns: auto; |
| .header-logo { |
| width: 100%; |
| display: block; |
| } |
| .header-text { |
| display: block; |
| } |
| .header-logo img { |
| display: none; |
| } |
| } |
| |
| nav { |
| ul { |
| list-style-type:none; |
| margin:0; |
| padding:0; |
| position: absolute; |
| z-index: 2; |
| } |
| ul li { |
| display:inline-block; |
| float: left; |
| margin-right: 1px; |
| position: relative; |
| background: $color_nav_item; |
| top: 50%; |
| z-index: 1; |
| |
| } |
| ul li a { |
| display:block; |
| height: 64px; |
| margin-left: 24px; |
| text-align: center; |
| line-height: 64px; |
| font-family: $font; |
| color: $color_nav_text; |
| text-decoration: none; |
| pointer-events: auto; |
| } |
| |
| ul.hidden:after { |
| min-width: 120px; |
| content: "▲"; |
| color: white; |
| font-size: 32px; |
| position: absolute; |
| top: -28px; |
| left: 0; |
| text-align: center; |
| |
| } |
| |
| li:hover a { |
| color: $color_nav_hover; |
| cursor: pointer; |
| } |
| |
| ul li:hover ul { |
| width: 360px; |
| display: block; |
| background: white; |
| line-height: 40px; |
| pointer-events: auto; |
| } |
| ul li:hover ul li { |
| background: white; |
| display: inline-block; |
| color: $color_text; |
| } |
| li:hover ul a:hover { |
| color: $color_nav_hover; |
| } |
| li ul { |
| display: none; |
| } |
| |
| ul.hidden { |
| background-color: white; |
| line-height: initial; |
| } |
| ul.hidden a { |
| color: #666; |
| height: auto; |
| text-align: left; |
| line-height: initial; |
| margin-bottom: 10px; |
| } |
| ul.hidden p { |
| font-size: 0.8rem; |
| margin: 0px; |
| padding: 0px; |
| color: #888; |
| } |
| .show-menu { |
| font-family: $font; |
| text-decoration: none; |
| color: #fff; |
| background: $color_nav_hover; |
| text-align: center; |
| padding: 10px 0; |
| display: none; |
| } |
| input[type=checkbox]{ |
| display: none; |
| -webkit-appearance: none; |
| } |
| input[type=checkbox]:checked ~ #menu{ |
| display: block; |
| } |
| |
| @media screen and (max-width : 810px){ |
| ul { |
| position: static; |
| display: none; |
| } |
| li { |
| margin-bottom: 1px; |
| } |
| ul li, li a { |
| width: 100%; |
| } |
| .show-menu { |
| display:block; |
| } |
| } |
| } |
| } |
| |
| footer { |
| background-color: $color_nav_item; |
| color: white; |
| min-height: 100px; |
| } |
| |
| main { |
| padding: 0.5em; |
| margin: 0 auto; |
| max-width: 85%; |
| color: $color_text; |
| background: $main_background_color; |
| font-family: $font; |
| } |
| |
| #card { |
| border-radius: 9px; |
| border: 1px solid #333; |
| background: linear-gradient(135deg, #7800FF 0px,#7800FF 64px,#FBFBFB 64px,#FBFBFB 100%); |
| box-shadow: 0px 0px 5px #2f3036; |
| width: 520px; |
| height: 175px; |
| text-align: left; |
| padding: 10px 0px 4px 14px; |
| margin: 20px; |
| |
| img.mfaicon { |
| position: absolute; |
| right: -64px; |
| top: -32px; |
| width: 32px; |
| height: 32px; |
| } |
| |
| p.link { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| text-align: center; |
| margin-top: -4px; |
| width: 98%; |
| } |
| |
| img.avatar { |
| border-radius: 50%; |
| border: 6px solid #FBFBFB; |
| width: 64px; |
| } |
| |
| h1 { |
| font-size: 16px; |
| display: inline-block; |
| position: absolute; |
| margin: 30px 0; |
| padding: 0px; |
| text-align: center; |
| width: 360px; |
| } |
| } |
| |
| ul.striped { |
| padding: 0; |
| } |
| |
| .striped li { |
| padding: 1.5px; |
| font-size: 0.9rem; |
| } |
| .striped li:nth-child(odd), .striped tr:nth-child(odd) { |
| background-color: #f4f4f4; |
| list-style: none; |
| border: 1px solid #aaa; |
| border-bottom: none; |
| } |
| .striped li:nth-child(even), .striped tr:nth-child(even) { |
| background-color: #fbfbfb; |
| list-style: none; |
| border: 1px solid #aaa; |
| border-bottom: none; |
| } |
| .striped li:last-child, .striped tr:last-child { |
| border-bottom: 1px solid #aaa; |
| border-bottom-right-radius: 4px; |
| border-bottom-left-radius: 4px; |
| } |
| |
| .striped li:first-child { |
| border-top-right-radius: 4px; |
| border-top-left-radius: 4px; |
| } |
| |
| .striped td { |
| padding: 6px; |
| } |
| |
| .striped th { |
| background: #333; |
| color: white; |
| padding: 4px; |
| } |
| |
| button { |
| background: #4477a1; |
| background: linear-gradient(180deg, #81a8cb, #4477a1); |
| border-radius: 6px; |
| cursor: pointer; |
| font-size: 1.1rem; |
| color: white; |
| } |
| |
| |
| |
| .loader { |
| font-size: 10px; |
| margin: 100px auto; |
| text-indent: -9999em; |
| width: 16em; |
| height: 16em; |
| border-radius: 50%; |
| background: darkblue; |
| background: linear-gradient(to right, darkblue 10%, rgba(255, 255, 255, 0) 42%); |
| position: relative; |
| -webkit-animation: load3 1.4s infinite linear; |
| animation: load3 1.4s infinite linear; |
| -webkit-transform: translateZ(0); |
| -ms-transform: translateZ(0); |
| transform: translateZ(0); |
| } |
| .loader:before { |
| width: 50%; |
| height: 50%; |
| background: darkblue; |
| border-radius: 100% 0 0 0; |
| position: absolute; |
| top: 0; |
| left: 0; |
| content: ''; |
| } |
| .loader:after { |
| background: white; |
| width: 75%; |
| height: 75%; |
| border-radius: 50%; |
| content: ''; |
| margin: auto; |
| position: absolute; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| right: 0; |
| } |
| @-webkit-keyframes load3 { |
| 0% { |
| -webkit-transform: rotate(0deg); |
| transform: rotate(0deg); |
| } |
| 100% { |
| -webkit-transform: rotate(360deg); |
| transform: rotate(360deg); |
| } |
| } |
| @keyframes load3 { |
| 0% { |
| -webkit-transform: rotate(0deg); |
| transform: rotate(0deg); |
| } |
| 100% { |
| -webkit-transform: rotate(360deg); |
| transform: rotate(360deg); |
| } |
| } |
