hasta
inundar la pantalla. De fabrica ese fondo es el verde de la paleta
`sogo-green`; con las paletas de widu. ya sale naranja, pero se fija aqui
ademas por si el runtime no llegara a generar la clase: NADA en el flujo de
"entraste bien" debe verse verde.
`:not(.md-warn)` es imprescindible: el mismo elemento se reutiliza para el
error de credenciales, y ahi tiene que quedarse rojo. */
#loginContent sg-ripple:not(.md-warn),
#loginContent sg-ripple:not(.md-warn).md-bg {
background-color: var(--orange) !important;
}
/* Palomita y texto sobre el naranja: blanco pleno, no el tono claro de la
paleta (quedaba naranja claro sobre naranja). */
#loginContent sg-ripple-content md-icon,
#loginContent sg-ripple-content .md-fg {
color: #fff !important;
fill: #fff !important;
}
#loginContent sg-ripple-content .md-fg {
font-family: var(--font-body);
font-size: 17px;
letter-spacing: .01em;
}
/* ---- Enlace de vuelta a la ayuda ---------------------------------------- */
main[ui-view="login"]::after {
content: "Configuración IMAP, webmail y ayuda → mail.widu.it.com/info";
position: fixed;
left: 50%;
width: 50%;
bottom: 20px;
text-align: center;
font-family: var(--font-body);
font-size: 12.5px;
color: rgba(23, 19, 16, .48);
pointer-events: none;
}
/* ---- Movil: se apila, naranja arriba y blanco abajo ---------------------- */
@media (max-width: 960px) {
#loginContent {
min-height: 100vh;
}
/* SOGo topa .sg-login en max-width:50%, que solo tiene sentido en el split
horizontal. Apilado hay que soltarlo o el formulario se sale por la
derecha (pasa igual en el login de fabrica). */
#loginContent .sg-login {
max-width: 100% !important;
width: 100% !important;
}
#loginContent .sg-logo {
min-height: 34vh;
padding: 28px !important;
}
#loginContent .sg-logo img {
width: min(260px, 70%) !important;
max-width: 70% !important;
}
#loginContent .sg-login-content {
padding: 32px 24px !important;
}
main[ui-view="login"]::after {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
#loginContent .md-button.md-fab,
#loginContent md-icon {
transition: none !important;
}
#loginContent .md-button.md-fab:not([disabled]):hover {
transform: none;
}
}
/* ==========================================================================
WEBMAIL
Todo lo de aqui abajo cuelga de body[ng-app]:not([ng-app="SOGo.MainUI"]).
MainUI es la app del login; el resto (Mailer, Contacts, Scheduler,
Preferences, Administration) es el correo ya abierto. Ver la regla de oro
de la cabecera.
Los colores ya vienen resueltos por mail-theme-build. Aqui solo va lo que
una paleta no puede dar: la tipografia de la marca y el logo.
========================================================================== */
body[ng-app]:not([ng-app="SOGo.MainUI"]) {
--orange: #FD5107;
--butter: #FCE08D;
--ink: #241B15;
--font-body: "Elms Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ---- Tipografia ---------------------------------------------------------
Se enumeran los elementos en vez de usar un selector universal a proposito.
Un `*` alcanzaria tambien a md-icon —cuyo glifo ES la fuente Material
Icons— y a los del visor de correo en texto plano, donde la anchura
fija es lo que mantiene alineadas las tablas ASCII y las firmas. */
body[ng-app]:not([ng-app="SOGo.MainUI"]),
body[ng-app]:not([ng-app="SOGo.MainUI"]) button,
body[ng-app]:not([ng-app="SOGo.MainUI"]) input,
body[ng-app]:not([ng-app="SOGo.MainUI"]) textarea,
body[ng-app]:not([ng-app="SOGo.MainUI"]) select,
body[ng-app]:not([ng-app="SOGo.MainUI"]) label,
body[ng-app]:not([ng-app="SOGo.MainUI"]) md-toolbar,
body[ng-app]:not([ng-app="SOGo.MainUI"]) md-list-item,
body[ng-app]:not([ng-app="SOGo.MainUI"]) md-tab-item,
body[ng-app]:not([ng-app="SOGo.MainUI"]) md-menu-content,
body[ng-app]:not([ng-app="SOGo.MainUI"]) md-dialog,
body[ng-app]:not([ng-app="SOGo.MainUI"]) md-tooltip,
body[ng-app]:not([ng-app="SOGo.MainUI"]) md-autocomplete,
body[ng-app]:not([ng-app="SOGo.MainUI"]) md-chips,
body[ng-app]:not([ng-app="SOGo.MainUI"]) .md-button,
body[ng-app]:not([ng-app="SOGo.MainUI"]) .md-title,
body[ng-app]:not([ng-app="SOGo.MainUI"]) .md-subhead,
body[ng-app]:not([ng-app="SOGo.MainUI"]) .md-caption,
body[ng-app]:not([ng-app="SOGo.MainUI"]) .sg-md-title,
body[ng-app]:not([ng-app="SOGo.MainUI"]) .sg-md-subhead {
font-family: var(--font-body);
}
/* Los nombres de carpeta y las cabeceras de la lista respiran mejor con algo
de peso; Elms Sans es mas ligera que la Roboto que asume Material. */
body[ng-app]:not([ng-app="SOGo.MainUI"]) md-toolbar .md-title,
body[ng-app]:not([ng-app="SOGo.MainUI"]) .sg-md-title {
font-weight: 600;
letter-spacing: -.005em;
}
/* ---- Logo en la barra lateral -------------------------------------------
La cabecera del sidenav (avatar + nombre + correo) va sobre primary hue-2,
o sea tinta oscura: el wordmark blanco contrasta.
Se pone como background-image y NO con el atajo `background`, que borraria
el background-color que Angular Material inyecta en runtime para esa clase
y dejaria la cabecera transparente. Tampoco se usa ::before: md-toolbar.md-tall
tiene alto fijo y un hijo mas empujaria el correo fuera del recuadro. */
body[ng-app]:not([ng-app="SOGo.MainUI"]) md-sidenav.md-sidenav-left > md-toolbar {
background-image: url("/sig/logo-white.png");
background-repeat: no-repeat;
background-position: right 16px top 14px;
background-size: 58px auto;
}
/* ---- Detalles que la paleta no alcanza ---------------------------------- */
/* styles.css trae este borde en verde fijo (#cbe5c8), fuera de toda paleta:
es la barra vertical de las citas y de los bloques anidados del hilo. */
body[ng-app]:not([ng-app="SOGo.MainUI"]) .sg-subcontent {
border-left-color: var(--butter);
}
/* El resaltado de resultados de busqueda (mark.js) usa el amarillo del
navegador; se alinea con el mantequilla de la marca. */
body[ng-app]:not([ng-app="SOGo.MainUI"]) mark {
background-color: var(--butter);
color: var(--ink);
}
/* Texto plano y codigo: se re-declara la monoespaciada de la marca despues de
la regla de tipografia, para que ningun bloque preformateado herede una
proporcional y pierda la alineacion. */
body[ng-app]:not([ng-app="SOGo.MainUI"]) pre,
body[ng-app]:not([ng-app="SOGo.MainUI"]) code,
body[ng-app]:not([ng-app="SOGo.MainUI"]) tt {
font-family: var(--font-mono);
}