/* ========================================================================== AL-MALIK / ALM Emporium — Apache Guacamole login branding (v4) - Bismillah calligraphy above the wordmark - AL-MALIK الملك with a layered 3D gold bevel - Tiled eight-point star lattice (inline SVG, no image files) - Full-page dark background, no white gap below the fold ========================================================================== */ :root { --alm-black: #0f0c06; --alm-black-soft: #1c1509; --alm-panel: rgba(26, 21, 11, 0.90); --alm-gold: #e2c05a; --alm-gold-light: #fbf0c0; --alm-gold-mid: #c99f2e; --alm-gold-deep: #6b5518; --alm-gold-dark: #4a3a10; --alm-ink: #f0e8d4; --alm-ink-dim: #a09480; } /* ------------------------------------------------------------- background */ /* IMPORTANT: nothing here may touch html or body. Those are shared with the signed-in interface, and darkening them leaves Guacamole's own dark text unreadable on the connection list. Instead .login-ui is pinned to the viewport, which covers the page fully without affecting any other screen. The star tile is an inline SVG data URI: exact eight-point geometry at any zoom, and nothing extra for the browser to download. */ .login-ui { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; overflow-y: auto !important; background-color: var(--alm-black) !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2795%27%20height%3D%2795%27%3E%3Cpath%20d%3D%27M47.5%208%20L55%2032%20L77%2023%20L64%2040.5%20L87%2047.5%20L64%2054.5%20L77%2072%20L55%2063%20L47.5%2087%20L40%2063%20L18%2072%20L31%2054.5%20L8%2047.5%20L31%2040.5%20L18%2023%20L40%2032%20Z%27%20fill%3D%27none%27%20stroke%3D%27%23d4af37%27%20stroke-opacity%3D%270.11%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E"), radial-gradient(ellipse at 50% 20%, rgba(212,175,55,0.12) 0%, transparent 55%), linear-gradient(175deg, var(--alm-black-soft) 0%, var(--alm-black) 60%) !important; background-size: 95px 95px, auto, auto !important; background-repeat: repeat, no-repeat, no-repeat !important; background-attachment: fixed !important; box-sizing: border-box !important; min-height: 100vh !important; padding-top: 232px !important; } /* -------------------------------------------------- Bismillah calligraphy */ /* U+FDFD is the single Unicode glyph for بسم الله الرحمن الرحيم. */ .login-ui::before { content: "\FDFD"; position: absolute; top: 22px; left: 0; right: 0; text-align: center; font-family: "Traditional Arabic", "Segoe UI Symbol", "Arial Unicode MS", "Noto Naskh Arabic", "Times New Roman", serif; font-size: 78px; line-height: 1.15; color: #fdfbf4; text-shadow: 0 1px 0 rgba(255,255,255,0.55), 0 2px 10px rgba(0,0,0,0.75), 0 0 34px rgba(255,248,220,0.22); pointer-events: none; } /* ------------------------------------------------------ 3D gold wordmark */ /* Solid fill with stacked shadows rather than a gradient: a gradient clipped to text cannot also carry a bevel, and the bevel is what reads as depth. */ .login-ui::after { content: "AL-MALIK \00a0 \0627\0644\0645\0644\0643"; position: absolute; top: 126px; left: 0; right: 0; text-align: center; font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif; font-size: 52px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.15; color: var(--alm-gold); text-shadow: 0 -1px 0 var(--alm-gold-light), 0 1px 0 var(--alm-gold-mid), 1px 2px 0 var(--alm-gold-deep), 2px 4px 0 var(--alm-gold-dark), 3px 6px 0 #2f2409, 4px 9px 12px rgba(0,0,0,0.62), 0 0 46px rgba(226,192,90,0.28); pointer-events: none; } /* Guacamole's own logo and version string are replaced by the above. */ .login-ui .login-dialog .logo, .login-ui .login-dialog img.logo, .login-ui .login-dialog .version, .login-ui .login-dialog .version-string { display: none !important; } /* ----------------------------------------------------------------- card */ .login-ui .login-dialog { background: var(--alm-panel) !important; border: 1px solid rgba(212,175,55,0.30) !important; border-radius: 16px !important; box-shadow: 0 28px 74px rgba(0,0,0,0.72), 0 1px 0 rgba(255,235,180,0.06) inset !important; padding: 26px 34px 30px !important; min-width: 330px; max-width: 390px; } .login-ui .login-dialog::before { content: "WELCOME BACK\A SIGN IN TO CONTINUE"; white-space: pre-line; display: block; text-align: center; font-family: "Segoe UI", Tahoma, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.26em; line-height: 2.2; color: var(--alm-ink-dim); margin: 0 0 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(212,175,55,0.20); } /* Company line in the card footer. body::after does not render reliably inside Guacamole's layout, so it is deliberately not used. */ .login-ui .login-dialog::after { content: "ALM EMPORIUM LLC \2022 SECURE REMOTE ACCESS"; display: block; text-align: center; font-family: "Segoe UI", Tahoma, sans-serif; font-size: 8.5px; font-weight: 600; letter-spacing: 0.26em; color: rgba(200,180,140,0.60); margin: 20px 0 0; padding-top: 15px; border-top: 1px solid rgba(212,175,55,0.16); } /* ---------------------------------------------------------- form fields */ .login-ui .login-dialog label, .login-ui .login-dialog .labels { color: var(--alm-ink-dim) !important; font-size: 10px !important; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .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: rgba(0,0,0,0.58) !important; color: var(--alm-ink) !important; border: 1px solid rgba(212,175,55,0.34) !important; border-radius: 9px !important; padding: 11px 13px !important; font-size: 14px !important; transition: border-color .15s, box-shadow .15s; } .login-ui .login-dialog input[type="text"]:focus, .login-ui .login-dialog input[type="password"]:focus, .login-ui .login-dialog input[type="number"]:focus { outline: none !important; border-color: var(--alm-gold) !important; box-shadow: 0 0 0 3px rgba(226,192,90,0.18) !important; } /* --------------------------------------------------------------- button */ .login-ui .login-dialog input[type="submit"], .login-ui .login-dialog button { background: linear-gradient(180deg, var(--alm-gold-light) 0%, var(--alm-gold) 52%, var(--alm-gold-mid) 100%) !important; color: #1a1408 !important; border: none !important; border-radius: 9px !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; padding: 13px 18px !important; width: 100%; cursor: pointer; box-shadow: 0 8px 22px rgba(212,175,55,0.26), 0 1px 0 rgba(255,255,255,0.4) inset !important; } .login-ui .login-dialog input[type="submit"]:hover, .login-ui .login-dialog button:hover { filter: brightness(1.07); } /* ------------------------------------------------- two-factor / errors */ .login-ui .login-dialog .qrcode, .login-ui .login-dialog img[src^="data:image"] { background: #ffffff !important; padding: 10px !important; border-radius: 8px !important; } .login-ui .login-dialog .error, .login-ui .login-dialog .message { color: #ff9d94 !important; font-size: 12px !important; letter-spacing: 0.02em; text-transform: none; } /* ------------------------------------------------- signed-in experience */ /* Deliberately left alone. Guacamole's connection list, settings pages and session menus all assume their own light theme with dark text. Restyling the header here previously made the home screen unreadable, so the branding stops at the login page. */ /* -------------------------------------------------------- small screens */ @media (max-height: 800px) { .login-ui { padding-top: 190px !important; } .login-ui::before { top: 14px; font-size: 58px; } .login-ui::after { top: 96px; font-size: 40px; } } @media (max-height: 640px) { .login-ui { padding-top: 146px !important; } .login-ui::before { top: 8px; font-size: 44px; } .login-ui::after { top: 70px; font-size: 31px; } } /* * 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}