/* * 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. */ .login-ui .sso-providers { padding: 0.25em 0.5em; position: absolute; bottom: 0; left: 0; } .sso-providers ul { list-style: none; } .sso-providers ul, .sso-providers li { display: inline-block; margin: 0; padding: 0; } .sso-providers li::before { content: ' / '; } .sso-providers li:first-child::before { display: none; } /* * 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. */ /* Label/tag denoting the user that shared a connection */ .jdbc-share-tag { background: #0095ff; padding: 0.25em; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; -khtml-border-radius: 0.25em; border-radius: 0.25em; color: white; font-size: 0.75em; font-weight: bold; } .totp-enroll p,.totp-details{font-size:.8em}.totp-qr-code{text-align:center}.totp-qr-code img{margin:1em;border:1px solid rgba(0,0,0,0.25);box-shadow:1px 1px 2px rgba(0,0,0,0.25);cursor:pointer}h3.totp-details-header{font-size:.8em}h3.totp-details-header::before{content:'▸ '}.totp-details-visible h3.totp-details-header::before{content:'▾ '}.totp-details,.totp-hide-details{display:none}.totp-details-visible .totp-details{display:table}.totp-details-visible .totp-hide-details{display:inline}.totp-details-visible .totp-show-details{display:none}.totp-hide-details,.totp-show-details{color:blue;text-decoration:underline;cursor:pointer;margin:0 .25em;font-weight:normal}.totp-details{margin:0 auto}.totp-details th{padding-right:.25em;text-align:left}.totp-details td{font-family:monospace}.totp-detail{display:inline-block;margin:0 .25em}/* * TwoPlus1 branding for the Apache Guacamole login screen. * * Scope is deliberately narrow: the login page only. Everything inside a * session (the connection list, the client toolbar) is left stock, because * users recognise it and restyling it earns nothing. * * Selectors were taken from the rendered 1.6.0 DOM, not guessed: * .login-ui the whole page * .login-dialog the card * .login-dialog .logo 60x60 div, background-image guac-tricolor.svg * .login-dialog .version .app-name bound to the APP.NAME translation key, * which translations/en.json overrides * .login-ui .sso-providers the "Sign in with: OpenID" line, which sits * OUTSIDE the card on the page background * * Two things about how Guacamole serves this file, both learned the hard way: * * - The page background must not reuse the desktop wallpaper: it is centred * on the same wordmark the login card shows, so the mark appears twice. * - The CSS is concatenated into the main stylesheet bundle, NOT served at * app/ext//.css (that path 404s). Relative url() therefore * resolves against /guacamole/, not the extension, so image URLs must be * written out as app/ext/tp1-branding/... in full. * - Guacamole's own .login-ui background rule lands after this file, so the * page background needs !important. The rest does not. */ /* --- the page ---------------------------------------------------------- */ .login-ui { /* Plain brand navy with a soft lift behind the card, NOT the desktop wallpaper: that wallpaper is centred on the same wordmark the card carries, so using it renders the mark twice, half of it occluded. */ background-color: #131521 !important; background-image: radial-gradient(ellipse at 50% 38%, #20243a 0%, #16192a 45%, #101220 100%) !important; } /* --- the card ---------------------------------------------------------- */ .login-ui .login-dialog { background-color: rgba(19, 21, 33, 0.90); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55); color: #ffffff; } /* The stock logo is a 60x60 square holding guac-tricolor.svg. The TwoPlus1 mark is a wide wordmark (560x202), so the box has to become a banner or the mark is squashed into a sixth of its aspect ratio. */ .login-ui .login-dialog .logo { width: 100%; height: 3em; margin: 0 auto 0.25em; background-image: url('app/ext/tp1-branding/images/tp1-logo.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .login-ui .login-dialog .version .app-name { color: rgba(255, 255, 255, 0.72); font-size: 0.8em; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .login-ui .login-dialog .version .version-number { color: rgba(255, 255, 255, 0.40); } /* --- fields ------------------------------------------------------------ */ .login-ui .login-dialog .labeled-field label, .login-ui .login-dialog .form-header { color: rgba(255, 255, 255, 0.78); } .login-ui .login-dialog input[type="text"], .login-ui .login-dialog input[type="password"], .login-ui .login-dialog input[type="email"], .login-ui .login-dialog input[type="number"] { background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); color: #ffffff; } .login-ui .login-dialog input::placeholder { color: rgba(255, 255, 255, 0.40); } .login-ui .login-dialog input[type="text"]:focus, .login-ui .login-dialog input[type="password"]:focus { border-color: rgba(255, 255, 255, 0.55); background-color: rgba(255, 255, 255, 0.12); } /* Inverted rather than a brand accent colour: TwoPlus1 has no documented interface accent, and inventing one here would be a decision made in a stylesheet. White on navy is unambiguous and passes contrast comfortably. */ .login-ui .login-dialog input[type="submit"], .login-ui .login-dialog button { background-color: #ffffff; border: none; color: #131521; font-weight: 600; } .login-ui .login-dialog input[type="submit"]:hover, .login-ui .login-dialog button:hover { background-color: rgba(255, 255, 255, 0.86); } /* --- SSO line (outside the card, on the page background) --------------- */ .login-ui .sso-providers, .login-ui .sso-providers a { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } .login-ui .sso-providers a { font-weight: 600; text-decoration: underline; } /* --- errors ------------------------------------------------------------ */ .login-ui .login-error { color: #ffffff; background-color: rgba(160, 32, 32, 0.92); text-shadow: none; }