/* * 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}/* ========================================================= HISPA REMOTO Apache Guacamole 1.6.x ========================================================= */ :root { --hispa-gold: #D4AF37; --hispa-gold-hover: #E5C75A; --hispa-bg: #F3F4F6; --hispa-surface: #FFFFFF; --hispa-surface-2: #F9FAFB; --hispa-border: #D1D5DB; --hispa-text: #1F2937; --hispa-text-secondary: #4B5563; --hispa-text-muted: #6B7280; --hispa-error: #B91C1C; } /* ========================================================= BASE ========================================================= */ html, body { background: var(--hispa-bg) !important; color: var(--hispa-text) !important; } /* ========================================================= FONDO ========================================================= */ .login-ui { background: linear-gradient( rgba(255,255,255,.18), rgba(255,255,255,.18) ), url("/app/ext/hispa-guacamole-branding/resources/fondo.png") center center / cover fixed no-repeat !important; color: var(--hispa-text) !important; } /* ========================================================= PANEL LOGIN ========================================================= */ .login-ui .login-dialog { width: 380px !important; max-width: 380px !important; box-sizing: border-box !important; padding: 2em !important; background: rgba(255,255,255,.96) !important; border: 1px solid rgba(212,175,55,.35) !important; border-radius: 14px !important; box-shadow: 0 20px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(212,175,55,.08) !important; color: var(--hispa-text) !important; overflow: visible !important; } /* ========================================================= LOGO ========================================================= */ .login-ui .login-dialog .logo { width: 100% !important; height: 110px !important; margin: 0 auto 1.25em !important; background-image: url("/app/ext/hispa-guacamole-branding/resources/logo_oscuro.png") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; } /* ========================================================= NOMBRE HISPA REMOTO ========================================================= */ .login-ui .login-dialog .version .app-name { color: var(--hispa-text) !important; font-size: 21px !important; font-weight: 700 !important; letter-spacing: .2px !important; } .login-ui .login-dialog .version .version-number { display: none !important; } /* ========================================================= CAMPOS ========================================================= */ .login-ui .login-dialog .login-fields input { box-sizing: border-box !important; background: var(--hispa-surface-2) !important; border: 1px solid var(--hispa-border) !important; border-radius: 7px !important; color: var(--hispa-text) !important; outline: none !important; } .login-ui .login-dialog .login-fields input:hover { border-color: #9CA3AF !important; } .login-ui .login-dialog .login-fields input:focus { background: #FFFFFF !important; border-color: var(--hispa-gold) !important; box-shadow: 0 0 0 3px rgba(212,175,55,.18) !important; } /* ========================================================= ETIQUETAS ========================================================= */ .login-ui .login-fields .labeled-field .field-header { color: var(--hispa-text-secondary) !important; } /* ========================================================= BOTÓN INICIAR SESIÓN ========================================================= */ .login-ui .login-dialog .buttons { width: 100% !important; margin-top: 1em !important; text-align: center !important; } .login-ui .login-dialog .buttons input.login { display: block !important; width: 100% !important; height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; background: var(--hispa-gold) !important; border: none !important; border-radius: 7px !important; color: #111827 !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; position: relative !important; top: -10px !important; transition: background .15s ease, box-shadow .15s ease !important; } .login-ui .login-dialog .buttons input.login:hover { background: var(--hispa-gold-hover) !important; box-shadow: 0 4px 14px rgba(212,175,55,.25) !important; } /* ========================================================= OCULTAR CONTINUAR ========================================================= */ .login-ui .login-dialog .buttons input.continue-login { display: none !important; } /* ========================================================= ENLACES ========================================================= */ .login-ui a { color: #9A7B18 !important; } .login-ui a:hover { color: #6F5910 !important; } /* ========================================================= SELECT ========================================================= */ .login-ui select { background: var(--hispa-surface-2) !important; border: 1px solid var(--hispa-border) !important; border-radius: 7px !important; color: var(--hispa-text) !important; } /* ========================================================= ERROR ========================================================= */ .login-ui.error p.login-error { background: #FEF2F2 !important; border: 1px solid #FCA5A5 !important; border-radius: 7px !important; color: var(--hispa-error) !important; } /* ========================================================= HISPA-ID ========================================================= */ /* Guacamole coloca este bloque fuera de .login-dialog. Lo posicionamos exactamente debajo del botón principal. */ .login-ui .sso-providers { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; top: calc(50% + 156px) !important; width: 298px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; z-index: 50 !important; font-size: 0 !important; color: transparent !important; text-align: center !important; } /* Lista */ .login-ui .sso-providers .sso-provider-list { display: block !important; width: 298px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Elemento */ .login-ui .sso-providers .sso-provider { display: block !important; width: 298px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ========================================================= BOTÓN HISPA-ID ========================================================= */ .login-ui .sso-providers .sso-provider-openid a { display: flex !important; align-items: center !important; justify-content: center !important; width: 298px !important; height: 44px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; background: var(--hispa-gold) !important; border: none !important; border-radius: 7px !important; color: #111827 !important; font-size: 0 !important; font-weight: 700 !important; line-height: 44px !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; } /* Nombre */ .login-ui .sso-providers .sso-provider-openid a::after { content: "Hispa-ID" !important; color: #111827 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 44px !important; } /* Hover */ .login-ui .sso-providers .sso-provider-openid a:hover { background: var(--hispa-gold-hover) !important; color: #111827 !important; box-shadow: 0 4px 14px rgba(212,175,55,.25) !important; } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 500px) { .login-ui .login-dialog { width: calc(100vw - 40px) !important; max-width: calc(100vw - 40px) !important; } .login-ui .sso-providers { width: calc(100vw - 80px) !important; } .login-ui .sso-providers .sso-provider-list, .login-ui .sso-providers .sso-provider, .login-ui .sso-providers .sso-provider-openid a { width: 100% !important; } } /* ========================================================= AJUSTE FINAL - SEPARACIÓN BOTONES LOGIN ========================================================= */ .login-ui .sso-providers { margin-top: 10px !important; } /* ========================================================= AJUSTE FINAL - PANEL LOGIN ========================================================= */ .login-ui .login-dialog { padding-bottom: 4em !important; } /* ========================================================= NOMBRE DEL SERVICIO ========================================================= */ .login-ui .login-dialog .version .app-name { font-size: 0 !important; } .login-ui .login-dialog .version .app-name::after { content: "Hispa Remoto" !important; font-size: 22px !important; font-weight: 700 !important; color: var(--hispa-text) !important; letter-spacing: 0.2px !important; } /* * 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; }