Il chiaro e non il rosso scuro, perche' questo testo sta sul fondo SCURO della
pagina e non dentro il riquadro bianco: un rosso da fondo chiaro, la', non si
legge. E rosso resta: un messaggio di errore deve somigliare a un errore, e
colorarlo di arancione lo renderebbe indistinguibile dal pulsante. */
.login-ui .login-error {
color: #FF8A80;
font-size: 13px;
text-align: center;
margin: 0 0 14px;
}
/* =========================================================================
IL RESTO DEL PORTALE, dal 04/09/2026. Chiesto da Piero Luciani: «in guacamole
tutto il portale deve avere i colori e layout neen, non soltanto alla login».
FINO A OGGI QUESTO FOGLIO SI FERMAVA A `.login-ui`, e c'era una prova che lo
pretendeva. La ragione scritta allora era buona e resta valida per meta':
«dentro una sessione il partecipante deve vedere il TERMINALE, non il nostro
arancione - un tema che colora anche l'area di lavoro rende piu' difficile
leggere l'output di un playbook». Quella meta' e' la SESSIONE, non tutto il
resto: l'elenco delle connessioni, le preferenze e i menu sono pagine nostre
come la schermata di accesso, e lasciarle grigie voleva dire un marchio che
finisce appena si entra.
QUINDI L'INVARIANTE CAMBIA E NON SPARISCE: da `tutto sotto .login-ui` a
`niente tocca la sessione`. Si attua con `body:not(.client)`, e non e' una
scelta fra tante: `body.client` e' la classe che Guacamole mette sul corpo
della pagina quando si e' dentro una connessione - misurata, non supposta, nel
foglio che l'applicazione serve (`1.guacamole..css`, dove esiste la
regola `body.client{...}`). La prova nuova controlla questo.
DA DOVE VENGONO QUESTI NOMI DI CLASSE. Non dalla memoria e non da un esempio
trovato in giro: sono stati letti il 04/09/2026 dal CSS che QUESTA istanza
serve, e i modelli HTML che li usano sono stati scaricati dalla stessa
istanza (`/app/home/templates/home.html`, `guacUserMenu.html`,
`guacRecentConnections.html`, `connection.html`, `connectionGroup.html`,
`guacGroupList.html`). Poi la pagina e' stata ricostruita nel browser con
quel markup e queste regole, e GUARDATA. E' la correzione di un difetto vero
del 03/09: quel giorno una regola `h1,h2,h3` era stata scritta per nascondere
«APACHE GUACAMOLE» senza sapere dove stesse quel testo, e non selezionava
niente. Una regola scritta per coprire l'ignoranza invece di toglierla.
IL CONTRASTO. Bianco su `#252526` misura 15,9:1; `#252526` su bianco lo
stesso; arancione `#F84900` su bianco 4,6:1, che basta per un testo di
dimensione normale e per un bordo. Sono gli stessi accostamenti gia' approvati
guardandoli il 29/08/2026 sul portale.
========================================================================= */
/* Il fondo delle pagine di gestione. `#F1F2F2` e non bianco: i riquadri bianchi
degli elenchi si devono staccare da qualcosa. */
body:not(.client) {
background: #F1F2F2;
color: #252526;
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* LE INTESTAZIONI DI SEZIONE - «connessioni recenti», «tutte le connessioni», e
la stessa barra in cima alle pagine delle impostazioni. Sono l'elemento che si
ripete su ogni pagina, quindi sono il posto dove il marchio si vede.
ARANCIONE PIENO E NON NERO CON LA RIGA ARANCIONE, deciso da Piero Luciani il
04/09/2026 guardando la pagina: «questi due sfondi in nero, portale in
arancione». La prima versione, dello stesso giorno, faceva la barra `#252526`
con un filetto arancione sotto - piu' sobria, e sbagliata sul punto che conta:
il colore che si riconosce da lontano in una proiezione e' l'arancione, non un
grigio scurissimo che a proiettore acceso e' semplicemente nero.
IL FILETTO SOTTO E' USCITO: su fondo arancione un bordo arancione non si vede,
e uno di un altro colore sarebbe un secondo segno che non aggiunge niente.
BIANCO SU `#F84900` MISURA 3,5:1. Sotto il 4,5 che si chiede a un testo
piccolo, sopra il 3 che si chiede a un testo grande - e questo lo e': grassetto,
maiuscolo, ~15px. E' la stessa combinazione dei pulsanti del portale, approvata
guardandola il 29/08/2026: se un giorno si decide che non basta, si cambia nei
due posti insieme, non solo qui. */
body:not(.client) .header {
background: #F84900;
color: #FFFFFF;
border-bottom: 0;
box-shadow: none;
}
body:not(.client) .header h2 {
color: #FFFFFF;
font-weight: 700;
letter-spacing: .04em;
text-shadow: none;
}
/* IL MENU DELL'UTENTE, in alto a destra. Il titolo sta sull'intestazione scura,
quindi e' bianco; la tendina che si apre e' un riquadro chiaro come quelli del
portale, e la voce sotto il puntatore si riempie di arancione. */
body:not(.client) .user-menu .menu-dropdown .menu-title {
color: #FFFFFF;
}
body:not(.client) .menu-dropdown .menu-contents {
background: #FFFFFF;
border: 1px solid #E3E4E5;
color: #252526;
}
body:not(.client) .menu-dropdown .menu-contents li a {
color: #252526;
}
body:not(.client) .menu-dropdown .menu-contents li a:hover {
background: #F84900;
color: #FFFFFF;
}
body:not(.client) .menu-dropdown .menu-contents .profile .full-name a {
color: #F84900;
}
/* La linguetta della pagina in cui si e': sottolineata in arancione invece che
colorata di grigio. */
body:not(.client) .page-tabs .page-list li a[href].current {
border-bottom: 3px solid #F84900;
}
/* L'ELENCO DELLE CONNESSIONI. Il riquadro bianco su fondo chiaro e' la stessa
forma delle schede del portale; i nomi non sono piu' azzurri di collegamento,
perche' in un elenco di connessioni ogni riga e' un collegamento e colorarle
tutte non distingue niente. */
body:not(.client) .all-connections {
background: #FFFFFF;
border: 1px solid #E3E4E5;
}
body:not(.client) .connection a,
body:not(.client) .connection-group a {
color: #252526;
}
body:not(.client) .recent-connections .connection .thumbnail {
border: 1px solid #E3E4E5;
}
/* IL PASSAGGIO DEL MOUSE SULLE RIGHE, dal 04/09/2026. Segnalato da Piero Luciani:
«l'hover sugli host censiti e' sul verdino».
E' verde perche' e' il verde di Guacamole, e sono TRE regole, non una - lette nel
foglio che l'applicazione serve, non indovinate:
.list-item:not(.selected) .caption:hover { background: #cda }
.list-item.selected { background: #deb }
.recent-connections .connection:hover { background: #cda }
Cambiarne una sola avrebbe lasciato il verde negli altri due punti, ed e' il modo
in cui un tema resta a meta' senza che nessuno lo noti: la riga selezionata e
quella sotto il puntatore non si guardano mai nello stesso istante.
UNA VELATURA E NON L'ARANCIONE PIENO: la riga porta un testo scuro, e riempirla di
`#F84900` vorrebbe dire testo scuro su arancione pieno - 4,6:1, sufficiente ma
piu' faticoso di quanto valga il passaggio di un mouse. Con `rgba` la tinta e'
la stessa del marchio e il contrasto del testo resta quello di prima.
E IL COLORE DEL TESTO NON CAMBIA PIU' AL PASSAGGIO: c'era una riga che lo faceva
diventare arancione, ed e' uscita oggi insieme a questa. Arancione su una velatura
arancione e' la combinazione peggiore delle due; il fondo dice gia' dove si trova
il puntatore. */
body:not(.client) .list-item:not(.selected) .caption:hover {
background: rgba(248, 73, 0, .10);
}
body:not(.client) .list-item.selected {
background: rgba(248, 73, 0, .20);
}
body:not(.client) .recent-connections .connection:hover {
background: rgba(248, 73, 0, .10);
}
/* I CAMPI E I PULSANTI, ovunque fuori dalla sessione: sono gli stessi del
riquadro di accesso, e ripeterli qui e' cio' che rende una pagina di
impostazioni riconoscibile come la stessa applicazione. */
body:not(.client) input[type="text"],
body:not(.client) input[type="password"],
body:not(.client) input[type="email"],
body:not(.client) input[type="number"],
body:not(.client) select,
body:not(.client) textarea {
background: #FFFFFF;
color: #252526;
border: 1px solid #E3E4E5;
border-radius: 0;
}
body:not(.client) input:focus,
body:not(.client) select:focus,
body:not(.client) textarea:focus {
outline: 2px solid #F84900;
outline-offset: 0;
border-color: #F84900;
}
body:not(.client) button,
body:not(.client) input[type="submit"],
body:not(.client) input[type="button"],
body:not(.client) .button {
background: #F84900;
color: #FFFFFF;
border: 0;
border-radius: 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
padding: 8px 14px;
box-shadow: none;
text-shadow: none;
}
body:not(.client) button:hover,
body:not(.client) input[type="submit"]:hover,
body:not(.client) input[type="button"]:hover,
body:not(.client) .button:hover {
background: #6C6F70;
color: #FFFFFF;
}
/*
* 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;
}